<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 == 'kit' %}
  <!-- Kit Style -->
  <div class="premium-attachment-kit">
    <!-- Header -->
    <div class="kit-header">
      <div class="kit-header-left">
        {%- if block.settings.title != blank -%}
          <div class="kit-title-row">
            <h3 class="kit-title">{{ block.settings.title }}</h3>
            {%- if block.settings.show_item_count -%}
              {%- assign item_count = 0 -%}
              {%- if block.settings.item1_name != blank -%}{%- assign item_count = item_count | plus: 1 -%}{%- endif -%}
              {%- if block.settings.item2_name != blank -%}{%- assign item_count = item_count | plus: 1 -%}{%- endif -%}
              {%- if block.settings.item3_name != blank -%}{%- assign item_count = item_count | plus: 1 -%}{%- endif -%}
              {%- if block.settings.item4_name != blank -%}{%- assign item_count = item_count | plus: 1 -%}{%- endif -%}
              <span class="kit-item-count">({{ item_count }} {{ block.settings.kit_item_title }})</span>
            {%- endif -%}
          </div>
        {%- endif -%}
      </div>
      
      <div class="kit-price">
        {%- if block.settings.show_header_original_price and block.settings.header_original_price != blank -%}
          <span class="header-original-price">{{ block.settings.header_original_price }}</span>
        {%- endif -%}
        {%- if block.settings.kit_free_badge != blank -%}
          <span class="free-badge">{{ block.settings.kit_free_badge }}</span>
        {%- endif -%}
      </div>
    </div>

    <!-- Items List -->
    <ul class="kit-items">
      {%- if block.settings.item1_name != blank -%}
        <li class="kit-item">
          {%- if block.settings.item1_image != blank -%}
            <div class="item-icon">
              <img src="{{ block.settings.item1_image | image_url: width: 64 }}" alt="{{ block.settings.item1_name }}" width="32" height="32">
            </div>
          {%- endif -%}
          <div class="item-details">
            <p class="item-name">{{ block.settings.item1_name }}</p>
            <div class="item-pricing">
              {%- if block.settings.item1_discounted_price != blank -%}
                <span class="item-compare-price">{{ block.settings.item1_discounted_price }}</span>
              {%- endif -%}
              {%- if block.settings.item1_original_price != blank -%}
                <span class="item-price">{{ block.settings.item1_original_price }}</span>
              {%- endif -%}
            </div>
          </div>
        </li>
      {%- endif -%}
      
      {%- if block.settings.item2_name != blank -%}
        <li class="kit-item">
          {%- if block.settings.item2_image != blank -%}
            <div class="item-icon">
              <img src="{{ block.settings.item2_image | image_url: width: 64 }}" alt="{{ block.settings.item2_name }}" width="32" height="32">
            </div>
          {%- endif -%}
          <div class="item-details">
            <p class="item-name">{{ block.settings.item2_name }}</p>
            <div class="item-pricing">
              {%- if block.settings.item2_discounted_price != blank -%}
                <span class="item-compare-price">{{ block.settings.item2_discounted_price }}</span>
              {%- endif -%}
              {%- if block.settings.item2_original_price != blank -%}
                <span class="item-price">{{ block.settings.item2_original_price }}</span>
              {%- endif -%}
            </div>
          </div>
        </li>
      {%- endif -%}
      
      {%- if block.settings.item3_name != blank -%}
        <li class="kit-item">
          {%- if block.settings.item3_image != blank -%}
            <div class="item-icon">
              <img src="{{ block.settings.item3_image | image_url: width: 64 }}" alt="{{ block.settings.item3_name }}" width="32" height="32">
            </div>
          {%- endif -%}
          <div class="item-details">
            <p class="item-name">{{ block.settings.item3_name }}</p>
            <div class="item-pricing">
              {%- if block.settings.item3_discounted_price != blank -%}
                <span class="item-compare-price">{{ block.settings.item3_discounted_price }}</span>
              {%- endif -%}
              {%- if block.settings.item3_original_price != blank -%}
                <span class="item-price">{{ block.settings.item3_original_price }}</span>
              {%- endif -%}
            </div>
          </div>
        </li>
      {%- endif -%}
      
      {%- if block.settings.item4_name != blank -%}
        <li class="kit-item">
          {%- if block.settings.item4_image != blank -%}
            <div class="item-icon">
              <img src="{{ block.settings.item4_image | image_url: width: 64 }}" alt="{{ block.settings.item4_name }}" width="32" height="32">
            </div>
          {%- endif -%}
          <div class="item-details">
            <p class="item-name">{{ block.settings.item4_name }}</p>
            <div class="item-pricing">
              {%- if block.settings.item4_discounted_price != blank -%}
                <span class="item-compare-price">{{ block.settings.item4_discounted_price }}</span>
              {%- endif -%}
              {%- if block.settings.item4_original_price != blank -%}
                <span class="item-price">{{ block.settings.item4_original_price }}</span>
              {%- endif -%}
            </div>
          </div>
        </li>
      {%- endif -%}
      
      {%- if block.settings.show_total and block.settings.total_title != blank -%}
        <li class="kit-item total">
          {%- if block.settings.total_image != blank -%}
            <div class="item-icon">
              <img src="{{ block.settings.total_image | image_url: width: 64 }}" alt="{{ block.settings.total_title }}" width="32" height="32">
            </div>
          {%- endif -%}
          <div class="item-details">
            <p class="item-name">{{ block.settings.total_title }}</p>
            <div class="item-pricing">
              {%- if block.settings.total_discounted_price != blank -%}
                <span class="item-compare-price">{{ block.settings.total_discounted_price }}</span>
              {%- endif -%}
              {%- if block.settings.total_original_price != blank -%}
                <span class="item-price">{{ block.settings.total_original_price }}</span>
              {%- endif -%}
            </div>
          </div>
        </li>
      {%- endif -%}
    </ul>

    <!-- Bonus Gift Footer -->
    {%- if block.settings.bonus_title != blank -%}
      <div class="kit-bonus-gift">
        <div class="kit-bonus-gift-inner">
          <div class="kit-bonus-gift-image-wrap">
            {%- if block.settings.bonus_image != blank -%}
              <img src="{{ block.settings.bonus_image | image_url: width: 160 }}" alt="{{ block.settings.bonus_title }}" class="kit-bonus-gift-img" width="80" height="80" loading="lazy">
            {%- endif -%}
            {%- if block.settings.bonus_strike_price != blank or block.settings.bonus_free_label != blank -%}
              <div class="kit-bonus-gift-price-wrap">
                {%- if block.settings.bonus_strike_price != blank -%}
                  <p class="kit-bonus-gift-price-strike">{{ block.settings.bonus_strike_price }}</p>
                {%- endif -%}
                {%- if block.settings.bonus_free_label != blank -%}
                  <p class="kit-bonus-gift-price-free">{{ block.settings.bonus_free_label }}</p>
                {%- endif -%}
              </div>
            {%- endif -%}
          </div>
          <div class="kit-bonus-gift-text">
            {%- if block.settings.bonus_eyebrow != blank -%}
              <p class="kit-bonus-gift-eyebrow">{{ block.settings.bonus_eyebrow }}</p>
            {%- endif -%}
            <p class="kit-bonus-gift-title">{{ block.settings.bonus_title }}</p>
            {%- if block.settings.bonus_description != blank -%}
              <p class="kit-bonus-gift-description">{{ block.settings.bonus_description }}</p>
            {%- endif -%}
          </div>
        </div>
      </div>
    {%- endif -%}

  </div>

{% else %}
  <!-- List Style (Original) -->
  <div class="product-includes">
    <div class="product-includes-container">
      <!-- Title -->
      <div class="product-includes-title">{{ block.settings.title }}</div>
      <!-- Item 1 -->
      {% if block.settings.item1_name != blank %}
        <div class="product-includes-item">
          <div class="item-name">{{ block.settings.item1_name }}</div>
          <div class="item-prices">
            <div class="original-price">{{ block.settings.item1_original_price }}</div>
            <div class="discounted-price">{{ block.settings.item1_discounted_price }}</div>
          </div>
        </div>
      {% endif %}
      <!-- Item 2 -->
      {% if block.settings.item2_name != blank %}
        <div class="product-includes-item">
          <div class="item-name">{{ block.settings.item2_name }}</div>
          <div class="item-prices">
            <div class="original-price">{{ block.settings.item2_original_price }}</div>
            <div class="discounted-price">{{ block.settings.item2_discounted_price }}</div>
          </div>
        </div>
      {% endif %}
      <!-- Item 3 -->
      {% if block.settings.item3_name != blank %}
        <div class="product-includes-item">
          <div class="item-name">{{ block.settings.item3_name }}</div>
          <div class="item-prices">
            <div class="original-price">{{ block.settings.item3_original_price }}</div>
            <div class="discounted-price">{{ block.settings.item3_discounted_price }}</div>
          </div>
        </div>
      {% endif %}
      <!-- Item 4 -->
      {% if block.settings.item4_name != blank %}
        <div class="product-includes-item">
          <div class="item-name">{{ block.settings.item4_name }}</div>
          <div class="item-prices">
            <div class="original-price">{{ block.settings.item4_original_price }}</div>
            <div class="discounted-price">{{ block.settings.item4_discounted_price }}</div>
          </div>
        </div>
      {% endif %}
      <!-- Total -->
      {% if block.settings.total_title != blank %}
        <div class="product-includes-item total">
          <div class="item-name">{{ block.settings.total_title }}</div>
          <div class="item-prices">
            <div class="original-price">{{ block.settings.total_original_price }}</div>
            <div class="discounted-price">{{ block.settings.total_discounted_price }}</div>
          </div>
        </div>
      {% endif %}
    </div>
  </div>
{% endif %}

</div>

{% if block.settings.whats_included_gifts %}
{% render 'auto-add-gifts', block: block %} 
{% endif %}

<style>
/* List Style (Original) */
.product-includes-container {
  font-size: 1.1em;
}
.product-includes-title {
  padding-top: 8px;
  color: {{ block.settings.whatsincludedtitle }};
  font-size: {{ block.settings.whatsincludedtitlesize }}px;
}
.original-price {
  color: {{ block.settings.whatsincludedpricecolor }};
}
.discounted-price {
  text-decoration: line-through;
  color: {{ block.settings.whatsincludedpricecolor2 }};
}
.product-includes-item {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 5px 0;
  line-height: 1.5em;
}
.product-includes-item .item-name {
  grid-column: 1;
}
.item-prices {
  display: flex;
  gap: 8px;
  grid-column: 2;
  padding-left: 40px;
}
.product-includes-item.total {
  border-top: 1px solid #929292;
  font-weight: 700;
  margin-top: 1em;
}

/* Kit Style */
.premium-attachment-kit {
  background-color: {{ block.settings.kit_bg_color | default: '#fef7f7' }};
  border: 1.5px solid {{ block.settings.kit_border_color | default: '#f87171' }};
  border-radius: {{ block.settings.kit_border_radius | default: 8 }}px;
  padding: 4px;
  width: 100%;
  margin: 20px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.kit-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3px;
  padding: 13px;
}

.kit-title {
  font-size: 16px;
  font-weight: bold;
  color: {{ block.settings.kit_text_color | default: '#111827' }};
  margin: 0;
  line-height: 1.2;
}

.kit-item-count {
  font-size: 12px;
  color: {% if block.settings.kit_text_color != blank %}{{ block.settings.kit_text_color | color_lighten: 30 }}{% else %}#6b7280{% endif %};
  font-weight: 500;
  margin-left: 8px;
}

.header-original-price {
  font-size: 14px;
  color: {{ block.settings.whatsincludedpricecolor2 }};
  text-decoration: line-through;
  font-weight: 500;
  margin-right: 8px;
}

.free-badge {
  background-color: {{ block.settings.kit_badge_bg | default: '#dc2626' }};
  color: {{ block.settings.kit_badge_text | default: '#ffffff' }};
  font-weight: 600;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.kit-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kit-item {
  display: flex;
  align-items: center;
  padding: 8px;
  margin: 2px 0;
  background-color: {{ block.settings.kit_item_bg | default: '#ffffff' }};
  border-radius: {{ block.settings.kit_border_radius | default: 8 }}px;
}

.kit-item.total {
  border-top: 1px solid {{ block.settings.kit_border_color | default: '#f87171' }};
  font-weight: 700;
  margin-top: 1em;
  padding-top: 12px;
}

.kit-item .item-details {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-grow: 1;
  justify-content: space-between;
  margin-left: 10px;
}

.item-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.item-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.kit-item .item-name {
  font-size: 14px;
  color: {{ block.settings.kit_text_color | default: '#374151' }};
  margin: 0;
  font-weight: {% if block.settings.kit_item_name_bold %}600{% else %}400{% endif %};
}

.kit-item.total .item-name {
  font-weight: {% if block.settings.kit_total_name_bold %}700{% else %}400{% endif %};
}

.kit-item .item-pricing {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.kit-item .item-price {
  font-size: 13px;
  color: {{ block.settings.kit_text_color | default: '#374151' }};
  font-weight: 500;
}

.kit-item .item-compare-price {
  font-size: 13px;
  color: {% if block.settings.kit_text_color != blank %}{{ block.settings.kit_text_color | color_lighten: 40 }}{% else %}#9ca3af{% endif %};
  text-decoration: line-through;
}

/* Kit Bonus Gift Footer */
.kit-bonus-gift {
  padding: 4px 4px 4px;
}

.kit-bonus-gift-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: {{ block.settings.kit_border_radius | default: 8 }}px;
  border: 1px solid {{ block.settings.kit_border_color | default: '#f87171' }};
  background: {{ block.settings.kit_item_bg | default: '#ffffff' }};
  overflow: hidden;
}

.kit-bonus-gift-image-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: {{ block.settings.kit_bg_color | default: '#fef7f7' }};
  align-self: stretch;
  justify-content: center;
  min-width: 88px;
}

.kit-bonus-gift-img {
  width: 75px;
  height: 75px;
  object-fit: contain;
}

.kit-bonus-gift-price-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kit-bonus-gift-price-strike {
  font-size: 12px;
  color: {{ block.settings.kit_text_color | default: '#374151' }};
  opacity: 0.6;
  text-decoration: line-through;
  margin: 0;
  font-weight: 500;
}

.kit-bonus-gift-price-free {
  font-size: 12px;
  font-weight: 700;
  color: {{ block.settings.kit_badge_bg | default: '#dc2626' }};
  text-transform: uppercase;
  margin: 0;
}

.kit-bonus-gift-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px 0;
}

.kit-bonus-gift-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: {{ block.settings.kit_badge_bg | default: '#dc2626' }};
  text-transform: capitalize;
  margin: 0 0 2px;
}

.kit-bonus-gift-title {
  font-size: 13px;
  font-weight: 700;
  color: {{ block.settings.kit_text_color | default: '#111827' }};
  margin: 0 0 4px;
}

.kit-bonus-gift-description {
  font-size: 11px;
  font-weight: 400;
  color: {{ block.settings.kit_text_color | default: '#374151' }};
  line-height: 1.5;
  margin: 0;
}

@media only screen and (max-width: 768px) {
  .product-includes-container {
    font-size: 1em;
  }
  .kit-title {
    font-size: 15px;
  }
  .kit-item .item-name {
    font-size: 13px;
  }
  .kit-item .item-price, .kit-item .item-compare-price {
    font-size: 12px;
  }
  .header-original-price {
    font-size: 13px;
  }
  .kit-bonus-gift-img {
    width: 60px;
    height: 60px;
  }
  .kit-bonus-gift-image-wrap {
    min-width: 72px;
  }
  .kit-bonus-gift-title {
    font-size: 12px;
  }
  .kit-bonus-gift-description {
    font-size: 10px;
  }
}
</style>