if (window.customCardProps?.custom_pc) {
	window.run_product_card = function (_this) {
		let lang = document.documentElement.getAttribute("lang");
		const remained = salla.lang.get("pages.products.remained");
		const donationPH = salla.lang.get("pages.products.donation_placeholder");
		const startingPrice = salla.lang.get("pages.products.starting_price");
		const outOfStock = salla.lang.get("pages.products.out_of_stock");
		const calories = salla.lang.get("pages.products.calories");

		_this.product_preview_down = window.customCardProps?.product_preview_down;
		_this.p_atc_btn_hidden = window.customCardProps?.p_atc_btn_hidden;
		_this.product_preview_icon_hide = window.customCardProps?.product_preview_icon_hide;
		_this.preview_text = window.customCardProps?.preview_text;
		_this.is_price_ratio_on = window.customCardProps?.is_price_ratio_on;
		_this.price_ratio_place = window.customCardProps?.price_ratio_place;
		_this.price_ratio_word = window.customCardProps?.price_ratio_word;
		_this.price_ratio_after_word = window.customCardProps?.price_ratio_after_word;
		_this.small_atc = window.customCardProps?.small_atc;
		_this.show_pc_ratings = window.customCardProps?.show_pc_ratings;

		if (_this.show_pc_ratings === "hide") {
			_this.show_pc_ratings = false;
		}

		if (!_this.config) {
			_this.config = {};
			if (window.product_options_in_pc) {
				if (window.single_option_new_shape) {
					_this.config["single-option"] = { type: "button" };
				}
				if (window.multiple_option_new_shape) {
					_this.config["multiple-option"] = { type: "button" };
				}
			}
		}

		let product_ration_html;
		if (_this?.product?.is_on_sale) {
			_this.product_ratio_percent = Math.round(
				((_this.product?.regular_price - _this.product?.sale_price) / _this.product?.regular_price) * 100
			);
			product_ration_html = `
                <div class="sale-ratio-wrapper ${
									_this.price_ratio_place === "down"
										? "price-ratio-down relative"
										: "price-ratio-over badge badge--ribbon badge--primary whitespace-nowrap absolute left-4 right-auto top-4"
								}">
                    <span class="sale-ratio">${_this.price_ratio_word}${_this.product_ratio_percent}%</span>
                </div>`;
		}

		_this.innerHTML = `
            <div class="${_this.horizontal ? `s-product-card-image flex` : ""} product-block__thumb relative ${
			_this.product.rating ? "has-rating" : ""
		}">
                ${
									_this.product.is_on_sale && _this.is_price_ratio_on && _this.price_ratio_place === "over" ? product_ration_html || "" : ""
								}
                ${
									_this.product.promotion_title
										? `<span class="badge badge--ribbon badge--primary absolute right-0 top-0 p-3 rounded-sm my-bg-light">${_this.product.promotion_title}</span>`
										: ""
								}
                ${
									_this.showQuantity && _this.product.quantity
										? `<span class="badge badge--ribbon badge--primary">${remained} ${_this.product.quantity}</span>`
										: ""
								}
                ${
									_this.showQuantity && _this.product.is_out_of_stock
										? `<div class="out-badge ${_this.horizontal ? "" : "max-w-[calc(100%-60px)]"}">${outOfStock}</div>`
										: ""
								}
                <a href="${_this.product.url}" class="thumb-wrapper px-0 flex flex-col" aria-label="${_this.product.name}">
                    <img class="lazy-load ${_this.product.image.url ? "" : "img-null"} ${
			document.body.classList.contains("fake-cls-lazy") ? "" : "lazy"
		} m-auto" width="200" height="200" src="https://cdn.salla.sa/form-builder/8GB0kPNvHGvpOmDhwK8bzTkUn8mgvV4d7K4YTKvM.png" data-src="${
			_this.product.image.url
		}" alt="${_this.product.image.alt}" />
                </a>
                ${
									_this.product_preview_down
										? ""
										: `<div onclick="window.showPreview(this)" data-id="${_this.product.id}" title="عرض سريع" data-img="${_this.product.image.url}" class="showPreviewBtn absolute"><i class="sicon-eye"></i></div>`
								}
            </div>
            ${
							_this.showWishlist
								? `<span class="btn--product-like"><salla-button loader-position="center" shape="icon" size="small" color="danger" class="btn--delete" onclick="salla.wishlist.remove(${_this.product.id})"><i class="sicon-cancel"></i></salla-button></span>`
								: ""
						}
            <form class="relative wide ${
							_this.horizontal ? "s-product-card-content" : "product-block-outer"
						} donating-wrap form product-form" 
                enctype="multipart/form-data" 
                method="post" 
                onchange="salla.product.getPrice(new FormData(event.currentTarget))"
                onsubmit="return salla.form.onSubmit('cart.addItem', event)">
                
                <input type="hidden" name="id" value="${_this.product.id}">
                <input type="hidden" name="quantity" value="1">
                
                <div class="product-block__info pb-1">
                    <a href="${_this.product.url}" class="product-title px-3">
                        <div class="product-category-name"></div>
                        <p class="product-subtitle pc-t">${_this.product.subtitle || ""}</p> 
                        <h3 class="title title--primary title--small my-2 pc-t">${_this.product.name}</h3>
                    </a>
                    ${
											_this.product.rating && _this.show_pc_ratings
												? `<span class="rating-wrapper pc-rating"><salla-rating-stars value="${_this.product.rating.stars}"></salla-rating-stars></span>`
												: ""
										}
                    ${
											_this.product.calories
												? `<div class="font-sm mt-5 mb-10"><i class="d-inline-block sicon-fire color-danger t-red mr-1 ml-0"></i><strong>${_this.product.calories}</strong> ${calories}</div>`
												: ""
										}
                    
                    ${
											_this.product.is_donation
												? `
							<salla-progress-bar donation="${_this.product.is_donation}"></salla-progress-bar>
							<div class="border-color mb-2.5 w-full">
								${
									_this.product.can_donate
										? `
										<label for="donation-amount" class="block text-sm mb-2.5"> 
											قيمة التبرع <span class="text-red-500 t-red">*</span>
										</label>
										<input type="text" data-digits id="donation-amount" name="donating_amount" class="h-9 form-input" placeholder="${donationPH}"/>
									`
										: ""
								}
							</div>
						`
												: ""
										}
                    
                   <div class="price-wrapper mb-2.5 px-2">
                        <div class="flex whitespace-nowrap gap-4 items-center">
                            <div class="${_this.product.is_on_sale ? "" : "hidden"} price_is_on_sale flex items-center gap-2">
                                <h4 class="enhanced-total-price text-red-500 font-bold text-lg inline-block">${salla.money(
																	_this.product.sale_price || 0
																)}</h4>
                                <span class="enhanced-before-price text-gray-400 line-through whitespace-nowrap leading-none">${salla.money(
																	_this.product.regular_price || 0
																)}</span>
                            </div>
                            <div class="starting-or-normal-price gap-4 ${_this.product.is_on_sale ? "hidden" : "flex"}">
                                ${_this.product.starting_price ? `<span class="starting-price-title">${startingPrice}</span>` : ""}
                                <h2 class="enhanced-total-price font-bold text-lg inline-block">${salla.money(
																	_this.product.starting_price || _this.product.price || 0
																)}</h2>
                            </div>
                        </div>
                        <div class="out-of-stock hidden text-sm text-red-600 !opacity-50 font-bold">${outOfStock}</div>
                        ${
													_this.product?.is_on_sale && _this.is_price_ratio_on && _this.price_ratio_place === "down"
														? product_ration_html || ""
														: ""
												}
                    </div>
                    
                    ${
											window.product_options_in_pc || _this.product.options?.length > 0
												? `
							<salla-product-options
								options="${_this.product.options}"
								product-id="${_this.product.id}"
								config='${JSON.stringify(_this.config)}'>
							</salla-product-options>
						`
												: ""
										}
                    
                    ${
											_this.has_count_down
												? `
							<div class="count-down_wrapper inside_product">
								<salla-count-down
									date="${new Date(_this.count_date) / 1000 > Math.floor(Date.now() / 1000) ? `${_this.count_date}` : ``}"
									color="#baf2e5"
									digits="en"
									labeled="true"
									size="md">
								</salla-count-down>
							</div>
						`
												: ""
										}
                    
                    ${
											!_this.hideAddBtn
												? `
							<div class="btn btn--floated btn--add-to-cart btn--add-to-cart ${_this.product.status === "out" ? "disabled" : ""}">
								${
									_this.p_atc_btn_hidden
										? ``
										: `
										<salla-add-product-button 
											class="w-full aaliicon-add-to-cart-outer"
											product-status="${_this.product.status}"
											product-type="${_this.product.type}"
											product-id="${_this.product.id}"
											loader-position="end"
											type="submit"
											${
												_this.product.notify_availability
													? `
													${_this.product.notify_availability.subscribed ? "is-subscribed" : ""}
													channels="${_this.product.notify_availability.channels.join("")}"
													subscribed-options="${JSON.stringify(_this.product.notify_availability.subscribed_options)}"
													${_this.product.notify_availability.options ? "notify-options-availability" : ""}
												`
													: ""
											}
										>
											${_this.product.add_to_cart_label || ""}
										</salla-add-product-button>
									`
								}
                                                                ${
																																	"" == ""
																																		? ""
																																		: `
                                            <salla-quick-buy
                                            product-id="${_this.product.id}"
                                            type="${"plain" || _this.product.type}">
                                            </salla-quick-buy>
                                            `
																																}
							</div>
						`
												: ""
										}
                    
                    ${
											!_this.product_preview_down
												? ``
												: `
							<div onclick="window.showPreview(this);" data-id="${_this.product.id}" title="عرض سريع" data-img="${
														_this.product.image.url
												  }" class="showPreviewBtn static preview-btn-down">
								<i class="sicon-eye mx-1 ${_this.product_preview_icon_hide ? "hidden" : ""}"></i>
								<span class="mx-1">${_this.preview_text}</span>
							</div>
						`
										}
                </div>
            </form>`;
		// handle home page grid view
		// add banner as fifth product card
		setTimeout(() => {
			const parentElement = _this.parentElement;

			if (parentElement?.classList.contains("s-products-list-wrapper")) {
				const children = Array.from(parentElement.children);
				const lastChild = children[children.length - 1];

				if (lastChild === _this) {
					_this.classList.add("last-product-card");
					addBannerAfterLastCard(_this);
				}
			}
		}, 100);

		// دالة للحصول على CSS variable بشكل آمن
		function getCSSVariableValue(varName, fallback = "") {
			try {
				let value = getComputedStyle(document.body).getPropertyValue(varName).trim();

				// إزالة quotes (Safari)
				value = value.replace(/^['"]|['"]$/g, "");

				// استخراج URL من url()
				const urlMatch = value.match(/url\(['"]?(.+?)['"]?\)/);
				if (urlMatch) {
					value = urlMatch[1].trim();
				}

				// 🔧 Safari fix - unescape escaped characters
				value = value.replace(/\\/g, ""); // حذف backslashes
				value = decodeURI(value); // decode URI

				return value && value !== "undefined" ? value : fallback;
			} catch (error) {
				console.warn(`Error getting CSS variable ${varName}:`, error);
				return fallback;
			}
		}

		function addBannerAfterLastCard(_p_card) {
			const parentElement = _p_card.parentElement;

			if (parentElement?.classList.contains("s-products-list-wrapper")) {
				const children = Array.from(parentElement.children);
				const lastChild = children[children.length - 1];

				if (lastChild === _p_card) {
					// احصل على الـ values من theme
					let is_second;
					if (parentElement.closest(".aali-products-tabs")?.classList.contains("tab3")) {
						is_second = "2";
					}
					const bannerImageUrl = getCSSVariableValue(
						`--custom-image${is_second || "1"}`,
						"https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/NKZRyX/zEWlqfJ1duwF5Xd6KsyI8C69uRaq0R5ZkgVUJVPe.jpg"
					);

					const bannerHref = getCSSVariableValue("--custom-title7", "https://antoniosotosar.com/test/page-1208141940");

					// Create banner
					const banner = document.createElement("div");
					banner.classList.add("product-card-banner");
					banner.innerHTML = `
                <a href="${bannerHref}" target="_self" rel="noopener">
                    <img src="${bannerImageUrl}" alt="our story" class="w-full" />
                </a>
            `;

					// Insert banner
					parentElement.insertBefore(banner, _p_card.nextSibling);
					console.log("Banner added", { image: bannerImageUrl, href: bannerHref });
				}
			}
		}
		console.log(_this.config);
	};
}
// transfer footer-tax-wrapper to be inside footer-bottom__inside-footer-top using insertAdjecentelement
let footer_tax = document.querySelector(".store-footer .footer-tax-wrapper");
let footer_top_side = document.querySelector(".store-footer .footer-bottom__inside-footer-top");
footer_top_side.insertAdjacentElement("afterbegin", footer_tax);
// also: transfer .footer-contact > div.block to be inside .footer-social-outer using insertAdjecentelement
let footer_contact_block = document.querySelector(".store-footer .footer-contact > div.block");
footer_contact_block.classList.add("m-auto");
let footer_social_outer = document.querySelector(".store-footer .footer-social-outer");
footer_social_outer.insertAdjacentElement("beforeend", footer_contact_block);
// end transfer footer-tax-wrapper