<div class="{{ block.settings.visibility }}"
  {{ 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;
  "
>

  {% if block.settings.display_style == 'card' %}

    {%- assign card_pct = block.settings.card_progress_percentage -%}

    <style>
      #selling-out-card-{{ block.id }} {
        background: {{ block.settings.card_background_color }};
        border-radius: {{ block.settings.card_border_radius }}px;
        padding: {{ block.settings.card_padding_v }}px {{ block.settings.card_padding_h }}px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        width: 100%;
        box-sizing: border-box;
        margin-top: var(--margin-top);
        margin-bottom: var(--margin-bottom);
      }
      #selling-out-card-{{ block.id }} .soc-progress-row {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      #selling-out-card-{{ block.id }} .soc-track {
        flex: 1;
        height: {{ block.settings.card_progress_height }}px;
        background: {{ block.settings.card_progress_bg_color }};
        border-radius: {{ block.settings.card_progress_height | divided_by: 2 }}px;
        overflow: visible;
        position: relative;
      }
      #selling-out-card-{{ block.id }} .soc-fill {
        height: 100%;
        width: {{ card_pct }}%;
        background: {{ block.settings.card_progress_color }};
        border-radius: inherit;
        display: block;
        transition: width 0.7s cubic-bezier(.2,.8,.2,1);
        {% if block.settings.card_enable_glow %}
        animation: soc-pulse-{{ block.id }} 2s ease-in-out infinite;
        {% endif %}
      }
      #selling-out-card-{{ block.id }} .soc-pct-label {
        font-weight: 600;
        font-size: {{ block.settings.card_percentage_font_size }}px;
        color: {{ block.settings.card_percentage_color }};
        min-width: 70px;
        text-align: right;
        white-space: nowrap;
        {% if block.settings.card_enable_glow %}
        animation: soc-text-pulse-{{ block.id }} 2s ease-in-out infinite;
        {% endif %}
      }
      #selling-out-card-{{ block.id }} .soc-subtitle {
        font-size: {{ block.settings.card_subtitle_font_size }}px;
        color: {{ block.settings.card_subtitle_color }};
        font-weight: 600;
        margin: 10px 0 0;
        line-height: 1.4;
      }
      {% if block.settings.card_enable_glow %}
      @keyframes soc-pulse-{{ block.id }} {
        0%, 100% { box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); }
        50%       { box-shadow: 0 0 12px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 0, 0, 0.15); }
      }
      @keyframes soc-text-pulse-{{ block.id }} {
        0%, 100% { opacity: 1; }
        50%       { opacity: 0.7; }
      }
      {% endif %}
    </style>

    <div id="selling-out-card-{{ block.id }}">
      <div class="soc-progress-row">
        <div class="soc-track">
          <div class="soc-fill"></div>
        </div>
        <span class="soc-pct-label">{{ card_pct }}% {{ block.settings.card_percentage_label }}</span>
      </div>
      {% if block.settings.card_show_subtitle and block.settings.card_subtitle != blank %}
        <p class="soc-subtitle">{{ block.settings.card_subtitle }}</p>
      {% endif %}
    </div>

  {% else %}

  {%- comment -%} Determine if any checkmark rows are enabled {%- endcomment -%}
  {%- assign has_check_rows = false -%}
  {%- if block.settings.show_checkmark_rows -%}
    {%- if block.settings.check1_text != blank or block.settings.check2_text != blank or block.settings.check3_text != blank -%}
      {%- assign has_check_rows = true -%}
    {%- endif -%}
  {%- endif -%}

  {%- comment -%} Build border style string {%- endcomment -%}
  {%- assign border_w = block.settings.border_width | default: 1 -%}
  {%- assign border_c = block.settings.border_color | default: 'transparent' -%}

  <div id="selling-out-block-{{ block.id }}" class="selling-out-block" style="
    background-color: {{ block.settings.background_color }};
    padding: {% if has_check_rows %}0{% else %}{{ block.settings.padding }}px{% endif %};
    border-radius: {{ block.settings.border_radius }}px;
    border: {{ border_w }}px solid {{ border_c }};
    text-align: {{ block.settings.text_alignment }};
    margin-top: var(--margin-top);
    margin-bottom: var(--margin-bottom);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  ">

    {% if has_check_rows %}
      {%- comment -%} Checkmark zone — has its own horizontal padding, no bottom padding so divider touches edge {%- endcomment -%}
      <div style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
        padding: {{ block.settings.padding }}px {{ block.settings.padding }}px 10px {{ block.settings.padding }}px;
      ">
        {% if block.settings.check1_text != blank %}
          <div style="display: flex; align-items: center; gap: 5px; flex: 1; min-width: max-content; justify-content: center;">
            <svg width="{{ block.settings.check_icon_size }}" height="{{ block.settings.check_icon_size }}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="flex-shrink:0;">
              <circle cx="12" cy="12" r="10" stroke="{{ block.settings.check_icon_color }}" stroke-width="1.5"/>
              <path d="M7.5 12l3 3 6-6" stroke="{{ block.settings.check_icon_color }}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span style="font-size: {{ block.settings.check_text_size }}px; color: {{ block.settings.check_text_color }}; font-weight: {{ block.settings.check_text_weight }}; white-space: nowrap;">{{ block.settings.check1_text }}</span>
          </div>
        {% endif %}
        {% if block.settings.check2_text != blank %}
          <div style="display: flex; align-items: center; gap: 5px; flex: 1; min-width: max-content; justify-content: center;">
            <svg width="{{ block.settings.check_icon_size }}" height="{{ block.settings.check_icon_size }}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="flex-shrink:0;">
              <circle cx="12" cy="12" r="10" stroke="{{ block.settings.check_icon_color }}" stroke-width="1.5"/>
              <path d="M7.5 12l3 3 6-6" stroke="{{ block.settings.check_icon_color }}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span style="font-size: {{ block.settings.check_text_size }}px; color: {{ block.settings.check_text_color }}; font-weight: {{ block.settings.check_text_weight }}; white-space: nowrap;">{{ block.settings.check2_text }}</span>
          </div>
        {% endif %}
        {% if block.settings.check3_text != blank %}
          <div style="display: flex; align-items: center; gap: 5px; flex: 1; min-width: max-content; justify-content: center;">
            <svg width="{{ block.settings.check_icon_size }}" height="{{ block.settings.check_icon_size }}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="flex-shrink:0;">
              <circle cx="12" cy="12" r="10" stroke="{{ block.settings.check_icon_color }}" stroke-width="1.5"/>
              <path d="M7.5 12l3 3 6-6" stroke="{{ block.settings.check_icon_color }}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span style="font-size: {{ block.settings.check_text_size }}px; color: {{ block.settings.check_text_color }}; font-weight: {{ block.settings.check_text_weight }}; white-space: nowrap;">{{ block.settings.check3_text }}</span>
          </div>
        {% endif %}
      </div>

      {%- comment -%} Divider — full-width or inset based on setting {%- endcomment -%}
      <div style="
        height: 1px;
        background-color: {{ block.settings.divider_color }};
        opacity: {{ block.settings.divider_opacity | divided_by: 100.0 }};
        display: block;
        {% if block.settings.divider_full_width %}
          width: 100%;
        {% else %}
          width: auto;
          margin-left: {{ block.settings.padding }}px;
          margin-right: {{ block.settings.padding }}px;
        {% endif %}
      "></div>

      {%- comment -%} Content zone — restores padding for main text and progress bar {%- endcomment -%}
      <div style="padding: {{ block.settings.padding }}px; padding-top: {{ block.settings.divider_margin_bottom | default: block.settings.padding }}px;">
    {% endif %}

    <!-- Header with icon and title inline -->
    <div style="
      display: flex;
      align-items: center;
      justify-content: {{ block.settings.text_alignment }};
      gap: 6px;
      margin-bottom: 6px;
    ">
      {% if block.settings.show_icon %}
        {% if block.settings.icon_type == 'fire' %}
          <svg width="{{ block.settings.icon_size }}" height="{{ block.settings.icon_size }}" viewBox="0 0 24 24" fill="{{ block.settings.icon_color }}" style="flex-shrink: 0;">
            <path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/>
          </svg>
        {% elsif block.settings.icon_type == 'warning' %}
          <svg width="{{ block.settings.icon_size }}" height="{{ block.settings.icon_size }}" viewBox="0 0 24 24" fill="{{ block.settings.icon_color }}" style="flex-shrink: 0;">
            <circle cx="12" cy="12" r="10"/>
            <path d="M12 8v4m0 4h.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        {% elsif block.settings.icon_type == 'clock' %}
          <svg width="{{ block.settings.icon_size }}" height="{{ block.settings.icon_size }}" viewBox="0 0 24 24" fill="{{ block.settings.icon_color }}" style="flex-shrink: 0;">
            <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
            <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
          </svg>
        {% endif %}
      {% endif %}
      
      {% if block.settings.main_text != blank %}
        <span style="
          font-size: {{ block.settings.title_font_size }}px;
          font-weight: {{ block.settings.title_font_weight }};
          color: {{ block.settings.title_color }};
          text-transform: {{ block.settings.title_transform }};
          letter-spacing: {{ block.settings.title_letter_spacing }}px;
          line-height: 1;
          margin: 0;
        ">
          {{ block.settings.main_text }}
        </span>
      {% endif %}
    </div>
    
    {% if block.settings.subtitle_text != blank %}
      <div style="
        font-size: {{ block.settings.subtitle_font_size }}px;
        color: {{ block.settings.subtitle_color }};
        font-weight: {{ block.settings.subtitle_font_weight }};
        line-height: 1.2;
        margin-bottom: 10px;
      ">
        {{ block.settings.subtitle_text }}
      </div>
    {% endif %}

    {% if block.settings.enable_multiple_bars %}
      <!-- Multiple Progress Bars -->
      <div style="display: flex; flex-direction: column; gap: {{ block.settings.bars_gap }}px;">

        <!-- Bar 1 -->
        {% if block.settings.bar1_title != blank %}
          <div>
            <div style="
              font-size: {{ block.settings.bar_title_size }}px;
              font-weight: {{ block.settings.title_font_weight }};
              margin-bottom: 4px;
              display: flex;
              justify-content: space-between;
              align-items: center;
            ">
              <span style="color: {{ block.settings.title_color }};">{{ block.settings.bar1_title }}</span>
              <span style="
                font-weight: {{ block.settings.title_font_weight }};
                color: {{ block.settings.bar1_status_color }};
              ">{{ block.settings.bar1_status }}</span>
            </div>
            <div style="
              width: 100%;
              height: {{ block.settings.progress_height }}px;
              background-color: {{ block.settings.progress_bg_color }};
              border-radius: {{ block.settings.progress_border_radius }}px;
              overflow: hidden;
              position: relative;
              box-sizing: border-box;
            ">
              {% if block.settings.bar1_percentage > 0 %}
                <div role="progressbar"
                  aria-valuemin="0"
                  aria-valuemax="100"
                  aria-valuenow="{{ block.settings.bar1_percentage }}"
                  style="
                    width: {{ block.settings.bar1_percentage }}%;
                    height: 100%;
                    background-color: {{ block.settings.progress_color }} !important;
                    background: {{ block.settings.progress_color }} !important;
                    border-radius: inherit;
                    display: block;
                    position: relative;
                    z-index: 2;
                    transition: width 0.7s cubic-bezier(.2,.8,.2,1);
                  ">
                </div>
              {% endif %}
            </div>
          </div>
        {% endif %}

        <!-- Bar 2 -->
        {% if block.settings.bar2_title != blank %}
          <div>
            <div style="
              font-size: {{ block.settings.bar_title_size }}px;
              font-weight: {{ block.settings.title_font_weight }};
              margin-bottom: 4px;
              display: flex;
              justify-content: space-between;
              align-items: center;
            ">
              <span style="color: {{ block.settings.title_color }};">{{ block.settings.bar2_title }}</span>
              <span style="
                font-weight: {{ block.settings.title_font_weight }};
                color: {{ block.settings.bar2_status_color }};
              ">{{ block.settings.bar2_status }}</span>
            </div>
            <div style="
              width: 100%;
              height: {{ block.settings.progress_height }}px;
              background-color: {{ block.settings.progress_bg_color }};
              border-radius: {{ block.settings.progress_border_radius }}px;
              overflow: hidden;
              position: relative;
              box-sizing: border-box;
            ">
              {% if block.settings.bar2_percentage > 0 %}
                <div role="progressbar"
                  aria-valuemin="0"
                  aria-valuemax="100"
                  aria-valuenow="{{ block.settings.bar2_percentage }}"
                  style="
                    width: {{ block.settings.bar2_percentage }}%;
                    height: 100%;
                    background-color: {{ block.settings.progress_color }} !important;
                    background: {{ block.settings.progress_color }} !important;
                    border-radius: inherit;
                    display: block;
                    position: relative;
                    z-index: 2;
                    transition: width 0.7s cubic-bezier(.2,.8,.2,1);
                  ">
                </div>
              {% endif %}
            </div>
          </div>
        {% endif %}

        <!-- Bar 3 -->
        {% if block.settings.bar3_title != blank %}
          <div>
            <div style="
              font-size: {{ block.settings.bar_title_size }}px;
              font-weight: {{ block.settings.title_font_weight }};
              margin-bottom: 4px;
              display: flex;
              justify-content: space-between;
              align-items: center;
            ">
              <span style="color: {{ block.settings.title_color }};">{{ block.settings.bar3_title }}</span>
              <span style="
                font-weight: {{ block.settings.title_font_weight }};
                color: {{ block.settings.bar3_status_color }};
              ">{{ block.settings.bar3_status }}</span>
            </div>
            <div style="
              width: 100%;
              height: {{ block.settings.progress_height }}px;
              background-color: {{ block.settings.progress_bg_color }};
              border-radius: {{ block.settings.progress_border_radius }}px;
              overflow: hidden;
              position: relative;
              box-sizing: border-box;
            ">
              {% if block.settings.bar3_percentage > 0 %}
                <div role="progressbar"
                  aria-valuemin="0"
                  aria-valuemax="100"
                  aria-valuenow="{{ block.settings.bar3_percentage }}"
                  style="
                    width: {{ block.settings.bar3_percentage }}%;
                    height: 100%;
                    background-color: {{ block.settings.progress_color }} !important;
                    background: {{ block.settings.progress_color }} !important;
                    border-radius: inherit;
                    display: block;
                    position: relative;
                    z-index: 2;
                    transition: width 0.7s cubic-bezier(.2,.8,.2,1);
                  ">
                </div>
              {% endif %}
            </div>
          </div>
        {% endif %}

      </div>

    {% else %}
      <!-- Single Progress Bar (Original) -->
      <div id="progress-container-{{ block.id }}" style="
        width: 100%;
        height: {{ block.settings.progress_height }}px;
        background-color: {{ block.settings.progress_bg_color }};
        border-radius: {{ block.settings.progress_border_radius }}px;
        overflow: hidden;
        margin-bottom: {% if block.settings.progress_text_position == 'below' %}6px{% else %}0{% endif %};
        position: relative;
        box-sizing: border-box;
      ">
        {% if block.settings.progress_percentage > 0 %}
          <div role="progressbar"
            aria-valuemin="0"
            aria-valuemax="100"
            aria-valuenow="{{ block.settings.progress_percentage }}"
            style="
              width: {{ block.settings.progress_percentage }}%;
              height: 100%;
              background-color: {{ block.settings.progress_color }} !important;
              background: {{ block.settings.progress_color }} !important;
              border-radius: inherit;
              display: block;
              position: relative;
              z-index: 2;
              transition: width 0.7s cubic-bezier(.2,.8,.2,1);
            ">
          </div>
        {% endif %}
        
        <!-- Progress text inside the bar -->
        {% if block.settings.progress_text != blank and block.settings.progress_text_position == 'inside' %}
          <div style="
            position: absolute;
            top: 50%;
            {% if block.settings.progress_text_inside_align == 'left' %}
              left: 8px;
              transform: translateY(-50%);
            {% else %}
              left: 50%;
              transform: translate(-50%, -50%);
            {% endif %}
            font-size: {{ block.settings.progress_text_size }}px;
            color: {{ block.settings.progress_text_color_inside }};
            font-weight: {{ block.settings.progress_text_weight }};
            line-height: 1;
            margin: 0;
            z-index: 3;
            white-space: nowrap;
          ">
            {{ block.settings.progress_percentage }}% {{ block.settings.progress_text }}
          </div>
        {% endif %}
      </div>
    
      <!-- Progress text below the bar -->
      {% if block.settings.progress_text != blank and block.settings.progress_text_position == 'below' %}
        <div style="
          font-size: {{ block.settings.progress_text_size }}px;
          color: {{ block.settings.progress_text_color }};
          font-weight: {{ block.settings.progress_text_weight }};
          line-height: 1;
          margin: 0;
          margin-top: 6px;
          text-align: {{ block.settings.text_alignment }};
        ">
          {{ block.settings.progress_percentage }}% {{ block.settings.progress_text }}
        </div>
      {% endif %}
    {% endif %}

    {% if has_check_rows %}</div>{% endif %}

  </div>

  {% endif %}

</div>