.sfpost-comments-preview { margin-top:12px }

.sfpost-comment { padding:8px 0; border-bottom:1px solid #f0f0f0 }

.sfpost-comment:last-child { border-bottom:0 }

.sfpost-comment__meta { font-size:12px; color:#666; margin-bottom:4px }

.sfpost-comments-actions { margin-top:8px }

.sfpost-comments-openall { padding:8px 12px; border:1px solid #ddd; border-radius:8px; background:#fff; cursor:pointer }

.sfpost-comments-openall:hover { background:#f7f7f7 }





.sfpost-share__btn,

.sfpost-share__copy {

  padding:8px 12px; border-radius:8px; border:1px solid #ddd; background:#fff; cursor:pointer;

}

.sfpost-share__btn:hover, .sfpost-share__copy:hover { background:#f7f7f7; }

.sfpost-share__link { text-decoration:none; border-bottom:1px dashed rgba(0,0,0,.25); }

.sfpost-share__link:hover { border-bottom-color: transparent; }







.sfpost-links {

  background: #fff;

  width: calc(100% - 10px);

  height: 50px;

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: space-between;

  padding: 5px 5px 40px;

  z-index: 99999;

  border-top: 0.5px solid #dddddd;



    .sfpost-tool--open .sfpost-tool__icon {

      background-image: url(https://starkframe.store/wp-content/plugins/sf-posts/assets/images/open1.svg);

    }



    .sfpost-tool--share .sfpost-tool__icon {

      background-image: url(https://starkframe.store/wp-content/plugins/sf-posts/assets/images/share1.svg);

    }



    .sfpost-tool--save .sfpost-tool__icon {

      background-image: url(https://starkframe.store/wp-content/plugins/sf-posts/assets/images/save1.svg);

    }



    .sfpost-tool--comments .sfpost-tool__icon {

      background-image: url(https://starkframe.store/wp-content/plugins/sf-posts/assets/images/comm1.svg);

    }



    .sfpost-tool--instagram .sfpost-tool__icon {

      background-image: url(https://starkframe.store/wp-content/plugins/sf-posts/assets/images/insta3.svg);

    }



  > * {

    width: 100%;

    position: relative;

    box-sizing: border-box;

    display: inline-flex;

    height: 35px;

    justify-content: center;

    cursor: pointer;



    .sfpost-tool__icon {

      background-position: center;

      background-repeat: no-repeat;

      background-size: 35px;

      box-sizing: border-box;

      height: 35px;

      width: 35px;

      position: relative;

    }



    .sfpost-tool__label {

      position: absolute;

      inset-inline: 0px;

      bottom: -14px;

      display: block;

      text-align: center;

      white-space: nowrap;

      font-weight: 500;

      font-size: 12px;

      line-height: 1;

      padding: 1px 0;

      color: #3f3c5ab3;

    }

  }

}



@media (max-width: 450px) {

  #sf-react-demo-root {

  width: 100vw !important;

  z-index: 999999 !important;

  }

}





#sf-react-demo-root.active {

    opacity: 1;

    transform: translateX(0%);

}



#sf-react-demo-root {

  clear: both;

  position: fixed;

  width: calc(100vw * 1 / 3);

  left: 0;

  top: 92px;

  bottom: 0;

  border-radius: 0 !important;

  background: #fff !important;

  transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.25s cubic-bezier(0.77, 0.2, 0.05, 1), top 0.3s;

  right: auto;

  opacity: 0;

  transform: translateX(-100%);

  display: flex;

  flex-direction: column;

  flex-wrap: nowrap;

  justify-content: flex-start;

  z-index: 999;

  box-shadow: 0px 4px 5px 1px #e1e1e1;



  .sfpost-single {

    position: relative;

        margin: 0px auto;

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: min-content 1fr min-content;

        height: 100%;

        z-index: 9;

        box-shadow: 0px 2px 5px 1px #e1e1e1;



    .sfpost-single-header {

      display: grid;

      grid-template-columns: 1fr min-content;

      grid-auto-rows: min-content;

      grid-template-areas:

        'title close'

        'date date';

      row-gap: 0.5em;

      column-gap: 1em;

      border-bottom: 1.5px solid #8a8a8a52;

      margin-bottom: 0em !important;

      padding: 1em 0 0.5em 0;

      margin: 0 1em;



      .sf-react-close {

        grid-area: close;

        margin-right: 0;

        background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/rev_blue_cross.svg);

        background-size: contain !important;

        width: 18px;

        height: 18px;

        position: relative;

        top: 4px;

        cursor: pointer;

      }



      h2 {

        grid-area: title;

        line-height: 1.4;

        font-size: 20px;

        margin: 0 !important;

      }



      time {

        grid-area: date;

        margin: 0 !important;

        color: rgb(119, 119, 119);

        font-size: 13px;

        display: block;

      }

    }



    .sfpost-single-body {

      overflow-y: scroll;

      scrollbar-width: thin;

      scrollbar-color: #eeedf9 transparent;

      scrollbar-gutter: stable;

      padding: 1em 0.5em 1em 1em;



      .sfpost-content p {

        font-family: 'Poppins';

        font-size: 13px;

      }



      .sf-comments-tree {

        height: min-content !important;

        display: grid !important;

        grid-template-areas:

            "header"

            "data" !important;

        grid-template-columns: 1fr !important;

        grid-template-rows: min-content 1fr min-content !important;



        h3 {

          margin: 0;

          font-size: 16px;

          color: rgb(63, 60, 90);

          clear: none;

          font-weight: 600;

          padding: 0;

          border-bottom: 1.5px solid #dad9e1;

        }



        .sf-comment-level-0 {

          list-style-type: none;

          margin: 0;

          padding: 0.75em 0;

          display: grid;

          gap: 1em;



          > li {

            display: grid;

            gap: 0.75em;



            .sf-comment-body {

              display: flex;

              flex-direction: column;

              flex-wrap: nowrap;

              align-items: flex-start;

              box-shadow: 0px 0px 5px 1px #dedede91;

              row-gap: 0.5em;

              padding: 1em;

              border-radius: 10px;



              .sf-comment-header {

                display: flex;

                flex-direction: row;

                flex-wrap: nowrap;

                align-items: center !important;

                gap: 0.5em !important;



                .sf-comment-avatar {



                  img {

                    border-radius: 50%;

                    width: 50px;

                    height: 50px;

                    }

                }



                .sf-comment-date {

                  border: 0px;

                  margin: 0 !important;

                  padding: 0 !important;

                  max-width: 30px;

                  white-space: nowrap;

                  text-overflow: ellipsis;

                  overflow: hidden;

                }

              }



              .sf-comment-content {

                background: #f0eff5;

                border-radius: 10px;



                p {

                  margin: 0;

                  padding: 1em;

                }

              }

            }



            .sf-comment-level-1::before {

              content: '';

              width: 4px;

              height: 100%;

              background-color: #ebeaf2;

              border-radius: 2px;

              position: absolute;

              left: 2em;

            }



            .sf-comment-level-1 {

              position: relative;

              list-style-type: none;

              gap: 1em;

              display: grid;



              ul {

                list-style-type: none;

                display: grid;

                margin-top: 1em;

                padding: 0;

              }

            }

          }

        }



        #comment-form-1 {

          display: grid;

          grid-template-columns: 1fr 0.1fr;

          grid-template-rows: 1fr;

          gap: 0.5em;

          margin: 0 !important;

          padding: 1em 0 0;

          border-top: 1.5px solid #dfdfdf;



          textarea {

            width: 100% !important;

            height: 36px;

            border: 0px solid #dfdfdf;

            border-radius: 10px;

            resize: none;

            background: rgb(216 215 232 / 57%);

            padding: 8px 15px;

            line-height: 1.5;

            margin: 0 !important;

          }



          .sf-comment-submit {

            position: relative;

            height: 36px;

            width: 36px;

            background: #3f3c5a;

            border-radius: 8px;

            margin: 0;



            button {

              background: transparent;

              background-image: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/send-g.svg);

              background-position: center;

              background-repeat: no-repeat;

              background-size: 28px;

              box-sizing: border-box;

              height: 30px;

              width: 30px;

              position: absolute;

              top: 3px;

              left: 3px;

              outline: none;

              border: 0;

            }

          }

        }

      }



      .sfpost-gallery:hover .swiper-button-next, .sfpost-gallery:hover .swiper-button-prev {

        opacity: 1 !important;

        transition: all 0.3s ease-in-out;

      }



      .sfpost-gallery:hover .swiper-button-next.swiper-button-disabled, .sfpost-gallery:hover .swiper-button-prev.swiper-button-disabled {

        opacity: 0 !important;

      }



      .sfpost-gallery {

        padding-bottom: 1.5em;

        height: min-content;



        a {

          position: relative;

          display: flex;

          justify-content: center;

          align-items: center;

          background-size: cover;

          height: auto;

          background-position: center center;

          overflow: hidden;

          background-color: #f0eff5;

          border-radius: 15px;

          aspect-ratio: 4 / 4;



          img {

            height: auto;

            aspect-ratio: 4 / 4;

            max-height: unset;

            max-width: 100%;

            padding: 0px;

            display: block;

            position: relative;

            width: auto;

            object-fit: contain;

            z-index: 9;

            margin: 0px !important;

          }

        }



        .swiper-pagination {

          bottom: 0px !important;

        }



        .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev, .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {

          transform: scale(.0);

        }



        .swiper-pagination .swiper-pagination-bullet-active {

          background: #ffb471 !important;

        }



        .swiper-button-next:hover, .swiper-button-prev:hover {

          background: #ffb471 !important;

        }



        .swiper-button-next {

          transform: rotate(90deg);

          opacity: 0;

        }



        .swiper-button-prev {

          transform: rotate(-90deg);

          opacity: 0;

        }



        .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {

          opacity: 0 !important;

        }



        .swiper-button-prev, .swiper-button-next {

          transition: all 0.3s ease-in-out;

        }



        .swiper-button-next, .swiper-button-prev {

          color: unset !important;

          width: 38px  !important;

          height: 38px !important;

          padding: 0;

          background: #ffffff;

          border-radius: 25px;

        }



        .swiper-button-next:after, .swiper-button-prev:after {

          content: '' !important;

          background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/arr_o5.svg);

          background-size: cover;

          width: 38px;

          height: 38px;

          position: absolute;

          top: 0px;

          left: 0px;

        }



        .swiper-button-next:hover::after, .swiper-button-prev:hover::after {

          content: '' !important;

          background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/arr-w.svg);

          background-size: cover;

          width: 38px;

          height: 38px;

          position: absolute;

          top: 0px;

          left: 0px;

        }



        .swiper-container {

          user-select: none;

        }

      }

    }



    .sf-share-inline {

      display: flex;

      flex-direction: column;

      flex-wrap: nowrap;

      gap: 0.5em;

      padding: 1em;

      border-top: 1px solid #dedede;



      .sf-share-inline__head {

        display: flex;

        flex-direction: row;

        flex-wrap: nowrap;

        justify-content: space-between;

      }



      .sf-share-inline__list {

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        gap: 0.75em;



        .sf-share-inline__item {

          background-position: center;

          background-repeat: no-repeat;

          background-size: 35px;

          box-sizing: border-box;

          height: 35px;

          width: 35px;

        }



        .sf-share-inline__item--whatsapp {

          background-image: url(https://starkframe.store/wp-content/plugins/sf-posts/assets/images/wu.svg);

        }



        .sf-share-inline__item--facebook {

          background-image: url(https://starkframe.store/wp-content/plugins/sf-posts/assets/images/fb.svg);

        }



        .sf-share-inline__item--instagram {

          background-image: url(https://starkframe.store/wp-content/plugins/sf-posts/assets/images/icinst.svg);

        }



        .sf-share-inline__item--email {

          background-image: url(https://starkframe.store/wp-content/plugins/sf-posts/assets/images/email1.svg);

        }



        .sf-share-inline__item--copy {

          background-image: url(https://starkframe.store/wp-content/plugins/sf-posts/assets/images/copy1.svg);

        }

      }

    }

  }



#sf-modal-root.is-open {

    opacity: 1 !important;

    transform: translateX(0%) !important;

}



  #sf-modal-root {

    position: absolute;

    top: 0px;

    bottom: 0px !important;

    left: 100% !important;

    right: 0px;

    width: calc(33.3333vw);

    background: rgb(255 255 255 / 70%) !important;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.25s cubic-bezier(0.77, 0.2, 0.05, 1), top 0.3s;

    opacity: 0;

    transform: translateX(-200%);

    backdrop-filter: blur(20px);



    .sf-modal-inner {

      display: flex;

      flex-direction: column;

      flex-wrap: nowrap;

      height: 100%;



      .sf-modal-header {

        margin: 0 1em;

        position: relative;

        z-index: 9999;

        display: flex;

        flex-direction: row;

        flex-wrap: nowrap;

        align-items: center;

        justify-content: center;

        color: #fff;

        border-bottom: 1.5px solid #c1c1c152;

        font-size: 14px;

        font-weight: 600;

        text-align: center;

        height: 40px;

        font-family: 'Poppins';



        h3 {

          margin: 0;

          color: #25242e;

          clear: none;

          font-size: 20px;

          line-height: 1.4;

          font-weight: 600;

          font-family: 'Poppins';

          padding: 0;

        }



        .sf-modal-close::before {

          position: absolute;

          width: 18px;

          top: 11px;

          left: 11px;

          height: 18px;

          content: '';

          background-size: cover;

          background-image: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/rev_blue_cross.svg);

        }



        .sf-modal-close {

          position: absolute;

          width: 36px;

          top: 0px;

          right: 0px;

          height: 40px;

          z-index: 999;

          color: #fff;

          display: block;

          font-size: 15px;

          text-align: center;

          line-height: 16px;

          border-radius: 50%;

          padding: 0;

        }

      }



      .sf-comments-tree {

        height: 100%;

        position: relative;

        display: grid !important;

        grid-template-areas:

        "header"

        "data" !important;

        grid-template-columns: 1fr !important;

        grid-template-rows: min-content 1fr min-content !important;



        .sf-comment-level-0 {

          list-style-type: none;

          margin: 0;

          padding: 1em 0.5em 1em 1em;

          display: grid;

          gap: 1em;

          overflow-y: scroll;

          height: 100%;

          position: absolute;

          scrollbar-width: thin;

          scrollbar-color: #f0eff5 transparent;

          scrollbar-gutter: stable;



          > li {

            display: grid;

            gap: 0.75em;



            .sf-comment-body {

              display: flex;

              flex-direction: column;

              flex-wrap: nowrap;

              align-items: flex-start;

              box-shadow: 0px 0px 5px 1px #dedede91;

              row-gap: 0.5em;

              padding: 1em;

              border-radius: 10px;

              background: #fff;



              .sf-comment-header {

                display: flex;

                flex-direction: row;

                flex-wrap: nowrap;

                align-items: center !important;

                gap: 0.5em !important;



                .sf-comment-avatar {



                  img {

                    border-radius: 50%;

                    width: 50px;

                    height: 50px;

                    }

                }



                .sf-comment-date {

                  border: 0px;

                  margin: 0 !important;

                  padding: 0 !important;

                  max-width: 30px;

                  white-space: nowrap;

                  text-overflow: ellipsis;

                  overflow: hidden;

                }

              }



              .sf-comment-content {

                background: #f0eff5;

                border-radius: 10px;



                p {

                  margin: 0;

                  padding: 1em;

                }

              }

            }



            .sf-comment-level-1::before {

              content: '';

              width: 4px;

              height: 100%;

              background-color: #ebeaf2;

              border-radius: 2px;

              position: absolute;

              left: 2em;

            }



            .sf-comment-level-1 {

              position: relative;

              list-style-type: none;

              gap: 1em;

              display: grid;



              ul {

                list-style-type: none;

                display: grid;

                margin-top: 1em;

                padding: 0;

              }

            }

          }

        }



        #comment-form-1 {

          display: grid;

          grid-template-columns: 1fr 0.1fr;

          grid-template-rows: 1fr;

          gap: 0.5em;

          margin: 0 !important;

          padding: 1em 0 0;

          border-top: 1.5px solid #dfdfdf;



          textarea {

            width: 100% !important;

            height: 36px;

            border: 0px solid #dfdfdf;

            border-radius: 10px;

            resize: none;

            background: rgb(216 215 232 / 57%);

            padding: 8px 15px;

            line-height: 1.5;

            margin: 0 !important;

          }



          .sf-comment-submit {

            position: relative;

            height: 36px;

            width: 36px;

            background: #3f3c5a;

            border-radius: 8px;

            margin: 0;



            button {

              background: transparent;

              background-image: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/send-g.svg);

              background-position: center;

              background-repeat: no-repeat;

              background-size: 28px;

              box-sizing: border-box;

              height: 30px;

              width: 30px;

              position: absolute;

              top: 3px;

              left: 3px;

              outline: none;

              border: 0;

            }

          }

        }

      }

    }

  }

}









.post-opened {

  width: calc(100vw - 4em - calc(100vw * 1 / 3)) !important;

  justify-self: end  !important;



  .sf-posts-grid {

    grid-template-columns: repeat(auto-fill, minmax(calc((100% - 4.5em) / 4), min-content)) !important;

  }

}



#sf-posts {

  transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1), width 0.25s cubic-bezier(0.77, 0.2, 0.05, 1), top 0.3s, grid-template-columns 0.25s cubic-bezier(0.77, 0.2, 0.05, 1);  

}



.sf-posts-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(calc((100% - 7.5em) / 6), min-content));

    column-gap: 1.5em;

    row-gap: 0.75em;

    margin: 0;

    grid-template-rows: repeat(1, auto);

    grid-auto-flow: row dense;

    padding: 0;

    list-style-type: none;



    .sf-post-card {

        border: 1px solid #eee;

        border-radius: 8px;

        overflow: hidden;



a {

    position: relative;

    display: block !important;

    aspect-ratio: 3 / 4;



        img {

            width: 100%;

            height: auto;

            display: block;

            aspect-ratio: 3 / 4;

            object-fit: cover;

            position: absolute;

        }



> div {

    position: absolute;

    bottom: 0;

    right: 0;

    left: 0;

    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 33%) 20%, rgb(0 0 0 / 66%) 75%);

}



h3 {

            color: #fff;

            margin: 0 !important;

            text-overflow: ellipsis;

            overflow: hidden;

            line-height: 1.25;

            display: -webkit-box;

            -webkit-box-orient: vertical;

            -webkit-line-clamp: 2;

            font-family: 'Poppins';

            font-weight: 600;

            font-size: 14px;

        }



        time {

           font-size: 11px !important;

            color: #c8c8c8 !important;

        }



        p {

            display:none;

        }

}















    }

}



@media (min-width: 1201px) {

  .sf-posts-grid {

    grid-template-columns: repeat(auto-fill, minmax(calc((100% - 7.5em) / 6), min-content));

    column-gap: 1.5em;

    row-gap: 0.75em;

  }

/*

  .sf-products-grid.grid-large {

    grid-template-columns: repeat(auto-fill, minmax(calc((100% - 4.5em) / 4), min-content));

    column-gap: 1.5em;

    row-gap: 0.75em;

  }

*/

}



@media (min-width: 901px) and (max-width: 1200px) {

  .sf-posts-grid {

    grid-template-columns: repeat(auto-fill, minmax(calc((100% - 6em) / 5), min-content));

    column-gap: 1.5em;

    row-gap: 0.75em;

  }

/*

  .sf-products-grid.grid-large {

    grid-template-columns: repeat(auto-fill, minmax(calc((100% - 3em) / 3), min-content));

    column-gap: 1.5em;

    row-gap: 0.75em;

  }

*/

}



@media (min-width: 601px) and (max-width: 900px) {

  .sf-posts-grid {

    grid-template-columns: repeat(auto-fill, minmax(calc((100% - 4.5em) / 4), min-content));

    column-gap: 1.5em;

    row-gap: 0.75em;

  }



/*

  .sf-products-grid.grid-large {

    grid-template-columns: repeat(auto-fill, minmax(calc((100% - 1.5em) / 2), min-content));

    column-gap: 1.5em;

    row-gap: 0.75em;

  }

*/



}



/*

@media (max-width: 600px) {

  .sf-products-grid.grid-large {

    grid-template-columns: repeat(auto-fill, minmax(100%, min-content));

  }

}

*/



@media (min-width: 451px) and (max-width: 600px) {

  .sf-posts-grid {

    grid-template-columns: repeat(auto-fill, minmax(calc((100% - 3em) / 3), min-content));

    column-gap: 1.5em;

    row-gap: 0.75em;

  }



/*

  .sf-products-grid.grid-large {

    column-gap: 1.5em;

    row-gap: 0.75em;

  }

*/



}



/*

@media (max-width: 450px) {

  .sf-products-grid.grid-large {

    column-gap: 0.75em;

    row-gap: 0.45em;

  }

}

*/



@media (min-width: 361px) and (max-width: 460px) {



  .sf-posts-grid {

    grid-template-columns: repeat(auto-fill, minmax(calc((100% - 0.75em) / 2), min-content));

    column-gap: 0.75em;

    row-gap: 0.45em;

  }

}



@media (max-width: 360px) {



  .sf-posts-grid {

    grid-template-columns: repeat(auto-fill, minmax(100%, min-content));

    column-gap: 0.75em;

    row-gap: 0.45em;

  }

}