:root {
  --gray-600: #7E7E7E;
  --status-success: #28A745;
}

.text-gray-600 {color:var(--gray-600);} /* should these/this be set to Bootstrap variables? like --bs-gray-600*/
.bg-status-success {background:var(--status-success);}



select.select2 + .select2.select2-container {
  .select2-selection__rendered {
    height: 100%;
  }

  .select2-selection__rendered,
  .select2-selection__placeholder {
    display: flex;
    height: 100%;
    align-items: center;
  }
}

#divCategories {
  .nav-pills .nav-link {
    --bs-nav-pills-border-radius: 0;
  }
  .nav-pills .nav-link.active,
  .nav-pills .show>.nav-link {
    background:transparent;
    border-bottom:2px solid var(--bs-primary)!important;
    color:var(--bs-primary)!important;
    font-weight:700;      
  }
}

#divProductsList {
  .product-image-container {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    height:100px;

    .product-image {
      width: 100%;
      height: 100%;
      object-fit: contain; /* changed from "cover" on 7/28/2025 by Sauksata because "it's the lesser of two evils" in terms of image cropping (ticket #21720) - abc */
    }
  }

  .product-name-container {
    .btn {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }
  }
}

#divBrandTypeToggle {
    .btn-primary {
      --bs-btn-active-bg: var(--bs-primary);
    }
}

footer.footer {
  margin-bottom: 0px;
}
footer.footer a {
  color: unset;
}
footer.footer.text-white a {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb),var(--bs-text-opacity)) !important;
}

#tblYourCartAccessories {
  [data-type="vehicle"] {
    display:none;
  }
}