@charset "UTF-8";
/* CSS Document */

/* =========================================================
   BIKESDIRECT PAGE H1 / H2
   Shared heading styles for modern index/category pages.
   Final Labor Day heading hierarchy.
   ========================================================= */

:root {
  /* H2 uses BikesDirect blue. H1 is exactly 10% darker by RGB value. */
  --bd-page-h2-blue: #0058E0;
  --bd-page-h1-blue: #004FC9;
}

/* Main page H1 */
.bd-page-h1 {
  font-family: 'Jost', 'Graphik', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  color: var(--bd-page-h1-blue);
  text-align: center;
  font-size: 1.75rem;      /* 28px desktop */
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0.75em 0 0.35em;
  text-wrap: balance;
}

/* Main page H2 / promotional subtitle */
.bd-page-h2 {
  font-family: 'Inter', 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--bd-page-h2-blue);
  text-align: center;
  font-size: 0.95rem;      /* 15.2px */
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0.35em 0 0.6em;
  text-wrap: balance;
}

/* iPhone 12 and similar mobile widths */
@media screen and (max-width: 640px) {
  .bd-page-h1 {
    font-size: 1.275rem;   /* 20.4px */
    line-height: 1.15;
  }

  .bd-page-h2 {
    font-size: 0.95rem;    /* 15.2px */
    line-height: 1.2;
  }
}

/* Supporting urgency/notification line.
   Matches the JS product-grid .bike-description scale/style. */
.bd-page-confirm-body {
  font-family: 'Inter', 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.75rem;      /* 12px */
  font-weight: 400;
  line-height: 1.2;
  color: #111;
  text-align: center;
  margin: 0.15em auto 0.75em;
  max-width: 100%;
}

.bd-page-confirm-body strong {
  font-weight: 600;
}

.bd-page-confirm-body a,
.bd-page-confirm-body a:visited {
  color: #111;
  font-weight: 400;
  text-decoration: underline;
}

.bd-page-confirm-body a:hover,
.bd-page-confirm-body a:focus {
  color: #111;
  text-decoration: underline;
}

/* Keep notification sentence on one line on tablet/desktop. */
@media screen and (min-width: 768px) {
  .bd-page-confirm-body {
    white-space: nowrap;
    font-weight: 300;
  }
}

/* Match the grid's slightly smaller description size on wide desktop. */
@media screen and (min-width: 1200px) {
  .bd-page-confirm-body {
    font-size: 0.7rem;     /* 11.2px */
  }
}