{"title":"لوح جداري ثلاثي الأبعاد","description":null,"products":[{"product_id":"sw3005","title":"ألواح جدارية ثلاثية الأبعاد، طراز ديكوروس، 19.7\" × 19.7\"","description":"\u003cdiv style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\" class=\"container\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\" class=\"m__table\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003c!-- بدء صفوف الجدول --\u003e\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم) \u003c\/td\u003e\n\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في كل علبة\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في كل علبة\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eالصق وثبّت - سهل التركيب \n\n\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري زخرفي داخلي وخارجي، مقاوم للماء\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\u003ca style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n \u003c!-- نهاية صفوف الجدول --\u003e\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بدء كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n\n\u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, { minimumValue: '0', maximumValue: '1000', decimalPlaces: 1, modifyValueOnWheel: true });\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n resultDisplay.textContent = `${result} Box`;\n }\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003c!-- تنسيق CSS إضافي --\u003e\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row; \/* Ensures calculator stays on the right side *\/\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n@media (max-width: 480px) {\n .container {\n flex-direction: column; \/* Stack elements vertically on mobile *\/\n gap: 20px;\n }\n}\n\u003c\/style\u003e\n","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح، 27 قدم مربع","offer_id":32574924947541,"sku":"SW5090","price":90.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/37.jpg?v=1776711644"},{"product_id":"sw3008","title":"ألواح جدارية ثلاثية الأبعاد، يونايتد ستايل، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\" class=\"container\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\" class=\"m__table\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003c!-- بدء صفوف الجدول --\u003e\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم) \u003c\/td\u003e\n\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في كل علبة\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في كل علبة\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eالصق وثبّت - سهل التركيب \n\n\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري زخرفي داخلي وخارجي، مقاوم للماء\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\u003ca style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n \u003c!-- نهاية صفوف الجدول --\u003e\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بدء كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n\n\u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, { minimumValue: '0', maximumValue: '1000', decimalPlaces: 1, modifyValueOnWheel: true });\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n resultDisplay.textContent = `${result} Box`;\n }\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003c!-- تنسيق CSS إضافي --\u003e\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row; \/* Ensures calculator stays on the right side *\/\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n@media (max-width: 480px) {\n .container {\n flex-direction: column; \/* Stack elements vertically on mobile *\/\n gap: 20px;\n }\n}\n\u003c\/style\u003e\n","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح، 27 قدم مربع","offer_id":32592650403925,"sku":"SW5022","price":99.0,"currency_code":"CAD","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/6_05764ad2-e2e1-4f7e-9cc6-8c62fa937e84.png?v=1766176305"},{"product_id":"sw5006","title":"ألواح جدارية ثلاثية الأبعاد، طراز عصري، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\" class=\"container\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- Product table here --\u003e\n \u003ctable style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\" class=\"m__table\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003c!-- start Table rows --\u003e\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم) \u003c\/td\u003e\n\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب \n\n\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري زخرفي داخلي وخارجي، مقاوم للماء\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\u003ca style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n \u003c!-- end Table rows --\u003e\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- START Calculator code here --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قم بقياس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قم بقياس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, { minimumValue: '0', maximumValue: '1000', decimalPlaces: 1, modifyValueOnWheel: true });\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n resultDisplay.textContent = `${result} Box`;\n }\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n\n \u003c!-- Calculator code here END --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003c!-- Additional CSS styling --\u003e\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row; \/* Ensures calculator stays on the right side *\/\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n@media (max-width: 480px) {\n .container {\n flex-direction: column; \/* Stack elements vertically on mobile *\/\n gap: 20px;\n }\n}\n\u003c\/style\u003e\n","brand":"10 Panels\/Box","offers":[{"title":"جدار ثلاثي الأبعاد عصري، بولي كلوريد الفينيل، 10 ألواح 27 قدم مربع","offer_id":32592647520341,"sku":"SW5093","price":86.99,"currency_code":"CAD","in_stock":true},{"title":"جدار 3D عصري، PVC، 20 لوحًا 54 قدمًا مربعًا","offer_id":32592648208469,"sku":"SW5093","price":173.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/38.jpg?v=1776711643"},{"product_id":"sw5051","title":"ألواح جدارية ثلاثية الأبعاد، بتصميم مربع، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eغراء ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح، 27 قدم مربع","offer_id":32574916296789,"sku":"SW5051","price":99.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/2ft_15.png?v=1766176097"},{"product_id":"sw5001x-price-per-tile-2-7-sq-ft-19-7-x19-7-each","title":"ألواح جدارية ثلاثية الأبعاد، فضي لامع، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح، 27 قدم مربع","offer_id":32877156565077,"sku":"SW5001xs","price":135.0,"currency_code":"CAD","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/36.jpg?v=1776711485"},{"product_id":"piano","title":"ألواح جدارية ثلاثية الأبعاد، بتصميم بيانو، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n\u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n\u003c!-- جدول المنتجات هنا --\u003e\n\u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n\u003cthead\u003e\n\n\u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n\u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n\u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n\n\u003c\/tr\u003e\n\n\n\u003c\/thead\u003e\n\n\u003ctbody\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eألصق وثبّت - سهل التركيب\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS، IAF، CQC، CNS\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n\u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\u003c\/td\u003e\n\n\n\u003c\/tr\u003e\n\n\n\u003c\/tbody\u003e\n\n\n\u003c\/table\u003e\n\n\n\u003c\/div\u003e\n\n\u003cdiv\u003e\n\n\u003c!-- بدء كود الحاسبة هنا --\u003e \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n\u003cdiv\u003e\n\n\u003cdiv id=\"m_calculator_content\"\u003e\n\n\u003cdiv class=\"m__calculator\"\u003e\n\n\u003cdiv class=\"m__wrap\"\u003e\n\n\u003cdiv class=\"m__section\"\u003e\n\n\u003cdiv class=\"m__row m__head\"\u003e\n\n\u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cdiv class=\"m__row\"\u003e\n\n\u003cdiv class=\"m__label\"\u003eارتفاع الجدار \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e \u003c\/span\u003e\n\n\u003c\/div\u003e\n\n\u003cdiv class=\"m__group\"\u003e\n\n\u003cdiv class=\"group_input\"\u003e\n\n\u003cbutton class=\"m_minus\"\u003e−\u003c\/button\u003e \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e \u003cbutton class=\"m_plus\"\u003e+\u003c\/button\u003e\n\n\u003c\/div\u003e\n\n\u003cdiv class=\"unit_changer\"\u003e\n\n\u003cspan\u003eقدم\u003c\/span\u003e \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cdiv class=\"m__row\"\u003e\n\n\u003cdiv class=\"m__label\"\u003eعرض الجدار \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e \u003c\/span\u003e\n\n\u003c\/div\u003e\n\n\u003cdiv class=\"m__group\"\u003e\n\n\u003cdiv class=\"group_input\"\u003e\n\n\u003cbutton class=\"m_minus\"\u003e−\u003c\/button\u003e \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e \u003cbutton class=\"m_plus\"\u003e+\u003c\/button\u003e\n\n\u003c\/div\u003e\n\n\u003cdiv class=\"unit_changer\"\u003e\n\n\u003cspan\u003eقدم\u003c\/span\u003e \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cdiv class=\"m__row m__result\"\u003e\n\n\u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n\u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e \u003c!-- نهاية كود الحاسبة هنا --\u003e\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (المساحة: 27 قدمًا مربعًا)","offer_id":32808016969813,"sku":"SW5089","price":93.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (المساحة: 54 قدمًا مربعًا)","offer_id":32808017002581,"sku":"SW5089","price":186.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/39.jpg?v=1776711378"},{"product_id":"moon-face-pvc-wall-panels","title":"ألواح جدارية ثلاثية الأبعاد، وجه القمر، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح PVC، 27 قدم مربع","offer_id":40085272035413,"sku":"SW5007","price":98.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/40.jpg?v=1776711090"},{"product_id":"3d-wall-panels-ivory-marble-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، رخام عاجي، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eغراء ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51472156623170,"sku":"SW5010LM","price":106.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51514378355010,"sku":"SW5010LM","price":212.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/7_c941085e-5eef-42f5-84c3-21dc0ead3664.jpg?v=1776711089"},{"product_id":"3d-wall-panels-walnut-brown-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، بني جوزي، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eغراء ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51472354312514,"sku":"SW5010WB","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51472354345282,"sku":"SW5010WB","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/8_3f111d9a-3803-4d55-966f-9ac8d23da96d.jpg?v=1776711089"},{"product_id":"3d-wall-panels-champagne-gold-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، ذهبي شامبين، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51472356835650,"sku":"SW5010CG","price":118.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51472356868418,"sku":"SW5010CG","price":236.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/9.jpg?v=1776711089"},{"product_id":"3d-wall-panels-jazz-black-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، أسود جاز، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eغراء ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51472360276290,"sku":"SW5028JB","price":118.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51472360309058,"sku":"SW5028JB","price":236.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/10.jpg?v=1776710631"},{"product_id":"3d-wall-panels-bluish-ridge-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، بلوش ريدج، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في كل علبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في كل علبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي عدد العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51479894360386,"sku":"SW5028BR","price":118.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51479894393154,"sku":"SW5028BR","price":236.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/11_8a1b700f-7e5c-4d1b-93e3-c427c39202c8.jpg?v=1776710631"},{"product_id":"3d-wall-panels-matte-black-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، ذهبي شامبين، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالخامة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51479911039298,"sku":"SW5007CG","price":118.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51479911072066,"sku":"SW5007CG","price":236.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/6_e29b8e6f-38fa-4011-88b6-c255a5d47a19.jpg?v=1776710631"},{"product_id":"3d-wall-panels-ivory-marble-19-7-x-19-8","title":"ألواح جدارية ثلاثية الأبعاد، رخام عاجي، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51479911989570,"sku":"SW5050LM","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51479912022338,"sku":"SW5050LM","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/12_b15ff2b4-c3c8-4df2-8025-53864511c10e.jpg?v=1776710631"},{"product_id":"3d-wall-panels-walnut-brown-19-7-x-19-8","title":"ألواح جدارية ثلاثية الأبعاد، بني جوزي، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالخامة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480076681538,"sku":"SW5001WB","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480076714306,"sku":"SW5001WB","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/5_a5942d2f-f0e1-4ba2-8d98-ccc30f144d36.jpg?v=1776710630"},{"product_id":"3d-wall-panels-brushed-silver-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، فضي مصقول، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480092934466,"sku":"SW5001BS","price":106.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480092967234,"sku":"SW5001BS","price":212.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/4_ebdcf9d5-fb79-4b80-b228-f06602108dd8.jpg?v=1776710630"},{"product_id":"3d-wall-panels-black-wooden-19-7-x-19-7-copy","title":"ألواح جدارية ثلاثية الأبعاد، خشبية سوداء، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eغراء ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو لم تكن موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480096637250,"sku":"SW5001BW","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480096670018,"sku":"SW5001BW","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/2_1df30733-5fb3-44f7-a641-9226d0c11e98.jpg?v=1776710630"},{"product_id":"3d-wall-panels-gilded-marble-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، رخام مذهّب، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالخامة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480102240578,"sku":"SW5001GM","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480102273346,"sku":"SW5001GM","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/1_ee1072ca-3c89-4d0a-945d-c263f143b707.jpg?v=1776710630"},{"product_id":"3d-wall-panels-red-copper-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، نحاسي أحمر، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480136614210,"sku":"SW5001RC","price":118.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480136646978,"sku":"SW5001RC","price":236.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/3_668112bb-ed3e-4332-8870-40a832a15950.jpg?v=1776710630"},{"product_id":"3d-wall-panels-red-copper-19-7-x-19-8","title":"ألواح جدارية ثلاثية الأبعاد، نحاسي أحمر، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في كل علبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في كل علبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي عدد العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480150245698,"sku":"SW5037RC","price":118.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480150278466,"sku":"SW5037RC","price":236.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/13.jpg?v=1776710630"},{"product_id":"3d-wall-panels-bright-marbling-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، رخامي زاهي، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480166728002,"sku":"SW5037BM","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480166760770,"sku":"SW5037BM","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/14_c1ce3bfa-21f1-4864-91a6-0c6e1fc5f4fd.jpg?v=1776710630"},{"product_id":"3d-wall-panels-light-champagne-gold-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، ذهبي شامبين فاتح، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480212799810,"sku":"SW5002CG","price":106.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480212832578,"sku":"SW5002CG","price":212.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/15.jpg?v=1776710630"},{"product_id":"3d-wall-panels-walnut-brown-19-7-x-19-9","title":"ألواح جدارية ثلاثية الأبعاد، بني جوزي، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480226988354,"sku":"SW5082WB","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480227021122,"sku":"SW5082WB","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/16.jpg?v=1776710629"},{"product_id":"3d-wall-panels-sandy-wood-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، خشب رملي، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480249303362,"sku":"SW5082SW","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480249336130,"sku":"SW5082SW","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/17.jpg?v=1776710629"},{"product_id":"3d-wall-panels-walnut-brown-19-7-x-19-10","title":"ألواح جدارية ثلاثية الأبعاد، بني جوزي، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع) \/ ذهب","offer_id":51480384962882,"sku":"SW5003WB","price":108.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (27 قدم مربع) \/ لا شيء","offer_id":51514709836098,"sku":"SW5003WB","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا) \/ ذهب","offer_id":51480384995650,"sku":"SW5003WB","price":216.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا) \/ لا شيء","offer_id":51514709868866,"sku":"SW5003WB","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/19.jpg?v=1776710629"},{"product_id":"3d-wall-panels-sandy-wood-19-7-x-19-8","title":"ألواح جدارية ثلاثية الأبعاد، خشب رملي، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480394006850,"sku":"SW5003SW","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480394039618,"sku":"SW5003SW","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/18_c9d7bd95-1ed5-4ba2-b2d4-a8a963ba1f14.jpg?v=1776710629"},{"product_id":"3d-wall-panels-walnut-brown-19-7-x-19-11","title":"ألواح جدارية ثلاثية الأبعاد، بني جوزي، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480395219266,"sku":"SW5005WB","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480395252034,"sku":"SW5005WB","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/22_77ffa574-2c2c-4369-8963-67fba0b8d552.jpg?v=1776709723"},{"product_id":"3d-wall-panels-champagne-gold-19-7-x-19-8","title":"ألواح جدارية ثلاثية الأبعاد، ذهبي شامبين، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480405901634,"sku":"SW5005CG","price":118.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480405934402,"sku":"SW5005CG","price":236.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/23.jpg?v=1776709723"},{"product_id":"3d-wall-panels-light-champagne-gold-19-7-x-19-8","title":"ألواح جدارية ثلاثية الأبعاد، ذهبي شامبين فاتح، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالخامة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480409964866,"sku":"SW5006CG","price":106.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480409997634,"sku":"SW5006CG","price":212.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/25.jpg?v=1776709723"},{"product_id":"3d-wall-panels-sandy-wood-19-7-x-19-9","title":"ألواح جدارية ثلاثية الأبعاد، خشب رملي، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالخامة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480412160322,"sku":"SW5006SW","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480412193090,"sku":"SW5006SW","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/26.jpg?v=1776709723"},{"product_id":"3d-wall-panels-oak-wooden-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، خشب بلوط، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480423661890,"sku":"SW5006OW","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480423694658,"sku":"SW5006OW","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/27.jpg?v=1776709723"},{"product_id":"3d-wall-panels-ivory-marble-19-7-x-19-9","title":"ألواح جدارية ثلاثية الأبعاد، رخام عاجي، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480424644930,"sku":"SW5006LM","price":98.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480424677698,"sku":"SW5006LM","price":196.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/28.jpg?v=1776709722"},{"product_id":"3d-wall-panels-bluish-ridge-19-7-x-19-8","title":"ألواح جدارية ثلاثية الأبعاد، سلسلة مائلة للزرقة، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالخامة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو لم تكن موجودة. قم بقياس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480425070914,"sku":"SW5008BR","price":118.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480425103682,"sku":"SW5008BR","price":236.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/20_2ec18c00-e0b7-4c1f-9c28-db72f4f5bd75.png?v=1764538073"},{"product_id":"3d-wall-panels-brushed-silver-19-7-x-19-8","title":"ألواح جدارية ثلاثية الأبعاد، فضي مصقول، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480425693506,"sku":"SW5008BS","price":106.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480425726274,"sku":"SW5008BS","price":212.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/2ft_14.png?v=1764538072"},{"product_id":"3d-wall-panels-light-champagne-gold-19-7-x-19-9","title":"ألواح جدارية ثلاثية الأبعاد، ذهبي شامبين فاتح، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع)","offer_id":51480426119490,"sku":"SW5008CG","price":106.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا)","offer_id":51480426152258,"sku":"SW5008CG","price":212.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/21_2308a78f-8e15-484f-8435-fa25faff0f63.png?v=1764538072"},{"product_id":"3d-wall-panels-matte-white-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، أبيض مطفي، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع) \/ ذهب","offer_id":51480540184898,"sku":"SW5012W","price":133.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (27 قدم مربع) \/ لا شيء","offer_id":51514705674562,"sku":"SW5012W","price":123.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا) \/ ذهب","offer_id":51480540217666,"sku":"SW5012W","price":266.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا) \/ لا شيء","offer_id":51514705707330,"sku":"SW5012W","price":246.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/20.jpg?v=1776709722"},{"product_id":"3d-wall-panels-walnut-brown-19-7-x-19-12","title":"ألواح جدارية ثلاثية الأبعاد، بني جوزي، 19.7\" × 19.7\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع) \/ ذهب","offer_id":51480547983682,"sku":"SW5011WB","price":168.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (27 قدم مربع) \/ لا شيء","offer_id":51621549867330,"sku":"SW5011WB","price":158.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا) \/ ذهب","offer_id":51480548016450,"sku":"SW5011WB","price":336.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا) \/ لا شيء","offer_id":51621549900098,"sku":"SW5011WB","price":316.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/21.jpg?v=1776709722"},{"product_id":"3d-wall-panels-matte-silver-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، فضي مطفي، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع) \/ فضي","offer_id":51480553881922,"sku":"SW5015S","price":170.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (27 قدم مربع) \/ لا شيء","offer_id":51621548097858,"sku":"SW5015S","price":160.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا) \/ فضي","offer_id":51480553914690,"sku":"SW5015S","price":340.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا) \/ لا شيء","offer_id":51621548130626,"sku":"SW5015S","price":320.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/29.jpg?v=1776709722"},{"product_id":"3d-wall-panels-matte-white-hexagon-19-7-x-19-7","title":"ألواح جدارية ثلاثية الأبعاد، سداسية الشكل باللون الأبيض المطفي، 19.7 بوصة × 19.7 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003c!-- جدول المنتج هنا --\u003e\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e19.7 بوصة (طول) × 19.7 بوصة (عرض) × 1 بوصة (عمق)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e27 قدمًا مربعًا في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003c!-- بداية كود الحاسبة هنا --\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 27);\n } else {\n result = Math.ceil((height * width) \/ 3888);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n\n \u003c!-- نهاية كود الحاسبة هنا --\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (27 قدم مربع) \/ ذهب","offer_id":51480554766658,"sku":"SW5016W","price":129.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (27 قدم مربع) \/ فضي","offer_id":51514698891586,"sku":"SW5016W","price":129.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (27 قدم مربع) \/ لا شيء","offer_id":51514698924354,"sku":"SW5016W","price":119.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا) \/ ذهب","offer_id":51480554799426,"sku":"SW5016W","price":258.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا) \/ فضي","offer_id":51514698957122,"sku":"SW5016W","price":258.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (54 قدمًا مربعًا) \/ لا شيء","offer_id":51514698989890,"sku":"SW5016W","price":238.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/35_b3e246f5-1fe7-432d-9463-1924a7e356dd.png?v=1764538071"},{"product_id":"3d-wall-panels-matte-black-19-7-x-19-8","title":"ألواح جدارية ثلاثية الأبعاد، أسود مطفي، 24\" × 24\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e24 بوصة (طول) × 24 بوصة (عرض)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e40 قدم مربع في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قم بقياس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قم بقياس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي عدد العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 40);\n } else {\n result = Math.ceil((height * width) \/ 5760);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (40 قدم مربع) \/ ذهب","offer_id":51480618729794,"sku":"SWX10MB","price":149.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (40 قدم مربع) \/ فضي","offer_id":51514695942466,"sku":"SWX10MB","price":149.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (40 قدم مربع) \/ لا شيء","offer_id":51514695975234,"sku":"SWX10MB","price":139.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا) \/ ذهب","offer_id":51480618762562,"sku":"SWX10MB","price":298.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا) \/ فضي","offer_id":51514696008002,"sku":"SWX10MB","price":298.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا) \/ لا شيء","offer_id":51514696040770,"sku":"SWX10MB","price":278.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/30_c6833b7c-49a5-4d4a-805c-c5b5481337c9.jpg?v=1776709722"},{"product_id":"3d-wall-panels-red-copper-24-x-24","title":"ألواح جدارية ثلاثية الأبعاد، نحاسي أحمر، 24 بوصة × 24 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e24 بوصة (طول) × 24 بوصة (عرض)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e40 قدم مربع في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eالصق وثبّت - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 40);\n } else {\n result = Math.ceil((height * width) \/ 5760);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (40 قدم مربع) \/ ذهب","offer_id":51480625086786,"sku":"SWX10RC","price":166.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (40 قدم مربع) \/ فضي","offer_id":51514694959426,"sku":"SWX10RC","price":166.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (40 قدم مربع) \/ لا شيء","offer_id":51514694992194,"sku":"SWX10RC","price":156.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا) \/ ذهب","offer_id":51480625119554,"sku":"SWX10RC","price":332.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا) \/ فضي","offer_id":51514695024962,"sku":"SWX10RC","price":332.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا) \/ لا شيء","offer_id":51514695057730,"sku":"SWX10RC","price":312.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/31.jpg?v=1776709722"},{"product_id":"3d-wall-panels-walnut-brown-24-x-24","title":"ألواح جدارية ثلاثية الأبعاد، بني جوزي، 24 بوصة × 24 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e24 بوصة (طول) × 24 بوصة (عرض)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e40 قدم مربع في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eالصق وثبّت - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 40);\n } else {\n result = Math.ceil((height * width) \/ 5760);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (40 قدم مربع) \/ ذهب","offer_id":51480630296898,"sku":"SWX11WB","price":166.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (40 قدم مربع) \/ فضي","offer_id":51514692206914,"sku":"SWX11WB","price":166.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (40 قدم مربع) \/ لا شيء","offer_id":51621521719618,"sku":"SWX11WB","price":156.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا) \/ ذهب","offer_id":51480630329666,"sku":"SWX11WB","price":332.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا) \/ فضي","offer_id":51514692239682,"sku":"SWX11WB","price":332.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا) \/ لا شيء","offer_id":51621521752386,"sku":"SWX11WB","price":312.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/32.jpg?v=1776709722"},{"product_id":"3d-wall-panels-matte-black-24-x-24","title":"ألواح جدارية ثلاثية الأبعاد، أسود مطفي، 24\" × 24\"","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e24 بوصة (طول) × 24 بوصة (عرض)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e40 قدم مربع في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eالصق وثبّت - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 40);\n } else {\n result = Math.ceil((height * width) \/ 5760);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (40 قدم مربع) \/ ذهب","offer_id":51480635113794,"sku":"SWX11MB","price":166.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (40 قدم مربع) \/ فضي","offer_id":51514687062338,"sku":"SWX11MB","price":166.0,"currency_code":"CAD","in_stock":true},{"title":"10 ألواح (40 قدم مربع) \/ لا شيء","offer_id":51621520539970,"sku":"SWX11MB","price":156.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا) \/ ذهب","offer_id":51480635146562,"sku":"SWX11MB","price":332.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا) \/ فضي","offer_id":51514687095106,"sku":"SWX11MB","price":332.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا) \/ لا شيء","offer_id":51621520572738,"sku":"SWX11MB","price":312.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/33_4a996252-5318-4bc0-8d94-9e100c03e37d.jpg?v=1776709722"},{"product_id":"3d-wall-panels-champagne-gold-24-x-24","title":"ألواح جدارية ثلاثية الأبعاد، ذهبي شامبين، 24 بوصة × 24 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e24 بوصة (طول) × 24 بوصة (عرض)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e40 قدم مربع في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eصمغ ولصق - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس الارتفاع الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قم بقياس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قم بقياس العرض الإجمالي لجدارك، مع تجاهل أي نوافذ أو أبواب كما لو أنها غير موجودة. قم بقياس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي عدد العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 40);\n } else {\n result = Math.ceil((height * width) \/ 5760);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (40 قدم مربع)","offer_id":51480649498946,"sku":"SWX12CG","price":156.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا)","offer_id":51480649531714,"sku":"SWX12CG","price":312.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/34_dfb893aa-662a-4790-b013-c472eaee85ec.jpg?v=1776708912"},{"product_id":"3d-wall-panels-white-wood-24-x-24","title":"ألواح جدارية ثلاثية الأبعاد، خشب أبيض، 24 × 24 بوصة","description":"\u003cdiv class=\"container\" style=\"display: flex; gap: 20px; align-items: flex-start; justify-content: flex-end;\"\u003e\n\n \u003cdiv class=\"table-container\" style=\"flex: 1;\"\u003e\n\n \u003ctable class=\"m__table\" style=\"width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; border: 1px solid #e6e6e6; margin-top: 1px;\"\u003e\n\n \u003cthead\u003e\n\n \u003ctr style=\"background-color: #ffffff !important; color: #691029 !important; font-weight: bold;\"\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-family: Roboto Condensed, sans-serif; font-size: 14px; color: #691029 !important; border-right: 1px dashed #cccccc; width: 30%;\"\u003eالخاصية\u003c\/th\u003e\n\n \u003cth style=\"padding: 8px; text-align: left; font-size: 14px; color: #691029 !important; width: 70%;\"\u003eالوصف\u003c\/th\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/thead\u003e\n\n \u003ctbody\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمادة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eبلاستيك PVC عالي الجودة. (1.5 مم)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eأبعاد اللوح\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e24 بوصة (طول) × 24 بوصة (عرض)\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eاللون\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eكما هو موضح\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتعبئة\/العلبة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e10 ألواح في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالمساحة الإجمالية\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e40 قدم مربع في العلبة\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالتركيب\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eالصق وثبّت - سهل التركيب\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالشهادات\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eSGS, IAF, CQC, CNS\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr style=\"background-color: #f9f9f9;\"\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eالوظيفة\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003eلوح جداري ديكوري داخلي، مقاوم للماء\u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003ctr\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; border-right: 1px dashed #cccccc; padding: 10px; font-weight: bold; font-family: Roboto Condensed, sans-serif; color: #000000;\"\u003eعنوان الاستلام\u003c\/td\u003e\n\n \u003ctd style=\"border-top: 1px solid #e6e6e6; padding: 6px; color: #000000;\"\u003e\n\n \u003ca href=\"https:\/\/maps.app.goo.gl\/mLuwjkVTf4Ucz2PFA\" style=\"color: #c9994c; text-decoration: none; font-weight: bold;\" target=\"_blank\"\u003e5170 Dixie Rd, Mississauga, ON L4W 1E3\u003c\/a\u003e\n \u003c\/td\u003e\n\n \u003c\/tr\u003e\n\n \u003c\/tbody\u003e\n\n \u003c\/table\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv\u003e\n\n \u003cscript type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/autonumeric@4.5.4\/dist\/autoNumeric.min.js\"\u003e\u003c\/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/tippy.js@6\/dist\/tippy.css\"\u003e\n\n\n \u003cstyle type=\"text\/css\"\u003e\n .m__calculator *,\n .m__calculator ::after,\n .m__calculator ::before {\n box-sizing: border-box\n }\n\n .m__calculator * {\n font-family: inherit;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n [data-tippy-root] *{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 12px;\n }\n\n .m__calculator {\n max-width: 290px;\n background: #ffffff;\n border: 4px solid #691029;\n border-radius: 8px;\n overflow: hidden;\n margin: auto;\n }\n\n .m__calculator .m__row {\n margin: 25px 15px;\n }\n\n .m__calculator .m__row.m__head {\n margin: 0;\n background: #f5f5f5;\n padding: 20px 0;\n border-bottom: 1px solid #ececec;\n }\n\n .m__group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__title {\n font-size: 22px;\n font-weight: 700;\n color: #691029;\n text-align: center;\n font-family: \"Roboto Condensed\", sans-serif;\n }\n\n .m__label {\n font-size: 16px;\n font-family: inherit;\n color: #691029;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .unit_changer {\n background: #691029;\n border: 2px solid #691029;\n color: white;\n height: 40px;\n border-radius: 4px;\n font-size: 14px;\n padding-left: 8px;\n max-width: 70px;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n .m__calculator .m__row.m__result {\n margin: 0;\n padding: 20px;\n text-align: center;\n background: #691029;\n }\n\n .m__calculator .m__row.m__result .m__label {\n color: white;\n font-size: 16px;\n }\n\n .m__calculator .m__row.m__result .m__res {\n font-size: 29px;\n font-family: inherit;\n color: #ffffff;\n font-weight: 700;\n }\n\n .group_input {\n display: flex;\n border: 2px solid #C9994C;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-height: 40px;\n }\n\n .group_input input {\n width: 100%;\n border: 0;\n outline: none;\n font-size: 18px;\n font-family: inherit;\n text-align: center;\n min-height: 36px;\n }\n\n .group_input button {\n background-color: #ffffff;\n color: #535353;\n border: none;\n cursor: pointer;\n font-size: 20px;\n width: 40px;\n height: auto;\n text-align: center;\n transition: background-color 0.2s;\n position: relative;\n }\n\n .group_input button.m_minus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n right: 0;\n }\n\n .group_input button.m_plus:before {\n content: \" \";\n background: #ffe9c8;\n width: 1px;\n height: 24px;\n display: block;\n position: absolute;\n left: 0;\n }\n\n .group_input button:hover {\n background-color: #ffe9c8;\n }\n\n .m__input_number {\n width: 40px;\n text-align: center;\n border: none;\n padding: 8px 10px;\n font-size: 16px;\n outline: none;\n }\n\n .tooltip-btn{\n cursor: pointer;\n }\n \u003c\/style\u003e\n\n \u003cdiv id=\"m_calculator_content\"\u003e\n\n \u003cdiv class=\"m__calculator\"\u003e\n\n \u003cdiv class=\"m__wrap\"\u003e\n\n \u003cdiv class=\"m__section\"\u003e\n\n \u003cdiv class=\"m__row m__head\"\u003e\n\n \u003cdiv class=\"m__title\"\u003eحاسبة ألواح الجدران ثلاثية الأبعاد\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eارتفاع الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس الارتفاع الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو أنها غير موجودة. قس ارتفاع الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Height\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eعرض الجدار\n \u003cspan class=\"tooltip-btn\" data-tippy-content=\"قس العرض الإجمالي لجدارك، متجاهلاً أي نوافذ أو أبواب كما لو أنها غير موجودة. قس عرض الجدار الكامل فقط.\"\u003e\n \u003csvg width=\"14px\" height=\"14px\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.3027 13.3942C10.2316 13.7147 10.5038 14 10.8479 14H13.0406C13.2979 14 13.5151 13.8351 13.6064 13.6061C13.697 13.3789 14.0117 12.9674 14.254 12.7518C14.4827 12.5112 14.7213 12.2848 14.9563 12.0618C15.8824 11.183 16.754 10.356 16.754 8.91047C16.754 6.40301 14.582 5 12.2707 5C10.5038 5 8.06416 5.80604 7.58396 8.50363C7.48716 9.04737 7.94773 9.5 8.50002 9.5H9.91229C10.4388 9.5 10.8312 9.07642 11.0121 8.582C11.1863 8.10604 11.5379 7.7551 12.2707 7.7551C13.6066 7.7551 13.6064 9.22371 12.8346 10.1843C12.5434 10.5467 12.2023 10.8677 11.8648 11.1853C11.1798 11.8298 10.5098 12.4602 10.3027 13.3942ZM13.9999 17C13.9999 18.1046 13.1045 19 11.9999 19C10.8954 19 9.99994 18.1046 9.99994 17C9.99994 15.8954 10.8954 15 11.9999 15C13.1045 15 13.9999 15.8954 13.9999 17Z\" fill=\"#691029\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/span\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"m__group\"\u003e\n\n \u003cdiv class=\"group_input\"\u003e\n\n \u003cbutton class=\"m_minus\" aria-label=\"تقليل\"\u003e−\u003c\/button\u003e\n \u003cinput type=\"text\" class=\"input-box\" value=\"0\" inputmode=\"numeric\" id=\"calc_Width\"\u003e\n \u003cbutton class=\"m_plus\" aria-label=\"زيادة\"\u003e+\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003cdiv class=\"unit_changer\"\u003e\n\n \u003cspan\u003eقدم\u003c\/span\u003e\n \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n \u003cpath stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M8 9l4 -4l4 4\"\u003e\u003c\/path\u003e\n \u003cpath d=\"M16 15l-4 4l-4 -4\"\u003e\u003c\/path\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cdiv class=\"m__row m__result\"\u003e\n\n \u003cdiv class=\"m__label\"\u003eإجمالي العلب التي تحتاجها\u003c\/div\u003e\n\n \u003cdiv class=\"m__res\"\u003e0 علبة\u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n\n\n \u003cscript src=\"https:\/\/unpkg.com\/@popperjs\/core@2\"\u003e\u003c\/script\u003e\n \u003cscript src=\"https:\/\/unpkg.com\/tippy.js@6\"\u003e\u003c\/script\u003e\n \u003cscript type=\"text\/javascript\"\u003e\n document.addEventListener('DOMContentLoaded', function() {\n const inputs = document.querySelectorAll('.input-box'),\n resultDisplay = document.querySelector('.m__res');\n let currentUnit = 'Feet';\n\n const autoNumericFields = Array.from(inputs).map(input =\u003e {\n const anField = new AutoNumeric(input, {\n minimumValue: '0',\n maximumValue: '1000',\n decimalPlaces: 1,\n modifyValueOnWheel: true\n });\n\n const container = input.closest('.group_input'),\n minusBtn = container.querySelector('.m_minus'),\n plusBtn = container.querySelector('.m_plus');\n\n const updateButtons = () =\u003e {\n let value = anField.getNumber();\n minusBtn.disabled = value \u003c= 0;\n plusBtn.disabled = value \u003e= 1000;\n };\n\n minusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n plusBtn.addEventListener('click', () =\u003e {\n anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));\n updateButtons();\n calculateResult();\n });\n\n input.addEventListener('input', () =\u003e {\n updateButtons();\n calculateResult();\n });\n\n return anField;\n });\n\n document.querySelectorAll('.unit_changer').forEach(changer =\u003e {\n changer.addEventListener('click', () =\u003e {\n currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';\n document.querySelectorAll('.unit_changer span').forEach(span =\u003e span.textContent = currentUnit);\n\n autoNumericFields.forEach(anField =\u003e {\n let value = anField.getNumber();\n anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value \/ 12).toFixed(1));\n });\n\n calculateResult();\n });\n });\n\n function calculateResult() {\n const height = parseFloat(document.getElementById('calc_Height').value) || 0,\n width = parseFloat(document.getElementById('calc_Width').value) || 0;\n\n let result = 0;\n if (currentUnit === 'Feet') {\n result = Math.ceil((height * width) \/ 40);\n } else {\n result = Math.ceil((height * width) \/ 5760);\n }\n\n resultDisplay.textContent = `${result} Box`;\n }\n\n calculateResult();\n tippy('.tooltip-btn');\n });\n \u003c\/script\u003e\n \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.container {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n flex-direction: row;\n}\n\n.table-container {\n flex: 1;\n}\n\n.m__calculator {\n max-width: 290px;\n}\n\n@media (max-width: 480px) {\n .container {\n flex-direction: column;\n gap: 20px;\n }\n}\n\u003c\/style\u003e","brand":"10 Panels\/Box","offers":[{"title":"10 ألواح (40 قدم مربع)","offer_id":51480651006274,"sku":"SWX14WW","price":156.0,"currency_code":"CAD","in_stock":true},{"title":"20 لوحًا (80 قدمًا مربعًا)","offer_id":51480651039042,"sku":"SWX14WW","price":312.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0021\/6973\/3173\/files\/35.jpg?v=1776708912"}],"url":"https:\/\/swancanada.ca\/ar\/collections\/3d-wall-panel.oembed","provider":"Swan Canada","version":"1.0","type":"link"}