{"id":48736,"date":"2025-10-17T15:43:32","date_gmt":"2025-10-17T15:43:32","guid":{"rendered":"https:\/\/termotom.com\/?page_id=48736"},"modified":"2026-10-10T10:15:40","modified_gmt":"2026-10-10T10:15:40","slug":"pomocnik-za-valovite-i-profilirane-polikarbonatne-krovne-pokrove","status":"publish","type":"page","link":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-valovite-i-profilirane-polikarbonatne-krovne-pokrove\/","title":{"rendered":"Pomo\u0107nik za valovite i profilirane polikarbonatne krovne pokrove"},"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 kritine<\/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            --font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n            --info-color: #4e4f52;\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;\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;\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;\n        padding: 15px;\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        flex: 1;\n        min-width: 205px;\n        box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n        position: relative; \/* Nujno za pravilno pozicioniranje traku *\/\n        overflow: hidden;   \/* Skrije dele traku, ki segajo \u010dez rob gumba *\/\n    }\n     .option-button.panel-count-btn {\n        min-width: 70px;\n        flex-grow: 0;\n        padding: 10px 5px;\n     }\n\n    .option-button img {\n        max-width: 100%;\n        height: 120px;\n        object-fit: cover;\n        margin-bottom: 10px;\n        border-radius: 4px;\n        border: 1px solid var(--border-color);\n    }\n\n    .option-button span {\n        font-weight: 600;\n        font-size: 0.95em;\n         margin-top: auto;\n         padding-top: 5px;\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     .option-button.disabled {\n         cursor: not-allowed;\n         background-color: #f5f5f5;\n         color: #999;\n         opacity: 0.6;\n         box-shadow: none;\n         border-color: #e0e0e0;\n     }\n\n    \/* --- Dodani stili za trakove (ribbons) --- *\/\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        width: 160px;\n        box-shadow: 0 2px 4px rgba(0,0,0,0.25);\n    }\n    .ribbon-top-right {\n        top: 26px;\n        right: -39px;\n        transform: rotate(45deg);\n    }\n    .ribbon-green {\n        background-color: #28a745;\n    }\n    .ribbon-new {\n        background-color: #ff9800; \/* Oran\u017ena za \"Novo\" *\/\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         flex-wrap: wrap;\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: 5px;\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         white-space: nowrap;\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         flex-wrap: wrap;\n         gap: 10px;\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         flex-grow: 1;\n         min-width: 120px;\n         text-align: center;\n    }\n     .nav-buttons > div {\n         display: flex;\n         gap: 10px;\n         flex-grow: 1;\n         justify-content: flex-end;\n         flex-wrap: wrap;\n     }\n\n\n    .nav-buttons .prev-btn {\n        background-color: #6c757d;\n        color: white;\n         flex-grow: 0;\n         min-width: 100px;\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, #finalize-accessories-btn {\n        background-color: var(--button-color);\n        color: white;\n         flex-grow: 0;\n    }\n    .nav-buttons .next-btn:hover, #start-configurator-btn:hover, #reset-configurator-btn:hover, #add-to-cart-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-final {\n        width: 100%;\n        border-collapse: collapse;\n        margin-bottom: 20px;\n        font-size: 0.95em;\n    }\n\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: top;\n    }\n\n    #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\n    #summary-table-final td {\n        font-size: 0.9em;\n    }\n    #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         display: block;\n         margin-bottom: 5px;\n    }\n    #summary-table-final th:nth-child(2), #summary-table-final td:nth-child(2),\n    #summary-table-final th:nth-child(3), #summary-table-final td:nth-child(3),\n    #summary-table-final th:nth-child(4), #summary-table-final td:nth-child(4) {\n        text-align: right;\n        white-space: nowrap;\n    }\n     #summary-table-final tfoot td {\n          font-weight: bold;\n     }\n    #summary-table-final .item-name {\n         display: block;\n         font-weight: 600;\n         margin-bottom: 4px;\n     }\n    #summary-table-final .item-details {\n        font-size: 0.9em;\n        color: #555;\n        display: block;\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    .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;\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\n    @keyframes fadeIn {\n        from { opacity: 0; transform: translateY(10px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\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: calc(50% - 5px); padding: 10px; }\n         .option-button.panel-count-btn { min-width: calc(33.33% - 7px); }\n        .option-button img { height: 70px; }\n         .option-button span { font-size: 0.85em; }\n        .nav-buttons { flex-direction: column; gap: 10px;}\n        .nav-buttons button { width: 100%; flex-grow: 0; }\n         .nav-buttons > div { width: 100%; display: flex; flex-direction: column; gap: 10px; }\n         .nav-buttons .prev-btn { order: 3; }\n        h2 { font-size: 1.2em; }\n        h3 { font-size: 1.05em; }\n        #summary-table-final td, #summary-table-final th {\n            padding: 6px;\n        }\n        #summary-table-final .item-name, #summary-table-final .item-details {\n             font-size: 0.9em;\n        }\n        .input-group input[type=\"number\"], .input-group input[type=\"text\"] { width: 100px; }\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\t\t\n\t\t#add-to-cart-btn.is-loading {\n\t\t  position: relative;\n\t\t  opacity: .85;\n\t\t}\n\n\t\t#add-to-cart-btn.is-loading::after {\n\t\t  content: \"\";\n\t\t  display: inline-block;\n\t\t  width: 14px;\n\t\t  height: 14px;\n\t\t  margin-left: 10px;\n\t\t  border: 2px solid rgba(255,255,255,.6);\n\t\t  border-top-color: rgba(255,255,255,1);\n\t\t  border-radius: 50%;\n\t\t  animation: kwspin .8s linear infinite;\n\t\t  vertical-align: -2px;\n\t\t}\n\n\t\t@keyframes kwspin {\n\t\t  to { transform: rotate(360deg); }\n\t\t}\n<\/style>\n<\/head>\n<body>\n\n<div id=\"configurator-container\">\n\n<!-- Step 0: Choose Roofing Type -->\n<div id=\"step-0\" class=\"configurator-step\">\n    <h2>Izberite tip kritine<\/h2>\n    <p>Prosimo, izberite \u017eeleni tip prosojne polikarbonatne kritine za va\u0161 projekt.<\/p>\n    <div class=\"option-group\" id=\"roofing-type-options\">\n        <!-- Roofing type options will be loaded here by JS -->\n    <\/div>\n    <div class=\"nav-buttons\" style=\"justify-content: flex-end;\">\n        <button class=\"next-btn\" onclick=\"nextStep()\" disabled>Naprej<\/button>\n    <\/div>\n<\/div>\n\n\n<!-- Step 1: Introduction (Dynamically populated) -->\n<div id=\"step-1\" class=\"configurator-step\">\n    <h2 id=\"intro-title\">Pomo\u010dnik za sestavljanje Kritine<\/h2>\n    <p>Pomagali vam bomo sestaviti kosovnico materiala za va\u0161 nadstre\u0161ek ali streho.<\/p>\n    <p>Sledite korakom in na koncu boste prejeli seznam potrebnih plo\u0161\u010d in dodatnega materiala z izra\u010dunanimi cenami.<\/p>\n    <div class=\"nav-buttons\">\n        <button class=\"prev-btn\" onclick=\"prevStep()\">Nazaj (Izbira kritine)<\/button>\n        <button id=\"start-configurator-btn\" class=\"next-btn\" onclick=\"nextStep()\">Za\u010dni<\/button>\n    <\/div>\n<\/div>\n\n<!-- Step 2: Choose Color (Dynamically populated) -->\n<div id=\"step-2\" class=\"configurator-step\">\n     <div class=\"step-indicator\"><\/div>\n    <h2 id=\"color-title\">Izberite barvo kritine<\/h2>\n    <p>Izberite \u017eeleni barvni odtenek plo\u0161\u010de.<\/p>\n    <div class=\"option-group\" id=\"color-options\">\n        <!-- Color options will be loaded here by JS -->\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 3: Choose Length (Dynamically populated) -->\n<div id=\"step-3\" class=\"configurator-step\">\n    <div class=\"step-indicator\"><\/div>\n    <h2 id=\"length-title\">Izberite dol\u017eino plo\u0161\u010d<\/h2>\n    <p>Dol\u017eina plo\u0161\u010de ustreza razdalji od slemena do kapa va\u0161e strehe ali nadstre\u0161ka (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     <h3>Standardne dol\u017eine:<\/h3>\n    <div class=\"option-group\" id=\"length-options\">\n         <!-- Length options will be loaded here by JS -->\n    <\/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 (Dynamically populated) -->\n<div id=\"step-4\" class=\"configurator-step\">\n    <div class=\"step-indicator\"><\/div>\n    <h2 id=\"width-title\">Dolo\u010dite \u0161irino strehe<\/h2>\n     <p id=\"width-explanation\" class=\"explanation-text\">Pokrivna \u0161irina ene plo\u0161\u010de je X cm.<\/p>\n    <div class=\"roof-sketch-container\">\n         <canvas id=\"roof-sketch-width\" width=\"400\" height=\"200\"><\/canvas>\n    <\/div>\n    <p>Izberite \u0161tevilo plo\u0161\u010d, ki jih potrebujete, ali vpi\u0161ite skupno \u0161irino va\u0161e strehe v centimetrih.<\/p>\n    <div class=\"input-group\">\n         <label for=\"custom-width\">Vpi\u0161ite \u0161irino 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=\"selectCustomWidth()\">Izra\u010dunaj \u0161tevilo plo\u0161\u010d<\/button>\n         <\/div>\n          <div id=\"width-result\" class=\"calculation-result hidden\"><\/div>\n    <\/div>\n     <h3>Izberi \u0161tevilo plo\u0161\u010d:<\/h3>\n     <div class=\"option-group\" id=\"panel-count-options\">\n        <!-- Panel count options generated by JS -->\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 (Dynamically populated) -->\n<div id=\"step-5\" class=\"configurator-step\">\n     <div class=\"step-indicator\"><\/div>\n    <h2 id=\"construction-title\">Izberite vrsto konstrukcije<\/h2>\n    <p>Izberite material va\u0161e nosilne konstrukcije (les ali kovina), da dolo\u010dimo ustrezne vijake.<\/p>\n    <p id=\"construction-explanation\" class=\"explanation-text\">Podrobnosti o vijakih...<\/p>\n    <div class=\"option-group\" id=\"construction-options\">\n        <!-- Construction options loaded by JS -->\n    <\/div>\n    <div class=\"nav-buttons\">\n        <button class=\"prev-btn\" onclick=\"prevStep()\">Nazaj<\/button>\n        <button class=\"next-btn\" onclick=\"showAccessoryStep()\">Nadaljuj<\/button>\n    <\/div>\n<\/div>\n\n<!-- Step 6: Accessories -->\n<div id=\"step-6\" class=\"configurator-step\">\n    <div class=\"step-indicator\"><\/div>\n    <h2 id=\"accessories-title\">Dodatne mo\u017enosti in oprema<\/h2>\n    <p id=\"accessories-p\">Po \u017eelji izberite dodatno opremo. Osnovni material je \u017ee izra\u010dunan.<\/p>\n    \n    <div id=\"accessory-options-container\">\n        <!-- Accessory options will be dynamically inserted here -->\n    <\/div>\n\n    <div class=\"nav-buttons\">\n        <button class=\"prev-btn\" onclick=\"prevStep()\">Nazaj (Konstrukcija)<\/button>\n        <button id=\"finalize-accessories-btn\" class=\"next-btn\" onclick=\"finalizeAccessories()\">Prika\u017ei kon\u010dni povzetek<\/button>\n    <\/div>\n<\/div>\n\n\n<!-- Step 7: Final Summary (Dynamically populated) -->\n<div id=\"step-7\" class=\"configurator-step\">\n    <div class=\"step-indicator\"><\/div>\n    <h2 id=\"summary-title\">Kon\u010dni povzetek<\/h2>\n    <p>Preglejte kon\u010dno kosovnico materiala. Po potrebi se lahko vrnete na prej\u0161nje korake in uredite izbiro.<\/p>\n    <table id=\"summary-table-final\">\n        <thead>\n            <tr>\n                <th>Artikel \/ 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><\/tbody>\n    <\/table>\n\n    <div class=\"nav-buttons\">\n        <button class=\"prev-btn\" onclick=\"showStep(6)\">Nazaj (Dodatki)<\/button>\n        <div>\n             <button id=\"reset-configurator-btn\" 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<\/div>\n\n<script>\n    \/\/ --- Combined Product Data ---\n    const allProductData = {\n        diamond: {\n            configName: \"Diamond\",\n            panels: {\n                name: 'Polikarbonatna valovitka DIAMOND', thickness: 2.8, width: 1045, coverWidth: 988, calcCoverWidth: 1000, panelCountMax: 10,\n                colors: {\n                    'prozorna': { name: 'Prozorna', productName: 'Polikarbonatna valovitka DIAMOND, 2,8 mm, prozorna', productId: 14709, imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/DIAMOND_3-scaled.jpg',\n                        variations: [ {\"id\":14715, \"length\":1000, \"price\":39.69}, {\"id\":14716, \"length\":1500, \"price\":59.34}, {\"id\":14719, \"length\":2000, \"price\":79.00}, {\"id\":14724, \"length\":2500, \"price\":98.65}, {\"id\":14728, \"length\":3000, \"price\":118.68}, {\"id\":14732, \"length\":3500, \"price\":138.34}, {\"id\":14736, \"length\":4000, \"price\":157.99}, {\"id\":14740, \"length\":4500, \"price\":177.64}, {\"id\":14744, \"length\":5000, \"price\":197.68}, {\"id\":14748, \"length\":6000, \"price\":236.97}, {\"id\":14752, \"length\":7000, \"price\":276.66}, {\"id\":14756, \"length\":9000, \"price\":355.65} ]\n                    },\n                    'tonirano-rjava': { name: 'Tonirano Rjava', productName: 'Polikarbonatna valovitka DIAMOND, 2,8 mm, tonirano rjava', productId: 14760, imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/DIAMOND_2-scaled.jpg',\n                        variations: [ {\"id\":14765, \"length\":1000, \"price\":41.68}, {\"id\":14769, \"length\":1500, \"price\":62.31}, {\"id\":14773, \"length\":2000, \"price\":82.95}, {\"id\":14777, \"length\":2500, \"price\":103.58}, {\"id\":14781, \"length\":3000, \"price\":124.61}, {\"id\":14785, \"length\":3500, \"price\":145.25}, {\"id\":14789, \"length\":4000, \"price\":165.90}, {\"id\":14793, \"length\":4500, \"price\":186.53}, {\"id\":14797, \"length\":5000, \"price\":207.56}, {\"id\":14801, \"length\":6000, \"price\":248.83}, {\"id\":14805, \"length\":7000, \"price\":290.51}, {\"id\":14809, \"length\":9000, \"price\":373.45} ]\n                    },\n                    'tonirano-siva': { name: 'Tonirano Siva', productName: 'Polikarbonatna valovitka DIAMOND, 2,8 mm, tonirano siva', productId: 14813, imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/DIAMOND_1-scaled.jpg',\n                        variations: [ {\"id\":14818, \"length\":1000, \"price\":41.68}, {\"id\":14822, \"length\":1500, \"price\":62.31}, {\"id\":14826, \"length\":2000, \"price\":82.95}, {\"id\":14830, \"length\":2500, \"price\":103.58}, {\"id\":14834, \"length\":3000, \"price\":124.61}, {\"id\":14838, \"length\":3500, \"price\":145.25}, {\"id\":14842, \"length\":4000, \"price\":165.90}, {\"id\":14846, \"length\":4500, \"price\":186.53}, {\"id\":14850, \"length\":5000, \"price\":207.56}, {\"id\":14854, \"length\":6000, \"price\":248.83}, {\"id\":14858, \"length\":7000, \"price\":290.51}, {\"id\":14862, \"length\":9000, \"price\":373.45} ]\n                    }\n                }\n            },\n            screws: { perSqm: 4.5, perSet: 25,\n                wood: { id: 14294, varId: 20952, name: 'VIJAK (8) 6,5\u00d765 inox z gobastim tesnilom, lesni, Diamond', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/Vijak-diamond-lesni.jpg', pricePerSet: 17.75 },\n                metal: { id: 14292, varId: 20941, name: 'VIJAK (8) 6,3\u00d750 inox z gobastim tesnilom, za kovino, Diamond', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/Vijak-diamond-kovina.jpg', pricePerSet: 12.00 }\n            },\n            accessories: {\n                seal: { id: 18939, name: 'TESNILO 76x18 IRON za VALOVITKO', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/94.jpg', pricePerSet: 4.16, perSet: 2, description: 'Za tesnjenje stika med kritino in plo\u010devinasto obrobo (komplet 2 kos).' }\n            }\n        },\n        sunsnap: {\n            configName: \"Sunsnap\",\n            panels: {\n                name: 'Polikarbonatna plo\u0161\u010da SunSNAP', thickness: 1, width: 260, coverWidth: 250, calcCoverWidth: 250, panelCountMax: 15,\n                colors: {\n                    'prozorna': { name: 'Prozorna', productName: 'Polikarbonatna plo\u0161\u010da SunSNAP, prozorna', productId: 20083, imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/sunsnap-prozorna.png',\n                        variations: [ {\"id\": 20149, \"length\": 1000, \"price\": 5.71}, {\"id\": 20150, \"length\": 1500, \"price\": 8.55}, {\"id\": 20151, \"length\": 2000, \"price\": 11.41}, {\"id\": 20152, \"length\": 2500, \"price\": 14.26}, {\"id\": 20153, \"length\": 3000, \"price\": 17.12}, {\"id\": 20154, \"length\": 3500, \"price\": 19.96}, {\"id\": 20155, \"length\": 4000, \"price\": 22.81}, {\"id\": 20156, \"length\": 4500, \"price\": 25.67}, {\"id\": 20157, \"length\": 5000, \"price\": 28.52}, {\"id\": 20158, \"length\": 6000, \"price\": 34.22}, {\"id\": 20159, \"length\": 7000, \"price\": 39.93} ]\n                    },\n                    'opal-bela': { name: 'Opal Bela', productName: 'Polikarbonatna plo\u0161\u010da SunSNAP, opal bela', productId: 20094, imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/sunsnap-mlecno-belaa.png',\n                        variations: [ {\"id\": 20175, \"length\": 1000, \"price\": 5.71}, {\"id\": 20176, \"length\": 1500, \"price\": 8.55}, {\"id\": 20177, \"length\": 2000, \"price\": 11.41}, {\"id\": 20178, \"length\": 2500, \"price\": 14.26}, {\"id\": 20179, \"length\": 3000, \"price\": 17.12}, {\"id\": 20180, \"length\": 3500, \"price\": 19.96}, {\"id\": 20181, \"length\": 4000, \"price\": 22.81}, {\"id\": 20182, \"length\": 4500, \"price\": 25.67}, {\"id\": 20183, \"length\": 5000, \"price\": 28.52}, {\"id\": 20184, \"length\": 6000, \"price\": 34.22}, {\"id\": 20185, \"length\": 7000, \"price\": 39.93} ]\n                    },\n                    'dimljeno-siva': { name: 'Dimljeno Siva', productName: 'Polikarbonatna plo\u0161\u010da SunSNAP, dimljeno siva', productId: 20093, imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/sunsnap-siva.png',\n                        variations: [ {\"id\": 20164, \"length\": 1000, \"price\": 5.71}, {\"id\": 20165, \"length\": 1500, \"price\": 8.55}, {\"id\": 20166, \"length\": 2000, \"price\": 11.41}, {\"id\": 20167, \"length\": 2500, \"price\": 14.26}, {\"id\": 20168, \"length\": 3000, \"price\": 17.12}, {\"id\": 20169, \"length\": 3500, \"price\": 19.96}, {\"id\": 20170, \"length\": 4000, \"price\": 22.81}, {\"id\": 20171, \"length\": 4500, \"price\": 25.67}, {\"id\": 20172, \"length\": 5000, \"price\": 28.52}, {\"id\": 20173, \"length\": 6000, \"price\": 34.22}, {\"id\": 20174, \"length\": 7000, \"price\": 39.93} ]\n                    }\n                }\n            },\n            fasteners: { id: 20120, name: 'PRITRDILO za SunSNAP plo\u0161\u010de', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/88-1.jpg', pricePerPiece: 0.49, perSqm: 12 },\n            profiles: {\n                grey: { name: 'Polikarbonatni zaklju\u010dni profil za SunSNAP plo\u0161\u010de, siv', productId: 20122, imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/5d6410cd-5fae-485f-a496-3cdba0ce1ce2.png',\n                    variations: [ {\"id\": 20123, \"length\": 1000, \"price\": 1.95}, {\"id\": 20124, \"length\": 2000, \"price\": 3.90}, {\"id\": 20125, \"length\": 3000, \"price\": 5.86}, {\"id\": 20126, \"length\": 4000, \"price\": 7.81}, {\"id\": 20127, \"length\": 5000, \"price\": 9.76}, {\"id\": 20128, \"length\": 6000, \"price\": 11.71} ]\n                }\n            },\n            screws: { perSqm: 4.5, perSet: 50,\n                wood: { id: 14298, name: 'VIJAK 4.0 x 30 mm inox z vgreznjeno glavo', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/ChatGPT-Image-19.-maj-2025-10_27_53.png', pricePerSet: 3.05 },\n                metal: { id: 20566, name: 'VIJAK 3.9 x 45 mm inox z vgreznjeno glavo', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/ChatGPT-Image-19.-maj-2025-10_28_39.png', pricePerSet: 3.05 }\n            },\n            accessories: {\n                washers_fi19: { id: 17684, name: 'PODLO\u017dKA nerjave\u010de jeklo+GUMA fi 19, za vezne profile', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/23.jpg', pricePerSet: 7.50, perSet: 50, description: 'Podlo\u017eke za vija\u010denje zaklju\u010dnih plo\u0161\u010d in plo\u0161\u010de pod obrobo (komplet 50 kos).' }\n            }\n        },\n        trapez: {\n            configName: \"Trapezna GRECA\",\n            panels: {\n                name: 'Polikarbonatna trapezna plo\u0161\u010da GRECA 5', thickness: 12, width: 1000, coverWidth: 1000, calcCoverWidth: 1000, panelCountMax: 15,\n                colors: {\n                    'prozorna': { name: 'Prozorna', productName: 'Polikarbonatna trapezna plo\u0161\u010da GRECA 5, 12 mm, prozorna', productId: 14935, imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/Termotom_produkti7-scaled.jpg',\n                        variations: [ {\"id\": 14940, \"length\": 1000, \"price\": 39.02}, {\"id\": 14942, \"length\": 2000, \"price\": 78.03}, {\"id\": 14944, \"length\": 3000, \"price\": 117.05}, {\"id\": 14946, \"length\": 4000, \"price\": 156.06}, {\"id\": 14948, \"length\": 5000, \"price\": 195.08}, {\"id\": 14950, \"length\": 7000, \"price\": 273.11} ]\n                    }\n                }\n            },\n            screws: { perSqm: 4.5, perSet: 25,\n                wood: { id: 17672, name: 'VIJAK za les, 6,5x130mm, jeklen, s podlo\u017eko fi19', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/Vijak-za-les-scaled.jpg', pricePerSet: 24.40 },\n                metal: { id: 17673, name: 'VIJAK za kovino, 6,3x100, jeklen, s podlo\u017eko fi19', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/Vijak-za-kovino-scaled.jpg', pricePerSet: 24.40 }\n            },\n            accessories: {\n                washers: { id: 17671, name: 'PODLO\u017dKA JAHA\u010c, TRAPEZ, val 20', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/Jahac-scaled.jpg', pricePerSet: 8.85, perSet: 25, perSqm: 4.5, description: 'Trapez, val 20 (komplet 25 kos)' },\n                grecaSeal: { id: 21036, name: 'TESNILO GRECA', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/tesnilo-greca-trapez.png', pricePerPiece: 4.28, description: 'Tesnilo za en rob plo\u0161\u010de (komplet zgornji in spodnji del, 1m).' }\n            }\n        },\n        veliki_val_diamond: {\n            configName: \"Veliki Val Diamond\",\n            panels: {\n                name: 'Polikarbonatna valovitka VELIKI VAL DIAMOND', thickness: 2.6, width: 1100, coverWidth: 890, calcCoverWidth: 890, panelCountMax: 10,\n                colors: {\n                    'prozorna': { name: 'Prozorna', productName: 'Polikarbonatna valovitka VELIKI VAL DIAMOND, 2,6 mm, prozorna', productId: 20882, imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/f98c9bdc-d024-4437-9a91-986634b194b9.png',\n                        variations: [ {\"id\": 20993, \"length\": 1000, \"price\": 34.08}, {\"id\": 20994, \"length\": 1500, \"price\": 51.12}, {\"id\": 20995, \"length\": 2000, \"price\": 68.16}, {\"id\": 20996, \"length\": 2500, \"price\": 85.20}, {\"id\": 20997, \"length\": 3000, \"price\": 102.23}, {\"id\": 20998, \"length\": 3500, \"price\": 119.27}, {\"id\": 20999, \"length\": 4000, \"price\": 136.31}, {\"id\": 21000, \"length\": 4500, \"price\": 153.35}, {\"id\": 21001, \"length\": 5000, \"price\": 170.39}, {\"id\": 21002, \"length\": 6000, \"price\": 204.47}, {\"id\": 21003, \"length\": 7000, \"price\": 238.55} ]\n                    }\n                }\n            },\n            screws: { perSqm: 4.5, perSet: 25,\n                wood: { id: 14297, varId: 20947, name: 'VIJAK (8) 6,5\u00d7100 inox z gobastim tesnilom, lesni, veliki val', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/Vijak-diamond-lesni.jpg', pricePerSet: 19.50 },\n                metal: { id: 20585, varId: 20944, name: 'VIJAK (8) 6,3\u00d775 inox z gobastim tesnilom, za kovino, valovitka veliki val 177\/51', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/Vijak-diamond-kovina.jpg', pricePerSet: 15.50 }\n            },\n            accessories: {\n                seal: { id: 18941, name: 'TESNILO 177x51 IRON za VALOVITKO', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/95.jpg', pricePerPiece: 1.28, description: 'Za tesnjenje stika med kritino in plo\u010devinasto obrobo.' },\n                spacers: { id: 18914, name: 'DISTAN\u010cNIK SINUS ZA VALOVITKO 177\/51', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/distancniki.jpg', pricePerSet: 12.30, perSet: 25, description: 'Za podporo pri vija\u010denju (komplet 25 kos).' }\n            }\n        },\n        veliki_val_standard: {\n            configName: \"Veliki Val Standard\",\n            panels: {\n                name: 'Polikarbonatna valovitka VELIKI VAL', thickness: 0.9, width: 1100, coverWidth: 890, calcCoverWidth: 890, panelCountMax: 10,\n                colors: {\n                    'prozorna': { name: 'Prozorna', productName: 'Polikarbonatna valovitka VELIKI VAL, 0,9 mm, prozorna', productId: 14919, imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/Termotom_produkti4-scaled.jpg',\n                        variations: [ {\"id\": 14923, \"length\": 1000, \"price\": 15.41}, {\"id\": 14925, \"length\": 2000, \"price\": 30.82}, {\"id\": 14927, \"length\": 3000, \"price\": 46.23}, {\"id\": 14929, \"length\": 4000, \"price\": 61.64}, {\"id\": 14931, \"length\": 5000, \"price\": 77.06}, {\"id\": 14933, \"length\": 7000, \"price\": 107.88} ]\n                    }\n                }\n            },\n            screws: { perSqm: 4.5, perSet: 25,\n                wood: { id: 14297, varId: 20947, name: 'VIJAK (8) 6,5\u00d7100 inox z gobastim tesnilom, lesni, veliki val', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/Vijak-diamond-lesni.jpg', pricePerSet: 19.50 },\n                metal: { id: 20585, varId: 20944, name: 'VIJAK (8) 6,3\u00d775 inox z gobastim tesnilom, za kovino, valovitka veliki val 177\/51', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/Vijak-diamond-kovina.jpg', pricePerSet: 15.50 }\n            },\n            accessories: {\n                seal: { id: 18941, name: 'TESNILO 177x51 IRON za VALOVITKO', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/95.jpg', pricePerPiece: 1.28, description: 'Za tesnjenje stika med kritino in plo\u010devinasto obrobo.' },\n                spacers: { id: 18914, name: 'DISTAN\u010cNIK SINUS ZA VALOVITKO 177\/51', imageUrl: 'https:\/\/termotom.com\/wp-content\/uploads\/distancniki.jpg', pricePerSet: 12.30, perSet: 25, description: 'Za podporo pri vija\u010denju (komplet 25 kos).' }\n            }\n        }\n    };\n    let productData = {};\n\n    \/\/ --- State Variables ---\n    let currentStep = 0;\n    const MAX_STEPS = 7;\n    const TOTAL_CONFIG_STEPS_FOR_INDICATOR = 6; \n    \n    let selectedRoofingType = null;\n    let userSelection = {};\n    let baseCart = {};\n\n    function resetUserSelectionState() {\n        userSelection = {\n            color: null, panelLength: null, customLengthCm: null, customCutCm: null,\n            numPanels: 0, customWidthCm: null, constructionType: null,\n            selectedPanelVariation: null,\n            cart: { items: [], notes: [], totalPrice: 0, totalArea: 0 },\n            accessories: { sideSeal: false, spacers: false, spacerUpgrade: false, grecaSeal: false }\n        };\n        baseCart = { items: [], notes: [], totalPrice: 0, totalArea: 0 };\n    }\n\n    \/\/ --- DOM Elements ---\n    const allStepElements = document.querySelectorAll('.configurator-step');\n    const roofingTypeOptionsContainer = document.getElementById('roofing-type-options');\n    const colorOptionsContainer = document.getElementById('color-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 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 customWidthInput = document.getElementById('custom-width');\n    const widthResultDiv = document.getElementById('width-result');\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    const introTitle = document.getElementById('intro-title');\n    const colorTitle = document.getElementById('color-title');\n    const lengthTitle = document.getElementById('length-title');\n    const widthTitle = document.getElementById('width-title');\n    const widthExplanation = document.getElementById('width-explanation');\n    const constructionTitle = document.getElementById('construction-title');\n    const constructionExplanation = document.getElementById('construction-explanation');\n    const summaryTitle = document.getElementById('summary-title');\n    const accessoriesTitle = document.getElementById('accessories-title');\n\n    \/\/ --- Initialization & Navigation ---\n    function initializeConfigurator() {\n        resetUserSelectionState();\n        loadRoofingTypeOptions();\n        showStep(0);\n        drawRoofSketch(sketchLengthCanvas, 'length');\n        drawRoofSketch(sketchWidthCanvas, 'width');\n    }\n\t\n\t\tfunction scrollToConfiguratorTop() {\n\t  const el = document.getElementById('configurator-container');\n\t  if (!el) return;\n\n\t  const y = el.getBoundingClientRect().top + window.pageYOffset - 20; \/\/ 20px rezerve\n\t  window.scrollTo({ top: y, behavior: 'smooth' });\n\t}\n\tfunction scrollToPageTop() {\n\t  window.scrollTo({ top: 0, behavior: 'smooth' });\n\t}\n    \n    function loadRoofingTypeOptions() {\n        const roofingTypes = [\n            { key: 'diamond', name: 'Diamond Valovitke', imageUrl: allProductData.diamond.panels.colors.prozorna.imageUrl, ribbon: { text: '100% garancija', class: 'ribbon-green' } },\n            { key: 'sunsnap', name: 'Sunsnap Plo\u0161\u010de', imageUrl: allProductData.sunsnap.panels.colors.prozorna.imageUrl, ribbon: { text: 'Novo', class: 'ribbon-new' } },\n            { key: 'trapez', name: 'Trapezne Plo\u0161\u010de GRECA', imageUrl: allProductData.trapez.panels.colors.prozorna.imageUrl },\n            { key: 'veliki_val_diamond', name: 'Veliki Val Diamond', imageUrl: allProductData.veliki_val_diamond.panels.colors.prozorna.imageUrl, ribbon: { text: '2,6 mm', class: 'ribbon-green' } },\n            \/*{ key: 'veliki_val_standard', name: 'Veliki Val Standard (0.9mm)', imageUrl: allProductData.veliki_val_standard.panels.colors.prozorna.imageUrl },*\/\n        ];\n        populateOptionGroup('roofing-type-options', roofingTypes, 'roofingType', (key) => selectRoofingType(key));\n    }\n\n    function showStep(stepNumber) {\n        currentStep = stepNumber;\n        allStepElements.forEach(step => step.classList.remove('active'));\n        const currentStepElement = document.getElementById(`step-${stepNumber}`);\n        if (currentStepElement) {\n            currentStepElement.classList.add('active');\n            if (stepNumber > 0 && selectedRoofingType) {\n                loadStepContent(stepNumber);\n            }\n            updateStepIndicator(stepNumber);\n            updateButtonStates(stepNumber);\n\t\t\trequestAnimationFrame(() => scrollToPageTop());\n        }\n    }\n\n    function nextStep() {\n        if (currentStep < MAX_STEPS && validateCurrentStep()) {\n            showStep(currentStep + 1);\n        } else if (!validateCurrentStep()) {\n            alert('Prosimo, naredite izbiro, da nadaljujete.');\n        }\n    }\n\n    function prevStep() {\n        if (currentStep === 1) resetConfigurator();\n        else if(currentStep > 0) showStep(currentStep - 1);\n    }\n    \n    function resetConfigurator() {\n        selectedRoofingType = null; productData = {};\n        resetUserSelectionState();\n        initializeConfigurator();\n    }\n\n    function selectRoofingType(typeKey) {\n        if (selectedRoofingType !== typeKey) {\n            selectedRoofingType = typeKey;\n            productData = allProductData[typeKey];\n            resetUserSelectionState();\n        }\n        roofingTypeOptionsContainer.querySelectorAll('.option-button').forEach(btn => btn.classList.toggle('selected', btn.dataset.value === typeKey));\n        updateButtonStates(0);\n    }\n    \n    function validateCurrentStep() {\n         switch(currentStep) {\n             case 0: return selectedRoofingType !== null;\n             case 1: return true;\n             case 2: return userSelection.color !== null;\n             case 3: return userSelection.panelLength !== null;\n             case 4: return userSelection.numPanels > 0;\n             case 5: return userSelection.constructionType !== null;\n             default: return true;\n         }\n     }\n\n    function updateButtonStates(stepNumber) {\n        const currentStepElement = document.getElementById(`step-${stepNumber}`);\n        if (!currentStepElement) return;\n        const nextBtn = currentStepElement.querySelector('.next-btn, #finalize-accessories-btn');\n        const prevBtn = currentStepElement.querySelector('.prev-btn');\n\n        if (prevBtn) {\n            if (stepNumber === 0) prevBtn.style.display = \"none\";\n            else prevBtn.style.display = \"flex\";\n            if (stepNumber === 1) prevBtn.textContent = \"Nazaj (Izbira kritine)\";\n            else prevBtn.textContent = \"Nazaj\";\n        }\n        if (nextBtn) {\n            nextBtn.disabled = !validateCurrentStep();\n        }\n    }\n\n    function updateStepIndicator(stepNumber) {\n        const stepIndicatorEl = document.querySelector(`#step-${stepNumber} .step-indicator`);\n        if (stepIndicatorEl) {\n            if (stepNumber >= 2 && stepNumber <= 6) { \/\/ Color to Accessories\n                stepIndicatorEl.textContent = `Korak ${stepNumber - 1} od ${TOTAL_CONFIG_STEPS_FOR_INDICATOR - 1}`;\n                stepIndicatorEl.style.display = 'block';\n            } else {\n                stepIndicatorEl.style.display = 'none';\n            }\n        }\n    }\n\n    \/\/ --- Content & UI Population ---\n    function loadStepContent(stepNumber) {\n        if (!selectedRoofingType) return;\n        switch (stepNumber) {\n            case 1: introTitle.textContent = `Pomo\u010dnik za ${productData.configName} Kritino`; break;\n            case 2: colorTitle.textContent = `Izberite barvo ${productData.configName} kritine`; loadColorOptions(); break;\n            case 3: lengthTitle.textContent = `Izberite dol\u017eino ${productData.configName} plo\u0161\u010d`; loadLengthOptions(); break;\n            case 4: widthTitle.textContent = `Dolo\u010dite \u0161irino strehe za ${productData.configName} kritino`;\n                widthExplanation.textContent = `Pokrivna \u0161irina ene plo\u0161\u010de je ${productData.panels.coverWidth \/ 10} cm.`;\n                if(productData.panels.coverWidth !== productData.panels.calcCoverWidth) widthExplanation.textContent += ` Za la\u017eji izra\u010dun bomo upo\u0161tevali pokrivno \u0161irino ${productData.panels.calcCoverWidth \/ 10} cm na plo\u0161\u010do.`\n                loadPanelCountOptions(); break;\n            case 5: constructionTitle.textContent = `Izberite vrsto konstrukcije za ${productData.configName} kritino`; loadConstructionOptions(); break;\n            case 6: accessoriesTitle.textContent = `Dodatne mo\u017enosti za ${productData.configName}`; calculateBaseMaterials(); populateAccessoryOptions(); break;\n            case 7: summaryTitle.textContent = `Kon\u010dni povzetek za ${productData.configName} kritino`; recalculateFinalCart(); displayFinalCart(); break;\n        }\n    }\n    \n    function populateOptionGroup(containerId, options, stateKey, onClickAction) {\n        const container = document.getElementById(containerId);\n        container.innerHTML = '';\n        options.forEach(opt => {\n            const button = document.createElement('div');\n            button.className = 'option-button';\n            button.dataset.value = opt.key;\n\n            let ribbonHtml = '';\n            if (opt.ribbon) {\n                ribbonHtml = `<div class=\"ribbon ribbon-top-right ${opt.ribbon.class}\">${opt.ribbon.text}<\/div>`;\n            }\n\n            button.innerHTML = `${ribbonHtml}<img decoding=\"async\" src=\"${opt.imageUrl}\" alt=\"${opt.name}\" loading=\"lazy\"><span>${opt.name}<\/span>`;\n            if (userSelection[stateKey] === opt.key) button.classList.add('selected');\n            button.onclick = () => onClickAction(opt.key, button, container);\n            container.appendChild(button);\n        });\n    }\n\n    function selectOption(container, selectedButton, stateKey, value) {\n         container.querySelectorAll('.option-button').forEach(btn => btn.classList.remove('selected'));\n         selectedButton.classList.add('selected');\n         userSelection[stateKey] = value;\n         updateButtonStates(currentStep);\n    }\n    \n    function loadColorOptions() {\n        const colorOpts = Object.keys(productData.panels.colors).map(key => ({ key, ...productData.panels.colors[key] }));\n        populateOptionGroup('color-options', colorOpts, 'color', (key, button, container) => selectOption(container, button, 'color', key));\n    }\n\n    function loadLengthOptions() {\n        lengthOptionsContainer.innerHTML = '';\n        if (!userSelection.color) return;\n        const variations = productData.panels.colors[userSelection.color]?.variations || [];\n        const uniqueLengths = [...new Set(variations.map(v => v.length))].sort((a,b) => a-b);\n        uniqueLengths.forEach(length => {\n            const button = document.createElement('div');\n            button.className = 'option-button';\n            button.dataset.value = length;\n            button.textContent = `${length \/ 10} cm`;\n            if(userSelection.panelLength === length) button.classList.add('selected');\n            button.onclick = () => {\n                selectOption(lengthOptionsContainer, button, 'panelLength', length);\n                customCutSection.classList.remove('hidden'); userSelection.customCutCm = null; customCutInput.value=''; customCutInfo.innerHTML='';\n            };\n            lengthOptionsContainer.appendChild(button);\n        });\n    }\n    \nfunction loadPanelCountOptions() {\n    panelCountOptionsContainer.innerHTML = '';\n    if (!productData.panels) return;\n\n    \/\/ Ustvarimo funkcijo za izdelavo gumbov, da se izognemo ponavljanju kode\n    const createButton = (count) => {\n        const button = document.createElement('div');\n        button.className = 'option-button panel-count-btn';\n        button.dataset.value = count;\n        button.textContent = `${count} kos`;\n        if (userSelection.numPanels === count) button.classList.add('selected');\n        button.onclick = () => {\n            selectOption(panelCountOptionsContainer, button, 'numPanels', count);\n            customWidthInput.value = '';\n            \nconst extraWidthCm = (selectedRoofingType === 'veliki_val_diamond' || selectedRoofingType === 'veliki_val_standard') ? 18.0 : 0;\nconst totalWidth = (count * productData.panels.calcCoverWidth \/ 10) + extraWidthCm; \/\/ Uporabi 'count' namesto 'i'\nwidthResultDiv.innerHTML = `Izbrali ste <strong>${count}<\/strong> plo\u0161\u010d(o), kar pokrije \u0161irino <strong>${totalWidth.toFixed(1)} cm<\/strong> (vklju\u010dno z zaklju\u010dnim valom).`;\n\n            widthResultDiv.classList.remove('hidden');\n        };\n        panelCountOptionsContainer.appendChild(button);\n    };\n\n    if (selectedRoofingType === 'sunsnap') {\n        \/\/ Generiraj gumbe v korakih po 5 za Sunsnap\n        for (let i = 5; i <= 50; i += 5) {\n            createButton(i);\n        }\n    } else {\n        \/\/ Uporabi standardno logiko za ostale kritine\n        const maxPanels = productData.panels.panelCountMax || 10;\n        for (let i = 1; i <= maxPanels; i++) {\n            createButton(i);\n        }\n    }\n}\n    \n    function loadConstructionOptions() {\n        const constructionTypes = [\n            { key: 'wood', name: 'Lesena konstrukcija', imageUrl: productData.screws.wood.imageUrl },\n            { key: 'metal', name: 'Kovinska konstrukcija', imageUrl: productData.screws.metal.imageUrl }\n        ];\n        populateOptionGroup('construction-options', constructionTypes, 'constructionType', (key, button, container) => selectOption(container, button, 'constructionType', key));\n        \n        if (selectedRoofingType === 'sunsnap') constructionExplanation.textContent = `Za pritrditev Sunsnap plo\u0161\u010d se uporabljajo posebna pritrdila (${productData.fasteners.perSqm} kos\/m\u00b2). Za pritrditev teh pritrdil in zaklju\u010dnih profilov na va\u0161o konstrukcijo pa potrebujete ustrezne vijake (predvidevamo ${productData.screws.perSqm} vijaka\/m\u00b2, kompleti po ${productData.screws.perSet} kosov).`;\n        else if (selectedRoofingType === 'trapez') constructionExplanation.textContent = `Za pritrditev ${productData.configName} kritine predvidevamo ${productData.screws.perSqm} vijaka in ${productData.accessories.washers.perSqm} jaha\u010da (trapezne podlo\u017eke) na m\u00b2 kritine. Prodajajo se v kompletih po ${productData.screws.perSet} kosov.`;\n        else constructionExplanation.textContent = `Za vsak kvadratni meter (m\u00b2) ${productData.configName} kritine predvidevamo pribli\u017eno ${productData.screws.perSqm} vijaka. Vijaki se prodajajo v kompletih po ${productData.screws.perSet} kosov.`;\n    }\n\n    \/\/ --- Input Logic ---\n    function selectCustomLength() {\n         const lengthCm = parseFloat(customLengthInput.value);\n         if (!userSelection.color || isNaN(lengthCm) || lengthCm <= 0) {\n             lengthResultDiv.innerHTML = `<span style=\"color: red;\">Vpi\u0161ite veljavno dol\u017eino.<\/span>`; lengthResultDiv.classList.remove('hidden'); return;\n         }\n         userSelection.customLengthCm = lengthCm;\n         const availableLengths = productData.panels.colors[userSelection.color].variations.map(v => v.length).sort((a,b) => a-b);\n         const nextStandardLength = availableLengths.find(l => l >= lengthCm * 10) || availableLengths[availableLengths.length - 1];\n         \n         userSelection.panelLength = nextStandardLength;\n         userSelection.customCutCm = lengthCm;\n         \n         lengthResultDiv.innerHTML = `Za va\u0161o mero <strong>${lengthCm} cm<\/strong> potrebujete plo\u0161\u010do dol\u017eine <strong>${nextStandardLength \/ 10} cm<\/strong>, ki jo bomo odrezali.`;\n         lengthResultDiv.classList.remove('hidden');\n         lengthOptionsContainer.querySelectorAll('.option-button').forEach(btn => btn.classList.toggle('selected', parseInt(btn.dataset.value) === nextStandardLength));\n         \n         customCutSection.classList.remove('hidden');\n         customCutInput.value = lengthCm;\n         customCutInfo.textContent = `Potrjena dol\u017eina odreza: ${lengthCm} cm.`;\n         updateButtonStates(currentStep);\n    }\n    \n    function setCustomCut() {\n        const cutCm = parseFloat(customCutInput.value);\n        if (isNaN(cutCm) || cutCm <= 0) {\n            customCutInfo.innerHTML = `Vnesite veljavno dol\u017eino razreza.`;\n            customCutInfo.style.color = 'red';\n            return;\n        }\n\n        const availableLengths = productData.panels.colors[userSelection.color].variations.map(v => v.length).sort((a, b) => a - b);\n        const newStandardLength = availableLengths.find(l => l >= cutCm * 10);\n\n        if (!newStandardLength) {\n            const maxLengthCm = availableLengths[availableLengths.length - 1] \/ 10;\n            customCutInfo.innerHTML = `\u017delena dol\u017eina razreza (${cutCm} cm) presega najve\u010djo standardno dol\u017eino (${maxLengthCm} cm). Prosimo, vnesite manj\u0161o vrednost.`;\n            customCutInfo.style.color = 'red';\n        } else {\n            userSelection.customCutCm = cutCm;\n            userSelection.panelLength = newStandardLength; \n\n            customCutInfo.innerHTML = `Potrjen odrez na <strong>${cutCm} cm<\/strong>. Samodejno je bila izbrana plo\u0161\u010da dol\u017eine <strong>${newStandardLength \/ 10} cm<\/strong>.`;\n            customCutInfo.style.color = 'var(--info-color)';\n\n            lengthOptionsContainer.querySelectorAll('.option-button').forEach(btn => {\n                btn.classList.toggle('selected', parseInt(btn.dataset.value) === newStandardLength);\n            });\n            \n            updateButtonStates(currentStep);\n        }\n    }\n\n    function selectCustomWidth() {\n         const widthCm = parseFloat(customWidthInput.value);\n         if (isNaN(widthCm) || widthCm <= 0) {\n              widthResultDiv.innerHTML = `<span style=\"color: red;\">Vpi\u0161ite veljavno \u0161irino.<\/span>`; widthResultDiv.classList.remove('hidden'); return;\n         }\n        userSelection.customWidthCm = widthCm;\n        const numPanels = Math.ceil(widthCm \/ (productData.panels.calcCoverWidth \/ 10));\n        userSelection.numPanels = numPanels;\n        \n        const extraWidthCm = (selectedRoofingType === 'veliki_val_diamond' || selectedRoofingType === 'veliki_val_standard') ? 18.0 : 0;\n        const totalWidth = (numPanels * productData.panels.calcCoverWidth \/ 10) + extraWidthCm;\n        widthResultDiv.innerHTML = `Za \u0161irino <strong>${widthCm} cm<\/strong> potrebujete <strong>${numPanels}<\/strong> plo\u0161\u010d(o), ki skupaj pokrijejo <strong>${totalWidth.toFixed(1)} cm<\/strong> (vklju\u010dno z zaklju\u010dnim valom).`;\n\n        widthResultDiv.classList.remove('hidden');\n        panelCountOptionsContainer.querySelectorAll('.option-button').forEach(btn => btn.classList.toggle('selected', parseInt(btn.dataset.value) === numPanels));\n        updateButtonStates(currentStep);\n     }\n     \n    \/\/ --- Accessories ---\n    function showAccessoryStep() {\n        if (!validateCurrentStep()) { alert(\"Dokon\u010dajte prej\u0161nji korak.\"); return; }\n        showStep(6);\n    }\n\n\tfunction finalizeAccessories() {\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\t\t\n\t\trecalculateFinalCart();\n\n\t\t\/\/ Check if any accessories were changed\/selected\n\t\tconst hasAccessories = Object.values(userSelection.accessories).some(val => val === true || val !== null);\n\n\t\t\/\/ If accessories were selected\/changed, show the final summary first\n\t\t\/\/ If no accessories, add to cart directly\n\t\tif (hasAccessories) {\n\t\t\tshowStep(7); \/\/ Show final summary with all selected accessories\n\t\t} else {\n\t\t\t\/\/ No accessories selected, skip summary and add to cart directly\n\t\t\taddToCart();\n\t\t}\n\t}\n\t\n\t\n\tfunction toggleAccessoryOption(stateKey) {\n\t\tif (stateKey === 'spacerUpgrade') {\n\t\t\tuserSelection.accessories.spacerUpgrade = !userSelection.accessories.spacerUpgrade;\n\t\t} else {\n\t\t\tuserSelection.accessories[stateKey] = !userSelection.accessories[stateKey];\n\t\t}\n\t\tpopulateAccessoryOptions(); \/\/ This will now also update the button\n\t}\n\n    function populateAccessoryOptions() {\n        accessoryOptionsContainer.innerHTML = '';\n        if (!productData.accessories && selectedRoofingType !== 'sunsnap') {\n            accessoryOptionsContainer.innerHTML = `<p class=\"explanation-text\">Za to vrsto kritine trenutno niso na voljo dodatne opcije v konfiguratorju.<\/p>`;\n            return;\n        }\n        recalculateFinalCart();\n        \n        const createAccessoryButton = (optionKey, data) => {\n            const isSelected = userSelection.accessories[optionKey];\n            const button = document.createElement('div');\n            button.className = `option-button ${isSelected ? 'selected' : ''}`;\n            const priceText = data.price >= 0 ? `+ ${formatPrice(data.price)} \u20ac` : `- ${formatPrice(Math.abs(data.price))} \u20ac`;\n            button.innerHTML = `\n                <img decoding=\"async\" src=\"${data.imageUrl}\" alt=\"${data.name}\" loading=\"lazy\">\n                <span>${data.name}<\/span>\n                <span class=\"item-details\" style=\"margin-top:5px;\">${data.description}<\/span>\n                <span class=\"item-details\" style=\"font-weight:bold; margin-top: 5px;\">${priceText}<\/span>`;\n            button.onclick = () => toggleAccessoryOption(optionKey);\n            return button;\n        };\n\n        if (productData.accessories?.seal) {\n            const sealData = JSON.parse(JSON.stringify(productData.accessories.seal));\n            const pricePerUnit = sealData.pricePerSet || sealData.pricePerPiece;\n            let neededSets = 0;\n            \n            if (sealData.id === 18941) { \/\/ Specifi\u010dna logika za tesnilo Veliki Val (177x51)\n                neededSets = userSelection.numPanels;\n                sealData.description = `Potrebujete ${neededSets} tesnil (1 na plo\u0161\u010do).`;\n            } else { \/\/ Obstoje\u010da logika za tesnilo Diamond (76x18)\n                const roofWidthM = (userSelection.numPanels * productData.panels.coverWidth) \/ 1000;\n                const sealLengthM = 0.71; \/\/ Predpostavljena dol\u017eina za manj\u0161e tesnilo\n                const neededPieces = Math.ceil(roofWidthM \/ sealLengthM);\n                neededSets = Math.ceil(neededPieces \/ (sealData.perSet || 1));\n                sealData.description += ` (Potrebujete ~${neededPieces} kosov \/ ${neededSets} kompl.)`;\n            }\n\n            sealData.price = neededSets * pricePerUnit;\n            accessoryOptionsContainer.appendChild(createAccessoryButton('sideSeal', sealData));\n        }\n        \n        if (productData.accessories?.spacers) {\n            const spacerData = JSON.parse(JSON.stringify(productData.accessories.spacers));\n            const totalScrews = Math.ceil(baseCart.totalArea * productData.screws.perSqm);\n            const numSpacerSets = Math.ceil(totalScrews \/ spacerData.perSet);\n            spacerData.price = numSpacerSets * spacerData.pricePerSet;\n            \n            if (selectedRoofingType === 'veliki_val_standard') {\n                const sealsInBase = baseCart.items.find(item => item.autoAdded);\n                const priceDiff = spacerData.price - (sealsInBase ? sealsInBase.qty * sealsInBase.price : 0);\n                const upgradeData = { name: `Nadgradnja na distan\u010dnike`, description: `Zamenja avtomatsko dodana tesnila z bolj robustnimi distan\u010dniki za la\u017eje vija\u010denje.`, imageUrl: spacerData.imageUrl, price: priceDiff };\n                accessoryOptionsContainer.appendChild(createAccessoryButton('spacerUpgrade', upgradeData));\n            } else {\n                accessoryOptionsContainer.appendChild(createAccessoryButton('spacers', spacerData));\n            }\n        }\n\n        if (productData.accessories?.grecaSeal && selectedRoofingType === 'trapez') {\n            const sealData = JSON.parse(JSON.stringify(productData.accessories.grecaSeal));\n            const numPanels = userSelection.numPanels;\n            sealData.price = numPanels * sealData.pricePerPiece;\n            sealData.description += ` Potrebujete ${numPanels} kompletov (1 za vsako plo\u0161\u010do).`;\n            accessoryOptionsContainer.appendChild(createAccessoryButton('grecaSeal', sealData));\n        }\n        \n        if (accessoryOptionsContainer.innerHTML === '') {\n             accessoryOptionsContainer.innerHTML = `<p class=\"explanation-text\">Za to vrsto kritine trenutno niso na voljo dodatne opcije v konfiguratorju.<\/p>`;\n        }\n\t\t\t\n\t\tupdateFinalizeButtonState();\n    }\n\t\t\t\n\t\t\t\n\tfunction updateFinalizeButtonState() {\n\t\tconst finalizeBtn = document.getElementById('finalize-accessories-btn');\n\t\tif (!finalizeBtn) return;\n\n\t\t\/\/ Check if any accessories are selected\n\t\tconst hasAccessories = Object.values(userSelection.accessories).some(val => val === true || val !== null);\n\n\t\tif (hasAccessories) {\n\t\t\tfinalizeBtn.textContent = 'Prika\u017ei posodobljen povzetek';\n\t\t\tfinalizeBtn.onclick = () => finalizeAccessories();\n\t\t} else {\n\t\t\tfinalizeBtn.textContent = 'Dodaj v ko\u0161arico';\n\t\t\tfinalizeBtn.onclick = () => addToCart();\n\t\t}\n\t}\n\n    \/\/ --- Calculation & Summary ---\n    function calculateBaseMaterials() {\n        if (!validateCurrentStep()) return;\n        \n        baseCart = { items: [], notes: [], totalPrice: 0, totalArea: 0 }; \n\n        const finalPanelLengthMm = (userSelection.customCutCm && userSelection.customCutCm * 10 <= userSelection.panelLength) ? userSelection.customCutCm * 10 : userSelection.panelLength;\n        const finalPanelLengthM = finalPanelLengthMm \/ 1000;\n        \n        const extraWidthM = (selectedRoofingType === 'veliki_val_diamond' || selectedRoofingType === 'veliki_val_standard') ? 0.18 : 0;\n        const totalCoverWidthM = (userSelection.numPanels * (productData.panels.calcCoverWidth \/ 1000)) + extraWidthM;\n        baseCart.totalArea = totalCoverWidthM * finalPanelLengthM;\n\n        const panelColorData = productData.panels.colors[userSelection.color];\n        const selectedPanelVariation = panelColorData.variations.find(v => v.length === userSelection.panelLength);\n        if(!selectedPanelVariation) { alert(\"Napaka: ni mogo\u010de najti izbrane plo\u0161\u010de.\"); return; }\n        \n        baseCart.items.push({\n            id: selectedPanelVariation.id, name: panelColorData.productName, qty: userSelection.numPanels, price: selectedPanelVariation.price,\n            details: `Barva: ${panelColorData.name}, Dol\u017eina: ${finalPanelLengthM.toFixed(2)}m`, imageUrl: panelColorData.imageUrl\n        });\n\n        \/\/ <-- SPREMEMBA: Logika za vijake je prestrukturirana\n        const screwData = productData.screws;\n        const selectedScrew = screwData[userSelection.constructionType];\n\n        if (selectedRoofingType === 'sunsnap') {\n            \/\/ SUNSNAP LOGIKA: Pritrdila in vijaki zanje\n            const fastener = productData.fasteners;\n            const numFasteners = Math.max(1, Math.ceil(baseCart.totalArea * fastener.perSqm));\n            baseCart.items.push({ id: fastener.id, name: fastener.name, qty: numFasteners, price: fastener.pricePerPiece, imageUrl: fastener.imageUrl, details: 'Pritrdilo za plo\u0161\u010do' });\n            \n            \/\/ Vijaki za pritrdila (2 na pritrdilo)\n            const numScrewsNeededForFasteners = numFasteners * 2;\n            const numScrewSets = Math.ceil(numScrewsNeededForFasteners \/ screwData.perSet);\n            if (numScrewSets > 0) {\n                 baseCart.items.push({\n                    id: selectedScrew.id, name: selectedScrew.name, qty: numScrewSets, price: selectedScrew.pricePerSet,\n                    details: `Za pritrdila. Komplet ${screwData.perSet} kos. Potrebno ~${numScrewsNeededForFasteners} vijakov.`, imageUrl: selectedScrew.imageUrl\n                });\n            }\n\n            \/\/ Dodatki za Sunsnap (profili, podlo\u017eke, dodatni vijaki zanje)\n            const profileData = productData.profiles.grey;\n            const profileVar = profileData.variations.find(v => v.length >= userSelection.panelLength) || profileData.variations.slice(-1)[0];\n            if(profileVar) baseCart.items.push({ id: profileVar.id, name: profileData.name, qty: 2, price: profileVar.price, imageUrl: profileData.imageUrl, details: `Zaklju\u010dni profil, dol\u017eina ${profileVar.length\/10} cm` });\n        \n            const extraScrewsNeeded = (Math.ceil(finalPanelLengthM) * 6) + userSelection.numPanels;\n            const numExtraScrewSets = Math.ceil(extraScrewsNeeded \/ screwData.perSet);\n            if (numExtraScrewSets > 0) {\n                baseCart.items.push({\n                    id: selectedScrew.id, name: `Dodatni vijaki: ${selectedScrew.name}`, qty: numExtraScrewSets, price: selectedScrew.pricePerSet,\n                    details: `Za zaklju\u010dne profile. Potrebno ~${Math.ceil(extraScrewsNeeded)} vijakov.`, imageUrl: selectedScrew.imageUrl\n                });\n            }\n            const washerData = productData.accessories.washers_fi19;\n            const numWasherSets = Math.ceil(extraScrewsNeeded \/ washerData.perSet);\n            if (numWasherSets > 0) {\n                baseCart.items.push({\n                    id: washerData.id, name: washerData.name, qty: numWasherSets, price: washerData.pricePerSet,\n                    details: washerData.description, imageUrl: washerData.imageUrl\n                });\n            }\n        } else {\n            \/\/ LOGIKA ZA VSE OSTALE KRITINE\n            const numScrewsNeeded = Math.max(1, baseCart.totalArea * screwData.perSqm);\n            const numScrewSets = Math.ceil(numScrewsNeeded \/ screwData.perSet);\n            if (numScrewSets > 0) {\n                baseCart.items.push({\n                    id: selectedScrew.varId || selectedScrew.id, name: selectedScrew.name, qty: numScrewSets, price: selectedScrew.pricePerSet,\n                    details: `Komplet ${screwData.perSet} kos. Potrebno ~${Math.ceil(numScrewsNeeded)} vijakov.`, imageUrl: selectedScrew.imageUrl\n                });\n            }\n\n            if (selectedRoofingType === 'trapez') {\n                const washer = productData.accessories.washers;\n                const numWashersNeeded = Math.max(1, baseCart.totalArea * washer.perSqm);\n                const numWasherSets = Math.ceil(numWashersNeeded \/ washer.perSet);\n                if(numWasherSets > 0) baseCart.items.push({ id: washer.id, name: washer.name, qty: numWasherSets, price: washer.pricePerSet, imageUrl: washer.imageUrl, details: washer.description });\n            } else if (selectedRoofingType === 'veliki_val_standard') {\n                const seal = productData.accessories.seal;\n                const numSeals = (Math.ceil(finalPanelLengthM) * 2 * userSelection.numPanels) + userSelection.numPanels;\n                baseCart.items.push({ id: seal.id, name: seal.name, qty: numSeals, price: seal.pricePerPiece, imageUrl: seal.imageUrl, details: 'Tesnilo za pod letve (avtomatsko dodano)', autoAdded: true });\n            }\n        }\n        \n        baseCart.totalPrice = baseCart.items.reduce((sum, item) => sum + item.qty * item.price, 0);\n    }\n    \n    function recalculateFinalCart() {\n        userSelection.cart = JSON.parse(JSON.stringify(baseCart));\n        const accessories = userSelection.accessories;\n        \n        if (accessories.sideSeal && productData.accessories?.seal) {\n            const sealData = productData.accessories.seal;\n            const price = sealData.pricePerSet || sealData.pricePerPiece;\n            let neededSets = 0;\n            let details = sealData.description;\n\n            if (sealData.id === 18941) { \/\/ Specifi\u010dna logika za tesnilo Veliki Val (177x51)\n                neededSets = userSelection.numPanels; \/\/ 1 tesnilo na plo\u0161\u010do\n                details = `Za vsako plo\u0161\u010do je potrebno 1 tesnilo.`;\n            } else { \/\/ Obstoje\u010da logika za tesnilo Diamond (76x18)\n                const roofWidthM = (userSelection.numPanels * productData.panels.coverWidth) \/ 1000;\n                const sealLengthM = 0.71; \/\/ Predpostavljena dol\u017eina za manj\u0161e tesnilo\n                const neededPieces = Math.ceil(roofWidthM \/ sealLengthM);\n                neededSets = Math.ceil(neededPieces \/ (sealData.perSet || 1));\n                \n                if (sealData.perSet > 1) {\n                    details += ` (Potrebno ~${neededPieces} kosov \/ ${neededSets} kompl.)`;\n                } else {\n                    details += ` (Potrebno ~${neededPieces} kosov)`;\n                }\n            }\n\n            if (neededSets > 0) {\n                userSelection.cart.items.push({ id: sealData.id, name: sealData.name, qty: neededSets, price: price, imageUrl: sealData.imageUrl, details: details });\n            }\n        }\n        \n        if (accessories.spacers && productData.accessories?.spacers) {\n             const spacerData = productData.accessories.spacers;\n             const totalScrews = Math.ceil(baseCart.totalArea * productData.screws.perSqm);\n             const numSpacerSets = Math.ceil(totalScrews \/ spacerData.perSet);\n             if(numSpacerSets > 0) userSelection.cart.items.push({ id: spacerData.id, name: spacerData.name, qty: numSpacerSets, price: spacerData.pricePerSet, imageUrl: spacerData.imageUrl, details: spacerData.description });\n        }\n\n        if (accessories.spacerUpgrade && selectedRoofingType === 'veliki_val_standard') {\n            userSelection.cart.items = userSelection.cart.items.filter(item => !item.autoAdded);\n            const spacerData = productData.accessories.spacers;\n            const totalScrews = Math.ceil(baseCart.totalArea * productData.screws.perSqm);\n            const numSpacerSets = Math.ceil(totalScrews \/ spacerData.perSet);\n             if(numSpacerSets > 0) userSelection.cart.items.push({ id: spacerData.id, name: `Nadgradnja: ${spacerData.name}`, qty: numSpacerSets, price: spacerData.pricePerSet, imageUrl: spacerData.imageUrl, details: spacerData.description });\n        }\n\n        if (accessories.grecaSeal && productData.accessories?.grecaSeal && selectedRoofingType === 'trapez') {\n            const sealData = productData.accessories.grecaSeal;\n            const numSeals = userSelection.numPanels;\n            if (numSeals > 0) {\n                userSelection.cart.items.push({\n                    id: sealData.id,\n                    name: sealData.name,\n                    qty: numSeals,\n                    price: sealData.pricePerPiece,\n                    imageUrl: sealData.imageUrl,\n                    details: 'Komplet za tesnjenje roba plo\u0161\u010de (zgornji in spodnji del).'\n                });\n            }\n        }\n\n        userSelection.cart.totalPrice = userSelection.cart.items.reduce((sum, item) => sum + item.qty * item.price, 0);\n    }\n\n    function displayFinalCart() {\n        finalSummaryTableBody.innerHTML = '';\n        finalSummaryTableFoot.innerHTML = '';\n        const cart = userSelection.cart;\n\n        cart.items.forEach(item => {\n            const row = document.createElement('tr');\n            const unit = (item.pricePerPiece || (item.name.toLowerCase().includes(\"pritrdilo\") || item.name.toLowerCase().includes(\"tesnilo\"))) ? 'kos' : 'kompl.';\n            row.innerHTML = `\n                <td>\n                    <img decoding=\"async\" src=\"${item.imageUrl}\" alt=\"${item.name}\" loading=\"lazy\">\n                    <span class=\"item-name\">${item.name}<\/span>\n                    <span class=\"item-details\">${item.details || ''}<\/span>\n                <\/td>\n                <td style=\"text-align: right;\">${item.qty} ${unit}<\/td>\n                <td style=\"text-align: right;\">${formatPrice(item.price)} \u20ac<\/td>\n                <td style=\"text-align: right;\">${formatPrice(item.price * item.qty)} \u20ac<\/td>\n            `;\n            finalSummaryTableBody.appendChild(row);\n        });\n        \n        const totalRow = document.createElement('tr');\n        totalRow.innerHTML = `<td colspan=\"3\" style=\"text-align: right; font-weight: bold; border-top: 2px solid var(--secondary-color);\">SKUPAJ brez DDV:<\/td>\n                              <td style=\"font-weight: bold; font-size: 1.1em; border-top: 2px solid var(--secondary-color); text-align: right;\">${formatPrice(cart.totalPrice)} \u20ac<\/td>`;\n        finalSummaryTableFoot.appendChild(totalRow);\n    }\n\n\n    function addToCart() {\n        console.log(\"--- Dodajanje v Ko\u0161arico ---\");\n\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\t\t  const btn = document.getElementById('add-to-cart-btn');\n\t  if (btn) {\n\t\tbtn.textContent = 'Dodajanje v ko\u0161arico';\n\t\tbtn.disabled = true;               \/\/ optional: prepre\u010di ve\u010dkratni klik\n\t\tbtn.classList.add('is-loading');   \/\/ optional: za CSS spinner\n\t  }\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', 'vppk');\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            if (variationId) formData.append('variation_id', variationId);\n\n\t\t\tformData.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        \/\/ Prepare notes for email\n        const notes = [];\n        if (userSelection.customCutCm && userSelection.customCutCm !== userSelection.panelLength\/10) {\n            notes.push(`Vse plo\u0161\u010de prosim odre\u017eite na dol\u017eino ${userSelection.customCutCm} cm.`);\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 (first item is usually the panel)\n                    if (item.name.includes('valovitka') || item.name.includes('plo\u0161\u010da') || item.name.includes('trapezna')) {\n                        if (userSelection.customCutCm) {\n                            extraData.custom_cut_note = `Odrez na ${userSelection.customCutCm} cm`;\n                        }\n                    }\n                    \n                    const result = await addToCartRequest(\n                        item.id,\n                        item.qty,\n                        item.id, \/\/ Use same ID as variation ID since these are variable products\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                \/\/ Get the first panel item for email notification\n                const panelItem = userSelection.cart.items.find(item =>\n                    item.name.includes('valovitka') || item.name.includes('plo\u0161\u010da') || item.name.includes('trapezna')\n                );\n\n                \/\/ Get screw item for email notification (if exists)\n                const screwItem = userSelection.cart.items.find(item =>\n                    item.name.toLowerCase().includes('vijak')\n                );\n\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': panelItem ? panelItem.id : '',\n                        'panel_length': userSelection.panelLength || '',\n                        'num_panels': userSelection.numPanels || 0,\n                        'notes': notes.join(' | '),\n                        'screw_id': screwItem ? screwItem.id : '',\n                        'num_screws': screwItem ? screwItem.qty : ''\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                if (btn) {\n                    btn.textContent = 'Dodaj v ko\u0161arico';\n                    btn.disabled = false;\n                    btn.classList.remove('is-loading');\n                }\n                alert(\"Napaka pri dodajanju v ko\u0161arico.\");\n            });\n    }\n\n\n    function drawRoofSketch(canvas, focus) {\n         const ctx = canvas.getContext('2d');\n         const w = canvas.width; const h = canvas.height;\n         ctx.clearRect(0, 0, w, h); ctx.strokeStyle = '#aaa'; ctx.lineWidth = 1;\n         ctx.font = 'bold 13px Arial'; ctx.fillStyle = '#333'; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';\n         const frontHeight = h * 0.6, backHeight = h * 0.35, frontWidth = w * 0.8, backWidth = w * 0.7, depthFactor = 0.4;\n         const xCenter = w \/ 2, yTop = h * 0.15, yFrontBottom = yTop + frontHeight, yBackBottom = yTop + backHeight;\n         const xFrontLeft = xCenter - frontWidth \/ 2, xFrontRight = xCenter + frontWidth \/ 2, xBackLeft = xCenter - backWidth \/ 2, xBackRight = xCenter + backWidth \/ 2;\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'; ctx.lineWidth = 2; ctx.stroke();\n         ctx.beginPath();\n         ctx.moveTo(xBackLeft, yTop); ctx.lineTo(xBackRight, yTop);\n         ctx.moveTo(xFrontLeft, yTop + frontHeight * (1-depthFactor*0.8)); ctx.lineTo(xFrontRight, yTop + frontHeight * (1-depthFactor*0.8));\n         ctx.moveTo(xBackLeft, yTop); ctx.lineTo(xFrontLeft, yTop + frontHeight * (1-depthFactor*0.8));\n         ctx.moveTo(xBackRight, yTop); ctx.lineTo(xFrontRight, yTop + frontHeight * (1-depthFactor*0.8));\n         ctx.strokeStyle = '#aaa'; ctx.lineWidth = 1.5; ctx.stroke();\n         ctx.strokeStyle = '#d11d55'; ctx.lineWidth = 1.5; ctx.fillStyle = '#d11d55'; ctx.font = 'bold 14px Arial';\n         function drawDimLine(x1, y1, x2, y2, label, labelOffset = 15, arrowSize = 5) {\n              ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2);\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)); 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)); ctx.lineTo(x2, y2);\n              ctx.lineTo(x2 - arrowSize * Math.cos(angle - Math.PI \/ 6), y2 - arrowSize * Math.sin(angle - Math.PI \/ 6)); ctx.stroke();\n              const midX = (x1 + x2) \/ 2, midY = (y1 + y2) \/ 2, labelX = midX + labelOffset * Math.sin(angle), labelY = midY - labelOffset * Math.cos(angle);\n              ctx.save(); ctx.translate(labelX, labelY); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(label, 0, 0); ctx.restore();\n          }\n           if (focus === 'length') { ctx.lineWidth = 2.5; drawDimLine(xBackRight, yTop, xFrontRight, yTop + frontHeight * (1-depthFactor*0.8) , 'Dol\u017eina', 25); }\n           else if (focus === 'width') { ctx.lineWidth = 2.5; drawDimLine(xBackLeft, yTop - 15, xBackRight, yTop - 15, '\u0160irina', -20); }\n      }\n      \n    function formatPrice(price) {\n        return Number(price).toFixed(2).replace('.', ',');\n    }\n\n    document.addEventListener('DOMContentLoaded', initializeConfigurator);\n\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-48736","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 valovite i profilirane polikarbonatne krovne pokrove | 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-valovite-i-profilirane-polikarbonatne-krovne-pokrove\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pomo\u0107nik za valovite i profilirane polikarbonatne krovne pokrove | Termotom\" \/>\n<meta property=\"og:url\" content=\"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-valovite-i-profilirane-polikarbonatne-krovne-pokrove\/\" \/>\n<meta property=\"og:site_name\" content=\"Trgovina Termotom\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-10T10:15:40+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-valovite-i-profilirane-polikarbonatne-krovne-pokrove\\\/\",\"url\":\"https:\\\/\\\/termotom.com\\\/hr\\\/pomocnik-za-odabir-krovnih-ploca\\\/pomocnik-za-valovite-i-profilirane-polikarbonatne-krovne-pokrove\\\/\",\"name\":\"Pomo\u0107nik za valovite i profilirane polikarbonatne krovne pokrove - Trgovina Termotom\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/termotom.com\\\/hr\\\/#website\"},\"datePublished\":\"2025-10-17T15:43:32+00:00\",\"dateModified\":\"2026-10-10T10:15:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/termotom.com\\\/hr\\\/pomocnik-za-odabir-krovnih-ploca\\\/pomocnik-za-valovite-i-profilirane-polikarbonatne-krovne-pokrove\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/termotom.com\\\/hr\\\/pomocnik-za-odabir-krovnih-ploca\\\/pomocnik-za-valovite-i-profilirane-polikarbonatne-krovne-pokrove\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/termotom.com\\\/hr\\\/pomocnik-za-odabir-krovnih-ploca\\\/pomocnik-za-valovite-i-profilirane-polikarbonatne-krovne-pokrove\\\/#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 valovite i profilirane polikarbonatne krovne pokrove\"}]},{\"@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 valovite i profilirane polikarbonatne krovne pokrove | 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-valovite-i-profilirane-polikarbonatne-krovne-pokrove\/","og_locale":"hr_HR","og_type":"article","og_title":"Pomo\u0107nik za valovite i profilirane polikarbonatne krovne pokrove | Termotom","og_url":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-valovite-i-profilirane-polikarbonatne-krovne-pokrove\/","og_site_name":"Trgovina Termotom","article_modified_time":"2026-10-10T10:15:40+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-valovite-i-profilirane-polikarbonatne-krovne-pokrove\/","url":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-valovite-i-profilirane-polikarbonatne-krovne-pokrove\/","name":"Pomo\u0107nik za valovite i profilirane polikarbonatne krovne pokrove - Trgovina Termotom","isPartOf":{"@id":"https:\/\/termotom.com\/hr\/#website"},"datePublished":"2025-10-17T15:43:32+00:00","dateModified":"2026-10-10T10:15:40+00:00","breadcrumb":{"@id":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-valovite-i-profilirane-polikarbonatne-krovne-pokrove\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-valovite-i-profilirane-polikarbonatne-krovne-pokrove\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/termotom.com\/hr\/pomocnik-za-odabir-krovnih-ploca\/pomocnik-za-valovite-i-profilirane-polikarbonatne-krovne-pokrove\/#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 valovite i profilirane polikarbonatne krovne pokrove"}]},{"@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\/48736","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=48736"}],"version-history":[{"count":1,"href":"https:\/\/termotom.com\/hr\/wp-json\/wp\/v2\/pages\/48736\/revisions"}],"predecessor-version":[{"id":48737,"href":"https:\/\/termotom.com\/hr\/wp-json\/wp\/v2\/pages\/48736\/revisions\/48737"}],"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=48736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}