/*
 * Site search: the search line under the menu and the results page.
 *
 * Soft, flat styling with 5px corners, after broadleyjames.com, which Merav
 * picked as the look to aim for. Colours are the theme's own: #55b3e5 blue,
 * #1076ac dark blue, #333 text, #808080 grey.
 *
 * Breakpoints match the theme's: 40em is a phone, 58em a small laptop, and
 * above 68em the full menu shows.
 *
 * The search sits inside the menu row in the markup. Above 68em the row is laid
 * out as one line — logo left, menu centred, search right — as Merav asked,
 * to use the width rather than add a line. Below 68em it drops to a grey line
 * of its own under the logo, as before.
 */

/* ---------- The search line ---------- */

.site-search-bar {
  clear: both;
  background: #f4f4f4;
  border-top: 1px solid #e6e6e6;
  padding: 10px 16px;
}

/*
 * Centred at a moderate width. Stretched across the full 75rem it read as a
 * long empty bar, which is not what the drawing Merav approved showed.
 */
.site-search-bar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}

.site-search-bar__form {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border-radius: 5px;
  transition: box-shadow 0.2s ease;
}

/* The soft blue glow while typing goes round the whole bar, box and button
   together. On the box alone it stopped short of the button. */
.site-search-bar__form:focus-within {
  box-shadow: 0 0 0 3px rgba(85, 179, 229, 0.2);
}

/* The theme has no screen-reader-text rule, so the label would show. */
.site-search-bar .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.site-search-bar .site-search-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #dce4e8;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: #fff;
  color: #333;
  font-family: inherit;
  /* 16px or larger, or an iPhone zooms the page when the box is tapped. */
  font-size: 16px;
  line-height: 44px;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.site-search-bar .site-search-bar__input::placeholder {
  color: #8a959b;
  opacity: 1;
}

.site-search-bar .site-search-bar__input:focus {
  outline: none;
  border-color: #55b3e5;
  box-shadow: none;
}

/* Safari draws its own clear button and rounded field otherwise. */
.site-search-bar .site-search-bar__input::-webkit-search-decoration,
.site-search-bar .site-search-bar__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* The magnifying glass alone, at every size: Merav's call, to save room. The
   word stays in the page for screen readers. */
.site-search-bar .site-search-bar__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 5px 5px 0;
  background: #55b3e5;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.site-search-bar .site-search-bar__button:hover,
.site-search-bar .site-search-bar__button:focus-visible {
  background: #1076ac;
}

.site-search-bar .site-search-bar__button:focus-visible {
  outline: 2px solid #1076ac;
  outline-offset: 2px;
}

.site-search-bar__icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.site-search-bar__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* The old magnifying glass at the end of the menu does the same job. */
#primary-menu .search-button,
#primary-menu .search-container {
  display: none !important;
}

/* ---------- Laptop and wider: one line, logo | menu | search ---------- */

@media screen and (min-width: 68.0625em) {
  /* The full width of the screen, so the logo is at the far left and the
     search at the far right on any monitor. Capped at 90rem, the search stopped
     250px short of the edge on a 1920 screen and looked adrift. The call-us
     line above spans the same width so the right-hand edges line up. */
  .site-header__row,
  .site-header .top-header > .max-width-4 {
    max-width: none;
    padding: 0 24px;
  }

  /*
   * Logo | menu | search. The logo's side and the search's side grow equally
   * from nothing (flex: 1 1 0), so they are always the same width and the menu
   * sits in the true centre of the screen; the search box is pushed to the far
   * right of its side.
   *
   * This was a CSS grid, minmax(max-content, 1fr) auto minmax(160px, 1fr),
   * which laid out correctly in Chrome but not in Merav's browser: there the
   * spare width was never shared out, and all three sat packed on the left
   * with the search squeezed to 160px beside the menu. Plain flex growth is
   * handled the same way by every browser.
   */
  /*
   * The width is stated outright. Left to fill the page by itself, as it does
   * in Chrome 152 and Edge, the row came out 716px wide in Merav's Chrome 153
   * on a 1405px page, packing logo, menu and search on the left. Found with
   * the ?layoutcheck=1 panel in js/site-search.js.
   */
  .site-header__row {
    display: flex;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    width: 100%;
  }

  /* The theme's clearfix pseudo-elements would become empty flex items. */
  .site-header__row::before,
  .site-header__row::after {
    display: none;
  }

  /* Centred on the row's midline, level with the menu and the search box.
     The theme's 12px top margin and fixed 62px height, from the old layout,
     sat the logo 4px low: 15px of white above it and 7px below. */
  .site-header__row .logo-wrapper {
    flex: 1 1 0;
    min-width: 230px;
    height: auto;
    float: none;
    margin: 0;
  }

  .site-header__row .logo-wrapper img {
    display: block;
  }

  /* The logo image fills whatever holds it, so the link keeps the theme's
     230px while the space beside it grows. Left to size itself, the logo
     stretched to 670px. */
  .site-header__row .logo-wrapper > a {
    width: 230px;
  }

  /* Its right edge on the search box's right edge. */
  .site-header .top-header > .max-width-4 > .right {
    margin-right: 0;
  }

  /* Never narrower than its own items: on a 1100px laptop it once wrapped onto
     two lines. The search box gives up the room instead. */
  .site-header__row .main-navigation {
    flex: 0 0 auto;
    min-width: max-content;
    float: none;
    margin-right: 0;
  }

  .site-header__row .site-search-bar {
    flex: 1 1 0;
    min-width: 160px;
    clear: none;
    padding: 0;
    border: 0;
    background: none;
  }

  /* At most 320px, against the right-hand edge. */
  .site-header__row .site-search-bar__inner {
    max-width: 320px;
    margin: 0 0 0 auto;
  }

  .site-search-bar .site-search-bar__input {
    font-size: 15px;
  }
}

/* On a narrower laptop the menu items sit a little closer, so the search box
   keeps room for its hint; at 1100px it was cut to "Search produc". Seven
   items since INDUSTRY joined (October 2026), so 7px rather than 9px. */
@media screen and (min-width: 68.0625em) and (max-width: 80em) {
  .site-header__row #primary-menu > li > a {
    padding-left: 7px;
    padding-right: 7px;
  }
}

/* ---------- The PRODUCTS panel ---------- */

/*
 * White, each heading in dark blue capitals over a light blue line: option 1
 * of five Merav compared, 2 October 2026. The theme's version was dark blue
 * headings on mid blue, about a third of the contrast normally asked of
 * text, with items set at line-height 1 so two-line names collided.
 *
 * Only the look changes. The six columns, their order and the hover that
 * opens the panel are the theme's own, and the menu itself is edited in
 * WordPress as before. The split into "browse by product" and "browse by
 * industry" comes later.
 *
 * Every rule names li.products-nav, so the other dropdowns (WHY CHEMTROL,
 * SOLUTIONS) keep their blue.
 */
@media screen and (min-width: 68.0625em) {
  .site-header .main-navigation ul li.products-nav > ul.sub-menu {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 28px;
    padding: 22px 32px 20px;
    background: #ffffff;
    border-top: 3px solid #55b3e5;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
  }

  /* The theme gives each column a fixed 10rem; the grid shares the width. */
  .site-header .main-navigation ul li.products-nav > ul.sub-menu > li {
    width: auto;
    min-width: 0;
  }

  /* The headings sit on one level line even where a name takes two lines,
     so the six blue rules run straight across. A fixed height, not a
     minimum: two-line headings came out 2px taller than one-line ones. */
  .site-header .main-navigation ul li.products-nav > ul.sub-menu > li > a {
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    height: calc(2 * 1.3em + 8px);
    margin-bottom: 6px;
    padding: 0 0 8px;
    border-bottom: 2px solid #55b3e5;
    background: none;
    color: #1076ac;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.3;
  }

  .site-header .main-navigation ul li.products-nav > ul.sub-menu > li > a:hover,
  .site-header .main-navigation ul li.products-nav > ul.sub-menu > li:hover > a {
    background: none;
    color: #55b3e5;
  }

  /* The theme sizes every inner list at 200px and paints it blue. */
  .site-header .main-navigation ul li.products-nav > ul.sub-menu ul.sub-menu {
    width: auto;
    background: none;
  }

  /* Spaced so the panel ends above the fold of a 1366 x 768 laptop: eleven
     items, many on two lines, at 5px and 1.35 ran 30px past it. */
  .site-header .main-navigation ul li.products-nav > ul.sub-menu ul.sub-menu a {
    padding: 4px 0;
    background: none;
    color: #333333;
    font-size: 14px;
    line-height: 1.3;
  }

  .site-header .main-navigation ul li.products-nav > ul.sub-menu ul.sub-menu a:hover,
  .site-header .main-navigation ul li.products-nav > ul.sub-menu ul.sub-menu li:hover > a {
    background: none;
    color: #1076ac;
  }
}

/* ---------- Phones and tablets: two lines ---------- */

/*
 * Below 68em the theme collapses its menu to a button. There the header is two
 * lines, as Merav asked, with nothing hidden behind a tap:
 *
 *   1. the logo, with the flags, phone number and email stacked beside it;
 *   2. the search box, with a MENU button beside it (broadleyjames.com).
 *
 * It was four on a phone: flags, phone and email, logo and menu, and a search
 * line opened from a magnifying glass.
 *
 * The theme's own menu button stays in the page, hidden, and is what
 * js/site-search.js presses.
 */
.site-search-bar .site-search-bar__menu {
  display: none;
}

@media screen and (max-width: 68em) {
  /* The phone's line of flags; the flags now sit beside the logo. */
  .site-header .top-header.sm-hide {
    display: none;
  }

  /* Line 1: the logo, flush left. */
  .site-header__row .logo-wrapper {
    height: auto;
    margin: 8px 0 8px 16px;
  }

  .site-header__row .logo-wrapper img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Line 1, right: flags, phone and email, stacked and right-aligned, centred
     on the logo line (8px + 47px logo + 8px) and clear of the logo. */
  .site-header .top-header--contact {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 16px;
    height: 63px;
    background: none;
    line-height: 1.2;
  }

  .site-header .top-header--contact > .max-width-4 {
    height: 100%;
    max-width: none;
    margin: 0;
  }

  /* Two even lines, phone number over email, right-aligned. */
  .site-header .top-header--contact .top-header__list {
    display: grid;
    grid-template-columns: auto;
    justify-content: end;
    justify-items: end;
    align-content: center;
    row-gap: 4px;
    height: 100%;
    margin: 0;
    float: none;
    font-size: 13px;
    line-height: 1.3;
  }

  .site-header .top-header--contact .top-header__list > div {
    float: none;
    margin: 0;
  }

  /* The theme's clearfix spacers would take grid cells; one held the flag row
     at 21px. */
  .site-header .top-header--contact .top-header__list::before,
  .site-header .top-header--contact .top-header__list::after {
    display: none;
  }

  /* The flags are for laptops and desktops only, at Merav's request: on a
     phone or tablet the line beside the logo is the phone number and email. */
  .site-header .top-header__web,
  .site-header .top-header__sep,
  .site-header .top-header__covid,
  .site-header .top-header__flag {
    display: none;
  }

  .site-header .top-header__call {
    grid-row: 1;
    white-space: nowrap;
  }

  .site-header .top-header__email {
    grid-row: 2;
    white-space: nowrap;
  }

  /* Line 2: search box and MENU. */
  .site-search-bar__inner {
    max-width: 760px;
  }

  .site-search-bar .site-search-bar__menu {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 5px;
    background: #1076ac;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .site-search-bar .site-search-bar__menu:hover,
  .site-search-bar .site-search-bar__menu.is-open {
    background: #55b3e5;
  }

  .site-search-bar .site-search-bar__menu:focus-visible {
    outline: 2px solid #1076ac;
    outline-offset: 2px;
  }

  .site-search-bar__menu-icon {
    display: block;
  }

  .site-search-bar__cross,
  .site-search-bar__menu.is-open .site-search-bar__bars {
    display: none;
  }

  .site-search-bar__menu.is-open .site-search-bar__cross {
    display: inline;
  }

  .site-header .menu-toggle {
    display: none;
  }

  /*
   * The menu drops down from the bottom of the header, below the search line.
   * The theme placed it at a fixed 95px (130px on a phone), just under the
   * logo, which would now cover the search box.
   */
  .site-header .main-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
  }
}

/*
 * From 58em to 68em the theme still collapses the menu to a button, but lays
 * the opened menu out as the desktop row: white, links side by side. Dropped
 * below the search line that read as a stray strip of text, so here it takes
 * the blue stacked list it has on a phone and a tablet.
 */
@media screen and (min-width: 58em) and (max-width: 68em) {
  /* The theme's logo is larger here (230 by 58), so the logo line is too. */
  .site-header .top-header--contact {
    height: 74px;
  }

  /*
   * Closed until MENU is pressed. From 58em the theme treats the screen as a
   * laptop and shows its menu permanently, so between 928px and 1088px (an
   * iPad held sideways, a narrow laptop window) the menu hung open under the
   * search line.
   */
  .site-header .main-navigation:not(.toggled) {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
  }

  .site-header .main-navigation {
    background-color: #55b3e5;
    text-align: right;
  }

  .site-header #primary-menu > li {
    float: none;
    width: auto;
  }

  .site-header #primary-menu > li > a {
    display: block;
    padding: 8px;
    line-height: normal;
    background-color: #55b3e5;
    color: #fff;
  }

  .site-header #primary-menu > li > a:hover {
    background-color: #1076ac;
  }

  .site-header #primary-menu ul {
    display: none;
  }
}

@media screen and (max-width: 40em) {
  /* A little smaller on a phone, so the email keeps clear of it: at 170px it
     came within 5px of the logo on a 360px screen. */
  .site-header__row .logo-wrapper {
    width: 160px;
  }

  .site-header .top-header--contact {
    height: 57px;
  }

  /*
   * Nearly edge to edge on a phone, so the search box has the most room: an
   * even 8px at each side and between box and MENU. Merav tried it flush to
   * the edges and preferred keeping the rounded corners.
   */
  .site-search-bar {
    padding: 8px;
  }

  .site-search-bar__inner {
    gap: 8px;
  }
}

/* The narrowest phones (360px and under): smaller again. */
@media screen and (max-width: 23em) {
  .site-header__row .logo-wrapper {
    width: 140px;
  }

  .site-header .top-header--contact {
    height: 52px;
  }

  .site-header .top-header--contact .top-header__list {
    font-size: 12px;
  }
}

@media screen and (max-width: 21em) {
  .site-header__row .logo-wrapper {
    width: 125px;
  }

  .site-header .top-header--contact {
    height: 48px;
  }
}

/* ---------- Results page ---------- */

.search-page {
  color: #333;
}

/*
 * The heading: a small grey "SEARCH RESULTS" label, the words searched for as
 * the title in Chemtrol blue, and a short blue rule beneath: the treatment of
 * the product enquiry pop-up. Merav chose it from three, as did I: it lines up
 * with the filters and results below it, all left-aligned. The title uses the
 * site's own: Work Sans at 1.8rem, weight 300, as on Programmable Controllers.
 */
.search-page__head {
  margin: 36px 0 24px;
}

.search-page__eyebrow {
  margin: 0 0 6px;
  color: #808080;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.search-page__title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.25;
  color: #333;
  overflow-wrap: anywhere;
}

.search-page__term {
  color: #1076ac;
}

.search-page__rule {
  display: block;
  width: 48px;
  height: 2px;
  margin: 14px 0 12px;
  background: #55b3e5;
}

/* "Showing results for dosing pump. Search instead for dosin pump." */
.search-page__corrected {
  margin: 0 0 10px;
  color: #555;
  font-size: 0.95rem;
}

.search-page__corrected strong {
  color: #1076ac;
  font-weight: 600;
}

.search-page__corrected a {
  margin-left: 4px;
  color: #1076ac;
}

.sx-scope {
  margin: 28px 0 0;
  color: #555;
  font-size: 0.9rem;
}

.sx-scope a {
  margin-left: 4px;
  color: #1076ac;
  font-weight: 500;
  white-space: nowrap;
}

/* Nothing found */

.search-empty {
  max-width: 44rem;
  margin: 40px 0 0;
}

.search-empty__suggest {
  margin: 12px 0 20px;
  font-size: 1.1rem;
}

.search-empty__suggest a {
  color: #1076ac;
  font-weight: 500;
}

.search-empty__help {
  color: #555;
}

.search-empty__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 24px;
  padding: 0;
  list-style: none;
}

.search-empty__links li {
  margin: 0;
}

.search-empty__links a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #dce4e8;
  border-radius: 5px;
  color: #333;
  text-decoration: none;
}

.search-empty__links a:hover,
.search-empty__links a:focus-visible {
  border-color: #55b3e5;
  color: #1076ac;
}

@media screen and (max-width: 40em) {
  .search-page__head {
    margin: 20px 0 16px;
  }

  .search-page__title {
    font-size: 1.4rem;
  }
}

/* ---------- Results: products, categories, documents ----------
   Layout A, chosen by Merav: tabs, a compact two-column product list with
   "where it is used" tags, categories as links, documents as a list. See
   template-parts/search-results.php. */

.sx-count {
  margin: 0 0 14px;
  color: #808080;
  font-size: 0.95rem;
}

.sx-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid #e3e9ec;
  overflow-x: auto;
  white-space: nowrap;
}

.sx-tabs__tab {
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  color: #555;
  font-size: 0.95rem;
  text-decoration: none;
}

.sx-tabs__tab span {
  color: #808080;
  font-size: 0.8rem;
}

.sx-tabs__tab.is-on,
.sx-tabs__tab:hover {
  border-bottom-color: #55b3e5;
  color: #1076ac;
}

.sx-tabs__tab.is-on {
  font-weight: 600;
}

.sx-heading {
  margin: 22px 0 10px;
  color: #1076ac;
  font-size: 1.1rem;
  font-weight: 500;
}

.sx-heading span {
  color: #808080;
  font-size: 0.85rem;
  font-weight: 400;
}

.sx-rows,
.sx-pills,
.sx-docs,
.sx-plains {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-rows,
.sx-docs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.sx-rows {
  gap: 8px;
}

.sx-docs {
  column-gap: 28px;
}

/* minmax(0, 1fr), not 1fr: a one-line description that does not wrap made
   the columns as wide as the text and pushed the second off the screen. */
@media screen and (min-width: 58em) {
  .sx-rows--two,
  .sx-docs--two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.sx-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #e3e9ec;
  border-radius: 5px;
  background: #fff;
}

.sx-row__thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sx-row__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sx-row__body {
  min-width: 0;
}

.sx-row__title {
  display: block;
  color: #1076ac;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

.sx-row__snippet {
  display: block;
  overflow: hidden;
  color: #666;
  font-size: 0.82rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.sx-tag {
  padding: 1px 7px;
  border-radius: 5px;
  background: #eef5f9;
  color: #1076ac;
  font-size: 0.72rem;
  text-decoration: none;
}

.sx-tag--plain {
  background: #f1f3f4;
  color: #666;
}

.sx-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sx-pill {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #dce4e8;
  border-radius: 5px;
  background: #fff;
  color: #333;
  font-size: 0.88rem;
  text-decoration: none;
}

.sx-pill:hover {
  border-color: #55b3e5;
  color: #1076ac;
}

.sx-doc__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
}

.sx-pdf {
  display: block;
  flex: 0 0 auto;
}

/* The name, and under it, small, the product it belongs to. Beside it at
   the far right, the product read as a stray label. */
.sx-doc__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.sx-doc__name,
.sx-doc__owner {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-doc__name {
  color: #1076ac;
  font-size: 0.9rem;
}

.sx-doc__owner {
  color: #808080;
  font-size: 0.75rem;
}

.sx-more {
  display: inline-block;
  margin: 10px 0 0;
  color: #1076ac;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.sx-filtered {
  margin: 0 0 12px;
  color: #555;
  font-size: 0.9rem;
}

.sx-filtered a {
  margin-left: 8px;
  color: #1076ac;
}

.sx-plain {
  padding: 6px 0;
}

.sx-plain a {
  color: #1076ac;
}

.sx-plain__where {
  color: #808080;
  font-size: 0.8rem;
}

/*
 * The header on long pages: js/custom-navbar.js hides it while scrolling down
 * (.hidden, in style.css) and brings it back slim on the way up. Slim slides
 * the phone and email strip up out of view; --header-strip is its height as
 * measured, 0 on a phone where the strip sits beside the logo. The shadow
 * marks the edge once the header floats over the page.
 */
.site-header.is-slim {
  transform: translateY(calc(-1 * var(--header-strip, 0px)));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.site-header.is-slim.hidden {
  transform: translateY(-100%);
  box-shadow: none;
}

/*
 * The smart search (inc/search-filters.php): a search naming a product line
 * shows the line's groups on the left and its products on the right, Merav's
 * option B (3 October 2026). Lettering as the PRODUCTS menu's left list, so
 * the two read as one: grey label over a thin line, names 13.5px dark grey,
 * the chosen one blue on white with the light blue bar. On a phone the list
 * becomes a row of buttons above the products.
 */
.sx-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 8px 0 26px;
}

@media screen and (min-width: 40.0625em) {
  .sx-line {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
}

@media screen and (min-width: 58em) {
  .sx-line {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

.sx-line__filters {
  padding: 14px 0 12px;
  background: #f4f4f4;
}

.sx-line__label {
  margin: 0 22px 6px;
  padding: 4px 0 9px;
  border-bottom: 1px solid #c8c8c8;
  color: #808080;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sx-line__filters ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-line__choice {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 22px;
  color: #333;
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
}

.sx-line__choice:hover,
.sx-line__choice:focus-visible {
  color: #1076ac;
}

.sx-line__choice.is-on {
  background: #fff;
  box-shadow: inset 3px 0 0 #55b3e5;
  color: #1076ac;
}

.sx-line__count {
  flex: none;
  color: #808080;
  font-size: 12px;
}

.sx-line__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 3px solid #55b3e5;
}

.sx-line__title {
  color: #1076ac;
  font-size: 16px;
  font-weight: 400;
}

.sx-line__shown {
  color: #808080;
  font-size: 13px;
}

.sx-line__page {
  margin-left: auto;
  color: #1076ac;
  font-size: 13px;
  text-decoration: none;
}

.sx-line__page[hidden] {
  display: none;
}

.sx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-card[hidden] {
  display: none;
}

.sx-card a {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 14px 12px 12px;
  border: 1px solid #e3e9ec;
  border-radius: 5px;
  background: #fff;
  color: #333;
  text-align: center;
  text-decoration: none;
}

.sx-card__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  margin-bottom: 10px;
}

.sx-card__photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sx-card__name {
  font-size: 14px;
  line-height: 1.35;
}

/* Pointing at a card: the lift and the growing picture of the product boxes
   (css/category-boxes.css), with the name turning blue as in the menus. */
@media (hover: hover) {
  .sx-card a {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .sx-card__photo img {
    transition: transform 0.25s ease;
  }

  .sx-card a:hover,
  .sx-card a:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 16px -6px rgba(0, 0, 0, 0.24);
    color: #1076ac;
  }

  .sx-card a:hover img,
  .sx-card a:focus-visible img {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-card a,
  .sx-card__photo img {
    transition: none;
  }
}

/* A phone: the groups as a row of buttons that scrolls sideways. */
@media screen and (max-width: 40em) {
  .sx-line__filters {
    padding: 0;
    background: none;
  }

  .sx-line__label {
    margin: 0 0 8px;
    padding: 0 0 6px;
  }

  .sx-line__filters ul {
    display: flex;
    gap: 8px;
    padding-bottom: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sx-line__choice {
    flex: none;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #cfd8de;
    border-radius: 16px;
    background: #fff;
    white-space: nowrap;
  }

  .sx-line__choice.is-on {
    border-color: #1076ac;
    background: #1076ac;
    box-shadow: none;
    color: #fff;
  }

  .sx-line__choice.is-on .sx-line__count {
    color: #d6ebf8;
  }

  .sx-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sx-card__photo {
    width: 90px;
    height: 90px;
  }
}

/* A brochure in place of a product page (the Motor Driven pumps): its PDF
   sign, larger, where the photograph would be. */
.sx-card__photo .sx-pdf {
  width: 46px;
  height: 55px;
}

/*
 * One product found (Merav's option B, 3 October 2026): the product, its
 * documents and the others in its group, inside the same frame as the broad
 * search. A product the PRODUCTS menu does not list has no line to show on
 * the left, and takes the full width.
 */
@media screen and (min-width: 40.0625em) {
  .sx-line--alone {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sx-product {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  border: 1px solid #e3e9ec;
  border-top: 3px solid #55b3e5;
  border-radius: 5px;
  background: #fff;
}

.sx-product__photo {
  flex: 0 0 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
}

.sx-product__photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sx-product__body {
  min-width: 0;
}

.sx-product__name {
  display: block;
  margin-bottom: 6px;
  color: #1076ac;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
}

.sx-product__text {
  margin: 0 0 12px;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}

.sx-product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* The two buttons in the colours of the product page's own: Enquire in the
   blue of its Enquire button, View product as its light blue outlines. */
.sx-button {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #55b3e5;
  border-radius: 4px;
  background: #fff;
  color: #1076ac;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.sx-button--main {
  border-color: #1076ac;
  background: #1076ac;
  color: #fff;
}

.sx-button:hover,
.sx-button:focus-visible {
  border-color: #1076ac;
}

.sx-button--main:hover,
.sx-button--main:focus-visible {
  background: #0d6391;
  color: #fff;
}

.sx-line__heading--sub {
  margin-top: 24px;
}

.sx-docs--product {
  gap: 8px;
}

@media screen and (max-width: 40em) {
  .sx-product {
    flex-direction: column;
    text-align: center;
  }

  .sx-product__photo {
    flex-basis: auto;
  }

  .sx-product__actions {
    justify-content: center;
  }
}

/*
 * The filter level with the products (Merav, 3 October 2026, "the narrow
 * down with the same line of the products… balanced"). "Narrow down" is now
 * a heading over the same 3px light blue line as the products' heading, at
 * the same height, so one line runs across the page; the list below sits in
 * a white box like the product cards, its top level with theirs, as in the
 * option B drawing. The grey box it had was the page's own grey, so the list
 * seemed to float and the label sat 11px below the products' heading.
 */
@media screen and (min-width: 40.0625em) {
  .sx-line__filters {
    padding: 0;
    background: none;
  }

  .sx-line__label {
    margin: 0 0 14px;
    padding: 0 0 8px;
    border-bottom: 3px solid #55b3e5;
    line-height: 24px;
  }

  .sx-line__title {
    line-height: 24px;
  }

  .sx-line__filters ul {
    padding: 6px 0;
    border: 1px solid #e3e9ec;
    border-radius: 5px;
    background: #fff;
  }

  .sx-line__choice {
    padding: 8px 16px;
  }

  .sx-line__choice.is-on {
    background: #eef6fb;
  }
}

/* One product: its name is now the heading over the blue line, level with
   "Narrow down", so the card below has no blue edge or name of its own. */
.sx-product {
  border-top: 1px solid #e3e9ec;
}

.sx-line__title.sx-product__name {
  display: inline;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

/* Documents and pages among the results (template-parts/search-results.php):
   a document's card holds its PDF sign in a shorter space than a photograph,
   and a guide's, with no picture at all, is its name alone. */
.sx-card__photo--pdf {
  height: 64px;
}

.sx-card a:not(:has(.sx-card__photo)) {
  justify-content: center;
  min-height: 90px;
}

/* The rest of a long list of documents or pages, and the button that opens it. */
.sx-more {
  margin-top: 8px;
}

.sx-more[hidden] {
  display: none;
}

.sx-more__button {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: #1076ac;
  font-size: 14px;
  cursor: pointer;
}

.sx-more__button:hover,
.sx-more__button:focus-visible {
  text-decoration: underline;
}

.sx-line__results .sx-plains {
  margin-top: 4px;
}

/* A folder of a line, under the line: Flow Instruments › Variable Area
   Flowmeters in a Blue-White search (5 October 2026). Set in from the line on
   a laptop; on a phone, where the choices are a row of buttons, the same
   button with a small arrow. */
@media screen and (min-width: 40.0625em) {
  .sx-line__filters .sx-line__choice--sub {
    padding-left: 38px;
    font-size: 13px;
  }
}

@media screen and (max-width: 40em) {
  .sx-line__choice--sub span:first-child::before {
    content: "\203A\00a0";
    color: #808080;
  }
}

/* "Brand" over the brands in the filter (option B, 3 October 2026): the
   grey capitals of "Narrow down", over a thin line, a little apart from the
   groups above. On a phone, where the choices are a row of buttons, a small
   grey word in the row. */
.sx-line__section {
  margin: 8px 16px 2px;
  padding: 8px 0 4px;
  border-top: 1px solid #e3e9ec;
  color: #808080;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@media screen and (max-width: 40em) {
  .sx-line__section {
    flex: none;
    align-self: center;
    margin: 0 0 0 6px;
    padding: 0;
    border: 0;
  }
}

/* The flags (Merav, 3 October 2026: "white lines on the right hand side of
   the flag"). The US flag is faded, as the site you are not on, and its
   white stripes ran into the grey line's background, the flag's right side
   reading as loose white lines. Both now have a fine edge; and a whole
   29 x 15px, where the theme's 1.8rem made them 28.8px wide and their edges
   fell between pixels, softened. */
.site-header .top-header__flag a.flag {
  width: 29px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.site-header .top-header__flag a.flag.active {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 5px 0 rgba(0, 0, 0, 0.4);
}

.site-header .top-header__flag a.flag img {
  width: 29px;
  height: 15px;
}

/* The enquiry form's Send button in regular weight (Merav, 4 October 2026),
   as the "Enquire about this product" button that opens it. The theme asks
   every button for 600, a weight the site does not load, so the browser
   thickened the letters itself. Here, as this file loads on every page:
   the pop-up opens on product pages, the questions page and the
   configurator, and the Contact page has the same form. */
.wpcf7-form input[type="submit"],
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus {
  font-weight: 400;
}