<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.style == 'style1' %}
    <li class="flex justify-between">
      <div class="content_box rte" style="margin-right:15px">
        <p style="font-size:13px" class="prod__description">
          <strong>
            <span class="highlight">{{ block.settings.giftheadline }}</span> <br>
          </strong>
          {{ block.settings.gifttext }}
        </p>
      </div>

      <div class="img_box" style="width:40%"><img src="{{block.settings.giftimage | img_url: 'compact'}}"></div>
    </li>

    <style>
      .highlight {
          box-shadow: inset 0 -2px {{block.settings.highlight}};
          color: inherit;
          text-decoration: none;
      }
      .justify-between {
          justify-content: space-between;
      }
      .flex {
          display: flex;
      }
    </style>
  {% endif %}
  {% if block.settings.style == 'style2' %}
    <div {{ block.shopify_attributes }} style="border: 1px solid {{ block.settings.border_color }}; padding: 10px; display: flex; align-items: center; justify-content: space-between; border-radius: {{ block.settings.border_radius }}px; height: 80px; line-height: 1;">
      <div style="flex: 0 0 auto; display: flex; align-items: center;">
        {% if block.settings.image %}
          <img
            src="{{ block.settings.image | img_url: 'master' }}"
            alt="{{ block.settings.title }}"
            style="width: 60px; height: 60px;"
          >
        {% endif %}
      </div>
      <div style="flex: 1; padding-left: 10px; text-align: left; display: flex; align-items: center; justify-content: center;">
        <p style="margin: 0; font-weight: bold; font-size: 14px; text-align: left;">{{ block.settings.title }}</p>
      </div>
      <div style="flex: 0 0 auto; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-left: 20px;">
        <p style="margin: 0; text-decoration: line-through; color: grey; margin-bottom: 5px;">
          {{ block.settings.old_price }}
        </p>
        <p style="margin: 0; background-color: {{ block.settings.new_price_bg }}; color: {{ block.settings.new_price_text }}; border-radius: {{ block.settings.new_price_border_radius }}px; padding: 4px 10px; font-size: {{ block.settings.new_price_font_size }}px;">
          {{ block.settings.new_price }}
        </p>
      </div>
    </div>
  {% endif %}
</div>

{% if block.settings.style == 'style3' %}
  {%- assign block_id = block.id | remove: '-' -%}
  <style>
    .giftinfo-s3-{{ block_id }} {
      display: flex;
      align-items: center;
      gap: 16px;
      background: {{ block.settings.s3_bg_color }};
      color: {{ block.settings.s3_text_color }};
      padding: 14px 18px 14px 10px;
      border: 1px {{ block.settings.s3_border_style }} {{ block.settings.s3_border_color }};
      border-radius: {{ block.settings.s3_border_radius }}px;
      overflow: hidden;
      position: relative;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__image-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__image {
      width: 80px;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__image img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      border-radius: var(--corner-media);
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__price {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 6px;
      gap: 0;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__price--inline {
      flex-direction: row;
      align-items: center;
      gap: 6px;
      margin-top: 0;
      flex-shrink: 0;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__strike {
      font-size: 12px;
      text-decoration: line-through;
      opacity: 0.6;
      line-height: 1;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__free {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1;
      margin-top: 3px;
      background: {{ block.settings.s3_free_badge_bg }};
      color: {{ block.settings.s3_free_badge_text }};
      padding: 3px 7px;
      border-radius: {{ block.settings.s3_label_border_radius }}px;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__price--inline .gi-s3__free {
      margin-top: 0;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__content {
      flex: 1;
      min-width: 0;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__heading-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__badge-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      background: {{ block.settings.s3_badge_bg }};
      color: {{ block.settings.s3_badge_text }};
      padding: 3px 8px;
      border-radius: {{ block.settings.s3_label_border_radius }}px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__title {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.3;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__body {
      font-size: 14px;
      line-height: 1.4;
      opacity: 0.85;
    }
    .giftinfo-s3-{{ block_id }} .gi-s3__body p { margin: 0; }
    @media screen and (max-width: 749px) {
      .giftinfo-s3-{{ block_id }} .gi-s3__image { width: 64px; }
      .giftinfo-s3-{{ block_id }} .gi-s3__title { font-size: 14px; }
      .giftinfo-s3-{{ block_id }} .gi-s3__body { font-size: 13px; }
    }
  </style>

  {%- assign price_inline = false -%}
  {%- if block.settings.s3_price_position == 'heading-row' -%}
    {%- assign price_inline = true -%}
  {%- endif -%}

  <div class="giftinfo-s3-{{ block_id }}" {{ block.shopify_attributes }}>
    {%- if block.settings.s3_image != blank -%}
      <div class="gi-s3__image-col">
        <div class="gi-s3__image">
          <img
            src="{{ block.settings.s3_image | image_url: width: 160 }}"
            alt="{{ block.settings.s3_title }}"
            width="160"
            height="160"
            loading="lazy"
          >
        </div>
        {%- unless price_inline -%}
          {%- if block.settings.s3_old_price != blank or block.settings.s3_free_label != blank -%}
            <div class="gi-s3__price">
              {%- if block.settings.s3_old_price != blank -%}
                <span class="gi-s3__strike">{{ block.settings.s3_old_price }}</span>
              {%- endif -%}
              {%- if block.settings.s3_free_label != blank -%}
                <span class="gi-s3__free">{{ block.settings.s3_free_label }}</span>
              {%- endif -%}
            </div>
          {%- endif -%}
        {%- endunless -%}
      </div>
    {%- endif -%}

    <div class="gi-s3__content">
      <div class="gi-s3__heading-row">
        {%- if block.settings.s3_badge_label != blank -%}
          <span class="gi-s3__badge-label">{{ block.settings.s3_badge_label }}</span>
        {%- endif -%}
        {%- if price_inline -%}
          {%- if block.settings.s3_old_price != blank or block.settings.s3_free_label != blank -%}
            <div class="gi-s3__price gi-s3__price--inline">
              {%- if block.settings.s3_old_price != blank -%}
                <span class="gi-s3__strike">{{ block.settings.s3_old_price }}</span>
              {%- endif -%}
              {%- if block.settings.s3_free_label != blank -%}
                <span class="gi-s3__free">{{ block.settings.s3_free_label }}</span>
              {%- endif -%}
            </div>
          {%- endif -%}
        {%- endif -%}
      </div>
      {%- if block.settings.s3_title != blank -%}
        <div class="gi-s3__title">{{ block.settings.s3_title }}</div>
      {%- endif -%}
      {%- if block.settings.s3_body != blank -%}
        <div class="gi-s3__body rte">{{ block.settings.s3_body }}</div>
      {%- endif -%}
    </div>
  </div>
{% endif %}
