{"id":16393,"date":"2026-08-25T16:11:00","date_gmt":"2026-08-25T16:11:00","guid":{"rendered":"https:\/\/dev.smartplug.com\/staging\/?page_id=16393"},"modified":"2026-10-05T22:42:24","modified_gmt":"2026-10-05T22:42:24","slug":"28v-dc-power","status":"publish","type":"page","link":"https:\/\/dev.smartplug.com\/staging\/28v-dc-power\/","title":{"rendered":"28V-DC Power"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"16393\" class=\"elementor elementor-16393\">\n\t\t\t\t<div class=\"elementor-element elementor-element-525fc6a 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=\"525fc6a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-23524f9 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=\"23524f9\" 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-3a014d7 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=\"3a014d7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c806d6c elementor-widget elementor-widget-heading\" data-id=\"c806d6c\" 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\">28V DC Power<\/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-1fbe97a 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=\"1fbe97a\" 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-e43d518 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=\"e43d518\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-5ce22c1 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=\"5ce22c1\" 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-5b3ca67 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"5b3ca67\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMARTPLUG 28VDC GALLERY -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<div id=\"sp-elci-gallery\">\n    <div class=\"sp-main-view\">\n        <!-- Slide 0: Features Slide -->\n        <div class=\"sp-gallery-slide active\"\n            data-slide=\"0\"\n            data-title=\"KEY FEATURES\"\n            data-subtitle=\"Click the numbered points to explore the 28VDC System\"\n        >\n            <div class=\"sp-product-image-wrap sp-main-product sp-hotspot-image\" style=\"\n                        --image-x-desktop:0px;\n                        --image-y-desktop:0px;\n                        --image-scale-desktop:1.2;\n                        --image-x-mobile:0px;\n                        --image-y-mobile:0px;\n                        --image-scale-mobile:1.3;\n                    \">\n                <div class=\"sp-main-image-clip\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/08\/MR-28V-DC-Power.png\"\n                         alt=\"SmartPlug 28VDC System Features\">\n                <\/div>\n                <!-- Hotspot 1 -->\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                        --top-desktop:18%;\n                        --left-desktop:48%;\n                        --hotspot-x-desktop:0px;\n                        --hotspot-y-desktop:0px;\n                        --hotspot-scale-desktop:1;\n                        --top-mobile:20%;\n                        --left-mobile:46%;\n                        --hotspot-x-mobile:0px;\n                        --hotspot-y-mobile:0px;\n                        --hotspot-scale-mobile:.8;\n                        --tooltip-x-desktop:0px;\n                        --tooltip-y-desktop:0px;\n                        --tooltip-scale-desktop:1;\n                        --tooltip-x-mobile:0px;\n                        --tooltip-y-mobile:0px;\n                        --tooltip-scale-mobile:1;\n                        --dot-color:#DF6B30;\n                        --number-color:#ffffff;\n                        --tooltip-bg:#DF6B30;\n                        --tooltip-width:280px;\n                        --dot-size:34px;\n                        --number-size:14px;\n                    \">\n                    <div class=\"sp-dot\"><span class=\"sp-number\">1<\/span><\/div>\n                    <div class=\"sp-tooltip\"><strong>Secure Locking Connection<\/strong><br>Stainless steel locking clip ensures a tight, vibration-resistant connection that stays locked in place.<\/div>\n                <\/div>\n                <!-- Hotspot 2 -->\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                        --top-desktop:67%;\n                        --left-desktop:46.5%;\n                        --hotspot-x-desktop:0px;\n                        --hotspot-y-desktop:0px;\n                        --hotspot-scale-desktop:1;\n                        --top-mobile:65%;\n                        --left-mobile:45%;\n                        --hotspot-x-mobile:0px;\n                        --hotspot-y-mobile:0px;\n                        --hotspot-scale-mobile:.8;\n                        --tooltip-x-desktop:0px;\n                        --tooltip-y-desktop:0px;\n                        --tooltip-scale-desktop:1;\n                        --tooltip-x-mobile:0px;\n                        --tooltip-y-mobile:0px;\n                        --tooltip-scale-mobile:1;\n                        --dot-color:#DF6B30;\n                        --number-color:#ffffff;\n                        --tooltip-bg:#DF6B30;\n                        --tooltip-width:280px;\n                        --dot-size:34px;\n                        --number-size:16px;\n                    \">\n                    <div class=\"sp-dot\"><span class=\"sp-number\">2<\/span><\/div>\n                    <div class=\"sp-tooltip\"><strong>Non-Twisting Contact Design<\/strong><br>Unique contact design prevents twisting and reduces wear for a secure, long-lasting connection.<\/div>\n                <\/div>\n                <!-- Hotspot 3 -->\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                        --top-desktop:75%;\n                        --left-desktop:62%;\n                        --hotspot-x-desktop:0px;\n                        --hotspot-y-desktop:0px;\n                        --hotspot-scale-desktop:1;\n                        --top-mobile:74%;\n                        --left-mobile:64%;\n                        --hotspot-x-mobile:0px;\n                        --hotspot-y-mobile:0px;\n                        --hotspot-scale-mobile:.8;\n                        --tooltip-x-desktop:0px;\n                        --tooltip-y-desktop:0px;\n                        --tooltip-scale-desktop:1;\n                        --tooltip-x-mobile:0px;\n                        --tooltip-y-mobile:0px;\n                        --tooltip-scale-mobile:1;\n                        --dot-color:#DF6B30;\n                        --number-color:#ffffff;\n                        --tooltip-bg:#DF6B30;\n                        --tooltip-width:280px;\n                        --dot-size:34px;\n                        --number-size:16px;\n                    \">\n                    <div class=\"sp-dot\"><span class=\"sp-number\">3<\/span><\/div>\n                    <div class=\"sp-tooltip\"><strong>Weather-Resistant Construction<\/strong><br>Durable, marine-grade housing with protective cover keeps connections safe from water, dust, and corrosion.<\/div>\n                <\/div>\n            <\/div>\n            <div class=\"sp-slide-info\">\n                <div class=\"sp-slide-title\">KEY FEATURES<\/div>\n                <div class=\"sp-slide-subtitle\">Click the numbered points to explore the 28VDC System<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Part number is view-specific: each toggle reads its own data-*-part-number value. -->\n        <!-- Slide 1: First Variation (MR28VDC) -->\n        <div class=\"sp-gallery-slide sp-variant-slide\"\n            data-slide=\"1\"\n            data-variant=\"mr28\"\n            data-Front=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RF28VDC.png\"\n            data-Back=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/MR28VDC-Back-2.png\"\n            data-Front-title=\"28V 30A DC Male Retro-Fit Connector\"\n            data-Front-subtitle=\"Front View\"\n            data-Front-part-number=\"MR28VDC\"\n            data-Back-title=\"28V 30A DC Male Retro-Fit Connector\"\n            data-Back-subtitle=\"Rear View\"\n            data-Back-part-number=\"MR28VDC\"\n        >\n            <div class=\"sp-variant-layout\">\n                <div class=\"sp-mobile-variant-title\">\n                    <div class=\"sp-slide-title\">MR28VDC INLET<\/div>\n                    <div class=\"sp-slide-subtitle\">Front View<\/div>\n                <\/div>\n                <div class=\"sp-variant-image-wrap\">\n                    <img decoding=\"async\" class=\"sp-variant-image\"\n                         src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/MR28VDC.png\"\n                         alt=\"MR28VDC\"\n                         style=\"\n                            --image-x-desktop:0px;\n                            --image-y-desktop:0px;\n                            --image-scale-desktop:1;\n                            --image-x-mobile:0px;\n                            --image-y-mobile:0px;\n                            --image-scale-mobile:1;\n                         \">\n                <\/div>\n                <div class=\"sp-slide-info sp-side-info\">\n                    <div class=\"sp-slide-title\">28V 30A DC Male Retro-Fit Connector<\/div>\n                    <div class=\"sp-slide-subtitle\">Front View<\/div>\n                    <div class=\"sp-amp-label\">SELECT VIEW<\/div>\n                    <div class=\"sp-amp-toggle\"\n                         role=\"group\"\n                         aria-label=\"MR28VDC view configuration\">\n                        <button type=\"button\" class=\"sp-amp-btn active\" data-view=\"Front\">Front<\/button>\n                        <button type=\"button\" class=\"sp-amp-btn\" data-view=\"Back\">Rear<\/button>\n                    <\/div>\n                    <div class=\"sp-current-amp\" aria-live=\"polite\">\n                        Showing <strong>Front<\/strong>\n                    <\/div>\n                    <div class=\"sp-part-number\">\n                        PART NUMBER: <strong class=\"sp-part-number-value\">MR28VDC<\/strong>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Slide 2: Second Variation (RF28VDC) -->\n        <div class=\"sp-gallery-slide sp-variant-slide\"\n            data-slide=\"2\"\n            data-variant=\"rf28\"\n            data-Front=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/MR28VDC.png\"\n            data-In-Use=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RDWP.png\"\n            data-Front-title=\"28V 30A DC Female Receptacle and Weatherdoor\"\n            data-Front-subtitle=\"Installation of the receptacles require the weatherdoor RDPWP for weatherproof connection and operation.\"\n            data-Front-part-number=\"RF28VDC\"\n            data-In-Use-title=\"28V 30A DC Female Receptacle and Weatherdoor\"\n            data-In-Use-subtitle=\"Installation of the receptacles require the weatherdoor RDPWP for weatherproof connection and operation.\"\n            data-In-Use-part-number=\"RDPWP\"\n        >\n            <div class=\"sp-variant-layout\">\n                <div class=\"sp-mobile-variant-title\">\n                    <div class=\"sp-slide-title\">28V 30A DC Female Receptacle and Weatherdoor<\/div>\n                    <div class=\"sp-slide-subtitle\">RF28<\/div>\n                <\/div>\n                <div class=\"sp-variant-image-wrap\">\n                    <img decoding=\"async\" class=\"sp-variant-image\"\n                         src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RF28VDC.png\"\n                         alt=\"RF28VDC\"\n                         style=\"\n                            --image-x-desktop:20px;\n                            --image-y-desktop:0px;\n                            --image-scale-desktop:1;\n                            --image-x-mobile:0px;\n                            --image-y-mobile:0px;\n                            --image-scale-mobile:1;\n                         \">\n                <\/div>\n                <div class=\"sp-slide-info sp-side-info\">\n                    <div class=\"sp-slide-title\">28V 30A DC Female Receptacle<\/div>\n                    <div class=\"sp-slide-subtitle\">Front<\/div>\n                    <div class=\"sp-amp-label\">SELECT VIEW<\/div>\n                    <div class=\"sp-amp-toggle\"\n                         role=\"group\"\n                         aria-label=\"RF28VDC view configuration\">\n                        <button type=\"button\" class=\"sp-amp-btn active\" data-view=\"Front\">RF28<\/button>\n                        <button type=\"button\" class=\"sp-amp-btn\" data-view=\"In Use\">Weatherdoor<\/button>\n                    <\/div>\n                    <div class=\"sp-current-amp\" aria-live=\"polite\">\n                        Showing <strong>RF28<\/strong>\n                    <\/div>\n                    <div class=\"sp-part-number\">\n                        PART NUMBER: <strong class=\"sp-part-number-value\">RF28VDC<\/strong>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Centered 3-Thumbnail Strip -->\n    <div class=\"sp-product-selector\">\n        <button type=\"button\"\n                class=\"sp-thumb-nav sp-thumb-prev\"\n                aria-label=\"Previous product image\">\n            &#10094;\n        <\/button>\n\n        <div class=\"sp-thumbnails\">\n            <button type=\"button\"\n                    class=\"sp-thumb sp-feature-thumb active\"\n                    data-target=\"0\"\n                    aria-label=\"View 28VDC System features\">\n                <span class=\"sp-thumb-image\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/MR28-RF28.png\"\n                         alt=\"28VDC System Features\">\n                <\/span>\n                <span class=\"sp-thumb-label\">Features<\/span>\n            <\/button>\n\n            <button type=\"button\"\n                    class=\"sp-thumb\"\n                    data-target=\"1\"\n                    aria-label=\"View MR28VDC Inlet\">\n                <span class=\"sp-thumb-image\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RF28VDC.png\"\n                         alt=\"MR28VDC\">\n                <\/span>\n                <span class=\"sp-thumb-label\">MR28VDC<\/span>\n            <\/button>\n\n            <button type=\"button\"\n                    class=\"sp-thumb\"\n                    data-target=\"2\"\n                    aria-label=\"View RF28VDC Connector\">\n                <span class=\"sp-thumb-image\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/MR28VDC.png\"\n                         alt=\"RF28VDC Connector\">\n                <\/span>\n                <span class=\"sp-thumb-label\">RF28VDC<\/span>\n            <\/button>\n        <\/div>\n\n        <button type=\"button\"\n                class=\"sp-thumb-nav sp-thumb-next\"\n                aria-label=\"Next product image\">\n            &#10095;\n        <\/button>\n    <\/div>\n\n    <div class=\"sp-gallery-pagination\"\n         aria-label=\"Product gallery pagination\">\n        <button type=\"button\"\n                class=\"sp-page-dot active\"\n                data-page=\"0\"\n                aria-label=\"Go to features\">\n        <\/button>\n        <button type=\"button\"\n                class=\"sp-page-dot\"\n                data-page=\"1\"\n                aria-label=\"Go to MR28VDC\">\n        <\/button>\n        <button type=\"button\"\n                class=\"sp-page-dot\"\n                data-page=\"2\"\n                aria-label=\"Go to RF28VDC\">\n        <\/button>\n    <\/div>\n<\/div>\n\n<style>\n\/* =========================================================\nSMARTPLUG 28VDC GALLERY\nAmazon-inspired product selector\n========================================================= *\/\n\n#sp-elci-gallery {\n    --sp-orange: #DF6B30;\n    --sp-dark: #1c1c1c;\n    --sp-muted: #666;\n    --sp-border: #dedede;\n    --sp-soft: #f7f7f7;\n\n    width: 100%;\n    height: 560px;\n    margin: 0 auto;\n    font-family: \"Montserrat\", sans-serif;\n    box-sizing: border-box;\n    overflow: visible;\n}\n\n#sp-elci-gallery *,\n#sp-elci-gallery *::before,\n#sp-elci-gallery *::after {\n    box-sizing: border-box;\n}\n\n\/* =========================================================\nMAIN VIEW\n========================================================= *\/\n\n#sp-elci-gallery .sp-main-view {\n    position: relative;\n    width: 100%;\n    height: 430px;\n    overflow: visible;\n}\n\n#sp-elci-gallery .sp-gallery-slide {\n    display: none;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: visible;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n}\n\n#sp-elci-gallery .sp-gallery-slide.active {\n    display: flex;\n}\n\n\/* =========================================================\nFEATURE IMAGE\n========================================================= *\/\n\n#sp-elci-gallery .sp-main-product {\n    position: relative;\n    width: 100%;\n    height: 400px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#sp-elci-gallery .sp-main-image-clip {\n    position: absolute;\n    inset: 0;\n    overflow: hidden;\n    pointer-events: none;\n    z-index: 1;\n}\n\n#sp-elci-gallery .sp-main-image-clip > img {\n    width: 100%;\n    height: 100%;\n    max-width: none;\n    object-fit: contain;\n    display: block;\n    transform:\n    translate(var(--image-x-desktop), var(--image-y-desktop))\n    scale(var(--image-scale-desktop));\n    transform-origin: center center;\n    transition: transform .18s ease;\n}\n\n\/* =========================================================\nVARIANT IMAGE\n========================================================= *\/\n\n#sp-elci-gallery .sp-variant-layout {\n    width: 100%;\n    height: 100%;\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr);\n    align-items: center;\n    gap: 12px;\n}\n\n#sp-elci-gallery .sp-variant-image-wrap {\n    width: 100%;\n    height: 400px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    min-width: 0;\n}\n\n#sp-elci-gallery .sp-variant-image-wrap img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    display: block;\n    transform:\n    translate(var(--image-x-desktop), var(--image-y-desktop))\n    scale(var(--image-scale-desktop));\n    transform-origin: center center;\n    transition: opacity .16s ease, transform .18s ease;\n}\n\n\/* =========================================================\nPRODUCT INFORMATION\n========================================================= *\/\n\n#sp-elci-gallery .sp-slide-info {\n    width: 100%;\n    max-width: 400px;\n    margin-top: -2px;\n    padding: 0 12px;\n    text-align: center;\n    transition: none;\n}\n\n#sp-elci-gallery .sp-side-info {\n    max-width: none;\n    margin: 0;\n    padding: 2px;\n    text-align: left;\n}\n\n#sp-elci-gallery .sp-side-info .sp-slide-title {\n    font-size: 30px;\n    font-family: \"Bebas Neue\", sans-serif;\n    font-weight: 600;\n    letter-spacing: 1.5px;\n}\n\n#sp-elci-gallery .sp-amp-label {\n    margin-top: 17px;\n    color: #777;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: .5px;\n}\n\n#sp-elci-gallery .sp-amp-toggle {\n    display: flex;\n    width: 100%;\n    max-width: 300px;\n    margin-top: 6px;\n    border: 1px solid #d8d8d8;\n    border-radius: 6px;\n    overflow: hidden;\n    background: #fff;\n}\n\n#sp-elci-gallery .sp-amp-btn {\n    flex: 1 1 50%;\n    min-height: 30px;\n    padding: 7px 10px;\n    border: 0;\n    border-right: 0px solid #d8d8d8;\n    background: #fff;\n    color: #333;\n    font-family: \"Montserrat\", sans-serif;\n    font-size: 12px;\n    font-weight: 700;\n    cursor: pointer;\n    appearance: none;\n    -webkit-appearance: none;\n    transition: background .18s ease, color .18s ease;\n}\n\n#sp-elci-gallery .sp-amp-btn:last-child { border-right: 0; }\n#sp-elci-gallery .sp-amp-btn.active { background: var(--sp-orange); color: #fff; }\n#sp-elci-gallery .sp-amp-btn:disabled { background: #f2f2f2; color: #aaa; cursor: not-allowed; }\n\n#sp-elci-gallery .sp-current-amp {\n    margin-top: 8px;\n    color: #555;\n    font-size: 12px;\n}\n\n#sp-elci-gallery .sp-side-info .sp-part-number { margin-top: 10px; }\n\n#sp-elci-gallery .sp-mobile-variant-title {\n    display: none;\n}\n\n\n#sp-elci-gallery .sp-slide-title {\n    margin-top: 3px;\n    color: var(--sp-dark);\n    font-family: \"Bebas Neue\", sans-serif;\n    font-size: 25px;\n    line-height: 1;\n    letter-spacing: .4px;\n}\n\n#sp-elci-gallery .sp-slide-subtitle {\n    margin-top: 3px;\n    margin-bottom: 3px;\n    color: var(--sp-muted);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1.35;\n}\n\n#sp-elci-gallery .sp-variant-image.is-empty {\n    visibility: hidden;\n}\n\n#sp-elci-gallery .sp-part-number {\n    display: inline-block;\n    margin-top: 7px;\n    color: #555;\n    font-size: 12px;\n    font-weight: 600;\n    letter-spacing: .5px;\n}\n\n#sp-elci-gallery .sp-part-number strong {\n    color: var(--sp-dark);\n}\n\n\/* =========================================================\nHOTSPOTS\n========================================================= *\/\n\n#sp-elci-gallery .sp-hotspot {\n    position: absolute;\n    z-index: 1;\n    top: calc(var(--top-desktop) + var(--hotspot-y-desktop));\n    left: calc(var(--left-desktop) + var(--hotspot-x-desktop));\n    transform:\n    translate(-50%, -50%)\n    scale(var(--hotspot-scale-desktop));\n    transform-origin: center center;\n    outline: none;\n    transition: top .18s ease, left .18s ease, transform .18s ease;\n}\n\n#sp-elci-gallery .sp-dot {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background: var(--dot-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 2px 8px rgba(0,0,0,.18);\n}\n\n#sp-elci-gallery .sp-number {\n    color: var(--number-color);\n    font-size: 13px;\n    font-weight: 700;\n    line-height: 1;\n}\n\n#sp-elci-gallery .sp-tooltip {\n    position: absolute;\n    bottom: calc(100% + 7px - var(--tooltip-y-desktop));\n    left: calc(50% + var(--tooltip-x-desktop));\n    transform:\n    translateX(-50%)\n    scale(var(--tooltip-scale-desktop));\n    transform-origin: center bottom;\n    width: 230px;\n    padding: 10px;\n    border-radius: 7px;\n    background: var(--tooltip-bg);\n    color: #fff;\n    font-size: 10px;\n    line-height: 1.45;\n    text-align: left;\n    opacity: 0;\n    visibility: hidden;\n    transition:\n    opacity .18s ease,\n    visibility .18s ease,\n    left .18s ease,\n    bottom .18s ease,\n    transform .18s ease;\n    pointer-events: none;\n    z-index:10;\n    box-shadow: 0 4px 14px rgba(0,0,0,.14);\n}\n\n#sp-elci-gallery .sp-hotspot:hover .sp-tooltip,\n#sp-elci-gallery .sp-hotspot:focus-visible .sp-tooltip,\n#sp-elci-gallery .sp-hotspot.is-open .sp-tooltip {\n    opacity: 1;\n    visibility: visible;\n}\n\n\/* =========================================================\nAMAZON-STYLE PRODUCT SELECTOR (CENTERED STRIP)\n========================================================= *\/\n\n#sp-elci-gallery .sp-product-selector {\n    width: 100%;\n    display: flex;\n    align-items: stretch;\n    justify-content: center;\n    gap: 6px;\n    margin-top: 4px;\n}\n\n#sp-elci-gallery .sp-thumbnails {\n    flex: 0 0 auto;\n    min-width: 0;\n    display: flex;\n    align-items: stretch;\n    justify-content: center;\n    gap: 7px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    padding: 2px 0;\n}\n\n#sp-elci-gallery .sp-thumbnails::-webkit-scrollbar {\n    display: none;\n}\n\n#sp-elci-gallery .sp-thumb {\n    flex: 0 0 72px;\n    width: 72px;\n    min-height: 94px;\n    padding: 5px 5px 6px;\n    border: 1px solid var(--sp-border);\n    border-radius: 7px;\n    background: #fff;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 3px;\n    appearance: none;\n    -webkit-appearance: none;\n    transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease;\n}\n\n#sp-elci-gallery .sp-thumb:hover {\n    border-color: var(--sp-orange);\n    transform: translateY(-1px);\n}\n\n#sp-elci-gallery .sp-thumb.active {\n    border: 2px solid var(--sp-orange);\n    box-shadow: 0 2px 8px rgba(223,107,48,.13);\n}\n\n#sp-elci-gallery .sp-thumb:focus {\n    outline: none;\n}\n\n#sp-elci-gallery .sp-thumb:focus-visible {\n    border-color: var(--sp-orange);\n    box-shadow: 0 0 0 2px rgba(223,107,48,.18);\n}\n\n#sp-elci-gallery .sp-thumb-image {\n    width: 100%;\n    height: 57px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    border-radius: 4px;\n    background: #fff;\n}\n\n#sp-elci-gallery .sp-thumb img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    display: block;\n    pointer-events: none;\n}\n\n#sp-elci-gallery .sp-thumb-label {\n    display: block;\n    width: 100%;\n    color: var(--sp-dark);\n    font-size: 9px;\n    font-weight: 700;\n    line-height: 1.15;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n}\n\n\/* =========================================================\nTHUMBNAIL ARROWS\n========================================================= *\/\n\n#sp-elci-gallery .sp-thumb-nav {\n    display: none;\n    width: 26px;\n    min-width: 26px;\n    height: 26px;\n    align-self: center;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: #fff;\n    color: #222;\n    font-family: Arial, sans-serif;\n    font-size: 16px;\n    line-height: 26px;\n    text-align: center;\n    cursor: pointer;\n    appearance: none;\n    -webkit-appearance: none;\n}\n\n\/* =========================================================\nPAGINATION\n========================================================= *\/\n\n#sp-elci-gallery .sp-gallery-pagination {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 6px;\n    margin-top: 7px;\n}\n\n#sp-elci-gallery .sp-page-dot {\n    width: 6px;\n    height: 6px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: #c7c7c7;\n    cursor: pointer;\n    appearance: none;\n    -webkit-appearance: none;\n    transition: background .2s ease, transform .2s ease;\n}\n\n#sp-elci-gallery .sp-page-dot:hover,\n#sp-elci-gallery .sp-page-dot.active {\n    background: var(--sp-orange);\n}\n\n#sp-elci-gallery .sp-page-dot.active {\n    transform: scale(1.25);\n}\n\n\/* =========================================================\nFULL SCREEN VIEW + HOVER ZOOM\n========================================================= *\/\n\n#sp-elci-gallery .sp-fullscreen-trigger {\n    position: static;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    margin-top: 7px;\n    transform: none;\n    z-index: 10;\n    border: 1px solid #d7d7d7;\n    border-radius: 4px;\n    background: #fff;\n    color: #333;\n    padding: 6px 11px;\n    font-family: \"Montserrat\", sans-serif;\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: .2px;\n    line-height: 1;\n    cursor: pointer;\n    white-space: nowrap;\n    appearance: none;\n    -webkit-appearance: none;\n    box-shadow: 0 1px 4px rgba(0,0,0,.08);\n    transition: border-color .18s ease, color .18s ease, background .18s ease;\n}\n\n#sp-elci-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\n    display: none;\n}\n\n#sp-elci-gallery .sp-fullscreen-trigger:hover {\n    border-color: var(--sp-orange);\n    color: var(--sp-orange);\n}\n\n#sp-elci-gallery .sp-zoom-preview {\n    position: absolute;\n    top: 0;\n    left: calc(100% + 12px);\n    width: 78%;\n    height: 100%;\n    background: #fff;\n    border: 1px solid #e3e3e3;\n    border-radius: 8px;\n    box-shadow: 0 6px 20px rgba(0,0,0,.18);\n    overflow: hidden;\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    z-index: 1;\n    transition: opacity .12s ease, visibility .12s ease;\n}\n\n#sp-elci-gallery .sp-zoom-preview img {\n    position: absolute;\n    width: 200%;\n    height: 200%;\n    max-width: none;\n    object-fit: contain;\n    display: block;\n    pointer-events: none;\n    transform-origin: top left;\n}\n\n#sp-elci-gallery .sp-variant-image-wrap.sp-zoom-active .sp-zoom-preview {\n    opacity: 1;\n    visibility: visible;\n}\n\n\/* Full-screen product popup *\/\n#sp-elci-gallery .sp-fullscreen-modal {\n    position: fixed;\n    inset: 0;\n    z-index: 999999;\n    display: none;\n    align-items: center;\n    justify-content: center;\n    padding: 20px;\n    background: rgba(0,0,0,.38);\n}\n\n#sp-elci-gallery .sp-fullscreen-modal.is-open {\n    display: flex;\n}\n\n#sp-elci-gallery .sp-fullscreen-dialog {\n    position: relative;\n    width: var(--sp-popup-width-desktop, 1100px);\n    height: var(--sp-popup-height-desktop, 520px);\n    max-width: calc(100vw - 30px);\n    max-height: calc(100vh - 40px);\n    display: grid;\n    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr);\n    gap: 28px;\n    padding: 24px 28px;\n    background: #fff;\n    border-radius: 7px;\n    box-shadow: 0 8px 35px rgba(0,0,0,.25);\n    overflow: hidden;\n}\n\n#sp-elci-gallery .sp-fullscreen-close {\n    position: absolute;\n    top: 8px;\n    right: 10px;\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: #222;\n    font-family: Arial, sans-serif;\n    font-size: 24px;\n    line-height: 28px;\n    cursor: pointer;\n    z-index: 5;\n}\n\n#sp-elci-gallery .sp-fullscreen-image-area {\n    min-width: 0;\n    min-height: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n\n#sp-elci-gallery .sp-fullscreen-image {\n    width: var(--sp-popup-image-width-desktop, 100%);\n    height: var(--sp-popup-image-height-desktop, 100%);\n    max-width: none;\n    max-height: none;\n    object-fit: contain;\n    display: block;\n    transform: translate(\n        var(--sp-popup-image-x-desktop, 0px),\n        var(--sp-popup-image-y-desktop, 0px)\n    );\n}\n\n#sp-elci-gallery .sp-fullscreen-info {\n    min-width: 0;\n    padding: 8px 8px 8px 0;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    overflow-y: auto;\n}\n\n\n#sp-elci-gallery .sp-fullscreen-title {\n    margin-top: 5px;\n    color: var(--sp-dark);\n    font-family: \"Bebas Neue\", sans-serif;\n    font-size: 31px;\n    line-height: 1;\n    letter-spacing: 1.5px;\n    font-weight: 700;\n}\n\n#sp-elci-gallery .sp-fullscreen-description {\n    margin-top: 8px;\n    color: #666;\n    font-size: 12px;\n    line-height: 1.45;\n}\n\n#sp-elci-gallery .sp-fullscreen-part-number {\n    margin-top: 8px;\n    color: #555;\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: .5px;\n}\n\n#sp-elci-gallery .sp-fullscreen-part-number strong {\n    color: var(--sp-dark);\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-wrap {\n    display: none;\n    margin-top: 14px;\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-wrap.is-visible {\n    display: block;\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-label {\n    margin-bottom: 5px;\n    color: #777;\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: .5px;\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-toggle {\n    display: flex;\n    width: 250px;\n    max-width: 100%;\n    border: 1px solid #d8d8d8;\n    border-radius: 6px;\n    overflow: hidden;\n    background: #fff;\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-btn {\n    flex: 1 1 50%;\n    min-height: 32px;\n    padding: 7px 10px;\n    border: 0;\n    background: #fff;\n    color: #333;\n    font-family: \"Montserrat\", sans-serif;\n    font-size: 11px;\n    font-weight: 700;\n    cursor: pointer;\n    appearance: none;\n    -webkit-appearance: none;\n    transition: background .18s ease, color .18s ease;\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-btn.active {\n    background: var(--sp-orange);\n    color: #fff;\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-btn:disabled {\n    background: #f2f2f2;\n    color: #aaa;\n    cursor: not-allowed;\n}\n\n#sp-elci-gallery .sp-fullscreen-thumbnails {\n    width: 100%;\n    margin-top: 18px;\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 8px;\n}\n\n#sp-elci-gallery .sp-fullscreen-thumb {\n    width: 100%;\n    height: 72px;\n    padding: 4px;\n    border: 1px solid var(--sp-border);\n    border-radius: 4px;\n    background: #fff;\n    cursor: pointer;\n    overflow: hidden;\n}\n\n#sp-elci-gallery .sp-fullscreen-thumb.active {\n    border: 2px solid var(--sp-orange);\n}\n\n#sp-elci-gallery .sp-fullscreen-thumb img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    display: block;\n}\n\n\/* =========================================================\nLOCKED VIEWING FRAME OVERRIDES\n========================================================= *\/\n#sp-elci-gallery .sp-main-view { height: 430px; min-height: 430px; }\n#sp-elci-gallery .sp-gallery-slide { height: 100%; min-height: 430px; }\n#sp-elci-gallery .sp-variant-layout { height: 100%; min-height: 0; }\n#sp-elci-gallery .sp-variant-image-wrap { height: 400px; min-height: 400px; flex: 0 0 400px; }\n#sp-elci-gallery .sp-side-info { min-height: 220px; }\n#sp-elci-gallery .sp-amp-toggle { min-height: 30px; height: 30px; }\n#sp-elci-gallery .sp-fullscreen-trigger { display: inline-flex; position: static; margin-top: 7px; }\n\n\/* Keep the full-screen button on its own line directly below the part number\n   on desktop, laptop, and tablet. *\/\n#sp-elci-gallery .sp-side-info .sp-fullscreen-trigger {\n    display: flex;\n    width: max-content;\n    max-width: 100%;\n    margin: 7px 0 0;\n    clear: both;\n}\n\n\/* =========================================================\nRESPONSIVE HOTSPOT IMAGE-COORDINATE SYNC\nHotspots are calculated against the actual rendered image area so\npercentage positions remain attached to the image at every width.\n========================================================= *\/\n#sp-elci-gallery .sp-main-product.sp-hotspot-image {\n    --sp-feature-image-left: 0px;\n    --sp-feature-image-top: 0px;\n    --sp-feature-image-width: 100%;\n    --sp-feature-image-height: 100%;\n}\n\n#sp-elci-gallery .sp-main-product.sp-hotspot-image .sp-hotspot {\n    \/* JavaScript supplies pixel coordinates for the actual rendered image.\n       These remain authoritative across desktop, laptop, tablet, and mobile. *\/\n    top: var(--sp-hotspot-top-px, calc(var(--top-desktop) + var(--hotspot-y-desktop)));\n    left: var(--sp-hotspot-left-px, calc(var(--left-desktop) + var(--hotspot-x-desktop)));\n}\n\n\/* =========================================================\nMOBILE RESPONSIVE (Strict Parity & Layout Rules)\n========================================================= *\/\n\n@media (max-width: 767px) {\n    #sp-elci-gallery .sp-fullscreen-trigger {\n        position: static;\n        display: inline-flex;\n        margin-top: 6px;\n        transform: none;\n        font-size: 8px;\n        padding: 6px 10px;\n    }\n\n    #sp-elci-gallery .sp-zoom-preview {\n        display: none;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-modal {\n        padding: 8px;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-dialog {\n        width: var(--sp-popup-width-mobile, calc(100vw - 16px));\n        height: var(--sp-popup-height-mobile, 90vh);\n        max-width: calc(100vw - 16px);\n        max-height: calc(100vh - 16px);\n        min-height: 0;\n        grid-template-columns: 1fr;\n        gap: 8px;\n        padding: 18px 12px 12px;\n        border-radius: 8px;\n        box-shadow: 0 8px 30px rgba(0,0,0,.22);\n        overflow-y: auto;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-image-area {\n        height: var(--sp-popup-image-area-height-mobile, 54vh);\n        min-height: 260px;\n        overflow: hidden;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-image {\n        width: var(--sp-popup-image-width-mobile, 100%);\n        height: var(--sp-popup-image-height-mobile, 100%);\n        transform: translate(\n            var(--sp-popup-image-x-mobile, 0px),\n            var(--sp-popup-image-y-mobile, 0px)\n        );\n    }\n\n    #sp-elci-gallery .sp-fullscreen-info {\n        padding: 0 4px 4px;\n        overflow: visible;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-title { font-size: 25px; }\n    #sp-elci-gallery .sp-fullscreen-description { font-size: 10px; }\n    #sp-elci-gallery .sp-fullscreen-part-number { font-size: 9px; }\n    #sp-elci-gallery .sp-fullscreen-amp-wrap { margin-top: 8px; }\n    #sp-elci-gallery .sp-fullscreen-amp-label { font-size: 9px; margin-bottom: 4px; }\n    #sp-elci-gallery .sp-fullscreen-amp-toggle { width: 100%; }\n    #sp-elci-gallery .sp-fullscreen-amp-btn { min-height: 30px; padding: 6px 8px; font-size: 10px; }\n\n    #sp-elci-gallery .sp-fullscreen-thumbnails {\n        margin-top: 10px;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 5px;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-thumb { height: 58px; }\n\n    \/* MOBILE GALLERY LAYOUT *\/\n    #sp-elci-gallery {\n        width: 100%;\n        max-width: 100%;\n        height: auto;\n        min-height: 0;\n        margin: 0 auto;\n        overflow: visible;\n    }\n\n    #sp-elci-gallery .sp-main-view {\n        width: 100%;\n        height: auto;\n        min-height: 0;\n        overflow: visible;\n    }\n\n    #sp-elci-gallery .sp-gallery-slide {\n        width: 100%;\n        height: auto;\n        min-height: 0;\n        display: none;\n        position: relative;\n        overflow: visible;\n        flex-direction: column;\n        align-items: center;\n        justify-content: flex-start;\n    }\n\n    #sp-elci-gallery .sp-gallery-slide.active {\n        display: flex;\n    }\n\n    #sp-elci-gallery .sp-main-product {\n        width: 100%;\n        height: auto;\n        aspect-ratio: 3 \/ 3;\n        min-height: 0;\n        flex: 0 0 auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        order: 1;\n        position: relative;\n        overflow: visible;\n    }\n\n    #sp-elci-gallery .sp-main-image-clip { inset: 0; }\n\n    #sp-elci-gallery .sp-main-image-clip > img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        transform: translate(var(--image-x-mobile), var(--image-y-mobile)) scale(var(--image-scale-mobile));\n    }\n\n    #sp-elci-gallery .sp-variant-layout {\n        width: 100%;\n        height: auto;\n        min-height: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: flex-start;\n        gap: 0;\n    }\n\n    \/* Fixed space reserved for dynamic mobile titles *\/\n    #sp-elci-gallery .sp-mobile-variant-title {\n        height: 70px;\n        min-height: 70px;\n        max-height: 70px;\n        overflow: hidden;\n        display: block;\n        width: 100%;\n        padding: 0 8px;\n        text-align: center;\n        order: 1;\n        margin: 0;\n        position: relative;\n        z-index: 2;\n    }\n\n    #sp-elci-gallery .sp-mobile-variant-title .sp-slide-title {\n        margin: 2px 0 0;\n        font-size: 23px;\n        line-height: .95;\n        letter-spacing: .8px;\n    }\n\n    #sp-elci-gallery .sp-mobile-variant-title .sp-slide-subtitle {\n        margin: 3px 0 0;\n        font-size: 10px;\n        line-height: 1.2;\n    }\n\n    #sp-elci-gallery .sp-variant-image-wrap {\n        width: 100%;\n        height: auto;\n        aspect-ratio: 4.7 \/ 3;\n        min-height: 0;\n        flex: 0 0 auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        order: 2;\n        position: relative;\n        overflow: visible;\n    }\n\n    #sp-elci-gallery .sp-variant-image-wrap img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        transform: translate(var(--image-x-mobile), var(--image-y-mobile)) scale(var(--image-scale-mobile));\n        transform-origin: center center;\n        transition: opacity .16s ease, transform .18s ease;\n    }\n\n    \/* Dynamic Side Controls and Content Parity *\/\n    #sp-elci-gallery .sp-side-info {\n        width: 100%;\n        max-width: 100%;\n        height: 125px;\n        min-height: 125px;\n        max-height: 125px;\n        overflow: visible;\n        padding: 0;\n        margin: 0;\n        text-align: center;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: flex-start;\n        gap: 0;\n        order: 3;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-slide-kicker,\n    #sp-elci-gallery .sp-side-info .sp-slide-title,\n    #sp-elci-gallery .sp-side-info .sp-slide-subtitle {\n        display: none;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-amp-label {\n        display: block;\n        width: 100%;\n        margin: 0 0 4px;\n        color: #777;\n        font-size: 10px;\n        line-height: 1.1;\n        font-weight: 700;\n        letter-spacing: .5px;\n        text-align: center;\n    }\n\n    \/* 2-Column x 1-Row Grid Layout for Mobile Toggle Buttons *\/\n    #sp-elci-gallery .sp-side-info .sp-amp-toggle {\n        display: grid !important;\n        grid-template-columns: repeat(2, 1fr) !important;\n        grid-template-rows: 1fr !important;\n        width: 200px !important;\n        max-width: 200px !important;\n        height: 35px !important;\n        min-height: 35px !important;\n        gap: 2px !important;\n        border: none !important;\n        background: transparent !important;\n        overflow: visible !important;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-amp-btn {\n        width: 100% !important;\n        height: 35px !important;\n        min-height: 35px !important;\n        padding: 5px 8px !important;\n        font-size: 11px !important;\n        border: 1px solid #d8d8d8 !important;\n        border-radius: 4px !important;\n        white-space: nowrap !important;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-amp-btn.active {\n        border-color: var(--sp-orange) !important;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-current-amp {\n        display: block;\n        width: 100%;\n        margin: 3px 0 0;\n        color: #666;\n        font-size: 11px;\n        line-height: 1.1;\n        text-align: center;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-part-number {\n        display: block;\n        margin: 3px auto 0;\n        padding: 0;\n        color: #555;\n        font-size: 9px;\n        letter-spacing: .4px;\n        text-align: center;\n    }\n\n    \/* Full Screen trigger right at the bottom of the part-number element *\/\n    #sp-elci-gallery .sp-side-info .sp-fullscreen-trigger {\n        display: inline-flex;\n        margin: 5px auto 0;\n    }\n\n    #sp-elci-gallery .sp-hotspot {\n        \/* Keep JavaScript-calculated image-relative pixels on mobile too.\n           Only the hotspot's visual scale switches at the mobile breakpoint. *\/\n        top: var(--sp-hotspot-top-px, calc(var(--top-mobile) + var(--hotspot-y-mobile)));\n        left: var(--sp-hotspot-left-px, calc(var(--left-mobile) + var(--hotspot-x-mobile)));\n        transform: translate(-50%, -50%) scale(var(--hotspot-scale-mobile));\n    }\n\n    #sp-elci-gallery .sp-tooltip {\n        bottom: calc(100% + 7px - var(--tooltip-y-mobile));\n        left: calc(50% + var(--tooltip-x-mobile));\n        transform: translateX(-50%) scale(var(--tooltip-scale-mobile));\n        width: min(190px, calc(100vw - 22px));\n        padding: 8px;\n        font-size: 9px;\n    }\n\n    #sp-elci-gallery .sp-product-selector {\n        width: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 3px;\n        margin-top: 2px;\n    }\n\n    #sp-elci-gallery .sp-thumb-nav {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex: 0 0 26px;\n        width: 26px;\n        min-width: 26px;\n        height: 26px;\n        min-height: 26px;\n        padding: 0;\n        border: 0;\n        border-radius: 50%;\n        background: #fff;\n        color: #222;\n        font-size: 16px;\n        line-height: 26px;\n        cursor: pointer;\n        z-index: 3;\n    }\n\n    #sp-elci-gallery .sp-thumbnails {\n        flex: 0 0 auto;\n        width: auto;\n        max-width: calc(100% - 58px);\n        min-width: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 4px;\n        overflow-x: auto;\n        overflow-y: hidden;\n        scroll-behavior: smooth;\n        scrollbar-width: none;\n        padding: 1px 0;\n    }\n\n    #sp-elci-gallery .sp-thumbnails::-webkit-scrollbar { display: none; }\n\n    #sp-elci-gallery .sp-thumb {\n        flex: 0 0 62px;\n        width: 62px;\n        min-width: 62px;\n        min-height: 75px;\n        height: 75px;\n        padding: 3px;\n        border: 1px solid var(--sp-border);\n        border-radius: 5px;\n        gap: 2px;\n    }\n\n    #sp-elci-gallery .sp-thumb.active { border: 2px solid var(--sp-orange); }\n\n    #sp-elci-gallery .sp-thumb-image {\n        width: 100%;\n        height: 45px;\n        min-height: 45px;\n        border-radius: 3px;\n    }\n\n    #sp-elci-gallery .sp-thumb-label { font-size: 8px; line-height: 1.05; }\n\n    #sp-elci-gallery .sp-gallery-pagination {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 5px;\n        margin-top: 3px;\n        height: 7px;\n    }\n\n    #sp-elci-gallery .sp-page-dot { width: 6px; height: 6px; }\n}\n\n.sp-gallery-overflow,\n.sp-gallery-overflow > .e-con,\n.sp-gallery-overflow > .elementor-widget-container {\n    overflow: visible !important;\n}\n<\/style>\n\n<script>\n(function () {\n    function initSmartPlugELCIGallery() {\n        const gallery = document.getElementById(\"sp-elci-gallery\");\n        if (!gallery || gallery.dataset.initialized === \"true\") return;\n        gallery.dataset.initialized = \"true\";\n\n        const slides = gallery.querySelectorAll(\".sp-gallery-slide\");\n        const thumbs = gallery.querySelectorAll(\".sp-thumb\");\n        const hotspots = gallery.querySelectorAll(\".sp-hotspot\");\n        const pageDots = gallery.querySelectorAll(\".sp-page-dot\");\n        const variantSlides = gallery.querySelectorAll(\".sp-variant-slide\");\n        const thumbnailContainer = gallery.querySelector(\".sp-thumbnails\");\n        const thumbPrev = gallery.querySelector(\".sp-thumb-prev\");\n        const thumbNext = gallery.querySelector(\".sp-thumb-next\");\n\n        if (!slides.length || !thumbs.length) return;\n\n        let currentIndex = 0;\n\n        \/*\n         * Keep feature hotspots attached to the actual image rendered by\n         * object-fit: contain, including its responsive scale\/translation.\n         * This does not change the existing hotspot percentages or layout.\n         *\/\n        function syncFeatureHotspots() {\n            const featureSlide = slides[0];\n            if (!featureSlide) return;\n\n            const imageWrap = featureSlide.querySelector(\".sp-main-product.sp-hotspot-image\");\n            const imageClip = featureSlide.querySelector(\".sp-main-image-clip\");\n            const image = featureSlide.querySelector(\".sp-main-image-clip img\");\n            const featureHotspots = featureSlide.querySelectorAll(\".sp-hotspot\");\n\n            if (!imageWrap || !imageClip || !image || !featureHotspots.length) return;\n            if (!image.naturalWidth || !image.naturalHeight) return;\n\n            const clipRect = imageClip.getBoundingClientRect();\n            if (!clipRect.width || !clipRect.height) return;\n\n            const isMobile = window.matchMedia(\"(max-width: 767px)\").matches;\n            const imageStyle = window.getComputedStyle(image);\n            const scale = parseFloat(imageStyle.transform.match(\/matrix\\([^,]+,[^,]+,[^,]+,[^,]+,\/)?.[0]?.split(\",\")[0]?.replace(\"matrix(\", \"\")) || 1;\n\n            \/* Use the declared product-image scale rather than relying on\n             * parsing a transform matrix, so existing values remain exact. *\/\n            const scaleValue = parseFloat(\n                imageWrap.style.getPropertyValue(isMobile ? \"--image-scale-mobile\" : \"--image-scale-desktop\")\n            ) || 1;\n            const xValue = parseFloat(\n                imageWrap.style.getPropertyValue(isMobile ? \"--image-x-mobile\" : \"--image-x-desktop\")\n            ) || 0;\n            const yValue = parseFloat(\n                imageWrap.style.getPropertyValue(isMobile ? \"--image-y-mobile\" : \"--image-y-desktop\")\n            ) || 0;\n\n            const containerRatio = clipRect.width \/ clipRect.height;\n            const imageRatio = image.naturalWidth \/ image.naturalHeight;\n\n            let renderedWidth;\n            let renderedHeight;\n\n            if (imageRatio > containerRatio) {\n                renderedWidth = clipRect.width;\n                renderedHeight = clipRect.width \/ imageRatio;\n            } else {\n                renderedHeight = clipRect.height;\n                renderedWidth = clipRect.height * imageRatio;\n            }\n\n            renderedWidth *= scaleValue;\n            renderedHeight *= scaleValue;\n\n            const renderedLeft = clipRect.left + (clipRect.width - renderedWidth) \/ 2 + xValue;\n            const renderedTop = clipRect.top + (clipRect.height - renderedHeight) \/ 2 + yValue;\n\n            const wrapRect = imageWrap.getBoundingClientRect();\n\n            featureHotspots.forEach(function (hotspot) {\n                const topPercent = parseFloat(\n                    hotspot.style.getPropertyValue(isMobile ? \"--top-mobile\" : \"--top-desktop\")\n                );\n                const leftPercent = parseFloat(\n                    hotspot.style.getPropertyValue(isMobile ? \"--left-mobile\" : \"--left-desktop\")\n                );\n                const xOffset = parseFloat(\n                    hotspot.style.getPropertyValue(isMobile ? \"--hotspot-x-mobile\" : \"--hotspot-x-desktop\")\n                ) || 0;\n                const yOffset = parseFloat(\n                    hotspot.style.getPropertyValue(isMobile ? \"--hotspot-y-mobile\" : \"--hotspot-y-desktop\")\n                ) || 0;\n\n                if (!Number.isFinite(topPercent) || !Number.isFinite(leftPercent)) return;\n\n                const hotspotLeft =\n                    renderedLeft - wrapRect.left + (renderedWidth * leftPercent \/ 100) + xOffset;\n                const hotspotTop =\n                    renderedTop - wrapRect.top + (renderedHeight * topPercent \/ 100) + yOffset;\n\n                hotspot.style.setProperty(\"--sp-hotspot-left-px\", hotspotLeft + \"px\");\n                hotspot.style.setProperty(\"--sp-hotspot-top-px\", hotspotTop + \"px\");\n            });\n        }\n\n        let hotspotFrame = null;\n\n        function scheduleFeatureHotspotSync() {\n            if (hotspotFrame) {\n                window.cancelAnimationFrame(hotspotFrame);\n            }\n\n            hotspotFrame = window.requestAnimationFrame(function () {\n                hotspotFrame = null;\n                syncFeatureHotspots();\n            });\n        }\n\n        function showSlide(index) {\n            if (index < 0) index = slides.length - 1;\n            if (index >= slides.length) index = 0;\n\n            slides.forEach(function (slide, i) {\n                slide.classList.toggle(\"active\", i === index);\n            });\n\n            thumbs.forEach(function (thumb) {\n                const target = parseInt(thumb.getAttribute(\"data-target\"), 10);\n                thumb.classList.toggle(\"active\", target === index);\n            });\n\n            pageDots.forEach(function (dot, i) {\n                dot.classList.toggle(\"active\", i === index);\n            });\n\n            currentIndex = index;\n\n            if (index === 0) {\n                updateFeatureText();\n            } else {\n                const activeVariant = slides[index];\n                if (activeVariant) {\n                    updateVariantText(activeVariant, activeVariant.dataset.currentView || activeVariant.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || activeVariant.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\");\n                }\n            }\n\n            const activeThumb = Array.from(thumbs).find(function (thumb) {\n                return parseInt(thumb.getAttribute(\"data-target\"), 10) === index;\n            });\n\n            if (activeThumb && thumbnailContainer) {\n                const left = activeThumb.offsetLeft;\n                const right = left + activeThumb.offsetWidth;\n                const viewLeft = thumbnailContainer.scrollLeft;\n                const viewRight = viewLeft + thumbnailContainer.clientWidth;\n\n                if (left < viewLeft || right > viewRight) {\n                    thumbnailContainer.scrollTo({\n                        left: left - (thumbnailContainer.clientWidth \/ 2) + (activeThumb.offsetWidth \/ 2),\n                        behavior: \"smooth\"\n                    });\n                }\n            }\n\n            hotspots.forEach(function (hotspot) {\n                hotspot.classList.remove(\"is-open\");\n            });\n        }\n\n        thumbs.forEach(function (thumb) {\n            thumb.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const target = parseInt(thumb.getAttribute(\"data-target\"), 10);\n                if (!isNaN(target)) showSlide(target);\n            });\n        });\n\n        pageDots.forEach(function (dot) {\n            dot.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const target = parseInt(dot.getAttribute(\"data-page\"), 10);\n                if (!isNaN(target)) showSlide(target);\n            });\n        });\n\n        function scrollThumbnailStrip(direction) {\n            if (!thumbnailContainer || !window.matchMedia(\"(max-width: 600px)\").matches) return;\n\n            const items = Array.from(thumbnailContainer.querySelectorAll(\".sp-thumb\"));\n            if (!items.length) return;\n\n            let activeIndex = items.findIndex(function (thumb) {\n                return thumb.classList.contains(\"active\");\n            });\n\n            if (activeIndex < 0) activeIndex = 0;\n\n            let targetIndex = activeIndex + (direction > 0 ? 1 : -1);\n            if (targetIndex < 0) targetIndex = items.length - 1;\n            if (targetIndex >= items.length) targetIndex = 0;\n\n            items[targetIndex].click();\n            items[targetIndex].scrollIntoView({\n                behavior: \"smooth\",\n                block: \"nearest\",\n                inline: \"center\"\n            });\n        }\n\n        if (thumbPrev) {\n            thumbPrev.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n                scrollThumbnailStrip(-1);\n            });\n        }\n\n        if (thumbNext) {\n            thumbNext.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n                scrollThumbnailStrip(1);\n            });\n        }\n\n        hotspots.forEach(function (hotspot) {\n            hotspot.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const isOpen = hotspot.classList.contains(\"is-open\");\n\n                hotspots.forEach(function (item) {\n                    item.classList.remove(\"is-open\");\n                });\n\n                if (!isOpen) hotspot.classList.add(\"is-open\");\n            });\n        });\n\n        document.addEventListener(\"click\", function (event) {\n            if (!gallery.contains(event.target)) {\n                hotspots.forEach(function (hotspot) {\n                    hotspot.classList.remove(\"is-open\");\n                });\n            }\n        });\n\n        \/* Dynamic Attribute & Dynamic Content Parity Handling *\/\n        function getViewDataAttributeName(view, field) {\n            if (!view) return \"data-\" + field;\n            return \"data-\" + view.replace(\/\\s+\/g, \"-\") + \"-\" + field;\n        }\n\n        function getViewCopy(slide, view) {\n            if (!slide) {\n                return { kicker: \"\", title: \"\", subtitle: \"\", partNumber: \"\" };\n            }\n\n            const variationView = view || \"\";\n            const isVariation = slide.classList.contains(\"sp-variant-slide\");\n\n            if (isVariation && variationView) {\n                return {\n                    kicker: slide.getAttribute(getViewDataAttributeName(variationView, \"kicker\")) || \"\",\n                    title: slide.getAttribute(getViewDataAttributeName(variationView, \"title\")) || \"\",\n                    subtitle: slide.getAttribute(getViewDataAttributeName(variationView, \"subtitle\")) || \"\",\n                    partNumber: slide.getAttribute(getViewDataAttributeName(variationView, \"part-number\")) || \"\"\n                };\n            }\n\n            return {\n                kicker: slide.getAttribute(\"data-kicker\") || \"\",\n                title: slide.getAttribute(\"data-title\") || \"\",\n                subtitle: slide.getAttribute(\"data-subtitle\") || \"\",\n                partNumber: slide.getAttribute(\"data-part-number\") || \"\"\n            };\n        }\n\n        function updateVariantText(slide, view) {\n            const copy = getViewCopy(slide, view);\n            const mobileTitle = slide.querySelector(\".sp-mobile-variant-title .sp-slide-title\");\n            const mobileSubtitle = slide.querySelector(\".sp-mobile-variant-title .sp-slide-subtitle\");\n            const desktopTitle = slide.querySelector(\".sp-side-info .sp-slide-title\");\n            const desktopSubtitle = slide.querySelector(\".sp-side-info .sp-slide-subtitle\");\n            const partNumber = slide.querySelector(\".sp-part-number-value\");\n\n            if (mobileTitle) mobileTitle.textContent = copy.title;\n            if (mobileSubtitle) mobileSubtitle.textContent = copy.subtitle;\n            if (desktopTitle) desktopTitle.textContent = copy.title;\n            if (desktopSubtitle) desktopSubtitle.textContent = copy.subtitle;\n            if (partNumber) partNumber.textContent = copy.partNumber;\n        }\n\n        function updateFeatureText() {\n            const featureSlide = slides[0];\n            if (!featureSlide) return;\n\n            const copy = getViewCopy(featureSlide, \"\");\n            const title = featureSlide.querySelector(\".sp-slide-info .sp-slide-title\");\n            const subtitle = featureSlide.querySelector(\".sp-slide-info .sp-slide-subtitle\");\n            const partNumber = featureSlide.querySelector(\".sp-part-number-value\");\n\n            if (title) title.textContent = copy.title;\n            if (subtitle) subtitle.textContent = copy.subtitle;\n            if (partNumber) partNumber.textContent = copy.partNumber;\n        }\n\n        \/* Variation Toggles *\/\n        variantSlides.forEach(function (slide) {\n            const image = slide.querySelector(\".sp-variant-image\");\n            const viewButtons = slide.querySelectorAll(\".sp-amp-btn\");\n            const currentView = slide.querySelector(\".sp-current-amp\");\n\n            if (!image) return;\n\n            slide.dataset.currentView = slide.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || slide.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\";\n\n            function updateImage() {\n                const view = slide.dataset.currentView || \"\";\n                const source = slide.getAttribute(\"data-\" + view.replace(\/\\s+\/g, \"-\")) || slide.getAttribute(\"data-\" + view) || \"\";\n                updateVariantText(slide, view);\n\n                image.style.opacity = \"0\";\n\n                window.setTimeout(function () {\n                    if (source) {\n                        image.src = source;\n                        image.classList.remove(\"is-empty\");\n                    } else {\n                        image.removeAttribute(\"src\");\n                        image.classList.add(\"is-empty\");\n                    }\n\n                    image.style.opacity = \"1\";\n\n                    if (fullscreenModal.classList.contains(\"is-open\")) {\n                        refreshFullscreenModal();\n                    }\n                }, 90);\n\n                viewButtons.forEach(function (button) {\n                    button.classList.toggle(\n                        \"active\",\n                        button.getAttribute(\"data-view\") === view\n                    );\n                });\n\n                if (currentView) {\n                    currentView.innerHTML = \"Showing <strong>\" + view + \"<\/strong>\";\n                }\n            }\n\n            function setView(view) {\n                slide.dataset.currentView = view || \"\";\n                updateImage();\n            }\n\n            slide._setView = setView;\n\n            viewButtons.forEach(function (button) {\n                button.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setView(button.getAttribute(\"data-view\"));\n                });\n            });\n\n            setView(slide.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || slide.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\");\n        });\n\n        \/* Fullscreen Modal Initialization *\/\n        const fullscreenModal = document.createElement(\"div\");\n        fullscreenModal.className = \"sp-fullscreen-modal\";\n        fullscreenModal.setAttribute(\"aria-hidden\", \"true\");\n        fullscreenModal.innerHTML = `\n            <div class=\"sp-fullscreen-dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Product full screen view\">\n                <button type=\"button\" class=\"sp-fullscreen-close\" aria-label=\"Close full screen\">&times;<\/button>\n                <div class=\"sp-fullscreen-image-area\">\n                    <img class=\"sp-fullscreen-image\" alt=\"\">\n                <\/div>\n                <div class=\"sp-fullscreen-info\">\n                    <div class=\"sp-fullscreen-title\"><\/div>\n                    <div class=\"sp-fullscreen-description\"><\/div>\n                    <div class=\"sp-fullscreen-part-number\">PART NUMBER: <strong class=\"sp-fullscreen-part-number-value\"><\/strong><\/div>\n                    <div class=\"sp-fullscreen-amp-wrap\">\n                        <div class=\"sp-fullscreen-amp-label\">SELECT VIEW<\/div>\n                        <div class=\"sp-fullscreen-amp-toggle\" role=\"group\" aria-label=\"Fullscreen product configuration\"><\/div>\n                    <\/div>\n                    <div class=\"sp-fullscreen-thumbnails\"><\/div>\n                <\/div>\n            <\/div>\n        `;\n\n        gallery.appendChild(fullscreenModal);\n\n        const fullscreenImage = fullscreenModal.querySelector(\".sp-fullscreen-image\");\n        const fullscreenTitle = fullscreenModal.querySelector(\".sp-fullscreen-title\");\n        const fullscreenDescription = fullscreenModal.querySelector(\".sp-fullscreen-description\");\n        const fullscreenPartNumber = fullscreenModal.querySelector(\".sp-fullscreen-part-number-value\");\n        const fullscreenViewWrap = fullscreenModal.querySelector(\".sp-fullscreen-amp-wrap\");\n        const fullscreenAmpToggle = fullscreenModal.querySelector(\".sp-fullscreen-amp-toggle\");\n        const fullscreenThumbs = fullscreenModal.querySelector(\".sp-fullscreen-thumbnails\");\n        const fullscreenClose = fullscreenModal.querySelector(\".sp-fullscreen-close\");\n\n        const FEATURE_FULLSCREEN_IMAGE = \"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/MR28-RF28.png\";\n\n        function getActiveGalleryImage() {\n            const activeSlide = slides[currentIndex];\n            if (!activeSlide) return null;\n\n            if (currentIndex === 0) {\n                return activeSlide.querySelector(\".sp-main-image-clip img\");\n            }\n\n            return activeSlide.querySelector(\".sp-variant-image\");\n        }\n\n        function getActiveGalleryCopy() {\n            const activeSlide = slides[currentIndex];\n            if (!activeSlide) {\n                return { kicker: \"\", title: \"\", description: \"\", partNumber: \"\" };\n            }\n\n            const view = activeSlide.classList.contains(\"sp-variant-slide\")\n                ? (activeSlide.dataset.currentView || activeSlide.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || activeSlide.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\")\n                : \"\";\n\n            const copy = getViewCopy(activeSlide, view);\n\n            return {\n                kicker: copy.kicker,\n                title: copy.title,\n                description: copy.subtitle,\n                partNumber: copy.partNumber\n            };\n        }\n\n        function applyFullscreenSettings() {\n            const dialog = fullscreenModal.querySelector(\".sp-fullscreen-dialog\");\n            if (!dialog) return;\n\n            dialog.style.setProperty(\"--sp-popup-width-desktop\", \"1100px\");\n            dialog.style.setProperty(\"--sp-popup-height-desktop\", \"520px\");\n            dialog.style.setProperty(\"--sp-popup-width-mobile\", \"calc(100vw - 16px)\");\n            dialog.style.setProperty(\"--sp-popup-height-mobile\", \"90vh\");\n            dialog.style.setProperty(\"--sp-popup-image-area-height-mobile\", \"54vh\");\n\n            fullscreenImage.style.setProperty(\"--sp-popup-image-width-desktop\", \"100%\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-height-desktop\", \"100%\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-x-desktop\", \"0px\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-y-desktop\", \"0px\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-width-mobile\", \"100%\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-height-mobile\", \"100%\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-x-mobile\", \"0px\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-y-mobile\", \"0px\");\n        }\n\n        function refreshFullscreenModal() {\n            const activeImage = getActiveGalleryImage();\n            if (!activeImage || !activeImage.src) return;\n\n            const copy = getActiveGalleryCopy();\n            const activeSlide = slides[currentIndex];\n            const isVariation = currentIndex >= 1 && activeSlide;\n            const view = isVariation\n                ? (activeSlide.dataset.currentView || activeSlide.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || activeSlide.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\")\n                : \"\";\n\n            const viewImage = isVariation\n                ? (activeSlide.getAttribute(\"data-\" + view.replace(\/\\s+\/g, \"-\")) || activeSlide.getAttribute(\"data-\" + view) || \"\")\n                : FEATURE_FULLSCREEN_IMAGE;\n\n            applyFullscreenSettings();\n\n            fullscreenImage.src = viewImage || activeImage.currentSrc || activeImage.src;\n            fullscreenImage.alt = copy.title || activeImage.alt || \"\";\n            fullscreenTitle.textContent = copy.title || \"\";\n            fullscreenDescription.textContent = copy.description || \"\";\n\n            if (fullscreenPartNumber) {\n                fullscreenPartNumber.textContent = isVariation ? (copy.partNumber || \"\") : \"\";\n                fullscreenPartNumber.parentElement.style.display = isVariation ? \"block\" : \"none\";\n            }\n\n            fullscreenViewWrap.classList.toggle(\"is-visible\", !!isVariation);\n\n            fullscreenAmpToggle.innerHTML = \"\";\n            if (isVariation) {\n                const activeButtons = Array.from(activeSlide.querySelectorAll(\".sp-amp-btn\"));\n                activeButtons.forEach(function (srcBtn) {\n                    const btnView = srcBtn.getAttribute(\"data-view\");\n                    const btn = document.createElement(\"button\");\n                    btn.type = \"button\";\n                    btn.className = \"sp-fullscreen-amp-btn\" + (btnView === view ? \" active\" : \"\");\n                    btn.setAttribute(\"data-view\", btnView);\n                    btn.textContent = srcBtn.textContent.trim();\n\n                    btn.addEventListener(\"click\", function (e) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        if (typeof activeSlide._setView === \"function\") {\n                            activeSlide._setView(btnView);\n                            window.setTimeout(refreshFullscreenModal, 110);\n                        }\n                    });\n                    fullscreenAmpToggle.appendChild(btn);\n                });\n            }\n\n            fullscreenThumbs.innerHTML = \"\";\n\n            thumbs.forEach(function (thumb) {\n                const sourceImage = thumb.querySelector(\"img\");\n                if (!sourceImage) return;\n\n                const modalThumb = document.createElement(\"button\");\n                modalThumb.type = \"button\";\n                modalThumb.className = \"sp-fullscreen-thumb\";\n                modalThumb.setAttribute(\"aria-label\", thumb.getAttribute(\"aria-label\") || \"View product image\");\n\n                const modalThumbImage = document.createElement(\"img\");\n                modalThumbImage.src = sourceImage.currentSrc || sourceImage.src;\n                modalThumbImage.alt = sourceImage.alt || \"\";\n                modalThumb.appendChild(modalThumbImage);\n\n                const thumbTarget = parseInt(thumb.getAttribute(\"data-target\"), 10);\n                if (thumbTarget === currentIndex) modalThumb.classList.add(\"active\");\n\n                modalThumb.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    showSlide(thumbTarget);\n                    window.setTimeout(refreshFullscreenModal, 110);\n                });\n\n                fullscreenThumbs.appendChild(modalThumb);\n            });\n        }\n\n        let fullscreenScrollTop = 0;\n        let fullscreenScrollLeft = 0;\n        let fullscreenBodyPaddingRight = \"\";\n\n        function openFullscreenModal() {\n            refreshFullscreenModal();\n\n            fullscreenScrollTop = window.scrollY || window.pageYOffset || 0;\n            fullscreenScrollLeft = window.scrollX || window.pageXOffset || 0;\n            fullscreenBodyPaddingRight = document.body.style.paddingRight;\n\n            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n            if (scrollbarWidth > 0) {\n                document.body.style.paddingRight = scrollbarWidth + \"px\";\n            }\n\n            fullscreenModal.classList.add(\"is-open\");\n            fullscreenModal.setAttribute(\"aria-hidden\", \"false\");\n            document.body.style.overflow = \"hidden\";\n        }\n\n        function closeFullscreenModal() {\n            fullscreenModal.classList.remove(\"is-open\");\n            fullscreenModal.setAttribute(\"aria-hidden\", \"true\");\n            document.body.style.overflow = \"\";\n            document.body.style.paddingRight = fullscreenBodyPaddingRight;\n\n            window.scrollTo({\n                top: fullscreenScrollTop,\n                left: fullscreenScrollLeft,\n                behavior: \"auto\"\n            });\n        }\n\n        fullscreenClose.addEventListener(\"click\", function (event) {\n            event.preventDefault();\n            closeFullscreenModal();\n        });\n\n        fullscreenModal.addEventListener(\"click\", function (event) {\n            if (event.target === fullscreenModal) closeFullscreenModal();\n        });\n\n        document.addEventListener(\"keydown\", function (event) {\n            if (event.key === \"Escape\" && fullscreenModal.classList.contains(\"is-open\")) {\n                closeFullscreenModal();\n            }\n        });\n\n        \/* Fullscreen Triggers directly attached after part number element *\/\n        function addFullscreenButtons() {\n            const featureWrap = gallery.querySelector(\".sp-main-product\");\n\n            if (featureWrap && !featureWrap.closest(\".sp-gallery-slide\").querySelector(\".sp-fullscreen-trigger\")) {\n                const button = document.createElement(\"button\");\n                button.type = \"button\";\n                button.className = \"sp-fullscreen-trigger\";\n                button.textContent = \"View Full Screen\";\n                button.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    openFullscreenModal();\n                });\n\n                const featureInfo = featureWrap.closest(\".sp-gallery-slide\").querySelector(\".sp-slide-info\");\n                if (featureInfo) {\n                    featureInfo.appendChild(button);\n                } else {\n                    featureWrap.appendChild(button);\n                }\n            }\n\n            variantSlides.forEach(function (slide) {\n                const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\n                if (!imageWrap || slide.querySelector(\".sp-fullscreen-trigger\")) return;\n\n                const button = document.createElement(\"button\");\n                button.type = \"button\";\n                button.className = \"sp-fullscreen-trigger\";\n                button.textContent = \"View Full Screen\";\n                button.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    openFullscreenModal();\n                });\n\n                const sideInfo = slide.querySelector(\".sp-side-info\");\n\n                if (sideInfo) {\n                    const partNumber = sideInfo.querySelector(\".sp-part-number\");\n                    if (partNumber) {\n                        partNumber.insertAdjacentElement(\"afterend\", button);\n                    } else {\n                        sideInfo.appendChild(button);\n                    }\n                } else {\n                    imageWrap.appendChild(button);\n                }\n            });\n        }\n\n        function setupHoverZoom() {\n            variantSlides.forEach(function (slide) {\n                const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\n                const image = slide.querySelector(\".sp-variant-image\");\n                if (!imageWrap || !image || imageWrap.dataset.zoomInitialized === \"true\") return;\n\n                imageWrap.dataset.zoomInitialized = \"true\";\n\n                const preview = document.createElement(\"div\");\n                preview.className = \"sp-zoom-preview\";\n\n                const previewImage = document.createElement(\"img\");\n                previewImage.alt = \"\";\n                preview.appendChild(previewImage);\n                imageWrap.appendChild(preview);\n\n                function syncPreviewImage() {\n                    const source = image.currentSrc || image.src;\n                    if (source) previewImage.src = source;\n                }\n\n                image.addEventListener(\"load\", syncPreviewImage);\n                syncPreviewImage();\n\n                imageWrap.addEventListener(\"mouseenter\", function () {\n                    syncPreviewImage();\n                    imageWrap.classList.add(\"sp-zoom-active\");\n                });\n\n                imageWrap.addEventListener(\"mouseleave\", function () {\n                    imageWrap.classList.remove(\"sp-zoom-active\");\n                });\n\n                imageWrap.addEventListener(\"mousemove\", function (event) {\n                    if (window.innerWidth <= 600) return;\n\n                    const rect = imageWrap.getBoundingClientRect();\n                    const x = Math.max(0, Math.min(1, (event.clientX - rect.left) \/ rect.width));\n                    const y = Math.max(0, Math.min(1, (event.clientY - rect.top) \/ rect.height));\n\n                    previewImage.style.left = (-x * 100) + \"%\";\n                    previewImage.style.top = (-y * 100) + \"%\";\n                });\n            });\n        }\n\n        addFullscreenButtons();\n        setupHoverZoom();\n\n        if (window.jQuery) {\n            jQuery(document).on(\n                \"found_variation.spELCIGallery\",\n                \"form.variations_form\",\n                function (event, variation) {\n                    if (!variation || !variation.image || !variation.image.src) return;\n\n                    const variationImage = variation.image.src;\n\n                    thumbs.forEach(function (thumb, index) {\n                        const image = thumb.querySelector(\"img\");\n                        if (!image) return;\n\n                        const thumbImage = image.currentSrc || image.src;\n\n                        if (\n                            thumbImage === variationImage ||\n                            thumbImage.includes(variationImage) ||\n                            variationImage.includes(thumbImage)\n                        ) {\n                            showSlide(index);\n                        }\n                    });\n                }\n            );\n        }\n\n        showSlide(0);\n\n        const featureImage = slides[0]?.querySelector(\".sp-main-image-clip img\");\n        if (featureImage) {\n            if (featureImage.complete) {\n                scheduleFeatureHotspotSync();\n            } else {\n                featureImage.addEventListener(\"load\", scheduleFeatureHotspotSync, { once: true });\n            }\n        }\n\n        window.addEventListener(\"resize\", scheduleFeatureHotspotSync);\n        window.addEventListener(\"orientationchange\", scheduleFeatureHotspotSync);\n\n        \/* Keep hotspots attached if Elementor, a responsive container, or a\n           font\/layout change alters the feature-image container without a\n           normal window resize event. *\/\n        if (window.ResizeObserver) {\n            const featureClip = slides[0]?.querySelector(\".sp-main-image-clip\");\n            if (featureClip) {\n                const hotspotResizeObserver = new ResizeObserver(function () {\n                    scheduleFeatureHotspotSync();\n                });\n                hotspotResizeObserver.observe(featureClip);\n                gallery._hotspotResizeObserver = hotspotResizeObserver;\n            }\n        }\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\"DOMContentLoaded\", initSmartPlugELCIGallery);\n    } else {\n        initSmartPlugELCIGallery();\n    }\n\n    if (window.jQuery) {\n        jQuery(window).on(\"elementor\/frontend\/init\", function () {\n            setTimeout(initSmartPlugELCIGallery, 150);\n        });\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0b8b64e 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=\"0b8b64e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-17d6100 elementor-widget elementor-widget-heading\" data-id=\"17d6100\" 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\">28V DC Power<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8527e7f elementor-widget elementor-widget-text-editor\" data-id=\"8527e7f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Engineered for continuous 28V DC power, the SmartPlug TideLock\u2122 system provides a secure, purpose-built connection for electric fishing reels and demanding marine applications. Its straight-in, keyed push-lock design eliminates the twisting required by traditional twist-lock connections, helping reduce pin damage while keeping the connection firmly locked in place under continuous load. Built with a marine-grade, UV-stabilized composite housing and nickel-plated, corrosion-resistant contacts, the system is designed to withstand demanding marine environments while delivering reliable power. The flush-mounted DC Power Point and spring-loaded weather door provide a clean, weather-protected connection, making the 28V DC Power system ideal for electric reels, downriggers, trolling motors, and pot pullers. I<span data-teams=\"true\">nstallation of the receptacles require the weatherdoor RDPWP for weatherproof connection and operation.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce4f019 elementor-widget elementor-widget-button\" data-id=\"ce4f019\" 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>28V DC Power 1 Secure Locking ConnectionStainless steel locking clip ensures a tight, vibration-resistant connection that stays locked in place. 2 Non-Twisting Contact DesignUnique contact design prevents twisting and reduces wear for a secure, long-lasting connection. 3 Weather-Resistant ConstructionDurable, marine-grade housing with protective cover keeps connections safe from water, dust, and corrosion. KEY FEATURES Click the numbered points to explore the 28VDC System MR28VDC INLET Front View 28V 30A DC Male Retro-Fit Connector Front View SELECT VIEW Front Rear Showing Front PART NUMBER: MR28VDC 28V 30A DC Female Receptacle and Weatherdoor RF28 28V 30A DC Female Receptacle Front SELECT VIEW RF28 Weatherdoor Showing RF28 PART NUMBER: RF28VDC &#10094; Features MR28VDC RF28VDC &#10095; 28V DC Power Engineered for continuous 28V DC power, the SmartPlug TideLock\u2122 system provides a secure, purpose-built connection for electric fishing reels and demanding marine applications. Its straight-in, keyed push-lock design eliminates the twisting required by traditional twist-lock connections, helping reduce pin damage while keeping the connection firmly locked in place under continuous load. Built with a marine-grade, UV-stabilized composite housing and nickel-plated, corrosion-resistant contacts, the system is designed to withstand demanding marine environments while delivering reliable power. The flush-mounted DC Power Point and spring-loaded weather door provide a clean, weather-protected connection, making the 28V DC Power system ideal for electric reels, downriggers, trolling motors, and pot pullers. Installation of the receptacles require the weatherdoor RDPWP for weatherproof connection and operation. WHERE TO BUY<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-16393","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/16393","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=16393"}],"version-history":[{"count":80,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/16393\/revisions"}],"predecessor-version":[{"id":20567,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/16393\/revisions\/20567"}],"wp:attachment":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/media?parent=16393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}