{"product_id":"ottawa-corner-sofa","title":"Ottawa Corner Sofa","description":"\u003cbody\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"\u003e\n    \u003ctitle\u003eDiscover the Ottawa Corner Sofa Set\u003c\/title\u003e\n    \u003cscript src=\"https:\/\/cdn.tailwindcss.com\"\u003e\u003c\/script\u003e\n    \n    \u003cstyle\u003e\n        \/* Animations *\/\n        @keyframes popIn {\n            0% { opacity: 0; transform: scale(0.5) translateY(10px); }\n            70% { transform: scale(1.1); }\n            100% { opacity: 1; transform: scale(1) translateY(0); }\n        }\n        \n        @keyframes slideInDrop {\n            0% { opacity: 0; transform: translateY(-20px) scale(0.95); }\n            70% { transform: translateY(2px) scale(1.01); }\n            100% { opacity: 1; transform: translateY(0) scale(1); }\n        }\n\n        .animate-pop-1 { animation: popIn 0.6s ease-out 0.3s forwards; opacity: 0; }\n        .animate-pop-2 { animation: popIn 0.6s ease-out 0.6s forwards; opacity: 0; }\n        .animate-pop-3 { animation: popIn 0.6s ease-out 0.9s forwards; opacity: 0; }\n        .animate-pop-4 { animation: popIn 0.6s ease-out 1.2s forwards; opacity: 0; }\n        \n        .module-enter {\n            animation: slideInDrop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\n            opacity: 0;\n        }\n\n        \/* Shopify Theme Protection *\/\n        .bosna-container * { box-sizing: border-box !important; }\n        .bosna-container p, .bosna-container h1, .bosna-container h2, .bosna-container h3, .bosna-container h4, .bosna-container span {\n            margin: 0 !important; padding: 0 !important; line-height: normal !important;\n        }\n        .bosna-container svg { display: block !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; }\n        .bosna-container .flex-center { display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: row !important; }\n        .bosna-container .bubble-text { display: flex !important; align-items: center !important; line-height: 1 !important; white-space: nowrap !important; margin-top: 2px !important; }\n        .bosna-container .feature-title { font-weight: 600 !important; line-height: 1.2 !important; margin-bottom: 4px !important; }\n        .bosna-container .feature-desc { line-height: 1.4 !important; white-space: normal !important; color: #6b7280 !important; }\n        \n        \/* Button Protection *\/\n        .bosna-container .qty-btn {\n            display: flex !important; align-items: center !important; justify-content: center !important;\n            width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important;\n            padding: 0 !important; margin: 0 !important; border: 1px solid #e5e7eb !important; border-radius: 50% !important; background-color: white !important; flex-shrink: 0 !important; aspect-ratio: 1 \/ 1 !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; cursor: pointer; transition: all 0.2s;\n        }\n        .bosna-container .qty-btn:active { transform: scale(0.9); }\n        .bosna-container .qty-btn svg { width: 16px !important; height: 16px !important; margin: auto !important; display: block !important; }\n\n        \/* Blueprint Scale Grid Background *\/\n        .premium-floor-bg {\n            background-color: transparent;\n            background-image: \n                linear-gradient(rgba(148, 163, 184, 0.4) 1px, transparent 1px),\n                linear-gradient(90deg, rgba(148, 163, 184, 0.4) 1px, transparent 1px);\n            background-size: 20px 20px; \n            background-position: 0 0;\n        }\n\n        \/* 2D Beautiful Sofa Module Styles *\/\n        .sofa-module {\n            position: absolute !important;\n            display: block !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            box-sizing: border-box !important;\n            box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1), 0 2px 5px -1px rgba(0,0,0,0.06) !important;\n            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;\n            overflow: hidden !important;\n            cursor: pointer !important;\n            -webkit-font-smoothing: antialiased !important;\n            -moz-osx-font-smoothing: grayscale !important;\n            transform: translateZ(0);\n        }\n        .sofa-module:hover {\n            transform: translateY(-6px) scale(1.02) translateZ(0) !important;\n            box-shadow: 0 15px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1) !important;\n            z-index: 60 !important;\n        }\n\n        .mod-part {\n            position: absolute !important;\n            display: block !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            box-sizing: border-box !important;\n            z-index: 10 !important;\n        }\n        \n        .mod-cushion-flex {\n            position: absolute !important;\n            display: flex !important;\n            align-items: center !important;\n            justify-content: center !important;\n            text-align: center !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            box-sizing: border-box !important;\n            z-index: 20 !important;\n        }\n\n        .mod-badge {\n            background: #ffffff !important;\n            padding: 4px 8px !important;\n            border-radius: 6px !important;\n            font-size: 10px !important;\n            font-weight: 800 !important;\n            color: #1e293b !important;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;\n            border: 1px solid rgba(0,0,0,0.05) !important;\n            pointer-events: none !important;\n            white-space: pre-wrap !important;\n            line-height: 1.2 !important;\n            max-width: 90% !important;\n            -webkit-font-smoothing: antialiased !important;\n            -moz-osx-font-smoothing: grayscale !important;\n            text-rendering: optimizeLegibility !important;\n            backface-visibility: hidden !important;\n            margin: 0 auto !important;\n            display: inline-block !important;\n        }\n        \n        .rot-text {\n            transform: rotate(-90deg) !important;\n        }\n        \n        .no-scrollbar::-webkit-scrollbar { display: none; }\n        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n    \u003c\/style\u003e\n\n    \u003cdiv class=\"hidden bg-indigo-200 border-indigo-400 text-indigo-900 bg-blue-300 border-blue-500 bg-blue-100 border-blue-300 bg-indigo-300 border-indigo-500 bg-indigo-50 border-indigo-300 bg-pink-100 border-pink-400 text-pink-900 text-gray-800 bg-emerald-100 border-emerald-400 text-emerald-900 bg-amber-100 border-amber-400 text-amber-900 bg-fuchsia-100 border-fuchsia-400 text-fuchsia-900 scale-95 opacity-30 shadow-2xl z-10 z-20 z-[50] z-[100] border-blue-600 border-blue-400 border-indigo-600 border-indigo-400\"\u003e\u003c\/div\u003e\n\n    \u003cdiv class=\"bosna-container flex flex-col w-full bg-white overflow-hidden box-border max-w-4xl mx-auto shadow-sm relative\"\u003e\n        \n        \u003c!-- LANGUAGE SELECTOR --\u003e\n        \u003cdiv class=\"w-full bg-white border-b border-gray-100 py-3 flex justify-center items-center z-20 relative px-4\"\u003e\n            \u003cdiv class=\"flex items-center gap-4 sm:gap-6 bg-gray-50 px-5 py-2.5 rounded-full border border-gray-200 shadow-sm overflow-x-auto no-scrollbar max-w-full\"\u003e\n                \u003cbutton data-lang=\"en\" class=\"lang-btn flex-shrink-0 flex items-center gap-2 text-[15px] sm:text-[16px] transition-all duration-300 transform scale-110 opacity-100 drop-shadow-md focus:outline-none font-semibold text-gray-800\" title=\"English\"\u003e\n                    \u003cimg src=\"https:\/\/flagcdn.com\/w20\/gb.png\" srcset=\"https:\/\/flagcdn.com\/w40\/gb.png 2x\" width=\"20\" alt=\"English\" class=\"rounded-[2px] shadow-sm\"\u003e English\n                \u003c\/button\u003e\n                \u003cbutton data-lang=\"de\" class=\"lang-btn flex-shrink-0 flex items-center gap-2 text-[15px] sm:text-[16px] transition-all duration-300 transform hover:scale-110 opacity-40 hover:opacity-80 focus:outline-none font-semibold text-gray-800\" title=\"Deutsch\"\u003e\n                    \u003cimg src=\"https:\/\/flagcdn.com\/w20\/de.png\" srcset=\"https:\/\/flagcdn.com\/w40\/de.png 2x\" width=\"20\" alt=\"Deutsch\" class=\"rounded-[2px] shadow-sm\"\u003e Deutsch\n                \u003c\/button\u003e\n                \u003cbutton data-lang=\"fr\" class=\"lang-btn flex-shrink-0 flex items-center gap-2 text-[15px] sm:text-[16px] transition-all duration-300 transform hover:scale-110 opacity-40 hover:opacity-80 focus:outline-none font-semibold text-gray-800\" title=\"Français\"\u003e\n                    \u003cimg src=\"https:\/\/flagcdn.com\/w20\/fr.png\" srcset=\"https:\/\/flagcdn.com\/w40\/fr.png 2x\" width=\"20\" alt=\"Français\" class=\"rounded-[2px] shadow-sm\"\u003e Français\n                \u003c\/button\u003e\n                \u003cbutton data-lang=\"tr\" class=\"lang-btn flex-shrink-0 flex items-center gap-2 text-[15px] sm:text-[16px] transition-all duration-300 transform hover:scale-110 opacity-40 hover:opacity-80 focus:outline-none font-semibold text-gray-800\" title=\"Türkçe\"\u003e\n                    \u003cimg src=\"https:\/\/flagcdn.com\/w20\/tr.png\" srcset=\"https:\/\/flagcdn.com\/w40\/tr.png 2x\" width=\"20\" alt=\"Türkçe\" class=\"rounded-[2px] shadow-sm\"\u003e Türkçe\n                \u003c\/button\u003e\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- DEFAULT SET BANNER --\u003e\n        \u003cdiv class=\"w-full bg-indigo-50\/80 border-b border-indigo-100 py-2.5 px-4 text-center z-10 relative shadow-sm flex items-center justify-center gap-2\"\u003e\n            \u003csvg class=\"w-5 h-5 text-indigo-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n            \u003cspan class=\"text-indigo-800 font-semibold text-[13px] sm:text-[15px] tracking-tight\" data-i18n=\"default_set_note\"\u003eStandard Set: 310x310 cm Corner Sofa\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- DIMENSIONS SECTION --\u003e\n        \u003cdiv class=\"w-full p-4 sm:p-8 bg-white border-b border-gray-100\"\u003e\n            \u003cdiv class=\"flex items-center mb-6\"\u003e\n                \u003csvg class=\"w-6 h-6 mr-3 text-gray-900 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                \u003cdiv class=\"flex flex-col\"\u003e\n                    \u003ch2 class=\"text-2xl sm:text-3xl font-semibold tracking-tight\" style=\"margin: 0 !important;\" data-i18n=\"dimensions_title\"\u003eProduct Dimensions\u003c\/h2\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003c!-- MAIN IMAGE (CORNER SOFA) --\u003e\n            \u003cdiv class=\"relative w-full rounded-2xl overflow-hidden shadow-lg border border-gray-200 bg-gray-100 mb-6 mt-4\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0713\/7640\/4712\/files\/CCF4C1A8-6BE0-4C7F-BB58-E3F3F7882C39.jpg?v=1775939689\" alt=\"Ottawa Corner Dimensions\" class=\"w-full h-auto object-cover block\"\u003e\n                \u003cdiv class=\"absolute bottom-3 right-3 sm:bottom-6 sm:right-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max animate-pop-1\" style=\"gap: 6px;\"\u003e\n                    \u003csvg class=\"w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"width\"\u003eW\u003c\/span\u003e: \u003cspan class=\"ml-1\"\u003e310x310 cm\u003c\/span\u003e\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cdiv class=\"absolute top-3 right-3 sm:top-6 sm:right-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max animate-pop-2\"\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"depth\"\u003eD\u003c\/span\u003e: 105 cm\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cdiv class=\"absolute top-3 left-3 sm:top-6 sm:left-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max animate-pop-3\" style=\"gap: 6px;\"\u003e\n                    \u003csvg class=\"w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4-4l-4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"height\"\u003eH\u003c\/span\u003e: 75 cm\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003c!-- 3-SEATER IMAGE --\u003e\n            \u003ch3 class=\"font-semibold text-gray-900 text-xl sm:text-2xl ml-1\" data-i18n=\"three_dim_title\" style=\"margin-bottom: 16px !important; margin-top: 32px !important;\"\u003e3-Seater Dimensions\u003c\/h3\u003e\n            \u003cdiv class=\"relative w-full rounded-2xl overflow-hidden shadow-lg border border-gray-200 bg-gray-100 mb-6 mt-4\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0713\/7640\/4712\/files\/D73F9809-3702-42FA-A24F-55C5FB41189A.jpg?v=1775940037\" alt=\"Ottawa 3-Seater Dimensions\" class=\"w-full h-auto object-cover block\"\u003e\n                \u003cdiv class=\"absolute bottom-3 right-3 sm:bottom-6 sm:right-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max animate-pop-1\" style=\"gap: 6px;\"\u003e\n                    \u003csvg class=\"w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"width\"\u003eW\u003c\/span\u003e: \u003cspan class=\"ml-1\"\u003e240 cm\u003c\/span\u003e\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cdiv class=\"absolute top-3 right-3 sm:top-6 sm:right-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max animate-pop-2\"\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"depth\"\u003eD\u003c\/span\u003e: 105 cm\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cdiv class=\"absolute top-3 left-3 sm:top-6 sm:left-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max animate-pop-3\" style=\"gap: 6px;\"\u003e\n                    \u003csvg class=\"w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4-4l-4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"height\"\u003eH\u003c\/span\u003e: 75 cm\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003c!-- ARMCHAIR IMAGE --\u003e\n            \u003ch3 class=\"font-semibold text-gray-900 text-xl sm:text-2xl ml-1\" data-i18n=\"armchair_dim_title\" style=\"margin-bottom: 16px !important; margin-top: 32px !important;\"\u003eArmchair Dimensions\u003c\/h3\u003e\n            \u003cdiv class=\"relative w-full rounded-2xl overflow-hidden shadow-lg border border-gray-200 bg-gray-100 mb-2 mt-4\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0713\/7640\/4712\/files\/F3924378-D526-412F-A119-4D393B4869B2.jpg?v=1775940037\" alt=\"Ottawa Armchair Dimensions\" class=\"w-full h-auto object-cover block\"\u003e\n                \u003cdiv class=\"absolute bottom-4 sm:bottom-6 left-1\/2 transform -translate-x-1\/2 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max z-10 animate-pop-1\" style=\"gap: 6px;\"\u003e\n                    \u003csvg class=\"w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"width\"\u003eW\u003c\/span\u003e: 105 cm\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cdiv class=\"absolute top-4 sm:top-6 right-4 sm:right-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max z-10 animate-pop-2\"\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"depth\"\u003eD\u003c\/span\u003e: 90 cm\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cdiv class=\"absolute top-4 sm:top-6 left-4 sm:left-6 bg-white\/95 backdrop-blur-sm text-gray-900 font-bold px-3 py-1.5 sm:px-4 sm:py-2 rounded-full shadow-md text-[12px] sm:text-sm border border-gray-200 flex-center w-max z-10 animate-pop-3\" style=\"gap: 6px;\"\u003e\n                    \u003csvg class=\"w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4-4l-4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"bubble-text\"\u003e\u003cspan data-i18n=\"height\"\u003eH\u003c\/span\u003e: 73 cm\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- FEATURES \u0026 FABRIC --\u003e\n        \u003cdiv class=\"w-full flex flex-col justify-center p-6 sm:p-8 bg-white border-b border-gray-100\"\u003e\n            \u003ch1 class=\"text-3xl md:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight\" data-i18n=\"title\" style=\"margin-bottom: 32px !important;\"\u003e\n                Discover the Ottawa Corner Sofa Set\n            \u003c\/h1\u003e\n            \n            \u003cdiv class=\"flex flex-col mb-8\" style=\"gap: 24px;\"\u003e\n                \u003c!-- Frame --\u003e\n                \u003cdiv class=\"flex flex-row items-start w-full\" style=\"gap: 16px;\"\u003e\n                    \u003cdiv class=\"bg-amber-50 text-amber-600 p-2.5 rounded-lg flex-center\"\u003e\u003csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-col w-full justify-center pt-0.5\"\u003e\n                        \u003ch4 class=\"text-gray-900 feature-title\" data-i18n=\"feat_frame_title\"\u003eFrame Feature\u003c\/h4\u003e\n                        \u003cp class=\"feature-desc\" data-i18n=\"feat_frame_desc\"\u003eKiln dried beech wood and plywood.\u003c\/p\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n                \u003c!-- Fabric --\u003e\n                \u003cdiv class=\"flex flex-row items-start w-full\" style=\"gap: 16px;\"\u003e\n                    \u003cdiv class=\"bg-rose-50 text-rose-600 p-2.5 rounded-lg flex-center\"\u003e\u003csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-col w-full justify-center pt-0.5\"\u003e\n                        \u003ch4 class=\"text-gray-900 feature-title\" data-i18n=\"feat_fabric_title\"\u003eFabric Feature\u003c\/h4\u003e\n                        \u003cp class=\"feature-desc\" data-i18n=\"feat_fabric_desc\"\u003eEasy clean knitted fabric.\u003c\/p\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n                \u003c!-- Sponge --\u003e\n                \u003cdiv class=\"flex flex-row items-start w-full\" style=\"gap: 16px;\"\u003e\n                    \u003cdiv class=\"bg-emerald-50 text-emerald-600 p-2.5 rounded-lg flex-center\"\u003e\u003csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-col w-full justify-center pt-0.5\"\u003e\n                        \u003ch4 class=\"text-gray-900 feature-title\" data-i18n=\"feat_foam_title\"\u003eSponge\u003c\/h4\u003e\n                        \u003cp class=\"feature-desc\" data-i18n=\"feat_foam_desc\"\u003eSeat: 35 HR Foam.\u003c\/p\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n                \u003c!-- Bed Mechanism --\u003e\n                \u003cdiv class=\"flex flex-row items-start w-full\" style=\"gap: 16px;\"\u003e\n                    \u003cdiv class=\"bg-purple-50 text-purple-600 p-2.5 rounded-lg flex-center\"\u003e\u003csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-col w-full justify-center pt-0.5\"\u003e\n                        \u003ch4 class=\"text-gray-900 feature-title\" data-i18n=\"feat_bed_title\"\u003eBed Mechanism\u003c\/h4\u003e\n                        \u003cp class=\"feature-desc\" data-i18n=\"feat_bed_desc\"\u003eCan become a single bed with the back mechanism.\u003c\/p\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003ca href=\"https:\/\/ozucler.com\/pages\/kumas-secenekleri\" target=\"_blank\" class=\"flex flex-row items-center justify-between px-5 sm:px-6 py-4 bg-gray-100 hover:bg-gray-200 active:scale-95 text-gray-900 rounded-2xl transition-all duration-200 w-full shadow-sm border border-gray-200\/50\" style=\"text-decoration: none !important;\"\u003e\n                \u003cdiv class=\"flex-center\" style=\"gap: 12px;\"\u003e\n                    \u003csvg class=\"w-5 h-5 sm:w-6 sm:h-6 text-gray-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan data-i18n=\"fabric_btn\" class=\"font-medium text-[15px] sm:text-lg bubble-text\"\u003eFabric Options\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003csvg class=\"w-4 h-4 sm:w-5 sm:h-5 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n            \u003c\/a\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- 360 VISUAL SET BUILDER --\u003e\n        \u003cdiv class=\"w-full bg-white p-6 sm:p-8 border-b border-gray-200\"\u003e\n            \u003ch2 class=\"text-2xl sm:text-3xl font-bold text-gray-900 mb-4\" data-i18n=\"build_set_title\" style=\"margin: 0 !important;\"\u003eBuild Your Custom Corner\u003c\/h2\u003e\n            \n            \u003cdiv class=\"flex flex-col sm:flex-row items-center justify-between bg-white border border-gray-200 rounded-2xl p-4 sm:p-5 mb-6 shadow-sm gap-4\"\u003e\n                \u003cdiv class=\"flex items-center gap-3 text-gray-600\"\u003e\n                    \u003csvg class=\"w-6 h-6 sm:w-8 sm:h-8 flex-shrink-0 text-indigo-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"text-[14px] sm:text-base font-medium leading-tight\" data-i18n=\"reset_note\" style=\"margin: 0 !important;\"\u003eStart by adding a Corner for an L-shape, or build a straight sofa directly.\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cbutton onclick=\"resetLayout()\" class=\"w-full sm:w-auto text-sm sm:text-base font-bold text-gray-700 bg-gray-100 hover:bg-gray-200 px-5 py-2.5 sm:px-6 sm:py-3 rounded-xl transition-colors flex items-center justify-center gap-2 border border-gray-200 active:scale-95 flex-shrink-0\"\u003e\n                    \u003csvg class=\"w-4 h-4 sm:w-5 sm:h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan data-i18n=\"reset_btn\"\u003eStart from Scratch\u003c\/span\u003e\n                \u003c\/button\u003e\n            \u003c\/div\u003e\n            \n            \u003c!-- THE NEW 2D CANVAS AREA --\u003e\n            \u003cdiv id=\"visualizer-container\" class=\"relative w-full h-[450px] sm:h-[550px] border border-gray-200 rounded-2xl overflow-hidden shadow-inner flex flex-col items-center justify-center bg-[#f8fafc]\"\u003e\n                \n                \u003c!-- Architectural Top Badge --\u003e\n                \u003cdiv class=\"absolute top-4 left-4 bg-white\/90 backdrop-blur px-3 py-1.5 rounded-lg shadow-sm border border-gray-200 flex items-center gap-2 z-40 pointer-events-none\"\u003e\n                    \u003cdiv class=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\"\u003e\u003c\/div\u003e\n                    \u003cspan class=\"text-[11px] font-bold text-gray-700 uppercase tracking-wider\" data-i18n=\"top_view_badge\"\u003eLIVE PLAN\u003c\/span\u003e\n                \u003c\/div\u003e\n\n                \u003cdiv class=\"absolute top-4 right-4 bg-white\/90 backdrop-blur px-3 py-1.5 rounded-lg shadow-sm border border-gray-200 flex items-center gap-2 z-40 pointer-events-none\"\u003e\n                    \u003csvg class=\"w-3 h-3 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003cspan class=\"text-[11px] font-bold text-gray-600 uppercase tracking-wider\" data-i18n=\"scale_indicator\"\u003e1 GRID = 20 CM\u003c\/span\u003e\n                \u003c\/div\u003e\n\n                \u003c!-- 2D Canvas Area with Grid Background --\u003e\n                \u003cdiv id=\"draw-area\" class=\"w-full h-full relative overflow-hidden\"\u003e\n                    \u003cdiv id=\"sofa-canvas\" class=\"absolute top-1\/2 left-1\/2 transition-transform duration-500 ease-out premium-floor-bg\"\u003e\n                        \u003c!-- JS injects modular sofa --\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n\n                \u003cdiv class=\"absolute bottom-4 left-4 right-4 z-[50] flex flex-row justify-between items-end pointer-events-none\"\u003e\n                    \u003cdiv class=\"bg-white\/95 backdrop-blur-sm px-4 py-2 sm:px-5 sm:py-3 rounded-xl shadow-md border border-gray-200 flex flex-col pointer-events-auto\"\u003e\n                        \u003cspan class=\"text-[10px] sm:text-xs text-gray-500 uppercase tracking-widest font-bold\" data-i18n=\"config_label\"\u003eConfig\u003c\/span\u003e\n                        \u003cspan id=\"vis-dims\" class=\"font-black text-gray-800 text-base sm:text-lg tracking-tight\"\u003e\u003c\/span\u003e\n                    \u003c\/div\u003e\n                    \u003cdiv class=\"bg-red-600 px-4 py-2 sm:px-5 sm:py-3 rounded-xl shadow-md border border-red-700 flex flex-col items-end pointer-events-auto\"\u003e\n                        \u003cspan class=\"text-[10px] sm:text-xs text-red-100 uppercase tracking-widest font-bold\" data-i18n=\"total_price_label\"\u003eTotal Price\u003c\/span\u003e\n                        \u003cspan id=\"vis-price\" class=\"font-black text-white text-lg sm:text-xl tracking-tight\"\u003e€0\u003c\/span\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- MODULE LIST --\u003e\n        \u003cdiv class=\"w-full bg-gray-50 p-6 sm:p-8\"\u003e\n            \u003cdiv class=\"flex flex-col sm:flex-row sm:items-center justify-between mb-4\" style=\"gap: 8px;\"\u003e\n                \u003ch2 class=\"text-2xl sm:text-3xl font-bold text-gray-900\" data-i18n=\"build_set_title\" style=\"margin: 0 !important;\"\u003eBuild Your Custom Corner\u003c\/h2\u003e\n                \u003cdiv class=\"bg-indigo-100 text-indigo-700 px-3 py-1.5 rounded-lg text-sm font-semibold border border-indigo-200 w-max flex items-center gap-2\"\u003e\n                    \u003cspan data-i18n=\"config_label\"\u003eConfig:\u003c\/span\u003e \u003cspan id=\"summary-width\"\u003e\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003c!-- TABS FOR CUSTOM SOFAS (Injected by JS) --\u003e\n            \u003cdiv id=\"tabs-container\" class=\"flex flex-row items-center gap-2 mb-2 mt-4 overflow-x-auto no-scrollbar pb-2\"\u003e\n                \u003c!-- JS auto-populates tabs here --\u003e\n            \u003c\/div\u003e\n\n            \u003c!-- CORNER REQUIRED NOTE --\u003e\n            \u003cdiv class=\"bg-blue-50\/80 border border-blue-200 text-blue-700 px-4 py-3 rounded-xl mb-6 mt-4 text-sm font-medium flex items-start gap-3 shadow-sm\"\u003e\n                \u003csvg class=\"w-5 h-5 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                \u003cspan data-i18n=\"corner_note\"\u003eNote: You can add side modules to a corner, or build a straight sofa by removing the corner.\u003c\/span\u003e\n            \u003c\/div\u003e\n\n            \u003c!-- SET MODULES GRID --\u003e\n            \u003cdiv class=\"grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4 mt-2\"\u003e\n                \n                \u003c!-- Corner Module --\u003e\n                \u003cdiv class=\"flex flex-row items-center justify-between bg-indigo-50\/50 px-4 py-3 sm:px-5 sm:py-4 rounded-xl shadow-sm border border-indigo-100\" style=\"gap: 8px;\"\u003e\n                    \u003cdiv class=\"flex flex-col flex-1 min-w-0\"\u003e\n                        \u003ch3 class=\"text-[14px] sm:text-base font-bold text-indigo-900 feature-title truncate\" data-i18n=\"mod_corner115\" style=\"margin: 0 !important; padding: 0 !important;\"\u003e115x115cm Corner Mod.\u003c\/h3\u003e\n                        \u003cp class=\"text-indigo-500 text-[12px] sm:text-sm font-medium feature-desc truncate\" data-i18n=\"mod_corner115_price\" style=\"margin: 2px 0 0 0 !important; padding: 0 !important;\"\u003e€700 \/ each\u003c\/p\u003e\n                    \u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-row items-center bg-white rounded-full p-1 border border-indigo-200 flex-shrink-0\" style=\"gap: 6px;\"\u003e\n                        \u003cbutton onclick=\"handleRemoveModule('corner115')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 12H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                        \u003cspan id=\"cnt-corner115\" class=\"font-bold text-indigo-900 text-lg flex-center\" style=\"width: 20px; line-height: 1 !important;\"\u003e1\u003c\/span\u003e\n                        \u003cbutton onclick=\"handleAddModule('corner115')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n\n                \u003c!-- 115cm Arm Module --\u003e\n                \u003cdiv class=\"flex flex-row items-center justify-between bg-white px-4 py-3 sm:px-5 sm:py-4 rounded-xl shadow-sm border border-gray-100\" style=\"gap: 8px;\"\u003e\n                    \u003cdiv class=\"flex flex-col flex-1 min-w-0\"\u003e\n                        \u003ch3 class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title truncate\" data-i18n=\"mod_arm115\" style=\"margin: 0 !important; padding: 0 !important;\"\u003e115cm Arm Module\u003c\/h3\u003e\n                        \u003cp class=\"text-gray-500 text-[12px] sm:text-sm font-medium feature-desc truncate\" data-i18n=\"mod_arm115_price\" style=\"margin: 2px 0 0 0 !important; padding: 0 !important;\"\u003e€550 \/ each\u003c\/p\u003e\n                    \u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-row items-center bg-gray-50 rounded-full p-1 border border-gray-200 flex-shrink-0\" style=\"gap: 6px;\"\u003e\n                        \u003cbutton onclick=\"handleRemoveModule('arm115')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 12H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                        \u003cspan id=\"cnt-arm115\" class=\"font-bold text-gray-900 text-lg flex-center\" style=\"width: 20px; line-height: 1 !important;\"\u003e2\u003c\/span\u003e\n                        \u003cbutton onclick=\"handleAddModule('arm115')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n\n                \u003c!-- 120cm Arm Module --\u003e\n                \u003cdiv class=\"flex flex-row items-center justify-between bg-white px-4 py-3 sm:px-5 sm:py-4 rounded-xl shadow-sm border border-gray-100\" style=\"gap: 8px;\"\u003e\n                    \u003cdiv class=\"flex flex-col flex-1 min-w-0\"\u003e\n                        \u003ch3 class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title truncate\" data-i18n=\"mod_arm120\" style=\"margin: 0 !important; padding: 0 !important;\"\u003e120cm Arm Module\u003c\/h3\u003e\n                        \u003cp class=\"text-gray-500 text-[12px] sm:text-sm font-medium feature-desc truncate\" data-i18n=\"mod_arm120_price\" style=\"margin: 2px 0 0 0 !important; padding: 0 !important;\"\u003e€550 \/ each\u003c\/p\u003e\n                    \u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-row items-center bg-gray-50 rounded-full p-1 border border-gray-200 flex-shrink-0\" style=\"gap: 6px;\"\u003e\n                        \u003cbutton onclick=\"handleRemoveModule('arm120')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 12H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                        \u003cspan id=\"cnt-arm120\" class=\"font-bold text-gray-900 text-lg flex-center\" style=\"width: 20px; line-height: 1 !important;\"\u003e0\u003c\/span\u003e\n                        \u003cbutton onclick=\"handleAddModule('arm120')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n                \n                \u003c!-- 60cm Middle Module --\u003e\n                \u003cdiv class=\"flex flex-row items-center justify-between bg-white px-4 py-3 sm:px-5 sm:py-4 rounded-xl shadow-sm border border-gray-100\" style=\"gap: 8px;\"\u003e\n                    \u003cdiv class=\"flex flex-col flex-1 min-w-0\"\u003e\n                        \u003ch3 class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title truncate\" data-i18n=\"mod_mid60\" style=\"margin: 0 !important; padding: 0 !important;\"\u003e60cm Middle Module\u003c\/h3\u003e\n                        \u003cp class=\"text-gray-500 text-[12px] sm:text-sm font-medium feature-desc truncate\" data-i18n=\"mod_mid60_price\" style=\"margin: 2px 0 0 0 !important; padding: 0 !important;\"\u003e€450 \/ each\u003c\/p\u003e\n                    \u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-row items-center bg-gray-50 rounded-full p-1 border border-gray-200 flex-shrink-0\" style=\"gap: 6px;\"\u003e\n                        \u003cbutton onclick=\"handleRemoveModule('mid60')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 12H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                        \u003cspan id=\"cnt-mid60\" class=\"font-bold text-gray-900 text-lg flex-center\" style=\"width: 20px; line-height: 1 !important;\"\u003e0\u003c\/span\u003e\n                        \u003cbutton onclick=\"handleAddModule('mid60')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n\n                \u003c!-- 80cm Middle Module --\u003e\n                \u003cdiv class=\"flex flex-row items-center justify-between bg-white px-4 py-3 sm:px-5 sm:py-4 rounded-xl shadow-sm border border-gray-100\" style=\"gap: 8px;\"\u003e\n                    \u003cdiv class=\"flex flex-col flex-1 min-w-0\"\u003e\n                        \u003ch3 class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title truncate\" data-i18n=\"mod_mid80\" style=\"margin: 0 !important; padding: 0 !important;\"\u003e80cm Middle Module\u003c\/h3\u003e\n                        \u003cp class=\"text-gray-500 text-[12px] sm:text-sm font-medium feature-desc truncate\" data-i18n=\"mod_mid80_price\" style=\"margin: 2px 0 0 0 !important; padding: 0 !important;\"\u003e€450 \/ each\u003c\/p\u003e\n                    \u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-row items-center bg-gray-50 rounded-full p-1 border border-gray-200 flex-shrink-0\" style=\"gap: 6px;\"\u003e\n                        \u003cbutton onclick=\"handleRemoveModule('mid80')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 12H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                        \u003cspan id=\"cnt-mid80\" class=\"font-bold text-gray-900 text-lg flex-center\" style=\"width: 20px; line-height: 1 !important;\"\u003e2\u003c\/span\u003e\n                        \u003cbutton onclick=\"handleAddModule('mid80')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n                \n                \u003c!-- 100cm Middle Module --\u003e\n                \u003cdiv class=\"flex flex-row items-center justify-between bg-white px-4 py-3 sm:px-5 sm:py-4 rounded-xl shadow-sm border border-gray-100\" style=\"gap: 8px;\"\u003e\n                    \u003cdiv class=\"flex flex-col flex-1 min-w-0\"\u003e\n                        \u003ch3 class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title truncate\" data-i18n=\"mod_mid100\" style=\"margin: 0 !important; padding: 0 !important;\"\u003e100cm Middle Module\u003c\/h3\u003e\n                        \u003cp class=\"text-gray-500 text-[12px] sm:text-sm font-medium feature-desc truncate\" data-i18n=\"mod_mid100_price\" style=\"margin: 2px 0 0 0 !important; padding: 0 !important;\"\u003e€450 \/ each\u003c\/p\u003e\n                    \u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-row items-center bg-gray-50 rounded-full p-1 border border-gray-200 flex-shrink-0\" style=\"gap: 6px;\"\u003e\n                        \u003cbutton onclick=\"handleRemoveModule('mid100')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 12H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                        \u003cspan id=\"cnt-mid100\" class=\"font-bold text-gray-900 text-lg flex-center\" style=\"width: 20px; line-height: 1 !important;\"\u003e0\u003c\/span\u003e\n                        \u003cbutton onclick=\"handleAddModule('mid100')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n\n                \u003c!-- 3-Seater Sofa --\u003e\n                \u003cdiv class=\"flex flex-row items-center justify-between bg-white px-4 py-3 sm:px-5 sm:py-4 rounded-xl shadow-sm border border-gray-100\" style=\"gap: 8px;\"\u003e\n                    \u003cdiv class=\"flex flex-col flex-1 min-w-0\"\u003e\n                        \u003ch3 class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title truncate\" data-i18n=\"mod_three_seater\" style=\"margin: 0 !important; padding: 0 !important;\"\u003e3-Seater Sofa\u003c\/h3\u003e\n                        \u003cp class=\"text-gray-500 text-[12px] sm:text-sm font-medium feature-desc truncate\" data-i18n=\"mod_three_price\" style=\"margin: 2px 0 0 0 !important; padding: 0 !important;\"\u003e€1100 \/ each\u003c\/p\u003e\n                    \u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-row items-center bg-gray-50 rounded-full p-1 border border-gray-200 flex-shrink-0\" style=\"gap: 6px;\"\u003e\n                        \u003cbutton onclick=\"handleRemoveModule('three_seater')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 12H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                        \u003cspan id=\"cnt-three_seater\" class=\"font-bold text-gray-900 text-lg flex-center\" style=\"width: 20px; line-height: 1 !important;\"\u003e0\u003c\/span\u003e\n                        \u003cbutton onclick=\"handleAddModule('three_seater')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n\n                \u003c!-- Armchair Module --\u003e\n                \u003cdiv class=\"flex flex-row items-center justify-between bg-white px-4 py-3 sm:px-5 sm:py-4 rounded-xl shadow-sm border border-gray-100\" style=\"gap: 8px;\"\u003e\n                    \u003cdiv class=\"flex flex-col flex-1 min-w-0\"\u003e\n                        \u003ch3 class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title truncate\" data-i18n=\"armchair\" style=\"margin: 0 !important; padding: 0 !important;\"\u003eArmchair\u003c\/h3\u003e\n                        \u003cp class=\"text-gray-500 text-[12px] sm:text-sm font-medium feature-desc truncate\" data-i18n=\"armchair_price\" style=\"margin: 2px 0 0 0 !important; padding: 0 !important;\"\u003e€525 \/ each\u003c\/p\u003e\n                    \u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-row items-center bg-gray-50 rounded-full p-1 border border-gray-200 flex-shrink-0\" style=\"gap: 6px;\"\u003e\n                        \u003cbutton onclick=\"handleRemoveModule('armchair')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 12H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                        \u003cspan id=\"cnt-armchair\" class=\"font-bold text-gray-900 text-lg flex-center\" style=\"width: 20px; line-height: 1 !important;\"\u003e0\u003c\/span\u003e\n                        \u003cbutton onclick=\"handleAddModule('armchair')\" class=\"qty-btn focus:outline-none\"\u003e\u003csvg fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/button\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- ORDER SECTION --\u003e\n        \u003cdiv class=\"w-full bg-white p-6 sm:p-8 border-t border-gray-200\"\u003e\n            \u003cdiv class=\"w-full flex flex-col sm:flex-row\" style=\"gap: 16px;\"\u003e\n                \u003cdiv class=\"flex-1 flex flex-row items-start bg-gray-50 border border-gray-100 px-4 py-4 rounded-2xl shadow-sm\" style=\"gap: 12px;\"\u003e\n                    \u003cdiv class=\"bg-emerald-100 text-emerald-600 p-2.5 rounded-xl flex-center\"\u003e\u003csvg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-col justify-center pt-0.5\"\u003e\n                        \u003cspan class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title\" data-i18n=\"no_fees_title\"\u003eNo Hidden Fees\u003c\/span\u003e\n                        \u003cspan class=\"text-[12px] sm:text-sm text-gray-600 feature-desc\" data-i18n=\"no_fees_desc\"\u003eFree shipping \u0026amp; all taxes included.\u003c\/span\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n                \u003cdiv class=\"flex-1 flex flex-row items-start bg-gray-50 border border-gray-100 px-4 py-4 rounded-2xl shadow-sm\" style=\"gap: 12px;\"\u003e\n                    \u003cdiv class=\"bg-blue-100 text-blue-600 p-2.5 rounded-xl flex-center\"\u003e\u003csvg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/div\u003e\n                    \u003cdiv class=\"flex flex-col justify-center pt-0.5\"\u003e\n                        \u003cspan class=\"text-[14px] sm:text-base font-bold text-gray-900 feature-title\" data-i18n=\"delivery_title\"\u003eSecure Delivery\u003c\/span\u003e\n                        \u003cspan class=\"text-[12px] sm:text-sm text-gray-600 feature-desc\" data-i18n=\"delivery_desc\"\u003eDelivered safely within 5-8 weeks.\u003c\/span\u003e\n                    \u003c\/div\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cspan id=\"total-price\" class=\"hidden\"\u003e\u003c\/span\u003e\n\n            \u003cbutton id=\"btn-whatsapp\" class=\"w-full bg-[#25D366] hover:bg-[#1da851] active:scale-95 text-white rounded-2xl transition-all duration-200 shadow-lg shadow-[#25D366]\/25 border-none flex-center\" style=\"margin-top: 24px !important; padding: 16px 24px !important; gap: 12px;\"\u003e\n                \u003csvg class=\"w-6 h-6 sm:w-7 sm:h-7\" fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\u003cpath d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.347-.272.273-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                \u003cspan data-i18n=\"whatsapp_btn\" class=\"font-semibold text-lg sm:text-xl bubble-text\"\u003eOrder via WhatsApp\u003c\/span\u003e\n            \u003c\/button\u003e\n        \u003c\/div\u003e\n        \n        \u003c!-- MODALS --\u003e\n        \u003cdiv id=\"custom-modal\" class=\"hidden fixed inset-0 z-[100] bg-gray-900\/60 backdrop-blur-sm flex items-center justify-center opacity-0 transition-opacity duration-300\"\u003e\n            \u003cdiv class=\"bg-white rounded-3xl p-6 sm:p-8 shadow-2xl max-w-sm w-full mx-4 transform scale-95 transition-transform duration-300\" id=\"custom-modal-content\"\u003e\n                \u003ch3 id=\"modal-title\" class=\"text-xl font-bold text-gray-900 mb-6 text-center leading-tight\" data-i18n=\"side_modal_title\"\u003eAdd to which side?\u003c\/h3\u003e\n                \n                \u003cdiv id=\"modal-buttons\" class=\"flex flex-col gap-3\"\u003e\n                    \u003cbutton id=\"btn-modal-left\" class=\"w-full bg-blue-50 hover:bg-blue-100 text-blue-700 font-bold py-3.5 px-4 rounded-xl transition-colors border border-blue-200 shadow-sm flex items-center justify-between\"\u003e\n                        \u003cspan data-i18n=\"side_left\"\u003eLeft Side\u003c\/span\u003e\n                        \u003csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 19l-7-7m0 0l7-7m-7 7h18\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003c\/button\u003e\n                    \u003cbutton id=\"btn-modal-right\" class=\"w-full bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-bold py-3.5 px-4 rounded-xl transition-colors border border-indigo-200 shadow-sm flex items-center justify-between\"\u003e\n                        \u003cspan data-i18n=\"side_right\"\u003eRight Side\u003c\/span\u003e\n                        \u003csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n                    \u003c\/button\u003e\n                    \u003cbutton id=\"btn-modal-cancel\" class=\"w-full mt-2 bg-gray-100 hover:bg-gray-200 text-gray-600 font-semibold py-3 px-4 rounded-xl transition-colors\" data-i18n=\"cancel\"\u003eCancel\u003c\/button\u003e\n                \u003c\/div\u003e\n                \n                \u003cdiv id=\"modal-alert-btn\" class=\"hidden flex-col gap-3\"\u003e\n                    \u003cbutton id=\"btn-modal-ok\" class=\"w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3.5 px-4 rounded-xl transition-colors shadow-md\" data-i18n=\"ok_btn\"\u003eOK\u003c\/button\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n    \u003c!-- Logic \u0026 UI Script --\u003e\n    \u003cscript\u003e\n        const mods = {\n            corner115:    { price: 700,  sizeW: 115, sizeD: 115, count: 0 },\n            arm115:       { price: 550,  sizeW: 115, sizeD: 105, count: 0 },\n            arm120:       { price: 550,  sizeW: 120, sizeD: 105, count: 0 },\n            mid60:        { price: 450,  sizeW: 60,  sizeD: 105, count: 0 },\n            mid80:        { price: 450,  sizeW: 80,  sizeD: 105, count: 0 },\n            mid100:       { price: 450,  sizeW: 100, sizeD: 105, count: 0 },\n            three_seater: { price: 1100, sizeW: 240, sizeD: 105, count: 0 },\n            armchair:     { price: 525,  sizeW: 105, sizeD: 90,  count: 0 }\n        };\n\n        let layoutState = {\n            sofas: [\n                {\n                    corner: 1, \n                    left: ['mid80', 'arm115'], \n                    right: ['mid80', 'arm115']\n                }\n            ],\n            activeSofa: 0, \n            three_seater: 0,\n            armchair: 0\n        };\n\n        let currentLang = 'en';\n\n        const translations = {\n            en: {\n                dimensions_title: \"Product Dimensions\", width: \"W\", depth: \"D\", height: \"H\", seat_label: \"Seat\", config_label: \"Config\",\n                armchair_dim_title: \"Armchair Dimensions\", three_dim_title: \"3-Seater Dimensions\", title: \"Discover the Ottawa Corner Sofa Set\",\n                default_set_note: \"Standard Set: 310x310 cm Corner Sofa\",\n                feat_frame_title: \"Frame Feature\", feat_frame_desc: \"Kiln dried beech wood and plywood.\",\n                feat_fabric_title: \"Fabric Feature\", feat_fabric_desc: \"Easy clean knitted fabric.\",\n                feat_foam_title: \"Sponge\", feat_foam_desc: \"Seat: 35 HR Foam.\",\n                feat_bed_title: \"Bed Mechanism\", feat_bed_desc: \"Can become a single bed with the back mechanism.\",\n                fabric_btn: \"Fabric Options\", build_set_title: \"Build Your Custom Corner\",\n                mod_corner115: \"115x115cm Corner Mod.\", mod_corner115_price: \"€700 \/ each\",\n                mod_arm115: \"115cm Arm Module\", mod_arm115_price: \"€550 \/ each\",\n                mod_arm120: \"120cm Arm Module\", mod_arm120_price: \"€550 \/ each\",\n                mod_mid60: \"60cm Middle Module\", mod_mid60_price: \"€450 \/ each\",\n                mod_mid80: \"80cm Middle Module\", mod_mid80_price: \"€450 \/ each\",\n                mod_mid100: \"100cm Middle Module\", mod_mid100_price: \"€450 \/ each\",\n                mod_three_seater: \"3-Seater Sofa\", mod_three_price: \"€1100 \/ each\",\n                armchair: \"Armchair\", armchair_price: \"€525 \/ each\",\n                total_price_label: \"Total Price\", no_fees_title: \"No Hidden Fees\", no_fees_desc: \"Free shipping \u0026 all taxes included.\",\n                delivery_title: \"Secure Delivery\", delivery_desc: \"Delivered safely within 5-8 weeks.\", whatsapp_btn: \"Order via WhatsApp\",\n                reset_btn: \"Start from Scratch\", reset_note: \"Start by adding a Corner for an L-shape, or build a straight sofa directly.\",\n                corner_note: \"Note: You can add side modules to a corner, or build a straight sofa by removing the corner.\",\n                side_modal_title: \"Add to which side?\", remove_modal_title: \"Remove from which side?\",\n                side_left: \"Left Side\", side_right: \"Right Side\", cancel: \"Cancel\",\n                wa_greeting: \"Hello! I would like to order the Ottawa Corner Sofa Set.\",\n                wa_config: \"My Configuration\",\n                wa_total: \"Total Price\",\n                wa_help: \"Could you please help me with the order process?\",\n                mod_short_corner115: \"Corner\", mod_short_arm115: \"Arm(115)\", mod_short_arm120: \"Arm(120)\", mod_short_mid60: \"Mid(60)\", mod_short_mid80: \"Mid(80)\", mod_short_mid100: \"Mid(100)\", mod_short_three_seater: \"3-Seater\",\n                ok_btn: \"OK\", arm_block_warning: \"Modules cannot be added after the Arm module! Please remove it first.\",\n                only_one_corner: \"Only 1 Corner Module allowed.\", remove_sides_first: \"Please remove the left and right modules before removing the corner.\", empty_set: \"Empty\", set_label: \"Sofa\",\n                sofa_n: \"Sofa {n}\", add_sofa_btn: \"Add Sofa\", top_view_badge: \"LIVE PLAN\", scale_indicator: \"1 GRID = 20 CM\"\n            },\n            de: {\n                dimensions_title: \"Produktabmessungen\", width: \"B\", depth: \"T\", height: \"H\", seat_label: \"Sitz\", config_label: \"Aufbau\",\n                armchair_dim_title: \"Sessel Abmessungen\", three_dim_title: \"3-Sitzer Abmessungen\", title: \"Entdecken Sie das Ottawa Ecksofa\",\n                default_set_note: \"Standard-Set: 310x310 cm Ecksofa\",\n                feat_frame_title: \"Rahmen\", feat_frame_desc: \"Hainbuche \/ MDF-Sperrholz.\",\n                feat_fabric_title: \"Stoff\", feat_fabric_desc: \"Leicht zu reinigendes Strickgewebe.\",\n                feat_foam_title: \"Schaumstoff\", feat_foam_desc: \"Sitz: 35 HR Schaumstoff.\",\n                feat_bed_title: \"Bettfunktion\", feat_bed_desc: \"Kann mit dem Rückenmechanismus in ein Einzelbett umgewandelt werden.\",\n                fabric_btn: \"Stoffoptionen\", build_set_title: \"Erstellen Sie Ihre Eigene Ecke\",\n                mod_corner115: \"115x115cm Eckmodul\", mod_corner115_price: \"700 € \/ Stück\",\n                mod_arm115: \"115cm Armlehnmodul\", mod_arm115_price: \"550 € \/ Stück\",\n                mod_arm120: \"120cm Armlehnmodul\", mod_arm120_price: \"550 € \/ Stück\",\n                mod_mid60: \"60cm Mittelmodul\", mod_mid60_price: \"450 € \/ Stück\",\n                mod_mid80: \"80cm Mittelmodul\", mod_mid80_price: \"450 € \/ Stück\",\n                mod_mid100: \"100cm Mittelmodul\", mod_mid100_price: \"450 € \/ Stück\",\n                mod_three_seater: \"3-Sitzer Sofa\", mod_three_price: \"1100 € \/ Stück\",\n                armchair: \"Sessel\", armchair_price: \"525 € \/ Stück\",\n                total_price_label: \"Gesamtpreis\", no_fees_title: \"Keine versteckten Gebühren\", no_fees_desc: \"Kostenloser Versand \u0026 Steuern inbegriffen.\",\n                delivery_title: \"Sichere Lieferung\", delivery_desc: \"Sichere Lieferung innerhalb von 5-8 Wochen.\", whatsapp_btn: \"Über WhatsApp bestellen\",\n                reset_btn: \"Von vorne beginnen\", reset_note: \"Beginnen Sie mit einer Ecke für eine L-Form oder bauen Sie direkt ein gerades Sofa.\",\n                corner_note: \"Hinweis: Sie können einer Ecke Seitenmodule hinzufügen oder ein gerades Sofa bauen, indem Sie die Ecke entfernen.\",\n                side_modal_title: \"Wohin hinzufügen?\", remove_modal_title: \"Von welcher Seite entfernen?\",\n                side_left: \"Linke Seite\", side_right: \"Rechte Seite\", cancel: \"Abbrechen\",\n                wa_greeting: \"Hallo! Ich möchte das Ottawa Ecksofa bestellen.\",\n                wa_config: \"Meine Konfiguration\",\n                wa_total: \"Gesamtpreis\",\n                wa_help: \"Könnten Sie mir bitte beim Bestellvorgang helfen?\",\n                mod_short_corner115: \"Ecke\", mod_short_arm115: \"Armlehne(115)\", mod_short_arm120: \"Armlehne(120)\", mod_short_mid60: \"Mit(60)\", mod_short_mid80: \"Mit(80)\", mod_short_mid100: \"Mit(100)\", mod_short_three_seater: \"3-Sitzer\",\n                ok_btn: \"OK\", arm_block_warning: \"Mittelmodule können nicht nach dem Armlehnmodul hinzugefügt werden! Bitte zuerst entfernen.\",\n                only_one_corner: \"Nur 1 Eckmodul erlaubt.\", remove_sides_first: \"Bitte entfernen Sie zuerst die Seitenmodule.\", empty_set: \"Leer\", set_label: \"Sofa\",\n                sofa_n: \"{n}. Sofa\", add_sofa_btn: \"Sofa Hinzufügen\", top_view_badge: \"LIVE PLAN\", scale_indicator: \"1 RASTER = 20 CM\"\n            },\n            fr: {\n                dimensions_title: \"Dimensions du Produit\", width: \"L\", depth: \"P\", height: \"H\", seat_label: \"Siège\", config_label: \"Config\",\n                armchair_dim_title: \"Dimensions du Fauteuil\", three_dim_title: \"Dimensions 3 Places\", title: \"Découvrez le Canapé d'Angle Ottawa\",\n                default_set_note: \"Ensemble standard: Canapé d'Angle 310x310 cm\",\n                feat_frame_title: \"Cadre\", feat_frame_desc: \"Charme \/ Contreplaqué MDF.\",\n                feat_fabric_title: \"Tissu\", feat_fabric_desc: \"Tissu tricoté facile à nettoyer.\",\n                feat_foam_title: \"Mousse\", feat_foam_desc: \"Assise : Mousse 35 HR.\",\n                feat_bed_title: \"Fonction Lit\", feat_bed_desc: \"Peut se transformer en lit simple grâce au mécanisme de dossier.\",\n                fabric_btn: \"Options de Tissu\", build_set_title: \"Créez Votre Angle\",\n                mod_corner115: \"Module d'Angle 115x115cm\", mod_corner115_price: \"700 € \/ pièce\",\n                mod_arm115: \"Module Accoudoir 115cm\", mod_arm115_price: \"550 € \/ pièce\",\n                mod_arm120: \"Module Accoudoir 120cm\", mod_arm120_price: \"550 € \/ pièce\",\n                mod_mid60: \"Module Central 60cm\", mod_mid60_price: \"450 € \/ pièce\",\n                mod_mid80: \"Module Central 80cm\", mod_mid80_price: \"450 € \/ pièce\",\n                mod_mid100: \"Module Central 100cm\", mod_mid100_price: \"450 € \/ pièce\",\n                mod_three_seater: \"Canapé 3 Places\", mod_three_price: \"1100 € \/ pièce\",\n                armchair: \"Fauteuil\", armchair_price: \"525 € \/ pièce\",\n                total_price_label: \"Prix Total\", no_fees_title: \"Pas de Frais Cachés\", no_fees_desc: \"Livraison gratuite et taxes comprises.\",\n                delivery_title: \"Livraison Sécurisée\", delivery_desc: \"Livré en toute sécurité sous 5 à 8 semaines.\", whatsapp_btn: \"Commander via WhatsApp\",\n                reset_btn: \"Repartir à zéro\", reset_note: \"Commencez par un Angle pour une forme en L, ou créez directement un canapé droit.\",\n                corner_note: \"Remarque : Vous pouvez ajouter des modules latéraux à un angle, ou construire un canapé droit en supprimant l'angle.\",\n                side_modal_title: \"Ajouter de quel côté?\", remove_modal_title: \"Retirer de quel côté?\",\n                side_left: \"Côté Gauche\", side_right: \"Côté Droit\", cancel: \"Annuler\",\n                wa_greeting: \"Bonjour ! Je souhaite commander le Canapé d'Angle Ottawa.\",\n                wa_config: \"Ma Configuration\",\n                wa_total: \"Prix Total\",\n                wa_help: \"Pourriez-vous m'aider avec le processus de commande ?\",\n                mod_short_corner115: \"Angle\", mod_short_arm115: \"Accoud(115)\", mod_short_arm120: \"Accoud(120)\", mod_short_mid60: \"Mil(60)\", mod_short_mid80: \"Mil(80)\", mod_short_mid100: \"Mil(100)\", mod_short_three_seater: \"3-Places\",\n                ok_btn: \"OK\", arm_block_warning: \"Les modules centraux ne peuvent pas être ajoutés après l'accoudoir ! Retirez-les d'abord.\",\n                only_one_corner: \"1 seul module d'angle autorisé.\", remove_sides_first: \"Veuillez d'abord retirer les modules latéraux.\", empty_set: \"Vide\", set_label: \"Canapé\",\n                sofa_n: \"Canapé {n}\", add_sofa_btn: \"Ajouter Canapé\", top_view_badge: \"PLAN EN DIRECT\", scale_indicator: \"1 GRILLE = 20 CM\"\n            },\n            tr: {\n                dimensions_title: \"Ürün Ölçüleri\", width: \"G\", depth: \"D\", height: \"Y\", seat_label: \"Oturum\", config_label: \"Ölçü\",\n                armchair_dim_title: \"Berjer Ölçüleri\", three_dim_title: \"3'lü Koltuk Ölçüleri\", title: \"Ottawa Köşe Koltuk Takımı'nı Keşfedin\",\n                default_set_note: \"Standart Takım İçeriği: 310x310 cm Köşe Koltuk\",\n                feat_frame_title: \"İskelet Malzemesi\", feat_frame_desc: \"Fırınlanmış kayın ağacı ve kontradan üretilmiştir.\",\n                feat_fabric_title: \"Kumaş Detayları\", feat_fabric_desc: \"Silinebilir örme kumaş.\",\n                feat_foam_title: \"Sünger\", feat_foam_desc: \"Oturum: 35 HR Sünger.\",\n                feat_bed_title: \"Yatak Mekanizması\", feat_bed_desc: \"Sırt mekanizması ile tek kişilik yatak olabilir.\",\n                fabric_btn: \"Kumaş Seçenekleri\", build_set_title: \"Kendi Koltuğunuzu Oluşturun\",\n                mod_corner115: \"115x115cm Köşe Modülü\", mod_corner115_price: \"€700 \/ adet\",\n                mod_arm115: \"115cm Kollu Modül\", mod_arm115_price: \"€550 \/ adet\",\n                mod_arm120: \"120cm Kollu Modül\", mod_arm120_price: \"€550 \/ adet\",\n                mod_mid60: \"60cm Ara Modül\", mod_mid60_price: \"€450 \/ adet\",\n                mod_mid80: \"80cm Ara Modül\", mod_mid80_price: \"€450 \/ adet\",\n                mod_mid100: \"100cm Ara Modül\", mod_mid100_price: \"€450 \/ adet\",\n                mod_three_seater: \"3'lü Koltuk\", mod_three_price: \"€1100 \/ adet\",\n                armchair: \"Berjer\", armchair_price: \"€525 \/ adet\",\n                total_price_label: \"Toplam Fiyat\", no_fees_title: \"Gizli Ücret Yok\", no_fees_desc: \"Ücretsiz kargo ve tüm vergiler dahil.\",\n                delivery_title: \"Güvenli Teslimat\", delivery_desc: \"5-8 hafta içinde güvenle teslim edilir.\", whatsapp_btn: \"WhatsApp ile Sipariş Ver\",\n                reset_btn: \"Tasarımı Sıfırla\", reset_note: \"L köşe oluşturmak için Köşe Modülü ekleyebilir veya doğrudan düz koltuk tasarlayabilirsiniz.\",\n                corner_note: \"Not: Bir köşeye modüller ekleyerek L köşe tasarlayabilir veya köşeyi silerek düz koltuk tasarlayabilirsiniz.\",\n                side_modal_title: \"Hangi tarafa eklensin?\", remove_modal_title: \"Hangi taraftan çıkarılsın?\",\n                side_left: \"Sol Taraf\", side_right: \"Sağ Taraf\", cancel: \"İptal\",\n                wa_greeting: \"Merhaba! Ottawa Köşe Koltuk Takımı siparişi vermek istiyorum.\",\n                wa_config: \"Konfigürasyonum\",\n                wa_total: \"Toplam Tutar\",\n                wa_help: \"Sipariş süreciyle ilgili yardımcı olabilir misiniz?\",\n                mod_short_corner115: \"Köşe\", mod_short_arm115: \"Kol(115)\", mod_short_arm120: \"Kol(120)\", mod_short_mid60: \"Ara(60)\", mod_short_mid80: \"Ara(80)\", mod_short_mid100: \"Ara(100)\", mod_short_three_seater: \"3'lü\",\n                ok_btn: \"Tamam\", arm_block_warning: \"Kollu modülden sonra modül eklenemez! Lütfen önce onları çıkarın.\",\n                only_one_corner: \"Sadece 1 Köşe Modülüne izin verilir.\", remove_sides_first: \"Köşeyi çıkarmadan önce sağ ve sol taraftaki tüm modülleri çıkarın.\", empty_set: \"Boş\", set_label: \"Koltuk\",\n                sofa_n: \"{n}. Koltuk\", add_sofa_btn: \"Koltuk Ekle\", top_view_badge: \"CANLI PLAN\", scale_indicator: \"1 KARE = 20 CM\"\n            }\n        };\n\n        const formatCurrency = (amount, lang) =\u003e {\n            const localeMap = { 'en': 'en-IE', 'de': 'de-DE', 'fr': 'fr-FR', 'tr': 'tr-TR' };\n            return new Intl.NumberFormat(localeMap[lang], { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(amount);\n        };\n\n        let modalPromiseResolve = null;\n        function showModal(titleKey, isAlert = false) {\n            return new Promise(resolve =\u003e {\n                modalPromiseResolve = resolve;\n                const modal = document.getElementById('custom-modal');\n                const content = document.getElementById('custom-modal-content');\n                const titleEl = document.getElementById('modal-title');\n                \n                if (titleEl) {\n                    titleEl.textContent = translations[currentLang][titleKey] || titleKey;\n                }\n                \n                if (isAlert) {\n                    const btnGrp = document.getElementById('modal-buttons');\n                    if (btnGrp) { btnGrp.classList.add('hidden'); btnGrp.classList.remove('flex'); }\n                    \n                    const alertGrp = document.getElementById('modal-alert-btn');\n                    if (alertGrp) { alertGrp.classList.remove('hidden'); alertGrp.classList.add('flex'); }\n                } else {\n                    const alertGrp = document.getElementById('modal-alert-btn');\n                    if (alertGrp) { alertGrp.classList.add('hidden'); alertGrp.classList.remove('flex'); }\n                    \n                    const btnGrp = document.getElementById('modal-buttons');\n                    if (btnGrp) { btnGrp.classList.remove('hidden'); btnGrp.classList.add('flex'); }\n                }\n\n                if (modal) modal.classList.remove('hidden');\n                setTimeout(() =\u003e {\n                    if (modal) modal.classList.remove('opacity-0');\n                    if (content) content.classList.remove('scale-95');\n                }, 10);\n            });\n        }\n\n        function closeCustomModal(result) {\n            const modal = document.getElementById('custom-modal');\n            const content = document.getElementById('custom-modal-content');\n            if (modal) modal.classList.add('opacity-0');\n            if (content) content.classList.add('scale-95');\n            setTimeout(() =\u003e {\n                if (modal) modal.classList.add('hidden');\n                if (modalPromiseResolve) {\n                    modalPromiseResolve(result);\n                    modalPromiseResolve = null;\n                }\n            }, 300);\n        }\n\n        \/\/ Yeni Hizalama: Sol seçilince ÜSTE (left array'i), Sağ seçilince SAĞA (right array'i)\n        document.getElementById('btn-modal-left').onclick = () =\u003e closeCustomModal('left');\n        document.getElementById('btn-modal-right').onclick = () =\u003e closeCustomModal('right');\n        \n        document.getElementById('btn-modal-cancel').onclick = () =\u003e closeCustomModal(null);\n        document.getElementById('btn-modal-ok').onclick = () =\u003e closeCustomModal(true);\n\n        window.setActiveSofa = function(num) {\n            layoutState.activeSofa = num;\n            updateUI();\n        };\n\n        window.addSofa = function() {\n            layoutState.sofas.push({ corner: 0, left: [], right: [] });\n            layoutState.activeSofa = layoutState.sofas.length - 1;\n            updateUI();\n        };\n\n        window.resetLayout = function() {\n            layoutState = { \n                sofas: [{ corner: 0, left: [], right: [] }], \n                activeSofa: 0, \n                three_seater: 0, \n                armchair: 0\n            };\n            syncCounts();\n            updateUI();\n        };\n\n        function syncCounts() {\n            for(let key in mods) {\n                mods[key].count = 0;\n            }\n            mods.three_seater.count = layoutState.three_seater;\n            mods.armchair.count = layoutState.armchair;\n            \n            layoutState.sofas.forEach(sofa =\u003e {\n                if (sofa.corner \u003e 0) mods.corner115.count += sofa.corner;\n                sofa.left.forEach(id =\u003e mods[id].count++);\n                sofa.right.forEach(id =\u003e mods[id].count++);\n            });\n        }\n\n        window.handleAddModule = async function(id) {\n            let active = layoutState.activeSofa;\n\n            if (id === 'three_seater' || id === 'armchair') {\n                layoutState[id]++;\n            } else if (id === 'corner115') {\n                if (layoutState.sofas[active].corner \u003e= 1) {\n                    await showModal('only_one_corner', true);\n                    return;\n                }\n                layoutState.sofas[active].corner++;\n            } else {\n                let side = await showModal('side_modal_title', false);\n                if (!side) return; \n\n                if (layoutState.sofas[active][side].length \u003e 0) {\n                    let lastMod = layoutState.sofas[active][side][layoutState.sofas[active][side].length - 1];\n                    if (lastMod.startsWith('arm')) {\n                        await showModal('arm_block_warning', true);\n                        return;\n                    }\n                }\n\n                layoutState.sofas[active][side].push(id);\n            }\n            syncCounts();\n            updateUI();\n        };\n\n        window.handleRemoveModule = async function(id) {\n            let active = layoutState.activeSofa;\n\n            if (id === 'corner115') {\n                if (layoutState.sofas[active].left.length \u003e 0 || layoutState.sofas[active].right.length \u003e 0) {\n                    await showModal('remove_sides_first', true);\n                    return;\n                }\n                if (layoutState.sofas[active].corner \u003e 0) layoutState.sofas[active].corner--;\n            } else if (id === 'armchair' || id === 'three_seater') {\n                if (layoutState[id] \u003e 0) layoutState[id]--;\n            } else {\n                let occurrencesLeft = layoutState.sofas[active].left.filter(x =\u003e x === id).length;\n                let occurrencesRight = layoutState.sofas[active].right.filter(x =\u003e x === id).length;\n                let inLeft = occurrencesLeft \u003e 0;\n                let inRight = occurrencesRight \u003e 0;\n\n                if (inLeft \u0026\u0026 inRight) {\n                    const side = await showModal('remove_modal_title', false);\n                    if (!side) return;\n                    removeLastOccurence(layoutState.sofas[active][side], id);\n                } else if (inLeft) {\n                    removeLastOccurence(layoutState.sofas[active].left, id);\n                } else if (inRight) {\n                    removeLastOccurence(layoutState.sofas[active].right, id);\n                }\n            }\n            syncCounts();\n            updateUI();\n        };\n\n        function removeLastOccurence(arr, id) {\n            const index = arr.lastIndexOf(id);\n            if (index !== -1) arr.splice(index, 1);\n        }\n\n        \/\/ --- SCHEMATIC BLOCK TEMPLATES ---\n        function getColors(id) {\n            const map = {\n                'corner115':  { l: '#e0e7ff', d: '#818cf8' }, \n                'arm115':     { l: '#e0e7ff', d: '#818cf8' }, \n                'arm120':     { l: '#e0e7ff', d: '#818cf8' }, \n                'mid60':      { l: '#e0e7ff', d: '#818cf8' }, \n                'mid80':      { l: '#e0e7ff', d: '#818cf8' }, \n                'mid100':     { l: '#e0e7ff', d: '#818cf8' }, \n                'three_seater': { l: '#f3e8ff', d: '#c084fc' }, \n                'armchair':   { l: '#fae8ff', d: '#e879f9' }\n            };\n            return map[id] || { l: '#f8fafc', d: '#94a3b8' };\n        }\n\n        \/\/ Köşe modülü sol alt kenar olarak yapılandırıldı. W:115 H:115\n        \/\/ Ara modüller (105cm) ile derinliği eşitlemek için sağ üstte 10x10cm hafif üçgen kesik uygulandı.\n        function getCornerHTML(name, x, y, c) {\n            return `\n            \u003cdiv class=\"sofa-module\" style=\"width: 115px !important; height: 115px !important; left: ${x}px !important; top: ${y}px !important; z-index: 20 !important; background-color: ${c.l} !important; border: 2px solid ${c.d} !important; border-radius: 0 0 0 12px !important; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);\"\u003e\n                \u003cdiv class=\"mod-part\" style=\"bottom:0 !important; left:0 !important; right:0 !important; height:30px !important; background-color: ${c.d} !important; border-radius: 0 0 0 10px !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-part\" style=\"top:0 !important; left:0 !important; bottom:0 !important; width:30px !important; background-color: ${c.d} !important;\"\u003e\u003c\/div\u003e\n                \u003c!-- Diagonal border fix for 10px top-right cut --\u003e\n                \u003cdiv class=\"mod-part\" style=\"top: 4px !important; left: 102px !important; width: 16px !important; height: 3px !important; background-color: ${c.d} !important; transform: rotate(45deg); transform-origin: center;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-cushion-flex\" style=\"top: 0 !important; left: 30px !important; right: 5px !important; bottom: 30px !important;\"\u003e\n                    \u003cspan class=\"mod-badge\"\u003e${name}\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e`;\n        }\n\n        \/\/ Sağ Kanat (Sağa doğru uzar, sırtlığı alt kısımdadır)\n        function getRightWingHTML(id, name, w, d, isArm, x, y, c) {\n            let armHTML = isArm ? `\u003cdiv class=\"mod-part\" style=\"top: 0 !important; right: 0 !important; bottom: 0 !important; width: 30px !important; background-color: ${c.d} !important; border-radius: 0 12px 12px 0 !important;\"\u003e\u003c\/div\u003e` : '';\n            return `\n            \u003cdiv class=\"sofa-module module-enter\" style=\"width: ${w}px !important; height: ${d}px !important; left: ${x}px !important; top: ${y}px !important; z-index: 10 !important; background-color: ${c.l} !important; border: 2px solid ${c.d} !important; border-radius: ${isArm ? '0 12px 12px 0' : '0'} !important;\"\u003e\n                \u003cdiv class=\"mod-part\" style=\"bottom: 0 !important; left: 0 !important; right: 0 !important; height: 30px !important; background-color: ${c.d} !important;\"\u003e\u003c\/div\u003e\n                ${armHTML}\n                \u003cdiv class=\"mod-cushion-flex\" style=\"top: 0 !important; left: 0 !important; right: ${isArm ? '30px' : '0'} !important; bottom: 30px !important;\"\u003e\n                    \u003cspan class=\"mod-badge\"\u003e${name}\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e`;\n        }\n\n        \/\/ Sol Kanat (Yukarı doğru uzar, sırtlığı sol kısımdadır)\n        function getLeftWingHTML(id, name, w, d, isArm, x, y, c) {\n            let armHTML = isArm ? `\u003cdiv class=\"mod-part\" style=\"top: 0 !important; left: 0 !important; right: 0 !important; height: 30px !important; background-color: ${c.d} !important; border-radius: 12px 12px 0 0 !important;\"\u003e\u003c\/div\u003e` : '';\n            return `\n            \u003cdiv class=\"sofa-module module-enter\" style=\"width: ${d}px !important; height: ${w}px !important; left: ${x}px !important; top: ${y}px !important; z-index: 10 !important; background-color: ${c.l} !important; border: 2px solid ${c.d} !important; border-radius: ${isArm ? '12px 12px 0 0' : '0'} !important;\"\u003e\n                \u003cdiv class=\"mod-part\" style=\"top: 0 !important; left: 0 !important; bottom: 0 !important; width: 30px !important; background-color: ${c.d} !important;\"\u003e\u003c\/div\u003e\n                ${armHTML}\n                \u003cdiv class=\"mod-cushion-flex\" style=\"top: ${isArm ? '30px' : '0'} !important; left: 30px !important; right: 0 !important; bottom: 0 !important;\"\u003e\n                    \u003cspan class=\"mod-badge rot-text\"\u003e${name}\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e`;\n        }\n\n        \/\/ Düz koltuk çizimi (Sola doğru, sırtlığı alt kısımdadır)\n        function getLinearLeftHTML(id, name, w, d, isArm, x, y, c) {\n            let armHTML = isArm ? `\u003cdiv class=\"mod-part\" style=\"top: 0 !important; left: 0 !important; bottom: 0 !important; width: 30px !important; background-color: ${c.d} !important; border-radius: 12px 0 0 12px !important;\"\u003e\u003c\/div\u003e` : '';\n            return `\n            \u003cdiv class=\"sofa-module module-enter\" style=\"width: ${w}px !important; height: ${d}px !important; left: ${x}px !important; top: ${y}px !important; z-index: 10 !important; background-color: ${c.l} !important; border: 2px solid ${c.d} !important; border-radius: ${isArm ? '12px 0 0 12px' : '0'} !important;\"\u003e\n                \u003cdiv class=\"mod-part\" style=\"bottom: 0 !important; left: 0 !important; right: 0 !important; height: 30px !important; background-color: ${c.d} !important;\"\u003e\u003c\/div\u003e\n                ${armHTML}\n                \u003cdiv class=\"mod-cushion-flex\" style=\"top: 0 !important; left: ${isArm ? '30px' : '0'} !important; right: 0 !important; bottom: 30px !important;\"\u003e\n                    \u003cspan class=\"mod-badge\"\u003e${name}\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e`;\n        }\n\n        function getStraightHTML(id, name, x, y, c, w, d) {\n            return `\n            \u003cdiv class=\"sofa-module module-enter\" style=\"width: ${w}px !important; height: ${d}px !important; left: ${x}px !important; top: ${y}px !important; z-index: 10 !important; background-color: ${c.l} !important; border: 2px solid ${c.d} !important; border-radius: 12px !important;\"\u003e\n                \u003cdiv class=\"mod-part\" style=\"bottom:0 !important; left:0 !important; right:0 !important; height:30px !important; background-color: ${c.d} !important; border-radius: 0 0 10px 10px !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-part\" style=\"top:0 !important; left:0 !important; bottom:0 !important; width:30px !important; background-color: ${c.d} !important; border-radius: 10px 0 0 10px !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-part\" style=\"top:0 !important; right:0 !important; bottom:0 !important; width:30px !important; background-color: ${c.d} !important; border-radius: 0 10px 10px 0 !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-cushion-flex\" style=\"top: 0 !important; left: 30px !important; right: 30px !important; bottom: 30px !important;\"\u003e\n                    \u003cspan class=\"mod-badge\"\u003e${name}\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e`;\n        }\n\n        function getArmchairHTML(name, x, y, c, w, d) {\n            return `\n            \u003cdiv class=\"sofa-module module-enter\" style=\"width: ${w}px !important; height: ${d}px !important; left: ${x}px !important; top: ${y}px !important; z-index: 10 !important; background-color: ${c.l} !important; border: 2px solid ${c.d} !important; border-radius: 12px !important;\"\u003e\n                \u003cdiv class=\"mod-part\" style=\"bottom: 0 !important; left: 0 !important; right: 0 !important; height: 30px !important; background-color: ${c.d} !important; border-radius: 0 0 10px 10px !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-part\" style=\"top: 0 !important; left: 0 !important; bottom: 30px !important; width: 25px !important; background-color: ${c.d} !important; border-radius: 10px 0 0 0 !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-part\" style=\"top: 0 !important; right: 0 !important; bottom: 30px !important; width: 25px !important; background-color: ${c.d} !important; border-radius: 0 10px 0 0 !important;\"\u003e\u003c\/div\u003e\n                \u003cdiv class=\"mod-cushion-flex\" style=\"top: 0 !important; left: 25px !important; right: 25px !important; bottom: 30px !important;\"\u003e\n                    \u003cspan class=\"mod-badge\" style=\"font-size:10px !important; padding: 4px !important;\"\u003e${name}\u003c\/span\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e`;\n        }\n\n        let currentSofaW = 100;\n        let currentSofaH = 100;\n\n        function updateScale() {\n            const canvas = document.getElementById('sofa-canvas');\n            const container = document.getElementById('draw-area');\n            if (!canvas || !container) return;\n\n            const rect = container.getBoundingClientRect();\n            let cw = rect.width || (window.innerWidth \u003c 600 ? 300 : 600);\n            let ch = rect.height || 400; \n            \n            let padX = window.innerWidth \u003c 600 ? 30 : 60;\n            let padY = window.innerWidth \u003c 600 ? 110 : 140; \n            \n            cw -= padX; \n            ch -= padY; \n            \n            let scale = Math.min(cw \/ (currentSofaW || 1), ch \/ (currentSofaH || 1)); \n            scale = Math.min(scale, 1.8); \n\n            let offsetY = window.innerWidth \u003c 600 ? -25 : -15; \n            canvas.style.transform = `translate(-50%, calc(-50% + ${offsetY}px)) scale(${scale})`;\n        }\n\n        function drawVisualizer() {\n            const canvas = document.getElementById('sofa-canvas');\n            canvas.innerHTML = ''; \n\n            let itemsToDraw = [];\n            \n            \/\/ Build virtual layout boxes for Modular Sofas\n            layoutState.sofas.forEach((sofa, index) =\u003e {\n                if (sofa.corner === 0 \u0026\u0026 sofa.left.length === 0 \u0026\u0026 sofa.right.length === 0) return;\n                let leftSpan = 0, rightSpan = 0;\n                let leftDepth = 115, rightDepth = 115; \/\/ Corner depth is 115 now\n                \n                if (sofa.corner \u003e 0) {\n                    leftSpan = 115;\n                    sofa.left.forEach(id =\u003e {\n                        leftSpan += mods[id].sizeW;\n                        leftDepth = Math.max(leftDepth, mods[id].sizeD);\n                    });\n                    \n                    rightSpan = 115;\n                    sofa.right.forEach(id =\u003e {\n                        rightSpan += mods[id].sizeW;\n                        rightDepth = Math.max(rightDepth, mods[id].sizeD);\n                    });\n                    \n                    let boxW = Math.max(leftDepth, rightSpan);\n                    let boxH = Math.max(leftSpan, rightDepth);\n                    \n                    itemsToDraw.push({ type: 'modular', sofa: sofa, index: index, w: boxW, d: boxH });\n                } else {\n                    let totalW = 0;\n                    let maxD = 105;\n                    sofa.left.forEach(id =\u003e { totalW += mods[id].sizeW; maxD = Math.max(maxD, mods[id].sizeD); });\n                    sofa.right.forEach(id =\u003e { totalW += mods[id].sizeW; maxD = Math.max(maxD, mods[id].sizeD); });\n                    itemsToDraw.push({ type: 'modular', sofa: sofa, index: index, w: totalW, d: maxD });\n                }\n            });\n\n            \/\/ Standard straight sofas and armchairs\n            ['three_seater'].forEach(id =\u003e {\n                for(let i=0; i\u003clayoutState[id]; i++) itemsToDraw.push({ id, type: 'straight', w: mods[id].sizeW, d: mods[id].sizeD });\n            });\n            for(let i=0; i\u003clayoutState.armchair; i++) {\n                itemsToDraw.push({ id: 'armchair', type: 'armchair', w: mods.armchair.sizeW, d: mods.armchair.sizeD });\n            }\n\n            let html = '';\n            let gap = 80;\n            \n            \/\/ Elemanları her satırda maksimum 2 adet olacak şekilde gruplandırıyoruz\n            let rows = [];\n            for (let i = 0; i \u003c itemsToDraw.length; i += 2) {\n                rows.push(itemsToDraw.slice(i, i + 2));\n            }\n\n            let rowData = [];\n            let globalMaxW = 0;\n            \n            \/\/ Her satırın toplam genişliğini ve yüksekliğini hesaplıyoruz\n            rows.forEach(row =\u003e {\n                let rowW = 0;\n                let rowH = 0;\n                row.forEach(item =\u003e {\n                    rowW += item.w;\n                    rowH = Math.max(rowH, item.d);\n                });\n                rowW += (row.length - 1) * gap; \n                globalMaxW = Math.max(globalMaxW, rowW);\n                rowData.push({ items: row, rowW, rowH });\n            });\n\n            let cursorY = 0;\n            let globalMinX = 0, globalMaxX = globalMaxW, globalMinY = 0, globalMaxY = 0;\n            \n            \/\/ Satırları genel merkeze (globalMaxW) göre hizalayarak çiziyoruz\n            rowData.forEach(row =\u003e {\n                let cursorX = (globalMaxW - row.rowW) \/ 2; \n                \n                row.items.forEach(item =\u003e {\n                    let itemY = cursorY + row.rowH - item.d; \n                    globalMaxY = Math.max(globalMaxY, itemY + item.d);\n\n                    if (item.type === 'modular') {\n                        let sofa = item.sofa;\n                        if (sofa.corner \u003e 0) {\n                            let cornerX = cursorX;\n                            let cornerY = itemY + item.d - 115; \/\/ Corner height is 115\n\n                            html += getCornerHTML(translations[currentLang]['mod_short_corner115'], cornerX, cornerY, getColors('corner115'));\n                            \n                            \/\/ Sağ Kanat (Right Wing) Çizimi\n                            let curX = 115;\n                            sofa.right.forEach(id =\u003e {\n                                let isArm = id.startsWith('arm');\n                                let y = cornerY + 115 - mods[id].sizeD;\n                                html += getRightWingHTML(id, translations[currentLang]['mod_short_'+id], mods[id].sizeW, mods[id].sizeD, isArm, cornerX + curX, y, getColors(id));\n                                curX += mods[id].sizeW;\n                            });\n\n                            \/\/ Sol Kanat (Left Wing) Yukarıya Doğru Çizimi\n                            let curY = cornerY;\n                            sofa.left.forEach(id =\u003e {\n                                let isArm = id.startsWith('arm');\n                                curY -= mods[id].sizeW;\n                                html += getLeftWingHTML(id, translations[currentLang]['mod_short_'+id], mods[id].sizeW, mods[id].sizeD, isArm, cornerX, curY, getColors(id));\n                            });\n                        } else {\n                            let curX = 0;\n                            let leftItems = [...sofa.left].reverse();\n                            \n                            leftItems.forEach(id =\u003e {\n                                let isArm = id.startsWith('arm');\n                                let y = itemY + item.d - mods[id].sizeD;\n                                html += getLinearLeftHTML(id, translations[currentLang]['mod_short_'+id], mods[id].sizeW, mods[id].sizeD, isArm, cursorX + curX, y, getColors(id));\n                                curX += mods[id].sizeW;\n                            });\n                            sofa.right.forEach(id =\u003e {\n                                let isArm = id.startsWith('arm');\n                                let y = itemY + item.d - mods[id].sizeD;\n                                html += getRightWingHTML(id, translations[currentLang]['mod_short_'+id], mods[id].sizeW, mods[id].sizeD, isArm, cursorX + curX, y, getColors(id));\n                                curX += mods[id].sizeW;\n                            });\n                        }\n                    } else if (item.type === 'straight') {\n                        html += getStraightHTML(item.id, translations[currentLang]['mod_short_'+item.id], cursorX, itemY, getColors(item.id), item.w, item.d);\n                    } else if (item.type === 'armchair') {\n                        html += getArmchairHTML(translations[currentLang]['armchair'], cursorX, itemY, getColors('armchair'), item.w, item.d);\n                    }\n                    cursorX += item.w + gap;\n                });\n                \n                cursorY += row.rowH + gap;\n            });\n\n            canvas.innerHTML = html;\n\n            let globalMaxH = cursorY \u003e 0 ? cursorY - gap : 0;\n\n            \/\/ Calculate final Canvas padding and width\n            currentSofaW = globalMaxW;\n            currentSofaH = globalMaxH;\n\n            let padX = 2000;\n            let padY = 2000;\n            let totalW = currentSofaW + (padX * 2);\n            let totalH = currentSofaH + (padY * 2);\n\n            canvas.style.width = `${totalW}px`;\n            canvas.style.height = `${totalH}px`;\n\n            const children = canvas.children;\n            for(let i=0; i\u003cchildren.length; i++) {\n                let oldLeft = parseFloat(children[i].style.left) || 0;\n                let oldTop = parseFloat(children[i].style.top) || 0;\n                children[i].style.left = `${oldLeft + padX}px`;\n                children[i].style.top = `${oldTop + padY}px`;\n            }\n\n            updateScale();\n        }\n\n        const updateUI = () =\u003e {\n            try {\n                \/\/ UI Counters Update\n                const activeSofa = layoutState.sofas[layoutState.activeSofa];\n                const activeCounts = {\n                    corner115: activeSofa.corner,\n                    arm115: 0, arm120: 0, mid60: 0, mid80: 0, mid100: 0\n                };\n                activeSofa.left.forEach(id =\u003e activeCounts[id]++);\n                activeSofa.right.forEach(id =\u003e activeCounts[id]++);\n\n                for(let key in activeCounts) {\n                    const el = document.getElementById(`cnt-${key}`);\n                    if (el) el.textContent = activeCounts[key];\n                }\n\n                const elThreeSeater = document.getElementById('cnt-three_seater');\n                if (elThreeSeater) elThreeSeater.textContent = layoutState.three_seater;\n                \n                const elArmchair = document.getElementById('cnt-armchair');\n                if (elArmchair) elArmchair.textContent = layoutState.armchair;\n\n                \/\/ Total Price Calculation\n                let totalEur = 0;\n                totalEur += layoutState.three_seater * mods.three_seater.price;\n                totalEur += layoutState.armchair * mods.armchair.price;\n\n                layoutState.sofas.forEach(sofa =\u003e {\n                    totalEur += sofa.corner * mods.corner115.price;\n                    sofa.left.forEach(id =\u003e totalEur += mods[id].price);\n                    sofa.right.forEach(id =\u003e totalEur += mods[id].price);\n                });\n\n                const elVisPrice = document.getElementById(\"vis-price\");\n                if (elVisPrice) elVisPrice.textContent = formatCurrency(totalEur, currentLang);\n                \n                const elTotalPrice = document.getElementById(\"total-price\");\n                if (elTotalPrice) elTotalPrice.textContent = formatCurrency(totalEur, currentLang);\n\n                \/\/ DYNAMIC TABS GENERATION\n                const tabsContainer = document.getElementById('tabs-container');\n                let sofaTexts = [];\n                const t = translations[currentLang];\n                \n                if (tabsContainer) {\n                    tabsContainer.innerHTML = '';\n\n                    layoutState.sofas.forEach((sofa, index) =\u003e {\n                        let s1 = 0, s2 = 0;\n                        let maxD = 105;\n                        sofa.left.forEach(id =\u003e { s1 += mods[id].sizeW; maxD = Math.max(maxD, mods[id].sizeD); });\n                        sofa.right.forEach(id =\u003e { s2 += mods[id].sizeW; maxD = Math.max(maxD, mods[id].sizeD); });\n                        \n                        let tabText = \"\";\n                        let isLshape = false;\n                        if (sofa.corner \u003e 0) {\n                            tabText = `${s1+115}x${s2+115} cm`;\n                            isLshape = true;\n                        } else if (s1 + s2 \u003e 0) {\n                            if (maxD \u003e 105) {\n                                tabText = `${s1+s2}x${maxD} cm`;\n                                isLshape = true;\n                            } else {\n                                tabText = `${s1+s2} cm`;\n                            }\n                        }\n\n                        if (tabText !== \"\") {\n                            if (isLshape) {\n                                if (maxD \u003e 105) {\n                                    tabText += ` (D:${maxD})`;\n                                }\n                                sofaTexts.push(tabText);\n                            } else {\n                                sofaTexts.push(`${tabText} ${t['set_label']}`);\n                            }\n                        }\n\n                        const btn = document.createElement('button');\n                        const isActive = index === layoutState.activeSofa;\n                        btn.className = isActive \n                            ? \"px-5 py-2.5 rounded-xl font-bold text-sm transition-all duration-200 bg-indigo-600 text-white shadow-md flex-shrink-0 transform active:scale-95\"\n                            : \"px-5 py-2.5 rounded-xl font-bold text-sm transition-all duration-200 bg-white border border-gray-300 text-gray-600 hover:bg-gray-50 flex-shrink-0 transform active:scale-95\";\n                        \n                        let displayName = t['sofa_n'].replace('{n}', index + 1);\n                        btn.textContent = tabText ? `${displayName} (${tabText})` : displayName;\n                        btn.onclick = () =\u003e setActiveSofa(index);\n                        tabsContainer.appendChild(btn);\n                    });\n\n                    \/\/ \"+ Koltuk Ekle\" Button\n                    const addBtn = document.createElement('button');\n                    addBtn.className = \"px-5 py-2.5 rounded-xl font-bold text-sm transition-all duration-200 bg-emerald-50 border border-emerald-200 text-emerald-700 hover:bg-emerald-100 flex-shrink-0 transform active:scale-95 flex items-center gap-1\";\n                    addBtn.innerHTML = `\u003csvg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e ${t['add_sofa_btn']}`;\n                    addBtn.onclick = () =\u003e addSofa();\n                    tabsContainer.appendChild(addBtn);\n                }\n\n                \/\/ Dynamic Dimension Text\n                let dimText = sofaTexts.join(\" + \");\n                if(dimText === \"\") dimText = t['empty_set'];\n\n                if (layoutState.three_seater \u003e 0) {\n                    if(dimText !== t['empty_set']) dimText += \" + \";\n                    dimText += `${layoutState.three_seater}x ${t['mod_short_three_seater'].replace(\/\\n\/g, \" \")}`;\n                }\n                if (layoutState.armchair \u003e 0) {\n                    if(dimText !== t['empty_set']) dimText += \" + \";\n                    dimText += `${layoutState.armchair}x ${t['armchair']}`;\n                }\n\n                const elSummaryWidth = document.getElementById(\"summary-width\");\n                if (elSummaryWidth) elSummaryWidth.textContent = dimText;\n                \n                const elVisDims = document.getElementById(\"vis-dims\");\n                if (elVisDims) elVisDims.textContent = dimText;\n\n                \/\/ Render 2D Model\n                drawVisualizer();\n\n                \/\/ Safe Text Translations\n                document.querySelectorAll('[data-i18n]').forEach(el =\u003e {\n                    const key = el.getAttribute('data-i18n');\n                    if (t \u0026\u0026 t[key]) {\n                        el.textContent = t[key];\n                    }\n                });\n\n            } catch (e) {\n                console.error(\"UI Update Error:\", e);\n            }\n        };\n\n        \/\/ Language Buttons Event Listeners\n        document.querySelectorAll(\".lang-btn\").forEach(btn =\u003e {\n            btn.addEventListener('click', (e) =\u003e {\n                const selectedLang = e.currentTarget.getAttribute('data-lang');\n                if (currentLang !== selectedLang) {\n                    currentLang = selectedLang;\n                    document.querySelectorAll(\".lang-btn\").forEach(b =\u003e {\n                        b.classList.remove('scale-110', 'opacity-100', 'drop-shadow-md');\n                        b.classList.add('opacity-40');\n                    });\n                    e.currentTarget.classList.remove('opacity-40');\n                    e.currentTarget.classList.add('scale-110', 'opacity-100', 'drop-shadow-md');\n                    \n                    updateUI();\n                }\n            });\n        });\n\n        \/\/ WhatsApp Order Logic - Auto Translated message\n        document.getElementById(\"btn-whatsapp\").addEventListener(\"click\", () =\u003e {\n            let configText = \"\";\n            let total = 0;\n            const t = translations[currentLang];\n            \n            \/\/ Re-aggregate counts for Whatsapp\n            let waCounts = { corner115: 0, arm115: 0, arm120: 0, mid60: 0, mid80: 0, mid100: 0, three_seater: layoutState.three_seater, armchair: layoutState.armchair };\n            layoutState.sofas.forEach(sofa =\u003e {\n                waCounts.corner115 += sofa.corner;\n                sofa.left.forEach(id =\u003e waCounts[id]++);\n                sofa.right.forEach(id =\u003e waCounts[id]++);\n            });\n\n            for (const key in waCounts) {\n                if (waCounts[key] \u003e 0) {\n                    const modName = t['mod_' + key] || t['mod_short_'+key] || t[key] || key; \n                    configText += `- ${waCounts[key]}x ${modName}\\n`;\n                    total += waCounts[key] * mods[key].price;\n                }\n            }\n            \n            const message = `${t.wa_greeting}\\n\\n${t.wa_config} (${document.getElementById(\"summary-width\").textContent}):\\n${configText}\\n${t.wa_total}: ${formatCurrency(total, currentLang)}\\n\\n${t.wa_help}`;\n            window.open(`https:\/\/wa.me\/905441443814?text=${encodeURIComponent(message)}`, '_blank');\n        });\n\n        \/\/ Initialize on Load\n        document.addEventListener(\"DOMContentLoaded\", () =\u003e {\n            syncCounts();\n            document.querySelectorAll(\".lang-btn\").forEach(b =\u003e {\n                if(b.getAttribute('data-lang') === currentLang) {\n                    b.classList.add('scale-110', 'opacity-100', 'drop-shadow-md');\n                    b.classList.remove('opacity-40');\n                } else {\n                    b.classList.add('opacity-40');\n                }\n            });\n            updateUI();\n            \n            let lastWinWidth = window.innerWidth;\n            window.addEventListener('resize', () =\u003e {\n                if (window.innerWidth !== lastWinWidth) {\n                    lastWinWidth = window.innerWidth;\n                    requestAnimationFrame(() =\u003e {\n                        updateScale();\n                    });\n                }\n            });\n        });\n    \u003c\/script\u003e\n\u003c\/body\u003e","brand":"Özüçler Mobilya","offers":[{"title":"Default Title","offer_id":48215715086568,"sku":null,"price":2700.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0713\/7640\/4712\/files\/4CC95FEB-583F-4311-B710-E5E522CD2CD4.jpg?v=1775939631","url":"https:\/\/ozucler.com\/products\/ottawa-corner-sofa","provider":"Özüçler Mobilya","version":"1.0","type":"link"}