{"id":499,"date":"2026-11-09T07:27:14","date_gmt":"2026-11-09T07:27:14","guid":{"rendered":"https:\/\/site101.adpro.si\/?page_id=499"},"modified":"2026-11-12T13:55:56","modified_gmt":"2026-11-12T13:55:56","slug":"produktne-linije","status":"publish","type":"page","link":"https:\/\/site101.adpro.si\/en\/produktne-linije\/","title":{"rendered":"Produktne Linije"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background hundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:0px;--awb-margin-top:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-justify-content-center fusion-flex-content-wrap\" style=\"width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-padding-top:30px;--awb-padding-bottom:30px;--awb-bg-color:var(--awb-color5);--awb-bg-color-hover:var(--awb-color5);--awb-bg-image:linear-gradient(165deg, var(--awb-color5) 0%,var(--awb-color4) 100%);--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:0%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:0%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:0%;--awb-spacing-left-medium:0%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:0%;--awb-spacing-left-small:0%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-1 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-one\" style=\"--awb-text-color:var(--awb-color1);--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:35px;\"><h1 class=\"fusion-title-heading title-heading-center\" style=\"font-family:&quot;Noto Sans&quot;;font-style:normal;font-weight:700;margin:0;letter-spacing:-0.05em;text-transform:capitalize;font-size:1em;\">Tik Produktne Linije<\/h1><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-padding-top:35px;--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:30px;--awb-margin-bottom-large:20px;--awb-spacing-left-large:30px;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:30px;--awb-spacing-left-medium:30px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-justify-content-center fusion-flex-content-wrap\" style=\"--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-0 fusion_builder_column_inner_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:5.76%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><style>\n  .slide-card {\n    position: relative;\n    width: 100%;\n    max-width: 420px;\n    height: 460px;\n    margin: 0 auto;\n    overflow: hidden;\n    background: \n#ffffff;\n    font-family: \"Noto Sans\", Arial, sans-serif;\n    cursor: pointer;\n  }\n\n  \/* Both card sides *\/\n  .slide-card__front,\n  .slide-card__back {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* Back image *\/\n  .slide-card__back {\n    z-index: 1;\n    background: \n#ffffff;\n  }\n\n  .slide-card__back img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  \/* Front content *\/\n  .slide-card__front {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    background: \n#ffffff;\n    transition: transform 0.65s cubic-bezier(0.77, 0, 0.18, 1);\n    will-change: transform;\n  }\n\n  \/* Push front panel to the left *\/\n  .slide-card:hover .slide-card__front,\n  .slide-card:focus-within .slide-card__front,\n  .slide-card.is-active .slide-card__front {\n    transform: translateX(-100%);\n  }\n\n  .slide-card__content {\n    padding: 30px 30px 24px;\n  }\n\n  .slide-card__title {\n    margin: 0 0 12px;\n    color: \n#000000;\n    font-size: 28px !important;\n    font-weight: 600;\n    line-height: 1.2;\n  }\n\n  .slide-card__description {\n    margin: 0;\n    color: \n#555555;\n    font-size: 16px;\n    line-height: 1.6;\n  }\n\n  .slide-card__front-image {\n    display: block;\n    width: 100%;\n    height: 240px;\n    margin-top: auto;\n    object-fit: cover;\n  }\n\n  \/* Mobile *\/\n  @media (max-width: 767px) {\n    .slide-card {\n      height: 400px;\n    }\n\n    .slide-card__content {\n      padding: 24px 22px 20px;\n    }\n\n    .slide-card__title {\n      font-size: 24px;\n    }\n\n    .slide-card__description {\n      font-size: 15px;\n    }\n\n    .slide-card__front-image {\n      height: 205px;\n    }\n  }\n\n  \/* Respect reduced-motion preferences *\/\n  @media (prefers-reduced-motion: reduce) {\n    .slide-card__front {\n      transition: none;\n    }\n  }\n<\/style>\n\n<div class=\"slide-card\" tabindex=\"0\">\n\n  <!-- Back side: full image -->\n  <div class=\"slide-card__back\">\n    <img class=\"lazyload\" decoding=\"async\"\n      src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271086%27%20height%3D%271448%27%20viewBox%3D%270%200%201086%201448%27%3E%3Crect%20width%3D%271086%27%20height%3D%271448%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/site101.adpro.si\/wp-content\/uploads\/2026\/10\/KARTICA-A_1-fazni-transformator_ZADNJA-web.webp\"\n      alt=\"Back image\"\n    >\n  <\/div>\n\n  <!-- Front side: content and image -->\n  <div class=\"slide-card__front\">\n    <div class=\"slide-card__content\">\n      <h2 class=\"slide-card__title\">1-fazni transformatorji<\/h2>\n      <p class=\"slide-card__description\">\n        Klasi\u010dni suhi transformatorji v EI in UI izvedbi\n      <\/p>\n    <\/div>\n\n    <img decoding=\"async\"\n      class=\"lazyload slide-card__front-image\"\n      src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271586%27%20height%3D%27992%27%20viewBox%3D%270%200%201586%20992%27%3E%3Crect%20width%3D%271586%27%20height%3D%27992%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/site101.adpro.si\/wp-content\/uploads\/2026\/10\/KARTICA-A_1-fazni-transformator_SPREDNJA-web.webp\"\n      alt=\"Front image\"\n    >\n  <\/div>\n\n<\/div>\n\n<script>\n  document.querySelectorAll(\".slide-card\").forEach(function (card) {\n    let startX = 0;\n    let startProgress = 0;\n    let progress = 0;\n    let isDragging = false;\n    let hasMoved = false;\n    let pointerId = null;\n\n    let isHovered = false;\n    let isPinnedOpen = false;\n\n    function clamp(value) {\n      return Math.max(0, Math.min(1, value));\n    }\n\n    function updateAria(value) {\n      card.setAttribute(\"aria-expanded\", value === 1 ? \"true\" : \"false\");\n    }\n\n    function render() {\n      const visibleProgress = isPinnedOpen || isHovered ? 1 : 0;\n\n      progress = visibleProgress;\n      card.style.setProperty(\"--slide-progress\", visibleProgress);\n      updateAria(visibleProgress);\n    }\n\n    function setDragProgress(value) {\n      progress = clamp(value);\n      card.style.setProperty(\"--slide-progress\", progress);\n      updateAria(progress >= 0.5 ? 1 : 0);\n    }\n\n    \/* Desktop hover *\/\n    card.addEventListener(\"pointerenter\", function (event) {\n      if (event.pointerType === \"mouse\" && !isDragging) {\n        isHovered = true;\n        render();\n      }\n    });\n\n    card.addEventListener(\"pointerleave\", function (event) {\n      if (event.pointerType === \"mouse\" && !isDragging) {\n        isHovered = false;\n        render();\n      }\n    });\n\n    \/* Start touch, click, or drag interaction *\/\n    card.addEventListener(\"pointerdown\", function (event) {\n      if (event.button !== undefined && event.button !== 0) return;\n\n      startX = event.clientX;\n      startProgress = progress;\n      isDragging = true;\n      hasMoved = false;\n      pointerId = event.pointerId;\n\n      card.classList.add(\"is-dragging\");\n      card.setPointerCapture(pointerId);\n    });\n\n    \/* Drag card left or right *\/\n    card.addEventListener(\"pointermove\", function (event) {\n      if (!isDragging) return;\n\n      const cardWidth = card.offsetWidth;\n      const movement = startX - event.clientX;\n\n      \/* More than 8px means this is a drag rather than a click\/tap *\/\n      if (Math.abs(movement) > 8) {\n        hasMoved = true;\n      }\n\n      \/* Left opens \/ right closes *\/\n      setDragProgress(startProgress + movement \/ cardWidth);\n    });\n\n    function finishInteraction(event) {\n      if (!isDragging) return;\n\n      isDragging = false;\n      card.classList.remove(\"is-dragging\");\n\n      if (!hasMoved) {\n        \/*\n          Click or tap:\n          Toggle the persistent open state.\n          Hover still temporarily reveals the card on desktop.\n        *\/\n        isPinnedOpen = !isPinnedOpen;\n        render();\n      } else {\n        \/*\n          Drag:\n          Snap to the nearest side and save that state.\n        *\/\n        isPinnedOpen = progress >= 0.5;\n        render();\n      }\n\n      if (\n        pointerId !== null &&\n        card.hasPointerCapture(pointerId)\n      ) {\n        card.releasePointerCapture(pointerId);\n      }\n\n      pointerId = null;\n    }\n\n    card.addEventListener(\"pointerup\", finishInteraction);\n\n    card.addEventListener(\"pointercancel\", function (event) {\n      isDragging = false;\n      card.classList.remove(\"is-dragging\");\n      render();\n\n      if (\n        pointerId !== null &&\n        card.hasPointerCapture(pointerId)\n      ) {\n        card.releasePointerCapture(pointerId);\n      }\n\n      pointerId = null;\n    });\n\n    \/* Keyboard: Enter or Space toggles persistent open state *\/\n    card.addEventListener(\"keydown\", function (event) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        isPinnedOpen = !isPinnedOpen;\n        render();\n      }\n    });\n\n    \/* Initial card state *\/\n    render();\n  });\n<\/script><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-custom fusion-button-default button-1 fusion-button-span-no fusion-button-span-default-medium\" style=\"--awb-margin-top:10px;--awb-padding-top:10px;--awb-padding-right:20px;--awb-padding-bottom:10px;--awb-padding-left:20px;--button_accent_color:var(--awb-color1);--button_accent_hover_color:var(--awb-color1);--button_border_hover_color:var(--awb-color1);--button_border_width-top:0;--button_border_width-right:0;--button_border_width-bottom:0;--button_border_width-left:0;--button-border-radius-top-left:0;--button-border-radius-top-right:0;--button-border-radius-bottom-right:0;--button-border-radius-bottom-left:0;--button_gradient_top_color:var(--awb-color4);--button_gradient_bottom_color:var(--awb-color4);--button_gradient_top_color_hover:var(--awb-color5);--button_gradient_bottom_color_hover:var(--awb-color5);--button_font_size:15px;--button_typography-letter-spacing:0.015em;--button_typography-font-family:&quot;Noto Sans&quot;;--button_typography-font-style:normal;--button_typography-font-weight:400;\" target=\"_self\" href=\"https:\/\/site101.adpro.si\/en\/produktne-linije\/1-fazni-transformatorji\/\"><i class=\"fa-info-circle fas awb-button__icon awb-button__icon--default button-icon-left\" aria-hidden=\"true\"><\/i><span class=\"fusion-button-text awb-button__text awb-button__text--default\">Ve\u010d informacij<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-1 fusion_builder_column_inner_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:5.76%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><style>\n  .slide-card {\n    position: relative;\n    width: 100%;\n    max-width: 420px;\n    height: 460px;\n    margin: 0 auto;\n    overflow: hidden;\n    background: \n#ffffff;\n    font-family: \"Noto Sans\", Arial, sans-serif;\n    cursor: pointer;\n  }\n\n  \/* Both card sides *\/\n  .slide-card__front,\n  .slide-card__back {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* Back image *\/\n  .slide-card__back {\n    z-index: 1;\n    background: \n#ffffff;\n  }\n\n  .slide-card__back img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  \/* Front content *\/\n  .slide-card__front {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    background: #ffffff;\n    transition: transform 0.65s cubic-bezier(0.77, 0, 0.18, 1);\n    will-change: transform;\n  }\n\n\/* seam cover *\/\n.slide-card__front::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: -6px;\n  width: 8px;\n  height: 100%;\n  background: \n#fff;\n  pointer-events: none;\n}\n\n\n  \/* Push front panel to the left *\/\n  .slide-card:hover .slide-card__front,\n  .slide-card:focus-within .slide-card__front,\n  .slide-card.is-active .slide-card__front {\n    transform: translateX(-100%);\n  }\n\n  .slide-card__content {\n    padding: 30px 30px 24px;\n  }\n\n  .slide-card__title {\n    margin: 0 0 12px;\n    color: #000000;\n    font-size: 28px !important;\n    font-weight: 600;\n    line-height: 1.2;\n  }\n\n  .slide-card__description {\n    margin: 0;\n    color: \n#555555;\n    font-size: 16px;\n    line-height: 1.6;\n  }\n\n  .slide-card__front-image {\n    display: block;\n    width: 100%;\n    height: 240px;\n    margin-top: auto;\n    object-fit: cover;\n  }\n\n  \/* Mobile *\/\n  @media (max-width: 767px) {\n    .slide-card {\n      height: 400px;\n    }\n\n    .slide-card__content {\n      padding: 24px 22px 20px;\n    }\n\n    .slide-card__title {\n      font-size: 24px;\n    }\n\n    .slide-card__description {\n      font-size: 15px;\n    }\n\n    .slide-card__front-image {\n      height: 205px;\n    }\n  }\n\n  \/* Respect reduced-motion preferences *\/\n  @media (prefers-reduced-motion: reduce) {\n    .slide-card__front {\n      transition: none;\n    }\n  }\n<\/style>\n\n<div class=\"slide-card\" tabindex=\"0\">\n\n  <!-- Back side: full image -->\n  <div class=\"slide-card__back\">\n    <img class=\"lazyload\" decoding=\"async\"\n      src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271312%27%20height%3D%271199%27%20viewBox%3D%270%200%201312%201199%27%3E%3Crect%20width%3D%271312%27%20height%3D%271199%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/site101.adpro.si\/wp-content\/uploads\/2026\/10\/KARTICA-B_3-fazni-transformator_ZADNJA-web.webp\"\n      alt=\"Back image\"\n    >\n  <\/div>\n\n  <!-- Front side: content and image -->\n  <div class=\"slide-card__front\">\n    <div class=\"slide-card__content\">\n      <h2 class=\"slide-card__title\">3-fazni transformatorji<\/h2>\n      <p class=\"slide-card__description\">\n        Klasi\u010dni suhi transformatorji, mo\u017ena vgradnja v ohi\u0161je\n      <\/p>\n    <\/div>\n\n    <img decoding=\"async\"\n      class=\"lazyload slide-card__front-image\"\n      src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271586%27%20height%3D%27992%27%20viewBox%3D%270%200%201586%20992%27%3E%3Crect%20width%3D%271586%27%20height%3D%27992%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/site101.adpro.si\/wp-content\/uploads\/2026\/10\/KARTICA-B_3-fazni-transformator_SPREDNJA-web.webp\"\n      alt=\"Front image\"\n    >\n  <\/div>\n\n<\/div>\n\n<script>\n  document.querySelectorAll(\".slide-card\").forEach(function (card) {\n    let startX = 0;\n    let startProgress = 0;\n    let progress = 0;\n    let isDragging = false;\n    let hasMoved = false;\n    let pointerId = null;\n\n    let isHovered = false;\n    let isPinnedOpen = false;\n\n    function clamp(value) {\n      return Math.max(0, Math.min(1, value));\n    }\n\n    function updateAria(value) {\n      card.setAttribute(\"aria-expanded\", value === 1 ? \"true\" : \"false\");\n    }\n\n    function render() {\n      const visibleProgress = isPinnedOpen || isHovered ? 1 : 0;\n\n      progress = visibleProgress;\n      card.style.setProperty(\"--slide-progress\", visibleProgress);\n      updateAria(visibleProgress);\n    }\n\n    function setDragProgress(value) {\n      progress = clamp(value);\n      card.style.setProperty(\"--slide-progress\", progress);\n      updateAria(progress >= 0.5 ? 1 : 0);\n    }\n\n    \/* Desktop hover *\/\n    card.addEventListener(\"pointerenter\", function (event) {\n      if (event.pointerType === \"mouse\" && !isDragging) {\n        isHovered = true;\n        render();\n      }\n    });\n\n    card.addEventListener(\"pointerleave\", function (event) {\n      if (event.pointerType === \"mouse\" && !isDragging) {\n        isHovered = false;\n        render();\n      }\n    });\n\n    \/* Start touch, click, or drag interaction *\/\n    card.addEventListener(\"pointerdown\", function (event) {\n      if (event.button !== undefined && event.button !== 0) return;\n\n      startX = event.clientX;\n      startProgress = progress;\n      isDragging = true;\n      hasMoved = false;\n      pointerId = event.pointerId;\n\n      card.classList.add(\"is-dragging\");\n      card.setPointerCapture(pointerId);\n    });\n\n    \/* Drag card left or right *\/\n    card.addEventListener(\"pointermove\", function (event) {\n      if (!isDragging) return;\n\n      const cardWidth = card.offsetWidth;\n      const movement = startX - event.clientX;\n\n      \/* More than 8px means this is a drag rather than a click\/tap *\/\n      if (Math.abs(movement) > 8) {\n        hasMoved = true;\n      }\n\n      \/* Left opens \/ right closes *\/\n      setDragProgress(startProgress + movement \/ cardWidth);\n    });\n\n    function finishInteraction(event) {\n      if (!isDragging) return;\n\n      isDragging = false;\n      card.classList.remove(\"is-dragging\");\n\n      if (!hasMoved) {\n        \/*\n          Click or tap:\n          Toggle the persistent open state.\n          Hover still temporarily reveals the card on desktop.\n        *\/\n        isPinnedOpen = !isPinnedOpen;\n        render();\n      } else {\n        \/*\n          Drag:\n          Snap to the nearest side and save that state.\n        *\/\n        isPinnedOpen = progress >= 0.5;\n        render();\n      }\n\n      if (\n        pointerId !== null &&\n        card.hasPointerCapture(pointerId)\n      ) {\n        card.releasePointerCapture(pointerId);\n      }\n\n      pointerId = null;\n    }\n\n    card.addEventListener(\"pointerup\", finishInteraction);\n\n    card.addEventListener(\"pointercancel\", function (event) {\n      isDragging = false;\n      card.classList.remove(\"is-dragging\");\n      render();\n\n      if (\n        pointerId !== null &&\n        card.hasPointerCapture(pointerId)\n      ) {\n        card.releasePointerCapture(pointerId);\n      }\n\n      pointerId = null;\n    });\n\n    \/* Keyboard: Enter or Space toggles persistent open state *\/\n    card.addEventListener(\"keydown\", function (event) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        isPinnedOpen = !isPinnedOpen;\n        render();\n      }\n    });\n\n    \/* Initial card state *\/\n    render();\n  });\n<\/script><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-custom fusion-button-default button-2 fusion-button-span-no fusion-button-span-default-medium\" style=\"--awb-margin-top:10px;--awb-padding-top:10px;--awb-padding-right:20px;--awb-padding-bottom:10px;--awb-padding-left:20px;--button_accent_color:var(--awb-color1);--button_accent_hover_color:var(--awb-color1);--button_border_hover_color:var(--awb-color1);--button_border_width-top:0;--button_border_width-right:0;--button_border_width-bottom:0;--button_border_width-left:0;--button-border-radius-top-left:0;--button-border-radius-top-right:0;--button-border-radius-bottom-right:0;--button-border-radius-bottom-left:0;--button_gradient_top_color:var(--awb-color4);--button_gradient_bottom_color:var(--awb-color4);--button_gradient_top_color_hover:var(--awb-color5);--button_gradient_bottom_color_hover:var(--awb-color5);--button_font_size:15px;--button_typography-letter-spacing:0.015em;--button_typography-font-family:&quot;Noto Sans&quot;;--button_typography-font-style:normal;--button_typography-font-weight:400;\" target=\"_self\" href=\"https:\/\/site101.adpro.si\/en\/produktne-linije\/3-fazni-transformatorji\/\"><i class=\"fa-info-circle fas awb-button__icon awb-button__icon--default button-icon-left\" aria-hidden=\"true\"><\/i><span class=\"fusion-button-text awb-button__text awb-button__text--default\">Ve\u010d informacij<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-2 fusion_builder_column_inner_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:5.76%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><style>\n  .slide-card {\n    position: relative;\n    width: 100%;\n    max-width: 420px;\n    height: 460px;\n    margin: 0 auto;\n    overflow: hidden;\n    background: \n#ffffff;\n    font-family: \"Noto Sans\", Arial, sans-serif;\n    cursor: pointer;\n  }\n\n  \/* Both card sides *\/\n  .slide-card__front,\n  .slide-card__back {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* Back image *\/\n  .slide-card__back {\n    z-index: 1;\n    background: \n#ffffff;\n  }\n\n  .slide-card__back img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  \/* Front content *\/\n  .slide-card__front {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    background: \n#ffffff;\n    transition: transform 0.65s cubic-bezier(0.77, 0, 0.18, 1);\n    will-change: transform;\n  }\n\n  \/* Push front panel to the left *\/\n  .slide-card:hover .slide-card__front,\n  .slide-card:focus-within .slide-card__front,\n  .slide-card.is-active .slide-card__front {\n    transform: translateX(-100%);\n  }\n\n  .slide-card__content {\n    padding: 30px 30px 24px;\n  }\n\n  .slide-card__title {\n    margin: 0 0 12px;\n    color: \n#000000;\n    font-size: 28px !important;\n    font-weight: 600;\n    line-height: 1.2;\n  }\n\n  .slide-card__description {\n    margin: 0;\n    color: \n#555555;\n    font-size: 16px;\n    line-height: 1.6;\n  }\n\n  .slide-card__front-image {\n    display: block;\n    width: 100%;\n    height: 240px;\n    margin-top: auto;\n    object-fit: cover;\n  }\n\n  \/* Mobile *\/\n  @media (max-width: 767px) {\n    .slide-card {\n      height: 400px;\n    }\n\n    .slide-card__content {\n      padding: 24px 22px 20px;\n    }\n\n    .slide-card__title {\n      font-size: 24px;\n    }\n\n    .slide-card__description {\n      font-size: 15px;\n    }\n\n    .slide-card__front-image {\n      height: 205px;\n    }\n  }\n\n  \/* Respect reduced-motion preferences *\/\n  @media (prefers-reduced-motion: reduce) {\n    .slide-card__front {\n      transition: none;\n    }\n  }\n<\/style>\n\n<div class=\"slide-card\" tabindex=\"0\">\n\n  <!-- Back side: full image -->\n  <div class=\"slide-card__back\">\n    <img class=\"lazyload\" decoding=\"async\"\n      src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271234%27%20height%3D%271274%27%20viewBox%3D%270%200%201234%201274%27%3E%3Crect%20width%3D%271234%27%20height%3D%271274%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/site101.adpro.si\/wp-content\/uploads\/2026\/10\/KARTICA-C_Specialni-transformatorji_ZADNJA-web.webp\"\n      alt=\"Back image\"\n    >\n  <\/div>\n\n  <!-- Front side: content and image -->\n  <div class=\"slide-card__front\">\n    <div class=\"slide-card__content\">\n      <h2 class=\"slide-card__title\">Specialni transformatorji in du\u0161ilke<\/h2>\n      <p class=\"slide-card__description\">\n        Transduktorji, transformatorji s stresanim poljem, Scott transformatorji, elektromagneti, feritne du\u0161ilke, avtotransformatorji\n      <\/p>\n    <\/div>\n\n    <img decoding=\"async\"\n      class=\"lazyload slide-card__front-image\"\n      src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271672%27%20height%3D%27941%27%20viewBox%3D%270%200%201672%20941%27%3E%3Crect%20width%3D%271672%27%20height%3D%27941%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/site101.adpro.si\/wp-content\/uploads\/2026\/10\/ChatGPT-Image-21.-okt.-2026-11_03_15-web.webp\"\n      alt=\"Front image\"\n    >\n  <\/div>\n\n<\/div>\n\n<script>\n  document.querySelectorAll(\".slide-card\").forEach(function (card) {\n    let startX = 0;\n    let startProgress = 0;\n    let progress = 0;\n    let isDragging = false;\n    let hasMoved = false;\n    let pointerId = null;\n\n    let isHovered = false;\n    let isPinnedOpen = false;\n\n    function clamp(value) {\n      return Math.max(0, Math.min(1, value));\n    }\n\n    function updateAria(value) {\n      card.setAttribute(\"aria-expanded\", value === 1 ? \"true\" : \"false\");\n    }\n\n    function render() {\n      const visibleProgress = isPinnedOpen || isHovered ? 1 : 0;\n\n      progress = visibleProgress;\n      card.style.setProperty(\"--slide-progress\", visibleProgress);\n      updateAria(visibleProgress);\n    }\n\n    function setDragProgress(value) {\n      progress = clamp(value);\n      card.style.setProperty(\"--slide-progress\", progress);\n      updateAria(progress >= 0.5 ? 1 : 0);\n    }\n\n    \/* Desktop hover *\/\n    card.addEventListener(\"pointerenter\", function (event) {\n      if (event.pointerType === \"mouse\" && !isDragging) {\n        isHovered = true;\n        render();\n      }\n    });\n\n    card.addEventListener(\"pointerleave\", function (event) {\n      if (event.pointerType === \"mouse\" && !isDragging) {\n        isHovered = false;\n        render();\n      }\n    });\n\n    \/* Start touch, click, or drag interaction *\/\n    card.addEventListener(\"pointerdown\", function (event) {\n      if (event.button !== undefined && event.button !== 0) return;\n\n      startX = event.clientX;\n      startProgress = progress;\n      isDragging = true;\n      hasMoved = false;\n      pointerId = event.pointerId;\n\n      card.classList.add(\"is-dragging\");\n      card.setPointerCapture(pointerId);\n    });\n\n    \/* Drag card left or right *\/\n    card.addEventListener(\"pointermove\", function (event) {\n      if (!isDragging) return;\n\n      const cardWidth = card.offsetWidth;\n      const movement = startX - event.clientX;\n\n      \/* More than 8px means this is a drag rather than a click\/tap *\/\n      if (Math.abs(movement) > 8) {\n        hasMoved = true;\n      }\n\n      \/* Left opens \/ right closes *\/\n      setDragProgress(startProgress + movement \/ cardWidth);\n    });\n\n    function finishInteraction(event) {\n      if (!isDragging) return;\n\n      isDragging = false;\n      card.classList.remove(\"is-dragging\");\n\n      if (!hasMoved) {\n        \/*\n          Click or tap:\n          Toggle the persistent open state.\n          Hover still temporarily reveals the card on desktop.\n        *\/\n        isPinnedOpen = !isPinnedOpen;\n        render();\n      } else {\n        \/*\n          Drag:\n          Snap to the nearest side and save that state.\n        *\/\n        isPinnedOpen = progress >= 0.5;\n        render();\n      }\n\n      if (\n        pointerId !== null &&\n        card.hasPointerCapture(pointerId)\n      ) {\n        card.releasePointerCapture(pointerId);\n      }\n\n      pointerId = null;\n    }\n\n    card.addEventListener(\"pointerup\", finishInteraction);\n\n    card.addEventListener(\"pointercancel\", function (event) {\n      isDragging = false;\n      card.classList.remove(\"is-dragging\");\n      render();\n\n      if (\n        pointerId !== null &&\n        card.hasPointerCapture(pointerId)\n      ) {\n        card.releasePointerCapture(pointerId);\n      }\n\n      pointerId = null;\n    });\n\n    \/* Keyboard: Enter or Space toggles persistent open state *\/\n    card.addEventListener(\"keydown\", function (event) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        isPinnedOpen = !isPinnedOpen;\n        render();\n      }\n    });\n\n    \/* Initial card state *\/\n    render();\n  });\n<\/script><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-custom fusion-button-default button-3 fusion-button-span-no fusion-button-span-default-medium\" style=\"--awb-margin-top:10px;--awb-padding-top:10px;--awb-padding-right:20px;--awb-padding-bottom:10px;--awb-padding-left:20px;--button_accent_color:var(--awb-color1);--button_accent_hover_color:var(--awb-color1);--button_border_hover_color:var(--awb-color1);--button_border_width-top:0;--button_border_width-right:0;--button_border_width-bottom:0;--button_border_width-left:0;--button-border-radius-top-left:0;--button-border-radius-top-right:0;--button-border-radius-bottom-right:0;--button-border-radius-bottom-left:0;--button_gradient_top_color:var(--awb-color4);--button_gradient_bottom_color:var(--awb-color4);--button_gradient_top_color_hover:var(--awb-color5);--button_gradient_bottom_color_hover:var(--awb-color5);--button_font_size:15px;--button_typography-letter-spacing:0.015em;--button_typography-font-family:&quot;Noto Sans&quot;;--button_typography-font-style:normal;--button_typography-font-weight:400;\" target=\"_self\" href=\"https:\/\/site101.adpro.si\/en\/produktne-linije\/specialni-transformatorji-in-dusilke\/\"><i class=\"fa-info-circle fas awb-button__icon awb-button__icon--default button-icon-left\" aria-hidden=\"true\"><\/i><span class=\"fusion-button-text awb-button__text awb-button__text--default\">Ve\u010d informacij<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-3 fusion_builder_column_inner_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:5.76%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><style>\n  .slide-card {\n    position: relative;\n    width: 100%;\n    max-width: 420px;\n    height: 460px;\n    margin: 0 auto;\n    overflow: hidden;\n    background: \n#ffffff;\n    font-family: \"Noto Sans\", Arial, sans-serif;\n    cursor: pointer;\n  }\n\n  \/* Both card sides *\/\n  .slide-card__front,\n  .slide-card__back {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* Back image *\/\n  .slide-card__back {\n    z-index: 1;\n    background: \n#ffffff;\n  }\n\n  .slide-card__back img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  \/* Front content *\/\n  .slide-card__front {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    background: \n#ffffff;\n    transition: transform 0.65s cubic-bezier(0.77, 0, 0.18, 1);\n    will-change: transform;\n  }\n\n  \/* Push front panel to the left *\/\n  .slide-card:hover .slide-card__front,\n  .slide-card:focus-within .slide-card__front,\n  .slide-card.is-active .slide-card__front {\n    transform: translateX(-100%);\n  }\n\n  .slide-card__content {\n    padding: 30px 30px 24px;\n  }\n\n  .slide-card__title {\n    margin: 0 0 12px;\n    color: \n#000000;\n    font-size: 28px !important;\n    font-weight: 600;\n    line-height: 1.2;\n  }\n\n  .slide-card__description {\n    margin: 0;\n    color: \n#555555;\n    font-size: 16px;\n    line-height: 1.6;\n  }\n\n  .slide-card__front-image {\n    display: block;\n    width: 100%;\n    height: 240px;\n    margin-top: auto;\n    object-fit: cover;\n  }\n\n  \/* Mobile *\/\n  @media (max-width: 767px) {\n    .slide-card {\n      height: 400px;\n    }\n\n    .slide-card__content {\n      padding: 24px 22px 20px;\n    }\n\n    .slide-card__title {\n      font-size: 24px;\n    }\n\n    .slide-card__description {\n      font-size: 15px;\n    }\n\n    .slide-card__front-image {\n      height: 205px;\n    }\n  }\n\n  \/* Respect reduced-motion preferences *\/\n  @media (prefers-reduced-motion: reduce) {\n    .slide-card__front {\n      transition: none;\n    }\n  }\n<\/style>\n\n<div class=\"slide-card\" tabindex=\"0\">\n\n  <!-- Back side: full image -->\n  <div class=\"slide-card__back\">\n    <img class=\"lazyload\" decoding=\"async\"\n      src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271254%27%20height%3D%271254%27%20viewBox%3D%270%200%201254%201254%27%3E%3Crect%20width%3D%271254%27%20height%3D%271254%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/site101.adpro.si\/wp-content\/uploads\/2026\/10\/KARTICA-D_Vodnohlajeni-transformatorji_ZADNJA-web.webp\"\n      alt=\"Back image\"\n    >\n  <\/div>\n\n  <!-- Front side: content and image -->\n  <div class=\"slide-card__front\">\n    <div class=\"slide-card__content\">\n      <h2 class=\"slide-card__title\">Vodnohlajeni transformatorji<\/h2>\n      <p class=\"slide-card__description\">\n        Razli\u010dna prestavna razmerja, razli\u010dne frekvence, mo\u017enost izbire odcepov, vzporedna ali zaporedna vezava navitja\n      <\/p>\n    <\/div>\n\n    <img decoding=\"async\"\n      class=\"lazyload slide-card__front-image\"\n      src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27420%27%20height%3D%27240%27%20viewBox%3D%270%200%20420%20240%27%3E%3Crect%20width%3D%27420%27%20height%3D%27240%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/site101.adpro.si\/wp-content\/uploads\/2026\/11\/transformator_420x240-web-1.webp\"\n      alt=\"Front image\"\n    >\n  <\/div>\n\n<\/div>\n\n<script>\n  document.querySelectorAll(\".slide-card\").forEach(function (card) {\n    let startX = 0;\n    let startProgress = 0;\n    let progress = 0;\n    let isDragging = false;\n    let hasMoved = false;\n    let pointerId = null;\n\n    let isHovered = false;\n    let isPinnedOpen = false;\n\n    function clamp(value) {\n      return Math.max(0, Math.min(1, value));\n    }\n\n    function updateAria(value) {\n      card.setAttribute(\"aria-expanded\", value === 1 ? \"true\" : \"false\");\n    }\n\n    function render() {\n      const visibleProgress = isPinnedOpen || isHovered ? 1 : 0;\n\n      progress = visibleProgress;\n      card.style.setProperty(\"--slide-progress\", visibleProgress);\n      updateAria(visibleProgress);\n    }\n\n    function setDragProgress(value) {\n      progress = clamp(value);\n      card.style.setProperty(\"--slide-progress\", progress);\n      updateAria(progress >= 0.5 ? 1 : 0);\n    }\n\n    \/* Desktop hover *\/\n    card.addEventListener(\"pointerenter\", function (event) {\n      if (event.pointerType === \"mouse\" && !isDragging) {\n        isHovered = true;\n        render();\n      }\n    });\n\n    card.addEventListener(\"pointerleave\", function (event) {\n      if (event.pointerType === \"mouse\" && !isDragging) {\n        isHovered = false;\n        render();\n      }\n    });\n\n    \/* Start touch, click, or drag interaction *\/\n    card.addEventListener(\"pointerdown\", function (event) {\n      if (event.button !== undefined && event.button !== 0) return;\n\n      startX = event.clientX;\n      startProgress = progress;\n      isDragging = true;\n      hasMoved = false;\n      pointerId = event.pointerId;\n\n      card.classList.add(\"is-dragging\");\n      card.setPointerCapture(pointerId);\n    });\n\n    \/* Drag card left or right *\/\n    card.addEventListener(\"pointermove\", function (event) {\n      if (!isDragging) return;\n\n      const cardWidth = card.offsetWidth;\n      const movement = startX - event.clientX;\n\n      \/* More than 8px means this is a drag rather than a click\/tap *\/\n      if (Math.abs(movement) > 8) {\n        hasMoved = true;\n      }\n\n      \/* Left opens \/ right closes *\/\n      setDragProgress(startProgress + movement \/ cardWidth);\n    });\n\n    function finishInteraction(event) {\n      if (!isDragging) return;\n\n      isDragging = false;\n      card.classList.remove(\"is-dragging\");\n\n      if (!hasMoved) {\n        \/*\n          Click or tap:\n          Toggle the persistent open state.\n          Hover still temporarily reveals the card on desktop.\n        *\/\n        isPinnedOpen = !isPinnedOpen;\n        render();\n      } else {\n        \/*\n          Drag:\n          Snap to the nearest side and save that state.\n        *\/\n        isPinnedOpen = progress >= 0.5;\n        render();\n      }\n\n      if (\n        pointerId !== null &&\n        card.hasPointerCapture(pointerId)\n      ) {\n        card.releasePointerCapture(pointerId);\n      }\n\n      pointerId = null;\n    }\n\n    card.addEventListener(\"pointerup\", finishInteraction);\n\n    card.addEventListener(\"pointercancel\", function (event) {\n      isDragging = false;\n      card.classList.remove(\"is-dragging\");\n      render();\n\n      if (\n        pointerId !== null &&\n        card.hasPointerCapture(pointerId)\n      ) {\n        card.releasePointerCapture(pointerId);\n      }\n\n      pointerId = null;\n    });\n\n    \/* Keyboard: Enter or Space toggles persistent open state *\/\n    card.addEventListener(\"keydown\", function (event) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        isPinnedOpen = !isPinnedOpen;\n        render();\n      }\n    });\n\n    \/* Initial card state *\/\n    render();\n  });\n<\/script><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-custom fusion-button-default button-4 fusion-button-span-no fusion-button-span-default-medium\" style=\"--awb-margin-top:10px;--awb-padding-top:10px;--awb-padding-right:20px;--awb-padding-bottom:10px;--awb-padding-left:20px;--button_accent_color:var(--awb-color1);--button_accent_hover_color:var(--awb-color1);--button_border_hover_color:var(--awb-color1);--button_border_width-top:0;--button_border_width-right:0;--button_border_width-bottom:0;--button_border_width-left:0;--button-border-radius-top-left:0;--button-border-radius-top-right:0;--button-border-radius-bottom-right:0;--button-border-radius-bottom-left:0;--button_gradient_top_color:var(--awb-color4);--button_gradient_bottom_color:var(--awb-color4);--button_gradient_top_color_hover:var(--awb-color5);--button_gradient_bottom_color_hover:var(--awb-color5);--button_font_size:15px;--button_typography-letter-spacing:0.015em;--button_typography-font-family:&quot;Noto Sans&quot;;--button_typography-font-style:normal;--button_typography-font-weight:400;\" target=\"_self\" href=\"https:\/\/site101.adpro.si\/en\/produktne-linije\/vodnohlajeni-visokofrekvencni-transformatorji\/\"><i class=\"fa-info-circle fas awb-button__icon awb-button__icon--default button-icon-left\" aria-hidden=\"true\"><\/i><span class=\"fusion-button-text awb-button__text awb-button__text--default\">Ve\u010d informacij<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-4 fusion_builder_column_inner_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:5.76%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><style>\n  .slide-card {\n    position: relative;\n    width: 100%;\n    max-width: 420px;\n    height: 460px;\n    margin: 0 auto;\n    overflow: hidden;\n    background: \n#ffffff;\n    font-family: \"Noto Sans\", Arial, sans-serif;\n    cursor: pointer;\n  }\n\n  \/* Both card sides *\/\n  .slide-card__front,\n  .slide-card__back {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* Back image *\/\n  .slide-card__back {\n    z-index: 1;\n    background: \n#ffffff;\n  }\n\n  .slide-card__back img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  \/* Front content *\/\n  .slide-card__front {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    background: \n#ffffff;\n    transition: transform 0.65s cubic-bezier(0.77, 0, 0.18, 1);\n    will-change: transform;\n  }\n\n  \/* Push front panel to the left *\/\n  .slide-card:hover .slide-card__front,\n  .slide-card:focus-within .slide-card__front,\n  .slide-card.is-active .slide-card__front {\n    transform: translateX(-100%);\n  }\n\n  .slide-card__content {\n    padding: 30px 30px 24px;\n  }\n\n  .slide-card__title {\n    margin: 0 0 12px;\n    color: \n#000000;\n    font-size: 28px !important;\n    font-weight: 600;\n    line-height: 1.2;\n  }\n\n  .slide-card__description {\n    margin: 0;\n    color: \n#555555;\n    font-size: 16px;\n    line-height: 1.6;\n  }\n\n  .slide-card__front-image {\n    display: block;\n    width: 100%;\n    height: 240px;\n    margin-top: auto;\n    object-fit: cover;\n  }\n\n  \/* Mobile *\/\n  @media (max-width: 767px) {\n    .slide-card {\n      height: 400px;\n    }\n\n    .slide-card__content {\n      padding: 24px 22px 20px;\n    }\n\n    .slide-card__title {\n      font-size: 24px;\n    }\n\n    .slide-card__description {\n      font-size: 15px;\n    }\n\n    .slide-card__front-image {\n      height: 205px;\n    }\n  }\n\n  \/* Respect reduced-motion preferences *\/\n  @media (prefers-reduced-motion: reduce) {\n    .slide-card__front {\n      transition: none;\n    }\n  }\n<\/style>\n\n<div class=\"slide-card\" tabindex=\"0\">\n\n  <!-- Back side: full image -->\n  <div class=\"slide-card__back\">\n    <img class=\"lazyload\" decoding=\"async\"\n      src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271086%27%20height%3D%271448%27%20viewBox%3D%270%200%201086%201448%27%3E%3Crect%20width%3D%271086%27%20height%3D%271448%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/site101.adpro.si\/wp-content\/uploads\/2026\/10\/KARTICA-F_Stabilizator_ZADNJA-web.webp\"\n      alt=\"Back image\"\n    >\n  <\/div>\n\n  <!-- Front side: content and image -->\n  <div class=\"slide-card__front\">\n    <div class=\"slide-card__content\">\n      <h2 class=\"slide-card__title\">Stabilizatorji napetosti<\/h2>\n      <p class=\"slide-card__description\">\n        Razli\u010dne mo\u010di, regulacija napetosti v obe smeri in v vseh treh fazah, mo\u017enost izbire razpona napetosti\n      <\/p>\n    <\/div>\n\n    <img decoding=\"async\"\n      class=\"lazyload slide-card__front-image\"\n      src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271448%27%20height%3D%271086%27%20viewBox%3D%270%200%201448%201086%27%3E%3Crect%20width%3D%271448%27%20height%3D%271086%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/site101.adpro.si\/wp-content\/uploads\/2026\/10\/KARTICA-F_Sabilizator_SPREDNJA-web.webp\"\n      alt=\"Front image\"\n    >\n  <\/div>\n\n<\/div>\n\n<script>\n  document.querySelectorAll(\".slide-card\").forEach(function (card) {\n    let startX = 0;\n    let startProgress = 0;\n    let progress = 0;\n    let isDragging = false;\n    let hasMoved = false;\n    let pointerId = null;\n\n    let isHovered = false;\n    let isPinnedOpen = false;\n\n    function clamp(value) {\n      return Math.max(0, Math.min(1, value));\n    }\n\n    function updateAria(value) {\n      card.setAttribute(\"aria-expanded\", value === 1 ? \"true\" : \"false\");\n    }\n\n    function render() {\n      const visibleProgress = isPinnedOpen || isHovered ? 1 : 0;\n\n      progress = visibleProgress;\n      card.style.setProperty(\"--slide-progress\", visibleProgress);\n      updateAria(visibleProgress);\n    }\n\n    function setDragProgress(value) {\n      progress = clamp(value);\n      card.style.setProperty(\"--slide-progress\", progress);\n      updateAria(progress >= 0.5 ? 1 : 0);\n    }\n\n    \/* Desktop hover *\/\n    card.addEventListener(\"pointerenter\", function (event) {\n      if (event.pointerType === \"mouse\" && !isDragging) {\n        isHovered = true;\n        render();\n      }\n    });\n\n    card.addEventListener(\"pointerleave\", function (event) {\n      if (event.pointerType === \"mouse\" && !isDragging) {\n        isHovered = false;\n        render();\n      }\n    });\n\n    \/* Start touch, click, or drag interaction *\/\n    card.addEventListener(\"pointerdown\", function (event) {\n      if (event.button !== undefined && event.button !== 0) return;\n\n      startX = event.clientX;\n      startProgress = progress;\n      isDragging = true;\n      hasMoved = false;\n      pointerId = event.pointerId;\n\n      card.classList.add(\"is-dragging\");\n      card.setPointerCapture(pointerId);\n    });\n\n    \/* Drag card left or right *\/\n    card.addEventListener(\"pointermove\", function (event) {\n      if (!isDragging) return;\n\n      const cardWidth = card.offsetWidth;\n      const movement = startX - event.clientX;\n\n      \/* More than 8px means this is a drag rather than a click\/tap *\/\n      if (Math.abs(movement) > 8) {\n        hasMoved = true;\n      }\n\n      \/* Left opens \/ right closes *\/\n      setDragProgress(startProgress + movement \/ cardWidth);\n    });\n\n    function finishInteraction(event) {\n      if (!isDragging) return;\n\n      isDragging = false;\n      card.classList.remove(\"is-dragging\");\n\n      if (!hasMoved) {\n        \/*\n          Click or tap:\n          Toggle the persistent open state.\n          Hover still temporarily reveals the card on desktop.\n        *\/\n        isPinnedOpen = !isPinnedOpen;\n        render();\n      } else {\n        \/*\n          Drag:\n          Snap to the nearest side and save that state.\n        *\/\n        isPinnedOpen = progress >= 0.5;\n        render();\n      }\n\n      if (\n        pointerId !== null &&\n        card.hasPointerCapture(pointerId)\n      ) {\n        card.releasePointerCapture(pointerId);\n      }\n\n      pointerId = null;\n    }\n\n    card.addEventListener(\"pointerup\", finishInteraction);\n\n    card.addEventListener(\"pointercancel\", function (event) {\n      isDragging = false;\n      card.classList.remove(\"is-dragging\");\n      render();\n\n      if (\n        pointerId !== null &&\n        card.hasPointerCapture(pointerId)\n      ) {\n        card.releasePointerCapture(pointerId);\n      }\n\n      pointerId = null;\n    });\n\n    \/* Keyboard: Enter or Space toggles persistent open state *\/\n    card.addEventListener(\"keydown\", function (event) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        isPinnedOpen = !isPinnedOpen;\n        render();\n      }\n    });\n\n    \/* Initial card state *\/\n    render();\n  });\n<\/script><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-custom fusion-button-default button-5 fusion-button-span-no fusion-button-span-default-medium\" style=\"--awb-margin-top:10px;--awb-padding-top:10px;--awb-padding-right:20px;--awb-padding-bottom:10px;--awb-padding-left:20px;--button_accent_color:var(--awb-color1);--button_accent_hover_color:var(--awb-color1);--button_border_hover_color:var(--awb-color1);--button_border_width-top:0;--button_border_width-right:0;--button_border_width-bottom:0;--button_border_width-left:0;--button-border-radius-top-left:0;--button-border-radius-top-right:0;--button-border-radius-bottom-right:0;--button-border-radius-bottom-left:0;--button_gradient_top_color:var(--awb-color4);--button_gradient_bottom_color:var(--awb-color4);--button_gradient_top_color_hover:var(--awb-color5);--button_gradient_bottom_color_hover:var(--awb-color5);--button_font_size:15px;--button_typography-letter-spacing:0.015em;--button_typography-font-family:&quot;Noto Sans&quot;;--button_typography-font-style:normal;--button_typography-font-weight:400;\" target=\"_self\" href=\"https:\/\/site101.adpro.si\/en\/produktne-linije\/napetostni-stabilizatorji\/\"><i class=\"fa-info-circle fas awb-button__icon awb-button__icon--default button-icon-left\" aria-hidden=\"true\"><\/i><span class=\"fusion-button-text awb-button__text awb-button__text--default\">Ve\u010d informacij<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-5 fusion_builder_column_inner_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:5.76%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><style>\n  .slide-card {\n    position: relative;\n    width: 100%;\n    max-width: 420px;\n    height: 460px;\n    margin: 0 auto;\n    overflow: hidden;\n    background: \n#ffffff;\n    font-family: \"Noto Sans\", Arial, sans-serif;\n    cursor: pointer;\n  }\n\n  \/* Both card sides *\/\n  .slide-card__front,\n  .slide-card__back {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* Back image *\/\n  .slide-card__back {\n    z-index: 1;\n    background: \n#ffffff;\n  }\n\n  .slide-card__back img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  \/* Front content *\/\n  .slide-card__front {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    background: \n#ffffff;\n    transition: transform 0.65s cubic-bezier(0.77, 0, 0.18, 1);\n    will-change: transform;\n  }\n\n  \/* Push front panel to the left *\/\n  .slide-card:hover .slide-card__front,\n  .slide-card:focus-within .slide-card__front,\n  .slide-card.is-active .slide-card__front {\n    transform: translateX(-100%);\n  }\n\n  .slide-card__content {\n    padding: 30px 30px 24px;\n  }\n\n  .slide-card__title {\n    margin: 0 0 12px;\n    color: \n#000000;\n    font-size: 28px !important;\n    font-weight: 600;\n    line-height: 1.2;\n  }\n\n  .slide-card__description {\n    margin: 0;\n    color: \n#555555;\n    font-size: 16px;\n    line-height: 1.6;\n  }\n\n  .slide-card__front-image {\n    display: block;\n    width: 100%;\n    height: 240px;\n    margin-top: auto;\n    object-fit: cover;\n  }\n\n  \/* Mobile *\/\n  @media (max-width: 767px) {\n    .slide-card {\n      height: 400px;\n    }\n\n    .slide-card__content {\n      padding: 24px 22px 20px;\n    }\n\n    .slide-card__title {\n      font-size: 24px;\n    }\n\n    .slide-card__description {\n      font-size: 15px;\n    }\n\n    .slide-card__front-image {\n      height: 205px;\n    }\n  }\n\n  \/* Respect reduced-motion preferences *\/\n  @media (prefers-reduced-motion: reduce) {\n    .slide-card__front {\n      transition: none;\n    }\n  }\n<\/style>\n\n<div class=\"slide-card\" tabindex=\"0\">\n\n  <!-- Back side: full image -->\n  <div class=\"slide-card__back\">\n    <img class=\"lazyload\" decoding=\"async\"\n      src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271086%27%20height%3D%271448%27%20viewBox%3D%270%200%201086%201448%27%3E%3Crect%20width%3D%271086%27%20height%3D%271448%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/site101.adpro.si\/wp-content\/uploads\/2026\/10\/KARTICA-F_Druge-resitve_ZADNJA-web.webp\"\n      alt=\"Back image\"\n    >\n  <\/div>\n\n  <!-- Front side: content and image -->\n  <div class=\"slide-card__front\">\n    <div class=\"slide-card__content\">\n      <h2 class=\"slide-card__title\">Druge re\u0161itve<\/h2>\n      <p class=\"slide-card__description\">\n        Popravilo transformatorjev, povijanje gole \u017eice, 3D tisk ohi\u0161ij in komponent  \n      <\/p>\n    <\/div>\n\n    <img decoding=\"async\"\n      class=\"lazyload slide-card__front-image\"\n      src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271448%27%20height%3D%271086%27%20viewBox%3D%270%200%201448%201086%27%3E%3Crect%20width%3D%271448%27%20height%3D%271086%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/site101.adpro.si\/wp-content\/uploads\/2026\/10\/KARTICA-F_Druge-resitve_SPREDNJA-web.webp\"\n      alt=\"Front image\"\n    >\n  <\/div>\n\n<\/div>\n\n<script>\n  document.querySelectorAll(\".slide-card\").forEach(function (card) {\n    let startX = 0;\n    let startProgress = 0;\n    let progress = 0;\n    let isDragging = false;\n    let hasMoved = false;\n    let pointerId = null;\n\n    let isHovered = false;\n    let isPinnedOpen = false;\n\n    function clamp(value) {\n      return Math.max(0, Math.min(1, value));\n    }\n\n    function updateAria(value) {\n      card.setAttribute(\"aria-expanded\", value === 1 ? \"true\" : \"false\");\n    }\n\n    function render() {\n      const visibleProgress = isPinnedOpen || isHovered ? 1 : 0;\n\n      progress = visibleProgress;\n      card.style.setProperty(\"--slide-progress\", visibleProgress);\n      updateAria(visibleProgress);\n    }\n\n    function setDragProgress(value) {\n      progress = clamp(value);\n      card.style.setProperty(\"--slide-progress\", progress);\n      updateAria(progress >= 0.5 ? 1 : 0);\n    }\n\n    \/* Desktop hover *\/\n    card.addEventListener(\"pointerenter\", function (event) {\n      if (event.pointerType === \"mouse\" && !isDragging) {\n        isHovered = true;\n        render();\n      }\n    });\n\n    card.addEventListener(\"pointerleave\", function (event) {\n      if (event.pointerType === \"mouse\" && !isDragging) {\n        isHovered = false;\n        render();\n      }\n    });\n\n    \/* Start touch, click, or drag interaction *\/\n    card.addEventListener(\"pointerdown\", function (event) {\n      if (event.button !== undefined && event.button !== 0) return;\n\n      startX = event.clientX;\n      startProgress = progress;\n      isDragging = true;\n      hasMoved = false;\n      pointerId = event.pointerId;\n\n      card.classList.add(\"is-dragging\");\n      card.setPointerCapture(pointerId);\n    });\n\n    \/* Drag card left or right *\/\n    card.addEventListener(\"pointermove\", function (event) {\n      if (!isDragging) return;\n\n      const cardWidth = card.offsetWidth;\n      const movement = startX - event.clientX;\n\n      \/* More than 8px means this is a drag rather than a click\/tap *\/\n      if (Math.abs(movement) > 8) {\n        hasMoved = true;\n      }\n\n      \/* Left opens \/ right closes *\/\n      setDragProgress(startProgress + movement \/ cardWidth);\n    });\n\n    function finishInteraction(event) {\n      if (!isDragging) return;\n\n      isDragging = false;\n      card.classList.remove(\"is-dragging\");\n\n      if (!hasMoved) {\n        \/*\n          Click or tap:\n          Toggle the persistent open state.\n          Hover still temporarily reveals the card on desktop.\n        *\/\n        isPinnedOpen = !isPinnedOpen;\n        render();\n      } else {\n        \/*\n          Drag:\n          Snap to the nearest side and save that state.\n        *\/\n        isPinnedOpen = progress >= 0.5;\n        render();\n      }\n\n      if (\n        pointerId !== null &&\n        card.hasPointerCapture(pointerId)\n      ) {\n        card.releasePointerCapture(pointerId);\n      }\n\n      pointerId = null;\n    }\n\n    card.addEventListener(\"pointerup\", finishInteraction);\n\n    card.addEventListener(\"pointercancel\", function (event) {\n      isDragging = false;\n      card.classList.remove(\"is-dragging\");\n      render();\n\n      if (\n        pointerId !== null &&\n        card.hasPointerCapture(pointerId)\n      ) {\n        card.releasePointerCapture(pointerId);\n      }\n\n      pointerId = null;\n    });\n\n    \/* Keyboard: Enter or Space toggles persistent open state *\/\n    card.addEventListener(\"keydown\", function (event) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        isPinnedOpen = !isPinnedOpen;\n        render();\n      }\n    });\n\n    \/* Initial card state *\/\n    render();\n  });\n<\/script><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-custom fusion-button-default button-6 fusion-button-span-no fusion-button-span-default-medium\" style=\"--awb-margin-top:10px;--awb-padding-top:10px;--awb-padding-right:20px;--awb-padding-bottom:10px;--awb-padding-left:20px;--button_accent_color:var(--awb-color1);--button_accent_hover_color:var(--awb-color1);--button_border_hover_color:var(--awb-color1);--button_border_width-top:0;--button_border_width-right:0;--button_border_width-bottom:0;--button_border_width-left:0;--button-border-radius-top-left:0;--button-border-radius-top-right:0;--button-border-radius-bottom-right:0;--button-border-radius-bottom-left:0;--button_gradient_top_color:var(--awb-color4);--button_gradient_bottom_color:var(--awb-color4);--button_gradient_top_color_hover:var(--awb-color5);--button_gradient_bottom_color_hover:var(--awb-color5);--button_font_size:15px;--button_typography-letter-spacing:0.015em;--button_typography-font-family:&quot;Noto Sans&quot;;--button_typography-font-style:normal;--button_typography-font-weight:400;\" target=\"_self\" href=\"https:\/\/site101.adpro.si\/en\/produktne-linije\/druge-resitve\/\"><i class=\"fa-info-circle fas awb-button__icon awb-button__icon--default button-icon-left\" aria-hidden=\"true\"><\/i><span class=\"fusion-button-text awb-button__text awb-button__text--default\">Ve\u010d informacij<\/span><\/a><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"footnotes":""},"class_list":["post-499","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/site101.adpro.si\/en\/wp-json\/wp\/v2\/pages\/499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/site101.adpro.si\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/site101.adpro.si\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/site101.adpro.si\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/site101.adpro.si\/en\/wp-json\/wp\/v2\/comments?post=499"}],"version-history":[{"count":7,"href":"https:\/\/site101.adpro.si\/en\/wp-json\/wp\/v2\/pages\/499\/revisions"}],"predecessor-version":[{"id":691,"href":"https:\/\/site101.adpro.si\/en\/wp-json\/wp\/v2\/pages\/499\/revisions\/691"}],"wp:attachment":[{"href":"https:\/\/site101.adpro.si\/en\/wp-json\/wp\/v2\/media?parent=499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}