/* Valent overrides for widget CSS that can't be fixed by a re-themeable
   token (see styles.css for the token-based color overrides that cover
   most of it). Two kinds of entries live here:
   1. Hardcoded colors - a literal hex/rgba value in the widget's own
      stylesheet, bypassing the token system.
   2. Small layout differences from Greenheck (e.g. text alignment) that
      are a genuine Valent design choice, not a bug.
   All rules use !important because these widget stylesheets are
   registered by the widget view itself, not the layout, so load order
   relative to this file isn't guaranteed. */

/* product-details.css .product-detail-dot - hardcoded Greenheck cyan
   (rgba(0, 168, 228, ...)), not tied to --primary-color/--color-dark-blue. */
   .product-detail-dot:hover {
    background-color: rgba(117, 26, 21, 0.7) !important;
  }
  .product-detail-dot.active {
    background-color: rgba(117, 26, 21, 1) !important;
  }
  
  /* card-bordered-top-title-description-image-button.css - hardcoded
     rgba(0, 85, 150, 1) border accent. */
  .card-bordered-top-container {
    border-top-color: rgba(117, 26, 21, 1) !important;
  }
  
  /* card-left-text-right-image-with-button.css - CTA is .btn-primary now;
     token remaps in styles.css cover the fill. Legacy .card-ltrib-button
     color overrides removed. */
  
  /* card-title-subheading-image-description.css - hardcoded
     rgba(7, 86, 151, 1) link/icon color. (#8ab800 rating-star green left
     as-is - unrelated to the brand accent.) */
  .card-tsid__body a.pdf {
    color: rgba(117, 26, 21, 1) !important;
  }
  
  /* image-slider CTAs use .btn-secondary / .btn-primary; legacy
     .image-slider-button color overrides removed. */
  
  /* light-box.css - hardcoded hex blues:
     .modal-promo-content-title border (#2b388f),
     .modal-bottom-link-wrap .modal-bottom-link-text color (#015a9c). */
  .modal-promo-content-title {
    border-bottom-color: #751A15 !important;
  }
  .modal-bottom-link-wrap .modal-bottom-link-text {
    color: #751A15 !important;
  }
  
  /* lists-new-and-recommended.css .nr-item-title / .nr-item-title a -
     hardcoded rgba(0, 85, 150, 1) label/link color in the bell-icon modal.
     (.nr-bell-btn itself already uses var(--color-sky-blue), no fix needed.) */
  .nr-item-title,
  .nr-item-title a {
    color: rgba(117, 26, 21, 1) !important;
  }
  
  /* image-slider-carousel.css hero content - Greenheck's design left-aligns
     the title/details/button in a 50%-width column (justify-content:
     flex-start on the wrapper, no text-align on .image-slider-content).
     Valent centers the same block instead. The carousel dots
     (.image-slider-carousel-indicators) are already independently centered
     via position:absolute + left:50%, so they need no change. */
  .image-slider-content-wrapper {
    justify-content: left !important;
  }
  .image-slider-content {
    text-align: left !important;
  }
  .image-slider-details {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
 
  /* Header (transparent/gradient hero state) - Valent-specific tweaks.
     Scoped to this file (Valent-only stylesheet) so Greenheck's header,
     which shares the same markup/classes, is unaffected. */
  body.header-gradient-mode .site-header__nav-link:hover {
    background: rgba(255, 255, 255, 0);
    border-radius: 6px;
  }
  /* Valent's Find-my-rep button geometry. Deliberately NOT scoped to
     `.header-gradient-mode`: that class is toggled per hero slide and must
     only change colour, so a gradient-only 52px height made the button (and
     the nav row) resize mid-carousel. Applies in both header themes. */
  .find-my-rep-button {
    width: 156px !important;
    height: 52px !important;
    border-radius: 6px !important;
  }
  body.header-gradient-mode .find-my-rep-button:hover {
    background-color: var(--color-sky-blue) !important;
    color: var(--color-white) !important;
    border-color: var(--color-sky-blue) !important;
  }
  
  /* No :hover override here on purpose - header-transparent-overrides.css's
     body.header-gradient-mode .find-my-rep-button:hover already fills with
     var(--color-sky-blue), which styles.css re-themes to Valent's maroon.
     An earlier override here forced the hover state back to transparent/
     white/white, i.e. identical to the resting state above, so hovering
     the button produced no visible feedback. */
  .product-promo-carousel-section .carousel-indicators {
    align-items: center;
    justify-content: center;
    margin: 0 auto !important;
    padding: 0 40px 40px !important;
    width: 100%;
}

.product-promo-carousel-section .carousel-indicators li {
    margin: 0;
    padding: 0;
}

.product-promo-carousel-section .carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d3d3d3;
    border: 0;
    padding: 0;
    display: block;
    cursor: pointer;
}

.product-promo-carousel-section .carousel-indicator.active {
    background: #7a1b16;
}
.btn-secondary.card-ilcr-button:hover:not(:disabled):not([disabled]),
.btn-primary.feature-scroll-card-button:hover:not(:disabled):not([disabled]){
    background-color: var(--primary-hover) !important;
    color: var(--color-white) !important;
    border-color: transparent !important;
}

/* Whole-card hover on a clickable .card-tdib: the shared rule shifts the CTA to
   --color-secondary-blue, which Valent maps to the same maroon as its base, so
   the button would not move. Use the same --primary-hover orange the button
   uses when hovered directly. */
/* .card-tdib--clickable:hover .card-tdib__button,
.card-tdib--clickable:focus-within .card-tdib__button {
    background-color: var(--primary-hover) !important;
    color: rgb(var(--color-white)) !important;
} */

.card-tdib--clickable {
  cursor: auto !important;
}
.card-tdib--clickable .card-tdib__link::after {
  content: none !important;
}
.product-promo-carousel-wrapper .carousel-control {
  display: none;
}

.h2_products {
  text-align: left !important;
}
.card-ilcr-button{
  /* Keep 2px so hover border-color swaps do not shift layout */
  border: 2px solid transparent !important;
}
.card-ilcr-button:hover {
  border: 2px solid transparent !important;
}
body.valentair .resource-title, body.valentair .card-description{
  text-align: center !important;
}
/* Horizontal (list) view is much wider than the card grid - Valent's centered
   title/description choice above only reads correctly in the narrow grid
   layout, so switch back to left-aligned once resource-list-common.css's
   list-view row layout kicks in. */
body.valentair .resource-results.list-view .resource-title,
body.valentair .resource-results.list-view .card-description {
  text-align: left !important;
}
.resource-footer{
  justify-content: left !important;
}
.sf-search-button, .site-header.site-header--scrolled .sf-search-button {
  color: var(--color-near-black) !important;
}
.header-gradient-mode .sf-search-button {
  color: var(--color-white) !important;
}
/* Valent search glyph is 15x16 (search-icon.svg). Fill is currentColor so the
   button color rules above still swap white/near-black with the header theme. */
.sf-search-button {
  width: 15px !important;
  height: 16px !important;
}
.sf-search-icon {
  width: 15px !important;
  height: 16px !important;
  display: block;
}
/* SearchBox.cshtml emits its <style> inline in the widget markup (body), so it
   always lands after this file. !important is the only lever that outranks it -
   specificity and load order both lose. Only border-color is overridden; the
   base rule's width/background already match what Valent needs. */
.sf-search-expanded.sf-search-active .sf-search-box  {
  border-color: var(--color-black) !important;
}
.header-gradient-mode .sf-search-expanded.sf-search-active .sf-search-box {
  border-color: var(--color-white) !important;
}
.header-gradient-mode .site-header.site-header--scrolled .sf-search-box {
  background-color: var(--color-white) !important;
  border-color: var(--color-near-black) !important;
  color: var(--color-near-black) !important;
}
/* Collapsed, the box is only the 42px icon - the scrolled border above would
   draw a stray outline around it. Needs the extra class to outrank that rule. */
.header-gradient-mode .site-header.site-header--scrolled .sf-search-expanded:not(.sf-search-active) .sf-search-box {
  border-color: transparent !important;
}
.sf-search-input, .sf-search-input::placeholder, .header-gradient-mode .site-header--scrolled .sf-search-input, .header-gradient-mode .site-header--scrolled .sf-search-input::placeholder {
  color: var(--color-near-black) !important;
}
.header-gradient-mode .sf-search-input, .header-gradient-mode .sf-search-input::placeholder {
  color: var(--color-white) !important;
}
/* Chrome/Edge/Safari draw their own clear "x" inside input[type=search]. It
   lands on top of the magnifier - .sf-search-button in the header box,
   .gh-search__refine-btn on the results page - so the decoration is suppressed.
   Both fields keep type=search for the mobile keyboard's Search key.
   No !important needed: neither SearchBox.cshtml's inline <style> nor
   search-results.css sets these pseudo-elements, so there is nothing to outrank.
   Each vendor family stays in its own rule - one unsupported pseudo-element
   invalidates the whole selector list it appears in. */
.sf-search-input::-webkit-search-cancel-button,
.sf-search-input::-webkit-search-decoration,
.sf-search-input::-webkit-search-results-button,
.sf-search-input::-webkit-search-results-decoration,
.gh-search__refine-input::-webkit-search-cancel-button,
.gh-search__refine-input::-webkit-search-decoration,
.gh-search__refine-input::-webkit-search-results-button,
.gh-search__refine-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
/* Firefox */
.sf-search-input::-moz-search-clear,
.gh-search__refine-input::-moz-search-clear {
  display: none;
}
/* Legacy Edge / IE */
.sf-search-input::-ms-clear,
.sf-search-input::-ms-reveal,
.gh-search__refine-input::-ms-clear,
.gh-search__refine-input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
.resource-title, .card-description{
  text-align: left !important;
}
.valent-article{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.site-header .header-logo img, .site-header--scrolled .header-logo img {
  height: 56px !important;
}
.site-header__nav-list, .site-header--scrolled .site-header__nav-list{
  gap: 50px !important;
  justify-content: flex-end !important;
}
.site-header__nav-list{
  text-transform: capitalize;
}
.gh-search-box-wrapper{
  margin-bottom: 21px !important;
  margin-top: 7px;
}
.site-header__nav-link{
  letter-spacing: 0.58px;
}
.site-header__navigation, 
.site-header--scrolled .site-header__navigation{
  gap: 47px !important;
}

.breadcrumb, .site-breadcrumb{
  margin-top: 47px !important;
  margin-bottom: 54px !important;
}
.breadcrumb {
  margin-top: 47px !important;
  margin-bottom: 44px !important;
}
.page-hero-banner__breadcrumb-slot .site-breadcrumb{
  margin-top: 0 !important;
  margin-bottom: 54px !important;
}

/* Breadcrumb type size is a per-brand choice: Greenheck stays at the 11px set
   in common.css, Valent runs 13px. Applies to both breadcrumb components -
   product category pages use .breadcrumb-*, every other page uses the shared
   .site-breadcrumb widget - so the two read the same on a Valent page.

   Deliberately NOT !important, unlike the rest of this file. These selectors
   are (0,1,0) and only have to beat common.css, which loads earlier. The
   .page-hero-banner variant sets its own responsive 14/13/12px at (0,2,0) and
   must keep winning; an !important here would flatten the hero breadcrumb to
   13px at every breakpoint. */
.site-breadcrumb__list,
.site-breadcrumb__item,
.breadcrumb-item {
  font-size: 13px;
}
.find-my-rep-button{
  border-color: var(--color-dark-blue) !important;
    color: var(--color-dark-blue) !important;
}
.body-footer-gap{
  margin-bottom: 120px !important;
}
.resource-image img {
  max-height: none !important;
}
.resource-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.resource-image {
  width: 100%;
  height: 160.69px;
}
.resource-item{
  height: 338px;
}
.card-description{
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.dropdown-grid {
  justify-content: space-evenly !important;
  padding: 0px 0px !important;
}
.site-header__nav-item:nth-child(1) img.dropdown-icon {
  height: auto !important;
  width: auto !important;
}
.card-ilcr-description {
  font-family: var(--font-family-semi-bold) !important;
  margin-bottom: 50px !important;
}
/* Image slider headline: Valent keeps the fixed line-heights the shared
   Content/css/image-slider-carousel.css used to hard-code. Greenheck moved to
   a unitless line-height: 1.3, so these live here rather than in the shared
   file. Breakpoints must mirror the shared file's .image-slider-details
   font-size steps (878-1199px and <=877px) or the two fall out of sync. */
.image-slider-details {
  font-weight: 400;
  line-height: 56px;
}
.dropdown-item {
  border: 2px solid transparent;
}
#dropdown-products .dropdown-item {
  width: 235px;
  gap: 26px;
  margin-top: 0 !important;
  padding-top: 0 !important;
  display: flex;
  height: auto;
  justify-content: flex-end;
}
#dropdown-products .dropdown-item span{
  height: 39px;
}
body.valentair #facetContainer { display: flex; flex-wrap: wrap; align-items: baseline; }
body.valentair #facetContainer > h3          { flex: 0 0 100%; }/*order: 0;*/
body.valentair #facetContainer > #facetContent { flex: 0 0 100%; }/*order: 1;*/
body.valentair #facetContainer > label,
body.valentair #facetContainer > div:not(#facetContent),
/* body.valentair #sf-facet-clear-all-btn        { order: 2; } */
body.valentair #applied-filters               { flex: 0 0 100%; }/*order: 3;*/
#facetContent ul:last-child {
  margin-bottom: 24px !important;
}
.useful-resources .bg-light-gray-ck, .useful-resources .feature-scroll-inner {
  background-color: #eee;
}
.useful-resources .card-carousel-wrapper{
  margin-bottom: 0 !important;
}
.useful-resources .feature-carousel-container {
  padding-top: 94px;
  padding-bottom: 95px;
}
.useful-resources .text-content.regular-h2{
  font-family: var(--font-family-book);
}
.useful-resources .text-content.regular-h2 strong{
  font-family: var(--font-family-bold);
}
.useful-resources .text-content.regular-h2 {
  font-family: var(--font-family-book);
  line-height: 51px;
  margin-top: 23px;
  margin-right: -15px;
  letter-spacing: 1px;
}
.card-tidb--clickable:hover, .card-tidb--clickable:focus-within{
  box-shadow: none !important;
  transform: none !important;
}
.card-tidb {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.page-hero-banner__inner {
  padding-top: 85px !important;
}
.page-hero-banner__breadcrumb-slot {
  top: 29px !important;
}
.product-detail-view-more {
  color: var(--color-dark-blue) !important;
}
.product-detail-view-more:hover {
  color: var(--primary-hover) !important;
  text-decoration: underline !important;
}
nav.footer-main {
  padding-top: 31px !important;
  padding-bottom: 0px !important;
}
.footer-link{
  margin-bottom: 6px !important;
}
.footer-bottom{
  padding: 21px 0 0 0 !important;
}
.footer-bottom-main{
  padding-bottom: 63px !important;
}
@media (min-width: 878px) and (max-width: 1199px) {
  .image-slider-details {
    line-height: 46px;
  }
}
@media (min-width: 878px) and (max-width: 1023px) {
  .page-hero-banner .site-breadcrumb__item{
    font-size: 13px !important;
  }
 
  .page-hero-banner__title{
    font-size: 34px !important;
  }
  .page-hero-banner__breadcrumb-slot .site-breadcrumb{
    margin-top: 0 !important;
    margin-bottom: 26px !important;
  }
  .page-hero-banner__inner {
    padding-top: 29px !important;
    padding-bottom: 75px !important;
  }
  .page-hero-banner__breadcrumb-slot{
    margin-bottom: 27px !important;
  }
  .page-hero-banner__title{
    margin-bottom: 28px !important;
  }
  .page-hero-banner__description h2{
    margin-bottom: 12px !important;
    font-size: 20px !important;
  }
  .page-hero-banner__description p{
    line-height: 29px !important;
  }
  .card-tidb--clickable:hover, .card-tidb--clickable:focus-within{
    box-shadow: none;
    transform: none;
  }
  .body-footer-gap{
    margin-bottom: 60px !important;
  }
  .card-tidb{
    padding: 40px 0 48px !important;
  }
  .card-tidb__title{
    font-size: 22px !important;
    text-align: left !important;
    width: 100% !important;
  }
  .card-tidb__description{
    max-width: 100% !important;
  }
  .grid-d3-t2-m1-cols{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .breadcrumb, .site-breadcrumb{
    margin-top: 32px !important;
    margin-bottom: 38px !important;
  }
  .mobile-header-logo img{
    height: 56px !important;
  }
  .product-promo-carousel-wrapper .carousel-control {
    display: none;
  }

  /* Reliable Products (card-ltrib) tablet Sketch: text left, image right via order */
  .card-ltrib-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    padding: 40px !important;
    gap: 24px !important;
    text-align: left !important;
  }
  .card-ltrib-left {
    order: 1 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  .card-ltrib-title,
  .card-ltrib-description {
    text-align: left !important;
  }
  .card-ltrib-left .btn-primary {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: fit-content !important;
  }
  .card-ltrib-right {
    order: 2 !important;
    flex: 0 0 40% !important;
    max-width: 264px !important;
    width: 40% !important;
    margin-top: 0 !important;
    margin-left: auto !important;
  }
  .card-ltrib-right img {
    max-width: 100% !important;
    max-height: 209px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Reliable Products (.card-tdib) tablet Sketch: reinforce full-width + grid
     (base rules live in card-title-description-image-button.css; !important
     here wins over widget stylesheet load-order races on Valent pages). */
  .valent-card-grid-section,
  .gray-bg-container > div {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .valent-card-grid-section {
    padding: 60px 40px !important;
    gap: 24px !important;
  }
  .valent-card-grid-section > div {
    max-width: 100% !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .card-tdib--with-image {
    display: grid !important;
    grid-template-columns: 1fr minmax(200px, 42%) !important;
    grid-template-areas: "title image" "desc image" "button image" !important;
    column-gap: 40px !important;
    row-gap: 16px !important;
    align-items: start !important;
    align-content: center !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 40px !important;
  }
  .card-tdib--with-image .card-tdib__title {
    grid-area: title !important;
    text-align: left !important;
    margin-bottom: 0 !important;
  }
  .card-tdib--with-image .card-tdib__description {
    grid-area: desc !important;
    text-align: left !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .card-tdib--with-image .card-tdib__figure {
    grid-area: image !important;
    max-width: none !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: end !important;
    width: 100% !important;
  }
  .card-tdib--with-image .card-tdib__button {
    grid-area: button !important;
    margin-top: 8px !important;
    justify-self: start !important;
  }
  /* Change 48px only if the existing grid column-gap is different */
  .grid-d3-t2-m1-cols .card-tidb--clickable {
    --card-grid-gap: 48px;
  }

  /* Enable positioning for the first two card pseudo-elements */
  .grid-d3-t2-m1-cols > .sf_colsIn:nth-child(-n + 2) > .card-tidb.card-tidb--clickable {
    position: relative;
  }

  /* Draw the separator under each of the first two cards */
  .grid-d3-t2-m1-cols > .sf_colsIn:nth-child(-n + 2) > .card-tidb.card-tidb--clickable::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 1px;
    background-color: #d1d1d1;
    pointer-events: none;
  }

  /* First card: extend its line into half of the grid gap */
  .grid-d3-t2-m1-cols > .sf_colsIn:nth-child(1) > .card-tidb.card-tidb--clickable::after {
    left: 0;
    right: calc(var(--card-grid-gap) / -2);
  }

  /* Second card: extend its line into the remaining half of the grid gap */
  .grid-d3-t2-m1-cols > .sf_colsIn:nth-child(2) > .card-tidb.card-tidb--clickable::after {
    left: calc(var(--card-grid-gap) / -2);
    right: 0;
  }
}

@media (max-width: 877px) {
  .page-hero-banner__inner {
    padding-top: 32px !important;
    padding-bottom: 42px !important;
  }
  .page-hero-banner__breadcrumb-slot .site-breadcrumb{
    margin-bottom: 37px !important;
  }
  .page-hero-banner__title{
    font-size: 34px !important;
    margin-bottom: 30px !important;
  }
  .page-hero-banner__description h2{
    font-size: 22px !important;
    font-family: var(--font-family-bold) !important;
    line-height: 29px !important;
    margin-bottom: 19px !important;
  }
  .page-hero-banner__description p{
    font-size: 13px !important;
    line-height: 26px !important;
  }
  .card-tidb{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .image-slider-details {
    line-height: 36px;
  }
  .body-footer-gap{
    margin-bottom: 60px !important;
  }
  .breadcrumb, .site-breadcrumb {
    margin-top: 2px !important;
    margin-bottom: 30px !important;
}
  .mobile-header-logo,
  .mobile-header-logo img{
    height: 45.51px !important;
  }
  .product-promo-carousel-wrapper .carousel-control {
    display: none;
  } 
  .nr-bell-btn {
    margin-top: -110px !important;
  }

  /* Reliable Solutions - mobile Sketch: black content panel only, no left image */
  .card-ilcr-container.reliable-solutions {
    background-color: rgba(13, 13, 13, 1) !important;
  }
  .card-ilcr-container.reliable-solutions .card-ilcr-content {
    position: static !important;
    display: block !important;
    overflow: visible !important;
  }
  .card-ilcr-container.reliable-solutions .card-ilcr-left {
    display: none !important;
  }
  .card-ilcr-container.reliable-solutions .card-ilcr-right {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    background: rgba(13, 13, 13, 1) !important;
  }
  .useful-resources .feature-carousel-container{
    padding-top: 51px;
    padding-bottom: 44px;
  }
  .useful-resources .text-content.regular-h2 {
    line-height: 34px;
    padding-left: 10px !important;
}
}

/* Reliable Solutions - tablet + desktop: left image stretches with right panel */
@media (min-width: 878px) {
  .card-ilcr-container.reliable-solutions .card-ilcr-content {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  .card-ilcr-container.reliable-solutions .card-ilcr-right {
    position: static !important;
    height: auto !important;
    background: var(--color-near-black-2) !important;
  }
  .card-ilcr-container.reliable-solutions .card-ilcr-left {
    align-self: stretch !important;
    height: auto !important;
    overflow: hidden !important;
  }
  .card-ilcr-container.reliable-solutions .card-ilcr-image-wrapper,
  .card-ilcr-container.reliable-solutions .card-ilcr-image {
    width: 100% !important;
    height: 100% !important;
  }
  .card-ilcr-container.reliable-solutions .card-ilcr-image {
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile/tablet search - Sitefinity SearchBox inside the nav drawer

   Valent's header search is the Sitefinity SearchBox widget (autocomplete +
   /searchresults) rather than Greenheck's Hawk box. Below 1024px
   .site-header__logo-nav-bar collapses to height 0, so header.js relocates the
   widget into the drawer's [data-mobile-sf-search] mount. The rules below
   restyle it from the desktop pattern (42px icon that expands to 320px) into
   the always-open full-width bar the mobile design specifies, matching the
   Greenheck bar it replaces. Valent-only file, so Greenheck is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* The widget's authored position is inside the collapsed desktop header.
     Keep it hidden there so it can never bleed into the mobile layout - this
     also covers the moment before header.js runs and the case where
     relocation is skipped (Sitefinity design mode). */
  .site-header .gh-search-box-wrapper,
  .site-header .sf-search-expanded {
    display: none !important;
  }

  /* ...except the instance relocated into the drawer (higher specificity). */
  .site-header [data-mobile-sf-search] .gh-search-box-wrapper,
  .site-header [data-mobile-sf-search] .sf-search-expanded {
    display: block !important;
  }

  /* header.js adds .is-populated once it has relocated the widget in here. Until
     then - and permanently when no SearchBox widget is placed on the page, where
     the Hawk fallback group in the same row takes over - this must not draw an
     empty white bar. A state class rather than :empty, which would stop matching
     if any whitespace ever appeared inside the mount element. */
  [data-mobile-sf-search]:not(.is-populated) {
    display: none !important;
  }

  /* .mobile-nav-search-group sets display:flex, which would otherwise win over
     the UA stylesheet's [hidden] rule and reveal the fallback. */
  .mobile-nav-search-fallback[hidden] {
    display: none !important;
  }

  [data-mobile-sf-search] .gh-search-box-wrapper {
    width: 100% !important;
    margin-bottom: 0 !important;
    align-items: stretch !important;
  }

  [data-mobile-sf-search] .sf-search-expanded {
    width: 100% !important;
  }

  /* Always full width: overrides both the collapsed 42px and the expanded
     320px desktop widths, and drops the desktop border/overflow clipping
     since the drawer row already supplies the white bar. */
  [data-mobile-sf-search] .sf-search-box,
  [data-mobile-sf-search] .sf-search-expanded.sf-search-active .sf-search-box {
    width: 100% !important;
    height: auto !important;
    justify-content: space-between !important;
    border: none !important;
    background-color: transparent !important;
    overflow: visible !important;
  }

  /* Desktop keeps the input absolutely positioned and hidden until expanded;
     in the drawer it is the bar itself. 16px avoids the iOS focus zoom. */
  [data-mobile-sf-search] .sf-search-input {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--color-near-black) !important;
  }

  [data-mobile-sf-search] .sf-search-input::placeholder {
    color: var(--color-medium-gray) !important;
    opacity: 1 !important;
  }

  [data-mobile-sf-search] .sf-search-button {
    position: static !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 8px !important;
    flex: 0 0 auto !important;
    color: var(--color-medium-gray) !important;
  }

  [data-mobile-sf-search] .sf-search-icon {
    width: 20px !important;
    height: 20px !important;
  }

  /* Same glyph as the SearchBox when no widget is on the page (Hawk fallback). */
  .mobile-nav-search-icon-svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  /* Suggestion menu. jQuery UI appends it to <body>, so it cannot be scoped to
     the mount; these are touch ergonomics that suit any Valent search box at
     this width. Width/placement stay with positionAutocompleteMenu() in
     search-box-ui.js, which tracks the bar's own rect.
     The `body` prefix is required: SearchBox.cshtml emits its desktop rules
     from an inline <style> in the body with the same specificity and
     !important, so it would otherwise win on source order. */
  body ul.ui-autocomplete.sf-autocomplete {
    max-height: 60vh !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body ul.ui-autocomplete.sf-autocomplete .ui-menu-item-wrapper,
  body ul.ui-autocomplete.sf-autocomplete .ui-menu-item > div {
    font-size: 16px !important;
    padding: 14px 16px !important;
  }

  body ul.ui-autocomplete.sf-autocomplete .gh-suggestion-section-header > div {
    font-size: 14px !important;
    padding: 10px 16px !important;
  }

  body ul.ui-autocomplete.sf-autocomplete .ui-menu-item > div.gh-suggestion-item {
    gap: 12px !important;
    min-height: 44px !important;
  }

  body ul.ui-autocomplete.sf-autocomplete .gh-suggestion-thumb-slot,
  body ul.ui-autocomplete.sf-autocomplete .gh-suggestion-thumb {
    width: 44px !important;
    height: 44px !important;
  }

  body ul.ui-autocomplete.sf-autocomplete .gh-suggestion-thumb-slot {
    flex: 0 0 44px !important;
  }

  body ul.ui-autocomplete.sf-autocomplete .gh-suggestion-footer-item > .gh-suggestion-footer {
    padding: 14px 16px !important;
  }

  body ul.ui-autocomplete.sf-autocomplete .gh-suggestion-status {
    padding: 24px 16px !important;
  }
}

/* ==========================================================================
   card-bg-image-dark-overlay-centered-title-description.css

   Valent runs this full-width band with a 22px title where Greenheck uses
   34px, and a more open 29px description leading.

   Selectors here are deliberately two-class (.container .element) rather
   than the bare single-class form used elsewhere in this file. That widget's
   own stylesheet already declares !important at <=877px, and it is
   registered by the view (@Html.StyleSheet) rather than the layout, so it
   can load AFTER this file. Against an equally-specific !important rule,
   load order decides - only higher specificity wins reliably.

   These rules also neutralise two max-width caps that fight over the same
   elements: the widget's own 250px/341px at <=877px, and the unscoped
   736px (tablet) / 332px (mobile) in header-transparent-overrides.css.
   ========================================================================== */

/* Desktop (>=1024px) */
/* body-prefixed for the same reason the rules below are two-class: the base
   sheet's own container padding is single-class + !important, so a matching
   single-class rule here would lose on load order alone. */
body .card-bg-img-dk-center-container {
  padding: 72px 24px 76px !important;
}

.card-bg-img-dk-center-container .card-bg-img-dk-center-content {
  max-width: 699px !important;
  padding: 0 !important;
  /* Vertical rhythm is owned by the title's margin-bottom alone, so there is
     only ever one lever to adjust. */
  gap: 0 !important;
}

.card-bg-img-dk-center-container .card-bg-img-dk-center-title {
  font-family: var(--font-family-bold) !important;
  font-size: 22px !important;
  line-height: 30px !important;
  margin-bottom: 24px !important;
  max-width: none !important;
}

.card-bg-img-dk-center-container .card-bg-img-dk-center-description {
  font-size: 15px !important;
  line-height: 29px !important;
  max-width: none !important;
  /* One blank line between paragraphs = exactly one line-height. The base
     stylesheet's 65px is nearly double that. Safe for the icon-table variant
     of this widget too: that markup has a single <table> child, so a flex gap
     between children never applies, and the row rhythm stays on tbody's own
     grid gap. */
  gap: 29px !important;
}

.card-bg-img-dk-center-container .card-bg-img-dk-center-description > p {
  margin-bottom: 0 !important;
}

/* Tablet (878-1023px) */
@media (min-width: 878px) and (max-width: 1023px) {
  body .card-bg-img-dk-center-container {
    padding:60px 32px 64px !important;
  }

  .card-bg-img-dk-center-container .card-bg-img-dk-center-content {
    max-width: 640px !important;
  }

  .card-bg-img-dk-center-container .card-bg-img-dk-center-title {
    font-family: var(--font-family-bold) !important;
    font-size: 21px !important;
    line-height: 29px !important;
    margin-bottom: 22px !important;
  }

  .card-bg-img-dk-center-container .card-bg-img-dk-center-description {
    line-height: 27px !important;
    gap: 27px !important;
  }
}

/* Mobile (<=877px) */
@media (max-width: 877px) {
  body .card-bg-img-dk-center-container {
    padding:44px 20px 48px !important;
  }

  .card-bg-img-dk-center-container .card-bg-img-dk-center-content {
    max-width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .card-bg-img-dk-center-container .card-bg-img-dk-center-title {
    font-family: var(--font-family-bold) !important;
    font-size: 20px !important;
    line-height: 27px !important;
    margin-bottom: 18px !important;
    /* Base sheet caps this at 250px, which wraps a short headline onto three
       lines on a 360px screen. The container padding is the only constraint
       that should apply. */
    max-width: 100% !important;
  }

  .card-bg-img-dk-center-container .card-bg-img-dk-center-description {
    font-size: 15px !important;
    line-height: 26px !important;
    max-width: 100% !important;
    gap: 26px !important;
  }

  .footer-info-links {
    text-align: center;
    }

    #mobile-login-btn {
      display: none;
    }  
}

/* ==========================================================================
   Search facets — Sitefinity Facets widget
   (search results page, e.g. /searchresults?searchQuery=…)
--------------------------------------------------------------------------
   WHY THIS LIVES HERE, not in a widget stylesheet of its own

   The Facets widget on this site does NOT render from
   ResourcePackages/Bootstrap{4,5}/MVC/Views/Facets/Facets.cshtml. Those two
   files are overridden by a template stored in the Sitefinity database
   (edited through the CMS backend), which Sitefinity resolves ahead of any
   file template. An `@Html.StyleSheet(...)` line added to the file templates
   therefore never executes and no stylesheet is ever requested — verified on
   the live page: the file was deployed and reachable (200), and the page had
   no <link> to it at all.

   valent-widgets.css is registered by Valent_BasePageLayout.cshtml, so it is
   already on every Valent page including the results page. Putting the facet
   rules here is what makes them apply without CMS work, and it is why they
   survive the next edit to that database template.

   MATCHING THE LIVE DOM

   The database template emits NO classes anywhere inside #facetContainer —
   every Bootstrap utility the file templates carry (`list-unstyled`,
   `list-inline`, `mb-3`, `h6 fw-normal`, `bg-secondary rounded-pill`,
   `position-absolute`, …) is absent, and the `data-sf-*-css-class` designer
   attributes are empty strings, so the widget's JS copies nothing onto the
   pills it builds at runtime either. Selectors here are consequently id,
   tag and attribute only. The live tree, verified in the browser:

     #facetContainer
       > h3                                   "Filter results"
       > label                                "Applied filters"
       > button#sf-facet-clear-all-btn        "Clear all"   (hidden attr)
       > div#applied-filters
           > span                             one per applied filter
               > span[role=button][id^=remove-facet-filter-]   "✕"
       > div#facetContent
           > h4                               group title
           > ul[id^=facets-group-list-]
               > li
                   > input[type=checkbox][id^=facet-checkbox-]
                   > label[for]
                   > span                     "(2)"

   Three differences from the file templates are load-bearing and are the
   reason a straight copy of the old sheet did nothing: the label and Clear
   all are direct children of #facetContainer (no flex row wrapper — and a
   `#facetContainer > div:not(#facetContent)` rule written for that wrapper
   lands on #applied-filters here, which is also a div); the applied-filter
   tags are <span>, not <li>; and the remove control is identified by its id
   prefix, not by a class.

   No !important, unlike the rest of this file: nothing else on the page
   styles this widget, so there is no load-order race to win. The two
   exceptions below say why they are exceptions.

   Colour is token-driven — --color-dark-blue is remapped to #751A15 by
   valentair/styles.css. Do not use --color-primary (hex on Greenheck, rgb
   triplet on Valent; it breaks inside rgb()).

   Breakpoints mirror search-results.css and the page shell:
     desktop >= 1024px | tablet 878-1023px | mobile <= 877px
   ========================================================================== */

body.valentair #facetContainer {
    color: var(--color-near-black);
    font-family: var(--font-family-medium);
    margin-bottom: 48px;
}

/* The widget hides collapsed facet rows (show more/less) and the Clear all
   button with the `hidden` ATTRIBUTE, which only works while nothing sets an
   explicit `display`. Several rules below do exactly that, so this guard has
   to win over all of them — hence !important rather than source order.
   Without it, every facet past the tenth renders on load and Clear all is
   visible with no filters applied. */
body.valentair #facetContainer [hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Panel heading
--------------------------------------------------------------------------
   Deliberately flat — a hairline under the title, no bordered card. When a
   query returns no facets the template still emits #facetContainer with an
   empty #facetContent inside it; a card would render as an empty outlined box
   next to the results, whereas a rule hanging off the h3 simply does not.
   -------------------------------------------------------------------------- */

body.valentair #facetContainer > h3 {
    margin: 0 0 7px;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border-color) !important;
    min-height: 42px !important;
    color: var(--color-near-black);
    font-family: var(--font-family-bold);
    font-size: 14px;
    font-weight: 700;
    line-height: 29px;
    /* Title Case comes from CSS, not from the copy. The heading text is a
       widget-designer value on a database template, so it is not reachable
       from Mvc/Views/Facets/Facets.cshtml — see the note at the top of this
       section. `capitalize` is safe on it: every word in the label is a word
       that should be capitalised. */
    text-transform: capitalize;
}

/* --------------------------------------------------------------------------
   Applied filters
   -------------------------------------------------------------------------- */

/* "Applied filters" — a direct child of the container here, not wrapped in a
   flex row as it is in the file templates. `inline-block` rather than block so
   it shares a line with the Clear all button that follows it: the two are
   adjacent inline-level siblings with no block between them, so normal inline
   flow pairs them for free. Making #facetContainer a flex container would let
   Clear all sit hard right instead, but every child would then need an
   explicit basis and any element a future template edit adds would land in
   that row uninvited. */
/* Two selectors because there are two live shapes of this widget and the sheet
   has to survive both. The database template documented at the top of this
   section makes the label a direct child of #facetContainer; the file template
   at Mvc/Views/Facets/Facets.cshtml wraps it, with the Clear all button, in a
   `div.d-flex`. A lone `> label` matches only the first, which is why this
   caption rendered completely unstyled — browser-default size, sentence case,
   no capitalisation — on the page the design was marked up against, while the
   h3 above it (a direct child either way) styled correctly.

   `:not(#facetContent)` keeps the second selector off the facet checkbox
   labels, which are also labels inside a div inside #facetContainer. */
body.valentair #facetContainer > label,
body.valentair #facetContainer > div:not(#facetContent) > label {
    display: inline-block;
    margin: 0 10px 0 0;
    /* Set as a peer of the group titles below it (#facetContent > h4), which
       is how the design draws it: same size, same weight, same near-black.
       It was a 12px all-caps grey caption before — the tracking went with the
       caps, because 0.06em exists to stop uppercase setting too tight and in
       mixed case the same value reads as a spacing fault. */
    color: var(--color-near-black);
    font-family: var(--font-family-medium);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: capitalize;
}

/* The label is emitted unconditionally, so on an unfiltered page it captions
   an empty box — which is exactly what the panel looked like before this
   sheet existed. #applied-filters contains whitespace even when empty, so
   `:empty` never matches it; `:has()` is what can tell "no tags" apart from
   "no markup". A browser without :has() drops the whole selector as invalid
   and keeps the label visible, which is the old behaviour — so this degrades
   to no worse than where it started. */
body.valentair #facetContainer:not(:has(#applied-filters > *)) > label,
body.valentair #facetContainer:not(:has(#applied-filters > *)) > div:not(#facetContent) > label {
    display: none;
}

body.valentair #sf-facet-clear-all-btn {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--color-dark-blue);
    font-family: var(--font-family-semi-bold);
    font-size: 14px;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.15s ease;
}

/* Row spacing lives on the tags, not on the container. #applied-filters holds
   whitespace even with no filters applied, so a margin here would open a
   permanent gap under the label on an unfiltered page. `row-gap: 0` keeps the
   per-tag margin-top from stacking on a flex gap when the tags wrap. */
body.valentair #applied-filters {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One tag per applied filter. The JS emits <span> here (the file templates'
   `data-sf-applied-filter-html-tag="li"` is an empty string in the live
   template), and the tag's text sits as a bare text node beside the remove
   control — which inline-flex handles as an anonymous flex item. */
/* <span> in the database template, <li> in the file template (whose
   data-sf-applied-filter-html-tag says "li"). Both, for the same reason as the
   label above. */
body.valentair #applied-filters > span,
body.valentair #applied-filters > li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    margin-top: 8px;
    padding: 5px 6px 5px 12px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--color-dark-blue) 8%, transparent);
    color: var(--color-near-black);
    font-family: var(--font-family-medium);
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* The remove control ("✕"). Built by the widget's JS with no class at all,
   so the id prefix is the only stable hook; role="button" is carried too but
   the prefix is the more specific of the two. */
body.valentair #applied-filters [id^="remove-facet-filter-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-dark-blue);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* --------------------------------------------------------------------------
   Facet groups
   -------------------------------------------------------------------------- */

/* With no filters applied the label above is hidden and #applied-filters is
   empty, so this margin plus the h3's 20px is the entire gap between the panel
   rule and the first group title — 17px before, which read as the heading and
   "Product Type" being one block.

   The pair (20px / 14px) is derived, not measured. The design file composites
   two renders that do not share a scale OR a typeface: normalising the same
   two gaps by "Product Type" width, by the panel rule's width and by cap
   height gives 1.075x, 1.163x and 1.257x respectively, and no reference
   reconciles them. Those three readings bound the intended values at 14-20px
   here and 12-15px above the first group; the top of each range is used,
   because every reading agrees the gaps grow and none of them supports going
   further. Replace both with real numbers if the designer supplies them. */
body.valentair #facetContent {
    margin: 14px 0 0;
}

body.valentair #facetContent > h4 {
    margin: 0 0 8px;
    color: var(--color-near-black);
    font-family: var(--font-family-medium);
    font-size: 14px;
    line-height: 1.35;
}

/* Divider between groups only — the first group already sits under the panel
   heading's rule and would otherwise get two hairlines in a row. */
body.valentair #facetContent > h4:not(:first-of-type) {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

body.valentair #facetContent ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* `cursor: pointer` on the row, not just the label and box. Two reasons: the
   row reads as one target, and iOS Safari only fires `:active` on an element
   that is either cursor:pointer or carries a touch listener — without it the
   press tint below never appears on iPhone. The count span at the right edge
   is the one spot the pointer overstates, inside a row where everything else
   is clickable. */
body.valentair #facetContent li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* `accent-color` rather than a hand-built appearance:none box: it brands the
   checked state in one line, keeps the native checkmark, indeterminate state
   and high-contrast rendering, and needs no extra markup — which matters
   because the input is generated by the template and read back by id by the
   widget's own JS. */
body.valentair #facetContent li > input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--color-dark-blue);
    cursor: pointer;
}

body.valentair #facetContent li > label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--color-near-black);
    font-family: var(--font-family-medium);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: color 0.15s ease;
}

/* Right-aligned rather than trailing the label text: the counts line up into
   a scannable column, and a long label that wraps to two lines no longer
   orphans its count at the start of the second line. */
body.valentair #facetContent li > span {
    flex: 0 0 auto;
    padding-top: 1px;
    color: var(--color-text-gray);
    font-family: var(--font-family-book);
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
    transition: color 0.15s ease;
}

/* --------------------------------------------------------------------------
   Show more / Show less
--------------------------------------------------------------------------
   Descendant rather than child: this button is created by the widget's JS and
   the live template's nesting for it is unverified (this query returns four
   facets, below the threshold that generates one).
   -------------------------------------------------------------------------- */

body.valentair #facetContent button[id^="show-more-less-"] {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--color-dark-blue);
    font-family: var(--font-family-semi-bold);
    font-size: 14px;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.15s ease;
}

/* --------------------------------------------------------------------------
   Custom range rows (number and date facets)
--------------------------------------------------------------------------
   UNVERIFIED against the live template — this catalogue exposes only
   classification facets, so no range row could be inspected. The rules are
   anchored on input types and id prefixes, which the widget's JS controls
   rather than the template, so they should hold; check them the first time a
   number or date facet is configured.
   -------------------------------------------------------------------------- */

body.valentair #facetContent > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* 120px is roughly what a native date input needs to show `dd/mm/yyyy` in
   full at 14px. Using it as the flex-basis (rather than 0) means a sidebar
   column too narrow for two fields, the dash and the submit button wraps the
   row instead of shrinking the fields until the placeholder is clipped. */
body.valentair #facetContent > div > div,
body.valentair #facetContent > div > input {
    flex: 1 1 120px;
    min-width: 0;
}

body.valentair #facetContent > div > span {
    flex: 0 0 auto;
    margin: 0;
    color: var(--color-text-gray);
}

body.valentair #facetContent input[type="number"],
body.valentair #facetContent input[type="date"] {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--color-border-gray);
    border-radius: 4px;
    background-color: var(--color-white);
    color: var(--color-near-black);
    font-family: var(--font-family-medium);
    font-size: 14px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.valentair #facetContent input[type="number"]::placeholder,
body.valentair #facetContent input[type="date"]::placeholder {
    color: var(--color-text-gray);
    opacity: 1;
}

body.valentair #facetContent button[id^="custom-range-btn-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-dark-blue);
    border-radius: 4px;
    background-color: var(--color-white);
    color: var(--color-dark-blue);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

body.valentair #facetContent button[id^="custom-range-btn-"] svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
}

/* ==========================================================================
   Interaction states
--------------------------------------------------------------------------
   Every state for every clickable thing in the widget lives here rather than
   beside its base rule, so the full model can be read in one pass:

     element              rest        hover        active      selected
     -------------------  ----------  -----------  ----------  ------------
     facet row label      near-black  underline    tint plate  brand
                                      + darker
     facet checkbox       grey box    (row hover)  --          brand fill
     Clear all            brand       lighter      brand       --
     Show more/less       brand       lighter      brand       --
     applied-filter ✕     brand       tinted disc  darker      --
     range input          grey rule   dark rule    --          focus halo
     range submit         outlined    filled       filled+dent --

   Hover is inside `@media (hover: hover)` on purpose. Without that gate a tap
   on a touch device leaves the tapped facet stuck in its hover colour until
   something else is tapped, which reads as a second kind of selected state
   sitting beside the real one. `:active` is left ungated — it is the state
   that gives a tap its feedback.

   Nothing here changes a metric that could reflow the list. Notably the
   selected row is coloured, not re-weighted: swapping the label to a
   semi-bold face grows the text a few pixels, enough to re-wrap a long facet
   name in the 332px mobile column and shunt every row below it by a line —
   under the finger that just tapped it.
   ========================================================================== */

@media (hover: hover) {
    body.valentair #sf-facet-clear-all-btn:hover,
    body.valentair #facetContent button[id^="show-more-less-"]:hover {
        color: var(--color-sky-blue);
    }

    /* Hovering anywhere on the tag lights up the ✕ — the tag itself is not
       clickable, only the control is, so the plate stays put and just the
       target gains a disc. */
    body.valentair #applied-filters > span:hover [id^="remove-facet-filter-"],
    body.valentair #applied-filters [id^="remove-facet-filter-"]:hover {
        background-color: color-mix(in srgb, var(--color-dark-blue) 16%, transparent);
        color: var(--color-dark-blue);
    }

    /* The whole row is the affordance, so hovering the checkbox, the label or
       the count all light the label. Underline rather than a colour swap to
       brand, because brand is what marks a *selected* facet two rules down. */
    body.valentair #facetContent li:hover > label {
        color: var(--color-near-black-2);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    body.valentair #facetContent input[type="number"]:hover,
    body.valentair #facetContent input[type="date"]:hover {
        border-color: color-mix(in srgb, var(--color-near-black) 45%, transparent);
    }

    body.valentair #facetContent button[id^="custom-range-btn-"]:hover {
        background-color: var(--color-dark-blue);
        color: var(--color-white);
    }
}

/* Pressed. The two text buttons snap back from the lighter hover to the base
   brand colour, which reads as a press without moving anything. */
body.valentair #sf-facet-clear-all-btn:active,
body.valentair #facetContent button[id^="show-more-less-"]:active {
    color: var(--color-dark-blue);
}

body.valentair #applied-filters [id^="remove-facet-filter-"]:active {
    background-color: color-mix(in srgb, var(--color-dark-blue) 28%, transparent);
}

/* A tint under the row for the duration of the press — the only touch
   feedback a facet gets, since hover is gated off on those devices. Applied
   to the <li> so it covers the checkbox, label and count together. */
body.valentair #facetContent li:active {
    background-color: color-mix(in srgb, var(--color-dark-blue) 6%, transparent);
}

/* Darkened rather than lightened: the button is already filled by hover at
   this point, and an inset shadow is the only way to push it further without
   a second, darker brand token. */
body.valentair #facetContent button[id^="custom-range-btn-"]:active {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    box-shadow: inset 0 2px 5px color-mix(in srgb, var(--color-near-black-2) 35%, transparent);
}

/* Selected. The brand-filled box comes free from accent-color; this carries
   the same signal into the text so a scan down the column reads which facets
   are on without tracking the boxes. `:checked` outranks the hover rule above
   on both specificity and source order, so a hovered selected row keeps its
   brand colour and gains only the underline. */
body.valentair #facetContent li > input[type="checkbox"]:checked ~ label {
    color: var(--color-dark-blue);
}

body.valentair #facetContent li > input[type="checkbox"]:checked ~ span {
    color: color-mix(in srgb, var(--color-dark-blue) 75%, transparent);
}

/* Same border + halo treatment as .gh-search__refine-input, which is why the
   text fields are left out of the focus-ring block below — stacking an offset
   outline on top of this would draw three concentric rings. Declared after
   the hover rule so a focused field that is also hovered keeps the brand
   border. */
body.valentair #facetContent input[type="number"]:focus,
body.valentair #facetContent input[type="date"]:focus {
    outline: none;
    border-color: var(--color-dark-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-dark-blue) 15%, transparent);
}

/* --------------------------------------------------------------------------
   Keyboard focus ring
--------------------------------------------------------------------------
   common.css has `*:focus, *:hover { outline: none !important; }`, which beats
   its own `*:focus-visible` rule everywhere on the site. !important at higher
   specificity is the only way to get a ring back without touching that global
   rule and changing both brands site-wide — the second of this section's two
   deliberate !important uses.

   [role="button"] is in the list because the applied-filter ✕ is a <span>
   with role and tabindex, not a real button: it takes keyboard focus and
   would otherwise be the one control in the panel with no visible ring.
   -------------------------------------------------------------------------- */

body.valentair #facetContainer a:focus-visible,
body.valentair #facetContainer button:focus-visible,
body.valentair #facetContainer [role="button"]:focus-visible,
body.valentair #facetContainer input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-dark-blue) !important;
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.valentair #facetContainer button,
    body.valentair #facetContainer a,
    body.valentair #facetContainer input,
    body.valentair #facetContainer label,
    body.valentair #facetContainer [id^="remove-facet-filter-"],
    body.valentair #facetContent li,
    body.valentair #facetContent li > span {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Tablet — 878-1023px
--------------------------------------------------------------------------
   The widget sits in a narrower sidebar column here, so the type steps down
   one notch and the vertical rhythm tightens. The range row already wraps,
   which is what keeps two inputs plus the submit button usable once the
   column drops below roughly 260px.
   -------------------------------------------------------------------------- */

@media (min-width: 878px) and (max-width: 1023px) {
    body.valentair #facetContainer > h3 {
        margin-bottom: 20px;
        padding-bottom: 12px;
        font-size: 18px;
    }

    body.valentair #facetContent {
        margin-top: 10px;
    }

    body.valentair #facetContent > h4 {
        font-size: 14px;
    }

    body.valentair #facetContent > h4:not(:first-of-type) {
        margin-top: 20px;
        padding-top: 18px;
    }

    body.valentair #facetContent li {
        padding: 5px 0;
    }

    body.valentair #facetContent li > label {
        font-size: 14px;
    }

    body.valentair #facetContent li > span {
        font-size: 12px;
    }

    body.valentair #facetContent input[type="number"],
    body.valentair #facetContent input[type="date"] {
        height: 38px;
    }

    body.valentair #facetContent button[id^="custom-range-btn-"] {
        width: 38px;
        height: 38px;
    }

    .footer-info-links {
      text-align: left;
      }
}

/* --------------------------------------------------------------------------
   Mobile — <= 877px
--------------------------------------------------------------------------
   The sidebar stacks above the results at this width, so the panel gets a
   bottom margin it does not need beside a results column.

   Tap targets are the real change: the row padding moves onto the <label>,
   because the label is the hit area (it carries the `for`) and padding on the
   <li> would grow the row without growing anything clickable. 11px top and
   bottom around a 22.5px line box lands the label at ~44px. The checkbox
   margin is set to match, so it still lines up with the first line of a label
   that wraps.
   -------------------------------------------------------------------------- */

@media (max-width: 877px) {
    body.valentair #facetContainer {
        margin-bottom: 28px;
    }

    body.valentair #facetContainer > h3 {
        margin-bottom: 20px;
        padding-bottom: 12px;
        font-size: 18px;
    }

    body.valentair #sf-facet-clear-all-btn {
        min-height: 32px;
    }

    body.valentair #facetContent {
        margin-top: 10px;
    }

    body.valentair #facetContent > h4 {
        font-size: 15px;
    }

    body.valentair #facetContent > h4:not(:first-of-type) {
        margin-top: 18px;
        padding-top: 16px;
    }

    body.valentair #facetContent li {
        min-height: 44px;
        padding: 0;
    }

    body.valentair #facetContent li > input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin-top: 12px;
    }

    body.valentair #facetContent li > label {
        padding: 11px 0;
        font-size: 15px;
    }

    body.valentair #facetContent li > span {
        padding-top: 12px;
    }

    body.valentair #facetContent button[id^="show-more-less-"] {
        min-height: 44px;
        padding: 10px 0;
    }

    /* The 16px type below needs ~140px to render `dd/mm/yyyy` without
       clipping. Raising the basis to match pushes the submit button onto its
       own row inside the 332px mobile column, which leaves the two fields
       ~151px each — the alternative, keeping all three on one line, clips
       both dates to `dd/mm/y`. */
    body.valentair #facetContent > div > div,
    body.valentair #facetContent > div > input {
        flex: 1 1 140px;
    }

    /* 16px is the iOS threshold — anything smaller zooms the page on focus
       and leaves the visitor scrolled sideways. */
    body.valentair #facetContent input[type="number"],
    body.valentair #facetContent input[type="date"] {
        height: 44px;
        font-size: 16px;
    }

    body.valentair #facetContent button[id^="custom-range-btn-"] {
        width: 44px;
        height: 44px;
    }
}
body > main{
  margin: 0 auto 64px auto;
}
main:has(.gray-bg-container ~ .page-end-spacer:last-child),
main:has(.body-container .gray-bg-container:last-child), 
main:has(> .body-container > :last-child .card-bg-img-dk-center-container:last-child),
main:has(> .body-container > :last-child .locations-by-state:last-child) {
  margin-bottom: 0 !important;
}