{"id":48740,"date":"2025-10-17T16:36:39","date_gmt":"2025-10-17T16:36:39","guid":{"rendered":"https:\/\/termotom.com\/?page_id=48740"},"modified":"2026-10-10T10:16:28","modified_gmt":"2026-10-10T10:16:28","slug":"pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca","status":"publish","type":"page","link":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\/","title":{"rendered":"Pomo\u0107nik za pokrov od punih polikarbonatnih plo\u010da"},"content":{"rendered":"<!DOCTYPE html>\n<html lang=\"sl-SI\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Pomo\u010dnik za Polikarbonatno Steklo<\/title>\n    <!-- Font Awesome for icons -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\" integrity=\"sha512-SfTiTlX6kk+qitfevl\/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+\/Sw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\n    <style>\n        :root {\n            --primary-color: #c0cb30;\n            --secondary-color: #000000;\n            --text-color: #4e4f51;\n            --background-light: #f8f8f8;\n            --background-white: #ffffff;\n            --border-color: #e0e0e0;\n            --button-color: #D11D55;\n            --button-hover-color: #a71744;\n            --disabled-color: #cccccc;\n            --disabled-bg-color: #f5f5f5;\n            --font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n            --info-color: #4e4f52; \/* Color for info texts *\/\n        }\n\n        body {\n            font-family: var(--font-family);\n            color: var(--text-color);\n            line-height: 1.6;\n            margin: 0;\n            padding: 20px;\n            background-color: var(--background-light);\n        }\n\n        #configurator-container {\n            max-width: 800px;\n            margin: 20px auto;\n            background-color: var(--background-white);\n            border-radius: 8px;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n        }\n\n        .configurator-step {\n            display: none; \/* Hide steps by default *\/\n            padding: 30px;\n            border-bottom: 1px solid var(--border-color);\n            animation: fadeIn 0.5s ease-in-out;\n        }\n\n        .configurator-step:last-child {\n            border-bottom: none;\n        }\n\n        .configurator-step.active {\n            display: block;\n        }\n\n        h2, h3 {\n            color: var(--secondary-color);\n            margin-top: 0;\n            margin-bottom: 20px;\n            border-bottom: 2px solid var(--primary-color);\n            padding-bottom: 10px;\n        }\n\n        h3 {\n            font-size: 1.2em;\n            margin-bottom: 15px;\n            border-bottom: none; \/* Remove border for subheadings *\/\n             padding-bottom: 0;\n        }\n        h4 {\n             font-size: 1em;\n             margin-top: 25px;\n             margin-bottom: 10px;\n             color: var(--secondary-color);\n        }\n\n        p {\n            margin-bottom: 15px;\n        }\n\n        .option-group {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 15px;\n            margin-bottom: 25px;\n        }\n\n        .option-button {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: flex-start; \/* Align content to the top *\/\n            padding: 5px;\n            border: 2px solid var(--border-color);\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            background-color: #fff;\n            text-align: center;\n            min-width: 120px;\n            min-height: 100px;\n            flex-grow: 1;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n        }\n         .option-button.panel-count-btn {\n            min-width: 80px;\n            flex-grow: 0;\n         }\n\n        .option-button img {\n            max-width: 100%;\n            height: 120px;\n            object-fit: contain;\n            margin-bottom: 10px;\n            border-radius: 4px;\n        }\n\n        .option-button span {\n            font-weight: 600;\n            font-size: 0.9em;\n             margin-top: auto;\n             padding-top: 5px;\n             flex-grow: 1; \/* Pushes price info down *\/\n             display: flex;\n             align-items: center;\n             justify-content: center;\n        }\n        \n        .option-button .price-info {\n            font-size: 0.85em;\n            font-weight: normal;\n           \/* color: var(--button-color); *\/\n            margin-top: 5px;\n        }\n\n\n        .option-button:hover:not(.disabled) {\n            border-color: var(--primary-color);\n            box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n            transform: translateY(-2px);\n        }\n\n        .option-button.selected {\n            border-color: var(--primary-color);\n            background-color: #f5f7dc;\n            box-shadow: 0 0 0 3px var(--primary-color);\n        }\n\n        .option-button.disabled {\n            cursor: not-allowed;\n            background-color: var(--disabled-bg-color);\n            color: #999;\n            opacity: 0.6;\n            box-shadow: none;\n            border-color: var(--border-color);\n        }\n         .option-button.disabled img {\n             filter: grayscale(100%);\n         }\n\n\n        .input-group {\n            margin-bottom: 10px;\n            display: flex;\n            flex-direction: column;\n            align-items: flex-start;\n        }\n        .input-group div {\n            display: flex;\n            align-items: center;\n            gap: 5px;\n        }\n\n        .input-group label {\n            display: block;\n            margin-bottom: 8px;\n            font-weight: 600;\n            font-size: 0.9em;\n        }\n\n        .input-group input[type=\"number\"],\n        .input-group input[type=\"text\"] {\n            padding: 10px;\n            border: 1px solid var(--border-color);\n            border-radius: 4px;\n            font-size: 1em;\n            width: 120px;\n            box-sizing: border-box;\n        }\n\n        .input-group .unit {\n            color: #777;\n            margin-left: 0;\n        }\n        .input-group button {\n             margin-top: 10px;\n             padding: 8px 15px;\n             font-size: 0.9em;\n             background-color: #6c757d;\n             color: white;\n             border: none;\n             border-radius: 4px;\n             cursor: pointer;\n        }\n         .input-group button:hover {\n              background-color: #5a6268;\n         }\n\n        .calculation-result {\n             margin-top: 10px;\n             padding: 10px;\n             background-color: #e9f5e9;\n             border: 1px solid #c8e6c9;\n             border-left: 3px solid #4CAF50;\n             border-radius: 4px;\n             font-size: 0.95em;\n             color: #2e7d32;\n         }\n          .calculation-result strong {\n             color: #1b5e20;\n          }\n\n        .nav-buttons {\n            display: flex;\n            justify-content: space-between;\n            margin-top: 30px;\n            padding-top: 20px;\n            border-top: 1px solid var(--border-color);\n        }\n\n        .nav-buttons button {\n            padding: 12px 25px;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n            font-weight: bold;\n            font-size: 1em;\n            transition: background-color 0.3s ease;\n        }\n\n        .nav-buttons .prev-btn {\n            background-color: #6c757d;\n            color: white;\n        }\n        .nav-buttons .prev-btn:hover {\n            background-color: #5a6268;\n        }\n\n        .nav-buttons .next-btn, #start-configurator-btn, #reset-configurator-btn, #add-to-cart-btn, #show-accessories-btn, #finalize-accessories-btn {\n            background-color: var(--button-color);\n            color: white;\n        }\n        .nav-buttons .next-btn:hover, #start-configurator-btn:hover, #reset-configurator-btn:hover, #add-to-cart-btn:hover, #show-accessories-btn:hover, #finalize-accessories-btn:hover {\n            background-color: var(--button-hover-color);\n        }\n\n        .nav-buttons button:disabled {\n            background-color: var(--disabled-color);\n            cursor: not-allowed;\n            opacity: 0.7;\n        }\n\n        #summary-table, #summary-table-final {\n            width: 100%;\n            border-collapse: collapse;\n            margin-bottom: 20px;\n            font-size: 0.95em;\n        }\n\n        #summary-table th, #summary-table td,\n        #summary-table-final th, #summary-table-final td {\n            border: 1px solid var(--border-color);\n            padding: 10px;\n            text-align: left;\n            vertical-align: middle;\n        }\n\n        #summary-table th, #summary-table-final th {\n            background-color: var(--background-light);\n            font-weight: 600;\n            font-size: 0.85em;\n            text-transform: uppercase;\n             white-space: nowrap;\n        }\n        #summary-table td, #summary-table-final td {\n            font-size: 0.9em;\n        }\n        #summary-table img, #summary-table-final img {\n            max-width: 40px;\n            height: auto;\n            vertical-align: middle;\n            margin-right: 8px;\n            border: 1px solid var(--border-color);\n            border-radius: 3px;\n        }\n        #summary-table td:nth-child(4), #summary-table td:nth-child(5), #summary-table td:nth-child(6),\n        #summary-table-final td:nth-child(4), #summary-table-final td:nth-child(5), #summary-table-final td:nth-child(6) {\n            text-align: right;\n            white-space: nowrap;\n        }\n         #summary-table tfoot td, #summary-table-final tfoot td {\n              font-weight: bold;\n         }\n\n        .summary-total {\n            margin-top: 20px;\n            text-align: right;\n            font-size: 1.2em;\n            font-weight: bold;\n        }\n\n        .summary-total span {\n             color: var(--button-color);\n        }\n\n        .roof-sketch-container {\n            text-align: center;\n            margin-bottom: 20px;\n        }\n        #roof-sketch-length, #roof-sketch-width {\n            display: block;\n            margin: 10px auto;\n            border: 1px solid var(--border-color);\n            max-width: 100%;\n            height: auto;\n            background-color: #fff;\n        }\n\n        .explanation-text {\n            font-size: 0.9em;\n            color: #555;\n            margin-bottom: 15px;\n            background-color: #f0f0f0;\n            padding: 10px;\n            border-radius: 4px;\n            border-left: 3px solid var(--primary-color);\n        }\n        \n        #combination-choices .option-button {\n            flex-direction: row;\n            justify-content: flex-start;\n            align-items: center;\n            text-align: left;\n            flex-grow: 0;\n            width: 100%;\n        }\n        #combination-choices .option-button span {\n            margin: 0;\n            padding: 0;\n            font-weight: normal;\n        }\n\n        .step-indicator {\n            text-align: center;\n            margin-bottom: 20px;\n            font-size: 0.9em;\n            color: #777;\n        }\n\n        .price-suffix {\n             font-size: 0.8em;\n             color: #666;\n             margin-left: 4px;\n        }\n\n        .hidden {\n            display: none !important;\n        }\n         #custom-cut-section {\n             margin-top: 20px;\n             padding-top: 15px;\n             border-top: 1px dashed var(--border-color);\n         }\n         #custom-cut-section label {\n             font-weight: normal;\n             color: var(--info-color);\n         }\n         #custom-cut-section input {\n              margin-top: 5px;\n         }\n         #alu-profile-sub-options {\n             margin-top: 20px;\n             padding-top: 15px;\n             border-top: 1px dashed var(--border-color);\n         }\n\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        \/* Responsive adjustments *\/\n        @media (max-width: 600px) {\n            body { padding: 10px; }\n            #configurator-container { margin: 10px auto; }\n            .configurator-step { padding: 15px; }\n            .option-group { gap: 10px; }\n            .option-button { min-width: 100px; padding: 10px; min-height: 80px;}\n            .option-button.panel-count-btn { min-width: 60px; padding: 8px 5px;}\n            .option-button img { height: 50px; }\n             .option-button span { font-size: 0.85em; }\n            .nav-buttons { flex-direction: column; gap: 10px;}\n            .nav-buttons button { width: 100%; }\n             .nav-buttons > div { width: 100%; display: flex; flex-direction: column; gap: 10px;}\n             .nav-buttons .prev-btn { order: 3; } \/* Move back button to bottom *\/\n            h2 { font-size: 1.2em; }\n            h3 { font-size: 1.05em; }\n             #summary-table th, #summary-table td, \n             #summary-table-final th, #summary-table-final td { padding: 6px; font-size: 0.8em; }\n             #summary-table img, #summary-table-final img { max-width: 30px;}\n            .input-group input[type=\"number\"], .input-group input[type=\"text\"] { width: 100px; }\n            .summary-total { font-size: 1.1em;}\n\n            #summary-table, #summary-table-final {\n                display: block;\n                width: 100%;\n                overflow-x: auto;\n                -webkit-overflow-scrolling: touch; \/* Za bolj gladko drsenje na iOS *\/\n            }\n\n        }\n\n\t#color-options, #thickness-options {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n        gap: 15px;\n    }\n\n\t.undertypecolor {\n\t    font-size:0.9em;\n\t    margin-top:-10px;\n\t    margin-bottom:10px;\n    }\n\n    .option-button {\n        position: relative; \n        overflow: hidden;   \n    }\n\n    .ribbon {\n        position: absolute;\n        z-index: 1;\n        padding: 4px 0;\n        color: white;\n        font-size: 0.75em;\n        font-weight: bold;\n        text-align: center;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        width: 160px;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);\n    }\n\n    .ribbon-top-right {\n        top: 26px;\n        right: -39px;\n        transform: rotate(45deg);\n    }\n    \n    .ribbon-recommendation {\n        background-color: var(--button-color);\n    }\n    .ribbon-purpose {\n        background-color: #28a745;\n    }\n    .ribbon-purpose-alt {\n        background-color: #17a2b8;\n    }\n\t\t\n\t\t\n\t\t#finalize-accessories-btn.is-loading,\n\t\t#add-to-cart-btn.is-loading {\n  position: relative;\n  opacity: .85;\n  cursor: wait;\n}\n\n#finalize-accessories-btn.is-loading::after,\n#add-to-cart-btn.is-loading::after {\n  content: \"\";\n  display: inline-block;\n  width: 14px;\n  height: 14px;\n  margin-left: 10px;\n  border: 2px solid rgba(255,255,255,.6);\n  border-top-color: rgba(255,255,255,1);\n  border-radius: 50%;\n  animation: kwspin .8s linear infinite;\n  vertical-align: -2px;\n}\n\n@keyframes kwspin {\n  to { transform: rotate(360deg); }\n}\n\n    <\/style>\n<\/head>\n<body>\n\n<div id=\"configurator-container\">\n\n    <!-- Step 1: Introduction -->\n    <div id=\"step-1\" class=\"configurator-step active\">\n        <h2>Pomo\u010dnik za Polikarbonatno Steklo<\/h2>\n        <p>Dobrodo\u0161li! Pomagali vam bomo sestaviti kosovnico materiala za va\u0161o novo streho, nadstre\u0161ek, predelno steno ali zasteklitev iz polikarbonatnega stekla (polnih polikarbonatnih plo\u0161\u010d).<\/p>\n        <p>Sledite korakom in na koncu boste prejeli podroben seznam potrebnega materiala z izra\u010dunanimi cenami.<\/p>\n        <div class=\"nav-buttons\" style=\"justify-content: flex-end;\">\n            <button id=\"start-configurator-btn\" class=\"next-btn\" onclick=\"nextStep()\">Za\u010dni<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Step 2: Choose Panel Color, Thickness -->\n    <div id=\"step-2\" class=\"configurator-step\">\n        <div class=\"step-indicator\">Korak 1 od 9<\/div>\n        <h2>Izberite lastnosti plo\u0161\u010de<\/h2>\n        <p>Izberite barvo in debelino polikarbonatnega stekla. Izbirate lahko samo med mo\u017enimi kombinacijami.<\/p>\n        \n        <h4>Barva plo\u0161\u010de<\/h4>\n\t    <div class=\"undertypecolor\">Izbirajte med prozornimi, mle\u010dnimi (opal), rjavimi (bronze) ali sivimi plo\u0161\u010dami. Barvne plo\u0161\u010de so manj svetlobno prepustne in nudijo bolj\u0161o za\u0161\u010dito pred soncem.<\/div>\n        <div class=\"option-group\" id=\"color-options\"><\/div>\n\n        <h4>Debelina plo\u0161\u010de<\/h4>\n\t    <div class=\"undertypecolor\">Tanj\u0161e plo\u0161\u010de (3-5 mm) so primerne za manj\u0161e nadstre\u0161ke in zasteklitve. Debelej\u0161e plo\u0161\u010de (6-12 mm) zagotavljajo ve\u010djo nosilnost in so primerne za ve\u010dje stre\u0161ne povr\u0161ine in zahtevnej\u0161e aplikacije.<\/div>\n        <div class=\"option-group\" id=\"thickness-options\"><\/div>\n\n        <div class=\"nav-buttons\">\n            <button class=\"prev-btn\" onclick=\"prevStep()\">Nazaj<\/button>\n            <button class=\"next-btn\" onclick=\"nextStep()\" disabled>Naprej<\/button>\n        <\/div>\n    <\/div>\n    \n    <!-- Step 3: Choose Length -->\n    <div id=\"step-3\" class=\"configurator-step\">\n        <div class=\"step-indicator\">Korak 2 od 9<\/div>\n        <h2>Izberite dol\u017eino plo\u0161\u010d<\/h2>\n        <p>Dol\u017eina plo\u0161\u010de ustreza razdalji od slemena do kapa va\u0161e strehe (glej skico).<\/p>\n        <div class=\"roof-sketch-container\">\n             <canvas id=\"roof-sketch-length\" width=\"400\" height=\"200\"><\/canvas>\n        <\/div>\n        <p>Izberite eno od standardnih dol\u017ein ali vpi\u0161ite svojo \u017eeleno dol\u017eino v centimetrih.<\/p>\n        <div class=\"input-group\">\n            <label for=\"custom-length\">Vpi\u0161ite dol\u017eino (od slemena do kapa):<\/label>\n            <div>\n                <input type=\"number\" id=\"custom-length\" placeholder=\"Npr. 320\" min=\"1\">\n                <span class=\"unit\">cm<\/span>\n                 <button onclick=\"selectCustomLength()\">Izra\u010dunaj potrebno dol\u017eino<\/button>\n            <\/div>\n             <div id=\"length-result\" class=\"calculation-result hidden\"><\/div>\n        <\/div>\n         <h4>Standardne dol\u017eine:<\/h4>\n        <div class=\"option-group\" id=\"length-options\"><\/div>\n         <div id=\"custom-cut-section\" class=\"input-group hidden\">\n             <hr style=\"width:100%; border-top: 1px dashed var(--border-color); margin: 15px 0;\">\n             <label for=\"custom-cut-length\">\u017delena dol\u017eina odreza (neobvezno):<\/label>\n             <p class=\"explanation-text\" style=\"font-size: 0.85em; margin-top: 0;\">\u010ce \u017eelite, da vam plo\u0161\u010de brezpla\u010dno odre\u017eemo na to\u010dno mero, jo vpi\u0161ite tukaj. Izbrana bo prva ve\u010dja standardna plo\u0161\u010da, ki jo bomo nato odrezali. \u010ce pustite prazno, boste prejeli izbrano standardno dol\u017eino.<\/p>\n             <div>\n                 <input type=\"number\" id=\"custom-cut-length\" placeholder=\"Npr. 315\" min=\"1\">\n                 <span class=\"unit\">cm<\/span>\n                  <button onclick=\"setCustomCut()\" style=\"margin-left: 10px;\">Potrdi odrez<\/button>\n             <\/div>\n             <div id=\"custom-cut-info\" style=\"font-size: 0.9em; color: var(--info-color); margin-top: 5px;\"><\/div>\n         <\/div>\n        <div class=\"nav-buttons\">\n            <button class=\"prev-btn\" onclick=\"prevStep()\">Nazaj<\/button>\n            <button class=\"next-btn\" onclick=\"nextStep()\" disabled>Naprej<\/button>\n        <\/div>\n    <\/div>\n    \n    <!-- Step 4: Choose Width \/ Number of Panels -->\n    <div id=\"step-4\" class=\"configurator-step\">\n        <div class=\"step-indicator\">Korak 3 od 9<\/div>\n        <h2>Dolo\u010dite \u0161irino strehe<\/h2>\n        <div class=\"roof-sketch-container\">\n             <canvas id=\"roof-sketch-width\" width=\"400\" height=\"200\"><\/canvas>\n        <\/div>\n    \n        <div id=\"panel-width-info\" class=\"explanation-text\"><\/div>\n    \n        <div class=\"input-group\">\n            <label for=\"custom-width\">Vpi\u0161ite skupno \u0161irino va\u0161e strehe:<\/label>\n            <div>\n                <input type=\"number\" id=\"custom-width\" placeholder=\"Npr. 480\" min=\"1\">\n                <span class=\"unit\">cm<\/span>\n                <button onclick=\"calculateWidthCombination()\">Izra\u010dunaj kombinacijo plo\u0161\u010d<\/button>\n            <\/div>\n            <div id=\"width-result\" class=\"calculation-result hidden\"><\/div>\n        <\/div>\n    \n        <div id=\"combination-options\" class=\"hidden\">\n            <h4>Izberite \u017eeleno kombinacijo plo\u0161\u010d:<\/h4>\n            <p class=\"explanation-text\" style=\"font-size: 0.85em;\">Predlagamo kombinacije, ki z najmanj\u0161im prese\u017ekom pokrijejo va\u0161o vpisano \u0161irino.<\/p>\n            <div class=\"option-group\" id=\"combination-choices\"><\/div>\n        <\/div>\n        \n        <div id=\"legacy-panel-count-section\" class=\"hidden\">\n             <h4>Izberite \u0161tevilo plo\u0161\u010d:<\/h4>\n             <div class=\"option-group\" id=\"panel-count-options\"><\/div>\n        <\/div>\n    \n        <div class=\"nav-buttons\">\n            <button class=\"prev-btn\" onclick=\"prevStep()\">Nazaj<\/button>\n            <button class=\"next-btn\" onclick=\"nextStep()\" disabled>Naprej<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Step 5: Choose Construction Type -->\n    <div id=\"step-5\" class=\"configurator-step\">\n         <div class=\"step-indicator\">Korak 4 od 9<\/div>\n        <h2>Izberite vrsto nosilne konstrukcije<\/h2>\n        <p>Izberite material va\u0161e nosilne konstrukcije (les ali kovina), da dolo\u010dimo ustrezne vijake.<\/p>\n        <div class=\"option-group\" id=\"construction-options\"><\/div>\n        <div class=\"nav-buttons\">\n            <button class=\"prev-btn\" onclick=\"prevStep()\">Nazaj<\/button>\n            <button class=\"next-btn\" onclick=\"nextStep();\" disabled>Naprej<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Step 6: Choose Profile Type -->\n    <div id=\"step-6\" class=\"configurator-step\">\n        <div class=\"step-indicator\">Korak 5 od 9<\/div>\n        <h2>Izberite vrsto monta\u017ee<\/h2>\n        <p>Pri monta\u017ei polikarbonatnega stekla se uporabljajo aluminijasti profili, ki zagotavljajo trdnost in vodotesnost spojev.<\/p>\n        <div class=\"option-group hidden\" id=\"profile-type-options\">\n             <!-- This is now hidden as we only have one option -->\n        <\/div>\n        <div id=\"alu-profile-sub-options\">\n            <h4>Kako potekajo va\u0161i nosilci?<\/h4>\n            <p>Ta izbira dolo\u010da, ali potrebujete vezne profile (za pre\u010dne nosilce) ali kombinacijo zgornjih profilov in podlo\u017ene gume (za vzdol\u017ene nosilce).<\/p>\n            <div class=\"option-group\" id=\"alu-direction-options\"><\/div>\n            <div id=\"alu-width-warning\" class=\"hidden\" style=\"margin-top: 15px; padding: 10px; background-color: #fff9e6; border: 1px solid #ffecb3; border-radius: 4px;\">\n                <p class=\"explanation-text\" style=\"background: none; border: none; padding: 0; margin-bottom: 10px;\">\n                    Za monta\u017eo s pokrivnimi profili morajo biti va\u0161i vzdol\u017eni nosilci (\u0161pirovci) \u0161iroki vsaj 50mm. \u010ce so o\u017eji, boste morali uporabiti vezne profile.\n                <\/p>\n                <label>\n                    <input type=\"checkbox\" id=\"narrow-beam-checkbox\" onclick=\"handleNarrowBeamCheck(this)\"> Moji nosilci so o\u017eji od 50mm.\n                <\/label>\n            <\/div>\n        <\/div>\n        <div class=\"nav-buttons\">\n            <button class=\"prev-btn\" onclick=\"prevStep()\">Nazaj<\/button>\n            <button class=\"next-btn\" onclick=\"nextStep();\" disabled>Naprej<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Step 7: Screws -->\n    <div id=\"step-7\" class=\"configurator-step\">\n        <div class=\"step-indicator\">Korak 6 od 9<\/div>\n        <h2>Pritrdilni material<\/h2>\n        <p>Glede na va\u0161e izbire smo pripravili predlog potrebnega pritrdilnega materiala.<\/p>\n        <p class=\"explanation-text\">\u0160tevilo vijakov, profilov in tesnil je izra\u010dunano glede na povr\u0161ino, \u0161tevilo plo\u0161\u010d in izbran na\u010din monta\u017ee.<\/p>\n        <div id=\"screw-info-result\"><\/div>\n        <div class=\"nav-buttons\">\n            <button class=\"prev-btn\" onclick=\"prevStep()\">Nazaj<\/button>\n            <button class=\"next-btn\" onclick=\"generateSummary(true); nextStep();\">Prika\u017ei povzetek<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Step 8: Initial Summary -->\n    <div id=\"step-8\" class=\"configurator-step\">\n        <div class=\"step-indicator\">Korak 7 od 9<\/div>\n        <h2>Povzetek va\u0161e izbire<\/h2>\n        <p>Preglejte izbrane artikle in koli\u010dine. S klikom na gumb \"Nadaljuj\" lahko osnovno ponudbo \u0161e prilagodite in artikle dodate v ko\u0161arico spletne trgovine, preverite mo\u017enosti dostave in pla\u010dil.<\/p>\n        <table id=\"summary-table\">\n            <thead>\n                <tr>\n                    <th>Artikel<\/th>\n                    <th>Slika<\/th>\n                    <th>Lastnosti<\/th>\n                    <th style=\"text-align: right;\">Koli\u010dina<\/th>\n                    <th style=\"text-align: right;\">Cena\/enoto<\/th>\n                    <th style=\"text-align: right;\">Skupaj<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody><\/tbody>\n            <tfoot><\/tfoot>\n        <\/table>\n\n        <div class=\"nav-buttons\">\n            <button class=\"prev-btn\" onclick=\"prevStep()\">Nazaj (Uredi)<\/button>\n            <div>\n                 <button id=\"reset-configurator-btn\" onclick=\"resetConfigurator()\" style=\"background-color: #6c757d; margin-right: 10px;\">Izberi ponovno<\/button>\n                 <button id=\"show-accessories-btn\" onclick=\"showAccessoryStep()\">Nadaljuj<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Step 9: Accessories -->\n    <div id=\"step-9\" class=\"configurator-step\">\n        <div class=\"step-indicator\">Korak 8 od 9<\/div>\n        <h2>Dodatne Mo\u017enosti in Opcijske izbire<\/h2>\n        <p>Izberite dodatno opremo za va\u0161e naro\u010dilo. Povzetek se bo sproti posodabljal.<\/p>\n        \n        <div id=\"accessory-options-container\"><\/div>\n\n        <div class=\"nav-buttons\">\n             <button class=\"prev-btn\" onclick=\"showStep(8);\">Nazaj na povzetek<\/button>\n             <button id=\"finalize-accessories-btn\" onclick=\"finalizeAccessories()\">Prika\u017ei posodobljen povzetek<\/button>\n        <\/div>\n    <\/div>\n    \n    <!-- Step 10: Final Summary -->\n    <div id=\"step-10\" class=\"configurator-step\">\n        <div class=\"step-indicator\">Korak 9 od 9<\/div>\n        <h2>Kon\u010dni povzetek<\/h2>\n        <p>Preglejte kon\u010dno kosovnico, vklju\u010dno z dodatno opremo. Pripravljeni ste za oddajo naro\u010dila.<\/p>\n        <table id=\"summary-table-final\">\n            <thead>\n                <tr>\n                    <th>Artikel<\/th>\n                    <th>Slika<\/th>\n                    <th>Lastnosti<\/th>\n                    <th style=\"text-align: right;\">Koli\u010dina<\/th>\n                    <th style=\"text-align: right;\">Cena\/enoto<\/th>\n                    <th style=\"text-align: right;\">Skupaj<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody><\/tbody>\n            <tfoot><\/tfoot>\n        <\/table>\n    \n        <div class=\"nav-buttons\">\n            <button class=\"prev-btn\" onclick=\"showStep(9)\">Nazaj (Dodatki)<\/button>\n            <div>\n                 <button id=\"reset-configurator-btn-final\" onclick=\"resetConfigurator()\" style=\"background-color: #6c757d; margin-right: 10px;\">Izberi ponovno<\/button>\n                 <button id=\"add-to-cart-btn\" onclick=\"addToCart()\">Dodaj v ko\u0161arico<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n\n<\/div>\n\n<script>\n    const productData = {\n        panels: {\n            'prozorna': {\n                2: { productId: 15517, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_PROZORNA_1mm-4mm-1-scaled.jpg' },\n                3: { productId: 15533, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_PROZORNA_1mm-4mm-1-scaled.jpg' },\n                4: { productId: 15591, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_PROZORNA_1mm-4mm-1-scaled.jpg' },\n                5: { productId: 15633, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_PROZORNA_5mm_7mm-scaled.jpg' },\n                6: { productId: 15675, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_PROZORNA_5mm_7mm-scaled.jpg' },\n                8: { productId: 15779, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_PROZORNA_8mm-10mm-scaled.jpg' },\n                9.5: { productId: 21301, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_PROZORNA_8mm-10mm-scaled.jpg' },\n                10: { productId: 15857, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_PROZORNA_8mm-10mm-scaled.jpg' },\n                12: { productId: 15883, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_PROZORNA_12mm-15mm-scaled.jpg' },\n                15: { productId: 15899, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_PROZORNA_12mm-15mm-scaled.jpg' },\n                20: { productId: 15915, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_PROZORNA_20mm-25mm-scaled.jpg' }\n            },\n            'mlecna_opal': {\n                3: { productId: 15549, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_OPAL_1mm-4mm-scaled.jpg' },\n                4: { productId: 21315, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_OPAL_1mm-4mm-1-scaled.jpg' },\n                6: { productId: 15701, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_OPAL_5mm_7mm-scaled.jpg' },\n                8: { productId: 15805, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_OPAL_8mm-10mm-scaled.jpg' }\n            },\n            'rjava_bronze': {\n                3: { productId: 15575, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_RJAVA_1mm-4mm-scaled.jpg' },\n                4: { productId: 15617, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_RJAVA_1mm-4mm-scaled.jpg' },\n                5: { productId: 15659, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_RJAVA_5mm_7mm-1-scaled.jpg' },\n                6: { productId: 15727, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_RJAVA_5mm_7mm-1-scaled.jpg' },\n                8: { productId: 15831, image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_RJAVA_8mm-10mm-scaled.jpg' }\n            },\n            'prosojno_siva': {\n                4: { productId: 18124, image: 'https:\/\/termotom.com\/wp-content\/uploads\/BST_7303.jpg' },\n                5: { productId: 18115, image: 'https:\/\/termotom.com\/wp-content\/uploads\/BST_7303.jpg' },\n                6: { productId: 18098, image: 'https:\/\/termotom.com\/wp-content\/uploads\/BST_7303.jpg' },\n                8: { productId: 18081, image: 'https:\/\/termotom.com\/wp-content\/uploads\/BST_7303.jpg' }\n            },\n            'crna': {\n                4: { productId: 18715, image: 'https:\/\/termotom.com\/wp-content\/uploads\/CRNAMAT_CRNASIJAJ-scaled.jpg' },\n                6: { productId: 18718, image: 'https:\/\/termotom.com\/wp-content\/uploads\/CRNAMAT_CRNASIJAJ-scaled.jpg' }\n            }\n        },\n        variations: {\n            15517:[{\"id\":15519,\"dim\":\"500x500\",\"price\":5.72},{\"id\":15521,\"dim\":\"1000x500\",\"price\":11.44},{\"id\":15523,\"dim\":\"1000x1000\",\"price\":22.88},{\"id\":15525,\"dim\":\"2050x1000\",\"price\":46.9},{\"id\":15527,\"dim\":\"2050x1500\",\"price\":70.47},{\"id\":15529,\"dim\":\"2050x500\",\"price\":23.57},{\"id\":15531,\"dim\":\"2050x3050\",\"price\":143}],\n            15533:[{\"id\":15535,\"dim\":\"500x500\",\"price\":8.58},{\"id\":15537,\"dim\":\"1000x500\",\"price\":17.16},{\"id\":15539,\"dim\":\"1000x1000\",\"price\":34.32},{\"id\":15541,\"dim\":\"2050x1000\",\"price\":70.36},{\"id\":15543,\"dim\":\"2050x1500\",\"price\":105.71},{\"id\":15545,\"dim\":\"2050x500\",\"price\":35.35},{\"id\":15547,\"dim\":\"2050x3050\",\"price\":214.5}],\n            15549:[{\"id\":15551,\"dim\":\"500x500\",\"price\":10.52},{\"id\":15553,\"dim\":\"1000x500\",\"price\":21.03},{\"id\":15555,\"dim\":\"1000x1000\",\"price\":42.06},{\"id\":15557,\"dim\":\"2050x1000\",\"price\":86.23},{\"id\":15559,\"dim\":\"2050x1500\",\"price\":129.34},{\"id\":15561,\"dim\":\"2050x500\",\"price\":43.11},{\"id\":15563,\"dim\":\"2050x3050\",\"price\":263},{\"id\":15565,\"dim\":\"2050x3500\",\"price\":301.8},{\"id\":15567,\"dim\":\"2050x4000\",\"price\":344.92},{\"id\":15569,\"dim\":\"2050x4500\",\"price\":388.03},{\"id\":15571,\"dim\":\"2050x5000\",\"price\":431.15},{\"id\":15573,\"dim\":\"2050x6100\",\"price\":526}],\n            15575:[{\"id\":15577,\"dim\":\"500x500\",\"price\":10.52},{\"id\":15579,\"dim\":\"1000x500\",\"price\":21.03},{\"id\":15581,\"dim\":\"1000x1000\",\"price\":42.06},{\"id\":15583,\"dim\":\"2050x1000\",\"price\":86.22},{\"id\":15585,\"dim\":\"2050x1500\",\"price\":129.54},{\"id\":15587,\"dim\":\"2050x500\",\"price\":43.32},{\"id\":15589,\"dim\":\"2050x3050\",\"price\":262.88}],\n            15591:[{\"id\":15593,\"dim\":\"500x500\",\"price\":11.44},{\"id\":15595,\"dim\":\"1000x500\",\"price\":22.88},{\"id\":15597,\"dim\":\"1000x1000\",\"price\":45.76},{\"id\":15599,\"dim\":\"2050x1000\",\"price\":93.81},{\"id\":15601,\"dim\":\"2050x1500\",\"price\":140.94},{\"id\":15603,\"dim\":\"2050x500\",\"price\":47.13},{\"id\":15605,\"dim\":\"2050x3050\",\"price\":286},{\"id\":15607,\"dim\":\"2050x3500\",\"price\":328.56},{\"id\":15609,\"dim\":\"2050x4000\",\"price\":375.23},{\"id\":15611,\"dim\":\"2050x4500\",\"price\":422.36},{\"id\":15613,\"dim\":\"2050x5000\",\"price\":469.04},{\"id\":15615,\"dim\":\"2050x6100\",\"price\":572.46}],\n            15617:[{\"id\":15619,\"dim\":\"500x500\",\"price\":14.01},{\"id\":15621,\"dim\":\"1000x500\",\"price\":28.02},{\"id\":15623,\"dim\":\"1000x1000\",\"price\":56.04},{\"id\":15625,\"dim\":\"2050x1000\",\"price\":114.88},{\"id\":15627,\"dim\":\"2050x1500\",\"price\":172.6},{\"id\":15629,\"dim\":\"2050x500\",\"price\":57.72},{\"id\":15631,\"dim\":\"2050x3050\",\"price\":350.25}],\n            18124:[{\"id\":18125,\"dim\":\"500x500\",\"price\":14.01},{\"id\":18126,\"dim\":\"1000x500\",\"price\":28.02},{\"id\":18127,\"dim\":\"1000x1000\",\"price\":56.04},{\"id\":18128,\"dim\":\"2050x1000\",\"price\":114.88},{\"id\":18129,\"dim\":\"2050x1500\",\"price\":172.32},{\"id\":18130,\"dim\":\"2050x500\",\"price\":57.44},{\"id\":18131,\"dim\":\"2050x3050\",\"price\":350.38}],\n            21315:[{\"id\":21316,\"dim\":\"500x500\",\"price\":13.34},{\"id\":21317,\"dim\":\"1000x500\",\"price\":26.69},{\"id\":21318,\"dim\":\"1000x1000\",\"price\":53.37},{\"id\":21319,\"dim\":\"2050x1000\",\"price\":109.41},{\"id\":21320,\"dim\":\"2050x1500\",\"price\":164.11},{\"id\":21321,\"dim\":\"2050x500\",\"price\":54.7},{\"id\":21322,\"dim\":\"2050x3050\",\"price\":333.7},{\"id\":21324,\"dim\":\"2050x3500\",\"price\":382.93},{\"id\":21325,\"dim\":\"2050x4000\",\"price\":437.63},{\"id\":21326,\"dim\":\"2050x4500\",\"price\":492.34},{\"id\":21327,\"dim\":\"2050x5000\",\"price\":547.04},{\"id\":21328,\"dim\":\"2050x6100\",\"price\":667.39}],\n            15633:[{\"id\":15635,\"dim\":\"500x500\",\"price\":14.03},{\"id\":15637,\"dim\":\"1000x500\",\"price\":28.06},{\"id\":15639,\"dim\":\"1000x1000\",\"price\":57.2},{\"id\":15641,\"dim\":\"2050x1000\",\"price\":117.26},{\"id\":15643,\"dim\":\"2050x1500\",\"price\":176.18},{\"id\":15645,\"dim\":\"2050x500\",\"price\":58.92},{\"id\":15647,\"dim\":\"2050x3050\",\"price\":357.5},{\"id\":15649,\"dim\":\"2050x3500\",\"price\":410.7},{\"id\":15651,\"dim\":\"2050x4000\",\"price\":469.04},{\"id\":15653,\"dim\":\"2050x4500\",\"price\":527.96},{\"id\":15655,\"dim\":\"2050x5000\",\"price\":586.3},{\"id\":15657,\"dim\":\"2050x6100\",\"price\":715.57}],\n            15659:[{\"id\":15661,\"dim\":\"500x500\",\"price\":17.05},{\"id\":15663,\"dim\":\"1000x500\",\"price\":35},{\"id\":15665,\"dim\":\"1000x1000\",\"price\":70},{\"id\":15667,\"dim\":\"2050x1000\",\"price\":143.5},{\"id\":15669,\"dim\":\"2050x1500\",\"price\":215.6},{\"id\":15671,\"dim\":\"2050x500\",\"price\":72.1},{\"id\":15673,\"dim\":\"2050x3050\",\"price\":437.5}],\n            18115:[{\"id\":18116,\"dim\":\"500x500\",\"price\":17.05},{\"id\":18117,\"dim\":\"1000x500\",\"price\":35.01},{\"id\":18118,\"dim\":\"1000x1000\",\"price\":70.01},{\"id\":18119,\"dim\":\"2050x1000\",\"price\":143.53},{\"id\":18120,\"dim\":\"2050x1500\",\"price\":215.29},{\"id\":18121,\"dim\":\"2050x500\",\"price\":71.76},{\"id\":18122,\"dim\":\"2050x3050\",\"price\":437.76}],\n            15675:[{\"id\":15677,\"dim\":\"500x500\",\"price\":17.16},{\"id\":15679,\"dim\":\"1000x500\",\"price\":34.33},{\"id\":15681,\"dim\":\"1000x1000\",\"price\":68.65},{\"id\":15683,\"dim\":\"2050x1000\",\"price\":140.73},{\"id\":15685,\"dim\":\"2050x1500\",\"price\":211.44},{\"id\":15687,\"dim\":\"2050x500\",\"price\":70.71},{\"id\":15689,\"dim\":\"2050x3050\",\"price\":429.06},{\"id\":15691,\"dim\":\"2050x3500\",\"price\":492.91},{\"id\":15693,\"dim\":\"2050x4000\",\"price\":562.93},{\"id\":15695,\"dim\":\"2050x4500\",\"price\":633.64},{\"id\":15697,\"dim\":\"2050x5000\",\"price\":703.66},{\"id\":15699,\"dim\":\"2050x6100\",\"price\":858.81},{\"id\":20262,\"dim\":\"2100x500\",\"price\":68.65},{\"id\":20263,\"dim\":\"2100x1000\",\"price\":137.3},{\"id\":20264,\"dim\":\"2100x1500\",\"price\":205.95},{\"id\":20265,\"dim\":\"2100x2000\",\"price\":274.6},{\"id\":20266,\"dim\":\"2100x3000\",\"price\":411.89},{\"id\":20267,\"dim\":\"2100x3500\",\"price\":480.54},{\"id\":20268,\"dim\":\"2100x4000\",\"price\":549.19},{\"id\":20269,\"dim\":\"2100x4500\",\"price\":617.84},{\"id\":20270,\"dim\":\"2100x5000\",\"price\":686.49},{\"id\":20260,\"dim\":\"500x500\",\"price\":16.35},{\"id\":20259,\"dim\":\"2100x6100\",\"price\":837.52}],\n            15701:[{\"id\":15703,\"dim\":\"500x500\",\"price\":21.07},{\"id\":15705,\"dim\":\"1000x500\",\"price\":42.13},{\"id\":15707,\"dim\":\"1000x1000\",\"price\":84.26},{\"id\":15709,\"dim\":\"2050x1000\",\"price\":172.74},{\"id\":15711,\"dim\":\"2050x1500\",\"price\":259.11},{\"id\":15713,\"dim\":\"2050x500\",\"price\":86.37},{\"id\":15715,\"dim\":\"2050x3050\",\"price\":526.85},{\"id\":15717,\"dim\":\"2050x3500\",\"price\":604.58},{\"id\":15719,\"dim\":\"2050x4000\",\"price\":690.95},{\"id\":15721,\"dim\":\"2050x4500\",\"price\":777.72},{\"id\":15723,\"dim\":\"2050x5000\",\"price\":863.69},{\"id\":15725,\"dim\":\"2050x6100\",\"price\":1053.7}],\n            15727:[{\"id\":15729,\"dim\":\"500x500\",\"price\":21.07},{\"id\":15731,\"dim\":\"1000x500\",\"price\":42.13},{\"id\":15733,\"dim\":\"1000x1000\",\"price\":84.26},{\"id\":15735,\"dim\":\"2050x1000\",\"price\":172.73},{\"id\":15737,\"dim\":\"2050x1500\",\"price\":259.52},{\"id\":15739,\"dim\":\"2050x500\",\"price\":86.79},{\"id\":15741,\"dim\":\"2050x3050\",\"price\":526.63},{\"id\":15743,\"dim\":\"2050x3500\",\"price\":604.99},{\"id\":15745,\"dim\":\"2050x4000\",\"price\":690.93},{\"id\":15747,\"dim\":\"2050x4500\",\"price\":777.72},{\"id\":15749,\"dim\":\"2050x5000\",\"price\":863.67},{\"id\":15751,\"dim\":\"2050x6100\",\"price\":1054.09}],\n            18098:[{\"id\":18099,\"dim\":\"500x500\",\"price\":21.07},{\"id\":18100,\"dim\":\"1000x500\",\"price\":42.13},{\"id\":18101,\"dim\":\"1000x1000\",\"price\":84.26},{\"id\":18102,\"dim\":\"2050x1000\",\"price\":172.74},{\"id\":18103,\"dim\":\"2050x1500\",\"price\":259.11},{\"id\":18104,\"dim\":\"2050x500\",\"price\":86.37},{\"id\":18105,\"dim\":\"2050x3050\",\"price\":526.85},{\"id\":18106,\"dim\":\"2050x3500\",\"price\":604.58},{\"id\":18107,\"dim\":\"2050x4000\",\"price\":690.95},{\"id\":18108,\"dim\":\"2050x4500\",\"price\":777.32},{\"id\":18109,\"dim\":\"2050x5000\",\"price\":863.69},{\"id\":18110,\"dim\":\"2050x6100\",\"price\":1053.7}],\n            18718:[{\"id\":18719,\"dim\":\"1250x1025\",\"price\":121.4},{\"id\":18720,\"dim\":\"1250x2050\",\"price\":242.79}],\n            15779:[{\"id\":15781,\"dim\":\"500x500\",\"price\":22.88},{\"id\":15783,\"dim\":\"1000x500\",\"price\":45.77},{\"id\":15785,\"dim\":\"1000x1000\",\"price\":91.53},{\"id\":15787,\"dim\":\"2050x1000\",\"price\":187.64},{\"id\":15789,\"dim\":\"2050x1500\",\"price\":281.91},{\"id\":15791,\"dim\":\"2050x500\",\"price\":94.28},{\"id\":15793,\"dim\":\"2050x3050\",\"price\":572.06},{\"id\":15795,\"dim\":\"2050x3500\",\"price\":657.19},{\"id\":15797,\"dim\":\"2050x4000\",\"price\":750.55},{\"id\":15799,\"dim\":\"2050x4500\",\"price\":844.82},{\"id\":15801,\"dim\":\"2050x5000\",\"price\":938.18},{\"id\":15803,\"dim\":\"2050x6100\",\"price\":1145.04}],\n            15805:[{\"id\":15807,\"dim\":\"500x500\",\"price\":27.98},{\"id\":15809,\"dim\":\"1000x500\",\"price\":55.97},{\"id\":15811,\"dim\":\"1000x1000\",\"price\":111.93},{\"id\":15813,\"dim\":\"2050x1000\",\"price\":229.46},{\"id\":15815,\"dim\":\"2050x1500\",\"price\":344.18},{\"id\":15817,\"dim\":\"2050x500\",\"price\":114.73},{\"id\":15819,\"dim\":\"2050x3050\",\"price\":699.84},{\"id\":15821,\"dim\":\"2050x3500\",\"price\":803.1},{\"id\":15823,\"dim\":\"2050x4000\",\"price\":917.83},{\"id\":15825,\"dim\":\"2050x4500\",\"price\":1032.55},{\"id\":15827,\"dim\":\"2050x5000\",\"price\":1147.28},{\"id\":15829,\"dim\":\"2050x6100\",\"price\":1399.68}],\n            15831:[{\"id\":15833,\"dim\":\"500x500\",\"price\":27.98},{\"id\":15835,\"dim\":\"1000x500\",\"price\":55.97},{\"id\":15837,\"dim\":\"1000x1000\",\"price\":111.93},{\"id\":15839,\"dim\":\"2050x1000\",\"price\":229.46},{\"id\":15841,\"dim\":\"2050x1500\",\"price\":344.18},{\"id\":15843,\"dim\":\"2050x500\",\"price\":114.73},{\"id\":15845,\"dim\":\"2050x3050\",\"price\":699.84},{\"id\":15847,\"dim\":\"2050x3500\",\"price\":803.1},{\"id\":15849,\"dim\":\"2050x4000\",\"price\":917.83},{\"id\":15851,\"dim\":\"2050x4500\",\"price\":1032.55},{\"id\":15853,\"dim\":\"2050x5000\",\"price\":1147.28},{\"id\":15855,\"dim\":\"2050x6100\",\"price\":1399.68}],\n            18081:[{\"id\":18082,\"dim\":\"500x500\",\"price\":27.98},{\"id\":18083,\"dim\":\"1000x500\",\"price\":55.97},{\"id\":18084,\"dim\":\"1000x1000\",\"price\":111.93},{\"id\":18085,\"dim\":\"2050x1000\",\"price\":229.46},{\"id\":18086,\"dim\":\"2050x1500\",\"price\":344.18},{\"id\":18087,\"dim\":\"2050x500\",\"price\":114.73},{\"id\":18088,\"dim\":\"2050x3050\",\"price\":699.84},{\"id\":18089,\"dim\":\"2050x3500\",\"price\":803.1},{\"id\":18090,\"dim\":\"2050x4000\",\"price\":917.83},{\"id\":18091,\"dim\":\"2050x4500\",\"price\":1032.55},{\"id\":18092,\"dim\":\"2050x5000\",\"price\":1147.28},{\"id\":18093,\"dim\":\"2050x6100\",\"price\":1399.68}],\n            21301:[{\"id\":21302,\"dim\":\"500x500\",\"price\":28.81},{\"id\":21303,\"dim\":\"1000x500\",\"price\":57.62},{\"id\":21304,\"dim\":\"1000x1000\",\"price\":115.24},{\"id\":21305,\"dim\":\"2050x1000\",\"price\":236.24},{\"id\":21306,\"dim\":\"2050x1500\",\"price\":354.36},{\"id\":21307,\"dim\":\"2050x500\",\"price\":118.12},{\"id\":21308,\"dim\":\"2050x3050\",\"price\":720.54},{\"id\":21310,\"dim\":\"2050x4000\",\"price\":944.97},{\"id\":21311,\"dim\":\"2050x4500\",\"price\":1063.09},{\"id\":21312,\"dim\":\"2050x5000\",\"price\":1181.21},{\"id\":21313,\"dim\":\"2050x6100\",\"price\":1441.08}],\n            15857:[{\"id\":15859,\"dim\":\"500x500\",\"price\":28.06},{\"id\":15861,\"dim\":\"1000x500\",\"price\":57.21},{\"id\":15863,\"dim\":\"1000x1000\",\"price\":114.41},{\"id\":15865,\"dim\":\"2050x1000\",\"price\":234.54},{\"id\":15867,\"dim\":\"2050x1500\",\"price\":352.38},{\"id\":15869,\"dim\":\"2050x500\",\"price\":117.84},{\"id\":15871,\"dim\":\"2050x3050\",\"price\":715.06},{\"id\":15873,\"dim\":\"2050x3500\",\"price\":821.46},{\"id\":15875,\"dim\":\"2050x4000\",\"price\":938.16},{\"id\":15877,\"dim\":\"2050x4500\",\"price\":1056},{\"id\":15879,\"dim\":\"2050x5000\",\"price\":1172.7},{\"id\":15881,\"dim\":\"2050x6100\",\"price\":1431.27},{\"id\":20287,\"dim\":\"500x500\",\"price\":27.24},{\"id\":20288,\"dim\":\"2100x500\",\"price\":114.41},{\"id\":20289,\"dim\":\"2100x1000\",\"price\":228.82},{\"id\":20290,\"dim\":\"2100x1500\",\"price\":343.22},{\"id\":20291,\"dim\":\"2100x2000\",\"price\":457.63},{\"id\":20292,\"dim\":\"2100x3000\",\"price\":686.45},{\"id\":20293,\"dim\":\"2100x3500\",\"price\":800.86},{\"id\":20294,\"dim\":\"2100x4000\",\"price\":915.26},{\"id\":20295,\"dim\":\"2100x4500\",\"price\":1029.67},{\"id\":20296,\"dim\":\"2100x5000\",\"price\":1144.08},{\"id\":20286,\"dim\":\"2100x6100\",\"price\":1395.78}],\n            15883:[{\"id\":15885,\"dim\":\"500x500\",\"price\":38.21},{\"id\":15887,\"dim\":\"1000x500\",\"price\":76.41},{\"id\":15889,\"dim\":\"1000x1000\",\"price\":152.82},{\"id\":15891,\"dim\":\"2050x1000\",\"price\":313.28},{\"id\":15893,\"dim\":\"2050x1500\",\"price\":470.69},{\"id\":15895,\"dim\":\"2050x500\",\"price\":157.4},{\"id\":15897,\"dim\":\"2050x3050\",\"price\":955.13}],\n            15899:[{\"id\":15901,\"dim\":\"500x500\",\"price\":47.7},{\"id\":15903,\"dim\":\"1000x500\",\"price\":95.41},{\"id\":15905,\"dim\":\"1000x1000\",\"price\":190.81},{\"id\":15907,\"dim\":\"2050x1000\",\"price\":391.16},{\"id\":15909,\"dim\":\"2050x1500\",\"price\":587.69},{\"id\":15911,\"dim\":\"2050x500\",\"price\":196.53},{\"id\":15913,\"dim\":\"2050x3050\",\"price\":1192.56}],\n            15915:[{\"id\":15917,\"dim\":\"500x500\",\"price\":63.6},{\"id\":15919,\"dim\":\"1000x500\",\"price\":127.2},{\"id\":15921,\"dim\":\"1000x1000\",\"price\":254.4},{\"id\":15923,\"dim\":\"2050x1000\",\"price\":521.52},{\"id\":15925,\"dim\":\"2050x1500\",\"price\":783.55},{\"id\":15927,\"dim\":\"2050x500\",\"price\":262.03},{\"id\":15929,\"dim\":\"2050x3050\",\"price\":1590}],\n            18715:[{\"id\":18716,\"dim\":\"1250x1025\",\"price\":80.06},{\"id\":18717,\"dim\":\"1250x2050\",\"price\":161.43}],\n            18718:[{\"id\":18719,\"dim\":\"1250x1025\",\"price\":121.4},{\"id\":18720,\"dim\":\"1250x2050\",\"price\":242.79}]\n        },\n        accessories: {\n            alu_joining_profile: { id: 17802, name: 'Alu dvojni vezni profil', img: 'https:\/\/termotom.com\/wp-content\/uploads\/ALU_VEZNI_S_TESNILI-scaled-1.jpg' },\n            alu_top_profile: { id: 14082, name: 'Alu pokrivni profil 60mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/POKRIVNI_60MM.jpg' },\n            alu_top_profile_50mm: { id: 14071, name: 'Alu pokrivni profil 50mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/50MM_POKRIVNI.jpg' },\n            alu_top_profile_80mm: { id: 14096, name: 'Alu pokrivni profil 80mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/POKRIVNI_80MM.jpg' },\n            alu_l_profile_end_cap: { id: 18790, name: 'Aluminijast L profil, zaklju\u010dni element', img: 'https:\/\/termotom.com\/wp-content\/uploads\/81.jpg', price: 0.50 },\n            alu_rubber_gasket: { id: 14107, name: 'Podlo\u017ena guma 60mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/GUMA_PODLOZNA_60.jpg' },\n            alu_rubber_gasket_50mm: { id: 16198, name: 'Podlo\u017ena guma 50mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/GUMA_PODLOZNA_50.jpg' },\n            alu_rubber_gasket_80mm: { id: 14108, name: 'Podlo\u017ena guma 80mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/GUMA_PODLOZNA_80-scaled.jpg' },\n            alu_drip_profile: {\n                '6': { id: 14206, name: 'Alu odkapni profil za 6 mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/ODKAPNIK_6MM.jpg' },\n                '8': { id: 14210, name: 'Alu odkapni profil za 8 mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/ODKAPNIK_8MM.jpg' },\n                '10': { id: 14214, name: 'Alu odkapni profil za 10 mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/ODKAPNIK_10MM.jpg' },\n                '16': { id: 14218, name: 'Alu odkapni profil za 16 mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/ODKAPNIK_16MM.jpg' },\n                '20': { id: 14222, name: 'Alu odkapni profil za 20 mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/ODKAPNIK_20MM.jpg' }\n            },\n             screws: {\n                wood: {\n                    fi19: [\n                        { id: 20967, length: 50, price: 21, perSet: 50, name: 'Vijak lesni 6,5x50 fi19' },\n                        { id: 20971, length: 75, price: 27.5, perSet: 50, name: 'Vijak lesni 6,5x75 fi19' }\n                    ],\n                    fi29: [\n                        { id: 20969, length: 50, price: 32.5, perSet: 50, name: 'Vijak lesni 6,5x50 fi29' },\n                        { id: 20973, length: 75, price: 39, perSet: 50, name: 'Vijak lesni 6,5x75 fi29' }\n                    ]\n                },\n                metal: {\n                    fi19: [\n                        { id: 20957, length: 32, price: 18.5, perSet: 50, name: 'Vijak kovinski 6,3x32 fi19' },\n                        { id: 20961, length: 50, price: 21, perSet: 50, name: 'Vijak kovinski 6,3x50 fi19' },\n                        { id: 20965, length: 64, price: 25, perSet: 50, name: 'Vijak kovinski 6,3x64 fi19' }\n                    ],\n                    fi29: [\n                        { id: 20959, length: 32, price: 30, perSet: 50, name: 'Vijak kovinski 6,3x32 fi29' },\n                        { id: 20963, length: 50, price: 32.5, perSet: 50, name: 'Vijak kovinski 6,3x50 fi29' }\n                    ]\n                },\n                img: 'https:\/\/termotom.com\/wp-content\/uploads\/Vijak-lesni-fi19.jpg'\n            },\n            alu_cover_profile_53mm: { id: 14109, name: 'Alu okrasni pokrov 53mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/OKRASNI_POKROV_50MM.jpg' },\n            alu_cover_profile_63mm: { id: 14120, name: 'Alu okrasni pokrov 63mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/OKRASNI_POKROV_60MM.jpg' },\n            alu_cover_profile_83mm: { id: 14132, name: 'Alu okrasni pokrov 83mm', img: 'https:\/\/termotom.com\/wp-content\/uploads\/OKRASNI_POKROV_80MM.jpg' },\n            drobni_material: { id: 14321, price: 24.75, name: 'Drobni monta\u017eni material', img: 'https:\/\/termotom.com\/wp-content\/uploads\/MONTAZNI_MATERIAL_KOMPLET1.jpg' },\n            silikonski_kit: { id: 14314, price: 11.95, name: 'Silikon, brezkislinski, za polikarbonat', img: 'https:\/\/termotom.com\/wp-content\/uploads\/silikon-ottoseal-scaled.jpg' },\n            silikonski_trak: { id: 18854, price: 53.40, name: 'Silikonski trak PU8137, 30m', img: 'https:\/\/termotom.com\/wp-content\/uploads\/91.jpg'},\n            fi50_washers: {\n                10: {\n                    siva: { id: 14315, price: 7.00, perSet: 10, name: 'Podlo\u017eka fi 50 mm (10mm, siva)', img: 'https:\/\/termotom.com\/wp-content\/uploads\/Termotom_produkti15.jpg' },\n                    rjava: { id: 14316, price: 7.00, perSet: 10, name: 'Podlo\u017eka fi 50 mm (10mm, rjava)', img: 'https:\/\/termotom.com\/wp-content\/uploads\/SPC.jpg' },\n                    bela: { id: 16197, price: 7.00, perSet: 10, name: 'Podlo\u017eka fi 50 mm (10mm, bela)', img: 'https:\/\/termotom.com\/wp-content\/uploads\/Termotom_produkti14.jpg' }\n                },\n                16: {\n                    bela: { id: 14317, price: 7.00, perSet: 10, name: 'Podlo\u017eka fi 50 mm (16mm, bela)', img: 'https:\/\/termotom.com\/wp-content\/uploads\/Termotom_produkti14.jpg' },\n                    siva: { id: 14318, price: 7.00, perSet: 10, name: 'Podlo\u017eka fi 50 mm (16mm, siva)', img: 'https:\/\/termotom.com\/wp-content\/uploads\/Termotom_produkti15.jpg' },\n                    rjava: { id: 14319, price: 7.00, perSet: 10, name: 'Podlo\u017eka fi 50 mm (16mm, rjava)', img: 'https:\/\/termotom.com\/wp-content\/uploads\/SPC.jpg' }\n                }\n            }\n        }\n    };\n    \n    const accessoryVariations = {\n        14071: [{\"id\":14072,\"len\":1000,\"price\":7.59},{\"id\":14073,\"len\":1500,\"price\":11.39},{\"id\":14074,\"len\":2000,\"price\":15.18},{\"id\":14075,\"len\":2500,\"price\":18.98},{\"id\":14076,\"len\":3000,\"price\":22.77},{\"id\":14077,\"len\":3500,\"price\":26.57},{\"id\":14078,\"len\":4000,\"price\":30.36},{\"id\":14079,\"len\":4500,\"price\":37.95},{\"id\":14080,\"len\":6000,\"price\":45.54},{\"id\":14081,\"len\":7000,\"price\":53.13}],\n        16198: [{\"id\":16199,\"len\":1000,\"price\":2.75},{\"id\":16200,\"len\":2000,\"price\":5.5},{\"id\":16201,\"len\":3000,\"price\":8.25},{\"id\":16202,\"len\":4000,\"price\":11},{\"id\":16203,\"len\":5000,\"price\":13.75},{\"id\":16204,\"len\":6000,\"price\":16.5},{\"id\":16205,\"len\":7000,\"price\":19.25},{\"id\":16206,\"len\":10000,\"price\":27.5},{\"id\":16207,\"len\":30000,\"price\":82.5}],\n        17802: [{\"id\":17803,\"len\":1000,\"price\":16.37},{\"id\":17804,\"len\":1500,\"price\":24.56},{\"id\":17805,\"len\":2000,\"price\":32.74},{\"id\":17806,\"len\":2500,\"price\":40.93},{\"id\":17807,\"len\":3000,\"price\":49.11},{\"id\":17808,\"len\":3500,\"price\":57.3},{\"id\":17809,\"len\":4000,\"price\":65.48},{\"id\":17810,\"len\":4500,\"price\":73.67},{\"id\":17811,\"len\":5000,\"price\":81.85},{\"id\":17812,\"len\":5500,\"price\":90.04},{\"id\":17813,\"len\":6000,\"price\":98.22},{\"id\":17814,\"len\":7000,\"price\":114.59},{\"id\":17815,\"len\":9000,\"price\":147.33}],\n        14082: [{\"id\":14083,\"len\":1000,\"price\":9.47},{\"id\":14084,\"len\":1500,\"price\":14.21},{\"id\":14085,\"len\":2000,\"price\":18.94},{\"id\":14086,\"len\":2500,\"price\":23.68},{\"id\":14087,\"len\":3000,\"price\":28.41},{\"id\":14088,\"len\":3500,\"price\":33.15},{\"id\":14089,\"len\":4000,\"price\":37.88},{\"id\":14090,\"len\":4500,\"price\":42.62},{\"id\":14091,\"len\":5000,\"price\":47.35},{\"id\":14092,\"len\":5500,\"price\":52.09},{\"id\":14093,\"len\":6000,\"price\":56.82},{\"id\":14094,\"len\":7000,\"price\":66.29},{\"id\":14095,\"len\":9000,\"price\":85.23}],\n        14096: [{\"id\":14097,\"len\":1000,\"price\":12.41},{\"id\":14098,\"len\":1500,\"price\":18.62},{\"id\":14099,\"len\":2000,\"price\":24.82},{\"id\":14100,\"len\":2500,\"price\":31.03},{\"id\":14101,\"len\":3000,\"price\":37.23},{\"id\":14102,\"len\":3500,\"price\":43.44},{\"id\":14103,\"len\":4000,\"price\":49.64},{\"id\":14104,\"len\":5000,\"price\":62.05},{\"id\":14105,\"len\":6000,\"price\":74.46},{\"id\":14106,\"len\":7000,\"price\":86.87}],\n        14107: [{\"id\":16163,\"len\":1000,\"price\":3.03},{\"id\":16164,\"len\":2000,\"price\":6.06},{\"id\":16165,\"len\":3000,\"price\":9.09},{\"id\":16166,\"len\":4000,\"price\":12.12},{\"id\":16167,\"len\":5000,\"price\":15.15},{\"id\":16168,\"len\":6000,\"price\":18.18},{\"id\":16169,\"len\":7000,\"price\":21.21},{\"id\":16170,\"len\":10000,\"price\":30.3},{\"id\":16171,\"len\":30000,\"price\":90.9}],\n        14108: [{\"id\":16172,\"len\":1000,\"price\":3.49},{\"id\":16173,\"len\":2000,\"price\":6.98},{\"id\":16174,\"len\":3000,\"price\":10.47},{\"id\":16175,\"len\":4000,\"price\":13.96},{\"id\":16176,\"len\":5000,\"price\":17.45},{\"id\":16177,\"len\":6000,\"price\":20.94},{\"id\":16178,\"len\":7000,\"price\":24.43},{\"id\":16179,\"len\":10000,\"price\":34.90},{\"id\":16180,\"len\":30000,\"price\":104.70}],\n        14109: [{\"id\":14110,\"len\":1000,\"price\":4.11},{\"id\":14111,\"len\":1500,\"price\":6.17},{\"id\":14112,\"len\":2000,\"price\":8.22},{\"id\":14113,\"len\":2500,\"price\":10.28},{\"id\":14114,\"len\":3000,\"price\":12.33},{\"id\":14115,\"len\":3500,\"price\":14.39},{\"id\":14116,\"len\":4000,\"price\":16.44},{\"id\":14117,\"len\":5000,\"price\":20.55},{\"id\":14118,\"len\":6000,\"price\":24.66},{\"id\":14119,\"len\":7000,\"price\":28.77}],\n        14120: [{\"id\":14121,\"len\":1000,\"price\":5.49},{\"id\":14122,\"len\":1500,\"price\":8.24},{\"id\":14123,\"len\":2000,\"price\":10.98},{\"id\":14124,\"len\":2500,\"price\":13.73},{\"id\":14125,\"len\":3000,\"price\":16.47},{\"id\":14126,\"len\":3500,\"price\":19.22},{\"id\":14127,\"len\":4000,\"price\":21.96},{\"id\":14128,\"len\":4500,\"price\":24.71},{\"id\":14129,\"len\":5000,\"price\":27.45},{\"id\":14130,\"len\":6000,\"price\":32.94},{\"id\":14131,\"len\":7000,\"price\":38.43}],\n        14132: [{\"id\":14133,\"len\":1000,\"price\":6.79},{\"id\":14134,\"len\":1500,\"price\":10.19},{\"id\":14135,\"len\":2000,\"price\":13.58},{\"id\":14136,\"len\":2500,\"price\":16.98},{\"id\":14137,\"len\":3000,\"price\":20.37},{\"id\":14138,\"len\":3500,\"price\":23.77},{\"id\":14139,\"len\":4000,\"price\":27.16},{\"id\":14140,\"len\":4500,\"price\":30.56},{\"id\":14141,\"len\":5000,\"price\":33.95},{\"id\":14142,\"len\":6000,\"price\":40.74},{\"id\":14143,\"len\":7000,\"price\":47.53}],\n        14206: [{\"id\":14207,\"len\":2100,\"price\":5.10},{\"id\":14208,\"len\":4250,\"price\":10.33},{\"id\":14209,\"len\":6350,\"price\":15.43}],\n        14210: [{\"id\":14211,\"len\":2100,\"price\":5.36},{\"id\":14212,\"len\":4250,\"price\":10.84},{\"id\":14213,\"len\":6350,\"price\":16.19}],\n        14214: [{\"id\":14215,\"len\":2100,\"price\":5.44},{\"id\":14216,\"len\":4250,\"price\":11.01},{\"id\":14217,\"len\":6350,\"price\":16.45}],\n        14218: [{\"id\":14219,\"len\":2100,\"price\":5.94},{\"id\":14220,\"len\":4250,\"price\":12.03},{\"id\":14221,\"len\":6350,\"price\":17.97}],\n        14222: [{\"id\":14223,\"len\":2000,\"price\":7.38},{\"id\":14224,\"len\":4000,\"price\":14.76},{\"id\":14225,\"len\":6000,\"price\":22.14}]\n    };\n\n    let currentStep = 1;\n    const totalSteps = 10;\n    let userSelection = {};\n    let baseCart = { items: [], notes: [], totalPrice: 0, totalAreaM2: 0 }; \n    let accessoriesChanged = false;\n\n    function resetUserSelection(){\n        userSelection = {\n            panel: { color: null, thickness: null, selectedProductId: null },\n            length: { panelLengthMm: null, customLengthCm: null, customCutCm: null },\n            width: { roofWidthCm: null, panelCombination: null, availableWidthsMm: [], totalAreaM2: 0 },\n            construction: { material: null },\n            profiles: { type: 'aluminum', aluDirection: null },\n            accessories: {\n                drobni_material: false,\n                silikonski_kit: true,\n                silikonski_trak: false,\n                bocni_profili: false,\n                podlozke_upgrade: null, \n                linijsko_vijacenje: false,\n                profil_upgrade: null,\n                okrasni_pokrov: false\n            },\n            cart: { items: [], notes: [], totalPrice: 0 }\n        };\n        baseCart = { items: [], notes: [], totalPrice: 0, totalAreaM2: 0 };\n        accessoriesChanged = false;\n    }\n\n    const steps = document.querySelectorAll('.configurator-step');\n    const colorOptionsContainer = document.getElementById('color-options');\n    const thicknessOptionsContainer = document.getElementById('thickness-options');\n    const lengthOptionsContainer = document.getElementById('length-options');\n    const panelCountOptionsContainer = document.getElementById('panel-count-options');\n    const constructionOptionsContainer = document.getElementById('construction-options');\n    const profileTypeOptionsContainer = document.getElementById('profile-type-options');\n    const aluDirectionOptionsContainer = document.getElementById('alu-direction-options');\n    const aluProfileSubOptions = document.getElementById('alu-profile-sub-options');\n    const accessoryOptionsContainer = document.getElementById('accessory-options-container');\n    const customLengthInput = document.getElementById('custom-length');\n    const lengthResultDiv = document.getElementById('length-result');\n    const customCutSection = document.getElementById('custom-cut-section');\n    const customCutInput = document.getElementById('custom-cut-length');\n    const customCutInfo = document.getElementById('custom-cut-info');\n    const panelWidthInfo = document.getElementById('panel-width-info');\n    const customWidthInput = document.getElementById('custom-width');\n    const widthResultDiv = document.getElementById('width-result');\n    const screwInfoResult = document.getElementById('screw-info-result');\n    const legacyPanelCountSection = document.getElementById('legacy-panel-count-section');\n    const combinationOptions = document.getElementById('combination-options');\n    const combinationChoices = document.getElementById('combination-choices');\n    const summaryTableBody = document.querySelector('#summary-table tbody');\n    const summaryTableFoot = document.querySelector('#summary-table tfoot');\n    const finalSummaryTableBody = document.querySelector('#summary-table-final tbody');\n    const finalSummaryTableFoot = document.querySelector('#summary-table-final tfoot');\n    const sketchLengthCanvas = document.getElementById('roof-sketch-length');\n    const sketchWidthCanvas = document.getElementById('roof-sketch-width');\n\n    function initializeConfigurator() {\n        resetUserSelection();\n        loadPanelSelectionOptions();\n        loadConstructionOptions();\n        loadProfileOptions();\n        drawRoofSketch(sketchLengthCanvas, 'length');\n        drawRoofSketch(sketchWidthCanvas, 'width');\n        showStep(1);\n    }\n\n    function showStep(stepNumber) {\n        steps.forEach(step => step.classList.remove('active'));\n        const currentStepElement = document.getElementById(`step-${stepNumber}`);\n        if (currentStepElement) {\n            currentStepElement.classList.add('active');\n             if (stepNumber === 6) {\n                \/\/ Pre-select aluminum profiles and show sub-options\n                userSelection.profiles.type = 'aluminum';\n                aluProfileSubOptions.classList.remove('hidden');\n            }\n             if (stepNumber === 8) {\n                displayCart(userSelection.cart, summaryTableBody, summaryTableFoot);\n            }\n             if (stepNumber === 10) {\n                displayCart(userSelection.cart, finalSummaryTableBody, finalSummaryTableFoot);\n            }\n            updateButtonStates(stepNumber);\n        }\n        currentStep = stepNumber;\n    }\n\n    function nextStep() {\n        if (currentStep < totalSteps) {\n            if (validateStep(currentStep)) {\n                if (currentStep === 2) loadLengthOptions();\n                if (currentStep === 3) loadWidthInfo();\n                if (currentStep === 6) updateScrewInfo();\n                \n                showStep(currentStep + 1);\n            } else {\n                 alert('Prosimo, dokon\u010dajte izbiro na trenutnem koraku.');\n            }\n        }\n    }\n\n    function prevStep() {\n        if (currentStep > 1) {\n            if(currentStep === 9) { \n                displayCart(baseCart, summaryTableBody, summaryTableFoot);\n            }\n            showStep(currentStep - 1);\n        }\n    }\n\n    function validateStep(step) {\n        switch(step) {\n            case 2: return userSelection.panel.color && userSelection.panel.thickness;\n            case 3: return userSelection.length.panelLengthMm !== null;\n            case 4: return userSelection.width.panelCombination !== null;\n            case 5: return userSelection.construction.material !== null;\n            case 6: \n                if (userSelection.profiles.type === 'aluminum' && userSelection.profiles.aluDirection) return true;\n                return false;\n            case 7: return true;\n            case 8: return true;\n            default: return true;\n        }\n    }\n\n    function updateButtonStates(stepNumber) {\n        const currentStepElement = document.getElementById(`step-${stepNumber}`);\n        if (!currentStepElement) return;\n\n        const nextBtn = currentStepElement.querySelector('.next-btn, #show-accessories-btn');\n        const prevBtn = currentStepElement.querySelector('.prev-btn');\n\n        if (prevBtn) {\n            prevBtn.disabled = (stepNumber === 1);\n        }\n\n        if (nextBtn) {\n            nextBtn.disabled = !validateStep(stepNumber);\n            if (stepNumber === 7) {\n                nextBtn.textContent = \"Prika\u017ei povzetek\";\n                 nextBtn.onclick = () => { generateSummary(true); nextStep(); };\n            } else if (stepNumber === 8) {\n                nextBtn.textContent = \"Nadaljuj\";\n                nextBtn.onclick = () => showAccessoryStep();\n            }\n            else {\n                nextBtn.textContent = \"Naprej\";\n                nextBtn.onclick = () => nextStep();\n            }\n        }\n    }\n\n    function loadPanelSelectionOptions() {\n        const colors = {\n            'prozorna': { name: 'Prozorna', image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_PROZORNA_1mm-4mm-1-scaled.jpg' },\n            'mlecna_opal': { name: 'Mle\u010dna \/ Opal', image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_OPAL_1mm-4mm-scaled.jpg' },\n            'rjava_bronze': { name: 'Rjava \/ Bronze', image: 'https:\/\/termotom.com\/wp-content\/uploads\/PC_RJAVA_1mm-4mm-scaled.jpg' },\n            'prosojno_siva': { name: 'Siva (prosojna)', image: 'https:\/\/termotom.com\/wp-content\/uploads\/BST_7303.jpg' },\n            'crna': { name: '\u010crna (neprosojna)', image: 'https:\/\/termotom.com\/wp-content\/uploads\/CRNAMAT_CRNASIJAJ-scaled.jpg' },\n        };\n\n        const allThicknesses = new Set();\n        Object.values(productData.panels).forEach(colorGroup => {\n            Object.keys(colorGroup).forEach(th => allThicknesses.add(parseFloat(th)));\n        });\n        const thicknesses = Array.from(allThicknesses).sort((a, b) => a - b);\n        \n        colorOptionsContainer.innerHTML = Object.keys(colors).map(key => `\n            <div class=\"option-button\" data-group=\"color\" data-value=\"${key}\" onclick=\"selectPanelOption(this)\">\n                <img decoding=\"async\" src=\"${colors[key].image}\" alt=\"${colors[key].name}\" loading=\"lazy\">\n                <span>${colors[key].name}<\/span>\n            <\/div>`).join('');\n        \n        thicknessOptionsContainer.innerHTML = thicknesses.map(th => `\n            <div class=\"option-button\" data-group=\"thickness\" data-value=\"${th}\" onclick=\"selectPanelOption(this)\">\n                <span>${th} mm<\/span>\n            <\/div>`).join('');\n    }\n\n    function selectPanelOption(button) {\n        const group = button.dataset.group;\n        let value = button.dataset.value;\n        if(group === 'thickness') value = parseFloat(value); \n\n        const container = button.parentElement;\n        const alreadySelected = button.classList.contains('selected');\n        \n        if (alreadySelected) {\n            button.classList.remove('selected');\n            userSelection.panel[group] = null;\n        } else {\n            container.querySelectorAll('.option-button').forEach(btn => btn.classList.remove('selected'));\n            button.classList.add('selected');\n            userSelection.panel[group] = value;\n        }\n        updateAvailableOptions();\n    }\n\n    function updateAvailableOptions() {\n        const { color, thickness } = userSelection.panel;\n\n        document.querySelectorAll('#color-options .option-button').forEach(btn => {\n            const colorKey = btn.dataset.value;\n            let isPossible = false;\n            if (productData.panels[colorKey]) {\n                for (const thickKey in productData.panels[colorKey]) {\n                    if (!thickness || thickKey == thickness) {\n                        isPossible = true; break;\n                    }\n                }\n            }\n            btn.classList.toggle('disabled', !isPossible);\n        });\n\n        document.querySelectorAll('#thickness-options .option-button').forEach(btn => {\n            const thickKey = btn.dataset.value;\n            let isPossible = false;\n            for (const colorKey in productData.panels) {\n                if ((!color || colorKey === color) && productData.panels[colorKey]?.[thickKey]) {\n                    isPossible = true; break;\n                }\n            }\n             btn.classList.toggle('disabled', !isPossible);\n        });\n        \n        if (userSelection.panel.color && userSelection.panel.thickness) {\n            const selectedProduct = productData.panels[userSelection.panel.color]?.[userSelection.panel.thickness];\n            userSelection.panel.selectedProductId = selectedProduct ? selectedProduct.productId : null;\n        } else {\n             userSelection.panel.selectedProductId = null;\n        }\n\n        updateButtonStates(currentStep);\n    }\n    \n    function loadLengthOptions() {\n        const productId = userSelection.panel.selectedProductId;\n        if (!productId || !productData.variations[productId]) {\n            lengthOptionsContainer.innerHTML = '<p class=\"explanation-text\" style=\"color: red;\">Za izbrano kombinacijo ni na voljo standardnih dol\u017ein. Prosimo, spremenite izbiro v prej\u0161njem koraku.<\/p>';\n            return;\n        }\n\n        const variations = productData.variations[productId];\n        const uniqueLengths = [...new Set(variations.map(v => parseInt(v.dim.split('x')[1])))].sort((a, b) => a - b);\n\n        lengthOptionsContainer.innerHTML = '';\n        uniqueLengths.forEach(lengthMm => {\n            const button = document.createElement('div');\n            button.className = 'option-button';\n            button.dataset.value = lengthMm;\n            button.onclick = () => selectStandardLength(button);\n            button.innerHTML = `<span>${lengthMm \/ 10} cm<\/span>`; \n            lengthOptionsContainer.appendChild(button);\n        });\n    }\n    \n    function selectStandardLength(button) {\n        const lengthMm = parseInt(button.dataset.value);\n        lengthOptionsContainer.querySelectorAll('.option-button').forEach(btn => btn.classList.remove('selected'));\n        button.classList.add('selected');\n\n        userSelection.length.panelLengthMm = lengthMm;\n        userSelection.length.customLengthCm = null; \n        customLengthInput.value = '';\n        \n        lengthResultDiv.innerHTML = `Izbrali ste standardno dol\u017eino: <strong>${lengthMm \/ 10} cm<\/strong>.`;\n        lengthResultDiv.classList.remove('hidden');\n        customCutSection.classList.remove('hidden');\n        customCutInput.max = lengthMm \/ 10;\n        customCutInput.value = ''; \n        customCutInfo.innerHTML = '';\n        \n        updateButtonStates(currentStep);\n    }\n\n    function selectCustomLength() {\n        const lengthCm = parseFloat(customLengthInput.value);\n        if (isNaN(lengthCm) || lengthCm <= 0) {\n            lengthResultDiv.innerHTML = `<span style=\"color: red;\">Vpi\u0161ite veljavno dol\u017eino v cm.<\/span>`;\n            lengthResultDiv.classList.remove('hidden');\n            return;\n        }\n\n        const productId = userSelection.panel.selectedProductId;\n        if (!productId || !productData.variations[productId]) return;\n\n        const variations = productData.variations[productId];\n        const uniqueLengths = [...new Set(variations.map(v => parseInt(v.dim.split('x')[1])))].sort((a, b) => a - b);\n        \n        let nextStandardLengthMm = uniqueLengths.find(l => l >= lengthCm * 10);\n        \n        if (!nextStandardLengthMm) {\n            lengthResultDiv.innerHTML = `<span style=\"color: red;\">\u017dal nimamo plo\u0161\u010de, ki bi ustrezala va\u0161i dol\u017eini. Najdalj\u0161a je ${Math.max(...uniqueLengths)\/10} cm.<\/span>`;\n            lengthResultDiv.classList.remove('hidden');\n            return;\n        }\n\n        userSelection.length.panelLengthMm = nextStandardLengthMm;\n        userSelection.length.customLengthCm = lengthCm;\n        userSelection.length.customCutCm = lengthCm;\n\n        lengthOptionsContainer.querySelectorAll('.option-button').forEach(btn => {\n            btn.classList.toggle('selected', parseInt(btn.dataset.value) === nextStandardLengthMm);\n        });\n        \n        lengthResultDiv.innerHTML = `Za va\u0161o mero <strong>${lengthCm} cm<\/strong> potrebujete plo\u0161\u010do dol\u017eine <strong>${nextStandardLengthMm \/ 10} cm<\/strong>, ki jo bomo odrezali na va\u0161o mero.`;\n        lengthResultDiv.classList.remove('hidden');\n        customCutSection.classList.remove('hidden');\n        customCutInput.value = lengthCm;\n        customCutInput.max = nextStandardLengthMm \/ 10;\n        customCutInfo.innerHTML = `Potrjena dol\u017eina odreza: <strong>${lengthCm} cm<\/strong>.`\n\n        updateButtonStates(currentStep);\n    }\n\n    function setCustomCut() {\n        const cutLength = parseFloat(customCutInput.value);\n        const maxCut = parseFloat(customCutInput.max);\n        if (isNaN(cutLength) || cutLength <= 0 || cutLength > maxCut) {\n            alert(`Vpi\u0161ite veljavno mero za odrez, ki je manj\u0161a ali enaka standardni dol\u017eini plo\u0161\u010de (${maxCut} cm).`);\n            return;\n        }\n        userSelection.length.customCutCm = cutLength;\n        customCutInfo.innerHTML = `Potrjena dol\u017eina odreza: <strong>${cutLength} cm<\/strong>.`;\n    }\n\n    function loadWidthInfo() {\n        const { selectedProductId } = userSelection.panel;\n        const { panelLengthMm } = userSelection.length; \n        const allVariations = productData.variations[selectedProductId] || [];\n        \n        const availableWidthsMm = allVariations\n            .filter(v => parseInt(v.dim.split('x')[1]) === panelLengthMm)\n            .map(v => parseInt(v.dim.split('x')[0]))\n            .filter((value, index, self) => self.indexOf(value) === index) \n            .sort((a, b) => a - b);\n            \n        userSelection.width.availableWidthsMm = availableWidthsMm;\n\n        let widthText = \"razli\u010dne \u0161irine plo\u0161\u010d\";\n        if (availableWidthsMm.length > 0) {\n            widthText = `\u0161irine plo\u0161\u010d: <strong>${availableWidthsMm.map(w => `${w\/10} cm`).join(', ')}<\/strong>`;\n        }\n        \n        panelWidthInfo.innerHTML = `Glede na va\u0161o izbiro so na voljo ${widthText}. Vpi\u0161ite skupno \u0161irino, ki jo \u017eelite pokriti, mi pa vam bomo predlagali optimalne kombinacije.`;\n        widthResultDiv.classList.add('hidden');\n        combinationOptions.classList.add('hidden');\n        legacyPanelCountSection.classList.add('hidden');\n        customWidthInput.value = '';\n        userSelection.width.panelCombination = null;\n        updateButtonStates(currentStep);\n    }\n    \n    function calculateWidthCombination() {\n        const targetWidthCm = parseFloat(customWidthInput.value);\n        if (isNaN(targetWidthCm) || targetWidthCm <= 0) {\n            widthResultDiv.innerHTML = `<span style=\"color: red;\">Prosimo, vpi\u0161ite veljavno \u0161irino.<\/span>`;\n            widthResultDiv.classList.remove('hidden');\n            return;\n        }\n\n        const availableWidthsMm = [...userSelection.width.availableWidthsMm].sort((a, b) => b - a);\n\n        if (availableWidthsMm.length === 0) {\n            widthResultDiv.innerHTML = `<span style=\"color: red;\">Napaka: Za izbrano dol\u017eino ni na voljo nobenih \u0161irin plo\u0161\u010d. Poskusite izbrati drugo dol\u017eino.<\/span>`;\n            widthResultDiv.classList.remove('hidden');\n            combinationOptions.classList.add('hidden');\n            legacyPanelCountSection.classList.add('hidden');\n            return;\n        }\n        \n        if (availableWidthsMm.length === 1) {\n            const panelWidthCm = availableWidthsMm[0] \/ 10;\n            const jointGapCm = 2;\n            let panelCount = 1;\n            let coveredWidth = panelWidthCm;\n            \n            while(coveredWidth < targetWidthCm) {\n                panelCount++;\n                coveredWidth = (panelCount * panelWidthCm) + ((panelCount - 1) * jointGapCm);\n            }\n            \n            panelCountOptionsContainer.innerHTML = '';\n            for(let i=1; i <= 10; i++) {\n                const button = document.createElement('div');\n                button.className = 'option-button panel-count-btn';\n                button.dataset.count = i;\n                button.onclick = () => selectPanelCount(i, availableWidthsMm[0]);\n                button.innerHTML = `<span>${i}<\/span>`;\n                if(i === panelCount) button.classList.add('selected'); \n                panelCountOptionsContainer.appendChild(button);\n            }\n             selectPanelCount(panelCount, availableWidthsMm[0]); \n             widthResultDiv.innerHTML = `Izra\u010dunano \u0161tevilo plo\u0161\u010d za \u0161irino <strong>${targetWidthCm} cm<\/strong>. Po potrebi lahko izberete drugo koli\u010dino.`;\n             widthResultDiv.classList.remove('hidden');\n             legacyPanelCountSection.classList.remove('hidden');\n             combinationOptions.classList.add('hidden');\n             return;\n        }\n\n        const allCombinations = [];\n        const targetWidthMm = targetWidthCm * 10;\n        const jointGapMm = 20;\n        const MAX_TOTAL_PANELS = 12;\n\n        const memo = new Set();\n        function findCombinationsIterative(target, widths) {\n            const queue = [{ combo: {}, widthSum: 0, panelCount: 0 }];\n            memo.add(\"[]\");\n\n            while(queue.length > 0 && allCombinations.length < 200 && queue.length < 1000) { \n                const { combo, widthSum, panelCount } = queue.shift();\n\n                if (panelCount >= MAX_TOTAL_PANELS) continue;\n\n                for (const width of widths) {\n                    const newCombo = {...combo};\n                    newCombo[width] = (newCombo[width] || 0) + 1;\n                    const comboKey = JSON.stringify(Object.entries(newCombo).sort());\n                    if (memo.has(comboKey)) continue;\n                    memo.add(comboKey);\n\n                    const newPanelCount = panelCount + 1;\n                    const newWidthSum = widthSum + width;\n                    const totalCoveredWidth = newWidthSum + (newPanelCount > 1 ? (newPanelCount - 1) * jointGapMm : 0);\n\n                    if (totalCoveredWidth >= target) {\n                        allCombinations.push({\n                            totalWidth: totalCoveredWidth,\n                            counts: newCombo,\n                            waste: totalCoveredWidth - target,\n                            panelCount: newPanelCount\n                        });\n                    } else if (newPanelCount < MAX_TOTAL_PANELS) {\n                        queue.push({ combo: newCombo, widthSum: newWidthSum, panelCount: newPanelCount });\n                    }\n                }\n            }\n        }\n        \n        findCombinationsIterative(targetWidthMm, availableWidthsMm);\n\n        if (allCombinations.length === 0) {\n            widthResultDiv.innerHTML = `<span style=\"color: red;\">Ne najdem kombinacije za vpisano \u0161irino. Poskusite z ve\u010djo \u0161irino.<\/span>`;\n            widthResultDiv.classList.remove('hidden');\n            combinationOptions.classList.add('hidden');\n            legacyPanelCountSection.classList.add('hidden');\n            return;\n        }\n\n        allCombinations.sort((a, b) => {\n            if (a.waste !== b.waste) return a.waste - b.waste;\n            return a.panelCount - b.panelCount;\n        });\n\n        const bestCombinations = allCombinations.slice(0, 3);\n        \n        widthResultDiv.innerHTML = `Za va\u0161o mero <strong>${targetWidthCm} cm<\/strong> predlagamo naslednje kombinacije (vklju\u010dno z 2cm med plo\u0161\u010dami za spojni profil):`;\n        widthResultDiv.classList.remove('hidden');\n\n        combinationChoices.innerHTML = '';\n        bestCombinations.forEach((combo) => {\n            const totalPanels = combo.panelCount;\n            let textParts = [];\n             Object.entries(combo.counts).sort(([a],[b]) => b-a).forEach(([width, count]) => {\n                let panelText = count === 1 ? 'plo\u0161\u010da' : (count === 2 ? 'plo\u0161\u010di' : 'plo\u0161\u010de');\n                textParts.push(`${count} ${panelText} ${width\/10} cm`);\n            });\n            \n            let text = `<strong>${totalPanels} ${totalPanels === 1 ? 'plo\u0161\u010da' : 'plo\u0161\u010de'}:<\/strong> ${textParts.join(' + ')}, za skupno \u0161irino do: <strong>${(combo.totalWidth \/ 10).toFixed(1)} cm<\/strong>.`;\n            \n            const button = document.createElement('div');\n            button.className = 'option-button';\n            button.dataset.combination = JSON.stringify(combo);\n            button.onclick = () => selectCombination(button);\n            button.innerHTML = `<span>${text}<\/span>`;\n            combinationChoices.appendChild(button);\n        });\n\n        combinationOptions.classList.remove('hidden');\n        legacyPanelCountSection.classList.add('hidden');\n        userSelection.width.panelCombination = null;\n        updateButtonStates(currentStep);\n    }\n    \n    function selectPanelCount(count, widthMm) {\n        const combo = {\n            counts: { [widthMm]: count },\n            panelCount: count,\n            totalWidth: (count * widthMm) + ((count - 1) * 20),\n            waste: 0,\n        };\n        \n        panelCountOptionsContainer.querySelectorAll('.option-button').forEach(btn => btn.classList.remove('selected'));\n        panelCountOptionsContainer.querySelector(`[data-count=\"${count}\"]`).classList.add('selected');\n        \n        userSelection.width.panelCombination = combo;\n        updateButtonStates(currentStep);\n    }\n\n    function selectCombination(button) {\n        combinationChoices.querySelectorAll('.option-button').forEach(btn => btn.classList.remove('selected'));\n        button.classList.add('selected');\n        \n        userSelection.width.panelCombination = JSON.parse(button.dataset.combination);\n        updateButtonStates(currentStep);\n    }\n    \n    function loadConstructionOptions() {\n        constructionOptionsContainer.innerHTML = `\n            <div class=\"option-button\" data-group=\"material\" data-value=\"wood\" onclick=\"selectOption(this.parentElement, this, 'material', 'wood', 'construction')\">\n                <img decoding=\"async\" src=\"https:\/\/termotom.com\/wp-content\/uploads\/Vijak-lesni-fi19.jpg\" alt=\"Lesena konstrukcija\">\n                <span>Lesena konstrukcija<\/span>\n            <\/div>\n            <div class=\"option-button\" data-group=\"material\" data-value=\"metal\" onclick=\"selectOption(this.parentElement, this, 'material', 'metal', 'construction')\">\n                <img decoding=\"async\" src=\"https:\/\/termotom.com\/wp-content\/uploads\/Vijak-kovina-fi19.jpg\" alt=\"Kovinska konstrukcija\">\n                <span>Kovinska konstrukcija<\/span>\n            <\/div>`;\n    }\n\n    function loadProfileOptions() {\n        aluDirectionOptionsContainer.innerHTML = `\n            <div class=\"option-button\" data-group=\"aluDirection\" data-value=\"vzdolzno\" onclick=\"selectOption(this.parentElement, this, 'aluDirection', 'vzdolzno', 'profiles')\">\n                <img decoding=\"async\" src=\"https:\/\/termotom.com\/wp-content\/uploads\/POKRIVNI_60MM.jpg\" alt=\"Vzdol\u017eni nosilci\">\n                <span>Vzdol\u017eni nosilci (\u0161pirovci)<\/span>\n            <\/div>\n            <div class=\"option-button\" data-group=\"aluDirection\" data-value=\"precno\" onclick=\"selectOption(this.parentElement, this, 'aluDirection', 'precno', 'profiles')\">\n                <img decoding=\"async\" src=\"https:\/\/termotom.com\/wp-content\/uploads\/ALU_VEZNI_S_TESNILI-scaled-1.jpg\" alt=\"Pre\u010dni nosilci\">\n                <span>Pre\u010dni nosilci (letve)<\/span>\n            <\/div>`;\n    }\n    \n     function selectOption(container, selectedButton, key, value, category) {\n         container.querySelectorAll('.option-button').forEach(btn => btn.classList.remove('selected'));\n         selectedButton.classList.add('selected');\n         userSelection[category][key] = value;\n         \n         if(category === 'profiles' && key === 'aluDirection') {\n             const warningDiv = document.getElementById('alu-width-warning');\n             const checkbox = document.getElementById('narrow-beam-checkbox');\n             const vzdolzniButton = document.querySelector('#alu-direction-options [data-value=\"vzdolzno\"]');\n             if(value === 'vzdolzno') {\n                 warningDiv.classList.remove('hidden');\n             } else {\n                 warningDiv.classList.add('hidden');\n                 if(checkbox.checked) {\n                     checkbox.checked = false;\n                     vzdolzniButton.classList.remove('disabled');\n                 }\n             }\n         }\n         updateButtonStates(currentStep);\n     }\n\n    function handleNarrowBeamCheck(checkbox) {\n        const vzdolzniButton = document.querySelector('#alu-direction-options [data-value=\"vzdolzno\"]');\n        const precniButton = document.querySelector('#alu-direction-options [data-value=\"precno\"]');\n\n        if (checkbox.checked) {\n            vzdolzniButton.classList.add('disabled');\n            selectOption(precniButton.parentElement, precniButton, 'aluDirection', 'precno', 'profiles');\n        } else {\n            vzdolzniButton.classList.remove('disabled');\n        }\n    }\n     \n     function updateScrewInfo(){\n         screwInfoResult.innerHTML = `Na naslednjem koraku boste videli celoten izra\u010dun, vklju\u010dno z vijaki in ostalim materialom.`;\n     }\n     \n    function calculateCostOfItems(items) {\n        return items.reduce((sum, item) => sum + (item.qty * item.price), 0);\n    }\n\n    function calculateOptimalPieces(productId, requiredTotalLengthMm, numSets = 1) {\n        const variations = accessoryVariations[productId];\n        if (!variations) return { pieces: [], totalCost: 0 };\n\n        const sortedVariations = [...variations].sort((a, b) => b.len - a.len);\n        let pieces = [];\n        let totalCost = 0;\n\n        for (let i = 0; i < numSets; i++) {\n            let remainingLength = requiredTotalLengthMm;\n            while (remainingLength > 0) {\n                let bestFit = [...sortedVariations].sort((a,b) => a.len - b.len).find(v => v.len >= remainingLength);\n                if (bestFit) {\n                    pieces.push(bestFit);\n                    totalCost += bestFit.price;\n                    remainingLength = 0;\n                } else {\n                    const largestPiece = sortedVariations[0];\n                    if(!largestPiece) break;\n                    pieces.push(largestPiece);\n                    totalCost += largestPiece.price;\n                    remainingLength -= largestPiece.len;\n                }\n            }\n        }\n        return { pieces, totalCost };\n    }\n\n    function addOptimalAccessoryByLength(cart, productId, name, requiredTotalLengthMm, img, details, numSets = 1) {\n        const { pieces } = calculateOptimalPieces(productId, requiredTotalLengthMm, numSets);\n        if (pieces.length === 0) return;\n\n        const itemsToAdd = {};\n        pieces.forEach(piece => {\n            itemsToAdd[piece.id] = (itemsToAdd[piece.id] || 0) + 1;\n        });\n        \n        const variations = accessoryVariations[productId];\n\n        for (const [variationId, qty] of Object.entries(itemsToAdd)) {\n            const variation = variations.find(v => v.id == variationId);\n            if (variation) {\n                 cart.items.push({\n                    name: name,\n                    img: img,\n                    details: `${details}, kos dol\u017eine ${(variation.len \/ 1000).toString().replace('.', ',')} m`,\n                    qty: qty,\n                    price: variation.price,\n                    total: qty * variation.price,\n                    id: productId,\n                    variationId: variation.id,\n                    type: 'accessory'\n                });\n            }\n        }\n    }\n    \n    function addAccessoryByPiece(cart, productId, name, requiredQty, img, details) {\n         if (!productId || requiredQty <= 0) return;\n                  \n         const itemData = Object.values(productData.accessories).find(item => typeof item === 'object' && item.id === productId);\n         if (itemData) {\n             cart.items.push({ name: itemData.name, img: itemData.img, details: details, qty: requiredQty, price: itemData.price, total: requiredQty * itemData.price, id: productId, type: 'accessory' });\n         }\n    }\n\n    function calculateBaseMaterials() {\n        let cart = { items: [], notes: [], totalPrice: 0, totalAreaM2: 0 };\n        const { panel, length, width, construction, profiles } = userSelection;\n\n        let totalAreaM2 = 0;\n        const finalPanelLengthMm = length.customCutCm ? length.customCutCm * 10 : length.panelLengthMm;\n        const panelLengthToOrderMm = length.panelLengthMm;\n\n        if (!width.panelCombination || !width.panelCombination.counts) {\n            console.error(\"No panel combination selected.\");\n            return false;\n        }\n\n        for (const [panelWidthMmStr, count] of Object.entries(width.panelCombination.counts)) {\n            const panelWidthMm = parseInt(panelWidthMmStr);\n            const panelVariation = productData.variations[panel.selectedProductId].find(v => {\n                const [varWidth, varLength] = v.dim.split('x').map(d => parseInt(d));\n                return varLength === panelLengthToOrderMm && varWidth === panelWidthMm;\n            });\n            if (!panelVariation) continue;\n            \n            const itemTitle = `Polikarbonatno steklo`;\n            \n            cart.items.push({\n                name: itemTitle,\n                img: productData.panels[panel.color][panel.thickness].image,\n                details: `Barva: ${panel.color.replace(\/_\/g, ' ')}, Deb.: ${panel.thickness}mm, Dim.: ${panelVariation.dim.replace('x', ' x ')} mm`,\n                qty: count,\n                price: parseFloat(panelVariation.price),\n                total: count * parseFloat(panelVariation.price),\n                id: panel.selectedProductId,\n                variationId: panelVariation.id,\n                type: 'panel'\n            });\n            totalAreaM2 += count * (panelWidthMm \/ 1000) * (finalPanelLengthMm \/ 1000);\n        }\n        \n        cart.totalAreaM2 = totalAreaM2;\n        userSelection.width.totalAreaM2 = totalAreaM2;\n\n        if (length.customCutCm && length.customCutCm !== length.panelLengthMm\/10) {\n             cart.notes.push(`Vse plo\u0161\u010de prosim odre\u017eite na dol\u017eino ${length.customCutCm} cm.`);\n        }\n        \n        const totalNumPanels = Object.values(width.panelCombination.counts).reduce((s, c) => s + c, 0);\n        const numJoints = totalNumPanels > 1 ? totalNumPanels - 1 : 0;\n        const totalRoofWidthMm = Object.keys(width.panelCombination.counts).reduce((sum, w) => sum + (parseInt(w) * width.panelCombination.counts[w]), 0);\n        \n        const topEdgeName = 'Za zgornji rob';\n        const bottomEdgeName = 'Za spodnji (odkapni) rob';\n        \n        const aluDripProfileData = productData.accessories.alu_drip_profile[panel.thickness];\n        if (aluDripProfileData) {\n            addOptimalAccessoryByLength(cart, aluDripProfileData.id, aluDripProfileData.name, totalRoofWidthMm, aluDripProfileData.img, topEdgeName, 1);\n            addOptimalAccessoryByLength(cart, aluDripProfileData.id, aluDripProfileData.name, totalRoofWidthMm, aluDripProfileData.img, bottomEdgeName, 1);\n        } else {\n             cart.notes.push(`Opomba: Za izbrano debelino ${panel.thickness} mm ni na voljo standardnih odkapnih profilov. Priporo\u010damo uporabo silikonskega kita za tesnjenje robov.`);\n        }\n        \n        if(numJoints > 0){\n             const profileLengthMm = finalPanelLengthMm;\n             if (profiles.aluDirection === 'precno') {\n                addOptimalAccessoryByLength(cart, productData.accessories.alu_joining_profile.id, 'Alu dvojni vezni profil', profileLengthMm, productData.accessories.alu_joining_profile.img, `Za ${numJoints} spojev`, numJoints);\n            } else { \n                 addOptimalAccessoryByLength(cart, productData.accessories.alu_top_profile.id, 'Alu pokrivni profil 60mm', profileLengthMm, productData.accessories.alu_top_profile.img, `Za ${numJoints} spojev`, numJoints);\n                 addOptimalAccessoryByLength(cart, productData.accessories.alu_rubber_gasket.id, 'Podlo\u017ena guma 60mm', profileLengthMm, productData.accessories.alu_rubber_gasket.img, `Za ${numJoints} spojev`, numJoints);\n            }\n        }\n        \n        if (profiles.type === 'aluminum' && numJoints > 0) {\n            const endCap = productData.accessories.alu_l_profile_end_cap;\n            const qty = numJoints * 2;\n            if (qty > 0) {\n                cart.items.push({\n                    name: endCap.name, img: endCap.img, details: `Za zaklju\u010dek Alu profilov na spojih`,\n                    qty: qty, price: endCap.price, total: qty * endCap.price,\n                    id: endCap.id, type: 'accessory'\n                });\n            }\n        }\n\n        const screwsData = productData.accessories.screws;\n        const findNextLongerScrew = (screwList, requiredLength) => {\n            if (!screwList || screwList.length === 0) return null;\n            const sortedScrews = [...screwList].sort((a, b) => a.length - b.length);\n            const screw = sortedScrews.find(s => s.length >= requiredLength);\n            return screw || sortedScrews[sortedScrews.length - 1]; \n        };\n        const addScrewSetToCart = (screw, neededQty, detailsSuffix) => {\n            if (!screw || neededQty <= 0) return;\n            const setsNeeded = Math.ceil(neededQty \/ screw.perSet);\n            if (setsNeeded > 0) {\n                cart.items.push({\n                    name: screw.name, img: screwsData.img,\n                    details: `Pakiranje ${screw.perSet} kos. ${detailsSuffix} (potrebno ~${Math.ceil(neededQty)} vijakov)`,\n                    qty: setsNeeded, price: screw.price, total: setsNeeded * screw.price,\n                    id: screw.id, type: 'screw', subType: screw.name.includes('fi19') ? 'fi19' : 'fi29',\n                    perSet: screw.perSet\n                });\n            }\n        };\n\n        const screwType = construction.material;\n        const totalProfileLengthM = (finalPanelLengthMm * numJoints) \/ 1000;\n        const baseRequiredLength = panel.thickness + (screwType === 'wood' ? 30 : 15);\n\n        const numProfileScrews = totalProfileLengthM * 3;\n        const requiredLengthProfile = baseRequiredLength + 15;\n        const screwListProfile = screwsData[screwType]?.fi19;\n        const chosenScrewProfile = findNextLongerScrew(screwListProfile, requiredLengthProfile);\n        addScrewSetToCart(chosenScrewProfile, numProfileScrews, 'Za vija\u010denje ALU profilov.');\n\n        const numPanelScrews = totalAreaM2 * 3;\n        const requiredLengthPanel = baseRequiredLength;\n        const screwListPanel = screwsData[screwType]?.fi29;\n        const chosenScrewPanel = findNextLongerScrew(screwListPanel, requiredLengthPanel);\n        addScrewSetToCart(chosenScrewPanel, numPanelScrews, 'Za vija\u010denje plo\u0161\u010d (izven profilov).');\n        \n        baseCart = JSON.parse(JSON.stringify(cart));\n        userSelection.cart = JSON.parse(JSON.stringify(cart));\n        return true;\n    }\n    \n    function generateSummary(isInitial) {\n        if (isInitial) {\n            if (!calculateBaseMaterials()) {\n                alert(\"Napaka pri pripravi povzetka. Prosimo, preverite izbire.\");\n                prevStep();\n                return false;\n            }\n        }\n        recalculateAndDisplayFinalCart();\n        displayCart(userSelection.cart, summaryTableBody, summaryTableFoot);\n        return true;\n    }\n\n    function displayCart(cart, tableBody, tableFoot) {\n        tableBody.innerHTML = '';\n        tableFoot.innerHTML = '';\n        let totalPrice = 0;\n\n        cart.items.forEach(item => {\n            const itemTotal = item.qty * item.price;\n            totalPrice += itemTotal;\n            const row = document.createElement('tr');\n            \n            let unitText = 'kos';\n            if (item.name.toLowerCase().includes('guma') || item.name.toLowerCase().includes('trak')) {\n                if (item.details && item.details.includes('kolut')) {\n                    unitText = 'kolut';\n                }\n            } else if (item.name.toLowerCase().includes('vijak') || item.name.toLowerCase().includes('podlo\u017ek')) {\n                 unitText = 'komplet';\n            }\n\n            row.innerHTML = `\n                <td>${item.name}<\/td>\n                <td><img decoding=\"async\" src=\"${item.img}\" alt=\"${item.name}\" loading=\"lazy\"><\/td>\n                <td>${item.details || ''}<\/td>\n                <td style=\"text-align: right;\">${item.qty} ${unitText}<\/td>\n                <td style=\"text-align: right;\">${formatPrice(item.price)} \u20ac<\/td>\n                <td style=\"text-align: right;\"><strong>${formatPrice(itemTotal)} \u20ac<\/strong><\/td>\n            `;\n            tableBody.appendChild(row);\n        });\n        \n        if(cart.notes && cart.notes.length > 0){\n            const notesRow = document.createElement('tr');\n            notesRow.innerHTML = `<td colspan=\"6\" style=\"background-color: #f0f8ff; font-style: italic;\"><strong>Opombe k naro\u010dilu:<\/strong><br>${cart.notes.join('<br>')}<\/td>`;\n            tableBody.appendChild(notesRow);\n        }\n\n        const totalRow = document.createElement('tr');\n        totalRow.innerHTML = `\n            <td colspan=\"5\" style=\"text-align: right; font-weight: bold; font-size: 1.1em; border-top: 2px solid var(--secondary-color);\">SKUPAJ brez DDV:<\/td>\n            <td style=\"font-weight: bold; font-size: 1.2em; color: var(--button-color); border-top: 2px solid var(--secondary-color); text-align: right;\">${formatPrice(totalPrice)} \u20ac<\/td>\n        `;\n        tableFoot.appendChild(totalRow);\n        userSelection.cart.totalPrice = totalPrice;\n    }\n    \n    function resetConfigurator() {\n        document.querySelectorAll('.configurator-step input[type=\"number\"]').forEach(input => input.value = '');\n        document.querySelectorAll('.calculation-result, #custom-cut-section, #alu-profile-sub-options, #combination-options, #accessory-options-container').forEach(el => {\n            el.classList.add('hidden');\n            el.innerHTML = '';\n        });\n        document.querySelectorAll('.option-button').forEach(btn => btn.classList.remove('selected', 'disabled'));\n        initializeConfigurator();\n    }\n\n    function addToCart() {\n        console.log(\"--- Dodajanje v Ko\u0161arico ---\");\n\n        if (!userSelection.cart || !userSelection.cart.items || userSelection.cart.items.length === 0) {\n            alert(\"Ni artiklov za dodajanje v ko\u0161arico.\");\n            return;\n        }\n\n        \/\/ Button loading state\n        const kwAtcBtn = document.getElementById('add-to-cart-btn');\n        const kwAtcBtnOriginal = kwAtcBtn ? kwAtcBtn.textContent : '';\n        const kwSetLoading = () => {\n            if (!kwAtcBtn) return;\n            kwAtcBtn.textContent = 'Dodajanje v ko\u0161arico';\n            kwAtcBtn.disabled = true;\n            kwAtcBtn.classList.add('is-loading');\n        };\n        const kwClearLoading = () => {\n            if (!kwAtcBtn) return;\n            kwAtcBtn.textContent = kwAtcBtnOriginal;\n            kwAtcBtn.disabled = false;\n            kwAtcBtn.classList.remove('is-loading');\n        };\n        kwSetLoading();\n\n        \/\/ KW Pomo\u010dnik run logging\n        let kwRunId = '';\n        const kwStartRun = () => {\n            const fd = new FormData();\n            fd.append('action', 'kw_pomocnik_log_start');\n            fd.append('configurator', 'steklo1');\n            fd.append('page_url', window.location.href);\n            try {\n                fd.append('selection', JSON.stringify(userSelection));\n                fd.append('items', JSON.stringify(userSelection.cart.items));\n            } catch (e) {}\n            return fetch('\/wp-admin\/admin-ajax.php', { method: 'POST', credentials: 'same-origin', body: fd })\n                .then(r => r.json())\n                .then(j => { if (j && j.success && j.data && j.data.run_id) kwRunId = j.data.run_id; })\n                .catch(e => console.warn('kw_pomocnik_log_start failed', e));\n        };\n        const kwFinishRun = () => {\n            if (!kwRunId) return Promise.resolve();\n            const fd = new FormData();\n            fd.append('action', 'kw_pomocnik_log_finish');\n            fd.append('run_id', kwRunId);\n            return fetch('\/wp-admin\/admin-ajax.php', { method: 'POST', credentials: 'same-origin', body: fd })\n                .catch(e => console.warn('kw_pomocnik_log_finish failed', e));\n        };\n\n       const addToCartRequest = (productId, quantity, variationId = null, extraData = {}) => {\n    const formData = new FormData();\n    formData.append('product_id', productId);\n    formData.append('quantity', quantity);\n\n    if (variationId) formData.append('variation_id', variationId);\n\n    formData.append('from_configurator', '1');\n    if (kwRunId) formData.append('kw_run_id', kwRunId);\n\n    for (const key in extraData) {\n        formData.append(key, extraData[key]);\n    }\n\n    console.log(\"Po\u0161iljam AJAX:\", Object.fromEntries(formData));\n\n    return fetch('\/?wc-ajax=add_to_cart', {\n        method: 'POST',\n        credentials: 'same-origin',\n        body: formData\n    }).then(res => res.json());\n};\n\n        \/\/ Process all items sequentially\n        const addItemsSequentially = async (items) => {\n            for (const item of items) {\n                try {\n                    let extraData = {};\n\n                    \/\/ Handle custom cut notes for panels\n                    if (item.type === 'panel' && userSelection.length.customCutCm) {\n                        extraData.custom_cut_note = `Odrez na ${userSelection.length.customCutCm} cm`;\n                    }\n\n                    const result = await addToCartRequest(\n                        item.variationId || item.id,\n                        item.qty,\n                        item.variationId,\n                        extraData\n                    );\n                    console.log(`Artikel dodan (${item.name}):`, result);\n                } catch (error) {\n                    console.error(`Napaka pri dodajanju artikla ${item.name}:`, error);\n                }\n            }\n        };\n\n        \/\/ Start run -> add items -> finish run -> send email -> redirect\n        kwStartRun()\n            .then(() => addItemsSequentially(userSelection.cart.items))\n            .then(() => kwFinishRun())\n            .then(() => {\n                \/\/ Send email notification\n                return fetch('\/wp-admin\/admin-ajax.php', {\n                    method: 'POST',\n                    credentials: 'same-origin',\n                    headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n                    body: new URLSearchParams({\n                        'action': 'send_custom_email',\n                        'panel_id': userSelection.panel.selectedProductId || '',\n                        'panel_length': userSelection.length.panelLengthMm || '',\n                        'num_panels': Object.values(userSelection.width.panelCombination?.counts || {}).reduce((s, c) => s + c, 0),\n                        'notes': userSelection.cart.notes.join(' | '),\n                        'screw_id': '',\n                        'num_screws': ''\n                    })\n                });\n            })\n            .then(response => response.json())\n            .then(emailResult => {\n                console.log(\"E-mail send result:\", emailResult);\n                window.location.href='https:\/\/termotom.com\/hr\/kosarica\/'; \/\/ redirect to cart\n            })\n            .catch(error => {\n                console.error(\"Napaka pri dodajanju:\", error);\n                kwClearLoading();\n                alert(\"Napaka pri dodajanju v ko\u0161arico.\");\n            });\n    }\n\n    function formatPrice(price) {\n         return parseFloat(price).toFixed(2).replace('.', ',');\n    }\n\n     function drawRoofSketch(canvas, focus) {\n         const ctx = canvas.getContext('2d');\n         const w = canvas.width;\n         const h = canvas.height;\n         ctx.clearRect(0, 0, w, h);\n         ctx.strokeStyle = '#aaa'; \n         ctx.lineWidth = 1;\n         ctx.font = 'bold 13px Arial';\n         ctx.fillStyle = '#333';\n         ctx.textAlign = 'center';\n         ctx.textBaseline = 'bottom';\n\n         const frontHeight = h * 0.6;\n         const backHeight = h * 0.35;\n         const frontWidth = w * 0.8;\n         const backWidth = w * 0.7;\n         const depthFactor = 0.4; \n\n         const xCenter = w \/ 2;\n         const yTop = h * 0.15;\n         const yFrontBottom = yTop + frontHeight;\n         const yBackBottom = yTop + backHeight;\n\n         const xFrontLeft = xCenter - frontWidth \/ 2;\n         const xFrontRight = xCenter + frontWidth \/ 2;\n         const xBackLeft = xCenter - backWidth \/ 2;\n         const xBackRight = xCenter + backWidth \/ 2;\n\n         ctx.beginPath();\n         ctx.moveTo(xFrontLeft, yFrontBottom); ctx.lineTo(xFrontLeft, yTop + frontHeight * (1-depthFactor*0.8)); \n         ctx.moveTo(xFrontRight, yFrontBottom); ctx.lineTo(xFrontRight, yTop + frontHeight * (1-depthFactor*0.8)); \n         ctx.moveTo(xBackLeft, yBackBottom); ctx.lineTo(xBackLeft, yTop); \n         ctx.moveTo(xBackRight, yBackBottom); ctx.lineTo(xBackRight, yTop); \n         ctx.strokeStyle = '#999';\n         ctx.lineWidth = 2;\n         ctx.stroke();\n\n         ctx.beginPath();\n         ctx.moveTo(xFrontLeft, yTop + frontHeight * (1-depthFactor*0.8));\n         ctx.lineTo(xFrontRight, yTop + frontHeight * (1-depthFactor*0.8));\n         ctx.moveTo(xBackLeft, yTop);\n         ctx.lineTo(xBackRight, yTop);\n         ctx.moveTo(xFrontLeft, yTop + frontHeight * (1-depthFactor*0.8));\n         ctx.lineTo(xBackLeft, yTop);\n         ctx.moveTo(xFrontRight, yTop + frontHeight * (1-depthFactor*0.8));\n         ctx.lineTo(xBackRight, yTop);\n         ctx.strokeStyle = '#aaa';\n         ctx.lineWidth = 1.5;\n         ctx.stroke();\n\n         ctx.strokeStyle = '#d11d55';\n         ctx.lineWidth = 1.5;\n         ctx.fillStyle = '#d11d55';\n         ctx.font = 'bold 14px Arial';\n\n          function drawDimLine(x1, y1, x2, y2, label, labelOffset = 15, arrowSize = 5) {\n              ctx.beginPath();\n              ctx.moveTo(x1, y1);\n              ctx.lineTo(x2, y2);\n\n              const angle = Math.atan2(y2 - y1, x2 - x1);\n              ctx.moveTo(x1 + arrowSize * Math.cos(angle + Math.PI \/ 6), y1 + arrowSize * Math.sin(angle + Math.PI \/ 6));\n              ctx.lineTo(x1, y1);\n              ctx.lineTo(x1 + arrowSize * Math.cos(angle - Math.PI \/ 6), y1 + arrowSize * Math.sin(angle - Math.PI \/ 6));\n               ctx.moveTo(x2 - arrowSize * Math.cos(angle + Math.PI \/ 6), y2 - arrowSize * Math.sin(angle + Math.PI \/ 6));\n               ctx.lineTo(x2, y2);\n               ctx.lineTo(x2 - arrowSize * Math.cos(angle - Math.PI \/ 6), y2 - arrowSize * Math.sin(angle - Math.PI \/ 6));\n              ctx.stroke();\n\n               const midX = (x1 + x2) \/ 2;\n               const midY = (y1 + y2) \/ 2;\n               const labelX = midX + labelOffset * Math.sin(angle);\n               const labelY = midY - labelOffset * Math.cos(angle);\n\n               ctx.save();\n               ctx.translate(labelX, labelY);\n               ctx.textAlign = 'center';\n               ctx.textBaseline = 'middle';\n               ctx.fillText(label, 0, 0);\n               ctx.restore();\n          }\n\n           if (focus === 'length') {\n                ctx.lineWidth = 2.5;\n               drawDimLine(xBackRight, yTop, xFrontRight, yTop + frontHeight * (1-depthFactor*0.8) , 'Dol\u017eina', 20);\n           } else if (focus === 'width') {\n                 ctx.lineWidth = 2.5;\n                drawDimLine(xBackLeft, yTop - 20, xBackRight, yTop - 20, '\u0160irina', -20);\n            }\n      }\n      \n    function showAccessoryStep() {\n        accessoriesChanged = false;\n        populateAccessoryOptions();\n        showStep(9);\n    }\n\n    function toggleAccessoryOption(button, key, value = null) {\n        accessoriesChanged = true;\n\n        if(value === null) { \n            userSelection.accessories[key] = !userSelection.accessories[key];\n            button.classList.toggle('selected');\n        } else {\n            if(userSelection.accessories[key] === value) {\n                userSelection.accessories[key] = null;\n                button.classList.remove('selected');\n            } else {\n                userSelection.accessories[key] = value;\n                 const group = button.parentElement;\n                 group.querySelectorAll('.option-button').forEach(btn => btn.classList.remove('selected'));\n                button.classList.add('selected');\n            }\n        }\n        updateFinalizeButton();\n        recalculateAndDisplayFinalCart(); \n    }\n    \n    function updateFinalizeButton() {\n        const btn = document.getElementById('finalize-accessories-btn');\n        if(!btn) return;\n        if(accessoriesChanged) {\n            btn.textContent = 'Prika\u017ei posodobljen povzetek';\n        } else {\n            btn.textContent = 'Dodaj v ko\u0161arico';\n        }\n    }\n\n    function finalizeAccessories() {\n\n\t\t  const btn = document.getElementById('finalize-accessories-btn');\n\t\t  if (btn) {\n\t\t\tbtn.textContent = 'Dodajanje v ko\u0161arico';\n\t\t\tbtn.disabled = true;               \/\/ optional: prepre\u010di ve\u010dkratni klik\n\t\t\tbtn.classList.add('is-loading');   \/\/ optional: za CSS spinner\n\t\t  }\n        recalculateAndDisplayFinalCart();\n        if(accessoriesChanged) {\n            showStep(10);\n        } else {\n            addToCart();\n        }\n    }\n\n    function populateAccessoryOptions() {\n        const container = accessoryOptionsContainer;\n        container.innerHTML = '';\n        updateFinalizeButton();\n\n        const createGroup = (title, description = '') => {\n            const group = document.createElement('div');\n            group.innerHTML = `<h4>${title}<\/h4>${description ? `<p class=\"explanation-text\" style=\"font-size:0.85em\">${description}<\/p>` : ''}`;\n            const optionGroup = document.createElement('div');\n            optionGroup.className = 'option-group';\n            group.appendChild(optionGroup);\n            container.appendChild(group);\n            return optionGroup;\n        };\n        \n        const generalOptionGroup = createGroup('Splo\u0161ni dodatki');\n        const dmm = productData.accessories.drobni_material;\n        const dmmBtn = document.createElement('div');\n        dmmBtn.className = `option-button ${userSelection.accessories.drobni_material ? 'selected' : ''}`;\n        dmmBtn.onclick = () => toggleAccessoryOption(dmmBtn, 'drobni_material');\n        dmmBtn.innerHTML = `<img decoding=\"async\" src=\"${dmm.img}\" alt=\"${dmm.name}\"><span>${dmm.name}<\/span><div class=\"price-info\">+ ${formatPrice(dmm.price)} \u20ac<\/div>`;\n        generalOptionGroup.appendChild(dmmBtn);\n        \n        const tesnjenjeOptionGroup = createGroup('Tesnjenje', 'Silikonski kit je namenjen tesnjenju spojev in detajlov, ki se pojavijo ob monta\u017ei. Silikonski trak se uporablja primarno za spoj med plo\u0161\u010do in odkapnim profilom, kot alternativa obi\u010dajnemu silikoniranju.');\n        const sk = productData.accessories.silikonski_kit;\n        const skQty = Math.max(1, Math.ceil(userSelection.width.totalAreaM2 \/ 30));\n        const skBtn = document.createElement('div');\n        skBtn.className = `option-button ${userSelection.accessories.silikonski_kit ? 'selected' : ''}`;\n        skBtn.onclick = () => toggleAccessoryOption(skBtn, 'silikonski_kit');\n        skBtn.innerHTML = `<img decoding=\"async\" src=\"${sk.img}\" alt=\"${sk.name}\"><span>${sk.name} (${skQty}x)<\/span><div class=\"price-info\">+ ${formatPrice(sk.price * skQty)} \u20ac<\/div>`;\n        tesnjenjeOptionGroup.appendChild(skBtn);\n        \n        const st = productData.accessories.silikonski_trak;\n        const stBtn = document.createElement('div');\n        stBtn.className = `option-button ${userSelection.accessories.silikonski_trak ? 'selected' : ''}`;\n        stBtn.onclick = () => toggleAccessoryOption(stBtn, 'silikonski_trak');\n        stBtn.innerHTML = `<img decoding=\"async\" src=\"${st.img}\" alt=\"${st.name}\"><span>${st.name}<\/span><div class=\"price-info\">+ ${formatPrice(st.price)} \u20ac<\/div>`;\n        tesnjenjeOptionGroup.appendChild(stBtn);\n        \n        const sideLengthMm = userSelection.length.customCutCm ? userSelection.length.customCutCm * 10 : userSelection.length.panelLengthMm;\n        const aluDripProfileData = productData.accessories.alu_drip_profile[userSelection.panel.thickness];\n        if (aluDripProfileData) {\n            const bocniOptionGroup = createGroup('Dodatni bo\u010dni profili');\n            const { totalCost } = calculateOptimalPieces(aluDripProfileData.id, sideLengthMm * 2, 1);\n            const bpBtn = document.createElement('div');\n            bpBtn.className = `option-button ${userSelection.accessories.bocni_profili ? 'selected' : ''}`;\n            bpBtn.onclick = () => toggleAccessoryOption(bpBtn, 'bocni_profili');\n            bpBtn.innerHTML = `<img decoding=\"async\" src=\"${aluDripProfileData.img}\" alt=\"Bo\u010dni profili\"><span>Dodaj odkapne profile za stranice<\/span><div class=\"price-info\">+ ${formatPrice(totalCost)} \u20ac<\/div>`;\n            bocniOptionGroup.appendChild(bpBtn);\n        }\n\n        const hasFi29 = baseCart.items.some(item => item.subType === 'fi29');\n        const thick = userSelection.panel.thickness;\n        if ((thick === 10 || thick === 16) && hasFi29) {\n             const podlozkeOptionGroup = createGroup('Dodatne podlo\u017eke fi 50mm', 'Te podlo\u017eke so dodatek za bolj\u0161e tesnenje in se uporabijo namesto standardnih fi29mm podlo\u017ek.');\n             const fi29ScrewItem = baseCart.items.find(item => item.subType === 'fi29');\n             \n            let totalScrewsNeeded = 0;\n            if (fi29ScrewItem && fi29ScrewItem.details) {\n                const match = fi29ScrewItem.details.match(\/~(\\d+)\/); \n                if (match && match[1]) {\n                    totalScrewsNeeded = parseInt(match[1], 10);\n                }\n            }\n\n             Object.keys(productData.accessories.fi50_washers[thick]).forEach(color => {\n                const washer = productData.accessories.fi50_washers[thick][color];\n                let neededWasherSets = 0;\n                if (totalScrewsNeeded > 0) {\n                    neededWasherSets = Math.ceil(totalScrewsNeeded \/ washer.perSet);\n                }\n                const totalCost = washer.price * neededWasherSets;\n\n                const wBtn = document.createElement('div');\n                wBtn.className = `option-button ${userSelection.accessories.podlozke_upgrade === color ? 'selected' : ''}`;\n                wBtn.onclick = () => { toggleAccessoryOption(wBtn, 'podlozke_upgrade', color) };\n                wBtn.innerHTML = `<img decoding=\"async\" src=\"${washer.img}\" alt=\"${washer.name}\"><span>${washer.name}<\/span><div class=\"price-info\">+ ${formatPrice(totalCost)} \u20ac<\/div>`;\n                podlozkeOptionGroup.appendChild(wBtn);\n             });\n        }\n        \n        const coverableProfileIDs = [14071, 14082, 14096, 17802];\n        const profilesInBaseCart = baseCart.items.filter(item => coverableProfileIDs.includes(item.id));\n        if(profilesInBaseCart.length > 0) {\n            const pokroviOptionGroup = createGroup('Nadgradnja profilov z okrasnimi pokrovi', 'Okrasni pokrovi skrijejo vijake na spojnih profilih in estetsko zaklju\u010dijo videz nadstre\u0161ka.');\n            let initialCost = 0;\n            const coverableProfileIdsMap = { 14071: 14109, 14082: 14120, 14096: 14132, 17802: 14120 };\n            const lengthsByCoverType = {};\n            profilesInBaseCart.forEach(item => {\n                const coverId = coverableProfileIdsMap[item.id];\n                const variations = accessoryVariations[item.id];\n                const variation = variations.find(v => v.id === item.variationId);\n                if (variation) {\n                    lengthsByCoverType[coverId] = (lengthsByCoverType[coverId] || 0) + (variation.len * item.qty);\n                }\n            });\n            for (const coverIdStr in lengthsByCoverType) {\n                const coverId = parseInt(coverIdStr);\n                const totalLengthMm = lengthsByCoverType[coverId];\n                initialCost += calculateOptimalPieces(coverId, totalLengthMm, 1).totalCost;\n            }\n            const coverAccessoryData = productData.accessories.alu_cover_profile_63mm; \n            const pkBtn = document.createElement('div');\n            pkBtn.className = `option-button ${userSelection.accessories.okrasni_pokrov ? 'selected' : ''}`;\n            pkBtn.onclick = () => toggleAccessoryOption(pkBtn, 'okrasni_pokrov');\n            pkBtn.innerHTML = `<img decoding=\"async\" src=\"${coverAccessoryData.img}\" alt=\"Okrasni pokrovi\"><span>Dodaj okrasne pokrove<\/span><div class=\"price-info\">+ ${formatPrice(initialCost)} \u20ac<\/div>`;\n            pokroviOptionGroup.appendChild(pkBtn);\n        }\n\n        if (userSelection.profiles.type === 'aluminum') {\n            let numExtraProfiles = 2; \n            const panelCombinationCounts = userSelection.width.panelCombination.counts;\n            for (const widthStr in panelCombinationCounts) {\n                const width = parseInt(widthStr, 10);\n                const count = panelCombinationCounts[widthStr];\n                if (width === 2100 || width === 2050) {\n                    numExtraProfiles += count;\n                }\n            }\n\n            const profileLengthMm = userSelection.length.customCutCm ? userSelection.length.customCutCm * 10 : userSelection.length.panelLengthMm;\n            let cost = 0;\n            if (userSelection.profiles.aluDirection === 'precno') {\n                cost = calculateOptimalPieces(productData.accessories.alu_joining_profile.id, profileLengthMm, numExtraProfiles).totalCost;\n            } else { \n                 cost += calculateOptimalPieces(productData.accessories.alu_top_profile.id, profileLengthMm, numExtraProfiles).totalCost;\n                 cost += calculateOptimalPieces(productData.accessories.alu_rubber_gasket.id, profileLengthMm, numExtraProfiles).totalCost;\n            }\n\n            const endCap = productData.accessories.alu_l_profile_end_cap;\n            const endCapCost = numExtraProfiles * 2 * endCap.price;\n            cost += endCapCost;\n            \n            const linijskoOptionGroup = createGroup('Dodatni profili za linijsko vija\u010denje', 'Dodajte profile na sredino vsake plo\u0161\u010de \u0161irine 2050mm\/2100mm in na zunanje robove za mo\u010dnej\u0161o pritrditev brez to\u010dkovnega vija\u010denja skozi plo\u0161\u010de.');\n            const lvBtn = document.createElement('div');\n            lvBtn.className = `option-button ${userSelection.accessories.linijsko_vijacenje ? 'selected' : ''}`;\n            lvBtn.onclick = () => toggleAccessoryOption(lvBtn, 'linijsko_vijacenje');\n            lvBtn.innerHTML = `<img decoding=\"async\" src=\"${productData.accessories.alu_top_profile.img}\" alt=\"Linijsko vija\u010denje\"><span>Dodaj linijsko vija\u010denje<\/span><div class=\"price-info\">+ ${formatPrice(cost)} \u20ac<\/div>`;\n            linijskoOptionGroup.appendChild(lvBtn);\n        }\n\n         if (baseCart.items.some(item => item.id === productData.accessories.alu_top_profile.id)) {\n             const profilOptionGroup = createGroup('Nadgradnja\/Sprememba pokrivnih profilov', 'Standardna \u0161irina spojnih in pokrivnih profilov je 60 mm, saj zagotavlja dobro razmerje med pokrivanjem robov plo\u0161\u010d in razmaki za diletacijo. 50mm \u0161irino izberemo obi\u010dajno le, kot so na\u0161i vzdol\u017eni nosilci \u0161irine 50mm. 80mm \u0161irina profila in tesnila pa izbolj\u0161a tesnenje in olaj\u0161a monta\u017eo, \u010de konstrukcija ni popolnoma pravokotna.');\n             const profile60Id = productData.accessories.alu_top_profile.id;\n             const rubber60Id = productData.accessories.alu_rubber_gasket.id;\n             const profile80Id = productData.accessories.alu_top_profile_80mm.id;\n             const rubber80Id = productData.accessories.alu_rubber_gasket_80mm.id;\n             const profile50Id = productData.accessories.alu_top_profile_50mm.id;\n             const rubber50Id = productData.accessories.alu_rubber_gasket_50mm.id;\n             \n             const numJoints = Object.values(userSelection.width.panelCombination.counts).reduce((s, c) => s + c, 0) - 1;\n             const profileLengthMm = userSelection.length.customCutCm ? userSelection.length.customCutCm * 10 : userSelection.length.panelLengthMm;\n\n             let cost60 = calculateOptimalPieces(profile60Id, profileLengthMm, numJoints).totalCost + calculateOptimalPieces(rubber60Id, profileLengthMm, numJoints).totalCost;\n             \n             let cost50 = calculateOptimalPieces(profile50Id, profileLengthMm, numJoints).totalCost + calculateOptimalPieces(rubber50Id, profileLengthMm, numJoints).totalCost;\n             const priceDiff50 = cost50 - cost60;\n             const pBtn50 = document.createElement('div');\n             pBtn50.className = `option-button ${userSelection.accessories.profil_upgrade === '50mm' ? 'selected' : ''}`;\n             pBtn50.onclick = () => { toggleAccessoryOption(pBtn50, 'profil_upgrade', '50mm') };\n             pBtn50.innerHTML = `<img decoding=\"async\" src=\"${productData.accessories.alu_top_profile_50mm.img}\" alt=\"50mm profili\"><span>Zamenjaj s profili 50mm<\/span><div class=\"price-info\">${priceDiff50 >= 0 ? '+' : ''} ${formatPrice(priceDiff50)} \u20ac<\/div>`;\n             profilOptionGroup.appendChild(pBtn50);\n\n             let cost80 = calculateOptimalPieces(profile80Id, profileLengthMm, numJoints).totalCost + calculateOptimalPieces(rubber80Id, profileLengthMm, numJoints).totalCost;\n             const priceDiff80 = cost80 - cost60;\n             const pBtn80 = document.createElement('div');\n             pBtn80.className = `option-button ${userSelection.accessories.profil_upgrade === '80mm' ? 'selected' : ''}`;\n             pBtn80.onclick = () => { toggleAccessoryOption(pBtn80, 'profil_upgrade', '80mm') };\n             pBtn80.innerHTML = `<img decoding=\"async\" src=\"${productData.accessories.alu_top_profile_80mm.img}\" alt=\"80mm profili\"><span>Zamenjaj s profili 80mm<\/span><div class=\"price-info\">${priceDiff80 >= 0 ? '+' : ''} ${formatPrice(priceDiff80)} \u20ac<\/div>`;\n             profilOptionGroup.appendChild(pBtn80);\n         }\n    }\n    \n    function recalculateAndDisplayFinalCart() {\n        let finalCart = JSON.parse(JSON.stringify(baseCart));\n        const accessories = userSelection.accessories;\n        \n        if (accessories.drobni_material) {\n            const dmm = productData.accessories.drobni_material;\n            if(!finalCart.items.some(i => i.id === dmm.id)) {\n                 addAccessoryByPiece(finalCart, dmm.id, dmm.name, 1, dmm.img, 'Komplet za monta\u017eo');\n            }\n        }\n\n        if (accessories.silikonski_kit) {\n            const sk = productData.accessories.silikonski_kit;\n            if(!finalCart.items.some(i => i.id === sk.id)) {\n                const skQty = Math.max(1, Math.ceil(userSelection.width.totalAreaM2 \/ 30));\n                addAccessoryByPiece(finalCart, sk.id, sk.name, skQty, sk.img, 'Za tesnenje stikov');\n            }\n        }\n        if (accessories.silikonski_trak) {\n             const st = productData.accessories.silikonski_trak;\n             if(!finalCart.items.some(i => i.id === st.id)) {\n                addAccessoryByPiece(finalCart, st.id, st.name, 1, st.img, 'Za zatesnitev odkapnega profila');\n             }\n        }\n\n        if (accessories.bocni_profili) {\n            const sideLengthMm = userSelection.length.customCutCm ? userSelection.length.customCutCm * 10 : userSelection.length.panelLengthMm;\n            const aluDripProfileData = productData.accessories.alu_drip_profile[userSelection.panel.thickness];\n            if (aluDripProfileData) {\n                 addOptimalAccessoryByLength(finalCart, aluDripProfileData.id, aluDripProfileData.name, sideLengthMm * 2, aluDripProfileData.img, 'Za bo\u010dne stranice');\n            }\n        }\n        \n        if (accessories.podlozke_upgrade) {\n            const color = accessories.podlozke_upgrade;\n            const thick = userSelection.panel.thickness;\n            const washerData = productData.accessories.fi50_washers[thick]?.[color];\n            \n            if (washerData) {\n                let fi29ScrewItemInBase = baseCart.items.find(item => item.subType === 'fi29'); \n                \n                if (fi29ScrewItemInBase && fi29ScrewItemInBase.details) {\n                    let totalScrewsNeeded = 0;\n                    const match = fi29ScrewItemInBase.details.match(\/~(\\d+)\/);\n                    if (match && match[1]) {\n                        totalScrewsNeeded = parseInt(match[1], 10);\n                    }\n\n                    if (totalScrewsNeeded > 0) {\n                        const neededWasherSets = Math.ceil(totalScrewsNeeded \/ washerData.perSet);\n                        \n                        finalCart.items.push({\n                            id: washerData.id,\n                            name: washerData.name,\n                            img: washerData.img,\n                            details: `Dodatne podlo\u017eke za ~${totalScrewsNeeded} vijakov (komplet ${washerData.perSet} kos)`,\n                            qty: neededWasherSets,\n                            price: washerData.price,\n                            total: neededWasherSets * washerData.price,\n                            type: 'accessory'\n                        });\n                    }\n                }\n            }\n        }\n        \n        if(accessories.profil_upgrade) {\n            const profile60Id = productData.accessories.alu_top_profile.id;\n            const rubber60Id = productData.accessories.alu_rubber_gasket.id;\n            \n            const profilesToReplace = finalCart.items.filter(item => item.id === profile60Id);\n            const rubbersToReplace = finalCart.items.filter(item => item.id === rubber60Id);\n            \n            if (profilesToReplace.length > 0 || rubbersToReplace.length > 0) {\n                finalCart.items = finalCart.items.filter(item => item.id !== profile60Id && item.id !== rubber60Id);\n\n                let newProfileId, newRubberId, newProfileData, newRubberData;\n\n                if (accessories.profil_upgrade === '80mm') {\n                    newProfileId = productData.accessories.alu_top_profile_80mm.id;\n                    newRubberId = productData.accessories.alu_rubber_gasket_80mm.id;\n                    newProfileData = productData.accessories.alu_top_profile_80mm;\n                    newRubberData = productData.accessories.alu_rubber_gasket_80mm;\n                } else if (accessories.profil_upgrade === '50mm') {\n                    newProfileId = productData.accessories.alu_top_profile_50mm.id;\n                    newRubberId = productData.accessories.alu_rubber_gasket_50mm.id;\n                    newProfileData = productData.accessories.alu_top_profile_50mm;\n                    newRubberData = productData.accessories.alu_rubber_gasket_50mm;\n                }\n\n                if (newProfileId) {\n                    profilesToReplace.forEach(item => {\n                        const len = accessoryVariations[profile60Id].find(v => v.id === item.variationId).len;\n                        addOptimalAccessoryByLength(finalCart, newProfileId, newProfileData.name, len, newProfileData.img, item.details, item.qty);\n                    });\n                    rubbersToReplace.forEach(item => {\n                        const len = accessoryVariations[rubber60Id].find(v => v.id === item.variationId).len;\n                        addOptimalAccessoryByLength(finalCart, newRubberId, newRubberData.name, len, newRubberData.img, item.details, item.qty);\n                    });\n                }\n            }\n        }\n\n        if (accessories.okrasni_pokrov) {\n            const coverableProfileIdsMap = { 14071: 14109, 14082: 14120, 14096: 14132, 17802: 14120 };\n            const coverDataMap = {\n                14109: productData.accessories.alu_cover_profile_53mm,\n                14120: productData.accessories.alu_cover_profile_63mm,\n                14132: productData.accessories.alu_cover_profile_83mm\n            }\n            const profilesToCover = finalCart.items.filter(item => Object.keys(coverableProfileIdsMap).includes(String(item.id)));\n            const lengthsByCoverType = {};\n            profilesToCover.forEach(item => {\n                const coverId = coverableProfileIdsMap[item.id];\n                const variations = accessoryVariations[item.id];\n                const variation = variations.find(v => v.id === item.variationId);\n                if (variation) {\n                    lengthsByCoverType[coverId] = (lengthsByCoverType[coverId] || 0) + (variation.len * item.qty);\n                }\n            });\n\n            for (const coverIdStr in lengthsByCoverType) {\n                const coverId = parseInt(coverIdStr);\n                const totalLengthMm = lengthsByCoverType[coverId];\n                const coverData = coverDataMap[coverId];\n                if (coverData) {\n                    addOptimalAccessoryByLength(finalCart, coverId, coverData.name, totalLengthMm, coverData.img, 'Za pokritje vijakov na profilih');\n                }\n            }\n        }\n        \n        if(accessories.linijsko_vijacenje && userSelection.profiles.type === 'aluminum') {\n            const washerIds = Object.values(productData.accessories.fi50_washers)\n                                  .flatMap(thick => Object.values(thick).map(color => color.id));\n            finalCart.items = finalCart.items.filter(item => {\n                if (item.subType === 'fi29') return false; \n                if (washerIds.includes(item.id)) return false; \n                return true;\n            });\n\n            let numExtraProfiles = 2; \n            const panelCombinationCounts = userSelection.width.panelCombination.counts;\n            for (const widthStr in panelCombinationCounts) {\n                const width = parseInt(widthStr, 10);\n                const count = panelCombinationCounts[widthStr];\n                if (width === 2100 || width === 2050) {\n                    numExtraProfiles += count;\n                }\n            }\n            \n            const profileLengthMm = userSelection.length.customCutCm ? userSelection.length.customCutCm * 10 : userSelection.length.panelLengthMm;\n            \n            if (numExtraProfiles > 0) {\n                 if (userSelection.profiles.aluDirection === 'precno') {\n                    addOptimalAccessoryByLength(finalCart, productData.accessories.alu_joining_profile.id, 'Dodatni Alu dvojni vezni profil', profileLengthMm, productData.accessories.alu_joining_profile.img, 'Za linijsko vija\u010denje', numExtraProfiles);\n                } else { \n                     addOptimalAccessoryByLength(finalCart, productData.accessories.alu_top_profile.id, 'Dodatni Alu pokrivni profil 60mm', profileLengthMm, productData.accessories.alu_top_profile.img, 'Za linijsko vija\u010denje', numExtraProfiles);\n                     addOptimalAccessoryByLength(finalCart, productData.accessories.alu_rubber_gasket.id, 'Dodatna podlo\u017ena guma 60mm', profileLengthMm, productData.accessories.alu_rubber_gasket.img, 'Za linijsko vija\u010denje', numExtraProfiles);\n                }\n                \n                const endCap = productData.accessories.alu_l_profile_end_cap;\n                const endCapQty = numExtraProfiles * 2;\n                finalCart.items.push({\n                    name: endCap.name, \n                    img: endCap.img, \n                    details: `Za zaklju\u010dek dodatnih Alu profilov`,\n                    qty: endCapQty, \n                    price: endCap.price, \n                    total: endCapQty * endCap.price,\n                    id: endCap.id, \n                    type: 'accessory'\n                });\n\n                const findNextLongerScrew = (screwList, requiredLength) => {\n                    if (!screwList || screwList.length === 0) return null;\n                    const sortedScrews = [...screwList].sort((a, b) => a.length - b.length);\n                    const screw = sortedScrews.find(s => s.length >= requiredLength);\n                    return screw || sortedScrews[sortedScrews.length - 1]; \n                };\n                const addScrewSetToCart = (screw, neededQty, detailsSuffix) => {\n                    if (!screw || neededQty <= 0) return;\n                    const setsNeeded = Math.ceil(neededQty \/ screw.perSet);\n                    if (setsNeeded > 0) {\n                        finalCart.items.push({\n                            name: screw.name, img: productData.accessories.screws.img,\n                            details: `Pakiranje ${screw.perSet} kos. ${detailsSuffix} (potrebno ~${Math.ceil(neededQty)} vijakov)`,\n                            qty: setsNeeded, price: screw.price, total: setsNeeded * screw.price,\n                            id: screw.id, type: 'screw', subType: 'fi19', perSet: screw.perSet\n                        });\n                    }\n                };\n\n                const totalNewProfileLengthM = (profileLengthMm * numExtraProfiles) \/ 1000;\n                const numProfileScrews = totalNewProfileLengthM * 3;\n                const screwType = userSelection.construction.material;\n                const requiredLengthProfile = userSelection.panel.thickness + (screwType === 'wood' ? 30 : 15) + 15;\n                const screwListProfile = productData.accessories.screws[screwType]?.fi19;\n                const chosenScrewProfile = findNextLongerScrew(screwListProfile, requiredLengthProfile);\n                addScrewSetToCart(chosenScrewProfile, numProfileScrews, 'Za vija\u010denje dodatnih ALU profilov.');\n            }\n        }\n        \n        userSelection.cart = finalCart;\n    }\n\n    document.addEventListener('DOMContentLoaded', initializeConfigurator);\n<\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":48734,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-48740","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pomo\u0107nik za pokrov od punih polikarbonatnih plo\u010da | Termotom<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pomo\u0107nik za pokrov od punih polikarbonatnih plo\u010da | Termotom\" \/>\n<meta property=\"og:url\" content=\"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\/\" \/>\n<meta property=\"og:site_name\" content=\"Trgovina Termotom\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-10T10:16:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/termotom.com\\\/hr\\\/pomocnik-za-odabir-krovnih-ploca\\\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\\\/\",\"url\":\"https:\\\/\\\/termotom.com\\\/hr\\\/pomocnik-za-odabir-krovnih-ploca\\\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\\\/\",\"name\":\"Pomo\u0107nik za pokrov od punih polikarbonatnih plo\u010da - Trgovina Termotom\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/termotom.com\\\/hr\\\/#website\"},\"datePublished\":\"2025-10-17T16:36:39+00:00\",\"dateModified\":\"2026-10-10T10:16:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/termotom.com\\\/hr\\\/pomocnik-za-odabir-krovnih-ploca\\\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/termotom.com\\\/hr\\\/pomocnik-za-odabir-krovnih-ploca\\\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/termotom.com\\\/hr\\\/pomocnik-za-odabir-krovnih-ploca\\\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna\",\"item\":\"https:\\\/\\\/termotom.com\\\/hr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pomo\u0107nik za odabir krovnih plo\u010da\",\"item\":\"https:\\\/\\\/termotom.com\\\/hr\\\/pomocnik-za-odabir-krovnih-ploca\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Pomo\u0107nik za pokrov od punih polikarbonatnih plo\u010da\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/termotom.com\\\/hr\\\/#website\",\"url\":\"https:\\\/\\\/termotom.com\\\/hr\\\/\",\"name\":\"Trgovina Termotom\",\"description\":\"Internetska trgovina pleksiglasom, polikarbonatnim plo\u010dama, krovnim plo\u010dama i priborom.\",\"publisher\":{\"@id\":\"https:\\\/\\\/termotom.com\\\/hr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/termotom.com\\\/hr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hr\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/termotom.com\\\/hr\\\/#organization\",\"name\":\"Trgovina Termotom\",\"url\":\"https:\\\/\\\/termotom.com\\\/hr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/termotom.com\\\/hr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/termotom.com\\\/wp-content\\\/uploads\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/termotom.com\\\/wp-content\\\/uploads\\\/logo.png\",\"width\":400,\"height\":60,\"caption\":\"Trgovina Termotom\"},\"image\":{\"@id\":\"https:\\\/\\\/termotom.com\\\/hr\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pomo\u0107nik za pokrov od punih polikarbonatnih plo\u010da | Termotom","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\/","og_locale":"hr_HR","og_type":"article","og_title":"Pomo\u0107nik za pokrov od punih polikarbonatnih plo\u010da | Termotom","og_url":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\/","og_site_name":"Trgovina Termotom","article_modified_time":"2026-10-10T10:16:28+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\/","url":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\/","name":"Pomo\u0107nik za pokrov od punih polikarbonatnih plo\u010da - Trgovina Termotom","isPartOf":{"@id":"https:\/\/termotom.com\/hr\/#website"},"datePublished":"2025-10-17T16:36:39+00:00","dateModified":"2026-10-10T10:16:28+00:00","breadcrumb":{"@id":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-pokrov-od-punih-polikarbonatnih-ploca\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna","item":"https:\/\/termotom.com\/hr\/"},{"@type":"ListItem","position":2,"name":"Pomo\u0107nik za odabir krovnih plo\u010da","item":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/"},{"@type":"ListItem","position":3,"name":"Pomo\u0107nik za pokrov od punih polikarbonatnih plo\u010da"}]},{"@type":"WebSite","@id":"https:\/\/termotom.com\/hr\/#website","url":"https:\/\/termotom.com\/hr\/","name":"Trgovina Termotom","description":"Internetska trgovina pleksiglasom, polikarbonatnim plo\u010dama, krovnim plo\u010dama i priborom.","publisher":{"@id":"https:\/\/termotom.com\/hr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/termotom.com\/hr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hr"},{"@type":"Organization","@id":"https:\/\/termotom.com\/hr\/#organization","name":"Trgovina Termotom","url":"https:\/\/termotom.com\/hr\/","logo":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/termotom.com\/hr\/#\/schema\/logo\/image\/","url":"https:\/\/termotom.com\/wp-content\/uploads\/logo.png","contentUrl":"https:\/\/termotom.com\/wp-content\/uploads\/logo.png","width":400,"height":60,"caption":"Trgovina Termotom"},"image":{"@id":"https:\/\/termotom.com\/hr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/termotom.com\/hr\/wp-json\/wp\/v2\/pages\/48740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/termotom.com\/hr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/termotom.com\/hr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/termotom.com\/hr\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/termotom.com\/hr\/wp-json\/wp\/v2\/comments?post=48740"}],"version-history":[{"count":1,"href":"https:\/\/termotom.com\/hr\/wp-json\/wp\/v2\/pages\/48740\/revisions"}],"predecessor-version":[{"id":48741,"href":"https:\/\/termotom.com\/hr\/wp-json\/wp\/v2\/pages\/48740\/revisions\/48741"}],"up":[{"embeddable":true,"href":"https:\/\/termotom.com\/hr\/wp-json\/wp\/v2\/pages\/48734"}],"wp:attachment":[{"href":"https:\/\/termotom.com\/hr\/wp-json\/wp\/v2\/media?parent=48740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}