{%- if section.settings.italic_font_family == 'georgia-pro'
  or section.settings.italic_font_family == 'bodoni-moda'
  or section.settings.italic_font_family == 'instrument-serif'
  or section.settings.italic_font_family == 'custom_google_font'
-%}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  {%- if section.settings.italic_font_family == 'georgia-pro' -%}
    <link
      href="https://fonts.googleapis.com/css2?family=Georgia+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {%- endif -%}
  {%- if section.settings.italic_font_family == 'bodoni-moda' -%}
    <link
      href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700&display=swap"
      rel="stylesheet"
    >
  {%- endif -%}
  {%- if section.settings.italic_font_family == 'instrument-serif' -%}
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  {%- endif -%}
  {%- if section.settings.italic_font_family == 'custom_google_font'
    and section.settings.custom_google_font_name != blank
  -%}
    <link
      href="https://fonts.googleapis.com/css2?family={{ section.settings.custom_google_font_name | replace: ' ', '+' }}:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {%- endif -%}
{%- endif -%}

{%- if section.settings.use_facebook_font -%}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet">
{%- endif -%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
  .section-{{ section.id }}-margin {
    margin-top: {{ section.settings.margin_top }}px;
    margin-bottom: {{ section.settings.margin_bottom }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    {% if section.settings.custom_image_background != blank %}
      {% # theme-check-disable %}
      --gradient-background: url('{{ section.settings.custom_image_background | img_url: 'master' }}') center center / cover no-repeat;
      {% # theme-check-enable %}
    {% endif %}
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
    --color-button: {{ section.settings.custom_colors_solid_button_background.red }}, {{ section.settings.custom_colors_solid_button_background.green }}, {{ section.settings.custom_colors_solid_button_background.blue }};
    --color-button-text: {{ section.settings.custom_colors_solid_button_text.red }}, {{ section.settings.custom_colors_solid_button_text.green }}, {{ section.settings.custom_colors_solid_button_text.blue }};
    --color-base-outline-button-labels: {{ section.settings.custom_colors_outline_button.red }}, {{ section.settings.custom_colors_outline_button.green }}, {{ section.settings.custom_colors_outline_button.blue }};
  }
  {% if section.settings.custom_mobile_image_background != blank %}
    @media screen and (max-width: 740px) {
      .color-scheme-{{ section.id }}.color-custom {
        {% # theme-check-disable %}
        --gradient-background: url('{{ section.settings.custom_mobile_image_background | img_url: 'master' }}') center center / cover no-repeat;
        {% # theme-check-enable %}
      }
    }
  {% endif %}

  #FbCommentThread-{{ section.id }} .fb-thread-heading em {
    {% if section.settings.italic_style == 'italic' %}
      text-decoration: none !important;
      font-style: italic !important;
    {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
      text-decoration: none !important;
      font-style: italic !important;
      {% if section.settings.italic_font_family == 'serif' %}
        font-family: serif !important;
      {% elsif section.settings.italic_font_family == 'georgia-pro' %}
        font-family: 'Georgia Pro', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
        font-family: 'Bodoni Moda', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
        font-family: 'Instrument Serif', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
        font-family: '{{ section.settings.custom_google_font_name }}', sans-serif !important;
      {% elsif section.settings.italic_font_family == 'cursive' %}
        font-family: cursive !important;
      {% endif %}
      {% if section.settings.italic_font_weight != 'inherit' %}
        font-weight: {{ section.settings.italic_font_weight }} !important;
      {% endif %}
    {% else %}
      font-style: normal !important;
      text-decoration: underline {{ section.settings.underlinetextcolor }} !important;
      text-decoration-thickness: {{ section.settings.underlinethickness }}px !important;
      text-underline-offset: 3px !important;
    {% endif %}
  }

  {% if section.settings.enable_gradient %}
    #FbCommentThread-{{ section.id }} .fb-thread-heading strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

  #FbCommentThread-{{ section.id }} .fb-thread-comments-wrap {
    display: flex;
    flex-direction: column;
    gap: {{ section.settings.comment_spacing }}px;
  }

  .fb-thread-comment-meta-item:hover,
  .fb-thread-reply-meta-item:hover {
    text-decoration: underline;
  }

  #FbCommentThread-{{ section.id }} .fb-thread-replies::before {
    content: '';
    position: absolute;
    left: -65px;
    top: -49px;
    width: 57px;
    height: 64px;
    border-left: 2px solid #dadde1;
    border-bottom: 2px solid #dadde1;
    border-bottom-left-radius: 12px;
    background: transparent;
  }

  .fb-thread-filter-left {
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .fb-thread-filter-left:hover { opacity: 0.8; }
  .fb-thread-filter-arrow { transition: transform 0.2s ease; }
  .fb-thread-filter-left:hover .fb-thread-filter-arrow { transform: translateY(1px); }

  .fb-thread-add-comment-input:hover { border-color: #dadde1 !important; }
  .fb-thread-add-comment-input:focus-within {
    border-color: #1877f2 !important;
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2) !important;
  }

  @media screen and (max-width: 749px) {
    #FbCommentThread-{{ section.id }} .fb-thread-add-comment { gap: 6px !important; }
    #FbCommentThread-{{ section.id }} .fb-thread-add-comment-avatar {
      width: 28px !important;
      height: 28px !important;
    }
    #FbCommentThread-{{ section.id }} .fb-thread-add-comment-input {
      min-height: 32px !important;
      padding: 6px 10px !important;
    }
  }
{%- endstyle -%}

<div
  id="FbCommentThread-{{ section.id }}"
  class="color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient content-for-grouping animate-section animate--hidden {{ section.settings.visibility }} section-{{ section.id }}-margin"
>
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}

  <div class="page-width section-{{ section.id }}-padding">
    {% unless section.settings.title == blank %}
      <div
        class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin animate-item animate-item--child index-0"
        style="text-align: {{ section.settings.heading_alignment }};"
      >
        <h2
          class="title {{ section.settings.heading_size }} title-with-highlight fb-thread-heading"
          style="--hightlight-color:{{ section.settings.title_highlight_color }};--gradient-text: {{ section.settings.title_gradient_background }};"
        >
          {{ section.settings.title }}
        </h2>
      </div>
    {% endunless %}

    <div class="animate-item animate-item--child index-1">
      <div
        class="fb-thread-top-divider"
        style="width:100%;height:1px;background-color:{{ section.settings.divider_color }};margin-bottom:{{ section.settings.filter_section_spacing }}px;"
      ></div>

      <div
        class="fb-thread-filter-section"
        style="display:flex;align-items:center;justify-content:space-between;margin-bottom:{{ section.settings.filter_section_spacing }}px;"
      >
        <div class="fb-thread-filter-left" style="display:flex;align-items:center;gap:8px;">
          <span
            class="fb-thread-filter-label"
            style="font-size:{{ section.settings.filter_label_size }}px;font-weight:{{ section.settings.filter_label_weight }};color:{{ section.settings.filter_label_color }};{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}"
          >
            {{- section.settings.filter_label_text | default: 'Most relevant' -}}
          </span>
          {% if section.settings.show_filter_dropdown %}
            <svg
              class="fb-thread-filter-arrow"
              width="12"
              height="12"
              viewBox="0 0 12 12"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              style="color:{{ section.settings.filter_arrow_color }};"
            >
              <path d="M6 8L2 4h8l-4 4z" fill="currentColor"/>
            </svg>
          {% endif %}
        </div>

        {% if section.settings.show_comment_count %}
          <div
            class="fb-thread-comment-count"
            style="font-size:{{ section.settings.comment_count_size }}px;font-weight:{{ section.settings.comment_count_weight }};color:{{ section.settings.comment_count_color }};{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}"
          >
            {%- liquid
              assign comment_count = 0
              for block in section.blocks
                if block.type == 'fb_thread_comment' or block.type == 'fb_thread_reply_comment'
                  assign comment_count = comment_count | plus: 1
                endif
              endfor
            -%}
            {{ comment_count }} comment{% if comment_count != 1 %}s{% endif %}
          </div>
        {% endif %}
      </div>

      {% if section.settings.show_add_comment %}
        <div
          class="fb-thread-add-comment"
          style="display:flex;align-items:flex-start;gap:8px;padding:{{ section.settings.add_comment_padding }}px 0;margin-bottom:{{ section.settings.add_comment_margin_bottom }}px;border-bottom:1px solid {{ section.settings.add_comment_border_color }};"
        >
          <div
            class="fb-thread-add-comment-avatar"
            style="width:{{ section.settings.add_comment_avatar_size }}px;height:{{ section.settings.add_comment_avatar_size }}px;border-radius:50%;background:{{ section.settings.add_comment_avatar_bg }};display:flex;align-items:center;justify-content:center;flex-shrink:0;"
          >
            <svg
              width="{{ section.settings.add_comment_avatar_size | times: 0.6 | floor }}"
              height="{{ section.settings.add_comment_avatar_size | times: 0.6 | floor }}"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="{{ section.settings.add_comment_icon_color }}"/>
            </svg>
          </div>
          <div style="flex:1;position:relative;">
            <div
              class="fb-thread-add-comment-input"
              style="background:{{ section.settings.add_comment_input_bg }};border-radius:{{ section.settings.add_comment_input_radius }}px;padding:{{ section.settings.add_comment_input_padding }}px {{ section.settings.add_comment_input_padding | plus: 4 }}px;min-height:{{ section.settings.add_comment_input_height }}px;display:flex;align-items:center;cursor:text;border:1px solid transparent;transition:border-color 0.2s ease;position:relative;"
            >
              <input
                type="text"
                class="fb-thread-add-comment-real-input"
                placeholder="{{ section.settings.add_comment_placeholder }}"
                style="background:transparent;border:none;outline:none;flex:1;color:{{ section.settings.add_comment_text_color }};font-size:{{ section.settings.add_comment_font_size }}px;{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}"
                maxlength="{{ section.settings.add_comment_max_length }}"
              >
              <svg
                class="fb-thread-send-button"
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                style="color:#65676b;cursor:pointer;opacity:0.6;transition:color 0.2s ease,opacity 0.2s ease;margin-left:8px;"
              >
                <path d="M15.854 7.646l-7-7a.5.5 0 0 0-.708.708L14.293 7.5H.5a.5.5 0 0 0 0 1h13.793l-6.147 6.146a.5.5 0 0 0 .708.708l7-7a.5.5 0 0 0 0-.708z" fill="currentColor"/>
              </svg>
            </div>
          </div>
        </div>
      {% endif %}

      <div class="fb-thread-comments-wrap">
        {% for block in section.blocks %}
          {% case block.type %}
            {% when 'fb_thread_comment' %}
              <div
                class="fb-thread-comment-block animate-item animate-item--child"
                id="FbBlock-{{ block.id }}"
                style="--index:{{ forloop.index | plus: 1 }};"
                {{ block.shopify_attributes }}
              >
                <div style="display:flex;gap:8px;align-items:flex-start;padding:{{ section.settings.comment_container_vertical_padding }}px 0;font-family:{% if section.settings.use_facebook_font %}Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif{% else %}-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif{% endif %};line-height:1.34;">
                  {% if block.settings.profile_image != blank %}
                    <div style="width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;">
                      <img
                        src="{{ block.settings.profile_image | image_url }}"
                        alt="Profile picture"
                        style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;"
                        width=""
                        height=""
                      >
                    </div>
                  {% else %}
                    <div style="width:32px;height:32px;border-radius:50%;background:{{ block.settings.profile_center_color }};overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#65676b;">
                      {{ block.settings.author_name | slice: 0 | upcase }}
                    </div>
                  {% endif %}

                  <div style="flex:1;">
                    <div style="background:#f0f2f5;border-radius:18px;padding:{{ section.settings.comment_bubble_vertical_padding }}px {{ section.settings.comment_bubble_horizontal_padding }}px;margin-bottom:4px;position:relative;display:inline-block;max-width:100%;">
                      <div style="font-weight:700!important;font-size:{{ block.settings.author_name_font_size }}px;letter-spacing:var(--letter-spacing-body);color:{{ block.settings.author_name_color }};margin-bottom:2px;{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}">
                        {{ block.settings.author_name }}
                      </div>
                      <div style="color:{{ block.settings.comment_text_color }};font-size:{{ block.settings.comment_text_font_size }}px;line-height:1.3;{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}">
                        {{ block.settings.comment_text }}
                      </div>

                      {%- liquid
                        assign has_rc = false
                        if block.settings.reaction_count != blank and block.settings.reaction_count != '0'
                          assign has_rc = true
                        endif
                        assign has_ri = false
                        if block.settings.show_like_icon or block.settings.show_love_icon or block.settings.show_care_icon
                          assign has_ri = true
                        endif
                      -%}
                      {% if has_rc or has_ri %}
                        <div
                          style="position:absolute;bottom:-7px;right:24px;width:16px;height:2px;background-color:#dadde1;z-index:1;border-radius:1px;"
                        ></div>
                        <div style="position:absolute;bottom:-10px;right:12px;display:flex;align-items:center;gap:4px;background:#fff;border-radius:12px;padding:1px 4px;box-shadow:0 1px 3px rgba(0,0,0,.1);border:1px solid #e4e6ea;z-index:2;">
                          {% if has_rc -%}
                            <span style="color:#65676b;font-size:12px;font-weight:400;margin-right:2px;{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}">
                              {{- block.settings.reaction_count -}}
                            </span>
                          {%- endif %}
                          <div style="display:flex;">
                            {% if block.settings.show_like_icon %}
                              <div style="width:16px;height:16px;border-radius:50%;border:1px solid white;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  width="16"
                                  height="16"
                                  fill="none"
                                  viewBox="0 0 16 16"
                                >
                                  <path fill="url(#fbt-like-{{ block.id }})" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"/><path fill="#fff" d="M12.162 7.338c.176.123.338.245.338.674 0 .43-.229.604-.474.725.1.163.132.36.089.546-.077.344-.392.611-.672.69.121.194.159.385.015.62-.185.295-.346.407-1.058.407H7.5c-.988 0-1.5-.546-1.5-1V7.665c0-1.23 1.467-2.275 1.467-3.13L7.361 3.47c-.005-.065.008-.224.058-.27.08-.079.301-.2.635-.2.218 0 .363.041.534.123.581.277.732.978.732 1.542 0 .271-.414 1.083-.47 1.364 0 0 .867-.192 1.879-.199 1.061-.006 1.749.19 1.749.842 0 .261-.219.523-.316.666ZM3.6 7h.8a.6.6 0 0 1 .6.6v3.8a.6.6 0 0 1-.6.6h-.8a.6.6 0 0 1-.6-.6V7.6a.6.6 0 0 1 .6-.6Z"/><defs><linearGradient id="fbt-like-{{ block.id }}" x1="8" x2="8" y2="16" gradientUnits="userSpaceOnUse"><stop stop-color="#18AFFF"/><stop offset="1" stop-color="#0062DF"/></linearGradient></defs>
                                </svg>
                              </div>
                            {% endif %}
                            {% if block.settings.show_love_icon %}
                              <div style="width:16px;height:16px;border-radius:50%;border:1px solid white;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  width="16"
                                  height="16"
                                  fill="none"
                                  viewBox="0 0 16 16"
                                >
                                  <path fill="url(#fbt-love-{{ block.id }})" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"/><path fill="#fff" d="M10.473 4C8.275 4 8 5.824 8 5.824S7.726 4 5.528 4c-2.114 0-2.73 2.222-2.472 3.41C3.736 10.55 8 12.75 8 12.75s4.265-2.2 4.945-5.34c.257-1.188-.36-3.41-2.472-3.41Z"/><defs><linearGradient id="fbt-love-{{ block.id }}" x1="8" x2="8" y2="16" gradientUnits="userSpaceOnUse"><stop stop-color="#FF6680"/><stop offset="1" stop-color="#E61739"/></linearGradient></defs>
                                </svg>
                              </div>
                            {% endif %}
                            {% if block.settings.show_care_icon %}
                              <div style="width:16px;height:16px;border-radius:50%;border:1px solid white;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                  <defs><linearGradient id="fbt-care-bg-{{ block.id }}" x1="-2.313" x2="-2.313" y1="19.862" y2="20.738" gradientTransform="matrix(16 0 0 -16 45 333)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f28a2d"/><stop offset="1" stop-color="#fde86f"/></linearGradient><linearGradient id="fbt-care-mouth-{{ block.id }}" x1="-1.619" x2="-1.619" y1="18.2" y2="16.681" gradientTransform="matrix(3.4035 0 0 -.9374 13.51 22.37)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#482314"/><stop offset="1" stop-color="#9a4111"/></linearGradient><radialGradient id="fbt-care-eye1-{{ block.id }}" cx="-3.9" cy="18.924" r=".872" gradientTransform="matrix(0 -2.1326 -2.1327 0 45.352 -4.046)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b446b"/><stop offset=".688" stop-color="#202340"/></radialGradient><radialGradient id="fbt-care-eye2-{{ block.id }}" cx="-3.914" cy="18.924" r=".872" gradientTransform="matrix(0 -2.1326 -2.1327 0 51.366 -4.077)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b446b"/><stop offset=".688" stop-color="#202340"/></radialGradient><linearGradient id="fbt-care-heart-{{ block.id }}" x1="-2.17" x2="-2.407" y1="20.358" y2="19.647" gradientTransform="matrix(9.7496 0 0 -9.079 27.91 194.578)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f34462"/><stop offset="1" stop-color="#cc0820"/></linearGradient></defs><path fill="url(#fbt-care-bg-{{ block.id }})" fill-rule="evenodd" d="M16 8c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8z" clip-rule="evenodd"/><path fill="url(#fbt-care-mouth-{{ block.id }})" fill-rule="evenodd" d="M9.7 5.9c-.1-.3-3.3-.3-3.4 0-.1.3.6.7 1.7.7s1.8-.4 1.7-.7z" clip-rule="evenodd"/><path fill="url(#fbt-care-eye1-{{ block.id }})" fill-rule="evenodd" d="M6 4.1c0 .7-.4.9-1 1-.6.1-1.1-.2-1.1-1 0-.6.3-1.4 1.1-1.4.7 0 1 .8 1 1.4z" clip-rule="evenodd"/><path fill="url(#fbt-care-eye2-{{ block.id }})" fill-rule="evenodd" d="M10 4.1c0 .7.4.9 1.1 1 .6.1 1.1-.2 1.1-1 0-.6-.3-1.4-1.1-1.4S10 3.5 10 4.1z" clip-rule="evenodd"/><path fill="url(#fbt-care-heart-{{ block.id }})" fill-rule="evenodd" d="M9.7 8.5c-2.1-.6-2.8.8-2.8.8S7.1 7.7 5 7c-2-.6-3.2 1.3-3.3 2.4-.2 2.5 2 5.3 2.8 6.3.1.3.4.3.7.3 1.2-.3 4.6-1.4 5.9-3.6.5-1.1.6-3.3-1.4-3.9z" clip-rule="evenodd"/>
                                </svg>
                              </div>
                            {% endif %}
                          </div>
                        </div>
                      {% endif %}
                    </div>

                    {% if block.settings.comment_image != blank %}
                      <div style="margin-top:8px;margin-left:12px;border-radius:18px;overflow:hidden;max-width:300px;">
                        <img
                          src="{{ block.settings.comment_image | image_url: width: 400 }}"
                          alt="Comment image"
                          style="width:100%;height:auto;display:block;border-radius:18px;"
                          loading="lazy"
                        >
                      </div>
                    {% endif %}

                    <div
                      class="fb-thread-comment-meta"
                      style="display:flex;align-items:center;gap:12px;margin-left:12px;margin-bottom:12px;{% if block.settings.comment_image != blank %}margin-top:8px;{% endif %}font-size:{{ block.settings.meta_font_size }}px;color:#65676b;{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}"
                    >
                      <span
                        class="fb-thread-comment-meta-item"
                        style="cursor:pointer;font-weight:600;letter-spacing:var(--letter-spacing-body);"
                        >Like</span
                      >
                      <span
                        class="fb-thread-comment-meta-item"
                        style="cursor:pointer;font-weight:600;letter-spacing:var(--letter-spacing-body);"
                        >Reply</span
                      >
                      <span style="letter-spacing:var(--letter-spacing-body);">{{- block.settings.time_stamp -}}</span>
                    </div>
                  </div>
                </div>
              </div>

            {% when 'fb_thread_reply_comment' %}
              <div
                class="fb-thread-reply-comment-block animate-item animate-item--child"
                id="FbBlock-{{ block.id }}"
                style="--index:{{ forloop.index | plus: 1 }};"
                {{ block.shopify_attributes }}
              >
                <div style="display:flex;gap:8px;align-items:flex-start;padding:{{ section.settings.comment_container_vertical_padding }}px 0;font-family:{% if section.settings.use_facebook_font %}Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif{% else %}-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif{% endif %};line-height:1.34;">
                  {% if block.settings.profile_image != blank %}
                    <div style="width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;">
                      <img
                        src="{{ block.settings.profile_image | image_url }}"
                        alt="Profile picture"
                        style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;"
                        width=""
                        height=""
                      >
                    </div>
                  {% else %}
                    <div style="width:32px;height:32px;border-radius:50%;background:{{ block.settings.profile_center_color }};overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#65676b;">
                      {{ block.settings.author_name | slice: 0 | upcase }}
                    </div>
                  {% endif %}

                  <div style="flex:1;">
                    <div style="background:#f0f2f5;border-radius:18px;padding:{{ section.settings.comment_bubble_vertical_padding }}px {{ section.settings.comment_bubble_horizontal_padding }}px;margin-bottom:4px;position:relative;display:inline-block;max-width:100%;">
                      <div style="font-weight:700!important;font-size:{{ block.settings.author_name_font_size }}px;letter-spacing:var(--letter-spacing-body);color:{{ block.settings.author_name_color }};margin-bottom:2px;{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}">
                        {{ block.settings.author_name }}
                      </div>
                      <div style="color:{{ block.settings.comment_text_color }};font-size:{{ block.settings.comment_text_font_size }}px;line-height:1.3;{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}">
                        {{ block.settings.comment_text }}
                      </div>

                      {%- liquid
                        assign has_rc = false
                        if block.settings.reaction_count != blank and block.settings.reaction_count != '0'
                          assign has_rc = true
                        endif
                        assign has_ri = false
                        if block.settings.show_like_icon or block.settings.show_love_icon or block.settings.show_care_icon
                          assign has_ri = true
                        endif
                      -%}
                      {% if has_rc or has_ri %}
                        <div
                          style="position:absolute;bottom:-7px;right:24px;width:16px;height:2px;background-color:#dadde1;z-index:1;border-radius:1px;"
                        ></div>
                        <div style="position:absolute;bottom:-10px;right:12px;display:flex;align-items:center;gap:4px;background:#fff;border-radius:12px;padding:1px 4px;box-shadow:0 1px 3px rgba(0,0,0,.1);border:1px solid #e4e6ea;z-index:2;">
                          {% if has_rc -%}
                            <span style="color:#65676b;font-size:12px;font-weight:400;margin-right:2px;">
                              {{- block.settings.reaction_count -}}
                            </span>
                          {%- endif %}
                          <div style="display:flex;">
                            {% if block.settings.show_like_icon %}
                              <div style="width:16px;height:16px;border-radius:50%;border:1px solid white;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  width="16"
                                  height="16"
                                  fill="none"
                                  viewBox="0 0 16 16"
                                >
                                  <path fill="url(#fbt-mlike-{{ block.id }})" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"/><path fill="#fff" d="M12.162 7.338c.176.123.338.245.338.674 0 .43-.229.604-.474.725.1.163.132.36.089.546-.077.344-.392.611-.672.69.121.194.159.385.015.62-.185.295-.346.407-1.058.407H7.5c-.988 0-1.5-.546-1.5-1V7.665c0-1.23 1.467-2.275 1.467-3.13L7.361 3.47c-.005-.065.008-.224.058-.27.08-.079.301-.2.635-.2.218 0 .363.041.534.123.581.277.732.978.732 1.542 0 .271-.414 1.083-.47 1.364 0 0 .867-.192 1.879-.199 1.061-.006 1.749.19 1.749.842 0 .261-.219.523-.316.666ZM3.6 7h.8a.6.6 0 0 1 .6.6v3.8a.6.6 0 0 1-.6.6h-.8a.6.6 0 0 1-.6-.6V7.6a.6.6 0 0 1 .6-.6Z"/><defs><linearGradient id="fbt-mlike-{{ block.id }}" x1="8" x2="8" y2="16" gradientUnits="userSpaceOnUse"><stop stop-color="#18AFFF"/><stop offset="1" stop-color="#0062DF"/></linearGradient></defs>
                                </svg>
                              </div>
                            {% endif %}
                            {% if block.settings.show_love_icon %}
                              <div style="width:16px;height:16px;border-radius:50%;border:1px solid white;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  width="16"
                                  height="16"
                                  fill="none"
                                  viewBox="0 0 16 16"
                                >
                                  <path fill="url(#fbt-mlove-{{ block.id }})" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"/><path fill="#fff" d="M10.473 4C8.275 4 8 5.824 8 5.824S7.726 4 5.528 4c-2.114 0-2.73 2.222-2.472 3.41C3.736 10.55 8 12.75 8 12.75s4.265-2.2 4.945-5.34c.257-1.188-.36-3.41-2.472-3.41Z"/><defs><linearGradient id="fbt-mlove-{{ block.id }}" x1="8" x2="8" y2="16" gradientUnits="userSpaceOnUse"><stop stop-color="#FF6680"/><stop offset="1" stop-color="#E61739"/></linearGradient></defs>
                                </svg>
                              </div>
                            {% endif %}
                            {% if block.settings.show_care_icon %}
                              <div style="width:16px;height:16px;border-radius:50%;border:1px solid white;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                  <defs><linearGradient id="fbt-mcare-bg-{{ block.id }}" x1="-2.313" x2="-2.313" y1="19.862" y2="20.738" gradientTransform="matrix(16 0 0 -16 45 333)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f28a2d"/><stop offset="1" stop-color="#fde86f"/></linearGradient><linearGradient id="fbt-mcare-mouth-{{ block.id }}" x1="-1.619" x2="-1.619" y1="18.2" y2="16.681" gradientTransform="matrix(3.4035 0 0 -.9374 13.51 22.37)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#482314"/><stop offset="1" stop-color="#9a4111"/></linearGradient><radialGradient id="fbt-mcare-eye1-{{ block.id }}" cx="-3.9" cy="18.924" r=".872" gradientTransform="matrix(0 -2.1326 -2.1327 0 45.352 -4.046)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b446b"/><stop offset=".688" stop-color="#202340"/></radialGradient><radialGradient id="fbt-mcare-eye2-{{ block.id }}" cx="-3.914" cy="18.924" r=".872" gradientTransform="matrix(0 -2.1326 -2.1327 0 51.366 -4.077)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b446b"/><stop offset=".688" stop-color="#202340"/></radialGradient><linearGradient id="fbt-mcare-heart-{{ block.id }}" x1="-2.17" x2="-2.407" y1="20.358" y2="19.647" gradientTransform="matrix(9.7496 0 0 -9.079 27.91 194.578)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f34462"/><stop offset="1" stop-color="#cc0820"/></linearGradient></defs><path fill="url(#fbt-mcare-bg-{{ block.id }})" fill-rule="evenodd" d="M16 8c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8z" clip-rule="evenodd"/><path fill="url(#fbt-mcare-mouth-{{ block.id }})" fill-rule="evenodd" d="M9.7 5.9c-.1-.3-3.3-.3-3.4 0-.1.3.6.7 1.7.7s1.8-.4 1.7-.7z" clip-rule="evenodd"/><path fill="url(#fbt-mcare-eye1-{{ block.id }})" fill-rule="evenodd" d="M6 4.1c0 .7-.4.9-1 1-.6.1-1.1-.2-1.1-1 0-.6.3-1.4 1.1-1.4.7 0 1 .8 1 1.4z" clip-rule="evenodd"/><path fill="url(#fbt-mcare-eye2-{{ block.id }})" fill-rule="evenodd" d="M10 4.1c0 .7.4.9 1.1 1 .6.1 1.1-.2 1.1-1 0-.6-.3-1.4-1.1-1.4S10 3.5 10 4.1z" clip-rule="evenodd"/><path fill="url(#fbt-mcare-heart-{{ block.id }})" fill-rule="evenodd" d="M9.7 8.5c-2.1-.6-2.8.8-2.8.8S7.1 7.7 5 7c-2-.6-3.2 1.3-3.3 2.4-.2 2.5 2 5.3 2.8 6.3.1.3.4.3.7.3 1.2-.3 4.6-1.4 5.9-3.6.5-1.1.6-3.3-1.4-3.9z" clip-rule="evenodd"/>
                                </svg>
                              </div>
                            {% endif %}
                          </div>
                        </div>
                      {% endif %}
                    </div>

                    <div
                      class="fb-thread-comment-meta"
                      style="display:flex;gap:12px;margin-left:12px;margin-bottom:8px;font-size:12px;color:#65676b;{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}"
                    >
                      <span
                        class="fb-thread-comment-meta-item"
                        style="cursor:pointer;font-weight:var(--font-weight-bold);"
                        >Like</span
                      >
                      <span
                        class="fb-thread-comment-meta-item"
                        style="cursor:pointer;font-weight:var(--font-weight-bold);"
                        >Reply</span
                      >
                      <span>{{- block.settings.time_stamp -}}</span>
                    </div>

                    {% if block.settings.comment_image != blank %}
                      <div style="margin-top:8px;margin-left:12px;border-radius:18px;overflow:hidden;max-width:300px;">
                        <img
                          src="{{ block.settings.comment_image | image_url: width: 400 }}"
                          alt="Comment image"
                          style="width:100%;height:auto;display:block;border-radius:18px;"
                          loading="lazy"
                        >
                      </div>
                    {% endif %}

                    <div
                      class="fb-thread-replies fb-thread-replies-{{ block.id }}"
                      style="margin-left:40px;margin-top:8px;position:relative;"
                    >
                      <div style="display:flex;gap:6px;align-items:flex-start;margin-bottom:8px;">
                        {% if block.settings.reply_profile_image != blank %}
                          <div style="width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;position:relative;z-index:2;">
                            <img
                              src="{{ block.settings.reply_profile_image | image_url }}"
                              alt="Reply profile picture"
                              style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;"
                              width=""
                              height=""
                            >
                          </div>
                        {% else %}
                          <div style="width:28px;height:28px;border-radius:50%;background:{{ block.settings.reply_profile_center_color }};overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#65676b;position:relative;z-index:2;">
                            {{ block.settings.reply_author_name | slice: 0 | upcase }}
                          </div>
                        {% endif %}

                        <div style="flex:1;">
                          <div style="background:#f0f2f5;border-radius:14px;padding:{{ section.settings.reply_bubble_vertical_padding }}px {{ section.settings.reply_bubble_horizontal_padding }}px;margin-bottom:2px;position:relative;display:inline-block;max-width:100%;">
                            <div style="font-weight:700!important;font-size:{{ block.settings.reply_author_name_font_size }}px;letter-spacing:var(--letter-spacing-body);color:{{ block.settings.author_name_color }};margin-bottom:1px;{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}">
                              {{ block.settings.reply_author_name }}
                            </div>
                            <div style="color:{{ block.settings.reply_comment_text_color }};font-size:{{ block.settings.reply_comment_text_font_size }}px;line-height:1.3;{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}">
                              {{ block.settings.reply_comment_text }}
                            </div>

                            {%- liquid
                              assign rhas_rc = false
                              if block.settings.reply_reaction_count != blank and block.settings.reply_reaction_count != '0'
                                assign rhas_rc = true
                              endif
                              assign rhas_ri = false
                              if block.settings.reply_show_like_icon or block.settings.reply_show_love_icon or block.settings.reply_show_care_icon
                                assign rhas_ri = true
                              endif
                            -%}
                            {% if rhas_rc or rhas_ri %}
                              <div
                                style="position:absolute;bottom:-5px;right:18px;width:12px;height:2px;background-color:#dadde1;z-index:1;border-radius:1px;"
                              ></div>
                              <div style="position:absolute;bottom:-12px;right:10px;display:flex;align-items:center;gap:3px;background:#fff;border-radius:10px;padding:1px 4px;box-shadow:0 1px 2px rgba(0,0,0,.1);border:1px solid #e4e6ea;z-index:2;">
                                {% if rhas_rc -%}
                                  <span style="font-size:12px;color:#65676b;font-weight:400;margin-right:2px;">
                                    {{- block.settings.reply_reaction_count -}}
                                  </span>
                                {%- endif %}
                                {% if block.settings.reply_show_like_icon %}
                                  <div style="width:16px;height:16px;border-radius:50%;border:1px solid white;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
                                    <svg
                                      xmlns="http://www.w3.org/2000/svg"
                                      width="14"
                                      height="14"
                                      fill="none"
                                      viewBox="0 0 16 16"
                                    >
                                      <path fill="url(#fbt-rlike-{{ block.id }})" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"/><path fill="#fff" d="M12.162 7.338c.176.123.338.245.338.674 0 .43-.229.604-.474.725.1.163.132.36.089.546-.077.344-.392.611-.672.69.121.194.159.385.015.62-.185.295-.346.407-1.058.407H7.5c-.988 0-1.5-.546-1.5-1V7.665c0-1.23 1.467-2.275 1.467-3.13L7.361 3.47c-.005-.065.008-.224.058-.27.08-.079.301-.2.635-.2.218 0 .363.041.534.123.581.277.732.978.732 1.542 0 .271-.414 1.083-.47 1.364 0 0 .867-.192 1.879-.199 1.061-.006 1.749.19 1.749.842 0 .261-.219.523-.316.666ZM3.6 7h.8a.6.6 0 0 1 .6.6v3.8a.6.6 0 0 1-.6.6h-.8a.6.6 0 0 1-.6-.6V7.6a.6.6 0 0 1 .6-.6Z"/><defs><linearGradient id="fbt-rlike-{{ block.id }}" x1="8" x2="8" y2="16" gradientUnits="userSpaceOnUse"><stop stop-color="#18AFFF"/><stop offset="1" stop-color="#0062DF"/></linearGradient></defs>
                                    </svg>
                                  </div>
                                {% endif %}
                                {% if block.settings.reply_show_love_icon %}
                                  <div style="width:16px;height:16px;border-radius:50%;border:1px solid white;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
                                    <svg
                                      xmlns="http://www.w3.org/2000/svg"
                                      width="14"
                                      height="14"
                                      fill="none"
                                      viewBox="0 0 16 16"
                                    >
                                      <path fill="url(#fbt-rlove-{{ block.id }})" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"/><path fill="#fff" d="M10.473 4C8.275 4 8 5.824 8 5.824S7.726 4 5.528 4c-2.114 0-2.73 2.222-2.472 3.41C3.736 10.55 8 12.75 8 12.75s4.265-2.2 4.945-5.34c.257-1.188-.36-3.41-2.472-3.41Z"/><defs><linearGradient id="fbt-rlove-{{ block.id }}" x1="8" x2="8" y2="16" gradientUnits="userSpaceOnUse"><stop stop-color="#FF6680"/><stop offset="1" stop-color="#E61739"/></linearGradient></defs>
                                    </svg>
                                  </div>
                                {% endif %}
                                {% if block.settings.reply_show_care_icon %}
                                  <div style="width:16px;height:16px;border-radius:50%;border:1px solid white;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16">
                                      <defs><linearGradient id="fbt-rcare-bg-{{ block.id }}" x1="-2.313" x2="-2.313" y1="19.862" y2="20.738" gradientTransform="matrix(16 0 0 -16 45 333)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f28a2d"/><stop offset="1" stop-color="#fde86f"/></linearGradient><linearGradient id="fbt-rcare-mouth-{{ block.id }}" x1="-1.619" x2="-1.619" y1="18.2" y2="16.681" gradientTransform="matrix(3.4035 0 0 -.9374 13.51 22.37)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#482314"/><stop offset="1" stop-color="#9a4111"/></linearGradient><radialGradient id="fbt-rcare-eye1-{{ block.id }}" cx="-3.9" cy="18.924" r=".872" gradientTransform="matrix(0 -2.1326 -2.1327 0 45.352 -4.046)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b446b"/><stop offset=".688" stop-color="#202340"/></radialGradient><radialGradient id="fbt-rcare-eye2-{{ block.id }}" cx="-3.914" cy="18.924" r=".872" gradientTransform="matrix(0 -2.1326 -2.1327 0 51.366 -4.077)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b446b"/><stop offset=".688" stop-color="#202340"/></radialGradient><linearGradient id="fbt-rcare-heart-{{ block.id }}" x1="-2.17" x2="-2.407" y1="20.358" y2="19.647" gradientTransform="matrix(9.7496 0 0 -9.079 27.91 194.578)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f34462"/><stop offset="1" stop-color="#cc0820"/></linearGradient></defs><path fill="url(#fbt-rcare-bg-{{ block.id }})" fill-rule="evenodd" d="M16 8c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8z" clip-rule="evenodd"/><path fill="url(#fbt-rcare-mouth-{{ block.id }})" fill-rule="evenodd" d="M9.7 5.9c-.1-.3-3.3-.3-3.4 0-.1.3.6.7 1.7.7s1.8-.4 1.7-.7z" clip-rule="evenodd"/><path fill="url(#fbt-rcare-eye1-{{ block.id }})" fill-rule="evenodd" d="M6 4.1c0 .7-.4.9-1 1-.6.1-1.1-.2-1.1-1 0-.6.3-1.4 1.1-1.4.7 0 1 .8 1 1.4z" clip-rule="evenodd"/><path fill="url(#fbt-rcare-eye2-{{ block.id }})" fill-rule="evenodd" d="M10 4.1c0 .7.4.9 1.1 1 .6.1 1.1-.2 1.1-1 0-.6-.3-1.4-1.1-1.4S10 3.5 10 4.1z" clip-rule="evenodd"/><path fill="url(#fbt-rcare-heart-{{ block.id }})" fill-rule="evenodd" d="M9.7 8.5c-2.1-.6-2.8.8-2.8.8S7.1 7.7 5 7c-2-.6-3.2 1.3-3.3 2.4-.2 2.5 2 5.3 2.8 6.3.1.3.4.3.7.3 1.2-.3 4.6-1.4 5.9-3.6.5-1.1.6-3.3-1.4-3.9z" clip-rule="evenodd"/>
                                    </svg>
                                  </div>
                                {% endif %}
                              </div>
                            {% endif %}
                          </div>

                          {% if block.settings.reply_comment_image != blank %}
                            <div style="margin-top:8px;margin-left:10px;border-radius:14px;overflow:hidden;max-width:250px;">
                              <img
                                src="{{ block.settings.reply_comment_image | image_url: width: 300 }}"
                                alt="Reply image"
                                style="width:100%;height:auto;display:block;border-radius:14px;"
                                loading="lazy"
                              >
                            </div>
                          {% endif %}

                          <div
                            class="fb-thread-reply-meta"
                            style="display:flex;gap:10px;margin-left:10px;{% if block.settings.reply_comment_image != blank %}margin-top:6px;{% endif %}"
                          >
                            <span
                              class="fb-thread-reply-meta-item"
                              style="font-size:11px;color:#65676b;cursor:pointer;font-weight:var(--font-weight-bold);{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}"
                              >Like</span
                            >
                            <span
                              class="fb-thread-reply-meta-item"
                              style="font-size:11px;color:#65676b;cursor:pointer;font-weight:var(--font-weight-bold);{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}"
                              >Reply</span
                            >
                            <span style="font-size:11px;color:#65676b;{% if section.settings.use_facebook_font %}font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;{% endif %}">
                              {{- block.settings.reply_time_stamp -}}
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          {% endcase %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<script>
  (function () {
    var sectionId = '{{ section.id }}';
    var sectionEl = document.getElementById('FbCommentThread-' + sectionId);
    if (!sectionEl) return;

    sectionEl.querySelectorAll('.fb-thread-add-comment-real-input').forEach(function (input) {
      var container = input.closest('.fb-thread-add-comment-input');
      var sendBtn = container.querySelector('.fb-thread-send-button');
      input.addEventListener('focus', function () {
        container.style.borderColor = '#1877f2';
        container.style.boxShadow = '0 0 0 2px rgba(24,119,242,0.2)';
      });
      input.addEventListener('blur', function () {
        container.style.borderColor = 'transparent';
        container.style.boxShadow = 'none';
      });
      input.addEventListener('input', function () {
        if (input.value.trim().length > 0) {
          sendBtn.style.color = '#1877f2';
          sendBtn.style.opacity = '1';
        } else {
          sendBtn.style.color = '#65676b';
          sendBtn.style.opacity = '0.6';
        }
      });
      if (sendBtn) {
        sendBtn.addEventListener('click', function () {
          if (input.value.trim().length > 0) {
            var n = document.createElement('div');
            n.textContent = 'Comment posted!';
            n.style.cssText =
              'position:fixed;top:20px;right:20px;background:#42b883;color:white;padding:12px 20px;border-radius:6px;font-size:14px;z-index:10000;box-shadow:0 4px 12px rgba(0,0,0,.15);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;';
            document.body.appendChild(n);
            input.value = '';
            sendBtn.style.color = '#65676b';
            sendBtn.style.opacity = '0.6';
            setTimeout(function () {
              if (n.parentNode) n.parentNode.removeChild(n);
            }, 3000);
          }
        });
        input.addEventListener('keypress', function (e) {
          if (e.key === 'Enter' && input.value.trim().length > 0) sendBtn.click();
        });
      }
    });

    function adjustReplyLines() {
      sectionEl.querySelectorAll('.fb-thread-reply-comment-block').forEach(function (block, i) {
        var bubble = block.querySelector(
          '.fb-thread-comment-container .fb-thread-comment-bubble, .fb-thread-comment-block .fb-thread-comment-bubble'
        );
        if (!bubble) {
          var allBubbles = block.querySelectorAll('[style*="border-radius:18px"]');
          if (allBubbles.length) bubble = allBubbles[0];
        }
        var repliesEl = block.querySelector('.fb-thread-replies');
        if (!bubble || !repliesEl) return;
        var bh = bubble.offsetHeight;
        var existingStyle = document.getElementById('fbt-reply-style-' + block.id);
        if (existingStyle) existingStyle.remove();
        var s = document.createElement('style');
        s.id = 'fbt-reply-style-' + block.id;
        s.textContent =
          '#' +
          block.id +
          ' .fb-thread-replies::before{left:-65px;width:57px;top:-' +
          (bh - 8) +
          'px;height:' +
          (bh + 7) +
          'px;}@media screen and (max-width:520px){#' +
          block.id +
          ' .fb-thread-replies::before{top:-' +
          (bh - 10) +
          'px;height:' +
          (bh + 7) +
          'px;}}';
        document.head.appendChild(s);
      });
    }

    setTimeout(adjustReplyLines, 100);
    window.addEventListener('resize', function () {
      setTimeout(adjustReplyLines, 50);
    });
  })();
</script>

{% schema %}
{
  "name": "Facebook comment thread",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        { "value": "desktop-hidden", "label": "Mobile only" },
        { "value": "mobile-hidden", "label": "Desktop only" },
        { "value": "always-display", "label": "All devices" }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "label": "Heading",
      "default": "What people are saying",
      "info": "Bold words to highlight them. Italicize words for styled emphasis."
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "h2", "label": "Small" },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large" }
      ],
      "default": "h1"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Highlight color",
      "default": "#6D388B"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Overrides solid highlight color with gradient"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "header",
      "content": "Italic text styling",
      "info": "Controls how italic text (created with *text*) is displayed"
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic style",
      "options": [
        { "value": "italic", "label": "Normal italic" },
        { "value": "underline", "label": "Underline" },
        { "value": "font_family", "label": "Custom font family" }
      ],
      "default": "underline"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#FF0000",
      "info": "Used when Underline style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3,
      "info": "Used when Underline style is selected"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic font family",
      "options": [
        { "value": "inherit", "label": "Default (inherit)" },
        { "value": "serif", "label": "Serif" },
        { "value": "georgia-pro", "label": "Georgia Pro" },
        { "value": "bodoni-moda", "label": "Bodoni Moda" },
        { "value": "instrument-serif", "label": "Instrument Serif" },
        { "value": "cursive", "label": "Cursive" },
        { "value": "custom_google_font", "label": "Custom Google Font" }
      ],
      "default": "inherit",
      "info": "Used when Custom font family style is selected"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font name",
      "info": "e.g. 'Playfair Display'. Browse fonts at https://fonts.google.com/"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic font weight",
      "options": [
        { "value": "inherit", "label": "Default (inherit)" },
        { "value": "300", "label": "Light (300)" },
        { "value": "400", "label": "Normal (400)" },
        { "value": "500", "label": "Medium (500)" },
        { "value": "600", "label": "Semi Bold (600)" },
        { "value": "700", "label": "Bold (700)" },
        { "value": "800", "label": "Extra Bold (800)" },
        { "value": "900", "label": "Black (900)" }
      ],
      "default": "inherit",
      "info": "Used when Custom font family style is selected"
    },

    {
      "type": "header",
      "content": "Filter bar"
    },
    {
      "type": "text",
      "id": "filter_label_text",
      "label": "Filter label",
      "default": "Most relevant"
    },
    {
      "type": "range",
      "id": "filter_label_size",
      "label": "Label font size",
      "min": 12,
      "max": 18,
      "step": 1,
      "unit": "px",
      "default": 15
    },
    {
      "type": "select",
      "id": "filter_label_weight",
      "label": "Label font weight",
      "options": [
        { "value": "400", "label": "Normal" },
        { "value": "500", "label": "Medium" },
        { "value": "600", "label": "Semi Bold" },
        { "value": "700", "label": "Bold" }
      ],
      "default": "600"
    },
    {
      "type": "color",
      "id": "filter_label_color",
      "label": "Label color",
      "default": "#1c1e21"
    },
    {
      "type": "checkbox",
      "id": "show_filter_dropdown",
      "label": "Show dropdown arrow",
      "default": true
    },
    {
      "type": "color",
      "id": "filter_arrow_color",
      "label": "Arrow color",
      "default": "#65676b"
    },
    {
      "type": "checkbox",
      "id": "show_comment_count",
      "label": "Show comment count",
      "default": true
    },
    {
      "type": "range",
      "id": "comment_count_size",
      "label": "Count font size",
      "min": 11,
      "max": 16,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "select",
      "id": "comment_count_weight",
      "label": "Count font weight",
      "options": [
        { "value": "400", "label": "Normal" },
        { "value": "500", "label": "Medium" },
        { "value": "600", "label": "Semi Bold" }
      ],
      "default": "400"
    },
    {
      "type": "color",
      "id": "comment_count_color",
      "label": "Count color",
      "default": "#65676b"
    },
    {
      "type": "color",
      "id": "divider_color",
      "label": "Top divider color",
      "default": "#dadde1"
    },
    {
      "type": "range",
      "id": "filter_section_spacing",
      "label": "Filter spacing",
      "min": 8,
      "max": 24,
      "step": 2,
      "unit": "px",
      "default": 16
    },
    {
      "type": "header",
      "content": "Add comment input"
    },
    {
      "type": "checkbox",
      "id": "show_add_comment",
      "label": "Show comment input",
      "default": true
    },
    {
      "type": "text",
      "id": "add_comment_placeholder",
      "label": "Placeholder text",
      "default": "Add a comment"
    },
    {
      "type": "range",
      "id": "add_comment_avatar_size",
      "label": "Avatar size",
      "min": 24,
      "max": 48,
      "step": 2,
      "unit": "px",
      "default": 32
    },
    {
      "type": "color",
      "id": "add_comment_avatar_bg",
      "label": "Avatar background",
      "default": "#e4e6ea"
    },
    {
      "type": "color",
      "id": "add_comment_icon_color",
      "label": "Avatar icon color",
      "default": "#65676b"
    },
    {
      "type": "color",
      "id": "add_comment_input_bg",
      "label": "Input background",
      "default": "#f0f2f5"
    },
    {
      "type": "range",
      "id": "add_comment_input_radius",
      "label": "Input radius",
      "min": 8,
      "max": 30,
      "step": 2,
      "unit": "px",
      "default": 20
    },
    {
      "type": "range",
      "id": "add_comment_input_height",
      "label": "Input height",
      "min": 28,
      "max": 48,
      "step": 2,
      "unit": "px",
      "default": 36
    },
    {
      "type": "range",
      "id": "add_comment_input_padding",
      "label": "Input padding",
      "min": 4,
      "max": 16,
      "step": 2,
      "unit": "px",
      "default": 8
    },
    {
      "type": "range",
      "id": "add_comment_font_size",
      "label": "Input font size",
      "min": 12,
      "max": 18,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "color",
      "id": "add_comment_text_color",
      "label": "Input text color",
      "default": "#1c1e21"
    },
    {
      "type": "range",
      "id": "add_comment_max_length",
      "label": "Max character length",
      "min": 100,
      "max": 1000,
      "step": 50,
      "default": 500
    },
    {
      "type": "color",
      "id": "add_comment_border_color",
      "label": "Section border color",
      "default": "#e4e6ea"
    },
    {
      "type": "range",
      "id": "add_comment_padding",
      "label": "Section padding",
      "min": 0,
      "max": 24,
      "step": 2,
      "unit": "px",
      "default": 12
    },
    {
      "type": "range",
      "id": "add_comment_margin_bottom",
      "label": "Section bottom margin",
      "min": 8,
      "max": 32,
      "step": 2,
      "unit": "px",
      "default": 16
    },
    {
      "type": "header",
      "content": "Comment style"
    },
    {
      "type": "range",
      "id": "comment_spacing",
      "label": "Comment spacing",
      "min": -14,
      "max": 24,
      "step": 2,
      "unit": "px",
      "default": 12
    },
    {
      "type": "range",
      "id": "comment_bubble_vertical_padding",
      "label": "Bubble vertical padding",
      "min": 0,
      "max": 16,
      "step": 1,
      "unit": "px",
      "default": 8
    },
    {
      "type": "range",
      "id": "comment_bubble_horizontal_padding",
      "label": "Bubble horizontal padding",
      "min": 6,
      "max": 20,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "range",
      "id": "reply_bubble_vertical_padding",
      "label": "Reply bubble vertical padding",
      "min": 3,
      "max": 12,
      "step": 1,
      "unit": "px",
      "default": 6
    },
    {
      "type": "range",
      "id": "reply_bubble_horizontal_padding",
      "label": "Reply bubble horizontal padding",
      "min": 4,
      "max": 16,
      "step": 1,
      "unit": "px",
      "default": 10
    },
    {
      "type": "range",
      "id": "comment_container_vertical_padding",
      "label": "Comment container vertical padding",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "default": 8
    },
    {
      "type": "checkbox",
      "id": "use_facebook_font",
      "label": "Use Facebook font (Roboto)",
      "default": false
    },
    {
      "type": "header",
      "content": "Color scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Inverse" },
        { "value": "custom", "label": "Custom" }
      ],
      "default": "background-1",
      "label": "Color scheme",
      "info": "Custom color scheme is edited at the bottom of section settings."
    },
    {
      "type": "header",
      "content": "Padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 36
    },
    {
      "type": "header",
      "content": "Margin"
    },
    {
      "type": "range",
      "id": "margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Margin top",
      "default": 0
    },
    {
      "type": "range",
      "id": "margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Margin bottom",
      "default": 0
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied when Color scheme is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#FFFFFF",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces background color."
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "Falls back to image background if empty."
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#dd1d1d",
      "label": "Solid button background"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_text",
      "default": "#ffffff",
      "label": "Solid button label"
    },
    {
      "type": "color",
      "id": "custom_colors_outline_button",
      "default": "#dd1d1d",
      "label": "Outline button"
    }
  ],

  "blocks": [
    {
      "type": "fb_thread_comment",
      "name": "Comment",
      "settings": [
        {
          "type": "header",
          "content": "Author"
        },
        {
          "type": "image_picker",
          "id": "profile_image",
          "label": "Profile image"
        },
        {
          "type": "color",
          "id": "profile_center_color",
          "label": "Placeholder color",
          "default": "#e4e6ea"
        },
        {
          "type": "text",
          "id": "author_name",
          "label": "Name",
          "default": "Simon Aref"
        },
        {
          "type": "color",
          "id": "author_name_color",
          "label": "Name color",
          "default": "#050505"
        },
        {
          "type": "range",
          "id": "author_name_font_size",
          "label": "Name font size",
          "min": 11,
          "max": 16,
          "step": 1,
          "unit": "px",
          "default": 13
        },
        {
          "type": "header",
          "content": "Comment"
        },
        {
          "type": "textarea",
          "id": "comment_text",
          "label": "Text",
          "default": "Interested"
        },
        {
          "type": "color",
          "id": "comment_text_color",
          "label": "Text color",
          "default": "#050505"
        },
        {
          "type": "range",
          "id": "comment_text_font_size",
          "label": "Text font size",
          "min": 11,
          "max": 16,
          "step": 1,
          "unit": "px",
          "default": 13
        },
        {
          "type": "image_picker",
          "id": "comment_image",
          "label": "Image (optional)"
        },
        {
          "type": "text",
          "id": "time_stamp",
          "label": "Timestamp",
          "default": "3w"
        },
        {
          "type": "range",
          "id": "meta_font_size",
          "label": "Meta font size",
          "min": 10,
          "max": 14,
          "step": 1,
          "unit": "px",
          "default": 12
        },
        {
          "type": "header",
          "content": "Reactions"
        },
        {
          "type": "text",
          "id": "reaction_count",
          "label": "Reaction count",
          "info": "Leave blank to hide. e.g. '12'"
        },
        {
          "type": "checkbox",
          "id": "show_like_icon",
          "label": "Like icon",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "show_love_icon",
          "label": "Love icon",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "show_care_icon",
          "label": "Care icon",
          "default": false
        }
      ]
    },
    {
      "type": "fb_thread_reply_comment",
      "name": "Comment with reply",
      "settings": [
        {
          "type": "header",
          "content": "Main comment"
        },
        {
          "type": "image_picker",
          "id": "profile_image",
          "label": "Profile image"
        },
        {
          "type": "color",
          "id": "profile_center_color",
          "label": "Placeholder color",
          "default": "#e4e6ea"
        },
        {
          "type": "text",
          "id": "author_name",
          "label": "Name",
          "default": "Jennifer Martinez"
        },
        {
          "type": "color",
          "id": "author_name_color",
          "label": "Name color",
          "default": "#365899"
        },
        {
          "type": "range",
          "id": "author_name_font_size",
          "label": "Name font size",
          "min": 11,
          "max": 16,
          "step": 1,
          "unit": "px",
          "default": 13
        },
        {
          "type": "textarea",
          "id": "comment_text",
          "label": "Text",
          "default": "Has anyone actually tried this? Looking for real reviews."
        },
        {
          "type": "color",
          "id": "comment_text_color",
          "label": "Text color",
          "default": "#1c1e21"
        },
        {
          "type": "range",
          "id": "comment_text_font_size",
          "label": "Text font size",
          "min": 11,
          "max": 16,
          "step": 1,
          "unit": "px",
          "default": 14
        },
        {
          "type": "image_picker",
          "id": "comment_image",
          "label": "Image (optional)"
        },
        {
          "type": "text",
          "id": "time_stamp",
          "label": "Timestamp",
          "default": "1w"
        },
        {
          "type": "header",
          "content": "Main comment reactions"
        },
        {
          "type": "text",
          "id": "reaction_count",
          "label": "Reaction count",
          "info": "Leave blank to hide. e.g. '3'"
        },
        {
          "type": "checkbox",
          "id": "show_like_icon",
          "label": "Like icon",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "show_love_icon",
          "label": "Love icon",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "show_care_icon",
          "label": "Care icon",
          "default": false
        },
        {
          "type": "header",
          "content": "Reply"
        },
        {
          "type": "image_picker",
          "id": "reply_profile_image",
          "label": "Reply profile image"
        },
        {
          "type": "color",
          "id": "reply_profile_center_color",
          "label": "Reply placeholder color",
          "default": "#e4e6ea"
        },
        {
          "type": "text",
          "id": "reply_author_name",
          "label": "Reply name",
          "default": "Mike Thompson"
        },
        {
          "type": "range",
          "id": "reply_author_name_font_size",
          "label": "Reply name font size",
          "min": 11,
          "max": 16,
          "step": 1,
          "unit": "px",
          "default": 12
        },
        {
          "type": "textarea",
          "id": "reply_comment_text",
          "label": "Reply text",
          "default": "Yes! I've been using it for 2 months and it's amazing. Definitely worth it."
        },
        {
          "type": "color",
          "id": "reply_comment_text_color",
          "label": "Reply text color",
          "default": "#1c1e21"
        },
        {
          "type": "range",
          "id": "reply_comment_text_font_size",
          "label": "Reply text font size",
          "min": 11,
          "max": 16,
          "step": 1,
          "unit": "px",
          "default": 13
        },
        {
          "type": "image_picker",
          "id": "reply_comment_image",
          "label": "Reply image (optional)"
        },
        {
          "type": "text",
          "id": "reply_time_stamp",
          "label": "Reply timestamp",
          "default": "6d"
        },
        {
          "type": "header",
          "content": "Reply reactions"
        },
        {
          "type": "text",
          "id": "reply_reaction_count",
          "label": "Reaction count",
          "info": "Leave blank to hide. e.g. '1'"
        },
        {
          "type": "checkbox",
          "id": "reply_show_like_icon",
          "label": "Like icon",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "reply_show_love_icon",
          "label": "Love icon",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "reply_show_care_icon",
          "label": "Care icon",
          "default": false
        }
      ]
    }
  ],

  "presets": [
    {
      "name": "Facebook comment thread",
      "category": "Testimonials",
      "blocks": [
        {
          "type": "fb_thread_comment",
          "settings": {
            "author_name": "Kayla Brennan",
            "comment_text": "Just got mine in the mail and omg my skin looks SO good",
            "time_stamp": "2d"
          }
        },
        {
          "type": "fb_thread_comment",
          "settings": {
            "author_name": "Priya Nair",
            "comment_text": "Been using this for 3 weeks and my dark spots are actually fading. Not exaggerating.",
            "time_stamp": "5d",
            "reaction_count": "14",
            "show_like_icon": true,
            "show_love_icon": true
          }
        },
        {
          "type": "fb_thread_comment",
          "settings": {
            "author_name": "Danielle Okoye",
            "comment_text": "My dermatologist charges $300 a visit to tell me the same thing this serum is doing for $49 lol",
            "time_stamp": "1w",
            "reaction_count": "31",
            "show_like_icon": true
          }
        },
        {
          "type": "fb_thread_comment",
          "settings": {
            "author_name": "Tasha M.",
            "comment_text": "Does this work on sensitive skin? I break out from everything",
            "time_stamp": "3d"
          }
        },
        {
          "type": "fb_thread_comment",
          "settings": {
            "author_name": "Meg Holloway",
            "comment_text": "Stopped wearing foundation to work this week for the first time in years. That's all I'm gonna say 😭",
            "time_stamp": "6d",
            "reaction_count": "47",
            "show_like_icon": true,
            "show_love_icon": true,
            "show_care_icon": true
          }
        },
        {
          "type": "fb_thread_comment",
          "settings": {
            "author_name": "Rachel Stine",
            "comment_text": "My husband noticed and he never notices anything. Sold.",
            "time_stamp": "2w",
            "reaction_count": "8",
            "show_like_icon": true
          }
        },
        {
          "type": "fb_thread_reply_comment",
          "settings": {
            "author_name": "Simone Ward",
            "comment_text": "Is this actually worth the hype or just another skincare thing that only works for influencers",
            "time_stamp": "4d",
            "reaction_count": "5",
            "show_like_icon": true,
            "reply_author_name": "Jade Ferreira",
            "reply_comment_text": "100% worth it. I'm on my second bottle and my skin texture has completely changed. Not an influencer, just a tired mom who needed something that actually worked 😂",
            "reply_time_stamp": "3d",
            "reply_show_love_icon": true,
            "reply_reaction_count": "22"
          }
        }
      ]
    }
  ]
}
{% endschema %}
