/** Shopify CDN: Minification failed

Line 148:26 Expected ":"

**/
.recipe-card {
  .product-card__figure {
    padding-top: 100%;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden;

    a {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      width: auto;
      height: auto;
    }
  }

  .recipe-card__category {
    text-transform: uppercase;
    font-size: 0.875rem;
  }

  .recipe-card__time {
    text-transform: uppercase;
    font-size: 0.875rem;
  }
}

.recipe {

  h1 {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 1rem
  }

  h2 {
    font-size: 1.875rem;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 2rem;
  }

  h3 {
    font-size: 1.375rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }

  h6 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  p {
    margin-bottom: 1rem;
  }

  a {
    color: #005AEB;
    text-decoration: underline;
  }

  @media screen and (min-width: 700px) {
    h1 {
      font-size: 3rem;
    }
    h2 {
      font-size: 2.5rem;
    }  
  }
  
  .recipe-content {
    /* display: flex;  */
    align-items: flex-start;
    margin-bottom: 4rem;

    @media screen and (min-width: 700px) {
      display: flex;
    }

    .recipe-media {
      flex: 2;

      & > * {
        border-radius: 6px;
        overflow: hidden;
      }

      .recipe-video {
        position: relative;
        display: inline-block;
        cursor: pointer;

        .play-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          pointer-events: none;

          svg {
            width: 60px;
            height: 60px;
          }
        }
      }
    }

    .recipe-details {
      flex: 3;
      margin-top: 2rem;
      @media screen and (min-width: 700px) {
        margin-left: 3rem;
        margin-top: 0;
      }

      .recipe-description {
        line-height: 1.875;
        margin-bottom: 1rem;
      }

      .recipe-meta {
        .recipe-meta-row {
          display: flex;
          flex-direction: column;
          border-bottom: 1px #E0E0E0 solid;
          &:first-child {
            border-top: 1px #E0E0E0 solid;
          }
          div {
            display: flex;
            padding: 1rem 0 1rem 1rem;
            align-items: center;
            &:first-child {
              border-bottom: 1px #E0E0E0 solid;
            }
          }

          @media screen and (min-width: 700px) {
            flex-direction: row;
            div {
              padding-left 2rem;
              align-items: center;
              &:first-child {
                flex: 2;
                border-bottom: none;
                border-right: 1px #E0E0E0 solid;
              }
              &:last-child {
                flex: 3;
              }
            }
          }
          
        }
        .recipe-meta-value {
          font-weight: bold;
          margin-left: 0.5rem;
        }
        .recipe-meta-chip {
          color: rgb(var(--background));
          background-color: #E0E0E0;
          margin-left: 0.5rem;
          padding: 0.375rem 0.75rem;
          border-radius: 1.25rem;
          font-size: 0.8125rem;
        }
        .recipe-meta-yield {
          background-color: #94FFCA;
        }
        .recipe-meta-category {
          background-color: #D4E3FF;
        }
      }
    }
  }

  .recipe-ingredients {
    margin: 0rem 0rem 4rem 0rem;
    @media screen and (min-width: 700px) {
      margin: 0rem 8rem 4rem 8rem;
    }

    .recipe-rules {
      margin-bottom: 2rem;
    }

    .recipe-sections {
      
    }

    li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 10px;
    }

    li:before {
      content: '';
      position: absolute;
      left: 0;
      top: 1px;
      width: 20px;
      height: 20px;
      border: 1px solid #828282;
      border-radius: 3px;
      background-color: #fff;
    }
    p {
      padding-left: 30px;
      color: #828282;
    }
  }

  .recipe-instructions {
    margin: 0rem 0rem 4rem 0rem;
    @media screen and (min-width: 700px) {
      margin: 0rem 8rem 4rem 8rem;
    }
    .recipe-step {
      margin-bottom: 2.5rem;
      .recipe-step-thumbnail {
        width: 100%;
        height: auto;
        overflow: hidden;
        border-radius: 6px;
        margin-bottom: 1rem;
      }
      .recipe-step-instructions, .recipe-step-thumbnail {
        margin-bottom: 1rem;
      }
    }
  }

  .recipe-goals {
    margin: 0rem 0rem 4rem 0rem;
    @media screen and (min-width: 700px) {
      margin: 0rem 8rem 4rem 8rem;
    }
    .recipe-goal {
      margin-bottom: 2rem;
      .recipe-goal-thumbnail {
        width: 100%;
        height: auto;
        overflow: hidden;
        border-radius: 6px;
        margin-bottom: 1rem;
      }
      .recipe-goal-caption {
        font-weight: bold;
        margin-bottom: 1rem
      }
    }
  }

  .recipe-summary {
    margin: 0rem 0rem 4rem 0rem;
    @media screen and (min-width: 700px) {
      margin: 0rem 8rem 4rem 8rem;
    }
    h2, h3 {
      margin-top: 1rem;
      margin-bottom: 0;
    }
  }
}