{"id":11358,"date":"2025-12-19T21:11:25","date_gmt":"2025-12-19T21:11:25","guid":{"rendered":"https:\/\/dev.smartplug.com\/staging\/?page_id=11358"},"modified":"2026-09-25T22:56:53","modified_gmt":"2026-09-25T22:56:53","slug":"smartplug-male-connector-gasket","status":"publish","type":"page","link":"https:\/\/dev.smartplug.com\/staging\/smartplug-male-connector-gasket\/","title":{"rendered":"SmartPlug Male Connector Gasket"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11358\" class=\"elementor elementor-11358\">\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 Male Inlet Gasket<\/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            <div id=\"sp-elci-gallery\">\n                <div class=\"sp-main-view\">\n\n                    <!-- =========================================================\n                         FEATURES\n                         Product-specific content is editable here.\n                         ========================================================= -->\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 Male Inlet Gasket.\"\n                        data-part-number=\"PKMGKT\"\n                    >\n                        <div class=\"sp-product-image-wrap sp-main-product sp-hotspot-image\" style=\"\n                                    --image-x-desktop:0px;\n                                    --image-y-desktop:-10px;\n                                    --image-scale-desktop:1.1;\n                                    --image-x-mobile:10px;\n                                    --image-y-mobile:0px;\n                                    --image-scale-mobile:1.6;\n                                    \">\n                            <div class=\"sp-main-image-clip\">\n                                <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/06\/SmartPlug-Male-Connector-Gasket-1.png\"\n                                     alt=\"Male Inlet Gaskets\">\n                            <\/div>\n\n                            <!-- HOTSPOT 1 -->\n                            <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                        --top:74.5%;\n                        --left:28%;\n                        --hotspot-x:0px;\n                        --hotspot-y:0px;\n                        --hotspot-scale-desktop:1;\n                        --hotspot-scale-laptop:1;\n                        --hotspot-scale-tablet:.9;\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:220px;\n                        --dot-size:34px;\n                        --number-size:14px;\n                    \n                                    \">\n                                <div class=\"sp-dot\"><span class=\"sp-number\">1<\/span><\/div>\n                                <div class=\"sp-tooltip\"><strong>Complete Replacement Kit<\/strong><br>Includes the gaskets needed for quick replacement.<\/div>\n                            <\/div>\n\n                            <!-- HOTSPOT 2 -->\n                            <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                        --top:78%;\n                        --left:73%;\n                        --hotspot-x:0px;\n                        --hotspot-y:0px;\n                        --hotspot-scale-desktop:1;\n                        --hotspot-scale-laptop:1;\n                        --hotspot-scale-tablet:.9;\n                        --hotspot-scale-mobile:.8;\n                        --tooltip-x-desktop:0px;\n                        --tooltip-y-desktop:0px;\n                        --tooltip-scale-desktop:1;\n                        --tooltip-x-mobile:-50px;\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:240px;\n                        --dot-size:34px;\n                        --number-size:16px;\n                    \n                                    \">\n                                <div class=\"sp-dot\"><span class=\"sp-number\">2<\/span><\/div>\n                                <div class=\"sp-tooltip\"><strong>Retail Packaging<\/strong><br>Keeps parts organized and easy to store.<\/div>\n                            <\/div>\n\n                            <!-- HOTSPOT 3 -->\n                            <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                        --top:22%;\n                        --left:73%;\n                        --hotspot-x:0px;\n                        --hotspot-y:0px;\n                        --hotspot-scale-desktop:1;\n                        --hotspot-scale-laptop:1;\n                        --hotspot-scale-tablet:.9;\n                        --hotspot-scale-mobile:.8;\n                        --tooltip-x-desktop:0px;\n                        --tooltip-y-desktop:0px;\n                        --tooltip-scale-desktop:1;\n                        --tooltip-x-mobile:-50px;\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:240px;\n                        --dot-size:34px;\n                        --number-size:16px;\n                    \n                                    \">\n                                <div class=\"sp-dot\"><span class=\"sp-number\">3<\/span><\/div>\n                                <div class=\"sp-tooltip\"><strong>Multi-Color Compatibility<\/strong><br>Fits SmartPlug inlets in all available colors.<\/div>\n                            <\/div>\n\n                            <!-- HOTSPOT 4 -->\n                            <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                        --top:22%;\n                        --left:28%;\n                        --hotspot-x:0px;\n                        --hotspot-y:0px;\n                        --hotspot-scale-desktop:1;\n                        --hotspot-scale-laptop:1;\n                        --hotspot-scale-tablet:.9;\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:240px;\n                        --dot-size:34px;\n                        --number-size:16px;\n                    \n                                    \">\n                                <div class=\"sp-dot\"><span class=\"sp-number\">4<\/span><\/div>\n                                <div class=\"sp-tooltip\"><strong>Non-Metallic Gaskets<\/strong><br>Creates a secure, leak-resistant seal.<\/div>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"sp-slide-info\">\n                            <div class=\"sp-slide-title\">Male Inlet Gaskets<\/div>\n                            <div class=\"sp-slide-subtitle\"><\/div>\n                            <button type=\"button\" class=\"sp-fullscreen-trigger sp-feature-fullscreen-trigger\">\n                                View Full Screen\n                            <\/button>\n                        <\/div>\n                    <\/div>\n\n                    <!-- =========================================================\n                         FIRST VARIATION\n                         Two image\/views of the same variation.\n                         No configuration\/toggle controls.\n                         Edit each view independently below.\n                         ========================================================= -->\n                    <div class=\"sp-gallery-slide sp-variant-slide\"\n                        data-slide=\"1\"\n                        data-variant=\"first-variation\"\n                        data-view=\"view1\"\n                        data-current-view=\"view1\"\n\n                        data-view1=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/MALE-INLET-GASKETS-inside.png\"\n                        data-view1-title=\"Male Inlet Gaskets\"\n                        data-view1-subtitle=\"Open View\"\n                        data-view1-part-number=\"PKMGKT\"\n\n                    >\n                        <div class=\"sp-variant-layout\">\n                            <div class=\"sp-mobile-variant-title\">\n                                <div class=\"sp-slide-title\">Male Inlet Gaskets<\/div>\n                                <div class=\"sp-slide-subtitle\">Open View<\/div>\n                            <\/div>\n\n                            <div class=\"sp-variant-image-wrap\">\n                                <img decoding=\"async\" class=\"sp-variant-image sp-view-image\"\n                                     src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/MALE-INLET-GASKETS-inside.png\"\n                                     alt=\"Male Inlet Gaskets\"\n                                     role=\"button\"\n                                     tabindex=\"0\"\n                                     aria-label=\"Switch First Variation image view\"\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\n                            <div class=\"sp-slide-info sp-side-info\">\n                                <div class=\"sp-slide-title\">Male Inlet Gaskets<\/div>\n                                <div class=\"sp-slide-subtitle\">Open View<\/div>\n\n                                <div class=\"sp-part-number\">\n                                    PART NUMBER: <strong class=\"sp-part-number-value\"><\/strong>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n\n                <!-- EXACTLY TWO MAIN THUMBNAILS -->\n                <div class=\"sp-product-selector\">\n                    <button type=\"button\" class=\"sp-thumb-nav sp-thumb-prev\" aria-label=\"Previous product image\">&#10094;<\/button>\n                    <div class=\"sp-thumbnails\">\n                        <button type=\"button\" class=\"sp-thumb sp-feature-thumb active\" data-target=\"0\" aria-label=\"View Male Inlet Gaskets features\">\n                            <span class=\"sp-thumb-image\"><img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/MALE-INLET-GASKETS-1.png\" alt=\"Male Inlet Gaskets Features\"><\/span>\n                            <span class=\"sp-thumb-label\">Features<\/span>\n                        <\/button>\n                        <button type=\"button\" class=\"sp-thumb\" data-target=\"1\" aria-label=\"View Male Inlet Gaskets First Variation\">\n                            <span class=\"sp-thumb-image\"><img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/MALE-INLET-GASKETS-inside.png\" alt=\"Male Inlet Gaskets First Variation\"><\/span>\n                            <span class=\"sp-thumb-label\">First Variation<\/span>\n                        <\/button>\n                    <\/div>\n                    <button type=\"button\" class=\"sp-thumb-nav sp-thumb-next\" aria-label=\"Next product image\">&#10095;<\/button>\n                <\/div>\n\n                <!-- EXACTLY TWO PAGINATION DOTS -->\n                <div class=\"sp-gallery-pagination\" aria-label=\"Product gallery pagination\">\n                    <button type=\"button\" class=\"sp-page-dot active\" data-page=\"0\" aria-label=\"Go to features\"><\/button>\n                    <button type=\"button\" class=\"sp-page-dot\" data-page=\"1\" aria-label=\"Go to first variation\"><\/button>\n                <\/div>\n            <\/div>\n\n            <style>\n            \/* =========================================================\n            SMARTPLUG DUAL CORDSET GALLERY\n            Amazon-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            \/* =========================================================\n            MAIN 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            \/* =========================================================\n            FEATURE 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(\n                    var(--image-x-desktop),\n                    var(--image-y-desktop)\n                )\n                scale(var(--image-scale-desktop));\n                transform-origin: center center;\n                transition: transform .18s ease;\n            }\n\n            \/* =========================================================\n            VARIANT 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            \/* =========================================================\n            PRODUCT 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 2px 2px 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-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            \/* =========================================================\n            HOTSPOTS\n            ========================================================= *\/\n\n            #sp-elci-gallery .sp-hotspot {\n                position: absolute;\n                z-index: 1;\n                top: var(--sp-hotspot-top-px, var(--top)) !important;\n                left: var(--sp-hotspot-left-px, var(--left)) !important;\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                will-change: top, left, transform;\n            }\n\n            \/* LAPTOP: keep the dynamic pixel position; only the bubble scale changes. *\/\n            @media (min-width: 1025px) and (max-width: 1366px) {\n                #sp-elci-gallery .sp-hotspot {\n                    top: var(--sp-hotspot-top-px, var(--top)) !important;\n                    left: var(--sp-hotspot-left-px, var(--left)) !important;\n                    transform:\n                        translate(-50%, -50%)\n                        scale(var(--hotspot-scale-laptop)) !important;\n                }\n            }\n\n            \/* TABLET: keep the dynamic pixel position; only the bubble scale changes. *\/\n            @media (min-width: 601px) and (max-width: 1024px) {\n                #sp-elci-gallery .sp-hotspot {\n                    top: var(--sp-hotspot-top-px, var(--top)) !important;\n                    left: var(--sp-hotspot-left-px, var(--left)) !important;\n                    transform:\n                        translate(-50%, -50%)\n                        scale(var(--hotspot-scale-tablet)) !important;\n                }\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                z-index: 81;\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            \/* =========================================================\n            AMAZON-STYLE PRODUCT SELECTOR\n            ========================================================= *\/\n\n            #sp-elci-gallery .sp-product-selector {\n                width: 100%;\n                display: flex;\n                align-items: stretch;\n                gap: 6px;\n                margin-top: 4px;\n            }\n\n            #sp-elci-gallery .sp-thumbnails {\n                flex: 1 1 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            }\n\n            #sp-elci-gallery .sp-thumb-part {\n                display: block;\n                color: #777;\n                font-size: 8px;\n                font-weight: 600;\n                line-height: 1;\n            }\n\n            #sp-elci-gallery .sp-thumb-view {\n                display: block;\n                color: #777;\n                font-size: 8px;\n                font-weight: 600;\n                line-height: 1;\n            }\n\n            #sp-elci-gallery .sp-feature-thumb .sp-thumb-part {\n                visibility: hidden;\n            }\n\n            \/* =========================================================\n            THUMBNAIL 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            \/* =========================================================\n            PAGINATION\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            \/* =========================================================\n            FULL 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                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            \/* FEATURE \u2014 centered View Full Screen button directly after the subtitle *\/\n            #sp-elci-gallery .sp-feature-fullscreen-trigger {\n                display: flex;\n                width: max-content;\n                margin: 7px auto 0;\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:50;\n                transition:opacity .12s ease, visibility .12s ease;\n            }\n\n            #sp-elci-gallery .sp-zoom-preview img {\n                position:absolute;\n                max-width:none;\n                max-height:none;\n                width:auto;\n                height:auto;\n                object-fit:fill;\n                display:block;\n                pointer-events:none;\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\n                \/* =====================================================\n                   FULL SCREEN POPUP SIZE \u2014 EDIT HERE\n                   Change these values for the desktop popup size.\n                   ===================================================== *\/\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\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                \/*\n                 * Popup image size and position are controlled by the\n                 * FULLSCREEN_CONTENT settings below.\n                 *\/\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                max-width: 320px;\n                margin-top: 18px;\n                display: grid;\n                grid-template-columns: repeat(4, 72px);\n                grid-template-rows: 72px;\n                grid-auto-flow: row;\n                gap: 12px;\n                align-items: stretch;\n                justify-content: start;\n                overflow: visible;\n            }\n\n            #sp-elci-gallery .sp-fullscreen-thumb {\n                width: 72px;\n                height: 72px;\n                min-width: 0;\n                padding: 4px;\n                border: 1px solid var(--sp-border);\n                border-radius: 4px;\n                background: #fff;\n                cursor: pointer;\n                overflow: hidden;\n                grid-row: 1;\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            \/* =========================================================\n            MOBILE\n            ========================================================= *\/\n\n            @media (max-width: 600px) {\n\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                    \/*\n                     * FULL SCREEN POPUP SIZE \u2014 MOBILE EDIT HERE\n                     *\/\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 {\n                    font-size: 25px;\n                }\n\n                #sp-elci-gallery .sp-fullscreen-description {\n                    font-size: 10px;\n                }\n\n                #sp-elci-gallery .sp-fullscreen-part-number {\n                    font-size: 9px;\n                }\n\n                #sp-elci-gallery .sp-fullscreen-amp-wrap {\n                    margin-top: 8px;\n                }\n\n                #sp-elci-gallery .sp-fullscreen-amp-label {\n                    font-size: 9px;\n                    margin-bottom: 4px;\n                }\n\n                #sp-elci-gallery .sp-fullscreen-amp-toggle {\n                    width: 250px;\n                }\n\n                #sp-elci-gallery .sp-fullscreen-amp-btn {\n                    min-height: 30px;\n                    padding: 6px 8px;\n                    font-size: 10px;\n                }\n\n                #sp-elci-gallery .sp-fullscreen-thumbnails {\n                    width: 100%;\n                    max-width: 100%;\n                    margin-top: 10px;\n                    grid-template-columns: repeat(4, minmax(0, 1fr));\n                    grid-template-rows: 58px;\n                    grid-auto-flow: row;\n                    gap: 10px;\n                    justify-content: start;\n                    overflow: visible;\n                }\n\n                #sp-elci-gallery .sp-fullscreen-thumb {\n                    width: 100%;\n                    height: 58px;\n                    min-width: 0;\n                    grid-row: 1;\n                }\n\n                \/* =====================================================\n                   MOBILE PRODUCT GALLERY\n                   Compact Amazon-style vertical product layout\n                   ===================================================== *\/\n\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                \/* FEATURE IMAGE\n                   The main\/features image uses the same responsive viewing frame. *\/\n                #sp-elci-gallery .sp-main-product {\n                    width: 100%;\n                    height: auto;\n                    aspect-ratio: 2.9 \/ 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 {\n                    inset: 0;\n                }\n\n                #sp-elci-gallery .sp-main-image-clip > img {\n                    width: 100%;\n                    height: 100%;\n                    object-fit: contain;\n                    transform:\n                        translate(\n                            var(--image-x-mobile),\n                            var(--image-y-mobile)\n                        )\n                        scale(var(--image-scale-mobile));\n                }\n\n                \/* VARIANT LAYOUT *\/\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                \/* Title at the top *\/\n                #sp-elci-gallery .sp-mobile-variant-title {\n                    display: block;\n                    width: 100%;\n                    min-height: 46px;\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-side-info .sp-fullscreen-trigger {\n                    display: inline-flex;\n                    margin-left: auto;\n                    margin-right: auto;\n                }\n\n                #sp-elci-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\n                    display: none;\n                }\n\n                \/* PRODUCT IMAGEEvery variation uses the responsive viewing frame. *\/\n                #sp-elci-gallery .sp-variant-image-wrap {\n                    width: 100%;\n                    height: auto;\n                    aspect-ratio: 5 \/ 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:\n                        translate(var(--image-x-mobile), var(--image-y-mobile))\n                        scale(var(--image-scale-mobile));\n                    transform-origin: center center;\n                    transition: opacity .16s ease, transform .18s ease;\n                }\n\n                #sp-elci-gallery .sp-slide-info .sp-fullscreen-trigger {\n                    margin-left: auto;\n                    margin-right: auto;\n                }\n\n                \/* PRODUCT INFORMATION \/ CONTROLS *\/\n                #sp-elci-gallery .sp-side-info {\n                    width: 100%;\n                    max-width: 100%;\n                    height: auto;\n                    min-height: 0;\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                \/* Hide duplicate desktop title. *\/\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                \/* Part number *\/\n                #sp-elci-gallery .sp-side-info .sp-part-number {\n                    display: inline-block;\n                    margin: 5px auto 0;\n                    padding: 0;\n                    color: #555;\n                    font-size: 8px;\n                    letter-spacing: .4px;\n                    text-align: center;\n                }\n\n                #sp-elci-gallery .sp-part-number strong {\n                    color: var(--sp-dark);\n                }\n\n                #sp-elci-gallery .sp-variant-image.is-empty {\n                    visibility: hidden;\n                }\n\n                \/* HOTSPOTS \u2014 MOBILE\n                   Position remains JavaScript-calculated; mobile only changes bubble scale. *\/\n                #sp-elci-gallery .sp-hotspot {\n                    top: var(--sp-hotspot-top-px, var(--top)) !important;\n                    left: var(--sp-hotspot-left-px, var(--left)) !important;\n                    transform:\n                        translate(-50%, -50%)\n                        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:\n                        translateX(-50%)\n                        scale(var(--tooltip-scale-mobile));\n                    width: min(190px, calc(100vw - 22px));\n                    padding: 8px;\n                    font-size: 9px;\n                }\n\n                \/* MOBILE THUMBNAIL STRIP *\/\n                #sp-elci-gallery .sp-product-selector {\n                    width: 100%;\n                    display: flex;\n                    align-items: center;\n                    gap: 3px;\n                    margin-top: 7px;\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: 1 1 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 {\n                    display: none;\n                }\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 {\n                    border: 2px solid var(--sp-orange);\n                }\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 {\n                    font-size: 8px;\n                    line-height: 1.05;\n                }\n\n                #sp-elci-gallery .sp-thumb-part {\n                    font-size: 7px;\n                    line-height: 1;\n                }\n\n                #sp-elci-gallery .sp-thumb-view {\n                    font-size: 7px;\n                    line-height: 1;\n                }\n\n                \/* PAGINATION *\/\n                #sp-elci-gallery .sp-gallery-pagination {\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    gap: 5px;\n                    margin-top: 4px;\n                    height: 7px;\n                }\n\n                #sp-elci-gallery .sp-page-dot {\n                    width: 6px;\n                    height: 6px;\n                }\n\n                \/* LOCKED RESPONSIVE VIEWING FRAME *\/\n                #sp-elci-gallery .sp-main-view {\n                    overflow: visible;\n                }\n\n                #sp-elci-gallery .sp-gallery-slide {\n                    height: auto;\n                    min-height: 0;\n                }\n\n                #sp-elci-gallery .sp-main-product,\n                #sp-elci-gallery .sp-variant-image-wrap {\n                    flex-shrink: 0;\n                }\n\n                \/* LOCKED IMAGE FRAME: image swaps never change the reserved viewing area *\/\n                #sp-elci-gallery .sp-variant-image-wrap img,\n                #sp-elci-gallery .sp-main-image-clip > img {\n                    flex-shrink: 0;\n                }\n\n            }\n            \/* Elementor containers must not clip hotspot tooltips *\/\n            .sp-gallery-overflow,\n            .sp-gallery-overflow > .e-con,\n            .sp-gallery-overflow > .elementor-widget-container {\n                overflow: visible !important;\n            }\n\n            \/* =========================================================\n               CHANGE LOG \u2014 MOBILE RESPONSIVE FIX\n               =========================================================\n               1. Removed the mobile side-info minimum height that created\n                  excessive empty space above the thumbnail strip.\n               2. Added a fixed mobile title area so different title lengths\n                  do not make the controls appear at different levels.\n               3. Added a compact, fixed mobile controls area so the\n                  configuration, current selection, part number, and\n                  Full Screen button stay evenly aligned between variations.\n               4. Reduced the spacing between the Full Screen button and\n                  the thumbnail strip.\n               5. Kept the mobile image viewing frame fixed so image swaps\n                  do not change the gallery layout.\n               ========================================================= *\/\n\n            \/* DESKTOP \u2014 KEEP THE EXISTING FIXED VIEWING FRAME *\/\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-fullscreen-trigger{display:inline-flex;position:static;margin-top:7px;}\n\n            \/* MOBILE (<=600px) \u2014 LOCKED COMMON HEIGHT\n               Feature and every variant use the exact same main-view height.\n               This prevents the gallery from growing\/shrinking when the\n               thumbnail or image view changes. *\/\n            @media (max-width:600px){\n                #sp-elci-gallery{\n                    height:auto;\n                    min-height:0;\n                    overflow:visible;\n                }\n\n                \/* One fixed stage for every mobile slide. *\/\n                #sp-elci-gallery .sp-main-view{\n                    width:100%;\n                    height:365px;\n                    min-height:365px;\n                    max-height:365px;\n                    overflow:hidden;\n                    position:relative;\n                }\n\n                #sp-elci-gallery .sp-gallery-slide{\n                    width:100%;\n                    height:365px;\n                    min-height:365px;\n                    max-height:365px;\n                    overflow:hidden;\n                    position:relative;\n                    display:none;\n                }\n\n                #sp-elci-gallery .sp-gallery-slide.active{\n                    display:flex;\n                }\n\n                \/* FEATURE \u2014 reserve the top information row first.\n                   This keeps the title\/subtitle\/button above the image\n                   instead of allowing the image layer to cover the button. *\/\n                #sp-elci-gallery .sp-gallery-slide:not(.sp-variant-slide){\n                    position:relative;\n                    z-index:1;\n                    overflow:hidden;\n                }\n\n                #sp-elci-gallery .sp-gallery-slide:not(.sp-variant-slide) .sp-slide-info{\n                    position:absolute;\n                    top:0;\n                    left:0;\n                    width:100%;\n                    height:60px;\n                    min-height:60px;\n                    max-height:60px;\n                    margin:0;\n                    padding:0 8px;\n                    box-sizing:border-box;\n                    display:flex;\n                    flex-direction:column;\n                    align-items:center;\n                    justify-content:flex-start;\n                    text-align:center;\n                    overflow:visible;\n                    z-index:30;\n                    pointer-events:auto;\n                }\n\n                #sp-elci-gallery .sp-gallery-slide:not(.sp-variant-slide) .sp-slide-info .sp-slide-title{\n                    display:block;\n                    position:relative;\n                    z-index:31;\n                    margin:0;\n                    font-size:23px;\n                    line-height:.95;\n                }\n\n                #sp-elci-gallery .sp-gallery-slide:not(.sp-variant-slide) .sp-slide-info .sp-slide-subtitle{\n                    display:block;\n                    position:relative;\n                    z-index:31;\n                    margin:3px 0 0;\n                    font-size:10px;\n                    line-height:1.2;\n                }\n\n                #sp-elci-gallery .sp-gallery-slide:not(.sp-variant-slide) .sp-feature-fullscreen-trigger{\n                    position:relative;\n                    z-index:32;\n                    display:inline-flex;\n                    visibility:visible;\n                    opacity:1;\n                    pointer-events:auto;\n                    margin:5px auto 0;\n                    font-size:8px;\n                    padding:6px 10px;\n                    flex:0 0 auto;\n                }\n\n                \/* The feature image begins below the information row.\n                   Its frame remains fixed so the feature and variants\n                   keep the same total mobile height. *\/\n                #sp-elci-gallery .sp-gallery-slide:not(.sp-variant-slide) .sp-main-product{\n                    width:100%;\n                    height:305px;\n                    min-height:305px;\n                    max-height:305px;\n                    margin-top:60px;\n                    aspect-ratio:auto;\n                    flex:0 0 305px;\n                    order:1;\n                    position:relative;\n                    z-index:1;\n                }\n\n                #sp-elci-gallery .sp-main-image-clip{\n                    inset:0;\n                    overflow:hidden;\n                    z-index:1;\n                }\n\n                \/* VARIANT \u2014 fixed title + image + controls inside the same stage. *\/\n                #sp-elci-gallery .sp-variant-layout{\n                    width:100%;\n                    height:365px;\n                    min-height:365px;\n                    max-height:365px;\n                    display:flex;\n                    flex-direction:column;\n                    align-items:center;\n                    justify-content:flex-start;\n                    gap:0;\n                    overflow:hidden;\n                }\n\n                #sp-elci-gallery .sp-mobile-variant-title{\n                    width:100%;\n                    height:55px;\n                    min-height:55px;\n                    max-height:55px;\n                    padding:0 8px;\n                    overflow:hidden;\n                    display:block;\n                    flex:0 0 55px;\n                    text-align:center;\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:245px;\n                    min-height:245px;\n                    max-height:245px;\n                    aspect-ratio:auto;\n                    flex:0 0 245px;\n                    display:flex;\n                    align-items:center;\n                    justify-content:center;\n                    order:2;\n                    position:relative;\n                    overflow:hidden;\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-mobile), var(--image-y-mobile))\n                        scale(var(--image-scale-mobile));\n                    transform-origin:center center;\n                }\n\n                \/* Variant controls occupy the same reserved bottom area. *\/\n                #sp-elci-gallery .sp-side-info{\n                    width:100%;\n                    height:65px;\n                    min-height:65px;\n                    max-height:65px;\n                    padding:0;\n                    margin:0;\n                    overflow:hidden;\n                    display:flex;\n                    flex-direction:column;\n                    align-items:center;\n                    justify-content:flex-start;\n                    flex:0 0 65px;\n                    order:3;\n                }\n\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-part-number{\n                    display:inline-block;\n                    margin:3px auto 0;\n                    padding:0;\n                    font-size:8px;\n                    line-height:1.05;\n                    letter-spacing:.4px;\n                }\n\n                #sp-elci-gallery .sp-side-info .sp-fullscreen-trigger{\n                    display:inline-flex;\n                    margin:5px auto 0;\n                    font-size:8px;\n                    padding:6px 10px;\n                    flex:0 0 auto;\n                }\n\n                \/* Feature information is positioned in the reserved top row above. *\/\n\n                \/* Thumbnail strip starts immediately after the identical stage. *\/\n                #sp-elci-gallery .sp-product-selector{\n                    margin-top:0;\n                }\n\n                #sp-elci-gallery .sp-gallery-pagination{\n                    margin-top:3px;\n                }\n\n                #sp-elci-gallery .sp-thumbnails{\n                    justify-content:center;\n                }\n            }\n\n            \/* =========================================================\n               TABLET VARIATION PRODUCT INFORMATION\n               601px\u20131024px\n               Image\/view on the left, product information on the right.\n               The image frame stays fixed so switching views does not\n               move the title, part number, or thumbnails.\n               ========================================================= *\/\n            @media (min-width:601px) and (max-width:1024px){\n\n                #sp-elci-gallery:has(.sp-gallery-slide.sp-variant-slide.active){\n                    height:auto;\n                    min-height:0;\n                }\n\n                #sp-elci-gallery .sp-main-view:has(.sp-gallery-slide.sp-variant-slide.active){\n                    height:auto;\n                    min-height:0;\n                }\n\n                #sp-elci-gallery .sp-gallery-slide.sp-variant-slide.active{\n                    height:auto;\n                    min-height:0;\n                    overflow:visible;\n                }\n\n                \/* Tablet reference layout:\n                   - image\/view on the left\n                   - title + subtitle + part number + Full Screen on the right\n                   - thumbnails remain below the complete two-column layout\n                *\/\n                #sp-elci-gallery .sp-variant-slide .sp-variant-layout{\n                    width:100%;\n                    height:400px;\n                    min-height:400px;\n                    display:grid;\n                    grid-template-columns:minmax(0, 60%) minmax(0, 40%);\n                    grid-template-rows:1fr;\n                    align-items:center;\n                    column-gap:0;\n                    row-gap:0;\n                    padding:0 8px;\n                    box-sizing:border-box;\n                }\n\n                #sp-elci-gallery .sp-variant-slide .sp-mobile-variant-title{\n                    display:none;\n                }\n\n                \/* Fixed tablet image frame. *\/\n                #sp-elci-gallery .sp-variant-slide .sp-variant-image-wrap{\n                    grid-column:1;\n                    grid-row:1;\n                    width:100%;\n                    height:400px;\n                    min-height:400px;\n                    max-height:400px;\n                    flex:none;\n                    display:flex;\n                    align-items:center;\n                    justify-content:center;\n                    position:relative;\n                    overflow:visible;\n                }\n\n                #sp-elci-gallery .sp-variant-slide .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                }\n\n                \/* Right-side product information. *\/\n                #sp-elci-gallery .sp-variant-slide .sp-side-info{\n                    grid-column:2;\n                    grid-row:1;\n                    width:100%;\n                    max-width:100%;\n                    height:100%;\n                    min-height:0;\n                    padding:0 10px 0 14px;\n                    margin:0;\n                    box-sizing:border-box;\n                    text-align:left;\n                    display:flex;\n                    flex-direction:column;\n                    align-items:flex-start;\n                    justify-content:center;\n                    gap:0;\n                }\n\n                #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-slide-title{\n                    display:block;\n                    margin:0;\n                    font-size:30px;\n                    line-height:.98;\n                    letter-spacing:1px;\n                }\n\n                #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-slide-subtitle{\n                    display:block;\n                    margin:7px 0 0;\n                    font-size:12px;\n                    line-height:1.25;\n                }\n\n                #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-part-number{\n                    display:inline-block;\n                    margin:12px 0 0;\n                    padding:0;\n                    font-size:10px;\n                    line-height:1.1;\n                    letter-spacing:.4px;\n                    text-align:left;\n                }\n\n                #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-fullscreen-trigger{\n                    display:inline-flex;\n                    align-self:flex-start;\n                    margin:8px 0 0;\n                    font-size:9px;\n                    padding:6px 11px;\n                }\n\n                #sp-elci-gallery .sp-product-selector{\n                    margin-top:4px;\n                }\n            }\n\n\n            \/* =========================================================\n               FIRST VARIATION FULLSCREEN POSITION\n               Desktop: directly below the part number, left aligned.\n               ========================================================= *\/\n            @media (min-width:1025px){\n                #sp-elci-gallery .sp-side-info{\n                    display:flex;\n                    flex-direction:column;\n                    align-items:flex-start;\n                    min-height:220px;\n                }\n\n                #sp-elci-gallery .sp-side-info .sp-fullscreen-trigger{\n                    align-self:flex-start;\n                    margin-top:7px;\n                }\n            }\n\n\n\n            <\/style>\n\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\n                    \/* Hotspots use the existing breakpoint-specific coordinate architecture. *\/\n\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                       RESPONSIVE HOTSPOT POSITIONING\n                       Image-relative architecture modeled after the\n                       SmartPlug Cordset reference gallery.\n\n                       One canonical hotspot anchor:\n                           --left \/ --top\n                           + --hotspot-x \/ --hotspot-y\n\n                       The actual pixel position is recalculated from:\n                           container size\n                           + object-fit: contain geometry\n                           + responsive image X\/Y\n                           + responsive image scale\n                           + canonical hotspot percentage\n                    ========================================================= *\/\n\n                    function getResponsiveMode() {\n                        const width = window.innerWidth ||\n                            document.documentElement.clientWidth || 0;\n\n                        if (width <= 600) return \"mobile\";\n                        if (width <= 1024) return \"tablet\";\n                        if (width <= 1366) return \"laptop\";\n                        return \"desktop\";\n                    }\n\n                    function readCssNumber(element, customProperty, fallback) {\n                        if (!element) return fallback;\n\n                        const inlineValue = element.style\n                            ? element.style.getPropertyValue(customProperty)\n                            : \"\";\n\n                        if (inlineValue && inlineValue.trim()) {\n                            const parsedInline = parseFloat(inlineValue);\n                            if (Number.isFinite(parsedInline)) {\n                                return parsedInline;\n                            }\n                        }\n\n                        const computedValue = window.getComputedStyle(element)\n                            .getPropertyValue(customProperty);\n\n                        if (computedValue && computedValue.trim()) {\n                            const parsedComputed = parseFloat(computedValue);\n                            if (Number.isFinite(parsedComputed)) {\n                                return parsedComputed;\n                            }\n                        }\n\n                        return fallback;\n                    }\n\n                    function readResponsiveImageSetting(\n                        image,\n                        baseName,\n                        responsiveMode,\n                        fallback\n                    ) {\n                        const responsiveProperty =\n                            baseName + \"-\" + responsiveMode;\n\n                        let value = readCssNumber(\n                            image,\n                            responsiveProperty,\n                            NaN\n                        );\n\n                        if (Number.isFinite(value)) return value;\n\n                        value = readCssNumber(\n                            image,\n                            baseName + \"-desktop\",\n                            NaN\n                        );\n\n                        if (Number.isFinite(value)) return value;\n\n                        const imageWrap = image.closest(\n                            \".sp-main-product, .sp-variant-image-wrap\"\n                        );\n\n                        value = readCssNumber(\n                            imageWrap,\n                            responsiveProperty,\n                            NaN\n                        );\n\n                        if (Number.isFinite(value)) return value;\n\n                        value = readCssNumber(\n                            imageWrap,\n                            baseName + \"-desktop\",\n                            NaN\n                        );\n\n                        if (Number.isFinite(value)) return value;\n\n                        return fallback;\n                    }\n\n                    function syncFeatureHotspots() {\n                        const featureSlide = slides[0];\n                        if (!featureSlide) return;\n\n                        const imageWrap = featureSlide.querySelector(\n                            \".sp-main-product\"\n                        );\n\n                        const imageClip = featureSlide.querySelector(\n                            \".sp-main-image-clip\"\n                        );\n\n                        const image = featureSlide.querySelector(\n                            \".sp-main-image-clip > img\"\n                        );\n\n                        const featureHotspots = featureSlide.querySelectorAll(\n                            \".sp-hotspot\"\n                        );\n\n                        if (\n                            !imageWrap ||\n                            !imageClip ||\n                            !image ||\n                            !featureHotspots.length\n                        ) {\n                            return;\n                        }\n\n                        if (!image.naturalWidth || !image.naturalHeight) {\n                            return;\n                        }\n\n                        const wrapRect = imageWrap.getBoundingClientRect();\n                        const clipRect = imageClip.getBoundingClientRect();\n\n                        if (\n                            !wrapRect.width ||\n                            !wrapRect.height ||\n                            !clipRect.width ||\n                            !clipRect.height\n                        ) {\n                            return;\n                        }\n\n                        const responsiveMode = getResponsiveMode();\n\n                        const imageX = readResponsiveImageSetting(\n                            image,\n                            \"--image-x\",\n                            responsiveMode,\n                            0\n                        );\n\n                        const imageY = readResponsiveImageSetting(\n                            image,\n                            \"--image-y\",\n                            responsiveMode,\n                            0\n                        );\n\n                        const imageScale = readResponsiveImageSetting(\n                            image,\n                            \"--image-scale\",\n                            responsiveMode,\n                            1\n                        );\n\n                        const imageRatio =\n                            image.naturalWidth \/ image.naturalHeight;\n\n                        const containerRatio =\n                            clipRect.width \/ clipRect.height;\n\n                        let renderedWidth;\n                        let renderedHeight;\n\n                        \/*\n                         * Recreate object-fit: contain using the image's\n                         * natural aspect ratio and the actual clip size.\n                         *\/\n                        if (imageRatio > containerRatio) {\n                            renderedWidth = clipRect.width;\n                            renderedHeight =\n                                renderedWidth \/ imageRatio;\n                        } else {\n                            renderedHeight = clipRect.height;\n                            renderedWidth =\n                                renderedHeight * imageRatio;\n                        }\n\n                        \/*\n                         * Apply the same scale used by the actual image CSS.\n                         * The image transform is centered, so the scaled\n                         * contained bitmap expands\/contracts around center.\n                         *\/\n                        renderedWidth *= imageScale;\n                        renderedHeight *= imageScale;\n\n                        const imageLeftInClip =\n                            (clipRect.width - renderedWidth) \/ 2 +\n                            imageX;\n\n                        const imageTopInClip =\n                            (clipRect.height - renderedHeight) \/ 2 +\n                            imageY;\n\n                        \/*\n                         * Convert clip-local coordinates into the hotspot\n                         * parent's coordinate system.\n                         *\/\n                        const clipOffsetLeft =\n                            clipRect.left - wrapRect.left;\n\n                        const clipOffsetTop =\n                            clipRect.top - wrapRect.top;\n\n                        const imageLeft =\n                            clipOffsetLeft + imageLeftInClip;\n\n                        const imageTop =\n                            clipOffsetTop + imageTopInClip;\n\n                        featureHotspots.forEach(function (hotspot) {\n                            const top = readCssNumber(\n                                hotspot,\n                                \"--top\",\n                                NaN\n                            );\n\n                            const left = readCssNumber(\n                                hotspot,\n                                \"--left\",\n                                NaN\n                            );\n\n                            const hotspotX = readCssNumber(\n                                hotspot,\n                                \"--hotspot-x\",\n                                0\n                            );\n\n                            const hotspotY = readCssNumber(\n                                hotspot,\n                                \"--hotspot-y\",\n                                0\n                            );\n\n                            if (\n                                !Number.isFinite(top) ||\n                                !Number.isFinite(left)\n                            ) {\n                                return;\n                            }\n\n                            const leftPx =\n                                imageLeft +\n                                (renderedWidth * left \/ 100) +\n                                hotspotX;\n\n                            const topPx =\n                                imageTop +\n                                (renderedHeight * top \/ 100) +\n                                hotspotY;\n\n                            hotspot.style.setProperty(\n                                \"--sp-hotspot-left-px\",\n                                leftPx + \"px\"\n                            );\n\n                            hotspot.style.setProperty(\n                                \"--sp-hotspot-top-px\",\n                                topPx + \"px\"\n                            );\n                        });\n                    }\n\n                    let hotspotFrame = null;\n\n                    function requestHotspotSync() {\n                        if (hotspotFrame) {\n                            cancelAnimationFrame(hotspotFrame);\n                        }\n\n                        hotspotFrame = requestAnimationFrame(function () {\n                            hotspotFrame = null;\n                            syncFeatureHotspots();\n                        });\n                    }\n\n                    function setupHotspotObservers() {\n                        const featureSlide = slides[0];\n                        if (!featureSlide) return;\n\n                        const featureImage = featureSlide.querySelector(\n                            \".sp-main-image-clip > img\"\n                        );\n\n                        const featureClip = featureSlide.querySelector(\n                            \".sp-main-image-clip\"\n                        );\n\n                        const featureWrap = featureSlide.querySelector(\n                            \".sp-main-product\"\n                        );\n\n                        if (featureImage) {\n                            featureImage.addEventListener(\n                                \"load\",\n                                requestHotspotSync\n                            );\n                        }\n\n                        window.addEventListener(\n                            \"resize\",\n                            requestHotspotSync,\n                            { passive: true }\n                        );\n\n                        window.addEventListener(\n                            \"orientationchange\",\n                            requestHotspotSync\n                        );\n\n                        if (window.ResizeObserver) {\n                            const observer = new ResizeObserver(\n                                requestHotspotSync\n                            );\n\n                            if (gallery) {\n                                observer.observe(gallery);\n                            }\n\n                            if (featureSlide) {\n                                observer.observe(featureSlide);\n                            }\n\n                            if (featureClip) {\n                                observer.observe(featureClip);\n                            }\n\n                            if (featureWrap) {\n                                observer.observe(featureWrap);\n                            }\n\n                            if (featureImage) {\n                                observer.observe(featureImage);\n                            }\n                        }\n\n                        requestHotspotSync();\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(\n                                    activeVariant,\n                                    activeVariant.dataset.currentView ||\n                                    activeVariant.dataset.view ||\n                                    activeVariant.dataset.variant ||\n                                    \"\"\n                                );\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                        requestHotspotSync();\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                    \/* =================================================\n                       DYNAMIC EDITABLE TITLE \/ SUBTITLE \/ PART NUMBER\n                       ================================================= *\/\n\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 {\n                                title: \"\",\n                                subtitle: \"\",\n                                partNumber: \"\"\n                            };\n                        }\n\n                        const variationView = view || \"\";\n                        const isVariation = slide.classList.contains(\"sp-variant-slide\");\n\n                        if (isVariation && variationView) {\n                            return {\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                            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                    \/* =================================================\n                       FIRST VARIATION IMAGE \/ EDITABLE COPY\n                       Two views share one fixed product frame.\n                       No toggle controls are used.\n                       ================================================= *\/\n\n                    variantSlides.forEach(function (slide) {\n                        const image = slide.querySelector(\".sp-variant-image\");\n                        if (!image) return;\n\n                        const initialView = slide.dataset.view || \"view1\";\n                        slide.dataset.currentView = initialView;\n\n                        function updateImage(selectedView) {\n                            const view = selectedView || slide.dataset.currentView || initialView;\n                            const source = slide.getAttribute(\"data-\" + view) || \"\";\n\n                            slide.dataset.currentView = 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.alt = getViewCopy(slide, view).title || \"Male Inlet Gaskets\";\n                                image.style.opacity = \"1\";\n\n                                image.setAttribute(\n                                    \"aria-label\",\n                                    \"Switch First Variation image view\"\n                                );\n\n                                const existingModal = gallery.querySelector(\".sp-fullscreen-modal\");\n                                if (existingModal && existingModal.classList.contains(\"is-open\")) {\n                                    refreshFullscreenModal();\n                                }\n                            }, 90);\n                        }\n\n                        function nextView() {\n                            const views = [\"view1\", \"view2\"];\n                            const current = slide.dataset.currentView || initialView;\n                            const currentPosition = views.indexOf(current);\n                            const nextPosition = currentPosition >= 0\n                                ? (currentPosition + 1) % views.length\n                                : 0;\n\n                            slide.dataset.currentView = views[nextPosition];\n                            updateImage(slide.dataset.currentView);\n                        }\n\n                        slide._setView = function (selectedView) {\n                            slide.dataset.currentView = selectedView || initialView;\n                            updateImage(slide.dataset.currentView);\n                        };\n\n                        image.addEventListener(\"click\", function (event) {\n                            event.preventDefault();\n                            event.stopPropagation();\n                            nextView();\n                        });\n\n                        image.addEventListener(\"keydown\", function (event) {\n                            if (event.key === \"Enter\" || event.key === \" \") {\n                                event.preventDefault();\n                                event.stopPropagation();\n                                nextView();\n                            }\n\n                            if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n                                event.preventDefault();\n                                event.stopPropagation();\n                                nextView();\n                            }\n\n                            if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n                                event.preventDefault();\n                                event.stopPropagation();\n\n                                const views = [\"view1\", \"view2\"];\n                                const current = slide.dataset.currentView || initialView;\n                                const currentPosition = views.indexOf(current);\n                                const previousPosition = currentPosition <= 0\n                                    ? views.length - 1\n                                    : currentPosition - 1;\n\n                                slide.dataset.currentView = views[previousPosition];\n                                updateImage(slide.dataset.currentView);\n                            }\n                        });\n\n                        slide._setView(initialView);\n                    });\n\n                    \/* =================================================\n                       VIEW FULL SCREEN + HOVER ZOOM\n                       ================================================= *\/\n\n                    const fullscreenModal = document.createElement(\"div\");\n                    fullscreenModal.className = \"sp-fullscreen-modal\";\n                    fullscreenModal.setAttribute(\"aria-hidden\", \"true\");\n\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\n                            <div class=\"sp-fullscreen-image-area\">\n                                <img class=\"sp-fullscreen-image\" alt=\"\">\n                            <\/div>\n\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\">\n                                    PART NUMBER: <strong class=\"sp-fullscreen-part-number-value\"><\/strong>\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 fullscreenThumbs = fullscreenModal.querySelector(\".sp-fullscreen-thumbnails\");\n                    const fullscreenClose = fullscreenModal.querySelector(\".sp-fullscreen-close\");\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\n                        if (!activeSlide) {\n                            return {\n                                title: \"\",\n                                description: \"\",\n                                partNumber: \"\"\n                            };\n                        }\n\n                        const view = activeSlide.classList.contains(\"sp-variant-slide\")\n                            ? (activeSlide.dataset.currentView || activeSlide.dataset.view || \"\")\n                            : \"\";\n\n                        const copy = getViewCopy(activeSlide, view);\n\n                        return {\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 && activeSlide.classList.contains(\"sp-variant-slide\");\n                        const view = isVariation\n                            ? (activeSlide.dataset.currentView || activeSlide.dataset.view || \"\")\n                            : \"\";\n\n                        \/* Full-screen Features image is intentionally different from the\n                           main Features image. The main gallery image remains unchanged. *\/\n                        const fullscreenFeatureImage =\n                            \"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/MALE-INLET-GASKETS-1.png\";\n\n                        const viewImage = currentIndex === 0\n                            ? fullscreenFeatureImage\n                            : (isVariation\n                                ? (activeSlide.getAttribute(\"data-\" + view) || \"\")\n                                : (activeImage.currentSrc || activeImage.src));\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 =\n                                isVariation && copy.partNumber ? \"\" : \"none\";\n                        }\n\n                        fullscreenThumbs.innerHTML = \"\";\n\n                        \/* Main gallery thumbnail: Features *\/\n                        const featureThumb = thumbs[0];\n                        if (featureThumb) {\n                            const sourceImage = featureThumb.querySelector(\"img\");\n                            if (sourceImage) {\n                                const modalThumb = document.createElement(\"button\");\n                                modalThumb.type = \"button\";\n                                modalThumb.className = \"sp-fullscreen-thumb\";\n                                modalThumb.setAttribute(\"aria-label\", \"View Male Inlet Gaskets features\");\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                                if (currentIndex === 0) modalThumb.classList.add(\"active\");\n\n                                modalThumb.addEventListener(\"click\", function (event) {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                    showSlide(0);\n                                    window.setTimeout(refreshFullscreenModal, 110);\n                                });\n\n                                fullscreenThumbs.appendChild(modalThumb);\n                            }\n                        }\n\n                        \/* First Variation view thumbnails: two views, one main gallery slide. *\/\n                        const variationSlide = slides[1];\n                        if (variationSlide) {\n                            const views = [\n                                {\n                                    key: \"view1\",\n                                    label: \"First Variation \u2014 Image\/View 1\"\n                                },\n                                {\n                                    key: \"view2\",\n                                    label: \"First Variation \u2014 Image\/View 2\"\n                                }\n                            ];\n\n                            views.forEach(function (item) {\n                                const source = variationSlide.getAttribute(\"data-\" + item.key) || \"\";\n                                if (!source) return;\n\n                                const modalThumb = document.createElement(\"button\");\n                                modalThumb.type = \"button\";\n                                modalThumb.className = \"sp-fullscreen-thumb\";\n                                modalThumb.setAttribute(\"aria-label\", item.label);\n\n                                const modalThumbImage = document.createElement(\"img\");\n                                modalThumbImage.src = source;\n                                modalThumbImage.alt = getViewCopy(variationSlide, item.key).title || \"Male Inlet Gaskets\";\n                                modalThumb.appendChild(modalThumbImage);\n\n                                if (\n                                    currentIndex === 1 &&\n                                    (variationSlide.dataset.currentView || variationSlide.dataset.view) === item.key\n                                ) {\n                                    modalThumb.classList.add(\"active\");\n                                }\n\n                                modalThumb.addEventListener(\"click\", function (event) {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n\n                                    showSlide(1);\n\n                                    if (typeof variationSlide._setView === \"function\") {\n                                        variationSlide._setView(item.key);\n                                    }\n\n                                    window.setTimeout(refreshFullscreenModal, 110);\n                                });\n\n                                fullscreenThumbs.appendChild(modalThumb);\n                            });\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                    function addFullscreenButtons() {\n                        \/* Feature button \u2014 already positioned in the feature info block. *\/\n                        const featureSlide = slides[0];\n                        if (featureSlide) {\n                            const featureButton = featureSlide.querySelector(\".sp-feature-fullscreen-trigger\");\n\n                            if (featureButton && featureButton.dataset.fullscreenInitialized !== \"true\") {\n                                featureButton.dataset.fullscreenInitialized = \"true\";\n\n                                featureButton.addEventListener(\"click\", function (event) {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                    openFullscreenModal();\n                                });\n                            }\n                        }\n\n                        \/* First Variation \u2014 keep the existing button directly after the part number. *\/\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\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\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\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                            const zoomFactor = 2;\n\n                            function getContainedImageMetrics() {\n                                const wrapRect = imageWrap.getBoundingClientRect();\n                                const naturalWidth = image.naturalWidth || 0;\n                                const naturalHeight = image.naturalHeight || 0;\n\n                                if (!naturalWidth || !naturalHeight || !wrapRect.width || !wrapRect.height) {\n                                    return null;\n                                }\n\n                                const containScale = Math.min(\n                                    wrapRect.width \/ naturalWidth,\n                                    wrapRect.height \/ naturalHeight\n                                );\n\n                                const renderedWidth = naturalWidth * containScale;\n                                const renderedHeight = naturalHeight * containScale;\n\n                                return {\n                                    renderedWidth: renderedWidth,\n                                    renderedHeight: renderedHeight,\n                                    offsetX: (wrapRect.width - renderedWidth) \/ 2,\n                                    offsetY: (wrapRect.height - renderedHeight) \/ 2\n                                };\n                            }\n\n                            function syncPreviewImage() {\n                                const source = image.currentSrc || image.src;\n                                if (source) previewImage.src = source;\n                            }\n\n                            function resetPreviewPosition() {\n                                previewImage.style.width = \"\";\n                                previewImage.style.height = \"\";\n                                previewImage.style.left = \"0px\";\n                                previewImage.style.top = \"0px\";\n                            }\n\n                            function updateZoom(event) {\n                                if (window.innerWidth <= 600) return;\n\n                                const metrics = getContainedImageMetrics();\n                                if (!metrics) return;\n\n                                const wrapRect = imageWrap.getBoundingClientRect();\n                                const previewRect = preview.getBoundingClientRect();\n\n                                \/* Calculate the pointer against the actual rendered\n                                   object-fit:contain image, not the empty letterbox area. *\/\n                                const localX = event.clientX - wrapRect.left;\n                                const localY = event.clientY - wrapRect.top;\n\n                                const imageX = Math.max(\n                                    0,\n                                    Math.min(metrics.renderedWidth, localX - metrics.offsetX)\n                                );\n                                const imageY = Math.max(\n                                    0,\n                                    Math.min(metrics.renderedHeight, localY - metrics.offsetY)\n                                );\n\n                                const scaledWidth = metrics.renderedWidth * zoomFactor;\n                                const scaledHeight = metrics.renderedHeight * zoomFactor;\n\n                                previewImage.style.width = scaledWidth + \"px\";\n                                previewImage.style.height = scaledHeight + \"px\";\n\n                                \/* Keep the exact hovered point centered in the preview. *\/\n                                let left = (previewRect.width \/ 2) - (imageX * zoomFactor);\n                                let top = (previewRect.height \/ 2) - (imageY * zoomFactor);\n\n                                if (scaledWidth <= previewRect.width) {\n                                    left = (previewRect.width - scaledWidth) \/ 2;\n                                } else {\n                                    left = Math.min(0, Math.max(previewRect.width - scaledWidth, left));\n                                }\n\n                                if (scaledHeight <= previewRect.height) {\n                                    top = (previewRect.height - scaledHeight) \/ 2;\n                                } else {\n                                    top = Math.min(0, Math.max(previewRect.height - scaledHeight, top));\n                                }\n\n                                previewImage.style.left = left + \"px\";\n                                previewImage.style.top = top + \"px\";\n                            }\n\n                            image.addEventListener(\"load\", function () {\n                                syncPreviewImage();\n                                resetPreviewPosition();\n                            });\n\n                            syncPreviewImage();\n\n                            imageWrap.addEventListener(\"mouseenter\", function (event) {\n                                syncPreviewImage();\n                                imageWrap.classList.add(\"sp-zoom-active\");\n                                window.requestAnimationFrame(function () {\n                                    updateZoom(event);\n                                });\n                            });\n\n                            imageWrap.addEventListener(\"mouseleave\", function () {\n                                imageWrap.classList.remove(\"sp-zoom-active\");\n                                resetPreviewPosition();\n                            });\n\n                            imageWrap.addEventListener(\"mousemove\", updateZoom);\n                        });\n                    }\n\n                    setupHotspotObservers();\n                    addFullscreenButtons();\n                    setupHoverZoom();\n\n                    \/* WooCommerce variation compatibility *\/\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                                requestHotspotSync();\n                            }\n                        );\n                    }\n\n                    showSlide(0);\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                    jQuery(window).on(\n                        \"elementor\/frontend\/init\",\n                        function () {\n                            setTimeout(function () {\n                                const gallery = document.getElementById(\n                                    \"sp-elci-gallery\"\n                                );\n\n                                if (!gallery) return;\n\n                                window.dispatchEvent(\n                                    new Event(\"resize\")\n                                );\n                            }, 250);\n                        }\n                    );\n                }\n            })();\n            <\/script>\n\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\">Male Inlet Gasket<\/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<p><span style=\"color: #000000;\">The SmartPlug service kits are designed to provide a complete and reliable solution for repairing or restoring your connection, including all necessary electrical components, hardware, and sealing gaskets. Built for convenience, the kit allows for quick replacement of missing or damaged parts, making maintenance simple and efficient. Color-coded wire guides integrated into both the inlets and connectors ensure easy attachment and accurate installation every time. Fully interchangeable with all SmartPlug connectors, these service kits offer a flexible and dependable way to maintain performance and extend the life of your shore power system.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f79334f elementor-widget elementor-widget-button\" data-id=\"f79334f\" 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 Male Inlet Gasket 1 Complete Replacement KitIncludes the gaskets needed for quick replacement. 2 Retail PackagingKeeps parts organized and easy to store. 3 Multi-Color CompatibilityFits SmartPlug inlets in all available colors. 4 Non-Metallic GasketsCreates a secure, leak-resistant seal. Male Inlet Gaskets View Full Screen Male Inlet Gaskets Open View Male Inlet Gaskets Open View PART NUMBER: &#10094; Features First Variation &#10095; Male Inlet Gasket The SmartPlug service kits are designed to provide a complete and reliable solution for repairing or restoring your connection, including all necessary electrical components, hardware, and sealing gaskets. Built for convenience, the kit allows for quick replacement of missing or damaged parts, making maintenance simple and efficient. Color-coded wire guides integrated into both the inlets and connectors ensure easy attachment and accurate installation every time. Fully interchangeable with all SmartPlug connectors, these service kits offer a flexible and dependable way to maintain performance and extend the life of your shore power system. 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-11358","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11358","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=11358"}],"version-history":[{"count":44,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11358\/revisions"}],"predecessor-version":[{"id":19524,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11358\/revisions\/19524"}],"wp:attachment":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/media?parent=11358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}