.top-bar {
    background: var(--color-topbar-background);
    font-size: 14px;
    display: flex;
    height: var(--height-topbar);
    width: 100%;
    z-index: 200;
    position: relative;
}
.top-bar__content {
    max-width: var(--max-width);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 20px;
    flex: 1;
    color: #fff;
    border-bottom: 1px solid #6A6A6A;
}

ul.topbar__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.topbar__link-item {
    margin: 0 20px 0 0;
    font-size: 12px;
    position: relative;
    display: block;
    color: #fff !important;
    /* Without these, a too-narrow row doesn't overflow cleanly -- the flex item
       shrinks below its own content width and wraps its text internally instead
       (e.g. "0800 444 367" breaking mid-number), which is worse than genuine
       overflow. Forcing natural width means the row either fits as-is or relies
       on the nth-child hide tiers below to actually remove content. */
    white-space: nowrap;
    flex-shrink: 0;
}

.topbar__link-separator {
    color: #6A6A6A;
}

.topbar__link-separator:before {
    content: "|";
}


ul.topbar__links .topbar__link-item:last-child {
    margin: 0;
}

.topbar__link {
    color: var(--color-topbar-text);
}
.topbar__link:hover {
    color: var(--color-topbar-text-hover);
}


.topbar__bold-link {
    font-weight: 600;
    font-size: 14px;
}

/* nth-child(2)/(5) are the SALES/SUPPORT email items -- drop just the emails first,
   keeping both phone numbers, both separators, and Head Office all visible (removing
   an email leaves its neighbouring separator with a phone number on one side and
   another item on the other, so no dangling/doubled-up separator here). */
@media only screen and (max-width: 1340px) {
  li.topbar__link-item:nth-child(2),
  li.topbar__link-item:nth-child(5) {
     display:none;
  }
}

@media only screen and (max-width: 1075px) {
  /* nth-child(2)/(5) (the emails) are already hidden by the 1340px tier above --
     nth-child(6) is the separator between SUPPORT and Head Office; drop it together
     with (7) Head Office itself so it doesn't dangle at the end of the list with
     nothing following it. */
  li.topbar__link-item:nth-child(6),
  li.topbar__link-item:nth-child(7){
     display:none;
  }
}

/* Kept in sync with the masterbar's own switch-to-mobile breakpoint (see _masterbar.css)
   — the mobile masterbar's position assumes the top-bar is hidden whenever it's shown,
   so letting them drift out of sync makes the mobile masterbar overlap and hide the
   top-bar in the gap between the two thresholds. */
@media only screen and (max-width: 992px) {
    .top-bar {
        display: none;
    }
    li.topbar__link-item:nth-child(6),
    li.topbar__link-item:nth-child(7){
        display:none;
    }
    #banner-table-cell .col-sm-3 {
        width: 80% !important;
        padding-left: 0px;
    }
    #banner-table-cell .col-sm-6 {
        width: 100% !important;
        padding-left: 0px;
    }
}