{"id":18013,"date":"2026-09-10T15:19:52","date_gmt":"2026-09-10T15:19:52","guid":{"rendered":"https:\/\/dev.smartplug.com\/staging\/?page_id=18013"},"modified":"2026-10-05T22:10:32","modified_gmt":"2026-10-05T22:10:32","slug":"angled-rv-cordset-50-amp","status":"publish","type":"page","link":"https:\/\/dev.smartplug.com\/staging\/angled-rv-cordset-50-amp\/","title":{"rendered":"Angled RV Cordset 50 Amp"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"18013\" class=\"elementor elementor-18013\">\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\">Angled RV Cordset 50 Amp<\/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-6b1c599 sp-hotspot-image elementor-widget elementor-widget-html\" data-id=\"6b1c599\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <!-- SMARTPLUG RV GALLERY -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n    <div id=\"sp-inlet-gallery\">\n\n        <div class=\"sp-main-view\">\n\n            <!-- FEATURE \/ HOTSPOT SLIDE -->\n            <div class=\"sp-gallery-slide active\" data-slide=\"0\">\n                <div class=\"sp-product-image-wrap sp-main-product sp-hotspot-image\">\n                    <div class=\"sp-main-image-clip\">\n                        <img decoding=\"async\"\n                        src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Angled-RV-Cordset-50A.png\"\n                        alt=\"Angled RV Cordset 30 Amp Features\"\n                        style=\"\n                        --image-x-desktop:0px;\n                        --image-y-desktop:0px;\n                        --image-scale-desktop:1;\n\n                        --image-x-laptop:0px;\n\n                        --image-y-laptop:0px;\n\n                        --image-scale-laptop:1;\n\n                        \n                        --image-x-tablet:0px;\n                        --image-y-tablet:0px;\n                        --image-scale-tablet:1;\n\n                        --image-x-mobile:0px;\n                        --image-y-mobile:0px;\n                        --image-scale-mobile:1;\n                        \"\n                        >\n                    <\/div>\n\n                    <div\n                    class=\"sp-hotspot\"\n                    tabindex=\"0\"\n                    style=\"\n                    \n                    --top:15%;\n                    --left:46%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n\n--hotspot-scale-desktop:1;\n--hotspot-scale-laptop:1;\n--hotspot-scale-tablet:1;\n--hotspot-scale-mobile:0.8;\n\n                    --tooltip-x-desktop:0px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n\n                    --tooltip-x-mobile:0px;\n                    --tooltip-y-mobile:0px;\n                    --tooltip-scale-mobile:1;\n\n                    --tooltip-x-laptop:0px;\n\n                    --tooltip-y-laptop:0px;\n\n                    --tooltip-scale-laptop:1;\n\n                    \n\n                    --tooltip-x-tablet:0px;\n\n                    --tooltip-y-tablet:0px;\n\n                    --tooltip-scale-tablet:1;\n\n                    --dot-color:#DF6B30;\n                    --number-color:#fff;\n                    --tooltip-bg:#DF6B30;\n                    \"\n                    >\n                    <div class=\"sp-dot\"><span class=\"sp-number\">1<\/span><\/div>\n                    <div class=\"sp-tooltip\">\n                        <strong>SmartPlug Connector<\/strong><br>\n                            Secure weatherproof connection.\n                        <\/div>\n                    <\/div>\n\n                    <div\n                    class=\"sp-hotspot\"\n                    tabindex=\"0\"\n                    style=\"\n                    \n                    --top:12%;\n                    --left:79%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-laptop:1;\n                    --hotspot-scale-tablet:1;\n                    --hotspot-scale-mobile:0.8;\n                    \n                    --tooltip-x-desktop:0px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n                    \n                    --tooltip-x-mobile:-30px;\n                    --tooltip-y-mobile:0px;\n                    --tooltip-scale-mobile:1;\n                    \n                    --tooltip-x-laptop:0px;\n                    \n                    --tooltip-y-laptop:0px;\n                    \n                    --tooltip-scale-laptop:1;\n                    \n                    \n                    \n                    --tooltip-x-tablet:0px;\n                    \n                    --tooltip-y-tablet:0px;\n                    \n                    --tooltip-scale-tablet:1;\n                    \n                    --dot-color:#DF6B30;\n                    --number-color:#fff;\n                    --tooltip-bg:#DF6B30;\n                    \"\n                    >\n                    <div class=\"sp-dot\"><span class=\"sp-number\">2<\/span><\/div>\n                    <div class=\"sp-tooltip\">\n                        <strong>Durable Design<\/strong><br>\n                            Built for demanding environments.\n                        <\/div>\n                    <\/div>\n\n                    <div\n                    class=\"sp-hotspot\"\n                    tabindex=\"0\"\n                    style=\"\n                    \n                    --top:25.5%;\n                    --left:85%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-laptop:1;\n                    --hotspot-scale-tablet:1;\n                    --hotspot-scale-mobile:0.8;\n                    \n                    --tooltip-x-desktop:0px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n                    \n                    --tooltip-x-mobile:-50px;\n                    --tooltip-y-mobile:0px;\n                    --tooltip-scale-mobile:1;\n                    \n                    --tooltip-x-laptop:0px;\n                    \n                    --tooltip-y-laptop:0px;\n                    \n                    --tooltip-scale-laptop:1;\n                    \n                    \n                    \n                    --tooltip-x-tablet:0px;\n                    \n                    --tooltip-y-tablet:0px;\n                    \n                    --tooltip-scale-tablet:1;\n                    \n                    --dot-color:#DF6B30;\n                    --number-color:#fff;\n                    --tooltip-bg:#DF6B30;\n                    \"\n                    >\n                    <div class=\"sp-dot\"><span class=\"sp-number\">3<\/span><\/div>\n                    <div class=\"sp-tooltip\">\n                        <strong>Strain Relief<\/strong><br>\n                            Reduces cable stress.\n                        <\/div>\n                    <\/div>\n\n                    <div\n                    class=\"sp-hotspot\"\n                    tabindex=\"0\"\n                    style=\"\n                    \n                    --top:70%;\n                    --left:88%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-laptop:1;\n                    --hotspot-scale-tablet:1;\n                    --hotspot-scale-mobile:0.8;\n                    \n                    --tooltip-x-desktop:0px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n                    \n                    --tooltip-x-mobile:-50px;\n                    --tooltip-y-mobile:0px;\n                    --tooltip-scale-mobile:1;\n                    \n                    --tooltip-x-laptop:0px;\n                    \n                    --tooltip-y-laptop:0px;\n                    \n                    --tooltip-scale-laptop:1;\n                    \n                    \n                    \n                    --tooltip-x-tablet:0px;\n                    \n                    --tooltip-y-tablet:0px;\n                    \n                    --tooltip-scale-tablet:1;\n                    \n                    --dot-color:#DF6B30;\n                    --number-color:#fff;\n                    --tooltip-bg:#DF6B30;\n                    \"\n                    >\n                    <div class=\"sp-dot\"><span class=\"sp-number\">4<\/span><\/div>\n                    <div class=\"sp-tooltip\">\n                        <strong>Heavy-Duty Construction<\/strong><br>\n                            Deleivers dependable RV power.\n                        <\/div>\n                    <\/div>\n                    \n                    <div\n                    class=\"sp-hotspot\"\n                    tabindex=\"0\"\n                    style=\"\n                    \n                    --top:79%;\n                    --left:10%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-laptop:1;\n                    --hotspot-scale-tablet:1;\n                    --hotspot-scale-mobile:0.8;\n                    \n                    --tooltip-x-desktop:0px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n                    \n                    --tooltip-x-mobile:50px;\n                    --tooltip-y-mobile:0px;\n                    --tooltip-scale-mobile:1;\n                    \n                    --tooltip-x-laptop:70px;\n                    --tooltip-y-laptop:0px;\n                    --tooltip-scale-laptop:1;\n                    \n                    \n                    \n                    --tooltip-x-tablet:0px;\n                    --tooltip-y-tablet:0px;\n                    --tooltip-scale-tablet:1;\n                    \n                    --dot-color:#DF6B30;\n                    --number-color:#fff;\n                    --tooltip-bg:#DF6B30;\n                    \"\n                    >\n                    <div class=\"sp-dot\"><span class=\"sp-number\">5<\/span><\/div>\n                    <div class=\"sp-tooltip\">\n                        <strong>Tangle-Free Coil<\/strong><br>\n                            Easy to store and deploy.\n                        <\/div>\n                    <\/div>\n                   \n                   <div\n                    class=\"sp-hotspot\"\n                    tabindex=\"0\"\n                    style=\"\n                    \n                    --top:43%;\n                    --left:10%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-laptop:1;\n                    --hotspot-scale-tablet:1;\n                    --hotspot-scale-mobile:0.8;\n                    \n                    --tooltip-x-desktop:0px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n                    \n                    --tooltip-x-mobile:30px;\n                    --tooltip-y-mobile:0px;\n                    --tooltip-scale-mobile:1;\n                    \n                    --tooltip-x-laptop:50px;\n                    --tooltip-y-laptop:0px;\n                    --tooltip-scale-laptop:1;\n                    \n                    \n                    \n                    --tooltip-x-tablet:0px;\n                    --tooltip-y-tablet:0px;\n                    --tooltip-scale-tablet:1;\n                    \n                    --dot-color:#DF6B30;\n                    --number-color:#fff;\n                    --tooltip-bg:#DF6B30;\n                    \"\n                    >\n                    <div class=\"sp-dot\"><span class=\"sp-number\">6<\/span><\/div>\n                    <div class=\"sp-tooltip\">\n                        <strong>Premium Cable<\/strong><br>\n                            Flexible and durable power cord\n                        <\/div>\n                    <\/div>\n                   \n                <\/div>\n\n                <div\n                class=\"sp-slide-info\"\n                >\n                <div class=\"sp-slide-title\">Key Features<\/div>\n                <div class=\"sp-slide-subtitle\">Click the numbered points to explore the inlet.\n                <\/div>\n            <\/div>\n        <\/div>\n\n\n        <!-- =====================================================\n        PRODUCT VARIANTS \u2014 MATERIAL TOGGLE\n        ===================================================== -->\n\n        <div class=\"sp-gallery-slide sp-variant-slide\" data-slide=\"1\" data-variant=\"coil\" data-material=\"Plastic\" data-color=\"Plastic\" data-plastic=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RV-Cordset-50A.png\">\n            <div class=\"sp-variant-layout\">\n\n                <div class=\"sp-mobile-variant-title\">\n<div class=\"sp-slide-title\">Angled RV Cordset<\/div>\n                    <div class=\"sp-slide-subtitle\">Non-metallic<\/div>\n                <\/div>\n\n                <div class=\"sp-variant-image-wrap\"><img decoding=\"async\" class=\"sp-variant-image\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RV-Cordset-50A.png\" alt=\"50A Coil - Black Plastic\"\n                    style=\"\n                    --image-x-desktop:10px;\n                    --image-y-desktop:0px;\n                    --image-scale-desktop:1.2;\n\n                    --image-x-laptop:0px;\n\n                    --image-y-laptop:0px;\n\n                    --image-scale-laptop:1;\n\n                    \n                    --image-x-tablet:0px;\n                    --image-y-tablet:0px;\n                    --image-scale-tablet:1;\n\n                    --image-x-mobile:0px;\n                    --image-y-mobile:0px;\n                    --image-scale-mobile:1;\n                    \"\n                    ><\/div>\n\n                    <div\n                    class=\"sp-slide-info sp-side-info\"\n                    >\n<div class=\"sp-slide-title\">Angled RV Cordset<\/div>\n                    <div class=\"sp-slide-subtitle\">Non-metallic<\/div>\n                    \n                    <div class=\"sp-part-number\">PART NUMBER: <strong>R50503A<\/strong><\/div>\n\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <div class=\"sp-gallery-slide sp-variant-slide\" data-slide=\"2\" data-variant=\"socket\" data-material=\"Plastic\" data-color=\"Plastic\" data-plastic=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RV-Cordset-50A-End-Plug.png\">\n            <div class=\"sp-variant-layout\">\n\n                <div class=\"sp-mobile-variant-title\">\n<div class=\"sp-slide-title\">Angled RV - Scoket End<\/div>\n                    <div class=\"sp-slide-subtitle\">Non-metallic<\/div>\n                <\/div>\n\n                <div class=\"sp-variant-image-wrap\"><img decoding=\"async\" class=\"sp-variant-image\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RV-Cordset-50A-End-Plug.png\" alt=\"50A Socket End - Black Plastic\"\n                    style=\"\n                    --image-x-desktop:50px;\n                    --image-y-desktop:0px;\n                    --image-scale-desktop:1.2;\n\n                    --image-x-laptop:0px;\n\n                    --image-y-laptop:0px;\n\n                    --image-scale-laptop:1;\n\n                    \n                    --image-x-tablet:0px;\n                    --image-y-tablet:0px;\n                    --image-scale-tablet:1;\n\n                    --image-x-mobile:0px;\n                    --image-y-mobile:0px;\n                    --image-scale-mobile:1;\n                    \"\n                    ><\/div>\n\n                    <div\n                    class=\"sp-slide-info sp-side-info\"\n                    >\n<div class=\"sp-slide-title\">ANGLED RV - Socket End<\/div>\n                    <div class=\"sp-slide-subtitle\">Non-metallic<\/div>\n                    \n                    <div class=\"sp-part-number\">PART NUMBER: <strong>R5050A<\/strong><\/div>\n\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <div class=\"sp-gallery-slide sp-variant-slide\" data-slide=\"3\" data-variant=\"plug\" data-material=\"Plug End\" data-color=\"Plug End\" data-plastic=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RV-Cordset-50A-End-Plug-2.png\">\n            <div class=\"sp-variant-layout\">\n\n                <div class=\"sp-mobile-variant-title\">\n                <div class=\"sp-slide-title\">ANGLED RV - 3 Pin Push-type Connector<\/div>\n                    <div class=\"sp-slide-subtitle\">Non-metallic<\/div>\n                <\/div>\n\n                <div class=\"sp-variant-image-wrap\"><img decoding=\"async\" class=\"sp-variant-image\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RV-Cordset-50A-End-Plug-2.png\" alt=\"50A Plug End\"\n                    style=\"\n                    --image-x-desktop:50px;\n                    --image-y-desktop:0px;\n                    --image-scale-desktop:1.2;\n\n                    --image-x-laptop:0px;\n\n                    --image-y-laptop:0px;\n\n                    --image-scale-laptop:1;\n\n                    \n                    --image-x-tablet:0px;\n                    --image-y-tablet:0px;\n                    --image-scale-tablet:1;\n\n                    --image-x-mobile:0px;\n                    --image-y-mobile:0px;\n                    --image-scale-mobile:1;\n                    \"\n                    ><\/div>\n\n                    <div\n                    class=\"sp-slide-info sp-side-info\"\n                    >\n                    <div class=\"sp-slide-title\">ANGLED RV - 3 Pin Push-type Connector<\/div>\n                    <div class=\"sp-slide-subtitle\">Non-metallic<\/div>\n                    \n                    <div class=\"sp-part-number\">PART NUMBER: <strong>R5050A<\/strong><\/div>\n\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <!-- =========================================================\n    AMAZON-STYLE CLICKABLE PRODUCT STRIP\n    ========================================================= -->\n    <div class=\"sp-product-selector\">\n\n        <button type=\"button\" class=\"sp-thumb-nav sp-thumb-prev\" aria-label=\"Previous product image\">&#10094;<\/button>\n\n        <div class=\"sp-thumbnails\">\n\n            <button type=\"button\" class=\"sp-thumb sp-feature-thumb active\" data-target=\"0\" aria-label=\"View Angled RV Cordset 30 Amp Features\">\n                <span class=\"sp-thumb-image\">\n                    <img decoding=\"async\"\n                    src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RV-Cordset-50A.png\"\n                    alt=\"Angled RV Cordset 30 Amp Features\"\n                    >\n                <\/span>\n                <span class=\"sp-thumb-label\">Features<\/span>\n            <\/button>\n\n            <button type=\"button\" class=\"sp-thumb\" data-target=\"1\" aria-label=\"View 30A Coil\">\n                <span class=\"sp-thumb-image\">\n                    <img decoding=\"async\"\n                    src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RV-Cordset-50A.png\"\n                    alt=\"30A Coil - Black Plastic\"\n                    >\n                <\/span>\n                <span class=\"sp-thumb-label\">Coil<\/span>\n                \n            <\/button>\n\n            <button type=\"button\" class=\"sp-thumb\" data-target=\"2\" aria-label=\"View 30A Socket End\">\n                <span class=\"sp-thumb-image\">\n                    <img decoding=\"async\"\n                    src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RV-Cordset-50A-End-Plug.png\"\n                    alt=\"30A Socket End - Black Plastic\"\n                    >\n                <\/span>\n                <span class=\"sp-thumb-label\">Socket<\/span>\n                \n            <\/button>\n\n            <button type=\"button\" class=\"sp-thumb\" data-target=\"3\" aria-label=\"View 30A Plug End\">\n                <span class=\"sp-thumb-image\">\n                    <img decoding=\"async\"\n                    src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RV-Cordset-50A-End-Plug-2.png\"\n                    alt=\"30A Plug End\"\n                    >\n                <\/span>\n                <span class=\"sp-thumb-label\">Plug<\/span>\n                \n            <\/button>\n\n        <\/div>\n\n        <button type=\"button\" class=\"sp-thumb-nav sp-thumb-next\" aria-label=\"Next product image\">&#10095;<\/button>\n    <\/div>\n\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 coil\"><\/button>\n        <button type=\"button\" class=\"sp-page-dot\" data-page=\"2\" aria-label=\"Go to socket\"><\/button>\n        <button type=\"button\" class=\"sp-page-dot\" data-page=\"3\" aria-label=\"Go to plug\"><\/button>\n    <\/div>\n\n    <\/div> <!-- Close #sp-inlet-gallery -->\n    <\/div>\n\n    <style>\n    \/* =========================================================\n    SMARTPLUG INLET GALLERY\n    Amazon-inspired product selector\n    ========================================================= *\/\n\n    #sp-inlet-gallery {\n        --sp-orange: #DF6B30;\n        --sp-dark: #1c1c1c;\n        --sp-muted: #666;\n        --sp-border: #dedede;\n        --sp-soft: #f7f7f7;\n\n        \/* =====================================================\n           HOVER ZOOM TRIGGER \u2014 EDIT HERE\n           Distance in pixels outside the visible product image\n           where the zoom can still activate.\n           0px = only over the image\n           20px = very close to the image\n           30px = slightly more forgiving\n           ===================================================== *\/\n        --sp-zoom-trigger-padding-desktop: 25px;\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-inlet-gallery *,\n    #sp-inlet-gallery *::before,\n    #sp-inlet-gallery *::after {\n        box-sizing: border-box;\n    }\n\n    \/* =========================================================\n    MAIN VIEW\n    ========================================================= *\/\n\n    #sp-inlet-gallery .sp-main-view {\n        position: relative;\n        width: 100%;\n        height: 430px;\n        overflow: visible;\n    }\n\n    #sp-inlet-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-inlet-gallery .sp-gallery-slide.active {\n        display: flex;\n    }\n\n    \/* =========================================================\n    FEATURE IMAGE\n    ========================================================= *\/\n\n    #sp-inlet-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-inlet-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-inlet-gallery .sp-main-image-clip > img {\n        width: 100%;\n        height: 100%;\n        max-width: none;\n        object-fit: contain;\n        display: block;\n        transform:\n        translate(var(--image-x-desktop), var(--image-y-desktop))\n        scale(var(--image-scale-desktop));\n        transform-origin: center center;\n        transition: transform .18s ease;\n    }\n\n    @media (min-width: 1025px) and (max-width: 1366px) {\n        #sp-inlet-gallery .sp-hotspot {\n            transform:\n                translate(-50%, -50%)\n                scale(var(--hotspot-scale-laptop));\n        }\n\n        #sp-inlet-gallery .sp-main-image-clip > img {\n            transform:\n                translate(var(--image-x-laptop), var(--image-y-laptop))\n                scale(var(--image-scale-laptop));\n        }\n\n        #sp-inlet-gallery .sp-variant-image-wrap img {\n            transform:\n                translate(var(--image-x-laptop), var(--image-y-laptop))\n                scale(var(--image-scale-laptop));\n        }\n\n        #sp-inlet-gallery .sp-tooltip {\n            bottom: calc(100% + 7px - var(--tooltip-y-laptop));\n            left: calc(50% + var(--tooltip-x-laptop));\n            transform:\n                translateX(-50%)\n                scale(var(--tooltip-scale-laptop));\n        }\n    }\n\n    @media (min-width: 601px) and (max-width: 1024px) {\n        #sp-inlet-gallery .sp-hotspot {\n            transform:\n                translate(-50%, -50%)\n                scale(var(--hotspot-scale-tablet));\n        }\n\n        #sp-inlet-gallery .sp-main-image-clip > img {\n            transform:\n                translate(var(--image-x-tablet), var(--image-y-tablet))\n                scale(var(--image-scale-tablet));\n        }\n\n        #sp-inlet-gallery .sp-variant-image-wrap img {\n            transform:\n                translate(var(--image-x-tablet), var(--image-y-tablet))\n                scale(var(--image-scale-tablet));\n        }\n\n        #sp-inlet-gallery .sp-tooltip {\n            bottom: calc(100% + 7px - var(--tooltip-y-tablet));\n            left: calc(50% + var(--tooltip-x-tablet));\n            transform:\n                translateX(-50%)\n                scale(var(--tooltip-scale-tablet));\n        }\n\n        #sp-inlet-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\n    \/* =========================================================\n    VARIANT IMAGE\n    ========================================================= *\/\n\n    #sp-inlet-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-inlet-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-inlet-gallery .sp-variant-image-wrap img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        transform:\n        translate(var(--image-x-desktop), var(--image-y-desktop))\n        scale(var(--image-scale-desktop));\n        transform-origin: center center;\n        transition: opacity .16s ease, transform .18s ease;\n    }\n\n    \/* =========================================================\n    PRODUCT INFORMATION\n    ========================================================= *\/\n\n    #sp-inlet-gallery .sp-slide-info {\n        width: 100%;\n        max-width: 480px;\n        margin-top: -2px;\n        padding: 0 12px;\n        text-align: center;\n        transition: none;\n    }\n\n    #sp-inlet-gallery .sp-side-info {\n        max-width: none;\n        margin: 0;\n        padding: 2px 2px 2px 2px;\n        text-align: left;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n    }\n\n    #sp-inlet-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-inlet-gallery .sp-amp-label {\n        margin-top: 17px;\n        color: #777;\n        font-size: 11px;\n        font-weight: 700;\n        letter-spacing: .5px;\n    }\n\n    #sp-inlet-gallery .sp-amp-toggle {\n        display: flex;\n        width: 100%;\n        max-width: 170px;\n        margin-top: 6px;\n        border: 1px solid #d8d8d8;\n        border-radius: 6px;\n        overflow: hidden;\n        background: #fff;\n    }\n\n    #sp-inlet-gallery .sp-amp-btn {\n        flex: 1 1 50%;\n        min-height: 30px;\n        padding: 7px 10px;\n        border: 0;\n        border-right: 0px solid #d8d8d8;\n        background: #fff;\n        color: #333;\n        font-family: \"Montserrat\", sans-serif;\n        font-size: 12px;\n        font-weight: 700;\n        cursor: pointer;\n        appearance: none;\n        -webkit-appearance: none;\n        transition: background .18s ease, color .18s ease;\n    }\n\n    #sp-inlet-gallery .sp-amp-btn:last-child { border-right: 0; }\n    #sp-inlet-gallery .sp-amp-btn.active { background: var(--sp-orange); color: #fff; }\n    #sp-inlet-gallery .sp-amp-btn:disabled { background: #f2f2f2; color: #aaa; cursor: not-allowed; }\n\n    #sp-inlet-gallery .sp-current-amp {\n        margin-top: 8px;\n        color: #555;\n        font-size: 12px;\n    }\n\n    #sp-inlet-gallery .sp-side-info .sp-part-number { margin-top: 10px; }\n    #sp-inlet-gallery .sp-side-info .sp-part-number + .sp-fullscreen-trigger {\n        margin-top: 8px;\n        align-self: flex-start;\n    }\n\n    #sp-inlet-gallery .sp-mobile-variant-title {\n        display: none;\n    }\n#sp-inlet-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-inlet-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-inlet-gallery .sp-variant-image.is-empty {\n        visibility: hidden;\n    }\n\n    #sp-inlet-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-inlet-gallery .sp-part-number strong {\n        color: var(--sp-dark);\n    }\n\n    \/* =========================================================\n    HOTSPOTS\n    ========================================================= *\/\n\n    #sp-inlet-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    }\n\n    #sp-inlet-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-inlet-gallery .sp-number {\n        color: var(--number-color);\n        font-size: 13px;\n        font-weight: 700;\n        line-height: 1;\n    }\n\n    #sp-inlet-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-inlet-gallery .sp-hotspot:hover .sp-tooltip,\n    #sp-inlet-gallery .sp-hotspot:focus-visible .sp-tooltip,\n    #sp-inlet-gallery .sp-hotspot.is-open .sp-tooltip {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    \/* =========================================================\n    AMAZON-STYLE PRODUCT SELECTOR\n    ========================================================= *\/\n\n    #sp-inlet-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-inlet-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-inlet-gallery .sp-thumbnails::-webkit-scrollbar {\n        display: none;\n    }\n\n    #sp-inlet-gallery .sp-thumb {\n        flex: 0 0 82px;\n        width: 82px;\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-inlet-gallery .sp-thumb:hover {\n        border-color: var(--sp-orange);\n        transform: translateY(-1px);\n    }\n\n    #sp-inlet-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-inlet-gallery .sp-thumb:focus {\n        outline: none;\n    }\n\n    #sp-inlet-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-inlet-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-inlet-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-inlet-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-inlet-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-inlet-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-inlet-gallery .sp-feature-thumb .sp-thumb-part {\n        visibility: hidden;\n    }\n\n    \/* =========================================================\n    THUMBNAIL ARROWS\n    ========================================================= *\/\n\n    #sp-inlet-gallery .sp-thumb-nav {\n        display: none;\n        width: 26px;\n        min-width: 26px;\n        height: 26px;\n        align-self: center;\n        padding: 0;\n        border: 0;\n        border-radius: 50%;\n        background: #fff;\n        color: #222;\n        font-family: Arial, sans-serif;\n        font-size: 16px;\n        line-height: 26px;\n        text-align: center;\n        cursor: pointer;\n        appearance: none;\n        -webkit-appearance: none;\n    }\n\n    \/* =========================================================\n    PAGINATION\n    ========================================================= *\/\n\n    #sp-inlet-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-inlet-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-inlet-gallery .sp-page-dot:hover,\n    #sp-inlet-gallery .sp-page-dot.active {\n        background: var(--sp-orange);\n    }\n\n    #sp-inlet-gallery .sp-page-dot.active {\n        transform: scale(1.25);\n    }\n\n    \/* =========================================================\n    FULL SCREEN VIEW + HOVER ZOOM\n    ========================================================= *\/\n\n    #sp-inlet-gallery .sp-fullscreen-trigger {\n        position: static;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        align-self: center;\n        margin-top: 8px;\n        transform: none;\n        z-index: 20;\n        border: 1px solid #d7d7d7;\n        border-radius: 4px;\n        background: #fff;\n        color: #333;\n        padding: 6px 11px;\n        font-family: \"Montserrat\", sans-serif;\n        font-size: 9px;\n        font-weight: 700;\n        letter-spacing: .2px;\n        line-height: 1;\n        cursor: pointer;\n        white-space: nowrap;\n        appearance: none;\n        -webkit-appearance: none;\n        box-shadow: 0 1px 4px rgba(0,0,0,.08);\n        transition: border-color .18s ease, color .18s ease, background .18s ease;\n    }\n\n    #sp-inlet-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\n        display: none;\n    }\n\n    #sp-inlet-gallery .sp-fullscreen-trigger:hover {\n        border-color: var(--sp-orange);\n        color: var(--sp-orange);\n    }\n\n    #sp-inlet-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: 200;\n        transition: opacity .12s ease, visibility .12s ease;\n    }\n\n    #sp-inlet-gallery .sp-zoom-preview img {\n        position: absolute;\n        width: 200%;\n        height: 200%;\n        max-width: none;\n        object-fit: contain;\n        display: block;\n        pointer-events: none;\n        transform-origin: top left;\n    }\n\n    #sp-inlet-gallery .sp-variant-image-wrap.sp-zoom-active .sp-zoom-preview {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    \/* Full-screen product popup *\/\n    #sp-inlet-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-inlet-gallery .sp-fullscreen-modal.is-open {\n        display: flex;\n    }\n\n    #sp-inlet-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-inlet-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-inlet-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-inlet-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-inlet-gallery .sp-fullscreen-info {\n        min-width: 0;\n        padding: 8px 18px 8px 0;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        justify-content: flex-start;\n        overflow-y: auto;\n    }\n\n    #sp-inlet-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.02;\n        letter-spacing: 1px;\n        text-transform: uppercase;\n        max-width: 100%;\n    }\n\n    #sp-inlet-gallery .sp-fullscreen-description {\n        margin-top: 9px;\n        color: #666;\n        font-size: 13px;\n        line-height: 1.4;\n    }\n\n    #sp-inlet-gallery .sp-fullscreen-part-number {\n        margin-top: 8px;\n        color: #555;\n        font-size: 12px;\n        font-weight: 600;\n        letter-spacing: .35px;\n        line-height: 1.35;\n    }\n\n    #sp-inlet-gallery .sp-fullscreen-part-number strong {\n        color: var(--sp-dark);\n        font-weight: 800;\n    }\n\n    #sp-inlet-gallery .sp-fullscreen-thumbnails {\n        width: 100%;\n        margin-top: 18px;\n        display: grid;\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n        gap: 8px;\n    }\n\n    #sp-inlet-gallery .sp-fullscreen-thumb {\n        width: 100%;\n        height: 72px;\n        padding: 4px;\n        border: 1px solid var(--sp-border);\n        border-radius: 4px;\n        background: #fff;\n        cursor: pointer;\n        overflow: hidden;\n    }\n\n    #sp-inlet-gallery .sp-fullscreen-thumb.active {\n        border: 2px solid var(--sp-orange);\n    }\n\n    #sp-inlet-gallery .sp-fullscreen-thumb img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n    }\n\n    \/* FEATURED: centered *\/\n    #sp-inlet-gallery .sp-main-product + .sp-slide-info {\n        align-items: center;\n    }\n\n    \/* VARIATIONS: Full Screen directly below Part Number, left aligned *\/\n    #sp-inlet-gallery .sp-side-info .sp-fullscreen-trigger {\n        align-self: flex-start;\n        margin-left: 0;\n        margin-right: 0;\n    }\n\n    \/* =========================================================\n    MOBILE\n    ========================================================= *\/\n\n    @media (max-width: 600px) {\n\n        #sp-inlet-gallery .sp-hotspot {\n            transform:\n                translate(-50%, -50%)\n                scale(var(--hotspot-scale-mobile));\n        }\n\n        #sp-inlet-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-inlet-gallery .sp-zoom-preview {\n            display: none;\n        }\n\n        #sp-inlet-gallery .sp-fullscreen-modal {\n            padding: 8px;\n        }\n\n        #sp-inlet-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-inlet-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-inlet-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-inlet-gallery .sp-fullscreen-info {\n            padding: 0 4px 4px;\n            overflow: visible;\n        }\n\n        #sp-inlet-gallery .sp-fullscreen-title {\n            font-size: 25px;\n        }\n\n        #sp-inlet-gallery .sp-fullscreen-description {\n            font-size: 10px;\n        }\n    #sp-inlet-gallery .sp-fullscreen-thumbnails {\n            margin-top: 10px;\n            grid-template-columns: repeat(4, minmax(0, 1fr));\n            gap: 5px;\n        }\n\n        #sp-inlet-gallery .sp-fullscreen-thumb {\n            height: 58px;\n        }\n\n        \/* =====================================================\n           MOBILE PRODUCT GALLERY\n           Compact Amazon-style vertical product layout\n           ===================================================== *\/\n\n        #sp-inlet-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-inlet-gallery .sp-main-view {\n            width: 100%;\n            height: auto;\n            min-height: 0;\n            overflow: visible;\n        }\n\n        #sp-inlet-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-inlet-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-inlet-gallery .sp-main-product {\n            width: 100%;\n            height: auto;\n            aspect-ratio: 3.6 \/ 3;\n            flex: 0 0 auto;\n            order: 1;\n        }\n\n        #sp-inlet-gallery .sp-main-image-clip {\n            inset: 0;\n        }\n\n        #sp-inlet-gallery .sp-main-image-clip > img {\n            width: 100%;\n            height: 100%;\n            object-fit: contain;\n            transform:\n                translate(var(--image-x-mobile), var(--image-y-mobile))\n                scale(var(--image-scale-mobile));\n        }\n\n        \/* VARIANT LAYOUT *\/\n        #sp-inlet-gallery .sp-variant-layout {\n            width: 100%;\n            height: auto;\n            min-height: 0;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: flex-start;\n            gap: 0;\n        }\n\n        \/* Title at the top *\/\n        #sp-inlet-gallery .sp-mobile-variant-title {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            width: 100%;\n            min-height: 46px;\n            padding: 0 8px;\n            text-align: center;\n            order: 1;\n            margin: 0;\n            position: relative;\n            z-index: 2;\n        }\n#sp-inlet-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-inlet-gallery .sp-mobile-variant-title .sp-slide-subtitle {\n            margin: 3px 0 0;\n            font-size: 8px;\n            line-height: 1.2;\n        }\n\n        \/* Keep ONE fullscreen button directly below the part number. *\/\n        #sp-inlet-gallery .sp-side-info .sp-fullscreen-trigger {\n            display: inline-flex;\n            align-self: center;\n            margin: 8px auto 0;\n        }\n\n        #sp-inlet-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\n            display: none !important;\n        }\n\n        \/* PRODUCT IMAGEEvery variation uses the responsive viewing frame. *\/\n        #sp-inlet-gallery .sp-variant-image-wrap {\n            width: 100%;\n            height: auto;\n            aspect-ratio: 3.75 \/ 3;\n            min-height: 0;\n            flex: 0 0 auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            order: 2;\n            position: relative;\n            overflow: visible;\n        }\n\n        #sp-inlet-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-inlet-gallery .sp-slide-info .sp-fullscreen-trigger {\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        \/* PRODUCT INFORMATION \/ CONTROLS *\/\n        #sp-inlet-gallery .sp-side-info {\n            width: 100%;\n            max-width: 100%;\n            height: auto;\n            min-height: 0;\n            padding-top: 20px;\n            margin: 0;\n            text-align: center;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: flex-start;\n            gap: 0;\n            order: 3;\n        }\n\n        \/* Hide duplicate desktop title. *\/\n\n        #sp-inlet-gallery .sp-side-info .sp-slide-title,\n        #sp-inlet-gallery .sp-side-info .sp-slide-subtitle {\n            display: none;\n        }\n\n        \/* Amperage label *\/\n        #sp-inlet-gallery .sp-side-info .sp-amp-label {\n            display: block;\n            width: 100%;\n            margin: 0 0 4px;\n            color: #777;\n            font-size: 10px;\n            line-height: 1.1;\n            font-weight: 700;\n            letter-spacing: .5px;\n            text-align: center;\n        }\n\n        \/* 30A \/ 50A selector *\/\n        #sp-inlet-gallery .sp-side-info .sp-amp-toggle {\n            display: flex;\n            width: 180px;\n            max-width: 180px;\n            height: 35px;\n            max-height: 35px;\n            margin: 0 auto;\n            border: 1px solid #d8d8d8;\n            border-radius: 6px;\n            overflow: hidden;\n            background: #fff;\n        }\n\n        #sp-inlet-gallery .sp-side-info .sp-amp-btn {\n            min-height: 35px;\n            height: 35px;\n            padding: 5px 10px;\n            font-size: 12px;\n            line-height: 1;\n        }\n\n        \/* Keep the existing JS amp switching fully functional. *\/\n        #sp-inlet-gallery .sp-side-info .sp-current-amp {\n            display: block;\n            width: 100%;\n            margin: 5px 0 0;\n            color: #666;\n            font-size: 11px;\n            line-height: 1.15;\n            text-align: center;\n        }\n\n        \/* Part number *\/\n        #sp-inlet-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: 10px;\n            letter-spacing: .4px;\n            text-align: center;\n        }\n\n        \/* Fullscreen stays immediately below the part number. *\/\n        #sp-inlet-gallery .sp-side-info .sp-part-number + .sp-fullscreen-trigger {\n            margin-top: 8px;\n            align-self: center;\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        #sp-inlet-gallery .sp-part-number strong {\n            color: var(--sp-dark);\n        }\n\n        #sp-inlet-gallery .sp-variant-image.is-empty {\n            visibility: hidden;\n        }\n\n        \/* HOTSPOTS *\/\n\n        #sp-inlet-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-inlet-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-inlet-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-inlet-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: stretch;\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-inlet-gallery .sp-thumbnails::-webkit-scrollbar {\n            display: none;\n        }\n\n        #sp-inlet-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-inlet-gallery .sp-thumb.active {\n            border: 2px solid var(--sp-orange);\n        }\n\n        #sp-inlet-gallery .sp-thumb-image {\n            width: 100%;\n            height: 45px;\n            min-height: 45px;\n            border-radius: 3px;\n        }\n\n        #sp-inlet-gallery .sp-thumb-label {\n            font-size: 8px;\n            line-height: 1.05;\n        }\n\n        #sp-inlet-gallery .sp-thumb-part {\n            font-size: 7px;\n            line-height: 1;\n        }\n\n        #sp-inlet-gallery .sp-thumb-view {\n            font-size: 7px;\n            line-height: 1;\n        }\n\n        \/* PAGINATION *\/\n        #sp-inlet-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-inlet-gallery .sp-page-dot {\n            width: 6px;\n            height: 6px;\n        }\n    }\n    \/* Elementor containers must not clip hotspot tooltips *\/\n    #sp-inlet-gallery .sp-gallery-overflow,\n    #sp-inlet-gallery .sp-gallery-overflow > .e-con,\n    #sp-inlet-gallery .sp-gallery-overflow > .elementor-widget-container {\n        overflow: visible !important;\n    }\n    \n    \/* =========================================================\n       LAPTOP + TABLET RESPONSIVE CONTROLS\n       These overrides intentionally appear at the end of the\n       stylesheet so the editable responsive values are active.\n       ========================================================= *\/\n\n    @media (min-width: 1025px) and (max-width: 1366px) {\n        #sp-inlet-gallery .sp-main-image-clip > img {\n            transform:\n                translate(var(--image-x-laptop), var(--image-y-laptop))\n                scale(var(--image-scale-laptop));\n        }\n\n        #sp-inlet-gallery .sp-variant-image-wrap img {\n            transform:\n                translate(var(--image-x-laptop), var(--image-y-laptop))\n                scale(var(--image-scale-laptop));\n        }\n\n        #sp-inlet-gallery .sp-tooltip {\n            bottom: calc(100% + 7px - var(--tooltip-y-laptop));\n            left: calc(50% + var(--tooltip-x-laptop));\n            transform:\n                translateX(-50%)\n                scale(var(--tooltip-scale-laptop));\n        }\n    }\n\n    @media (min-width: 601px) and (max-width: 1024px) {\n        #sp-inlet-gallery .sp-main-image-clip > img {\n            transform:\n                translate(var(--image-x-tablet), var(--image-y-tablet))\n                scale(var(--image-scale-tablet));\n        }\n\n        #sp-inlet-gallery .sp-variant-image-wrap img {\n            transform:\n                translate(var(--image-x-tablet), var(--image-y-tablet))\n                scale(var(--image-scale-tablet));\n        }\n\n        #sp-inlet-gallery .sp-tooltip {\n            bottom: calc(100% + 7px - var(--tooltip-y-tablet));\n            left: calc(50% + var(--tooltip-x-tablet));\n            transform:\n                translateX(-50%)\n                scale(var(--tooltip-scale-tablet));\n        }\n\n        #sp-inlet-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\n    \n\n\/* =========================================================\n   MOBILE 430px LAYOUT \u2014 MATCH PIGTAIL REFERENCE\n   Title top \/ centered image \/ part number + fullscreen \/\n   thumbnails bottom \/ pagination bottom.\n   ========================================================= *\/\n@media (max-width:767px){\n    #sp-inlet-gallery{\n        width:100% !important;\n        max-width:100% !important;\n        height:430px !important;\n        min-height:430px !important;\n        position:relative;\n        margin:0 auto;\n        overflow:visible !important;\n    }\n\n    #sp-inlet-gallery .sp-main-view{\n        width:100% !important;\n        max-width:100% !important;\n        height:430px !important;\n        min-height:430px !important;\n        position:relative;\n        overflow:visible !important;\n    }\n\n    #sp-inlet-gallery .sp-gallery-slide{\n        width:100% !important;\n        max-width:100% !important;\n        height:430px !important;\n        min-height:430px !important;\n        position:relative;\n        overflow:visible !important;\n    }\n\n    #sp-inlet-gallery .sp-gallery-slide.active{ display:flex; }\n\n    \/* FEATURES IMAGE \u2014 dedicated tall middle area *\/\n    #sp-inlet-gallery .sp-main-product{\n        width:100% !important;\n        height:238px !important;\n        min-height:238px !important;\n        max-height:238px !important;\n        aspect-ratio:auto !important;\n        flex:0 0 238px !important;\n        display:flex;\n        align-items:center;\n        justify-content:center;\n        position:absolute !important;\n        top:76px;\n        left:0;\n        right:0;\n        order:2;\n        overflow:visible !important;\n        margin:0;\n    }\n\n    #sp-inlet-gallery .sp-main-image-clip{\n        inset:0;\n        overflow:visible !important;\n        display:flex;\n        align-items:center;\n        justify-content:center;\n    }\n\n    #sp-inlet-gallery .sp-main-image-clip > img{\n        width:100% !important;\n        height:100% !important;\n        max-width:100% !important;\n        max-height:100% !important;\n        object-fit:contain !important;\n        display:block;\n        transform:\n            translate(var(--image-x-mobile), var(--image-y-mobile))\n            scale(var(--image-scale-mobile));\n        transform-origin:center center;\n    }\n\n    \/* Feature title\/info sits at the top. *\/\n    #sp-inlet-gallery .sp-main-product + .sp-slide-info{\n        position:absolute !important;\n        top:0;\n        left:0;\n        right:0;\n        width:100% !important;\n        height:76px !important;\n        min-height:76px !important;\n        max-height:76px !important;\n        padding:0 8px !important;\n        margin:0 !important;\n        display:flex !important;\n        flex-direction:column;\n        align-items:center !important;\n        justify-content:flex-start !important;\n        text-align:center !important;\n        z-index:12;\n    }\n\n    #sp-inlet-gallery .sp-main-product + .sp-slide-info .sp-slide-title{\n        margin:2px 0 0 !important;\n        line-height:.95 !important;\n    }\n\n    #sp-inlet-gallery .sp-main-product + .sp-slide-info .sp-slide-subtitle{\n        margin:3px 0 0 !important;\n        line-height:1.2 !important;\n    }\n\n    \/* The feature slide should not show a part number. *\/\n    #sp-inlet-gallery .sp-main-product + .sp-slide-info .sp-part-number{\n        display:none !important;\n    }\n\n    #sp-inlet-gallery .sp-main-product + .sp-slide-info .sp-fullscreen-trigger{\n        display:inline-flex !important;\n        position:static !important;\n        margin:8px auto 0 !important;\n        align-self:center !important;\n        order:initial;\n    }\n\n    \/* VARIANT LAYOUT *\/\n    #sp-inlet-gallery .sp-variant-layout{\n        width:100% !important;\n        max-width:100% !important;\n        height:430px !important;\n        min-height:430px !important;\n        display:flex !important;\n        flex-direction:column;\n        align-items:center;\n        justify-content:flex-start;\n        position:relative;\n        overflow:visible !important;\n    }\n\n    \/* Title group stays at the top, with enough room for 2-line titles. *\/\n    #sp-inlet-gallery .sp-mobile-variant-title{\n        width:100% !important;\n        height:76px !important;\n        min-height:76px !important;\n        max-height:76px !important;\n        flex:0 0 76px !important;\n        padding:0 8px !important;\n        overflow:visible !important;\n        display:flex !important;\n        flex-direction:column;\n        align-items:center;\n        justify-content:flex-start;\n        order:1;\n        position:relative;\n        z-index:12;\n        text-align:center;\n    }\n\n    #sp-inlet-gallery .sp-mobile-variant-title .sp-slide-title{\n        margin:2px 0 0 !important;\n        font-size:23px !important;\n        line-height:.95 !important;\n        letter-spacing:.8px;\n    }\n\n    #sp-inlet-gallery .sp-mobile-variant-title .sp-slide-subtitle{\n        margin:3px 0 0 !important;\n        font-size:8px !important;\n        line-height:1.2 !important;\n    }\n\n    \/* Variant image gets a dedicated spacious middle area. *\/\n    #sp-inlet-gallery .sp-variant-image-wrap{\n        width:100% !important;\n        height:210px !important;\n        min-height:210px !important;\n        max-height:210px !important;\n        flex:0 0 210px !important;\n        aspect-ratio:auto !important;\n        display:flex !important;\n        align-items:center;\n        justify-content:center;\n        position:absolute !important;\n        top:76px;\n        left:0;\n        right:0;\n        order:2;\n        margin:0 !important;\n        overflow:visible !important;\n    }\n\n    #sp-inlet-gallery .sp-variant-image-wrap img{\n        width:auto !important;\n        height:auto !important;\n        max-width:92% !important;\n        max-height:190px !important;\n        object-fit:contain !important;\n        display:block;\n        flex:0 0 auto;\n        transform:\n            translate(var(--image-x-mobile), var(--image-y-mobile))\n            scale(var(--image-scale-mobile));\n        transform-origin:center center;\n    }\n\n    \/* Product information \/ controls: Part Number then Full Screen. *\/\n    #sp-inlet-gallery .sp-side-info{\n        width:100% !important;\n        height:50px !important;\n        min-height:50px !important;\n        max-height:50px !important;\n        flex:0 0 50px !important;\n        padding:0 !important;\n        margin:0 !important;\n        display:flex !important;\n        flex-direction:column;\n        align-items:center !important;\n        justify-content:flex-start !important;\n        gap:0 !important;\n        position:absolute !important;\n        left:0;\n        right:0;\n        bottom:100px;\n        z-index:12;\n        overflow:visible !important;\n        text-align:center !important;\n        order:3;\n    }\n\n    #sp-inlet-gallery .sp-side-info .sp-slide-title,\n    #sp-inlet-gallery .sp-side-info .sp-slide-subtitle{\n        display:none !important;\n    }\n\n    #sp-inlet-gallery .sp-side-info .sp-amp-label,\n    #sp-inlet-gallery .sp-side-info .sp-amp-toggle,\n    #sp-inlet-gallery .sp-side-info .sp-current-amp{\n        display:none !important;\n    }\n\n    #sp-inlet-gallery .sp-side-info .sp-part-number{\n        display:inline-block !important;\n        margin:3px auto 0 !important;\n        padding:0 !important;\n        line-height:1.05 !important;\n        text-align:center !important;\n    }\n\n    #sp-inlet-gallery .sp-side-info .sp-fullscreen-trigger{\n        display:inline-flex !important;\n        position:static !important;\n        margin:5px auto 0 !important;\n        align-self:center !important;\n        order:initial;\n    }\n\n    \/* Thumbnails pinned to the bottom and centered. *\/\n    #sp-inlet-gallery .sp-product-selector{\n        position:absolute !important;\n        left:0;\n        right:0;\n        bottom:18px;\n        width:100% !important;\n        max-width:100% !important;\n        margin:0 !important;\n        z-index:20;\n    }\n\n    #sp-inlet-gallery .sp-thumbnails{\n        justify-content:center !important;\n        overflow-x:hidden !important;\n        overflow-y:hidden !important;\n    }\n\n    #sp-inlet-gallery .sp-gallery-pagination{\n        position:absolute !important;\n        left:0;\n        right:0;\n        bottom:4px;\n        margin:0 !important;\n        z-index:20;\n    }\n\n    \/* Keep the gallery from creating horizontal page overflow. *\/\n    #sp-inlet-gallery,\n    #sp-inlet-gallery .sp-main-view,\n    #sp-inlet-gallery .sp-gallery-slide,\n    #sp-inlet-gallery .sp-variant-layout{\n        overflow-x:clip !important;\n        overflow-y:visible !important;\n    }\n}\n\n\/* =========================================================\n   BOUNDLESS HOTSPOT TOOLTIPS\n   Tooltips can extend outside the gallery\/container and always\n   render above the hotspot bubbles.\n   ========================================================= *\/\n@media (max-width:767px){\n    #sp-inlet-gallery,\n    #sp-inlet-gallery .sp-main-view,\n    #sp-inlet-gallery .sp-gallery-slide,\n    #sp-inlet-gallery .sp-main-product,\n    #sp-inlet-gallery .sp-main-image-clip,\n    #sp-inlet-gallery .sp-variant-image-wrap{\n        overflow:visible !important;\n    }\n\n    html, body{\n        overflow-x:hidden !important;\n    }\n\n    #sp-inlet-gallery .sp-hotspot:hover,\n    #sp-inlet-gallery .sp-hotspot:focus-visible,\n    #sp-inlet-gallery .sp-hotspot.is-open{\n        z-index:10000 !important;\n    }\n\n    #sp-inlet-gallery .sp-hotspot .sp-tooltip{\n        z-index:10001 !important;\n        position:absolute !important;\n        pointer-events:none;\n    }\n}\n\n\/* Desktop\/tablet: same tooltip stacking behavior without changing layout. *\/\n#sp-inlet-gallery .sp-hotspot:hover,\n#sp-inlet-gallery .sp-hotspot:focus-visible,\n#sp-inlet-gallery .sp-hotspot.is-open{\n    z-index:10000 !important;\n}\n#sp-inlet-gallery .sp-hotspot .sp-tooltip{\n    z-index:10001 !important;\n}\n<\/style>\n\n    <script>\n    (function () {\n        function initSmartPlugInletGallery() {\n\n            const gallery = document.getElementById(\"sp-inlet-gallery\");\n            if (!gallery || gallery.dataset.initialized === \"true\") return;\n\n            gallery.dataset.initialized = \"true\";\n\n            const slides = gallery.querySelectorAll(\".sp-gallery-slide\");\n            const thumbs = gallery.querySelectorAll(\".sp-thumb\");\n            const hotspots = gallery.querySelectorAll(\".sp-hotspot\");\n            const pageDots = gallery.querySelectorAll(\".sp-page-dot\");\n            const variantSlides = gallery.querySelectorAll(\".sp-variant-slide\");\n            const thumbnailContainer = gallery.querySelector(\".sp-thumbnails\");\n            const thumbPrev = gallery.querySelector(\".sp-thumb-prev\");\n            const thumbNext = gallery.querySelector(\".sp-thumb-next\");\n\n            if (!slides.length || !thumbs.length) return;\n\n            let currentIndex = 0;\n\n            function getResponsiveMode() {\n                const viewportWidth =\n                    window.innerWidth ||\n                    document.documentElement.clientWidth ||\n                    1367;\n\n                if (viewportWidth <= 600) return \"mobile\";\n                if (viewportWidth <= 1024) return \"tablet\";\n                if (viewportWidth <= 1366) return \"laptop\";\n                return \"desktop\";\n            }\n\n            function readCssNumber(element, name, fallback) {\n                const inlineValue = element.style.getPropertyValue(name).trim();\n\n                if (inlineValue) {\n                    const inlineNumber = parseFloat(inlineValue);\n                    if (Number.isFinite(inlineNumber)) return inlineNumber;\n                }\n\n                const computedValue = window\n                    .getComputedStyle(element)\n                    .getPropertyValue(name)\n                    .trim();\n\n                const computedNumber = parseFloat(computedValue);\n                return Number.isFinite(computedNumber)\n                    ? computedNumber\n                    : fallback;\n            }\n\n            function getResponsiveImageSetting(\n                element,\n                mode,\n                property,\n                fallback\n            ) {\n                const modeValue = readCssNumber(\n                    element,\n                    property + \"-\" + mode,\n                    NaN\n                );\n\n                if (Number.isFinite(modeValue)) return modeValue;\n\n                return readCssNumber(\n                    element,\n                    property + \"-desktop\",\n                    fallback\n                );\n            }\n\n            \/*\n             * RESPONSIVE HOTSPOT POSITIONING\n             *\n             * Each hotspot stores ONE canonical product-relative\n             * percentage anchor (--top \/ --left).\n             *\n             * The feature image may have different responsive\n             * scale\/X\/Y values. The system calculates the actual\n             * object-fit: contain image rectangle, applies that\n             * responsive scale and translation, then maps the\n             * canonical hotspot anchor into the resulting image.\n             *\n             * Final coordinates are written in pixels relative to\n             * the hotspot wrapper so CSS cannot drift away from\n             * the physical product image.\n             *\/\n            function syncFeatureHotspots() {\n                const featureSlide = slides[0];\n                if (!featureSlide) return;\n\n                const imageWrap = featureSlide.querySelector(\n                    \".sp-main-product.sp-hotspot-image\"\n                );\n                const imageClip = featureSlide.querySelector(\n                    \".sp-main-image-clip\"\n                );\n                const image = featureSlide.querySelector(\n                    \".sp-main-image-clip > img\"\n                );\n                const featureHotspots = featureSlide.querySelectorAll(\n                    \".sp-hotspot\"\n                );\n\n                if (\n                    !imageWrap ||\n                    !imageClip ||\n                    !image ||\n                    !featureHotspots.length ||\n                    !image.naturalWidth ||\n                    !image.naturalHeight\n                ) {\n                    return;\n                }\n\n                const clipRect = imageClip.getBoundingClientRect();\n                const wrapRect = imageWrap.getBoundingClientRect();\n\n                if (\n                    !clipRect.width ||\n                    !clipRect.height ||\n                    !wrapRect.width ||\n                    !wrapRect.height\n                ) {\n                    return;\n                }\n\n                const responsiveMode = getResponsiveMode();\n\n                const imageScale = Math.max(\n                    0.001,\n                    getResponsiveImageSetting(\n                        image,\n                        responsiveMode,\n                        \"--image-scale\",\n                        1\n                    )\n                );\n\n                const imageX = getResponsiveImageSetting(\n                    image,\n                    responsiveMode,\n                    \"--image-x\",\n                    0\n                );\n\n                const imageY = getResponsiveImageSetting(\n                    image,\n                    responsiveMode,\n                    \"--image-y\",\n                    0\n                );\n\n                \/*\n                 * Recreate object-fit: contain using the image's\n                 * natural aspect ratio and the actual clip size.\n                 *\/\n                const imageRatio =\n                    image.naturalWidth \/ image.naturalHeight;\n\n                const containerRatio =\n                    clipRect.width \/ clipRect.height;\n\n                let renderedWidth;\n                let renderedHeight;\n\n                if (imageRatio > containerRatio) {\n                    renderedWidth = clipRect.width;\n                    renderedHeight =\n                        renderedWidth \/ imageRatio;\n                } else {\n                    renderedHeight = clipRect.height;\n                    renderedWidth =\n                        renderedHeight * imageRatio;\n                }\n\n                \/*\n                 * The CSS transform scales the contained image\n                 * around its center, then applies the X\/Y translation.\n                 *\/\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                    const topPercent = readCssNumber(\n                        hotspot,\n                        \"--top\",\n                        50\n                    );\n\n                    const leftPercent = readCssNumber(\n                        hotspot,\n                        \"--left\",\n                        50\n                    );\n\n                    const hotspotX = readCssNumber(\n                        hotspot,\n                        \"--hotspot-x\",\n                        0\n                    );\n\n                    const hotspotY = readCssNumber(\n                        hotspot,\n                        \"--hotspot-y\",\n                        0\n                    );\n\n                    const leftPx =\n                        renderedLeft -\n                        wrapRect.left +\n                        (renderedWidth * leftPercent \/ 100) +\n                        hotspotX;\n\n                    const topPx =\n                        renderedTop -\n                        wrapRect.top +\n                        (renderedHeight * topPercent \/ 100) +\n                        hotspotY;\n\n                    hotspot.style.setProperty(\n                        \"--sp-hotspot-left-px\",\n                        leftPx + \"px\"\n                    );\n\n                    hotspot.style.setProperty(\n                        \"--sp-hotspot-top-px\",\n                        topPx + \"px\"\n                    );\n\n                    hotspot.dataset.responsiveMode = responsiveMode;\n                });\n            }\n\n            let hotspotFrame = null;\n\n            function scheduleFeatureHotspotSync() {\n                if (hotspotFrame) cancelAnimationFrame(hotspotFrame);\n\n                hotspotFrame = requestAnimationFrame(function () {\n                    hotspotFrame = null;\n                    syncFeatureHotspots();\n                });\n            }\n\n            function showSlide(index) {\n\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, i) {\n                const thumbTarget = parseInt(thumb.getAttribute(\"data-target\"), 10);\n                thumb.classList.toggle(\"active\", i === index && !thumb.hasAttribute(\"data-view\"));\n            });\n\n\n    pageDots.forEach(function (dot, i) {\n        dot.classList.toggle(\"active\", i === index);\n    });\n\n    currentIndex = index;\n    scheduleFeatureHotspotSync();\n\n    const activeSlide = slides[currentIndex];\n    const activeViewForThumb = activeSlide ? (activeSlide.dataset.currentView || \"inlet\") : \"inlet\";\n    let activeThumb = null;\n    thumbs.forEach(function (thumb) {\n        const thumbTarget = parseInt(thumb.getAttribute(\"data-target\"), 10);\n        const thumbView = thumb.getAttribute(\"data-view\") || \"inlet\";\n        if (!activeThumb && thumbTarget === index && thumbView === activeViewForThumb) {\n            activeThumb = thumb;\n        }\n    });\n\n    if (activeThumb && thumbnailContainer) {\n        const left = activeThumb.offsetLeft;\n        const right = left + activeThumb.offsetWidth;\n        const viewLeft = thumbnailContainer.scrollLeft;\n        const viewRight = viewLeft + thumbnailContainer.clientWidth;\n\n        if (left < viewLeft || right > viewRight) {\n            thumbnailContainer.scrollTo({\n                left: left - (thumbnailContainer.clientWidth \/ 2) + (activeThumb.offsetWidth \/ 2),\n                behavior: \"smooth\"\n            });\n    }\n    }\n\n    hotspots.forEach(function (hotspot) {\n        hotspot.classList.remove(\"is-open\");\n    });\n    }\n\n    thumbs.forEach(function (thumb) {\n        thumb.addEventListener(\"click\", function (event) {\n            event.preventDefault();\n            event.stopPropagation();\n\n            const target = parseInt(thumb.getAttribute(\"data-target\"), 10);\n            if (!isNaN(target)) {\n                showSlide(target);\n\n                const targetSlide = slides[target];\n                if (targetSlide && typeof targetSlide._setAmp === \"function\") {\n                    targetSlide._setAmp(targetSlide.dataset.currentMaterial || \"30\");\n                }\n        }\n    });\n    });\n\n    \/*\n     * The gallery has 4 visual navigation states:\n     * 0 = Features\n     * 1 = Coil\n     * 2 = Socket\n     * 3 = Plug\n     *\/\n    const galleryStates = [\n        { slide: 0, view: \"inlet\" },\n        { slide: 1, view: \"inlet\" },\n        { slide: 2, view: \"inlet\" },\n        { slide: 3, view: \"inlet\" }\n    ];\n\n    function getGalleryStateIndex() {\n        const activeSlide = slides[currentIndex];\n        return activeSlide ? currentIndex : 0;\n    }\n\n    function updateGalleryPagination(stateIndex) {\n        pageDots.forEach(function (dot, i) {\n            dot.classList.toggle(\"active\", i === stateIndex);\n        });\n    }\n\n    function showGalleryState(stateIndex) {\n        if (stateIndex < 0) stateIndex = galleryStates.length - 1;\n        if (stateIndex >= galleryStates.length) stateIndex = 0;\n\n        const state = galleryStates[stateIndex];\n        const targetSlide = slides[state.slide];\n        if (!targetSlide) return;\n\n        showSlide(state.slide);\n        updateGalleryPagination(stateIndex);\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\n            if (!isNaN(target)) {\n                showGalleryState(target);\n            }\n        });\n    });\n\n    function scrollThumbnailStrip(direction) {\n        if (!thumbnailContainer || !window.matchMedia(\"(max-width: 1024px)\").matches) return;\n\n        const thumbnailItems = Array.from(thumbnailContainer.querySelectorAll(\".sp-thumb\"));\n        if (!thumbnailItems.length) return;\n\n        let activeThumbIndex = thumbnailItems.findIndex(function (thumb) {\n            return thumb.classList.contains(\"active\");\n        });\n\n        if (activeThumbIndex < 0) activeThumbIndex = 0;\n\n        let targetIndex = activeThumbIndex + (direction > 0 ? 1 : -1);\n        if (targetIndex < 0) targetIndex = thumbnailItems.length - 1;\n        if (targetIndex >= thumbnailItems.length) targetIndex = 0;\n\n        \/\/ The mobile arrows select the next\/previous thumbnail, rather than only scrolling the strip.\n        thumbnailItems[targetIndex].click();\n\n        thumbnailItems[targetIndex].scrollIntoView({\n            behavior: \"smooth\",\n            block: \"nearest\",\n            inline: \"center\"\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\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) {\n            hotspot.classList.add(\"is-open\");\n        }\n    });\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    SELECT MATERIAL SWITCHING\n    ================================================= *\/\n\n    variantSlides.forEach(function (slide) {\n        const image = slide.querySelector(\".sp-variant-image\");\n        const materialButtons = slide.querySelectorAll(\".sp-amp-btn\");\n        const currentMaterial = slide.querySelector(\".sp-current-amp\");\n\n        if (!image) return;\n\n        slide.dataset.currentView = \"inlet\";\n        slide.dataset.currentMaterial = \"plastic\";\n\n        function updateImage() {\n            const material = slide.dataset.currentMaterial || \"plastic\";\n            const source = slide.getAttribute(\"data-\" + material) || \"\";\n\n            image.style.opacity = \"0\";\n\n            window.setTimeout(function () {\n                if (source) {\n                    image.src = source;\n                    image.alt = \"SMARTPLUG\";\n                    image.classList.remove(\"is-empty\");\n                } else {\n                    image.removeAttribute(\"src\");\n                    image.alt = \"\";\n                    image.classList.add(\"is-empty\");\n                }\n\n                image.style.opacity = \"1\";\n\n                if (fullscreenModal.classList.contains(\"is-open\")) {\n                    refreshFullscreenModal();\n                }\n            }, 90);\n\n            slide.dataset.currentView = \"inlet\";\n\n            const slideIndex = Array.prototype.indexOf.call(slides, slide);\n\n            if (slideIndex >= 0) {\n                updateGalleryPagination(slideIndex);\n            }\n\n            thumbs.forEach(function (thumb) {\n                const thumbTarget = parseInt(thumb.getAttribute(\"data-target\"), 10);\n                thumb.classList.toggle(\n                    \"active\",\n                    thumbTarget === slideIndex\n                );\n            });\n        }\n\n        function setMaterial(material) {\n            material = material === \"stainless\" ? \"stainless\" : \"plastic\";\n            slide.dataset.currentMaterial = material;\n\n            materialButtons.forEach(function (button) {\n                button.classList.toggle(\n                    \"active\",\n                    button.getAttribute(\"data-material\") === material\n                );\n            });\n\n            if (currentMaterial) {\n                currentMaterial.innerHTML = \"Showing <strong>\" + (material === \"stainless\" ? \"Stainless\" : \"Plastic\") + \"<\/strong>\";\n            }\n\n            const partNumberValue = slide.querySelector(\".sp-part-number-value\");\n\n            if (partNumberValue) {\n                partNumberValue.textContent = \"SMARTPLUG\";\n            }\n\n            updateImage();\n        }\n\n        slide._setMaterial = setMaterial;\n        slide._setAmp = setMaterial;\n\n        materialButtons.forEach(function (button) {\n            button.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                if (!button.disabled) {\n                    setMaterial(button.getAttribute(\"data-material\"));\n                }\n            });\n        });\n\n        setMaterial(\"plastic\");\n    });\n\n    \/* =================================================\n    VIEW FULL SCREEN + HOVER ZOOM\n    ================================================= *\/\n\n    \/* =========================================================\n    FULL SCREEN POPUP CONTENT + IMAGE SETTINGS \u2014 EDIT HERE\n\n    You can independently edit EACH popup here.\n\n    For every item:\n    - image = popup image URL (can be different from the gallery image)\n\n    - title = popup title\n    - description = popup description\/content\n\n    Desktop popup:\n    - popupWidth = popup width\n    - popupHeight = popup height\n    - imageWidth \/ imageHeight = popup image size\n    - imageX \/ imageY = popup image position\n\n    Mobile popup:\n    - popupWidthMobile = popup width\n    - popupHeightMobile = popup height\n    - imageAreaHeightMobile = image viewing area height\n    - imageWidthMobile \/ imageHeightMobile = popup image size\n    - imageXMobile \/ imageYMobile = popup image position\n\n    You can add HTML inside description if needed.\n    ========================================================= *\/\n    const FULLSCREEN_CONTENT = {\n        0: {\n            image: \"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/RV-Cordset-50A.png\",\n\n            title: \"SMARTPLUG ANGLED RV CORDSEET\",\n            description: \"Click the numbered points to explore the inlet.\",\n            popupWidth: \"1100px\",\n            popupHeight: \"520px\",\n            imageWidth: \"100%\",\n            imageHeight: \"100%\",\n            imageX: \"0px\",\n            imageY: \"0px\",\n            popupWidthMobile: \"calc(100vw - 16px)\",\n            popupHeightMobile: \"90vh\",\n            imageAreaHeightMobile: \"54vh\",\n            imageWidthMobile: \"100%\",\n            imageHeightMobile: \"100%\",\n            imageXMobile: \"0px\",\n            imageYMobile: \"0px\"\n        },\n        1: {\n            image: \"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30A-Coil-Black-Plastic.png\",\n\n            title: \"ANGLED RV CORDSEt\",\n            description: \"Non-metallic\",\n            popupWidth: \"1100px\",\n            popupHeight: \"520px\",\n            imageWidth: \"100%\",\n            imageHeight: \"100%\",\n            imageX: \"0px\",\n            imageY: \"0px\",\n            popupWidthMobile: \"calc(100vw - 16px)\",\n            popupHeightMobile: \"90vh\",\n            imageAreaHeightMobile: \"54vh\",\n            imageWidthMobile: \"100%\",\n            imageHeightMobile: \"100%\",\n            imageXMobile: \"0px\",\n            imageYMobile: \"0px\"\n        },\n        2: {\n            image: \"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30A-Socket-End-Black-Plastic.png\",\n\n            title: \"ANGLED RV - SOCKET END\",\n            description: \"Non-metallic\",\n            popupWidth: \"1100px\",\n            popupHeight: \"520px\",\n            imageWidth: \"100%\",\n            imageHeight: \"100%\",\n            imageX: \"0px\",\n            imageY: \"0px\",\n            popupWidthMobile: \"calc(100vw - 16px)\",\n            popupHeightMobile: \"90vh\",\n            imageAreaHeightMobile: \"54vh\",\n            imageWidthMobile: \"100%\",\n            imageHeightMobile: \"100%\",\n            imageXMobile: \"0px\",\n            imageYMobile: \"0px\"\n        },\n        3: {\n            image: \"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/30A-Plug-End.png\",\n\n            title: \"ANGLED RV - 3 Pin Push-type Connector\",\n            description: \"Non-metallic\",\n            popupWidth: \"1100px\",\n            popupHeight: \"520px\",\n            imageWidth: \"100%\",\n            imageHeight: \"100%\",\n            imageX: \"0px\",\n            imageY: \"0px\",\n            popupWidthMobile: \"calc(100vw - 16px)\",\n            popupHeightMobile: \"90vh\",\n            imageAreaHeightMobile: \"54vh\",\n            imageWidthMobile: \"100%\",\n            imageHeightMobile: \"100%\",\n            imageXMobile: \"0px\",\n            imageYMobile: \"0px\"\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\"><strong><\/strong><\/div>\n                <div class=\"sp-fullscreen-thumbnails\"><\/div>\n            <\/div>\n        <\/div>\n    `;\n    gallery.appendChild(fullscreenModal);\n\n    const fullscreenImage = fullscreenModal.querySelector(\".sp-fullscreen-image\");\n\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\");\n    const fullscreenThumbs = fullscreenModal.querySelector(\".sp-fullscreen-thumbnails\");\n    const fullscreenClose = fullscreenModal.querySelector(\".sp-fullscreen-close\");\n\n    function getActiveGalleryImage() {\n        const activeSlide = slides[currentIndex];\n        if (!activeSlide) return null;\n\n        if (currentIndex === 0) {\n            return activeSlide.querySelector(\".sp-main-image-clip img\");\n        }\n\n        return activeSlide.querySelector(\".sp-variant-image\");\n    }\n\n    function getActiveGalleryCopy() {\n        const activeState = getActiveVisualState();\n        const custom = FULLSCREEN_CONTENT[activeState];\n        const activeSlide = slides[currentIndex];\n\n        if (!activeSlide) {\n            return {\n                title: \"\",\n                description: \"\",\n                partNumber: \"\"\n            };\n        }\n\n        const titleElement =\n            activeSlide.querySelector(\".sp-side-info .sp-slide-title\") ||\n            activeSlide.querySelector(\".sp-mobile-variant-title .sp-slide-title\") ||\n            activeSlide.querySelector(\".sp-slide-title\");\n\n        const descriptionElement =\n            activeSlide.querySelector(\".sp-side-info .sp-slide-subtitle\") ||\n            activeSlide.querySelector(\".sp-mobile-variant-title .sp-slide-subtitle\") ||\n            activeSlide.querySelector(\".sp-slide-subtitle\");\n\n        const partNumberElement = activeSlide.querySelector(\".sp-part-number\");\n\n        \/\/ For product variants, mirror the normal-view title, subtitle,\n        \/\/ and part number exactly. The part-number innerHTML is preserved\n        \/\/ so the actual number remains bold in fullscreen.\n        if (currentIndex >= 1 && currentIndex <= 3) {\n            return {\n                title: titleElement ? titleElement.textContent.trim() : \"\",\n                description: descriptionElement ? descriptionElement.textContent.trim() : \"\",\n                partNumber: partNumberElement ? partNumberElement.innerHTML.trim() : \"\"\n            };\n        }\n\n        return {\n            title: custom && custom.title ? custom.title : (titleElement ? titleElement.textContent.trim() : \"\"),\n            description: custom && custom.description ? custom.description : (descriptionElement ? descriptionElement.textContent.trim() : \"\"),\n            partNumber: partNumberElement ? partNumberElement.innerHTML.trim() : \"\"\n        };\n    }\n\n    function getActiveVisualState() {\n        return currentIndex;\n    }\n\n    function applyFullscreenSettings(activeState) {\n        const settings = FULLSCREEN_CONTENT[activeState] || FULLSCREEN_CONTENT[0] || {};\n\n        const dialog = fullscreenModal.querySelector(\".sp-fullscreen-dialog\");\n\n        if (!dialog) return;\n\n        dialog.style.setProperty(\"--sp-popup-width-desktop\", settings.popupWidth || \"1100px\");\n        dialog.style.setProperty(\"--sp-popup-height-desktop\", settings.popupHeight || \"520px\");\n        dialog.style.setProperty(\"--sp-popup-width-mobile\", settings.popupWidthMobile || \"calc(100vw - 16px)\");\n        dialog.style.setProperty(\"--sp-popup-height-mobile\", settings.popupHeightMobile || \"90vh\");\n        dialog.style.setProperty(\"--sp-popup-image-area-height-mobile\", settings.imageAreaHeightMobile || \"54vh\");\n\n        fullscreenImage.style.setProperty(\"--sp-popup-image-width-desktop\", settings.imageWidth || \"100%\");\n        fullscreenImage.style.setProperty(\"--sp-popup-image-height-desktop\", settings.imageHeight || \"100%\");\n        fullscreenImage.style.setProperty(\"--sp-popup-image-x-desktop\", settings.imageX || \"0px\");\n        fullscreenImage.style.setProperty(\"--sp-popup-image-y-desktop\", settings.imageY || \"0px\");\n\n        fullscreenImage.style.setProperty(\"--sp-popup-image-width-mobile\", settings.imageWidthMobile || \"100%\");\n        fullscreenImage.style.setProperty(\"--sp-popup-image-height-mobile\", settings.imageHeightMobile || \"100%\");\n        fullscreenImage.style.setProperty(\"--sp-popup-image-x-mobile\", settings.imageXMobile || \"0px\");\n        fullscreenImage.style.setProperty(\"--sp-popup-image-y-mobile\", settings.imageYMobile || \"0px\");\n    }\n\n    function refreshFullscreenModal() {\n        const activeImage = getActiveGalleryImage();\n        if (!activeImage || !activeImage.src) return;\n\n        const copy = getActiveGalleryCopy();\n        const activeState = getActiveVisualState();\n        const customContent = FULLSCREEN_CONTENT[activeState];\n\n        applyFullscreenSettings(activeState);\n\n        const activeSlide = slides[currentIndex];\n        const isVariation = currentIndex >= 1 && currentIndex <= 3 && activeSlide;\n        const isMaterialVariation = currentIndex === 1 || currentIndex === 2;\n        const currentMaterial = isVariation ? (activeSlide.dataset.currentMaterial || \"plastic\") : \"plastic\";\n        const variationMaterialImage = isVariation\n            ? (activeSlide.getAttribute(\"data-\" + currentMaterial) || \"\")\n            : \"\";\n\n        fullscreenImage.src = isVariation && variationMaterialImage\n            ? variationMaterialImage\n            : ((customContent && customContent.image) ? customContent.image : (activeImage.currentSrc || activeImage.src));\n        fullscreenImage.alt = copy.title || activeImage.alt || \"\";\n\n        fullscreenTitle.textContent = copy.title;\n        fullscreenDescription.textContent = copy.description;\n\n        if (fullscreenPartNumber) {\n            fullscreenPartNumber.innerHTML = isVariation ? (copy.partNumber || \"\") : \"\";\n            fullscreenPartNumber.style.display = isVariation && copy.partNumber ? \"block\" : \"none\";\n        }\n\n        fullscreenThumbs.innerHTML = \"\";\n\n        thumbs.forEach(function (thumb, index) {\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            const activeState = getActiveVisualState();\n\n            if (thumbTarget === activeState) {\n                modalThumb.classList.add(\"active\");\n            }\n\n            modalThumb.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                showSlide(thumbTarget);\n\n                window.setTimeout(refreshFullscreenModal, 110);\n            });\n\n            fullscreenThumbs.appendChild(modalThumb);\n        });\n    }\n\n\n    let fullscreenScrollTop = 0;\n    let fullscreenScrollLeft = 0;\n    let fullscreenBodyPaddingRight = \"\";\n\n    function openFullscreenModal() {\n        refreshFullscreenModal();\n\n        fullscreenScrollTop = window.scrollY || window.pageYOffset || 0;\n        fullscreenScrollLeft = window.scrollX || window.pageXOffset || 0;\n        fullscreenBodyPaddingRight = document.body.style.paddingRight;\n\n        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n        if (scrollbarWidth > 0) {\n            document.body.style.paddingRight = scrollbarWidth + \"px\";\n        }\n\n        fullscreenModal.classList.add(\"is-open\");\n        fullscreenModal.setAttribute(\"aria-hidden\", \"false\");\n        document.body.style.overflow = \"hidden\";\n    }\n\n    function closeFullscreenModal() {\n        fullscreenModal.classList.remove(\"is-open\");\n        fullscreenModal.setAttribute(\"aria-hidden\", \"true\");\n        document.body.style.overflow = \"\";\n        document.body.style.paddingRight = fullscreenBodyPaddingRight;\n\n        window.scrollTo({\n            top: fullscreenScrollTop,\n            left: fullscreenScrollLeft,\n            behavior: \"auto\"\n        });\n    }\n\n    fullscreenClose.addEventListener(\"click\", function (event) {\n        event.preventDefault();\n        closeFullscreenModal();\n    });\n\n    fullscreenModal.addEventListener(\"click\", function (event) {\n        if (event.target === fullscreenModal) {\n            closeFullscreenModal();\n        }\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        const featureWrap = gallery.querySelector(\".sp-main-product\");\n        if (featureWrap && !featureWrap.closest(\".sp-gallery-slide\").querySelector(\".sp-fullscreen-trigger\")) {\n            const button = document.createElement(\"button\");\n            button.type = \"button\";\n            button.className = \"sp-fullscreen-trigger\";\n            button.textContent = \"VIEW FULL SCREEN\";\n            button.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n                openFullscreenModal();\n            });\n\n            const featureInfo = featureWrap.closest(\".sp-gallery-slide\").querySelector(\".sp-slide-info\");\n            if (featureInfo) {\n                featureInfo.appendChild(button);\n            } else {\n                featureWrap.appendChild(button);\n            }\n        }\n\n        variantSlides.forEach(function (slide) {\n            const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\n            if (!imageWrap || slide.querySelector(\".sp-fullscreen-trigger\")) return;\n\n            const button = document.createElement(\"button\");\n            button.type = \"button\";\n            button.className = \"sp-fullscreen-trigger\";\n            button.textContent = \"VIEW FULL SCREEN\";\n            button.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n                openFullscreenModal();\n            });\n\n            \/*\n             * Put ONE button in the side-info column.\n             * It is appended after the part number, so it remains\n             * directly underneath it on desktop and mobile.\n             *\/\n            const sideInfo = slide.querySelector(\".sp-side-info\");\n\n            if (sideInfo) {\n                sideInfo.appendChild(button);\n            } else {\n                imageWrap.appendChild(button);\n            }\n        });\n    }\n\n    function setupHoverZoom() {\n        variantSlides.forEach(function (slide) {\n            const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\n            const image = slide.querySelector(\".sp-variant-image\");\n            if (!imageWrap || !image || imageWrap.dataset.zoomInitialized === \"true\") return;\n\n            imageWrap.dataset.zoomInitialized = \"true\";\n\n            const preview = document.createElement(\"div\");\n            preview.className = \"sp-zoom-preview\";\n\n            const previewImage = document.createElement(\"img\");\n            previewImage.alt = \"\";\n            preview.appendChild(previewImage);\n            imageWrap.appendChild(preview);\n\n            function syncPreviewImage() {\n                const source = image.currentSrc || image.src;\n                if (source) {\n                    previewImage.src = source;\n                }\n            }\n\n            \/*\n             * Calculate the actual visible product-image rectangle inside\n             * the object-fit: contain box, including the current scale and\n             * X\/Y position. This keeps the zoom trigger close to the product.\n             *\/\n            function getRenderedImageRect() {\n                const wrapRect = imageWrap.getBoundingClientRect();\n                const naturalWidth = image.naturalWidth || 1;\n                const naturalHeight = image.naturalHeight || 1;\n\n                const boxWidth = wrapRect.width;\n                const boxHeight = wrapRect.height;\n                const imageRatio = naturalWidth \/ naturalHeight;\n                const boxRatio = boxWidth \/ boxHeight;\n\n                let contentWidth;\n                let contentHeight;\n\n                if (boxRatio > imageRatio) {\n                    contentHeight = boxHeight;\n                    contentWidth = contentHeight * imageRatio;\n                } else {\n                    contentWidth = boxWidth;\n                    contentHeight = contentWidth \/ imageRatio;\n                }\n\n                const viewportWidth = window.innerWidth;\n                let responsiveMode = \"desktop\";\n\n                if (viewportWidth <= 600) {\n                    responsiveMode = \"mobile\";\n                } else if (viewportWidth <= 1024) {\n                    responsiveMode = \"tablet\";\n                } else if (viewportWidth <= 1366) {\n                    responsiveMode = \"laptop\";\n                }\n\n                const computed = window.getComputedStyle(image);\n                const scale = parseFloat(\n                    computed.getPropertyValue(\"--image-scale-\" + responsiveMode)\n                ) || 1;\n                const translateX = parseFloat(\n                    computed.getPropertyValue(\"--image-x-\" + responsiveMode)\n                ) || 0;\n                const translateY = parseFloat(\n                    computed.getPropertyValue(\"--image-y-\" + responsiveMode)\n                ) || 0;\n\n                const centerX = wrapRect.left + boxWidth \/ 2 + translateX;\n                const centerY = wrapRect.top + boxHeight \/ 2 + translateY;\n\n                contentWidth *= scale;\n                contentHeight *= scale;\n\n                return {\n                    left: centerX - contentWidth \/ 2,\n                    top: centerY - contentHeight \/ 2,\n                    right: centerX + contentWidth \/ 2,\n                    bottom: centerY + contentHeight \/ 2\n                };\n            }\n\n            function isNearRenderedImage(event) {\n                if (window.innerWidth <= 600) return false;\n\n                const rect = getRenderedImageRect();\n                const paddingValue = getComputedStyle(gallery)\n                    .getPropertyValue(\"--sp-zoom-trigger-padding-desktop\");\n                const padding = parseFloat(paddingValue) || 0;\n\n                return (\n                    event.clientX >= rect.left - padding &&\n                    event.clientX <= rect.right + padding &&\n                    event.clientY >= rect.top - padding &&\n                    event.clientY <= rect.bottom + padding\n                );\n            }\n\n            function updateZoomPosition(event) {\n                const rect = imageWrap.getBoundingClientRect();\n                const x = Math.max(\n                    0,\n                    Math.min(1, (event.clientX - rect.left) \/ rect.width)\n                );\n                const y = Math.max(\n                    0,\n                    Math.min(1, (event.clientY - rect.top) \/ rect.height)\n                );\n\n                previewImage.style.left = (-x * 100) + \"%\";\n                previewImage.style.top = (-y * 100) + \"%\";\n            }\n\n            image.addEventListener(\"load\", syncPreviewImage);\n            syncPreviewImage();\n\n            imageWrap.addEventListener(\"mousemove\", function (event) {\n                if (window.innerWidth <= 600) {\n                    imageWrap.classList.remove(\"sp-zoom-active\");\n                    return;\n                }\n\n                if (isNearRenderedImage(event)) {\n                    syncPreviewImage();\n                    updateZoomPosition(event);\n                    imageWrap.classList.add(\"sp-zoom-active\");\n                } else {\n                    imageWrap.classList.remove(\"sp-zoom-active\");\n                }\n            });\n\n            imageWrap.addEventListener(\"mouseleave\", function () {\n                imageWrap.classList.remove(\"sp-zoom-active\");\n            });\n        });\n    }\n\n    addFullscreenButtons();\n    setupHoverZoom();\n\n    \/* WooCommerce variation compatibility *\/\n    if (window.jQuery) {\n        jQuery(document).on(\n        \"found_variation\",\n        \"form.variations_form\",\n        function (event, variation) {\n\n            if (!variation || !variation.image || !variation.image.src) return;\n\n            const variationImage = variation.image.src;\n\n            thumbs.forEach(function (thumb, index) {\n\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\n    showSlide(0);\n\n    const featureImage = slides[0]?.querySelector(\".sp-main-image-clip > img\");\n\n    if (featureImage) {\n        if (featureImage.complete) {\n            scheduleFeatureHotspotSync();\n        } else {\n            featureImage.addEventListener(\"load\", scheduleFeatureHotspotSync);\n        }\n    }\n\n    window.addEventListener(\"resize\", scheduleFeatureHotspotSync);\n    window.addEventListener(\"orientationchange\", scheduleFeatureHotspotSync);\n\n            if (window.ResizeObserver) {\n                const observer = new ResizeObserver(\n                    scheduleFeatureHotspotSync\n                );\n\n                const clip = slides[0]?.querySelector(\n                    \".sp-main-image-clip\"\n                );\n\n                const imageWrap = slides[0]?.querySelector(\n                    \".sp-main-product.sp-hotspot-image\"\n                );\n\n                if (clip) observer.observe(clip);\n                if (imageWrap) observer.observe(imageWrap);\n            }\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\"DOMContentLoaded\", initSmartPlugInletGallery);\n    } else {\n    initSmartPlugInletGallery();\n    }\n\n    if (window.jQuery) {\n        jQuery(window).on(\"elementor\/frontend\/init\", function () {\n            setTimeout(initSmartPlugInletGallery, 150);\n        });\n    }\n\n    })();\n    <\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8fd309a e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"8fd309a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9bf7cd8 elementor-widget elementor-widget-heading\" data-id=\"9bf7cd8\" 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\">Angled RV Cordset 50 Amp<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3501210 elementor-widget elementor-widget-text-editor\" data-id=\"3501210\" 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 new 50 Amp Angled Cordset from SmartPlug is the result of years of research and customer feedback, delivering a safer and more convenient shore power connection. Its angled design allows for easy one-handed engagement and disengagement while relieving stress on the coach structure to help protect your RV. The cord rests close to the coach side, reducing the risk of being run over and minimizing trip hazards. It is also easier to store and coil when you&#8217;re breaking camp, making setup and teardown more efficient.<\/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>Angled RV Cordset 50 Amp 1 SmartPlug Connector Secure weatherproof connection. 2 Durable Design Built for demanding environments. 3 Strain Relief Reduces cable stress. 4 Heavy-Duty Construction Deleivers dependable RV power. 5 Tangle-Free Coil Easy to store and deploy. 6 Premium Cable Flexible and durable power cord Key Features Click the numbered points to explore the inlet. Angled RV Cordset Non-metallic Angled RV Cordset Non-metallic PART NUMBER: R50503A Angled RV &#8211; Scoket End Non-metallic ANGLED RV &#8211; Socket End Non-metallic PART NUMBER: R5050A ANGLED RV &#8211; 3 Pin Push-type Connector Non-metallic ANGLED RV &#8211; 3 Pin Push-type Connector Non-metallic PART NUMBER: R5050A &#10094; Features Coil Socket Plug &#10095; Angled RV Cordset 50 Amp The new 50 Amp Angled Cordset from SmartPlug is the result of years of research and customer feedback, delivering a safer and more convenient shore power connection. Its angled design allows for easy one-handed engagement and disengagement while relieving stress on the coach structure to help protect your RV. The cord rests close to the coach side, reducing the risk of being run over and minimizing trip hazards. It is also easier to store and coil when you&#8217;re breaking camp, making setup and teardown more efficient. 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-18013","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/18013","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=18013"}],"version-history":[{"count":73,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/18013\/revisions"}],"predecessor-version":[{"id":20544,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/18013\/revisions\/20544"}],"wp:attachment":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/media?parent=18013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}