* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

:root {
  font-family: "Open Sans", sans-serif !important;
  --black: #1a1a1a;
  --black-hover: #333333;
  --light-grey: #ababab;
  --grey: #666666;
  --background: #ffffff;
  --white-active: #f4f4f4;

  --light-yellow-3: #fdf4b6;
  --light-yellow-2: #fced8f;
  --light-yellow-1: #fbe767;
  --yellow: #fae13f;
  --dark-yellow-1: #f9db17;
  --dark-yellow-2: #e2c406;
  --dark-yellow-3: #baa205;

  --light-green-2: #b6dfac;
  --light-green-1: #9dd38e;
  --green: #83c871;
  --dark-green-1: #69bd54;
  --dark-green-2: #56a741;
  --dark-green-3: #478935;

  --border-radius-xxs: 0.25rem;
  --border-radius-xs: 0.5rem;
  --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-display: "Oswald", sans-serif;
  --font-family-body: "Open Sans", 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-h4: clamp(1.5rem, 2vw, 2rem);
  --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-l: clamp(2.5rem, 3.25vw, 3.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-body);
  --btn-text-m: var(--font-weight-semibold) var(--font-size-s) /
    var(--line-height-m) var(--font-family-body);
  --btn-text-s: var(--font-weight-semibold) var(--font-size-xs) /
    var(--line-height-s) var(--font-family-body); */

  /* Heading Text Styles */

  --heading-h1: var(--font-weight-bold) var(--font-size-h1) /
    var(--line-height-h1) var(--font-family-display);
  --heading-h2: var(--font-weight-bold) var(--font-size-h2) /
    calc(var(--line-height-h1) - var(--spacing-2)) var(--font-family-display);
  --heading-h3: var(--font-weight-bold) var(--font-size-h3) /
    var(--line-height-h3) var(--font-family-display);
  --heading-h4: var(--font-weight-bold) var(--font-size-h4) /
    var(--line-height-l) var(--font-family-display);
  --heading-h5: var(--font-weight-bold) var(--font-size-l) /
    var(--line-height-l) var(--font-family-display);
  --heading-h6: var(--font-weight-semibold) var(--font-size-l) /
    var(--line-height-m) var(--font-family-display);

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

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

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

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

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

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

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

  &: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(--yellow);
  margin: 0;

  &:hover {
    background-color: var(--light-yellow-1);
  }
}

.secondary-btn {
  background-color: var(--background);
  margin: 0;

  &:hover {
    background-color: var(--white-active);
  }
}

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

  &:hover {
    background-color: var(--background);
    color: var(--black);
  }
}

.outline-btn-green {
  background-color: transparent;
  border: 1px solid var(--dark-green-2);
}

.underline-btn {
  text-decoration: underline !important;
  text-underline-offset: 0.15rem;
  padding: var(--spacing-1) 0;

  &:hover {
    background-color: none;
    box-shadow: none;
    transform: translateX(0.2rem);
  }
}

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

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

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

/* Inventory loading ring */
.lds {
  font: var(--body-s-bold) !important;
}
.lds-ring {
  color: var(--green) !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(--black) !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(--black-hover) !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(--dark-green-3) !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(--light-yellow-1) !important;
  color: var(--black) !important;
}

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

/* Small box with GST details under view listing details button */
.list-redesign .additional-price-info-grid {
  border-radius: var(--border-radius-xxs) !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-xxs) !important;
}

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

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