/** Shopify CDN: Minification failed

Line 74:5 Cannot use type selector "--center" directly after nesting selector "&"

**/
.hero-rewards {
  isolation: isolate;
  min-height: calc(100vh - 6.625rem);
  overflow: hidden;
  padding-block: var(--hero-rewards-padding-block-start) var(--hero-rewards-padding-block-end);
  position: relative;

  @media (min-width: 750px) {
    min-height: calc(100vh - 7rem);
  }

  .hero-rewards__picture,
  .hero-rewards__overlay {
    inset: 0;
    position: absolute;
  }

  .hero-rewards__picture {
    z-index: -2;
  }

  .hero-rewards__image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .hero-rewards__overlay {
    /* Gradient overlay inspired by .hero_scn */
    background: var(--hero-rewards-overlay-color);
    opacity: var(--hero-rewards-overlay-opacity, 1);
    z-index: -1;

    @media (min-width: 750px) {
      background: var(--hero-rewards-overlay-color);
    }
  }

  .container {
    align-items: center;
    display: flex;
    min-height: inherit;

    @media (max-width: 749px) {
      justify-content: flex-start;
    }
  }

  .hero-rewards__content {
    color: #FFFFFF;
    max-width: 600px;
    padding-block: var(--spacing-8);
    padding-left: 5%;
    padding-right: 1rem;
    padding-top: 5%;
    text-align: left;
    z-index: 3;

    @media (min-width: 750px) {
      margin-left: 8%;
      margin-bottom: 10%;
    }

    @media (max-width: 749px) {
      padding-block: var(--spacing-7);
    }

    &--center {
      margin-inline: auto;
      text-align: center;

      :where(p:not(:first-child)) {
        margin-inline: auto;
      }
    }

    :where(p) {
      margin-block: 0;
    }

    :where(p:first-child) {
      font-size: var(--font-size--2xs);
      font-weight: 700;
      letter-spacing: 0.12em;
      line-height: 1.4;
      text-transform: uppercase;
    }

    :where(h1, h2) {
      font-family: var(--font-body--family);
      font-size: clamp(1.675rem, 5vw, 4rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      line-height: 1;
      margin: 0 0 1rem 0;
      text-transform: uppercase;

      span {
        display: block;
      }
    }

    :where(p:not(:first-child)) {
      margin-block: var(--spacing-5) 0;
      max-width: 34rem;
    }

    :where(p:nth-of-type(2)) {
      font-size: var(--font-size--lg);
      font-weight: 600;
    }

    :where(p:nth-of-type(3)) {
      font-size: var(--font-size--sm);
    }

    /* Primary and Secondary Button Styles */
    :where(.button, a) {
      align-items: center;
      display: inline-flex;
      font-size: 0.8125rem;
      font-weight: 600;
      justify-content: center;
      letter-spacing: 0.08em;
      min-height: 3rem;
      padding: 0.875rem 1.75rem;
      text-decoration: none;
      border-radius: 0;
      text-transform: uppercase;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
      white-space: nowrap;

      @media (min-width: 768px) {
        font-size: 0.875rem;
        min-height: 3.25rem;
        padding: 1rem 2rem;
      }

      @media (max-width: 749px) {
        width: 100%;
      }

      &:hover,
      &:focus-visible {
        transform: translateY(-2px);
      }
    }

    :where(.button) {
      background-color: var(--color-white, #FFFFFF);
      border: 2px solid var(--color-white, #FFFFFF);
      color: var(--color-primary);

      &:hover {
        background-color: rgba(255, 255, 255, 0.9);
        border-color: rgba(255, 255, 255, 0.9);
      }
    }

    :where(.button-secondary) {
      background-color: transparent;
      border: 2px solid rgba(255, 255, 255, 0.8);
      color: #FFFFFF;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: #FFFFFF;
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rewards__content :where(.button, .button-secondary, a) {
    transition: none;

    &:hover,
    &:focus-visible {
      transform: none;
    }
  }
}