.back-to-top {
    display: none !important;
}

.footer {
    font-size: 0.75rem;
    color: lightslategrey;
}

#select_category {
    /* JPG CBAT-0145 */
    /* display: none; */
}

.card-header {
    display: none;
}

.product-filters {
    display: none;
}

.product-image {
    display: none;
}

.product-list {
    width: 100% !important;
}

.product-list a {
    color: black;
    text-decoration: none;
    pointer-events: none;
}

.btn-homedepot {
  background-color: #f6821f;
}

.btn-homedepot:hover {
  background-color: #c8650fbf;
}

.btn-lowes {
  background-color: #0050a0;
}

.btn-lowes:hover {
  background-color: #013466;
}

.btn-exide {
  background-color: #0050a0;
}

.btn-exide:hover {
  background-color: #013466;
}

.btn-cbshd {
  background-color: #c41230;
}

.btn-cbshd:hover {
  background-color: #9e0e26;
}

/*
 * CBAT-0240: full-width hero for gocbs.hdbatteryfinder.com.
 * Built for a ~2880x600 asset (4.8:1). It shows uncropped up to 1920px wide
 * (= 400px tall); on wider screens it is capped at 400px and cropped from the center.
 */
.cbshd-hero-img {
  height: auto;
  max-height: 400px;
  object-fit: cover;
  object-position: center;
}

/* CBAT-0240: client's minimum logo size is 1" x 1" (96 CSS px). */
.cbshd-footer-logo {
  width: 96px;
  height: auto;
  min-width: 96px;
  min-height: 96px;
}

/*
 * CBAT-0241: Bootstrap 4 -> 5 accessibility compatibility.
 *
 * These pages load Bootstrap 5.3, where `.sr-only` no longer exists: it was
 * renamed to `.visually-hidden`. The finder markup still uses `.sr-only`, so the
 * "Choose Type / Year / Make / Model / Engine" labels ended up visible by
 * mistake. This restores the original intent: screen readers only.
 *
 * Same declaration as `.visually-hidden` in Bootstrap 5.3.
 */
.sr-only,
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
 * CBAT-0232: cookie acceptance banner styles.
 *
 * The banner is injected by public_2022.js (#acceptance) on every page, but its
 * styles live in C_public_2022.css, which the finder templates do not load: they
 * only pull in Bootstrap, Typekit and this file. Without them the banner rendered
 * unstyled, as plain text on white with the browser's default button.
 *
 * Ported from C_public_2022.css so it looks the same as on the rest of the site.
 * Only difference: the link colour is set explicitly, because there it inherited
 * from a global rule that does not exist here and came out Bootstrap blue on black.
 */
#acceptance {
  text-align: left;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  padding: 13px 28px;
  z-index: 99999;
  border-top: 1px solid #555;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#acceptance a {
  white-space: nowrap;
  color: #ffc72c;
}

#acceptance button {
  padding: 7px 17px;
  border: 0;
  background-color: #ffc72c;
  color: black;
  transition: background-color 0.15s ease-in-out;
}

#acceptance button:hover {
  background-color: #cc9f23;
}

#acceptance div:nth-child(2) {
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  #acceptance {
    text-align: center;
    display: block;
  }

  #acceptance div:nth-child(1) {
    margin-bottom: 15px;
  }
}