/**
 * Header staff links + top-bar overlap fix.
 * Theme uses 25% + 25% + 50% floats. Extra staff links made the
 * right-floated customlinks grow left over Sign Out, and squeezed
 * "My Wish List" onto 3 lines. Override those floats on desktop.
 */

.header.links.customlinks li a.top-link-create-account,
.header.links.customlinks li a.top-link-customers-list {
    position: relative;
    font-weight: 600;
    white-space: nowrap;
}

.header.links.customlinks li a.top-link-create-account:before,
.header.links.customlinks li a.top-link-customers-list:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-size: 13px;
    line-height: 1;
    position: absolute;
    left: 8px;
    top: 50%;
    margin-top: -6px;
    speak: none;
}

.header.links.customlinks li a.top-link-create-account:before {
    content: "\f234";
}

.header.links.customlinks li a.top-link-customers-list:before {
    content: "\f0c0";
}

.header.links.customlinks li:empty {
    display: none !important;
}

@media only screen and (min-width: 768px) {
    .header-top > .container > .row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
    }

    .header-top > .container > .row > .top-left,
    .header-top > .container > .row > .top-right,
    .header-top > .container > .row > [class*="col-"] {
        float: none !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        min-width: 0;
    }

    .header-top .header-top-link,
    .header-top .welcometop,
    .header-top ul.header.links {
        float: none !important;
        width: auto !important;
    }

    .header-top ul.header.links {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .header-top ul.header.links > li {
        float: none !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        position: relative;
        z-index: 1;
    }

    .header-top ul.header.links > li > a,
    .header-top ul.header.links > li > strong,
    .header-top .top-link-mywishlist,
    .header-top .link.wishlist a {
        white-space: nowrap !important;
        display: inline-block !important;
        width: auto !important;
        max-width: none !important;
    }

    .header.links.customlinks li a,
    .header.links.customlinks li strong {
        padding: 12px 8px 12px 24px !important;
    }

    .header.links.customlinks li a.top-link-create-account,
    .header.links.customlinks li a.top-link-customers-list {
        padding: 12px 8px 12px 24px !important;
        font-size: 13px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .header.links.customlinks li a,
    .header.links.customlinks li strong,
    .header.links.customlinks li a.top-link-create-account,
    .header.links.customlinks li a.top-link-customers-list {
        padding: 10px 6px 10px 22px !important;
        font-size: 12px;
    }
}

@media only screen and (max-width: 767px) {
    .header-top {
        overflow-x: hidden;
    }

    .header-top > .container,
    .header-top > .container > .row,
    .header-top > .container > .row > .top-left,
    .header-top > .container > .row > .top-right,
    .header-top > .container > .row > .mobile-center,
    .header-top .header-top-link {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .header-top ul.header.links,
    .header-top ul.header.links.customlinks {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center;
        align-items: center;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .header-top ul.header.links > li {
        float: none !important;
        flex: 0 0 auto;
    }

    .header.links.customlinks li a,
    .header.links.customlinks li strong,
    .header-top-link ul.links li a.top-link-create-account,
    .header-top-link ul.links li a.top-link-customers-list {
        padding: 8px 8px 8px 22px !important;
        font-size: 12px;
        white-space: nowrap;
    }
}

@media only screen and (max-width: 479px) {
    .header.links.customlinks li a,
    .header.links.customlinks li strong,
    .header-top-link ul.links li a.top-link-create-account,
    .header-top-link ul.links li a.top-link-customers-list {
        padding: 8px 6px 8px 20px !important;
        font-size: 11px;
    }

    .header.links.customlinks li a.top-link-create-account:before,
    .header.links.customlinks li a.top-link-customers-list:before {
        left: 4px;
        font-size: 11px;
    }
}