{"id":10927,"date":"2025-12-19T21:11:25","date_gmt":"2025-12-19T21:11:25","guid":{"rendered":"https:\/\/dev.smartplug.com\/staging\/?page_id=10927"},"modified":"2026-10-05T22:01:19","modified_gmt":"2026-10-05T22:01:19","slug":"elci-breakers-white","status":"publish","type":"page","link":"https:\/\/dev.smartplug.com\/staging\/elci-breakers-white\/","title":{"rendered":"ELCI Breakers (White)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10927\" class=\"elementor elementor-10927\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3bca2de e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"3bca2de\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-a6fee19 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"a6fee19\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-0037da4 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"0037da4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7fe139b elementor-widget elementor-widget-heading\" data-id=\"7fe139b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Smartplug ELCI Breakers (White)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-88192ed e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"88192ed\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4723124 e-grid e-con-full wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"4723124\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-75c0c77 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"75c0c77\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0f1f6b sp-hotspot-image elementor-widget elementor-widget-html\" data-id=\"c0f1f6b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMARTPLUG ELCI BREAKERS GALLERY -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<div id=\"sp-elci-gallery\">\r\n    <div class=\"sp-main-view\">\r\n\r\n        <!-- SLIDE 0 \u2014 FEATURES -->\r\n        <div class=\"sp-gallery-slide active\"\r\n             data-slide=\"0\"\r\n             data-title=\"KEY FEATURES\"\r\n             data-subtitle=\"Click the numbered points to explore the ELCI Breakers\">\r\n\r\n            <div class=\"sp-product-image-wrap sp-main-product sp-hotspot-image\" style=\"\r\n                --image-x-desktop:0px;\r\n                --image-y-desktop:0px;\r\n                --image-scale-desktop:1;\r\n                --image-x-mobile:0px;\r\n                --image-y-mobile:-15px;\r\n                --image-scale-mobile:1;\r\n            \">\r\n                <div class=\"sp-main-image-clip\">\r\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/ELCI-Breakers-\u2013-WHITE.png\"\r\n                         alt=\"ELCI Breaker\">\r\n                <\/div>\r\n\r\n                <!-- HOTSPOT 1 -->\r\n                <div class=\"sp-hotspot\"\r\n                     tabindex=\"0\"\r\n                     style=\"\r\n                         --top:26%;\r\n                         --left:15%;\r\n                         --hotspot-x:0px;\r\n                         --hotspot-y:0px;\r\n                         --hotspot-scale-desktop:1;\r\n                        --hotspot-scale-mobile:.8;\r\n                        --tooltip-x-desktop:0px;\r\n                        --tooltip-y-desktop:0px;\r\n                        --tooltip-scale-desktop:1;\r\n                        --tooltip-x-mobile:20px;\r\n                        --tooltip-y-mobile:0px;\r\n                        --tooltip-scale-mobile:1;\r\n                        --dot-color:#DF6B30;\r\n                        --number-color:#ffffff;\r\n                        --tooltip-bg:#DF6B30;\r\n                        --tooltip-width:220px;\r\n                        --dot-size:36px;\r\n                        --number-size:16px;\r\n                     \">\r\n                    <div class=\"sp-dot\">\r\n                        <span class=\"sp-number\">1<\/span>\r\n                    <\/div>\r\n                    <div class=\"sp-tooltip\">\r\n                        <strong>ELCI Protection<\/strong><br>\r\n                        Detects electrical leakage instantly.\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- HOTSPOT 2 -->\r\n                <div class=\"sp-hotspot\"\r\n                     tabindex=\"0\"\r\n                     style=\"\r\n                         --top:35%;\r\n                         --left:85%;\r\n                         --hotspot-x:0px;\r\n                         --hotspot-y:0px;\r\n                         --hotspot-scale-desktop:1;\r\n                        --hotspot-scale-mobile:.8;\r\n                        --tooltip-x-desktop:0px;\r\n                        --tooltip-y-desktop:0px;\r\n                        --tooltip-scale-desktop:1;\r\n                        --tooltip-x-mobile:-30px;\r\n                        --tooltip-y-mobile:0px;\r\n                        --tooltip-scale-mobile:1;\r\n                        --dot-color:#DF6B30;\r\n                        --number-color:#ffffff;\r\n                        --tooltip-bg:#DF6B30;\r\n                        --tooltip-width:240px;\r\n                        --dot-size:34px;\r\n                        --number-size:16px;\r\n                     \">\r\n                    <div class=\"sp-dot\">\r\n                        <span class=\"sp-number\">2<\/span>\r\n                    <\/div>\r\n                    <div class=\"sp-tooltip\">\r\n                        <strong>Circuit Breaker<\/strong><br>\r\n                        Protects against overloads and shorts.\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- HOTSPOT 3 -->\r\n                <div class=\"sp-hotspot\"\r\n                     tabindex=\"0\"\r\n                     style=\"\r\n                         --top:61%;\r\n                         --left:88%;\r\n                         --hotspot-x:0px;\r\n                         --hotspot-y:0px;\r\n                         --hotspot-scale-desktop:1;\r\n                        --hotspot-scale-mobile:.8;\r\n                        --tooltip-x-desktop:0px;\r\n                        --tooltip-y-desktop:0px;\r\n                        --tooltip-scale-desktop:1;\r\n                        --tooltip-x-mobile:-50px;\r\n                        --tooltip-y-mobile:0px;\r\n                        --tooltip-scale-mobile:1;\r\n                        --dot-color:#DF6B30;\r\n                        --number-color:#ffffff;\r\n                        --tooltip-bg:#DF6B30;\r\n                        --tooltip-width:240px;\r\n                        --dot-size:34px;\r\n                        --number-size:16px;\r\n                     \">\r\n                    <div class=\"sp-dot\">\r\n                        <span class=\"sp-number\">3<\/span>\r\n                    <\/div>\r\n                    <div class=\"sp-tooltip\">\r\n                        <strong>UV-Resistant Enclosure<\/strong><br>\r\n                        Built for harsh marine conditions.\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- HOTSPOT 4 -->\r\n                <div class=\"sp-hotspot\"\r\n                     tabindex=\"0\"\r\n                     style=\"\r\n                         --top:72%;\r\n                         --left:89%;\r\n                         --hotspot-x:0px;\r\n                         --hotspot-y:0px;\r\n                         --hotspot-scale-desktop:1;\r\n                        --hotspot-scale-mobile:.8;\r\n                        --tooltip-x-desktop:0px;\r\n                        --tooltip-y-desktop:0px;\r\n                        --tooltip-scale-desktop:1;\r\n                        --tooltip-x-mobile:-30px;\r\n                        --tooltip-y-mobile:0px;\r\n                        --tooltip-scale-mobile:1;\r\n                        --dot-color:#DF6B30;\r\n                        --number-color:#ffffff;\r\n                        --tooltip-bg:#DF6B30;\r\n                        --tooltip-width:250px;\r\n                        --dot-size:34px;\r\n                        --number-size:16px;\r\n                     \">\r\n                    <div class=\"sp-dot\">\r\n                        <span class=\"sp-number\">4<\/span>\r\n                    <\/div>\r\n                    <div class=\"sp-tooltip\">\r\n                        <strong>Status Indicators<\/strong><br>\r\n                        Displays power and fault status.\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- HOTSPOT 5 -->\r\n                <div class=\"sp-hotspot\"\r\n                     tabindex=\"0\"\r\n                     style=\"\r\n                         --top:91%;\r\n                         --left:85%;\r\n                         --hotspot-x:0px;\r\n                         --hotspot-y:0px;\r\n                         --hotspot-scale-desktop:1;\r\n                        --hotspot-scale-mobile:.8;\r\n                        --tooltip-x-desktop:0px;\r\n                        --tooltip-y-desktop:0px;\r\n                        --tooltip-scale-desktop:1;\r\n                        --tooltip-x-mobile:-30px;\r\n                        --tooltip-y-mobile:0px;\r\n                        --tooltip-scale-mobile:1;\r\n                        --dot-color:#DF6B30;\r\n                        --number-color:#ffffff;\r\n                        --tooltip-bg:#DF6B30;\r\n                        --tooltip-width:250px;\r\n                        --dot-size:34px;\r\n                        --number-size:16px;\r\n                     \">\r\n                    <div class=\"sp-dot\">\r\n                        <span class=\"sp-number\">5<\/span>\r\n                    <\/div>\r\n                    <div class=\"sp-tooltip\">\r\n                        <strong>Test &amp; Reset Controls<\/strong><br>\r\n                        Quick system testing and reset.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"sp-slide-info\">\r\n                <div class=\"sp-slide-title\">KEY FEATURES<\/div>\r\n                <div class=\"sp-slide-subtitle\">Click the numbered points to explore the ELCI Breakers<\/div>\r\n            <\/div>\r\n        <\/div>\r\n<!-- SLIDE 1 \u2014 BREAKER -->\r\n        <div class=\"sp-gallery-slide sp-variant-slide\"\r\n             data-slide=\"1\"\r\n             data-variant=\"breaker\"\r\n             data-Combokit=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30A-50A-ELCI-Sensor-Breaker-Combo-Kit.png\"\r\n             data-Breaker=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30A-50A-ELCI-Breaker.png\"\r\n             data-Breaker-side=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30A-50A-ELCI-Breaker-Side.png\"\r\n             data-Combokit-title=\"ELCI SENSOR &amp; BREAKER COMBO KIT\"\r\n             data-Combokit-subtitle=\"Non-Metallic - White\"\r\n             data-Combokit-part-number=\"ELCI30BRKERNMW &amp; ELCI50BRKERNMW\"\r\n             data-Breaker-title=\"ELCI BREAKER\"\r\n             data-Breaker-subtitle=\"Non-Metallic - White\"\r\n             data-Breaker-part-number=\"ELCIBRKR30PW &amp; ELCIBRKR50PW\"\r\n             data-gallery-thumbnail-combokit=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30A-50A-ELCI-Sensor-Breaker-Combo-Kit.png\"\r\n             data-gallery-thumbnail-breaker=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30A-50A-ELCI-Breaker.png\">\r\n\r\n            <div class=\"sp-variant-layout\">\r\n                <div class=\"sp-mobile-variant-title\">\r\n                    <div class=\"sp-slide-title\">ELCI BREAKER<\/div>\r\n                    <div class=\"sp-slide-subtitle\">Non-Metallic - White<\/div>\r\n                <\/div>\r\n\r\n                <div class=\"sp-variant-image-wrap\">\r\n                    <img decoding=\"async\" class=\"sp-variant-image\"\r\n                         src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30A-50A-ELCI-Sensor-Breaker-Combo-Kit.png\"\r\n                         alt=\"ELCI SENSOR &amp; BREAKER COMBO KIT\"\r\n                         style=\"\r\n                            --image-x-desktop:0px;\r\n                            --image-y-desktop:0px;\r\n                            --image-scale-desktop:1;\r\n                            --image-x-mobile:0px;\r\n                            --image-y-mobile:0px;\r\n                            --image-scale-mobile:1;\r\n                         \">\r\n                <\/div>\r\n\r\n                <div class=\"sp-slide-info sp-side-info\">\r\n                    <div class=\"sp-slide-title\">ELCI BREAKER<\/div>\r\n                    <div class=\"sp-slide-subtitle\">Non-Metallic - White<\/div>\r\n\r\n                    <div class=\"sp-amp-label sp-view-label\">SELECT VIEW<\/div>\r\n                    <div class=\"sp-amp-toggle sp-view-toggle\" role=\"group\" aria-label=\"Select breaker view\">\r\n                        <button type=\"button\" class=\"sp-amp-btn sp-view-btn active\" data-view=\"front\">Front<\/button>\r\n                        <button type=\"button\" class=\"sp-amp-btn sp-view-btn\" data-view=\"side\">Side<\/button>\r\n                    <\/div>\r\n\r\n                    <div class=\"sp-current-amp sp-view-current\">Showing <strong>Front<\/strong><\/div>\r\n\r\n                    <div class=\"sp-part-number-row\">\r\n                        <div class=\"sp-part-number\">\r\n                            PART NUMBER: <strong class=\"sp-part-number-value\"><\/strong>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- THREE THUMBNAILS -->\r\n    <div class=\"sp-product-selector\">\r\n        <button type=\"button\"\r\n                class=\"sp-thumb-nav sp-thumb-prev\"\r\n                aria-label=\"Previous product image\">\r\n            &#10094;\r\n        <\/button>\r\n\r\n        <div class=\"sp-thumbnails\">\r\n            <button type=\"button\"\r\n                    class=\"sp-thumb sp-feature-thumb active\"\r\n                    data-target=\"0\"\r\n                    aria-label=\"View ELCI Breakers features\">\r\n                <span class=\"sp-thumb-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30A-50A-ELCI-Sensor.png\"\r\n                         alt=\"30A 50A ELCI Sensor\">\r\n                <\/span>\r\n                <span class=\"sp-thumb-label\">Features<\/span>\r\n            <\/button>\r\n\r\n            <button type=\"button\"\r\n                    class=\"sp-thumb\"\r\n                    data-target=\"1\"\r\n                    aria-label=\"View ELCI Breaker front and side views\">\r\n                <span class=\"sp-thumb-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30A-50A-ELCI-Breaker.png\"\r\n                         alt=\"30A 50A ELCI Breaker - Front\">\r\n                <\/span>\r\n                <span class=\"sp-thumb-label\">Breaker<\/span>\r\n            <\/button>\r\n        <\/div>\r\n\r\n        <button type=\"button\"\r\n                class=\"sp-thumb-nav sp-thumb-next\"\r\n                aria-label=\"Next product image\">\r\n            &#10095;\r\n        <\/button>\r\n    <\/div>\r\n\r\n    <div class=\"sp-gallery-pagination\"\r\n         aria-label=\"Product gallery pagination\">\r\n        <button type=\"button\"\r\n                class=\"sp-page-dot active\"\r\n                data-page=\"0\"\r\n                aria-label=\"Go to features\">\r\n        <\/button>\r\n        <button type=\"button\"\r\n                class=\"sp-page-dot\"\r\n                data-page=\"1\"\r\n                aria-label=\"Go to breaker\">\r\n        <\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* =========================================================\r\nSMARTPLUG ELCI BREAKERS GALLERY\r\nAmazon-inspired product selector\r\n========================================================= *\/\r\n\r\n#sp-elci-gallery {\r\n    --sp-orange: #DF6B30;\r\n    --sp-dark: #1c1c1c;\r\n    --sp-muted: #666;\r\n    --sp-border: #dedede;\r\n    --sp-soft: #f7f7f7;\r\n\r\n    width: 100%;\r\n    height: 560px;\r\n    margin: 0 auto;\r\n    font-family: \"Montserrat\", sans-serif;\r\n    box-sizing: border-box;\r\n    overflow: visible;\r\n}\r\n\r\n#sp-elci-gallery *,\r\n#sp-elci-gallery *::before,\r\n#sp-elci-gallery *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\/* =========================================================\r\nMAIN VIEW\r\n========================================================= *\/\r\n\r\n#sp-elci-gallery .sp-main-view {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 430px;\r\n    overflow: visible;\r\n}\r\n\r\n#sp-elci-gallery .sp-gallery-slide {\r\n    display: none;\r\n    width: 100%;\r\n    height: 100%;\r\n    position: relative;\r\n    overflow: visible;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n}\r\n\r\n#sp-elci-gallery .sp-gallery-slide.active {\r\n    display: flex;\r\n}\r\n\r\n\/* =========================================================\r\nFEATURE IMAGE\r\n========================================================= *\/\r\n\r\n#sp-elci-gallery .sp-main-product {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 400px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n#sp-elci-gallery .sp-main-image-clip {\r\n    position: absolute;\r\n    inset: 0;\r\n    overflow: hidden;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n#sp-elci-gallery .sp-main-image-clip > img {\r\n    width: 100%;\r\n    height: 100%;\r\n    max-width: none;\r\n    object-fit: contain;\r\n    display: block;\r\n    transform:\r\n    translate(var(--image-x-desktop), var(--image-y-desktop))\r\n    scale(var(--image-scale-desktop));\r\n    transform-origin: center center;\r\n    transition: transform .18s ease;\r\n}\r\n\r\n\/* =========================================================\r\nVARIANT IMAGE\r\n========================================================= *\/\r\n\r\n#sp-elci-gallery .sp-variant-layout {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.45fr) minmax(250px, .8fr);\r\n    align-items: center;\r\n    gap: 22px;\r\n}\r\n\r\n#sp-elci-gallery .sp-variant-image-wrap {\r\n    width: 100%;\r\n    height: 400px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    position: relative;\r\n    min-width: 0;\r\n}\r\n\r\n#sp-elci-gallery .sp-variant-image-wrap img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n    display: block;\r\n    transform:\r\n    translate(var(--image-x-desktop), var(--image-y-desktop))\r\n    scale(var(--image-scale-desktop));\r\n    transform-origin: center center;\r\n    transition: opacity .16s ease, transform .18s ease;\r\n}\r\n\r\n\/* =========================================================\r\nPRODUCT INFORMATION\r\n========================================================= *\/\r\n\r\n#sp-elci-gallery .sp-slide-info {\r\n    width: 100%;\r\n    max-width: 400px;\r\n    margin-top: -2px;\r\n    padding: 0 12px;\r\n    text-align: center;\r\n    transition: none;\r\n}\r\n\r\n#sp-elci-gallery .sp-side-info {\r\n    max-width: 360px;\r\n    margin: 0;\r\n    padding: 2px 2px 2px 0;\r\n    text-align: left;\r\n}\r\n\r\n#sp-elci-gallery .sp-side-info .sp-slide-title {\r\n    font-size: 30px;\r\n    font-family: \"Bebas Neue\", sans-serif;\r\n    font-weight: 600;\r\n    letter-spacing: 1.5px;\r\n}\r\n\r\n#sp-elci-gallery .sp-amp-label {\r\n    margin-top: 17px;\r\n    color: #777;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: .5px;\r\n}\r\n\r\n#sp-elci-gallery .sp-amp-toggle {\r\n    display: flex;\r\n    width: 100%;\r\n    max-width: 300px;\r\n    margin-top: 6px;\r\n    border: 1px solid #d8d8d8;\r\n    border-radius: 6px;\r\n    overflow: hidden;\r\n    background: #fff;\r\n}\r\n\r\n#sp-elci-gallery .sp-amp-btn {\r\n    flex: 1 1 50%;\r\n    min-height: 30px;\r\n    padding: 7px 10px;\r\n    border: 0;\r\n    border-right: 0px solid #d8d8d8;\r\n    background: #fff;\r\n    color: #333;\r\n    font-family: \"Montserrat\", sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    transition: background .18s ease, color .18s ease;\r\n}\r\n\r\n#sp-elci-gallery .sp-amp-btn:last-child { border-right: 0; }\r\n#sp-elci-gallery .sp-amp-btn.active { background: var(--sp-orange); color: #fff; }\r\n#sp-elci-gallery .sp-amp-btn:disabled { background: #f2f2f2; color: #aaa; cursor: not-allowed; }\r\n\r\n#sp-elci-gallery .sp-current-amp {\r\n    margin-top: 8px;\r\n    color: #555;\r\n    font-size: 12px;\r\n}\r\n\r\n#sp-elci-gallery .sp-side-info .sp-part-number { margin-top: 10px; }\r\n\r\n#sp-elci-gallery .sp-view-toggle {\r\n    display: flex;\r\n}\r\n\r\n#sp-elci-gallery .sp-view-btn {\r\n    flex: 1 1 50%;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-view-wrap {\r\n    width: 100%;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-view-wrap .sp-fullscreen-amp-toggle {\r\n    width: 250px;\r\n    max-width: 100%;\r\n}\r\n\r\n\r\n#sp-elci-gallery .sp-mobile-variant-title {\r\n    display: none;\r\n}\r\n\r\n#sp-elci-gallery .sp-slide-kicker {\r\n    color: var(--sp-orange);\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: .9px;\r\n    text-transform: uppercase;\r\n    line-height: 1.2;\r\n}\r\n\r\n#sp-elci-gallery .sp-slide-title {\r\n    margin-top: 3px;\r\n    color: var(--sp-dark);\r\n    font-family: \"Bebas Neue\", sans-serif;\r\n    font-size: 25px;\r\n    line-height: 1;\r\n    letter-spacing: .4px;\r\n}\r\n\r\n#sp-elci-gallery .sp-slide-subtitle {\r\n    margin-top: 3px;\r\n    margin-bottom: 3px;\r\n    color: var(--sp-muted);\r\n    font-size: 12px;\r\n    font-weight: 500;\r\n    line-height: 1.35;\r\n}\r\n\r\n#sp-elci-gallery .sp-variant-image.is-empty {\r\n    visibility: hidden;\r\n}\r\n\r\n#sp-elci-gallery .sp-part-number {\r\n    display: inline-block;\r\n    margin-top: 7px;\r\n    color: #555;\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    letter-spacing: .5px;\r\n}\r\n\r\n#sp-elci-gallery .sp-part-number strong {\r\n    color: var(--sp-dark);\r\n}\r\n\r\n\/* =========================================================\r\nHOTSPOTS\r\n========================================================= *\/\r\n\r\n#sp-elci-gallery .sp-hotspot {\r\n     position: absolute;\r\n     z-index: 1;\r\n     top: var(--sp-hotspot-top-px, var(--top));\r\n     left: var(--sp-hotspot-left-px, var(--left));\r\n     transform:\r\n     translate(-50%, -50%)\r\n     scale(var(--hotspot-scale-desktop));\r\n     transform-origin: center center;\r\n     outline: none;\r\n     transition: top .18s ease, left .18s ease, transform .18s ease;\r\n}\r\n\r\n#sp-elci-gallery .sp-dot {\r\n    width: 32px;\r\n    height: 32px;\r\n    border-radius: 50%;\r\n    background: var(--dot-color);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    box-shadow: 0 2px 8px rgba(0,0,0,.18);\r\n}\r\n\r\n#sp-elci-gallery .sp-number {\r\n    color: var(--number-color);\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    line-height: 1;\r\n}\r\n\r\n#sp-elci-gallery .sp-tooltip {\r\n    position: absolute;\r\n    z-index: 81;\r\n    bottom: calc(100% + 7px - var(--tooltip-y-desktop));\r\n    left: calc(50% + var(--tooltip-x-desktop));\r\n    transform:\r\n    translateX(-50%)\r\n    scale(var(--tooltip-scale-desktop));\r\n    transform-origin: center bottom;\r\n    width: 230px;\r\n    padding: 10px;\r\n    border-radius: 7px;\r\n    background: var(--tooltip-bg);\r\n    color: #fff;\r\n    font-size: 10px;\r\n    line-height: 1.45;\r\n    text-align: left;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition:\r\n    opacity .18s ease,\r\n    visibility .18s ease,\r\n    left .18s ease,\r\n    bottom .18s ease,\r\n    transform .18s ease;\r\n    pointer-events: none;\r\n    z-index:10;\r\n    box-shadow: 0 4px 14px rgba(0,0,0,.14);\r\n}\r\n\r\n#sp-elci-gallery .sp-hotspot:hover .sp-tooltip,\r\n#sp-elci-gallery .sp-hotspot:focus-visible .sp-tooltip,\r\n#sp-elci-gallery .sp-hotspot.is-open .sp-tooltip {\r\n    opacity: 1;\r\n    visibility: visible;\r\n}\r\n\r\n\/* =========================================================\r\nAMAZON-STYLE PRODUCT SELECTOR\r\n========================================================= *\/\r\n\r\n#sp-elci-gallery .sp-product-selector {\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: stretch;\r\n    gap: 6px;\r\n    margin-top: 4px;\r\n}\r\n\r\n#sp-elci-gallery .sp-thumbnails {\r\n    flex: 1 1 auto;\r\n    min-width: 0;\r\n    display: flex;\r\n    align-items: stretch;\r\n    justify-content: center;\r\n    gap: 7px;\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n    scroll-behavior: smooth;\r\n    scrollbar-width: none;\r\n    padding: 2px 0;\r\n}\r\n\r\n#sp-elci-gallery .sp-thumbnails::-webkit-scrollbar {\r\n    display: none;\r\n}\r\n\r\n#sp-elci-gallery .sp-thumb {\r\n    flex: 0 0 72px;\r\n    width: 72px;\r\n    min-height: 94px;\r\n    padding: 5px 5px 6px;\r\n    border: 1px solid var(--sp-border);\r\n    border-radius: 7px;\r\n    background: #fff;\r\n    cursor: pointer;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    gap: 3px;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease;\r\n}\r\n\r\n#sp-elci-gallery .sp-thumb:hover {\r\n    border-color: var(--sp-orange);\r\n    transform: translateY(-1px);\r\n}\r\n\r\n#sp-elci-gallery .sp-thumb.active {\r\n    border: 2px solid var(--sp-orange);\r\n    box-shadow: 0 2px 8px rgba(223,107,48,.13);\r\n}\r\n\r\n#sp-elci-gallery .sp-thumb:focus {\r\n    outline: none;\r\n}\r\n\r\n#sp-elci-gallery .sp-thumb:focus-visible {\r\n    border-color: var(--sp-orange);\r\n    box-shadow: 0 0 0 2px rgba(223,107,48,.18);\r\n}\r\n\r\n#sp-elci-gallery .sp-thumb-image {\r\n    width: 100%;\r\n    height: 57px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n    border-radius: 4px;\r\n    background: #fff;\r\n}\r\n\r\n#sp-elci-gallery .sp-thumb img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n    display: block;\r\n    pointer-events: none;\r\n}\r\n\r\n#sp-elci-gallery .sp-thumb-label {\r\n    display: block;\r\n    width: 100%;\r\n    color: var(--sp-dark);\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    line-height: 1.15;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n#sp-elci-gallery .sp-thumb-part {\r\n    display: block;\r\n    color: #777;\r\n    font-size: 8px;\r\n    font-weight: 600;\r\n    line-height: 1;\r\n}\r\n\r\n#sp-elci-gallery .sp-thumb-view {\r\n    display: block;\r\n    color: #777;\r\n    font-size: 8px;\r\n    font-weight: 600;\r\n    line-height: 1;\r\n}\r\n\r\n#sp-elci-gallery .sp-feature-thumb .sp-thumb-part {\r\n    visibility: hidden;\r\n}\r\n\r\n\/* =========================================================\r\nTHUMBNAIL ARROWS\r\n========================================================= *\/\r\n\r\n#sp-elci-gallery .sp-thumb-nav {\r\n    display: none;\r\n    width: 26px;\r\n    min-width: 26px;\r\n    height: 26px;\r\n    align-self: center;\r\n    padding: 0;\r\n    border: 0;\r\n    border-radius: 50%;\r\n    background: #fff;\r\n    color: #222;\r\n    font-family: Arial, sans-serif;\r\n    font-size: 16px;\r\n    line-height: 26px;\r\n    text-align: center;\r\n    cursor: pointer;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n}\r\n\r\n\/* =========================================================\r\nPAGINATION\r\n========================================================= *\/\r\n\r\n#sp-elci-gallery .sp-gallery-pagination {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 6px;\r\n    margin-top: 7px;\r\n}\r\n\r\n#sp-elci-gallery .sp-page-dot {\r\n    width: 6px;\r\n    height: 6px;\r\n    padding: 0;\r\n    border: 0;\r\n    border-radius: 50%;\r\n    background: #c7c7c7;\r\n    cursor: pointer;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    transition: background .2s ease, transform .2s ease;\r\n}\r\n\r\n#sp-elci-gallery .sp-page-dot:hover,\r\n#sp-elci-gallery .sp-page-dot.active {\r\n    background: var(--sp-orange);\r\n}\r\n\r\n#sp-elci-gallery .sp-page-dot.active {\r\n    transform: scale(1.25);\r\n}\r\n\r\n\/* =========================================================\r\nFULL SCREEN VIEW + HOVER ZOOM\r\n========================================================= *\/\r\n\r\n#sp-elci-gallery .sp-fullscreen-trigger {\r\n    position: static;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-top: 7px;\r\n    transform: none;\r\n    z-index: 10;\r\n    border: 1px solid #d7d7d7;\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    color: #333;\r\n    padding: 6px 11px;\r\n    font-family: \"Montserrat\", sans-serif;\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: .2px;\r\n    line-height: 1;\r\n    cursor: pointer;\r\n    white-space: nowrap;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    box-shadow: 0 1px 4px rgba(0,0,0,.08);\r\n    transition: border-color .18s ease, color .18s ease, background .18s ease;\r\n}\r\n\r\n#sp-elci-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\r\n    display: none;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-trigger:hover {\r\n    border-color: var(--sp-orange);\r\n    color: var(--sp-orange);\r\n}\r\n\r\n#sp-elci-gallery .sp-zoom-preview {\r\n    position: absolute;\r\n    top: 0;\r\n    left: calc(100% + 12px);\r\n    width: 78%;\r\n    height: 100%;\r\n    background: #fff;\r\n    border: 1px solid #e3e3e3;\r\n    border-radius: 8px;\r\n    box-shadow: 0 6px 20px rgba(0,0,0,.18);\r\n    overflow: hidden;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n    transition: opacity .12s ease, visibility .12s ease;\r\n}\r\n\r\n#sp-elci-gallery .sp-zoom-preview img {\r\n    position: absolute;\r\n    width: 200%;\r\n    height: 200%;\r\n    max-width: none;\r\n    object-fit: contain;\r\n    display: block;\r\n    pointer-events: none;\r\n    transform-origin: top left;\r\n}\r\n\r\n#sp-elci-gallery .sp-variant-image-wrap.sp-zoom-active .sp-zoom-preview {\r\n    opacity: 1;\r\n    visibility: visible;\r\n}\r\n\r\n\/* Full-screen product popup *\/\r\n#sp-elci-gallery .sp-fullscreen-modal {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 999999;\r\n    display: none;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 20px;\r\n    background: rgba(0,0,0,.38);\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-modal.is-open {\r\n    display: flex;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-dialog {\r\n    position: relative;\r\n\r\n    \/* =====================================================\r\n       FULL SCREEN POPUP SIZE \u2014 EDIT HERE\r\n       Change these values for the desktop popup size.\r\n       ===================================================== *\/\r\n    width: var(--sp-popup-width-desktop, 1100px);\r\n    height: var(--sp-popup-height-desktop, 520px);\r\n    max-width: calc(100vw - 30px);\r\n    max-height: calc(100vh - 40px);\r\n\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr);\r\n    gap: 28px;\r\n    padding: 24px 28px;\r\n    background: #fff;\r\n    border-radius: 7px;\r\n    box-shadow: 0 8px 35px rgba(0,0,0,.25);\r\n    overflow: hidden;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-close {\r\n    position: absolute;\r\n    top: 8px;\r\n    right: 10px;\r\n    width: 28px;\r\n    height: 28px;\r\n    padding: 0;\r\n    border: 0;\r\n    background: transparent;\r\n    color: #222;\r\n    font-family: Arial, sans-serif;\r\n    font-size: 24px;\r\n    line-height: 28px;\r\n    cursor: pointer;\r\n    z-index: 5;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-image-area {\r\n    min-width: 0;\r\n    min-height: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-image {\r\n    \/*\r\n     * Popup image size and position are controlled by the\r\n     * FULLSCREEN_CONTENT settings below.\r\n     *\/\r\n    width: var(--sp-popup-image-width-desktop, 100%);\r\n    height: var(--sp-popup-image-height-desktop, 100%);\r\n    max-width: none;\r\n    max-height: none;\r\n    object-fit: contain;\r\n    display: block;\r\n    transform: translate(\r\n        var(--sp-popup-image-x-desktop, 0px),\r\n        var(--sp-popup-image-y-desktop, 0px)\r\n    );\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-info {\r\n    min-width: 0;\r\n    padding: 8px 8px 8px 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    overflow-y: auto;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-kicker {\r\n    color: var(--sp-orange);\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: .7px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-title {\r\n    margin-top: 5px;\r\n    color: var(--sp-dark);\r\n    font-family: \"Bebas Neue\", sans-serif;\r\n    font-size: 31px;\r\n    line-height: 1;\r\n    letter-spacing: 1.5px;\r\n    font-weight: 700;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-description {\r\n    margin-top: 8px;\r\n    color: #666;\r\n    font-size: 12px;\r\n    line-height: 1.45;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-part-number {\r\n    margin-top: 8px;\r\n    color: #555;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: .5px;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-part-number strong {\r\n    color: var(--sp-dark);\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-amp-wrap {\r\n    display: none;\r\n    margin-top: 14px;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-amp-wrap.is-visible {\r\n    display: block;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-amp-label {\r\n    margin-bottom: 5px;\r\n    color: #777;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: .5px;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-amp-toggle {\r\n    display: flex;\r\n    width: 250px;\r\n    max-width: 100%;\r\n    border: 1px solid #d8d8d8;\r\n    border-radius: 6px;\r\n    overflow: hidden;\r\n    background: #fff;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-amp-btn {\r\n    flex: 1 1 50%;\r\n    min-height: 32px;\r\n    padding: 7px 10px;\r\n    border: 0;\r\n    background: #fff;\r\n    color: #333;\r\n    font-family: \"Montserrat\", sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    transition: background .18s ease, color .18s ease;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-amp-btn.active {\r\n    background: var(--sp-orange);\r\n    color: #fff;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-amp-btn:disabled {\r\n    background: #f2f2f2;\r\n    color: #aaa;\r\n    cursor: not-allowed;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-thumbnails {\r\n    width: 100%;\r\n    margin-top: 18px;\r\n    display: grid;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    gap: 8px;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-thumb {\r\n    width: 100%;\r\n    height: 72px;\r\n    padding: 4px;\r\n    border: 1px solid var(--sp-border);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-thumb.active {\r\n    border: 2px solid var(--sp-orange);\r\n}\r\n\r\n#sp-elci-gallery .sp-fullscreen-thumb img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n    display: block;\r\n}\r\n\r\n\/* =========================================================\r\nMOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    #sp-elci-gallery .sp-fullscreen-trigger {\r\n        position: static;\r\n        display: inline-flex;\r\n        margin-top: 6px;\r\n        transform: none;\r\n        font-size: 8px;\r\n        padding: 6px 10px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-zoom-preview {\r\n        display: none;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-modal {\r\n        padding: 8px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-dialog {\r\n        \/*\r\n         * FULL SCREEN POPUP SIZE \u2014 MOBILE EDIT HERE\r\n         *\/\r\n        width: var(--sp-popup-width-mobile, calc(100vw - 16px));\r\n        height: var(--sp-popup-height-mobile, 90vh);\r\n        max-width: calc(100vw - 16px);\r\n        max-height: calc(100vh - 16px);\r\n        min-height: 0;\r\n        grid-template-columns: 1fr;\r\n        gap: 8px;\r\n        padding: 18px 12px 12px;\r\n        border-radius: 8px;\r\n        box-shadow: 0 8px 30px rgba(0,0,0,.22);\r\n        overflow-y: auto;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-image-area {\r\n        height: var(--sp-popup-image-area-height-mobile, 54vh);\r\n        min-height: 260px;\r\n        overflow: hidden;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-image {\r\n        width: var(--sp-popup-image-width-mobile, 100%);\r\n        height: var(--sp-popup-image-height-mobile, 100%);\r\n        transform: translate(\r\n            var(--sp-popup-image-x-mobile, 0px),\r\n            var(--sp-popup-image-y-mobile, 0px)\r\n        );\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-info {\r\n        padding: 0 4px 4px;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-title {\r\n        font-size: 25px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-description {\r\n        font-size: 10px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-part-number {\r\n        font-size: 9px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-amp-wrap {\r\n        margin-top: 8px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-amp-label {\r\n        font-size: 9px;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-amp-toggle {\r\n        width: 250px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-amp-btn {\r\n        min-height: 30px;\r\n        padding: 6px 8px;\r\n        font-size: 10px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-thumbnails {\r\n        margin-top: 10px;\r\n        grid-template-columns: repeat(4, minmax(0, 1fr));\r\n        gap: 5px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-fullscreen-thumb {\r\n        height: 58px;\r\n    }\r\n\r\n    \/* =====================================================\r\n       MOBILE PRODUCT GALLERY\r\n       Compact Amazon-style vertical product layout\r\n       ===================================================== *\/\r\n\r\n    #sp-elci-gallery {\r\n        width: 100%;\r\n        max-width: 100%;\r\n        height: auto;\r\n        min-height: 0;\r\n        margin: 0 auto;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-main-view {\r\n        width: 100%;\r\n        height: auto;\r\n        min-height: 0;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-gallery-slide {\r\n        width: 100%;\r\n        height: auto;\r\n        min-height: 0;\r\n        display: none;\r\n        position: relative;\r\n        overflow: visible;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-gallery-slide.active {\r\n        display: flex;\r\n    }\r\n\r\n    \/* FEATURE IMAGE\r\n       The main\/features image uses the same responsive viewing frame. *\/\r\n    #sp-elci-gallery .sp-main-product {\r\n        width: 100%;\r\n        height: auto;\r\n        aspect-ratio: 3.3 \/ 3;\r\n        min-height: 0;\r\n        flex: 0 0 auto;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        order: 1;\r\n        position: relative;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-main-image-clip {\r\n        inset: 0;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-main-image-clip > img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n        transform:\r\n            translate(var(--image-x-mobile), var(--image-y-mobile))\r\n            scale(var(--image-scale-mobile));\r\n    }\r\n\r\n    \/* VARIANT LAYOUT *\/\r\n    #sp-elci-gallery .sp-variant-layout {\r\n        width: 100%;\r\n        height: auto;\r\n        min-height: 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n        gap: 0;\r\n    }\r\n\r\n    \/* Title at the top *\/\r\n    #sp-elci-gallery .sp-mobile-variant-title {\r\n        display: block;\r\n        width: 100%;\r\n        min-height: 46px;\r\n        padding: 0 8px;\r\n        text-align: center;\r\n        order: 1;\r\n        margin: 0;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-mobile-variant-title .sp-slide-kicker {\r\n        margin: 0;\r\n        font-size: 8px;\r\n        line-height: 1.1;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-mobile-variant-title .sp-slide-title {\r\n        margin: 2px 0 0;\r\n        font-size: 23px;\r\n        line-height: .95;\r\n        letter-spacing: .8px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-mobile-variant-title .sp-slide-subtitle {\r\n        margin: 3px 0 0;\r\n        font-size: 10px;\r\n        line-height: 1.2;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-side-info .sp-fullscreen-trigger {\r\n        display: inline-flex;\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\r\n        display: none;\r\n    }\r\n\r\n    \/* PRODUCT IMAGEEvery variation uses the responsive viewing frame. *\/\r\n    #sp-elci-gallery .sp-variant-image-wrap {\r\n        width: 100%;\r\n        height: auto;\r\n        aspect-ratio: 5 \/ 3;\r\n        min-height: 0;\r\n        flex: 0 0 auto;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        order: 2;\r\n        position: relative;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-variant-image-wrap img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n        display: block;\r\n        transform:\r\n            translate(var(--image-x-mobile), var(--image-y-mobile))\r\n            scale(var(--image-scale-mobile));\r\n        transform-origin: center center;\r\n        transition: opacity .16s ease, transform .18s ease;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-slide-info .sp-fullscreen-trigger {\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n\r\n    \/* PRODUCT INFORMATION \/ CONTROLS *\/\r\n    #sp-elci-gallery .sp-side-info {\r\n        width: 100%;\r\n        max-width: 100%;\r\n        height: auto;\r\n        min-height: 0;\r\n        padding: 0;\r\n        margin: 0;\r\n        text-align: center;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n        gap: 0;\r\n        order: 3;\r\n    }\r\n\r\n    \/* Hide duplicate desktop title. *\/\r\n    #sp-elci-gallery .sp-side-info .sp-slide-kicker,\r\n    #sp-elci-gallery .sp-side-info .sp-slide-title,\r\n    #sp-elci-gallery .sp-side-info .sp-slide-subtitle {\r\n        display: none;\r\n    }\r\n\r\n    \/* View selector label *\/\r\n    #sp-elci-gallery .sp-side-info .sp-amp-label {\r\n        display: block;\r\n        width: 100%;\r\n        margin: 0 0 4px;\r\n        color: #777;\r\n        font-size: 10px;\r\n        line-height: 1.1;\r\n        font-weight: 700;\r\n        letter-spacing: .5px;\r\n        text-align: center;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-side-info .sp-amp-toggle {\r\n        display: flex;\r\n        width: 180px;\r\n        max-height: none;\r\n        gap: 2px;\r\n        border: none;\r\n        background: transparent;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-side-info .sp-amp-btn {\r\n        width: 100%;\r\n        height: 35px;\r\n        min-height: 35px;\r\n        padding: 5px 10px;\r\n        font-size: 11px;\r\n    }\r\n\r\n    \/* Keep the existing view switching fully functional. *\/\r\n    #sp-elci-gallery .sp-side-info .sp-current-amp {\r\n        display: block;\r\n        width: 100%;\r\n        margin: 5px 0 0;\r\n        color: #666;\r\n        font-size: 11px;\r\n        line-height: 1.15;\r\n        text-align: center;\r\n    }\r\n\r\n    \/* Part number *\/\r\n    #sp-elci-gallery .sp-side-info .sp-part-number {\r\n        display: inline-block;\r\n        margin: 5px auto 0;\r\n        padding: 0;\r\n        color: #555;\r\n        font-size: 8px;\r\n        letter-spacing: .4px;\r\n        text-align: center;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-part-number strong {\r\n        color: var(--sp-dark);\r\n    }\r\n\r\n    \/* Reference-style product information layout:\r\n       no kicker; title\/subtitle first, selector below, then part number + full-screen button. *\/\r\n    #sp-elci-gallery .sp-side-info .sp-slide-kicker,\r\n    #sp-elci-gallery .sp-mobile-variant-title .sp-slide-kicker,\r\n    #sp-elci-gallery .sp-fullscreen-kicker {\r\n        display: none !important;\r\n    }\r\n\r\n    \/* Reference layout: no kicker; title\/subtitle, view selector,\r\n       showing state, then part number + Full Screen on one row. *\/\r\n    #sp-elci-gallery .sp-side-info .sp-view-current {\r\n        margin-top: 8px;\r\n        color: #555;\r\n        font-size: 12px;\r\n        line-height: 1.2;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-side-info .sp-view-current strong {\r\n        color: var(--sp-dark);\r\n    }\r\n\r\n    #sp-elci-gallery .sp-part-number-row {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n        gap: 7px;\r\n        width: 100%;\r\n        margin-top: 6px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-part-number-row .sp-part-number {\r\n        margin: 0;\r\n        text-align: left;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-part-number-row .sp-fullscreen-trigger {\r\n        margin: 0;\r\n        flex: 0 0 auto;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-side-info .sp-view-label {\r\n        margin-top: 13px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-side-info .sp-view-toggle {\r\n        margin-top: 5px;\r\n    }\r\n\r\n\r\n    #sp-elci-gallery .sp-variant-image.is-empty {\r\n        visibility: hidden;\r\n    }\r\n\r\n    \/* HOTSPOTS\r\n       Position remains JavaScript-calculated from the actual rendered image.\r\n       Only the existing mobile bubble scale is preserved here. *\/\r\n    #sp-elci-gallery .sp-hotspot {\r\n        top: var(--sp-hotspot-top-px, var(--top));\r\n        left: var(--sp-hotspot-left-px, var(--left));\r\n        transform:\r\n            translate(-50%, -50%)\r\n            scale(var(--hotspot-scale-mobile));\r\n    }\r\n\r\n    #sp-elci-gallery .sp-tooltip {\r\n        bottom: calc(100% + 7px - var(--tooltip-y-mobile));\r\n        left: calc(50% + var(--tooltip-x-mobile));\r\n        transform:\r\n            translateX(-50%)\r\n            scale(var(--tooltip-scale-mobile));\r\n        width: min(190px, calc(100vw - 22px));\r\n        padding: 8px;\r\n        font-size: 9px;\r\n    }\r\n\r\n    \/* MOBILE THUMBNAIL STRIP *\/\r\n    #sp-elci-gallery .sp-product-selector {\r\n        width: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 3px;\r\n        margin-top: 7px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-thumb-nav {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex: 0 0 26px;\r\n        width: 26px;\r\n        min-width: 26px;\r\n        height: 26px;\r\n        min-height: 26px;\r\n        padding: 0;\r\n        border: 0;\r\n        border-radius: 50%;\r\n        background: #fff;\r\n        color: #222;\r\n        font-size: 16px;\r\n        line-height: 26px;\r\n        cursor: pointer;\r\n        z-index: 3;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-thumbnails {\r\n        flex: 1 1 auto;\r\n        width: auto;\r\n        max-width: calc(100% - 58px);\r\n        min-width: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 4px;\r\n        overflow-x: auto;\r\n        overflow-y: hidden;\r\n        scroll-behavior: smooth;\r\n        scrollbar-width: none;\r\n        padding: 1px 0;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-thumbnails::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-thumb {\r\n        flex: 0 0 62px;\r\n        width: 62px;\r\n        min-width: 62px;\r\n        min-height: 75px;\r\n        height: 75px;\r\n        padding: 3px;\r\n        border: 1px solid var(--sp-border);\r\n        border-radius: 5px;\r\n        gap: 2px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-thumb.active {\r\n        border: 2px solid var(--sp-orange);\r\n    }\r\n\r\n    #sp-elci-gallery .sp-thumb-image {\r\n        width: 100%;\r\n        height: 45px;\r\n        min-height: 45px;\r\n        border-radius: 3px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-thumb-label {\r\n        font-size: 8px;\r\n        line-height: 1.05;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-thumb-part {\r\n        font-size: 7px;\r\n        line-height: 1;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-thumb-view {\r\n        font-size: 7px;\r\n        line-height: 1;\r\n    }\r\n\r\n    \/* PAGINATION *\/\r\n    #sp-elci-gallery .sp-gallery-pagination {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        gap: 5px;\r\n        margin-top: 4px;\r\n        height: 7px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-page-dot {\r\n        width: 6px;\r\n        height: 6px;\r\n    }\r\n\r\n    \/* LENGTH TOGGLE *\/\r\n    #sp-elci-gallery .sp-side-info .sp-amp-toggle {\r\n        width: 240px;\r\n        max-width: 240px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-side-info .sp-amp-btn {\r\n        min-width: 0;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    \/* LOCKED RESPONSIVE VIEWING FRAME *\/\r\n    #sp-elci-gallery .sp-main-view {\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-gallery-slide {\r\n        height: 100%;\r\n        min-height: 0;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-main-product,\r\n    #sp-elci-gallery .sp-variant-image-wrap {\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    \/* LOCKED IMAGE FRAME: image swaps never change the reserved viewing area *\/\r\n    #sp-elci-gallery .sp-variant-image-wrap img,\r\n    #sp-elci-gallery .sp-main-image-clip > img {\r\n        flex-shrink: 0;\r\n    }\r\n\r\n}\r\n\/* Elementor containers must not clip hotspot tooltips *\/\r\n.sp-gallery-overflow,\r\n.sp-gallery-overflow > .e-con,\r\n.sp-gallery-overflow > .elementor-widget-container {\r\n    overflow: visible !important;\r\n}\r\n\r\n\/* =========================================================\r\n   CHANGE LOG \u2014 MOBILE RESPONSIVE FIX\r\n   =========================================================\r\n   1. Removed the mobile side-info minimum height that created\r\n      excessive empty space above the thumbnail strip.\r\n   2. Added a fixed mobile title area so different title lengths\r\n      do not make the controls appear at different levels.\r\n   3. Added a compact, fixed mobile controls area so the\r\n      configuration, current selection, part number, and\r\n      Full Screen button stay evenly aligned between variations.\r\n   4. Reduced the spacing between the Full Screen button and\r\n      the thumbnail strip.\r\n   5. Kept the mobile image viewing frame fixed so image swaps\r\n      do not change the gallery layout.\r\n   ========================================================= *\/\r\n\r\n\/* DESKTOP \u2014 KEEP THE EXISTING FIXED VIEWING FRAME *\/\r\n#sp-elci-gallery .sp-main-view{height:430px;min-height:430px;}\r\n#sp-elci-gallery .sp-gallery-slide{height:100%;min-height:430px;}\r\n#sp-elci-gallery .sp-variant-layout{height:100%;min-height:0;}\r\n#sp-elci-gallery .sp-variant-image-wrap{height:400px;min-height:400px;flex:0 0 400px;}\r\n#sp-elci-gallery .sp-side-info{min-height:220px;max-width:360px;}\r\n#sp-elci-gallery .sp-amp-toggle{min-height:30px;height:30px;}\r\n#sp-elci-gallery .sp-fullscreen-trigger{display:inline-flex;position:static;margin-top:7px;}\r\n\r\n\/* MOBILE \u2014 FIXED TITLE \/ IMAGE \/ CONTROLS SPACING *\/\r\n@media (max-width:767px){\r\n    #sp-elci-gallery .sp-part-number-row{\r\n        justify-content:center;\r\n        gap:6px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-part-number-row .sp-part-number{\r\n        text-align:center;\r\n    }\r\n\r\n\r\n    #sp-elci-gallery .sp-main-view{\r\n        height:auto;\r\n        min-height:0;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-gallery-slide{\r\n        height:auto;\r\n        min-height:0;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-variant-layout{\r\n        height:auto;\r\n        min-height:0;\r\n    }\r\n\r\n    \/* Keep every variation on the same image viewing frame. *\/\r\n    #sp-elci-gallery .sp-variant-image-wrap{\r\n        height:auto;\r\n        min-height:0;\r\n        flex:0 0 auto;\r\n        aspect-ratio:5 \/ 3;\r\n    }\r\n\r\n    \/* Reserve the same title space for every variation. *\/\r\n    #sp-elci-gallery .sp-mobile-variant-title{\r\n        height:70px;\r\n        min-height:70px;\r\n        max-height:70px;\r\n        overflow:hidden;\r\n        display:block;\r\n    }\r\n\r\n    \/* Keep the product controls aligned at the same level. *\/\r\n    #sp-elci-gallery .sp-side-info{\r\n        height:112px;\r\n        min-height: 112px;\r\n        max-height: 112px;\r\n        overflow:visible;\r\n        justify-content:flex-start;\r\n    }\r\n\r\n    \/* Keep the configuration label and buttons compact. *\/\r\n    #sp-elci-gallery .sp-side-info .sp-amp-label{\r\n        margin:0 0 4px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-side-info .sp-amp-toggle{\r\n        height:35px;\r\n        min-height:35px;\r\n        flex:0 0 35px;\r\n    }\r\n\r\n    \/* Tighten the information below the configuration buttons. *\/\r\n    #sp-elci-gallery .sp-side-info .sp-current-amp{\r\n        margin:3px 0 0;\r\n        line-height:1.1;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-side-info .sp-view-current{\r\n        font-size:11px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-side-info .sp-part-number{\r\n        margin:0;\r\n        line-height:1.05;\r\n    }\r\n\r\n    \/* Mobile reference layout: part number centered, Full Screen centered below it. *\/\r\n    #sp-elci-gallery .sp-side-info .sp-part-number-row{\r\n        width:100%;\r\n        display:flex;\r\n        flex-direction:column;\r\n        align-items:center;\r\n        justify-content:flex-start;\r\n        gap:3px;\r\n        margin-top:5px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-side-info .sp-part-number-row .sp-part-number{\r\n        width:100%;\r\n        margin:0;\r\n        text-align:center;\r\n        line-height:1.05;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-side-info .sp-part-number-row .sp-fullscreen-trigger{\r\n        margin:0 auto;\r\n        align-self:center;\r\n    }\r\n\r\n    \/* Reduce the gap between product details and thumbnails. *\/\r\n    #sp-elci-gallery .sp-product-selector{\r\n        margin-top:2px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-gallery-pagination{\r\n        margin-top:3px;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-thumbnails{\r\n        justify-content:center;\r\n    }\r\n\r\n    \/* Mobile breaker view selector: exactly two centered buttons. *\/\r\n    #sp-elci-gallery .sp-variant-slide[data-variant=\"breaker\"] .sp-amp-toggle{\r\n        display:grid;\r\n        grid-template-columns:repeat(2, minmax(0, 1fr));\r\n        grid-template-rows:35px;\r\n        width:240px;\r\n        max-width:100%;\r\n        margin-left:auto;\r\n        margin-right:auto;\r\n    }\r\n\r\n    #sp-elci-gallery .sp-variant-slide .sp-amp-btn{\r\n        width:100%;\r\n        min-width:0;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n    function initSmartPlugELCIGallery() {\r\n        const gallery = document.getElementById(\"sp-elci-gallery\");\r\n        if (!gallery || gallery.dataset.initialized === \"true\") return;\r\n        gallery.dataset.initialized = \"true\";\r\n\r\n        const slides = gallery.querySelectorAll(\".sp-gallery-slide\");\r\n        const thumbs = gallery.querySelectorAll(\".sp-thumb\");\r\n        const hotspots = gallery.querySelectorAll(\".sp-hotspot\");\r\n        const pageDots = gallery.querySelectorAll(\".sp-page-dot\");\r\n        const variantSlides = gallery.querySelectorAll(\".sp-variant-slide\");\r\n        const viewButtons = gallery.querySelectorAll(\".sp-view-btn\");\r\n        const thumbnailContainer = gallery.querySelector(\".sp-thumbnails\");\r\n        const thumbPrev = gallery.querySelector(\".sp-thumb-prev\");\r\n        const thumbNext = gallery.querySelector(\".sp-thumb-next\");\r\n\r\n        if (!slides.length || !thumbs.length) return;\r\n\r\n        let currentIndex = 0;\r\n\r\n        \/* =================================================\r\n        RESPONSIVE HOTSPOT POSITIONING\r\n        Maps one canonical hotspot anchor to the actual\r\n        rendered image produced by object-fit: contain,\r\n        including inherited image scale and X\/Y settings.\r\n        ================================================= *\/\r\n        function readCssNumber(element, name, fallback) {\r\n            if (!element) return fallback;\r\n\r\n            const inlineValue = element.style.getPropertyValue(name).trim();\r\n            if (inlineValue) {\r\n                const inlineNumber = parseFloat(inlineValue);\r\n                if (Number.isFinite(inlineNumber)) return inlineNumber;\r\n            }\r\n\r\n            const computedValue = getComputedStyle(element).getPropertyValue(name).trim();\r\n            if (computedValue) {\r\n                const computedNumber = parseFloat(computedValue);\r\n                if (Number.isFinite(computedNumber)) return computedNumber;\r\n            }\r\n\r\n            return fallback;\r\n        }\r\n\r\n        function syncFeatureHotspots() {\r\n\r\n            const featureSlide = slides[0];\r\n            if (!featureSlide) return;\r\n\r\n            const wrapper = featureSlide.querySelector(\r\n                \".sp-main-product.sp-hotspot-image\"\r\n            );\r\n\r\n            const clip = featureSlide.querySelector(\r\n                \".sp-main-image-clip\"\r\n            );\r\n\r\n            const image = featureSlide.querySelector(\r\n                \".sp-main-image-clip > img\"\r\n            );\r\n\r\n            const featureHotspots = featureSlide.querySelectorAll(\r\n                \".sp-hotspot\"\r\n            );\r\n\r\n            if (\r\n                !wrapper ||\r\n                !clip ||\r\n                !image ||\r\n                !featureHotspots.length\r\n            ) return;\r\n\r\n            if (!image.naturalWidth || !image.naturalHeight) return;\r\n\r\n            const wrapRect = wrapper.getBoundingClientRect();\r\n            const clipRect = clip.getBoundingClientRect();\r\n\r\n            if (\r\n                !wrapRect.width ||\r\n                !wrapRect.height ||\r\n                !clipRect.width ||\r\n                !clipRect.height\r\n            ) return;\r\n\r\n            \/*\r\n             * Match this gallery's existing image CSS breakpoint:\r\n             * <=767px uses the mobile image settings; above it uses desktop.\r\n             * No separate hotspot breakpoint coordinates are used.\r\n             *\/\r\n            const mobile = window.matchMedia(\r\n                \"(max-width: 767px)\"\r\n            ).matches;\r\n\r\n            const x = readCssNumber(\r\n                image,\r\n                mobile ? \"--image-x-mobile\" : \"--image-x-desktop\",\r\n                0\r\n            );\r\n\r\n            const y = readCssNumber(\r\n                image,\r\n                mobile ? \"--image-y-mobile\" : \"--image-y-desktop\",\r\n                0\r\n            );\r\n\r\n            const scale = Math.max(\r\n                0.0001,\r\n                readCssNumber(\r\n                    image,\r\n                    mobile ? \"--image-scale-mobile\" : \"--image-scale-desktop\",\r\n                    1\r\n                )\r\n            );\r\n\r\n            const imageRatio =\r\n                image.naturalWidth \/ image.naturalHeight;\r\n\r\n            const boxRatio =\r\n                clipRect.width \/ clipRect.height;\r\n\r\n            let width;\r\n            let height;\r\n\r\n            if (imageRatio > boxRatio) {\r\n                width = clipRect.width;\r\n                height = width \/ imageRatio;\r\n            } else {\r\n                height = clipRect.height;\r\n                width = height * imageRatio;\r\n            }\r\n\r\n            \/* Apply the same transform geometry as the rendered image. *\/\r\n            width *= scale;\r\n            height *= scale;\r\n\r\n            \/*\r\n             * Hotspots are positioned relative to the product wrapper,\r\n             * while the image itself is rendered inside the clip.\r\n             * Convert the actual image position into wrapper-local pixels.\r\n             *\/\r\n            const imageLeft =\r\n                (clipRect.left - wrapRect.left) +\r\n                (clipRect.width - width) \/ 2 +\r\n                x;\r\n\r\n            const imageTop =\r\n                (clipRect.top - wrapRect.top) +\r\n                (clipRect.height - height) \/ 2 +\r\n                y;\r\n\r\n            featureHotspots.forEach(function (hotspot) {\r\n\r\n                const top = readCssNumber(\r\n                    hotspot,\r\n                    \"--top\",\r\n                    NaN\r\n                );\r\n\r\n                const left = readCssNumber(\r\n                    hotspot,\r\n                    \"--left\",\r\n                    NaN\r\n                );\r\n\r\n                const hotspotX = readCssNumber(\r\n                    hotspot,\r\n                    \"--hotspot-x\",\r\n                    0\r\n                );\r\n\r\n                const hotspotY = readCssNumber(\r\n                    hotspot,\r\n                    \"--hotspot-y\",\r\n                    0\r\n                );\r\n\r\n                if (!Number.isFinite(top) || !Number.isFinite(left)) return;\r\n\r\n                hotspot.style.setProperty(\r\n                    \"--sp-hotspot-left-px\",\r\n                    imageLeft + (width * left \/ 100) + hotspotX + \"px\"\r\n                );\r\n\r\n                hotspot.style.setProperty(\r\n                    \"--sp-hotspot-top-px\",\r\n                    imageTop + (height * top \/ 100) + hotspotY + \"px\"\r\n                );\r\n\r\n                hotspot.dataset.responsiveZone =\r\n                    mobile ? \"mobile\" : \"desktop\";\r\n            });\r\n        }\r\n\r\n        let hotspotFrame = null;\r\n\r\n        function scheduleFeatureHotspotSync() {\r\n            if (hotspotFrame) cancelAnimationFrame(hotspotFrame);\r\n\r\n            hotspotFrame = requestAnimationFrame(function () {\r\n                hotspotFrame = null;\r\n                syncFeatureHotspots();\r\n            });\r\n        }\r\n\r\n        function showSlide(index) {\r\n            if (index < 0) index = slides.length - 1;\r\n            if (index >= slides.length) index = 0;\r\n\r\n            slides.forEach(function (slide, i) {\r\n                slide.classList.toggle(\"active\", i === index);\r\n            });\r\n\r\n            thumbs.forEach(function (thumb) {\r\n                const target = parseInt(thumb.getAttribute(\"data-target\"), 10);\r\n                thumb.classList.toggle(\"active\", target === index);\r\n            });\r\n\r\n            pageDots.forEach(function (dot, i) {\r\n                dot.classList.toggle(\"active\", i === index);\r\n            });\r\n\r\n            currentIndex = index;\r\n            scheduleFeatureHotspotSync();\r\n\r\n            if (index === 0) {\r\n                updateFeatureText();\r\n            } else {\r\n                const activeVariant = slides[index];\r\n                if (activeVariant) {\r\n                    updateVariantText(activeVariant);\r\n                }\r\n            }\r\n\r\n            const activeThumb = Array.from(thumbs).find(function (thumb) {\r\n                return parseInt(thumb.getAttribute(\"data-target\"), 10) === index;\r\n            });\r\n\r\n            if (activeThumb && thumbnailContainer) {\r\n                const left = activeThumb.offsetLeft;\r\n                const right = left + activeThumb.offsetWidth;\r\n                const viewLeft = thumbnailContainer.scrollLeft;\r\n                const viewRight = viewLeft + thumbnailContainer.clientWidth;\r\n\r\n                if (left < viewLeft || right > viewRight) {\r\n                    thumbnailContainer.scrollTo({\r\n                        left: left - (thumbnailContainer.clientWidth \/ 2) + (activeThumb.offsetWidth \/ 2),\r\n                        behavior: \"smooth\"\r\n                    });\r\n                }\r\n            }\r\n\r\n            hotspots.forEach(function (hotspot) {\r\n                hotspot.classList.remove(\"is-open\");\r\n            });\r\n        }\r\n\r\n        thumbs.forEach(function (thumb) {\r\n            thumb.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n\r\n                const target = parseInt(thumb.getAttribute(\"data-target\"), 10);\r\n                if (!isNaN(target)) showSlide(target);\r\n            });\r\n        });\r\n\r\n        pageDots.forEach(function (dot) {\r\n            dot.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n\r\n                const target = parseInt(dot.getAttribute(\"data-page\"), 10);\r\n                if (!isNaN(target)) showSlide(target);\r\n            });\r\n        });\r\n\r\n        function scrollThumbnailStrip(direction) {\r\n            if (!thumbnailContainer || !window.matchMedia(\"(max-width: 600px)\").matches) return;\r\n\r\n            const items = Array.from(thumbnailContainer.querySelectorAll(\".sp-thumb\"));\r\n            if (!items.length) return;\r\n\r\n            let activeIndex = items.findIndex(function (thumb) {\r\n                return thumb.classList.contains(\"active\");\r\n            });\r\n\r\n            if (activeIndex < 0) activeIndex = 0;\r\n\r\n            let targetIndex = activeIndex + (direction > 0 ? 1 : -1);\r\n            if (targetIndex < 0) targetIndex = items.length - 1;\r\n            if (targetIndex >= items.length) targetIndex = 0;\r\n\r\n            items[targetIndex].click();\r\n            items[targetIndex].scrollIntoView({\r\n                behavior: \"smooth\",\r\n                block: \"nearest\",\r\n                inline: \"center\"\r\n            });\r\n        }\r\n\r\n        if (thumbPrev) {\r\n            thumbPrev.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n                scrollThumbnailStrip(-1);\r\n            });\r\n        }\r\n\r\n        if (thumbNext) {\r\n            thumbNext.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n                scrollThumbnailStrip(1);\r\n            });\r\n        }\r\n\r\n        hotspots.forEach(function (hotspot) {\r\n            hotspot.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n\r\n                const isOpen = hotspot.classList.contains(\"is-open\");\r\n\r\n                hotspots.forEach(function (item) {\r\n                    item.classList.remove(\"is-open\");\r\n                });\r\n\r\n                if (!isOpen) hotspot.classList.add(\"is-open\");\r\n            });\r\n        });\r\n\r\n        document.addEventListener(\"click\", function (event) {\r\n            if (!gallery.contains(event.target)) {\r\n                hotspots.forEach(function (hotspot) {\r\n                    hotspot.classList.remove(\"is-open\");\r\n                });\r\n            }\r\n        });\r\n\r\n        \/* =================================================\r\n           PRODUCT TITLE \/ SUBTITLE \/ PART NUMBER\r\n           ================================================= *\/\r\n\r\n        function updateVariantText(slide, view) {\r\n            if (!slide) return;\r\n\r\n            const title = slide.querySelector(\".sp-mobile-variant-title .sp-slide-title\");\r\n            const subtitle = slide.querySelector(\".sp-mobile-variant-title .sp-slide-subtitle\");\r\n            const desktopTitle = slide.querySelector(\".sp-side-info .sp-slide-title\");\r\n            const desktopSubtitle = slide.querySelector(\".sp-side-info .sp-slide-subtitle\");\r\n            const partNumber = slide.querySelector(\".sp-part-number-value\");\r\n            const showing = slide.querySelector(\".sp-view-current strong\");\r\n            const activeView = view || slide.dataset.currentView || \"front\";\r\n            const displayTitle = getBreakerViewTitle(activeView);\r\n\r\n            if (title) title.textContent = displayTitle;\r\n            if (subtitle) subtitle.textContent = \"Non-Metallic - White\";\r\n            if (desktopTitle) desktopTitle.textContent = displayTitle;\r\n            if (desktopSubtitle) desktopSubtitle.textContent = \"Non-Metallic - White\";\r\n            if (partNumber) partNumber.textContent = slide.getAttribute(\"data-Breaker-part-number\") || \"\";\r\n            if (showing) showing.textContent = activeView === \"side\" ? \"Side\" : \"Front\";\r\n        }\r\n\r\n        function updateFeatureText() {\r\n            const featureSlide = slides[0];\r\n            if (!featureSlide) return;\r\n\r\n            const title = featureSlide.querySelector(\".sp-slide-info .sp-slide-title\");\r\n            const subtitle = featureSlide.querySelector(\".sp-slide-info .sp-slide-subtitle\");\r\n\r\n            if (title) title.textContent = \"KEY FEATURES\";\r\n            if (subtitle) subtitle.textContent = \"Click the numbered points to explore the ELCI Breakers\";\r\n        }\r\n\r\n        \/* =================================================\r\n           FIXED BREAKER VARIANT \u2014 FRONT \/ SIDE VIEW\r\n           Both views use the same part number.\r\n           ================================================= *\/\r\n\r\n        function getBreakerViewImage(slide, view) {\r\n            if (!slide) return \"\";\r\n            if (view === \"side\") {\r\n                return slide.getAttribute(\"data-Breaker-side\") || \"\";\r\n            }\r\n            return slide.getAttribute(\"data-Breaker\") || \"\";\r\n        }\r\n\r\n        function getBreakerViewTitle(view) {\r\n            return view === \"side\" ? \"ELCI BREAKER - SIDE\" : \"ELCI BREAKER\";\r\n        }\r\n\r\n        function setNormalViewButtonState(slide, view) {\r\n            viewButtons.forEach(function (button) {\r\n                const isForSlide = button.closest(\".sp-variant-slide\") === slide;\r\n                if (isForSlide || !button.closest(\".sp-variant-slide\")) {\r\n                    button.classList.toggle(\"active\", button.getAttribute(\"data-view\") === view);\r\n                }\r\n            });\r\n        }\r\n\r\n        variantSlides.forEach(function (slide) {\r\n            const image = slide.querySelector(\".sp-variant-image\");\r\n            if (!image) return;\r\n\r\n            slide.dataset.currentView = \"front\";\r\n\r\n            function updateImage() {\r\n                const view = slide.dataset.currentView || \"front\";\r\n                const source = getBreakerViewImage(slide, view);\r\n                const title = getBreakerViewTitle(view);\r\n\r\n                updateVariantText(slide, view);\r\n\r\n                image.style.opacity = \"0\";\r\n\r\n                window.setTimeout(function () {\r\n                    if (source) {\r\n                        image.src = source;\r\n                        image.alt = title;\r\n                        image.classList.remove(\"is-empty\");\r\n                    } else {\r\n                        image.removeAttribute(\"src\");\r\n                        image.classList.add(\"is-empty\");\r\n                    }\r\n\r\n                    image.style.opacity = \"1\";\r\n                    setNormalViewButtonState(slide, view);\r\n\r\n                    if (fullscreenModal.classList.contains(\"is-open\")) {\r\n                        refreshFullscreenModal();\r\n                    }\r\n                }, 90);\r\n            }\r\n\r\n            function setView(view) {\r\n                const nextView = view === \"side\" ? \"side\" : \"front\";\r\n                slide.dataset.currentView = nextView;\r\n                updateImage();\r\n            }\r\n\r\n            slide._setView = setView;\r\n            setView(\"front\");\r\n        });\r\n\r\n        viewButtons.forEach(function (button) {\r\n            button.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n\r\n                const slide = button.closest(\".sp-variant-slide\");\r\n                if (!slide || typeof slide._setView !== \"function\") return;\r\n\r\n                slide._setView(button.getAttribute(\"data-view\") || \"front\");\r\n            });\r\n        });\r\n\r\n        \/* =================================================\r\n           VIEW FULL SCREEN + HOVER ZOOM\r\n           ================================================= *\/\r\n           \r\n        const fullscreenModal = document.createElement(\"div\");\r\n        fullscreenModal.className = \"sp-fullscreen-modal\";\r\n        fullscreenModal.setAttribute(\"aria-hidden\", \"true\");\r\n        fullscreenModal.innerHTML = `\r\n            <div class=\"sp-fullscreen-dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Product full screen view\">\r\n                <button type=\"button\" class=\"sp-fullscreen-close\" aria-label=\"Close full screen\">&times;<\/button>\r\n                <div class=\"sp-fullscreen-image-area\">\r\n                    <img class=\"sp-fullscreen-image\" alt=\"\">\r\n                <\/div>\r\n                <div class=\"sp-fullscreen-info\">\r\n                    <div class=\"sp-fullscreen-title\"><\/div>\r\n                    <div class=\"sp-fullscreen-description\"><\/div>\r\n                    <div class=\"sp-fullscreen-part-number\">PART NUMBER: <strong class=\"sp-fullscreen-part-number-value\"><\/strong><\/div>\r\n                    <div class=\"sp-fullscreen-amp-wrap sp-fullscreen-view-wrap\">\r\n                        <div class=\"sp-fullscreen-amp-label\">SELECT VIEW<\/div>\r\n                        <div class=\"sp-fullscreen-amp-toggle\" role=\"group\" aria-label=\"Select breaker view\">\r\n                            <button type=\"button\" class=\"sp-fullscreen-amp-btn sp-fullscreen-view-btn active\" data-view=\"front\">Front<\/button>\r\n                            <button type=\"button\" class=\"sp-fullscreen-amp-btn sp-fullscreen-view-btn\" data-view=\"side\">Side<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"sp-fullscreen-thumbnails\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n\r\n        gallery.appendChild(fullscreenModal);\r\n\r\n        const fullscreenImage = fullscreenModal.querySelector(\".sp-fullscreen-image\");\r\n        const fullscreenTitle = fullscreenModal.querySelector(\".sp-fullscreen-title\");\r\n        const fullscreenDescription = fullscreenModal.querySelector(\".sp-fullscreen-description\");\r\n        const fullscreenPartNumber = fullscreenModal.querySelector(\".sp-fullscreen-part-number-value\");\r\n        const fullscreenThumbs = fullscreenModal.querySelector(\".sp-fullscreen-thumbnails\");\r\n        const fullscreenViewWrap = fullscreenModal.querySelector(\".sp-fullscreen-view-wrap\");\r\n        const fullscreenViewButtons = fullscreenModal.querySelectorAll(\".sp-fullscreen-view-btn\");\r\n        const fullscreenClose = fullscreenModal.querySelector(\".sp-fullscreen-close\");\r\n\r\n        \/* =================================================\r\n           FEATURE IMAGE \u2014 NORMAL VIEW \/ FULL SCREEN VIEW\r\n           Normal view and full screen use separate images.\r\n           ================================================= *\/\r\n        const FEATURE_FULLSCREEN_IMAGE = \"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30A-50A-ELCI-Sensor.png\";\r\n\r\n        function getActiveGalleryImage() {\r\n            const activeSlide = slides[currentIndex];\r\n            if (!activeSlide) return null;\r\n\r\n            if (currentIndex === 0) {\r\n                return activeSlide.querySelector(\".sp-main-image-clip img\");\r\n            }\r\n\r\n            return activeSlide.querySelector(\".sp-variant-image\");\r\n        }\r\n\r\n        function getActiveGalleryCopy() {\r\n            const activeSlide = slides[currentIndex];\r\n            if (!activeSlide) {\r\n                return {\r\n                    title: \"\",\r\n                    description: \"\",\r\n                    partNumber: \"\"\r\n                };\r\n            }\r\n\r\n            if (activeSlide.classList.contains(\"sp-variant-slide\")) {\r\n                const view = activeSlide.dataset.currentView || \"front\";\r\n                return {\r\n                    title: getBreakerViewTitle(view),\r\n                    description: \"Non-Metallic - White\",\r\n                    partNumber: activeSlide.getAttribute(\"data-Breaker-part-number\") || \"\"\r\n                };\r\n            }\r\n\r\n            const title = activeSlide.querySelector(\".sp-slide-title\");\r\n            const subtitle = activeSlide.querySelector(\".sp-slide-subtitle\");\r\n\r\n            return {\r\n                title: title ? title.textContent.trim() : \"\",\r\n                description: subtitle ? subtitle.textContent.trim() : \"\",\r\n                partNumber: \"\"\r\n            };\r\n        }\r\n\r\n        function applyFullscreenSettings() {\r\n            const dialog = fullscreenModal.querySelector(\".sp-fullscreen-dialog\");\r\n            if (!dialog) return;\r\n\r\n            dialog.style.setProperty(\"--sp-popup-width-desktop\", \"1100px\");\r\n            dialog.style.setProperty(\"--sp-popup-height-desktop\", \"520px\");\r\n            dialog.style.setProperty(\"--sp-popup-width-mobile\", \"calc(100vw - 16px)\");\r\n            dialog.style.setProperty(\"--sp-popup-height-mobile\", \"90vh\");\r\n            dialog.style.setProperty(\"--sp-popup-image-area-height-mobile\", \"54vh\");\r\n\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-width-desktop\", \"100%\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-height-desktop\", \"100%\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-x-desktop\", \"0px\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-y-desktop\", \"0px\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-width-mobile\", \"100%\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-height-mobile\", \"100%\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-x-mobile\", \"0px\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-y-mobile\", \"0px\");\r\n        }\r\n\r\n        function refreshFullscreenModal() {\r\n            const activeImage = getActiveGalleryImage();\r\n            if (!activeImage || !activeImage.src) return;\r\n\r\n            const copy = getActiveGalleryCopy();\r\n            const activeSlide = slides[currentIndex];\r\n            const isVariation = currentIndex >= 1 && activeSlide;\r\n            const breakerView = isVariation ? (activeSlide.dataset.currentView || \"front\") : \"front\";\r\n            const viewImage = isVariation\r\n                ? getBreakerViewImage(activeSlide, breakerView)\r\n                : FEATURE_FULLSCREEN_IMAGE;\r\n\r\n            applyFullscreenSettings();\r\n\r\n            fullscreenImage.src = viewImage || activeImage.currentSrc || activeImage.src;\r\n            fullscreenImage.alt = copy.title || activeImage.alt || \"\";\r\n            fullscreenTitle.textContent = copy.title || \"\";\r\n            fullscreenDescription.textContent = copy.description || \"\";\r\n\r\n            \/* The Feature slide does not have a part number.\r\n               Variation slides keep their part numbers. *\/\r\n            if (fullscreenPartNumber) {\r\n                fullscreenPartNumber.textContent = isVariation ? (copy.partNumber || \"\") : \"\";\r\n                fullscreenPartNumber.parentElement.style.display = isVariation ? \"\" : \"none\";\r\n            }\r\n\r\n            if (fullscreenViewWrap) {\r\n                fullscreenViewWrap.style.display = isVariation ? \"block\" : \"none\";\r\n            }\r\n\r\n            fullscreenViewButtons.forEach(function (button) {\r\n                button.classList.toggle(\r\n                    \"active\",\r\n                    isVariation && button.getAttribute(\"data-view\") === breakerView\r\n                );\r\n            });\r\n\r\n            fullscreenThumbs.innerHTML = \"\";\r\n\r\n            thumbs.forEach(function (thumb) {\r\n                const sourceImage = thumb.querySelector(\"img\");\r\n                if (!sourceImage) return;\r\n\r\n                const modalThumb = document.createElement(\"button\");\r\n                modalThumb.type = \"button\";\r\n                modalThumb.className = \"sp-fullscreen-thumb\";\r\n                modalThumb.setAttribute(\"aria-label\", thumb.getAttribute(\"aria-label\") || \"View product image\");\r\n\r\n                const modalThumbImage = document.createElement(\"img\");\r\n                modalThumbImage.src = sourceImage.currentSrc || sourceImage.src;\r\n                modalThumbImage.alt = sourceImage.alt || \"\";\r\n                modalThumb.appendChild(modalThumbImage);\r\n\r\n                const thumbTarget = parseInt(thumb.getAttribute(\"data-target\"), 10);\r\n                if (thumbTarget === currentIndex) modalThumb.classList.add(\"active\");\r\n\r\n                modalThumb.addEventListener(\"click\", function (event) {\r\n                    event.preventDefault();\r\n                    event.stopPropagation();\r\n\r\n                    showSlide(thumbTarget);\r\n                    window.setTimeout(refreshFullscreenModal, 110);\r\n                });\r\n\r\n                fullscreenThumbs.appendChild(modalThumb);\r\n            });\r\n        }\r\n\r\n        fullscreenViewButtons.forEach(function (button) {\r\n            button.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n\r\n                const activeSlide = slides[currentIndex];\r\n                if (!activeSlide || !activeSlide.classList.contains(\"sp-variant-slide\")) return;\r\n\r\n                \/* Use the same view-switching function as the normal gallery.\r\n                   This keeps the normal and full-screen toggle states synchronized. *\/\r\n                if (typeof activeSlide._setView === \"function\") {\r\n                    activeSlide._setView(button.getAttribute(\"data-view\") || \"front\");\r\n                }\r\n            });\r\n        });\r\n\r\n        let fullscreenScrollTop = 0;\r\n        let fullscreenScrollLeft = 0;\r\n        let fullscreenBodyPaddingRight = \"\";\r\n\r\n        function openFullscreenModal() {\r\n            refreshFullscreenModal();\r\n\r\n            fullscreenScrollTop = window.scrollY || window.pageYOffset || 0;\r\n            fullscreenScrollLeft = window.scrollX || window.pageXOffset || 0;\r\n            fullscreenBodyPaddingRight = document.body.style.paddingRight;\r\n\r\n            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\r\n            if (scrollbarWidth > 0) {\r\n                document.body.style.paddingRight = scrollbarWidth + \"px\";\r\n            }\r\n\r\n            fullscreenModal.classList.add(\"is-open\");\r\n            fullscreenModal.setAttribute(\"aria-hidden\", \"false\");\r\n            document.body.style.overflow = \"hidden\";\r\n        }\r\n\r\n        function closeFullscreenModal() {\r\n            fullscreenModal.classList.remove(\"is-open\");\r\n            fullscreenModal.setAttribute(\"aria-hidden\", \"true\");\r\n            document.body.style.overflow = \"\";\r\n            document.body.style.paddingRight = fullscreenBodyPaddingRight;\r\n\r\n            window.scrollTo({\r\n                top: fullscreenScrollTop,\r\n                left: fullscreenScrollLeft,\r\n                behavior: \"auto\"\r\n            });\r\n        }\r\n\r\n        fullscreenClose.addEventListener(\"click\", function (event) {\r\n            event.preventDefault();\r\n            closeFullscreenModal();\r\n        });\r\n\r\n        fullscreenModal.addEventListener(\"click\", function (event) {\r\n            if (event.target === fullscreenModal) closeFullscreenModal();\r\n        });\r\n\r\n        document.addEventListener(\"keydown\", function (event) {\r\n            if (event.key === \"Escape\" && fullscreenModal.classList.contains(\"is-open\")) {\r\n                closeFullscreenModal();\r\n            }\r\n        });\r\n\r\n        function addFullscreenButtons() {\r\n            const featureWrap = gallery.querySelector(\".sp-main-product\");\r\n\r\n            if (featureWrap && !featureWrap.closest(\".sp-gallery-slide\").querySelector(\".sp-fullscreen-trigger\")) {\r\n                const button = document.createElement(\"button\");\r\n                button.type = \"button\";\r\n                button.className = \"sp-fullscreen-trigger\";\r\n                button.textContent = \"View Full Screen\";\r\n                button.addEventListener(\"click\", function (event) {\r\n                    event.preventDefault();\r\n                    event.stopPropagation();\r\n                    openFullscreenModal();\r\n                });\r\n\r\n                const featureInfo = featureWrap.closest(\".sp-gallery-slide\").querySelector(\".sp-slide-info\");\r\n                if (featureInfo) {\r\n                    featureInfo.appendChild(button);\r\n                } else {\r\n                    featureWrap.appendChild(button);\r\n                }\r\n            }\r\n\r\n            variantSlides.forEach(function (slide) {\r\n                const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\r\n                if (!imageWrap || slide.querySelector(\".sp-fullscreen-trigger\")) return;\r\n\r\n                const button = document.createElement(\"button\");\r\n                button.type = \"button\";\r\n                button.className = \"sp-fullscreen-trigger\";\r\n                button.textContent = \"View Full Screen\";\r\n                button.addEventListener(\"click\", function (event) {\r\n                    event.preventDefault();\r\n                    event.stopPropagation();\r\n                    openFullscreenModal();\r\n                });\r\n\r\n                const sideInfo = slide.querySelector(\".sp-side-info\");\r\n\r\n                if (sideInfo) {\r\n                    const partNumberRow = sideInfo.querySelector(\".sp-part-number-row\");\r\n                    const partNumber = sideInfo.querySelector(\".sp-part-number\");\r\n\r\n                    if (partNumberRow && partNumber) {\r\n                        partNumberRow.appendChild(button);\r\n                    } else if (partNumber) {\r\n                        partNumber.insertAdjacentElement(\"afterend\", button);\r\n                    } else {\r\n                        sideInfo.appendChild(button);\r\n                    }\r\n                } else {\r\n                    imageWrap.appendChild(button);\r\n                }\r\n            });\r\n        }\r\n\r\n        function setupHoverZoom() {\r\n            variantSlides.forEach(function (slide) {\r\n                const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\r\n                const image = slide.querySelector(\".sp-variant-image\");\r\n                if (!imageWrap || !image || imageWrap.dataset.zoomInitialized === \"true\") return;\r\n\r\n                imageWrap.dataset.zoomInitialized = \"true\";\r\n\r\n                const preview = document.createElement(\"div\");\r\n                preview.className = \"sp-zoom-preview\";\r\n\r\n                const previewImage = document.createElement(\"img\");\r\n                previewImage.alt = \"\";\r\n                preview.appendChild(previewImage);\r\n                imageWrap.appendChild(preview);\r\n\r\n                function syncPreviewImage() {\r\n                    const source = image.currentSrc || image.src;\r\n                    if (source) previewImage.src = source;\r\n                }\r\n\r\n                image.addEventListener(\"load\", syncPreviewImage);\r\n                syncPreviewImage();\r\n\r\n                imageWrap.addEventListener(\"mouseenter\", function () {\r\n                    syncPreviewImage();\r\n                    imageWrap.classList.add(\"sp-zoom-active\");\r\n                });\r\n\r\n                imageWrap.addEventListener(\"mouseleave\", function () {\r\n                    imageWrap.classList.remove(\"sp-zoom-active\");\r\n                });\r\n\r\n                imageWrap.addEventListener(\"mousemove\", function (event) {\r\n                    if (window.innerWidth <= 600) return;\r\n\r\n                    const rect = imageWrap.getBoundingClientRect();\r\n                    const x = Math.max(0, Math.min(1, (event.clientX - rect.left) \/ rect.width));\r\n                    const y = Math.max(0, Math.min(1, (event.clientY - rect.top) \/ rect.height));\r\n\r\n                    previewImage.style.left = (-x * 100) + \"%\";\r\n                    previewImage.style.top = (-y * 100) + \"%\";\r\n                });\r\n            });\r\n        }\r\n\r\n        addFullscreenButtons();\r\n        setupHoverZoom();\r\n\r\n        \/* WooCommerce variation compatibility *\/\r\n        if (window.jQuery) {\r\n            jQuery(document).on(\r\n                \"found_variation.spELCIGallery\",\r\n                \"form.variations_form\",\r\n                function (event, variation) {\r\n                    if (!variation || !variation.image || !variation.image.src) return;\r\n\r\n                    const variationImage = variation.image.src;\r\n\r\n                    thumbs.forEach(function (thumb, index) {\r\n                        const image = thumb.querySelector(\"img\");\r\n                        if (!image) return;\r\n\r\n                        const thumbImage = image.currentSrc || image.src;\r\n\r\n                        if (\r\n                            thumbImage === variationImage ||\r\n                            thumbImage.includes(variationImage) ||\r\n                            variationImage.includes(thumbImage)\r\n                        ) {\r\n                            showSlide(index);\r\n                        }\r\n                    });\r\n                }\r\n            );\r\n        }\r\n\r\n        showSlide(0);\r\n\r\n        const featureImage = slides[0]?.querySelector(\r\n            \".sp-main-image-clip > img\"\r\n        );\r\n\r\n        if (featureImage) {\r\n            if (featureImage.complete) {\r\n                scheduleFeatureHotspotSync();\r\n            } else {\r\n                featureImage.addEventListener(\r\n                    \"load\",\r\n                    scheduleFeatureHotspotSync\r\n                );\r\n            }\r\n        }\r\n\r\n        window.addEventListener(\r\n            \"resize\",\r\n            scheduleFeatureHotspotSync\r\n        );\r\n\r\n        window.addEventListener(\r\n            \"orientationchange\",\r\n            scheduleFeatureHotspotSync\r\n        );\r\n\r\n        if (window.ResizeObserver) {\r\n            const observer = new ResizeObserver(\r\n                scheduleFeatureHotspotSync\r\n            );\r\n\r\n            const clip = slides[0]?.querySelector(\r\n                \".sp-main-image-clip\"\r\n            );\r\n\r\n            const wrapper = slides[0]?.querySelector(\r\n                \".sp-main-product.sp-hotspot-image\"\r\n            );\r\n\r\n            if (clip) observer.observe(clip);\r\n            if (wrapper && wrapper !== clip) observer.observe(wrapper);\r\n        }\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n        document.addEventListener(\"DOMContentLoaded\", initSmartPlugELCIGallery);\r\n    } else {\r\n        initSmartPlugELCIGallery();\r\n    }\r\n\r\n    if (window.jQuery) {\r\n        jQuery(window).on(\"elementor\/frontend\/init\", function () {\r\n            setTimeout(initSmartPlugELCIGallery, 150);\r\n        });\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8fd309a e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"8fd309a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f404ad elementor-widget elementor-widget-heading\" data-id=\"9f404ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">ELCI Breakers (White)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b747897 elementor-widget elementor-widget-text-editor\" data-id=\"b747897\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3163390 elementor-widget elementor-widget-woocommerce-product-short-description\" data-id=\"3163390\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"woocommerce-product-short-description.default\"><div class=\"elementor-widget-container\"><div class=\"woocommerce-product-details__short-description\"><p>ELCI Breakers (White) feature power and fault status indicators that make it easy to monitor the unit&#8217;s operation and identify whether a trip was caused by a ground fault or a short circuit. The enclosure is resistant to chemicals and UV exposure for long-lasting durability. The sensing device has a trip level of less than 30mA (27mA nominal) with a trip time of under 100ms (60ms nominal) in accordance with E-11 standards. The breaker supports a protection range of 0\u201350 Amps and operates with both 120 VAC and 120\/240 VAC systems. It is designed to function in temperatures ranging from -35\u00b0C to +66\u00b0C and accommodates up to three 6 AWG wires without requiring the wires to be twisted during installation.<\/p><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-05e630e elementor-widget elementor-widget-button\" data-id=\"05e630e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/dev.smartplug.com\/staging\/where-to-buy\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">WHERE TO BUY<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Smartplug ELCI Breakers (White) 1 ELCI Protection Detects electrical leakage instantly. 2 Circuit Breaker Protects against overloads and shorts. 3 UV-Resistant Enclosure Built for harsh marine conditions. 4 Status Indicators Displays power and fault status. 5 Test &amp; Reset Controls Quick system testing and reset. KEY FEATURES Click the numbered points to explore the ELCI Breakers ELCI BREAKER Non-Metallic &#8211; White ELCI BREAKER Non-Metallic &#8211; White SELECT VIEW Front Side Showing Front PART NUMBER: &#10094; Features Breaker &#10095; ELCI Breakers (White) ELCI Breakers (White) feature power and fault status indicators that make it easy to monitor the unit&#8217;s operation and identify whether a trip was caused by a ground fault or a short circuit. The enclosure is resistant to chemicals and UV exposure for long-lasting durability. The sensing device has a trip level of less than 30mA (27mA nominal) with a trip time of under 100ms (60ms nominal) in accordance with E-11 standards. The breaker supports a protection range of 0\u201350 Amps and operates with both 120 VAC and 120\/240 VAC systems. It is designed to function in temperatures ranging from -35\u00b0C to +66\u00b0C and accommodates up to three 6 AWG wires without requiring the wires to be twisted during installation. WHERE TO BUY<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-10927","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/10927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/comments?post=10927"}],"version-history":[{"count":61,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/10927\/revisions"}],"predecessor-version":[{"id":20535,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/10927\/revisions\/20535"}],"wp:attachment":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/media?parent=10927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}