:where(.mxsb-site-header, .mxsb-system-page, .mxsb-home, .mxsb-visual-page) :where(a, button, input, select, textarea):focus-visible {
outline: 3px solid #3d9df2;
outline: 3px solid color-mix(in srgb, var(--mxsb-primary, #0073e6) 72%, #fff);
outline-offset: 3px;
}

.mxsb-shop-nav__toggle {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 36px;
margin: 0;
padding: 8px 13px;
border: 0;
border-radius: 10px;
background: var(--mxsb-soft, #f5f9ff);
color: var(--mxsb-primary, #0073e6);
font: inherit;
font-size: 13px;
font-weight: 800;
cursor: pointer;
}

.mxsb-shop-nav__toggle .mxsb-icon {
width: 17px;
height: 17px;
}

.mxsb-header-variant--navy .mxsb-shop-nav__toggle,
.mxsb-header-variant--slim-navy .mxsb-shop-nav__toggle {
background: rgba(255, 255, 255, .12);
color: #fff;
}

.mxsb-header-variant--catalog .mxsb-shop-nav__toggle,
.mxsb-header-variant--slim-blue .mxsb-shop-nav__toggle {
background: #fff;
color: #0874d4;
}

.mxsb-shop-nav__chevron {
font-size: 16px;
transition: transform .18s ease;
}

.mxsb-shop-nav.is-open .mxsb-shop-nav__chevron {
transform: rotate(180deg);
}

@media (min-width: 851px) {
.mxsb-shop-nav.is-open > .mxsb-menu--shop,
.mxsb-shop-nav:focus-within > .mxsb-menu--shop {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
}

.mxsb-mobile-panel__backdrop {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
border: 0;
background: rgba(5, 18, 38, .56);
backdrop-filter: blur(3px);
}

.mxsb-mobile-panel__inner {
position: relative;
z-index: 1;
}

.mxsb-mobile-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(112, 132, 156, .22);
}

.mxsb-mobile-panel__head strong {
font-size: 18px;
font-weight: 850;
}

.mxsb-mobile-panel__close {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--mxsb-border, #dce7f2);
border-radius: 12px;
background: #fff;
color: var(--mxsb-navy, #0b1739);
font-size: 28px;
line-height: 1;
cursor: pointer;
}

body.mxsb-menu-open {
overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
.mxsb-shop-nav__chevron,
.mxsb-mobile-panel,
.mxsb-mobile-panel * {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}

@media (max-width: 850px) {
body.mxsb-menu-open .mxsb-site-header {
z-index: 2147483000;
}

.mxsb-mobile-panel:not([hidden]) {
position: fixed;
inset: 0;
z-index: 2147483000;
display: block;
overflow: hidden;
border: 0;
background: transparent;
isolation: isolate;
}

.mxsb-mobile-panel__backdrop {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
background: rgba(5, 18, 38, .46);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}

.mxsb-mobile-panel__inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
width: min(92vw, 460px) !important;
height: 100vh;
height: 100dvh;
max-height: none !important;
margin: 0 !important;
padding: max(18px, env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)) !important;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-left: 1px solid var(--mxsb-border, #dce7f2);
border-radius: 24px 0 0 24px;
background: #fff !important;
color: var(--mxsb-navy, #0b1739) !important;
box-shadow: -18px 0 48px rgba(5, 18, 38, .20);
opacity: 1 !important;
filter: none !important;
}

.mxsb-mobile-panel__inner :where(nav, ul, li, a, p, strong, span, form, input, button:not(.mxsb-mobile-panel__backdrop)) {
opacity: 1;
filter: none;
}

.mxsb-mobile-panel__head {
position: sticky;
top: calc(-1 * max(18px, env(safe-area-inset-top)));
z-index: 3;
margin: 0 -6px 12px;
padding: max(18px, env(safe-area-inset-top)) 6px 14px;
background: #fff;
}

.mxsb-mobile-panel__head strong,
.mxsb-mobile-menu-list a,
.mxsb-mobile-panel__label {
position: relative;
z-index: 2;
}

.mxsb-mobile-menu-list a {
color: var(--mxsb-navy, #0b1739) !important;
}

.mxsb-mobile-panel__close {
position: relative;
z-index: 4;
flex: 0 0 auto;
}
}

@media (max-width: 420px) {
.mxsb-mobile-panel__inner {
width: calc(100vw - 18px) !important;
border-radius: 20px 0 0 20px;
}
}

@media (min-width: 851px) {
.mxsb-header-variant--catalog .mxsb-shop-nav__toggle,
.mxsb-header-variant--slim-blue .mxsb-shop-nav__toggle {
min-height: 38px;
padding: 8px 14px;
border: 1px solid rgba(255, 255, 255, .94) !important;
background: #ffffff !important;
color: #075fbd !important;
-webkit-text-fill-color: #075fbd !important;
box-shadow: 0 7px 18px rgba(3, 29, 67, .18);
opacity: 1 !important;
text-shadow: none !important;
}

.mxsb-header-variant--catalog .mxsb-shop-nav__toggle :where(.mxsb-icon, .mxsb-shop-nav__chevron),
.mxsb-header-variant--slim-blue .mxsb-shop-nav__toggle :where(.mxsb-icon, .mxsb-shop-nav__chevron) {
color: currentColor !important;
stroke: currentColor !important;
-webkit-text-fill-color: currentColor !important;
opacity: 1 !important;
}

.mxsb-header-variant--catalog .mxsb-shop-nav__toggle:hover,
.mxsb-header-variant--catalog .mxsb-shop-nav__toggle:focus-visible,
.mxsb-header-variant--catalog .mxsb-shop-nav.is-open > .mxsb-shop-nav__toggle,
.mxsb-header-variant--slim-blue .mxsb-shop-nav__toggle:hover,
.mxsb-header-variant--slim-blue .mxsb-shop-nav__toggle:focus-visible,
.mxsb-header-variant--slim-blue .mxsb-shop-nav.is-open > .mxsb-shop-nav__toggle {
border-color: #b8d9fb !important;
background: #eef6ff !important;
color: #004f9e !important;
-webkit-text-fill-color: #004f9e !important;
box-shadow: 0 8px 22px rgba(3, 49, 98, .18), inset 0 0 0 1px rgba(0, 115, 230, .05);
}

.mxsb-site-header .mxsb-shop-nav > .mxsb-menu--shop {
top: calc(100% + 8px) !important;
left: 0 !important;
width: max-content;
min-width: 290px !important;
max-width: min(420px, calc(100vw - 32px));
height: auto !important;
min-height: 0 !important;
max-height: min(68vh, 560px);
padding: 8px !important;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #cddded !important;
border-radius: 14px !important;
background: #ffffff !important;
color: #10233f !important;
box-shadow: 0 18px 44px rgba(4, 31, 67, .18), 0 3px 10px rgba(4, 31, 67, .08) !important;
color-scheme: light !important;
}

.mxsb-site-header .mxsb-shop-nav > .mxsb-menu--shop > li {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
color: #10233f !important;
-webkit-text-fill-color: #10233f !important;
opacity: 1 !important;
}

.mxsb-site-header .mxsb-shop-nav > .mxsb-menu--shop > li + li {
margin-top: 4px !important;
}

.mxsb-site-header .mxsb-shop-nav > .mxsb-menu--shop a,
.mxsb-site-header .mxsb-shop-nav > .mxsb-menu--shop a:link,
.mxsb-site-header .mxsb-shop-nav > .mxsb-menu--shop a:visited {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 42px !important;
padding: 9px 12px !important;
border: 1px solid transparent !important;
border-radius: 9px !important;
background: #ffffff !important;
color: #10233f !important;
-webkit-text-fill-color: #10233f !important;
font-weight: 700 !important;
line-height: 1.25 !important;
text-decoration: none !important;
text-shadow: none !important;
opacity: 1 !important;
filter: none !important;
}

.mxsb-site-header .mxsb-shop-nav > .mxsb-menu--shop a > * {
color: inherit !important;
-webkit-text-fill-color: inherit !important;
opacity: 1 !important;
}

.mxsb-site-header .mxsb-shop-nav > .mxsb-menu--shop a:hover,
.mxsb-site-header .mxsb-shop-nav > .mxsb-menu--shop a:focus-visible {
border-color: #cbe3fb !important;
background: #f1f7fe !important;
color: #075fbd !important;
-webkit-text-fill-color: #075fbd !important;
box-shadow: none !important;
}

.mxsb-site-header .mxsb-shop-nav > .mxsb-menu--shop
:where(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a,
.mxsb-site-header .mxsb-shop-nav > .mxsb-menu--shop
:where(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a:visited {
border-color: #b9d9f8 !important;
background: #e8f3ff !important;
color: #064f9d !important;
-webkit-text-fill-color: #064f9d !important;
font-weight: 850 !important;
box-shadow: inset 3px 0 0 #087bea !important;
}
}

@media (max-width: 767px) {
body.mxsb-mobile-banners-show:not(.mxsb-template-hide-mobile):not(.mxsb-product-hero-hidden):not(.mxsb-standard-hero-hidden) :is(
.mec-page-hero,
.mec-single-hero,
.mec-product-page-hero,
.mxsb-system-hero,
.mxsb-shop-hero,
.mxsb-account-intro,
.mxsb-blog-hero,
.mxsb-contact-hero,
.mxsb-configurator-page-hero
) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

body.mxsb-mobile-banners-show .mxsb-hero.mxsb-configurable-section:not(.mxsb-hide-mobile),
body.mxsb-mobile-banners-show .mec-home-hero:not(.mxsb-hide-mobile),
body.mxsb-mobile-banners-show .mxsb-visual-hero:not(.mxsb-hide-mobile) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}

@media (max-width: 767px) {
html body .mxsb-home > .mxsb-hero.mxsb-configurable-section:not(.mxsb-hide-mobile) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
max-height: none !important;
overflow: visible !important;
}

html body .mxsb-home > .mxsb-hero.mxsb-configurable-section:not(.mxsb-hide-mobile) > .mxsb-container,
html body .mxsb-home > .mxsb-hero.mxsb-configurable-section:not(.mxsb-hide-mobile) .mxsb-hero__grid {
display: grid !important;
visibility: visible !important;
opacity: 1 !important;
}
}