.comment {
  border: 1px solid #e3e3e3;
  padding: 30px; }
  .comment .comment {
    padding-right: 0; }
  .comment__header {
    margin-bottom: 25px; }
  .comment__header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 5px; }
  .comment__title {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    color: #000; }
  .comment__date {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px; }
    .comment__date svg {
      width: 14px;
      height: 15px; }
    .comment__date span {
      color: #000;
      font-size: 15px;
      font-style: normal;
      font-weight: 300;
      line-height: 23px; }
  .comment__time {
    margin-left: 10px;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: 23px;
    color: #acacac; }
  .comment__rating {
    align-items: center;
    display: flex;
    gap: 12px; }
  .comment__stars {
    display: flex;
    gap: 2px;
    fill: #e3e3e3; }
    .comment__stars .filled {
      fill: #8a6048; }
  .comment__info {
    font-size: 0.8125rem;
    line-height: calc(1em + 7px);
    color: #25a70f; }
  .comment__main {
    display: flex;
    flex-direction: column;
    gap: 12px; }
    .comment__main-product {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 8px; }
      .comment__main-product .lazy-img-wrap {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        border: 1px solid #E3E3E3;
        padding: 2px; }
        .comment__main-product .lazy-img-wrap img {
          width: 100%;
          height: 100%;
          object-fit: contain; }
      .comment__main-product a {
        font-weight: 600;
        font-size: .945em;
        color: #8a6048; }
        @media (min-width: 991.75px) {
          .comment__main-product a:hover {
            text-decoration: underline; } }
  .comment__main-item {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    display: flex;
    gap: 15px; }
    .comment__main-item__title {
      color: #000;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 24px;
      width: 115px;
      flex-shrink: 0; }
    .comment__main-item__text {
      color: #444444;
      font-size: 16px;
      font-style: normal;
      font-weight: 300;
      line-height: 24px; }
  .comment__main-photos-title {
    font-size: 0.875rem;
    color: #222;
    color: var(--white_text_black);
    font-weight: 500;
    margin-bottom: 6px; }
  .comment__main-photos-list {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 12px; }
  .comment__photo {
    padding-bottom: 100%;
    position: relative; }
    .comment__photo img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px; }
  .comment__main-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px; }
  .comment__main-meta-rating {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-right: 14px; }
    .comment__main-meta-rating a {
      display: flex;
      align-items: center;
      margin-right: 5px;
      color: #222;
      color: var(--white_text_black);
      opacity: 0.35; }
      .comment__main-meta-rating a:hover {
        opacity: 1;
        color: #000;
        color: var(--fill_dark_lite_hover); }
        .comment__main-meta-rating a:hover svg {
          stroke: var(--theme-base-color); }
    .comment__main-meta-rating svg {
      margin-right: 3px;
      fill: rgba(0, 0, 0, 0);
      stroke: var(--fill_dark_light); }
  .comment__main-meta-link {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: none;
    font-size: 0.875rem;
    line-height: calc(1em + 7px);
    color: #222;
    color: var(--white_text_black); }
    .comment__main-meta-link:hover {
      cursor: pointer;
      color: #000;
      color: var(--fill_dark_lite_hover);
      text-decoration: none; }
  .comment__main-form {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s; }
    .comment__main-form.opened {
      max-height: 1000px; }
  .comment .comment-text__text {
    color: #7a7a7a; }
  .comment__main-answers {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px; }
    @media (max-width: 766.75px) {
      .comment__main-answers {
        margin-top: 0;
        gap: 16px; } }
    .comment__main-answers-btn {
      font-size: 14px;
      color: #9B9EA7;
      transition: all ease .3s; }
      @media (hover: hover) {
        .comment__main-answers-btn:hover {
          cursor: pointer;
          opacity: .75; } }
    .comment__main-answers-toggler {
      font-size: 14px;
      color: #946143;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
      fill: #946143;
      transition: all ease .3s; }
      @media (hover: hover) {
        .comment__main-answers-toggler:hover {
          cursor: pointer;
          opacity: .75; } }
      .comment__main-answers-toggler.active .icon {
        transform: rotate(180deg); }
    .comment__main-answers-list .comment {
      padding-top: 0;
      padding-bottom: 0;
      border: none; }
    .comment__main-answers-list > .comment:not(:last-child) {
      margin-bottom: 20px; }
  .comment--recipe .comment__date span {
    font-size: 14px;
    color: #9B9EA7; }
  .comment--recipe .comment__main-item {
    flex-direction: column;
    gap: 0; }
  .comment--recipe .comment__main-item__title {
    width: auto; }
  .comment--recipe .comment__main-item__text {
    color: #000000; }

@media (max-width: 599.75px) {
  .comment {
    padding: 20px; }
    .comment__date {
      display: none; }
    .comment__time {
      display: none; }
    .comment__main-item {
      gap: 5px;
      flex-direction: column; } }