/* Clean background photography with selectable HTML copy at every size. */
#main .product-banner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: clamp(400px, 27.708vw, 700px);
  margin: 0;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #142331;
}
#main .product-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .36) 58%, transparent 85%);
  pointer-events: none;
}
#main .product-banner--evox .product-banner-artwork,
#main .product-banner--pump .product-banner-artwork {
  top: -11%;
  height: 122%;
}
#main .product-banner-artwork {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#main .product-banner-copy {
  position: relative;
  width: min(43vw, 820px);
  margin-left: max(32px, calc((100% - 1120px) / 2));
  padding: 48px 0;
  font-family: 'Gotham-book', Arial, sans-serif;
}
#main .product-banner-eyebrow {
  margin: 0 0 20px;
  font: bold clamp(15px, 1.15vw, 22px)/1.4 'Gotham-bold', Arial, sans-serif;
}
#main .product-banner-copy h1,
#main .product-banner-copy h2 {
  margin: 0;
  color: inherit;
  font: bold clamp(30px, 2.5vw, 48px)/1.22 'Gotham-bold', Arial, sans-serif;
  overflow-wrap: break-word;
}
#main .product-banner-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 28px 0 32px;
}
#main .product-banner-features dt::before {
  content: '';
  display: block;
  width: 42px;
  height: 3px;
  margin-bottom: 14px;
  background: #00a5d8;
}
#main .product-banner-features dt {
  font: 500 clamp(16px, 1.15vw, 22px)/1.3 'Gotham-med', Arial, sans-serif;
}
#main .product-banner-features dd {
  margin: 6px 0 0;
  font-size: clamp(14px, .84vw, 16px);
  line-height: 1.35;
}
#main .product-banner-summary {
  margin: 0;
  font-size: clamp(13px, .79vw, 15px);
  line-height: 1.4;
}
#main .product-banner--multi .product-banner-copy,
#main .product-banner--single .product-banner-copy {
  width: min(34vw, 640px);
}
#main .product-banner--multi .product-banner-features,
#main .product-banner--pump .product-banner-features {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#main .product-banner--evox .product-banner-copy {
  width: min(45vw, 860px);
}
#main .product-banner--unitary {
  margin-bottom: 8rem;
}
@media (max-width: 990px) {
  /* Reflow the same copy over the existing clean mobile photography. */
  #main .product-banner {
    min-height: 0;
    color: #fff;
  }
  #main .product-banner::before {
    background: linear-gradient(90deg, rgba(5, 17, 29, .8), rgba(5, 17, 29, .6));
  }
  #main .product-banner-artwork {
    display: block;
  }
  #main .product-banner .product-banner-copy {
    position: relative;
    width: auto;
    height: auto;
    padding: 40px 24px;
    margin: 0 auto;
    max-width: 680px;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-family: 'Gotham-book', Arial, sans-serif;
  }
  #main .product-banner-eyebrow {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Gotham-bold', Arial, sans-serif;
  }
  #main .product-banner-copy h1,
  #main .product-banner-copy h2 {
    margin: 0;
    color: inherit;
    font-family: 'Gotham-bold', Arial, sans-serif;
    font-size: clamp(26px, 4.5vw, 40px);
    line-height: 1.2;
    overflow-wrap: break-word;
  }
  #main .product-banner-features {
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 28px 0;
  }
  #main .product-banner--multi .product-banner-features,
  #main .product-banner--pump .product-banner-features {
    grid-template-columns: 1fr;
  }
  #main .product-banner-features dt::before {
    content: '';
    display: block;
    width: 42px;
    height: 3px;
    margin-bottom: 12px;
    background: #00a5d8;
  }
  #main .product-banner-features dt {
    font-family: 'Gotham-bold', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.4;
  }
  #main .product-banner-features dd,
  #main .product-banner-summary {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
  }
  #main .product-banner + #categories {
    margin-top: 2.4rem;
  }
  #main .product-banner--unitary {
    margin-bottom: 4rem;
  }
  #main .product-banner--unitary .product-banner-copy {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}
@media (min-width: 600px) and (max-width: 990px) {
  #main .product-banner-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #main .product-banner--multi .product-banner-features,
  #main .product-banner--pump .product-banner-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}