/* One canonical BearSpa header for every active page. Source: /index.html. */
.top-bar2-con {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 6.7% !important;
    background: #0c2d6b !important;
    color: #fff !important;
    float: left !important;
}

.top-bar2-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 26px !important;
}

.top-bar2-info ul,
.top-bar-social ul {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.top-bar2-info ul { gap: 27px !important; }
.top-bar-social ul { gap: 22px !important; }

.top-bar2-info ul li {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 12px !important;
    white-space: nowrap !important;
}

.top-bar2-info ul li i {
    padding-right: 11px !important;
    color: #20a9f5 !important;
    font-size: 16px !important;
    line-height: 16px !important;
}

.top-bar2-info a,
.top-bar-social a {
    color: #fff !important;
    text-decoration: none !important;
}

.top-bar-social {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.top-bar-social > span {
    padding-right: 24px !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 12px !important;
}

.top-bar-social ul li,
.top-bar-social ul li a {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 14px !important;
}

.header-con,
.bearspa-site-header.header-con {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-height: 119px !important;
    margin: 0 !important;
    padding: 19px 6.7% !important;
    background: #fff !important;
    float: left !important;
}

.header-con .navbar {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 81px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-con .navbar-brand {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-con .navbar-brand figure { margin: 0 !important; }
.header-con .navbar-brand img {
    display: block !important;
    width: 200px !important;
    height: 71px !important;
    max-width: none !important;
    object-fit: contain !important;
}

.header-con .navbar-collapse { min-width: 0 !important; }
.header-con .navbar-nav {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.header-con .navbar-nav .nav-item { margin: 0 !important; padding: 0 !important; }
.header-con .navbar-light .navbar-nav .nav-link {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #3f3f3f !important;
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

.header-con .header-btn {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-con .phone-num {
    display: flex !important;
    align-items: center !important;
    height: 28px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.header-con .phone-num img {
    box-sizing: content-box !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 8px 0 0 !important;
    object-fit: contain !important;
}

.header-con .phone-num a {
    color: #0c2d6b !important;
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Product content must start below the canonical bars, never beside their floats. */
html body.single .top-bar2-con.bearspa-product-topbar,
html body.single header.bearspa-site-header.header-con {
    float: none !important;
    clear: both !important;
}

html body.single header.bearspa-site-header.header-con + #ajax-content-wrap {
    clear: both !important;
    width: 100% !important;
}

html:has(body.single),
html:has(body.single) body.single {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

html body.single .site-wrapper,
html body.single #ajax-content-wrap,
html body.single #primary,
html body.single #main {
    overflow: visible !important;
}

@media (min-width: 1000px) {
    .header-con .navbar {
        display: grid !important;
        grid-template-columns: 230px minmax(0, 1fr) 170px !important;
        align-items: center !important;
        gap: 28px !important;
    }
    .header-con .navbar-collapse {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
    .header-con .navbar-expand-lg .navbar-nav {
        display: grid !important;
        grid-template-columns: 22.075% 19.516% 14.629% 14.446% 10.347% 10.742% 8.245% !important;
        align-items: center !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .header-con .navbar-expand-lg .navbar-nav > li,
    .header-con .navbar-expand-lg .navbar-nav > li > .nav-link {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .header-con .header-btn { justify-content: flex-end !important; }
    .header-con .navbar-toggler { display: none !important; }
}

@media (min-width: 1401px) {
    .header-con .navbar-expand-lg .navbar-nav {
        grid-template-columns: max-content max-content max-content max-content max-content max-content max-content !important;
        justify-content: space-between !important;
    }
    .header-con .navbar-expand-lg .navbar-nav > li,
    .header-con .navbar-expand-lg .navbar-nav > li > .nav-link {
        width: max-content !important;
    }
    html body.single header.bearspa-site-header.header-con {
        height: 119px !important;
        min-height: 119px !important;
        padding: 19px 6.7% !important;
    }
    html body.single header.bearspa-site-header.header-con > .navbar {
        height: 81px !important;
        min-height: 81px !important;
    }
    html body.single header.bearspa-site-header.header-con .navbar-brand {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
    }
    html body.single header.bearspa-site-header.header-con .navbar-nav {
        display: grid !important;
        grid-template-columns: max-content max-content max-content max-content max-content max-content max-content !important;
        justify-content: space-between !important;
    }
    html body.single header.bearspa-site-header.header-con .navbar-nav > li,
    html body.single header.bearspa-site-header.header-con .navbar-nav > li > .nav-link {
        width: max-content !important;
    }
    html body.single header.bearspa-site-header.header-con .phone-num,
    html body.single header.bearspa-site-header.header-con .phone-num a {
        height: 28px !important;
    }
    html body.single header.bearspa-site-header.header-con .phone-num a {
        color: #0c2d6b !important;
        font-family: Arial, sans-serif !important;
        font-size: 18px !important;
        line-height: 28px !important;
    }
}

/* Product themes contain legacy !important rules; this canonical layer wins. */
@media (min-width: 1200px) and (max-width: 1400px) {
    html body.single header.bearspa-site-header.header-con {
        height: 119px !important;
        min-height: 119px !important;
        padding: 19px 3% !important;
    }
    html body.single header.bearspa-site-header.header-con > .navbar {
        width: 100% !important;
        height: 81px !important;
        min-height: 81px !important;
        grid-template-columns: 230px minmax(0, 1fr) 170px !important;
        gap: 28px !important;
    }
    html body.single header.bearspa-site-header.header-con .navbar-brand {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
    }
    html body.single header.bearspa-site-header.header-con .navbar-nav > li {
        width: 100% !important;
        min-width: 0 !important;
        font-family: Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 18px !important;
        text-transform: uppercase !important;
        text-align: left !important;
    }
    html body.single header.bearspa-site-header.header-con .navbar-nav {
        display: grid !important;
        grid-template-columns: 22.075% 19.516% 14.629% 14.446% 10.347% 10.742% 8.245% !important;
        align-items: center !important;
        width: 100% !important;
        gap: 0 !important;
    }
    html body.single header.bearspa-site-header.header-con .nav-link {
        width: 100% !important;
        color: #3f3f3f !important;
        font-family: Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 18px !important;
        white-space: normal !important;
        text-align: left !important;
    }
    html body.single header.bearspa-site-header.header-con .header-btn {
        width: auto !important;
    }
    html body.single header.bearspa-site-header.header-con .phone-num,
    html body.single header.bearspa-site-header.header-con .phone-num a {
        height: 28px !important;
    }
    html body.single header.bearspa-site-header.header-con .phone-num a {
        color: #0c2d6b !important;
        font-family: Arial, sans-serif !important;
        font-size: 18px !important;
        line-height: 28px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {
    .header-con,
    .bearspa-site-header.header-con { padding: 19px 3% !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header-con,
    .bearspa-site-header.header-con {
        min-height: 99px !important;
        padding: 14px 20px !important;
    }
    .header-con .navbar { min-height: 71px !important; }
    .header-con .phone-num a { font-size: 14px !important; line-height: 22px !important; }
}

@media (max-width: 991px) {
    .top-bar2-con { display: none !important; }
    .header-con,
    .bearspa-site-header.header-con {
        min-height: 79px !important;
        padding: 12px 16px !important;
    }
    .header-con .navbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 55px !important;
    }
    .header-con .navbar-brand img {
        width: 126px !important;
        height: auto !important;
    }
    .header-con .navbar-toggler {
        position: static !important;
        display: block !important;
        top: auto !important;
        right: auto !important;
        width: 24px !important;
        height: 40px !important;
        flex: 0 0 24px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 0 !important;
        background: transparent !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
    .header-con .navbar-collapse {
        position: absolute !important;
        z-index: 1000 !important;
        top: 67px !important;
        left: -16px !important;
        width: calc(100% + 32px) !important;
        background: #fff !important;
    }
    .header-con .navbar-collapse:not(.show) { display: none !important; }
    .header-con .navbar-collapse.show { display: block !important; }
    .header-con .navbar-nav { gap: 0 !important; box-shadow: 1px 1px 5px rgba(0,0,0,.1) !important; }
    .header-con .navbar-nav .nav-item { width: 100% !important; }
    .header-con .navbar-light .navbar-nav .nav-link { padding: 8px 20px !important; }
    .header-con .header-btn,
    .header-con .phone-num { display: none !important; }

    html body.single .top-bar2-con.bearspa-product-topbar { display: none !important; }
    html body.single header.bearspa-site-header.header-con {
        min-height: 79px !important;
        height: auto !important;
        padding: 12px 16px !important;
    }
    html body.single header.bearspa-site-header.header-con > .navbar {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 55px !important;
    }
    html body.single header.bearspa-site-header.header-con .navbar-brand {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
    }
    html body.single header.bearspa-site-header.header-con .navbar-brand img {
        width: 126px !important;
        max-width: 126px !important;
        height: auto !important;
    }
    html body.single header.bearspa-site-header.header-con .navbar-toggler {
        display: block !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: 24px !important;
        height: 40px !important;
        flex: 0 0 24px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
    html body.single header.bearspa-site-header.header-con .header-btn,
    html body.single header.bearspa-site-header.header-con .phone-num {
        display: none !important;
    }
}
