{"id":11384,"date":"2025-12-19T21:11:25","date_gmt":"2025-12-19T21:11:25","guid":{"rendered":"https:\/\/dev.smartplug.com\/staging\/?page_id=11384"},"modified":"2026-09-30T19:28:51","modified_gmt":"2026-09-30T19:28:51","slug":"smartplug-male-inlet-connector-strain-relief","status":"publish","type":"page","link":"https:\/\/dev.smartplug.com\/staging\/smartplug-male-inlet-connector-strain-relief\/","title":{"rendered":"SmartPlug Male Inlet Connector Strain Relief"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11384\" class=\"elementor elementor-11384\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3bca2de e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"3bca2de\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-a6fee19 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"a6fee19\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-0037da4 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"0037da4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7fe139b elementor-widget elementor-widget-heading\" data-id=\"7fe139b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SmartPlug Male Inlet Connector Strain Relief\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-88192ed e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"88192ed\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4723124 e-grid e-con-full wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"4723124\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-75c0c77 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"75c0c77\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0f1f6b sp-hotspot-image elementor-widget elementor-widget-html\" data-id=\"c0f1f6b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMARTPLUG MALE INLET STRAIN RELIEF GALLERY -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<div id=\"sp-male-inlet-strain-relief-gallery\">\r\n    <div class=\"sp-main-view\">\r\n        <div class=\"sp-gallery-slide active\"\r\n             data-slide=\"0\"\r\n             data-title=\"KEY FEATURES\"\r\n             data-subtitle=\"Click the numbered points to explore the Male Inlet Stain Relief\">\r\n\r\n            <div class=\"sp-product-image-wrap sp-main-product sp-hotspot-image\" style=\"\r\n                --image-x-desktop:0px;\r\n                --image-x-laptop:0px;\r\n                --image-x-tablet:0px;\r\n                --image-y-desktop:0px;\r\n                --image-y-laptop:0px;\r\n                --image-y-tablet:0px;\r\n                --image-scale-desktop:1;\r\n                --image-scale-laptop:1;\r\n                --image-scale-tablet:1;\r\n                --image-x-mobile:0px;\r\n                --image-y-mobile:0px;\r\n                --image-scale-mobile:1;\r\n            \">\r\n                <div class=\"sp-main-image-clip\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/06\/SmartPlug-Male-Inlet-Connector-Strain-Relief-1.png\"\r\n                        alt=\"SmartPlug Male Inlet Connector Strain Relief\"\r\n                    >\r\n                <\/div>\r\n\r\n                <!-- HOTSPOT 1 -->\r\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\r\n                    --hotspot-scale-desktop:1;\r\n                    --hotspot-scale-laptop:1;\r\n                    --hotspot-scale-tablet:1;\r\n                    --hotspot-scale-mobile:.8;\r\n                    --top:17%;\r\n                    --left:25%;\r\n                    --hotspot-x:0px;\r\n                    --hotspot-y:0px;\r\n                    --tooltip-x-desktop:0px;\r\n                    --tooltip-x-laptop:0px;\r\n                    --tooltip-x-tablet:0px;\r\n                    --tooltip-y-desktop:0px;\r\n                    --tooltip-y-laptop:0px;\r\n                    --tooltip-y-tablet:0px;\r\n                    --tooltip-scale-desktop:1;\r\n                    --tooltip-scale-laptop:1;\r\n                    --tooltip-scale-tablet:1;\r\n                    --tooltip-x-mobile:0px;\r\n                    --tooltip-y-mobile:0px;\r\n                    --tooltip-scale-mobile:1;\r\n                    --dot-color:#DF6B30;\r\n                    --number-color:#ffffff;\r\n                    --tooltip-bg:#DF6B30;\r\n                    --tooltip-width:220px;\r\n                    --dot-size:34px;\r\n                    --number-size:14px;\r\n                \">\r\n                    <div class=\"sp-dot\"><span class=\"sp-number\">1<\/span><\/div>\r\n                    <div class=\"sp-tooltip\">\r\n                        <strong>Durable Clear Cover<\/strong><br>\r\n                        Protects the connector from dirt and moisture.\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- HOTSPOT 2 -->\r\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\r\n                    --hotspot-scale-desktop:1;\r\n                    --hotspot-scale-laptop:1;\r\n                    --hotspot-scale-tablet:1;\r\n                    --hotspot-scale-mobile:.8;\r\n                    --top:12%;\r\n                    --left:74%;\r\n                    --hotspot-x:0px;\r\n                    --hotspot-y:0px;\r\n                    --tooltip-x-desktop:0px;\r\n                    --tooltip-x-laptop:0px;\r\n                    --tooltip-x-tablet:0px;\r\n                    --tooltip-y-desktop:0px;\r\n                    --tooltip-y-laptop:0px;\r\n                    --tooltip-y-tablet:0px;\r\n                    --tooltip-scale-desktop:1;\r\n                    --tooltip-scale-laptop:1;\r\n                    --tooltip-scale-tablet:1;\r\n                    --tooltip-x-mobile:0px;\r\n                    --tooltip-y-mobile:0px;\r\n                    --tooltip-scale-mobile:1;\r\n                    --dot-color:#DF6B30;\r\n                    --number-color:#ffffff;\r\n                    --tooltip-bg:#DF6B30;\r\n                    --tooltip-width:240px;\r\n                    --dot-size:34px;\r\n                    --number-size:16px;\r\n                \">\r\n                    <div class=\"sp-dot\"><span class=\"sp-number\">2<\/span><\/div>\r\n                    <div class=\"sp-tooltip\">\r\n                        <strong>Replacement Gasket<\/strong><br>\r\n                        Ensures a tight, weather-resistant seal for reliable performance.\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- HOTSPOT 3 -->\r\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\r\n                    --hotspot-scale-desktop:1;\r\n                    --hotspot-scale-laptop:1;\r\n                    --hotspot-scale-tablet:1;\r\n                    --hotspot-scale-mobile:.8;\r\n                    --top:75%;\r\n                    --left:20%;\r\n                    --hotspot-x:0px;\r\n                    --hotspot-y:0px;\r\n                    --tooltip-x-desktop:0px;\r\n                    --tooltip-x-laptop:0px;\r\n                    --tooltip-x-tablet:0px;\r\n                    --tooltip-y-desktop:0px;\r\n                    --tooltip-y-laptop:0px;\r\n                    --tooltip-y-tablet:0px;\r\n                    --tooltip-scale-desktop:1;\r\n                    --tooltip-scale-laptop:1;\r\n                    --tooltip-scale-tablet:1;\r\n                    --tooltip-x-mobile:0px;\r\n                    --tooltip-y-mobile:0px;\r\n                    --tooltip-scale-mobile:1;\r\n                    --dot-color:#DF6B30;\r\n                    --number-color:#ffffff;\r\n                    --tooltip-bg:#DF6B30;\r\n                    --tooltip-width:240px;\r\n                    --dot-size:34px;\r\n                    --number-size:16px;\r\n                \">\r\n                    <div class=\"sp-dot\"><span class=\"sp-number\">3<\/span><\/div>\r\n                    <div class=\"sp-tooltip\">\r\n                        <strong>Easy Access Opening<\/strong><br>\r\n                        Allows quick installation and removal.\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- HOTSPOT 4 -->\r\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\r\n                    --hotspot-scale-desktop:1;\r\n                    --hotspot-scale-laptop:1;\r\n                    --hotspot-scale-tablet:1;\r\n                    --hotspot-scale-mobile:.8;\r\n                    --top:75%;\r\n                    --left:74.5%;\r\n                    --hotspot-x:0px;\r\n                    --hotspot-y:0px;\r\n                    --tooltip-x-desktop:0px;\r\n                    --tooltip-x-laptop:0px;\r\n                    --tooltip-x-tablet:0px;\r\n                    --tooltip-y-desktop:0px;\r\n                    --tooltip-y-laptop:0px;\r\n                    --tooltip-y-tablet:0px;\r\n                    --tooltip-scale-desktop:1;\r\n                    --tooltip-scale-laptop:1;\r\n                    --tooltip-scale-tablet:1;\r\n                    --tooltip-x-mobile:0px;\r\n                    --tooltip-y-mobile:0px;\r\n                    --tooltip-scale-mobile:1;\r\n                    --dot-color:#DF6B30;\r\n                    --number-color:#ffffff;\r\n                    --tooltip-bg:#DF6B30;\r\n                    --tooltip-width:240px;\r\n                    --dot-size:34px;\r\n                    --number-size:16px;\r\n                \">\r\n                    <div class=\"sp-dot\"><span class=\"sp-number\">4<\/span><\/div>\r\n                    <div class=\"sp-tooltip\">\r\n                        <strong>Secure Protective Base<\/strong><br>\r\n                        Helps keep the connector clean and protected.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"sp-slide-info\">\r\n                <div class=\"sp-slide-title\">MALE INLET STRAIN RELIEF<\/div>\r\n                <div class=\"sp-slide-subtitle\">Click the numbered points to explore the product<\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"sp-gallery-slide sp-variant-slide\"\r\n             data-slide=\"1\"\r\n             data-variant=\"service-kit\"\r\n             data-30A=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/07\/SmartPlug-Male-Inlet-Connector-Strain-Relief.avif\"\r\n             data-30A-title=\"Male Inlet Connector Strain Relief\"\r\n             data-30A-subtitle=\"Service Kit\"\r\n             data-30A-part-number=\"PKMGKT\">\r\n            <div class=\"sp-variant-layout\">\r\n                <div class=\"sp-mobile-variant-title\">\r\n                    <div class=\"sp-slide-title\">Inlet Strain Relief<\/div>\r\n                    <div class=\"sp-slide-subtitle\">Service Kit<\/div>\r\n                <\/div>\r\n\r\n                <div class=\"sp-variant-image-wrap\">\r\n                    <img decoding=\"async\" class=\"sp-variant-image\"\r\n                         src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/07\/SmartPlug-Male-Inlet-Connector-Strain-Relief.avif\"\r\n                         alt=\"Inlet Strain Relief Service Kit\"\r\n                         style=\"\r\n                            --image-x-desktop:0px;\r\n                            --image-y-desktop:0px;\r\n                            --image-scale-desktop:1;\r\n                            --image-x-mobile:0px;\r\n                            --image-y-mobile:0px;\r\n                            --image-scale-mobile:1;\r\n                         \">\r\n                <\/div>\r\n\r\n                <div class=\"sp-slide-info sp-side-info\">\r\n                    <div class=\"sp-slide-title\">Inlet Strain Relief<\/div>\r\n                    <div class=\"sp-slide-subtitle\">Service Kit<\/div>\r\n                    <div class=\"sp-part-number\">PART NUMBER: <strong class=\"sp-part-number-value\">PKMGKT<\/strong><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"sp-product-selector\">\r\n        <button type=\"button\" class=\"sp-thumb-nav sp-thumb-prev\" aria-label=\"Previous product image\">&#10094;<\/button>\r\n        <div class=\"sp-thumbnails\">\r\n            <button type=\"button\"\r\n                    class=\"sp-thumb sp-feature-thumb active\"\r\n                    data-target=\"0\"\r\n                    aria-label=\"View Male Inlet Strain Relief features\">\r\n                <span class=\"sp-thumb-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/07\/SmartPlug-Male-Inlet-Connector-Strain-Relief.avif\"\r\n                         alt=\"SmartPlug Male Inlet Connector Strain Relief\">\r\n                <\/span>\r\n                <span class=\"sp-thumb-label\">Features<\/span>\r\n            <\/button>\r\n            <button type=\"button\"\r\n                    class=\"sp-thumb\"\r\n                    data-target=\"1\"\r\n                    aria-label=\"View Inlet Strain Relief Service Kit\">\r\n                <span class=\"sp-thumb-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/07\/SmartPlug-Male-Inlet-Connector-Strain-Relief.avif\"\r\n                         alt=\"Inlet Strain Relief Service Kit\">\r\n                <\/span>\r\n                <span class=\"sp-thumb-label\">Strain Relief<\/span>\r\n            <\/button>\r\n        <\/div>\r\n        <button type=\"button\" class=\"sp-thumb-nav sp-thumb-next\" aria-label=\"Next product image\">&#10095;<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"sp-gallery-pagination\" aria-label=\"Product gallery pagination\">\r\n        <button type=\"button\" class=\"sp-page-dot active\" data-page=\"0\" aria-label=\"Go to features\"><\/button>\r\n        <button type=\"button\" class=\"sp-page-dot\" data-page=\"1\" aria-label=\"Go to Service Kit\"><\/button>\r\n    <\/div>\r\n<\/div>\r\n<style>\r\n\/* =========================================================\r\nSMARTPLUG DUAL CORDSET GALLERY\r\nAmazon-inspired product selector\r\n========================================================= *\/\r\n\r\n#sp-male-inlet-strain-relief-gallery {\r\n    --sp-orange: #DF6B30;\r\n    --sp-dark: #1c1c1c;\r\n    --sp-muted: #666;\r\n    --sp-border: #dedede;\r\n    --sp-soft: #f7f7f7;\r\n\r\n    width: 100%;\r\n    height: 560px;\r\n    margin: 0 auto;\r\n    font-family: \"Montserrat\", sans-serif;\r\n    box-sizing: border-box;\r\n    overflow: visible;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery *,\r\n#sp-male-inlet-strain-relief-gallery *::before,\r\n#sp-male-inlet-strain-relief-gallery *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\/* =========================================================\r\nMAIN VIEW\r\n========================================================= *\/\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-main-view {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 430px;\r\n    overflow: visible;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-gallery-slide {\r\n    display: none;\r\n    width: 100%;\r\n    height: 100%;\r\n    position: relative;\r\n    overflow: visible;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-gallery-slide.active {\r\n    display: flex;\r\n}\r\n\r\n\/* =========================================================\r\nFEATURE IMAGE\r\n========================================================= *\/\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-main-product {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 400px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-main-image-clip {\r\n    position: absolute;\r\n    inset: 0;\r\n    overflow: hidden;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-main-image-clip > img {\r\n    width: 100%;\r\n    height: 100%;\r\n    max-width: none;\r\n    object-fit: contain;\r\n    display: block;\r\n    transform:\r\n    translate(var(--image-x-desktop), var(--image-y-desktop))\r\n    scale(var(--image-scale-desktop));\r\n    transform-origin: center center;\r\n    transition: transform .18s ease;\r\n}\r\n\r\n\/* =========================================================\r\nVARIANT IMAGE\r\n========================================================= *\/\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-variant-layout {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr);\r\n    align-items: center;\r\n    gap: 12px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap {\r\n    width: 100%;\r\n    height: 400px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    position: relative;\r\n    min-width: 0;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n    display: block;\r\n    transform:\r\n    translate(var(--image-x-desktop), var(--image-y-desktop))\r\n    scale(var(--image-scale-desktop));\r\n    transform-origin: center center;\r\n    transition: opacity .16s ease, transform .18s ease;\r\n}\r\n\r\n\/* =========================================================\r\nPRODUCT INFORMATION\r\n========================================================= *\/\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-slide-info {\r\n    width: 100%;\r\n    max-width: 400px;\r\n    margin-top: -2px;\r\n    padding: 0 12px;\r\n    text-align: center;\r\n    transition: none;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-side-info {\r\n    max-width: none;\r\n    margin: 0;\r\n    padding: 2px 2px 2px 2px;\r\n    text-align: left;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-side-info .sp-slide-title {\r\n    font-size: 30px;\r\n    font-family: \"Bebas Neue\", sans-serif;\r\n    font-weight: 600;\r\n    letter-spacing: 1.5px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-amp-label {\r\n    margin-top: 17px;\r\n    color: #777;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: .5px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-amp-toggle {\r\n    display: flex;\r\n    width: 100%;\r\n    max-width: 300px;\r\n    margin-top: 6px;\r\n    border: 1px solid #d8d8d8;\r\n    border-radius: 6px;\r\n    overflow: hidden;\r\n    background: #fff;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-amp-btn {\r\n    flex: 1 1 50%;\r\n    min-height: 30px;\r\n    padding: 7px 10px;\r\n    border: 0;\r\n    border-right: 0px solid #d8d8d8;\r\n    background: #fff;\r\n    color: #333;\r\n    font-family: \"Montserrat\", sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    transition: background .18s ease, color .18s ease;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-amp-btn:last-child { border-right: 0; }\r\n#sp-male-inlet-strain-relief-gallery .sp-amp-btn.active { background: var(--sp-orange); color: #fff; }\r\n#sp-male-inlet-strain-relief-gallery .sp-amp-btn:disabled { background: #f2f2f2; color: #aaa; cursor: not-allowed; }\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-current-amp {\r\n    margin-top: 8px;\r\n    color: #555;\r\n    font-size: 12px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-side-info .sp-part-number {\r\n    display: block;\r\n    width: max-content;\r\n    margin-top: 10px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-mobile-variant-title {\r\n    display: none;\r\n}\r\n#sp-male-inlet-strain-relief-gallery .sp-slide-title {\r\n    margin-top: 3px;\r\n    color: var(--sp-dark);\r\n    font-family: \"Bebas Neue\", sans-serif;\r\n    font-size: 25px;\r\n    line-height: 1;\r\n    letter-spacing: .4px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-slide-subtitle {\r\n    margin-top: 3px;\r\n    margin-bottom: 3px;\r\n    color: var(--sp-muted);\r\n    font-size: 12px;\r\n    font-weight: 500;\r\n    line-height: 1.35;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-variant-image.is-empty {\r\n    visibility: hidden;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-part-number {\r\n    display: inline-block;\r\n    margin-top: 7px;\r\n    color: #555;\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    letter-spacing: .5px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-part-number strong {\r\n    color: var(--sp-dark);\r\n}\r\n\r\n\/* =========================================================\r\nHOTSPOTS\r\n========================================================= *\/\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-hotspot {\r\n    position: absolute;\r\n    z-index: 1;\r\n    top: var(--sp-hotspot-top-px, calc(var(--top) + var(--hotspot-y)));\r\n    left: var(--sp-hotspot-left-px, calc(var(--left) + var(--hotspot-x)));\r\n    transform:\r\n    translate(-50%, -50%)\r\n    scale(var(--hotspot-scale-desktop));\r\n    transform-origin: center center;\r\n    outline: none;\r\n    transition: top .18s ease, left .18s ease, transform .18s ease;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-dot {\r\n    width: 32px;\r\n    height: 32px;\r\n    border-radius: 50%;\r\n    background: var(--dot-color);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    box-shadow: 0 2px 8px rgba(0,0,0,.18);\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-number {\r\n    color: var(--number-color);\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    line-height: 1;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-tooltip {\r\n    position: absolute;\r\n    z-index: 81;\r\n    bottom: calc(100% + 7px - var(--tooltip-y-desktop));\r\n    left: calc(50% + var(--tooltip-x-desktop));\r\n    transform:\r\n    translateX(-50%)\r\n    scale(var(--tooltip-scale-desktop));\r\n    transform-origin: center bottom;\r\n    width: 230px;\r\n    padding: 10px;\r\n    border-radius: 7px;\r\n    background: var(--tooltip-bg);\r\n    color: #fff;\r\n    font-size: 10px;\r\n    line-height: 1.45;\r\n    text-align: left;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition:\r\n    opacity .18s ease,\r\n    visibility .18s ease,\r\n    left .18s ease,\r\n    bottom .18s ease,\r\n    transform .18s ease;\r\n    pointer-events: none;\r\n    z-index:10;\r\n    box-shadow: 0 4px 14px rgba(0,0,0,.14);\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-hotspot:hover .sp-tooltip,\r\n#sp-male-inlet-strain-relief-gallery .sp-hotspot:focus-visible .sp-tooltip,\r\n#sp-male-inlet-strain-relief-gallery .sp-hotspot.is-open .sp-tooltip {\r\n    opacity: 1;\r\n    visibility: visible;\r\n}\r\n\r\n\/* =========================================================\r\nAMAZON-STYLE PRODUCT SELECTOR\r\n========================================================= *\/\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-product-selector {\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: stretch;\r\n    gap: 6px;\r\n    margin-top: 4px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumbnails {\r\n    flex: 1 1 auto;\r\n    min-width: 0;\r\n    display: flex;\r\n    align-items: stretch;\r\n    justify-content: center;\r\n    gap: 7px;\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n    scroll-behavior: smooth;\r\n    scrollbar-width: none;\r\n    padding: 2px 0;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumbnails::-webkit-scrollbar {\r\n    display: none;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumb {\r\n    flex: 0 0 72px;\r\n    width: 72px;\r\n    min-height: 94px;\r\n    padding: 5px 5px 6px;\r\n    border: 1px solid var(--sp-border);\r\n    border-radius: 7px;\r\n    background: #fff;\r\n    cursor: pointer;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    gap: 3px;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumb:hover {\r\n    border-color: var(--sp-orange);\r\n    transform: translateY(-1px);\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumb.active {\r\n    border: 2px solid var(--sp-orange);\r\n    box-shadow: 0 2px 8px rgba(223,107,48,.13);\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumb:focus {\r\n    outline: none;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumb:focus-visible {\r\n    border-color: var(--sp-orange);\r\n    box-shadow: 0 0 0 2px rgba(223,107,48,.18);\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumb-image {\r\n    width: 100%;\r\n    height: 57px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n    border-radius: 4px;\r\n    background: #fff;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumb img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n    display: block;\r\n    pointer-events: none;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumb-label {\r\n    display: block;\r\n    width: 100%;\r\n    color: var(--sp-dark);\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    line-height: 1.15;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumb-part {\r\n    display: block;\r\n    color: #777;\r\n    font-size: 8px;\r\n    font-weight: 600;\r\n    line-height: 1;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumb-view {\r\n    display: block;\r\n    color: #777;\r\n    font-size: 8px;\r\n    font-weight: 600;\r\n    line-height: 1;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-feature-thumb .sp-thumb-part {\r\n    visibility: hidden;\r\n}\r\n\r\n\/* =========================================================\r\nTHUMBNAIL ARROWS\r\n========================================================= *\/\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-thumb-nav {\r\n    display: none;\r\n    width: 26px;\r\n    min-width: 26px;\r\n    height: 26px;\r\n    align-self: center;\r\n    padding: 0;\r\n    border: 0;\r\n    border-radius: 50%;\r\n    background: #fff;\r\n    color: #222;\r\n    font-family: Arial, sans-serif;\r\n    font-size: 16px;\r\n    line-height: 26px;\r\n    text-align: center;\r\n    cursor: pointer;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n}\r\n\r\n\/* =========================================================\r\nPAGINATION\r\n========================================================= *\/\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-gallery-pagination {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 6px;\r\n    margin-top: 7px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-page-dot {\r\n    width: 6px;\r\n    height: 6px;\r\n    padding: 0;\r\n    border: 0;\r\n    border-radius: 50%;\r\n    background: #c7c7c7;\r\n    cursor: pointer;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    transition: background .2s ease, transform .2s ease;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-page-dot:hover,\r\n#sp-male-inlet-strain-relief-gallery .sp-page-dot.active {\r\n    background: var(--sp-orange);\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-page-dot.active {\r\n    transform: scale(1.25);\r\n}\r\n\r\n\/* =========================================================\r\nFULL SCREEN VIEW + HOVER ZOOM\r\n========================================================= *\/\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-trigger {\r\n    position: static;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    align-self: flex-start;\r\n    margin-top: 7px;\r\n    margin-left: 0;\r\n    margin-right: 0;\r\n    transform: none;\r\n    border: 1px solid #d7d7d7;\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    color: #333;\r\n    padding: 6px 11px;\r\n    font-family: \"Montserrat\", sans-serif;\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: .2px;\r\n    line-height: 1;\r\n    cursor: pointer;\r\n    white-space: nowrap;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    box-shadow: 0 1px 4px rgba(0,0,0,.08);\r\n    transition: border-color .18s ease, color .18s ease, background .18s ease;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\r\n    display: none;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-amp-wrap { display: none !important; }\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-trigger:hover {\r\n    border-color: var(--sp-orange);\r\n    color: var(--sp-orange);\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-zoom-preview {\r\n    position: absolute;\r\n    top: 0;\r\n    left: calc(88% + 4px);\r\n    width: 78%;\r\n    height: 100%;\r\n    background: #fff;\r\n    border: 1px solid #e3e3e3;\r\n    border-radius: 8px;\r\n    box-shadow: 0 6px 20px rgba(0,0,0,.18);\r\n    overflow: hidden;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n    transition: opacity .12s ease, visibility .12s ease;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-zoom-preview img {\r\n    position: absolute;\r\n    width: 200%;\r\n    height: 200%;\r\n    max-width: none;\r\n    object-fit: contain;\r\n    display: block;\r\n    pointer-events: none;\r\n    transform-origin: top left;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap.sp-zoom-active .sp-zoom-preview {\r\n    opacity: 1;\r\n    visibility: visible;\r\n}\r\n\r\n\/* Full-screen product popup *\/\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-modal {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 999999;\r\n    display: none;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 20px;\r\n    background: rgba(0,0,0,.38);\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-modal.is-open {\r\n    display: flex;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-dialog {\r\n    position: relative;\r\n\r\n    \/* =====================================================\r\n       FULL SCREEN POPUP SIZE \u2014 EDIT HERE\r\n       Change these values for the desktop popup size.\r\n       ===================================================== *\/\r\n    width: var(--sp-popup-width-desktop, 1100px);\r\n    height: var(--sp-popup-height-desktop, 520px);\r\n    max-width: calc(100vw - 30px);\r\n    max-height: calc(100vh - 40px);\r\n\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr);\r\n    gap: 28px;\r\n    padding: 24px 28px;\r\n    background: #fff;\r\n    border-radius: 7px;\r\n    box-shadow: 0 8px 35px rgba(0,0,0,.25);\r\n    overflow: hidden;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-close {\r\n    position: absolute;\r\n    top: 8px;\r\n    right: 10px;\r\n    width: 28px;\r\n    height: 28px;\r\n    padding: 0;\r\n    border: 0;\r\n    background: transparent;\r\n    color: #222;\r\n    font-family: Arial, sans-serif;\r\n    font-size: 24px;\r\n    line-height: 28px;\r\n    cursor: pointer;\r\n    z-index: 5;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-image-area {\r\n    min-width: 0;\r\n    min-height: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-image {\r\n    \/*\r\n     * Popup image size and position are controlled by the\r\n     * FULLSCREEN_CONTENT settings below.\r\n     *\/\r\n    width: var(--sp-popup-image-width-desktop, 100%);\r\n    height: var(--sp-popup-image-height-desktop, 100%);\r\n    max-width: none;\r\n    max-height: none;\r\n    object-fit: contain;\r\n    display: block;\r\n    transform: translate(\r\n        var(--sp-popup-image-x-desktop, 0px),\r\n        var(--sp-popup-image-y-desktop, 0px)\r\n    );\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-info {\r\n    min-width: 0;\r\n    padding: 8px 8px 8px 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    overflow-y: auto;\r\n}\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-title {\r\n    margin-top: 5px;\r\n    color: var(--sp-dark);\r\n    font-family: \"Bebas Neue\", sans-serif;\r\n    font-size: 31px;\r\n    line-height: 1;\r\n    letter-spacing: 1.5px;\r\n    font-weight: 700;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-description {\r\n    margin-top: 8px;\r\n    color: #666;\r\n    font-size: 12px;\r\n    line-height: 1.45;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-part-number {\r\n    margin-top: 8px;\r\n    color: #555;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: .5px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-part-number strong {\r\n    color: var(--sp-dark);\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-amp-wrap {\r\n    display: none;\r\n    margin-top: 14px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-amp-wrap.is-visible {\r\n    display: block;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-amp-label {\r\n    margin-bottom: 5px;\r\n    color: #777;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: .5px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-amp-toggle {\r\n    display: flex;\r\n    width: 250px;\r\n    max-width: 100%;\r\n    border: 1px solid #d8d8d8;\r\n    border-radius: 6px;\r\n    overflow: hidden;\r\n    background: #fff;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-amp-btn {\r\n    flex: 1 1 50%;\r\n    min-height: 32px;\r\n    padding: 7px 10px;\r\n    border: 0;\r\n    background: #fff;\r\n    color: #333;\r\n    font-family: \"Montserrat\", sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    transition: background .18s ease, color .18s ease;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-amp-btn.active {\r\n    background: var(--sp-orange);\r\n    color: #fff;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-amp-btn:disabled {\r\n    background: #f2f2f2;\r\n    color: #aaa;\r\n    cursor: not-allowed;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-thumbnails {\r\n    width: 100%;\r\n    margin-top: 18px;\r\n    display: grid;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    gap: 8px;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-thumb {\r\n    width: 100%;\r\n    height: 72px;\r\n    padding: 4px;\r\n    border: 1px solid var(--sp-border);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-thumb.active {\r\n    border: 2px solid var(--sp-orange);\r\n}\r\n\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-thumb img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n    display: block;\r\n}\r\n\r\n\/* =========================================================\r\nLAPTOP + TABLET IMAGE POSITIONING\r\nThe product image may still use independent responsive scale\/X\/Y\r\nsettings. Hotspot POSITIONING itself is handled by JavaScript\r\nagainst the actual rendered image and does not use breakpoint-specific\r\nhotspot coordinates.\r\n========================================================= *\/\r\n\r\n@media (min-width: 1025px) and (max-width: 1366px) {\r\n    #sp-male-inlet-strain-relief-gallery .sp-main-image-clip > img {\r\n        transform:\r\n            translate(var(--image-x-laptop), var(--image-y-laptop))\r\n            scale(var(--image-scale-laptop));\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap img {\r\n        transform:\r\n            translate(var(--image-x-laptop), var(--image-y-laptop))\r\n            scale(var(--image-scale-laptop));\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-hotspot {\r\n        transform:\r\n            translate(-50%, -50%)\r\n            scale(var(--hotspot-scale-laptop));\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-tooltip {\r\n        bottom: calc(100% + 7px - var(--tooltip-y-laptop));\r\n        left: calc(50% + var(--tooltip-x-laptop));\r\n        transform:\r\n            translateX(-50%)\r\n            scale(var(--tooltip-scale-laptop));\r\n    }\r\n}\r\n\r\n@media (min-width: 601px) and (max-width: 1024px) {\r\n    #sp-male-inlet-strain-relief-gallery .sp-main-image-clip > img {\r\n        transform:\r\n            translate(var(--image-x-tablet), var(--image-y-tablet))\r\n            scale(var(--image-scale-tablet));\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap img {\r\n        transform:\r\n            translate(var(--image-x-tablet), var(--image-y-tablet))\r\n            scale(var(--image-scale-tablet));\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-hotspot {\r\n        transform:\r\n            translate(-50%, -50%)\r\n            scale(var(--hotspot-scale-tablet));\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-tooltip {\r\n        bottom: calc(100% + 7px - var(--tooltip-y-tablet));\r\n        left: calc(50% + var(--tooltip-x-tablet));\r\n        transform:\r\n            translateX(-50%)\r\n            scale(var(--tooltip-scale-tablet));\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nMOBILE HOTSPOT SCALE \/ TOOLTIP OVERRIDE\r\nHotspot top\/left remain controlled by the JavaScript-calculated\r\npixel coordinates. Only the visual scale and tooltip placement\r\nchange responsively here.\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n    #sp-male-inlet-strain-relief-gallery .sp-hotspot {\r\n        transform:\r\n            translate(-50%, -50%)\r\n            scale(var(--hotspot-scale-mobile));\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-tooltip {\r\n        bottom: calc(100% + 7px - var(--tooltip-y-mobile));\r\n        left: calc(50% + var(--tooltip-x-mobile));\r\n        transform:\r\n            translateX(-50%)\r\n            scale(var(--tooltip-scale-mobile));\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nMOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-trigger {\r\n        position: static;\r\n        display: inline-flex;\r\n        margin-top: 6px;\r\n        transform: none;\r\n        font-size: 8px;\r\n        padding: 6px 10px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-zoom-preview {\r\n        display: none;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-modal {\r\n        padding: 8px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-dialog {\r\n        \/*\r\n         * FULL SCREEN POPUP SIZE \u2014 MOBILE EDIT HERE\r\n         *\/\r\n        width: var(--sp-popup-width-mobile, calc(100vw - 16px));\r\n        height: var(--sp-popup-height-mobile, 90vh);\r\n        max-width: calc(100vw - 16px);\r\n        max-height: calc(100vh - 16px);\r\n        min-height: 0;\r\n        grid-template-columns: 1fr;\r\n        gap: 8px;\r\n        padding: 18px 12px 12px;\r\n        border-radius: 8px;\r\n        box-shadow: 0 8px 30px rgba(0,0,0,.22);\r\n        overflow-y: auto;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-image-area {\r\n        height: var(--sp-popup-image-area-height-mobile, 54vh);\r\n        min-height: 260px;\r\n        overflow: hidden;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-image {\r\n        width: var(--sp-popup-image-width-mobile, 100%);\r\n        height: var(--sp-popup-image-height-mobile, 100%);\r\n        transform: translate(\r\n            var(--sp-popup-image-x-mobile, 0px),\r\n            var(--sp-popup-image-y-mobile, 0px)\r\n        );\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-info {\r\n        padding: 0 4px 4px;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-title {\r\n        font-size: 25px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-description {\r\n        font-size: 10px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-part-number {\r\n        font-size: 9px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-amp-wrap {\r\n        margin-top: 8px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-amp-label {\r\n        font-size: 9px;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-amp-toggle {\r\n        width: 250px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-amp-btn {\r\n        min-height: 30px;\r\n        padding: 6px 8px;\r\n        font-size: 10px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-thumbnails {\r\n        margin-top: 10px;\r\n        grid-template-columns: repeat(4, minmax(0, 1fr));\r\n        gap: 5px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-fullscreen-thumb {\r\n        height: 58px;\r\n    }\r\n\r\n    \/* =====================================================\r\n       MOBILE PRODUCT GALLERY\r\n       Compact Amazon-style vertical product layout\r\n       ===================================================== *\/\r\n\r\n    #sp-male-inlet-strain-relief-gallery {\r\n        width: 100%;\r\n        max-width: 100%;\r\n        height: auto;\r\n        min-height: 0;\r\n        margin: 0 auto;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-main-view {\r\n        width: 100%;\r\n        height: auto;\r\n        min-height: 0;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-gallery-slide {\r\n        width: 100%;\r\n        height: auto;\r\n        min-height: 0;\r\n        display: none;\r\n        position: relative;\r\n        overflow: visible;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-gallery-slide.active {\r\n        display: flex;\r\n    }\r\n\r\n    \/* FEATURE IMAGE\r\n       The main\/features image uses the same responsive viewing frame. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-main-product {\r\n        width: 100%;\r\n        height: auto;\r\n        aspect-ratio: 3.3 \/ 3;\r\n        min-height: 0;\r\n        flex: 0 0 auto;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        order: 1;\r\n        position: relative;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-main-image-clip {\r\n        inset: 0;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-main-image-clip > img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n        transform:\r\n            translate(var(--image-x-mobile), var(--image-y-mobile))\r\n            scale(var(--image-scale-mobile));\r\n    }\r\n\r\n    \/* VARIANT LAYOUT *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-layout {\r\n        width: 100%;\r\n        height: auto;\r\n        min-height: 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n        gap: 0;\r\n    }\r\n\r\n    \/* Title at the top *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-mobile-variant-title {\r\n        display: block;\r\n        width: 100%;\r\n        min-height: 46px;\r\n        padding: 0 8px;\r\n        text-align: center;\r\n        order: 1;\r\n        margin: 0;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n#sp-male-inlet-strain-relief-gallery .sp-mobile-variant-title .sp-slide-title {\r\n        margin: 2px 0 0;\r\n        font-size: 23px;\r\n        line-height: .95;\r\n        letter-spacing: .8px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-mobile-variant-title .sp-slide-subtitle {\r\n        margin: 3px 0 0;\r\n        font-size: 10px;\r\n        line-height: 1.2;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-fullscreen-trigger {\r\n        display: inline-flex;\r\n        margin-left: 0;\r\n        margin-right: auto;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\r\n        display: none;\r\n    }\r\n\r\n    \/* PRODUCT IMAGEEvery variation uses the responsive viewing frame. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap {\r\n        width: 100%;\r\n        height: auto;\r\n        aspect-ratio: 5 \/ 3;\r\n        min-height: 0;\r\n        flex: 0 0 auto;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        order: 2;\r\n        position: relative;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n        display: block;\r\n        transform:\r\n            translate(var(--image-x-mobile), var(--image-y-mobile))\r\n            scale(var(--image-scale-mobile));\r\n        transform-origin: center center;\r\n        transition: opacity .16s ease, transform .18s ease;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-slide-info .sp-fullscreen-trigger {\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n\r\n    \/* PRODUCT INFORMATION \/ CONTROLS *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info {\r\n        width: 100%;\r\n        max-width: 100%;\r\n        height: auto;\r\n        min-height: 0;\r\n        padding: 0;\r\n        margin: 0;\r\n        text-align: center;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n        gap: 0;\r\n        order: 3;\r\n    }\r\n\r\n    \/* Hide duplicate desktop title. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-slide-title,\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-slide-subtitle {\r\n        display: none;\r\n    }\r\n\r\n    \/* View selector label *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-amp-label {\r\n        display: block;\r\n        width: 100%;\r\n        margin: 0 0 4px;\r\n        color: #777;\r\n        font-size: 10px;\r\n        line-height: 1.1;\r\n        font-weight: 700;\r\n        letter-spacing: .5px;\r\n        text-align: center;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-amp-toggle {\r\n        display: flex;\r\n        width: 180px;\r\n        max-height: none;\r\n        gap: 2px;\r\n        border: none;\r\n        background: transparent;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-amp-btn {\r\n        width: 100%;\r\n        height: 35px;\r\n        min-height: 35px;\r\n        padding: 5px 10px;\r\n        font-size: 11px;\r\n    }\r\n\r\n    \/* Keep the existing view switching fully functional. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-current-amp {\r\n        display: block;\r\n        width: 100%;\r\n        margin: 5px 0 0;\r\n        color: #666;\r\n        font-size: 11px;\r\n        line-height: 1.15;\r\n        text-align: center;\r\n    }\r\n\r\n    \/* Part number *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-part-number {\r\n        display: inline-block;\r\n        margin: 5px auto 0;\r\n        padding: 0;\r\n        color: #555;\r\n        font-size: 8px;\r\n        letter-spacing: .4px;\r\n        text-align: center;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-part-number strong {\r\n        color: var(--sp-dark);\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-image.is-empty {\r\n        visibility: hidden;\r\n    }\r\n\r\n    \/* HOTSPOTS\r\n       Follow the responsive hotspot architecture.\r\n       JavaScript supplies the pixel coordinates against the actual\r\n       rendered product image; only the mobile visual scale changes here.\r\n    *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-hotspot {\r\n        transform:\r\n            translate(-50%, -50%)\r\n            scale(var(--hotspot-scale-mobile));\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-tooltip {\r\n        bottom: calc(100% + 7px - var(--tooltip-y-mobile));\r\n        left: calc(50% + var(--tooltip-x-mobile));\r\n        transform:\r\n            translateX(-50%)\r\n            scale(var(--tooltip-scale-mobile));\r\n        width: min(190px, calc(100vw - 22px));\r\n        padding: 8px;\r\n        font-size: 9px;\r\n    }\r\n\r\n    \/* MOBILE THUMBNAIL STRIP *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-product-selector {\r\n        width: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        position: relative;\r\n        gap: 0;\r\n        margin-top: 7px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumb-nav {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex: 0 0 26px;\r\n        width: 26px;\r\n        min-width: 26px;\r\n        height: 26px;\r\n        min-height: 26px;\r\n        padding: 0;\r\n        border: 0;\r\n        border-radius: 50%;\r\n        background: #fff;\r\n        color: #222;\r\n        font-size: 16px;\r\n        line-height: 26px;\r\n        cursor: pointer;\r\n        z-index: 3;\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumb-prev {\r\n        left: 0;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumb-next {\r\n        right: 0;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumbnails {\r\n        flex: 0 0 auto;\r\n        width: auto;\r\n        max-width: calc(100% - 52px);\r\n        min-width: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 4px;\r\n        overflow-x: auto;\r\n        overflow-y: hidden;\r\n        scroll-behavior: smooth;\r\n        scrollbar-width: none;\r\n        padding: 1px 0;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumbnails::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumb {\r\n        flex: 0 0 62px;\r\n        width: 62px;\r\n        min-width: 62px;\r\n        min-height: 75px;\r\n        height: 75px;\r\n        padding: 3px;\r\n        border: 1px solid var(--sp-border);\r\n        border-radius: 5px;\r\n        gap: 2px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumb.active {\r\n        border: 2px solid var(--sp-orange);\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumb-image {\r\n        width: 100%;\r\n        height: 45px;\r\n        min-height: 45px;\r\n        border-radius: 3px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumb-label {\r\n        font-size: 8px;\r\n        line-height: 1.05;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumb-part {\r\n        font-size: 7px;\r\n        line-height: 1;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumb-view {\r\n        font-size: 7px;\r\n        line-height: 1;\r\n    }\r\n\r\n    \/* PAGINATION *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-gallery-pagination {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        gap: 5px;\r\n        margin-top: 4px;\r\n        height: 7px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-page-dot {\r\n        width: 6px;\r\n        height: 6px;\r\n    }\r\n\r\n    \/* LENGTH TOGGLE *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-amp-toggle {\r\n        width: 240px;\r\n        max-width: 240px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-amp-btn {\r\n        min-width: 0;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    \/* LOCKED RESPONSIVE VIEWING FRAME *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-main-view {\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-gallery-slide {\r\n        height: 100%;\r\n        min-height: 0;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-main-product,\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap {\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    \/* LOCKED IMAGE FRAME: image swaps never change the reserved viewing area *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap img,\r\n    #sp-male-inlet-strain-relief-gallery .sp-main-image-clip > img {\r\n        flex-shrink: 0;\r\n    }\r\n\r\n}\r\n\/* =========================================================\r\n   CHANGE LOG \u2014 MOBILE RESPONSIVE FIX\r\n   =========================================================\r\n   1. Removed the mobile side-info minimum height that created\r\n      excessive empty space above the thumbnail strip.\r\n   2. Added a fixed mobile title area so different title lengths\r\n      do not make the controls appear at different levels.\r\n   3. Added a compact, fixed mobile controls area so the\r\n      configuration, current selection, part number, and\r\n      Full Screen button stay evenly aligned between variations.\r\n   4. Reduced the spacing between the Full Screen button and\r\n      the thumbnail strip.\r\n   5. Kept the mobile image viewing frame fixed so image swaps\r\n      do not change the gallery layout.\r\n   ========================================================= *\/\r\n\r\n\/* DESKTOP \u2014 KEEP THE EXISTING FIXED VIEWING FRAME *\/\r\n#sp-male-inlet-strain-relief-gallery .sp-main-view{height:430px;min-height:430px;}\r\n#sp-male-inlet-strain-relief-gallery .sp-gallery-slide{height:100%;min-height:430px;}\r\n#sp-male-inlet-strain-relief-gallery .sp-variant-layout{height:100%;min-height:0;}\r\n#sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap{height:400px;min-height:400px;flex:0 0 400px;}\r\n#sp-male-inlet-strain-relief-gallery .sp-side-info{min-height:220px;}\r\n#sp-male-inlet-strain-relief-gallery .sp-amp-toggle{min-height:30px;height:30px;}\r\n#sp-male-inlet-strain-relief-gallery .sp-fullscreen-trigger{display:inline-flex;position:static;margin-top:7px;margin-left:0;margin-right:auto;}\r\n\r\n\/* MOBILE \u2014 FIXED TITLE \/ IMAGE \/ CONTROLS SPACING *\/\r\n@media (max-width:767px){\r\n    #sp-male-inlet-strain-relief-gallery .sp-main-view{\r\n        height:auto;\r\n        min-height:0;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-gallery-slide{\r\n        height:auto;\r\n        min-height:0;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-layout{\r\n        height:auto;\r\n        min-height:0;\r\n    }\r\n\r\n    \/* Keep every variation on the same image viewing frame. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap{\r\n        height:auto;\r\n        min-height:0;\r\n        flex:0 0 auto;\r\n        aspect-ratio:5 \/ 3;\r\n    }\r\n\r\n    \/* Reserve the same title space for every variation. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-mobile-variant-title{\r\n        height:70px;\r\n        min-height:70px;\r\n        max-height:70px;\r\n        overflow:hidden;\r\n        display:block;\r\n    }\r\n\r\n    \/* Keep the product controls aligned at the same level. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info{\r\n        height:112px;\r\n        min-height: 112px;\r\n        max-height: 112px;\r\n        overflow:visible;\r\n        justify-content:flex-start;\r\n    }\r\n\r\n    \/* Keep the configuration label and buttons compact. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-amp-label{\r\n        margin:0 0 4px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-amp-toggle{\r\n        height:35px;\r\n        min-height:35px;\r\n        flex:0 0 35px;\r\n    }\r\n\r\n    \/* Tighten the information below the configuration buttons. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-current-amp{\r\n        margin:3px 0 0;\r\n        line-height:1.1;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-part-number{\r\n        margin:3px auto 0;\r\n        line-height:1.05;\r\n    }\r\n\r\n    \/* Keep the Full Screen button directly below the part number. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-fullscreen-trigger{\r\n        margin-top:5px;\r\n    }\r\n\r\n    \/* Reduce the gap between product details and thumbnails. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-product-selector{\r\n        margin-top:2px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-gallery-pagination{\r\n        margin-top:3px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumbnails{\r\n        justify-content:center;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\n   MOBILE LAYOUT \u2014 MATCH CONNECTOR VERSION\r\n   - 380px reserved gallery frame\r\n   - variant title group at the top\r\n   - variant product image centered in remaining space\r\n   - part number followed immediately by Full Screen button\r\n   - thumbnails remain at the bottom of the gallery flow\r\n   ========================================================= *\/\r\n@media (max-width: 767px) {\r\n    #sp-male-inlet-strain-relief-gallery .sp-main-view {\r\n        width: 100%;\r\n        height: 380px;\r\n        min-height: 380px;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-gallery-slide {\r\n        width: 100%;\r\n        height: 380px;\r\n        min-height: 380px;\r\n        display: none;\r\n        position: relative;\r\n        overflow: visible;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-gallery-slide.active {\r\n        display: flex;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-layout {\r\n        width: 100%;\r\n        height: 380px;\r\n        min-height: 380px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n        gap: 0;\r\n    }\r\n\r\n    \/* Title group stays at the very top. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-mobile-variant-title {\r\n        display: block;\r\n        width: 100%;\r\n        min-height: 70px;\r\n        height: 70px;\r\n        padding: 0 8px;\r\n        text-align: center;\r\n        order: 1;\r\n        margin: 0;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-mobile-variant-title .sp-slide-title {\r\n        margin: 2px 0 0;\r\n        font-size: 23px;\r\n        line-height: .95;\r\n        letter-spacing: .8px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-mobile-variant-title .sp-slide-subtitle {\r\n        margin: 3px 0 0;\r\n        font-size: 10px;\r\n        line-height: 1.2;\r\n    }\r\n\r\n    \/* Product image uses the remaining middle space and stays centered. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap {\r\n        width: 100%;\r\n        height: auto;\r\n        aspect-ratio: auto;\r\n        min-height: 0;\r\n        flex: 1 1 auto;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        order: 2;\r\n        position: relative;\r\n        overflow: visible;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-variant-image-wrap img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n        display: block;\r\n        transform:\r\n            translate(var(--image-x-mobile), var(--image-y-mobile))\r\n            scale(var(--image-scale-mobile));\r\n        transform-origin: center center;\r\n        transition: opacity .16s ease, transform .18s ease;\r\n    }\r\n\r\n    \/* Part number + Full Screen live together at the bottom of the 380px frame. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info {\r\n        width: 100%;\r\n        max-width: 100%;\r\n        height: 45px;\r\n        min-height: 45px;\r\n        padding: 0;\r\n        margin: 0;\r\n        text-align: center;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n        gap: 0;\r\n        order: 3;\r\n        flex: 0 0 45px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-slide-title,\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-slide-subtitle {\r\n        display: none;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-part-number {\r\n        display: inline-block;\r\n        margin: 2px auto 0;\r\n        padding: 0;\r\n        color: #555;\r\n        font-size: 8px;\r\n        letter-spacing: .4px;\r\n        text-align: center;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-side-info .sp-fullscreen-trigger {\r\n        display: inline-flex;\r\n        position: static;\r\n        margin: 6px auto 0;\r\n        transform: none;\r\n        font-size: 8px;\r\n        padding: 6px 10px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\r\n        display: none;\r\n    }\r\n\r\n    \/* Keep feature\/fullscreen title controls from changing the reserved frame. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-main-product {\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    \/* Thumbnail strip stays after the fixed 380px main frame. *\/\r\n    #sp-male-inlet-strain-relief-gallery .sp-product-selector {\r\n        width: 100%;\r\n        margin-top: 7px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        position: relative;\r\n        gap: 0;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumbnails {\r\n        flex: 0 0 auto;\r\n        width: auto;\r\n        max-width: calc(100% - 52px);\r\n        min-width: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 4px;\r\n        overflow-x: auto;\r\n        overflow-y: hidden;\r\n        scroll-behavior: smooth;\r\n        scrollbar-width: none;\r\n        padding: 1px 0;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumbnails::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumb-nav {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        z-index: 3;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumb-prev { left: 0; }\r\n    #sp-male-inlet-strain-relief-gallery .sp-thumb-next { right: 0; }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-gallery-pagination {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        gap: 5px;\r\n        margin-top: 4px;\r\n        height: 7px;\r\n    }\r\n\r\n    #sp-male-inlet-strain-relief-gallery .sp-page-dot {\r\n        width: 6px;\r\n        height: 6px;\r\n    }\r\n}\r\n<\/style>\r\n<script>\r\n(function () {\r\n    \/*\r\n     * RESPONSIVE HOTSPOT ARCHITECTURE:\r\n     * - Each hotspot has one canonical --top\/--left anchor.\r\n     * - The anchor is mapped to the actual rendered object-fit image.\r\n     * - The image's responsive scale\/X\/Y settings are preserved.\r\n     * - The computed pixel coordinates are recalculated on load, resize,\r\n     *   orientation changes, image load, and observed container changes.\r\n     *\/\r\n    function initSmartPlugDualCordsetGallery() {\r\n        const gallery = document.getElementById(\"sp-male-inlet-strain-relief-gallery\");\r\n        if (!gallery || gallery.dataset.initialized === \"true\") return;\r\n        gallery.dataset.initialized = \"true\";\r\n\r\n        const slides = gallery.querySelectorAll(\".sp-gallery-slide\");\r\n        const thumbs = gallery.querySelectorAll(\".sp-thumb\");\r\n        const hotspots = gallery.querySelectorAll(\".sp-hotspot\");\r\n        const pageDots = gallery.querySelectorAll(\".sp-page-dot\");\r\n        const variantSlides = gallery.querySelectorAll(\".sp-variant-slide\");\r\n        const thumbnailContainer = gallery.querySelector(\".sp-thumbnails\");\r\n        const thumbPrev = gallery.querySelector(\".sp-thumb-prev\");\r\n        const thumbNext = gallery.querySelector(\".sp-thumb-next\");\r\n\r\n        if (!slides.length || !thumbs.length) return;\r\n\r\n        let currentIndex = 0;\r\n\r\n        \/* =========================================================\r\n           FEATURE HOTSPOT RESPONSIVE SYNC\r\n           Follow the Angled RV 50A method: calculate the actual\r\n           rendered image rectangle (including object-fit + scale),\r\n           then place each hotspot relative to that rectangle.\r\n           This keeps the numbered points attached to the product\r\n           across desktop, laptop, tablet, and mobile.\r\n           ========================================================= *\/\r\n        function syncFeatureHotspots() {\r\n            const featureSlide = slides[0];\r\n            if (!featureSlide) return;\r\n\r\n            const imageWrap = featureSlide.querySelector(\r\n                \".sp-main-product.sp-hotspot-image\"\r\n            );\r\n\r\n            const imageClip = featureSlide.querySelector(\r\n                \".sp-main-image-clip\"\r\n            );\r\n\r\n            const image = featureSlide.querySelector(\r\n                \".sp-main-image-clip > img\"\r\n            );\r\n\r\n            const featureHotspots = featureSlide.querySelectorAll(\r\n                \".sp-hotspot\"\r\n            );\r\n\r\n            if (!imageWrap || !imageClip || !image || !featureHotspots.length) return;\r\n            if (!image.naturalWidth || !image.naturalHeight) return;\r\n\r\n            const clipRect = imageClip.getBoundingClientRect();\r\n            if (!clipRect.width || !clipRect.height) return;\r\n\r\n            const viewportWidth = window.innerWidth;\r\n            let responsiveMode = \"desktop\";\r\n\r\n            if (viewportWidth <= 767) {\r\n                responsiveMode = \"mobile\";\r\n            } else if (viewportWidth <= 1024) {\r\n                responsiveMode = \"tablet\";\r\n            } else if (viewportWidth <= 1366) {\r\n                responsiveMode = \"laptop\";\r\n            }\r\n\r\n            \/*\r\n             * This product stores its image scale\/X\/Y variables on the\r\n             * .sp-main-product wrapper. Read them from there so the\r\n             * calculation matches the actual CSS transform applied to\r\n             * the image.\r\n             *\/\r\n            const scale = parseFloat(\r\n                imageWrap.style.getPropertyValue(\r\n                    \"--image-scale-\" + responsiveMode\r\n                )\r\n            ) || 1;\r\n\r\n            const x = parseFloat(\r\n                imageWrap.style.getPropertyValue(\r\n                    \"--image-x-\" + responsiveMode\r\n                )\r\n            ) || 0;\r\n\r\n            const y = parseFloat(\r\n                imageWrap.style.getPropertyValue(\r\n                    \"--image-y-\" + responsiveMode\r\n                )\r\n            ) || 0;\r\n\r\n            const imageRatio =\r\n                image.naturalWidth \/ image.naturalHeight;\r\n\r\n            const boxRatio =\r\n                clipRect.width \/ clipRect.height;\r\n\r\n            let renderedWidth;\r\n            let renderedHeight;\r\n\r\n            if (imageRatio > boxRatio) {\r\n                renderedWidth = clipRect.width;\r\n                renderedHeight = clipRect.width \/ imageRatio;\r\n            } else {\r\n                renderedHeight = clipRect.height;\r\n                renderedWidth = clipRect.height * imageRatio;\r\n            }\r\n\r\n            renderedWidth *= scale;\r\n            renderedHeight *= scale;\r\n\r\n            const renderedLeft =\r\n                clipRect.left +\r\n                (clipRect.width - renderedWidth) \/ 2 +\r\n                x;\r\n\r\n            const renderedTop =\r\n                clipRect.top +\r\n                (clipRect.height - renderedHeight) \/ 2 +\r\n                y;\r\n\r\n            const wrapRect = imageWrap.getBoundingClientRect();\r\n\r\n            featureHotspots.forEach(function (hotspot) {\r\n                \/* One canonical hotspot anchor; no mobile\/tablet\/laptop\r\n                   hotspot coordinates are required. *\/\r\n                const top = parseFloat(\r\n                    hotspot.style.getPropertyValue(\"--top\")\r\n                );\r\n\r\n                const left = parseFloat(\r\n                    hotspot.style.getPropertyValue(\"--left\")\r\n                );\r\n\r\n                const hotspotX = parseFloat(\r\n                    hotspot.style.getPropertyValue(\"--hotspot-x\")\r\n                ) || 0;\r\n\r\n                const hotspotY = parseFloat(\r\n                    hotspot.style.getPropertyValue(\"--hotspot-y\")\r\n                ) || 0;\r\n\r\n                if (!Number.isFinite(top) || !Number.isFinite(left)) return;\r\n\r\n                const hotspotLeft =\r\n                    renderedLeft - wrapRect.left +\r\n                    (renderedWidth * left \/ 100) +\r\n                    hotspotX;\r\n\r\n                const hotspotTop =\r\n                    renderedTop - wrapRect.top +\r\n                    (renderedHeight * top \/ 100) +\r\n                    hotspotY;\r\n\r\n                hotspot.style.setProperty(\r\n                    \"--sp-hotspot-left-px\",\r\n                    hotspotLeft + \"px\"\r\n                );\r\n\r\n                hotspot.style.setProperty(\r\n                    \"--sp-hotspot-top-px\",\r\n                    hotspotTop + \"px\"\r\n                );\r\n            });\r\n        }\r\n\r\n        let hotspotFrame = null;\r\n\r\n        function scheduleFeatureHotspotSync() {\r\n            if (hotspotFrame) cancelAnimationFrame(hotspotFrame);\r\n\r\n            hotspotFrame = requestAnimationFrame(function () {\r\n                hotspotFrame = null;\r\n                syncFeatureHotspots();\r\n            });\r\n        }\r\n\r\n        function showSlide(index) {\r\n            if (index < 0) index = slides.length - 1;\r\n            if (index >= slides.length) index = 0;\r\n\r\n            slides.forEach(function (slide, i) {\r\n                slide.classList.toggle(\"active\", i === index);\r\n            });\r\n\r\n            thumbs.forEach(function (thumb) {\r\n                const target = parseInt(thumb.getAttribute(\"data-target\"), 10);\r\n                thumb.classList.toggle(\"active\", target === index);\r\n            });\r\n\r\n            pageDots.forEach(function (dot, i) {\r\n                dot.classList.toggle(\"active\", i === index);\r\n            });\r\n\r\n            currentIndex = index;\r\n\r\n            if (index === 0) {\r\n                updateFeatureText();\r\n            } else {\r\n                const activeVariant = slides[index];\r\n                if (activeVariant) {\r\n                    updateVariantText(activeVariant, activeVariant.dataset.currentView || activeVariant.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || activeVariant.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\");\r\n                }\r\n            }\r\n\r\n            const activeThumb = Array.from(thumbs).find(function (thumb) {\r\n                return parseInt(thumb.getAttribute(\"data-target\"), 10) === index;\r\n            });\r\n\r\n            if (activeThumb && thumbnailContainer) {\r\n                const left = activeThumb.offsetLeft;\r\n                const right = left + activeThumb.offsetWidth;\r\n                const viewLeft = thumbnailContainer.scrollLeft;\r\n                const viewRight = viewLeft + thumbnailContainer.clientWidth;\r\n\r\n                if (left < viewLeft || right > viewRight) {\r\n                    thumbnailContainer.scrollTo({\r\n                        left: left - (thumbnailContainer.clientWidth \/ 2) + (activeThumb.offsetWidth \/ 2),\r\n                        behavior: \"smooth\"\r\n                    });\r\n                }\r\n            }\r\n\r\n            hotspots.forEach(function (hotspot) {\r\n                hotspot.classList.remove(\"is-open\");\r\n            });\r\n        }\r\n\r\n        thumbs.forEach(function (thumb) {\r\n            thumb.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n\r\n                const target = parseInt(thumb.getAttribute(\"data-target\"), 10);\r\n                if (!isNaN(target)) showSlide(target);\r\n            });\r\n        });\r\n\r\n        pageDots.forEach(function (dot) {\r\n            dot.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n\r\n                const target = parseInt(dot.getAttribute(\"data-page\"), 10);\r\n                if (!isNaN(target)) showSlide(target);\r\n            });\r\n        });\r\n\r\n        function scrollThumbnailStrip(direction) {\r\n            if (!thumbnailContainer || !window.matchMedia(\"(max-width: 600px)\").matches) return;\r\n\r\n            const items = Array.from(thumbnailContainer.querySelectorAll(\".sp-thumb\"));\r\n            if (!items.length) return;\r\n\r\n            let activeIndex = items.findIndex(function (thumb) {\r\n                return thumb.classList.contains(\"active\");\r\n            });\r\n\r\n            if (activeIndex < 0) activeIndex = 0;\r\n\r\n            let targetIndex = activeIndex + (direction > 0 ? 1 : -1);\r\n            if (targetIndex < 0) targetIndex = items.length - 1;\r\n            if (targetIndex >= items.length) targetIndex = 0;\r\n\r\n            items[targetIndex].click();\r\n            items[targetIndex].scrollIntoView({\r\n                behavior: \"smooth\",\r\n                block: \"nearest\",\r\n                inline: \"center\"\r\n            });\r\n        }\r\n\r\n        if (thumbPrev) {\r\n            thumbPrev.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n                scrollThumbnailStrip(-1);\r\n            });\r\n        }\r\n\r\n        if (thumbNext) {\r\n            thumbNext.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n                scrollThumbnailStrip(1);\r\n            });\r\n        }\r\n\r\n        hotspots.forEach(function (hotspot) {\r\n            hotspot.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n\r\n                const isOpen = hotspot.classList.contains(\"is-open\");\r\n\r\n                hotspots.forEach(function (item) {\r\n                    item.classList.remove(\"is-open\");\r\n                });\r\n\r\n                if (!isOpen) hotspot.classList.add(\"is-open\");\r\n            });\r\n        });\r\n\r\n        document.addEventListener(\"click\", function (event) {\r\n            if (!gallery.contains(event.target)) {\r\n                hotspots.forEach(function (hotspot) {\r\n                    hotspot.classList.remove(\"is-open\");\r\n                });\r\n            }\r\n        });\r\n\r\n        \/* =================================================\r\n           ================================================= *\/\r\n\r\n        function getViewDataAttributeName(view, field) {\r\n            if (!view) return \"data-\" + field;\r\n            return \"data-\" + view.replace(\/\\s+\/g, \"-\") + \"-\" + field;\r\n        }\r\n\r\n        function getViewCopy(slide, view) {\r\n            if (!slide) {\r\n                return {\r\n                    title: \"\",\r\n                    subtitle: \"\",\r\n                    partNumber: \"\"\r\n                };\r\n            }\r\n\r\n            const variationView = view || \"\";\r\n            const isVariation = slide.classList.contains(\"sp-variant-slide\");\r\n\r\n            if (isVariation && variationView) {\r\n                return {\r\n                    title: slide.getAttribute(getViewDataAttributeName(variationView, \"title\")) || \"\",\r\n                    subtitle: slide.getAttribute(getViewDataAttributeName(variationView, \"subtitle\")) || \"\",\r\n                    partNumber: slide.getAttribute(getViewDataAttributeName(variationView, \"part-number\")) || \"\"\r\n                };\r\n            }\r\n\r\n            return {\r\n                title: slide.getAttribute(\"data-title\") || \"\",\r\n                subtitle: slide.getAttribute(\"data-subtitle\") || \"\",\r\n                partNumber: slide.getAttribute(\"data-part-number\") || \"\"\r\n            };\r\n        }\r\n\r\n        function updateVariantText(slide, view) {\r\n            const copy = getViewCopy(slide, view);\r\nconst mobileTitle = slide.querySelector(\".sp-mobile-variant-title .sp-slide-title\");\r\n            const mobileSubtitle = slide.querySelector(\".sp-mobile-variant-title .sp-slide-subtitle\");\r\nconst desktopTitle = slide.querySelector(\".sp-side-info .sp-slide-title\");\r\n            const desktopSubtitle = slide.querySelector(\".sp-side-info .sp-slide-subtitle\");\r\n            const partNumber = slide.querySelector(\".sp-part-number-value\");\r\nif (mobileTitle) mobileTitle.textContent = copy.title;\r\n            if (mobileSubtitle) mobileSubtitle.textContent = copy.subtitle;\r\nif (desktopTitle) desktopTitle.textContent = copy.title;\r\n            if (desktopSubtitle) desktopSubtitle.textContent = copy.subtitle;\r\n            if (partNumber) partNumber.textContent = copy.partNumber;\r\n        }\r\n\r\n        function updateFeatureText() {\r\n            const featureSlide = slides[0];\r\n            if (!featureSlide) return;\r\n\r\n            const copy = getViewCopy(featureSlide, \"\");\r\nconst title = featureSlide.querySelector(\".sp-slide-info .sp-slide-title\");\r\n            const subtitle = featureSlide.querySelector(\".sp-slide-info .sp-slide-subtitle\");\r\n            const partNumber = featureSlide.querySelector(\".sp-part-number-value\");\r\nif (title) title.textContent = copy.title;\r\n            if (subtitle) subtitle.textContent = copy.subtitle;\r\n            if (partNumber) partNumber.textContent = copy.partNumber;\r\n        }\r\n\r\n        \/* =================================================\r\n           VARIATION TOGGLE\r\n           ================================================= *\/\r\n\r\n        variantSlides.forEach(function (slide) {\r\n            const image = slide.querySelector(\".sp-variant-image\");\r\n            const viewButtons = slide.querySelectorAll(\".sp-amp-btn\");\r\n            const currentView = slide.querySelector(\".sp-current-amp\");\r\n\r\n            if (!image) return;\r\n\r\n            slide.dataset.currentView = \"30A\";\r\n\r\n            function updateImage() {\r\n                const view = slide.dataset.currentView || \"\";\r\n                const source = slide.getAttribute(\"data-\" + view) || \"\";\r\n                updateVariantText(slide, view);\r\n\r\n                image.style.opacity = \"0\";\r\n\r\n                window.setTimeout(function () {\r\n                    if (source) {\r\n                        image.src = source;\r\n                        image.classList.remove(\"is-empty\");\r\n                    } else {\r\n                        image.removeAttribute(\"src\");\r\n                        image.classList.add(\"is-empty\");\r\n                    }\r\n\r\n                    image.style.opacity = \"1\";\r\n\r\n                    if (fullscreenModal.classList.contains(\"is-open\")) {\r\n                        refreshFullscreenModal();\r\n                    }\r\n                }, 90);\r\n\r\n                viewButtons.forEach(function (button) {\r\n                    button.classList.toggle(\r\n                        \"active\",\r\n                        button.getAttribute(\"data-view\") === view\r\n                    );\r\n                });\r\n\r\n                if (currentView) {\r\n                    currentView.innerHTML = \"Showing <strong>\" + view + \"<\/strong>\";\r\n                }\r\n            }\r\n\r\n            function setView(view) {\r\n                slide.dataset.currentView = view || \"\";\r\n                updateImage();\r\n            }\r\n\r\n            slide._setView = setView;\r\n\r\n            viewButtons.forEach(function (button) {\r\n                button.addEventListener(\"click\", function (event) {\r\n                    event.preventDefault();\r\n                    event.stopPropagation();\r\n                    setView(button.getAttribute(\"data-view\"));\r\n                });\r\n            });\r\n\r\n            \/* Initialize every variation to its first configured image. *\/\r\n            setView(\"30A\");\r\n        });\r\n\r\n        \/* =================================================\r\n           VIEW FULL SCREEN + HOVER ZOOM\r\n           ================================================= *\/\r\n           \r\n        const fullscreenModal = document.createElement(\"div\");\r\n        fullscreenModal.className = \"sp-fullscreen-modal\";\r\n        fullscreenModal.setAttribute(\"aria-hidden\", \"true\");\r\n        fullscreenModal.innerHTML = `\r\n            <div class=\"sp-fullscreen-dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Product full screen view\">\r\n                <button type=\"button\" class=\"sp-fullscreen-close\" aria-label=\"Close full screen\">&times;<\/button>\r\n                <div class=\"sp-fullscreen-image-area\">\r\n                    <img class=\"sp-fullscreen-image\" alt=\"\">\r\n                <\/div>\r\n                <div class=\"sp-fullscreen-info\">\r\n                    <div class=\"sp-fullscreen-title\"><\/div>\r\n                    <div class=\"sp-fullscreen-description\"><\/div>\r\n                    <div class=\"sp-fullscreen-part-number\">PART NUMBER: <strong class=\"sp-fullscreen-part-number-value\"><\/strong><\/div>\r\n                    <div class=\"sp-fullscreen-amp-wrap\">\r\n                        <div class=\"sp-fullscreen-amp-label\">SELECT CONFIGURATION<\/div>\r\n                        <div class=\"sp-fullscreen-amp-toggle\" role=\"group\" aria-label=\"Fullscreen product length\">\r\n                            <button type=\"button\" class=\"sp-fullscreen-amp-btn active\" data-view=\"\">30A<\/button>\r\n                            <button type=\"button\" class=\"sp-fullscreen-amp-btn\" data-view=\"\"><\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"sp-fullscreen-thumbnails\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n\r\n        gallery.appendChild(fullscreenModal);\r\n\r\n        const fullscreenImage = fullscreenModal.querySelector(\".sp-fullscreen-image\");\r\nconst fullscreenTitle = fullscreenModal.querySelector(\".sp-fullscreen-title\");\r\n        const fullscreenDescription = fullscreenModal.querySelector(\".sp-fullscreen-description\");\r\n        const fullscreenPartNumber = fullscreenModal.querySelector(\".sp-fullscreen-part-number-value\");\r\n        const fullscreenViewWrap = fullscreenModal.querySelector(\".sp-fullscreen-amp-wrap\");\r\n        const fullscreenViewButtons = fullscreenModal.querySelectorAll(\".sp-fullscreen-amp-btn\");\r\n        const fullscreenThumbs = fullscreenModal.querySelector(\".sp-fullscreen-thumbnails\");\r\n        const fullscreenClose = fullscreenModal.querySelector(\".sp-fullscreen-close\");\r\n\r\n        \/* =================================================\r\n           FEATURE IMAGE \u2014 NORMAL VIEW \/ FULL SCREEN VIEW\r\n           Normal view and full screen use separate images.\r\n           ================================================= *\/\r\n        const FEATURE_FULLSCREEN_IMAGE = \"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/07\/SmartPlug-Male-Inlet-Connector-Strain-Relief.avif\";\r\n\r\n        function getActiveGalleryImage() {\r\n            const activeSlide = slides[currentIndex];\r\n            if (!activeSlide) return null;\r\n\r\n            if (currentIndex === 0) {\r\n                return activeSlide.querySelector(\".sp-main-image-clip img\");\r\n            }\r\n\r\n            return activeSlide.querySelector(\".sp-variant-image\");\r\n        }\r\n\r\n        function getActiveGalleryCopy() {\r\n            const activeSlide = slides[currentIndex];\r\n            if (!activeSlide) {\r\n                return {\r\n                    title: \"\",\r\n                    description: \"\",\r\n                    partNumber: \"\"\r\n                };\r\n            }\r\n\r\n            const view = activeSlide.classList.contains(\"sp-variant-slide\")\r\n                ? (activeSlide.dataset.currentView || activeSlide.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || activeSlide.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\")\r\n                : \"\";\r\n\r\n            const copy = getViewCopy(activeSlide, view);\r\n\r\n            return {\r\n                title: copy.title,\r\n                description: copy.subtitle,\r\n                partNumber: copy.partNumber\r\n            };\r\n        }\r\n\r\n        function applyFullscreenSettings() {\r\n            const dialog = fullscreenModal.querySelector(\".sp-fullscreen-dialog\");\r\n            if (!dialog) return;\r\n\r\n            dialog.style.setProperty(\"--sp-popup-width-desktop\", \"1100px\");\r\n            dialog.style.setProperty(\"--sp-popup-height-desktop\", \"520px\");\r\n            dialog.style.setProperty(\"--sp-popup-width-mobile\", \"calc(100vw - 16px)\");\r\n            dialog.style.setProperty(\"--sp-popup-height-mobile\", \"90vh\");\r\n            dialog.style.setProperty(\"--sp-popup-image-area-height-mobile\", \"54vh\");\r\n\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-width-desktop\", \"100%\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-height-desktop\", \"100%\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-x-desktop\", \"0px\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-y-desktop\", \"0px\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-width-mobile\", \"100%\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-height-mobile\", \"100%\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-x-mobile\", \"0px\");\r\n            fullscreenImage.style.setProperty(\"--sp-popup-image-y-mobile\", \"0px\");\r\n        }\r\n\r\n        function refreshFullscreenModal() {\r\n            const activeImage = getActiveGalleryImage();\r\n            if (!activeImage || !activeImage.src) return;\r\n\r\n            const copy = getActiveGalleryCopy();\r\n            const activeSlide = slides[currentIndex];\r\n            const isVariation = currentIndex >= 1 && activeSlide;\r\n            const view = isVariation\r\n                ? (activeSlide.dataset.currentView || activeSlide.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || activeSlide.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\")\r\n                : \"\";\r\n\r\n            const viewImage = isVariation\r\n                ? (activeSlide.getAttribute(\"data-\" + view) || \"\")\r\n                : FEATURE_FULLSCREEN_IMAGE;\r\n\r\n            applyFullscreenSettings();\r\n\r\n            fullscreenImage.src = viewImage || activeImage.currentSrc || activeImage.src;\r\n            fullscreenImage.alt = copy.title || activeImage.alt || \"\";\r\nfullscreenTitle.textContent = copy.title || \"\";\r\n            fullscreenDescription.textContent = copy.description || \"\";\r\n\r\n            \/* The Feature slide does not have a part number.\r\n               Variation slides keep their part numbers. *\/\r\n            if (fullscreenPartNumber) {\r\n                fullscreenPartNumber.textContent = isVariation ? (copy.partNumber || \"\") : \"\";\r\n                fullscreenPartNumber.parentElement.style.display = isVariation ? \"\" : \"none\";\r\n            }\r\n\r\n            fullscreenViewWrap.classList.toggle(\"is-visible\", !!isVariation);\r\n\r\n            if (isVariation) {\r\n                const activeButtons = Array.from(activeSlide.querySelectorAll(\".sp-amp-btn\"));\r\n                fullscreenViewButtons.forEach(function (button, index) {\r\n                    const sourceButton = activeButtons[index];\r\n                    if (sourceButton) {\r\n                        button.setAttribute(\"data-view\", sourceButton.getAttribute(\"data-view\") || \"\");\r\n                        button.textContent = sourceButton.textContent.trim();\r\n                    }\r\n                });\r\n            }\r\n\r\n            fullscreenViewButtons.forEach(function (button) {\r\n                const buttonView = button.getAttribute(\"data-view\");\r\n                button.classList.toggle(\"active\", buttonView === view);\r\n                button.disabled = !isVariation;\r\n            });\r\n\r\n            fullscreenThumbs.innerHTML = \"\";\r\n\r\n            thumbs.forEach(function (thumb) {\r\n                const sourceImage = thumb.querySelector(\"img\");\r\n                if (!sourceImage) return;\r\n\r\n                const modalThumb = document.createElement(\"button\");\r\n                modalThumb.type = \"button\";\r\n                modalThumb.className = \"sp-fullscreen-thumb\";\r\n                modalThumb.setAttribute(\"aria-label\", thumb.getAttribute(\"aria-label\") || \"View product image\");\r\n\r\n                const modalThumbImage = document.createElement(\"img\");\r\n                modalThumbImage.src = sourceImage.currentSrc || sourceImage.src;\r\n                modalThumbImage.alt = sourceImage.alt || \"\";\r\n                modalThumb.appendChild(modalThumbImage);\r\n\r\n                const thumbTarget = parseInt(thumb.getAttribute(\"data-target\"), 10);\r\n                if (thumbTarget === currentIndex) modalThumb.classList.add(\"active\");\r\n\r\n                modalThumb.addEventListener(\"click\", function (event) {\r\n                    event.preventDefault();\r\n                    event.stopPropagation();\r\n\r\n                    showSlide(thumbTarget);\r\n                    window.setTimeout(refreshFullscreenModal, 110);\r\n                });\r\n\r\n                fullscreenThumbs.appendChild(modalThumb);\r\n            });\r\n        }\r\n\r\n        fullscreenViewButtons.forEach(function (button) {\r\n            button.addEventListener(\"click\", function (event) {\r\n                event.preventDefault();\r\n                event.stopPropagation();\r\n\r\n                if (!fullscreenModal.classList.contains(\"is-open\")) return;\r\n\r\n                const activeSlide = slides[currentIndex];\r\n                if (!activeSlide || currentIndex < 1) return;\r\n\r\n                if (typeof activeSlide._setView === \"function\") {\r\n                    activeSlide._setView(button.getAttribute(\"data-view\"));\r\n                    window.setTimeout(refreshFullscreenModal, 110);\r\n                }\r\n            });\r\n        });\r\n\r\n        let fullscreenScrollTop = 0;\r\n        let fullscreenScrollLeft = 0;\r\n        let fullscreenBodyPaddingRight = \"\";\r\n\r\n        function openFullscreenModal() {\r\n            refreshFullscreenModal();\r\n\r\n            fullscreenScrollTop = window.scrollY || window.pageYOffset || 0;\r\n            fullscreenScrollLeft = window.scrollX || window.pageXOffset || 0;\r\n            fullscreenBodyPaddingRight = document.body.style.paddingRight;\r\n\r\n            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\r\n            if (scrollbarWidth > 0) {\r\n                document.body.style.paddingRight = scrollbarWidth + \"px\";\r\n            }\r\n\r\n            fullscreenModal.classList.add(\"is-open\");\r\n            fullscreenModal.setAttribute(\"aria-hidden\", \"false\");\r\n            document.body.style.overflow = \"hidden\";\r\n        }\r\n\r\n        function closeFullscreenModal() {\r\n            fullscreenModal.classList.remove(\"is-open\");\r\n            fullscreenModal.setAttribute(\"aria-hidden\", \"true\");\r\n            document.body.style.overflow = \"\";\r\n            document.body.style.paddingRight = fullscreenBodyPaddingRight;\r\n\r\n            window.scrollTo({\r\n                top: fullscreenScrollTop,\r\n                left: fullscreenScrollLeft,\r\n                behavior: \"auto\"\r\n            });\r\n        }\r\n\r\n        fullscreenClose.addEventListener(\"click\", function (event) {\r\n            event.preventDefault();\r\n            closeFullscreenModal();\r\n        });\r\n\r\n        fullscreenModal.addEventListener(\"click\", function (event) {\r\n            if (event.target === fullscreenModal) closeFullscreenModal();\r\n        });\r\n\r\n        document.addEventListener(\"keydown\", function (event) {\r\n            if (event.key === \"Escape\" && fullscreenModal.classList.contains(\"is-open\")) {\r\n                closeFullscreenModal();\r\n            }\r\n        });\r\n\r\n        function addFullscreenButtons() {\r\n            const featureWrap = gallery.querySelector(\".sp-main-product\");\r\n\r\n            if (featureWrap && !featureWrap.closest(\".sp-gallery-slide\").querySelector(\".sp-fullscreen-trigger\")) {\r\n                const button = document.createElement(\"button\");\r\n                button.type = \"button\";\r\n                button.className = \"sp-fullscreen-trigger\";\r\n                button.textContent = \"VIEW FULL SCREEN\";\r\n                button.addEventListener(\"click\", function (event) {\r\n                    event.preventDefault();\r\n                    event.stopPropagation();\r\n                    openFullscreenModal();\r\n                });\r\n\r\n                const featureInfo = featureWrap.closest(\".sp-gallery-slide\").querySelector(\".sp-slide-info\");\r\n                if (featureInfo) {\r\n                    featureInfo.appendChild(button);\r\n                } else {\r\n                    featureWrap.appendChild(button);\r\n                }\r\n            }\r\n\r\n            variantSlides.forEach(function (slide) {\r\n                const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\r\n                if (!imageWrap || slide.querySelector(\".sp-fullscreen-trigger\")) return;\r\n\r\n                const button = document.createElement(\"button\");\r\n                button.type = \"button\";\r\n                button.className = \"sp-fullscreen-trigger\";\r\n                button.textContent = \"VIEW FULL SCREEN\";\r\n                button.addEventListener(\"click\", function (event) {\r\n                    event.preventDefault();\r\n                    event.stopPropagation();\r\n                    openFullscreenModal();\r\n                });\r\n\r\n                const sideInfo = slide.querySelector(\".sp-side-info\");\r\n\r\n                if (sideInfo) {\r\n                    const partNumber = sideInfo.querySelector(\".sp-part-number\");\r\n                    if (partNumber) {\r\n                        partNumber.insertAdjacentElement(\"afterend\", button);\r\n                    } else {\r\n                        sideInfo.appendChild(button);\r\n                    }\r\n                } else {\r\n                    imageWrap.appendChild(button);\r\n                }\r\n            });\r\n        }\r\n\r\n        function setupHoverZoom() {\r\n            variantSlides.forEach(function (slide) {\r\n                const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\r\n                const image = slide.querySelector(\".sp-variant-image\");\r\n                if (!imageWrap || !image || imageWrap.dataset.zoomInitialized === \"true\") return;\r\n\r\n                imageWrap.dataset.zoomInitialized = \"true\";\r\n\r\n                const preview = document.createElement(\"div\");\r\n                preview.className = \"sp-zoom-preview\";\r\n\r\n                const previewImage = document.createElement(\"img\");\r\n                previewImage.alt = \"\";\r\n                preview.appendChild(previewImage);\r\n                imageWrap.appendChild(preview);\r\n\r\n                function syncPreviewImage() {\r\n                    const source = image.currentSrc || image.src;\r\n                    if (source) previewImage.src = source;\r\n                }\r\n\r\n                image.addEventListener(\"load\", syncPreviewImage);\r\n                syncPreviewImage();\r\n\r\n                imageWrap.addEventListener(\"mouseenter\", function () {\r\n                    syncPreviewImage();\r\n                    imageWrap.classList.add(\"sp-zoom-active\");\r\n                });\r\n\r\n                imageWrap.addEventListener(\"mouseleave\", function () {\r\n                    imageWrap.classList.remove(\"sp-zoom-active\");\r\n                });\r\n\r\n                imageWrap.addEventListener(\"mousemove\", function (event) {\r\n                    if (window.innerWidth <= 600) return;\r\n\r\n                    const rect = imageWrap.getBoundingClientRect();\r\n                    const x = Math.max(0, Math.min(1, (event.clientX - rect.left) \/ rect.width));\r\n                    const y = Math.max(0, Math.min(1, (event.clientY - rect.top) \/ rect.height));\r\n\r\n                    previewImage.style.left = (-x * 100) + \"%\";\r\n                    previewImage.style.top = (-y * 100) + \"%\";\r\n                });\r\n            });\r\n        }\r\n\r\n        addFullscreenButtons();\r\n        setupHoverZoom();\r\n\r\n        \/* WooCommerce variation compatibility *\/\r\n        if (window.jQuery) {\r\n            jQuery(document).on(\r\n                \"found_variation.spDualCordsetGallery\",\r\n                \"form.variations_form\",\r\n                function (event, variation) {\r\n                    if (!variation || !variation.image || !variation.image.src) return;\r\n\r\n                    const variationImage = variation.image.src;\r\n\r\n                    thumbs.forEach(function (thumb, index) {\r\n                        const image = thumb.querySelector(\"img\");\r\n                        if (!image) return;\r\n\r\n                        const thumbImage = image.currentSrc || image.src;\r\n\r\n                        if (\r\n                            thumbImage === variationImage ||\r\n                            thumbImage.includes(variationImage) ||\r\n                            variationImage.includes(thumbImage)\r\n                        ) {\r\n                            showSlide(index);\r\n                        }\r\n                    });\r\n                }\r\n            );\r\n        }\r\n\r\n        showSlide(0);\r\n\r\n        const featureImage = slides[0]?.querySelector(\".sp-main-image-clip > img\");\r\n\r\n        if (featureImage) {\r\n            if (featureImage.complete) {\r\n                scheduleFeatureHotspotSync();\r\n            } else {\r\n                featureImage.addEventListener(\"load\", scheduleFeatureHotspotSync);\r\n            }\r\n        }\r\n\r\n        window.addEventListener(\"resize\", scheduleFeatureHotspotSync);\r\n        window.addEventListener(\"orientationchange\", scheduleFeatureHotspotSync);\r\n\r\n        if (window.ResizeObserver) {\r\n            const observer = new ResizeObserver(scheduleFeatureHotspotSync);\r\n            const clip = slides[0]?.querySelector(\".sp-main-image-clip\");\r\n            const imageWrap = slides[0]?.querySelector(\".sp-main-product.sp-hotspot-image\");\r\n\r\n            if (clip) observer.observe(clip);\r\n            if (imageWrap && imageWrap !== clip) observer.observe(imageWrap);\r\n        }\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n        document.addEventListener(\"DOMContentLoaded\", initSmartPlugDualCordsetGallery);\r\n    } else {\r\n        initSmartPlugDualCordsetGallery();\r\n    }\r\n\r\n    if (window.jQuery) {\r\n        jQuery(window).on(\"elementor\/frontend\/init\", function () {\r\n            setTimeout(initSmartPlugDualCordsetGallery, 150);\r\n        });\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8fd309a e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"8fd309a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f404ad elementor-widget elementor-widget-heading\" data-id=\"9f404ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Male Inlet Connector Strain Relief\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b747897 elementor-widget elementor-widget-text-editor\" data-id=\"b747897\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1426ff2 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"1426ff2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-list.default\"><div class=\"elementor-element elementor-element-6be2d00 elementor-widget elementor-widget-wpr-product-description\" data-id=\"6be2d00\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wpr-product-description.default\"><div class=\"wpr-product-description\"><p>The SmartPlug service kits provide a complete solution for repairing or restoring your connection, including all necessary electrical components, hardware, and sealing gaskets required for reliable performance. Designed for durability and long-term use, each kit also features a built-in strain relief and cord seal that securely anchors the cable to the back of the inlet, helping prevent cable pullouts and reducing stress on the internal connections. This ensures a more stable, secure installation while maintaining the integrity of your shore power system.<\/p><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f79334f elementor-widget elementor-widget-button\" data-id=\"f79334f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/dev.smartplug.com\/staging\/where-to-buy\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">WHERE TO BUY<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SmartPlug Male Inlet Connector Strain Relief 1 Durable Clear Cover Protects the connector from dirt and moisture. 2 Replacement Gasket Ensures a tight, weather-resistant seal for reliable performance. 3 Easy Access Opening Allows quick installation and removal. 4 Secure Protective Base Helps keep the connector clean and protected. MALE INLET STRAIN RELIEF Click the numbered points to explore the product Inlet Strain Relief Service Kit Inlet Strain Relief Service Kit PART NUMBER: PKMGKT &#10094; Features Strain Relief &#10095; Male Inlet Connector Strain Relief The SmartPlug service kits provide a complete solution for repairing or restoring your connection, including all necessary electrical components, hardware, and sealing gaskets required for reliable performance. Designed for durability and long-term use, each kit also features a built-in strain relief and cord seal that securely anchors the cable to the back of the inlet, helping prevent cable pullouts and reducing stress on the internal connections. This ensures a more stable, secure installation while maintaining the integrity of your shore power system. WHERE TO BUY<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-11384","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11384","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=11384"}],"version-history":[{"count":25,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11384\/revisions"}],"predecessor-version":[{"id":19889,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11384\/revisions\/19889"}],"wp:attachment":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/media?parent=11384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}