{"id":35,"date":"2026-08-12T23:52:51","date_gmt":"2026-08-12T21:52:51","guid":{"rendered":"https:\/\/mwstal.pl\/?page_id=35"},"modified":"2026-08-12T23:53:42","modified_gmt":"2026-08-12T21:53:42","slug":"konfigurator-grok","status":"publish","type":"page","link":"https:\/\/mwstal.pl\/konfigurator-grok\/","title":{"rendered":"Konfigurator grok"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"35\" class=\"elementor elementor-35\">\n\t\t\t\t<div class=\"elementor-element elementor-element-74674e5 e-con-full e-flex e-con e-parent\" data-id=\"74674e5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b78577 elementor-widget elementor-widget-shortcode\" data-id=\"2b78577\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <section id=\"mwstal-configurator\" class=\"mwstal-configurator\" data-product-id=\"14\">\n\n        <!-- HEADER -->\n        <div class=\"mwstal-head\">\n            <div>\n                <div class=\"mwstal-eyebrow\">02 \/ KONFIGURATOR<\/div>\n                <h2>ZAPROJEKTUJ<br>SWOJ\u0104.<\/h2>\n            <\/div>\n            <p>Wymiary, forma, wz\u00f3r i kolor. Konfigurujesz maskownic\u0119 dok\u0142adnie pod sw\u00f3j grzejnik.<\/p>\n        <\/div>\n\n        <!-- GRID -->\n        <div class=\"mwstal-grid\">\n\n            <!-- PREVIEW -->\n            <div class=\"mwstal-preview\">\n                <div class=\"mwstal-grid-bg\"><\/div>\n\n                <div class=\"mwstal-preview-top\">\n                    <span>LIVE PREVIEW<\/span>\n                    <span id=\"mwstal-code\" class=\"mwstal-mono\">MW-000000<\/span>\n                <\/div>\n\n                <div class=\"mwstal-canvas\">\n                    <div id=\"mwstal-radiator\" class=\"mwstal-radiator\">\n                        <div class=\"mwstal-radiator-top\"><\/div>\n                        <div class=\"mwstal-side mwstal-side-left\"><\/div>\n                        <div class=\"mwstal-side mwstal-side-right\"><\/div>\n\n                        <div id=\"mwstal-body\" class=\"mwstal-body\">\n                            <div id=\"mwstal-pattern-dots\" class=\"mwstal-pattern mwstal-dots\">\n                                <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>                            <\/div>\n                            <div id=\"mwstal-pattern-lines\" class=\"mwstal-pattern mwstal-lines\">\n                                <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>                            <\/div>\n                            <div id=\"mwstal-pattern-diamond\" class=\"mwstal-pattern mwstal-diamond\">\n                                <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>                            <\/div>\n                            <div id=\"mwstal-pattern-wave\" class=\"mwstal-pattern mwstal-wave\">\n                                <span><\/span><span><\/span><span><\/span>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"mwstal-dimension mwstal-width\">\n                            <span id=\"mwstal-width-label\">100 cm<\/span>\n                        <\/div>\n                        <div class=\"mwstal-dimension mwstal-height\">\n                            <span id=\"mwstal-height-label\">60 cm<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"mwstal-preview-bottom\">\n                    <div>\n                        <strong id=\"mwstal-type-label\">STANDARD<\/strong>\n                        <small>MASKOWNICA \/ CUSTOM MADE<\/small>\n                    <\/div>\n                    <span id=\"mwstal-color-label\">RAL 9016<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- PANEL -->\n            <div class=\"mwstal-panel\">\n\n                <!-- 01 FORMA -->\n                <div class=\"mwstal-step\">\n                    <div class=\"mwstal-step-head\"><span>01<\/span><strong>Forma<\/strong><\/div>\n                    <div class=\"mwstal-options\">\n                        <button type=\"button\" class=\"mwstal-option active\" data-type=\"standard\" data-type-name=\"Standard\">\n                            <strong>Standard<\/strong><small>\u0141agodne zagi\u0119cie g\u00f3ry<\/small>\n                        <\/button>\n                        <button type=\"button\" class=\"mwstal-option\" data-type=\"kant\" data-type-name=\"Kant 90\u00b0\">\n                            <strong>Kant 90\u00b0<\/strong><small>Prosta, geometryczna forma<\/small>\n                        <\/button>\n                        <button type=\"button\" class=\"mwstal-option\" data-type=\"bezbokow\" data-type-name=\"Bez bok\u00f3w\">\n                            <strong>Bez bok\u00f3w<\/strong><small>Minimalistyczna wersja<\/small>\n                        <\/button>\n                        <button type=\"button\" class=\"mwstal-option\" data-type=\"custom\" data-type-name=\"Nietypowa\">\n                            <strong>Nietypowa<\/strong><small>Projekt indywidualny<\/small>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- 02 WYMIARY -->\n                <div class=\"mwstal-step\">\n                    <div class=\"mwstal-step-head\"><span>02<\/span><strong>Wymiary<\/strong><\/div>\n                    <div class=\"mwstal-fields\">\n                        <label>\n                            <span>Szeroko\u015b\u0107<\/span>\n                            <input type=\"number\" id=\"mwstal-width\" value=\"100\" min=\"40\" max=\"300\" step=\"1\">\n                            <em>cm<\/em>\n                        <\/label>\n                        <label>\n                            <span>Wysoko\u015b\u0107<\/span>\n                            <input type=\"number\" id=\"mwstal-height\" value=\"60\" min=\"20\" max=\"120\" step=\"1\">\n                            <em>cm<\/em>\n                        <\/label>\n                        <label>\n                            <span>G\u0142\u0119boko\u015b\u0107<\/span>\n                            <input type=\"number\" id=\"mwstal-depth\" value=\"15\" min=\"5\" max=\"50\" step=\"1\">\n                            <em>cm<\/em>\n                        <\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- 03 WZ\u00d3R -->\n                <div class=\"mwstal-step\">\n                    <div class=\"mwstal-step-head\"><span>03<\/span><strong>Wz\u00f3r<\/strong><\/div>\n                    <div class=\"mwstal-options\">\n                        <button type=\"button\" class=\"mwstal-option active\" data-pattern=\"dots\" data-pattern-name=\"01 \/ Kropki\">\n                            <strong>01 \/ Kropki<\/strong><small>Klasyczny uk\u0142ad otwor\u00f3w<\/small>\n                        <\/button>\n                        <button type=\"button\" class=\"mwstal-option\" data-pattern=\"lines\" data-pattern-name=\"02 \/ Linie\">\n                            <strong>02 \/ Linie<\/strong><small>Pionowe szczeliny<\/small>\n                        <\/button>\n                        <button type=\"button\" class=\"mwstal-option\" data-pattern=\"diamond\" data-pattern-name=\"03 \/ Romb\">\n                            <strong>03 \/ Romb<\/strong><small>Geometryczny rytm<\/small>\n                        <\/button>\n                        <button type=\"button\" class=\"mwstal-option\" data-pattern=\"wave\" data-pattern-name=\"04 \/ Fala\">\n                            <strong>04 \/ Fala<\/strong><small>Dekoracyjna forma<\/small>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- 04 KOLOR -->\n                <div class=\"mwstal-step\">\n                    <div class=\"mwstal-step-head\"><span>04<\/span><strong>Kolor RAL<\/strong><\/div>\n                    <div class=\"mwstal-colors\">\n                                                    <button type=\"button\" class=\"mwstal-color active\"\n                                    data-ral=\"9016\"\n                                    data-color=\"#f4f4f2\">\n                                <span style=\"background:#f4f4f2\"><\/span>\n                                <small>9016<\/small>\n                            <\/button>\n                                                    <button type=\"button\" class=\"mwstal-color \"\n                                    data-ral=\"9005\"\n                                    data-color=\"#0b0b0c\">\n                                <span style=\"background:#0b0b0c\"><\/span>\n                                <small>9005<\/small>\n                            <\/button>\n                                                    <button type=\"button\" class=\"mwstal-color \"\n                                    data-ral=\"7016\"\n                                    data-color=\"#383e42\">\n                                <span style=\"background:#383e42\"><\/span>\n                                <small>7016<\/small>\n                            <\/button>\n                                                    <button type=\"button\" class=\"mwstal-color \"\n                                    data-ral=\"7040\"\n                                    data-color=\"#9da1aa\">\n                                <span style=\"background:#9da1aa\"><\/span>\n                                <small>7040<\/small>\n                            <\/button>\n                                                    <button type=\"button\" class=\"mwstal-color \"\n                                    data-ral=\"9006\"\n                                    data-color=\"#a5a5a5\">\n                                <span style=\"background:#a5a5a5\"><\/span>\n                                <small>9006<\/small>\n                            <\/button>\n                                                    <button type=\"button\" class=\"mwstal-color \"\n                                    data-ral=\"8017\"\n                                    data-color=\"#45302b\">\n                                <span style=\"background:#45302b\"><\/span>\n                                <small>8017<\/small>\n                            <\/button>\n                                                    <button type=\"button\" class=\"mwstal-color \"\n                                    data-ral=\"6005\"\n                                    data-color=\"#0f4c3a\">\n                                <span style=\"background:#0f4c3a\"><\/span>\n                                <small>6005<\/small>\n                            <\/button>\n                                                    <button type=\"button\" class=\"mwstal-color \"\n                                    data-ral=\"1013\"\n                                    data-color=\"#eae3d2\">\n                                <span style=\"background:#eae3d2\"><\/span>\n                                <small>1013<\/small>\n                            <\/button>\n                                            <\/div>\n                <\/div>\n\n                <!-- CENA + PRZYCISK -->\n                <div class=\"mwstal-price-box\">\n                    <div class=\"mwstal-price-line\">\n                        <div>\n                            <small>Szacowana cena<\/small>\n                            <strong id=\"mwstal-price\">450 <em>PLN<\/em><\/strong>\n                        <\/div>\n                        <span>orientacyjnie<\/span>\n                    <\/div>\n                    <button type=\"button\" id=\"mwstal-add-to-cart\" class=\"mwstal-submit\">\n                        DODAJ KONFIGURACJ\u0118 \u2192\n                    <\/button>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <style>\n        \/* ========== ROOT ========== *\/\n        #mwstal-configurator {\n            --mw-blue: #1647ff;\n            --mw-bg: #08090b;\n            --mw-panel: #101216;\n            --mw-border: #292d35;\n            --mw-muted: #b0b4bc;\n            --mw-text: #ffffff;\n            width: 100%;\n            padding: 70px 30px;\n            color: var(--mw-text);\n            background: var(--mw-bg);\n            border-radius: 30px;\n            box-sizing: border-box;\n            font-family: Arial, Helvetica, sans-serif;\n        }\n        #mwstal-configurator *,\n        #mwstal-configurator *::before,\n        #mwstal-configurator *::after { box-sizing: border-box; }\n\n        \/* HEADER *\/\n        .mwstal-head {\n            max-width: 1380px;\n            margin: 0 auto 50px;\n            display: grid;\n            grid-template-columns: minmax(0,1fr) 420px;\n            gap: 50px;\n            align-items: end;\n        }\n        .mwstal-eyebrow {\n            margin-bottom: 18px;\n            color: #c5c8d0;\n            font-size: 10px;\n            font-weight: 800;\n            letter-spacing: .16em;\n            text-transform: uppercase;\n        }\n        .mwstal-head h2 {\n            margin: 0;\n            color: #ffffff;\n            font-size: clamp(55px, 7vw, 105px);\n            line-height: .82;\n            letter-spacing: -.08em;\n            font-weight: 900;\n        }\n        .mwstal-head p {\n            margin: 0;\n            color: #d0d3da;\n            font-size: 14px;\n            line-height: 1.7;\n        }\n\n        \/* GRID *\/\n        .mwstal-grid {\n            max-width: 1380px;\n            margin: 0 auto;\n            display: grid;\n            grid-template-columns: minmax(0,1.5fr) minmax(360px,.8fr);\n            gap: 14px;\n        }\n\n        \/* PREVIEW *\/\n        .mwstal-preview {\n            position: relative;\n            min-height: 720px;\n            overflow: hidden;\n            border: 1px solid var(--mw-border);\n            border-radius: 28px;\n            background: linear-gradient(135deg, #12151a, #08090b);\n        }\n        .mwstal-grid-bg {\n            position: absolute;\n            inset: 0;\n            opacity: .3;\n            background-image:\n                linear-gradient(#ffffff08 1px, transparent 1px),\n                linear-gradient(90deg, #ffffff08 1px, transparent 1px);\n            background-size: 45px 45px;\n        }\n        .mwstal-preview-top,\n        .mwstal-preview-bottom {\n            position: absolute;\n            left: 25px;\n            right: 25px;\n            z-index: 20;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n        .mwstal-preview-top { top: 25px; }\n        .mwstal-preview-bottom { bottom: 25px; }\n        .mwstal-preview-top span {\n            padding: 8px 11px;\n            border: 1px solid #30343d;\n            border-radius: 30px;\n            background: #111318cc;\n            color: #ffffff;\n            font-size: 8px;\n            letter-spacing: .12em;\n        }\n        .mwstal-mono { font-family: monospace; }\n\n        \/* CANVAS *\/\n        .mwstal-canvas {\n            position: absolute;\n            inset: 90px 40px 100px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            perspective: 900px;\n        }\n        .mwstal-radiator {\n            position: relative;\n            width: 70%;\n            height: 300px;\n            transition: width .3s ease, height .3s ease, transform .3s ease;\n            transform: perspective(800px) rotateY(-8deg);\n            filter: drop-shadow(0 30px 35px #000b);\n        }\n        .mwstal-body {\n            position: absolute;\n            inset: 0;\n            overflow: hidden;\n            border-radius: 8px;\n            background: #f4f4f2;\n            box-shadow: inset 0 0 0 2px #ffffff44, inset 0 -20px 30px #0002;\n        }\n        .mwstal-radiator-top {\n            position: absolute;\n            left: 0; right: 0;\n            top: -12px;\n            height: 18px;\n            z-index: 10;\n            border-radius: 5px;\n            background: #bfc1c1;\n        }\n        .mwstal-side {\n            position: absolute;\n            top: 0; bottom: 0;\n            width: 16px;\n            z-index: 12;\n            background: #969a9c;\n        }\n        .mwstal-side-left { left: -14px; transform: skewY(-8deg); }\n        .mwstal-side-right { right: -14px; transform: skewY(8deg); }\n\n        \/* PATTERNS *\/\n        .mwstal-pattern {\n            position: absolute;\n            inset: 12%;\n            z-index: 4;\n            display: none;\n        }\n        .mwstal-dots {\n            display: none;\n            grid-template-columns: repeat(8, 1fr);\n            gap: 15px;\n            align-content: center;\n        }\n        .mwstal-dots span {\n            width: 9px; height: 9px;\n            margin: auto;\n            border-radius: 50%;\n            background: #8f9498;\n        }\n        .mwstal-lines {\n            display: none;\n            grid-template-columns: repeat(10, 1fr);\n            gap: 13px;\n        }\n        .mwstal-lines span {\n            width: 5px; height: 100%;\n            border-radius: 5px;\n            background: #858a8d;\n        }\n        .mwstal-diamond {\n            display: none;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 18px;\n            transform: rotate(45deg) scale(.7);\n        }\n        .mwstal-diamond span { border: 4px solid #858a8d; }\n        .mwstal-wave { display: none; }\n        .mwstal-wave span {\n            display: block;\n            height: 28%;\n            margin: 10% 0;\n            border-top: 4px solid #858a8d;\n            border-radius: 50%;\n            transform: skewX(-15deg);\n        }\n\n        \/* DIMENSIONS *\/\n        .mwstal-dimension {\n            position: absolute;\n            color: #c5c8d0;\n            font: 10px monospace;\n            z-index: 20;\n        }\n        .mwstal-width { left: 50%; bottom: -45px; transform: translateX(-50%); }\n        .mwstal-height { right: -65px; top: 50%; transform: rotate(90deg); }\n\n        \/* PREVIEW FOOTER *\/\n        .mwstal-preview-bottom strong {\n            display: block;\n            color: #ffffff;\n            font-size: 12px;\n            letter-spacing: .08em;\n        }\n        .mwstal-preview-bottom small {\n            display: block;\n            margin-top: 6px;\n            color: #c5c8d0;\n            font-size: 8px;\n            letter-spacing: .12em;\n        }\n        .mwstal-preview-bottom > span {\n            color: #d0d3da;\n            font: 9px monospace;\n        }\n\n        \/* PANEL *\/\n        .mwstal-panel {\n            padding: 25px;\n            background: var(--mw-panel);\n            border: 1px solid var(--mw-border);\n            border-radius: 28px;\n        }\n        .mwstal-step {\n            padding-bottom: 24px;\n            margin-bottom: 24px;\n            border-bottom: 1px solid #242830;\n        }\n        .mwstal-step:last-of-type { border-bottom: 0; }\n        .mwstal-step-head {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            margin-bottom: 15px;\n        }\n        .mwstal-step-head span {\n            width: 28px; height: 28px;\n            display: grid;\n            place-items: center;\n            border-radius: 50%;\n            background: #191c22;\n            color: #c5c8d0;\n            font: 10px monospace;\n        }\n        .mwstal-step-head strong {\n            color: #ffffff;\n            font-size: 12px;\n        }\n\n        \/* OPTIONS *\/\n        .mwstal-options {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 7px;\n        }\n        .mwstal-option {\n            min-height: 75px;\n            padding: 12px;\n            text-align: left;\n            color: #fff;\n            background: #0a0c10;\n            border: 1px solid #252932;\n            border-radius: 12px;\n            cursor: pointer;\n            transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;\n        }\n        .mwstal-option:hover { background: #101319; }\n        .mwstal-option.active {\n            border-color: var(--mw-blue);\n            box-shadow: 0 0 0 1px var(--mw-blue);\n        }\n        .mwstal-option strong {\n            display: block;\n            color: #ffffff;\n            font-size: 11px;\n        }\n        .mwstal-option small {\n            display: block;\n            margin-top: 5px;\n            color: #c5c8d0;\n            font-size: 9px;\n            line-height: 1.4;\n        }\n\n        \/* FIELDS *\/\n        .mwstal-fields {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 7px;\n        }\n        .mwstal-fields label { position: relative; display: block; }\n        .mwstal-fields label > span {\n            display: block;\n            margin-bottom: 7px;\n            color: #c5c8d0;\n            font-size: 9px;\n        }\n        .mwstal-fields input {\n            width: 100%;\n            padding: 13px 30px 13px 12px;\n            color: #ffffff;\n            background: #0a0c10;\n            border: 1px solid #252932;\n            border-radius: 10px;\n            outline: none;\n            font-size: 14px;\n        }\n        .mwstal-fields input:focus { border-color: var(--mw-blue); }\n        .mwstal-fields em {\n            position: absolute;\n            right: 10px; bottom: 13px;\n            color: #c5c8d0;\n            font-size: 8px;\n            font-style: normal;\n        }\n\n        \/* COLORS *\/\n        .mwstal-colors {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 8px;\n        }\n        .mwstal-color {\n            padding: 6px;\n            color: #fff;\n            background: #0a0c10;\n            border: 1px solid #252932;\n            border-radius: 10px;\n            cursor: pointer;\n            transition: border-color .2s ease, box-shadow .2s ease;\n        }\n        .mwstal-color:hover,\n        .mwstal-color.active {\n            border-color: var(--mw-blue);\n            box-shadow: 0 0 0 1px var(--mw-blue);\n        }\n        .mwstal-color span {\n            display: block;\n            height: 28px;\n            margin-bottom: 5px;\n            border-radius: 6px;\n        }\n        .mwstal-color small {\n            color: #c5c8d0;\n            font: 8px monospace;\n            transition: color .2s ease;\n        }\n        .mwstal-color:hover small,\n        .mwstal-color.active small {\n            color: #ffffff;\n        }\n\n        \/* PRICE *\/\n        .mwstal-price-box { padding-top: 5px; }\n        .mwstal-price-line {\n            display: flex;\n            justify-content: space-between;\n            align-items: end;\n            margin-bottom: 18px;\n        }\n        .mwstal-price-line small {\n            display: block;\n            color: #c5c8d0;\n            font-size: 8px;\n            text-transform: uppercase;\n            letter-spacing: .12em;\n        }\n        #mwstal-price {\n            display: block;\n            margin-top: 5px;\n            color: #ffffff;\n            font-size: 40px;\n            line-height: 1;\n            letter-spacing: -.07em;\n        }\n        #mwstal-price em {\n            color: #c5c8d0;\n            font-size: 11px;\n            font-style: normal;\n            letter-spacing: 0;\n        }\n        .mwstal-price-line > span {\n            color: #c5c8d0;\n            font: 8px monospace;\n        }\n\n        \/* BUTTON *\/\n        .mwstal-submit {\n            width: 100%;\n            padding: 16px;\n            border: 0;\n            border-radius: 12px;\n            background: var(--mw-blue);\n            color: #fff;\n            font-size: 12px;\n            font-weight: 900;\n            letter-spacing: .02em;\n            cursor: pointer;\n            transition: background .2s ease, transform .2s ease;\n            text-decoration: none;\n            display: block;\n            text-align: center;\n        }\n        .mwstal-submit:hover {\n            background: #2756ff;\n            transform: translateY(-1px);\n            color: #fff;\n        }\n        .mwstal-submit:disabled {\n            opacity: .7;\n            cursor: not-allowed;\n            transform: none;\n        }\n\n        \/* RESPONSIVE *\/\n        @media (max-width: 1000px) {\n            .mwstal-head { grid-template-columns: 1fr; gap: 25px; }\n            .mwstal-grid { grid-template-columns: 1fr; }\n        }\n        @media (max-width: 650px) {\n            #mwstal-configurator { padding: 45px 14px; border-radius: 20px; }\n            .mwstal-head h2 { font-size: clamp(52px, 17vw, 80px); }\n            .mwstal-preview { min-height: 500px; border-radius: 20px; }\n            .mwstal-canvas { inset: 80px 20px 90px; }\n            .mwstal-radiator { width: 80%; height: 230px; }\n            .mwstal-options { grid-template-columns: 1fr; }\n            .mwstal-fields { grid-template-columns: 1fr; }\n            .mwstal-panel { padding: 18px; border-radius: 20px; }\n        }\n    <\/style>\n\n    <script>\n    (function () {\n        'use strict';\n\n        const root = document.getElementById('mwstal-configurator');\n        if (!root) return;\n\n        const state = {\n            type: 'standard',\n            typeName: 'Standard',\n            width: 100,\n            height: 60,\n            depth: 15,\n            pattern: 'dots',\n            patternName: '01 \/ Kropki',\n            ral: '9016',\n            color: '#f4f4f2'\n        };\n\n        const CONTACT_URL = 'https:\/\/mwstal.pl\/kontakt';\n        const ADD_TEXT = 'DODAJ KONFIGURACJ\u0118 \u2192';\n        const CONTACT_TEXT = 'KONTAKT \u2192';\n\n        function $(sel) { return root.querySelector(sel); }\n        function $$(sel) { return Array.from(root.querySelectorAll(sel)); }\n\n        function generateCode() {\n            const raw = [state.type, state.width, state.height, state.depth, state.pattern, state.ral].join('-');\n            let hash = 0;\n            for (let i = 0; i < raw.length; i++) {\n                hash = ((hash << 5) - hash) + raw.charCodeAt(i);\n                hash |= 0;\n            }\n            return 'MW-' + Math.abs(hash).toString().slice(0, 6).padStart(6, '0');\n        }\n\n        function calculatePrice() {\n            if (state.type === 'custom') return null;\n            const width = Number(state.width) || 0;\n            let price = Math.round((width \/ 100) * 450);\n            if (price < 100 && width > 0) price = 100;\n            return price;\n        }\n\n        function updatePrice() {\n            const el = $('#mwstal-price');\n            if (!el) return;\n            const price = calculatePrice();\n            el.innerHTML = price === null ? 'WYCENA' : price + ' <em>PLN<\/em>';\n        }\n\n        function updateButton() {\n            const btn = $('#mwstal-add-to-cart');\n            if (!btn) return;\n\n            if (state.type === 'custom') {\n                btn.textContent = CONTACT_TEXT;\n                btn.dataset.mode = 'contact';\n            } else {\n                btn.textContent = ADD_TEXT;\n                btn.dataset.mode = 'cart';\n            }\n        }\n\n        function updatePreview() {\n            const radiator = $('#mwstal-radiator');\n            if (!radiator) return;\n\n            const visualWidth = Math.min(90, Math.max(55, Number(state.width) \/ 1.2));\n            const visualHeight = Math.min(380, Math.max(220, Number(state.height) * 4.5));\n\n            radiator.style.width = visualWidth + '%';\n            radiator.style.height = visualHeight + 'px';\n\n            const widthLabel = $('#mwstal-width-label');\n            const heightLabel = $('#mwstal-height-label');\n            const typeLabel = $('#mwstal-type-label');\n            const colorLabel = $('#mwstal-color-label');\n            const codeLabel = $('#mwstal-code');\n\n            if (widthLabel) widthLabel.textContent = state.width + ' cm';\n            if (heightLabel) heightLabel.textContent = state.height + ' cm';\n            if (typeLabel) typeLabel.textContent = state.typeName.toUpperCase();\n            if (colorLabel) colorLabel.textContent = 'RAL ' + state.ral;\n            if (codeLabel) codeLabel.textContent = generateCode();\n\n            const body = $('#mwstal-body');\n            if (body) {\n                body.style.background =\n                    'linear-gradient(90deg, rgba(255,255,255,.25), transparent 15%, transparent 85%, rgba(0,0,0,.1)), ' +\n                    state.color;\n            }\n\n            $$('.mwstal-pattern').forEach(el => el.style.display = 'none');\n            const active = $('#mwstal-pattern-' + state.pattern);\n            if (active) {\n                active.style.display = (state.pattern === 'wave') ? 'block' : 'grid';\n            }\n\n            updatePrice();\n            updateButton();\n        }\n\n        \/\/ Type\n        $$('[data-type]').forEach(btn => {\n            btn.addEventListener('click', function () {\n                $$('[data-type]').forEach(b => b.classList.remove('active'));\n                this.classList.add('active');\n                state.type = this.dataset.type;\n                state.typeName = this.dataset.typeName;\n                updatePreview();\n            });\n        });\n\n        \/\/ Dimensions\n        ['width', 'height', 'depth'].forEach(field => {\n            const input = $('#mwstal-' + field);\n            if (!input) return;\n            input.addEventListener('input', function () {\n                let val = Number(this.value);\n                if (!Number.isFinite(val)) val = 0;\n                state[field] = val;\n                updatePreview();\n            });\n        });\n\n        \/\/ Pattern\n        $$('[data-pattern]').forEach(btn => {\n            btn.addEventListener('click', function () {\n                $$('[data-pattern]').forEach(b => b.classList.remove('active'));\n                this.classList.add('active');\n                state.pattern = this.dataset.pattern;\n                state.patternName = this.dataset.patternName;\n                updatePreview();\n            });\n        });\n\n        \/\/ Color\n        $$('[data-ral]').forEach(btn => {\n            btn.addEventListener('click', function () {\n                $$('[data-ral]').forEach(b => b.classList.remove('active'));\n                this.classList.add('active');\n                state.ral = this.dataset.ral;\n                state.color = this.dataset.color;\n                updatePreview();\n            });\n        });\n\n        \/\/ Add to cart \/ Kontakt\n        const addBtn = $('#mwstal-add-to-cart');\n        if (addBtn) {\n            addBtn.addEventListener('click', function (e) {\n                e.preventDefault();\n\n                \/\/ Tryb kontakt\n                if (this.dataset.mode === 'contact') {\n                    window.location.href = CONTACT_URL;\n                    return;\n                }\n\n                if (addBtn.dataset.loading === '1') return;\n\n                addBtn.dataset.loading = '1';\n                const originalText = addBtn.innerHTML;\n                addBtn.innerHTML = 'DODAWANIE...';\n                addBtn.disabled = true;\n\n                const productId = root.dataset.productId;\n                if (!productId) {\n                    alert('Nie znaleziono produktu konfiguratora.');\n                    resetBtn();\n                    return;\n                }\n\n                const data = new URLSearchParams();\n                data.append('action', 'mwstal_add_configuration');\n                data.append('nonce', '334ff20ddf');\n                data.append('product_id', productId);\n                data.append('code', generateCode());\n                data.append('type', state.type);\n                data.append('type_name', state.typeName);\n                data.append('width', state.width);\n                data.append('height', state.height);\n                data.append('depth', state.depth);\n                data.append('pattern', state.pattern);\n                data.append('pattern_name', state.patternName);\n                data.append('ral', state.ral);\n                data.append('color', state.color);\n\n                fetch('https:\/\/mwstal.pl\/wp-admin\/admin-ajax.php', {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application\/x-www-form-urlencoded; charset=UTF-8' },\n                    body: data.toString()\n                })\n                .then(r => {\n                    if (!r.ok) throw new Error('HTTP ' + r.status);\n                    return r.json();\n                })\n                .then(result => {\n                    if (result.success && result.data && result.data.cart_url) {\n                        window.location.href = result.data.cart_url;\n                        return;\n                    }\n                    const msg = (result.data && result.data.message) ? result.data.message : 'Nie uda\u0142o si\u0119 doda\u0107 konfiguracji.';\n                    alert(msg);\n                    resetBtn();\n                })\n                .catch(err => {\n                    console.error('MW STAL error:', err);\n                    alert('Wyst\u0105pi\u0142 b\u0142\u0105d. Spr\u00f3buj ponownie.');\n                    resetBtn();\n                });\n\n                function resetBtn() {\n                    addBtn.dataset.loading = '0';\n                    addBtn.disabled = false;\n                    addBtn.innerHTML = originalText;\n                }\n            });\n        }\n\n        \/\/ Init\n        updatePreview();\n    })();\n    <\/script>\n\n    \n\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mwstal.pl\/wp-json\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mwstal.pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mwstal.pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mwstal.pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mwstal.pl\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":4,"href":"https:\/\/mwstal.pl\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/mwstal.pl\/wp-json\/wp\/v2\/pages\/35\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/mwstal.pl\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}