/* WhatsMenu Site module: styling for the custom header entries (button
   pills, the active underline, dropdown and phone-menu states). Served as a
   file so the browser caches it; it was ~11 KB inlined on every storefront
   page. Linked from site::storefront.styles, which every template's nav
   partial includes OUTSIDE nav#navbar-main: the templates mount a Vue root
   there and Vue 2 strips style and link tags it finds inside on mount. */
.wm-sitenav-btn {
    display: inline-flex !important; align-items: center; gap: 8px;
    padding: 8px 16px !important; border-radius: 99px !important;
    
    line-height: 19px !important;
    background: var(--cx-accent, var(--vl-accent, var(--lm-accent, var(--wm-theme, #339933)))) !important;
    color: var(--cx-on-theme, var(--vl-on-theme, var(--lm-on-theme, #fff))) !important;
    white-space: nowrap; text-decoration: none;
}
.wm-sitenav-btn .nav-link-inner--text,
.wm-sitenav-btn .btn-inner--icon,
.wm-sitenav-btn svg { color: var(--cx-on-theme, var(--vl-on-theme, var(--lm-on-theme, #fff))) !important; }

.wm-sitenav-btn svg { stroke: var(--cx-on-theme, var(--vl-on-theme, var(--lm-on-theme, #fff))) !important; }

#navbar-main .wm-sitenav-btn:hover,
#navbar-main .wm-sitenav-btn:focus {
    background: var(--cx-accent, var(--vl-accent, var(--lm-accent, var(--wm-theme, #339933)))) !important;
    color: var(--cx-on-theme, var(--vl-on-theme, var(--lm-on-theme, #fff))) !important;
    opacity: .92;
}
#navbar-main .wm-sitenav-btn:hover .nav-link-inner--text,
#navbar-main .wm-sitenav-btn:hover .btn-inner--icon,
#navbar-main .wm-sitenav-btn:hover svg { color: var(--cx-on-theme, var(--vl-on-theme, var(--lm-on-theme, #fff))) !important; }
#navbar-main .wm-sitenav-btn:hover svg { stroke: var(--cx-on-theme, var(--vl-on-theme, var(--lm-on-theme, #fff))) !important; }
.wm-sitenav-btn:active { transform: scale(.98); }

#navbar-main .wm-sitenav-on .nav-link-inner--text {
    color: var(--wm-theme-text, var(--wm-theme, #339933)) !important;
}
#navbar-main .dropdown-item.wm-sitenav-on,
#navbar-main .mobile-menu .nav-link.wm-sitenav-on,
#navbar-main .mobile-menu .wm-sitenav-on .nav-link-inner--text {
    color: var(--wm-theme-text-on-light, var(--wm-theme, #339933)) !important;
}

#navbar-main .wm-sitenav-btn.wm-sitenav-on .nav-link-inner--text {
    color: var(--cx-on-theme, var(--vl-on-theme, var(--lm-on-theme, #fff))) !important;
}

#navbar-main .web-menu::after,
#navbar-main .web-menu::before { content: none !important; }
#navbar-main .web-menu > a,
#navbar-main .web-menu > a *,
#navbar-main .web-menu > a:hover,
#navbar-main .web-menu > a:hover *,
#navbar-main .web-menu > a:focus,
#navbar-main .web-menu > a:focus * { text-decoration: none !important; }

#navbar-main .web-menu > a:not(.wm-sitenav-btn) .nav-link-inner--text { position: relative; }
#navbar-main .web-menu > a:not(.wm-sitenav-btn) .nav-link-inner--text::after {
    content: "" !important; position: absolute; left: 0; right: 0; bottom: -5px;
    height: 2px; border-radius: 2px; background: currentColor;
    transform: scaleX(0); transform-origin: center;
    transition: transform .18s ease;
}
#navbar-main .web-menu > a:not(.wm-sitenav-btn):hover .nav-link-inner--text::after,
#navbar-main .web-menu > a:not(.wm-sitenav-btn):focus-visible .nav-link-inner--text::after,
#navbar-main .web-menu > a.wm-sitenav-on:not(.wm-sitenav-btn) .nav-link-inner--text::after {
    transform: scaleX(1);
}

#navbar-main .web-menu > a.wm-sitenav-btn .nav-link-inner--text::after { content: none !important; }
@media (prefers-reduced-motion: reduce) {
    #navbar-main .web-menu > a:not(.wm-sitenav-btn) .nav-link-inner--text::after { transition: none; }
}

#navbar-main .web-menu > a svg { display: inline-block; vertical-align: middle; }
.wm-sitenav-caret { margin-left: .15rem; transition: transform .15s; }
#navbar-main .show > .dropdown-toggle .wm-sitenav-caret { transform: rotate(180deg); }

.mobile-menu .wm-sitenav-btn { margin: .35rem 0; }

#navbar-main .mobile-menu > li > a,
#navbar-main .mobile-menu .dropdown-item {
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
    transition: background-color .12s ease, transform .12s ease;
}
#navbar-main .mobile-menu > li > a:active,
#navbar-main .mobile-menu .dropdown-item:active {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    transform: scale(.99);
}

#navbar-main .mobile-menu .wm-sitenav-btn:active { transform: scale(.97); }