.supplement-facts-block--dialog {
  border: unset;
  padding: 24px;
  width: 100%;

  @media (min-width: 1024px) {
    width: 900px;
  }

  & .supplement-facts-block--dialog-container {
    position: relative;
    margin-top: 40px;
  }

  & .supplement-facts-block--dialog-navigation {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    background: #f9fafb;
    margin-bottom: 24px;

    & button {
      display: block;
      height: 40px;
      border-radius: 100px;
      appearance: unset;
      background: transparent;
      border: 3px solid transparent;
      flex: 1 0 auto;
      cursor: pointer;

      &[data-fact-active="false"] {
        box-shadow: 0px 0px 0px 1px rgba(152, 162, 179, 0.75);
        -webkit-box-shadow: 0px 0px 0px 1px rgba(152, 162, 179, 0.75);
        -moz-box-shadow: 0px 0px 0px 1px rgba(152, 162, 179, 0.75);
      }

      &[data-fact-active="true"] {
        border: 3px solid #fe622d;
      }

      & span {
        font-size: 14px;
        font-weight: bold;
        color: #003866;
      }
    }
  }

  & .supplement-facts-block--product {
    display: none;

    &[data-fact-active="true"] {
      display: block;
    }

    & img {
      display: block;
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      height: auto;
      padding-bottom: 12px;
    }

    & p {
      color: #003866 !important;
      margin: 0px;
      font-size: 12px;
    }

    & .supplement-facts-block--other-ingredients {
      padding-bottom: 12px;
      border-bottom: 1px solid #003866;
    }

    & .supplement-facts-block--directions {
      padding-top: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid #003866;
    }

    & .supplement-facts-block--footnote {
      padding-top: 12px;
      padding-bottom: 12px;

      & p {
        font-size: 9px;
      }
    }

    & .supplement-facts-block--variant-details {
      &:first-of-type {
        border-bottom: 2px solid #e4e7ec;
      }

      & summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;

        & span {
          font-size: 14px;
          font-weight: bold;
          color: #003866;
        }

        & .icon-minus {
          margin-top: -20px;
        }
      }
    }
  }
}

.supplement-facts-block--variant-details:open summary .icon-plus {
  display: none;
}

.supplement-facts-block--variant-details summary .icon-minus {
  display: none;
}

.supplement-facts-block--variant-details:open summary .icon-minus {
  display: block;
}

.supplement-facts-block--cta {
  appearance: unset !important;
  background: transparent;
  border: unset;
  cursor: pointer;

  & span {
    color: #fe622d !important;
    font-weight: bold;
    font-size: 14px;
    text-decoration: underline;
  }
}

.supplement-facts-block--close-dialog {
  position: absolute;
  top: 15px;
  right: 24px;
  appearance: unset;
  border: unset;
  background: transparent;

  & img.supplement-facts-block--close-dialog-img {
    display: block;
    width: 30px !important;
    height: 30px !important;
  }
}