/* Shared navigation. Mobile is the default; desktop starts at exactly 975px. */
#topNavWrapper.wov-nav {
    --nav-surface: #1a1a1a;
    --nav-divider: rgb(255 255 255 / 12%);
    --nav-control: 52px;
    --nav-slide: 240ms;
    position: fixed;
    inset: 0 0 auto;
    z-index: 9999;
    width: 100%;
    height: var(--navHeight, 52px);
    margin: 0;
    padding: 0;
    color: #fff;
    background: var(--nav-surface);
    font-family: var(--medium, sans-serif);
    text-align: left;
    -webkit-text-size-adjust: 100%;
}
.wov-nav *, .wov-nav *::before, .wov-nav *::after { box-sizing: border-box; }
.wov-nav [hidden] { display: none !important; }
.wov-nav a, .wov-nav button { -webkit-tap-highlight-color: transparent; }
.wov-nav button, .wov-nav a {
    color: inherit;
    font-family: inherit;
    font-weight: 400;
    text-decoration: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
}
.wov-nav button {
    appearance: none;
    background: transparent;
    cursor: pointer;
    margin: 0;
    letter-spacing: inherit;
    line-height: 1.5;
    min-width: 0;
}
.wov-nav :is(a, button, input):focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: -5px;
}
.wov-nav .navController {
    height: 100%;
    display: grid;
    grid-template-columns: var(--nav-control) 1fr var(--nav-control);
    align-items: center;
    position: relative;
    z-index: 2;
    background: var(--nav-surface);
}
.wov-nav .navIconButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nav-control);
    height: var(--navHeight, 52px);
    padding: 14px;
    flex: none;
}
.wov-nav .navIconButton svg {
    display: block;
    position: static;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}
.wov-nav .navMenuGlyph { fill: currentColor !important; stroke: none !important; }
.wov-nav .navCloseGlyph { display: none !important; }
.wov-nav .navMenuIcon[aria-expanded="true"] .navMenuGlyph { display: none; }
.wov-nav .navMenuIcon[aria-expanded="true"] .navCloseGlyph { display: block !important; }
.wov-nav .mobileLogoLink { display: flex; align-items: center; justify-content: center; height: 100%; justify-self: center; padding: 4px 12px; }
.wov-nav .navMobileLogo { width: 53px; height: 36px; fill: currentColor; display: block; position: static; }
.wov-nav .navPanels {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--navHeight, 52px));
    height: calc(100dvh - var(--navHeight, 52px));
    overflow: hidden;
    background: var(--nav-surface);
    visibility: hidden;
    opacity: 0;
    transition: opacity 160ms ease, visibility 0s 160ms;
}
.wov-nav:is([data-mode="root"], [data-mode="category"]) .navPanels { visibility: visible; opacity: 1; transition-delay: 0s; }
.wov-nav .topNavLinkList {
    list-style: none;
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 10px 0 max(28px, env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
    transform: translateX(0);
    transition: transform var(--nav-slide) cubic-bezier(.22,.68,0,1);
}
.wov-nav[data-mode="category"] .topNavLinkList { transform: translateX(-100%); }
.wov-nav .topNavLinkWrapper { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--nav-divider); }
.wov-nav .navDestination, .wov-nav .navCategoryToggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 57px;
    padding: 16px max(22px, env(safe-area-inset-right)) 16px max(22px, env(safe-area-inset-left));
    width: 100%;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .4px;
    line-height: 1.5;
}
.wov-nav.nav-ready .nav-has-children > .navDestination { display: none; }
.wov-nav .navChevron { display: block; width: 7px; height: 7px; flex: none; margin: 0 4px 0 auto; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(-45deg); }
.wov-nav .navUserName { overflow-wrap: anywhere; }
.wov-nav .navAccountToggle .wis-user { font-size: 17px; }
.wov-nav .navDetail {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transform: translateX(100%);
    transition: transform var(--nav-slide) cubic-bezier(.22,.68,0,1);
    padding: 0;
}
.wov-nav[data-mode="category"] .navDetail { transform: translateX(0); }
.wov-nav .navDetailHeader { flex: none; padding: 4px max(22px, env(safe-area-inset-right)) 18px max(22px, env(safe-area-inset-left)); border-bottom: 1px solid var(--nav-divider); }
.wov-nav .navBack { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 0; font-size: 12px; color: #bdbdbd; text-transform: none; }
.wov-nav #navDetailTitle { margin: 9px 0 8px; color: #fff; font-family: var(--light, sans-serif); font-size: 25px; font-weight: 400; letter-spacing: .3px; line-height: 1.25; text-transform: uppercase; overflow-wrap: anywhere; }
.wov-nav .navDesktopParent { display: none; }
.wov-nav .navDetailContent { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.wov-nav .topNavSubMenuWrapper { list-style: none; padding: 0; margin: 0; }
.wov-nav .subMenuItem { list-style: none; padding: 0; margin: 0; }
.wov-nav .subMenuItem a, .wov-nav .subMenuItem button, .wov-nav .navViewAll {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 14px max(22px, env(safe-area-inset-right)) 14px max(22px, env(safe-area-inset-left));
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .3px;
    line-height: 1.5;
    border-bottom: 1px solid var(--nav-divider);
}
.wov-nav .subMenuItem.redNav a { background: #9e494c; }
.wov-nav #advSearchWrapper { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: minmax(0,1fr) var(--nav-control); color: #1a1a1a; background: #fff; }
.wov-nav #advSearchWrapper form { margin: 0 !important; min-width: 0; height: 100%; }
.wov-nav .searchByKeyWord { display: flex; align-items: center; width: 100%; height: 100%; }
.wov-nav #searchBar { width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 16px; border: 0 !important; border-radius: 0; background: #fff; color: #1a1a1a; font-family: var(--bodyFontFamily, sans-serif); font-size: 16px; box-shadow: none; }
.wov-nav .searchByKeyworkBTN { flex: none; min-height: 36px; padding: 8px 12px; margin: 0 8px 0 0; background: #eeedea; font-size: 11px; letter-spacing: .2px; color: #1a1a1a; }
.wov-nav .navSearchClose { background: var(--nav-surface); color: #fff; }
.wov-nav[data-mode="search"] .navController, .wov-nav[data-mode="search"] .navPanels { visibility: hidden; }
.wov-nav .navVisuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wov-nav-modal-host { z-index: 1000000 !important; }
@media (hover: hover) {
    .wov-nav :is(.navDestination, .navCategoryToggle, .navIconButton):hover { background-color: rgb(255 255 255 / 7%); }
    .wov-nav .subMenuItem :is(a, button):hover, .wov-nav .navViewAll:hover { background-color: rgb(255 255 255 / 7%); }
    .wov-nav .searchByKeyworkBTN:hover { background: #deddd9; }
    .wov-nav .navSearchClose:hover { background: #333; }
}
@media (min-width: 975px) {
    #topNavWrapper.wov-nav { inset: 0 0 auto auto; width: max-content; max-width: 100%; display: flex; background: #1a1a1aee; }
    .wov-nav .navController { display: flex; order: 2; flex: none; background: transparent; }
    .wov-nav .navMenuIcon, .wov-nav .mobileLogoLink { display: none; }
    .wov-nav .navPanels { order: 1; position: static; height: auto; min-width: 0; overflow: visible; visibility: visible; opacity: 1; background: transparent; transition: none; }
    .wov-nav .topNavLinkList { position: static; display: flex; height: 100%; padding: 0; overflow: visible; transform: none; transition: none; }
    .wov-nav .topNavLinkWrapper { display: flex; align-items: stretch; position: relative; border: 0; min-width: 0; }
    .wov-nav .navDestination, .wov-nav .navCategoryToggle { width: auto; min-height: var(--navHeight,52px); padding: 0 16px; font-size: 10px; letter-spacing: .2px; white-space: nowrap; }
    .wov-nav .navChevron { display: none; }
    .wov-nav .navCategoryToggle[aria-expanded="true"] { background: rgb(255 255 255 / 7%); }
    .wov-nav .navDesktopParent { display: list-item; }
    .wov-nav .navAccountToggle { width: auto; padding: 0 16px; font-size: 10px; white-space: nowrap; }
    .wov-nav .navUserName { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; }
    .wov-nav .topNavSubMenuWrapper { position: absolute; top: 100%; left: 0; min-width: 100%; width: max-content; max-width: min(300px, 90vw); max-height: calc(100vh - var(--navHeight,52px) - 12px); max-height: calc(100dvh - var(--navHeight,52px) - 12px); overflow: auto; overscroll-behavior: contain; background: var(--nav-surface); padding: 8px 0; box-shadow: 0 16px 24px #00000014; }
    .wov-nav .topNavLinkWrapper:last-child .topNavSubMenuWrapper { left: auto; right: 0; }
    .wov-nav .subMenuItem a, .wov-nav .subMenuItem button { min-height: 40px; padding: 10px 18px; border: 0; font-size: 10px; }
    /* Share the navbar's left edge and end at the search control's left edge. */
    .wov-nav .nav-grid-parent { position: static; }
    .wov-nav .topNavSubMenuWrapper.navCollectionGrid {
        left: 0;
        right: auto;
        width: calc(100% - var(--nav-control));
        min-width: 0;
        max-width: none;
        max-height: calc(100vh - var(--navHeight,52px) - 24px);
        max-height: calc(100dvh - var(--navHeight,52px) - 24px);
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: repeat(var(--nav-columns), minmax(0, 1fr));
        grid-template-rows: repeat(var(--nav-rows), minmax(40px, auto));
        gap: 0 16px;
        padding: 24px;
        border-top: 1px solid var(--nav-divider);
        scrollbar-width: thin;
        scrollbar-color: #777 var(--nav-surface);
    }
    .wov-nav .navCollectionGrid .subMenuItem :is(a, button) { height: 100%; padding: 10px 12px; white-space: normal; overflow-wrap: anywhere; }
    .wov-nav .navCollectionGrid .navDesktopParent a { color: #bfbab0; }
    .wov-nav .navDetail { display: none; }
    .wov-nav #searchBar { font-size: 14px; }
}
/* Loading is a closed navbar, not the expanded failure/no-script fallback. */
.wov-nav.nav-loading .topNavSubMenuWrapper,
.wov-nav.nav-loading #advSearchWrapper,
.wov-nav.nav-loading .navCategoryToggle { display: none; }
@media (min-width: 975px) {
    .wov-nav.nav-loading .navAccountToggle { display: flex; }
}
/* A failed/disabled script still leaves all destinations and search usable. */
#topNavWrapper.wov-nav:not(.nav-ready):not(.nav-loading) { position: relative; height: auto; width: 100%; display: block; }
.wov-nav:not(.nav-ready):not(.nav-loading) .navController, .wov-nav:not(.nav-ready):not(.nav-loading) .navCategoryToggle, .wov-nav:not(.nav-ready):not(.nav-loading) .navSearchClose { display: none; }
.wov-nav:not(.nav-ready):not(.nav-loading) .navPanels, .wov-nav:not(.nav-ready):not(.nav-loading) .topNavLinkList, .wov-nav:not(.nav-ready):not(.nav-loading) .topNavSubMenuWrapper { position: static; visibility: visible; opacity: 1; height: auto; max-height: none; display: block; transform: none; padding: 10px 20px; }
.wov-nav:not(.nav-ready):not(.nav-loading) .topNavLinkWrapper { display: block; }
.wov-nav:not(.nav-ready):not(.nav-loading) #advSearchWrapper { position: static; height: 52px; display: block; }
@media (prefers-reduced-motion: reduce) {
    .wov-nav .navPanels, .wov-nav .topNavLinkList, .wov-nav .navDetail { transition: none; }
}
