.shopify-section--faq {

  margin: 64px 0; 

  @media (min-width: 834px) {
    margin: 100px 0; 
  }

  & > .section {
    margin: 0;
  }

  & .container.has_side_tooltips {

    & .faq_wrap {
      @media (min-width: 834px) {
        display: flex;
        flex-wrap: wrap;
      }
    }

    & .text-container {
      width: 100%;
      margin: 0 0 32px;
      text-align: left;

      & .heading {
        margin: 0;
        font: var(--h1);
      }
      & p {
        margin: 16px 0 0;
        font: var(--p-body);
        font-variation-settings: "slnt" 0;
      }
      & a {
        text-decoration: none;
        color: var(--section-link-color);
      }
    }

    & .faq {
      margin: 0; 

      @media (min-width: 834px) {
        flex: 0 0 65%;
        padding-right: 32px;
      }
    }
    & .faq__wrapper {
      width: 100%;
      max-width: 100%;
      margin: 0 0 32px;

      @media (min-width: 834px) {
        margin: 0 0 64px;
      }

      & + a.btn {
        margin: 0 0 64px;

        @media (min-width: 834px) {
          margin: 0;
        }
      }
    }

    & .faq__item {
      padding: 0; 
      border: none;
      margin: 0 0 4px;

      &:first-child {
        border-radius: 8px 8px 0 0;
      }
      &:last-child {
        border-radius: 0 0 8px 8px;
      }

      & .faq-question {
        flex: 1;
      }

      & .animated-plus {
        width: 20px;
        height: 20px;
        margin-left: 20px;

        &:before{
          width: 20px;
        }

        &:after{
          height: 20px;
        }
      }

      & .collapsible-toggle {
        padding: 18px 24px;
      }

      & .collapsible__content {
        padding: 0 24px 24px;
        margin: 0 0 4px;
      }
    }
            
    & .side_tooltips {
      @media (min-width: 834px) {
        flex: 0 0 35%;
      }
    }

    & .side_tooltip {
      display: flex;
      align-items: flex-start;     
      margin-bottom: 0;
      padding: 24px;
      border-radius: 8px;
      background: #F3F4F2;
      

      &:first-child {
        margin-bottom: 20px;
      }

      & svg {
        flex: 0 0 45px;
      }

      & h3 {
        margin: 0;
        color: #727273;
      }
      & p {
        margin: 0;
      }
      & .p-subhead {
        margin: 4px 0;
        font-weight: 700;
      }

    }
  }
}