
        <div class="im-cc-wrapper-contents" >

            {{! ***** //Description ***** }}

            {{#if card.txtBlock.description.show}}
            <div class="im-cc-products-description" >{{{product.desc}}}<div class="im-cc-products-description-fade" ></div></div>
            {{/if}}

            {{! ***** //Availability ***** }}

            {{#if product.productAvailabilityShow}}
            <div class="im-cc-products-availability{{#if product.isAvailabilityTypeFixed}} im-cc-products-availability-fixed{{/if}}" >
            {{#if product.isAvailabilityTypeFixed}}
            {{#if product.isStaticAvailValueSet}}
            {{{product.availabilityImage}}}{{{product.availabilityLabel}}}
            {{/if}}
            {{else}}
            {{#if misc.uploadVersion}}
                {{{product.availabilityImage}}}{{{product.availabilityLabel}}}
            {{else}}
            {{#if product.isDynamicAvailValueSet}}
                {{{product.availabilityImage}}}{{{product.availabilityLabel}}}
            {{/if}}
            {{/if}}
            {{/if}}
            </div>
            {{/if}}

            {{! ***** //Options ***** }}

            {{#if product.productOptionsShow}}
            <div class="im-cc-products-options">
                {{#if product.productNoSuboptions}}

                <select 
                    id="{{misc.objectIdPrefix}}product_{{product.productId}}_opt" 
                    style="width: 99%;"
                    onchange="x5engine.cart.ui.updateProductListOptions('{{product.productId}}', this, '{{misc.objectIdPrefix}}product_{{product.productId}}', {{product.isVatIncluded}});"
                    aria-label="{{l10n.product_option}}"
                >
                    {{#each product.options}}
                    <option value="{{id}}">{{{name}}}</option>
                    {{/each}}
                </select>

                {{else}}

                <select 
                    id="{{misc.objectIdPrefix}}product_{{product.productId}}_opt" 
                    style="width: 49%;" 
                    onchange="
                        x5engine.cart.ui.updateProductListOptions('{{product.productId}}', this, '{{misc.objectIdPrefix}}product_{{product.productId}}', {{product.isVatIncluded}});
                        x5engine.cart.htmlProducts.updateSuboptions ( 
                            [
                                {{#each product.options}}
                                {
                                    id: '{{id}}',
                                    name: '{{nameJSEscaped}}', 
                                    weightvar: {{weightvar}}, 
                                    pricevar: {{pricevar}}, 
                                    {{#if suboptions}}
                                    suboptions: [
                                        {{#each suboptionsJSEscaped}}
                                        '{{.}}', 
                                        {{/each}}
                                    ]
                                    {{/if}}
                                },
                                {{/each}}
                            ], 
                            '{{misc.objectIdPrefix}}product_{{product.productId}}_opt', 
                            '{{misc.objectIdPrefix}}product_{{product.productId}}_subopt' 
                        );
                    "
                    aria-label="{{l10n.product_option}}"
                >
                    {{#each product.options}}
                    <option value="{{id}}">{{{name}}}</option>
                    {{/each}}
                </select><!--
                    Don't remove this comment - needed to avoid empty spaces
                --><span style="display:inline-block; width:1%;" >
                </span><!--
                    Don't remove this comment - needed to avoid empty spaces
                --><select 
                    id="{{misc.objectIdPrefix}}product_{{product.productId}}_subopt" 
                    style="width: 49%; " 
                    aria-label="{{l10n.product_suboption}}"
                >
                    {{#with product.options.[0]}}
                    {{#if suboptions}}
                    {{#each suboptions}}
                    <option value="{{@index}}">{{{.}}}</option>
                    {{/each}}
                    {{/if}}
                    {{/with }}
                </select>

                {{/if}}

            </div>
            {{/if}}

            {{! ***** //Wrapper for price, qty, btn and wl ***** }}

            <div class="im-cc-wrapper-row" >

                {{! ***** //Price ***** }}

                {{#if card.txtBlock.details.showPrice}}
                <div class="im-cc-products-price" aria-live="polite">
                    {{#if product.productNotDiscountedRegardlessOfCouponAndQuantity}}
                        <span 
                            id="{{misc.objectIdPrefix}}product_{{product.productId}}_fullprice"
                            class="product_fullprice"
                        >{{product.productSingleFullPriceCurrency}}</span>
                        {{#if card.txtBlock.details.showVat}}
                            <span 
                                class="cc-vatinfo" 
                                style="margin: 3px; font-size: 0.85em;" 
                            >{{product.productVatInfoText}}</span>
                        {{/if}}

                        {{! // Quantity discount }}
                
                        {{#if product.hasQuantityDiscounts}}
                        <div 
                            class="im-cc-products-qty-discount" 
                            onmouseover="
                                x5engine.imTip.Show( 
                                    this , 
                                    {
                                        target : $(this).find('img') ,
                                        text: '<div>{{l10n.cart_discount}}:</div><ul> {{#each product.quantityDiscountTextCartDiscountPerQty}} <li>{{this}}</li> {{/each}} </ul>'
                                    }
                                )
                            " 
                        >
                            <img 
                                {{#if misc.isLazyLoadingEnabled}}loading="lazy"{{/if}}
                                alt="{{l10n.cart_qty_discount}}" 
                                width="16" 
                                height="16" 
                                src="{{misc.currentPath}}res/info.png" 
                            />
                            {{l10n.cart_qty_discount}}
                        </div>
                        {{/if}}

                    {{else}}
                        <span 
                            id="{{misc.objectIdPrefix}}product_{{product.productId}}_price"
                            class="product_price"
                        >{{product.productSinglePriceCurrency}}</span>
                        {{#if card.txtBlock.details.showVat}}
                            <span 
                                class="cc-vatinfo" 
                                style="margin: 3px; font-size: 0.85em;" 
                            >{{product.productVatInfoText}}</span>
                        {{/if}}

                        {{! // Original price with line-through }}
                        <span
                            class="product_fullprice full-price{{#if misc.noFullPriceLineThrough}}--hidden{{/if}}"
                            id="{{misc.objectIdPrefix}}product_{{product.productId}}_fullprice"
                        ><span class="screen-reader-only-even-focused">{{l10n.cart_price_without_discount}}</span>{{product.productSingleFullPriceCurrency}}</span>

                        {{! // Quantity discount }}
                
                        {{#if product.hasQuantityDiscounts}}
                        <button
                            type="button"
                            class="im-cc-products-qty-discount clear-button-style"
                            onmouseover="
                                x5engine.imTip.Show( 
                                    this , 
                                    {
                                        target : $(this).find('img') ,
                                        text: '<div>{{l10n.cart_discount}}:</div><ul> {{#each product.quantityDiscountTextCartDiscountPerQty}} <li>{{this}}</li> {{/each}} </ul>'
                                    }
                                )
                            "
                            onclick="$(this).trigger('mouseover')"
                        >
                            <img 
                                {{#if misc.isLazyLoadingEnabled}}loading="lazy"{{/if}}
                                alt="{{l10n.cart_qty_discount}}" 
                                width="16" 
                                height="16" 
                                src="{{misc.currentPath}}res/info.png" 
                            />
                            {{l10n.cart_qty_discount}}
                        </button>
                        {{/if}}

                        {{#if product.productSingleLowestPriceCurrency}}
                        {{! // Previous price }}
                        <br/><div
                            class="lowest-price"
                        >{{{product.productLowestPriceText}}} <span id="{{misc.objectIdPrefix}}product_{{product.productId}}_lowestprice">{{product.productSingleLowestPriceCurrency}}</span></div>
                        {{/if}}

                    {{/if}}
                </div>
                {{/if}}

                {{! ***** //Paypal Pay Later Container ***** }}

                <div class="im-cc-products-ppcp-pay-later"></div>

                {{! ***** //Quantity ***** }}

                {{#if misc.productQtyShow}}
                <input 
                    {{#if product.productMinQty}}
                    onmouseover="
                        x5engine.imTip.Show(
                            this, 
                            {
                                target: $(this), 
                                text: '{{product.cartMinQtyText}}'
                            }
                        )
                    "
                    {{/if}}
                    type="number" 
                    id="{{misc.objectIdPrefix}}product_{{product.productId}}_qty" 
                    class="im-cc-products-qty"         
                    value="{{#if product.productMinQty}}{{product.productMinQty}}{{else}}1{{/if}}" 
                    min="1" 
                    aria-label="{{l10n.cart_qty}}"
                />
                {{/if}}

                {{! ***** //Buy Button ***** }}

                {{#if card.txtBlock.button.show}}
                <button
                    type="button"
                    class="im-cc-products-button clear-button-style"
                    onclick="
                        x5engine.cart.ui.addToCart(
                            '{{product.productId}}' , 
                            $('#{{misc.objectIdPrefix}}product_{{product.productId}}_qty').val() , 
                            $('#{{misc.objectIdPrefix}}product_{{product.productId}}_opt').val() , 
                            $('#{{misc.objectIdPrefix}}product_{{product.productId}}_subopt').val() ,                 
                            {{#if card.goCartAfterProductAdding}}true{{else}}false{{/if}} , 
                            '{{misc.currentPath}}' 
                        )
                    " 
                >
                    {{#if misc.isAddToCartButtonTypeImage}}
                    <img 
                        {{#if misc.isLazyLoadingEnabled}}loading="lazy"{{/if}}
                        width="{{card.txtBlock.button.image.width}}" 
                        height="{{card.txtBlock.button.image.height}}" 
                        src="{{misc.currentPath}}{{card.txtBlock.button.image.image}}" 
                        alt="{{l10n.cart_add}}" 
                        title="{{l10n.cart_add}}" 
                    />
                    {{else}}
                    {{{l10n.cart_add}}}
                    {{/if}}
                </button>
                {{/if}}

                {{! ***** //Wishlist Button ***** }}

                {{#if card.wishlist.show}}
                <button
                    type="button" 
                    class="im-cc-wishlist-button im-wishlist-add clear-button-style" 
                    onclick="x5engine.cart.htmlProducts.wishlistButtonHandler( '{{product.productId}}', {{#if card.wishlist.addOnly}}false{{else}}true{{/if}} );" 
                    data-product-id="{{product.productId}}"
                    aria-label="{{#if product.isWishlisted}}{{l10n.wishlist_remove_product}}{{else}}{{l10n.wishlist_add_product}}{{/if}}"
                >
                    <svg
                        width="18px" 
                        height="18px" 
                        xmlns="http://www.w3.org/2000/svg" 
                        viewBox="0 0 512 512" 
                        aria-hidden="true"
                    >
                    {{#if product.isWishlisted}}
                        <path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z" />
                    {{else}}
                        <path d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z" />
                    {{/if}}
                    </svg>
                </button>
                {{/if}}

            </div>
            
        </div>
