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

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

  --light-charcoal-3: #6a6165;
  --light-charcoal-2: #50484b;
  --light-charcoal-1: #3a3336;
  --charcoal: #252022;
  --dark-charcoal-1: #1a1618;
  --dark-charcoal-2: #120f11;
  --dark-charcoal-3: #0a0809;

  --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;

  --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-body: "Roboto", 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-xs);
  cursor: pointer;
  padding: var(--spacing-1) var(--spacing-4);
  color: var(--charcoal);
  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(--charcoal);
  color: var(--white);
  margin: 0;

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

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

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

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

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

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

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

@media only screen and (max-width: 768px) {
}

/*----------------------------- Animations -----------------------------*/

.transform-up:hover {
  transform: translate(0, -0.15rem);
}

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

.body-wrapper,
#inventory-wrapper {
  font-family: "Roboto", sans-serif !important;
  --border-radius-main: var(--border-radius-xxs);
  --font-size-btn: var(--body-xxs-bold);

  --colour-btn-search: var(--charcoal);
  --colour-btn-search-state: var(--light-charcoal-1);

  --colour-main-text: var(--charcoal);
  --colour-main: var(--charcoal);
  --colour-main-state: var(--light-charcoal-1);
  --colour-main-btn-text: var(--white);
}

/* Inventory loading ring */
.lds {
  font: var(--body-s-bold) !important;
}
.lds-ring {
  color: var(--charcoal) !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(--colour-btn-search) !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(--colour-btn-search-state) !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(--colour-main-text) !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(--colour-main-state) !important;
  color: var(--colour-main-btn-text) !important;
}

/* View listing details button */
.list-container-flexrow .view-listing-details-link,
.faceted-search-content .selected-facets-container .selected-facet {
  background: var(--colour-main) !important;
  color: var(--colour-main-btn-text) !important;
  border-radius: var(--border-radius-main) !important;
  font: var(--font-size-btn) !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(--colour-main-btn-text) !important;
  border-radius: var(--border-radius-main) !important;
  background-color: var(--colour-main) !important;
}

/* Apply for financing button */
.list-redesign .widget-container .listing-widgets a {
  border-radius: var(--border-radius-main) !important;
  color: var(--colour-main-text) !important;
  font: var(--font-size-btn) !important;
  padding: var(--spacing-1) !important;
}

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

/* ===== Listing Details Modals (Email seller modal, share modal) ===== */

/* Modal title and TOC text */
.ts-modal-content .ts-modal-header .ts-modal-title,
.ts-modal-content .ts-modal-body .form-bottom span,
.ts-modal-content .ts-modal-body .form-bottom span a {
  color: var(--black);
}

/* Modal input fields and phone dropdowns */
.ts-modal-content textarea#comments,
.ts-modal-container.send-a-message .ts-modal-content label span,
.iti__country span,
.iti__country .iti__dial-code,
.iti__selected-dial-code {
  color: var(--black) !important;
}

/* Send a message modal recaptcha button */
.ts-modal-container button.g-recaptcha {
  border-radius: var(--border-radius-main) !important;
  background-color: var(--colour-main) !important;

  span {
    color: var(--colour-main-btn-text) !important;
  }
}

/* Options popper button for compare listings */
.options-popper-div .options-popper-btn {
  color: var(--colour-main-text) !important;
}

/* ===== Compare Listings ===== */

/* Compare listings page buttons */
.bread-crumbs-heading button {
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius-main) !important;
  background-color: var(--colour-main) !important;
  color: var(--colour-main-btn-text) !important;

  span,
  i {
    color: var(--colour-main-btn-text) !important;
  }

  &:hover {
    background-color: var(--colour-main-state) !important;
    color: var(--colour-main-btn-text) !important;
  }
}

/* Compare Listings Heading & No compare listings main text*/
.bread-crumbs-heading .breadcrumbs span,
.bread-crumbs-heading .breadcrumbs a,
.bread-crumbs-heading .breadcrumbs p,
.title-media-buttons-heading h1,
#no-compare-listings {
  color: var(--colour-main-text) !important;
}

.bread-crumbs-heading .return-links .return-links-link span,
.bread-crumbs-heading .return-links .return-links-link i {
  color: var(--colour-main) !important;
}

/* Compare Listings Container - have listings to compare */
/* .compare-listings-container .compare-container {
  background-color: var(--white);
} */