.tabbedcontent{
  margin: 40px 0;
}

.tabbedcontent .item-list li {
  margin: 0;
  padding: 0;
}

.tabbedcontent .quicktabs-tabs a{
  /* Flex, not the original `display: inline`. `height` and `max-width` do not
     apply to an inline box, so the 74.6px and 130px declared here never took
     effect; they are removed rather than left to surprise someone, since
     130px would clamp a long tab like "Seal Peel Melting Tank" to a sliver.
     As an inline box the 20px padding painted OUTSIDE the line box, so the
     moment the row wrapped the rows sat 19px apart while each tab claimed
     63px, and the tabs overlapped each other by 44px. */
  display: flex;
  align-items: center;
  padding: 20px;
  /* Each tab paints its own segment of the rule, and the ::after filler on the
     list paints the rest of the way to the right edge. The list itself paints
     none of it.

     The rule used to live on the list, with the tab's border laid over the top
     of it. Those two boxes have identical coordinates, so it looked right at
     100% zoom, but a parent and a child snap to device pixels independently:
     at 90% zoom the orange landed a row below the grey and the join showed a
     1px step. Sibling boxes on one flex line share a bottom edge and snap
     together, which is what makes this hold up under zoom. */
  border-bottom: 3px solid #dfdfdf;
  line-height: 18px;
  font-weight: bold;
}
.page-node-type-products .tabbedcontent .quicktabs-tabs a{
  text-transform: uppercase;
}
.tabbedcontent .quicktabs-tabs li.active a{
  background-color: #fff;
  /* Colour only, so the orange is the same box and the same 3px as the grey it
     replaces and cannot drift out of step with it. */
  border-bottom-color: var(--phi-orange);
  color: var(--phi-orange);
}
/* Wrapping flex row at every width, not just under a breakpoint. Whether the
   tabs wrap depends on how long their labels are, not on the viewport: the
   Thermocouple product wrapped (and overlapped) at 768px while the ELEPOT one
   did not, so a media query was the wrong tool for it. */
.tabbedcontent ul.quicktabs-tabs{
  display: flex;
  flex-wrap: wrap;
  /* No bottom padding: the rule is drawn by the tabs and the filler below, and
     padding here would push it away from them. */
  padding: 20px 20px 0 0;
  line-height: 19px;
  margin-bottom: 2rem;
}
.tabbedcontent ul.quicktabs-tabs li{
  display: flex;
  background: none;
  list-style-type: none;
  padding: 0;
  white-space: unset;
}
/* Carries the rule from the last tab to the right-hand edge. A flex sibling of
   the tabs rather than a border on the list, so every part of the rule is drawn
   by boxes on the same line, as the note on the tab border explains. */
.tabbedcontent ul.quicktabs-tabs::after {
  content: "";
  flex: 1 1 0;
  align-self: stretch;
  border-bottom: 3px solid #dfdfdf;
}
.tabbedcontent .field-content h3{
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * NARROW SCREENS
 *
 * The overlap itself is fixed above, at every width, by making the row a real
 * flex container. What is left here is only spacing: 20px of padding per tab is
 * generous when four tabs have to share a 342px screen, so the tabs are made
 * more compact and given a gap so the wrapped rows read as rows.
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
  .tabbedcontent ul.quicktabs-tabs {
    gap: 8px;
    padding: 0;
    margin-bottom: 1.5rem;
  }
  .tabbedcontent .quicktabs-tabs a {
    padding: 10px 14px;
    font-size: 0.875rem;
    line-height: 1.3;
  }
  /* No filler here. The 8px gap above already stops the segments forming one
     continuous rule, so the filler only adds a stub of line floating after the
     last tab. Each tab keeps its own underline, which is what carries the
     active state at this width. */
  .tabbedcontent ul.quicktabs-tabs::after {
    display: none;
  }
}