.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;
    /* Flex items default to min-width:auto -- once .topbar__link-item is forced to
       flex-shrink:0/white-space:nowrap so it stops wrapping its own text, this
       container (and ul.topbar__links) would otherwise refuse to shrink below that
       unshrinkable content's full width and overflow the viewport instead of
       actually respecting the nth-child hide tiers below. */
    min-width: 0;
}

/* Unstyled wrapper div between .top-bar__content and ul.topbar__links -- it's
   still a flex item of .top-bar__content (display governs its own children, not
   whether flex-item sizing rules apply to it), so it inherits the same
   min-width:auto trap and would otherwise silently undo the min-width:0 fixes
   around it. */
.topbar-section {
    min-width: 0;
}

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;
    min-width: 0;
}

.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;
}

/* Explicit :visited/:active are needed here -- without them, a clicked link falls
   back to the browser's default visited-link color (a dark purple/near-black)
   instead of staying on-brand white against the dark top-bar background. */
.topbar__link,
.topbar__link:visited,
.topbar__link:active {
    color: var(--color-topbar-text);
}
.topbar__link:hover {
    color: var(--color-topbar-text-hover);
}


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

/* Tighten the gap between items before resorting to hiding any of them outright --
   a pure headroom optimisation, kicking in a bit earlier (1450px) than the first
   hide tier below (1340px) so there's already some slack reclaimed by the time
   content actually needs removing. */
@media only screen and (max-width: 1450px) {
    .topbar__link-item {
        margin: 0 10px 0 0;
    }
}

/* 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). Scoped to
   .topbar-section:first-child (the SALES/SUPPORT/Head Office list) -- nth-child
   counts position within each parent independently, and the second topbar-section
   (Sign In/Help/Blog) also has a real 2nd child ("Help"), which this rule would
   otherwise hide too as an unintended side effect. */
@media only screen and (max-width: 1340px) {
  .topbar-section:first-child li.topbar__link-item:nth-child(2),
  .topbar-section:first-child 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. Scoped the same way as the 1340px tier above, for the
     same reason (harmless today since the other list only has 3 items, but avoids
     a silent surprise if it ever grows). */
  .topbar-section:first-child li.topbar__link-item:nth-child(6),
  .topbar-section:first-child 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;
    }
}