/* =========================================================
   Terms and Conditions page-specific CSS
   Global reset, fonts, headings, buttons, container,
   header, nav, footer, and basket styles come from:
   - core.css
   - basket-new.css

   Load order:
   1. core.css
   2. terms-and-conditions.css
   3. basket-new.css
========================================================= */

.terms-page {
  overflow: hidden;
}

.terms-area {
  padding: clamp(70px, 8vw, 120px) 0 clamp(80px, 9vw, 140px);
  background-color: transparent;
}

.terms-header {
  max-width: 900px;
  margin: 0 auto clamp(42px, 5vw, 72px);
  text-align: center;
}

.terms-header .heading-2 {
  margin: 0;
  text-transform: uppercase;
}

.terms-content {
  display: flow-root;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 56px);
  background-color: var(--color-white);
  border-radius: 20px;
}

.terms-section {
  display: flow-root;
}

.terms-section + .terms-section {
  margin-top: clamp(52px, 6vw, 84px);
}

.terms-section h2,
.terms-section h3 {
  text-align: left;
  color: var(--text-color);
}

.terms-section h2 {
  margin: clamp(52px, 6vw, 78px) 0 22px;
  font-size: clamp(1.25rem, 1.0417rem + 0.9259vw, 1.875rem);
}

.terms-section h3 {
  margin: clamp(34px, 4vw, 52px) 0 16px;
  font-size: clamp(1.0625rem, 0.9375rem + 0.5556vw, 1.4375rem);
}

.terms-section > h2:first-child,
.terms-section > h3:first-child {
  margin-top: 0;
}

.terms-section p {
  margin: 0;
  text-align: left;
}

.terms-section p + p {
  margin-top: 18px;
}

.terms-section ul + p,
.terms-section ol + p {
  margin-top: 18px;
}

.terms-section strong {
  font-weight: 800;
}

.terms-section a {
  color: var(--button-color);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.terms-list {
  margin: 18px 0 0;
  padding-left: 1.4rem;
  list-style: decimal;
}

.terms-list li {
  margin-bottom: 12px;
}

.terms-list li:last-child {
  margin-bottom: 0;
}

.terms-list--bullets {
  list-style: disc;
}

.terms-spacer {
  height: clamp(24px, 4vw, 48px);
}

@media screen and (max-width: 767px) {
  .terms-area {
    padding: 60px 0 80px;
  }

  .terms-header {
    margin-bottom: 36px;
  }

  .terms-content {
    padding: 28px 22px 36px;
  }

  .terms-section + .terms-section {
    margin-top: 48px;
  }

  .terms-section h2 {
    margin: 44px 0 18px;
  }

  .terms-section h3 {
    margin: 30px 0 14px;
  }

  .terms-section > h2:first-child,
  .terms-section > h3:first-child {
    margin-top: 0;
  }

  .terms-section h2,
  .terms-section h3,
  .terms-section p {
    text-align: left;
  }
}