* {
  box-sizing: border-box;
}

:root {
  font-family: "Poppins", sans-serif !important;
  --black: #1a1a1a;
  --black-hover: #333333;
  --sub-heading-grey: #666666;
  --background: #ffffff;
  --white-active: #f4f4f4;
  --light-blue-5: #ccdef3;
  --light-blue-4: #aec8ea;
  --light-blue-3: #8db0e0;
  --light-blue-2: #6691cf;
  --light-blue-1: #4074be;
  --blue: #2059aa;
  --dark-blue-1: #1a4787;
  --light-navy-1: #2a3e63;
  --navy: #12223e;
  --dark-navy-2: #0a1321;
  --red: #e50012;
  --dark-red-1: #c3000f;
  --dark-red-2: #a0000d;
  --dark-red-3: #7e000a;
  --red-highlight: #f3ccd1;
  --red-highlight-hover: #f8b2b8;
  --light-red-bg-hover: #fcdde0;
  --light-red-bg: #f7e6e8;

  --border-radius-s: 1rem;
  --border-radius-m: 2rem;
  --border-radius-l: 3rem;
  --box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  --transition:
    background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;

  --spacing-1: clamp(0.375rem, 0.2vw + 0.325rem, 0.5rem);
  --spacing-2: clamp(0.75rem, 0.4vw + 0.65rem, 1rem);
  --spacing-3: clamp(1.125rem, 0.6vw + 0.975rem, 1.5rem);
  --spacing-4: clamp(1.5rem, 0.8vw + 1.3rem, 2rem);
  --spacing-5: clamp(1.875rem, 1vw + 1.625rem, 2.5rem);
  --spacing-6: clamp(2.25rem, 1.2vw + 1.95rem, 3rem);
  --spacing-7: clamp(2.625rem, 1.4vw + 2.275rem, 3.5rem);
  --spacing-8: clamp(3rem, 1.6vw + 2.6rem, 4rem);
  --spacing-9: clamp(3.375rem, 1.8vw + 2.925rem, 4.5rem);
  --spacing-10: clamp(3.75rem, 2vw + 3.25rem, 5rem);
  --spacing-11: clamp(4.125rem, 2.2vw + 3.575rem, 5.5rem);
  --spacing-12: clamp(4.5rem, 2.4vw + 3.9rem, 6rem);

  --font-family: "Poppins", sans-serif;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-h1: clamp(2.25rem, 3.5vw, 3.5rem);
  --font-size-h2: clamp(2rem, 3vw, 3rem);
  --font-size-h3: clamp(1.75rem, 2.5vw, 2.5rem);
  --font-size-l: clamp(1.25rem, 1.5vw, 1.5rem);
  --font-size-m: clamp(1rem, 1.25vw, 1.125rem);
  --font-size-s: clamp(0.875rem, 1vw, 1rem);
  --font-size-xs: clamp(0.75rem, 0.875vw, 0.875rem);
  --font-size-xxs: clamp(0.6875rem, 0.75vw, 0.75rem);
  --font-size-xxxs: clamp(0.625rem, 0.6875vw, 0.6875rem);

  --line-height-h1: clamp(3.25rem, 5vw, 5rem);
  --line-height-h3: clamp(2.25rem, 3vw, 3rem);
  --line-height-m: clamp(2rem, 2.5vw, 2.5rem);
  --line-height-s: clamp(1.75rem, 2vw, 2rem);
  --line-height-xs: clamp(1.25rem, 1.5vw, 1.5rem);
  --line-height-xxs: clamp(1rem, 1.125vw, 1.125rem);

  /* Button Text Styles */
  /* --btn-text-l: var(--font-weight-semibold) var(--font-size-l) /
    var(--line-height-m) var(--font-family);
  --btn-text-m: var(--font-weight-semibold) var(--font-size-s) /
    var(--line-height-m) var(--font-family);
  --btn-text-s: var(--font-weight-semibold) var(--font-size-xs) /
    var(--line-height-s) var(--font-family); */

  /* Heading Text Styles */
  /* --about-heading: var(--font-weight-bold) var(--font-size-h3) /
    var(--line-height-h3) var(--font-family); */
  --heading-h1: var(--font-weight-bold) var(--font-size-h1) /
    var(--line-height-h1) var(--font-family);
  --heading-h2: var(--font-weight-bold) var(--font-size-h2) /
    calc(var(--line-height-h1) - var(--spacing-2)) var(--font-family);
  --heading-h3: var(--font-weight-semibold) var(--font-size-h3) /
    var(--line-height-h3) var(--font-family);
  --heading-h5-banner: var(--font-weight-bold) var(--font-size-l) /
    var(--line-height-xs) var(--font-family);
  --heading-h6: var(--font-weight-semibold) var(--font-size-l) /
    var(--line-height-m) var(--font-family);

  /* Body Text Styles */
  --body-l-reg: var(--font-weight-regular) var(--font-size-l) /
    var(--line-height-s) var(--font-family);
  --body-l-bold: var(--font-weight-semibold) var(--font-size-l) /
    var(--line-height-s) var(--font-family);

  --body-m-reg: var(--font-weight-regular) var(--font-size-m) /
    var(--line-height-s) var(--font-family);
  --body-m-bold: var(--font-weight-semibold) var(--font-size-m) /
    var(--line-height-m) var(--font-family);

  --body-s-reg: var(--font-weight-regular) var(--font-size-s) /
    var(--line-height-xs) var(--font-family);
  --body-s-bold: var(--font-weight-semibold) var(--font-size-s) /
    var(--line-height-s) var(--font-family);

  --body-xs-reg: var(--font-weight-regular) var(--font-size-xs) /
    var(--line-height-xs) var(--font-family);
  --body-xs-bold: var(--font-weight-semibold) var(--font-size-xs) /
    var(--line-height-s) var(--font-family);

  --body-xxs-reg: var(--font-weight-regular) var(--font-size-xxs) /
    var(--line-height-xxs) var(--font-family);
  --body-xxs-bold: var(--font-weight-semibold) var(--font-size-xxs) /
    var(--line-height-xxs) var(--font-family);

  --body-xxxs-reg: var(--font-weight-regular) var(--font-size-xxxs) /
    var(--line-height-xxs) var(--font-family);
  --body-xxxs-bold: var(--font-weight-semibold) var(--font-size-xxxs) /
    var(--line-height-xxs) var(--font-family);
}

/* Button Styles */
.btn {
  display: flex;
  gap: var(--spacing-1);
  border-radius: var(--border-radius-l);
  cursor: pointer;
  padding: var(--spacing-1) var(--spacing-4);
  color: var(--black);
  font: var(--body-m-bold);
  border: none;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  text-align: center;
  width: fit-content;
  min-width: max-content;
}

.btn:hover {
  box-shadow: var(--box-shadow);
  transform: translateX(0.2rem);
}

.btn i,
.underline-btn i,
.secondary-btn i {
  text-decoration: none;
}

.main-btn {
  background-color: var(--blue);
  color: var(--background);
  margin: 0;
}

.main-btn:hover {
  background-color: var(--dark-blue-1);
  color: var(--white-active);
}

.secondary-btn {
  background-color: var(--light-blue-5);
  color: var(--navy);
  margin: 0;
}

.secondary-btn:hover {
  background-color: var(--light-blue-4);
}

.outline-btn {
  background: var(--background);
  color: var(--navy);
  border: 1px solid var(--navy);
}

/* ======================= Global Components ======================= */

/* Light Blue Border Left - used for all other page headings except homepage quick links */
.light-blue-border-left {
  display: flex;
  position: relative;
}

.light-blue-border-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2.5rem;
  width: var(--spacing-3);
  height: 100%;
  background-color: var(--light-blue-2);
  border-top-right-radius: calc(var(--border-radius-s) / 4);
  border-bottom-right-radius: calc(var(--border-radius-s) / 4);
}

/* Animated underline - used for <a> tags */
.animated-underline {
  transition: color 180ms ease;
  position: relative;
}

.animated-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: var(--light-blue-5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease-in-out;
}

.animated-underline:hover::after {
  transform: scaleX(1);
}
/* ===================================================================== */
@media only screen and (max-width: 768px) {
  /* .btn:hover,
  .btn:focus {
    transform: none;
  } */

  .light-blue-border-left::before {
    width: var(--spacing-4);
  }
}

/*----------------------------- INVENTORY STYLES - KEEP AT BOTTOM OF CSS -----------------------------*/

.body-wrapper {
  font-family: "Poppins", sans-serif !important;
}

/* Inventory loading ring */
.lds {
  font: var(--body-s-bold) !important;
}
.lds-ring {
  color: var(--blue) !important;
}

/* Inventory Left buttons */
.faceted-search-content button.faceted-search,
.faceted-search-content
  .faceted-section-box
  .faceted-btn-container
  .faceted-show-all-btn {
  background-color: var(--navy) !important;
}

.faceted-search-content button.faceted-search:hover,
.faceted-search-content
  .faceted-section-box
  .faceted-btn-container
  .faceted-show-all-btn:hover {
  background-color: var(--light-navy-1) !important;
}

/* Inventory category title */
.list-top-section .list-title .list-title-text {
  font: var(--heading-h3) !important;
  padding-bottom: var(--spacing-2) !important;
}

@media screen and (min-width: 1000px) {
  .list-top-section .list-title .list-title-text {
    padding-left: var(--spacing-1) !important;
  }

  .list-redesign .side-container {
    padding-left: var(--spacing-1) !important;
  }
}

/* Miscellaneous text on light background */
.list-top-section .list-listings-count,
.detail__machine-location a,
.dealer-contact__details a,
.dealer-contact__details span,
.listing-prices__retail-price,
.detail__search-results-text span {
  color: var(--blue) !important;
}

#detail-page-email-seller:hover,
#detail-page-mobile-dealer-phone:hover,
#detail-page-mobile-send-a-message:hover,
.list-container-flexrow .view-listing-details-link:hover,
.faceted-search-content .selected-facets-container .selected-facet:hover {
  background: var(--blue) !important;
  color: var(--background) !important;
}

/* View listing details button */
.list-container-flexrow .view-listing-details-link,
.faceted-search-content .selected-facets-container .selected-facet {
  background: var(--blue) !important;
  color: var(--background) !important;
  border-radius: var(--border-radius-l) !important;
  font: var(--body-xxs-bold) !important;
  margin-bottom: var(--spacing-1) !important;
}

/* Small box with GST details under view listing details button */
.list-redesign .additional-price-info-grid {
  border-radius: var(--border-radius-s) !important;
}

/* Listing details page top right (print/share) */
.detail__media-buttons.media-buttons {
  gap: var(--spacing-2) !important;
}

.detail__media-buttons.media-buttons a,
.detail__media-buttons.media-buttons span,
.detail__media-buttons.media-buttons button {
  color: var(--black) !important;
  border-radius: var(--border-radius-l) !important;
}

/* Apply for financing button */
.list-redesign .widget-container .listing-widgets a {
  border-radius: var(--border-radius-l) !important;
  color: var(--black) !important;
  font: var(--body-xxs-bold) !important;
  padding: var(--spacing-1) !important;
  margin-bottom: var(--spacing-1) !important;
}

/* listing detail email seller button */
.detail__cta-buttons button {
  border-radius: var(--border-radius-l) !important;
}