/*
    Controls department filter block
    For show -> display: block !important
    For hide -> display: none !important;
*/
.departmentFilterBlock {
    display: block !important;
}

/* Desktop account utility bar: user, login/logout, and cart */
#headertarget {
    height: auto !important;
    min-height: 44px;
    max-width: 1036px;
    padding: 0 16px !important;
    background: #f5f5f3 !important;
    border-bottom: 1px solid #c8c8c2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

#headertarget > .row {
    min-height: 44px;
    margin: 0;
    align-items: center;
    justify-content: flex-end;
}

#headertarget .col-md-6:first-child {
    display: none !important;
}

#headertarget > .row > .col-md-6.col-lg-7 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
}

#headertarget ul {
    float: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 14px;
}

#headertarget ul li {
    float: none;
    margin: 0;
    padding: 0;
    color: #383838;
}

#headertarget ul li.usertarget {
    padding: 10px 12px;
    font-weight: 600;
}

#headertarget ul li a {
    min-height: 44px;
    padding: 8px 12px;
    color: #10069f;
    border-radius: 4px;
    font-weight: 600;
    line-height: 28px;
    text-decoration: none;
    vertical-align: middle;
}

/*
    Login/logout visibility is controlled by Jenzabar's initUserInfo() toggle.
    Do not set display on those anchors before that script runs, or the toggle
    will invert the authenticated state. The cart link is always visible and
    can safely retain the flex alignment used by this utility bar.
*/
#headertarget ul li a.cartIcon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (min-width: 768px) {
    #headertarget ul li.usertarget:empty {
        display: none;
    }

    #headertarget ul li a.cartIcon::before {
        content: "Cart";
    }

    #headertarget ul li a.cartIcon img {
        width: 16px;
        height: auto;
    }
}

#headertarget ul li a span {
    color: inherit;
}

#headertarget ul li a:hover,
#headertarget ul li a:focus {
    color: #fff;
    background: #10069f;
}

#headertarget ul li a:focus-visible {
    outline: 3px solid #f8c400;
    outline-offset: 2px;
}

/*
    Mobile uses the slide-out navigation rather than the desktop utility strip.
    Distinguish the customer-status block inside the drawer and retain a compact,
    touch-friendly cart action in the phone header.
*/
@media (max-width: 767.98px) {
    .navbar-collapse .banner {
        align-items: center;
        min-height: 60px;
        height: auto;
        padding: 10px 12px;
        color: #383838;
        background: #f5f5f3 !important;
        border-bottom: 1px solid #c8c8c2;
    }

    .navbar-collapse .banner p {
        margin: 0;
        padding: 0;
        color: #383838;
        font-weight: 600;
        line-height: 1.35;
    }

    .navbar-collapse .banner .avatar {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        margin: 0 12px 0 0;
        padding: 7px;
        background: #fff;
        border: 1px solid #c8c8c2;
    }

    .navbar a.nav-cart {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 0 4px;
        padding: 10px;
        border-radius: 4px;
    }

    .navbar a.nav-cart img {
        max-width: 20px;
        max-height: 20px;
    }

    .navbar a.nav-cart:focus-visible {
        outline: 3px solid #f8c400;
        outline-offset: 2px;
    }
}