{"id":11313,"date":"2025-12-19T21:11:25","date_gmt":"2025-12-19T21:11:25","guid":{"rendered":"https:\/\/dev.smartplug.com\/staging\/?page_id=11313"},"modified":"2026-09-29T19:37:22","modified_gmt":"2026-09-29T19:37:22","slug":"smartplug-female-receptacle","status":"publish","type":"page","link":"https:\/\/dev.smartplug.com\/staging\/smartplug-female-receptacle\/","title":{"rendered":"SmartPlug Female Receptacle"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11313\" class=\"elementor elementor-11313\">\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 Female Receptacle<\/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<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<\/head>\n<body>\n<div id=\"sp-elci-gallery\">\n    <div class=\"sp-main-view\">\n\n        <!-- =========================================================\n             FEATURES\n             Receptacles-specific content.\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 inlet.\"\n        >\n            <div class=\"sp-product-image-wrap sp-main-product sp-hotspot-image\" style=\"\n                --image-x-desktop:0px;\n                --image-y-desktop:0px;\n                --image-scale-desktop:1.2;\n                --image-x-mobile:0px;\n                --image-y-mobile:0px;\n                --image-scale-mobile:1.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-Female-Receptacle-1.png\" alt=\"SmartPlug Female Receptacle\">\n                <\/div>\n\n                <!-- HOTSPOT 1 -->\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                    --top:17%;\n                    --left:25%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-mobile:.8;\n                    --hotspot-scale-tablet:.9;\n                    --hotspot-scale-laptop:1;\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:220px;\n                    --dot-size:34px;\n                    --number-size:14px;\n                \">\n                    <div class=\"sp-dot\"><span class=\"sp-number\">1<\/span><\/div>\n                    <div class=\"sp-tooltip\"><strong>Easy Installation<\/strong><br>Compact design for quick installation.<\/div>\n                <\/div>\n\n                <!-- HOTSPOT 2 -->\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                    --top:48%;\n                    --left:20%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-mobile:.8;\n                    --hotspot-scale-tablet:.9;\n                    --hotspot-scale-laptop:1;\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                    <div class=\"sp-dot\"><span class=\"sp-number\">2<\/span><\/div>\n                    <div class=\"sp-tooltip\"><strong>High-Capacity Terminals<\/strong><br>Supports secure and reliable power connections.<\/div>\n                <\/div>\n\n                <!-- HOTSPOT 3 -->\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                    --top:72%;\n                    --left:28%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-mobile:.8;\n                    --hotspot-scale-tablet:.9;\n                    --hotspot-scale-laptop:1;\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                    <div class=\"sp-dot\"><span class=\"sp-number\">3<\/span><\/div>\n                    <div class=\"sp-tooltip\"><strong>Locking Ring<\/strong><br>Secures the connector during installation.<\/div>\n                <\/div>\n\n                <!-- HOTSPOT 4 -->\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                    --top:17%;\n                    --left:74%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-mobile:.8;\n                    --hotspot-scale-tablet:.9;\n                    --hotspot-scale-laptop:1;\n                    --tooltip-x-desktop:0px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n                    --tooltip-x-mobile:-60px;\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:16px;\n                \">\n                    <div class=\"sp-dot\"><span class=\"sp-number\">4<\/span><\/div>\n                    <div class=\"sp-tooltip\"><strong>SmartPlug Connector Body<\/strong><br>Built for durability and long-term use.<\/div>\n                <\/div>\n\n                <!-- HOTSPOT 5 -->\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                    --top:46%;\n                    --left:79%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-mobile:.8;\n                    --hotspot-scale-tablet:.9;\n                    --hotspot-scale-laptop:1;\n                    --tooltip-x-desktop:0px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n                    --tooltip-x-mobile:-80px;\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:16px;\n                \">\n                    <div class=\"sp-dot\"><span class=\"sp-number\">5<\/span><\/div>\n                    <div class=\"sp-tooltip\"><strong>Stainless Steel Locking Clip<\/strong><br>Keeps the connection securely locked.<\/div>\n                <\/div>\n\n                <!-- HOTSPOT 6 -->\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                    --top:65%;\n                    --left:70%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-mobile:.8;\n                    --hotspot-scale-tablet:.9;\n                    --hotspot-scale-laptop:1;\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:220px;\n                    --dot-size:34px;\n                    --number-size:16px;\n                \">\n                    <div class=\"sp-dot\"><span class=\"sp-number\">6<\/span><\/div>\n                    <div class=\"sp-tooltip\"><strong>Weatherproof Seal<\/strong><br>Helps protect against moisture and debris.<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"sp-slide-info\">\n                <div class=\"sp-slide-title\"><\/div>\n                <div class=\"sp-slide-subtitle\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- =========================================================\n             VARIATION 1 \u2014 30A \/ 50A\n             Each internal view is independently editable.\n             ========================================================= -->\n        <div class=\"sp-gallery-slide sp-variant-slide\"\n            data-slide=\"1\"\n            data-variant=\"amperage-variation\"\n            data-view=\"30a\"\n            data-current-view=\"30a\"\n\n            data-30a=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30AMP-Receptable.png\"\n            data-50a=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/50AMP-Receptable.png\"\n            data-30a-title=\"Receptacle - 30 Amp | 125V\"\n            data-30a-subtitle=\"Installation of the receptacles require the weatherdoor RDPWP for weatherproof connection and operation.\"\n            data-30a-part-number=\"RF30\"\n            data-50a-title=\"Receptacle - 50 Amp | 125V \/ 250V\"\n            data-50a-subtitle=\"Installation of the receptacles require the weatherdoor RDPWP for weatherproof connection and operation.\"\n            data-50a-part-number=\"RF50\"\n        >\n            <div class=\"sp-variant-layout\">\n                <div class=\"sp-mobile-variant-title\">\n                    <div class=\"sp-slide-title\">Receptacle - 30Amp | 125V<\/div>\n                    <div class=\"sp-slide-subtitle\">You cannot use the Receptacles without the Weatherdoor<\/div>\n                <\/div>\n\n                <div class=\"sp-variant-image-wrap\">\n                    <img decoding=\"async\" class=\"sp-variant-image\"\n                         src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30AMP-Receptable.png\"\n                         alt=\"SmartPlug Female Receptacle 30A\"\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:10px;\n                            --image-scale-mobile:1.1;\n                         \">\n                <\/div>\n\n                <div class=\"sp-slide-info sp-side-info\">\n                    <div class=\"sp-slide-title\">Receptacle - 30Amp | 125V<\/div>\n                    <div class=\"sp-slide-subtitle\">You cannot use the Receptacles without the Weatherdoor<\/div>\n\n                    <div class=\"sp-variant-toggle-wrap\" aria-label=\"Amperage\">\n                        <div class=\"sp-variant-toggle-label\">SELECT AMPERAGE<\/div>\n                        <div class=\"sp-variant-toggle\">\n                            <button type=\"button\" class=\"sp-variant-toggle-btn active\" data-view=\"30a\">30A<\/button>\n                            <button type=\"button\" class=\"sp-variant-toggle-btn\" data-view=\"50a\">50A<\/button>\n                        <\/div>\n                        <div class=\"sp-variant-showing\">Showing <strong class=\"sp-variant-showing-value\">30A<\/strong><\/div>\n                    <\/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        <!-- =========================================================\n             VARIATION 2 \u2014 VERTICAL \/ HORIZONTAL\n             Each internal view is independently editable.\n             ========================================================= -->\n        <div class=\"sp-gallery-slide sp-variant-slide\"\n            data-slide=\"2\"\n            data-variant=\"orientation-variation\"\n            data-view=\"vertical\"\n            data-current-view=\"vertical\"\n\n            data-vertical=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Front-Wethear-Door-Vertical.png\"\n            data-horizontal=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Front-Wethear-Door-Horizontal.png\"\n            data-vertical-title=\"Weatherdoor - Vertical\"\n            data-vertical-subtitle=\"You cannot use the Weatherdoor without the Receptacles\"\n            data-vertical-part-number=\"RDPWP\"\n            data-horizontal-title=\"Weatherdoor - Horizontal\"\n            data-horizontal-subtitle=\"You cannot use the Weatherdoor without the Receptacles\"\n            data-horizontal-part-number=\"RDPWL\"\n        >\n            <div class=\"sp-variant-layout\">\n                <div class=\"sp-mobile-variant-title\">\n                    <div class=\"sp-slide-title\">Weatherdoor - Vertical<\/div>\n                    <div class=\"sp-slide-subtitle\">You cannot use the Weatherdoor without the Receptacles<\/div>\n                <\/div>\n\n                <div class=\"sp-variant-image-wrap\">\n                    <img decoding=\"async\" class=\"sp-variant-image\"\n                         src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Front-Wethear-Door-Vertical.png\"\n                         alt=\"SmartPlug Female Receptacle Vertical\"\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\">Weatherdoor - Vertical<\/div>\n                    <div class=\"sp-slide-subtitle\">You cannot use the Weatherdoor without the Receptacles<\/div>\n\n                    <div class=\"sp-variant-toggle-wrap\" aria-label=\"Orientation\">\n                        <div class=\"sp-variant-toggle-label\">SELECT VIEW<\/div>\n                        <div class=\"sp-variant-toggle\">\n                            <button type=\"button\" class=\"sp-variant-toggle-btn active\" data-view=\"vertical\">Vertical<\/button>\n                            <button type=\"button\" class=\"sp-variant-toggle-btn\" data-view=\"horizontal\">Horizontal<\/button>\n                        <\/div>\n                        <div class=\"sp-variant-showing\">Showing <strong class=\"sp-variant-showing-value\">Vertical<\/strong><\/div>\n                    <\/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 SmartPlug Female Receptacle features\">\n                <span class=\"sp-thumb-image\"><img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/07\/SmartPlug-Female-Receptacle.avif\" alt=\"SmartPlug Female Receptacle 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 SmartPlug Female Receptacle 30A \/ 50A\">\n                <span class=\"sp-thumb-image\"><img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30AMP-Receptable.png\" alt=\"SmartPlug Female Receptacle 30A \/ 50A\"><\/span>\n                <span class=\"sp-thumb-label\">Receptacles<\/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 THREE 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 30A \/ 50A\"><\/button>\n        <button type=\"button\" class=\"sp-page-dot\" data-page=\"2\" aria-label=\"Go to Vertical \/ Horizontal\"><\/button>\n    <\/div>\n<\/div>\n\n<style>\n\/* =========================================================\nSMARTPLUG DUAL CORDSET GALLERY\nAmazon-inspired product selector\n========================================================= *\/\n\n#sp-elci-gallery {\n    --sp-orange: #DF6B30;\n    --sp-dark: #1c1c1c;\n    --sp-muted: #666;\n    --sp-border: #dedede;\n    --sp-soft: #f7f7f7;\n\n    width: 100%;\n    height: 560px;\n    margin: 0 auto;\n    font-family: \"Montserrat\", sans-serif;\n    box-sizing: border-box;\n    overflow: visible;\n}\n\n#sp-elci-gallery *,\n#sp-elci-gallery *::before,\n#sp-elci-gallery *::after {\n    box-sizing: border-box;\n}\n\n\/* =========================================================\nMAIN VIEW\n========================================================= *\/\n\n#sp-elci-gallery .sp-main-view {\n    position: relative;\n    width: 100%;\n    height: 430px;\n    overflow: visible;\n}\n\n#sp-elci-gallery .sp-gallery-slide {\n    display: none;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: visible;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n}\n\n#sp-elci-gallery .sp-gallery-slide.active {\n    display: flex;\n}\n\n\/* =========================================================\nFEATURE IMAGE\n========================================================= *\/\n\n#sp-elci-gallery .sp-main-product {\n    position: relative;\n    width: 100%;\n    height: 400px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#sp-elci-gallery .sp-main-image-clip {\n    position: absolute;\n    inset: 0;\n    overflow: hidden;\n    pointer-events: none;\n    z-index: 1;\n}\n\n#sp-elci-gallery .sp-main-image-clip > img {\n    width: 100%;\n    height: 100%;\n    max-width: none;\n    object-fit: contain;\n    display: block;\n    transform:\n    translate(\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\/* =========================================================\nVARIANT IMAGE\n========================================================= *\/\n\n#sp-elci-gallery .sp-variant-layout {\n    width: 100%;\n    height: 100%;\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr);\n    align-items: center;\n    gap: 12px;\n}\n\n#sp-elci-gallery .sp-variant-image-wrap {\n    width: 100%;\n    height: 400px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    min-width: 0;\n}\n\n#sp-elci-gallery .sp-variant-image-wrap img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    display: block;\n    transform:\n    translate(var(--image-x-desktop), var(--image-y-desktop))\n    scale(var(--image-scale-desktop));\n    transform-origin: center center;\n    transition: opacity .16s ease, transform .18s ease;\n}\n\n\/* =========================================================\nPRODUCT INFORMATION\n========================================================= *\/\n\n#sp-elci-gallery .sp-slide-info {\n    width: 100%;\n    max-width: 400px;\n    margin-top: -2px;\n    padding: 0 12px;\n    text-align: center;\n    transition: none;\n}\n\n#sp-elci-gallery .sp-side-info {\n    max-width: none;\n    margin: 0;\n    padding: 2px 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\/* =========================================================\nHOTSPOTS\n========================================================= *\/\n\n#sp-elci-gallery .sp-hotspot {\n    position: absolute;\n    z-index: 1;\n    top: var(--sp-hotspot-top-px, var(--top));\n    left: var(--sp-hotspot-left-px, var(--left));\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: 1025px through 1366px *\/\n@media (min-width: 1025px) and (max-width: 1366px) {\n    #sp-elci-gallery .sp-hotspot {\n        top: var(--sp-hotspot-top-px, var(--top));\n        left: var(--sp-hotspot-left-px, var(--left));\n        transform:\n            translate(-50%, -50%)\n            scale(var(--hotspot-scale-laptop));\n    }\n}\n\n\/* TABLET PORTRAIT: 601px through 1024px *\/\n@media (min-width: 601px) and (max-width: 1024px) {\n    #sp-elci-gallery .sp-hotspot {\n        top: var(--sp-hotspot-top-px, var(--top));\n        left: var(--sp-hotspot-left-px, var(--left));\n        transform:\n            translate(-50%, -50%)\n            scale(var(--hotspot-scale-tablet));\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\/* =========================================================\nAMAZON-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\/* =========================================================\nTHUMBNAIL ARROWS\n========================================================= *\/\n\n#sp-elci-gallery .sp-thumb-nav {\n    display: none;\n    width: 26px;\n    min-width: 26px;\n    height: 26px;\n    align-self: center;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: #fff;\n    color: #222;\n    font-family: Arial, sans-serif;\n    font-size: 16px;\n    line-height: 26px;\n    text-align: center;\n    cursor: pointer;\n    appearance: none;\n    -webkit-appearance: none;\n}\n\n\/* =========================================================\nPAGINATION\n========================================================= *\/\n\n#sp-elci-gallery .sp-gallery-pagination {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 6px;\n    margin-top: 7px;\n}\n\n#sp-elci-gallery .sp-page-dot {\n    width: 6px;\n    height: 6px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: #c7c7c7;\n    cursor: pointer;\n    appearance: none;\n    -webkit-appearance: none;\n    transition: background .2s ease, transform .2s ease;\n}\n\n#sp-elci-gallery .sp-page-dot:hover,\n#sp-elci-gallery .sp-page-dot.active {\n    background: var(--sp-orange);\n}\n\n#sp-elci-gallery .sp-page-dot.active {\n    transform: scale(1.25);\n}\n\n\/* =========================================================\nFULL SCREEN VIEW + HOVER ZOOM\n========================================================= *\/\n\n#sp-elci-gallery .sp-fullscreen-trigger {\n    position: static;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    margin-top: 7px;\n    transform: none;\n    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\/* Feature button: centered and positioned immediately after the feature subtitle. *\/\n#sp-elci-gallery .sp-feature-fullscreen-trigger {\n    display: flex;\n    width: fit-content;\n    margin: 7px auto 0;\n}\n\n#sp-elci-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\n    display: none;\n}\n\n#sp-elci-gallery .sp-fullscreen-trigger:hover {\n    border-color: var(--sp-orange);\n    color: var(--sp-orange);\n}\n\n#sp-elci-gallery .sp-zoom-preview{\n    position:absolute;\n    top:0;\n    left:calc(100% + 12px);\n    width:78%;\n    height:100%;\n    background:#fff;\n    border:1px solid #e3e3e3;\n    border-radius:8px;\n    box-shadow:0 6px 20px rgba(0,0,0,.18);\n    overflow:hidden;\n    opacity:0;\n    visibility:hidden;\n    pointer-events:none;\n    z-index:999;\n    transition:opacity .12s ease, visibility .12s ease;\n}\n\n#sp-elci-gallery .sp-zoom-preview img{\n    position:absolute;\n    left:0;\n    top:0;\n    width:auto;\n    height:auto;\n    max-width:none;\n    max-height:none;\n    object-fit:initial;\n    display:block;\n    pointer-events:none;\n    will-change:left, top, width, height;\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@media (min-width:601px) and (max-width:1024px){\n    #sp-elci-gallery .sp-zoom-preview{\n        left:calc(100% + 10px);\n        width:72%;\n        height:100%;\n    }\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\/* =========================================================\nMOBILE\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-feature-fullscreen-trigger {\n        display: flex;\n        width: fit-content;\n        margin: 6px auto 0;\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    \/* Mobile variation layout:\n       image on the left + product information on the right,\n       matching the compact product-card layout shown in the reference. *\/\n    #sp-elci-gallery .sp-variant-slide .sp-variant-layout {\n        width: 100%;\n        display: grid;\n        grid-template-columns: minmax(0, 1.18fr) minmax(135px, .82fr);\n        align-items: center;\n        column-gap: 14px;\n        row-gap: 0;\n    }\n\n    \/* The desktop\/mobile duplicate title is not used in the two-column layout. *\/\n    #sp-elci-gallery .sp-variant-slide .sp-mobile-variant-title {\n        display: none;\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 IMAGE\n       Keep a reserved 4:3 image frame on the left so changing\n       between 30A and 50A does not move the information column. *\/\n    #sp-elci-gallery .sp-variant-slide .sp-variant-image-wrap {\n        width: 100%;\n        height: auto;\n        aspect-ratio: 4 \/ 3;\n        min-height: 0;\n        flex: 0 0 auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        grid-column: 1;\n        grid-row: 1;\n        order: initial;\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       The second thumbnail should read like the reference:\n       title + subtitle + selector + showing + part number +\n       fullscreen button all live in the right column. *\/\n    #sp-elci-gallery .sp-variant-slide .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: left;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        justify-content: center;\n        gap: 0;\n        grid-column: 2;\n        grid-row: 1;\n        order: initial;\n    }\n\n    \/* Use the right-column title\/subtitle on mobile. *\/\n\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-slide-title {\n        display: block;\n        margin: 0;\n        font-size: 22px;\n        line-height: .98;\n        letter-spacing: .8px;\n        text-align: left;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-slide-subtitle {\n        display: block;\n        margin: 5px 0 8px;\n        font-size: 10px;\n        line-height: 1.25;\n        text-align: left;\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    #sp-elci-gallery .sp-hotspot {\n        top: var(--sp-hotspot-top-px, var(--top));\n        left: var(--sp-hotspot-left-px, var(--left));\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 FIXED TITLE \/ IMAGE \/ CONTROLS SPACING *\/\n@media (max-width:600px){\n    #sp-elci-gallery .sp-main-view{\n        height:auto;\n        min-height:380px;\n    }\n\n    #sp-elci-gallery .sp-gallery-slide{\n        height:auto;\n        min-height:0;\n    }\n\n    #sp-elci-gallery .sp-variant-layout{\n        height:auto;\n        min-height:0px;\n    }\n\n    \/* Keep every variation on the same image viewing frame. *\/\n    #sp-elci-gallery .sp-variant-image-wrap{\n        height:auto;\n        min-height:0;\n        flex:0 0 auto;\n    }\n\n    \/* Reserve the same title space for every variation. *\/\n    #sp-elci-gallery .sp-mobile-variant-title{\n        height:70px;\n        min-height:70px;\n        max-height:70px;\n        overflow:hidden;\n        display:block;\n    }\n\n    \/* Keep the product controls aligned at the same level. *\/\n    #sp-elci-gallery .sp-side-info{\n        height:auto;\n        min-height:0;\n        max-height:none;\n        overflow:visible;\n        justify-content:flex-start;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-part-number{\n        margin:3px auto 0;\n        line-height:1.05;\n    }\n\n    \/* Keep the Full Screen button directly below the part number. *\/\n    #sp-elci-gallery .sp-side-info .sp-fullscreen-trigger{\n        margin-top:5px;\n    }\n\n    \/* Reduce the gap between product details and thumbnails. *\/\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   True two-column layout matching the supplied reference:\n   product image on the left, product information on the right.\n   Feature slide remains unchanged.\n   ========================================================= *\/\n@media (min-width:601px) and (max-width:1024px){\n\n    \/* Only active variation slides use the tablet product-card layout. *\/\n    #sp-elci-gallery .sp-main-view:has(.sp-gallery-slide.sp-variant-slide.active){\n        height:430px;\n        min-height:430px;\n    }\n\n    #sp-elci-gallery .sp-gallery-slide.sp-variant-slide.active{\n        height:100%;\n        min-height:430px;\n        overflow:visible;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-variant-layout{\n        width:100%;\n        height:100%;\n        min-height:0;\n        display:grid;\n        grid-template-columns:minmax(0, 1.18fr) minmax(260px, .82fr);\n        align-items:center;\n        gap:18px;\n    }\n\n    \/* No duplicate title above the image on tablet. *\/\n    #sp-elci-gallery .sp-variant-slide .sp-mobile-variant-title{\n        display:none;\n    }\n\n    \/* Left image column \u2014 fixed frame prevents variant swaps from moving\n       the information column or thumbnail strip. *\/\n    #sp-elci-gallery .sp-variant-slide .sp-variant-image-wrap{\n        width:100%;\n        height:400px;\n        min-height:400px;\n        aspect-ratio:auto;\n        min-width:0;\n        flex:0 0 400px;\n        grid-column:1;\n        grid-row:1;\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        transition:opacity .16s ease, transform .18s ease;\n    }\n\n    \/* Right product-information column. *\/\n    #sp-elci-gallery .sp-variant-slide .sp-side-info{\n        width:100%;\n        max-width:none;\n        height:100%;\n        min-height:0;\n        padding:0 6px 0 0;\n        margin:0;\n        text-align:left;\n        display:flex;\n        flex-direction:column;\n        align-items:flex-start;\n        justify-content:center;\n        gap:0;\n        grid-column:2;\n        grid-row:1;\n        order:initial;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-slide-title{\n        display:block;\n        margin:0;\n        font-size:28px;\n        line-height:1;\n        letter-spacing:1.2px;\n        text-align:left;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-slide-subtitle{\n        display:block;\n        margin:5px 0 8px;\n        font-size:11px;\n        line-height:1.3;\n        text-align:left;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-variant-toggle-wrap{\n        width:250px;\n        max-width:100%;\n        margin-top:2px;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-variant-toggle{\n        width:250px;\n        max-width:100%;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-variant-showing{\n        margin-top:7px;\n        font-size:10px;\n        text-align:left;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-part-number{\n        display:inline-block;\n        margin:8px 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:7px 0 0;\n        font-size:9px;\n        padding:6px 11px;\n    }\n}\n\n\/* =========================================================\n   FEMALE \/ MALE VARIATION TOGGLE\n   Uses the existing toggle visual language.\n   ========================================================= *\/\n#sp-elci-gallery .sp-variant-toggle-label{\n    margin-bottom:5px;\n    color:#777;\n    font-size:10px;\n    font-weight:700;\n    letter-spacing:.5px;\n}\n#sp-elci-gallery .sp-variant-showing{\n    margin-top:6px;\n    color:#777;\n    font-size:10px;\n    line-height:1.2;\n}\n#sp-elci-gallery .sp-variant-showing strong{\n    color:#555;\n    font-weight:700;\n}\n\n#sp-elci-gallery .sp-variant-toggle-wrap{\n    display:block;\n    margin-top:10px;\n    width:250px;\n    max-width:100%;\n}\n#sp-elci-gallery .sp-variant-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#sp-elci-gallery .sp-variant-toggle-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#sp-elci-gallery .sp-variant-toggle-btn.active{\n    background:var(--sp-orange);\n    color:#fff;\n}\n#sp-elci-gallery .sp-variant-toggle-btn:focus-visible{\n    outline:2px solid var(--sp-orange);\n    outline-offset:-2px;\n}\n\n\/* Desktop: fullscreen stays directly below the part number. *\/\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    #sp-elci-gallery .sp-side-info .sp-fullscreen-trigger{\n        align-self:flex-start;\n        margin-top:7px;\n    }\n}\n\n\/* Tablet\/mobile: keep the same fixed controls footprint. *\/\n@media (max-width:1024px){\n    #sp-elci-gallery .sp-variant-toggle-wrap{\n        width:250px;\n        max-width:100%;\n    }\n}\n@media (max-width:600px){\n    \/* Keep the right-side product information aligned to the left,\n       like the reference layout. *\/\n    #sp-elci-gallery .sp-variant-slide .sp-side-info{\n        align-items:flex-start;\n        text-align:left;\n    }\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-part-number{\n        margin-left:0;\n        margin-right:0;\n        text-align:left;\n    }\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-fullscreen-trigger{\n        margin-left:0;\n        margin-right:0;\n        align-self:flex-start;\n    }\n    #sp-elci-gallery .sp-variant-toggle-wrap{\n        width:100%;\n        max-width:250px;\n        margin-top:2px;\n    }\n    #sp-elci-gallery .sp-variant-toggle-label{\n        margin-bottom:4px;\n        font-size:9px;\n    }\n    #sp-elci-gallery .sp-variant-showing{\n        margin-top:6px;\n        font-size:10px;\n    }\n    #sp-elci-gallery .sp-variant-toggle{\n        width:100%;\n        max-width:250px;\n    }\n    #sp-elci-gallery .sp-variant-toggle-btn{\n        min-height:30px;\n        padding:6px 8px;\n        font-size:10px;\n    }\n    \/* Do not force the variation controls into a fixed-height box.\n       The 30A \/ 50A toggle + showing text + part number + fullscreen\n       button must all remain inside the gallery and push the content\n       below naturally instead of overlapping the page title. *\/\n    #sp-elci-gallery .sp-variant-slide .sp-side-info{\n        height:auto;\n        min-height:0;\n        max-height:none;\n        overflow:visible;\n        flex:0 0 auto;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-variant-toggle-wrap{\n        flex:0 0 auto;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-fullscreen-trigger{\n        flex:0 0 auto;\n        margin-top:5px;\n        margin-bottom:4px;\n    }\n\n    \/* Reserve a little breathing room before the thumbnail strip. *\/\n    #sp-elci-gallery .sp-variant-slide{\n        padding-bottom:4px;\n    }\n\n    \/* On very narrow phones, stack the two columns rather than\n       squeezing the selector and title too tightly. *\/\n    @media (max-width: 390px){\n        #sp-elci-gallery .sp-variant-slide .sp-variant-layout{\n            grid-template-columns: 1fr;\n            row-gap: 4px;\n        }\n\n        #sp-elci-gallery .sp-variant-slide .sp-variant-image-wrap{\n            grid-column: 1;\n            grid-row: 1;\n            aspect-ratio: 5 \/ 3;\n        }\n\n        #sp-elci-gallery .sp-variant-slide .sp-side-info{\n            grid-column: 1;\n            grid-row: 2;\n            align-items:center;\n            text-align:center;\n        }\n\n        #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-slide-title,\n        #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-slide-subtitle{\n            text-align:center;\n        }\n\n        #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-part-number{\n            margin-left:auto;\n            margin-right:auto;\n            text-align:center;\n        }\n\n        #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-fullscreen-trigger{\n            margin-left:auto;\n            margin-right:auto;\n            align-self:center;\n        }\n    }\n}\n@media (min-width:601px) and (max-width:1024px){\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-fullscreen-trigger{\n        margin-top:7px;\n    }\n}\n\n\/* Fullscreen connector toggle \u2014 shown only for the first variation. *\/\n#sp-elci-gallery .sp-fullscreen-variant-toggle{\n    display:none;\n    width:250px;\n    max-width:100%;\n    margin-top:12px;\n}\n#sp-elci-gallery .sp-fullscreen-variant-toggle.is-visible{\n    display:flex;\n    border:1px solid #d8d8d8;\n    border-radius:6px;\n    overflow:hidden;\n    background:#fff;\n}\n#sp-elci-gallery .sp-fullscreen-variant-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#sp-elci-gallery .sp-fullscreen-variant-btn.active{\n    background:var(--sp-orange);\n    color:#fff;\n}\n@media (max-width:600px){\n    #sp-elci-gallery .sp-fullscreen-variant-toggle{\n        width:100%;\n        max-width:250px;\n        margin-top:8px;\n    }\n    #sp-elci-gallery .sp-fullscreen-variant-btn{\n        min-height:30px;\n        padding:6px 8px;\n        font-size:10px;\n    }\n}\n\n\/* =========================================================\n   KICKER REMOVAL \u2014 ALL VIEWS \/ ALL RESPONSIVE BREAKPOINTS\n   ========================================================= *\/\n#sp-elci-gallery .sp-slide-kicker,\n#sp-elci-gallery .sp-fullscreen-kicker,\n#sp-elci-gallery [class*=\"kicker\"]{\n    display:none !important;\n}\n\n\n\/* =========================================================\n   MOBILE VARIANT TITLE \/ SUBTITLE \u2014 ABOVE PRODUCT IMAGE\n   <=600px only\n\n   Mobile variant order:\n   1. Title + subtitle\n   2. Product image\n   3. Variant controls \/ showing \/ part number \/ fullscreen\n   4. Thumbnails\n   Desktop and tablet layouts remain unchanged.\n   ========================================================= *\/\n@media (max-width:600px){\n\n    \/* Make the mobile variant layout a single vertical column. *\/\n    #sp-elci-gallery .sp-variant-slide .sp-variant-layout{\n        width:100%;\n        height:auto;\n        min-height:0;\n        display:grid;\n        grid-template-columns:1fr;\n        grid-template-rows:auto auto auto;\n        align-items:start;\n        justify-items:stretch;\n        column-gap:0;\n        row-gap:0;\n    }\n\n    \/* Title\/subtitle are now the first element, above the image. *\/\n    #sp-elci-gallery .sp-variant-slide .sp-mobile-variant-title{\n        width:100%;\n        height:auto;\n        min-height:0;\n        max-height:none;\n        padding:0 8px 6px;\n        margin:0;\n        display:block;\n        grid-column:1;\n        grid-row:1;\n        overflow:visible;\n        text-align:center;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-mobile-variant-title .sp-slide-title{\n        display:block;\n        width:100%;\n        margin:0;\n        font-size:23px;\n        line-height:.95;\n        letter-spacing:.8px;\n        text-align:center;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-mobile-variant-title .sp-slide-subtitle{\n        display:block;\n        width:100%;\n        margin:4px auto 0;\n        font-size:10px;\n        line-height:1.25;\n        text-align:center;\n    }\n\n    \/* Product image comes directly below the title\/subtitle. *\/\n    #sp-elci-gallery .sp-variant-slide .sp-variant-image-wrap{\n        width:100%;\n        height:auto;\n        min-height:0;\n        aspect-ratio:4 \/ 3;\n        flex:0 0 auto;\n        grid-column:1;\n        grid-row:2;\n        display:flex;\n        align-items:center;\n        justify-content:center;\n        position:relative;\n        overflow:visible;\n    }\n\n    \/* The side-info column now contains controls only.\n       Its duplicate title\/subtitle are hidden because they are\n       already displayed above the image. *\/\n    #sp-elci-gallery .sp-variant-slide .sp-side-info{\n        width:100%;\n        height:auto;\n        min-height:0;\n        max-height:none;\n        margin-top:20px;\n        padding:0;\n        display:flex;\n        flex-direction:column;\n        align-items:center;\n        justify-content:flex-start;\n        grid-column:1;\n        grid-row:3;\n        text-align:center;\n        overflow:visible;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-slide-title,\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-slide-subtitle{\n        display:none;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-variant-toggle-wrap{\n        width:100%;\n        max-width:250px;\n        margin-top:0;\n        text-align:center;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-variant-showing{\n        width:100%;\n        margin-top:6px;\n        text-align:center;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-part-number{\n        display:block;\n        width:100%;\n        margin:3px 0 0;\n        text-align:center;\n    }\n\n    #sp-elci-gallery .sp-variant-slide .sp-side-info .sp-fullscreen-trigger{\n        display:inline-flex;\n        align-self:center;\n        margin:5px auto 4px;\n    }\n\n    \/* Keep the same stacked order on very narrow phones too. *\/\n    @media (max-width:390px){\n        #sp-elci-gallery .sp-variant-slide .sp-variant-layout{\n            grid-template-columns:1fr;\n            grid-template-rows:auto auto auto;\n            row-gap:0;\n        }\n\n        #sp-elci-gallery .sp-variant-slide .sp-mobile-variant-title{\n            grid-column:1;\n            grid-row:1;\n            text-align:center;\n        }\n\n        #sp-elci-gallery .sp-variant-slide .sp-variant-image-wrap{\n            grid-column:1;\n            grid-row:2;\n            aspect-ratio:5 \/ 3;\n        }\n\n        #sp-elci-gallery .sp-variant-slide .sp-side-info{\n            grid-column:1;\n            grid-row:3;\n            align-items:center;\n            text-align:center;\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 CSS breakpoint-specific coordinates. *\/\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           Hotspots are anchored to the actual rendered\n           feature image, not to the gallery\/container.\n           ================================================= *\/\n\n        function getResponsiveMode() {\n            const width = window.innerWidth || document.documentElement.clientWidth || 0;\n\n            if (width <= 600) return \"mobile\";\n            if (width <= 1024) return \"tablet\";\n            if (width <= 1366) return \"laptop\";\n\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\n                if (Number.isFinite(parsedInline)) {\n                    return parsedInline;\n                }\n            }\n\n            const computedValue = window\n                .getComputedStyle(element)\n                .getPropertyValue(customProperty);\n\n            if (computedValue && computedValue.trim()) {\n                const parsedComputed = parseFloat(computedValue);\n\n                if (Number.isFinite(parsedComputed)) {\n                    return parsedComputed;\n                }\n            }\n\n            return fallback;\n        }\n\n        function readResponsiveImageSetting(\n            image,\n            propertyBase,\n            responsiveMode,\n            fallback\n        ) {\n            const imageWrap = image\n                ? image.closest(\".sp-main-product, .sp-variant-image-wrap\")\n                : null;\n\n            const responsiveProperty =\n                propertyBase + \"-\" + responsiveMode;\n\n            const desktopProperty =\n                propertyBase + \"-desktop\";\n\n            let value = readCssNumber(\n                image,\n                responsiveProperty,\n                NaN\n            );\n\n            if (Number.isFinite(value)) {\n                return value;\n            }\n\n            value = readCssNumber(\n                image,\n                desktopProperty,\n                NaN\n            );\n\n            if (Number.isFinite(value)) {\n                return value;\n            }\n\n            value = readCssNumber(\n                imageWrap,\n                responsiveProperty,\n                NaN\n            );\n\n            if (Number.isFinite(value)) {\n                return value;\n            }\n\n            value = readCssNumber(\n                imageWrap,\n                desktopProperty,\n                NaN\n            );\n\n            if (Number.isFinite(value)) {\n                return value;\n            }\n\n            return fallback;\n        }\n\n        function syncFeatureHotspots() {\n            const featureSlide = slides[0];\n\n            if (!featureSlide) return;\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 =\n                featureSlide.querySelectorAll(\".sp-hotspot\");\n\n            if (\n                !imageClip ||\n                !image ||\n                !featureHotspots.length\n            ) {\n                return;\n            }\n\n            if (\n                !image.naturalWidth ||\n                !image.naturalHeight\n            ) {\n                return;\n            }\n\n            const clipRect =\n                imageClip.getBoundingClientRect();\n\n            if (!clipRect.width || !clipRect.height) {\n                return;\n            }\n\n            const responsiveMode =\n                getResponsiveMode();\n\n            const imageScale =\n                readResponsiveImageSetting(\n                    image,\n                    \"--image-scale\",\n                    responsiveMode,\n                    1\n                );\n\n            const imageX =\n                readResponsiveImageSetting(\n                    image,\n                    \"--image-x\",\n                    responsiveMode,\n                    0\n                );\n\n            const imageY =\n                readResponsiveImageSetting(\n                    image,\n                    \"--image-y\",\n                    responsiveMode,\n                    0\n                );\n\n            const imageRatio =\n                image.naturalWidth \/\n                image.naturalHeight;\n\n            const containerRatio =\n                clipRect.width \/\n                clipRect.height;\n\n            let renderedWidth;\n            let renderedHeight;\n\n            if (imageRatio > containerRatio) {\n                renderedWidth =\n                    clipRect.width;\n\n                renderedHeight =\n                    renderedWidth \/\n                    imageRatio;\n            } else {\n                renderedHeight =\n                    clipRect.height;\n\n                renderedWidth =\n                    renderedHeight *\n                    imageRatio;\n            }\n\n            \/* Match the CSS transform scale around the image center. *\/\n            renderedWidth *= imageScale;\n            renderedHeight *= imageScale;\n\n            const renderedLeft =\n                clipRect.left +\n                (clipRect.width - renderedWidth) \/ 2 +\n                imageX;\n\n            const renderedTop =\n                clipRect.top +\n                (clipRect.height - renderedHeight) \/ 2 +\n                imageY;\n\n            featureHotspots.forEach(function (hotspot) {\n                \/*\n                 * Use the hotspot's actual containing block so the\n                 * final pixel coordinates remain correct if the\n                 * gallery structure changes.\n                 *\/\n                const parent =\n                    hotspot.offsetParent ||\n                    imageClip;\n\n                const parentRect =\n                    parent.getBoundingClientRect();\n\n                const topPercent =\n                    readCssNumber(\n                        hotspot,\n                        \"--top\",\n                        50\n                    );\n\n                const leftPercent =\n                    readCssNumber(\n                        hotspot,\n                        \"--left\",\n                        50\n                    );\n\n                const hotspotX =\n                    readCssNumber(\n                        hotspot,\n                        \"--hotspot-x\",\n                        0\n                    );\n\n                const hotspotY =\n                    readCssNumber(\n                        hotspot,\n                        \"--hotspot-y\",\n                        0\n                    );\n\n                const leftPx =\n                    renderedLeft -\n                    parentRect.left +\n                    (\n                        renderedWidth *\n                        leftPercent \/\n                        100\n                    ) +\n                    hotspotX;\n\n                const topPx =\n                    renderedTop -\n                    parentRect.top +\n                    (\n                        renderedHeight *\n                        topPercent \/\n                        100\n                    ) +\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                hotspot.dataset.responsiveZone =\n                    responsiveMode;\n            });\n        }\n\n        let hotspotFrame = null;\n\n        function scheduleFeatureHotspotSync() {\n            if (hotspotFrame) {\n                cancelAnimationFrame(hotspotFrame);\n            }\n\n            hotspotFrame =\n                requestAnimationFrame(function () {\n                    hotspotFrame = null;\n                    syncFeatureHotspots();\n                });\n        }\n\n        function setupFeatureHotspotObservers() {\n            const featureSlide = slides[0];\n\n            if (!featureSlide) return;\n\n            const featureImage =\n                featureSlide.querySelector(\n                    \".sp-main-image-clip > img\"\n                );\n\n            const featureClip =\n                featureSlide.querySelector(\n                    \".sp-main-image-clip\"\n                );\n\n            const featureWrap =\n                featureSlide.querySelector(\n                    \".sp-main-product.sp-hotspot-image\"\n                );\n\n            const mainView =\n                gallery.querySelector(\n                    \".sp-main-view\"\n                );\n\n            if (featureImage) {\n                featureImage.addEventListener(\n                    \"load\",\n                    scheduleFeatureHotspotSync\n                );\n            }\n\n            window.addEventListener(\n                \"resize\",\n                scheduleFeatureHotspotSync\n            );\n\n            window.addEventListener(\n                \"orientationchange\",\n                scheduleFeatureHotspotSync\n            );\n\n            if (window.ResizeObserver) {\n                const hotspotObserver =\n                    new ResizeObserver(function () {\n                        scheduleFeatureHotspotSync();\n                    });\n\n                [\n                    featureClip,\n                    featureWrap,\n                    featureImage,\n                    mainView\n                ].forEach(function (element) {\n                    if (element) {\n                        hotspotObserver.observe(element);\n                    }\n                });\n            }\n\n            if (window.MutationObserver) {\n                const hotspotMutationObserver =\n                    new MutationObserver(function () {\n                        scheduleFeatureHotspotSync();\n                    });\n\n                [\n                    featureImage,\n                    featureClip,\n                    featureWrap\n                ].forEach(function (element) {\n                    if (element) {\n                        hotspotMutationObserver.observe(\n                            element,\n                            {\n                                attributes: true,\n                                attributeFilter: [\n                                    \"style\",\n                                    \"class\"\n                                ]\n                            }\n                        );\n                    }\n                });\n            }\n\n            if (window.jQuery) {\n                jQuery(document).on(\n                    \"reset_data.spELCIHotspots hide_variation.spELCIHotspots found_variation.spELCIHotspots\",\n                    \"form.variations_form\",\n                    function () {\n                        scheduleFeatureHotspotSync();\n                    }\n                );\n            }\n\n            scheduleFeatureHotspotSync();\n        }\n\n        function showSlide(index) {\n            if (index < 0) index = slides.length - 1;\n            if (index >= slides.length) index = 0;\n\n            slides.forEach(function (slide, i) {\n                slide.classList.toggle(\"active\", i === index);\n            });\n\n            thumbs.forEach(function (thumb) {\n                const target = parseInt(thumb.getAttribute(\"data-target\"), 10);\n                thumb.classList.toggle(\"active\", target === index);\n            });\n\n            pageDots.forEach(function (dot, i) {\n                dot.classList.toggle(\"active\", i === index);\n            });\n\n            currentIndex = index;\n\n            if (index === 0) {\n                updateFeatureText();\n            } else {\n                const activeVariant = slides[index];\n                if (activeVariant) {\n                    updateVariantText(activeVariant, activeVariant.dataset.currentView || activeVariant.dataset.view || activeVariant.dataset.variant || \"\");\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            scheduleFeatureHotspotSync();\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            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            if (title) title.textContent = copy.title;\n            if (subtitle) subtitle.textContent = copy.subtitle;\n            if (partNumber) partNumber.textContent = copy.partNumber;\n        }\n\n        \/* =================================================\n           VARIATION IMAGE \/ EDITABLE COPY\n           Each variation uses the existing state-based\n           configuration\/toggle architecture.\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 || slide.dataset.variant || \"\";\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                image.style.opacity = \"0\";\n\n                window.setTimeout(function () {\n                    if (source) {\n                        image.src = source;\n                        image.classList.remove(\"is-empty\");\n                    } else {\n                        image.removeAttribute(\"src\");\n                        image.classList.add(\"is-empty\");\n                    }\n\n                    image.style.opacity = \"1\";\n\n                    slide.querySelectorAll(\".sp-variant-toggle-btn\").forEach(function (button) {\n                        button.classList.toggle(\"active\", button.dataset.view === view);\n                    });\n\n                    const showingValue = slide.querySelector(\".sp-variant-showing-value\");\n                    if (showingValue) {\n                        const activeButton = slide.querySelector('.sp-variant-toggle-btn[data-view=\"' + view + '\"]');\n                        showingValue.textContent = activeButton\n                            ? activeButton.textContent.trim()\n                            : view.charAt(0).toUpperCase() + view.slice(1);\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            slide._setView = function (selectedView) {\n                slide.dataset.currentView = selectedView || initialView;\n                updateImage(slide.dataset.currentView);\n            };\n\n            slide.querySelectorAll(\".sp-variant-toggle-btn\").forEach(function (button) {\n                button.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    const selectedView = button.dataset.view || initialView;\n                    slide._setView(selectedView);\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        fullscreenModal.innerHTML = `\n            <div class=\"sp-fullscreen-dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Product full screen view\">\n                <button type=\"button\" class=\"sp-fullscreen-close\" aria-label=\"Close full screen\">&times;<\/button>\n                <div class=\"sp-fullscreen-image-area\">\n                    <img class=\"sp-fullscreen-image\" alt=\"\">\n                <\/div>\n                <div class=\"sp-fullscreen-info\">\n                    <div class=\"sp-fullscreen-title\"><\/div>\n                    <div class=\"sp-fullscreen-description\"><\/div>\n                    <div class=\"sp-fullscreen-part-number\">PART NUMBER: <strong class=\"sp-fullscreen-part-number-value\"><\/strong><\/div>\n                    <div class=\"sp-fullscreen-variant-toggle\" aria-label=\"Variation configuration\">\n                        <button type=\"button\" class=\"sp-fullscreen-variant-btn active\" data-view=\"female\">Female<\/button>\n                        <button type=\"button\" class=\"sp-fullscreen-variant-btn\" data-view=\"male\">Male<\/button>\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 fullscreenVariantToggle = fullscreenModal.querySelector(\".sp-fullscreen-variant-toggle\");\n        const fullscreenVariantButtons = fullscreenModal.querySelectorAll(\".sp-fullscreen-variant-btn\");\n        const fullscreenClose = fullscreenModal.querySelector(\".sp-fullscreen-close\");\n\n        \/* =================================================\n           FEATURE IMAGE \u2014 NORMAL VIEW \/ FULL SCREEN VIEW\n           Normal view and full screen use separate images.\n           ================================================= *\/\n        const FEATURE_FULLSCREEN_IMAGE = \"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/07\/SmartPlug-Female-Receptacle.avif\";\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 || activeSlide.dataset.variant || \"\")\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;\n            const view = isVariation\n                ? (activeSlide.dataset.currentView || activeSlide.dataset.view || activeSlide.dataset.variant || \"\")\n                : \"\";\n\n            const viewImage = isVariation\n                ? (activeSlide.getAttribute(\"data-\" + view) || \"\")\n                : FEATURE_FULLSCREEN_IMAGE;\n\n            applyFullscreenSettings();\n\n            fullscreenImage.src = viewImage || activeImage.currentSrc || activeImage.src;\n            fullscreenImage.alt = copy.title || activeImage.alt || \"\";\n            fullscreenTitle.textContent = copy.title || \"\";\n            fullscreenDescription.textContent = copy.description || \"\";\n\n            if (fullscreenPartNumber) {\n                fullscreenPartNumber.textContent = isVariation ? (copy.partNumber || \"\") : \"\";\n                fullscreenPartNumber.parentElement.style.display = isVariation && copy.partNumber ? \"\" : \"none\";\n            }\n\n            const isVariationSlide = currentIndex >= 1 && activeSlide && activeSlide.classList.contains(\"sp-variant-slide\");\n            if (fullscreenVariantToggle) {\n                fullscreenVariantToggle.classList.toggle(\"is-visible\", !!isVariationSlide);\n\n                if (isVariationSlide) {\n                    const sourceButtons = activeSlide.querySelectorAll(\".sp-variant-toggle-btn\");\n\n                    fullscreenVariantButtons.forEach(function (button, index) {\n                        const sourceButton = sourceButtons[index];\n                        button.textContent = sourceButton ? sourceButton.textContent.trim() : \"\";\n                        button.dataset.view = sourceButton ? (sourceButton.dataset.view || \"\") : \"\";\n                        button.classList.toggle(\"active\", button.dataset.view === view);\n                        button.disabled = !sourceButton;\n                    });\n\n                    fullscreenVariantToggle.setAttribute(\n                        \"aria-label\",\n                        activeSlide.dataset.variant === \"amperage-variation\"\n                            ? \"Amperage configuration\"\n                            : \"Connector type\"\n                    );\n                }\n            }\n\n            fullscreenThumbs.innerHTML = \"\";\n\n            thumbs.forEach(function (thumb) {\n                const sourceImage = thumb.querySelector(\"img\");\n                if (!sourceImage) return;\n\n                const modalThumb = document.createElement(\"button\");\n                modalThumb.type = \"button\";\n                modalThumb.className = \"sp-fullscreen-thumb\";\n                modalThumb.setAttribute(\"aria-label\", thumb.getAttribute(\"aria-label\") || \"View product image\");\n\n                const modalThumbImage = document.createElement(\"img\");\n                modalThumbImage.src = sourceImage.currentSrc || sourceImage.src;\n                modalThumbImage.alt = sourceImage.alt || \"\";\n                modalThumb.appendChild(modalThumbImage);\n\n                const thumbTarget = parseInt(thumb.getAttribute(\"data-target\"), 10);\n                if (thumbTarget === currentIndex) modalThumb.classList.add(\"active\");\n\n                modalThumb.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    showSlide(thumbTarget);\n                    window.setTimeout(refreshFullscreenModal, 110);\n                });\n\n                fullscreenThumbs.appendChild(modalThumb);\n            });\n        }\n\n        let fullscreenScrollTop = 0;\n        let fullscreenScrollLeft = 0;\n        let fullscreenBodyPaddingRight = \"\";\n\n        function openFullscreenModal() {\n            refreshFullscreenModal();\n\n            fullscreenScrollTop = window.scrollY || window.pageYOffset || 0;\n            fullscreenScrollLeft = window.scrollX || window.pageXOffset || 0;\n            fullscreenBodyPaddingRight = document.body.style.paddingRight;\n\n            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n            if (scrollbarWidth > 0) {\n                document.body.style.paddingRight = scrollbarWidth + \"px\";\n            }\n\n            fullscreenModal.classList.add(\"is-open\");\n            fullscreenModal.setAttribute(\"aria-hidden\", \"false\");\n            document.body.style.overflow = \"hidden\";\n        }\n\n        function closeFullscreenModal() {\n            fullscreenModal.classList.remove(\"is-open\");\n            fullscreenModal.setAttribute(\"aria-hidden\", \"true\");\n            document.body.style.overflow = \"\";\n            document.body.style.paddingRight = fullscreenBodyPaddingRight;\n\n            window.scrollTo({\n                top: fullscreenScrollTop,\n                left: fullscreenScrollLeft,\n                behavior: \"auto\"\n            });\n        }\n\n        fullscreenClose.addEventListener(\"click\", function (event) {\n            event.preventDefault();\n            closeFullscreenModal();\n        });\n\n        fullscreenVariantButtons.forEach(function (button) {\n            button.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const activeSlide = slides[currentIndex];\n                if (!activeSlide || !activeSlide.classList.contains(\"sp-variant-slide\")) return;\n\n                const selectedView = button.dataset.view || activeSlide.dataset.currentView || activeSlide.dataset.view || \"\";\n                activeSlide.dataset.currentView = selectedView;\n\n                if (typeof activeSlide._setView === \"function\") {\n                    activeSlide._setView(selectedView);\n                } else {\n                    const image = activeSlide.querySelector(\".sp-variant-image\");\n                    const source = activeSlide.getAttribute(\"data-\" + selectedView) || \"\";\n                    if (image && source) image.src = source;\n                    updateVariantText(activeSlide, selectedView);\n                }\n\n                fullscreenVariantButtons.forEach(function (item) {\n                    item.classList.toggle(\"active\", item.dataset.view === selectedView);\n                });\n\n                window.setTimeout(refreshFullscreenModal, 110);\n            });\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 SLIDE \u2014 place the button directly after the subtitle and centered. *\/\n            const featureSlide = slides[0];\n            if (featureSlide && !featureSlide.querySelector(\".sp-fullscreen-trigger\")) {\n                const featureInfo = featureSlide.querySelector(\".sp-slide-info\");\n                const featureSubtitle = featureInfo\n                    ? featureInfo.querySelector(\".sp-slide-subtitle\")\n                    : null;\n\n                if (featureInfo) {\n                    const button = document.createElement(\"button\");\n                    button.type = \"button\";\n                    button.className = \"sp-fullscreen-trigger sp-feature-fullscreen-trigger\";\n                    button.textContent = \"View Full Screen\";\n                    button.addEventListener(\"click\", function (event) {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        openFullscreenModal();\n                    });\n\n                    if (featureSubtitle) {\n                        featureSubtitle.insertAdjacentElement(\"afterend\", button);\n                    } else {\n                        featureInfo.appendChild(button);\n                    }\n                }\n            }\n\n            \/* VARIATION SLIDES \u2014 keep the existing button placement 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                button.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    openFullscreenModal();\n                });\n\n                const sideInfo = slide.querySelector(\".sp-side-info\");\n\n                if (sideInfo) {\n                    const partNumber = sideInfo.querySelector(\".sp-part-number\");\n                    if (partNumber) {\n                        partNumber.insertAdjacentElement(\"afterend\", button);\n                    } else {\n                        sideInfo.appendChild(button);\n                    }\n                } else {\n                    imageWrap.appendChild(button);\n                }\n            });\n        }\n\n        function setupHoverZoom() {\n            variantSlides.forEach(function (slide) {\n                const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\n                const image = slide.querySelector(\".sp-variant-image\");\n                if (!imageWrap || !image || imageWrap.dataset.zoomInitialized === \"true\") return;\n\n                imageWrap.dataset.zoomInitialized = \"true\";\n\n                const preview = document.createElement(\"div\");\n                preview.className = \"sp-zoom-preview\";\n\n                const previewImage = document.createElement(\"img\");\n                previewImage.alt = \"\";\n                preview.appendChild(previewImage);\n                imageWrap.appendChild(preview);\n\n                const ZOOM_FACTOR = 2.25;\n\n                function syncPreviewImage() {\n                    const source = image.currentSrc || image.src;\n                    if (source) previewImage.src = source;\n                }\n\n                function getScaleFromTransform() {\n                    const transform = getComputedStyle(image).transform;\n                    if (!transform || transform === \"none\") {\n                        return { x: 1, y: 1 };\n                    }\n\n                    try {\n                        const matrix = new DOMMatrixReadOnly(transform);\n                        return {\n                            x: Math.abs(matrix.a) || 1,\n                            y: Math.abs(matrix.d) || 1\n                        };\n                    } catch (error) {\n                        return { x: 1, y: 1 };\n                    }\n                }\n\n                function updateZoom(event) {\n                    if (window.innerWidth <= 600 || !image.complete || !image.naturalWidth) return;\n\n                    const wrapRect = imageWrap.getBoundingClientRect();\n                    const previewRect = preview.getBoundingClientRect();\n\n                    if (!wrapRect.width || !wrapRect.height || !previewRect.width || !previewRect.height) return;\n\n                    \/*\n                     * Calculate the real visible image content for\n                     * object-fit: contain, then apply the gallery image scale.\n                     * This removes the percentage-based drift from the old\n                     * zoom implementation.\n                     *\/\n                    const boxWidth = image.offsetWidth;\n                    const boxHeight = image.offsetHeight;\n                    const sourceRatio = image.naturalWidth \/ image.naturalHeight;\n\n                    let contentWidth = boxWidth;\n                    let contentHeight = contentWidth \/ sourceRatio;\n\n                    if (contentHeight > boxHeight) {\n                        contentHeight = boxHeight;\n                        contentWidth = contentHeight * sourceRatio;\n                    }\n\n                    const transformScale = getScaleFromTransform();\n                    contentWidth *= transformScale.x;\n                    contentHeight *= transformScale.y;\n\n                    const imageRect = image.getBoundingClientRect();\n                    const contentLeft = imageRect.left + (imageRect.width - contentWidth) \/ 2;\n                    const contentTop = imageRect.top + (imageRect.height - contentHeight) \/ 2;\n\n                    let sourceX = event.clientX - contentLeft;\n                    let sourceY = event.clientY - contentTop;\n\n                    sourceX = Math.max(0, Math.min(contentWidth, sourceX));\n                    sourceY = Math.max(0, Math.min(contentHeight, sourceY));\n\n                    const zoomedWidth = contentWidth * ZOOM_FACTOR;\n                    const zoomedHeight = contentHeight * ZOOM_FACTOR;\n\n                    const halfPreviewWidth = previewRect.width \/ 2;\n                    const halfPreviewHeight = previewRect.height \/ 2;\n\n                    const minSourceX = halfPreviewWidth \/ ZOOM_FACTOR;\n                    const maxSourceX = contentWidth - minSourceX;\n                    const minSourceY = halfPreviewHeight \/ ZOOM_FACTOR;\n                    const maxSourceY = contentHeight - minSourceY;\n\n                    if (maxSourceX >= minSourceX) {\n                        sourceX = Math.max(minSourceX, Math.min(maxSourceX, sourceX));\n                    }\n\n                    if (maxSourceY >= minSourceY) {\n                        sourceY = Math.max(minSourceY, Math.min(maxSourceY, sourceY));\n                    }\n\n                    previewImage.style.width = zoomedWidth + \"px\";\n                    previewImage.style.height = zoomedHeight + \"px\";\n                    previewImage.style.left =\n                        (halfPreviewWidth - sourceX * ZOOM_FACTOR) + \"px\";\n                    previewImage.style.top =\n                        (halfPreviewHeight - sourceY * ZOOM_FACTOR) + \"px\";\n                }\n\n                image.addEventListener(\"load\", function () {\n                    syncPreviewImage();\n                });\n\n                syncPreviewImage();\n\n                imageWrap.addEventListener(\"mouseenter\", function (event) {\n                    if (window.innerWidth <= 600) return;\n                    syncPreviewImage();\n                    imageWrap.classList.add(\"sp-zoom-active\");\n                    updateZoom(event);\n                });\n\n                imageWrap.addEventListener(\"mouseleave\", function () {\n                    imageWrap.classList.remove(\"sp-zoom-active\");\n                });\n\n                imageWrap.addEventListener(\"mousemove\", updateZoom);\n\n                window.addEventListener(\"resize\", function () {\n                    if (imageWrap.classList.contains(\"sp-zoom-active\")) {\n                        const rect = imageWrap.getBoundingClientRect();\n                        updateZoom({\n                            clientX: rect.left + rect.width \/ 2,\n                            clientY: rect.top + rect.height \/ 2\n                        });\n                    }\n                });\n            });\n        }\n\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            );\n        }\n\n        setupFeatureHotspotObservers();\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})();\n<\/script>\n<\/body>\n<\/html>\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\">Female Receptacle<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b747897 elementor-widget elementor-widget-text-editor\" data-id=\"b747897\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3163390 elementor-widget elementor-widget-woocommerce-product-short-description\" data-id=\"3163390\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"woocommerce-product-short-description.default\"><div class=\"elementor-widget-container\"><div class=\"woocommerce-product-details__short-description\"><p>The SmartPlug Female Receptacle provides a secure, weather-resistant shore power connection with a spring-loaded Mechanical Locking System that ensures each receptacle locks firmly into place. Superior gaskets in the inlet cover and plug body create a Weather-Resistant Seal that helps prevent moisture penetration. The receptacle features a no-twist, push-in design that locks securely into the edge of the SmartPlug mounting flange for easy operation. Its asymmetrical body shape ensures the plug can only be inserted the correct way every time, even in the dark, while the self-cleaning pins and clips help maintain a reliable electrical connection over time.\u00a0<\/p><\/div><\/div><\/div>\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 Female Receptacle 1 Easy InstallationCompact design for quick installation. 2 High-Capacity TerminalsSupports secure and reliable power connections. 3 Locking RingSecures the connector during installation. 4 SmartPlug Connector BodyBuilt for durability and long-term use. 5 Stainless Steel Locking ClipKeeps the connection securely locked. 6 Weatherproof SealHelps protect against moisture and debris. Receptacle &#8211; 30Amp | 125V You cannot use the Receptacles without the Weatherdoor Receptacle &#8211; 30Amp | 125V You cannot use the Receptacles without the Weatherdoor SELECT AMPERAGE 30A 50A Showing 30A PART NUMBER: Weatherdoor &#8211; Vertical You cannot use the Weatherdoor without the Receptacles Weatherdoor &#8211; Vertical You cannot use the Weatherdoor without the Receptacles SELECT VIEW Vertical Horizontal Showing Vertical PART NUMBER: &#10094; Features Receptacles &#10095; Female Receptacle The SmartPlug Female Receptacle provides a secure, weather-resistant shore power connection with a spring-loaded Mechanical Locking System that ensures each receptacle locks firmly into place. Superior gaskets in the inlet cover and plug body create a Weather-Resistant Seal that helps prevent moisture penetration. The receptacle features a no-twist, push-in design that locks securely into the edge of the SmartPlug mounting flange for easy operation. Its asymmetrical body shape ensures the plug can only be inserted the correct way every time, even in the dark, while the self-cleaning pins and clips help maintain a reliable electrical connection over time.\u00a0 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-11313","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11313","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=11313"}],"version-history":[{"count":58,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11313\/revisions"}],"predecessor-version":[{"id":19622,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11313\/revisions\/19622"}],"wp:attachment":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/media?parent=11313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}