:root {
    --extnav-bg: var(--i-background_2, var(--ipsAreaBackground_light, var(--ipsAreaBackground, Canvas)));
    --extnav-bg-strong: var(--i-background_3, var(--ipsAreaBackground, Canvas));
    --extnav-fg: var(--i-color_root, var(--ipsTextColor, CanvasText));
    --extnav-muted: var(--i-color_soft, var(--ipsTextColor_light, color-mix(in srgb, CanvasText 68%, transparent)));
    --extnav-border: var(--i-border-color, var(--ipsBorderColor, color-mix(in srgb, CanvasText 24%, transparent)));
    --extnav-hover: var(--i-background_hover, color-mix(in srgb, CanvasText 12%, transparent));
    --extnav-active: color-mix(in srgb, var(--extnav-accent) 18%, transparent);
    --extnav-accent: var(--i-color_primary, var(--i-primary, var(--ipsButton_primary, LinkText)));
    --extnav-radius: var(--i-radius_large, 14px);
    --extnav-shadow: var(--i-shadow_large, 0 20px 60px color-mix(in srgb, CanvasText 26%, transparent));
    --extnav-gap: 1rem;
    --extnav-panel-padding: .65rem;
    --extnav-link-padding: .72rem .78rem;
    --extnav-icon-size: 2.15rem;
    --extnav-columns: 3;
}

.extNavNativeHidden {
    display: none !important;
}


.extNavPanel {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: var(--extnav-width, auto);
    min-width: min(320px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: var(--extnav-available-height, calc(100vh - 80px));
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--extnav-fg);
    background: color-mix(in srgb, var(--extnav-bg) 96%, transparent);
    border: 1px solid var(--extnav-border);
    border-radius: var(--extnav-radius);
    box-shadow: var(--extnav-shadow);
    padding: var(--extnav-panel-padding);
    backdrop-filter: blur(16px);
}

.extNavPanel[hidden] {
    display: none !important;
}

.extNavPanel::before {
    content: "";
    position: absolute;
    inset-block-start: -.45rem;
    inline-size: .85rem;
    block-size: .85rem;
    background: inherit;
    border-inline-start: 1px solid var(--extnav-border);
    border-block-start: 1px solid var(--extnav-border);
    transform: translateX(-50%) rotate(45deg);
    inset-inline-start: var(--extnav-caret-left, 2rem);
}

.extNavPanel::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: -12px;
    block-size: 14px;
}

.extNavPanel--above::before {
    inset-block-start: auto;
    inset-block-end: -.45rem;
    border-block-start: 0;
    border-inline-start: 0;
    border-inline-end: 1px solid var(--extnav-border);
    border-block-end: 1px solid var(--extnav-border);
}

.extNavPanel--above::after {
    inset-block-start: auto;
    inset-block-end: -12px;
}

.extNavPanel[data-align="nav"]::before,
.extNavPanel--full_width::before {
    display: none;
}

.extNavMegaWrap {
    display: grid;
    grid-template-columns: repeat(var(--extnav-columns, 3), minmax(0, 1fr));
    gap: var(--extnav-gap);
    align-items: stretch;
}

.extNavPanel--mega,
.extNavPanel--full_width {
    width: var(--extnav-width, 1120px);
    padding: calc(var(--extnav-panel-padding) + .35rem);
}

.extNavPanel--mega {
    max-width: min(1120px, calc(100vw - 24px));
}

.extNavPanel[data-community-mega="true"] {
    --extnav-community-panel-bg: color-mix(in srgb, var(--i-background_2, var(--ipsAreaBackground_light, var(--extnav-bg))) 94%, transparent);
    --extnav-community-panel-bg-deep: color-mix(in srgb, var(--i-background_1, var(--ipsAreaBackground, var(--extnav-bg))) 98%, transparent);
    --extnav-community-card-bg: color-mix(in srgb, var(--i-background_3, var(--ipsAreaBackground, var(--extnav-bg-strong))) 92%, transparent);
    --extnav-community-card-raised: color-mix(in srgb, var(--i-background_4, var(--i-background_3, var(--ipsAreaBackground_light, var(--extnav-bg-strong)))) 88%, transparent);
    --extnav-community-border: color-mix(in srgb, var(--i-color_root, var(--ipsTextColor, CanvasText)) 13%, transparent);
    --extnav-community-border-soft: color-mix(in srgb, var(--i-color_root, var(--ipsTextColor, CanvasText)) 8%, transparent);
    --extnav-community-hover: color-mix(in srgb, var(--extnav-accent, currentColor) 9%, transparent);
    --extnav-community-active: color-mix(in srgb, var(--extnav-accent, currentColor) 14%, transparent);
    --extnav-community-soft: color-mix(in srgb, var(--extnav-fg, CanvasText) 66%, transparent);
    --extnav-community-card-tint: color-mix(in srgb, var(--extnav-accent, currentColor) 8%, transparent);
    --extnav-community-shadow: color-mix(in srgb, var(--i-color_root, var(--ipsTextColor, CanvasText)) 20%, transparent);
    inline-size: min(var(--extnav-width, 1240px), calc(100vw - 32px));
    width: min(var(--extnav-width, 1240px), calc(100vw - 32px));
    max-inline-size: min(var(--extnav-width, 1240px), calc(100vw - 32px));
    max-width: min(var(--extnav-width, 1240px), calc(100vw - 32px));
    block-size: auto !important;
    height: auto !important;
    max-block-size: none !important;
    max-height: none !important;
    padding: clamp(.72rem, .9vw, .95rem);
    overflow: visible !important;
    overflow-block: visible !important;
    overflow-inline: visible !important;
    overscroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-color: var(--extnav-community-border);
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--extnav-accent, currentColor) 8%, transparent), transparent 34%),
        linear-gradient(180deg, var(--extnav-community-panel-bg), var(--extnav-community-panel-bg-deep));
    box-shadow:
        0 22px 52px var(--extnav-community-shadow),
        inset 0 1px 0 color-mix(in srgb, var(--i-color_root, var(--ipsTextColor, CanvasText)) 6%, transparent);
    backdrop-filter: blur(22px) saturate(145%);
}

.extNavPanel[data-community-mega="true"]::-webkit-scrollbar {
    inline-size: 0;
    block-size: 0;
}

.extNavPanel[data-community-mega="true"] > .extNavMegaLayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(238px, 23vw, 292px);
    gap: clamp(.75rem, .9vw, 1rem);
    align-items: stretch;
    min-width: 0;
    block-size: auto !important;
    max-block-size: none !important;
    overflow: visible !important;
}

.extNavPanel[data-community-mega="true"] > .extNavMegaLayout > .extNavMegaWrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    min-width: 0;
    align-items: start;
    block-size: auto !important;
    max-block-size: none !important;
    overflow: visible !important;
}

.extNavPanel--full_width {
    max-width: calc(100vw - 24px);
}

.extNavPanel--full_width .extNavMegaWrap {
    grid-template-columns: repeat(var(--extnav-columns, 4), minmax(0, 1fr));
}

.extNavColumn {
    min-width: 0;
    padding: .35rem;
}

.extNavPanel[data-community-mega="true"] .extNavColumn {
    min-width: 0;
    padding: .08rem clamp(.55rem, .8vw, .78rem);
    block-size: auto !important;
    max-block-size: none !important;
    overflow: visible !important;
}

.extNavPanel[data-community-mega="true"] > .extNavMegaLayout > .extNavMegaWrap > .extNavColumn + .extNavColumn {
    border-inline-start: 1px solid var(--extnav-community-border-soft);
}

.extNavColumn h3 {
    margin: .2rem .35rem .75rem;
    color: var(--extnav-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.extNavPanel[data-community-mega="true"] .extNavColumn h3 {
    margin: 0 0 .48rem;
    color: color-mix(in srgb, var(--extnav-accent, currentColor) 86%, var(--extnav-fg, CanvasText) 14%);
    font-size: .68rem;
    font-weight: 820;
    letter-spacing: .16em;
}

.extNavList,
.extNavSubList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.extNavItem {
    position: relative;
}

.extNavLink {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .65rem;
    align-items: center;
    min-width: 0;
    padding: var(--extnav-link-padding);
    border-radius: max(6px, calc(var(--extnav-radius) - 6px));
    color: var(--extnav-fg);
    text-decoration: none;
    outline: none;
}

.extNavPanel[data-community-mega="true"] .extNavLink {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: .28rem .58rem;
    align-items: start;
    padding: .42rem .18rem;
    min-block-size: 0;
    border-radius: .74rem;
}

.extNavLink--noIcon {
    grid-template-columns: 1fr auto;
}

.extNavLink:hover,
.extNavLink:focus-visible,
.extNavItem:focus-within > .extNavLink {
    background: var(--extnav-hover);
    color: var(--extnav-fg);
    text-decoration: none;
}

.extNavItem.is-active > .extNavLink,
.extNavItem.is-active > .extNavLink:hover,
.extNavItem.is-active > .extNavLink:focus-visible {
    background: var(--extnav-active);
    color: var(--extnav-fg);
}

.extNavPanel[data-community-mega="true"] .extNavItem + .extNavItem {
    border-top: 1px solid var(--extnav-community-border-soft);
}

.extNavPanel[data-community-mega="true"] .extNavLink:hover,
.extNavPanel[data-community-mega="true"] .extNavLink:focus-visible,
.extNavPanel[data-community-mega="true"] .extNavItem:focus-within > .extNavLink {
    background: var(--extnav-community-hover);
}

.extNavPanel[data-community-mega="true"] .extNavItem.is-active > .extNavLink,
.extNavPanel[data-community-mega="true"] .extNavItem.is-active > .extNavLink:hover,
.extNavPanel[data-community-mega="true"] .extNavItem.is-active > .extNavLink:focus-visible {
    background: var(--extnav-community-active);
}

.extNavLink > i:first-child {
    display: inline-grid;
    place-items: center;
    inline-size: var(--extnav-icon-size);
    block-size: var(--extnav-icon-size);
    border: 1px solid var(--extnav-border);
    border-radius: .55rem;
    color: var(--extnav-accent);
    background: var(--extnav-bg-strong);
}

.extNavPanel[data-community-mega="true"] .extNavLink > i:first-child {
    grid-row: 1 / 3;
    inline-size: 1.98rem;
    block-size: 1.98rem;
    border-color: var(--extnav-community-border);
    border-radius: .66rem;
    color: color-mix(in srgb, var(--extnav-accent, currentColor) 88%, var(--extnav-fg, CanvasText) 12%);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--extnav-fg, CanvasText) 5%, transparent), transparent),
        var(--extnav-community-card-bg);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--extnav-fg, CanvasText) 5%, transparent);
}

.extNavText {
    font-weight: 700;
    line-height: 1.2;
}

.extNavPanel[data-community-mega="true"] .extNavText {
    min-width: 0;
    font-size: .88rem;
    font-weight: 780;
    line-height: 1.2;
}

.extNavLink small {
    grid-column: 2 / -1;
    margin-top: -.15rem;
    color: var(--extnav-muted);
    font-size: .82rem;
    line-height: 1.35;
}

.extNavPanel[data-community-mega="true"] .extNavLink small {
    grid-column: 2 / -1;
    margin-top: 0;
    color: var(--extnav-community-soft);
    font-size: .73rem;
    line-height: 1.3;
}

.extNavLink--noIcon small {
    grid-column: 1 / -1;
}

.extNavArrow {
    color: var(--extnav-muted);
    font-size: .78rem;
}

.extNavPanel--classic {
    width: var(--extnav-width, 320px);
}

.extNavPanel--classic .extNavItem > .extNavSubList,
.extNavPanel--icon_list .extNavItem > .extNavSubList,
.extNavPanel--cards .extNavItem > .extNavSubList,
.extNavPanel--mega .extNavItem > .extNavSubList,
.extNavPanel--full_width .extNavItem > .extNavSubList {
    margin-inline-start: calc(var(--extnav-icon-size) + .65rem);
    margin-block: .2rem .45rem;
    padding-inline-start: .6rem;
    border-inline-start: 1px solid var(--extnav-border);
}

.extNavPanel--icon_list .extNavLink {
    grid-template-columns: auto 1fr auto;
}

.extNavPanel--cards {
    width: var(--extnav-width, 760px);
    padding: 1rem;
}

.extNavPanel--cards > .extNavList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .85rem;
}

.extNavPanel--cards .extNavLink {
    min-height: 7rem;
    align-content: start;
    border: 1px solid var(--extnav-border);
    background: var(--extnav-bg-strong);
}

.extNavPanel--flyout {
    width: var(--extnav-width, 280px);
    overflow: visible;
}

.extNavPanel--flyout .extNavItem.has-children::after {
    content: "";
    position: absolute;
    inset-block: -.2rem;
    inset-inline-start: 100%;
    inline-size: .9rem;
    display: none;
}

.extNavPanel--flyout .extNavItem > .extNavSubList {
    position: absolute;
    inset-block-start: -.45rem;
    inset-inline-start: calc(100% + .28rem);
    width: var(--extnav-width, 280px);
    min-height: 100%;
    max-height: min(82vh, var(--extnav-available-height, calc(100vh - 32px)));
    overflow: auto;
    display: none;
    padding: .55rem;
    list-style: none;
    background: var(--extnav-bg);
    border: 1px solid var(--extnav-border);
    border-radius: var(--extnav-radius);
    box-shadow: var(--extnav-shadow);
}

.extNavPanel--flyout .extNavItem:hover::after,
.extNavPanel--flyout .extNavItem:focus-within::after,
.extNavPanel--flyout .extNavItem:hover > .extNavSubList,
.extNavPanel--flyout .extNavItem:focus-within > .extNavSubList {
    display: block;
}

.extNavCta {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-width: 220px;
    padding: 1.2rem;
    border: 1px solid var(--extnav-border);
    border-radius: max(8px, calc(var(--extnav-radius) - 2px));
    background: linear-gradient(140deg, color-mix(in srgb, var(--extnav-accent) 14%, var(--extnav-bg)), var(--extnav-bg-strong));
    text-align: center;
}

.extNavPanel[data-community-mega="true"] .extNavCta {
    min-width: 0;
    align-self: stretch;
    justify-content: center;
    gap: .58rem;
    padding: clamp(.82rem, .95vw, 1rem);
    border-color: var(--extnav-community-border);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 50% 0%, var(--extnav-community-card-tint), transparent 48%),
        linear-gradient(180deg, var(--extnav-community-card-raised), var(--extnav-community-card-bg));
    text-align: center;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--extnav-fg, CanvasText) 6%, transparent);
    block-size: auto !important;
    max-block-size: none !important;
    overflow: visible !important;
}

.extNavCta > i,
.extNavCtaAvatar {
    margin-inline: auto;
    display: inline-grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    color: var(--extnav-accent);
    border-radius: 50%;
    background: var(--extnav-bg);
}

.extNavPanel[data-community-mega="true"] .extNavCta > i,
.extNavPanel[data-community-mega="true"] .extNavCtaAvatar {
    margin-inline: auto;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: .82rem;
    background: color-mix(in srgb, var(--extnav-accent, currentColor) 11%, var(--extnav-community-card-bg));
    color: color-mix(in srgb, var(--extnav-accent, currentColor) 88%, var(--extnav-fg, CanvasText) 12%);
}

.extNavCtaAvatar {
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
}

.extNavCtaVisual--image {
    border-radius: .82rem;
    border: 1px solid var(--extnav-border);
    background: var(--extnav-bg);
}

.extNavPanel[data-community-mega="true"] .extNavCtaVisual--image {
    border-color: var(--extnav-community-border);
    background: color-mix(in srgb, var(--extnav-accent, currentColor) 11%, var(--extnav-community-card-bg));
}

.extNavCta > img {
    max-inline-size: 5rem;
    max-block-size: 5rem;
    object-fit: contain;
    margin-inline: auto;
}

.extNavCta h3 {
    margin: 0;
    font-size: 1.05rem;
}

.extNavPanel[data-community-mega="true"] .extNavCta h3 {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.extNavCta p {
    margin: 0;
    color: var(--extnav-muted);
    line-height: 1.45;
}

.extNavPanel[data-community-mega="true"] .extNavCta p {
    color: var(--extnav-community-soft);
    font-size: .84rem;
    line-height: 1.38;
}

.extNavCtaActions {
    display: grid;
    gap: .5rem;
    margin-top: .2rem;
}

.extNavCtaButton {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 2.4rem;
    border-radius: .55rem;
    padding: .55rem .8rem;
    background: var(--extnav-accent);
    color: var(--i-color_on-primary, var(--i-color_onPrimary, Canvas));
    text-decoration: none;
    font-weight: 750;
}

.extNavPanel[data-community-mega="true"] .extNavCtaButton {
    min-height: 2.22rem;
    border-radius: .72rem;
    padding-block: .46rem;
    background: var(--extnav-accent, currentColor);
    color: var(--i-color_on-primary, var(--i-color_onPrimary, var(--i-background_1, Canvas)));
}

.extNavCtaButton + .extNavCtaButton {
    background: transparent;
    color: var(--extnav-fg);
    border: 1px solid var(--extnav-border);
}

.extNavPanel[data-community-mega="true"] .extNavCtaButton + .extNavCtaButton {
    border-color: var(--extnav-community-border);
    color: var(--extnav-fg, CanvasText);
    background: color-mix(in srgb, var(--extnav-community-card-bg) 70%, transparent);
}

.extNavMobileBack {
    display: none;
}

.extNavLink:focus-visible {
    outline: 2px solid var(--extnav-accent);
    outline-offset: 2px;
}

.extNavMobileBack:focus-visible {
    outline: 2px solid var(--extnav-accent);
    outline-offset: -2px;
}


@media (min-width: 981px) {
    .extNavPanel[data-community-mega="true"] {
        height: auto !important;
        block-size: auto !important;
        max-height: none !important;
        max-block-size: none !important;
        overflow: visible !important;
        overflow-block: visible !important;
        overflow-inline: visible !important;
    }
    .extNavPanel[data-community-mega="true"] > .extNavMegaLayout,
    .extNavPanel[data-community-mega="true"] > .extNavMegaLayout > .extNavMegaWrap,
    .extNavPanel[data-community-mega="true"] .extNavColumn,
    .extNavPanel[data-community-mega="true"] .extNavCta {
        height: auto !important;
        block-size: auto !important;
        max-height: none !important;
        max-block-size: none !important;
        overflow: visible !important;
    }
}

@media (min-width: 981px) and (max-height: 760px) {
    .extNavPanel[data-community-mega="true"] {
        padding: .68rem;
    }
    .extNavPanel[data-community-mega="true"] .extNavColumn {
        padding-inline: .5rem;
    }
    .extNavPanel[data-community-mega="true"] .extNavColumn h3 {
        margin-bottom: .38rem;
    }
    .extNavPanel[data-community-mega="true"] .extNavLink {
        padding-block: .34rem;
        gap: .22rem .5rem;
    }
    .extNavPanel[data-community-mega="true"] .extNavLink > i:first-child {
        inline-size: 1.82rem;
        block-size: 1.82rem;
    }
    .extNavPanel[data-community-mega="true"] .extNavText {
        font-size: .84rem;
    }
    .extNavPanel[data-community-mega="true"] .extNavLink small {
        font-size: .7rem;
        line-height: 1.24;
    }
    .extNavPanel[data-community-mega="true"] .extNavCta {
        padding: .74rem;
        gap: .46rem;
    }
    .extNavPanel[data-community-mega="true"] .extNavCta > i,
.extNavPanel[data-community-mega="true"] .extNavCtaAvatar {
        inline-size: 2.18rem;
        block-size: 2.18rem;
    }
    .extNavPanel[data-community-mega="true"] .extNavCta p {
        font-size: .79rem;
        line-height: 1.32;
    }
    .extNavPanel[data-community-mega="true"] .extNavCtaButton {
        min-height: 2.05rem;
        padding-block: .38rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .extNavMobileAware .extNavMobilePanel {
        transition: none;
    }
}

@media (max-width: 980px) {
    .extNavPanel {
        display: none !important;
    }
    .extNavNativeHidden {
        display: revert !important;
    }
    .extNavMobileAware {
        position: relative;
        overflow-x: clip;
    }
    .extNavMobileAware .extNavMobilePanel {
        position: absolute;
        inset: 0;
        z-index: calc(20 + var(--extnav-mobile-depth, 1));
        display: block !important;
        min-block-size: 100%;
        overflow: auto;
        background: var(--i-background_2, var(--ipsAreaBackground_light, var(--ipsAreaBackground, inherit)));
        transform: translateX(100%);
        transition: transform .22s ease;
        visibility: hidden;
        pointer-events: none;
    }
    .extNavMobileAware li.is-extnav-mobile-open > .extNavMobilePanel {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }
    .extNavMobileBack {
        display: block;
        width: 100%;
        padding: .8rem 1rem;
        text-align: left;
        border: 0;
        border-block-end: 1px solid var(--extnav-border);
        background: transparent;
        color: inherit;
        font: inherit;
    }
    .extNavMobileBack i {
        margin-inline-end: .5rem;
    }
}

@media (max-width: 980px) {
    .extNavPanel--mega {
        max-width: calc(100vw - 24px);
    }
    .extNavPanel[data-community-mega="true"] > .extNavMegaLayout {
        grid-template-columns: 1fr;
    }
    .extNavPanel[data-community-mega="true"] > .extNavMegaLayout > .extNavMegaWrap {
        grid-template-columns: 1fr;
        gap: .8rem;
    }
    .extNavPanel[data-community-mega="true"] > .extNavMegaLayout > .extNavMegaWrap > .extNavColumn + .extNavColumn {
        border-inline-start: 0;
        border-top: 1px solid var(--extnav-community-border-soft);
        padding-top: 1rem;
    }
}

@media (max-width: 720px) {
    .extNavMegaWrap {
        grid-template-columns: 1fr;
    }
}

/* Production guard: Community mega menus must never use an internal desktop scrollbar. */
@media (min-width: 981px) {
    html body .extNavPanel[data-community-mega="true"],
    html body .extNavPanel[data-community-mega="true"].is-open {
        height: auto !important;
        block-size: auto !important;
        max-height: none !important;
        max-block-size: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        overscroll-behavior: auto !important;
        scrollbar-width: none !important;
    }

    html body .extNavPanel[data-community-mega="true"] > .extNavMegaLayout,
    html body .extNavPanel[data-community-mega="true"] > .extNavMegaLayout > .extNavMegaWrap,
    html body .extNavPanel[data-community-mega="true"] .extNavColumn,
    html body .extNavPanel[data-community-mega="true"] .extNavCta {
        height: auto !important;
        block-size: auto !important;
        max-height: none !important;
        max-block-size: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit {
        padding: .62rem;
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit > .extNavMegaLayout {
        gap: .68rem;
        grid-template-columns: minmax(0, 1fr) clamp(224px, 22vw, 274px);
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavColumn {
        padding-inline: .46rem;
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavColumn h3 {
        margin-bottom: .32rem;
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavLink {
        padding-block: .3rem;
        gap: .2rem .46rem;
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavLink > i:first-child {
        inline-size: 1.72rem;
        block-size: 1.72rem;
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavText {
        font-size: .82rem;
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavLink small {
        font-size: .68rem;
        line-height: 1.2;
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavCta {
        padding: .68rem;
        gap: .42rem;
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavCta > i,
    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavCtaAvatar,
    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavCtaVisual--image {
        inline-size: 2.05rem;
        block-size: 2.05rem;
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavCta h3 {
        font-size: .94rem;
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavCta p {
        font-size: .76rem;
        line-height: 1.28;
    }

    html body .extNavPanel[data-community-mega="true"].extNavPanel--compactFit .extNavCtaButton {
        min-height: 1.96rem;
        padding-block: .32rem;
    }
}


/* Baseline: adaptive desktop fit for enhanced panels. */
.extNavPanel--viewportFit {
    max-inline-size: calc(100vw - 24px) !important;
}

.extNavPanel--compactFit:not([data-community-mega="true"]) {
    --extnav-panel-padding: .55rem;
    --extnav-gap: .65rem;
    --extnav-link-padding: .58rem .64rem;
    --extnav-icon-size: 1.86rem;
}

.extNavPanel--compactFit.extNavPanel--cards > .extNavList {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.extNavPanel--compactFit.extNavPanel--mega .extNavMegaWrap,
.extNavPanel--compactFit.extNavPanel--full_width .extNavMegaWrap {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@media (max-width: 1180px) {
    .extNavPanel--mega .extNavMegaWrap,
    .extNavPanel--full_width .extNavMegaWrap {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }
    .extNavPanel--cards > .extNavList {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
}


.extNavBlueprintHidden {
    display: none !important;
}

/* Compact secondary activity/feed links inside the production Community mega menu. */
.extNavPanel[data-community-mega="true"] .extNavSubList {
    margin: .14rem 0 .34rem calc(1.98rem + .58rem);
    padding: .08rem 0 .08rem .52rem;
    border-inline-start: 1px solid var(--extnav-community-border-soft);
}

.extNavPanel[data-community-mega="true"] .extNavSubList .extNavItem,
.extNavPanel[data-community-mega="true"] .extNavSubList .extNavItem + .extNavItem {
    border-top: 0;
}

.extNavPanel[data-community-mega="true"] .extNavSubList .extNavLink {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: .32rem;
    min-block-size: 0;
    padding: .16rem .24rem;
    border-radius: .42rem;
    color: var(--extnav-community-soft);
    font-size: .69rem;
    line-height: 1.24;
}

.extNavPanel[data-community-mega="true"] .extNavSubList .extNavLink::before {
    content: "";
    inline-size: .24rem;
    block-size: .24rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--extnav-accent, currentColor) 58%, transparent);
    flex: 0 0 auto;
}

.extNavPanel[data-community-mega="true"] .extNavSubList .extNavLink > i:first-child,
.extNavPanel[data-community-mega="true"] .extNavSubList .extNavArrow,
.extNavPanel[data-community-mega="true"] .extNavSubList .extNavLink small {
    display: none;
}

.extNavPanel[data-community-mega="true"] .extNavSubList .extNavText {
    font-size: inherit;
    font-weight: 650;
    line-height: inherit;
}

/* Baseline: every enhanced panel keeps the anchored pointer visible, including nav-aligned and full-width layouts. */
.extNavPanel[data-align="nav"]::before,
.extNavPanel--full_width::before {
    display: block;
}

/* Baseline: collapsible nested Community/activity groups start closed until clicked. */
.extNavPanel--collapsedChildren .extNavItem.is-collapsible > .extNavLink {
    cursor: pointer;
}

.extNavPanel--collapsedChildren .extNavItem.is-collapsible.is-collapsed > .extNavSubList {
    display: none !important;
}

.extNavPanel--collapsedChildren .extNavItem.is-collapsible:not(.is-collapsed) > .extNavLink .extNavArrow {
    transform: rotate(90deg);
}

.extNavArrow {
    transition: transform .18s ease;
}


/* Baseline: no top-level active/open colour or background overrides. Active tabs remain theme-owned. */

/* Baseline: consistent anchored caret, viewport-safe panel bodies, and adaptive nav fitting. */
html body .extNavPanel {
    overflow: visible !important;
}

html body .extNavPanel::before {
    display: block !important;
    z-index: 2;
    pointer-events: none;
}

html body .extNavPanel::after {
    pointer-events: auto;
}

html body .extNavPanel:not(.extNavPanel--flyout):not([data-community-mega="true"]) > .extNavList,
html body .extNavPanel:not(.extNavPanel--flyout):not([data-community-mega="true"]) > .extNavMegaWrap,
html body .extNavPanel:not(.extNavPanel--flyout):not([data-community-mega="true"]) > .extNavMegaLayout {
    max-block-size: var(--extnav-available-height, calc(100vh - 96px));
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

html body .extNavPanel[data-native-key="history"] {
    --extnav-panel-padding: .72rem;
    --extnav-gap: .74rem;
    --extnav-link-padding: .48rem .58rem;
    --extnav-icon-size: 1.95rem;
}

html body .extNavPanel[data-native-key="history"] .extNavColumn h3 {
    margin-block-end: .42rem;
}

html body .extNavPanel[data-native-key="history"] .extNavLink small {
    font-size: .78rem;
    line-height: 1.28;
}

html body .extNavPanel[data-native-key="about"].extNavPanel--collapsedChildren .extNavSubList {
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    background: transparent !important;
    border-block: 0 !important;
    border-inline-end: 0 !important;
    border-radius: 0 !important;
}

html body .extNavPanel--flyout .extNavItem.has-children::after {
    inset-inline-start: calc(100% - .18rem);
    inline-size: 1.65rem;
}

html body .extNavPanel--flyout .extNavItem > .extNavSubList {
    inset-inline-start: calc(100% + .02rem);
    max-block-size: min(76vh, var(--extnav-available-height, calc(100vh - 36px)));
}

/* Baseline: generated direct items and compact history menu polish. */
.extNavGeneratedRoot > a,
.extNavGeneratedRoot > button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 100%;
    white-space: nowrap;
}

.extNavGeneratedRoot > a i,
.extNavGeneratedRoot > button i {
    flex: 0 0 auto;
}

.extNavPanel[data-native-key="history"] {
    inline-size: min(var(--extnav-width, 840px), calc(100vw - 24px));
    width: min(var(--extnav-width, 840px), calc(100vw - 24px));
    max-inline-size: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: clamp(.72rem, .9vw, .95rem);
}

.extNavPanel[data-native-key="history"] .extNavMegaWrap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.35rem, .75vw, .65rem);
}

.extNavPanel[data-native-key="history"] .extNavColumn {
    padding: .25rem .35rem;
}

.extNavPanel[data-native-key="history"] .extNavColumn h3 {
    margin: .1rem .35rem .45rem;
    font-size: .68rem;
    letter-spacing: .12em;
}

.extNavPanel[data-native-key="history"] .extNavLink {
    padding: .56rem .62rem;
    gap: .55rem;
}

.extNavPanel[data-native-key="history"] .extNavIcon {
    inline-size: 1.85rem;
    block-size: 1.85rem;
}

.extNavPanel[data-native-key="history"] .extNavText {
    font-size: .96em;
}

@media (max-width: 1180px) {
    .extNavPanel[data-native-key="history"] {
        inline-size: min(720px, calc(100vw - 20px));
        width: min(720px, calc(100vw - 20px));
    }
    .extNavPanel[data-native-key="history"] .extNavMegaWrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .extNavPanel[data-native-key="history"] .extNavMegaWrap {
        grid-template-columns: 1fr;
    }
}

/* Baseline: grand History archive panel and no-snap interaction polish. */
.extNavPanel--archive,
html body .extNavPanel[data-native-key="history"].extNavPanel--archive {
    --extnav-history-gold: color-mix(in srgb, #d6b15d 72%, var(--extnav-accent, currentColor) 28%);
    --extnav-history-ink: color-mix(in srgb, var(--extnav-bg, Canvas) 82%, #111 18%);
    inline-size: min(var(--extnav-width, 780px), calc(100vw - 28px));
    width: min(var(--extnav-width, 780px), calc(100vw - 28px));
    max-inline-size: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    padding: clamp(.72rem, .95vw, 1rem);
    border-color: color-mix(in srgb, var(--extnav-history-gold) 38%, var(--extnav-border));
    background:
        radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--extnav-history-gold) 24%, transparent), transparent 38%),
        radial-gradient(circle at 100% 18%, color-mix(in srgb, var(--extnav-accent, currentColor) 13%, transparent), transparent 36%),
        linear-gradient(145deg, color-mix(in srgb, var(--extnav-bg) 96%, #050505 4%), color-mix(in srgb, var(--extnav-bg-strong) 92%, #050505 8%));
    box-shadow:
        0 22px 58px color-mix(in srgb, #000 34%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--extnav-history-gold) 20%, transparent);
    overflow: visible !important;
}

.extNavPanel--archive > .extNavArchive {
    display: grid;
    gap: clamp(.62rem, .85vw, .86rem);
    max-block-size: var(--extnav-available-height, calc(100vh - 96px));
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: .05rem;
}

.extNavArchiveHero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .72rem;
    align-items: center;
    padding: clamp(.68rem, .9vw, .92rem);
    border: 1px solid color-mix(in srgb, var(--extnav-history-gold) 35%, var(--extnav-border));
    border-radius: calc(var(--extnav-radius) - 2px);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--extnav-history-gold) 14%, transparent), transparent 54%),
        color-mix(in srgb, var(--extnav-bg-strong) 90%, transparent);
}

.extNavArchiveBadge {
    display: inline-grid;
    place-items: center;
    inline-size: 2.7rem;
    block-size: 2.7rem;
    border-radius: .82rem;
    color: var(--extnav-history-gold);
    background: color-mix(in srgb, var(--extnav-history-gold) 11%, var(--extnav-bg-strong));
    border: 1px solid color-mix(in srgb, var(--extnav-history-gold) 38%, var(--extnav-border));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
}

.extNavArchiveHeroCopy {
    min-width: 0;
}

.extNavArchiveEyebrow {
    display: block;
    margin-block-end: .18rem;
    color: var(--extnav-history-gold);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.extNavArchiveHero h3 {
    margin: 0;
    font-size: clamp(1.05rem, 1.2vw, 1.24rem);
    line-height: 1.15;
}

.extNavArchiveHero p {
    margin: .28rem 0 0;
    color: var(--extnav-muted);
    font-size: .84rem;
    line-height: 1.36;
}

.extNavArchivePills {
    display: flex;
    flex-wrap: wrap;
    gap: .34rem;
    margin-block-start: .48rem;
}

.extNavArchivePills span {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.45rem;
    padding: .16rem .46rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--extnav-history-gold) 30%, var(--extnav-border));
    color: color-mix(in srgb, var(--extnav-history-gold) 82%, var(--extnav-fg) 18%);
    background: color-mix(in srgb, var(--extnav-history-gold) 9%, transparent);
    font-size: .68rem;
    font-weight: 760;
}

.extNavArchiveGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.54rem, .78vw, .72rem);
}

.extNavArchiveSection {
    min-width: 0;
    padding: .2rem;
}

.extNavArchiveSection h4 {
    margin: .08rem .42rem .42rem;
    color: color-mix(in srgb, var(--extnav-history-gold) 78%, var(--extnav-fg) 22%);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.extNavPanel--archive .extNavList {
    display: grid;
    gap: .18rem;
}

.extNavPanel--archive .extNavLink {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .52rem;
    min-block-size: 0;
    padding: .48rem .52rem;
    border: 1px solid transparent;
    border-radius: .72rem;
}

.extNavPanel--archive .extNavLink:hover,
.extNavPanel--archive .extNavLink:focus-visible,
.extNavPanel--archive .extNavItem:focus-within > .extNavLink {
    border-color: color-mix(in srgb, var(--extnav-history-gold) 28%, var(--extnav-border));
    background: color-mix(in srgb, var(--extnav-history-gold) 10%, var(--extnav-hover));
}

.extNavPanel--archive .extNavLink > i:first-child {
    grid-row: 1 / 3;
    inline-size: 1.86rem;
    block-size: 1.86rem;
    border-radius: .58rem;
    color: var(--extnav-history-gold);
    background: color-mix(in srgb, var(--extnav-history-gold) 9%, var(--extnav-bg-strong));
    border-color: color-mix(in srgb, var(--extnav-history-gold) 24%, var(--extnav-border));
}

.extNavPanel--archive .extNavText {
    font-size: .91rem;
    font-weight: 780;
}

.extNavPanel--archive .extNavLink small {
    grid-column: 2 / -1;
    margin-top: -.08rem;
    font-size: .72rem;
    line-height: 1.28;
}

.extNavArchiveSpotlight {
    display: grid;
    gap: .24rem;
    padding: .62rem .78rem;
    border-radius: .78rem;
    border: 1px solid color-mix(in srgb, var(--extnav-history-gold) 26%, var(--extnav-border));
    background: color-mix(in srgb, var(--extnav-history-gold) 8%, transparent);
}

.extNavArchiveSpotlight strong {
    color: var(--extnav-fg);
    font-size: .9rem;
}

.extNavArchiveSpotlight span {
    color: var(--extnav-muted);
    font-size: .76rem;
    line-height: 1.32;
}

.extNavArchiveSpotlightLink {
    justify-self: start;
    margin-block-start: .16rem;
    color: color-mix(in srgb, var(--extnav-history-gold) 86%, var(--extnav-fg) 14%);
    font-weight: 800;
    text-decoration: none;
}

.extNavPanel--archive.extNavPanel--compactFit .extNavArchiveGrid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

@media (max-width: 980px) {
    .extNavPanel--archive > .extNavArchive {
        max-block-size: calc(100vh - 48px);
    }
    .extNavArchiveGrid {
        grid-template-columns: 1fr;
    }
}


html body .extNavPanel--archive,
html body .extNavPanel[data-native-key="history"].extNavPanel--archive {
    --extnav-history-gold: #d8c27a;
    --extnav-history-surface: color-mix(in srgb, var(--extnav-bg) 92%, var(--extnav-fg) 8%);
    --extnav-history-line: color-mix(in srgb, var(--extnav-history-gold) 30%, var(--extnav-border));
    inline-size: min(var(--extnav-width, 860px), calc(100vw - 24px));
    width: min(var(--extnav-width, 860px), calc(100vw - 24px));
    max-inline-size: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    background:
        radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--extnav-history-gold) 12%, transparent), transparent 32%),
        color-mix(in srgb, var(--extnav-bg) 94%, transparent) !important;
    border-color: color-mix(in srgb, var(--extnav-history-gold) 24%, var(--extnav-border)) !important;
    color: var(--extnav-fg) !important;
}

html body .extNavPanel--archive::before,
html body .extNavPanel[data-native-key="history"].extNavPanel--archive::before {
    border-color: color-mix(in srgb, var(--extnav-history-gold) 24%, var(--extnav-border)) !important;
}

html body .extNavPanel--archive > .extNavArchive {
    max-block-size: var(--extnav-available-height, calc(100vh - 96px));
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--extnav-history-gold) 48%, var(--extnav-border)) transparent;
}

html body .extNavPanel--archive .extNavArchiveHero {
    padding: clamp(.62rem, .82vw, .9rem);
    border-color: var(--extnav-history-line);
    background: color-mix(in srgb, var(--extnav-history-surface) 88%, transparent) !important;
}


/* Baseline: History archive home lives in the top hero; no bottom CTA strip. */
html body .extNavPanel--archive .extNavArchiveHero {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(.68rem, .9vw, 1rem);
}

html body .extNavPanel--archive .extNavArchiveHeroActions {
    display: grid;
    justify-items: end;
    align-content: center;
    gap: .42rem;
    min-inline-size: clamp(190px, 22vw, 290px);
    text-align: end;
}

html body .extNavPanel--archive .extNavArchiveHeroNote {
    color: var(--extnav-muted);
    font-size: .76rem;
    line-height: 1.3;
}

html body .extNavPanel--archive .extNavArchiveHeroButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.12rem;
    padding: .42rem .74rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--extnav-history-gold) 42%, var(--extnav-border));
    color: color-mix(in srgb, var(--extnav-history-gold) 88%, var(--extnav-fg) 12%);
    background: color-mix(in srgb, var(--extnav-history-gold) 12%, transparent);
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

html body .extNavPanel--archive .extNavArchiveHeroButton:hover,
html body .extNavPanel--archive .extNavArchiveHeroButton:focus-visible {
    background: color-mix(in srgb, var(--extnav-history-gold) 20%, var(--extnav-hover));
    text-decoration: none;
}

html body .extNavPanel--archive .extNavArchiveSpotlight {
    display: none !important;
}

@media (max-width: 980px) {
    html body .extNavPanel--archive .extNavArchiveHero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    html body .extNavPanel--archive .extNavArchiveHeroActions {
        grid-column: 1 / -1;
        justify-items: start;
        min-inline-size: 0;
        text-align: start;
    }
}

html body .extNavPanel--archive .extNavArchiveGrid {
    gap: clamp(.28rem, .58vw, .52rem);
}

html body .extNavPanel--archive .extNavLink {
    padding: .42rem .5rem;
    border-radius: .68rem;
}

html body .extNavPanel--archive .extNavLink > i:first-child {
    inline-size: 1.76rem;
    block-size: 1.76rem;
}

html body .extNavPanel--archive .extNavText {
    font-size: .9rem;
}

html body .extNavPanel--archive .extNavLink small {
    font-size: .7rem;
    line-height: 1.24;
}

@media (max-width: 980px) {
    html body .extNavPonFitNav > li.extNavNativeOverflowHidden {
        display: list-item !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}


/* Baseline: side/mobile style themes use native/simple navigation, not desktop panels. */
html.extNavSimpleMode body .extNavPanel,
body.extNavSimpleMode .extNavPanel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Baseline: History is a wide archive mega panel on desktop. */
@media (min-width: 981px) {
    html body .extNavPanel[data-native-key="history"].extNavPanel--archive {
        inline-size: min(var(--extnav-width, 1180px), calc(100vw - 32px));
        width: min(var(--extnav-width, 1180px), calc(100vw - 32px));
        max-inline-size: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        overflow: visible !important;
    }

    html body .extNavPanel[data-native-key="history"].extNavPanel--archive > .extNavArchive {
        max-block-size: none !important;
        overflow: visible !important;
    }

    html body .extNavPanel[data-native-key="history"].extNavPanel--archive .extNavArchiveGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(.5rem, .8vw, .85rem);
    }

    html body .extNavPanel[data-native-key="history"].extNavPanel--archive .extNavArchiveSpotlight {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 1rem;
    }

    html body .extNavPanel[data-native-key="history"].extNavPanel--archive .extNavArchiveSpotlightLink {
        margin-block-start: 0;
        white-space: nowrap;
    }
}

@media (min-width: 981px) and (max-width: 1220px) {
    html body .extNavPanel[data-native-key="history"].extNavPanel--archive .extNavArchiveGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Baseline: desktop enhanced panels should feel intentional and readable. */
@media (min-width: 981px) {
    html body .extNavPanel {
        --extnav-panel-padding: .82rem;
        --extnav-link-padding: .82rem .9rem;
        --extnav-icon-size: 2.32rem;
    }

    html body .extNavPanel .extNavText {
        font-size: .98rem;
    }

    html body .extNavPanel .extNavLink small {
        font-size: .78rem;
        line-height: 1.32;
    }

    html body .extNavPanel--flyout,
    html body .extNavPanel--classic {
        min-width: min(380px, calc(100vw - 32px));
    }

    html body .extNavPanel--cards {
        width: min(var(--extnav-width, 900px), calc(100vw - 32px));
    }
}

/* Baseline: front-end safety net for duplicate native top-level rows after a PON import. */
html body .extNavPonFitNav > li.extNavBlueprintDuplicateHidden,
html body .extNavPonFitNav [role="menu"] .extNavBlueprintDuplicateHidden {
    display: none !important;
}

/* Baseline: front-end safety ordering for the PON desktop row.
   This only applies to enhanced horizontal desktop nav; side/simple navigation is untouched. */
@media (min-width: 981px) {
    html body .extNavPonFitNav > li[data-extnav-blueprint-key="home"] { order: 10 !important; }
    html body .extNavPonFitNav > li[data-extnav-blueprint-key="club-news"] { order: 20 !important; }
    html body .extNavPonFitNav > li[data-extnav-blueprint-key="community"] { order: 30 !important; }
    html body .extNavPonFitNav > li[data-extnav-blueprint-key="store"] { order: 40 !important; }
    html body .extNavPonFitNav > li[data-extnav-blueprint-key="media"] { order: 50 !important; }
    html body .extNavPonFitNav > li[data-extnav-blueprint-key="about"] { order: 70 !important; }
    html body .extNavPonFitNav > li[data-extnav-blueprint-key="history"] { order: 60 !important; }
    html body .extNavPonFitNav > li[data-extnav-blueprint-key="contact"] { order: 80 !important; }
    html body .extNavPonFitNav > li.extNavMoreRoot { order: 900 !important; }
}


/* Baseline: compact PON dropdown profiles and no-jump desktop order polish. */
@media (min-width: 981px) {
    html body .extNavPanel[data-native-key="club-news"].extNavPanel--flyout,
    html body .extNavPanel[data-native-key="about"].extNavPanel--classic,
    html body .extNavPanel[data-native-key="store"].extNavPanel--classic {
        --extnav-panel-padding: .48rem;
        --extnav-link-padding: .52rem .58rem;
        --extnav-icon-size: 1.85rem;
        --extnav-gap: .45rem;
        border-radius: 12px;
    }

    html body .extNavPanel[data-native-key="club-news"].extNavPanel--flyout {
        width: min(310px, calc(100vw - 32px));
        min-width: min(300px, calc(100vw - 32px));
    }

    html body .extNavPanel[data-native-key="store"].extNavPanel--classic {
        width: min(280px, calc(100vw - 32px));
        min-width: min(260px, calc(100vw - 32px));
    }

    html body .extNavPanel[data-native-key="about"].extNavPanel--classic {
        width: min(320px, calc(100vw - 32px));
        min-width: min(300px, calc(100vw - 32px));
    }

    html body .extNavPanel[data-native-key="club-news"] .extNavLink,
    html body .extNavPanel[data-native-key="store"] .extNavLink,
    html body .extNavPanel[data-native-key="about"] .extNavLink {
        min-block-size: 2.9rem;
    }

    html body .extNavPanel[data-native-key="club-news"] .extNavText,
    html body .extNavPanel[data-native-key="store"] .extNavText,
    html body .extNavPanel[data-native-key="about"] .extNavText {
        font-size: .92rem;
        line-height: 1.18;
    }

    html body .extNavPanel[data-native-key="club-news"] .extNavSubList,
    html body .extNavPanel[data-native-key="about"] .extNavSubList {
        width: min(300px, calc(100vw - 32px));
        padding: .46rem;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards {
        --extnav-panel-padding: .65rem;
        width: min(var(--extnav-width, 1180px), calc(100vw - 32px));
        min-width: min(760px, calc(100vw - 32px));
        padding: .74rem;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards > .extNavList {
        grid-template-columns: repeat(6, minmax(128px, 1fr));
        gap: .62rem;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards .extNavLink {
        min-height: 5.45rem;
        padding: .58rem;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards .extNavLink > i:first-child {
        inline-size: 1.9rem;
        block-size: 1.9rem;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards .extNavText {
        font-size: .88rem;
        line-height: 1.15;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards .extNavLink small {
        font-size: .72rem;
        line-height: 1.18;
    }
}

@media (min-width: 981px) and (max-width: 1260px) {
    html body .extNavPanel[data-native-key="media"].extNavPanel--cards > .extNavList {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

/* Baseline: compact dropdown polish for narrower non-mega panels. */
@media (min-width: 981px) {
    html body .extNavPanel[data-native-key="club-news"].extNavPanel--flyout,
    html body .extNavPanel[data-native-key="store"].extNavPanel--classic,
    html body .extNavPanel[data-native-key="about"].extNavPanel--classic {
        --extnav-panel-padding: .42rem;
        --extnav-link-padding: .44rem .52rem;
        --extnav-icon-size: 1.72rem;
        --extnav-gap: .36rem;
        border-radius: 11px;
    }

    html body .extNavPanel[data-native-key="club-news"].extNavPanel--flyout {
        width: min(300px, calc(100vw - 32px)) !important;
        min-width: min(280px, calc(100vw - 32px)) !important;
    }

    html body .extNavPanel[data-native-key="store"].extNavPanel--classic {
        width: min(260px, calc(100vw - 32px)) !important;
        min-width: min(240px, calc(100vw - 32px)) !important;
    }

    html body .extNavPanel[data-native-key="about"].extNavPanel--classic {
        width: min(300px, calc(100vw - 32px)) !important;
        min-width: min(280px, calc(100vw - 32px)) !important;
    }

    html body .extNavPanel[data-native-key="club-news"] .extNavLink,
    html body .extNavPanel[data-native-key="store"] .extNavLink,
    html body .extNavPanel[data-native-key="about"] .extNavLink {
        min-block-size: 2.55rem;
    }

    html body .extNavPanel[data-native-key="club-news"] .extNavText,
    html body .extNavPanel[data-native-key="store"] .extNavText,
    html body .extNavPanel[data-native-key="about"] .extNavText {
        font-size: .88rem;
        line-height: 1.14;
    }

    html body .extNavPanel[data-native-key="club-news"] .extNavSubList,
    html body .extNavPanel[data-native-key="about"] .extNavSubList {
        width: min(280px, calc(100vw - 32px));
        padding: .42rem;
    }
}

/* Baseline: centre the Media cards within the active theme/header rail and keep them in one tidy row where possible. */
@media (min-width: 981px) {
    html body .extNavPanel[data-native-key="media"].extNavPanel--cards {
        --extnav-panel-padding: .58rem;
        inline-size: min(var(--extnav-width, 1080px), calc(100vw - 64px)) !important;
        width: min(var(--extnav-width, 1080px), calc(100vw - 64px)) !important;
        max-inline-size: min(1080px, calc(100vw - 64px)) !important;
        max-width: min(1080px, calc(100vw - 64px)) !important;
        min-width: min(720px, calc(100vw - 64px)) !important;
        padding: .58rem !important;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards > .extNavList {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: .52rem !important;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards .extNavLink {
        min-height: 4.75rem !important;
        padding: .5rem !important;
        gap: .38rem !important;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards .extNavLink > i:first-child {
        inline-size: 1.72rem !important;
        block-size: 1.72rem !important;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards .extNavText {
        font-size: .82rem !important;
        line-height: 1.12 !important;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards .extNavLink small {
        font-size: .68rem !important;
        line-height: 1.15 !important;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    html body .extNavPanel[data-native-key="media"].extNavPanel--cards > .extNavList {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}



/* Baseline: native-row-safe desktop fit.
   No fake active/open state, no native row cloning, no row replacement. The
   theme keeps ownership of [data-active], colours, borders, shadows and tab
   shape. These rules only conserve width and hide the generic file/document
   icon on the required PON top row. */
@media (min-width: 981px) {
    html body .extNavPonFitNav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        min-width: 0;
        max-width: 100%;
    }

    html body .extNavPonFitNav > li.extNavRequiredTopLevel {
        flex: 0 0 auto;
    }

    html body .extNavPonFitNav > li.extNavRequiredTopLevel > :is(a, button),
    html body .extNavPonFitNav > li.extNavRequiredTopLevel > span > a,
    html body .extNavPonFitNav > li.extNavRequiredTopLevel > div > a {
        white-space: nowrap;
    }

    html body .extNavPonFitNav > li.extNavRequiredTopLevel > :is(a, button) > :is(i, svg, img):first-child:not(.extNavTriggerChevron):not([class*="chevron"]):not([class*="angle"]):not([class*="caret"]),
    html body .extNavPonFitNav > li.extNavRequiredTopLevel > span > a > :is(i, svg, img):first-child:not(.extNavTriggerChevron):not([class*="chevron"]):not([class*="angle"]):not([class*="caret"]),
    html body .extNavPonFitNav > li.extNavRequiredTopLevel > div > a > :is(i, svg, img):first-child:not(.extNavTriggerChevron):not([class*="chevron"]):not([class*="angle"]):not([class*="caret"]) {
        display: none !important;
    }

    html body .extNavPonFitNav.extNavNeedsCompact {
        --i-nav--pa: 0 .9em;
    }

    html body .extNavPonFitNav.extNavNeedsTight {
        --i-nav--pa: 0 .72em;
    }

    html body .extNavPonFitNav.extNavNeedsTight > li.extNavRequiredTopLevel > :is(a, button),
    html body .extNavPonFitNav.extNavNeedsTight > li.extNavRequiredTopLevel > span > a,
    html body .extNavPonFitNav.extNavNeedsTight > li.extNavRequiredTopLevel > div > a {
        padding-inline: .72em;
    }

    /* Baseline: legacy side-only desktop rows stay hidden; active/open parent state is proxied to the canonical main tab using native data-active so the installed theme owns the styling. */
    html body .extNavPonFitNav > li.extNavSideOnlyTopLevel {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html body .extNavPonFitNav.extNavPonRequiredVisible > li.extNavMoreRoot,
    html body .extNavPonFitNav > li.extNavNativeOverflowHidden,
    html body .extNavPonFitNav > li.extNavBlueprintDuplicateHidden {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 980px) {
    /* Baseline 1.0.0: side-only rows must never leak into the horizontal
       header rail.  They are allowed only inside the real IPS side/off-canvas
       navigation containers.  This prevents collapsed submenu labels from
       appearing as one-letter-wide vertical columns on /discover/ and other
       responsive pages. */
    html body .extNavPonFitNav > li.extNavSideOnlyTopLevel,
    html body :is(.ipsHeader__secondary, .ipsHeader__primary) :is(ul.ipsNavBar, ul.extNavSimpleNavList) > li.extNavSideOnlyTopLevel {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html body :is(#ipsOffCanvas--navigation, .ipsOffCanvas, .ipsMobileDrawer, .ipsMobileDrawer__navigation, .ipsNavPanel, [data-role="sideNav"], [data-role="sideNavigation"]) .extNavSideOnlyTopLevel {
        display: list-item !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Baseline: simple/side navigation polish. This is scoped to simple mode so
   desktop mega panels are not introduced into side-layout themes. */
html.extNavSimpleMode body :is(#ipsOffCanvas--navigation, .ipsOffCanvas, .ipsNavPanel, [data-role="sideNav"], [data-role="sideNavigation"]) :is(.ipsSearchPseudo, [data-role="search"], form[role="search"]) {
    margin-inline: auto !important;
    width: min(100%, 342px) !important;
    max-width: 342px !important;
}

html.extNavSimpleMode body :is(#ipsOffCanvas--navigation, .ipsOffCanvas, .ipsNavPanel, [data-role="sideNav"], [data-role="sideNavigation"]) :is(.ipsNavBar, ul[role="menu"], nav ul) {
    display: grid;
    gap: .34rem;
}

html.extNavSimpleMode body :is(#ipsOffCanvas--navigation, .ipsOffCanvas, .ipsNavPanel, [data-role="sideNav"], [data-role="sideNavigation"]) :is(.ipsNavBar, ul[role="menu"], nav ul) > li > :is(a, button),
html.extNavSimpleMode body :is(#ipsOffCanvas--navigation, .ipsOffCanvas, .ipsNavPanel, [data-role="sideNav"], [data-role="sideNavigation"]) :is(.ipsNavBar, ul[role="menu"], nav ul) > li > span > a,
html.extNavSimpleMode body :is(#ipsOffCanvas--navigation, .ipsOffCanvas, .ipsNavPanel, [data-role="sideNav"], [data-role="sideNavigation"]) :is(.ipsNavBar, ul[role="menu"], nav ul) > li > div > a {
    display: flex;
    align-items: center;
    gap: .72rem;
    min-block-size: 2.95rem;
    padding: .68rem .9rem;
    border-radius: .72rem;
    font-size: 1rem;
    font-weight: 680;
    text-decoration: none;
}

html.extNavSimpleMode body :is(#ipsOffCanvas--navigation, .ipsOffCanvas, .ipsNavPanel, [data-role="sideNav"], [data-role="sideNavigation"]) :is(.ipsNavBar, ul[role="menu"], nav ul) > li > :is(a, button) > :is(i, svg):first-child,
html.extNavSimpleMode body :is(#ipsOffCanvas--navigation, .ipsOffCanvas, .ipsNavPanel, [data-role="sideNav"], [data-role="sideNavigation"]) :is(.ipsNavBar, ul[role="menu"], nav ul) > li > span > a > :is(i, svg):first-child,
html.extNavSimpleMode body :is(#ipsOffCanvas--navigation, .ipsOffCanvas, .ipsNavPanel, [data-role="sideNav"], [data-role="sideNavigation"]) :is(.ipsNavBar, ul[role="menu"], nav ul) > li > div > a > :is(i, svg):first-child {
    inline-size: 1.25rem;
    min-inline-size: 1.25rem;
    text-align: center;
}

/* Baseline: broaden side-layout polish to the IPS side panel classes used by
   the PON lightweight themes without adding desktop mega behaviour. */
html.extNavSimpleMode body .ipsNavPanel :is(.ipsSearchPseudo, [data-role="search"], form[role="search"]),
html.extNavSimpleMode body #ipsOffCanvas--navigation :is(.ipsSearchPseudo, [data-role="search"], form[role="search"]) {
    margin-inline: auto !important;
    inline-size: min(100%, 342px) !important;
    max-inline-size: 342px !important;
}

html.extNavSimpleMode body .ipsNavPanel :is(.ipsHeaderExtra, .ipsHeader__align, .ipsHeaderExtra__center, .ipsHeader__center) {
    justify-content: center;
}

html.extNavSimpleMode body .ipsNavPanel :is(.ipsNavPanel__nav, .ipsNavBar, nav ul, ul[role="menu"]) {
    display: grid;
    gap: .34rem;
}

html.extNavSimpleMode body .ipsNavPanel :is(.ipsNavPanel__nav, .ipsNavBar, nav ul, ul[role="menu"]) > li > :is(a, button),
html.extNavSimpleMode body .ipsNavPanel :is(.ipsNavPanel__nav, .ipsNavBar, nav ul, ul[role="menu"]) > li > span > a,
html.extNavSimpleMode body .ipsNavPanel :is(.ipsNavPanel__nav, .ipsNavBar, nav ul, ul[role="menu"]) > li > div > a {
    display: flex;
    align-items: center;
    min-block-size: 2.85rem;
    padding: .64rem .9rem;
    gap: .7rem;
    border-radius: .68rem;
    font-size: 1rem;
    font-weight: 680;
    text-decoration: none;
}

html.extNavSimpleMode body .ipsNavPanel :is(.ipsNavPanel__nav, .ipsNavBar, nav ul, ul[role="menu"]) > li > :is(a, button) > :is(i, svg):first-child,
html.extNavSimpleMode body .ipsNavPanel :is(.ipsNavPanel__nav, .ipsNavBar, nav ul, ul[role="menu"]) > li > span > a > :is(i, svg):first-child,
html.extNavSimpleMode body .ipsNavPanel :is(.ipsNavPanel__nav, .ipsNavBar, nav ul, ul[role="menu"]) > li > div > a > :is(i, svg):first-child {
    inline-size: 1.22rem;
    min-inline-size: 1.22rem;
    text-align: center;
}

/* Baseline: four-theme follow-up pass (PON New, PON V5, Lightweight, Lightweight Fluid)
   - keep the full required row when space exists;
   - keep Media rail-centred instead of viewport-left;
   - keep side-layout rows visually consistent while leaving active colours to the theme. */
@media (min-width: 981px) {
    html body .extNavPanel[data-native-key="media"].extNavPanel--cards {
        --extnav-panel-padding: .58rem;
        inline-size: min(var(--extnav-width, 960px), calc(100vw - 56px)) !important;
        width: min(var(--extnav-width, 960px), calc(100vw - 56px)) !important;
        max-inline-size: min(960px, calc(100vw - 56px)) !important;
        max-width: min(960px, calc(100vw - 56px)) !important;
        min-width: min(860px, calc(100vw - 56px)) !important;
        padding: .58rem !important;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards > .extNavList {
        grid-template-columns: repeat(6, minmax(112px, 1fr)) !important;
        gap: .5rem !important;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards .extNavLink {
        min-height: 4.65rem !important;
        padding: .48rem !important;
        gap: .36rem !important;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards .extNavText {
        font-size: .84rem !important;
        line-height: 1.12 !important;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards .extNavLink small {
        font-size: .68rem !important;
        line-height: 1.14 !important;
    }

    html body .extNavPonFitNav.extNavNeedsCompact {
        --i-nav--pa: 0 .95em;
    }

    html body .extNavPonFitNav.extNavNeedsTight {
        --i-nav--pa: 0 .82em;
    }

    html body .extNavPonFitNav.extNavNeedsTight > li.extNavRequiredTopLevel > :is(a, button),
    html body .extNavPonFitNav.extNavNeedsTight > li.extNavRequiredTopLevel > span > a,
    html body .extNavPonFitNav.extNavNeedsTight > li.extNavRequiredTopLevel > div > a {
        padding-inline: .82em;
    }
}

@media (min-width: 981px) and (max-width: 940px) {
    html body .extNavPanel[data-native-key="media"].extNavPanel--cards > .extNavList {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

html.extNavSimpleMode body .ipsNavPanel .extNavRequiredTopLevel > :is(a, button, .ipsNavPanel__link),
html.extNavSimpleMode body .ipsNavPanel .extNavRequiredTopLevel > span > a,
html.extNavSimpleMode body .ipsNavPanel .extNavRequiredTopLevel > div > a,
html.extNavSimpleMode body #ipsOffCanvas--navigation .extNavRequiredTopLevel > :is(a, button, .ipsNavPanel__link),
html.extNavSimpleMode body #ipsOffCanvas--navigation .extNavRequiredTopLevel > span > a,
html.extNavSimpleMode body #ipsOffCanvas--navigation .extNavRequiredTopLevel > div > a {
    display: flex;
    align-items: center;
    gap: .72rem;
    min-block-size: 2.9rem;
    padding: .66rem .9rem;
    border-radius: .72rem;
    font-size: 1rem;
    font-weight: 680;
    text-decoration: none;
    background: color-mix(in srgb, currentColor 5%, transparent);
}

html.extNavSimpleMode body .ipsNavPanel .extNavRequiredTopLevel > :is(a, button, .ipsNavPanel__link):hover,
html.extNavSimpleMode body #ipsOffCanvas--navigation .extNavRequiredTopLevel > :is(a, button, .ipsNavPanel__link):hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Baseline: final side-layout and PON V5 fit polish.
   - fix malformed native Home URLs at runtime via JS;
   - let side/simple themes show their native active state;
   - stop generic document icons wasting desktop nav width before More is needed;
   - keep side search centred and reduce the side menu row scale. */
@media (min-width: 981px) {
    html body .ipsHeader__secondary .ipsNavBar > li:not(.ipsNavBar_more):not(.ipsNavBar__more):not([data-nav-more]):not([aria-label*="more" i]) > :is(a, button) > :is(i, svg, img):first-child:not(.extNavTriggerChevron):not([class*="chevron"]):not([class*="angle"]):not([class*="caret"]),
    html body .ipsHeader__secondary .ipsNavBar > li:not(.ipsNavBar_more):not(.ipsNavBar__more):not([data-nav-more]):not([aria-label*="more" i]) > span > a > :is(i, svg, img):first-child:not(.extNavTriggerChevron):not([class*="chevron"]):not([class*="angle"]):not([class*="caret"]),
    html body .ipsHeader__secondary .ipsNavBar > li:not(.ipsNavBar_more):not(.ipsNavBar__more):not([data-nav-more]):not([aria-label*="more" i]) > div > a > :is(i, svg, img):first-child:not(.extNavTriggerChevron):not([class*="chevron"]):not([class*="angle"]):not([class*="caret"]) {
        display: none !important;
    }

    html body .extNavPonFitNav > li.extNavRequiredTopLevel > :is(a, button),
    html body .extNavPonFitNav > li.extNavRequiredTopLevel > span > a,
    html body .extNavPonFitNav > li.extNavRequiredTopLevel > div > a {
        gap: .34rem;
    }

    html body .extNavPonFitNav.extNavNeedsCompact,
    html body .extNavPonFitNav.extNavNeedsTight {
        --i-nav--fo-si: inherit;
    }
}

html.extNavSimpleMode body .ipsNavPanel :is(.ipsSearchPseudo, [data-role="search"], form[role="search"]),
html.extNavSimpleMode body #ipsOffCanvas--navigation :is(.ipsSearchPseudo, [data-role="search"], form[role="search"]) {
    box-sizing: border-box !important;
    inline-size: min(342px, calc(100% - 44px)) !important;
    width: min(342px, calc(100% - 44px)) !important;
    max-inline-size: calc(100% - 44px) !important;
    max-width: calc(100% - 44px) !important;
    margin-inline: auto !important;
    align-items: center !important;
}

html.extNavSimpleMode body .ipsNavPanel :is(.ipsSearchPseudo, [data-role="search"]) input,
html.extNavSimpleMode body #ipsOffCanvas--navigation :is(.ipsSearchPseudo, [data-role="search"]) input {
    min-inline-size: 0 !important;
    width: 100% !important;
}

html.extNavSimpleMode body :is(.ipsNavPanel, #ipsOffCanvas--navigation) .extNavSimpleNavList {
    gap: .24rem !important;
}

html.extNavSimpleMode body .ipsNavPanel .extNavRequiredTopLevel > :is(a, button, .ipsNavPanel__link),
html.extNavSimpleMode body .ipsNavPanel .extNavRequiredTopLevel > span > a,
html.extNavSimpleMode body .ipsNavPanel .extNavRequiredTopLevel > div > a,
html.extNavSimpleMode body #ipsOffCanvas--navigation .extNavRequiredTopLevel > :is(a, button, .ipsNavPanel__link),
html.extNavSimpleMode body #ipsOffCanvas--navigation .extNavRequiredTopLevel > span > a,
html.extNavSimpleMode body #ipsOffCanvas--navigation .extNavRequiredTopLevel > div > a {
    min-block-size: 2.58rem;
    padding: .54rem .82rem;
    border-radius: .66rem;
    font-size: .97rem;
    font-weight: 680;
}

html.extNavSimpleMode body .ipsNavPanel .extNavRequiredTopLevel > :is(a, button, .ipsNavPanel__link) > :is(i, svg):first-child,
html.extNavSimpleMode body .ipsNavPanel .extNavRequiredTopLevel > span > a > :is(i, svg):first-child,
html.extNavSimpleMode body .ipsNavPanel .extNavRequiredTopLevel > div > a > :is(i, svg):first-child,
html.extNavSimpleMode body #ipsOffCanvas--navigation .extNavRequiredTopLevel > :is(a, button, .ipsNavPanel__link) > :is(i, svg):first-child,
html.extNavSimpleMode body #ipsOffCanvas--navigation .extNavRequiredTopLevel > span > a > :is(i, svg):first-child,
html.extNavSimpleMode body #ipsOffCanvas--navigation .extNavRequiredTopLevel > div > a > :is(i, svg):first-child {
    inline-size: 1.08rem;
    min-inline-size: 1.08rem;
}


/* Baseline: navigation-visible safety pass and screen-centred wide Media/History panels.
   Do not CSS-hide the native More row before JavaScript has restored required
   rows; on some themes More is the only rendered nav entry at first paint.
   JS may hide More after all required rows are genuinely visible. */
@media (min-width: 981px) {
    body[extendednavigation-build] .ipsHeader__secondary .ipsNavBar > li.extNavRequiredTopLevel,
    body[data-extendednavigation-build] .ipsHeader__secondary .ipsNavBar > li.extNavRequiredTopLevel {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body .extNavPanel[data-native-key="media"].extNavPanel--cards,
    html body .extNavPanel[data-native-key="history"].extNavPanel--archive {
        transform: none !important;
    }

    html body .extNavPanel--screenCentred[data-native-key="media"].extNavPanel--cards,
    html body .extNavPanel--screenCentred[data-native-key="history"].extNavPanel--archive {
        margin-inline: 0 !important;
    }

    html body .extNavPanel[data-native-key="history"].extNavPanel--archive {
        inline-size: min(var(--extnav-width, 1180px), calc(100vw - 56px)) !important;
        width: min(var(--extnav-width, 1180px), calc(100vw - 56px)) !important;
        max-inline-size: min(1180px, calc(100vw - 56px)) !important;
        max-width: min(1180px, calc(100vw - 56px)) !important;
    }


    html body .extNavPanel[data-native-key="media"].extNavPanel--cards {
        inline-size: min(var(--extnav-width, 960px), calc(100vw - 56px)) !important;
        width: min(var(--extnav-width, 960px), calc(100vw - 56px)) !important;
        max-inline-size: min(1080px, calc(100vw - 56px)) !important;
        max-width: min(1080px, calc(100vw - 56px)) !important;
    }

    html body .extNavPanel--railCentred::before {
        left: var(--extnav-caret-left, 50%) !important;
    }
}


/* Baseline: true screen-centred wide panels.  Media and History use the
   visual centre of the horizontal header screen area; their caret remains
   aligned by JavaScript to the triggering tab. */
@media (min-width: 981px) {
    html body .extNavPanel.extNavPanel--trueCentred[data-native-key="media"].extNavPanel--cards,
    html body .extNavPanel.extNavPanel--trueCentred[data-native-key="history"].extNavPanel--archive {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-inline: 0 !important;
    }

    html body .extNavPanel.extNavPanel--trueCentred[data-native-key="media"].extNavPanel--cards {
        inline-size: min(var(--extnav-width, 960px), calc(100vw - 56px)) !important;
        width: min(var(--extnav-width, 960px), calc(100vw - 56px)) !important;
        max-inline-size: min(960px, calc(100vw - 56px)) !important;
        max-width: min(960px, calc(100vw - 56px)) !important;
        min-width: min(760px, calc(100vw - 56px)) !important;
    }

    html body .extNavPanel.extNavPanel--trueCentred[data-native-key="history"].extNavPanel--archive {
        inline-size: min(var(--extnav-width, 1180px), calc(100vw - 56px)) !important;
        width: min(var(--extnav-width, 1180px), calc(100vw - 56px)) !important;
        max-inline-size: min(1180px, calc(100vw - 56px)) !important;
        max-width: min(1180px, calc(100vw - 56px)) !important;
    }
}

/* Baseline: no-flash desktop row stabiliser.
   The Loader preflight annotates real native rows before the header is visible;
   these rules then keep the full required row visible and ordered without
   waiting for delayed JavaScript fit passes. More is hidden only after every
   required row exists as a top-level native item. */
@media (min-width: 981px) {
    html body :is(.ipsHeader__secondary, .ipsHeader__primary) ul.ipsNavBar.extNavPonFitNav {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    html body ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    html body ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel[hidden],
    html body ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel[aria-hidden="true"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel[data-extnav-blueprint-key="home"] { order: 10 !important; }
    html body ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel[data-extnav-blueprint-key="club-news"] { order: 20 !important; }
    html body ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel[data-extnav-blueprint-key="community"] { order: 30 !important; }
    html body ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel[data-extnav-blueprint-key="store"] { order: 40 !important; }
    html body ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel[data-extnav-blueprint-key="media"] { order: 50 !important; }
    html body ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel[data-extnav-blueprint-key="history"] { order: 60 !important; }
    html body ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel[data-extnav-blueprint-key="about"] { order: 70 !important; }
    html body ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel[data-extnav-blueprint-key="contact"] { order: 80 !important; }

    html body ul.ipsNavBar.extNavPonFitNav.extNavPonRequiredVisible > li.extNavMoreRoot,
    html body ul.ipsNavBar.extNavPonFitNav > li.extNavNativeOverflowHidden.extNavMoreRoot {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Baseline: IPS 5 priority-nav stability pass.
   During the short bounded stabiliser, keep the real required top-level rows
   visible and remove native transition/animation from the row so About/Contact
   cannot visibly slide/jump while IPS recalculates More. */
@media (min-width: 981px) {
    html body ul.ipsNavBar.extNavPonFitNav,
    html body ul.ipsNavBar.extNavPreflightNav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    html body ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel,
    html body ul.ipsNavBar.extNavPreflightNav > li.extNavRequiredTopLevel {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: none !important;
        animation: none !important;
        flex: 0 0 auto !important;
    }

    html body ul.ipsNavBar.extNavPonFitNav.extNavPonRequiredVisible > li.extNavMoreRoot,
    html body ul.ipsNavBar.extNavPreflightNav.extNavPonRequiredVisible > li.extNavMoreRoot,
    html body ul.ipsNavBar.extNavPonFitNav > li.extNavNativeOverflowHidden.extNavMoreRoot,
    html body ul.ipsNavBar.extNavPreflightNav > li.extNavNativeOverflowHidden.extNavMoreRoot {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: none !important;
        animation: none !important;
    }
}


/* Baseline: PON V5 hard first-paint rail seal.
   Do not wait for the inline boot class before suppressing the desktop rail:
   the CSS asset itself hides light-DOM and i-navigation-menu hosts until the
   bounded preflight/runtime marks the row stable. More is suppressed at all
   desktop states so IPS priority-nav cannot flash it between recalculations. */
@media (min-width: 981px) {
    html:not(.extNavPreflightDone):not(.extNavReady):not(.extNavCriticalTimeout) body[extendednavigation-build] :is(.ipsHeader__secondary, .ipsHeader__primary) :is(i-navigation-menu, ul.ipsNavBar),
    html:not(.extNavPreflightDone):not(.extNavReady):not(.extNavCriticalTimeout) body[data-extendednavigation-build] :is(.ipsHeader__secondary, .ipsHeader__primary) :is(i-navigation-menu, ul.ipsNavBar) {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: none !important;
        animation: none !important;
    }

    body[extendednavigation-build] :is(.ipsHeader__secondary, .ipsHeader__primary) ul.ipsNavBar > :is(.ipsNavBar_more, .ipsNavBar__more, [data-nav-more], [data-role*="more" i], [aria-label*="more" i]),
    body[data-extendednavigation-build] :is(.ipsHeader__secondary, .ipsHeader__primary) ul.ipsNavBar > :is(.ipsNavBar_more, .ipsNavBar__more, [data-nav-more], [data-role*="more" i], [aria-label*="more" i]) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Baseline 1.0.0: PON V5 open-state chevron parity.
   Rotate the existing menu caret only. Do not append a new caret, do not swap
   to a Font Awesome up glyph, and do not reserve extra width in the nav row. */
html body :is(.extNavTriggerChevron, .extNavTriggerChevron--open) {
    transform-origin: 50% 50% !important;
    transition: transform .16s ease !important;
}

html body :is(.extNavOpenTopLevel, .extNavPseudoChevronOpenItem, [data-extnav-open="true"]) :is(.extNavTriggerChevron),
html body :is(a, button).extNavOpenTopLevelTrigger[aria-expanded="true"] :is(.extNavTriggerChevron),
html body .extNavTriggerChevron.extNavTriggerChevron--open {
    transform: rotate(180deg) !important;
}

html body :is(.extNavOpenTopLevel, .extNavPseudoChevronOpenItem, [data-extnav-open="true"]) > :is(a, button)::after,
html body :is(a, button).extNavOpenTopLevelTrigger[aria-expanded="true"]::after,
html body :is(a, button).extNavPseudoChevronOpen::after,
html body :is(.extNavOpenTopLevel, .extNavPseudoChevronOpenItem, [data-extnav-open="true"]) > :is(span, div) > :is(a, button)::after {
    display: inline-block !important;
    transform: rotate(180deg) !important;
    transform-origin: 50% 50% !important;
    transition: transform .16s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    html body :is(.extNavTriggerChevron, .extNavTriggerChevron--open),
    html body :is(a, button).extNavOpenTopLevelTrigger::after,
    html body :is(a, button).extNavPseudoChevronOpen::after {
        transition: none !important;
    }
}


/* Baseline 1.0.0: hard guard against native/dropdown submenu content leaking
   into the desktop header rail as narrow vertical text columns.  Enhanced
   desktop panels are rendered separately as .extNavPanel; any immediate native
   submenu under the header tab must stay suppressed there.  Side/off-canvas
   menus are intentionally not targeted. */
@media (min-width: 981px) {
    html body :is(.ipsHeader__secondary, .ipsHeader__primary) ul.ipsNavBar.extNavPonFitNav > li.extNavRequiredTopLevel > :is(ul, ol, .ipsMenu, [role="menu"], [data-role="submenu"], [data-controller*="menu" i]) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}