const scriptElement = document.createElement('script');
scriptElement.src = 'https://static.elfsight.com/platform/platform.js';
scriptElement.setAttribute('data-use-service-core', '');
scriptElement.defer = true;
document.head.appendChild(scriptElement);

document.head.insertAdjacentHTML('beforeend', `
    <script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/a56a6352db0674cfc104c0973/0f5c2f7a66357517e18b50a65.js");<\/script>
    `);

// Add CSS for FAQ animations
document.head.insertAdjacentHTML('beforeend', `
    <style>
        .single-faq .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s ease-in-out;
        }
        .single-faq.open .faq-content {
            max-height: 1000px;
            transition: max-height .4s ease-in-out;
        }
    </style>
`);

/*******************************************************************************************/
/* Promotion Banner */
/*******************************************************************************************/
document.addEventListener("DOMContentLoaded", function() {
    var banner = document.querySelector('.promotion-banner__inner');
    if (banner) {
    var li = banner.querySelector('li').cloneNode(true);
    li.style.animationDuration = '0ms';
    banner.querySelector('ul').innerHTML = li.outerHTML;
    banner.querySelector('li').style.animationDuration = '0ms';
    }
    else {
    console.log('No promo banner');
}});

/* Variables and Globals */
var htmlLang = document.documentElement.lang;

var heroSelector = '.advanced-slider--0';
var heroTextInputEn = "Comfortable, Stylish, Breathable.";
var heroTextInputAr = "هوى النفس يطلب بوكسر هوا";

var instaSelector = '.s-block--splitter';
var instaTextAr = 'تبي تشوف أجمل صفحة سوشال ميديا؟';
var instaTextEn = 'Check out our fun content';
var instaLink = 'https://www.instagram.com/hawa__wear/';
var instaHandleAr = 'hawa__wear@';
var instaHandleEn = '@hawa__wear';
var instaImageLinks = [
    'https://d17gg5c5d03gu7.cloudfront.net/projector_insta_dltijr.jpg',
    'https://d17gg5c5d03gu7.cloudfront.net/climb_insta_b0xomj.jpg',
    'https://d17gg5c5d03gu7.cloudfront.net/palm_insta_xyz1v9.jpg',
    'https://d17gg5c5d03gu7.cloudfront.net/insta_last_pic_mfeoiq.jpg'
];


var testimonialSelector = '.dynamic-banner--2';
var testimonialDuration = 10000;
var testimonial1 = `"موضوع البوكسر كان ضايع في حياتي لكن بعد ما جربت بوكسر هوا عرفت نعمة البوكسر المريح."`;
var testimonial1Author = htmlLang == 'en' ? `` : `- هذي من صديق لنا اسمه مجيد`
var testimonial2 = `"جربت بوكسرات وايد وبوكسر هوا بعتمده للابد مريح بشكل كبير"`;
var testimonial2Author = htmlLang == 'en' ? `` : `- هذا بعد صديقنا من البحرين اسمه ناصر`
var testimonial3 = `"مرن جداً و بارد و ناعم. بغير دولابي كله يصير من عندهم"`;
var testimonial3Author = htmlLang == 'en' ? `` : `- هذا سعد مانعرفه شخصياً، بس عميل منبهر`
var testimonial4 = `"الصدق انه افضل بوكسر لبسته بمقارنة البوكسرات والصراويل اللي شريتها صح غالي بس سعره فيه"`;
var testimonial4Author = htmlLang == 'en' ? `` : `- هذا عبدالله بعد تجربه هوا لأول مرة`

var testimonial1En = `"Feels like wearing nothing at all"`;
var testimonial2En = `"The only boxer I look for when I open the drawer"`;
var testimonial3En = `"Unlike anything I've tried"`;
var testimonial4En = `"Like getting first class seats for your balls"`;

var movingUspSelector = '.banners-slider--1';
var movingUspDuration = '45s';
var movingUsptext0En = '"Like wearing nothing at all"';
var movingUsptext0Ar = '"ماتحس إنك لابس شي"';
var movingUsptext1En = 'Delivery within 48 hours in Riyadh';
var movingUsptext1Ar = 'توصيل خلال 48 ساعة في الرياض';
var movingUsptext2En = 'First Pair Guarantee';
var movingUsptext2Ar = 'نضمن لك أول بوكسر';
var movingUsptext3En = 'Hawa moves with you';
var movingUsptext3Ar = 'تحرّك وبوكسر هوا ثابت';
var movingUsptext4En = 'Easy Returns and Exchanges';
var movingUsptext4Ar = 'استرجاع سهل';
var movingUsptext5En = 'Anti-chafing';
var movingUsptext5Ar = 'بوكسر هوا يمنع الاحتكاك';
var movingUsptext6En = '4-way stretch';
var movingUsptext6Ar = 'قماشه بارد، يتمدد ويتمطط على جسمك';

var productCardBoxerSelector = '.fixed-products--4';
var productCardSocksSelector = '.s-block--special-products-slider--6';

var productCardBoxerTagEn = 'Boxers';
var productCardBoxerTagAr = 'بوكسر';
var productCardSocksTagEn = 'Socks';
var productCardSocksTagAr = 'شراب';

var productCardBoxer1Img1 = 'https://cdn.salla.sa/VqPVWj/7d75f41e-13a6-4010-9aa8-1e51e60b6473-500x500-Z2l3neuOqXvaCGmVbiM3RelKaUNMCqCq2T8CtGCm.jpg';
var productCardBoxer4Img1 = 'https://cdn.salla.sa/VqPVWj/4f04b106-29a8-45f7-8b49-1d1176be592f-500x500-k3HtpBryu4CE1xEgWqHypHP9XV8DIQ6k7jH4NWZk.jpg';
var productCardBoxer8Img1 = 'https://cdn.salla.sa/VqPVWj/0d0953d6-a63b-405d-93d9-7660c8d5c0f8-500x500-q7yQHsa36yjLM2FLNiTpGgCLL8gBLUDKEWn438CA.jpg';
var productCardBoxer12Img1 = 'https://cdn.salla.sa/VqPVWj/037b27c0-36a7-480b-b33e-561ad4f2dc9e-500x500-M8QtuYb81KZt2xatiuhDEovkNKStxHsdW2gPBNHq.jpg';
var productCardBoxerAllImg2 = 'https://cdn.salla.sa/VqPVWj/lltQRMuXyOmi3q0DLxth9K9W8iWaFqVap4YngDyh.jpg';

var productCard12SocksImg1 = 'https://cdn.salla.sa/VqPVWj/9HoDGFsrzRwROFGXnpptbXh6pL3FRo8FXPrWlWPD.png';
var productCard12SocksImg2 = 'https://cdn.salla.sa/VqPVWj/ZXjsZFiSMsmMseQln0T3IomrOndVw0VpTa1G15s6.png';
var productCard6SocksImg1 = 'https://cdn.salla.sa/VqPVWj/GmDW9Tb2JtFPSb55LrTBxuFc5SAFKMNF1xSxjoY8.png';
var productCard6SocksImg2 = 'https://cdn.salla.sa/VqPVWj/ZXjsZFiSMsmMseQln0T3IomrOndVw0VpTa1G15s6.png';
var productCard3SocksImg1 = 'https://cdn.salla.sa/VqPVWj/EGwBqQ1r7bKfLWLyqFBS1jpiKPRd2fF2YPrqTKpx.png';
var productCard3SocksImg2 = 'https://cdn.salla.sa/VqPVWj/ZXjsZFiSMsmMseQln0T3IomrOndVw0VpTa1G15s6.png';

var hawa7Selector = '#product-2130693625';
var hawa4Selector = '#product-2130693625';
var hawa8Selector = '#product-271747864';
var hawa12Selector = '#product-1306857438';
var hawa1SelectorBlack = '#product-50512583';
var hawa4SelectorBlack = '#product-723306792';
var hawa8SelectorBlack = '#product-2067310458';
var hawa12SelectorBlack = '#product-1727535782';
var hawa1Selector = '#product-1716601874';
var hawaSocks3Selector = '#product-993846978';
var hawaSocks6Selector = '#product-1289312965';
var hawaSocks12Selector = '#product-985861124';

var hawa7Stars = '(10+)';
var hawa1Stars = '(11+)';
var hawaSocks3Stars = '(12+)';
var hawaSocks6Stars = '(13+)';
var hawaSocks12Stars = '(14+)';

var aboutBannerSelector = '.advanced-slider--8';
var sockBannerSelector = '.advanced-slider--5';

var reviewerAr = 'مشتري موثق';
var reviewerEn = 'Verified Buyer';


var shippingHeadline = "Shipping";
var shippingContent = `Riyadh: within 48 hours
Dammam and Jeddah: within 3 days
Other: 3-6 days
Gulf Countries: within 2 weeks maximum`;

var careInstructionsHeadline = "Care instructions";
var careInstructionsContent = `Cold wash with temprature not exceeding 35 celsius
Air dry 
Avoid dryer, bleach, ironing and dry cleaning`;

var firstPairGuaranteeHeadline = "First Pair Guarantee";
var firstPairGuaranteeContent = `If you don't love your first pair, we will send you a different size or issue a full refund - no return required`;

var fabricHeadline = "Fabric";
var fabricContent = `91% Lenzing&#8482 Modal
9% Elastane`;

if (htmlLang === "en") {
    shippingHeadline = "Shipping";
    shippingContent = `
    All orders are pre-orders and the expected shipping date is September 25

    Riyadh: within 48 hours
    Dammam and Jeddah: within 3 days
    Other: 3-6 days
    Gulf Countries: within 2 weeks maximum`;
    careInstructionsHeadline = "Care instructions";
    careInstructionsContent = `Cold wash with temperature not exceeding 35 celsius
    Air dry
    Avoid dryer, bleach, ironing and dry cleaning`;
    firstPairGuaranteeHeadline = "First Pair Guarantee";
    firstPairGuaranteeContent = `If you don't love your first pair, we will send you a different size or issue a full refund - no return required. `;
    firstPairGuaranteeLinkText = `Hawa's Guarantee Policy`;
    firstPairGuaranteeLinkUrl = `https://hawa.co/en/return-policy/page-1642404213`;
    fabricHeadline = "Fabric";
    fabricContent = `91% Lenzing&#8482 Modal
9% Elastane`;
    
} else if (htmlLang === "ar") {
    shippingHeadline = "الشحن والتوصيل";
    shippingContent = `
    مدة التوصيل (بعد شحن الطلب):
    - داخل الرياض: خلال 48 ساعة
    - الدمام وجدة: خلال ثلاث أيام كحد أقصى
    - باقي مدن المملكة: 3 - 6 أيام 
    - دول الخليج: خلال أسبوعين كحد أقصى`;
    careInstructionsHeadline = "تعليمات الغسيل ياجميل";
    careInstructionsContent = `استخدم مويه حرارتها معتدلة وماتتعدى الـ35 مئوية. 
الهواء الطلق كفيل بتنشيف بوكسرات هوا.
تجنب استخدام النشافة، ومبيض الغسيل، والكوي، والغسيل الجاف.`;
    firstPairGuaranteeHeadline = "ضمان على هواك";
    firstPairGuaranteeContent = `نضمن لك انك بتحب بوكسرات هوا، 
وفي حال ما ناسبك أول بوكسر، 
 أبد خله عندك وفلوسك ترجع لك.

 `;
    firstPairGuaranteeLinkText = `للمزيد: سياسة الضمان`;
    firstPairGuaranteeLinkUrl = `https://hawa.co/ar/return-policy/page-1642404213`;
    fabricHeadline = "تركيبة القماش";
    fabricContent = `91% مودال (&#8482Lenzing)
9% إيلاستين`;
} 

// National Day Changes
var productSubtitle = "تخيل إن جودة حياتك بتتحسن بعد ما تلبسه";
// var productSubtitle = "طلب مسبق - التاريخ المتوقع للشحن هو 25 سبتمبر";

if (htmlLang === "en") {
    productSubtitle = "Experience life-changing comfort";
    // productSubtitle = "Pre-order - Expected to ship around September 25";
}

// Variables for the main heading and description
var mainHeading = "ليش هوا؟";
var mainDescription = "";

var subHeading1 = "The Fit";
var subHeading2 = "The Fabric";
var subHeading3 = "The Design";

if (htmlLang === "ar") {
    mainHeading = "ليش هوا؟";
    mainDescription = "";

    subHeading1 = "القصّه";
    subHeading2 = "القماش";
    subHeading3 = "التصميم";
}

var firstItemImageSrc = "https://cdn.salla.sa/form-builder/eu3Mo3cDR9WFHG1gLfXJ7Vfq2OMOj7bMMrhIOysR.png";
var firstItemImageAlt = "شيّال وميّال";
var firstItemHeading = "شيّال وميّال";
var firstItemDescription = "يشيل همومك ويتمايل مع منعطفات جسمك";

var secondItemImageSrc = "https://cdn.salla.sa/form-builder/EjmWUttQZasb5gmrFMtqUiRsHcI3khWRKGz8RTCm.png";
var secondItemImageAlt = "يفهمك وتفهمه";
var secondItemHeading = "يفهمك وتفهمه";
var secondItemDescription = "قماشنا مودال: يفهم إنه أنعم وأريح من القطن";

var thirdItemImageSrc = "https://cdn.salla.sa/form-builder/VdPwzxjUV1RCIXHTwJjtUmLEcoOUpkMPfukPFVXR.png";
var thirdItemImageAlt = "تحرّك وهو ثابت";
var thirdItemHeading = "تحرّك وهو ثابت";
var thirdItemDescription = "بمكانه زي ماهو ومريح ومايحكحك";

// Variables for the section based on language (English and Arabic)
if (htmlLang === "en") {
    firstItemImageAlt = "Supportive and Flexible";
    firstItemHeading = "Supportive and Flexible";
    firstItemDescription = "Keeps you comfortable while moving with the natural contours of your body.";

    secondItemImageAlt = "Understands You";
    secondItemHeading = "Understands You";
    secondItemDescription = "Our Modal fabric knows it's softer and more comfortable than cotton.";

    thirdItemImageAlt = "Move and It Stays";
    thirdItemHeading = "Move and It Stays";
    thirdItemDescription = "Comfortable and stays in place, no rubbing or chafing.";

} else if (htmlLang === "ar") {
    firstItemImageAlt = "شيّال وميّال";
    firstItemHeading = "شيّال وميّال";
    firstItemDescription = "يشيل همومك ويتمايل مع منعطفات جسمك";

    secondItemImageAlt = "يفهمك وتفهمه";
    secondItemHeading = "يفهمك وتفهمه";
    secondItemDescription = "قماشنا مودال: يفهم إنه أنعم وأريح من القطن";

    thirdItemImageAlt = "تحرّك وهو ثابت";
    thirdItemHeading = "تحرّك وهو ثابت";
    thirdItemDescription = "بمكانه زي ماهو ومريح ومايحكحك";
}

/* Functions */
function waitForElement(selector, callback) {
    var element = document.querySelector(selector);
    if (element) {
        callback(element);
    } else {
        setTimeout(() => waitForElement(selector, callback), 100);
    }
};

function waitForElement2(selector, callback) {
    var element = document.querySelector(selector);
    if (element) {
        callback(element);
    } else {
        setTimeout(() => waitForElement(selector, callback), 50);
    }
};

function handleScrollAnimatedElements(selector, callback) {
    var observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                callback(entry.target);
                observer.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.1 // Trigger when at least 10% of the element is visible
    });
  
    function observeElements() {
        document.querySelectorAll(selector).forEach(element => {
            observer.observe(element);
        });
    }
  
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', observeElements);
    } else {
        observeElements();
    }
  };

 
    // Add this new function to handle modal event listeners
    function setupSizeGuideEventListeners(modalOverlay) {
        // Get the size guide link and close button
        var sizeGuideLink = document.querySelector('.size-guide-link-div');
        var closeButton = modalOverlay.querySelector('.modal-close');

        // Show modal when clicking the size guide link
        sizeGuideLink.addEventListener('click', (e) => {
            e.preventDefault();
            modalOverlay.style.display = 'flex';
        });

        // Hide modal when clicking the close button
        closeButton.addEventListener('click', () => {
            modalOverlay.style.display = 'none';
        });

        // Hide modal when clicking outside the content
        modalOverlay.addEventListener('click', (e) => {
            if (e.target === modalOverlay) {
                modalOverlay.style.display = 'none';
            }
        });
    }

    // Function to convert Arabic numerals to standard numerals
    function convertArabicToStandard(str) {
        return str.replace(/[0-9]/g, d => '0123456789'.indexOf(d));
    }

    // Add input event handlers to convert Arabic numerals
    var setupNumericInputs = (modalOverlay) => {
        var inputs = modalOverlay.querySelectorAll('input[type="number"]');
        inputs.forEach(input => {
            input.addEventListener('input', (e) => {
                var value = convertArabicToStandard(e.target.value);
                if (value !== e.target.value) {
                    e.target.value = value;
                }
            });
        });
    };

    function createSizeGuideModal() {
        var modalOverlay = document.createElement('div');
        modalOverlay.className = 'modal-overlay';
        modalOverlay.style.display = 'none';

        var modalContent = document.createElement('div');
        modalContent.className = 'modal-content';
        
        // Create the questionnaire form
        modalContent.innerHTML = `
            <div class="size-questionnaire">
                <form id="sizeQuestionnaireForm">
                    <div class="question-group">
                    <label for="height">${htmlLang === 'ar' ? 'كم طولك (سم)؟' : 'How tall are you (cm)?'}</label>
                    <input type="text" inputmode="numeric" pattern="[0-90-9]*" id="height" required min="100" max="250">
                    </div>
                    
                    <div class="question-group">
                        <label for="weight">${htmlLang === 'ar' ? 'كم وزنك (كجم)؟' : 'What is your weight (kg)?'}</label>
                        <input type="text" inputmode="numeric" pattern="[0-90-9]*" id="weight" required min="30" max="200">
                    </div>
                    
                    <div class="question-group body-type">
                        <label>${htmlLang === 'ar' ? 'كيف تشوف تركيبة جسمك؟' : 'What is your body type?'}</label>
                        <div class="body-type-options">
                            <button type="button" class="body-type-btn" data-type="balanced">
                                <img src="https://d17gg5c5d03gu7.cloudfront.net/vertical.png" alt="Balanced">
                                <span>${htmlLang === 'ar' ? 'متناسقة' : 'Balanced'}</span>
                            </button>
                            <button type="button" class="body-type-btn" data-type="pear">
                                <img src="https://d17gg5c5d03gu7.cloudfront.net/pear+(1).png" alt="Pear">
                                <span>${htmlLang === 'ar' ? 'أكبر تحت الخصر' : 'Pear'}</span>
                            </button>
                            <button type="button" class="body-type-btn" data-type="apple">
                                <img src="https://d17gg5c5d03gu7.cloudfront.net/apple+(1).png" alt="Apple">
                                <span>${htmlLang === 'ar' ? 'أكبر فوق الخصر' : 'Apple'}</span>
                            </button>
                        </div>
                    </div>

                    <input type="hidden" id="selectedBodyType">
                    <button type="submit" class="submit-btn">${htmlLang === 'ar' ? 'وش مقاسي؟' : 'Get Size Recommendation'}</button>
                </form>
                
                <div id="sizeResult" style="display: none;">
                    <h3>${htmlLang === 'ar' ? 'مقاسك الموصى به هو:' : 'Your recommended size is:'}</h3>
                    <div class="size-recommendation"></div>
                    <div class="size-recommendation-note">
                        <span>${htmlLang === 'ar' ? 'توصيتنا بإذن الله صح، نسبة الاستبدال عندنا بسبب المقاس اقل من 1%' : 'Our calculator is pretty accurate, exchange rate for this size is less than 1%'}</span>
                        <br>
                        <span>${htmlLang === 'ar' ? 'واذا المقاس ما ناسبك لا تشيل هم لان ضمان هوا يغطيك' : 'And if the size is not right, don\'t worry, because Hawa\'s Guarantee covers you.'}</span>
                        <br>
                        <a class="size-recommendation-link" href="https://hawa.co/${htmlLang === 'ar' ? 'ar' : 'en'}/return-policy/page-1642404213">${htmlLang === 'ar' ? 'للمزيد عن ضمان هوا' : 'For more information about Hawa\'s Guarantee'}</a>
                    </div>
                    <button class="start-over-btn">${htmlLang === 'ar' ? 'ابدأ من جديد' : 'Start Over'}</button>
                </div>
            </div>
            <button class="modal-close"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg></button>
        `;

        modalOverlay.appendChild(modalContent);
        setupQuestionnaireListeners(modalOverlay);
        return modalOverlay;
    }

    // Global store for calculator results
    window.calculatorResults = window.calculatorResults || [];

    function setupQuestionnaireListeners(modalOverlay) {
        var form = modalOverlay.querySelector('#sizeQuestionnaireForm');
        var bodyTypeBtns = modalOverlay.querySelectorAll('.body-type-btn');
        var sizeResult = modalOverlay.querySelector('#sizeResult');
        var startOverBtn = modalOverlay.querySelector('.start-over-btn');
        var selectedBodyTypeInput = modalOverlay.querySelector('#selectedBodyType');

        // Function to get user data if logged in
        async function getUserData() {
            try {
                const response = await salla.auth.event.loggedIn();
                return response.data;
            } catch (error) {
                return null;
            }
        }

        // Function to store calculator data in localStorage
        function storeCalculatorData(data) {
            const storedData = JSON.parse(localStorage.getItem('calculatorResults') || '[]');
            storedData.push(data);
            console.log(storedData);
            localStorage.setItem('calculatorResults', JSON.stringify(storedData));
            console.log('Calculator data stored for later sending');
        }

        // Function to log calculator event
        async function logCalculatorEvent(inputs, recommendedSize) {
            const calculatorData = {
                timestamp: new Date().toISOString(),
                inputs: inputs,
                recommendedSize: recommendedSize
            };

            // Check if user is already logged in
            const userData = await getUserData();
            if (userData) {
                console.log('Customer is logged in');
                // User is logged in, send data immediately
                try {
                    await fetch('https://hawa-wear.app.n8n.cloud/webhook/097239df-c478-4922-96bb-3d761c456a9b', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            ...calculatorData,
                            user: userData
                        })
                    });
                    console.log('Calculator data sent successfully with user data');
                } catch (error) {
                    console.error('Failed to send calculator data:', error);
                }
            } else {
                // User is not logged in, store the calculation in localStorage
                storeCalculatorData(calculatorData);
                console.log('Calculator data stored for later sending');
            }
        }

        // Body type button selection
        bodyTypeBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                bodyTypeBtns.forEach(b => b.classList.remove('selected'));
                btn.classList.add('selected');
                selectedBodyTypeInput.value = btn.dataset.type;
            });
        });

        // Add numeric input handling
        setupNumericInputs(modalOverlay);

        // Update form submission to handle Arabic numerals
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            var height = parseInt(convertArabicToStandard(form.querySelector('#height').value));
            var weight = parseInt(convertArabicToStandard(form.querySelector('#weight').value));
            var bodyType = selectedBodyTypeInput.value;

            var recommendedSize = calculateSize(height, weight, bodyType);
            
            // Show the result immediately
            form.style.display = 'none';
            sizeResult.style.display = 'block';
            sizeResult.querySelector('.size-recommendation').innerHTML = recommendedSize;

            // Log the calculator event separately (non-blocking)
            logCalculatorEvent({
                height,
                weight,
                bodyType
            }, recommendedSize).catch(error => {
                console.error('Error logging calculator event:', error);
            });
        });

        // Start over button
        startOverBtn.addEventListener('click', () => {
            form.reset();
            bodyTypeBtns.forEach(btn => btn.classList.remove('selected'));
            form.style.display = 'block';
            sizeResult.style.display = 'none';
        });
    }


    salla.onReady(() => {
        salla.event.auth.onVerified(async () => {
          console.log('Customer is logged in event listener');
          try {
            const response = await salla.auth.event.loggedIn();
            const userData = response.data;
      
            const storedCalculations = JSON.parse(localStorage.getItem('calculatorResults') || '[]');
      
            if (storedCalculations.length > 0 && userData) {
              console.log(`Found ${storedCalculations.length} stored calculations to process`);
      
              for (const calculatorData of storedCalculations) {
                try {
                  await fetch('https://hawa-wear.app.n8n.cloud/webhook/097239df-c478-4922-96bb-3d761c456a9b', {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                      ...calculatorData,
                      user: userData
                    })
                  });
                  console.log('Stored calculator data sent successfully');
                } catch (error) {
                  console.error('Failed to send stored calculator data:', error);
                }
              }
      
              localStorage.removeItem('calculatorResults');
            }
          } catch (error) {
            console.error('Error processing stored calculations:', error);
          }
        });
      });

    // JavaScript function to recommend size based on linear regression coefficients
    function calculateSize(height, weight, bodyType) {
        // Input validation
        if (!height || !weight || !bodyType) {
        throw new Error('All parameters are required');
        }
        
        if (typeof height !== 'number' || typeof weight !== 'number') {
        throw new Error('Height and weight must be numbers');
        }
        
        if (!['apple', 'pear', 'balanced'].includes(bodyType)) {
        throw new Error('Body type must be one of: apple, pear, balanced');
        }
        
        // Calculate BMI
        var bmi = weight / Math.pow(height/100, 2);
        
        // Helper arrays and functions
        var sizes = ['S', 'M', 'L', 'XL', '2XL', '3XL'];
        var bmiRanges = [
            { max: 22.5, size: 'S' },
            { max: 25.5, size: 'M' },
            { max: 29.25, size: 'L' },
            { max: 33.5, size: 'XL' },
            { max: 39.5, size: '2XL' },
            { max: 45, size: '3XL' },
            { max: Infinity, size: htmlLang === 'ar' ? 'المقاس غير متوفر' : 'Size is not available' }
        ];
        
        // Determine if BMI is near a threshold
        var threshold = 0.485;
        var threshold2 = 0.625;
        let baseSize;
        let alternateSize = null;
        let bmiAdjustement = 1;

        // Height BMI Adjustments
        if (height > 185 && bmi < 23) {
            bmiAdjustement += 0.12;
        } 
        else if (height > 185 && bmi < 26) {
            bmiAdjustement += 0.07;
        } 
        else if (height > 185 && bmi >= 26) {
            bmiAdjustement += 0.05;
        }
        else if (height > 180 && height <= 185 && bmi < 23) {
            bmiAdjustement += 0.1;
        }
        else if (height > 180 && height <= 185 && bmi < 26) {
            bmiAdjustement += 0.05;
        }
        else if (height > 180 && height <= 185 && bmi >= 26) {
            bmiAdjustement += 0.035;
        }
        else if (height >= 165 && height < 170) {
            bmiAdjustement -= 0.04;
        }
        else if (height < 165) {
            bmiAdjustement -= 0.07;
        }

        // Body Type BMI Adjustments
        if (bodyType === 'apple' && bmi > 30) {
            bmiAdjustement -= ((bmi/45)*0.08);
        }
        else if (bodyType === 'pear' && bmi > 24.5) {
            bmiAdjustement += ((bmi/45)*0.08);
        }

        bmi = bmi * bmiAdjustement;

        // Find the appropriate size range and check for edge cases
        for (let i = 0; i < bmiRanges.length; i++) {
            if (bmi <= bmiRanges[i].max) {
                baseSize = bmiRanges[i].size;
                
                if (baseSize === 'XL') {
                    // Check if we're near a boundary for alternate size suggestion
                    if (i > 0 && Math.abs(bmi - bmiRanges[i-1].max) <= threshold) {
                        alternateSize = bmiRanges[i-1].size;
                    }
                    else if (i < bmiRanges.length - 1 && Math.abs(bmi - bmiRanges[i].max) <= threshold2) {
                        alternateSize = bmiRanges[i+1].size;
                    }
                    break;
                }
                else if (baseSize === '2XL' || baseSize === '3XL') {
                    // Check if we're near a boundary for alternate size suggestion
                    if (i > 0 && Math.abs(bmi - bmiRanges[i-1].max) <= threshold2) {
                        alternateSize = bmiRanges[i-1].size;
                    }
                    else if (i < bmiRanges.length - 1 && Math.abs(bmi - bmiRanges[i].max) <= threshold2) {
                        alternateSize = bmiRanges[i+1].size;
                    }
                    break;
                }
                else {
                    if (i > 0 && Math.abs(bmi - bmiRanges[i-1].max) <= threshold) {
                        alternateSize = bmiRanges[i-1].size;
                    }
                    else if (i < bmiRanges.length - 1 && Math.abs(bmi - bmiRanges[i].max) <= threshold) {
                        alternateSize = bmiRanges[i+1].size;
                    }
                    break;
                }
            }
        }

        let finalSize = baseSize;
        let finalAlternateSize = alternateSize;
        
        // Return both sizes if there's an alternate, otherwise just the final size
        return finalAlternateSize ? 
        (htmlLang === 'ar' ? 
            `<span class="size-recommendation-main">${finalSize} أو ${finalAlternateSize}</span>
            <span class="size-recommendation-note">اختار المقاس الاصغر اذا تفضل يكون البوكسر ماسك أكثر</span>` :
            `<span class="size-recommendation-main">${finalSize} or ${finalAlternateSize}</span>
            <span class="size-recommendation-note">Go for the smaller size if you want a more snug fit.</span>`)
        : 
        (htmlLang === 'ar' ? `${finalSize}` : `${finalSize}`);
    }

    
document.addEventListener("DOMContentLoaded", function() {
/*******************************************************************************************/
/*******************************************************************************************/
/*******************************************************************************************/
/*************************** ALL PAGES CUSTOMIZATION SECTION 1 ****************************************/ 
/*******************************************************************************************/
/*******************************************************************************************/
/*******************************************************************************************/

/*******************************************************************************************/
/* Remove Reviews Pic */
/*******************************************************************************************/
var images = document.querySelectorAll('img.object-cover.mx-2.rounded-full.w-14.h-14');
images.forEach(function(image) {
    image.parentNode.removeChild(image);
});

/*******************************************************************************************/
/* Change User Avatar */
/*******************************************************************************************/

waitForElement2('.s-user-menu-avatar-wrap', (el) => {
    var avatarDivs = document.querySelectorAll('.s-user-menu-avatar-wrap');
    avatarDivs.forEach(avatarDiv => {
        if (avatarDiv) {
            avatarDiv.querySelector("img").remove();
            var iconElement = document.createElement('i');
            iconElement.classList.add('header-btn__icon', 'sicon-user');
            avatarDiv.appendChild(iconElement);
        }
        else {
            console.log("couldn't find avatar element");
        }
    });
  });



/*******************************************************************************************/
/* Language Selector */ 
/*******************************************************************************************/
var buttonElement = document.createElement('button');
buttonElement.type = 'button';
buttonElement.setAttribute('onclick', "if (!window.__cfRLUnblockHandlers) return false; salla.event.dispatch('localization::open')");
buttonElement.classList.add('grow', 'flex', 'items-center');
var iconElement = document.createElement('i');
iconElement.classList.add('sicon-earth', 'rtl:ml-1', 'ltr:mr-1');
buttonElement.appendChild(iconElement);

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

if (width >= 1024) {
    document.querySelector('.sicon-search').parentElement.parentElement.appendChild(buttonElement);
}
else {
    document.querySelector('.mburger').parentElement.appendChild(buttonElement);
}

/*******************************************************************************************/
/* Remove lines */
/*******************************************************************************************/
var spans = document.querySelectorAll('span.enhanced-title-border.anime-item');
spans.forEach(function(span) {
        span.parentNode.removeChild(span);
});

/*******************************************************************************************/
/* Header and Footer Logo Change with Language */ 
/*******************************************************************************************/
if (htmlLang == 'en') {
    waitForElement('.store-header img[alt="Hawa"]', (el) => {
        var englishLogoElement = document.querySelector('.store-header img[alt="Hawa"]');
        if (englishLogoElement) {
            englishLogoElement.src = 'https://d17gg5c5d03gu7.cloudfront.net/Hawa_english_logo_header_i6jdjt.png';
        }
    });
    waitForElement('.store-footer img[alt="Hawa"]', (el) => {
        var englishLogoElement = document.querySelector('.store-footer img[alt="Hawa"]');
        if (englishLogoElement) {
            englishLogoElement.src = 'https://d17gg5c5d03gu7.cloudfront.net/Hawa_english_logo_footer_xlpwb2.png';
        }
    });
}

/*******************************************************************************************/
/* add CR in sbc logo in homepage */ 
/*******************************************************************************************/
waitForElement('img[alt="Saudi Business Center"]', (img) => {
    var anchorElement = img.closest('a');
    if (anchorElement) {
        var existingText = anchorElement.lastChild.textContent.trim();
        anchorElement.lastChild.textContent = '';
        anchorElement.appendChild(document.createTextNode(existingText));
        anchorElement.appendChild(document.createElement('br'));
        var crText = htmlLang == 'en' ? 'CR: 1010989880' : 'السجل التجاري: 1010989880';
        anchorElement.appendChild(document.createTextNode(crText));
    }
});

/*******************************************************************************************/
/*******************************************************************************************/
/*******************************************************************************************/
/*************************** HOMEPAGE CUSTOMIZATION SECTION 2 ********************************/ 
/*******************************************************************************************/
/*******************************************************************************************/
/*******************************************************************************************/
// NATIONAL DAY PRODUCTS CHANGES HERE
if (!document.querySelector('.product-2130693625') && !document.querySelector('.product-271747864') && !document.querySelector('.product-1716601874') && !document.querySelector('.product-1306857438') && !document.querySelector('.cart') && !document.querySelector('.product-727834477') && !document.querySelector('.product-1727535782') && !document.querySelector('.product-723306792') && !document.querySelector('.product-2067310458') && !document.querySelector('.product-50512583') && !document.querySelector('.product-1344181453')) {
    console.log('HERE2');

    /*******************************************************************************************/
    /* Product Card Select Pack and Hide */
    /*******************************************************************************************/
    // waitForElement('select[name="options[1118344209]"]', (selector) => {
    //     selector.parentElement.parentElement.parentElement.parentElement.style.display = 'none';
    //     // selector.parentElement.parentElement.parentElement.parentElement.parentElement.childNodes[4].style.marginBottom = '0px';
    //     selector.options[1].selected = true;
    // });

    // waitForElement('select[name="options[1859474680]"]', (selector) => {
    //     selector.parentElement.parentElement.parentElement.parentElement.style.display = 'none';
    //     // selector.parentElement.parentElement.parentElement.parentElement.parentElement.childNodes[4].style.marginBottom = '0px';
    //     selector.options[1].selected = true;
    // });

    // waitForElement('select[name="options[1840101212]"]', (selector) => {
    //     selector.parentElement.parentElement.parentElement.parentElement.style.display = 'none';
    //     // selector.parentElement.parentElement.parentElement.parentElement.parentElement.childNodes[4].style.marginBottom = '0px';
    //     selector.options[1].selected = true;
    // });

    /*******************************************************************************************/
    /* Product Card Options */
    /*******************************************************************************************/
    // function encapsulateDropdownWithSquaresHomepage(selectElement) {
    //     if (selectElement) {
    //         var sizeOptionsContainer = document.createElement('div');
    //         sizeOptionsContainer.classList.add('size-options-homepage');
    //         sizeOptionsContainer.classList.add('size-options');
    //         Array.from(selectElement.options).forEach(function(option) {
    //             if (option.value !== "") {
    //                 var sizeOptionDiv = document.createElement('div');
    //                 sizeOptionDiv.classList.add('size-option-homepage');
    //                 sizeOptionDiv.classList.add('size-option');
    //                 sizeOptionDiv.textContent = option.textContent.split(' - ')[0]; // Show only the size letter
                                        
    //                 if (option.selected) {
    //                     sizeOptionDiv.classList.add('selected');
    //                 }
                    
    //                 sizeOptionDiv.addEventListener('click', function() {
    //                     sizeOptionsContainer.querySelectorAll('.size-option').forEach(function(opt) {
    //                         opt.classList.remove('selected');
    //                     });

    //                     sizeOptionDiv.classList.add('selected');

    //                     selectElement.value = sizeOptionDiv.getAttribute('data-value');
                        
    //                     var event = new Event('change', { bubbles: true });
    //                     selectElement.dispatchEvent(event);
    //                 });

    //                 sizeOptionDiv.setAttribute('data-value', option.value);

    //                 sizeOptionsContainer.appendChild(sizeOptionDiv);
    //             }
    //         });

    //         selectElement.parentNode.insertBefore(sizeOptionsContainer, selectElement);

    //         selectElement.style.position = 'absolute';
    //         selectElement.style.left = '-9999px';
    //         selectElement.style.opacity = '0';
    //     }
    // }

    // waitForElement('select[name^="options["]', (boxers) => {
    //     var selectElements = document.querySelectorAll('select[name^="options["]');
    //     selectElements.forEach(encapsulateDropdownWithSquaresHomepage);
    // });

    /*******************************************************************************************/
    /* Change video link for english */
    /*******************************************************************************************/
    if (htmlLang === "en") {
        var videos = document.querySelectorAll('.advanced-slider__slide > video');
        waitForElement('.promotional-text-under', (el) => {
            videos.forEach(video => {
                video.src = video.src.replace('ar', 'en');
            });
        });
    }

    /*******************************************************************************************/
    /* Moving USPs Banner Homepage */
    /*******************************************************************************************/
    // var movingUspImage1 = "https://d17gg5c5d03gu7.cloudfront.net/Logo_SVG_iukldv.svg"

    // // Create the main ticker wrapper
    // var tickerWrapper = document.createElement('div');
    // tickerWrapper.className = 'FeaturesTicker__TickerWrapper-sc-1qicu7a-0 gsFAxj';

    // // Create the marquee container
    // var marqueeContainer = document.createElement('div');
    // marqueeContainer.className = 'rfm-marquee-container';
    // marqueeContainer.style.setProperty('--pause-on-hover', 'running');
    // marqueeContainer.style.setProperty('--pause-on-click', 'running');
    // marqueeContainer.style.setProperty('--width', '100%');
    // marqueeContainer.style.setProperty('--transform', 'none');

    // // Function to create rfm-child elements
    // function createChildElement(src, alt, text) {
    //     var childDiv = document.createElement('div');
    //     childDiv.className = 'rfm-child';
    //     childDiv.style.setProperty('--transform', 'none');

    //     var blurbDiv = document.createElement('div');
    //     blurbDiv.className = 'FeaturesTicker__Blurb-sc-1qicu7a-1 fHNorT';

    //     var img = document.createElement('img');
    //     img.src = src;
    //     img.alt = alt;

    //     var span = document.createElement('span');
    //     span.textContent = text;

    //     blurbDiv.appendChild(img);
    //     blurbDiv.appendChild(span);
    //     childDiv.appendChild(blurbDiv);

    //     return childDiv;
    // }

    // // List of items to be added in the marquee
    // let items = [
    // { src: movingUspImage1 , alt: movingUsptext0En, text: movingUsptext0En },
    // { src: movingUspImage1 , alt: movingUsptext1En, text: movingUsptext1En },
    // { src: movingUspImage1 , alt: movingUsptext2En, text: movingUsptext2En },
    // { src: movingUspImage1 , alt: movingUsptext3En, text: movingUsptext3En },
    // { src: movingUspImage1 , alt: movingUsptext4En, text: movingUsptext4En },
    // { src: movingUspImage1 , alt: movingUsptext5En, text: movingUsptext5En },
    // { src: movingUspImage1 , alt: movingUsptext6En, text: movingUsptext6En },
    // { src: movingUspImage1 , alt: movingUsptext0En, text: movingUsptext0En },
    // { src: movingUspImage1 , alt: movingUsptext1En, text: movingUsptext1En },
    // { src: movingUspImage1 , alt: movingUsptext2En, text: movingUsptext2En },
    // { src: movingUspImage1 , alt: movingUsptext3En, text: movingUsptext3En },
    // { src: movingUspImage1 , alt: movingUsptext4En, text: movingUsptext4En },
    // { src: movingUspImage1 , alt: movingUsptext5En, text: movingUsptext5En },
    // { src: movingUspImage1 , alt: movingUsptext6En, text: movingUsptext6En }
    // ];

    // if (htmlLang === "en") {
    //     items = [
    //         { src: movingUspImage1 , alt: movingUsptext0En, text: movingUsptext0En },
    //         { src: movingUspImage1 , alt: movingUsptext1En, text: movingUsptext1En },
    //         { src: movingUspImage1 , alt: movingUsptext2En, text: movingUsptext2En },
    //         { src: movingUspImage1 , alt: movingUsptext3En, text: movingUsptext3En },
    //         { src: movingUspImage1 , alt: movingUsptext4En, text: movingUsptext4En },
    //         { src: movingUspImage1 , alt: movingUsptext5En, text: movingUsptext5En },
    //         { src: movingUspImage1 , alt: movingUsptext6En, text: movingUsptext6En },
    //         { src: movingUspImage1 , alt: movingUsptext0En, text: movingUsptext0En },
    //         { src: movingUspImage1 , alt: movingUsptext1En, text: movingUsptext1En },
    //         { src: movingUspImage1 , alt: movingUsptext2En, text: movingUsptext2En },
    //         { src: movingUspImage1 , alt: movingUsptext3En, text: movingUsptext3En },
    //         { src: movingUspImage1 , alt: movingUsptext4En, text: movingUsptext4En },
    //         { src: movingUspImage1 , alt: movingUsptext5En, text: movingUsptext5En },
    //         { src: movingUspImage1 , alt: movingUsptext6En, text: movingUsptext6En }
    //     ];
        
    // } else if (htmlLang === "ar") {
    //     items = [
    //         { src: movingUspImage1 , alt: movingUsptext0Ar, text: movingUsptext0Ar },
    //         { src: movingUspImage1 , alt: movingUsptext1Ar, text: movingUsptext1Ar },
    //         { src: movingUspImage1 , alt: movingUsptext2Ar, text: movingUsptext2Ar },
    //         { src: movingUspImage1 , alt: movingUsptext3Ar, text: movingUsptext3Ar },
    //         { src: movingUspImage1 , alt: movingUsptext4Ar, text: movingUsptext4Ar },
    //         { src: movingUspImage1 , alt: movingUsptext5Ar, text: movingUsptext5Ar },
    //         { src: movingUspImage1 , alt: movingUsptext6Ar, text: movingUsptext6Ar },
    //         { src: movingUspImage1 , alt: movingUsptext0Ar, text: movingUsptext0Ar },
    //         { src: movingUspImage1 , alt: movingUsptext1Ar, text: movingUsptext1Ar },
    //         { src: movingUspImage1 , alt: movingUsptext2Ar, text: movingUsptext2Ar },
    //         { src: movingUspImage1 , alt: movingUsptext3Ar, text: movingUsptext3Ar },
    //         { src: movingUspImage1 , alt: movingUsptext4Ar, text: movingUsptext4Ar },
    //         { src: movingUspImage1 , alt: movingUsptext5Ar, text: movingUsptext5Ar },
    //         { src: movingUspImage1 , alt: movingUsptext6Ar, text: movingUsptext6Ar }
    //     ];
    // } 


    // // Create initial child container and add items
    // var initialChildContainer = document.createElement('div');
    // initialChildContainer.className = 'rfm-initial-child-container';
    // items.forEach(item => {
    //     initialChildContainer.appendChild(createChildElement(item.src, item.alt, item.text));
    // });

    // // Create first marquee and add the initial child container
    // var marquee1 = document.createElement('div');
    // marquee1.className = 'rfm-marquee';
    // marquee1.style.setProperty('--play', 'running');

    // if (htmlLang === "en") {
    // marquee1.style.setProperty('--direction', 'normal');
    // } else if (htmlLang === "ar") {
    // marquee1.style.setProperty('--direction', 'auto');
    // } 

    // marquee1.style.setProperty('--duration', movingUspDuration);
    // marquee1.style.setProperty('--delay', '0s');
    // marquee1.style.setProperty('--iteration-count', 'infinite');
    // marquee1.style.setProperty('--min-width', '100%');
    // marquee1.appendChild(initialChildContainer);

    // // Create second marquee and add the items directly
    // var marquee2 = document.createElement('div');
    // marquee2.className = 'rfm-marquee';
    // marquee2.style.setProperty('--play', 'running');

    // if (htmlLang === "en") {
    // marquee2.style.setProperty('--direction', 'normal');
    // } else if (htmlLang === "ar") {
    // marquee2.style.setProperty('--direction', 'auto');
    // } 

    // marquee2.style.setProperty('--duration', movingUspDuration);
    // marquee2.style.setProperty('--delay', '0s');
    // marquee2.style.setProperty('--iteration-count', 'infinite');
    // marquee2.style.setProperty('--min-width', '100%');
    // items.forEach(item => {
    //     marquee2.appendChild(createChildElement(item.src, item.alt, item.text));
    // });

    // // Append marquees to marquee container
    // marqueeContainer.appendChild(marquee1);
    // marqueeContainer.appendChild(marquee2);

    // // Append marquee container to ticker wrapper
    // tickerWrapper.appendChild(marqueeContainer);

    // // Append ticker wrapper to body or any other desired container
    // var targetElement = document.querySelector(movingUspSelector);

    // if (targetElement) {
    // targetElement.replaceWith(tickerWrapper);
    // } else {
    // console.log('Moving USPs element not found');
    // }

    // /*******************************************************************************************/
    // /* Testimonial Slides */
    // /*******************************************************************************************/
    // var targetElementTesti = document.querySelector(testimonialSelector);

    // var isRTL = htmlLang === 'ar';

    // var newContent3 = `
    //     <div class="slideshow-container" dir="${isRTL ? 'rtl' : 'ltr'}">
    //         <div class="mySlides">
    //             <div class="testimonial-text">
    //                 <div>
    //                     <h3 class="testimonial-stars">★ ★ ★ ★ ★</h3>
    //                     <h3 id="testi1" class="testimonial-text-h3" style="color: #2D2D2D;">`+ testimonial1+`</h3>
    //                     <h3 class="testimonial-author">`+testimonial1Author+`</h3>
    //                 </div>
    //             </div>
    //         </div>
    //         <div class="mySlides">
    //             <div class="testimonial-text">
    //                 <div>
    //                     <h3 class="testimonial-stars">★ ★ ★ ★ ★</h3>
    //                     <h3 id="testi2" class="testimonial-text-h3" style="color: #2D2D2D;">`+testimonial2+`</h3>
    //                     <h3 class="testimonial-author">`+ testimonial2Author +`</h3>
    //                 </div>
    //             </div>
    //         </div>
    //         <div class="mySlides">
    //             <div class="testimonial-text">
    //                 <div>
    //                     <h3 class="testimonial-stars">★ ★ ★ ★ ★</h3>
    //                     <h3 id="testi3" class="testimonial-text-h3" style="color: #2D2D2D;">`+testimonial3+`</h3>
    //                     <h3 class="testimonial-author">`+ testimonial3Author +`</h3>
    //                 </div>
    //             </div>
    //         </div>
    //         <div class="mySlides">
    //             <div class="testimonial-text">
    //                 <div>
    //                     <h3 class="testimonial-stars">★ ★ ★ ★ ★</h3>
    //                     <h3 id="testi4" class="testimonial-text-h3" style="color: #2D2D2D;">`+testimonial4+`</h3>
    //                     <h3 class="testimonial-author">`+ testimonial4Author +`</h3>
    //                 </div>
    //             </div>
    //         </div>
    //     </div>
    //     <div class="dots-container ${isRTL ? 'rtl-dots' : ''}">
    //         ${isRTL ? 
    //             `<span class="dot dot4"></span>
    //             <span class="dot dot3"></span>
    //             <span class="dot dot2"></span>
    //             <span class="dot dot1"></span>` :
    //             `<span class="dot dot1"></span>
    //             <span class="dot dot2"></span>
    //             <span class="dot dot3"></span>
    //             <span class="dot dot4"></span>`
    //         }
    //     </div>`;

    // var tempDiv3 = document.createElement('div');
    // tempDiv3.innerHTML = newContent3;

    // if (targetElementTesti) { 
    //     targetElementTesti.replaceWith(tempDiv3);
    // }
    // else {
    //     console.log('testimonial banner not found');
    // }

    // var testi1 = document.getElementById('testi1');
    // var testi2 = document.getElementById('testi2');
    // var testi3 = document.getElementById('testi3');
    // var testi4 = document.getElementById('testi4');

    // let testi1Text = testimonial1;
    // let testi2Text = testimonial2;
    // let testi3Text = testimonial3;
    // let testi4Text = testimonial4;

    // if (htmlLang === "en") {
    //     testi1Text = testimonial1En;
    //     testi2Text = testimonial2En;
    //     testi3Text = testimonial3En;
    //     testi4Text = testimonial4En;
    // } else if (htmlLang === "ar") {
    //     testi1Text = testimonial1;
    //     testi2Text = testimonial2;
    //     testi3Text = testimonial3;
    //     testi4Text = testimonial4;
    // } 

    // if (testi1) {
    //     testi1.textContent = testi1Text;
    // }
    // if (testi2) {
    //     testi2.textContent = testi2Text;
    // }
    // if (testi3) {
    //     testi3.textContent = testi3Text;
    // }
    // if (testi4) {
    //     testi4.textContent = testi4Text;
    // }

    // let slideIndex = 0;
    // let currentSlideIndex = 0;
    // let slides = document.getElementsByClassName("mySlides");
    // let dots = document.getElementsByClassName("dot");

    // function showSlides(direction = 1) {
    //     if (slides.length === 0) return;

    //     if (slides[currentSlideIndex]) {
    //         var outAnimation = direction > 0 ? "slideOutLTR" : "slideOutRTL";
    //         slides[currentSlideIndex].style.animation = `${outAnimation} 0.5s forwards`;
    //     }

    //     slideIndex += direction;
    //     if (slideIndex > slides.length) {
    //         slideIndex = 1;
    //     } else if (slideIndex < 1) {
    //         slideIndex = slides.length;
    //     }

    //     if (slides[slideIndex - 1]) {
    //         slides[slideIndex - 1].style.display = "block";
    //         var inAnimation = direction > 0 ? "slideInLTR" : "slideInRTL";
    //         slides[slideIndex - 1].style.animation = `${inAnimation} 0.5s forwards`;
    //     }

    //     for (let i = 0; i < dots.length; i++) {
    //         dots[i].className = dots[i].className.replace(" active", "");
    //     }
    //     dots[slideIndex - 1].className += " active";

    //     currentSlideIndex = slideIndex - 1;
    // }

    // showSlides();

    // var style3 = document.createElement('style');
    // style3.textContent = `
    //     @keyframes slideInLTR {
    //         from { transform: translateX(100%); opacity: 0; }
    //         to { transform: translateX(0); opacity: 1; }
    //     }
        
    //     @keyframes slideOutLTR {
    //         from { transform: translateX(0); opacity: 1; }
    //         to { transform: translateX(-100%); opacity: 0; }
    //     }
        
    //     @keyframes slideInRTL {
    //         from { transform: translateX(-100%); opacity: 0; }
    //         to { transform: translateX(0); opacity: 1; }
    //     }
        
    //     @keyframes slideOutRTL {
    //         from { transform: translateX(0); opacity: 1; }
    //         to { transform: translateX(100%); opacity: 0; }
    //     }
    // `;
    // document.head.appendChild(style3);

    // let slideInterval = setInterval(() => showSlides(1), testimonialDuration);

    // function handleSwipe() {
    //     var swipeAmount = touchEndX - touchStartX;
    //     if (Math.abs(swipeAmount) > 50) {
    //         clearInterval(slideInterval);
            
    //         var swipeDirection = swipeAmount > 0 ? -1 : 1;
            
    //         showSlides(swipeDirection);
    //         slideInterval = setInterval(() => showSlides(1), testimonialDuration);
    //     }
    // }


    // function handleMouseSwipe() {
    //     var swipeAmount = mouseEndX - mouseStartX;
    //     if (Math.abs(swipeAmount) > 50) {
    //         clearInterval(slideInterval);
            
    //         var swipeDirection = swipeAmount > 0 ? -1 : 1;
            
    //         showSlides(swipeDirection);
    //         slideInterval = setInterval(() => showSlides(1), testimonialDuration);
    //     }
    // }

    // let mouseStartX = 0;
    // let mouseEndX = 0;

    // let touchStartX = 0;
    // let touchEndX = 0;

    // var slidecontainer = document.querySelector('.slideshow-container');

    // if (slidecontainer) {
    //     slidecontainer.addEventListener('touchstart', function(event) {
    //         touchStartX = event.changedTouches[0].screenX;
    //     }, false);

    //     slidecontainer.addEventListener('touchend', function(event) {
    //         touchEndX = event.changedTouches[0].screenX;
    //         handleSwipe();
    //     }, false);

    //     slidecontainer.addEventListener('mousedown', function(event) {
    //         mouseStartX = event.clientX;
    //     }, false);

    //     slidecontainer.addEventListener('mouseup', function(event) {
    //         mouseEndX = event.clientX;
    //         handleMouseSwipe();
    //     }, false);
    // }


    /*******************************************************************************************/
    /* Add extra promotional tag to product card */
    /*******************************************************************************************/

    function clonePromotionElement(retries = 30, delay = 100, promotionalText, prodID) {
        var originalElement = document.querySelector('#'+prodID+' .product-card__promotion') || document.querySelector('.'+prodID+' .promotion-title');
        if (originalElement) {
            // Found the element, proceed with cloning
            var clonedElement = originalElement.cloneNode(true);
            clonedElement.classList.add('product-card__promotion--cloned');
            clonedElement.innerText = promotionalText;
            originalElement.insertAdjacentElement('afterend', clonedElement);
            return;
        }
        
        if (retries > 0) {
            // Try again after delay
            setTimeout(() => {
                clonePromotionElement(retries - 1, delay, promotionalText, prodID);
            }, delay);
        }
    }

    // Initial call
    // var promotionalText = htmlLang === 'ar' ? 'وفّر 15%' : 'Save 15%';
    var promotionalText = htmlLang === 'ar' ? 'وفّر 14%' : 'Save 14%';
    clonePromotionElement(30, 100, promotionalText, 'product-2130693625');
    clonePromotionElement(30, 100, promotionalText, 'product-723306792');

    // promotionalText = htmlLang === 'ar' ? 'وفّر 21%' : 'Save 21%';
    promotionalText = htmlLang === 'ar' ? 'وفّر 20%' : 'Save 20%';
    clonePromotionElement(30, 100, promotionalText, 'product-271747864');
    clonePromotionElement(30, 100, promotionalText, 'product-2067310458');
    clonePromotionElement(30, 100, promotionalText, 'product-1344181453');

    // promotionalText = htmlLang === 'ar' ? 'وفّر 29%' : 'Save 29%';
    promotionalText = htmlLang === 'ar' ? 'وفّر 21%' : 'Save 21%';
    clonePromotionElement(30, 100, promotionalText, 'product-1306857438');
    clonePromotionElement(30, 100, promotionalText, 'product-1727535782');

    promotionalText = htmlLang === 'ar' ? 'وفّر 41%' : 'Save 41%';
    clonePromotionElement(30, 100, promotionalText, 'product-727834477');

    /*******************************************************************************************/
    /* Add stars to product card — RELIABLE VERSION */
    /*******************************************************************************************/

    function renderStars(stars) {
        const fullStars = Math.floor(stars);
        const remainder = stars % 1;
        let starHTML = '';

        const fullStarSVG = '<svg class="star" width="14" height="15" viewBox="0 0 24 24" fill="#F1A949"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>';
        const emptyStarSVG = '<svg class="star" width="14" height="15" viewBox="0 0 24 24" stroke="#F1A949" fill="none" stroke-width="2"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>';
        const halfStarSVG = '<svg class="star" width="14" height="15" viewBox="0 0 24 24"><defs><linearGradient id="halfGrad"><stop offset="50%" stop-color="#F1A949"/><stop offset="50%" stop-color="white" stop-opacity="0"/></linearGradient></defs><path fill="url(#halfGrad)" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path><path fill="none" stroke="#F1A949" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>';
        const quarterStarSVG = '<svg class="star" width="14" height="15" viewBox="0 0 24 24"><defs><linearGradient id="quarterGrad"><stop offset="25%" stop-color="#F1A949"/><stop offset="25%" stop-color="white" stop-opacity="0"/></linearGradient></defs><path fill="url(#quarterGrad)" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path><path fill="none" stroke="#F1A949" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>';

        for (let i = 0; i < fullStars; i++) starHTML += fullStarSVG;

        if (remainder >= 0.75) starHTML += fullStarSVG;
        else if (remainder >= 0.5) starHTML += halfStarSVG;
        else if (remainder >= 0.25) starHTML += quarterStarSVG;

        const remainingStars = 5 - Math.ceil(stars);
        for (let i = 0; i < remainingStars; i++) starHTML += emptyStarSVG;

        return starHTML;
    }

    // Wait for element with better timeout and reject option
    function waitForElementNew(selector, timeout = 5000) {
        return new Promise((resolve, reject) => {
            const startTime = Date.now();
            const check = () => {
                const el = document.querySelector(selector);
                if (el) {
                    resolve(el);
                } else if (Date.now() - startTime > timeout) {
                    reject(new Error(`Element ${selector} not found within ${timeout}ms`));
                } else {
                    requestAnimationFrame(check); // Better than setTimeout
                }
            };
            check();
        });
    }

    // Wait for multiple elements
    async function waitForElementsNew(selector, minCount = 1, timeout = 5000) {
        return new Promise((resolve, reject) => {
            const startTime = Date.now();
            const check = () => {
                const elements = document.querySelectorAll(selector);
                if (elements.length >= minCount) {
                    resolve(Array.from(elements));
                } else if (Date.now() - startTime > timeout) {
                    reject(new Error(`Only found ${elements.length} of ${minCount} ${selector} within ${timeout}ms`));
                } else {
                    requestAnimationFrame(check);
                }
            };
            check();
        });
    }

    // Single product card updater
    async function updateProductCard(selector, productId) {
        try {
            const card = await waitForElementNew(selector, 5000);
            const priceDiv = card.querySelector('.product-card__price');
            if (!priceDiv) throw new Error(`Price div not found in ${selector}`);

            const response = await salla.product.getDetails(productId, ["rating"]);
            const ratingData = response.data.rating;

            if (!ratingData) return;

            // Create stars container
            const starsDiv = document.createElement('div');
            starsDiv.classList.add('review-stars-div');

            const starRating = document.createElement('span');
            starRating.classList.add('review-stars');
            starRating.innerHTML = renderStars(ratingData.stars);

            const numRating = document.createElement('span');
            numRating.classList.add('review-stars-num');
            numRating.innerHTML = `(${ratingData.count})`;

            starsDiv.appendChild(starRating);
            starsDiv.appendChild(numRating);
            priceDiv.appendChild(starsDiv);

            return ratingData.count; // Return count for total calculation

        } catch (err) {
            console.warn(`Failed to update product ${productId}:`, err);
            return 0; // Return 0 so total still works
        }
    }

    // Main function — update all products and then total
    async function initializeProductRatings() {
        const productConfigs = [
            { selector: hawa1Selector, id: Number(hawa1Selector.split('-')[1]) },
            { selector: hawa4Selector, id: Number(hawa4Selector.split('-')[1]) },
            { selector: hawa8Selector, id: Number(hawa8Selector.split('-')[1]) },
            { selector: hawa12Selector, id: Number(hawa12Selector.split('-')[1]) }
        ];

        // Fetch all ratings in parallel
        const ratingCounts = await Promise.all(
            productConfigs.map(config => updateProductCard(config.selector, config.id))
        );

        const totalRatingCount = ratingCounts.reduce((sum, count) => sum + count, 0);

        // Now update ALL review-stars-num with total
        // Wait for at least the number of elements we expect
        try {
            const numRatingElements = await waitForElementsNew('.review-stars-num', productConfigs.length, 5000);
            numRatingElements.forEach(el => {
                el.innerHTML = `(${totalRatingCount})`;
            });
            console.log(`✅ Updated ${numRatingElements.length} product cards with total reviews: ${totalRatingCount}`);
        } catch (err) {
            console.error("Could not update total review counts:", err);
        }
    }

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeProductRatings);
    } else {
        initializeProductRatings();
    }

    /*******************************************************************************************/
    /* Add Promotional text under the 7-pack in home page product card */
    /*******************************************************************************************/
    waitForElement('#product-2130693625 .product-card__price', (priceDiv) => {
        // var promoTextUnder = htmlLang === "en" ? "Only 59 SAR Per Piece" : `59 <i class="sicon-sar"></i> للقطعة`;
        var promoTextUnder = htmlLang === "en" ? "Only 59 SAR Per Piece " : `59 <i class="sicon-sar"></i> للقطعة `;
        var promotionalDiv = document.createElement('div');
        promotionalDiv.className = 'gap-2 items-center flex promotional-text-under';
        promotionalDiv.innerHTML = `<h2 class="promotional-text-under-h2 font-bold inline-block text-store-text-secondary">`+promoTextUnder+`</h2>`;
        
        priceDiv.insertAdjacentElement('afterend', promotionalDiv);
    });

    waitForElement('#product-723306792 .product-card__price', (priceDiv) => {
        // var promoTextUnder = htmlLang === "en" ? "Only 59 SAR Per Piece" : `59 <i class="sicon-sar"></i> للقطعة`;
        var promoTextUnder = htmlLang === "en" ? "Only 59 SAR Per Piece " : `59 <i class="sicon-sar"></i> للقطعة `;
        var promotionalDiv = document.createElement('div');
        promotionalDiv.className = 'gap-2 items-center flex promotional-text-under';
        promotionalDiv.innerHTML = `<h2 class="promotional-text-under-h2 font-bold inline-block text-store-text-secondary">`+promoTextUnder+`</h2>`;
        
        priceDiv.insertAdjacentElement('afterend', promotionalDiv);
    });

    waitForElement('#product-271747864 .product-card__price', (priceDiv) => {
        // var promoTextUnder = htmlLang === "en" ? `Only 54 <i class="sicon-sar"></i> Per Piece` : `54 <i class="sicon-sar"></i> للقطعة`;
        var promoTextUnder = htmlLang === "en" ? `Only 55 <i class="sicon-sar"></i> Per Piece ` : `55 <i class="sicon-sar"></i> للقطعة `;
        var promotionalDiv = document.createElement('div');
        promotionalDiv.className = ' gap-2 items-center flex promotional-text-under';
        promotionalDiv.innerHTML = `<h2 class="promotional-text-under-h2 font-bold inline-block text-store-text-secondary">`+promoTextUnder+`</h2>`;
        
        priceDiv.insertAdjacentElement('afterend', promotionalDiv);
    });

    waitForElement('#product-2067310458 .product-card__price', (priceDiv) => {
        // var promoTextUnder = htmlLang === "en" ? `Only 54 <i class="sicon-sar"></i> Per Piece` : `54 <i class="sicon-sar"></i> للقطعة`;
        var promoTextUnder = htmlLang === "en" ? `Only 55 <i class="sicon-sar"></i> Per Piece ` : `55 <i class="sicon-sar"></i> للقطعة `;
        var promotionalDiv = document.createElement('div');
        promotionalDiv.className = ' gap-2 items-center flex promotional-text-under';
        promotionalDiv.innerHTML = `<h2 class="promotional-text-under-h2 font-bold inline-block text-store-text-secondary">`+promoTextUnder+`</h2>`;
        
        priceDiv.insertAdjacentElement('afterend', promotionalDiv);
    });

    waitForElement('#product-1344181453 .product-card__price', (priceDiv) => {
        // var promoTextUnder = htmlLang === "en" ? `Only 54 <i class="sicon-sar"></i> Per Piece` : `54 <i class="sicon-sar"></i> للقطعة`;
        var promoTextUnder = htmlLang === "en" ? `Only 55 <i class="sicon-sar"></i> Per Piece ` : `55 <i class="sicon-sar"></i> للقطعة `;
        var promotionalDiv = document.createElement('div');
        promotionalDiv.className = ' gap-2 items-center flex promotional-text-under';
        promotionalDiv.innerHTML = `<h2 class="promotional-text-under-h2 font-bold inline-block text-store-text-secondary">`+promoTextUnder+`</h2>`;
        
        priceDiv.insertAdjacentElement('afterend', promotionalDiv);
    });


    waitForElement('#product-1306857438 .product-card__price', (priceDiv) => {
        // var promoTextUnder = htmlLang === "en" ? `Only 49 <i class="sicon-sar"></i> Per Piece` : `49 <i class="sicon-sar"></i> للقطعة`;
        var promoTextUnder = htmlLang === "en" ? `Only 49 <i class="sicon-sar"></i> Per Piece ` : `49 <i class="sicon-sar"></i> للقطعة `;
        var promotionalDiv = document.createElement('div');
        promotionalDiv.className = 'gap-2 items-center flex promotional-text-under';
        promotionalDiv.innerHTML = `<h2 class="promotional-text-under-h2 font-bold inline-block text-store-text-secondary">`+promoTextUnder+`</h2>`;
        
        priceDiv.insertAdjacentElement('afterend', promotionalDiv);
    });

    waitForElement('#product-1727535782 .product-card__price', (priceDiv) => {
        // var promoTextUnder = htmlLang === "en" ? `Only 49 <i class="sicon-sar"></i> Per Piece` : `49 <i class="sicon-sar"></i> للقطعة`;
        var promoTextUnder = htmlLang === "en" ? `Only 49 <i class="sicon-sar"></i> Per Piece ` : `49 <i class="sicon-sar"></i> للقطعة `;
        var promotionalDiv = document.createElement('div');
        promotionalDiv.className = 'gap-2 items-center flex promotional-text-under';
        promotionalDiv.innerHTML = `<h2 class="promotional-text-under-h2 font-bold inline-block text-store-text-secondary">`+promoTextUnder+`</h2>`;
        
        priceDiv.insertAdjacentElement('afterend', promotionalDiv);
    });

    waitForElement('#product-727834477 .product-card__price', (priceDiv) => {
        var promoTextUnder = htmlLang === "en" ? `Only 34 <i class="sicon-sar"></i> Per Piece ` : `34 <i class="sicon-sar"></i> للقطعة `;
        var promotionalDiv = document.createElement('div');
        promotionalDiv.className = 'gap-2 items-center flex promotional-text-under';
        promotionalDiv.innerHTML = `<h2 class="promotional-text-under-h2 font-bold inline-block text-store-text-secondary">`+promoTextUnder+`</h2>`;
        
        priceDiv.insertAdjacentElement('afterend', promotionalDiv);
    });

    waitForElement('#product-1716601874 .product-card__price', (priceDiv) => {
        var promoTextUnder = htmlLang === "en" ? "</br>" : "</br>";
        var promotionalDiv = document.createElement('div');
        promotionalDiv.className = 'gap-2 items-center flex promotional-text-under';
        promotionalDiv.innerHTML = `<h2 class="promotional-text-under-h2 font-bold inline-block text-store-text-secondary">`+promoTextUnder+`</h2>`;
        
        priceDiv.insertAdjacentElement('afterend', promotionalDiv);
    });

    waitForElement('#product-50512583 .product-card__price', (priceDiv) => {
        var promoTextUnder = htmlLang === "en" ? "</br>" : "</br>";
        var promotionalDiv = document.createElement('div');
        promotionalDiv.className = 'gap-2 items-center flex promotional-text-under';
        promotionalDiv.innerHTML = `<h2 class="promotional-text-under-h2 font-bold inline-block text-store-text-secondary">`+promoTextUnder+`</h2>`;
        
        priceDiv.insertAdjacentElement('afterend', promotionalDiv);
    });

    /*******************************************************************************************/
    /* add guarantee in homepage */ 
    /*******************************************************************************************/
    function createGuaranteeHomepage() {
        var guaranteeText = {
            en: {
                title: "First Pair Guarantee",
                description: "If you don't love your first pair, we will send you a different size or issue a full refund - no return required"
            },
            ar: {
                title: "ضمان على هواك",
                description: "نضمن لك أول بوكسر في حال ما ناسبك خله عندك واستبدل المقاس أو نرجع لك فلوسك"
            }
        };

        var language = document.documentElement.lang || 'en';
        var text = guaranteeText[language];

        var guaranteeDiv = document.createElement('div');
        guaranteeDiv.className = 'hawa-guarantee-section';
        guaranteeDiv.classList.add('hawa-guarantee-section-homepage');

        guaranteeDiv.innerHTML = `
            <div class="guarantee-container">
                <div class="guarantee-content">
                    <div class="guarantee-logo">
                        <img src="https://d17gg5c5d03gu7.cloudfront.net/guarantee_logo_vuy2in.svg" 
                                alt="Hawa Guarantee Badge" 
                                class="guarantee-badge">
                        </div>
                        <div class="guarantee-text">
                            <h2 class="guarantee-title">${text.title}</h2>
                            <p class="guarantee-description">${text.description}</p>
                        </div>
                    </div>
                </div>
            `;

        return { element: guaranteeDiv };
    }

    waitForElement('.fixed-banner--2', (fixedBanner) => {
        var guarantee = createGuaranteeHomepage();
        fixedBanner.replaceWith(guarantee.element);
    });

    /*******************************************************************************************/
    /* USPs fix text in homepage */ 
    /*******************************************************************************************/
    var USPtitle = 'وش يميز بوكسر هوا؟';
    var USPtext2 = `ثابت، وانسى الاحتكاك`
    var USPsubtext2 = `تخيل إنك تلبس بوكسر ما يحتاج تعدله أبد، بوكسرنا مصمم بحيث يقلل الاحتكاك وما يتسلق فخوذك.`;
    var USPtext4 = `حزام النعومة والأمان`
    var USPsubtext4 = `حزام هوا ثابت بدون ما يضحي بالنعومة والراحة، وفوقها ما يتصفّط أو يتغير مع الاستخدام.`;
    var USPtext1 = `قماشنا أبرد`
    var USPsubtext1 = `زي ما قال أحد العملاء: "نفس شعور يوم تصلي الفجر وترجع تتلحف والجو برد كذا وسعادة"`;
    var USPtext3 = `شيّال وميّال`
    var USPsubtext3 = `
حطينا مساحة أمامية واسعة بحيث <span class="bold-span">كل شي</span>
 يقدر ياخذ راحته ونتجنب مشاكل الالتصاق المزعجة.

`;

    if(htmlLang == 'en'){
        USPtitle = 'What Makes Hawa Special?';
        USPtext2 = `Chafe-free design`
        USPsubtext2 = `Longer inseam to prevent chafing, ride-up and wedgies. It will put an end to awkward adjustments in public.`;
        USPtext3 = `Premium anti-roll waistband`
        USPsubtext3 = `Super soft elastic waistband. It won't roll, pinch or leave any marks. You'll forget you're even wearing it.`;
        USPtext1 = `Cloud-like softness`
        USPsubtext1 = `LENZING™ Modal is a natural fiber that is softer, lighter and cooler than cotton. It is natually breathable and has 4-way stretch so you can move effortlessly.`;
        USPtext3 = `3D Contour Pouch`
        USPsubtext3 = `We understand the male anatomy - that's why we created this curved pouch to ensure everything is perfectly separated, supported and ventilated.`;
    }

    var USPurl2 = 'https://d17gg5c5d03gu7.cloudfront.net/2u.jpg';
    var USPurl4 = 'https://d17gg5c5d03gu7.cloudfront.net/4u.jpg';
    var USPurl1 = 'https://d17gg5c5d03gu7.cloudfront.net/1u.jpg';
    var USPurl3 = 'https://d17gg5c5d03gu7.cloudfront.net/3u.jpg'; 

    waitForElement('.s-block--square-links div[aria-label="1 / 4"] p', (el) => {
        document.querySelector('.s-block--square-links div[aria-label="1 / 4"] p').innerHTML = USPsubtext1;

        document.querySelector('.s-block--square-links div[aria-label="2 / 4"] p').innerHTML = USPsubtext2;

        document.querySelector('.s-block--square-links div[aria-label="3 / 4"] p').innerHTML = USPsubtext3;

        document.querySelector('.s-block--square-links div[aria-label="4 / 4"] p').innerHTML = USPsubtext4;
    });

    /*******************************************************************************************/
    /* Add CTA after USPs in homepage */ 
    /*******************************************************************************************/
    waitForElement('.hawa-table-comparison', (uspBlock) => {
        const ctaContainer = document.createElement('div');
        ctaContainer.className = 'cta-container';
        
        const ctaButton = document.createElement('a');
        ctaButton.href = 'https://hawa.co/ar/%D8%A8%D9%88%D9%83%D8%B3%D8%B1-%D9%87%D9%88%D8%A7-4-%D9%82%D8%B7%D8%B9/p2130693625';
        ctaButton.className = 'cta-button';
        ctaButton.textContent = htmlLang == 'en' ? 'Shop Now' : 'تسوّق الآن';
        
        ctaContainer.appendChild(ctaButton);
        uspBlock.appendChild(ctaContainer);
    });

    /*******************************************************************************************/
    /* Adjust Homepage Step One USP Swiper */
    /*****************************************************************************************/

    try {
        var existingSwiper = document.querySelector('.s-slider-container').swiper;
        existingSwiper.params.spaceBetween = 20; // Adjust the value to your needs
        existingSwiper.update();
    }
    catch(err) {
        waitForElement('.s-slider-container', (existingSwiperSel) => {
            var existingSwiper = existingSwiperSel.swiper;
            existingSwiper.params.spaceBetween = 20; // Adjust the value to your needs
            existingSwiper.update();
        });
    }

    /*******************************************************************************************/
    /* move video comparison title to top */ 
    /*******************************************************************************************/
    waitForElement('.s-block--about h2', (h2Element) => {
        if (window.innerWidth < 768) {
            var flexContainer = h2Element.closest('.flex');
            
            if (flexContainer) {
                var newH2 = h2Element.cloneNode(true);
                newH2.classList.add('video-comparison-title-top');

                flexContainer.appendChild(newH2);

                h2Element.remove();
            }
        }
        else {
            console.log('Not on mobile');
        }
    });

    /*******************************************************************************************/
    /* change video text in homepage */ 
    /*******************************************************************************************/
    if(htmlLang == 'en') {
        waitForElement('.s-block--about p', (videoTextElement) => {
                videoTextElement.innerText = `Before launching Hawa, we pretty much tried every boxer brief available on the market. Nothing checked all the boxes, each one had its own set of issues. So, we had to make our own design to be the the be-all and end-all of underwear.\n\nOur boxer brief is super soft, breathable, anti-chafing, anti ride-up and anti-adjusting. On top of that, it has the perfect curved pouch to keep your boys cradled and separated from the rest of your body.`
        });
    }
    
    /*******************************************************************************************/
    /* add table comparison in homepage */ 
    /*******************************************************************************************/
    function createTableComparisonHomepage() {
        var language = document.documentElement.lang;
        var faqDiv = document.createElement('div');
        faqDiv.className = 'hawa-table-comparison';

        var checkSvg = "https://d17gg5c5d03gu7.cloudfront.net/comparison_table_checkmark_zyugxx.svg";
        var crossSvg = "https://d17gg5c5d03gu7.cloudfront.net/comparison_table_x_mark_lokoyo.svg";
        var comparisonImage = "https://d17gg5c5d03gu7.cloudfront.net/comparison_table_desktop_image_cdtlrz.png"; // Replace with your actual image URL

        // Define translations and language-specific logos
        var translations = {
            en: {
                hawa: 'HAWA',
                otherBrands: 'Local Brands',
                logoSrc: "https://d17gg5c5d03gu7.cloudfront.net/comparison_table_logo_ar_xm7mm2.svg",
                features: [
                    'No Chafing',
                    'No Ride-Up',
                    '3D Contour Pouch',
                    'Soft And Cool Fabric',
                    'Anti-Roll Waistband',
                    'First Pair Guarantee'
                ]
            },
            ar: {
                hawa: 'هوا',
                otherBrands: 'البراندات المحلية',
                logoSrc: "https://d17gg5c5d03gu7.cloudfront.net/comparison_table_logo_ar_xm7mm2.svg",
                features: [
                    'يمنع الاحتكاك',
                    'ثابت ومايتسلق فخوذك',
                    'مساحة امامية تمنع الالتصاق',
                    'قماشه بارد وناعم',
                    'حزامه تنساه حول خصرك',
                    'عليه ضمان'
                ]
            }
        };

        var beforelastFeature = htmlLang == 'en' ? 'Suitable for Thoub' : 'مناسب للثوب';

        var lastFeature = htmlLang == 'en' ? 'Cheap' : 'سعره رخيص';
        var lastFeatureNote = htmlLang == 'en' ? '*But worth it' : '*بس يستاهل';


        // Select the appropriate translations
        var text = translations[language] || translations.en;

        // Add container class for homepage-specific styling
        faqDiv.innerHTML = `
            <div class="comparison-container homepage-comparison">
                
                <div class="comparison-table">
                    <div class="table-header">
                        <div class="header-cell feature-cell"></div>
                        <div class="header-cell">
                            <img src="${text.logoSrc}" 
                                alt="${text.hawa}" 
                                class="comparison-logo"
                                style="height: 24px; width: auto;">
                        </div>
                        <div class="header-cell">${text.otherBrands}</div>
                    </div>
                    <div class="table-body">
                        ${text.features.map(feature => `
                            <div class="table-row">
                                <div class="feature-cell">${feature}</div>
                                <div class="check-cell">
                                    <img src="${checkSvg}" alt="check" class="check">
                                </div>
                                <div class="check-cell">
                                    <img src="${crossSvg}" alt="cross" class="cross">
                                </div>
                            </div>
                        `).join('')}
                        <div class="table-row">
                                <div class="feature-cell">${beforelastFeature}</div>
                                <div class="check-cell">
                                    <img src="${checkSvg}" alt="check" class="check">
                                </div>
                                <div class="check-cell">
                                    <img src="${checkSvg}" alt="check" class="check">
                                </div>
                            </div>
                        <div class="table-row">
                                <div class="feature-cell">${lastFeature}</div>
                                <div class="check-cell">
                                    <span style="color: #2D2D2D;">*</span>
                                    <img src="${crossSvg}" alt="check" class="check">
                                    <span style="color: #F8F5EF;">*</span>
                                </div>
                                <div class="check-cell">
                                    <img src="${checkSvg}" alt="cross" class="cross">
                                </div>
                        </div>
                    </div>
                    <span class="comparison-note">${lastFeatureNote}</span>
                </div>
                
                <div class="comparison-image">
                    <img src="${comparisonImage}" alt="Comparison">
                </div>

            </div>
        `;

        return { element: faqDiv };
    }

    waitForElement('.s-block--stats', (statsBlock) => {
        var comparisonTable = createTableComparisonHomepage();
        statsBlock.replaceWith(comparisonTable.element);
    });


    /*******************************************************************************************/
    /* Add fabric comparison to the home page */
    /*****************************************************************************************/
    // var translations = {
    //     en: {
    //         title: "Why is Modal Better than Cotton?",
    //         subtitle: `<div class="metric-line"> <div class="metric-header"><span class="metric-highlight">3x</span></div> <span class="metric-text">Softer than cotton</span></div>
    //                    <div class="metric-line"> <div class="metric-header"><span class="metric-highlight">50%</span></div> <span class="metric-text">Higher moisture absorption</span></div>
    //                    <div class="metric-line"> <div class="metric-header"><span class="metric-highlight">100%</span></div> <span class="metric-text">Natural</span></div>
    //         <span class="fabric-blend">Fabric composition: 91% Lenzing&#8482 Modal and 9% Elastane</span>`,
    //         modalLabel: "91% Modal",
    //         cottonLabel: "Cotton"
    //     },
    //     ar: {
    //         title: "ليش قماش المودال أحسن من القطن؟",
    //         subtitle: `<div class="metric-line"> <div class="metric-header"><span class="metric-highlight">3x</span></div> <span class="metric-text">نعومة القطن</span></div>
    //                    <div class="metric-line"> <div class="metric-header"><span class="metric-highlight">50%</span></div> <span class="metric-text">امتصاص اعلى للرطوبة</span></div>
    //                    <div class="metric-line"> <div class="metric-header"><span class="metric-highlight">100%</span></div> <span class="metric-text">طبيعي</span></div>
    //         <span class="fabric-blend">وهذا يخلي تكلفة قماش المودال 2 إلى 3 أضعاف أغلى من القطن العادي بسبب جودته العالية، وفي هوا مانستخدم إلا أفضل وأجود أنواع الأقمشة.</span>`,
    //         cottonLabel: "مودال (&#8482Lenzing)",
    //         modalLabel: "القطن"
    //     }
    // };

    // function createFabricComparison(targetSelector = '.features-container') {
    //     var language = document.documentElement.lang || 'en';
    //     var text = translations[language];
    //     var dir = language === 'ar' ? 'rtl' : 'ltr';
        
        
    //     var fabricHTML = `
    //     <div class="fabric-comparison-container-homepage">
    //         <div class="fabric-card" lang="${language}" dir="${dir}">
    //             <div class="fabric-card-text">
    //                 <h2 class="fabric-title">${text.title}</h2>
    //                 ${text.subtitle}
    //             </div>
    //             <div class="fabric-comparison">
    //                 <div class="fabric-image">
    //                 <img 
    //                     src="https://d17gg5c5d03gu7.cloudfront.net/White+Fabric+Comparison.jpg" 
    //                     width="682" 
    //                     height="280" 
    //                     alt="Fabric comparison showing modal fabric texture on the left and cotton fabric texture on the right" 
    //                     loading="lazy" 
    //                     decoding="async" 
    //                     class="fabric-image"
    //                 />
    //                 </div>
    //                 <div class="fabric-labels">
    //                     <div class="fabric-label">${text.modalLabel}</div>
    //                     <div class="fabric-label">${text.cottonLabel}</div>
    //                 </div>
    //             </div>
    //         </div>
    //     </div>
    //     `;

    //     var targetContainer = document.querySelector(targetSelector);
    //     if (targetContainer) {
    //         targetContainer.insertAdjacentHTML('afterend', fabricHTML);
    //     } else {
    //         console.warn(`Target container "${targetSelector}" not found`);
    //     }
    // }

    // createFabricComparison('.hawa-table-comparison');

    /*******************************************************************************************/
    /* Adjust Homepage Reviews Swiper */
    /*****************************************************************************************/
    try {
        var existingSwiper = document.querySelector('.reviews-slider .swiper').swiper;
        existingSwiper.params.slidesPerView = 1.1;
        existingSwiper.update();
    }
    catch(err) {
        waitForElement('.reviews-slider .swiper', (existingSwiperSel) => {
            var existingSwiper = existingSwiperSel.swiper;
            existingSwiper.params.slidesPerView = 1.1;
            existingSwiper.update();
        });
    }

    /*******************************************************************************************/
    /* Reviewer Badge */
    /*******************************************************************************************/
    // Function to create the reviewer status element
    function createReviewerStatus() {
        // Create the main div
        var div = document.createElement('div');
        div.className = 'reviewer-status';
        div.style.visibility = 'visible';
        div.style.display = 'flex';
        div.style.flexDirection = 'row';
        div.style.alignItems = 'center';
        div.style.justifyContent = 'flex-start';
        div.style.margin = '0px';

        // Create the SVG element
        var svgNS = 'http://www.w3.org/2000/svg';
        var svg = document.createElementNS(svgNS, 'svg');
        svg.setAttribute('width', '10');
        svg.setAttribute('height', '10');
        svg.setAttribute('viewBox', '0 0 10 10');
        svg.setAttribute('fill', 'none');

        // Create the circle element
        var circle = document.createElementNS(svgNS, 'circle');
        circle.setAttribute('cx', '5.00001');
        circle.setAttribute('cy', '5.00001');
        circle.setAttribute('r', '4.18605');
        circle.setAttribute('fill', '#2E4F7C');
        svg.appendChild(circle);

        // Create the path element
        var path = document.createElementNS(svgNS, 'path');
        path.setAttribute('d', 'M3.04639 4.84503L4.56603 6.39542L7.23243 3.88379');
        path.setAttribute('stroke', 'white');
        path.setAttribute('stroke-width', '1.5');
        svg.appendChild(path);

        // Create the space element
        var space = document.createTextNode('\u00A0');

        // Create the span element
        var span = document.createElement('span');
        span.className = 'reviewer-status-text';
        span.style.fontStyle = 'normal';
        span.style.fontWeight = '600';
        span.textContent = reviewerAr;
        if (htmlLang === "en") {
        span.textContent = reviewerEn;
        } else if (htmlLang === "ar") {
        span.textContent = reviewerAr;
        }    

        // Append the elements to the div
        div.appendChild(svg);
        div.appendChild(space);
        div.appendChild(span);

        return div;
    }

    var revCards = document.querySelectorAll('.mx-2 div'); 
    revCards.forEach(function(revCard) {
        var newElement = createReviewerStatus();
        revCard.appendChild(newElement);
    });

    /*******************************************************************************************/
    /* Add CTA after Reviews in homepage and add stars */ 
    /*******************************************************************************************/
    waitForElement('.s-block--custom-reviews', (uspBlock) => {
        const ctaContainer = document.createElement('div');
        ctaContainer.className = 'cta-container';
        
        const ctaButton = document.createElement('a');
        ctaButton.href = 'https://hawa.co/ar/%D8%A8%D9%88%D9%83%D8%B3%D8%B1-%D9%87%D9%88%D8%A7-4-%D9%82%D8%B7%D8%B9/p2130693625';
        ctaButton.className = 'cta-button';
        ctaButton.textContent = htmlLang == 'en' ? 'Shop Best Seller' : 'تسوّق الأكثر مبيعاً';
        
        ctaContainer.appendChild(ctaButton);
        uspBlock.appendChild(ctaContainer);

        const titleStars = document.createElement('div');
        titleStars.className = 'custom-reviews__title-stars';
        titleStars.innerHTML = `<div class="custom-reviews__title-stars">
        
          <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.5175 0.789551L12.8789 8.05699L20.5203 8.05699L14.3382 12.5485L16.6996 19.8159L10.5175 15.3244L4.33548 19.8159L6.69681 12.5485L0.514765 8.05699L8.1562 8.05699L10.5175 0.789551Z" fill="#18191B"></path>
          </svg>
        
          <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.5175 0.789551L12.8789 8.05699L20.5203 8.05699L14.3382 12.5485L16.6996 19.8159L10.5175 15.3244L4.33548 19.8159L6.69681 12.5485L0.514765 8.05699L8.1562 8.05699L10.5175 0.789551Z" fill="#18191B"></path>
          </svg>
        
          <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.5175 0.789551L12.8789 8.05699L20.5203 8.05699L14.3382 12.5485L16.6996 19.8159L10.5175 15.3244L4.33548 19.8159L6.69681 12.5485L0.514765 8.05699L8.1562 8.05699L10.5175 0.789551Z" fill="#18191B"></path>
          </svg>
        
          <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.5175 0.789551L12.8789 8.05699L20.5203 8.05699L14.3382 12.5485L16.6996 19.8159L10.5175 15.3244L4.33548 19.8159L6.69681 12.5485L0.514765 8.05699L8.1562 8.05699L10.5175 0.789551Z" fill="#18191B"></path>
          </svg>
        
          <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.5175 0.789551L12.8789 8.05699L20.5203 8.05699L14.3382 12.5485L16.6996 19.8159L10.5175 15.3244L4.33548 19.8159L6.69681 12.5485L0.514765 8.05699L8.1562 8.05699L10.5175 0.789551Z" fill="#18191B"></path>
          </svg>
        
      </div>`;

        uspBlock.insertBefore(  titleStars, uspBlock.firstChild);
    });

    /*******************************************************************************************/
    /* Brand USPs in home page */
    /******************************************************************************************/

    var arabicText = [
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-easy-return-svg_vexnb2.svg', text: 'استبدال مجاني واسترجاع سهل' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-truck-svg_znkigl.svg', text: `توصيل مجاني فوق 280 ر.س` },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-guarantee-svg_mdgmnp.svg', text: 'ماعجبك البوكسر؟ فلوسك ترجعلك' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-24hr-svg_iiaggs.png', text: 'الرياض: توصيل خلال 48 ساعة' }
    ];

    var englishText = [
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-easy-return-svg_vexnb2.svg', text: 'Easy returns, free exchanges' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-truck-svg_znkigl.svg', text: `Free delivery above 280` },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-guarantee-svg_mdgmnp.svg', text: 'We Guarantee Your First Boxer' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-24hr-svg_iiaggs.png', text: '48hr delivery in Riyadh' }
    ];

    var arabicDesktopText = [
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/easy_return_brand_usp_desktop_pfsnkx.svg', text: 'استبدال مجاني واسترجاع سهل' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/fast_delivery_brand_usp_desktop_ehbdiw.svg', text: `توصيل مجاني فوق 280 ر.س` },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/guarantee_first_boxer_brand_usp_desktop_avnlvg.svg', text: 'ماعجبك البوكسر؟ فلوسك ترجعلك' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/24hr_desktop_brand_usp_ezllzj.svg', text: 'الرياض: توصيل خلال 48 ساعة' }
    ];

    var englishDesktopText = [
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/easy_return_brand_usp_desktop_pfsnkx.svg', text: 'Easy returns, free exchanges' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/fast_delivery_brand_usp_desktop_ehbdiw.svg', text: `Free delivery above 280` },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/guarantee_first_boxer_brand_usp_desktop_avnlvg.svg', text: 'We Guarantee Your First Boxer' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/24hr_desktop_brand_usp_ezllzj.svg', text: '48hr delivery in Riyadh' }
    ];

    let selectedMobileText = htmlLang === 'en' ? englishText : arabicText;
    let selectedDesktopText = htmlLang === 'en' ? englishDesktopText : arabicDesktopText;

    var container = document.createElement('div');
    container.className = 'features-container';

    var inner = document.createElement('div');
    inner.className = 'features-inner';

    var list = document.createElement('div');
    list.className = 'features-list';

    selectedMobileText.forEach((item, index) => {
        var featureItem = document.createElement('div');
        featureItem.className = 'feature-item';

        var icon = document.createElement('img');
        icon.className = 'feature-icon mobile-icon';
        icon.src = item.icon;
        icon.alt = '';

        var desktopIcon = document.createElement('img');
        desktopIcon.className = 'feature-icon desktop-icon';
        desktopIcon.src = selectedDesktopText[index].icon;
        desktopIcon.alt = '';

        var text = document.createElement('p');
        text.className = 'feature-text';
        text.textContent = item.text;

        featureItem.appendChild(icon);
        featureItem.appendChild(desktopIcon);
        featureItem.appendChild(text);
        list.appendChild(featureItem);
    });

    inner.appendChild(list);
    container.appendChild(inner);

    var storeUSPs = document.querySelector('.s-block--store-features');
    if (storeUSPs) {
        storeUSPs.replaceWith(container);
    }

    /*******************************************************************************************/
    /* Replace FAQ Answers in Homepage */
    /*******************************************************************************************/
    waitForElement('.s-block--faq .single-faq .faq-content p', (faqContainer) => {
        var shippingAnswer = htmlLang === "en" 
            ? "Saudi Arabia:\n\n•Riyadh: within 48 hours (excluding Friday)\n•Dammam and Jeddah: within 3 days (excluding Friday)\n•Other cities in Saudi Arabia: 3-6 days (excluding Friday)\n\n•Gulf Countries:UAE: within 1 week\n•Kuwait and other GCC countries: within 2 weeks"
            : "داخل المملكة:\n\n• يتم التوصيل داخل الرياض خلال 48 ساعة (باستثناء يوم الجمعة)\n• باقي مدن المملكة الكبيرة مثل جدة والدمام، خلال 3 أيام عمل (باستثناء يوم الجمعة)\n• باقي مدن المملكة، خلال 6 أيام عمل كحد أقصى (باستثناء يوم الجمعة)\n\nباقي دول الخليج:\n\n• دولة الإمارات: خلال أسبوع\n• دولة الكويت وباقي دول الخليج: خلال أسبوعين";
        var specialAnswer = htmlLang === "en" 
            ? "Hawa stands out from others due to several key features, including:\n\n• Using the finest fabrics, such as Modal, which offers exceptional softness, coolness and breathability.\n• Attention to detail, like the boxer waistband, which was selected after testing more than 50 samples.\n• A tailored design that understands the male anatomy.\n• Incorporating innovative techniques in design that reduce chafing and keep your boys supported — so comfortable, you might forget you're wearing a boxer."
            : "يميز هوا عن غيره عدة أشياء، منها:\n\n• استخدام أجود أنواع الأقمشة مثل المودال اللي بعطيك نعومة وبرودة بتستشعرها على جسمك.\n• الاهتمام في التفاصيل؛ مثل حزام البوكسر اللي تم اختياره بعد تجربه أكثر 50 نوع مختلف. \n• في هوا ابتكرنا تصميم بوكسر يناسب جسم الرجل السعودي والخليجي. \n• استخدام تقنيات مختلفة في التصميم خلتنا نوصل لمنتج يحد من الاحتكاك ويزيد من الراحة للمناطق الخفيّة. يعني ممكن تنسى إنك لابس بوكسر.";

        var faqAnswers = document.querySelectorAll('.single-faq .faq-content p');
        faqAnswers.forEach(answer => {
            if (answer.innerText === 'HAWAFAQSHIPPINGANSWER') {
                answer.innerText = shippingAnswer;
                answer.style.whiteSpace = 'pre-line'; // This preserves the line breaks
            }
            if (answer.innerText === 'HAWAFAQSPECIALANSWER') {
                answer.innerText = specialAnswer;
                answer.style.whiteSpace = 'pre-line'; // This preserves the line breaks
            }
        });
        console.log('here faq answers');
        console.log(faqAnswers);
        faqAnswers[4].innerText = specialAnswer;
        faqAnswers[4].style.whiteSpace = 'pre-line';
        faqAnswers[5].innerText = shippingAnswer;
        faqAnswers[5].style.whiteSpace = 'pre-line';
    });

    /*******************************************************************************************/
    /* Adding the instagram feed */ 
    /*******************************************************************************************/
    const targetElementinsta = document.querySelector(instaSelector);

    if (targetElementinsta) {
        if(htmlLang == 'en'){
        targetElementinsta.outerHTML= `
            <div class="insta-title-div"><h2 class="insta-h2">`+instaTextEn+`</h2></div>
            <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
            <div class="elfsight-app-682538f0-27f2-46e8-9c59-d5f961493ce2" data-elfsight-app-lazy></div>
            `
        }
        else {
            targetElementinsta.outerHTML= `
            <div class="insta-title-div"><h2 class="insta-h2">`+instaTextAr+`</h2></div>
            <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
            <div class="elfsight-app-682538f0-27f2-46e8-9c59-d5f961493ce2" data-elfsight-app-lazy></div>
            `
        }
    } else {
        console.log('insta element element not found');
    }
    

}


/*******************************************************************************************/
/*******************************************************************************************/
/*******************************************************************************************/
/*************************** PDP PAGES CUSTOMIZATION SECTION 3 ********************************/ 
/*******************************************************************************************/
/*******************************************************************************************/
/*******************************************************************************************/
// NATIONAL DAY PRODUCTS CHANGES HERE
if (document.querySelector('.product-2130693625') || document.querySelector('.product-271747864') || document.querySelector('.product-1716601874') || document.querySelector('.product-1306857438') || document.querySelector('.product-727834477') || document.querySelector('.product-1727535782') || document.querySelector('.product-723306792') || document.querySelector('.product-2067310458') || document.querySelector('.product-50512583') || document.querySelector('.product-1344181453')) {
    
    /*******************************************************************************************/
    /* Out of Stock Alert Popup */
    /*******************************************************************************************/
    (function() {
        const WA_LINK = "https://api.whatsapp.com/send/?phone=966533384018&text=%D9%85%D8%A7%20%D8%AD%D8%B5%D9%84%D8%AA%20%D8%A7%D9%84%D9%85%D9%82%D8%A7%D8%B3%20%D8%A7%D9%84%D9%84%D9%8A%20%D8%A7%D8%A8%D9%8A%D9%87";
      
        function showBisModal() {
          if (document.getElementById("bis-overlay")) return;
          const overlay = document.createElement("div");
          overlay.id = "bis-overlay";
          overlay.innerHTML = `
            <div id="bis-modal">
              <h2>نفذت الكمية</h2>
              <p>سجّل اهتمامك باتباع الرابط وراح نرسلك تنبيه أول ما يتوفرالمقاس.</p>
              <a href="${WA_LINK}" target="_blank" rel="noopener">تنبيه توفّر المقاس</a>
              <div id="bis-close">إغلاق</div>
            </div>`;
          document.body.appendChild(overlay);
          document.getElementById("bis-close").onclick = () => overlay.remove();
        }
      
        // ---- Detect Swal2 "out of stock" alert ----
        const STOCK_TEXT_PATTERNS = [/نفدت/i, /غير متوفر/i, /out of stock/i];
        new MutationObserver(muts => {
          for (const m of muts) {
            for (const node of m.addedNodes) {
              if (node.nodeType === 1 && node.classList.contains("swal2-container")) {
                const txt = node.textContent;
                if (STOCK_TEXT_PATTERNS.some(rx => rx.test(txt))) {
                  showBisModal();
                }
              }
            }
          }
        }).observe(document.documentElement, { childList: true, subtree: true });
      
        // ---- Detect 422 API errors on /price endpoint ----
        const origFetch = window.fetch;
        window.fetch = async (...args) => {
          const res = await origFetch(...args);
          try {
            const url = args[0] instanceof Request ? args[0].url : args[0];
            if (url.includes("/store/v1/products/") && url.includes("/price") && res.status === 422) {
              showBisModal();
            }
          } catch {}
          return res;
        };
    })();
    
    
    /*******************************************************************************************/
    /* Change Review Seciton Title */
    /*******************************************************************************************/

    waitForElement('#single-product-details .s-button-text', (reviewTitle) => {
        var titleText = htmlLang === 'en' ? '100K+ Boxers Sold and Everyone\'s Happy' : 'بعنا 100,000+ بوكسر والجميع منبهر';
        reviewTitle.textContent = titleText;
    });


    /*******************************************************************************************/
    /* Add extra promotional tag to product card */
    /*******************************************************************************************/
    function clonePromotionElement(retries = 30, delay = 100, promotionalText, prodID) {
        var originalElement = document.querySelector('#'+prodID+' .product-card__promotion') || document.querySelector('.'+prodID+' .promotion-title');
        if (originalElement) {
            // Found the element, proceed with cloning
            var clonedElement = originalElement.cloneNode(true);
            clonedElement.classList.add('product-card__promotion--cloned');
            clonedElement.classList.add('product-card__promotion--cloned2');
            clonedElement.innerText = promotionalText;
            originalElement.insertAdjacentElement('afterend', clonedElement);
            return;
        }
        
        if (retries > 0) {
            // Try again after delay
            setTimeout(() => {
                clonePromotionElement(retries - 1, delay, promotionalText, prodID);
            }, delay);
        }
    }

    // Initial call
    // var promotionalText = htmlLang === 'ar' ? 'وفّر 15%' : 'Save 15%';
    var promotionalText = htmlLang === 'ar' ? 'وفّر 14%' : 'Save 14%';
    clonePromotionElement(30, 100, promotionalText, 'product-2130693625');
    clonePromotionElement(30, 100, promotionalText, 'product-723306792');

    // promotionalText = htmlLang === 'ar' ? 'وفّر 21%' : 'Save 21%';
    promotionalText = htmlLang === 'ar' ? 'وفّر 20%' : 'Save 20%';
    clonePromotionElement(30, 100, promotionalText, 'product-271747864');
    clonePromotionElement(30, 100, promotionalText, 'product-2067310458');
    clonePromotionElement(30, 100, promotionalText, 'product-1344181453');

    // promotionalText = htmlLang === 'ar' ? 'وفّر 29%' : 'Save 29%';
    promotionalText = htmlLang === 'ar' ? 'وفّر 29%' : 'Save 29%';
    clonePromotionElement(30, 100, promotionalText, 'product-1306857438');
    clonePromotionElement(30, 100, promotionalText, 'product-1727535782');

    // promotionalText = htmlLang === 'ar' ? 'وفّر 50%' : 'Save 50%';
    // clonePromotionElement(10, 50, promotionalText, '.product-727834477');
    
    /*******************************************************************************************/
    /* PDP Size and Pack Options */
    /*******************************************************************************************/
    function encapsulateDropdownWithSquares(selectElement) {
        if (selectElement) {
            var sizeOptionsContainer = document.createElement('div');
            sizeOptionsContainer.classList.add('size-options');

            // Add title h3 with bundle-options-title class
            var sizeOptionsTitle = document.createElement('h3');
            sizeOptionsTitle.classList.add('bundle-options-title');
            
            // Determine language and set appropriate title
            var htmlLang = document.documentElement.lang || 'en';
            if (htmlLang.startsWith('ar')) {
                sizeOptionsTitle.textContent = 'المقاس';
            } else {
                sizeOptionsTitle.textContent = 'Size';
            }
            sizeOptionsContainer.appendChild(sizeOptionsTitle);

            // Create a wrapper for the size options list
            var sizeOptionsList = document.createElement('div');
            sizeOptionsList.classList.add('size-options-list');
            sizeOptionsContainer.appendChild(sizeOptionsList);

            var firstSizeSelected = false;
            Array.from(selectElement.options).forEach(function(option) {
                if (option.value !== "") {
                    var sizeOptionDiv = document.createElement('div');
                    sizeOptionDiv.classList.add('size-option');

                    if(option.textContent.includes('بوكسر') || option.textContent.includes('Boxer')){
                        sizeOptionDiv.classList.add('size-option-upsell');
                        //console.log(sizeOptionDiv);
                    }

                    if(option.textContent.includes('بدون') || option.textContent.includes('addition')){
                        option.selected = true;
                    }

                    sizeOptionDiv.textContent = option.textContent.split(' - ')[0]; // Show only the size letter
                                        
                    // Add selected state if option is selected or if this is the first option
                    // if (option.selected || !firstSizeSelected) {
                    if (option.selected) {
                        sizeOptionDiv.classList.add('selected');
                        // if (!firstSizeSelected) {
                        //     option.selected = true;
                        //     selectElement.value = option.value;
                        //     firstSizeSelected = true;
                        // }
                    }

                    if (option.disabled || option.textContent.includes("Out of Stock") || option.textContent.includes("نفدت الكمية")) {
                        sizeOptionDiv.classList.add('disabled');
                    }
                    
                    sizeOptionDiv.addEventListener('click', function() {
                        sizeOptionsList.querySelectorAll('.size-option').forEach(function(opt) {
                            opt.classList.remove('selected');
                        });

                        sizeOptionDiv.classList.add('selected');

                        selectElement.value = sizeOptionDiv.getAttribute('data-value');
                        
                        var event = new Event('change', { bubbles: true });
                        selectElement.dispatchEvent(event);
                    });

                    sizeOptionDiv.setAttribute('data-value', option.value);

                    sizeOptionsList.appendChild(sizeOptionDiv);
                }
            });

            selectElement.parentNode.insertBefore(sizeOptionsContainer, selectElement);

            selectElement.style.position = 'absolute';
            // selectElement.style.left = '-9999px';
            selectElement.style.opacity = '0';
            selectElement.style.marginTop = '-7vh';
            selectElement.style.opacity = '0';
            selectElement.style.height = '0';
            selectElement.style.padding = '0';
        }
    }

    waitForElement('select[name^="options["]', (boxers) => {
        var selectElements = document.querySelectorAll('select[name^="options["]');
        selectElements.forEach(encapsulateDropdownWithSquares);
    });

    waitForElement('.size-option-upsell', (sizeOptionUpsell) => {
        var optionUpsellTitleText = htmlLang === 'en' ? 'Add more at a special price' : 'أضف بوكسر بسعر خاص';
        var optionUpsellTitle = document.createElement('div');
        optionUpsellTitle.classList.add('option-upsell-title');
        optionUpsellTitle.innerHTML = `<h3 class="option-upsell-title-h3">`+optionUpsellTitleText+`</h3>`;
        sizeOptionUpsell.parentElement.parentElement.parentElement.insertAdjacentElement('beforebegin', optionUpsellTitle);

        sizeOptionUpsell.parentElement.firstChild.classList.add('size-option-upsell-no-add');
        

        

        var sizeOptionUpsellText = sizeOptionUpsell.textContent.split(' ( ');
        console.log(sizeOptionUpsellText);
        sizeOptionUpsell.textContent = '';
        
        
        var div0 = document.createElement('div');
        div0.classList.add('badge-container-upsell');
        var span0 = document.createElement('span');
        span0.classList.add('option-upsell-free-shipping-span');
        if(document.querySelector('.product-2130693625')) {
            span0.appendChild(document.createTextNode(htmlLang === 'en' ? 'Free Shipping' : 'شحن مجاني'));
            // span0.appendChild(document.createTextNode(htmlLang === 'en' ? 'Special Offer' : 'عرض خاص'));
        }
        else{
            span0.appendChild(document.createTextNode(htmlLang === 'en' ? 'Special Offer' : 'عرض خاص'));
        }
        div0.appendChild(span0);
        sizeOptionUpsell.appendChild(div0);
        
       
        var span1 = document.createElement('span');
        span1.classList.add('upsell-offering-span');
        span1.appendChild(document.createTextNode(sizeOptionUpsellText[0]));
        sizeOptionUpsell.appendChild(span1);
        var span2 = document.createElement('span');
        span2.classList.add('upsell-price-span');
        span2.appendChild(document.createTextNode(sizeOptionUpsellText[1]));
        sizeOptionUpsell.appendChild(span2);
        
    });

    /*******************************************************************************************/
    /* PDP Color Options */
    /*******************************************************************************************/
    function encapsulateThumbnailOptionsWithColors(thumbnailWrapper) {
        if (thumbnailWrapper) {
            var colorOptionsContainer = document.createElement('div');
            colorOptionsContainer.classList.add('color-options');

            // Add title h3 with bundle-options-title class
            var colorOptionsTitle = document.createElement('h3');
            colorOptionsTitle.classList.add('bundle-options-title');
            
            // Determine language and set appropriate title
            var htmlLang = document.documentElement.lang || 'en';
            if (htmlLang.startsWith('ar')) {
                colorOptionsTitle.textContent = 'اللون';
            } else {
                colorOptionsTitle.textContent = 'Color';
            }
            colorOptionsContainer.appendChild(colorOptionsTitle);

            // Create a wrapper for the color options list
            var colorOptionsList = document.createElement('div');
            colorOptionsList.classList.add('color-options-list');
            colorOptionsContainer.appendChild(colorOptionsList);

            var thumbnailOptions = thumbnailWrapper.querySelectorAll('div');
            
            thumbnailOptions.forEach(function(optionDiv) {
                var radioInput = optionDiv.querySelector('input[type="radio"]');
                var label = optionDiv.querySelector('label');
                var img = optionDiv.querySelector('img');
                var text = optionDiv.querySelector('p');
                
                if (radioInput && label && img && text) {
                    var colorOptionDiv = document.createElement('div');
                    colorOptionDiv.classList.add('color-option');
                    
                    // Determine color type based on text content
                    var colorText = text.textContent.trim();
                    if (colorText.includes('نص') || colorText.includes('mix') || colorText.includes('Mix')) {
                        colorOptionDiv.classList.add('color-mixed');
                    } else if (colorText.includes('أسود') || colorText.includes('Black') || colorText.includes('black')) {
                        colorOptionDiv.classList.add('color-black');
                    } else if (colorText.includes('أبيض') || colorText.includes('White') || colorText.includes('white')) {
                        colorOptionDiv.classList.add('color-white');
                    }
                    
                    // Only add selected state if radio is actually checked (respect platform defaults)
                    if (radioInput.checked) {
                        colorOptionDiv.classList.add('selected');
                    }
                    
                    // Add disabled state if radio is disabled
                    if (radioInput.disabled) {
                        colorOptionDiv.classList.add('disabled');
                    }
                    
                    // Create color indicator
                    var colorIndicator = document.createElement('div');
                    colorIndicator.classList.add('color-indicator');
                    
                    // Add text label
                    var colorLabel = document.createElement('span');
                    colorLabel.classList.add('color-label');
                    colorLabel.textContent = colorText;
                    
                    colorOptionDiv.appendChild(colorIndicator);
                    colorOptionDiv.appendChild(colorLabel);
                    
                    // Add click event to maintain functionality
                    colorOptionDiv.addEventListener('click', function() {
                        // Remove selected from all options
                        colorOptionsList.querySelectorAll('.color-option').forEach(function(opt) {
                            opt.classList.remove('selected');
                        });
                        
                        // Add selected to clicked option
                        colorOptionDiv.classList.add('selected');
                        
                        // Trigger the original radio input
                        radioInput.checked = true;
                        
                        // Trigger the original label click to maintain go-to-slide functionality
                        label.click();
                        
                        // Dispatch change event
                        var event = new Event('change', { bubbles: true });
                        radioInput.dispatchEvent(event);
                    });
                    
                    colorOptionsList.appendChild(colorOptionDiv);
                }
            });
            
            // Insert the new container before the original wrapper
            thumbnailWrapper.parentNode.insertBefore(colorOptionsContainer, thumbnailWrapper);
            
            // Hide the original wrapper
            thumbnailWrapper.style.display = 'none';
        }
    }

    waitForElement('.s-product-options-thumbnails-wrapper', (thumbnailWrapper) => {
        encapsulateThumbnailOptionsWithColors(thumbnailWrapper);
    });


    /*******************************************************************************************/
    /* Add PDP Specific Elements Product USPs brand USPs */
    /*******************************************************************************************/
    var faqDataPDP = {
        en: [
            {
                question: "Can I wear Hawa with Thoub?",
                answer: "Absolutely, our design has been optimized for Thoub but it suitable for all activities and lifestyles.",
                link: '',
                linkText: ''
            },
            {
                question: "What is the First Pair Guarantee?",
                answer: "We're confident that we created the best boxers on the planet. If you don't love your first pair, we will send you a different size or issue a full refund - no return required.",
                linkText: 'Guarantee Policy',
                link: 'https://hawa.co/en/return-policy/page-1642404213'
            },
            {
                question: "Do you offer Returns and Exchanges?",
                answer: "You can return or exchange within 7 days from receiving your order.",
                linkText: 'Return Policy',
                link: 'https://hawa.co/en/return-policy/page-1642404213'
            },
            {
                question: "Why did you use Modal instead of Cotton?",
                answer: "After spending more than a year scouring the market and trying all types of fabrics, we are convinced that Modal is superior to Cotton. It is 3 times softer, 50% more breathable and cool to the touch.",
                link: '',
                linkText: ''
            },
            {
                question: "How do I pick the right size?",
                answer: "We offer products for all sizes (S - XXXL), we want all body types and heights to feel confident with Hawa. You can refer to our size chart for more information.",
                linkText: 'Size Guide',
                link: 'https://hawa.co/en/size-guide/page-222699345'
            }
            ,
            {
                question: "What if I am in between sizes?",
                answer: "Personally, as the founder of Hawa, I found myself between two sizes and discovered that going with the smaller size worked best for me since our boxers are designed to fit snugly on your body. Just keep in mind that we have a first-pair guarantee that lets you try them out, and if it doesn't work for you, you'll get your money back or we'll send your correct size free of charge.",
                link: '',
                linkText: ''
            }
            ,
            {
                question: "Why such a big pouch?",
                answer: "Most global brands design boxers without considering the male anatomy. At Hawa, we recognized this as a problem and addressed it in our designs. We discovered that chafing and excessive sweating completely disappear when we added our 3d contour pouch. It seperates your balls from your legs so you can go about your day without varant adjustments.",
                link: '',
                linkText: ''
            }
            ,
            {
                question: "When will my items ship? How long will it take to arrive?",
                answer: `Saudi Arabia:\n\n•Riyadh: within 48 hours (excluding Friday)\n•Dammam and Jeddah: within 3 days (excluding Friday)\n•Other cities in Saudi Arabia: 3-6 days (excluding Friday)\n\n•Gulf Countries:UAE: within 1 week\n•Kuwait and other GCC countries: within 2 weeks`,
                link: '',
                linkText: ''
            }
            
        ],
        ar: [
//             {
//                 question: "كم ياخذ شحن الطلبات المسبقة؟",
//                 answer: `جميع الطلبات سيتم شحنها ابتداءً من تاريخ 23 - 26 سبتمبر، وصول الطلبات يعتمد على المدينة المتواجد فيها العميل. 

// داخل المملكة: 
// - يتم التوصيل داخل المملكة خلال 48 ساعة بعد شحن الطلب.
// - باقي مدن المملكة الكبيرة مثل جدة والدمام، خلال 3 أيام عمل بعد شحن الطلب.
// - ⁠باقي مدن المملكة خلال 6 أيام عمل كحد أقصى بعد شحن الطلب.

// باقي دول الخليج: 
// - دولة الإمارات: خلال أسبوع بعد شحن الطلب.
// - دولة الكويت وباقي دول الخليج: خلال أسبوعين بعد شحن الطلب.
// `
//             },
            {
                question: "هل بوكسر هوا مناسب للثوب؟",
                answer: "ايه نعم، تم تصميم بوكسر هوا بشكل أساسي للثوب، بس برضو مناسب لكل المناسبات والملابس الأخرى."
            },
            {
                question: "وش هو ضمان هوا على البوكسر الأول؟",
                answer: "واثقين في منتجنا، أخذ مننا فوق السنة من البحث والتطوير. في حال ماعجبك أول بوكسر. أبد خله عندك وترجع لك فلوسك.",
                linkText: 'للمزيد: سياسة ضمان هوا',
                link: 'https://hawa.co/ar/return-policy/page-1642404213'
            },
            {
                question: "هل يمديني أسترجع أو استبدل المنتج؟",
                answer: "أكيد يمديك، بإمكانك الاسترجاع والاستبدال خلال 30 يوم من استلام الطلب.",
                linkText: 'للمزيد: سياسة الاستبدال والاسترجاع',
                link: 'https://hawa.co/ar/return-policy/page-1642404213'
            },
            {
                question: "ليش ما استخدمتوا قطن في البوكسر؟",
                answer: "بعد بحث طويل استغرق أكثر من سنة، وتجارب واختبارات كثيرة ومتكررة؛ وصلنا لنتيجة إن المودال هو الأبرد، والأنعم، والأخف على جلدك وجسمك"
            }
            ,
            {
                question: `كيف أعرف المقاس المناسب لبوكسر هوا؟`,
                answer: `تقدر تستخدم حاسبة المقاس في صفحة المنتج اللي بتعطيك توصية دقيقة لمقاسك بناء على طولك ووزنك وبنية جسمك.`,
                linkText: 'استخدم حاسبة المقاس',
                link: '#'
            }
            ,
            {
                question: `وش الحل لو أنا بين مقاسين؟`,
                answer: `\nعادي جداً، أنا شخصياً (المؤسس لهوا) كنت بين مقاسيين واكتشفت انه الأفضل لي إن أروح للمقاس الأصغر لأن بوكسرنا أفضل إنه يكون ماسك على جسمك. 
    بس حط في بالك إن عندنا سياسة الضمان تتيح لك فرصة تجرب ولو ماضبط مقاسه، نرسلك المقاس الصح وفلوسك ترجع لك.`,
                linkText: 'استخدم حاسبة المقاس',
                link: '#'
            }
            ,
            {
                question: `ليش فيه مساحة أمامية واسعة؟`,
                answer: `معظم براندات العالم تصمم البوكسر بدون ماتاخذ بالاعتبار عن بنية الرجال الجسدية، حنا في هوا استوعبنا إنها مشكلة. فهمنا لها، صممنا لها، جربناها. 
    واستوعبنا إن الاحتكاك والتعرق يختفي تماماً إذا أضفنا المساحة بالنص. تصير تحب المشي لا لبست هوا حتى بعد يوم طويل.`
            }
            ,
            {
                question: `كم ياخذ الشحن لمنتجات هوا؟`,
                answer: `داخل المملكة:\n\n• يتم التوصيل داخل الرياض خلال 48 ساعة (باستثناء يوم الجمعة)\n• باقي مدن المملكة الكبيرة مثل جدة والدمام، خلال 3 أيام عمل (باستثناء يوم الجمعة)\n• باقي مدن المملكة، خلال 6 أيام عمل كحد أقصى (باستثناء يوم الجمعة)\n\nباقي دول الخليج:\n\n• دولة الإمارات: خلال أسبوع\n• دولة الكويت وباقي دول الخليج: خلال أسبوعين`
            }
        ]
    };

    /*******************************************************************************************/
    /* PDP Components */
    /*******************************************************************************************/

    /*******************************************************************************************/
    /* Product Stars and Subtitle */
    /*******************************************************************************************/
    function createProductInfo() {
        var tarelement = document.querySelector('.product-single__info').parentNode;
        var divProdInfo = document.createElement('div');
        divProdInfo.classList.add('product-info-div');

        var divvv = document.createElement('div');
        divvv.classList.add('product-name-stars-div');
        divvv.appendChild(document.querySelector('.product-single__info').querySelector('h1'));
        if (document.querySelector('.product-single__info').querySelector('salla-rating-stars')) {
            // divvv.appendChild(document.querySelector('.product-single__info').querySelector('salla-rating-stars'));
        }
        divProdInfo.appendChild(divvv);

        var divProdSub = document.createElement('div');
        divProdSub.classList.add('product-subtitle');
        divProdSub.innerHTML = `<h2 class="product-subtitle">${productSubtitle}</h2>`;
        divProdInfo.appendChild(divProdSub);

        return { element: divProdInfo, target: tarelement, position: 'prepend' };
    }

    function createStarsRating() {
        var tarelement = document.querySelector('#product-form').querySelector(':scope > div:not(.size-guide-container)').querySelector('.center-between');
        var divProdInfo = document.createElement('div');
        divProdInfo.classList.add('product-info-div-stars');

        var divvv = document.createElement('div');
        divvv.classList.add('product-name-stars-div');
        if (document.querySelector('.product-single__info').querySelector('salla-rating-stars')) {
            divvv.appendChild(document.querySelector('.product-single__info').querySelector('salla-rating-stars'));
        }
        divProdInfo.appendChild(divvv);

        return { element: divProdInfo, target: tarelement, position: 'append' };
    }

    function initializeSwiper() {
        var initSwiper = () => {
            try {
                var existingSwiper = document.querySelector('.swiper').swiper;
                existingSwiper.params.slidesPerView = 1.1;
                existingSwiper.params.spaceBetween = 7;
                existingSwiper.update();
            } catch(err) {
                setTimeout(initSwiper, 100);
            }
        };

        initSwiper();
    }

    /*******************************************************************************************/
    /* Inventory Element */
    /*******************************************************************************************/
    function createLowStockAlert() {
        var lowStockText = htmlLang === "en" ? "Low Stock, Order Now" : "الكمية محدودة، اطلب الآن";
        
        var lowStockDiv = document.createElement('div');
        lowStockDiv.className = 'low-stock-alert';
        
        lowStockDiv.innerHTML = `
            <div class="low-stock-indicator">
                <span class="low-stock-dot"></span>
                <span class="low-stock-text">${lowStockText}</span>
            </div>
        `;
        
        // Add the element to the size guide container
        waitForElement('.size-guide-container', (container) => {
            container.appendChild(lowStockDiv);
        });

    }

    /*******************************************************************************************/
    /* Shipping Countdown Element */
    /*******************************************************************************************/

    function createShippingCountdown() {
        var shippingDiv = document.createElement('div');
        shippingDiv.className = 'shipping-countdown-alert';

        function getArabicHourLabel(h) {
            if (h === 1) return 'ساعة';
            if (h === 2) return 'ساعتين';
            if (h >= 3 && h <= 10) return 'ساعات';
            return 'ساعة';
        }
        
        function getArabicMinuteLabel(m) {
            if (m === 1) return 'دقيقة';
            if (m === 2) return 'دقيقتين';
            if (m >= 3 && m <= 10) return 'دقائق';
            return 'دقيقة';
        }
        
        // Function to calculate time remaining until 12 noon GMT+3
        function calculateTimeRemaining() {
            var now = new Date();
            var utcTime = now.getTime() + (now.getTimezoneOffset() * 60000);
            var gmt3Time = new Date(utcTime + (3 * 3600000)); // GMT+3
            
            var today = new Date(gmt3Time);
            var cutoffTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 0, 0); // 12:00 PM GMT+3
            
            // If it's already past 12 PM today, set cutoff for tomorrow
            if (gmt3Time > cutoffTime) {
                cutoffTime.setDate(cutoffTime.getDate() + 1);
            }
            
            var timeRemaining = cutoffTime.getTime() - gmt3Time.getTime();
            
            if (timeRemaining <= 0) {
                return null; // Past cutoff time
            }
            
            var hours = Math.floor(timeRemaining / (1000 * 60 * 60));
            var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
            
            return { hours, minutes, seconds };
        }
        
        // Function to update the countdown display
        function updateCountdown() {
            var now = new Date();
            var utcTime = now.getTime() + (now.getTimezoneOffset() * 60000);
            var gmt3Time = new Date(utcTime + (3 * 3600000)); // GMT+3
        
            var currentHour = gmt3Time.getHours();
            var currentMinute = gmt3Time.getMinutes();
            var currentDay = gmt3Time.getDay(); // 0 = Sunday, 5 = Friday
        
            // Hide on Friday OR outside 00:01–12:00 window
            if (
                currentDay === 5 || // Friday
                currentHour > 12 ||
                (currentHour === 0 && currentMinute === 0)
            ) {
                shippingDiv.style.display = 'none';
                return;
            } else {
                shippingDiv.style.display = 'flex'; // Or 'block' depending on layout
            }
        
            var timeRemaining = calculateTimeRemaining();
            if (!timeRemaining) {
                shippingDiv.style.display = 'none';
                return;
            }
        
            var lineText = shippingDiv.querySelector('.shipping-line-text');
            var hoursStr = timeRemaining.hours.toString().padStart(2, '0');
            var minutesStr = timeRemaining.minutes.toString().padStart(2, '0');
        
            if (htmlLang === "en") {
                lineText.innerHTML = `Ships today, order within <span class="countdown-highlight">${hoursStr} hrs ${minutesStr} mins</span>`;
            } else {
                lineText.innerHTML = `ينشحن اليوم اذا طلبت خلال <span class="countdown-highlight">${hoursStr} ${getArabicHourLabel(timeRemaining.hours)} و${minutesStr} ${getArabicMinuteLabel(timeRemaining.minutes)}</span>`;
            }
        }
        
        // Create the HTML structure
        shippingDiv.innerHTML = `
            <div class="shipping-countdown-line">
                <span class="shipping-line-text"></span>
                <span class="shipping-emoji">🚚</span>
            </div>
        `;

        // Wait a short time to ensure DOM is rendered
        setTimeout(() => {
            updateCountdown();
            setInterval(updateCountdown, 1000);
        }, 10);
        
        // Add the element before the Tamara section
        // waitForElement('.tamara-split-payment-section', (tamaraElement) => {
        //     tamaraElement.insertAdjacentElement('beforebegin', shippingDiv);
        // });
        
        return shippingDiv;
    }

    /*******************************************************************************************/
    /* Size Guide */
    /*******************************************************************************************/
    function createSizeGuide() {
        var sizeguideLink = '#';
        var priceGuideHeadline = htmlLang === "en" ? " " : " ";
        var sizeguideLink = htmlLang === "en" ? 'https://hawa.co/en/size-guide/page-222699345' : 'https://hawa.co/ar/size-guide/page-222699345';
        var priceGuideLink = htmlLang === "en" ? 'Size Guide' : 'اعرف مقاسك في هوا';
        var priceGuideLinkElement = `<a href="${sizeguideLink}" class="size-guide-link">${priceGuideLink}</a>`;
        var sizeLogo = `
        <svg class="Trigger__Icon" viewBox="0 0 512 512" style="width: 24px; height: 24px;">
      <path d="M193.65 156.647c-36.028 0-62.835 14.83-65.2 36.06a26.85 26.85 0 0 0-.165 2.964c0 21.366 24.68 37.366 60.02 38.9 1.787.078 3.583.117 5.337.117 37.87 0 65.357-16.413 65.357-39.026s-27.487-39.026-65.357-39.026zm0 46.707c-1.302 0-2.638-.03-3.97-.088-15.277-.668-24.74-4.874-28.58-7.608 4.4-3.133 15.725-7.663 32.552-7.663 16.856 0 28.204 4.547 32.577 7.68-4.373 3.133-15.72 7.68-32.577 7.68zm193.65 60.303v-67.982c0-28.763-21.7-54.808-61.135-73.338-35.657-16.76-82.72-25.992-132.515-25.992-48.057 0-93.907 8.675-129.104 24.428-38.388 17.18-61.2 41.593-64.202 68.744-.228 2.055-.344 4.127-.344 6.157v120.65c0 27.153 19.62 52.17 55.243 70.442 31.905 16.365 74.893 26.488 121.046 28.505a400.35 400.35 0 0 0 17.361.383H512V263.657H387.3zM31.5 192.974c3.498-31.527 69.5-65.282 162.15-65.282 95.648 0 162.303 35.828 162.303 67.983s-66.655 67.982-162.303 67.982a367.32 367.32 0 0 1-15.993-.354l-7.185-.39c-35.193-2.26-68.22-9.7-93.66-21.2l-2.615-1.208-.26-.124-2.178-1.05-1.235-.62-1.18-.596-1.73-.906-.388-.205c-21.34-11.434-34.124-25.26-35.7-38.54-.016-.135-.025-.27-.04-.404l-.086-.964a24.1 24.1 0 0 1-.045-1.42c.001-.88.052-1.8.153-2.7zm324.454 58.083v12.6H336.7c7.143-3.935 13.567-8.15 19.263-12.6zm124.7 133.25h-32.9v-41.32h-31.347v41.32h-38.86V317.56H346.2v66.746h-38.113v-41.32H276.75v41.32h-38.862V317.56H206.54v66.746h-12.9a369.21 369.21 0 0 1-15.993-.353l-9.23-.527v-40.44H137.08V379.8c-13.785-2.275-26.847-5.377-38.86-9.236v-66.4H66.873v53.3c-22.62-12.202-35.527-27.096-35.527-41.14v-65.242c4.296 3.35 9.026 6.56 14.15 9.626l.17.104 1.964 1.145 1.95 1.114 1.56.863 3.025 1.614.758.398.318.167L59.038 268l.565.27 4.306 2 .08.034 5.153 2.237 1.013.423 4.62 1.852 2.15.82 2.396.885c22.23 8.13 47.548 13.707 74.746 16.464l1.228.125 3.547.335 5.203.428 2.04.146 6.285.393c.086.004.17.01.256.016l1.028.56h307v89.308z"></path>
        </svg>`;

        var pdpForm = document.querySelector('#product-form');
        var sizeGuideDiv = document.createElement('div');
        sizeGuideDiv.className = 'size-guide-container';

        // Create size guide elements
        var englishLink = document.createElement('div');
        englishLink.className = 'size-guide-link-div';
        englishLink.id = 'size-guide-link-div';
        englishLink.innerHTML = priceGuideLinkElement + sizeLogo;

        var sizeGuideText = document.createElement('span');
        sizeGuideText.textContent = priceGuideHeadline;
        sizeGuideText.className = 'size-guide-arabic';

        sizeGuideDiv.appendChild(englishLink);
        sizeGuideDiv.appendChild(sizeGuideText);

        // Create modal but don't set up event listeners yet
        var modalOverlay = createSizeGuideModal();
        document.body.appendChild(modalOverlay);

        // Move price div
        var priceDiv = pdpForm.querySelector(':scope > div:not(.size-guide-container)');
        if (priceDiv) {
            priceDiv.classList.add('pdp-price-div');
            pdpForm.insertBefore(priceDiv, pdpForm.firstChild);
        }

        // Return both the element and the modal for later event binding
        return { 
            element: sizeGuideDiv, 
            target: priceDiv, 
            position: 'after',
            postRender: () => {
                setupSizeGuideEventListeners(modalOverlay);
                // Add click handler to stop animation
                const sizeGuideLink = document.querySelector('.size-guide-link-div');
                const icon = document.querySelector('.Trigger__Icon');
                if (sizeGuideLink && icon) {
                    sizeGuideLink.addEventListener('click', (e) => {
                        e.preventDefault();
                        icon.classList.add('animation-stopped');
                        modalOverlay.style.display = 'flex';
                    });
                }
            }
        };
    }


    /*******************************************************************************************/
    /* Product Small USPs */
    /*******************************************************************************************/
    function createProductUSPs() {
        var inseamText = htmlLang === "en" ? "Made for daily wear" : "يناسب الثوب واللبس اليومي";
        var microMeshText = htmlLang === "en" ? "Perfect length, eliminates chafing" : "يمنع الاحتكاك وما يتسلق فخذك";
        var stretchText = htmlLang === "en" ? "Light, breathable and cool to the touch" : "قماش بارد وخفيف وناعم";
        var seamsText = htmlLang === "en" ? "Stays put, no adjustment needed" : "ثابت ومايتسلق فخذك";
        var bandText = htmlLang === "en" ? "Premium anti-roll waistband" : "حزام ناعم تنساه حول خصرك";
        var materialText = htmlLang === "en" ? "Durable flatlock stitching" : "خياطة محبوكة، تعيش وضابطة على جسمك";
        var careText = htmlLang === "en" ? "4-way stretch" : "مطاطي من كل الجهات";
        var pouchText = htmlLang === "en" ? "3D contour pouch" : "مساحة أمامية تمنع الالتصاق";

        var inseamImgSrc = "https://d17gg5c5d03gu7.cloudfront.net/pdp_prod_usps_thobe_1_krimud.svg";
        var microMeshImgSrc = "https://d17gg5c5d03gu7.cloudfront.net/pdp_prod_usps_length_2_sbbj9j.svg";
        var stretchImgSrc = "https://d17gg5c5d03gu7.cloudfront.net/pdp_prod_usps_cooling_3_emt7qj.svg";
        var seamsImgSrc = "https://d17gg5c5d03gu7.cloudfront.net/pdp_prod_usps_thabit_4_ofgomz.svg";
        var bandImgSrc = "https://d17gg5c5d03gu7.cloudfront.net/pdp_prod_usps_waistband_5_fumltn.svg";
        var materialImgSrc = "https://d17gg5c5d03gu7.cloudfront.net/pdp_prod_usps_flatlock_6_qzmmlm.svg";
        var careImgSrc = "https://d17gg5c5d03gu7.cloudfront.net/pdp_prod_usps_stretch_7_jj0v5l.svg";
        var pouchImgSrc = "https://d17gg5c5d03gu7.cloudfront.net/pdp_prod_usps_pouch_8_llt6zt.svg";

        var newDiv = document.createElement('div');
        newDiv.classList.add('product-usp-parent-div');

        newDiv.innerHTML = `
            <h3 class="product-usp-title">${htmlLang === 'ar' ? 'مزايا المنتج' : 'Product Features'}</h3>
            <div class="product-description mb-5 pt-6 border-t border-solid border-gray desktop:pt-32">
                <ul class="pl-0">
                    ${createUSPListItem(inseamImgSrc, inseamText)}
                    ${createUSPListItem(stretchImgSrc, stretchText)}
                    ${createUSPListItem(pouchImgSrc, pouchText)}
                    ${createUSPListItem(bandImgSrc, bandText)}
                    ${createUSPListItem(microMeshImgSrc, microMeshText)}
                    ${createUSPListItem(careImgSrc, careText)}
                    
                </ul>
            </div>
        `;

        var tarelement = document.querySelector('.product-single__info');
        return { element: newDiv, target: tarelement, position: 'append' };
    }

    function createUSPListItem(imgSrc, text) {
        return `
            <li class="mb-8 list-none">
                <div class="flex items-center">
                    <div class="min-w-[40px] w-[40px] mr-20">
                        <picture class="lazypicture block w-full">
                            <img class="w-full" src="${imgSrc}" srcset="${imgSrc}" alt="" loading="lazy">
                        </picture>
                    </div>
                    <p class="leading-6 product-usp-p">${text}</p>
                </div>
            </li>
        `;
    }

    /*******************************************************************************************/
    /* Brand USPs */
    /*******************************************************************************************/
    var arabicText = [
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-easy-return-svg_vexnb2.svg', text: 'استبدال مجاني واسترجاع سهل' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-truck-svg_znkigl.svg', text: `توصيل مجاني فوق 280 ر.س` },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-guarantee-svg_mdgmnp.svg', text: 'ماعجبك البوكسر؟ فلوسك ترجعلك' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-24hr-svg_iiaggs.png', text: 'الرياض: توصيل خلال 48 ساعة' }
    ];

    var englishText = [
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-easy-return-svg_vexnb2.svg', text: 'Easy returns, free exchanges' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-truck-svg_znkigl.svg', text: `Free delivery above 280` },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-guarantee-svg_mdgmnp.svg', text: 'We Guarantee Your First Boxer' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/brand-usp-24hr-svg_iiaggs.png', text: '48hr delivery in Riyadh' }
    ];

    var arabicDesktopText = [
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/easy_return_brand_usp_desktop_pfsnkx.svg', text: 'استبدال مجاني واسترجاع سهل' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/fast_delivery_brand_usp_desktop_ehbdiw.svg', text: `توصيل مجاني فوق 280 ر.س` },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/guarantee_first_boxer_brand_usp_desktop_avnlvg.svg', text: 'ماعجبك البوكسر؟ فلوسك ترجعلك' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/24hr_desktop_brand_usp_ezllzj.svg', text: 'الرياض: توصيل خلال 48 ساعة' }
    ];

    var englishDesktopText = [
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/easy_return_brand_usp_desktop_pfsnkx.svg', text: 'Easy returns, free exchanges' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/fast_delivery_brand_usp_desktop_ehbdiw.svg', text: `Free delivery above 280` },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/guarantee_first_boxer_brand_usp_desktop_avnlvg.svg', text: 'We Guarantee Your First Boxer' },
        { icon: 'https://d17gg5c5d03gu7.cloudfront.net/24hr_desktop_brand_usp_ezllzj.svg', text: '48hr delivery in Riyadh' }
    ];

    function createBrandUSPs(targetDiv) {
        var selectedText = htmlLang === 'en' ? englishText : arabicText;
        var selectedTextDesktop = htmlLang === 'en' ? englishDesktopText : arabicDesktopText;

    var container = document.createElement('div');
        container.className = 'features-container-pdp';
        container.classList.add('features-container');

    var inner = document.createElement('div');
    inner.className = 'features-inner';

    var list = document.createElement('div');
    list.className = 'features-list';

        selectedText.forEach((item, index) => {
            // Create a wrapper div for the feature item
            var featureWrapper = document.createElement('div');
            featureWrapper.className = 'feature-item';
            
            // Create mobile icon
            var mobileIcon = document.createElement('img');
            mobileIcon.src = item.icon;
            mobileIcon.alt = '';
            mobileIcon.className = 'feature-icon mobile-icon';
            
            // Create desktop icon using desktop-specific data
        var desktopIcon = document.createElement('img');
            desktopIcon.src = selectedTextDesktop[index].icon;
            desktopIcon.alt = '';
        desktopIcon.className = 'feature-icon desktop-icon';

            // Create text element
        var text = document.createElement('p');
        text.className = 'feature-text';
        text.textContent = item.text;

            // Append elements to wrapper
            featureWrapper.appendChild(mobileIcon);
            featureWrapper.appendChild(desktopIcon);
            featureWrapper.appendChild(text);
            
            list.appendChild(featureWrapper);
    });

    inner.appendChild(list);
    container.appendChild(inner);

        return { element: container, target: targetDiv, position: 'before-parent' };
    }

    function createFeatureItem(item) {
        var featureItem = document.createElement('div');
        featureItem.className = 'feature-item';

        var icon = document.createElement('img');
        icon.src = item.icon;
        icon.alt = '';
        icon.className = 'feature-icon';

        var text = document.createElement('p');
        text.className = 'feature-text';
        text.textContent = item.text;

        featureItem.appendChild(icon);
        featureItem.appendChild(text);
        
        return featureItem;
    }

    /*******************************************************************************************/
    /* Product FAQ */
    /*******************************************************************************************/
    function createFAQSection(targetDiv) {
        var faqDiv = document.createElement('div');
        faqDiv.className = 's-block--faq pdp-faq-section';

        var currentPDPFAQs = faqDataPDP[htmlLang] || faqDataPDP.en;
        
        faqDiv.innerHTML = `
            <div class="container">
                <div class="text-center mb-8">
                    <p class="tracking-tight">${htmlLang === "en" ? "FAQs" : "أسئلة عالبال"}</p>
                </div>
                <div class="faq-container-grid">
                    ${currentPDPFAQs.map(faq => createFAQItem(faq)).join('')}
                </div>
            </div>
        `;

        initializeFAQHandlers(faqDiv);
        return { element: faqDiv, target: targetDiv, position: 'before-parent' };
    }

    function createFAQItem(faq) {
        if(faq.question == `كيف أعرف المقاس المناسب لبوكسر هوا؟` || faq.question == `وش الحل لو أنا بين مقاسين؟`){
            return `
            <div class="single-faq w-full rounded-lg border border-store-text-secondary bg-store-bg-secondary py-3 px-5">
                <button class="faq-btn flex justify-between items-center w-full gap-2">
                    <p class="text-base text-store-text-primary rtl:text-right ltr:text-left">
                        ${faq.question}
                    </p>
                    <i class="sicon-keyboard_arrow_down bg-primary text-primary-reverse rounded-full text-base p-[4px]"></i>
                </button>
                <div class="faq-content">
                    <p class="py-3 text-sm text-store-text-secondary" style="white-space: pre-line">
                        ${faq.answer}
                    </p>
                        ${faq.link ? `<a href="${faq.link}" class="bg-primary py-1 px-2 rounded text-primary-reverse inline-block text-sm">${faq.linkText}</a>` : ''}
                    </div>
                </div>
            `;
        }
        return `
            <div class="single-faq w-full rounded-lg border border-store-text-secondary bg-store-bg-secondary py-3 px-5">
                <button class="faq-btn flex justify-between items-center w-full gap-2">
                    <p class="text-base text-store-text-primary rtl:text-right ltr:text-left">
                        ${faq.question}
                    </p>
                    <i class="sicon-keyboard_arrow_down bg-primary text-primary-reverse rounded-full text-base p-[4px]"></i>
                </button>
                <div class="faq-content">
                    <p class="py-3 text-sm text-store-text-secondary" style="white-space: pre-line">
                        ${faq.answer}
                    </p>
                    ${faq.link ? `<a href="${faq.link}" class="bg-primary py-1 px-2 rounded text-primary-reverse inline-block text-sm">${faq.linkText}</a>` : ''}
                </div>
            </div>
        `;
    }

    function initializeFAQHandlers(faqDiv) {
        faqDiv.querySelectorAll('.faq-size-link').forEach(link => {
            // Create and append the modal if it doesn't exist
            let modalOverlay = document.querySelector('.modal-overlay');
            if (!modalOverlay) {
                modalOverlay = createSizeGuideModal();
                document.body.appendChild(modalOverlay);
            }

            // Add click event to the CTA button
            link.addEventListener('click', () => {
                modalOverlay.style.display = 'flex';
            });

            // Set up modal close functionality
            const closeButton = modalOverlay.querySelector('.modal-close');
            if (closeButton) {
                closeButton.addEventListener('click', () => {
                    modalOverlay.style.display = 'none';
                });
            }

            // Close modal when clicking outside
            modalOverlay.addEventListener('click', (e) => {
                if (e.target === modalOverlay) {
                    modalOverlay.style.display = 'none';
                }
            });
        });

        faqDiv.querySelectorAll('.faq-btn').forEach(button => {
            button.addEventListener('click', () => {
                const faqItem = button.parentElement;
                const icon = button.querySelector('i');
                
                // Toggle current FAQ
                const isOpen = faqItem.classList.contains('open');
                
                if (isOpen) {
                    faqItem.classList.remove('open');
                    icon.classList.remove('sicon-keyboard_arrow_up');
                    icon.classList.add('sicon-keyboard_arrow_down');
                } else {
                    faqItem.classList.add('open');
                    icon.classList.remove('sicon-keyboard_arrow_down');
                    icon.classList.add('sicon-keyboard_arrow_up');
                }
                
                // Close other FAQs
                faqDiv.querySelectorAll('.single-faq').forEach(item => {
                    if (item !== faqItem && item.classList.contains('open')) {
                        item.classList.remove('open');
                        const otherIcon = item.querySelector('i');
                        otherIcon.classList.remove('sicon-keyboard_arrow_up');
                        otherIcon.classList.add('sicon-keyboard_arrow_down');
                    }
                });
            });
        });
    }

    /*******************************************************************************************/
    /* Product Instagram Gallery */
    /*******************************************************************************************/

    function createInstagramSection(targetDiv) {
       

        var targetElementinstaPDP = document.createElement('div');

        if(htmlLang == 'en'){
            targetElementinstaPDP.innerHTML= `
            <div class="insta-title-div"><h2 class="insta-h2">`+instaTextEn+`</h2></div>
            <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
            <div class="elfsight-app-682538f0-27f2-46e8-9c59-d5f961493ce2" data-elfsight-app-lazy></div>
            `
        }
        else {
            targetElementinstaPDP.innerHTML= `
            <div class="insta-title-div"><h2 class="insta-h2">`+instaTextAr+`</h2></div>
            <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
            <div class="elfsight-app-682538f0-27f2-46e8-9c59-d5f961493ce2" data-elfsight-app-lazy></div>
            `
        }

        return { element: targetElementinstaPDP, target: targetDiv, position: 'before-parent' };
    }

    // Helper function to initialize Swiper
    function initializeGallerySwiper() {
        var initSwiper = () => {
            try {
                new Swiper('.gallery-swiper', {
                    lazy: {
                        loadPrevNext: true,
                        loadPrevNextAmount: 2,
                    },
                    breakpoints: {
                        320: {
                            slidesPerView: 1.2,
                            spaceBetween: 5,
                        },
                        768: {
                            slidesPerView: 3,
                            spaceBetween: 10,
                        },
                        1200: {
                            slidesPerView: 4,
                            spaceBetween: 20,
                        },
                    },
                    speed: 400,
                    grabCursor: true,
                    preloadImages: false,
                    watchSlidesProgress: true,
                    resistance: true,
                    resistanceRatio: 0.85,
                });
            } catch(err) {
                setTimeout(initSwiper, 100);
            }
        };

        initSwiper();
    }

    /*******************************************************************************************/
    /* Product Accordions */
    /*******************************************************************************************/

    function createAccordionSections(targetDiv) {
        var newDiv = document.createElement('div');
        
        // Get current FAQ data based on language
        var currentPDPFAQs = faqDataPDP[htmlLang] || faqDataPDP.en;
        
        // Create FAQ HTML content
        var faqContent = currentPDPFAQs.map(faq => {
            return `
                <div class="single-faq w-full rounded-lg border border-store-text-secondary bg-store-bg-secondary py-3 px-5 mb-3">
                    <button class="faq-btn flex justify-between items-center w-full gap-2">
                        <p class="text-base text-store-text-primary rtl:text-right ltr:text-left">
                            ${faq.question}
                        </p>
                        <i class="sicon-keyboard_arrow_down bg-primary text-primary-reverse rounded-full text-base p-[4px]"></i>
                    </button>
                    <div class="faq-content">
                        <p class="py-3 text-sm text-store-text-secondary" style="white-space: pre-line">
                            ${faq.answer}
                        </p>
                        ${faq.link ? `<a href="${faq.link}" class="bg-primary py-1 px-2 rounded text-primary-reverse inline-block text-sm">${faq.linkText}</a>` : ''}
                    </div>
                </div>
            `;
        }).join('');
        
        newDiv.innerHTML = `
            <div class="accordion-section">
                <div class="accordion-header">
                    <span>${shippingHeadline}</span>
                    <button class="accordion-button">+</button>
                </div>
                <div class="accordion-content">
                    <p>${shippingContent.replace(/\n/g, '<br>')}</p>
                </div>
            </div>

            <div class="accordion-section">
                <div class="accordion-header">
                    <span>${careInstructionsHeadline}</span>
                    <button class="accordion-button">+</button>
                </div>
                <div class="accordion-content">
                    <p>${careInstructionsContent.replace(/\n/g, '<br>')}</p>
                </div>
            </div>

            <div class="accordion-section">
                <div class="accordion-header">
                    <span>${firstPairGuaranteeHeadline}</span>
                    <button class="accordion-button">+</button>
                </div>
                <div class="accordion-content">
                    <p>${firstPairGuaranteeContent.replace(/\n/g, '<br>')}</p>
                    <a href="${firstPairGuaranteeLinkUrl}" class="bg-primary py-1 px-2 rounded text-primary-reverse inline-block text-sm">${firstPairGuaranteeLinkText}</a>
                </div>
            </div>

            <div class="accordion-section">
                <div class="accordion-header">
                    <span>${fabricHeadline}</span>
                    <button class="accordion-button">+</button>
                </div>
                <div class="accordion-content">
                    <p>${fabricContent.replace(/\n/g, '<br>')}</p>
                </div>
            </div>

            <div class="accordion-section accordion-section-last">
                <div class="accordion-header">
                    <span>${htmlLang === "en" ? "FAQs" : "أسئلة عالبال"}</span>
                    <button class="accordion-button">+</button>
                </div>
                <div class="accordion-content">
                    <div class="faq-container">
                        ${faqContent}
                    </div>
                </div>
            </div>
        `;
                
        initializeAccordions(newDiv);
        initializeFAQHandlers(newDiv);
        return { element: newDiv, target: targetDiv, position: 'after' };
    }

    function initializeAccordions(accordionContainer) {
        var accordions = accordionContainer.querySelectorAll('.accordion-section');

        accordions.forEach(accordion => {
            var header = accordion.querySelector('.accordion-header');
            var content = accordion.querySelector('.accordion-content');
            var button = accordion.querySelector('.accordion-button');

            header.addEventListener('click', () => {
                var isOpen = content.style.display === 'block';

                // Close all other accordion sections
                accordionContainer.querySelectorAll('.accordion-content').forEach(otherContent => {
                    otherContent.style.display = 'none';
                });

                accordionContainer.querySelectorAll('.accordion-button').forEach(otherButton => {
                    otherButton.textContent = '+';
                });

                // Toggle the current section
                content.style.display = isOpen ? 'none' : 'block';
                button.textContent = isOpen ? '+' : '-';
            });
        });
    }

    /*******************************************************************************************/
    /* Product Step One USPs */
/*******************************************************************************************/
    var USPtitle = 'وش يميز بوكسر هوا؟';
    var USPtext2 = `ثابت، وانسى الاحتكاك`
    var USPsubtext2 = `تخيل إنك تلبس بوكسر ما يحتاج تعدله أبد، بوكسرنا مصمم بحيث يقلل الاحتكاك وما يتسلق فخوذك.`;
    var USPtext4 = `حزام النعومة والأمان`
    var USPsubtext4 = `حزام هوا ثابت بدون ما يضحي بالنعومة والراحة، وفوقها ما يتصفّط أو يتغير مع الاستخدام.`;
    var USPtext1 = `قماشنا أبرد`
    var USPsubtext1 = `زي ما قال أحد العملاء: "نفس شعور يوم تصلي الفجر وترجع تتلحف والجو برد كذا وسعادة"`;
    var USPtext3 = `شيّال وميّال`
    var USPsubtext3 = `
حطينا مساحة أمامية واسعة بحيث <span class="bold-span">كل شي</span>
 يقدر ياخذ راحته ونتجنب مشاكل الالتصاق المزعجة.

`;

    

    if(htmlLang == 'en'){
        USPtitle = 'What Makes Hawa Special?';
        USPtext2 = `Chafe-free design`
        USPsubtext2 = `Longer inseam to prevent chafing, ride-up and wedgies. It will put an end to awkward adjustments in public.`;
        USPtext3 = `Premium anti-roll waistband`
        USPsubtext3 = `Super soft elastic waistband. It won't roll, pinch or leave any marks. You'll forget you're even wearing it.`;
        USPtext1 = `Cloud-like softness`
        USPsubtext1 = `LENZING™ Modal is a natural fiber that is softer, lighter and cooler than cotton. It is natually breathable and has 4-way stretch so you can move effortlessly.`;
        USPtext3 = `3D Contour Pouch`
        USPsubtext3 = `We understand the male anatomy - that's why we created this curved pouch to ensure everything is perfectly separated, supported and ventilated.`;
    }

    var USPurl2 = 'https://d17gg5c5d03gu7.cloudfront.net/2u.jpg';
    var USPurl4 = 'https://d17gg5c5d03gu7.cloudfront.net/4u.jpg';
    var USPurl1 = 'https://d17gg5c5d03gu7.cloudfront.net/1u.jpg';
    var USPurl3 = 'https://d17gg5c5d03gu7.cloudfront.net/3u.jpg'; 
    
    function createCustomSwiper(targetDiv) {
        // Only create if it doesn't exist
        if (document.querySelector("#custom-swiper-container")) {
            console.log("#custom-swiper-container already exists.");
            return null;
        }

        var sliderContainer = document.createElement("div");
        sliderContainer.setAttribute("id", "custom-swiper-container");
        sliderContainer.setAttribute("class", "swiper custom-swiper");
        sliderContainer.innerHTML = `
            <div class="product-USP-title">
                <h2 class="text-center text-primary font-bold text-2xl">${USPtitle}</h2>
            </div>
            <div class="swiper-wrapper">
                <!-- Single Slide -->
                <div class="swiper-slide text-center slide--one-fourth">
                    <a href="#" onclick="return false;">
                        <div class="overflow-hidden rounded-2xl">
                            <img 
                            src="${USPurl1}" 
                            data-src="${USPurl1}" 
                            width="500" 
                            height="500" 
                            alt="شيّال وميّال"
                            loading="lazy" 
                            decoding="async" 
                            class="aspect-[14/13] w-full rounded-2xl lazy object-cover group-hover:scale-110"
                            />
                        </div>
                        <h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-store-text-primary">
                            ${USPtext1}
                        </h3>
                        <p class="text-sm leading-6 text-store-text-secondary usp-subtext">
                            ${USPsubtext1}
                        </p>
                    </a>
                </div>
                <div class="swiper-slide text-center slide--one-fourth">
                    <a href="#" onclick="return false;">
                        <div class="overflow-hidden rounded-2xl">
                            <img 
                            src="${USPurl2}"
                            data-src="${USPurl2}"
                            width="500" 
                            height="500" 
                            alt="كما المودال"
                            loading="lazy" 
                            decoding="async" 
                            class="aspect-[14/13] w-full rounded-2xl lazy object-cover group-hover:scale-110"
                            />
                        </div>
                        <h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-store-text-primary">
                            ${USPtext2}
                        </h3>
                        <p class="text-sm leading-6 text-store-text-secondary usp-subtext">
                            ${USPsubtext2}
                        </p>
                    </a>
                </div>
                <div class="swiper-slide text-center slide--one-fourth">
                    <a href="#" onclick="return false;">
                        <div class="overflow-hidden rounded-2xl">
                            <img 
                            src="${USPurl3}"
                            data-src="${USPurl3}"
                            width="500" 
                            height="500" 
                            alt="حزام النعومة والأمان"
                            loading="lazy" 
                            decoding="async" 
                            class="aspect-[14/13] w-full rounded-2xl lazy object-cover group-hover:scale-110"
                            />
                        </div>
                        <h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-store-text-primary">
                            ${USPtext3}
                        </h3>
                        <p class="text-sm leading-6 text-store-text-secondary usp-subtext">
                            ${USPsubtext3}
                        </p>
                    </a>
                </div>
                <div class="swiper-slide text-center slide--one-fourth">
                    <a href="#" onclick="return false;">
                        <div class="overflow-hidden rounded-2xl">
                            <img 
                            src="${USPurl4}"
                            data-src="${USPurl4}"
                            width="500" 
                            height="500" 
                            alt="ثابت، وانسى الاحتكاك"
                            loading="lazy" 
                            decoding="async" 
                            class="aspect-[14/13] w-full rounded-2xl lazy object-cover group-hover:scale-110"
                            />
                        </div>
                        <h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-store-text-primary">
                            ${USPtext4}
                        </h3>
                        <p class="text-sm leading-6 text-store-text-secondary usp-subtext">
                            ${USPsubtext4}
                        </p>
                    </a>
                </div>
            </div>
        `;

        return {
            element: sliderContainer,
            target: targetDiv,
            position: 'after',
            postRender: () => initializeCustomSwiper()
        };
    }

    function initializeCustomSwiper() {
        var initSwiper = () => {
            try {
                new Swiper('.custom-swiper', {
                    direction: 'horizontal',
                    loop: false,
                    slidesPerView: 'auto',
                    spaceBetween: 20,
                });
            } catch(err) {
                setTimeout(initSwiper, 100);
            }
        };

        initSwiper();
    }

/*******************************************************************************************/
    /* Product Guarantee */
/*******************************************************************************************/

    function createHawaGuarantee() {
        var guaranteeText = {
            en: {
                title: "First Pair Guarantee",
                description: "If you don't love your first pair, we will send you a different size or issue a full refund - no return required"
            },
            ar: {
                title: "ضمان على هواك",
                description: "نضمن لك أول بوكسر في حال ما ناسبك خله عندك واستبدل المقاس أو نرجع لك فلوسك"
            }
        };

        var language = document.documentElement.lang || 'en';
        var text = guaranteeText[language];

        var guaranteeDiv = document.createElement('div');
        guaranteeDiv.className = 'hawa-guarantee-section';

        guaranteeDiv.innerHTML = `
            <div class="guarantee-container">
                <div class="guarantee-content">
                    <div class="guarantee-logo">
                        <img src="https://d17gg5c5d03gu7.cloudfront.net/guarantee_logo_vuy2in.svg" 
                            alt="Hawa Guarantee Badge" 
                            class="guarantee-badge">
                    </div>
                    <div class="guarantee-text">
                        <h2 class="guarantee-title">${text.title}</h2>
                        <p class="guarantee-description">${text.description}</p>
                    </div>
                </div>
            </div>
        `;

        var tarelement = document.querySelector('.product-single__info');
        return { element: guaranteeDiv, target: tarelement, position: 'append' };
    }

/*******************************************************************************************/
    /* Add to Cart USPs */
/*******************************************************************************************/

    function createAddToCartUSPs() {
        var arabicText = [
                        {
                            icon: "https://d17gg5c5d03gu7.cloudfront.net/brand-usp-guarantee-svg_mdgmnp.svg",
                            text: "الضمان البلاتيني لمدة 30 يوم"
                        },
                        {
                            icon: "https://d17gg5c5d03gu7.cloudfront.net/brand-usp-easy-return-svg_vexnb2.svg",
                            text: "استرجاع سهل واستبدال مجاني"
                        },
                        {
                            icon: "https://d17gg5c5d03gu7.cloudfront.net/brand-usp-24hr-svg_iiaggs.png",
                            text: "توصيل مجاني فوق 280 ر.س"
                        }
                    ];
    
        var englishText = [
                        {
                            icon: "https://d17gg5c5d03gu7.cloudfront.net/brand-usp-guarantee-svg_mdgmnp.svg",
                            text: "30-day try-on guarantee"
                        },
                        {
                            icon: "https://d17gg5c5d03gu7.cloudfront.net/brand-usp-easy-return-svg_vexnb2.svg",
                            text: "Easy returns and free exchanges"
                        },
                        {
                            icon: "https://d17gg5c5d03gu7.cloudfront.net/brand-usp-24hr-svg_iiaggs.png",
                            text: "Free shipping above 280 SAR"
                        }
                    ];
    

            var selectedText = htmlLang === 'en' ? englishText : arabicText;
            var selectedTextDesktop = htmlLang === 'en' ? englishText : arabicText;
    
            var container = document.createElement('div');
            container.className = 'add-to-cart-usps-container-pdp';
    
            var inner = document.createElement('div');
            inner.className = 'features-inner';
    
            var list = document.createElement('div');
            list.className = 'features-list';
    
            selectedText.forEach((item, index) => {
                // Create a wrapper div for the feature item
                var featureWrapper = document.createElement('div');
                featureWrapper.className = 'feature-item';
                
                // Create mobile icon
                var mobileIcon = document.createElement('img');
                mobileIcon.src = item.icon;
                mobileIcon.alt = '';
                mobileIcon.className = 'feature-icon mobile-icon';
                
                
                // Create text element
                var text = document.createElement('p');
                text.className = 'feature-text';
                text.textContent = item.text;
                
                // Append elements to wrapper
                featureWrapper.appendChild(mobileIcon);
                featureWrapper.appendChild(text);
                
                list.appendChild(featureWrapper);
            });
    
            inner.appendChild(list);
            container.appendChild(inner);

    
        var targetElement = document.querySelector('.product-single__info');
        return { element: container, target: targetElement, position: 'append' };
    }

    function createFeatureItem(item) {
        var featureItem = document.createElement('div');
        featureItem.className = 'feature-item';

        var icon = document.createElement('img');
        icon.src = item.icon;
        icon.alt = '';
        icon.className = 'feature-icon';

        var text = document.createElement('p');
        text.className = 'feature-text';
        text.textContent = item.text;

        featureItem.appendChild(icon);
        featureItem.appendChild(text);
        
        return featureItem;
    }

    /*******************************************************************************************/
    /* Add to Cart Tamara Section */
    /*******************************************************************************************/

    function createTamaraSplitPaymentSection() {
        // Get the price from the selector
        var priceElement = document.querySelector('#product-form').querySelector('.starting-or-normal-price').querySelector('.total-price');
        if (!priceElement) {
            console.error('Price element not found');
            return null;
        }
        
        // Create the element
        var tamaraDiv = document.createElement('div');
        tamaraDiv.className = 'tamara-split-payment-section';
        
        // Function to calculate and update installment amount
        function updateInstallmentAmount() {
            // Extract the number from price text
            var priceText = priceElement.textContent.trim();
            var priceMatch = priceText.match(/\d+(\.\d+)?/);
            
            if (!priceMatch) {
                console.error('Could not extract price from', priceText);
            return;
        }
        
            var totalPrice = parseFloat(priceMatch[0]);
            var installmentAmount = (totalPrice / 4).toFixed(2);
            
            // Content in multiple languages
            var tamContent = {
                en: {
                    text: `Split your total into 4 installments of <span class="tamara-installment-amount">${installmentAmount} SAR </span> with`,
                    logoAlt: "Tamara Logo"
                },
                ar: {
                    text: `قسم فاتورتك على 4 دفعات بقيمة <span class="tamara-installment-amount">${installmentAmount} ر.س</span> مع`,
                    logoAlt: "شعار تمارا"
                }
            };
            
            var language = document.documentElement.lang || 'en';
            var content = tamContent[language];
            
            // Update the HTML content
            tamaraDiv.innerHTML = `
                <div class="tamara-container">
                    <div class="tamara-text">
                        <span>
                        <span class="tamara-text-p">${content.text}
                        
                            <img src=${htmlLang == 'ar' ? "https://d17gg5c5d03gu7.cloudfront.net/tamara_ar.png" : "https://d17gg5c5d03gu7.cloudfront.net/tamara_eng.png"} 
                                 alt="${content.logoAlt}" 
                                 class="tamara-logo">
                                 </span>
                        </span>
                    </div>
                </div>
            `;
        }
        
        // Initial calculation
        updateInstallmentAmount();
        
        // Set up a MutationObserver to watch for changes to the price element
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList' || mutation.type === 'characterData') {
                    updateInstallmentAmount();
                }
            });
        });
        
        // Configure and start the observer
        var observerConfig = { 
            childList: true,
            characterData: true, 
            subtree: true 
        };
        observer.observe(priceElement, observerConfig);
        
        // Return the element for insertion
        var targetElement = document.querySelector('.product-single__info');
        return { element: tamaraDiv, target: targetElement, position: 'append' };
    }
    
    /*******************************************************************************************/
    /* Product Comparison */
    /*******************************************************************************************/

    var comparisonContent = {
        ar: {
            title: 'بوكسر هـــوا والبوكسرات الثانية',
            description: 'قبل مانسوي بوكسر هوا، جربنا كل شي متاح في السوق، واستوعبنا إن فيه مشاكل واضحة ومختلفة في كل البوكسرات الثانية. عشان كذا صممنا بوكسر هوا بطريقة تفهم جسمك، وقماش يريح جلدك، وثبات يساعدك تتحرك وبدون مايحكحك بين فخوذك. بالضبط ولا غلطة.',
            imageUrl: 'https://cdn.salla.sa/form-builder/JpD6z9cGDcDjEGmZDQzFZSEJluviSVUQvJtgvO7g.png',
            imageAlt: 'About store image'
        },
        en: {
            title: 'Hawa vs. Other Brands',
            description: `Before launching Hawa, we pretty much tried every boxer brief available on the market. Nothing checked all the boxes, each one had its own set of issues. So, we had to make our own design to be the the be-all and end-all of underwear.\n\nOur boxer brief is super soft, breathable, anti-chafing, anti ride-up and anti-adjusting. On top of that, it has the perfect curved pouch to keep your boys cradled and separated from the rest of your body.`,
            imageUrl: 'https://cdn.salla.sa/form-builder/JpD6z9cGDcDjEGmZDQzFZSEJluviSVUQvJtgvO7g.png',
            imageAlt: 'About store image'
        }
    };

    function createVideoComparison(targetDiv) {
        var htmlLang = document.documentElement.lang || 'ar';
        var lang = htmlLang.split('-')[0];
        var content = comparisonContent[lang] || comparisonContent['ar'];
        
        var comparisonDiv = document.createElement('div');
        comparisonDiv.className = 'hawa-video-comparison';

        comparisonDiv.innerHTML = `
            <div class="container hawa-comparison-container">
                <div class="flex flex-col-reverse md:flex-row items-center gap-5 md:gap-10 hawa-comparison-wrapper">
                    <div class="w-full md:w-7/12 hawa-comparison-text">
                        <h3 class="text-lg opacity-60 font-normal mb-2 text-store-text-secondary hawa-comparison-subtitle"></h3>
                        <h2 class="text-2xl lg:text-4xl text-primary font-bold mb-5 hawa-comparison-title">${content.title}</h2>
                        <p class="mb-5 text-store-text-primary hawa-comparison-description">${content.description}</p>
                    </div>
                    <div class=" w-full md:w-5/12">
                        <video playsinline="" class="object-cover object-center w-full h-full rounded max-h-[400px]" loop="loop" autoplay="autoplay" muted="muted" src="https://d17gg5c5d03gu7.cloudfront.net/hawa_comparision_video_compressed.mp4"></video>
                    </div>
                </div>
            </div>
        `;

        return { element: comparisonDiv, target: targetDiv, position: 'after' };
    }

    /*******************************************************************************************/
    /* Product Comparison Table */
    /*******************************************************************************************/

    function createTableComparison(targetDiv) {
        var language = document.documentElement.lang;
        var faqDiv = document.createElement('div');
        faqDiv.className = 'hawa-table-comparison';

        var checkSvg = "https://d17gg5c5d03gu7.cloudfront.net/comparison_table_checkmark_zyugxx.svg";
        var crossSvg = "https://d17gg5c5d03gu7.cloudfront.net/comparison_table_x_mark_lokoyo.svg";
        var comparisonImage = "https://d17gg5c5d03gu7.cloudfront.net/comparison_table_desktop_image_cdtlrz.png"; // Replace with your actual image URL

        // Define translations and language-specific logos
        var translations = {
            en: {
                hawa: 'HAWA',
                otherBrands: 'Local Brands',
                logoSrc: "https://d17gg5c5d03gu7.cloudfront.net/comparison_table_logo_ar_xm7mm2.svg",
                features: [
                    'No Chafing',
                    'No Ride-Up',
                    '3D Contour Pouch',
                    'Soft And Cool Fabric',
                    'Anti-Roll Waistband',
                    'First Pair Guarantee'
                ]
            },
            ar: {
                hawa: 'هوا',
                otherBrands: 'البراندات المحلية',
                logoSrc: "https://d17gg5c5d03gu7.cloudfront.net/comparison_table_logo_ar_xm7mm2.svg",
                features: [
                    'يمنع الاحتكاك',
                    'ثابت ومايتسلق فخوذك',
                    'مساحة امامية تمنع الالتصاق',
                    'قماشه بارد وناعم',
                    'حزامه تنساه حول خصرك',
                    'عليه ضمان'
                ]
            }
        };

        var beforelastFeature = htmlLang == 'en' ? 'Suitable for Thoub' : 'مناسب للثوب';

        var lastFeature = htmlLang == 'en' ? 'Cheap' : 'سعره رخيص';
        var lastFeatureNote = htmlLang == 'en' ? '*But worth it' : '*بس يستاهل';


        // Select the appropriate translations
        var text = translations[language] || translations.en;

        // Add container class for homepage-specific styling
        faqDiv.innerHTML = `
            <div class="comparison-container pdp-comparison">
                
                <div class="comparison-table">
                    <div class="table-header">
                        <div class="header-cell feature-cell"></div>
                        <div class="header-cell">
                            <img src="${text.logoSrc}" 
                                alt="${text.hawa}" 
                                class="comparison-logo"
                                style="height: 24px; width: auto;">
                        </div>
                        <div class="header-cell">${text.otherBrands}</div>
                    </div>
                    <div class="table-body">
                        ${text.features.map(feature => `
                            <div class="table-row">
                                <div class="feature-cell">${feature}</div>
                                <div class="check-cell">
                                    <img src="${checkSvg}" alt="check" class="check">
                                </div>
                                <div class="check-cell">
                                    <img src="${crossSvg}" alt="cross" class="cross">
                                </div>
                            </div>
                        `).join('')}
                        <div class="table-row">
                                <div class="feature-cell">${beforelastFeature}</div>
                                <div class="check-cell">
                                    <img src="${checkSvg}" alt="check" class="check">
                                </div>
                                <div class="check-cell">
                                    <img src="${checkSvg}" alt="check" class="check">
                                </div>
                            </div>
                        <div class="table-row">
                                <div class="feature-cell">${lastFeature}</div>
                                <div class="check-cell">
                                    <span style="color: #2D2D2D;">*</span>
                                    <img src="${crossSvg}" alt="check" class="check">
                                    <span style="color: #F8F5EF;">*</span>
                                </div>
                                <div class="check-cell">
                                    <img src="${checkSvg}" alt="cross" class="cross">
                                </div>
                        </div>
                    </div>
                    <span class="comparison-note" style="font-style: italic; font-size: 0.75rem;">${lastFeatureNote}</span>
                </div>
                
                <div class="comparison-image">
                    <img src="${comparisonImage}" alt="Comparison">
                </div>
                

            </div>
        `;

        return { element: faqDiv, target: targetDiv, position: 'after' };
    }

    /*******************************************************************************************/
    /* Product Table Comparison */
    /*******************************************************************************************/
    var translations = {
            en: {
                hawa: 'HAWA',
                otherBrands: 'Local Brands',
                logoSrc: "https://d17gg5c5d03gu7.cloudfront.net/comparison_table_logo_ar_xm7mm2.svg",
                features: [
                    'No Chafing',
                    'No Ride-Up',
                    '3D Contour Pouch',
                    'Soft And Cool Fabric',
                    'Anti-Roll Waistband',
                    'First Pair Guarantee',
                    'Suitable for Thoub'
                ]
            },
            ar: {
                hawa: 'هوا',
                otherBrands: 'البراندات المحلية',
                logoSrc: "https://d17gg5c5d03gu7.cloudfront.net/comparison_table_logo_ar_xm7mm2.svg",
                features: [
                    'يمنع الاحتكاك',
                    'ثابت ومايتسلق فخوذك',
                    'مساحة امامية تمنع الالتصاق',
                    'قماشه بارد وناعم',
                    'حزامه تنساه حول خصرك',
                    'عليه ضمان',
                    'مناسب للثوب'
                ]
            }
        };
        function createFabricComparisonPDP(targetDiv) {
            var translations = {
                en: {
                    title: "Why is Modal Better than Cotton?",
                    subtitle: `<div class="metric-line"> <div class="metric-header"><span class="metric-highlight">3x</span></div> <span class="metric-text">Softer than cotton</span></div>
                               <div class="metric-line"> <div class="metric-header"><span class="metric-highlight">50%</span></div> <span class="metric-text">Higher moisture absorption</span></div>
                               <div class="metric-line"> <div class="metric-header"><span class="metric-highlight">100%</span></div> <span class="metric-text">Natural</span></div>
                    <span class="fabric-blend">Fabric composition: 91% Lenzing&#8482 Modal and 9% Elastane</span>`,
                    modalLabel: "91% Modal",
                    cottonLabel: "Cotton"
                },
                ar: {
                    title: "ليش قماش المودال أحسن من القطن؟",
                    subtitle: `<div class="metric-line"> <div class="metric-header"><span class="metric-highlight">3x</span></div> <span class="metric-text">نعومة القطن</span></div>
                               <div class="metric-line"> <div class="metric-header"><span class="metric-highlight">50%</span></div> <span class="metric-text">إمتصاص أعلى للرطوبة</span></div>
                               <div class="metric-line"> <div class="metric-header"><span class="metric-highlight">100%</span></div> <span class="metric-text">طبيعي</span></div>
                    <span class="fabric-blend">وهذا يخلي تكلفة قماش المودال 2 إلى 3 أضعاف أغلى من القطن العادي بسبب جودته العالية، وفي هوا مانستخدم إلا أفضل وأجود أنواع الأقمشة.</span>`,
                    cottonLabel: "مودال (&#8482Lenzing)",
                    modalLabel: "القطن"
                }
            };
            
            var language = document.documentElement.lang || 'en';
            var text = translations[language];
            var dir = language === 'ar' ? 'rtl' : 'ltr';
    
            var fabricContainer = document.createElement('div');
            fabricContainer.className = 'fabric-container-pdp';
            fabricContainer.innerHTML = `
               <div class="fabric-card" lang="${language}" dir="${dir}">
                    <div class="fabric-card-text">
                        <h2 class="fabric-title">${text.title}</h2>
                        ${text.subtitle}
                    </div>
                    <div class="fabric-comparison">
                        <div class="fabric-image">
                        <img 
                            src="https://d17gg5c5d03gu7.cloudfront.net/White+Fabric+Comparison.jpg" 
                            width="682" 
                            height="280" 
                            alt="Fabric comparison showing modal fabric texture on the left and cotton fabric texture on the right" 
                            loading="lazy" 
                            decoding="async" 
                            class="fabric-image"
                        />
                        </div>
                        <div class="fabric-labels">
                            <div class="fabric-label">${text.modalLabel}</div>
                            <div class="fabric-label">${text.cottonLabel}</div>
                        </div>
                    </div>
                </div>
            `;
    
            return { element: fabricContainer, target: targetDiv, position: 'after' };
        }


    /*******************************************************************************************/
    /* Initialize PDP Elements */
    /*******************************************************************************************/
    function initializePDPElements() {
        var targetDiv = document.querySelector('.product-271747864') || 
                        document.querySelector('.product-2130693625') ||
                        document.querySelector('.product-1716601874') ||
                        document.querySelector('.product-727834477') ||
                        document.querySelector('.product-1306857438') ||
                        // NATIONAL DAY PRODUCTS CHANGES HERE
                        document.querySelector('.product-50512583') ||
                        document.querySelector('.product-723306792') ||
                        document.querySelector('.product-2067310458') ||
                        document.querySelector('.product-1344181453') ||
                        document.querySelector('.product-1727535782');

        if (!targetDiv) {
            console.log('Target div not found');
            return;
        }

        var targetDivFooter = document.querySelector('.store-footer');

        if (!targetDivFooter) {
            console.log('Target footer div not found');
            return;
        }


        try {
            // Initialize components in order
            var components = [
                createProductInfo(),
                createStarsRating(),
                createSizeGuide(),
                // createHawaGuarantee(),
                createTamaraSplitPaymentSection(),
                createAddToCartUSPs(),
                createProductUSPs(),
                createBrandUSPs(targetDivFooter),
                // createInstagramSection(targetDivFooter),
                createFAQSection(targetDivFooter),
                createFabricComparisonPDP(targetDiv),
                createCustomSwiper(targetDiv),  // Add the custom swiper
                createTableComparison(targetDiv),
                createVideoComparison(targetDiv),
                createAccordionSections(targetDiv)
            ];

            // Initialize swiper
            // initializeSwiper();

            createLowStockAlert();
            createShippingCountdown();

            // Render components and handle post-render actions
            components.forEach(component => {
                if (!component) {
                    console.log('Skipping null component');
                    return;
                }

                var { element, target, position, postRender } = component;

                if (!element || !target) {
                    console.log('Missing element or target for component');
                    return;
                }

                try {
                    switch (position) {
                        case 'prepend':
                            target.insertBefore(element, target.firstChild);
                            break;
                        case 'append':
                            target.appendChild(element);
                            break;
                        case 'after':
                            target.insertAdjacentElement('afterend', element);
                            break;
                        case 'before-parent':
                            target.parentNode.insertBefore(element, target);
                            break;
                        default:
                            console.log(`Unknown position: ${position}`);
                    }

                    if (postRender && typeof postRender === 'function') {
                        postRender();
                    }
                } catch (error) {
                    console.error('Error inserting component:', error);
                }
            });

        } catch (error) {
            console.error('Error initializing PDP elements:', error);
        }
    }

    // Initialize everything
    initializePDPElements();


    /*******************************************************************************************/
    /************* Create Bundle Discounts on One Boxer PDP ****************/
    /*******************************************************************************************/
    // var interval;
    // let _r = 0;
    // interval = setInterval(function(){
    //     if (document.getElementById('offer-container') || _r == 3) {
    //         clearInterval(interval);
    //         return false;
    //     }
    //     else {
    //         let t = document.createElement("div"),
    //         o = "";
    //         t.id = "offer-container";
    //         var targetElement = document.querySelector("salla-payments");
    //         if (targetElement) {
    //             targetElement.insertAdjacentElement("afterend", t);
    //         }
    //         else {
    //             console.log('Target element for offer container not found 1');
    //             targetElement = document.querySelectorAll("salla-quick-order")[1];
    //             if (targetElement) {
    //                 targetElement.insertAdjacentElement("afterend", t);
    //             }
    //             else {
    //                 console.log('Target element for offer container not found 2');
    //             }
    //         }
    //         let r = document.querySelector(".s-quantity-input-input");

    //         // Language translations
    //         var translations = {
    //         en: {
    //             bundleTitle: "Bundle & Save",
    //             bundleSubTitle: "Discount Auto-applied After Selection - Mix and Match",
    //             buyText: "Buy",
    //             saveText: "Save",
    //             perUnit: "per unit"
    //         },
    //         ar: {
    //             bundleTitle: "كل ما زدت كل ما وفرت",
    //             bundleSubTitle: "الخصم يطبق تلقائياً بعد الإضافة - شكّل ونوّع زي ما تبي",
    //             buyText: "اشتر",
    //             saveText: "ووفر",
    //             perUnit: "للقطعة"
    //         }
    //         };

    //         // Get current language from HTML tag
    //         var currentLang = document.documentElement.lang || 'en';
    //         var txt = translations[currentLang] || translations.en;

    //         function n(t) {
    //             let e = document.createElement("style");
    //             e.type = "text/css", e.appendChild(document.createTextNode(t)), document.head.appendChild(e)
    //         }

    //         let a = `
                
    //         `;

    //         n(a);

    //         let d = window.location.href,
    //             l = function t(e) {
    //                 let i = e.match(/\/p(\d+)$/);
    //                 if(!i) {clearInterval(interval); return false;}
    //                 return i ? i[1] : null
    //             }(d);
    //         var bundles;
    //         if (l == "1716601874") {
    //             bundles = [
    //                 {
    //                     quantity: document.documentElement.lang === 'ar' ? '2' : '2',
    //                     item: document.documentElement.lang === 'ar' ? '' : '',
    //                     discount: document.documentElement.lang === 'ar' ? '6' : '6',
    //                     pricePerUnit: document.documentElement.lang === 'ar' ? '65' : '65'
    //                 },
    //                 {
    //                     quantity: document.documentElement.lang === 'ar' ? '3' : '3',
    //                     item: document.documentElement.lang === 'ar' ? '' : '',
    //                     discount: document.documentElement.lang === 'ar' ? '10' : '10',
    //                     pricePerUnit: document.documentElement.lang === 'ar' ? '62' : '62'
    //                 }
    //             ];
    //         }
    //         else {
    //             return;
    //         }

    //         var quantityEnglish = {'2': '2', '4': '4', '8': '8', '12': '12'};

    //         function generateBundleOptions() {
    //             o = "";
    //             var originalPrice = document.documentElement.lang === 'ar' ? '69' : '69';
    //             var currency = document.documentElement.lang === 'ar' ? `<i class="sicon-sar"></i>` : `<i class="sicon-sar"></i>`;

    //             bundles.forEach((bundle, index) => {
    //                 o += `
    //                     <div class="option">
    //                         <input type="radio" id="buy-${index}" data-qty="${bundle.quantity}" name="pricing" class="qtyChange">
    //                         <label for="buy-${index}">
    //                             <div class="option-content">
    //                                 <div class="option-title">
    //                                     ${txt.buyText} ${bundle.quantity} ${bundle.item} ${txt.saveText} <span class="discount-pill">${bundle.discount}%</span>
    //                                 </div>
    //                                 <div class="bundle-price-container">
    //                                     <span class="discounted-price">${bundle.pricePerUnit} ${currency}</span>
    //                                     <span class="original-price">${originalPrice} ${currency}</span>
    //                                     <span>${txt.perUnit}</span>
    //                                 </div>
    //                             </div>
    //                         </label>
    //                     </div>`;
    //             });

    //             t.innerHTML = `
    //                 <div class="pricing-container">
    //                     <h2 class="bundle-title">${txt.bundleTitle}</h2>
    //                     <span class="bundle-subtitle">${txt.bundleSubTitle}</span>
    //                     <div class="pricing-options">${o}</div>
    //                 </div>`;
    //         }

    //         generateBundleOptions();
    //     }
    // }, 1000);

    /*******************************************************************************************/
    /************* Add Bundle Links *******************************************/
    /*******************************************************************************************/
    // National Day Products Changes Here
    var onePieceOptionTitle = htmlLang === "en" ? "1-Pack" : "عدد 1";
    var fourPieceOptionTitle = htmlLang === "en" ? "4-Pack" : "عدد 4";
    var eightPieceOptionTitle = htmlLang === "en" ? "8-Pack" : "عدد 8";
    var twelvePieceOptionTitle = htmlLang === "en" ? "12-Pack" : "عدد 12";
    // var onePieceOptionTitle = htmlLang === "en" ? "1-Pack" : "عدد 1";
    // var fourPieceOptionTitle = htmlLang === "en" ? "4 + 1 Free" : "عدد 4 + 1 مجاناً";
    // var eightPieceOptionTitle = htmlLang === "en" ? "8 + 2 Free" : "عدد 8 + 2 مجاناً";
    // var twelvePieceOptionTitle = htmlLang === "en" ? "12 + 4 Free" : "عدد 12 + 4 مجاناً";

    var onePieceOptionPrice = htmlLang === "en" ? "69" : "69";
    var onePieceOptionPriceUpsell = htmlLang === "en" ? "64" : "64";
    // var fourPieceOptionPrice = htmlLang === "en" ? "59" : "59";
    var fourPieceOptionPriceUpsell = htmlLang === "en" ? "53" : "53";
    var fourPieceOptionPrice = htmlLang === "en" ? "59" : "59";
    var fourPieceFullPrice = htmlLang === "en" ? "276" : "276";
    // var eightPieceOptionPrice = htmlLang === "en" ? "54" : "54";
    var eightPieceOptionPriceUpsell = htmlLang === "en" ? "52" : "52";
    var eightPieceOptionPrice = htmlLang === "en" ? "55" : "55";
    var eightPieceFullPrice = htmlLang === "en" ? "552" : "552";
    // var twelvePieceOptionPrice = htmlLang === "en" ? "49" : "49";
    var twelvePieceOptionPriceUpsell = htmlLang === "en" ? "45" : "45";
    var twelvePieceOptionPrice = htmlLang === "en" ? "49" : "49";
    var twelvePieceFullPrice = htmlLang === "en" ? "828" : "828";
    var perPieceText = htmlLang === "en" ? "per piece" : "/ قطعة";
    var perPieceTextNDS = htmlLang === "en" ? "" : "";
    var currencyText = htmlLang === "en" ? `<i class="sicon-sar"></i>` : `<i class="sicon-sar"></i>`;

    var onePieceOptionLink = `https://hawa.co/${htmlLang}/%D8%A8%D9%88%D9%83%D8%B3%D8%B1-%D9%87%D9%88%D8%A7/p1716601874`;
    var fourPieceOptionLink = `https://hawa.co/${htmlLang}/%D8%A8%D9%88%D9%83%D8%B3%D8%B1-%D9%87%D9%88%D8%A7-4-%D9%82%D8%B7%D8%B9%D8%A9/p2130693625`;    
    var eightPieceOptionLink = `https://hawa.co/${htmlLang}/%D8%A8%D9%88%D9%83%D8%B3%D8%B1-%D9%87%D9%88%D8%A7-8-%D9%82%D8%B7%D8%B9%D8%A9/p271747864`;
    var twelvePieceOptionLink = `https://hawa.co/${htmlLang}/%D8%A8%D9%88%D9%83%D8%B3%D8%B1-%D9%87%D9%88%D8%A7-12-%D9%82%D8%B7%D8%B9%D8%A9/p1306857438`;

    var onePieceOptionLinkBlack = `https://hawa.co/${htmlLang}/%D8%A8%D9%88%D9%83%D8%B3%D8%B1-%D9%87%D9%88%D8%A7/p50512583`;
    var fourPieceOptionLinkBlack = `https://hawa.co/${htmlLang}/%D8%A8%D9%88%D9%83%D8%B3%D8%B1-%D9%87%D9%88%D8%A7-4-%D9%82%D8%B7%D8%B9%D8%A9/p723306792`;    
    var eightPieceOptionLinkBlack = `https://hawa.co/${htmlLang}/%D8%A8%D9%88%D9%83%D8%B3%D8%B1-%D9%87%D9%88%D8%A7-8-%D9%82%D8%B7%D8%B9%D8%A9/p2067310458`;
    var twelvePieceOptionLinkBlack = `https://hawa.co/${htmlLang}/%D8%A8%D9%88%D9%83%D8%B3%D8%B1-%D9%87%D9%88%D8%A7-12-%D9%82%D8%B7%D8%B9%D8%A9/p1727535782`;

    // var fourPieceOptionDiscount = htmlLang === "en" ? "Save 15" : "وفّر 15";
    var fourPieceOptionDiscount = htmlLang === "en" ? "Save 14" : "وفّر 14";
    // var eightPieceOptionDiscount = htmlLang === "en" ? "Save 21" : "وفّر 21";
    var eightPieceOptionDiscount = htmlLang === "en" ? "Save 20" : "وفّر 20";
    // var twelvePieceOptionDiscount = htmlLang === "en" ? "Save 29" : "وفّر 29";
    var twelvePieceOptionDiscount = htmlLang === "en" ? "Save 29" : "وفّر 29";
    var freeShippingText = htmlLang === "en" ? "Free Shipping" : "شحن مجاني";
    var BestSellerText = htmlLang === "en" ? "Best Seller" : "الأكثر مبيعا";
    var bundleOptionsTitle = htmlLang === "en" ? "Packs" : "البكجات";

    // 1 Pack
    waitForElement('.product-1716601874', (prodDiv) => {
        var linksdiv = document.createElement('div');
        linksdiv.classList.add('bundle-options-links');

        linksdiv.innerHTML = `
                            <h3 class="bundle-options-title">${bundleOptionsTitle}</h3>
                            <div class="size-options size-options-bundle">
                                <div class="size-option-wrapper">
                                    <div class="size-option selected size-option-bundle size-option-1p">
                                        <div class="badge-container">
                                            <!-- No free shipping badge for single piece option -->
                                        </div>
                                        <a href="${onePieceOptionLink}">
                                            <span class="size-option-title">
                                                ${onePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 selected">
                                                ${onePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 selected">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty selected">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${BestSellerText ? `<span class="best-seller-pill-bundle-links">${BestSellerText}</span>` : ''}
                                            ${fourPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${fourPieceOptionDiscount}%</span>` : ''}                                          
                                        </div>
                                        <a href="${fourPieceOptionLink}">
                                            <span class="size-option-title">
                                                ${fourPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${fourPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${eightPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${eightPieceOptionDiscount}%</span>` : ''}                                          </div>
                                        <a href="${eightPieceOptionLink}">
                                            <span class="size-option-title">
                                                ${eightPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${eightPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${twelvePieceOptionDiscount ? `<span class="discount-pill-bundle-links">${twelvePieceOptionDiscount}%</span>` : ''}                                       </div>
                                        <a href="${twelvePieceOptionLink}">
                                            <span class="size-option-title">
                                                ${twelvePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${twelvePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>`;

        waitForElement('.s-product-options-option-container', (opttemp) => {
            var options = prodDiv.querySelectorAll('.s-product-options-option-container')

            // if (options.length > 1) { 
            //     options[1].style = 'display: none'
            // } 

            var fields = prodDiv.querySelector('salla-product-options');

            fields.insertBefore(linksdiv, fields.querySelector('salla-conditional-fields'));
        });
        
    });

    // 4 Pack
    waitForElement('.product-2130693625', (prodDiv) => {
        var linksdiv = document.createElement('div');
        linksdiv.classList.add('bundle-options-links');

        linksdiv.innerHTML = `
                            <h3 class="bundle-options-title">${bundleOptionsTitle}</h3>
                            <div class="size-options size-options-bundle">
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle size-option-1p">
                                        <div class="badge-container">
                                            <!-- No free shipping badge for single piece option -->
                                        </div>
                                        <a href="${onePieceOptionLink}">
                                            <span class="size-option-title">
                                                ${onePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${onePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option selected size-option-bundle">
                                        <div class="badge-container">
                                            ${BestSellerText ? `<span class="best-seller-pill-bundle-links">${BestSellerText}</span>` : ''}
                                            ${fourPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${fourPieceOptionDiscount}%</span>` : ''}                                          
                                        </div>
                                        <a href="${fourPieceOptionLink}">
                                            <span class="size-option-title">
                                                ${fourPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 selected">
                                                ${fourPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 selected">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty selected">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${eightPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${eightPieceOptionDiscount}%</span>` : ''}                                          </div>
                                        <a href="${eightPieceOptionLink}">
                                            <span class="size-option-title">
                                                ${eightPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${eightPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${twelvePieceOptionDiscount ? `<span class="discount-pill-bundle-links">${twelvePieceOptionDiscount}%</span>` : ''}                                       </div>
                                        <a href="${twelvePieceOptionLink}">
                                            <span class="size-option-title">
                                                ${twelvePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${twelvePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>`;

        waitForElement('.s-product-options-option-container', (opttemp) => {
            var priceDiv = document.querySelector('.pdp-price-div').querySelector('.starting-or-normal-price');
            var pricePieceDiv = document.createElement('div');
            pricePieceDiv.classList.add('price-piece-div');

            
            // Function to update the original price
            function updateOriginalPrice() {
                // Get the current price from the price element
                var priceText = priceDiv.querySelector('.total-price').textContent.trim();
                var priceMatch = priceText.match(/\d+(\.\d+)?/);
                
                if (priceMatch) {
                    var currentPrice = parseFloat(priceMatch[0]);
                    // Calculate the original price (assuming 15% discount as per fourPieceOptionDiscount)
                    // // var calculatedOriginalPrice = (currentPrice / 0.85).toFixed(0);
                    var calculatedOriginalPrice = (currentPrice / 0.86).toFixed(0);

                    
                    pricePieceDiv.innerHTML = `
                        <span class="original-price-pack">
                            ${calculatedOriginalPrice} ${currencyText}
                        </span>
                    `;


                }
            }
            
            // Initial setup
            updateOriginalPrice();
            priceDiv.appendChild(pricePieceDiv);
            
            // Set up observer to watch for price changes
            var priceElement = priceDiv.querySelector('.total-price');
            if (priceElement) {
                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'childList' || mutation.type === 'characterData') {
                            updateOriginalPrice();
                        }
                    });
                });
                
                var observerConfig = { 
                    childList: true, 
                    characterData: true, 
                    subtree: true 
                };
                observer.observe(priceElement, observerConfig);
            }

            // Continue with the rest of the code
            var priceDiv2 = document.querySelector('.pdp-price-div');
            var pricePieceDiv2 = document.createElement('div');
            pricePieceDiv2.classList.add('price-piece-div2');
            pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${fourPieceOptionPrice} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;

            priceDiv2.appendChild(pricePieceDiv2);
            
            // Observe upsell selection changes and update per-piece price accordingly
            (function() {
                var basePerPiecePrice = fourPieceOptionPrice;
                function updatePerPieceForUpsell() {
                    var isUpsellSelected = !!(prodDiv.querySelector('.size-option-upsell.selected'));
                    var newPriceText = basePerPiecePrice;
                    if (isUpsellSelected) {
                        newPriceText = fourPieceOptionPriceUpsell;
                    }
                    pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${newPriceText} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;
                }
                updatePerPieceForUpsell();
                var upsellContainer = prodDiv.querySelector('.size-option-upsell') ? prodDiv.querySelector('.size-option-upsell').parentElement : null;
                if (upsellContainer) {
                    upsellContainer.addEventListener('click', function(e) {
                        if (e.target && e.target.closest('.size-option')) {
                            updatePerPieceForUpsell();
                        }
                    });
                    var selectionObserver = new MutationObserver(function() {
                        updatePerPieceForUpsell();
                    });
                    selectionObserver.observe(upsellContainer, { attributes: true, subtree: true, attributeFilter: ['class'] });
                }
            })();
            
            var options = prodDiv.querySelectorAll('.s-product-options-option-container')

            // if (options.length > 1) { 
            //     options[1].style = 'display: none'
            // } 

            var fields = prodDiv.querySelector('salla-product-options');

            fields.insertBefore(linksdiv, fields.querySelector('salla-conditional-fields'));
        });
        
    });

    // 8 Pack
    waitForElement('.product-271747864', (prodDiv) => {
        var linksdiv = document.createElement('div');
        linksdiv.classList.add('bundle-options-links');

        linksdiv.innerHTML = `
                            <h3 class="bundle-options-title">${bundleOptionsTitle}</h3>
                            <div class="size-options size-options-bundle">
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle size-option-1p">
                                        <div class="badge-container">
                                            <!-- No free shipping badge for single piece option -->
                                        </div>
                                        <a href="${onePieceOptionLink}">
                                            <span class="size-option-title">
                                                ${onePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${onePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${BestSellerText ? `<span class="best-seller-pill-bundle-links">${BestSellerText}</span>` : ''}
                                            ${fourPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${fourPieceOptionDiscount}%</span>` : ''}                                          
                                        </div>
                                        <a href="${fourPieceOptionLink}">
                                            <span class="size-option-title">
                                                ${fourPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 ">
                                                ${fourPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 ">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty ">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option selected size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${eightPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${eightPieceOptionDiscount}%</span>` : ''}                                          </div>
                                        <a href="${eightPieceOptionLink}">
                                            <span class="size-option-title">
                                                ${eightPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 selected">
                                                ${eightPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 selected">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty selected">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${twelvePieceOptionDiscount ? `<span class="discount-pill-bundle-links">${twelvePieceOptionDiscount}%</span>` : ''}                                       </div>
                                        <a href="${twelvePieceOptionLink}">
                                            <span class="size-option-title">
                                                ${twelvePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${twelvePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>`;

        waitForElement('.s-product-options-option-container', (opttemp) => {
            var priceDiv = document.querySelector('.pdp-price-div').querySelector('.starting-or-normal-price');
            var pricePieceDiv = document.createElement('div');
            pricePieceDiv.classList.add('price-piece-div');
            
            // Function to update the original price
            function updateOriginalPrice() {
                // Get the current price from the price element
                var priceText = priceDiv.querySelector('.total-price').textContent.trim();
                var priceMatch = priceText.match(/\d+(\.\d+)?/);
                
                if (priceMatch) {
                    var currentPrice = parseFloat(priceMatch[0]);
                    // Calculate the original price (assuming 21% discount as per eightPieceOptionDiscount)
                    // // var calculatedOriginalPrice = (currentPrice / 0.79).toFixed(0);
                    var calculatedOriginalPrice = (currentPrice / 0.8).toFixed(0);
                    
                    pricePieceDiv.innerHTML = `
                        <span class="original-price-pack">
                            ${calculatedOriginalPrice} ${currencyText}
                        </span>
                    `;
                }
            }
            
            // Initial setup
            updateOriginalPrice();
            priceDiv.appendChild(pricePieceDiv);
            
            // Set up observer to watch for price changes
            var priceElement = priceDiv.querySelector('.total-price');
            if (priceElement) {
                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'childList' || mutation.type === 'characterData') {
                            updateOriginalPrice();
                        }
                    });
                });
                
                var observerConfig = { 
                    childList: true, 
                    characterData: true, 
                    subtree: true 
                };
                observer.observe(priceElement, observerConfig);
            }

            // Continue with the rest of the code
            var priceDiv2 = document.querySelector('.pdp-price-div');
            var pricePieceDiv2 = document.createElement('div');
            pricePieceDiv2.classList.add('price-piece-div2');
            pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${eightPieceOptionPrice} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;

            priceDiv2.appendChild(pricePieceDiv2);

            // Observe upsell selection changes and update per-piece price accordingly
            (function() {
                var basePerPiecePrice = eightPieceOptionPrice;
                function updatePerPieceForUpsell() {
                    var isUpsellSelected = !!(prodDiv.querySelector('.size-option-upsell.selected'));
                    var newPriceText = basePerPiecePrice;
                    if (isUpsellSelected) {
                        newPriceText = eightPieceOptionPriceUpsell;
                    }
                    pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${newPriceText} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;
                }
                updatePerPieceForUpsell();
                var upsellContainer = prodDiv.querySelector('.size-option-upsell') ? prodDiv.querySelector('.size-option-upsell').parentElement : null;
                if (upsellContainer) {
                    upsellContainer.addEventListener('click', function(e) {
                        if (e.target && e.target.closest('.size-option')) {
                            updatePerPieceForUpsell();
                        }
                    });
                    var selectionObserver = new MutationObserver(function() {
                        updatePerPieceForUpsell();
                    });
                    selectionObserver.observe(upsellContainer, { attributes: true, subtree: true, attributeFilter: ['class'] });
                }
            })();
            var options = prodDiv.querySelectorAll('.s-product-options-option-container')

            // if (options.length > 1) { 
            //     options[1].style = 'display: none'
            // } 

            var fields = prodDiv.querySelector('salla-product-options');

            fields.insertBefore(linksdiv, fields.querySelector('salla-conditional-fields'));
        });
        
    });

    // 12 Pack
    waitForElement('.product-1306857438', (prodDiv) => {
        var linksdiv = document.createElement('div');
        linksdiv.classList.add('bundle-options-links');

        linksdiv.innerHTML = `
                            <h3 class="bundle-options-title">${bundleOptionsTitle}</h3>
                            <div class="size-options size-options-bundle">
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle size-option-1p">
                                        <div class="badge-container">
                                            <!-- No free shipping badge for single piece option -->
                                        </div>
                                        <a href="${onePieceOptionLink}">
                                            <span class="size-option-title">
                                                ${onePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${onePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${BestSellerText ? `<span class="best-seller-pill-bundle-links">${BestSellerText}</span>` : ''}
                                            ${fourPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${fourPieceOptionDiscount}%</span>` : ''}                                          
                                        </div>
                                        <a href="${fourPieceOptionLink}">
                                            <span class="size-option-title">
                                                ${fourPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 ">
                                                ${fourPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 ">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty ">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${eightPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${eightPieceOptionDiscount}%</span>` : ''}                                          </div>
                                        <a href="${eightPieceOptionLink}">
                                            <span class="size-option-title">
                                                ${eightPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${eightPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option selected size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${twelvePieceOptionDiscount ? `<span class="discount-pill-bundle-links">${twelvePieceOptionDiscount}%</span>` : ''}                                       </div>
                                        <a href="${twelvePieceOptionLink}">
                                            <span class="size-option-title">
                                                ${twelvePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 selected">
                                                ${twelvePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 selected">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty selected">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>`;

        waitForElement('.s-product-options-option-container', (opttemp) => {
            var priceDiv = document.querySelector('.pdp-price-div').querySelector('.starting-or-normal-price');
            var pricePieceDiv = document.createElement('div');
            pricePieceDiv.classList.add('price-piece-div');
            
            // Function to update the original price
            function updateOriginalPrice() {
                // Get the current price from the price element
                var priceText = priceDiv.querySelector('.total-price').textContent.trim();
                var priceMatch = priceText.match(/\d+(\.\d+)?/);
                
                if (priceMatch) {
                    var currentPrice = parseFloat(priceMatch[0]);
                    // Calculate the original price (assuming 29% discount as per twelvePieceOptionDiscount)
                    ////var calculatedOriginalPrice = (currentPrice / 0.71).toFixed(0);
                    var calculatedOriginalPrice = (currentPrice / 0.71).toFixed(0);
                    
                    pricePieceDiv.innerHTML = `
                        <span class="original-price-pack">
                            ${calculatedOriginalPrice} ${currencyText}
                        </span>
                    `;
                }
            }
            
            // Initial setup
            updateOriginalPrice();
            priceDiv.appendChild(pricePieceDiv);
            
            // Set up observer to watch for price changes
            var priceElement = priceDiv.querySelector('.total-price');
            if (priceElement) {
                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'childList' || mutation.type === 'characterData') {
                            updateOriginalPrice();
                        }
                    });
                });
                
                var observerConfig = { 
                    childList: true, 
                    characterData: true, 
                    subtree: true 
                };
                observer.observe(priceElement, observerConfig);
            }

            // Continue with the rest of the code
            var priceDiv2 = document.querySelector('.pdp-price-div');
            var pricePieceDiv2 = document.createElement('div');
            pricePieceDiv2.classList.add('price-piece-div2');
            pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${twelvePieceOptionPrice} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;

            priceDiv2.appendChild(pricePieceDiv2);

            // Observe upsell selection changes and update per-piece price accordingly
            (function() {
                var basePerPiecePrice = twelvePieceOptionPrice;
                function updatePerPieceForUpsell() {
                    var isUpsellSelected = !!(prodDiv.querySelector('.size-option-upsell.selected'));
                    var newPriceText = basePerPiecePrice;
                    if (isUpsellSelected) {
                        newPriceText = twelvePieceOptionPriceUpsell;
                    }
                    pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${newPriceText} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;
                }
                updatePerPieceForUpsell();
                var upsellContainer = prodDiv.querySelector('.size-option-upsell') ? prodDiv.querySelector('.size-option-upsell').parentElement : null;
                if (upsellContainer) {
                    upsellContainer.addEventListener('click', function(e) {
                        if (e.target && e.target.closest('.size-option')) {
                            updatePerPieceForUpsell();
                        }
                    });
                    var selectionObserver = new MutationObserver(function() {
                        updatePerPieceForUpsell();
                    });
                    selectionObserver.observe(upsellContainer, { attributes: true, subtree: true, attributeFilter: ['class'] });
                }
            })();
            var options = prodDiv.querySelectorAll('.s-product-options-option-container')

            // if (options.length > 1) { 
            //     options[1].style = 'display: none'
            // } 

            var fields = prodDiv.querySelector('salla-product-options');

            fields.insertBefore(linksdiv, fields.querySelector('salla-conditional-fields'));
        });
        
    });

    // 1 Pack Black Pack
    waitForElement('.product-50512583', (prodDiv) => {
        var linksdiv = document.createElement('div');
        linksdiv.classList.add('bundle-options-links');

        linksdiv.innerHTML = `
                            <h3 class="bundle-options-title">${bundleOptionsTitle}</h3>
                            <div class="size-options size-options-bundle">
                                <div class="size-option-wrapper">
                                    <div class="size-option selected size-option-bundle size-option-1p">
                                        <div class="badge-container">
                                            <!-- No free shipping badge for single piece option -->
                                        </div>
                                        <a href="${onePieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${onePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 selected">
                                                ${onePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 selected">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty selected">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${BestSellerText ? `<span class="best-seller-pill-bundle-links">${BestSellerText}</span>` : ''}
                                            ${fourPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${fourPieceOptionDiscount}%</span>` : ''}                                          
                                        </div>
                                        <a href="${fourPieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${fourPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${fourPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${eightPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${eightPieceOptionDiscount}%</span>` : ''}                                          </div>
                                        <a href="${eightPieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${eightPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${eightPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${twelvePieceOptionDiscount ? `<span class="discount-pill-bundle-links">${twelvePieceOptionDiscount}%</span>` : ''}                                       </div>
                                        <a href="${twelvePieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${twelvePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${twelvePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>`;

        waitForElement('.s-product-options-option-container', (opttemp) => {
            var options = prodDiv.querySelectorAll('.s-product-options-option-container')

            // if (options.length > 1) { 
            //     options[1].style = 'display: none'
            // } 

            var fields = prodDiv.querySelector('salla-product-options');

            fields.insertBefore(linksdiv, fields.querySelector('salla-conditional-fields'));
        });
        
    });

    // 4 Pack Black Pack
    waitForElement('.product-723306792', (prodDiv) => {
        var linksdiv = document.createElement('div');
        linksdiv.classList.add('bundle-options-links');

        linksdiv.innerHTML = `
                            <h3 class="bundle-options-title">${bundleOptionsTitle}</h3>
                            <div class="size-options size-options-bundle">
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle size-option-1p">
                                        <div class="badge-container">
                                            <!-- No free shipping badge for single piece option -->
                                        </div>
                                        <a href="${onePieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${onePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${onePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option selected size-option-bundle">
                                        <div class="badge-container">
                                            ${BestSellerText ? `<span class="best-seller-pill-bundle-links">${BestSellerText}</span>` : ''}
                                            ${fourPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${fourPieceOptionDiscount}%</span>` : ''}                                          
                                        </div>
                                        <a href="${fourPieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${fourPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 selected">
                                                ${fourPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 selected">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty selected">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${eightPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${eightPieceOptionDiscount}%</span>` : ''}                                          </div>
                                        <a href="${eightPieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${eightPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${eightPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${twelvePieceOptionDiscount ? `<span class="discount-pill-bundle-links">${twelvePieceOptionDiscount}%</span>` : ''}                                       </div>
                                        <a href="${twelvePieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${twelvePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${twelvePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>`;

        waitForElement('.s-product-options-option-container', (opttemp) => {
            var priceDiv = document.querySelector('.pdp-price-div').querySelector('.starting-or-normal-price');
            var pricePieceDiv = document.createElement('div');
            pricePieceDiv.classList.add('price-piece-div');

            
            // Function to update the original price
            function updateOriginalPrice() {
                // Get the current price from the price element
                var priceText = priceDiv.querySelector('.total-price').textContent.trim();
                var priceMatch = priceText.match(/\d+(\.\d+)?/);
                
                if (priceMatch) {
                    var currentPrice = parseFloat(priceMatch[0]);
                    // Calculate the original price (assuming 15% discount as per fourPieceOptionDiscount)
                    // var calculatedOriginalPrice = (currentPrice / 0.85).toFixed(0);
                    var calculatedOriginalPrice = (currentPrice / 0.86).toFixed(0);
                    
                    pricePieceDiv.innerHTML = `
                        <span class="original-price-pack">
                            ${calculatedOriginalPrice} ${currencyText}
                        </span>
                    `;


                }
            }
            
            // Initial setup
            updateOriginalPrice();
            priceDiv.appendChild(pricePieceDiv);
            
            // Set up observer to watch for price changes
            var priceElement = priceDiv.querySelector('.total-price');
            if (priceElement) {
                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'childList' || mutation.type === 'characterData') {
                            updateOriginalPrice();
                        }
                    });
                });
                
                var observerConfig = { 
                    childList: true, 
                    characterData: true, 
                    subtree: true 
                };
                observer.observe(priceElement, observerConfig);
            }

            // Continue with the rest of the code
            var priceDiv2 = document.querySelector('.pdp-price-div');
            var pricePieceDiv2 = document.createElement('div');
            pricePieceDiv2.classList.add('price-piece-div2');
            pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${fourPieceOptionPrice} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;

            priceDiv2.appendChild(pricePieceDiv2);
            
            // Observe upsell selection changes and update per-piece price accordingly
            (function() {
                var basePerPiecePrice = fourPieceOptionPrice;
                function updatePerPieceForUpsell() {
                    var isUpsellSelected = !!(prodDiv.querySelector('.size-option-upsell.selected'));
                    var newPriceText = basePerPiecePrice;
                    if (isUpsellSelected) {
                        newPriceText = fourPieceOptionPriceUpsell;
                    }
                    pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${newPriceText} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;
                }
                updatePerPieceForUpsell();
                var upsellContainer = prodDiv.querySelector('.size-option-upsell') ? prodDiv.querySelector('.size-option-upsell').parentElement : null;
                if (upsellContainer) {
                    upsellContainer.addEventListener('click', function(e) {
                        if (e.target && e.target.closest('.size-option')) {
                            updatePerPieceForUpsell();
                        }
                    });
                    var selectionObserver = new MutationObserver(function() {
                        updatePerPieceForUpsell();
                    });
                    selectionObserver.observe(upsellContainer, { attributes: true, subtree: true, attributeFilter: ['class'] });
                }
            })();
            
            var options = prodDiv.querySelectorAll('.s-product-options-option-container')

            // if (options.length > 1) { 
            //     options[1].style = 'display: none'
            // } 

            var fields = prodDiv.querySelector('salla-product-options');

            fields.insertBefore(linksdiv, fields.querySelector('salla-conditional-fields'));
        });
        
    });

    // 8 Pack Black Pack
    waitForElement('.product-2067310458', (prodDiv) => {
        var linksdiv = document.createElement('div');
        linksdiv.classList.add('bundle-options-links');

        linksdiv.innerHTML = `
                            <h3 class="bundle-options-title">${bundleOptionsTitle}</h3>
                            <div class="size-options size-options-bundle">
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle size-option-1p">
                                        <div class="badge-container">
                                            <!-- No free shipping badge for single piece option -->
                                        </div>
                                        <a href="${onePieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${onePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${onePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${BestSellerText ? `<span class="best-seller-pill-bundle-links">${BestSellerText}</span>` : ''}
                                            ${fourPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${fourPieceOptionDiscount}%</span>` : ''}                                          
                                        </div>
                                        <a href="${fourPieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${fourPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 ">
                                                ${fourPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 ">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty ">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option selected size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${eightPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${eightPieceOptionDiscount}%</span>` : ''}                                          </div>
                                        <a href="${eightPieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${eightPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 selected">
                                                ${eightPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 selected">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty selected">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${twelvePieceOptionDiscount ? `<span class="discount-pill-bundle-links">${twelvePieceOptionDiscount}%</span>` : ''}                                       </div>
                                        <a href="${twelvePieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${twelvePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${twelvePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>`;

        waitForElement('.s-product-options-option-container', (opttemp) => {
            var priceDiv = document.querySelector('.pdp-price-div').querySelector('.starting-or-normal-price');
            var pricePieceDiv = document.createElement('div');
            pricePieceDiv.classList.add('price-piece-div');
            
            // Function to update the original price
            function updateOriginalPrice() {
                // Get the current price from the price element
                var priceText = priceDiv.querySelector('.total-price').textContent.trim();
                var priceMatch = priceText.match(/\d+(\.\d+)?/);
                
                if (priceMatch) {
                    var currentPrice = parseFloat(priceMatch[0]);
                    // Calculate the original price (assuming 21% discount as per eightPieceOptionDiscount)
                    // // var calculatedOriginalPrice = (currentPrice / 0.79).toFixed(0);
                    // var calculatedOriginalPrice = (currentPrice / 0.79).toFixed(0);
                    var calculatedOriginalPrice = (currentPrice / 0.8).toFixed(0);
                    
                    pricePieceDiv.innerHTML = `
                        <span class="original-price-pack">
                            ${calculatedOriginalPrice} ${currencyText}
                        </span>
                    `;
                }
            }
            
            // Initial setup
            updateOriginalPrice();
            priceDiv.appendChild(pricePieceDiv);
            
            // Set up observer to watch for price changes
            var priceElement = priceDiv.querySelector('.total-price');
            if (priceElement) {
                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'childList' || mutation.type === 'characterData') {
                            updateOriginalPrice();
                        }
                    });
                });
                
                var observerConfig = { 
                    childList: true, 
                    characterData: true, 
                    subtree: true 
                };
                observer.observe(priceElement, observerConfig);
            }

            // Continue with the rest of the code
            var priceDiv2 = document.querySelector('.pdp-price-div');
            var pricePieceDiv2 = document.createElement('div');
            pricePieceDiv2.classList.add('price-piece-div2');
            pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${eightPieceOptionPrice} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;

            priceDiv2.appendChild(pricePieceDiv2);

            // Observe upsell selection changes and update per-piece price accordingly
            (function() {
                var basePerPiecePrice = eightPieceOptionPrice;
                function updatePerPieceForUpsell() {
                    var isUpsellSelected = !!(prodDiv.querySelector('.size-option-upsell.selected'));
                    var newPriceText = basePerPiecePrice;
                    if (isUpsellSelected) {
                        newPriceText = eightPieceOptionPriceUpsell;
                    }
                    pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${newPriceText} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;
                }
                updatePerPieceForUpsell();
                var upsellContainer = prodDiv.querySelector('.size-option-upsell') ? prodDiv.querySelector('.size-option-upsell').parentElement : null;
                if (upsellContainer) {
                    upsellContainer.addEventListener('click', function(e) {
                        if (e.target && e.target.closest('.size-option')) {
                            updatePerPieceForUpsell();
                        }
                    });
                    var selectionObserver = new MutationObserver(function() {
                        updatePerPieceForUpsell();
                    });
                    selectionObserver.observe(upsellContainer, { attributes: true, subtree: true, attributeFilter: ['class'] });
                }
            })();
            var options = prodDiv.querySelectorAll('.s-product-options-option-container')

            // if (options.length > 1) { 
            //     options[1].style = 'display: none'
            // } 

            var fields = prodDiv.querySelector('salla-product-options');

            fields.insertBefore(linksdiv, fields.querySelector('salla-conditional-fields'));
        });
        
    });


    // 8 Pack Mix Pack Test
    waitForElement('.product-1344181453', (prodDiv) => {
        var linksdiv = document.createElement('div');
        linksdiv.classList.add('bundle-options-links');

        linksdiv.innerHTML = `
                            <h3 class="bundle-options-title">${bundleOptionsTitle}</h3>
                            <div class="size-options size-options-bundle">
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle size-option-1p">
                                        <div class="badge-container">
                                            <!-- No free shipping badge for single piece option -->
                                        </div>
                                        <a href="${onePieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${onePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${onePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${BestSellerText ? `<span class="best-seller-pill-bundle-links">${BestSellerText}</span>` : ''}
                                            ${fourPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${fourPieceOptionDiscount}%</span>` : ''}                                          
                                        </div>
                                        <a href="${fourPieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${fourPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 ">
                                                ${fourPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 ">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty ">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option selected size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${eightPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${eightPieceOptionDiscount}%</span>` : ''}                                          </div>
                                        <a href="${eightPieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${eightPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 selected">
                                                ${eightPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 selected">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty selected">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${twelvePieceOptionDiscount ? `<span class="discount-pill-bundle-links">${twelvePieceOptionDiscount}%</span>` : ''}                                       </div>
                                        <a href="${twelvePieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${twelvePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${twelvePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>`;

        waitForElement('.s-product-options-option-container', (opttemp) => {
            var priceDiv = document.querySelector('.pdp-price-div').querySelector('.starting-or-normal-price');
            var pricePieceDiv = document.createElement('div');
            pricePieceDiv.classList.add('price-piece-div');
            
            // Function to update the original price
            function updateOriginalPrice() {
                // Get the current price from the price element
                var priceText = priceDiv.querySelector('.total-price').textContent.trim();
                var priceMatch = priceText.match(/\d+(\.\d+)?/);
                
                if (priceMatch) {
                    var currentPrice = parseFloat(priceMatch[0]);
                    // Calculate the original price (assuming 21% discount as per eightPieceOptionDiscount)
                    // // var calculatedOriginalPrice = (currentPrice / 0.79).toFixed(0);
                    // var calculatedOriginalPrice = (currentPrice / 0.79).toFixed(0);
                    var calculatedOriginalPrice = (currentPrice / 0.8).toFixed(0);
                    
                    pricePieceDiv.innerHTML = `
                        <span class="original-price-pack">
                            ${calculatedOriginalPrice} ${currencyText}
                        </span>
                    `;
                }
            }
            
            // Initial setup
            updateOriginalPrice();
            priceDiv.appendChild(pricePieceDiv);
            
            // Set up observer to watch for price changes
            var priceElement = priceDiv.querySelector('.total-price');
            if (priceElement) {
                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'childList' || mutation.type === 'characterData') {
                            updateOriginalPrice();
                        }
                    });
                });
                
                var observerConfig = { 
                    childList: true, 
                    characterData: true, 
                    subtree: true 
                };
                observer.observe(priceElement, observerConfig);
            }

            // Continue with the rest of the code
            var priceDiv2 = document.querySelector('.pdp-price-div');
            var pricePieceDiv2 = document.createElement('div');
            pricePieceDiv2.classList.add('price-piece-div2');
            pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${eightPieceOptionPrice} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;

            priceDiv2.appendChild(pricePieceDiv2);

            // Observe upsell selection changes and update per-piece price accordingly
            (function() {
                var basePerPiecePrice = eightPieceOptionPrice;
                function updatePerPieceForUpsell() {
                    var isUpsellSelected = !!(prodDiv.querySelector('.size-option-upsell.selected'));
                    var newPriceText = basePerPiecePrice;
                    if (isUpsellSelected) {
                        newPriceText = eightPieceOptionPriceUpsell;
                    }
                    pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${newPriceText} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;
                }
                updatePerPieceForUpsell();
                var upsellContainer = prodDiv.querySelector('.size-option-upsell') ? prodDiv.querySelector('.size-option-upsell').parentElement : null;
                if (upsellContainer) {
                    upsellContainer.addEventListener('click', function(e) {
                        if (e.target && e.target.closest('.size-option')) {
                            updatePerPieceForUpsell();
                        }
                    });
                    var selectionObserver = new MutationObserver(function() {
                        updatePerPieceForUpsell();
                    });
                    selectionObserver.observe(upsellContainer, { attributes: true, subtree: true, attributeFilter: ['class'] });
                }
            })();
            var options = prodDiv.querySelectorAll('.s-product-options-option-container')

            // if (options.length > 1) { 
            //     options[1].style = 'display: none'
            // } 

            var fields = prodDiv.querySelector('salla-product-options');

            fields.insertBefore(linksdiv, fields.querySelector('salla-conditional-fields'));
        });
        
    });

    // 12 Pack Black Pack
    waitForElement('.product-1727535782', (prodDiv) => {
        var linksdiv = document.createElement('div');
        linksdiv.classList.add('bundle-options-links');

        linksdiv.innerHTML = `
                            <h3 class="bundle-options-title">${bundleOptionsTitle}</h3>
                            <div class="size-options size-options-bundle">
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle size-option-1p">
                                        <div class="badge-container">
                                            <!-- No free shipping badge for single piece option -->
                                        </div>
                                        <a href="${onePieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${onePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${onePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${BestSellerText ? `<span class="best-seller-pill-bundle-links">${BestSellerText}</span>` : ''}
                                            ${fourPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${fourPieceOptionDiscount}%</span>` : ''}                                          
                                        </div>
                                        <a href="${fourPieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${fourPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 ">
                                                ${fourPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 ">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty ">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${eightPieceOptionDiscount ? `<span class="discount-pill-bundle-links">${eightPieceOptionDiscount}%</span>` : ''}                                          </div>
                                        <a href="${eightPieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${eightPieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2">
                                                ${eightPieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-option-wrapper">
                                    <div class="size-option selected size-option-bundle">
                                        <div class="badge-container">
                                            ${freeShippingText ? `<span class="free-shipping-pill-bundle-links">${freeShippingText}</span>` : ''}
                                            ${twelvePieceOptionDiscount ? `<span class="discount-pill-bundle-links">${twelvePieceOptionDiscount}%</span>` : ''}                                       </div>
                                        <a href="${twelvePieceOptionLinkBlack}">
                                            <span class="size-option-title">
                                                ${twelvePieceOptionTitle}
                                            </span>
                                            <br>
                                            <span class="size-option-price2 selected">
                                                ${twelvePieceOptionPrice}
                                            </span>
                                            <span class="size-option-price2 selected">
                                                ${currencyText}
                                            </span>
                                            <span class="size-option-qty selected">
                                                ${perPieceText}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>`;

        waitForElement('.s-product-options-option-container', (opttemp) => {
            var priceDiv = document.querySelector('.pdp-price-div').querySelector('.starting-or-normal-price');
            var pricePieceDiv = document.createElement('div');
            pricePieceDiv.classList.add('price-piece-div');
            
            // Function to update the original price
            function updateOriginalPrice() {
                // Get the current price from the price element
                var priceText = priceDiv.querySelector('.total-price').textContent.trim();
                var priceMatch = priceText.match(/\d+(\.\d+)?/);
                
                if (priceMatch) {
                    var currentPrice = parseFloat(priceMatch[0]);
                    // Calculate the original price (assuming 29% discount as per twelvePieceOptionDiscount)
                    //var calculatedOriginalPrice = (currentPrice / 0.71).toFixed(0);
                    var calculatedOriginalPrice = (currentPrice / 0.71).toFixed(0);
                    
                    pricePieceDiv.innerHTML = `
                        <span class="original-price-pack">
                            ${calculatedOriginalPrice} ${currencyText}
                        </span>
                    `;
                }
            }
            
            // Initial setup
            updateOriginalPrice();
            priceDiv.appendChild(pricePieceDiv);
            
            // Set up observer to watch for price changes
            var priceElement = priceDiv.querySelector('.total-price');
            if (priceElement) {
                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'childList' || mutation.type === 'characterData') {
                            updateOriginalPrice();
                        }
                    });
                });
                
                var observerConfig = { 
                    childList: true, 
                    characterData: true, 
                    subtree: true 
                };
                observer.observe(priceElement, observerConfig);
            }

            // Continue with the rest of the code
            var priceDiv2 = document.querySelector('.pdp-price-div');
            var pricePieceDiv2 = document.createElement('div');
            pricePieceDiv2.classList.add('price-piece-div2');
            pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${twelvePieceOptionPrice} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;

            priceDiv2.appendChild(pricePieceDiv2);

            // Observe upsell selection changes and update per-piece price accordingly
            (function() {
                var basePerPiecePrice = twelvePieceOptionPrice;
                function updatePerPieceForUpsell() {
                    var isUpsellSelected = !!(prodDiv.querySelector('.size-option-upsell.selected'));
                    var newPriceText = basePerPiecePrice;
                    if (isUpsellSelected) {
                        newPriceText = twelvePieceOptionPriceUpsell;
                    }
                    pricePieceDiv2.innerHTML = `
                <span class="size-option-price">
                    ${newPriceText} ${currencyText} <span class="size-option-qty">${perPieceText} ${perPieceTextNDS}</span>
                </span>
            `;
                }
                updatePerPieceForUpsell();
                var upsellContainer = prodDiv.querySelector('.size-option-upsell') ? prodDiv.querySelector('.size-option-upsell').parentElement : null;
                if (upsellContainer) {
                    upsellContainer.addEventListener('click', function(e) {
                        if (e.target && e.target.closest('.size-option')) {
                            updatePerPieceForUpsell();
                        }
                    });
                    var selectionObserver = new MutationObserver(function() {
                        updatePerPieceForUpsell();
                    });
                    selectionObserver.observe(upsellContainer, { attributes: true, subtree: true, attributeFilter: ['class'] });
                }
            })();
            var options = prodDiv.querySelectorAll('.s-product-options-option-container')

            // if (options.length > 1) { 
            //     options[1].style = 'display: none'
            // } 

            var fields = prodDiv.querySelector('salla-product-options');

            fields.insertBefore(linksdiv, fields.querySelector('salla-conditional-fields'));
        });
        
    });


    /*******************************************************************************************/
    /************* Size Guide ****************/
    /*******************************************************************************************/
    // Add this new function to handle modal event listeners
    function setupSizeGuideEventListeners(modalOverlay) {
        // Get the size guide link and close button
        var sizeGuideLink = document.querySelector('.size-guide-link-div');
        var closeButton = modalOverlay.querySelector('.modal-close');

        // Show modal when clicking the size guide link
        sizeGuideLink.addEventListener('click', (e) => {
            e.preventDefault();
            modalOverlay.style.display = 'flex';
        });

        // Hide modal when clicking the close button
        closeButton.addEventListener('click', () => {
            modalOverlay.style.display = 'none';
        });

        // Hide modal when clicking outside the content
        modalOverlay.addEventListener('click', (e) => {
            if (e.target === modalOverlay) {
                modalOverlay.style.display = 'none';
            }
        });
    }


    /*******************************************************************************************/
    /* move video comparison title to top PDP */ 
    /*******************************************************************************************/
    waitForElement('.hawa-video-comparison h2', (h2Element) => {
        if (window.innerWidth < 768) {
            var flexContainer = h2Element.closest('.flex');
            
            if (flexContainer) {
                var newH2 = h2Element.cloneNode(true);
                newH2.classList.add('video-comparison-title-top');

                flexContainer.appendChild(newH2);

                h2Element.remove();
            }
        }
        else {
            console.log('Not on mobile');
        }
    });

    /*******************************************************************************************/
    /*******************************************************************************************/
    /*******************************************************************************************/
    /*************************** ALL OTHER PAGES CUSTOMIZATION ****************************************/ 
    /*******************************************************************************************/
    /*******************************************************************************************/
    /*******************************************************************************************/

    // FAQ Data Structure
    var faqDataNonProduct = {
        en: [
            {
                question: "What is the First Pair Guarantee?",
                answer: "We're confident that we created the best boxers on the planet. If you don't love your first pair, we will send you a different size or issue a full refund - no return required.",
                link: "https://hawa.co/en/return-policy/page-1642404213",
                linkText: 'Guarantee Policy'
            },
            {
                question: "Do you offer Returns and Exchanges?",
                answer: "You can return or exchange within 7 days from receiving your order.",
                link: "https://hawa.co/en/return-policy/page-1642404213",
                linkText: 'Return Policy'
            },
            {
                question: "When will my items ship? How long will it take to arrive?",
                answer: "Saudi Arabia:\n\n•Riyadh: within 48 hours (excluding Friday)\n•Dammam and Jeddah: within 3 days (excluding Friday)\n•Other cities in Saudi Arabia: 3-6 days (excluding Friday)\n\n•Gulf Countries:UAE: within 1 week\n•Kuwait and other GCC countries: within 2 weeks",
                link: '',
                linkText: ''
                
            }
            
        ],
        ar: [
            {
                question: "وش هو ضمان هوا على البوكسر الأول؟",
                answer: "واثقين في منتجنا، أخذ مننا فوق السنة من البحث والتطوير. في حال ماعجبك أول بوكسر. أبد خله عندك وترجع لك فلوسك.",
                link: 'https://hawa.co/ar/return-policy/page-1642404213',
                linkText: 'للمزيد: سياسة الضمان'
            },
            {
                question: "هل يمديني أسترجع أو استبدل المنتج؟",
                answer: "أكيد يمديك، بإمكانك الاسترجاع والاستبدال خلال 30 يوم من استلام الطلب.",
                link: 'https://hawa.co/ar/return-policy/page-1642404213',
                linkText: 'للمزيد: سياسة الاستبدال والاسترجاع'
            },
            {
                question: `كم ياخذ الشحن لمنتجات هوا؟`,
                answer: `داخل المملكة:\n\n• يتم التوصيل داخل الرياض خلال 48 ساعة (باستثناء يوم الجمعة)\n• باقي مدن المملكة الكبيرة مثل جدة والدمام، خلال 3 أيام عمل (باستثناء يوم الجمعة)\n• باقي مدن المملكة، خلال 6 أيام عمل كحد أقصى (باستثناء يوم الجمعة)\n\nباقي دول الخليج:\n\n• دولة الإمارات: خلال أسبوع\n• دولة الكويت وباقي دول الخليج: خلال أسبوعين`,
                link: '',
                linkText: ''
            }
        ]
    };

    // NATIONAL DAY PRODUCTS CHANGES HERE
    if (!document.querySelector('.product-2130693625') && !document.querySelector('.product-271747864') && !document.querySelector('.product-1716601874') && !document.querySelector('.product-1306857438') && !document.querySelector('.cart') && !document.querySelector('.product-727834477') && !document.querySelector('.product-1727535782') && !document.querySelector('.product-723306792') && !document.querySelector('.product-2067310458') && !document.querySelector('.product-50512583') && !document.querySelector('.product-1344181453')) {
        
        /*******************************************************************************************/
        /* Intagram in all other pages */ 
        /*******************************************************************************************/
       

        var targetDiv = document.querySelector('.store-footer');

        var targetElementinstaPDP = document.createElement('div');

        if (targetDiv) {
            if(htmlLang == 'en'){
                targetElementinstaPDP.innerHTML= `
                    <div class="insta-title-div"><h2 class="insta-h2">`+instaTextEn+`</h2></div>
                    <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
                    <div class="elfsight-app-682538f0-27f2-46e8-9c59-d5f961493ce2" data-elfsight-app-lazy></div>
                    `
                
            }
            else {
                targetElementinstaPDP.innerHTML= `
                    <div class="insta-title-div"><h2 class="insta-h2">`+instaTextAr+`</h2></div>
                    <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
                <div class="elfsight-app-682538f0-27f2-46e8-9c59-d5f961493ce2" data-elfsight-app-lazy></div>
                `
            }
            targetDiv.parentNode.insertBefore(targetElementinstaPDP, targetDiv);
        } else {
          console.log('insta element element not found');
        }
        
    }
}


    /*******************************************************************************************/
    /*******************************************************************************************/
/*******************************************************************************************/
/************************************ CART PAGE ************************************/
/*******************************************************************************************/
/*******************************************************************************************/
/*******************************************************************************************/
if (document.querySelector('.cart')) {
    /*******************************************************************************************/
    /* CART Size and Pack Options */
    /*******************************************************************************************/
    function encapsulateDropdownWithSquares(selectElement) {
        if (selectElement) {
            var sizeOptionsContainer = document.createElement('div');
            sizeOptionsContainer.classList.add('size-options');
            sizeOptionsContainer.classList.add('size-options-cart');



            Array.from(selectElement.options).forEach(function(option) {
                if (option.value !== "") {
                    var sizeOptionDiv = document.createElement('div');
                    sizeOptionDiv.classList.add('size-option');
                    sizeOptionDiv.classList.add('size-option-cart');
                    sizeOptionDiv.textContent = option.textContent.split(' - ')[0]; // Show only the size letter

                    if(option.textContent.includes('بوكسر') || option.textContent.includes('Boxer')){
                        sizeOptionDiv.classList.add('size-option-upsell');
                        //console.log(sizeOptionDiv);
                    }
                                        
                    if (option.selected) {
                        sizeOptionDiv.classList.add('selected');
                    }

                    if (option.disabled || option.textContent.includes("Out of Stock") || option.textContent.includes("نفدت الكمية")) {
                        sizeOptionDiv.classList.add('disabled');
                    }
                    
                    sizeOptionDiv.addEventListener('click', function() {
                        sizeOptionsContainer.querySelectorAll('.size-option').forEach(function(opt) {
                            opt.classList.remove('selected');
                        });

                        sizeOptionDiv.classList.add('selected');

                        selectElement.value = sizeOptionDiv.getAttribute('data-value');
                        
                        var event = new Event('change', { bubbles: true });
                        selectElement.dispatchEvent(event);
                    });

                    sizeOptionDiv.setAttribute('data-value', option.value);

                    sizeOptionsContainer.appendChild(sizeOptionDiv);
                }
            });

            selectElement.parentNode.insertBefore(sizeOptionsContainer, selectElement);

            selectElement.style.position = 'absolute';
            // selectElement.style.left = '-9999px';
            selectElement.style.marginTop = '-7vh';
            selectElement.style.opacity = '0';
            selectElement.style.height = '0';
            selectElement.style.padding = '0';

        }
    }

    waitForElement('select[name^="options["]', (boxers) => {
        var selectElements = document.querySelectorAll('select[name^="options["]');
        selectElements.forEach(encapsulateDropdownWithSquares);
    });

    waitForElement('.size-option-upsell', (sizeOptionUpsell) => {
        // var optionUpsellTitleText = htmlLang === 'en' ? 'Add more at a special price' : 'أضف بوكسر بسعر خاص';
        // var optionUpsellTitle = document.createElement('div');
        // optionUpsellTitle.classList.add('option-upsell-title');
        // optionUpsellTitle.innerHTML = `<h3 class="option-upsell-title-h3">`+optionUpsellTitleText+`</h3>`;
        // sizeOptionUpsell.parentElement.parentElement.parentElement.insertAdjacentElement('beforebegin', optionUpsellTitle);

        sizeOptionUpsell.parentElement.firstChild.classList.add('size-option-upsell-no-add');
        

        

        var sizeOptionUpsellText = sizeOptionUpsell.textContent.split(' ( ');
        console.log(sizeOptionUpsellText);
        sizeOptionUpsell.textContent = '';
        
        
        var div0 = document.createElement('div');
        div0.classList.add('badge-container-upsell');
        var span0 = document.createElement('span');
        span0.classList.add('option-upsell-free-shipping-span');
        if(document.querySelector('select[name="options[1414915792]"]')) {
            span0.appendChild(document.createTextNode(htmlLang === 'en' ? 'Free Shipping' : 'شحن مجاني'));
            // span0.appendChild(document.createTextNode(htmlLang === 'en' ? 'Special Offer' : 'عرض خاص'));
        }
        else{
            span0.appendChild(document.createTextNode(htmlLang === 'en' ? 'Special Offer' : 'عرض خاص'));
        }
        div0.appendChild(span0);
        sizeOptionUpsell.appendChild(div0);
        
       
        var span1 = document.createElement('span');
        span1.classList.add('upsell-offering-span');
        span1.appendChild(document.createTextNode(sizeOptionUpsellText[0]));
        sizeOptionUpsell.appendChild(span1);
        var span2 = document.createElement('span');
        span2.classList.add('upsell-price-span');
        span2.appendChild(document.createTextNode(sizeOptionUpsellText[1]));
        sizeOptionUpsell.appendChild(span2);
        
    });

    /*******************************************************************************************/
    /* Cart Color Options */
    /*******************************************************************************************/
    function encapsulateThumbnailOptionsWithColors(thumbnailWrapper) {
        if (thumbnailWrapper) {
            var colorOptionsContainer = document.createElement('div');
            colorOptionsContainer.classList.add('color-options');



            // Create a wrapper for the color options list
            var colorOptionsList = document.createElement('div');
            colorOptionsList.classList.add('color-options-list');
            colorOptionsContainer.appendChild(colorOptionsList);

            var thumbnailOptions = thumbnailWrapper.querySelectorAll('div');
            var firstOptionSelected = false;
            
            thumbnailOptions.forEach(function(optionDiv) {
                var radioInput = optionDiv.querySelector('input[type="radio"]');
                var label = optionDiv.querySelector('label');
                var img = optionDiv.querySelector('img');
                var text = optionDiv.querySelector('p');
                
                if (radioInput && label && img && text) {
                    var colorOptionDiv = document.createElement('div');
                    colorOptionDiv.classList.add('color-option');
                    
                    // Determine color type based on text content
                    var colorText = text.textContent.trim();
                    if (colorText.includes('نص') || colorText.includes('mix') || colorText.includes('Mix')) {
                        colorOptionDiv.classList.add('color-mixed');
                    } else if (colorText.includes('أسود') || colorText.includes('Black') || colorText.includes('black')) {
                        colorOptionDiv.classList.add('color-black');
                    } else if (colorText.includes('أبيض') || colorText.includes('White') || colorText.includes('white')) {
                        colorOptionDiv.classList.add('color-white');
                    }
                    
                    // Only add selected state if radio is actually checked (respect platform defaults)
                    if (radioInput.checked) {
                        colorOptionDiv.classList.add('selected');
                    }
                    
                    // Add disabled state if radio is disabled
                    if (radioInput.disabled) {
                        colorOptionDiv.classList.add('disabled');
                    }
                    
                    // Create color indicator
                    var colorIndicator = document.createElement('div');
                    colorIndicator.classList.add('color-indicator');
                    
                    // Add text label
                    var colorLabel = document.createElement('span');
                    colorLabel.classList.add('color-label');
                    colorLabel.textContent = colorText;
                    
                    colorOptionDiv.appendChild(colorIndicator);
                    colorOptionDiv.appendChild(colorLabel);
                    
                    // Add click event to maintain functionality
                    colorOptionDiv.addEventListener('click', function() {
                        // Remove selected from all options
                        colorOptionsList.querySelectorAll('.color-option').forEach(function(opt) {
                            opt.classList.remove('selected');
                        });
                        
                        // Add selected to clicked option
                        colorOptionDiv.classList.add('selected');
                        
                        // Trigger the original radio input
                        radioInput.checked = true;
                        
                        // Trigger the original label click to maintain go-to-slide functionality
                        label.click();
                        
                        // Dispatch change event
                        var event = new Event('change', { bubbles: true });
                        radioInput.dispatchEvent(event);
                    });
                    
                    colorOptionsList.appendChild(colorOptionDiv);
                }
            });
            
            // Insert the new container before the original wrapper
            thumbnailWrapper.parentNode.insertBefore(colorOptionsContainer, thumbnailWrapper);
            
            // Hide the original wrapper
            thumbnailWrapper.style.display = 'none';
        }
    }

    waitForElement('.s-product-options-thumbnails-wrapper', (firstThumbnailWrapper) => {
        // Handle all thumbnail wrappers in cart, not just the first one
        var allThumbnailWrappers = document.querySelectorAll('.s-product-options-thumbnails-wrapper');
        allThumbnailWrappers.forEach(function(thumbnailWrapper) {
            // Check if this wrapper has already been processed
            if (!thumbnailWrapper.dataset.colorOptionsProcessed) {
                encapsulateThumbnailOptionsWithColors(thumbnailWrapper);
                thumbnailWrapper.dataset.colorOptionsProcessed = 'true';
            }
        });
    });

    /*******************************************************************************************/
    /* Reorder Cart Elements */
    /*******************************************************************************************/
    function isCartPage() {
        var freeShippingElement = document.querySelector('#free-shipping');
        return freeShippingElement;
    }

    function reorderCartElements() {
        // First, verify we're on the cart page
        if (!isCartPage()) {
            console.log('Not Cart Page');
            return; // Exit if not cart page
        }

        // Get main container and elements
        var mainContainer = document.querySelector('.flex.flex-col.items-start');
        var cartContent = document.querySelector('.main-content');
        var sidebar = document.querySelector('.sticky.top-24');
        var shippingBar = document.querySelector('#free-shipping');
        
        // Double check all required elements exist
        if (!mainContainer || !cartContent || !sidebar || !shippingBar) {
            console.log('Required cart elements not found');
            return;
        }

        function setMobileOrder() {
            // First, restore all elements to mainContainer to ensure proper ordering
            mainContainer.innerHTML = '';
            
            // 1. Move shipping bar to the top
            mainContainer.appendChild(shippingBar);
            
            // 2. Move cart content second
            mainContainer.appendChild(cartContent);
            
            // 3. Move remaining sidebar content last
            mainContainer.appendChild(sidebar);
            
            // Apply mobile styles
            shippingBar.style.width = '100%';
            cartContent.style.order = '0'; // Ensure cart content appears in correct order
            sidebar.style.width = '100%';
            sidebar.style.marginTop = '1rem';

            // Move shipping bar outside of sidebar in mobile view
            if (sidebar.contains(shippingBar)) {
                mainContainer.insertBefore(shippingBar, mainContainer.firstChild);
            }
        }

        function setDesktopOrder() {
            // Restore original structure
            if (!sidebar.contains(shippingBar)) {
                sidebar.insertBefore(shippingBar, sidebar.firstChild);
            }
            
            // Reset styles
            shippingBar.style.width = '';
            cartContent.style.order = '';
            sidebar.style.width = '';
            sidebar.style.marginTop = '';

            // Ensure correct desktop order
            mainContainer.innerHTML = '';
            mainContainer.appendChild(cartContent);
            mainContainer.appendChild(sidebar);
        }

        // Create and observe screen size changes
        var mediaQuery = window.matchMedia('(max-width: 1023px)'); // matches your lg: breakpoint

        // Initial check
        if (mediaQuery.matches) {
            setMobileOrder();
        } else {
            setDesktopOrder();
        }

        // Listen for screen size changes
        mediaQuery.addEventListener('change', (e) => {
            if (e.matches) {
                setMobileOrder();
            } else {
                setDesktopOrder();
            }
        });
    }
    if (isCartPage()) {
        reorderCartElements();
    }

    /*******************************************************************************************/
    /************* Free Shipping ****************/
    /*******************************************************************************************/
    var FREE_SHIPPING_THRESHOLD = 280;

    class FreeShippingBar {
        constructor() {
            // DOM Elements
            this.freeShippingBar = document.getElementById('free-shipping-bar').querySelector('.progress-bg');
            this.freeShippingMsg = document.getElementById('free-shipping-msg');
            this.freeShippingApplied = document.getElementById('free-shipping-applied');
            this.cartTotal = document.querySelector('[data-cart-total]');
            this.shippingCost = document.getElementById('shipping-cost');
        }

        // Convert Arabic numbers to English numbers
        convertArabicToEnglish(str) {
            var arabicNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
            return str.replace(/[0-9]/g, match => arabicNumbers.indexOf(match));
        }

        // Extract number from price string (e.g., "207 <i class="sicon-sar"></i>" -> 207)
        extractNumber(priceString) {
            var numberStr = this.convertArabicToEnglish(priceString);
            return parseFloat(numberStr.replace(/[^\d.-]/g, ''));
        }

        // Convert English numbers to Arabic
        convertEnglishToArabic(num) {
            var arabicNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
            return num.toString().replace(/[0-9]/g, match => arabicNumbers[match]);
        }

        calculateProgress() {
            // Get cart total
            var totalText = this.cartTotal.textContent.replace('٫','.');
            console.log(totalText);
            var total = this.extractNumber(totalText);

            // Get shipping cost if present
            let shippingCost = 0;
            if (this.shippingCost && !this.shippingCost.classList.contains('hidden')) {
                var shippingText = this.shippingCost.querySelector('b').textContent;
                shippingCost = this.extractNumber(shippingText);
            }

            console.log(total, shippingCost);

            // Calculate actual total excluding shipping cost
            var actualTotal = total - shippingCost;

            console.log(actualTotal);
            
            // Calculate progress percentage
            var progress = Math.min((actualTotal / FREE_SHIPPING_THRESHOLD) * 100, 100);

            console.log(progress);
            
            // Calculate remaining amount
            var remaining = Math.max(FREE_SHIPPING_THRESHOLD - actualTotal, 0);

            console.log(remaining);
            
            this.updateUI(progress, remaining);
        }

        updateUI(progress, remaining) {
            // Update progress bar
            this.freeShippingBar.style.width = `${progress}%`;

            // Update message and emoji
            if (progress >= 100) {
                this.freeShippingMsg.innerHTML = document.documentElement.lang === 'ar' ?  '<b>مبروك!</b> جاك شحن مجاني' : '<b>Congratulations!</b> You have free shipping';
                this.freeShippingApplied.classList.remove('hidden');
            } else {
                var remainingFormatted = document.documentElement.lang === 'ar' ? this.convertEnglishToArabic(remaining.toFixed(2)) : remaining.toFixed(2);
                this.freeShippingMsg.innerHTML = document.documentElement.lang === 'ar' ? `احصل على <b>شحن مجاني</b> عند إضافة <b>${remainingFormatted} <i class="sicon-sar"></i></b> للسلة` : `Get <b>free shipping</b> by adding <b>${remainingFormatted} <i class="sicon-sar"></i></b> to your cart`;
                this.freeShippingApplied.classList.add('hidden');
            }
        }

        // Initialize and set up observers
        init() {
            // Initial calculation
            this.calculateProgress();

            // Set up MutationObserver to watch for changes in cart total
            var observer = new MutationObserver(() => this.calculateProgress());
            
            observer.observe(this.cartTotal, {
                childList: true,
                characterData: true,
                subtree: true
            });

            if (this.shippingCost) {
                observer.observe(this.shippingCost, {
                    childList: true,
                    characterData: true,
                    subtree: true,
                    attributes: true
                });
            }
        }
    }
    console.log('Here at the free shipping bar');
    if (isCartPage()) {
        console.log('Here at the free shipping bar 2');
        waitForElement('#free-shipping-bar', (ff) => {
            var freeShippingBar = new FreeShippingBar();
            freeShippingBar.init();
        });
    }

    /*******************************************************************************************/
    /* Size Calculator in Cart Page */ 
    /*******************************************************************************************/

    function createCartSizeCalculatorPrompt() {
        // Create the prompt element
        const promptDiv = document.createElement('div');
        promptDiv.className = 'cart-size-calculator-prompt';
        
        // Get the text based on language
        const title = htmlLang === 'en' ? 'Not sure about your size?' : 'مب متأكد من مقاسك؟';
        const description = htmlLang === 'en' 
            ? 'Use our size calculator to make sure before you order' 
            : 'استخدم حاسبة المقاس وتأكد قبل الطلب';
        const ctaText = htmlLang === 'en' ? 'Calculate My Size' : 'احسب مقاسي';

        promptDiv.innerHTML = `
            <div class="size-calculator-prompt-container">
                <div class="size-calculator-prompt-content">
                    <div class="size-calculator-icon">
                        <svg viewBox="0 0 512 512" style="width: 28px; height: 28px;">
                            <path d="M193.65 156.647c-36.028 0-62.835 14.83-65.2 36.06a26.85 26.85 0 0 0-.165 2.964c0 21.366 24.68 37.366 60.02 38.9 1.787.078 3.583.117 5.337.117 37.87 0 65.357-16.413 65.357-39.026s-27.487-39.026-65.357-39.026zm0 46.707c-1.302 0-2.638-.03-3.97-.088-15.277-.668-24.74-4.874-28.58-7.608 4.4-3.133 15.725-7.663 32.552-7.663 16.856 0 28.204 4.547 32.577 7.68-4.373 3.133-15.72 7.68-32.577 7.68zm193.65 60.303v-67.982c0-28.763-21.7-54.808-61.135-73.338-35.657-16.76-82.72-25.992-132.515-25.992-48.057 0-93.907 8.675-129.104 24.428-38.388 17.18-61.2 41.593-64.202 68.744-.228 2.055-.344 4.127-.344 6.157v120.65c0 27.153 19.62 52.17 55.243 70.442 31.905 16.365 74.893 26.488 121.046 28.505a400.35 400.35 0 0 0 17.361.383H512V263.657H387.3zM31.5 192.974c3.498-31.527 69.5-65.282 162.15-65.282 95.648 0 162.303 35.828 162.303 67.983s-66.655 67.982-162.303 67.982a367.32 367.32 0 0 1-15.993-.354l-7.185-.39c-35.193-2.26-68.22-9.7-93.66-21.2l-2.615-1.208-.26-.124-2.178-1.05-1.235-.62-1.18-.596-1.73-.906-.388-.205c-21.34-11.434-34.124-25.26-35.7-38.54-.016-.135-.025-.27-.04-.404l-.086-.964a24.1 24.1 0 0 1-.045-1.42c.001-.88.052-1.8.153-2.7zm324.454 58.083v12.6H336.7c7.143-3.935 13.567-8.15 19.263-12.6zm124.7 133.25h-32.9v-41.32h-31.347v41.32h-38.86V317.56H346.2v66.746h-38.113v-41.32H276.75v41.32h-38.862V317.56H206.54v66.746h-12.9a369.21 369.21 0 0 1-15.993-.353l-9.23-.527v-40.44H137.08V379.8c-13.785-2.275-26.847-5.377-38.86-9.236v-66.4H66.873v53.3c-22.62-12.202-35.527-27.096-35.527-41.14v-65.242c4.296 3.35 9.026 6.56 14.15 9.626l.17.104 1.964 1.145 1.95 1.114 1.56.863 3.025 1.614.758.398.318.167L59.038 268l.565.27 4.306 2 .08.034 5.153 2.237 1.013.423 4.62 1.852 2.15.82 2.396.885c22.23 8.13 47.548 13.707 74.746 16.464l1.228.125 3.547.335 5.203.428 2.04.146 6.285.393c.086.004.17.01.256.016l1.028.56h307v89.308z"></path>
                        </svg>
                    </div>
                    <div class="size-calculator-text">
                        <h3 class="size-calculator-title">${title}</h3>
                        <p class="size-calculator-description">${description}</p>
                    </div>
                    <button class="size-calculator-cta">${ctaText}</button>
                </div>
            </div>
        `;

        // Insert the element before the store footer
        const targetDiv = document.querySelector('#free-shipping');
        if (targetDiv) {
            targetDiv.parentNode.insertBefore(promptDiv, targetDiv);
            
            // Create and append the modal if it doesn't exist
            let modalOverlay = document.querySelector('.modal-overlay');
            if (!modalOverlay) {
                modalOverlay = createSizeGuideModal();
                document.body.appendChild(modalOverlay);
            }

            // Add click event to the CTA button
            const ctaButton = promptDiv.querySelector('.size-calculator-cta');
            ctaButton.addEventListener('click', () => {
                modalOverlay.style.display = 'flex';
            });

            // Set up modal close functionality
            const closeButton = modalOverlay.querySelector('.modal-close');
            if (closeButton) {
                closeButton.addEventListener('click', () => {
                    modalOverlay.style.display = 'none';
                });
            }

            // Close modal when clicking outside
            modalOverlay.addEventListener('click', (e) => {
                if (e.target === modalOverlay) {
                    modalOverlay.style.display = 'none';
                }
            });
        } else {
            console.log('Footer element not found for size calculator prompt');
        }
    }

    // Call the function when the cart page is loaded
    if (isCartPage()) {
        createCartSizeCalculatorPrompt();
    }

    /*******************************************************************************************/
    /* Guarantee in Cart Page */ 
    /*******************************************************************************************/
    if (document.querySelector('.cart')) {
        var guaranteeText = {
            en: {
                title: "First Pair Guarantee",
                description: "If you don't love your first pair, we will send you a different size or issue a full refund - no return required"
            },
            ar: {
                title: "ضمان على هواك",
                description: "نضمن لك أول بوكسر في حال ما ناسبك خله عندك واستبدل المقاس أو نرجع لك فلوسك"
            }
        };

        var language = document.documentElement.lang || 'en';
        var text = guaranteeText[language];

        var guaranteeDiv = document.createElement('div');
        guaranteeDiv.className = 'hawa-guarantee-section';
        guaranteeDiv.classList.add('hawa-guarantee-section-homepage');


        guaranteeDiv.innerHTML = `
            <div class="guarantee-container">
                <div class="guarantee-content">
                    <div class="guarantee-logo">
                        <img src="https://d17gg5c5d03gu7.cloudfront.net/guarantee_logo_vuy2in.svg" 
                            alt="Hawa Guarantee Badge" 
                            class="guarantee-badge">
                    </div>
                    <div class="guarantee-text">
                        <h2 class="guarantee-title">${text.title}</h2>
                        <p class="guarantee-description">${text.description}</p>
                    </div>
                </div>
            </div>
        `;

        var targetDiv = document.querySelector('.store-footer');

        if (targetDiv) {
            targetDiv.parentNode.insertBefore(guaranteeDiv, targetDiv);
        } else {
            console.log('footer for guarantee in cart element not found');
        }
    }

    /*******************************************************************************************/
    /* FAQ in Cart Page */ 
    /*******************************************************************************************/
    var faqDataNonProduct = {
        en: [
            {
                question: "What is the First Pair Guarantee?",
                answer: "We're confident that we created the best boxers on the planet. If you don't love your first pair, we will send you a different size or issue a full refund - no return required.",
                link: "https://hawa.co/en/return-policy/page-1642404213",
                linkText: 'Guarantee Policy'
            },
            {
                question: "Do you offer Returns and Exchanges?",
                answer: "You can return or exchange within 7 days from receiving your order.",
                link: "https://hawa.co/en/return-policy/page-1642404213",
                linkText: 'Return Policy'
            },
            {
                question: "When will my items ship? How long will it take to arrive?",
                answer: "Saudi Arabia:\n\n•Riyadh: within 48 hours (excluding Friday)\n•Dammam and Jeddah: within 3 days (excluding Friday)\n•Other cities in Saudi Arabia: 3-6 days (excluding Friday)\n\n•Gulf Countries:UAE: within 1 week\n•Kuwait and other GCC countries: within 2 weeks",
                link: '',
                linkText: ''
                
            }
            
        ],
        ar: [
            {
                question: "وش هو ضمان هوا على البوكسر الأول؟",
                answer: "واثقين في منتجنا، أخذ مننا فوق السنة من البحث والتطوير. في حال ماعجبك أول بوكسر. أبد خله عندك وترجع لك فلوسك.",
                link: 'https://hawa.co/ar/return-policy/page-1642404213',
                linkText: 'للمزيد: سياسة الضمان'
            },
            {
                question: "هل يمديني أسترجع أو استبدل المنتج؟",
                answer: "أكيد يمديك، بإمكانك الاسترجاع والاستبدال خلال 30 يوم من استلام الطلب.",
                link: 'https://hawa.co/ar/return-policy/page-1642404213',
                linkText: 'للمزيد: سياسة الاستبدال والاسترجاع'
            },
            {
                question: `كم ياخذ الشحن لمنتجات هوا؟`,
                answer: `داخل المملكة:\n\n• يتم التوصيل داخل الرياض خلال 48 ساعة (باستثناء يوم الجمعة)\n• باقي مدن المملكة الكبيرة مثل جدة والدمام، خلال 3 أيام عمل (باستثناء يوم الجمعة)\n• باقي مدن المملكة، خلال 6 أيام عمل كحد أقصى (باستثناء يوم الجمعة)\n\nباقي دول الخليج:\n\n• دولة الإمارات: خلال أسبوع\n• دولة الكويت وباقي دول الخليج: خلال أسبوعين`,
                link: '',
                linkText: ''
            }
        ]
    };
    if (document.querySelector('.cart')) {

        // Add CSS for FAQ animation
        const styleEl = document.createElement('style');
        styleEl.textContent = `
            .single-faq .faq-content {
                max-height: 0;
                overflow: hidden;
                transition: max-height .4s ease-in-out;
            }
            .single-faq.open .faq-content {
                max-height: 1000px;
                transition: max-height .4s ease-in-out;
            }
        `;
        document.head.appendChild(styleEl);


        // Create FAQ section
        var faqDiv = document.createElement('div');
        faqDiv.className = 's-block--faq pdp-faq-section';

        // Create the container structure
        let faqHTML = `
            <div class="container">
                <div class="text-center mb-8">
                    <p class="tracking-tight">${htmlLang === "en" ? "FAQs" : "أسئلة عالبال"}</p>
                </div>
                <div class="faq-container-grid">
        `;

        // Get the appropriate language array
        var currentFAQs = faqDataNonProduct[htmlLang] || faqDataNonProduct.en; // fallback to English if language not found

        // Generate FAQ items - UPDATED STRUCTURE
        currentFAQs.forEach(faq => {
            faqHTML += `
                <div class="single-faq w-full rounded-lg border border-store-text-secondary bg-store-bg-secondary py-3 px-5">
                    <button class="faq-btn flex justify-between items-center w-full gap-2">
                        <p class="text-base text-store-text-primary rtl:text-right ltr:text-left">
                            ${faq.question}
                        </p>
                        <i class="sicon-keyboard_arrow_down bg-primary text-primary-reverse rounded-full text-base p-[4px]"></i>
                    </button>
                    <div class="faq-content">
                        <p class="py-3 text-sm text-store-text-secondary" style="white-space: pre-line">
                            ${faq.answer}
                        </p>
                        ${faq.link ? `<a href="${faq.link}" class="bg-primary py-1 px-2 rounded text-primary-reverse inline-block text-sm">${faq.linkText}</a>` : ''}
                    </div>
                </div>
            `;
        });

        // Close the container structure
        faqHTML += `
                </div>
            </div>
        `;

        faqDiv.innerHTML = faqHTML;

        // Add click and touch handlers for the FAQ toggles - UPDATED HANDLERS
        faqDiv.querySelectorAll('.faq-btn').forEach(button => {
            // Function to handle both click and touch events
            const toggleFAQ = (event) => {
                // Prevent default behavior (important for touch events)
                event.preventDefault();
                
                const faqItem = button.parentElement;
                const icon = button.querySelector('i');
                const content = faqItem.querySelector('.faq-content');
                
                // Toggle current FAQ
                if (faqItem.classList.contains('open')) {
                    faqItem.classList.remove('open');
                    icon.classList.remove('sicon-keyboard_arrow_up');
                    icon.classList.add('sicon-keyboard_arrow_down');
                } else {
                    faqItem.classList.add('open');
                    icon.classList.remove('sicon-keyboard_arrow_down');
                    icon.classList.add('sicon-keyboard_arrow_up');
                }
                
                // Close other FAQs
                faqDiv.querySelectorAll('.single-faq').forEach(item => {
                    if (item !== faqItem && item.classList.contains('open')) {
                        item.classList.remove('open');
                        const otherIcon = item.querySelector('i');
                        otherIcon.classList.remove('sicon-keyboard_arrow_up');
                        otherIcon.classList.add('sicon-keyboard_arrow_down');
                    }
                });
            };
            
            // Add both click and touch events
            button.addEventListener('click', toggleFAQ);
            button.addEventListener('touchstart', toggleFAQ, {passive: false});
            
            // Make button explicitly clickable/tappable
            button.style.cursor = 'pointer';
            button.setAttribute('role', 'button');
            button.setAttribute('tabindex', '0');
        });

        var targetDiv = document.querySelector('.store-footer');

        if (targetDiv) {
            targetDiv.parentNode.insertBefore(faqDiv, targetDiv);
        } else {
            console.log('footer for faq element not found');
        }
    }

}

/*******************************************************************************************/
/*******************************************************************************************/
/*******************************************************************************************/
/************************************ THANK YOU PAGE ************************************/
/*******************************************************************************************/
/*******************************************************************************************/
/*******************************************************************************************/
if (document.querySelector('.thank-you')) {
    waitForElement('.thanks-item', (ff) => {
        document.querySelector('.thank-you').querySelector('.bg-storeBG').querySelector('nav').remove();
        document.querySelector('.thank-you').querySelector('.bg-storeBG').querySelector('.bg-storeBG').querySelector('h1').style.fontSize = '1.8rem';
        document.querySelector('.thank-you').querySelector('.bg-storeBG').querySelector('.bg-storeBG').querySelector('h1').style.marginTop = '1.5rem';
        document.querySelector('.thank-you').querySelector('.bg-storeBG').querySelector('.bg-storeBG').querySelector('img').parentElement.classList.remove('rtl:-scale-x-100');
        document.querySelector('.thank-you').querySelector('.bg-storeBG').querySelector('.bg-storeBG').querySelector('img').setAttribute('src','https://d17gg5c5d03gu7.cloudfront.net/thank+yu.png');
    });
}

});