* {
  box-sizing: border-box;
}

:root {
  font-family: "Open Sans", sans-serif !important;
  --black: #1a1a1a;
  --black-hover: #333333;
  --dark-grey: #343434;
  --grey: #6b6b6b;
  --background: #ffffff;
  --white-active: #f4f4f4;
  --light-green-5: #d0e9c4;
  --light-green-4: #c4e4b5;
  --light-green-3: #c4e4b5;
  --light-green-2: #a6d78f;
  --light-green-1: #88ca69;
  --green: #6abd44;
  --dark-green-1: #549835;
  --dark-green-2: #3f7228;
  --dark-green-3: #2a4c1b;
  --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;

  --chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='%236b6b6b' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9l6 6 6-6'/%3E%3C/svg%3E");

  --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: "Inter", sans-serif;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --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-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 */
  --heading-h1: var(--font-weight-extrabold) 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-m) var(--font-family-display);
  --heading-h5: var(--font-weight-semibold) var(--font-size-l) /
    var(--line-height-xs) 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-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 {
  border-radius: var(--border-radius-l);
  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;
  /* width: fit-content; */
}

.btn:hover {
  transform: translateX(0.2rem);
}

.btn i,
.underline-btn i,
.secondary-btn i {
  text-decoration: none;
}

.main-btn {
  background-color: var(--light-green-1);
  margin: 0;
}

.main-btn:hover {
  background-color: var(--light-green-2);
}

.secondary-btn {
  background-color: var(--background);
  color: var(--black);
  margin: 0;
}

.secondary-btn:hover {
  background-color: var(--white-active);
  color: var(--dark-green-3);
}

.outline-btn {
  color: var(--dark-green-3);
  border: 1px solid var(--dark-green-3);
}

.outline-btn:hover {
  color: var(--dark-green-2);
  border-color: var(--dark-green-2);
}

.underline-btn {
  font: var(--heading-h6);
  text-decoration: underline !important;
  text-underline-offset: 0.15rem;
  padding: var(--spacing-1) 0;
}

.underline-btn:hover {
  background-color: none;
  color: var(--dark-yellow-3);
  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: "Inter", sans-serif !important;
}

/* Inventory loading ring */
.lds {
  font: var(--body-s-bold) !important;
}
.lds-ring {
  color: var(--light-green-1) !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-green-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(--light-green-1) !important;
  color: var(--black) !important;
  border-radius: var(--border-radius-l) !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-l) !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;
}

/* listing detail email seller button */
.detail__cta-buttons button {
  border-radius: var(--border-radius-l) !important;
}
