<div
  {{ block.shopify_attributes }}
  style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
>
  <div class="priceandratingstars animate--hidden {{ block.settings.visibility }}">
    <div class="text1">
      {%- render 'ascendify-price',
        product: product,
        block: block,
        use_variant: true,
        show_badges: true,
        hide_sale_badge: block.settings.hide_sale_badge,
        price_class: 'price--large',
        price_second: price_second,
        main_price: true
      -%}
    </div>

    <div class="text2">
      {% if block.settings.enable_ratingstars %}
        {% render 'rating-stars-block', block: block, margins: true, block_attributes: true %}
      {% endif %}
      {% if block.settings.enable_lowstock2 %}
        <div class="sfrom_text3 text-center">
          {{ block.settings.dot_text }}
        </div>
      {% endif %}

      {% if block.settings.enable_socialproof %}
        {% if block.settings.scroll_idsocial != blank %}<a href="{{ block.settings.scroll_idsocial }}">{% endif %}
        {% render 'social-proof-customers', block: block %}
        {% if block.settings.scroll_idsocial != blank %}</a>{% endif %}
      {% endif %}
    </div>
  </div>
</div>

<style>
    .priceandratingstars {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px;
    }

    .text1 {

    }

    .text2 {
      margin-left: 20px;

    }



    .sfrom_text3 p:before {
      position: relative;
      display: inline-block;
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: {{ block.settings.dot_color }};
      margin-right: 5px;
      animation: blink 1.5s infinite;
  }

  .sfrom_text3 p {
      display: flex;
      align-items: center;
     justify-content: {{ block.settings.blinktext_align }};
      gap: 5px;
      line-height: 1;
      width: 100%;
      flex-wrap: wrap;
      margin: 10px 0;
      position: relative;
      font-size: {{ block.settings.dot_textsize }}px;
      font-weight: 400;
      color: {{ block.settings.dot_textcolor }};
  }

  @keyframes blink {
      0% {
          opacity: 1;
      }
      50% {
          opacity: 0.5;
      }
      100% {
          opacity: 1;
      }
  }
</style>
{% if block.settings.custompricecolors %}
  <style>
    .price .main-price {
        color: {{block.settings.main-pricecolor }};
    }
    .price .main-comapre-price {
        color: {{block.settings.maincomapre-pricecolor }};
    }
  </style>
{% endif %}
