{"id":42,"date":"2026-08-13T00:13:16","date_gmt":"2026-08-12T22:13:16","guid":{"rendered":"https:\/\/mwstal.pl\/?page_id=42"},"modified":"2026-08-13T00:46:44","modified_gmt":"2026-08-12T22:46:44","slug":"konfigurator-ggrok","status":"publish","type":"page","link":"https:\/\/mwstal.pl\/konfigurator-ggrok\/","title":{"rendered":"Konfigurator ggrok"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"42\" class=\"elementor elementor-42\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65fb1a2 e-con-full e-flex e-con e-parent\" data-id=\"65fb1a2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f3d6926 elementor-widget elementor-widget-shortcode\" data-id=\"f3d6926\" 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=\"mwg\" class=\"mwg\" data-product-id=\"41\">\n\n        <!-- HEADER -->\n        <header class=\"mwg-header\">\n            <div class=\"mwg-header-left\">\n                <span class=\"mwg-label\">Konfigurator maskownicy<\/span>\n                <h2>Zaprojektuj<br>swoj\u0105 maskownic\u0119<\/h2>\n            <\/div>\n            <p class=\"mwg-header-desc\">\n                Wybierz form\u0119, wymiary, wz\u00f3r, kolor i grubo\u015b\u0107 blachy.\n                Ka\u017cda konfiguracja jest unikalna i produkowana pod zam\u00f3wienie.\n            <\/p>\n        <\/header>\n\n        <div class=\"mwg-layout\">\n\n            <!-- ===================== PREVIEW ===================== -->\n            <div class=\"mwg-preview\">\n                <div class=\"mwg-preview-bg\"><\/div>\n\n                <div class=\"mwg-preview-top\">\n                    <span class=\"mwg-badge\">Live Preview<\/span>\n                    <span class=\"mwg-code\" id=\"mwg-code\">MW-000000<\/span>\n                <\/div>\n\n                <div class=\"mwg-stage\">\n                    <div class=\"mwg-radiator\" id=\"mwg-radiator\">\n                        <div class=\"mwg-top-edge\"><\/div>\n                        <div class=\"mwg-side left\"><\/div>\n                        <div class=\"mwg-side right\"><\/div>\n\n                        <div class=\"mwg-body\" id=\"mwg-body\">\n                            <!-- Patterns -->\n                            <div class=\"mwg-pattern dots active\" data-pattern=\"dots\">\n                                <i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i>                            <\/div>\n                            <div class=\"mwg-pattern lines\" data-pattern=\"lines\">\n                                <i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i>                            <\/div>\n                            <div class=\"mwg-pattern diamond\" data-pattern=\"diamond\">\n                                <i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i>                            <\/div>\n                            <div class=\"mwg-pattern wave\" data-pattern=\"wave\">\n                                <i><\/i><i><\/i><i><\/i><i><\/i>\n                            <\/div>\n                            <div class=\"mwg-pattern mesh\" data-pattern=\"mesh\">\n                                <i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i>                            <\/div>\n                            <div class=\"mwg-pattern hex\" data-pattern=\"hex\">\n                                <i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i>                            <\/div>\n                        <\/div>\n\n                        <div class=\"mwg-dim width\"><span id=\"mwg-w-label\">120 cm<\/span><\/div>\n                        <div class=\"mwg-dim height\"><span id=\"mwg-h-label\">60 cm<\/span><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"mwg-preview-bottom\">\n                    <div>\n                        <strong id=\"mwg-type-label\">STANDARD<\/strong>\n                        <small>Maskownica \u00b7 Custom Made<\/small>\n                    <\/div>\n                    <span id=\"mwg-color-label\">RAL 9016<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- ===================== PANEL ===================== -->\n            <aside class=\"mwg-panel\">\n\n                <!-- 1. FORMA -->\n                <div class=\"mwg-block\">\n                    <div class=\"mwg-block-head\">\n                        <span>01<\/span>\n                        <strong>Forma<\/strong>\n                    <\/div>\n                    <div class=\"mwg-options two\">\n                        <button type=\"button\" class=\"mwg-opt active\" data-type=\"standard\" data-type-name=\"Standard\">\n                            <strong>Standard<\/strong>\n                            <small>\u0141agodne zagi\u0119cie<\/small>\n                        <\/button>\n                        <button type=\"button\" class=\"mwg-opt\" data-type=\"kant\" data-type-name=\"Kant 90\u00b0\">\n                            <strong>Kant 90\u00b0<\/strong>\n                            <small>Ostre kraw\u0119dzie<\/small>\n                        <\/button>\n                        <button type=\"button\" class=\"mwg-opt\" data-type=\"bezbokow\" data-type-name=\"Bez bok\u00f3w\">\n                            <strong>Bez bok\u00f3w<\/strong>\n                            <small>Minimalizm<\/small>\n                        <\/button>\n                        <button type=\"button\" class=\"mwg-opt\" data-type=\"custom\" data-type-name=\"Nietypowa\">\n                            <strong>Nietypowa<\/strong>\n                            <small>Indywidualny projekt<\/small>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- 2. WYMIARY -->\n                <div class=\"mwg-block\">\n                    <div class=\"mwg-block-head\">\n                        <span>02<\/span>\n                        <strong>Wymiary<\/strong>\n                    <\/div>\n                    <div class=\"mwg-fields\">\n                        <label>\n                            <span>Szeroko\u015b\u0107<\/span>\n                            <input type=\"number\" id=\"mwg-width\" value=\"120\" 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=\"mwg-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=\"mwg-depth\" value=\"15\" min=\"5\" max=\"50\" step=\"1\">\n                            <em>cm<\/em>\n                        <\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- 3. WZ\u00d3R -->\n                <div class=\"mwg-block\">\n                    <div class=\"mwg-block-head\">\n                        <span>03<\/span>\n                        <strong>Wz\u00f3r<\/strong>\n                    <\/div>\n                    <div class=\"mwg-options three\">\n                        <button type=\"button\" class=\"mwg-opt active\" data-pattern=\"dots\" data-pattern-name=\"Kropki\">\n                            <strong>Kropki<\/strong>\n                        <\/button>\n                        <button type=\"button\" class=\"mwg-opt\" data-pattern=\"lines\" data-pattern-name=\"Linie\">\n                            <strong>Linie<\/strong>\n                        <\/button>\n                        <button type=\"button\" class=\"mwg-opt\" data-pattern=\"diamond\" data-pattern-name=\"Romb\">\n                            <strong>Romb<\/strong>\n                        <\/button>\n                        <button type=\"button\" class=\"mwg-opt\" data-pattern=\"wave\" data-pattern-name=\"Fala\">\n                            <strong>Fala<\/strong>\n                        <\/button>\n                        <button type=\"button\" class=\"mwg-opt\" data-pattern=\"mesh\" data-pattern-name=\"Siatka\">\n                            <strong>Siatka<\/strong>\n                        <\/button>\n                        <button type=\"button\" class=\"mwg-opt\" data-pattern=\"hex\" data-pattern-name=\"Hexagon\">\n                            <strong>Hexagon<\/strong>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- 4. KOLOR -->\n                <div class=\"mwg-block\">\n                    <div class=\"mwg-block-head\">\n                        <span>04<\/span>\n                        <strong>Kolor RAL<\/strong>\n                    <\/div>\n                    <div class=\"mwg-colors\">\n                                                <button type=\"button\" class=\"mwg-color active\"\n                            data-ral=\"9016\"\n                            data-color=\"#F4F4F2\"\n                            data-name=\"Biel\"\n                            title=\"RAL 9016 \u2014 Biel\">\n                            <span style=\"background:#F4F4F2\"><\/span>\n                            <small>9016<\/small>\n                        <\/button>\n                                                <button type=\"button\" class=\"mwg-color \"\n                            data-ral=\"9005\"\n                            data-color=\"#0A0A0B\"\n                            data-name=\"Czer\u0144\"\n                            title=\"RAL 9005 \u2014 Czer\u0144\">\n                            <span style=\"background:#0A0A0B\"><\/span>\n                            <small>9005<\/small>\n                        <\/button>\n                                                <button type=\"button\" class=\"mwg-color \"\n                            data-ral=\"7016\"\n                            data-color=\"#383E42\"\n                            data-name=\"Antracyt\"\n                            title=\"RAL 7016 \u2014 Antracyt\">\n                            <span style=\"background:#383E42\"><\/span>\n                            <small>7016<\/small>\n                        <\/button>\n                                                <button type=\"button\" class=\"mwg-color \"\n                            data-ral=\"7040\"\n                            data-color=\"#9DA1AA\"\n                            data-name=\"Szary\"\n                            title=\"RAL 7040 \u2014 Szary\">\n                            <span style=\"background:#9DA1AA\"><\/span>\n                            <small>7040<\/small>\n                        <\/button>\n                                                <button type=\"button\" class=\"mwg-color \"\n                            data-ral=\"9006\"\n                            data-color=\"#A5A5A5\"\n                            data-name=\"Aluminium\"\n                            title=\"RAL 9006 \u2014 Aluminium\">\n                            <span style=\"background:#A5A5A5\"><\/span>\n                            <small>9006<\/small>\n                        <\/button>\n                                                <button type=\"button\" class=\"mwg-color \"\n                            data-ral=\"8017\"\n                            data-color=\"#45302B\"\n                            data-name=\"Br\u0105z\"\n                            title=\"RAL 8017 \u2014 Br\u0105z\">\n                            <span style=\"background:#45302B\"><\/span>\n                            <small>8017<\/small>\n                        <\/button>\n                                                <button type=\"button\" class=\"mwg-color \"\n                            data-ral=\"6005\"\n                            data-color=\"#0F4C3A\"\n                            data-name=\"Ziele\u0144\"\n                            title=\"RAL 6005 \u2014 Ziele\u0144\">\n                            <span style=\"background:#0F4C3A\"><\/span>\n                            <small>6005<\/small>\n                        <\/button>\n                                                <button type=\"button\" class=\"mwg-color \"\n                            data-ral=\"5010\"\n                            data-color=\"#0E4C8A\"\n                            data-name=\"Niebieski\"\n                            title=\"RAL 5010 \u2014 Niebieski\">\n                            <span style=\"background:#0E4C8A\"><\/span>\n                            <small>5010<\/small>\n                        <\/button>\n                                                <button type=\"button\" class=\"mwg-color \"\n                            data-ral=\"3000\"\n                            data-color=\"#A72920\"\n                            data-name=\"Czerwie\u0144\"\n                            title=\"RAL 3000 \u2014 Czerwie\u0144\">\n                            <span style=\"background:#A72920\"><\/span>\n                            <small>3000<\/small>\n                        <\/button>\n                                                <button type=\"button\" class=\"mwg-color \"\n                            data-ral=\"1013\"\n                            data-color=\"#EAE3D2\"\n                            data-name=\"Per\u0142owy\"\n                            title=\"RAL 1013 \u2014 Per\u0142owy\">\n                            <span style=\"background:#EAE3D2\"><\/span>\n                            <small>1013<\/small>\n                        <\/button>\n                                                <button type=\"button\" class=\"mwg-color \"\n                            data-ral=\"7035\"\n                            data-color=\"#C5C7C4\"\n                            data-name=\"Jasny szary\"\n                            title=\"RAL 7035 \u2014 Jasny szary\">\n                            <span style=\"background:#C5C7C4\"><\/span>\n                            <small>7035<\/small>\n                        <\/button>\n                                                <button type=\"button\" class=\"mwg-color \"\n                            data-ral=\"7021\"\n                            data-color=\"#2F3234\"\n                            data-name=\"Ciemny szary\"\n                            title=\"RAL 7021 \u2014 Ciemny szary\">\n                            <span style=\"background:#2F3234\"><\/span>\n                            <small>7021<\/small>\n                        <\/button>\n                                            <\/div>\n                <\/div>\n\n                <!-- 5. GRUBO\u015a\u0106 + MONTA\u017b -->\n                <div class=\"mwg-block\">\n                    <div class=\"mwg-block-head\">\n                        <span>05<\/span>\n                        <strong>Grubo\u015b\u0107 i monta\u017c<\/strong>\n                    <\/div>\n                    <div class=\"mwg-options three\">\n                        <button type=\"button\" class=\"mwg-opt active\" data-thickness=\"1.0\">\n                            <strong>1,0 mm<\/strong>\n                        <\/button>\n                        <button type=\"button\" class=\"mwg-opt\" data-thickness=\"1.2\">\n                            <strong>1,2 mm<\/strong>\n                        <\/button>\n                        <button type=\"button\" class=\"mwg-opt\" data-thickness=\"1.5\">\n                            <strong>1,5 mm<\/strong>\n                        <\/button>\n                    <\/div>\n                    <div class=\"mwg-options two\" style=\"margin-top:10px;\">\n                        <button type=\"button\" class=\"mwg-opt active\" data-mount=\"wall\" data-mount-name=\"Na \u015bcianie\">\n                            <strong>Na \u015bcianie<\/strong>\n                        <\/button>\n                        <button type=\"button\" class=\"mwg-opt\" data-mount=\"floor\" data-mount-name=\"Wolnostoj\u0105ca\">\n                            <strong>Wolnostoj\u0105ca<\/strong>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- 6. ILO\u015a\u0106 -->\n                <div class=\"mwg-block\">\n                    <div class=\"mwg-block-head\">\n                        <span>06<\/span>\n                        <strong>Ilo\u015b\u0107<\/strong>\n                    <\/div>\n                    <div class=\"mwg-qty\">\n                        <button type=\"button\" id=\"mwg-qty-minus\">\u2212<\/button>\n                        <input type=\"number\" id=\"mwg-qty\" value=\"1\" min=\"1\" max=\"20\">\n                        <button type=\"button\" id=\"mwg-qty-plus\">+<\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- CENA + PRZYCISK -->\n                <div class=\"mwg-footer\">\n                    <div class=\"mwg-price-row\">\n                        <div>\n                            <small>Szacowana cena<\/small>\n                            <div class=\"mwg-price\" id=\"mwg-price\">540 <em>PLN<\/em><\/div>\n                        <\/div>\n                        <span class=\"mwg-note\" id=\"mwg-note\">za 1 szt.<\/span>\n                    <\/div>\n                    <button type=\"button\" id=\"mwg-submit\" class=\"mwg-submit\">\n                        Dodaj konfiguracj\u0119 \u2192\n                    <\/button>\n                <\/div>\n\n            <\/aside>\n        <\/div>\n    <\/section>\n\n    <style>\n    \/* ========== BASE ========== *\/\n    #mwg {\n        --blue: #1a56ff;\n        --bg: #07080a;\n        --panel: #0e1014;\n        --border: #23262e;\n        --text: #ffffff;\n        --muted: #a8adb8;\n        --radius: 24px;\n        width: 100%;\n        padding: 60px 24px;\n        background: var(--bg);\n        color: var(--text);\n        border-radius: 32px;\n        font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n        box-sizing: border-box;\n    }\n    #mwg *, #mwg *::before, #mwg *::after { box-sizing: border-box; }\n\n    .mwg-error {\n        padding: 24px;\n        background: #111;\n        color: #fff;\n        border-radius: 16px;\n        text-align: center;\n    }\n\n    \/* HEADER *\/\n    .mwg-header {\n        max-width: 1280px;\n        margin: 0 auto 48px;\n        display: grid;\n        grid-template-columns: 1fr 380px;\n        gap: 40px;\n        align-items: end;\n    }\n    .mwg-label {\n        display: inline-block;\n        margin-bottom: 14px;\n        font-size: 11px;\n        font-weight: 700;\n        letter-spacing: 0.18em;\n        text-transform: uppercase;\n        color: var(--muted);\n    }\n    .mwg-header h2 {\n        margin: 0;\n        font-size: clamp(42px, 6vw, 72px);\n        line-height: 0.9;\n        font-weight: 800;\n        letter-spacing: -0.04em;\n        color: #fff;\n    }\n    .mwg-header-desc {\n        margin: 0;\n        font-size: 15px;\n        line-height: 1.65;\n        color: var(--muted);\n    }\n\n    \/* LAYOUT *\/\n    .mwg-layout {\n        max-width: 1280px;\n        margin: 0 auto;\n        display: grid;\n        grid-template-columns: 1.45fr 0.9fr;\n        gap: 16px;\n    }\n\n    \/* PREVIEW *\/\n    .mwg-preview {\n        position: relative;\n        min-height: 680px;\n        border: 1px solid var(--border);\n        border-radius: var(--radius);\n        background: linear-gradient(160deg, #12151c 0%, #07080a 100%);\n        overflow: hidden;\n    }\n    .mwg-preview-bg {\n        position: absolute;\n        inset: 0;\n        opacity: 0.25;\n        background-image:\n            linear-gradient(#ffffff0a 1px, transparent 1px),\n            linear-gradient(90deg, #ffffff0a 1px, transparent 1px);\n        background-size: 40px 40px;\n    }\n    .mwg-preview-top,\n    .mwg-preview-bottom {\n        position: absolute;\n        left: 22px;\n        right: 22px;\n        z-index: 20;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .mwg-preview-top { top: 22px; }\n    .mwg-preview-bottom { bottom: 22px; }\n\n    .mwg-badge, .mwg-code {\n        padding: 7px 12px;\n        border: 1px solid #2c303a;\n        border-radius: 999px;\n        background: rgba(14,16,20,0.85);\n        font-size: 10px;\n        letter-spacing: 0.12em;\n        color: #fff;\n    }\n    .mwg-code { font-family: ui-monospace, monospace; }\n\n    .mwg-stage {\n        position: absolute;\n        inset: 90px 30px 100px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        perspective: 1000px;\n    }\n    .mwg-radiator {\n        position: relative;\n        width: 68%;\n        height: 280px;\n        transform: perspective(900px) rotateY(-9deg);\n        filter: drop-shadow(0 28px 40px rgba(0,0,0,0.55));\n        transition: width 0.35s ease, height 0.35s ease;\n    }\n    .mwg-body {\n        position: absolute;\n        inset: 0;\n        border-radius: 6px;\n        background: #f4f4f2;\n        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), inset 0 -18px 28px rgba(0,0,0,0.12);\n        overflow: hidden;\n    }\n    .mwg-top-edge {\n        position: absolute;\n        left: 0; right: 0;\n        top: -11px;\n        height: 16px;\n        border-radius: 4px;\n        background: #c0c2c4;\n        z-index: 5;\n    }\n    .mwg-side {\n        position: absolute;\n        top: 0; bottom: 0;\n        width: 14px;\n        background: #8e9296;\n        z-index: 6;\n    }\n    .mwg-side.left { left: -12px; transform: skewY(-7deg); }\n    .mwg-side.right { right: -12px; transform: skewY(7deg); }\n\n    \/* Patterns *\/\n    .mwg-pattern {\n        position: absolute;\n        inset: 10%;\n        display: none;\n        z-index: 3;\n    }\n    .mwg-pattern.active { display: grid; }\n\n    .mwg-pattern.dots {\n        grid-template-columns: repeat(8, 1fr);\n        gap: 12px;\n        align-content: center;\n    }\n    .mwg-pattern.dots i {\n        width: 8px; height: 8px;\n        margin: auto;\n        border-radius: 50%;\n        background: #7a7f84;\n    }\n\n    .mwg-pattern.lines {\n        grid-template-columns: repeat(12, 1fr);\n        gap: 8px;\n    }\n    .mwg-pattern.lines i {\n        background: #7a7f84;\n        border-radius: 3px;\n    }\n\n    .mwg-pattern.diamond {\n        grid-template-columns: repeat(4, 1fr);\n        gap: 14px;\n        transform: rotate(45deg) scale(0.72);\n    }\n    .mwg-pattern.diamond i {\n        border: 3px solid #7a7f84;\n        background: transparent;\n    }\n\n    .mwg-pattern.wave {\n        display: none;\n        flex-direction: column;\n        justify-content: space-evenly;\n    }\n    .mwg-pattern.wave.active { display: flex; }\n    .mwg-pattern.wave i {\n        height: 18%;\n        border-top: 3px solid #7a7f84;\n        border-radius: 50%;\n        transform: skewX(-12deg);\n    }\n\n    .mwg-pattern.mesh {\n        grid-template-columns: repeat(6, 1fr);\n        gap: 6px;\n    }\n    .mwg-pattern.mesh i {\n        border: 1px solid #7a7f84;\n        background: transparent;\n    }\n\n    .mwg-pattern.hex {\n        grid-template-columns: repeat(6, 1fr);\n        gap: 8px;\n        align-content: center;\n    }\n    .mwg-pattern.hex i {\n        aspect-ratio: 1;\n        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n        background: #7a7f84;\n        opacity: 0.7;\n    }\n\n    .mwg-dim {\n        position: absolute;\n        font: 11px ui-monospace, monospace;\n        color: var(--muted);\n        z-index: 10;\n    }\n    .mwg-dim.width {\n        left: 50%;\n        bottom: -42px;\n        transform: translateX(-50%);\n    }\n    .mwg-dim.height {\n        right: -58px;\n        top: 50%;\n        transform: rotate(90deg) translateX(50%);\n    }\n\n    .mwg-preview-bottom strong {\n        display: block;\n        font-size: 13px;\n        letter-spacing: 0.06em;\n        color: #fff;\n    }\n    .mwg-preview-bottom small {\n        display: block;\n        margin-top: 4px;\n        font-size: 10px;\n        color: var(--muted);\n        letter-spacing: 0.1em;\n    }\n    .mwg-preview-bottom > span {\n        font: 11px ui-monospace, monospace;\n        color: var(--muted);\n    }\n\n    \/* PANEL *\/\n    .mwg-panel {\n        background: var(--panel);\n        border: 1px solid var(--border);\n        border-radius: var(--radius);\n        padding: 22px;\n        display: flex;\n        flex-direction: column;\n        gap: 0;\n    }\n    .mwg-block {\n        padding-bottom: 20px;\n        margin-bottom: 20px;\n        border-bottom: 1px solid #1c1f27;\n    }\n    .mwg-block:last-of-type { border-bottom: 0; margin-bottom: 0; }\n\n    .mwg-block-head {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        margin-bottom: 12px;\n    }\n    .mwg-block-head span {\n        width: 26px; height: 26px;\n        display: grid;\n        place-items: center;\n        border-radius: 50%;\n        background: #161920;\n        font: 10px ui-monospace, monospace;\n        color: var(--muted);\n    }\n    .mwg-block-head strong {\n        font-size: 13px;\n        font-weight: 600;\n        color: #fff;\n    }\n\n    \/* OPTIONS *\/\n    .mwg-options {\n        display: grid;\n        gap: 8px;\n    }\n    .mwg-options.two { grid-template-columns: 1fr 1fr; }\n    .mwg-options.three { grid-template-columns: 1fr 1fr 1fr; }\n\n    .mwg-opt {\n        padding: 12px 10px;\n        text-align: left;\n        background: #0a0c10;\n        border: 1px solid #252932;\n        border-radius: 12px;\n        color: #fff;\n        cursor: pointer;\n        transition: 0.2s ease;\n    }\n    .mwg-opt:hover { background: #12151c; }\n    .mwg-opt.active {\n        border-color: var(--blue);\n        box-shadow: 0 0 0 1px var(--blue);\n    }\n    .mwg-opt strong {\n        display: block;\n        font-size: 12px;\n        font-weight: 600;\n    }\n    .mwg-opt small {\n        display: block;\n        margin-top: 3px;\n        font-size: 10px;\n        color: var(--muted);\n    }\n\n    \/* FIELDS *\/\n    .mwg-fields {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 8px;\n    }\n    .mwg-fields label { position: relative; display: block; }\n    .mwg-fields label > span {\n        display: block;\n        margin-bottom: 6px;\n        font-size: 10px;\n        color: var(--muted);\n    }\n    .mwg-fields input {\n        width: 100%;\n        padding: 12px 28px 12px 12px;\n        background: #0a0c10;\n        border: 1px solid #252932;\n        border-radius: 10px;\n        color: #fff;\n        font-size: 15px;\n        outline: none;\n    }\n    .mwg-fields input:focus { border-color: var(--blue); }\n    .mwg-fields em {\n        position: absolute;\n        right: 10px;\n        bottom: 13px;\n        font-size: 10px;\n        font-style: normal;\n        color: var(--muted);\n    }\n\n    \/* COLORS *\/\n    .mwg-colors {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 8px;\n    }\n    .mwg-color {\n        padding: 6px;\n        background: #0a0c10;\n        border: 1px solid #252932;\n        border-radius: 10px;\n        cursor: pointer;\n        transition: 0.2s ease;\n    }\n    .mwg-color:hover,\n    .mwg-color.active {\n        border-color: var(--blue);\n        box-shadow: 0 0 0 1px var(--blue);\n    }\n    .mwg-color span {\n        display: block;\n        height: 26px;\n        border-radius: 6px;\n        margin-bottom: 5px;\n    }\n    .mwg-color small {\n        display: block;\n        font: 9px ui-monospace, monospace;\n        color: var(--muted);\n        text-align: center;\n        transition: color 0.2s;\n    }\n    .mwg-color:hover small,\n    .mwg-color.active small {\n        color: #fff;\n    }\n\n    \/* QTY *\/\n    .mwg-qty {\n        display: flex;\n        align-items: center;\n        gap: 0;\n        max-width: 160px;\n    }\n    .mwg-qty button {\n        width: 42px;\n        height: 42px;\n        background: #0a0c10;\n        border: 1px solid #252932;\n        color: #fff;\n        font-size: 18px;\n        cursor: pointer;\n        transition: 0.2s;\n    }\n    .mwg-qty button:first-child { border-radius: 10px 0 0 10px; }\n    .mwg-qty button:last-child { border-radius: 0 10px 10px 0; }\n    .mwg-qty button:hover { background: #161920; }\n    .mwg-qty input {\n        width: 56px;\n        height: 42px;\n        text-align: center;\n        background: #0a0c10;\n        border: 1px solid #252932;\n        border-left: 0;\n        border-right: 0;\n        color: #fff;\n        font-size: 15px;\n        outline: none;\n    }\n\n    \/* FOOTER *\/\n    .mwg-footer {\n        margin-top: auto;\n        padding-top: 8px;\n    }\n    .mwg-price-row {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        margin-bottom: 16px;\n    }\n    .mwg-price-row small {\n        display: block;\n        font-size: 10px;\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        color: var(--muted);\n        margin-bottom: 4px;\n    }\n    .mwg-price {\n        font-size: 36px;\n        font-weight: 700;\n        letter-spacing: -0.04em;\n        line-height: 1;\n        color: #fff;\n    }\n    .mwg-price em {\n        font-size: 13px;\n        font-style: normal;\n        font-weight: 500;\n        color: var(--muted);\n        margin-left: 4px;\n    }\n    .mwg-note {\n        font: 11px ui-monospace, monospace;\n        color: var(--muted);\n    }\n\n    .mwg-submit {\n        width: 100%;\n        padding: 16px;\n        border: 0;\n        border-radius: 14px;\n        background: var(--blue);\n        color: #fff;\n        font-size: 14px;\n        font-weight: 700;\n        cursor: pointer;\n        transition: 0.2s ease;\n    }\n    .mwg-submit:hover {\n        background: #2a66ff;\n        transform: translateY(-1px);\n    }\n    .mwg-submit:disabled {\n        opacity: 0.65;\n        cursor: not-allowed;\n        transform: none;\n    }\n\n    \/* RESPONSIVE *\/\n    @media (max-width: 980px) {\n        .mwg-header { grid-template-columns: 1fr; gap: 20px; }\n        .mwg-layout { grid-template-columns: 1fr; }\n        .mwg-preview { min-height: 480px; }\n    }\n    @media (max-width: 560px) {\n        #mwg { padding: 36px 14px; border-radius: 20px; }\n        .mwg-header h2 { font-size: clamp(36px, 11vw, 48px); }\n        .mwg-options.two,\n        .mwg-options.three { grid-template-columns: 1fr 1fr; }\n        .mwg-fields { grid-template-columns: 1fr; }\n        .mwg-colors { grid-template-columns: repeat(4, 1fr); }\n        .mwg-panel { padding: 16px; }\n    }\n    <\/style>\n\n    <script>\n    (function () {\n        'use strict';\n\n        const root = document.getElementById('mwg');\n        if (!root) return;\n\n        const CONTACT_URL = 'https:\/\/mwstal.pl\/kontakt';\n\n        const state = {\n            type: 'standard',\n            typeName: 'Standard',\n            width: 120,\n            height: 60,\n            depth: 15,\n            pattern: 'dots',\n            patternName: 'Kropki',\n            ral: '9016',\n            color: '#F4F4F2',\n            colorName: 'Biel',\n            thickness: '1.0',\n            mount: 'wall',\n            mountName: 'Na \u015bcianie',\n            qty: 1\n        };\n\n        const $ = s => root.querySelector(s);\n        const $$ = s => Array.from(root.querySelectorAll(s));\n\n        function code() {\n            const raw = [state.type, state.width, state.height, state.depth, state.pattern, state.ral, state.thickness, state.mount].join('-');\n            let h = 0;\n            for (let i = 0; i < raw.length; i++) {\n                h = ((h << 5) - h) + raw.charCodeAt(i);\n                h |= 0;\n            }\n            return 'MW-' + Math.abs(h).toString().slice(0, 6).padStart(6, '0');\n        }\n\n        function calcPrice() {\n            if (state.type === 'custom') return null;\n\n            let base = (state.width \/ 100) * 450; \/\/ 450 PLN \/ mb\n\n            \/\/ Pattern complexity\n            const patternMul = {\n                dots: 1,\n                lines: 1.05,\n                diamond: 1.12,\n                wave: 1.15,\n                mesh: 1.18,\n                hex: 1.22\n            };\n            base *= (patternMul[state.pattern] || 1);\n\n            \/\/ Thickness\n            const thickMul = { '1.0': 1, '1.2': 1.12, '1.5': 1.28 };\n            base *= (thickMul[state.thickness] || 1);\n\n            \/\/ Mount\n            if (state.mount === 'floor') base *= 1.08;\n\n            let unit = Math.round(base);\n            if (unit < 180) unit = 180;\n\n            return unit * state.qty;\n        }\n\n        function updateUI() {\n            \/\/ Labels\n            $('#mwg-code').textContent = code();\n            $('#mwg-w-label').textContent = state.width + ' cm';\n            $('#mwg-h-label').textContent = state.height + ' cm';\n            $('#mwg-type-label').textContent = state.typeName.toUpperCase();\n            $('#mwg-color-label').textContent = 'RAL ' + state.ral;\n\n            \/\/ Size preview\n            const rad = $('#mwg-radiator');\n            const vw = Math.min(88, Math.max(52, state.width \/ 1.35));\n            const vh = Math.min(360, Math.max(200, state.height * 4.2));\n            rad.style.width = vw + '%';\n            rad.style.height = vh + 'px';\n\n            \/\/ Body color\n            const body = $('#mwg-body');\n            body.style.background =\n                'linear-gradient(90deg, rgba(255,255,255,.22), transparent 18%, transparent 82%, rgba(0,0,0,.12)), ' +\n                state.color;\n\n            \/\/ Pattern\n            $$('.mwg-pattern').forEach(p => p.classList.remove('active'));\n            const pat = $('[data-pattern=\"' + state.pattern + '\"]');\n            if (pat) pat.classList.add('active');\n\n            \/\/ Price\n            const price = calcPrice();\n            const priceEl = $('#mwg-price');\n            const noteEl = $('#mwg-note');\n\n            if (price === null) {\n                priceEl.innerHTML = 'WYCENA';\n                noteEl.textContent = 'kontakt';\n            } else {\n                priceEl.innerHTML = price + ' <em>PLN<\/em>';\n                noteEl.textContent = state.qty > 1 ? 'za ' + state.qty + ' szt.' : 'za 1 szt.';\n            }\n\n            \/\/ Button\n            const btn = $('#mwg-submit');\n            if (state.type === 'custom') {\n                btn.textContent = 'Kontakt \u2192';\n                btn.dataset.mode = 'contact';\n            } else {\n                btn.textContent = 'Dodaj konfiguracj\u0119 \u2192';\n                btn.dataset.mode = 'cart';\n            }\n        }\n\n        \/\/ Events \u2014 Type\n        $$('[data-type]').forEach(btn => {\n            btn.addEventListener('click', () => {\n                $$('[data-type]').forEach(b => b.classList.remove('active'));\n                btn.classList.add('active');\n                state.type = btn.dataset.type;\n                state.typeName = btn.dataset.typeName;\n                updateUI();\n            });\n        });\n\n        \/\/ Dimensions\n        ['width', 'height', 'depth'].forEach(key => {\n            const input = $('#mwg-' + key);\n            if (!input) return;\n            input.addEventListener('input', () => {\n                let v = Number(input.value);\n                if (!Number.isFinite(v)) v = 0;\n                state[key] = v;\n                updateUI();\n            });\n        });\n\n        \/\/ Pattern\n        $$('[data-pattern]').forEach(btn => {\n            btn.addEventListener('click', () => {\n                $$('[data-pattern]').forEach(b => b.classList.remove('active'));\n                btn.classList.add('active');\n                state.pattern = btn.dataset.pattern;\n                state.patternName = btn.dataset.patternName;\n                updateUI();\n            });\n        });\n\n        \/\/ Color\n        $$('[data-ral]').forEach(btn => {\n            btn.addEventListener('click', () => {\n                $$('[data-ral]').forEach(b => b.classList.remove('active'));\n                btn.classList.add('active');\n                state.ral = btn.dataset.ral;\n                state.color = btn.dataset.color;\n                state.colorName = btn.dataset.name || '';\n                updateUI();\n            });\n        });\n\n        \/\/ Thickness\n        $$('[data-thickness]').forEach(btn => {\n            btn.addEventListener('click', () => {\n                $$('[data-thickness]').forEach(b => b.classList.remove('active'));\n                btn.classList.add('active');\n                state.thickness = btn.dataset.thickness;\n                updateUI();\n            });\n        });\n\n        \/\/ Mount\n        $$('[data-mount]').forEach(btn => {\n            btn.addEventListener('click', () => {\n                $$('[data-mount]').forEach(b => b.classList.remove('active'));\n                btn.classList.add('active');\n                state.mount = btn.dataset.mount;\n                state.mountName = btn.dataset.mountName;\n                updateUI();\n            });\n        });\n\n        \/\/ Qty\n        const qtyInput = $('#mwg-qty');\n        $('#mwg-qty-minus').addEventListener('click', () => {\n            let v = Math.max(1, Number(qtyInput.value) - 1);\n            qtyInput.value = v;\n            state.qty = v;\n            updateUI();\n        });\n        $('#mwg-qty-plus').addEventListener('click', () => {\n            let v = Math.min(20, Number(qtyInput.value) + 1);\n            qtyInput.value = v;\n            state.qty = v;\n            updateUI();\n        });\n        qtyInput.addEventListener('input', () => {\n            let v = Math.max(1, Math.min(20, Number(qtyInput.value) || 1));\n            qtyInput.value = v;\n            state.qty = v;\n            updateUI();\n        });\n\n        \/\/ Submit\n        $('#mwg-submit').addEventListener('click', function (e) {\n            e.preventDefault();\n            const btn = this;\n\n            if (btn.dataset.mode === 'contact') {\n                window.location.href = CONTACT_URL;\n                return;\n            }\n\n            if (btn.dataset.loading === '1') return;\n\n            btn.dataset.loading = '1';\n            const original = btn.textContent;\n            btn.textContent = 'Dodawanie...';\n            btn.disabled = true;\n\n            const productId = root.dataset.productId;\n            if (!productId) {\n                alert('Brak produktu konfiguratora.');\n                reset();\n                return;\n            }\n\n            const data = new URLSearchParams();\n            data.append('action', 'mwstal_grok_add');\n            data.append('nonce', '851e71d5f5');\n            data.append('product_id', productId);\n            data.append('code', code());\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            data.append('thickness', state.thickness);\n            data.append('mount', state.mount);\n            data.append('mount_name', state.mountName);\n            data.append('qty', state.qty);\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(res => {\n                if (res.success && res.data && res.data.cart_url) {\n                    window.location.href = res.data.cart_url;\n                    return;\n                }\n                alert((res.data && res.data.message) || 'Nie uda\u0142o si\u0119 doda\u0107 do koszyka.');\n                reset();\n            })\n            .catch(err => {\n                console.error(err);\n                alert('Wyst\u0105pi\u0142 b\u0142\u0105d. Spr\u00f3buj ponownie.');\n                reset();\n            });\n\n            function reset() {\n                btn.dataset.loading = '0';\n                btn.disabled = false;\n                btn.textContent = original;\n            }\n        });\n\n        updateUI();\n    })();\n    <\/script>\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-42","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mwstal.pl\/wp-json\/wp\/v2\/pages\/42","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=42"}],"version-history":[{"count":10,"href":"https:\/\/mwstal.pl\/wp-json\/wp\/v2\/pages\/42\/revisions"}],"predecessor-version":[{"id":57,"href":"https:\/\/mwstal.pl\/wp-json\/wp\/v2\/pages\/42\/revisions\/57"}],"wp:attachment":[{"href":"https:\/\/mwstal.pl\/wp-json\/wp\/v2\/media?parent=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}