/* ==========================================================================
   Smtbox Header & Navigation Architecture
   Clean Specificity Cascade, Token-Driven, Responsive Visibility Engine
   ========================================================================== */

/* Canonical 8-Tier Cascade Layers Apex Declaration (Idempotent) */
@layer reset, vendor, tokens, base, layout, components, utilities, overrides;

@layer layout {

/* 1. Header Wrapper & Stacking Context */
:where(#wrapper) {
    position: relative;
    z-index: var(--smt-z-base);
}

header#header,
.header-wrapper {
    position: relative;
    z-index: var(--smt-z-header-wrapper);
    overflow: visible;
}

#masthead,
.header-main {
    background-color: var(--smt-color-bg-white, #ffffff);
    min-height: 104px;
    padding: 6px 0;
    position: relative;
    z-index: var(--smt-z-header-wrapper, 99999);
}

.header-inner {
    display: flex;
    align-items: center;
    min-height: 92px;
}


/* 2. Header Bottom Container Geometry (Exact 43px Baseline Lock & Zero Drop-down Gap) */
html body :where(#wrapper) header#header #wide-nav.header-bottom,
html body :where(#wrapper) header#header .header-bottom,
html body #header #wide-nav.header-bottom,
html body #header .header-bottom,
html body #wide-nav.header-bottom,
#header #wide-nav.header-bottom,
#header .header-bottom,
#wide-nav.header-bottom,
.header-bottom,
html body #header .header-bottom {
    height: var(--smt-nav-height, 43px);
    min-height: var(--smt-nav-height, 43px);
    max-height: var(--smt-nav-height, 43px);
    background-color: var(--smt-color-accent, #CF0921);
    overflow: visible;
    position: relative;
    z-index: var(--smt-z-header-nav, 999999);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Seamless navbar layout: remove leftmost gutter & container padding on header-bottom */
html body #header .header-bottom .container,
html body #header #wide-nav .container,
html body #wide-nav .container,
#header .header-bottom .container,
#header #wide-nav .container,
.header-bottom .container,
.header-bottom .flex-row.container,
.header-bottom .flex-row,
#wide-nav .flex-row {
    height: var(--smt-nav-height, 43px);
    min-height: var(--smt-nav-height, 43px);
    max-height: var(--smt-nav-height, 43px);
    margin: 0 auto;
    padding: 0;
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
    align-items: stretch;
    overflow: visible;
    box-sizing: border-box;
}

.header-bottom .flex-col,
.header-bottom .flex-left,
.header-bottom .flex-center,
.header-bottom .flex-right,
#wide-nav .flex-col,
#wide-nav .flex-left {
    height: var(--smt-nav-height, 43px);
    min-height: var(--smt-nav-height, 43px);
    max-height: var(--smt-nav-height, 43px);
    align-items: stretch;
    overflow: visible;
    margin: 0;
    margin-left: 0 !important;
    padding: 0;
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
    box-sizing: border-box;
}

.header-bottom .header-bottom-nav,
.header-bottom-nav,
#wide-nav .header-bottom-nav {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    height: var(--smt-nav-height, 43px);
    min-height: var(--smt-nav-height, 43px);
    max-height: var(--smt-nav-height, 43px);
    margin: 0;
    margin-left: 0 !important;
    padding: 0;
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
    list-style: none;
    box-sizing: border-box;
}

/* Categorylist seamless leftmost alignment & eliminate leading gap */
.header-bottom-nav > li.categorylist,
.header-bottom-nav > li:first-child.categorylist,
#wide-nav .header-bottom-nav > li.categorylist {
    margin-left: 0 !important;
    border-left: none !important;
}

.header-bottom-nav > li.categorylist > a,
.header-bottom-nav > li:first-child.categorylist > a,
#wide-nav .header-bottom-nav > li.categorylist > a {
    margin-left: 0 !important;
    border-left: none !important;
    padding-left: 20px;
    padding-right: 20px;
}

/* Suppress ghost search item in header bottom nav to ensure seamless left edge */
.header-bottom-nav > li.header-search-form,
.header-bottom-nav > li.search-form {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
}

html body :where(#wrapper) #header .header-bottom .header-bottom-nav > li,
html body :where(#wrapper) #header #wide-nav .header-bottom-nav > li,
html body #header .header-bottom .header-bottom-nav > li,
html body #header .header-bottom-nav > li,
html body #header #wide-nav .header-bottom-nav > li,
html body #wide-nav .header-bottom-nav > li,
.header-bottom .header-bottom-nav > li,
.header-bottom-nav > li,
#wide-nav .header-bottom-nav > li {
    flex: 0 0 auto;
    height: var(--smt-nav-height, 43px);
    min-height: var(--smt-nav-height, 43px);
    max-height: var(--smt-nav-height, 43px);
    display: flex;
    align-items: stretch;
    align-self: stretch;
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
}

html body :where(#wrapper) #header .header-bottom .header-bottom-nav > li > a,
html body :where(#wrapper) #header #wide-nav .header-bottom-nav > li > a,
html body #header .header-bottom .header-bottom-nav > li > a,
html body #header .header-bottom-nav > li > a,
html body #header #wide-nav .header-bottom-nav > li > a,
html body #wide-nav .header-bottom-nav > li > a,
.header-bottom .header-bottom-nav > li > a,
.header-bottom-nav > li > a,
#wide-nav .header-bottom-nav > li > a {
    height: var(--smt-nav-height, 43px);
    min-height: var(--smt-nav-height, 43px);
    max-height: var(--smt-nav-height, 43px);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 0 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
    box-sizing: border-box;
    margin: 0;
    transition: background-color var(--smt-transition-fast, 0.15s ease), color var(--smt-transition-fast, 0.15s ease);
}

html body #header .header-bottom-nav > li.categorylist > a,
html body #wide-nav .header-bottom-nav > li.categorylist > a,
.header-bottom-nav > li.categorylist > a {
    padding: 0 18px;
}

/* Tier 3: High Specificity Navigation Items Hover & Active State (Zero important) */
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist):hover > a,
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist).current-dropdown > a,
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist).active > a,
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist).current-menu-item > a,
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist).current_page_item > a,
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist).current-menu-ancestor > a,
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist).current_page_ancestor > a,
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist).current-menu-parent > a,
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist).current_page_parent > a,
html body #header .header-bottom-nav > li:not(.categorylist):hover > a,
html body #header .header-bottom-nav > li:not(.categorylist).current-dropdown > a,
html body #header .header-bottom-nav > li:not(.categorylist).active > a,
html body #header .header-bottom-nav > li:not(.categorylist).current-menu-item > a,
html body #header .header-bottom-nav > li:not(.categorylist).current_page_item > a,
html body #header .header-bottom-nav > li:not(.categorylist).current-menu-ancestor > a,
html body #header .header-bottom-nav > li:not(.categorylist).current_page_ancestor > a,
html body #header .header-bottom-nav > li:not(.categorylist).current-menu-parent > a,
html body #header .header-bottom-nav > li:not(.categorylist).current_page_parent > a,
html body #wide-nav .header-bottom-nav > li:not(.categorylist):hover > a,
html body #wide-nav .header-bottom-nav > li:not(.categorylist).current-dropdown > a,
html body #wide-nav .header-bottom-nav > li:not(.categorylist).active > a,
html body #wide-nav .header-bottom-nav > li:not(.categorylist).current-menu-item > a,
html body #wide-nav .header-bottom-nav > li:not(.categorylist).current_page_item > a,
html body #wide-nav .header-bottom-nav > li:not(.categorylist).current-menu-ancestor > a,
html body #wide-nav .header-bottom-nav > li:not(.categorylist).current_page_ancestor > a,
html body #wide-nav .header-bottom-nav > li:not(.categorylist).current-menu-parent > a,
html body #wide-nav .header-bottom-nav > li:not(.categorylist).current_page_parent > a,
html body .header-bottom-nav > li:not(.categorylist):hover > a,
html body .header-bottom-nav > li:not(.categorylist).current-dropdown > a,
html body .header-bottom-nav > li:not(.categorylist).active > a,
html body .header-bottom-nav > li:not(.categorylist).current-menu-item > a,
html body .header-bottom-nav > li:not(.categorylist).current_page_item > a,
html body .header-bottom-nav > li:not(.categorylist).current-menu-ancestor > a,
html body .header-bottom-nav > li:not(.categorylist).current_page_ancestor > a,
html body .header-bottom-nav > li:not(.categorylist).current-menu-parent > a,
html body .header-bottom-nav > li:not(.categorylist).current_page_parent > a,
.header-bottom-nav > li:not(.categorylist):hover > a,
.header-bottom-nav > li:not(.categorylist).current-dropdown > a,
.header-bottom-nav > li:not(.categorylist).active > a,
.header-bottom-nav > li:not(.categorylist).current-menu-item > a,
.header-bottom-nav > li:not(.categorylist).current_page_item > a,
.main-navigation li:hover > a,
.main-navigation li:focus-within > a,
.main-navigation li.current-menu-item > a,
.main-navigation li.active > a {
    background-color: var(--smt-color-primary, #002780);
    color: #ffffff;
}

/* Active Navigation Tab Corporate Blue Specificity Enforcement */
.current-menu-item > a,
.current_page_item > a,
.current-menu-ancestor > a,
.header-bottom-nav > li.current-menu-item > a,
.header-bottom-nav > li.current_page_item > a,
.header-bottom-nav > li.current-menu-ancestor > a,
.header-bottom-nav > li:not(.categorylist).current-menu-item > a,
.header-bottom-nav > li:not(.categorylist).current_page_item > a,
.header-bottom-nav > li:not(.categorylist).current-menu-ancestor > a,
.header-nav > li.current-menu-item > a,
.header-nav > li.current_page_item > a,
.header-nav > li.current-menu-ancestor > a,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-ancestor > a {
    background-color: #002780 !important;
    color: #FFFFFF !important;
}

html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist):hover,
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist).current-dropdown,
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist).active,
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist).current-menu-item,
html body :where(#wrapper) header#header .header-bottom-nav > li:not(.categorylist).current_page_item,
html body #header .header-bottom-nav > li:not(.categorylist):hover,
html body #header .header-bottom-nav > li:not(.categorylist).current-dropdown,
html body #header .header-bottom-nav > li:not(.categorylist).active,
html body #header .header-bottom-nav > li:not(.categorylist).current-menu-item,
html body #header .header-bottom-nav > li:not(.categorylist).current_page_item,
html body #wide-nav .header-bottom-nav > li:not(.categorylist):hover,
html body #wide-nav .header-bottom-nav > li:not(.categorylist).current-dropdown,
html body #wide-nav .header-bottom-nav > li:not(.categorylist).active,
html body #wide-nav .header-bottom-nav > li:not(.categorylist).current-menu-item,
html body #wide-nav .header-bottom-nav > li:not(.categorylist).current_page_item,
html body .header-bottom-nav > li:not(.categorylist):hover,
html body .header-bottom-nav > li:not(.categorylist).current-dropdown,
html body .header-bottom-nav > li:not(.categorylist).active,
html body .header-bottom-nav > li:not(.categorylist).current-menu-item,
html body .header-bottom-nav > li:not(.categorylist).current_page_item,
.header-bottom-nav > li:not(.categorylist):hover,
.header-bottom-nav > li:not(.categorylist).current-dropdown,
.header-bottom-nav > li:not(.categorylist).active,
.header-bottom-nav > li:not(.categorylist).current-menu-item,
.header-bottom-nav > li:not(.categorylist).current_page_item {
    background-color: var(--smt-color-primary, #002780);
}

/* ==========================================================================
   Navigation Dropdown Chevron Dynamic Transform & Smooth 180deg Rotation
   Chevrons: default state transform: rotate(0deg) (downward).
   Only rotate rotate(180deg) (upward) on li:hover > a::after or li:focus-within > a::after.
   Remove hardcoded 180deg on .current-menu-item.
   ========================================================================== */
li > a::after,
li.has-dropdown > a::after,
li.categorylist > a::after,
li.menu-item-has-children > a::after,
.header-bottom-nav > li.has-dropdown > a::after,
.header-bottom-nav > li.categorylist > a::after,
.header-nav > li.has-dropdown > a::after,
.nav > li.has-dropdown > a::after,
.main-navigation li.menu-item-has-children > a::after,
.main-navigation li.has-dropdown > a::after,
#header .header-bottom-nav > li.has-dropdown > a > i.icon-angle-down,
#header .header-bottom-nav > li.categorylist > a > i.icon-angle-down,
#header .header-nav > li.has-dropdown > a > i.icon-angle-down,
#header .nav > li.has-dropdown > a > i.icon-angle-down,
.header-bottom-nav > li.has-dropdown > a > i.icon-angle-down,
.header-bottom-nav > li.categorylist > a > i.icon-angle-down,
.header-nav > li.has-dropdown > a > i.icon-angle-down,
.nav > li.has-dropdown > a > i.icon-angle-down {
    color: #ffffff;
    background: transparent;
    background-color: transparent;
    margin-inline-start: 6px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    will-change: transform;
}

/* Only rotate 180deg (upward) on li:hover or li:focus-within */
li:hover > a::after,
li:focus-within > a::after,
li.has-dropdown:hover > a::after,
li.has-dropdown:focus-within > a::after,
li.categorylist:hover > a::after,
li.categorylist:focus-within > a::after,
li.menu-item-has-children:hover > a::after,
li.menu-item-has-children:focus-within > a::after,
.header-bottom-nav > li.has-dropdown:hover > a::after,
.header-bottom-nav > li.has-dropdown:focus-within > a::after,
.header-bottom-nav > li.categorylist:hover > a::after,
.header-bottom-nav > li.categorylist:focus-within > a::after,
.header-nav > li.has-dropdown:hover > a::after,
.header-nav > li.has-dropdown:focus-within > a::after,
.nav > li.has-dropdown:hover > a::after,
.nav > li.has-dropdown:focus-within > a::after,
.main-navigation li.menu-item-has-children:hover > a::after,
.main-navigation li.menu-item-has-children:focus-within > a::after,
#header .header-bottom-nav > li.has-dropdown:hover > a > i.icon-angle-down,
#header .header-bottom-nav > li.has-dropdown:focus-within > a > i.icon-angle-down,
#header .header-bottom-nav > li.categorylist:hover > a > i.icon-angle-down,
#header .header-bottom-nav > li.categorylist:focus-within > a > i.icon-angle-down,
#header .header-nav > li.has-dropdown:hover > a > i.icon-angle-down,
#header .header-nav > li.has-dropdown:focus-within > a > i.icon-angle-down,
#header .nav > li.has-dropdown:hover > a > i.icon-angle-down,
#header .nav > li.has-dropdown:focus-within > a > i.icon-angle-down,
.header-bottom-nav > li.has-dropdown:hover > a > i.icon-angle-down,
.header-bottom-nav > li.has-dropdown:focus-within > a > i.icon-angle-down,
.header-bottom-nav > li.categorylist:hover > a > i.icon-angle-down,
.header-bottom-nav > li.categorylist:focus-within > a > i.icon-angle-down,
.header-nav > li.has-dropdown:hover > a > i.icon-angle-down,
.header-nav > li.has-dropdown:focus-within > a > i.icon-angle-down,
.nav > li.has-dropdown:hover > a > i.icon-angle-down,
.nav > li.has-dropdown:focus-within > a > i.icon-angle-down {
    color: #ffffff;
    background: transparent;
    background-color: transparent;
    transform: rotate(180deg);
}

/* Explicit Reset: Remove hardcoded 180deg on .current-menu-item / .active when closed */
.current-menu-item:not(:hover):not(:focus-within) > a::after,
.current_page_item:not(:hover):not(:focus-within) > a::after,
.current-menu-ancestor:not(:hover):not(:focus-within) > a::after,
.active:not(:hover):not(:focus-within) > a::after,
.current-dropdown:not(:hover):not(:focus-within) > a::after,
.current-menu-item:not(:hover):not(:focus-within) > a > i.icon-angle-down,
.current_page_item:not(:hover):not(:focus-within) > a > i.icon-angle-down,
.current-menu-ancestor:not(:hover):not(:focus-within) > a > i.icon-angle-down,
.active:not(:hover):not(:focus-within) > a > i.icon-angle-down,
.current-dropdown:not(:hover):not(:focus-within) > a > i.icon-angle-down {
    transform: rotate(0deg) !important;
}



html body :where(#wrapper) header#header .header-bottom-nav > li.categorylist > a,
html body :where(#wrapper) header#header .header-bottom-nav > li.categorylist,
html body #header .header-bottom-nav > li.categorylist > a,
html body #header .header-bottom-nav > li.categorylist,
html body #wide-nav .header-bottom-nav > li.categorylist > a,
html body #wide-nav .header-bottom-nav > li.categorylist,
.header-bottom-nav > li.categorylist > a,
.header-bottom-nav > li.categorylist {
    background-color: var(--smt-color-primary, #002780);
    color: #ffffff;
    position: relative;
}

html body :where(#wrapper) header#header .header-bottom-nav > li.categorylist:hover > a,
html body :where(#wrapper) header#header .header-bottom-nav > li.categorylist:hover,
html body #header .header-bottom-nav > li.categorylist:hover > a,
html body #header .header-bottom-nav > li.categorylist:hover,
html body #wide-nav .header-bottom-nav > li.categorylist:hover > a,
html body #wide-nav .header-bottom-nav > li.categorylist:hover,
.header-bottom-nav > li.categorylist:hover > a,
.header-bottom-nav > li.categorylist:hover,
.header-bottom-nav > li.categorylist.current-dropdown > a,
.header-bottom-nav > li.categorylist.active > a {
    background-color: var(--smt-color-primary-hover, #001f66);
    color: #ffffff;
}

/* Vertical Menu (SMT Machines Parts Categories) Inner Page Default-Collapsed & Popover Floating Dropdown */
html body:not(.home) #header .header-bottom-nav > li.categorylist > .nav-dropdown,
html body.archive #header .header-bottom-nav > li.categorylist > .nav-dropdown,
html body.single-product #header .header-bottom-nav > li.categorylist > .nav-dropdown,
html body.page #header .header-bottom-nav > li.categorylist > .nav-dropdown,
html body.blog #header .header-bottom-nav > li.categorylist > .nav-dropdown,
html body #header .header-bottom-nav > li.categorylist > .nav-dropdown,
html body #wide-nav .header-bottom-nav > li.categorylist > .nav-dropdown,
body:not(.home) .header-bottom-nav > li.categorylist > .nav-dropdown,
.archive .header-bottom-nav > li.categorylist > .nav-dropdown,
.single-product .header-bottom-nav > li.categorylist > .nav-dropdown,
.page .header-bottom-nav > li.categorylist > .nav-dropdown,
.blog .header-bottom-nav > li.categorylist > .nav-dropdown,
.header-bottom-nav > li.categorylist > .nav-dropdown {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    display: none;
    z-index: var(--smt-z-dropdown, 999999);
}

html body:not(.home) #header .header-bottom-nav > li.categorylist:hover > .nav-dropdown,
html body.archive #header .header-bottom-nav > li.categorylist:hover > .nav-dropdown,
html body.single-product #header .header-bottom-nav > li.categorylist:hover > .nav-dropdown,
html body.page #header .header-bottom-nav > li.categorylist:hover > .nav-dropdown,
html body.blog #header .header-bottom-nav > li.categorylist:hover > .nav-dropdown,
html body #header .header-bottom-nav > li.categorylist:hover > .nav-dropdown,
html body #header .header-bottom-nav > li.categorylist > .nav-dropdown.is-portal-open,
html body #header .header-bottom-nav > li.categorylist.is-portal-active > .nav-dropdown,
html body #wide-nav .header-bottom-nav > li.categorylist:hover > .nav-dropdown,
body:not(.home) .header-bottom-nav > li.categorylist:hover > .nav-dropdown,
.archive .header-bottom-nav > li.categorylist:hover > .nav-dropdown,
.single-product .header-bottom-nav > li.categorylist:hover > .nav-dropdown,
.page .header-bottom-nav > li.categorylist:hover > .nav-dropdown,
.blog .header-bottom-nav > li.categorylist:hover > .nav-dropdown,
.header-bottom-nav > li.categorylist:hover > .nav-dropdown,
.header-bottom-nav > li.categorylist > .nav-dropdown.is-portal-open,
.header-bottom-nav > li.categorylist.is-portal-active > .nav-dropdown,
.header-bottom-nav .nav-dropdown:popover-open,
.header-bottom-nav .nav-dropdown[popover]:popover-open {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* 3. SMTBOX Sticky Navigation Bar Search (Hidden by default; only displayed when header is stuck on pagedown) */
.sre-sticky-search,
.smtbox-sticky-search,
.flex-col.sre-sticky-search,
.flex-col.smtbox-sticky-search,
.hide-for-medium.sre-sticky-search,
.hide-for-medium.smtbox-sticky-search,
.flex-col.hide-for-medium.sre-sticky-search,
.flex-col.hide-for-medium.smtbox-sticky-search {
    display: none;
    margin-inline-start: auto;
    padding-inline-end: 15px;
    align-items: center;
    height: var(--smt-nav-height, 43px);
}

html body #header .header-wrapper.stuck .sre-sticky-search,
html body #header .header-wrapper.stuck .smtbox-sticky-search,
html body #header .header-wrapper.stuck .flex-col.sre-sticky-search,
html body #header .header-wrapper.stuck .flex-col.smtbox-sticky-search,
html body #header .header-wrapper.stuck .hide-for-medium.sre-sticky-search,
html body #header .header-wrapper.stuck .hide-for-medium.smtbox-sticky-search,
html body #header .header-wrapper.stuck .flex-col.hide-for-medium.sre-sticky-search,
html body #header .header-wrapper.stuck .flex-col.hide-for-medium.smtbox-sticky-search,
.header-wrapper.stuck .sre-sticky-search,
.header-wrapper.stuck .smtbox-sticky-search,
.header-wrapper.stuck .flex-col.sre-sticky-search,
.header-wrapper.stuck .flex-col.smtbox-sticky-search,
.header-wrapper.stuck .hide-for-medium.sre-sticky-search,
.header-wrapper.stuck .hide-for-medium.smtbox-sticky-search,
.header-wrapper.stuck .flex-col.hide-for-medium.sre-sticky-search,
.header-wrapper.stuck .flex-col.hide-for-medium.smtbox-sticky-search {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--smt-nav-height, 43px);
}

.header-wrapper.stuck .header-bottom-nav > li > a {
    padding-inline-start: 9px;
    padding-inline-end: 9px;
    font-size: 13px;
    letter-spacing: 0;
}

.sre-sticky-search-wrapper,
.smtbox-sticky-search-wrapper {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    box-sizing: border-box;
}

.sre-sticky-search-wrapper:focus-within,
.smtbox-sticky-search-wrapper:focus-within,
.sre-sticky-search-wrapper.is-expanded,
.smtbox-sticky-search-wrapper.is-expanded {
    width: 240px;
}

.sre-sticky-searchform,
.smtbox-sticky-searchform {
    background: #ffffff;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    margin: 0;
    padding: 0;
    height: 36px;
    width: 100%;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    box-sizing: border-box;
}

.sre-search-inner,
.smtbox-search-inner,
.sre-sticky-searchform .flex-row,
.smtbox-sticky-searchform .flex-row {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
}

.sre-sticky-searchform .flex-col,
.smtbox-sticky-searchform .flex-col {
    margin: 0;
    padding: 0;
    height: 36px;
    display: flex;
    align-items: stretch;
}

.sre-sticky-searchform .search-field,
.smtbox-sticky-searchform .search-field {
    height: 36px;
    line-height: 36px;
    padding: 0;
    width: 0;
    opacity: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #1e293b;
    background: transparent;
    border: none;
    border-start-start-radius: 9999px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-end-start-radius: 9999px;
    box-shadow: none;
    outline: none;
    margin: 0;
    box-sizing: border-box;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.2s ease, 
                padding 0.28s ease;
    
}

.sre-sticky-search-wrapper:focus-within .search-field,
.smtbox-sticky-search-wrapper:focus-within .search-field,
.sre-sticky-search-wrapper.is-expanded .search-field,
.smtbox-sticky-search-wrapper.is-expanded .search-field {
    width: calc(100% - 36px);
    opacity: 1;
    padding-block: 0 0;
    padding-inline-start: 14px;
    padding-inline-end: 10px;
    
}

.sre-sticky-searchform .search-field::placeholder,
.smtbox-sticky-searchform .search-field::placeholder {
    color: #64748b;
    opacity: 1;
    font-size: 12px;
}

.sre-sticky-searchform .submit-button,
.smtbox-sticky-searchform .submit-button {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    width: 36px;
    min-width: 36px;
    background: #002780;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sre-sticky-searchform .submit-button:hover,
.smtbox-sticky-searchform .submit-button:hover {
    background: #001f66;
}

.sre-sticky-searchform .submit-button i,
.smtbox-sticky-searchform .submit-button i {
    font-size: 13px;
    color: #ffffff;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* ==========================================================================
   4. Responsive Visibility Engine (Flatsome Standard Classes)
   ========================================================================== */
@media (max-width: 549px) {
    .hide-for-small { display: none; }
    .show-for-small { display: block; }
    .show-for-small.flex-col { display: flex; }
    .show-for-small.flex-row { display: flex; }
}

@media (min-width: 550px) {
    .show-for-small { display: none; }
    .hide-for-small { display: block; }
}

@media (max-width: 849px) {
    .hide-for-medium { display: none; }
    .show-for-medium { display: block; }
    .show-for-medium.flex-col { display: flex; }
    .show-for-medium.flex-row { display: flex; }
    .header-bottom { display: none; }
}

@media (min-width: 850px) {
    .show-for-medium { display: none; }
    .hide-for-medium:not(.sre-sticky-search):not(.smtbox-sticky-search) { display: block; }
    .hide-for-medium.flex-col:not(.sre-sticky-search):not(.smtbox-sticky-search) { display: flex; }
    .hide-for-medium.flex-row:not(.sre-sticky-search):not(.smtbox-sticky-search) { display: flex; }
}

/* ==========================================================================
   5. Header Logo Responsive Architecture (Desktop, Tablet, Mobile)
   ========================================================================== */

html body #header #logo,
html body #header .logo,
html body header#header #logo,
html body header#header .logo,
#logo,
.logo {
    display: flex;
    align-items: center;
    height: 82px;
    max-height: 82px;
    width: 260px;
    max-width: 260px;
    overflow: visible;
    margin: 0;
    position: relative;
    z-index: 999;
}

html body #header #logo .header_logo,
html body #header #logo .header-logo,
html body #header .header_logo,
html body #header .header-logo,
html body #header .header-logo-link,
html body header#header #logo .header_logo,
html body header#header #logo .header-logo,
html body header#header .header_logo,
html body header#header .header-logo,
html body header#header .header-logo-link,
#logo .header_logo,
#logo .header-logo,
.header_logo,
.header-logo,
.header-logo-link {
    display: block;
    width: 260px;
    height: 82px;
    max-width: 100%;
    max-height: 82px;
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    overflow: visible;
}

/* Tablet & Mobile Header Layout (< 850px) */
@media screen and (max-width: 849px) {
    html body #masthead .header-inner,
    html body .header-main .header-inner,
    html body header#header .header-inner,
    #masthead .header-inner,
    .header-main .header-inner {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    html body #header #logo,
    html body #header .logo,
    html body #masthead #logo,
    html body header#header #logo,
    html body header#header .logo,
    #logo,
    .logo,
    #masthead #logo {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
        width: 220px;
        max-width: calc(100% - 65px);
        height: 65px;
        max-height: 70px;
        margin: 0;
        overflow: visible;
    }

    html body #header #logo .header_logo,
    html body #header #logo .header-logo,
    html body #header .header_logo,
    html body #header .header-logo,
    html body #header .header-logo-link,
    html body header#header #logo .header_logo,
    html body header#header #logo .header-logo,
    html body header#header .header_logo,
    html body header#header .header-logo,
    html body header#header .header-logo-link,
    #logo .header_logo,
    #logo .header-logo,
    .header_logo,
    .header-logo,
    .header-logo-link {
        width: 100%;
        max-width: 220px;
        height: 65px;
        max-height: 70px;
        background-size: contain;
        background-position: left center;
        background-repeat: no-repeat;
        flex-shrink: 0;
    }

    html body #header .mobile-nav,
    html body #header .header-main .flex-col.show-for-medium,
    html body #header [data-open="#main-menu"],
    html body header#header .mobile-nav,
    html body header#header .header-main .flex-col.show-for-medium,
    html body header#header [data-open="#main-menu"],
    .mobile-nav,
    .header-main .flex-col.show-for-medium,
    [data-open="#main-menu"] {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline-start: auto;
        flex-shrink: 0;
        z-index: 100;
    }
}

/* Small Smartphone (< 480px) */
@media screen and (max-width: 480px) {
    html body #header #logo,
    html body #header .logo,
    html body #masthead #logo,
    html body header#header #logo,
    html body header#header .logo,
    #logo,
    .logo,
    #masthead #logo {
        width: 195px;
        max-width: calc(100% - 55px);
        height: 58px;
        max-height: 60px;
    }

    html body #header #logo .header_logo,
    html body #header #logo .header-logo,
    html body #header .header_logo,
    html body #header .header-logo,
    html body #header .header-logo-link,
    html body header#header #logo .header_logo,
    html body header#header #logo .header-logo,
    html body header#header .header_logo,
    html body header#header .header-logo,
    html body header#header .header-logo-link,
    #logo .header_logo,
    #logo .header-logo,
    .header_logo,
    .header-logo,
    .header-logo-link {
        width: 100%;
        max-width: 195px;
        height: 58px;
        max-height: 60px;
    }
}

/* Extra Small Smartphone (< 360px) */
@media screen and (max-width: 360px) {
    html body #header #logo,
    html body #header .logo,
    html body #masthead #logo,
    html body header#header #logo,
    html body header#header .logo,
    #logo,
    .logo,
    #masthead #logo {
        width: 170px;
        max-width: calc(100% - 50px);
        height: 52px;
        max-height: 55px;
    }

    html body #header #logo .header_logo,
    html body #header #logo .header-logo,
    html body #header .header_logo,
    html body #header .header-logo,
    html body #header .header-logo-link,
    html body header#header #logo .header_logo,
    html body header#header #logo .header-logo,
    html body header#header .header_logo,
    html body header#header .header-logo,
    html body header#header .header-logo-link,
    #logo .header_logo,
    #logo .header-logo,
    .header_logo,
    .header-logo,
    .header-logo-link {
        width: 100%;
        max-width: 170px;
        height: 52px;
        max-height: 55px;
    }
}

} /* End @layer layout */