{% if true %}
<style>
  .imgcenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-bottom: 20px;
  }
  .checkout-form {
    padding: 5px 20px;
  }
  .checkout-form .mauticform-row {
    width: 100%;
    margin-bottom: 10px;
  }
  .checkout-form .mauticform-label {
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }
  .checkout-form .mauticform-input {
    background-color: rgba(242, 242, 242, 1) !important;
    border-radius: 25px;
    border: none;
    height: 2.8rem;
    margin-top: 2px;
    padding: 4px 12px;
    width: 100%;
  }
  .checkout-form .mauticform-button {
    background-color: #64a944 !important;
    border: 1px solid #64a944 !important;
    border-radius: 25px !important;
    display: flex;
    justify-content: center;
    color: #fff !important;
    cursor: pointer;
    padding: 0.75rem 1.75rem !important;
    width: 100%;
    margin: 0 auto;
    font-size: 1rem;
    margin-top: 1rem;
  }
  .checkout-form .mauticform-button:hover {
    opacity: 0.9;
  }
  .cc_checkout {
    color: #fff;
    background-color: #44980e;
    border-color: #44980e;
  }
  .cc_checkout:hover {
    color: #fff;
    background-color: #44980e;
    border-color: #44980e;
    opacity: 0.9;
  }
</style>
<section class="section-mt ccpricing_main">
  <div class="row">
    <div class="col-12 order-sm-2 col-sm-6 col-lg-4 shadow border-start px-0">
      <div class="position-sticky top-60 p-1 px-0">
        <div class="checkout-form" id="cicis-form">
          <div class="imgcenter">
            {% if page.p_product_headingIcon %} {% picture smallIcon_150
            pages/{{ page.p_product_headingIcon }} class="img-fluid px-2"
            alt="{{ page.p_product_headingIcon | remove: '.png' | remove:
            '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}" %}
            {% endif %}
          </div>

          <!-- <script
            type="text/javascript"
            src="//g1.customerology.com/form/generate.js?id=37"></script> -->
        </div>
        <div id="showbundlecart">
          <div class="px-4">
            <h2 class="m-0">Order Summary</h2>
            <h5 class="text-secondary small m-0">
              Your Total Is Displayed On The Checkout Button
            </h5>
          </div>
          <div
            class="w-100 vh-lg-100 pt-4 overflow-auto"
            id="shopping-cart-Content"
            style="padding-bottom: 300px"></div>
          <div class="position-sticky py-3 bottom-0 w-100 bg-white px-4">
            <button
              class="my-2 p-2 btn cc_checkout flex-wrap justify-content-between w-100 shopping-cart-checkout"
              id="shopping-cart-checkout"
              style="display: flex">
              <span class="px-2">Proceed to checkout</span>
              <span class="px-2" id="shopping-cartValue-checkout">$0.00</span>
            </button>
            <div class="lendica-paylater-container"></div>
            <script>
              lendica.paylater.renderButton();
            </script>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 order-sm-1 col-sm-6 col-lg-8">
      {% if page.ecommerce_list_products %} {% for bundle in
      page.ecommerce_list_products %}
      <div class="row">
        {% if bundle.t_productCard_second %}
        <div
          class="col-12 col-xl-12 px-5 d-flex flex-column align-items-center">
          <div class="position-relative row">
            <div class="col-lg-6">
              <div class="top-img-pos mb-2">
                {% if bundle.i_top %} {% picture cc_home pages/{{ bundle.i_top
                }} alt="{{ bundle.i_top | remove: '.png' | remove: '.webp' |
                remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}" %} {%
                endif %}
              </div>
              <div class="see-btn">
                <a
                  id="t_productCard_second_btn"
                  class="modal-trigger"
                  data-modal=".modal_2"
                  >See how Plum Works</a
                >
              </div>
            </div>
            <div class="col-lg-6">
              <div class="w-100">
                <div
                  class="position-relative text-justifyCenter quoteText"
                  style="border-radius: 25px; padding: 41px 0; height: 26vh">
                  <p style="margin: 0 auto; text-align: center">
                    {{ bundle.t_productCard_second }}
                  </p>
                  {%- if bundle.t_productCard_second_author -%}
                  <h6 class="my-2 text-center">
                    {{ bundle.t_productCard_second_author }}
                  </h6>
                  {%- endif -%}
                </div>

                <div class="row flex-row">
                  <div class="text-center for-btn-width">
                    <a
                      href="https://app.hellosign.com/s/LHbLllAX"
                      class="btn btn-themeColor text-nowrap mt-2 rounded-10 align-items-center"
                      >Click here for your mako agreement</a
                    >
                    <a
                      href="https://docs.google.com/forms/d/e/1FAIpQLScVIzoCkWQkBTzhxmtDDcpEXenbTZ_cNxCUAt_p8Xc9_X0fdw/viewform?usp=sf_link"
                      class="btn btn-themeColor text-nowrap mt-2 rounded-10 align-items-center"
                      >Click here for your Zutek agreement</a
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {% endif %} 
        <!-- {% if bundle.t_productCard_first_header %}
        <div class="col-12 col-xl-12 mt-5">
          <div
            class="card rounded-10 shadow border-0 p-3 text-center relative"
            style="
              background-color: #f2f2f2;
              padding: 35px !important;
              overflow: hidden;
            ">
            <div class="cc_flag_bg">Added to your cart!</div>
            <h3>{{ bundle.t_productCard_first_header }}</h3>
            <p>{{ bundle.t_productCard_first_subheader }}</p>
            <div
              id="cc_Review_slider"
              class="owl-carousel owl-theme for-navigation-btns">
              {% for product in page.product_Items %} {%- if
              product.isBundleProduct -%}
              <div class="card border-0 rounded-10 overflow-hidden mb-3 mt-4">
                <div class="g-0">
                  <div class="col-md-12 flex-column d-flex align-items-center">
                    {% if product.product_image %} {% picture ecommerce_slide
                    pages/{{ product.product_image }} alt="{{
                    product.product_image }}" class="img-fluid rounded-start" %}
                    {% endif %}
                  </div>
                  <div class="col-md-12 text-center flex-column">
                    <div class="card-body">
                      <h5 class="card-title product-bundletitle">
                        {{ product.product_title }}
                      </h5>
                      <span class="card-text text-secondary lineH-1"
                        >{{ product.product_description }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
              {%- endif -%} {% endfor %}
            </div>
            {%- if bundle.v_product_id -%}
            <div class="d-flex justify-content-center prdctBtnsContainer">
              <div
                class="btn-group dropdown prdctQtyContainer"
                data-productquantity="1">
                <button
                  class="btn btn-outline-themeColor showProductQuantity disabled dropdownqty"
                  type="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                  style="display: none">
                  1
                </button>
                <button
                  type="button"
                  class="btn btn-themeColor dropdown-toggle dropdown-toggle-split dropdownqty"
                  data-bs-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  style="display: none"></button>
                <ul
                  class="dropdown-menu text-center productQty"
                  style="min-width: unset">
                  {% if productPart.maxQuantity %} {% assign
                  prdctPartMaxQuantity = productPart.maxQuantity %} {% else %}
                  {% assign prdctPartMaxQuantity = 10 %} {% endif %} {% for qty
                  in (1...10) %}
                  <li>
                    <a
                      class="dropdown-item pointer"
                      onclick="updtProductQuantity(event, {{qty}})"
                      >{{qty}}</a
                    >
                  </li>
                  {% endfor %}
                </ul>
              </div>
              <ul class="d-none bundleFeatures">
                {% for bundleFeature in bundle.t_product_features %}
                <li>{{bundleFeature.t_subheadline}}</li>
                {% endfor %}
              </ul>
              <button
                id="btnPurchaseBundleProduct"
                class="btn ms-2 btn-themeColor d-flex flex-wrap justify-content-between for-double-btns"
                data-productminqty="{% for product in page.product_Items %}
                      {%- if product.isBundleProduct -%}
                        {{ product.minQty }}, 
                      {%- endif -%}
                    {% endfor %}"
                data-ccProductId="{% for product in page.product_Items %}
                            {%- if product.isBundleProduct -%}
                              {{ product.product_id }}, 
                            {%- endif -%}
                          {% endfor %}"
                onclick="addToCart(event)">
                {% assign final_amount = 0 %} {% for product in
                page.product_Items %} {%- if product.isBundleProduct -%} {%
                assign cartamount = product.product_base_price | times:
                product.minQty %} {% assign final_amount = cartamount | plus:
                final_amount %} {%- endif -%} {% endfor %}
                <span class="px-2">${{ final_amount | money }}</span>
                <span class="px-2 for-colord">BUY NOW</span>
              </button>
            </div>
            {%- endif -%}
          </div>
        </div>
        {% endif %} {% if bundle.t_productCard_second_header %} -->
        <!-- <div class="col-12 col-xl-12 mt-5 hide">
          <div
            class="card rounded-10 shadow border-0 p-3 text-center relative"
            style="background-color: #f2f2f2; padding: 35px !important">
            <h3>{{ bundle.t_productCard_second_header }}</h3>
            <p>{{ bundle.t_productCard_second_subheader }}</p>
            <div
              id="cc_second_slider"
              class="owl-carousel owl-theme for-navigation-btns">
              {% for product in page.product_Items %} {%- if
              product.isessBundleProduct == true -%}
              <div class="card border-0 rounded-10 overflow-hidden mb-3 mt-4">
                <div class="g-0">
                  <div class="col-md-12 flex-column d-flex align-items-center">
                    {% if product.product_image %} {% picture ecommerce_slide
                    pages/{{ product.product_image }} alt="{{
                    product.product_image }}" class="img-fluid rounded-start" %}
                    {% endif %}
                  </div>
                  <div class="col-md-12 text-center flex-column">
                    <div class="card-body">
                      <h5 class="card-title product-bundletitle">
                        {{ product.product_title }}
                      </h5>
                      <span class="card-text text-secondary lineH-1"
                        >{{ product.product_description }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
              {%- endif -%} {% endfor %}
            </div>
            {%- if bundle.v_product_id -%}
            <div class="d-flex justify-content-center prdctBtnsContainer">
              <div
                class="btn-group dropdown prdctQtyContainer"
                data-productquantity="1">
                <button
                  class="btn btn-outline-themeColor showProductQuantity disabled dropdownqty"
                  type="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                  style="display: none">
                  1
                </button>
                <button
                  type="button"
                  class="btn btn-themeColor dropdown-toggle dropdown-toggle-split dropdownqty"
                  data-bs-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  style="display: none"></button>
                <ul
                  class="dropdown-menu text-center productQty"
                  style="min-width: unset">
                  {% if productPart.maxQuantity %} {% assign
                  prdctPartMaxQuantity = productPart.maxQuantity %} {% else %}
                  {% assign prdctPartMaxQuantity = 10 %} {% endif %} {% for qty
                  in (1...10) %}
                  <li>
                    <a
                      class="dropdown-item pointer"
                      onclick="updtProductQuantity(event, {{qty}})"
                      >{{qty}}</a
                    >
                  </li>
                  {% endfor %}
                </ul>
              </div>
              <ul class="d-none bundleFeatures">
                {% for bundleFeature in bundle.t_product_features %}
                <li>{{bundleFeature.t_subheadline}}</li>
                {% endfor %}
              </ul>
              <button
                id="btnPurchaseBundleProduct"
                class="btn ms-2 btn-themeColor d-flex flex-wrap justify-content-between for-double-btns"
                data-productminqty="{% for product in page.product_Items %}
                      {%- if product.isessBundleProduct -%}
                        {{ product.minQty }}, 
                      {%- endif -%}
                    {% endfor %}"
                data-ccProductId="{% for product in page.product_Items %}
                            {%- if product.isessBundleProduct -%}
                              {{ product.product_id }}, 
                            {%- endif -%}
                          {% endfor %}"
                onclick="addToCart(event)">
                {% assign final_amount = 0 %} {% for product in
                page.product_Items %} {%- if product.isessBundleProduct -%} {%
                assign cartamount = product.product_base_price | times:
                product.minQty %} {% assign final_amount = cartamount | plus:
                final_amount %} {%- endif -%} {% endfor %}
                <span class="px-2">${{ final_amount | money }}</span>
                <span class="px-2 for-colord">BUY NOW</span>
              </button>
            </div>
            {%- endif -%}
          </div>
        </div>
        {% endif %}
      </div> -->
      {% endfor %} {% endif %}
      <div class="row bg-light gy-5 mt-5 p-5">
        <div class="col-12 my-2 my-md-3 align-items-center">
          <div class="w-100">
            <!-- <h1 class="mb-0 title_addon">{{ page.product_groups_header }}</h1> -->
            <h6 class="text-secondary">
              {{ page.product_groups_description }}
            </h6>
          </div>
        </div>

        {% for product in page.product_Items %} {% if product.isBundleProduct ==
        false and product.isessBundleProduct == false %}
        <div class="col-12 col-lg-6">
          <div class="card p-3 h-100">
            <div
              class="card-img-top d-flex justify-content-center align-items-center h250px">
              {% if product.product_image %} {% picture ecommerce_list pages/{{
              product.product_image }} alt="{{ product.product_image | replace:
              '.webp', '' | replace: '-', ' ' | replace: '_', ' ' }}" %} {% else
              %}
              <img
                class="w-100 h-100 object-fit-contain"
                src="{{ site.url }}/assets/noImageAvailable.webp"
                alt="pos" />
              {% endif %}
            </div>
            <div
              class="card-body d-flex flex-column position-relative justify-content-between">
              <div class="w-100 text-center">
                <h4 class="card-title">{{product.product_title}}</h4>
                <p class="card-text text-justifyCenter">
                  {{product.product_description}}
                </p>
              </div>

              {%- assign product_base_price = product.product_base_price |
              split: '.' -%} {%- assign product_base_priceSize =
              product_base_price | size -%} {%- if product_base_priceSize == 2
              -%} {%- assign product_base_priceDecimalSize = product_base_price
              | last | size -%} {%- else -%} {%- assign
              product_base_priceDecimalSize = 0 -%} {%- endif -%}
              <h6 class="my-3 text-center clr-themeColor">
                ${{ product_base_price | first }}.{%- if
                product_base_priceDecimalSize == 0 -%} 00 {%- elsif
                product_base_priceDecimalSize == 1 -%} {{ product_base_price |
                last }}0 {%- else -%} {{ product_base_price | last }} {%- endif
                -%}
              </h6>
              <div class="d-flex justify-content-around prdctBtnsContainer">
                <div
                  class="btn-group dropdown prdctQtyContainer"
                  data-productQuantity="1">
                  <button
                    class="btn btn-outline-themeColor showProductQuantity disabled dropdownqty"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false">
                    {%- if product.product_id -%} 1 {%- else -%} 0 {%- endif -%}
                  </button>

                  {%- if product.product_id -%}
                  <button
                    type="button"
                    class="btn btn-themeColor dropdown-toggle dropdown-toggle-split dropdownqty"
                    data-bs-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"></button>
                  {%- else -%}
                  <button
                    type="button"
                    disabled
                    class="btn btn-secondary dropdown-toggle dropdown-toggle"></button>
                  {%- endif -%}
                  <ul class="dropdown-menu text-center productQty">
                    {% if product.maxQuantity %} {% assign prdctMaxQuantity =
                    product.maxQuantity %} {% else %} {% assign prdctMaxQuantity
                    = 10 %} {% endif %} {%- if product.product_id -%} {% for qty
                    in (1...10) %}
                    <li>
                      <a
                        class="dropdown-item pointer"
                        onclick="updtProductQuantity(event, {{qty}})"
                        >{{qty}}</a
                      >
                    </li>
                    {% endfor %} {%- endif -%}
                  </ul>
                </div>
                {%- if product.product_id -%}
                <button
                  class="btn btn-outline-themeColor"
                  data-ccProductId="{{ product.product_id }}"
                  onclick="addToCartBundle(event)">
                  Add to cart >
                </button>
                {%- else -%}
                <button class="btn btn-outline-themeColor" disabled>
                  Out of Stock
                </button>
                {%- endif -%}
              </div>
            </div>
          </div>
        </div>
        {% endif %} {% endfor %}
      </div>
    </div>
  </div>
</section>

<input
  type="hidden"
  id="allBundleProductIds"
  value="{% for product in page.product_Items %}{%- if product.isBundleProduct -%}{{ product.product_id }}, {%- endif -%}{% endfor %}" />

{% endif %}
<div class="modal modal_2">
  <div class="modal_transparent_layer modal-close"></div>
  <div
    class="modal_content"
    style="
      padding: 0;
      background-color: transparent;
      max-height: auto;
      border: 0;
    ">
    <span class="close modal-close">×</span>
    <div
      class="modal_content_data"
      style="max-height: unset; overflow: visible">
      <iframe
        style="width: 100%"
        height="500"
        src="https://www.youtube.com/embed/yYv8qLb0V6M"
        title="Plum POS Features"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </div>
  </div>
</div>