{"id":11189,"date":"2025-12-19T21:11:25","date_gmt":"2025-12-19T21:11:25","guid":{"rendered":"https:\/\/dev.smartplug.com\/staging\/?page_id=11189"},"modified":"2026-10-01T23:16:10","modified_gmt":"2026-10-01T23:16:10","slug":"cordset-storage-bag","status":"publish","type":"page","link":"https:\/\/dev.smartplug.com\/staging\/cordset-storage-bag\/","title":{"rendered":"SmartPlug Cordset Storage Bag"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11189\" class=\"elementor elementor-11189\">\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 Cordset Storage Bag<\/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-0a1b993 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=\"0a1b993\" 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-b8298ea 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=\"b8298ea\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-8e44960 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=\"8e44960\" 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-26ae721 sp-hotspot-image elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"26ae721\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMARTPLUG CORDSET STORAGE BAG GALLERY\n     STRUCTURE \/ LAYOUT FOUNDATION:\n     Sensor & Breaker - Combo Kit reference gallery\n     PRODUCT CONTENT \/ IMAGES:\n     Cordset Storage Bag\n-->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<div id=\"sp-elci-gallery\">\n    <div class=\"sp-main-view\">\n\n    <!-- =========================================================\n         FEATURES \u2014 CORDSET BAG\n         Product-specific content is editable here.\n         ========================================================= -->\n    <div class=\"sp-gallery-slide active\"\n        data-slide=\"0\"\n        data-title=\"Key Features\"\n        data-subtitle=\"Click the numbered points to explore the Cordset Bag.\"\n        data-part-number=\"\"\n    >\n        <div class=\"sp-product-image-wrap sp-main-product sp-hotspot-image\" style=\"\n                    --image-x-desktop:0px;\n                    --image-y-desktop:0px;\n                    --image-scale-desktop:1.2;\n                    --image-x-mobile:0px;\n                    --image-y-mobile:0px;\n                    --image-scale-mobile:1.4;\n                \">\n            <div class=\"sp-main-image-clip\">\n                <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/10\/Storage-Cordset-Bag.png\" alt=\"Cordset Bag Features\">\n            <\/div>\n\n            <!-- HOTSPOT 1 -->\n            <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                                        --top:57%;\n                    --left:20%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-mobile:.8;\n                    --hotspot-scale-tablet:.9;\n                    --hotspot-scale-laptop:1;\n                    --tooltip-x-desktop:30px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n                    --tooltip-x-mobile:50px;\n                    --tooltip-y-mobile:0px;\n                    --tooltip-scale-mobile:1;\n                    --dot-color:#DF6B30;\n                    --number-color:#ffffff;\n                    --tooltip-bg:#DF6B30;\n                    --tooltip-width:220px;\n                    --dot-size:34px;\n                    --number-size:16px;\n            \">\n                <div class=\"sp-dot\"><span class=\"sp-number\">1<\/span><\/div>\n                <div class=\"sp-tooltip\"><strong>Durable Material<\/strong><br>Made from rugged weather-resistance fabric for long-lasting use.<\/div>\n            <\/div>\n\n            <!-- HOTSPOT 2 -->\n            <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                    --top:15%;\n                    --left:37%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-mobile:.8;\n                    --hotspot-scale-tablet:.9;\n                    --hotspot-scale-laptop:1;\n                    --tooltip-x-desktop:0px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n                    --tooltip-x-mobile:70px;\n                    --tooltip-y-mobile:0px;\n                    --tooltip-scale-mobile:1;\n                    --dot-color:#DF6B30;\n                    --number-color:#ffffff;\n                    --tooltip-bg:#DF6B30;\n                    --tooltip-width:240px;\n                    --dot-size:34px;\n                    --number-size:16px;\n            \">\n                <div class=\"sp-dot\"><span class=\"sp-number\">2<\/span><\/div>\n                <div class=\"sp-tooltip\"><strong>Carrying Handle<\/strong><br>Strudy handle makes it easy to carry and transport your cordset anywhere.<\/div>\n            <\/div>\n\n            <!-- HOTSPOT 3 -->\n            <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                    --top:20%;\n                    --left:71%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-mobile:.8;\n                    --hotspot-scale-tablet:.9;\n                    --hotspot-scale-laptop:1;\n                    --tooltip-x-desktop:0px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n                    --tooltip-x-mobile:0px;\n                    --tooltip-y-mobile:0px;\n                    --tooltip-scale-mobile:1;\n                    --dot-color:#DF6B30;\n                    --number-color:#ffffff;\n                    --tooltip-bg:#DF6B30;\n                    --tooltip-width:220px;\n                    --dot-size:34px;\n                    --number-size:16px;\n            \">\n                <div class=\"sp-dot\"><span class=\"sp-number\">3<\/span><\/div>\n                <div class=\"sp-tooltip\"><strong>Heavy-Duty Zipper<\/strong><br>Durable zipper keeps your cordset securely stored and protected from dust and moisture.<\/div>\n            <\/div>\n\n            \n        <\/div>\n\n        <div class=\"sp-slide-info\">\n            <div class=\"sp-slide-title\">Cordset Bag<\/div>\n            <div class=\"sp-slide-subtitle\"><\/div>\n            <button type=\"button\" class=\"sp-fullscreen-trigger sp-feature-fullscreen-trigger\">View Full Screen<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- =========================================================\n         VARIATION 1 \u2014 CORDSET BAG\n         ONE internal view. Edit this view independently.\n         ========================================================= -->\n    <div class=\"sp-gallery-slide sp-variant-slide\"\n        data-slide=\"1\"\n        data-variant=\"cordset-bag-variation\"\n        data-view=\"cordset-bag\"\n        data-current-view=\"cordset-bag\"\n\n        data-cordset-bag=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Dock-Liftkits.png\"\n        data-cordset-bag-title=\"Cordset Bag\"\n        data-cordset-bag-subtitle=\"25ft \/ 50ft\"\n        data-cordset-bag-part-number=\"CBOO1\"\n    >\n        <div class=\"sp-variant-layout\">\n            <div class=\"sp-mobile-variant-title\">\n                <div class=\"sp-slide-title\">Cordset Bag<\/div>\n                <div class=\"sp-slide-subtitle\">25ft \/ 50ft<\/div>\n            <\/div>\n\n            <div class=\"sp-variant-image-wrap\">\n                <img decoding=\"async\" class=\"sp-variant-image\"\n                     src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Dock-Liftkits.png\"\n                     alt=\"Cordset Bag\"\n                     style=\"\n                        --image-x-desktop:0px;\n                        --image-y-desktop:0px;\n                        --image-scale-desktop:1;\n                        --image-x-mobile:0px;\n                        --image-y-mobile:0px;\n                        --image-scale-mobile:1;\n                     \">\n            <\/div>\n\n            <div class=\"sp-slide-info sp-side-info\">\n                <div class=\"sp-slide-title\">Cordset Bag<\/div>\n                <div class=\"sp-slide-subtitle\">25ft \/ 50ft<\/div>\n\n                <div class=\"sp-part-number\">\n                    PART NUMBER: <strong class=\"sp-part-number-value\"><\/strong>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n\n<!-- EXACTLY TWO MAIN THUMBNAILS -->\n<div class=\"sp-product-selector\">\n    <button type=\"button\" class=\"sp-thumb-nav sp-thumb-prev\" aria-label=\"Previous product image\">&#10094;<\/button>\n    <div class=\"sp-thumbnails\">\n        <button type=\"button\" class=\"sp-thumb sp-feature-thumb active\" data-target=\"0\" aria-label=\"View Cordset Bag features\">\n            <span class=\"sp-thumb-image\"><img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/07\/SmartPlug-Cordset-Storage-Bag.avif\" alt=\"Cordset Bag Features\"><\/span>\n            <span class=\"sp-thumb-label\">Features<\/span>\n        <\/button>\n        <button type=\"button\" class=\"sp-thumb\" data-target=\"1\" aria-label=\"View Cordset Bag\">\n            <span class=\"sp-thumb-image\"><img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Dock-Liftkits.png\" alt=\"Cordset Bag\"><\/span>\n            <span class=\"sp-thumb-label\">Cordset Bag<\/span>\n        <\/button>\n    <\/div>\n    <button type=\"button\" class=\"sp-thumb-nav sp-thumb-next\" aria-label=\"Next product image\">&#10095;<\/button>\n<\/div>\n\n<!-- EXACTLY TWO PAGINATION DOTS -->\n<div class=\"sp-gallery-pagination\" aria-label=\"Product gallery pagination\">\n    <button type=\"button\" class=\"sp-page-dot active\" data-page=\"0\" aria-label=\"Go to features\"><\/button>\n    <button type=\"button\" class=\"sp-page-dot\" data-page=\"1\" aria-label=\"Go to Cordset Bag\"><\/button>\n<\/div>\n<\/div> <!-- closes #sp-elci-gallery -->\n\n<\/div>\n\n<style>\n\/* =========================================================\nSMARTPLUG ELCI BREAKERS GALLERY\nAmazon-inspired product selector\n========================================================= *\/\n\n#sp-elci-gallery {\n    --sp-orange: #DF6B30;\n    --sp-dark: #1c1c1c;\n    --sp-muted: #666;\n    --sp-border: #dedede;\n    --sp-soft: #f7f7f7;\n\n    width: 100%;\n    height: 560px;\n    margin: 0 auto;\n    font-family: \"Montserrat\", sans-serif;\n    box-sizing: border-box;\n    overflow: visible;\n}\n\n#sp-elci-gallery *,\n#sp-elci-gallery *::before,\n#sp-elci-gallery *::after {\n    box-sizing: border-box;\n}\n\n\/* =========================================================\nMAIN VIEW\n========================================================= *\/\n\n#sp-elci-gallery .sp-main-view {\n    position: relative;\n    width: 100%;\n    height: 430px;\n    overflow: visible;\n}\n\n#sp-elci-gallery .sp-gallery-slide {\n    display: none;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: visible;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n}\n\n#sp-elci-gallery .sp-gallery-slide.active {\n    display: flex;\n}\n\n\/* =========================================================\nFEATURE IMAGE\n========================================================= *\/\n\n#sp-elci-gallery .sp-main-product {\n    position: relative;\n    width: 100%;\n    height: 400px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#sp-elci-gallery .sp-main-image-clip {\n    position: absolute;\n    inset: 0;\n    overflow: hidden;\n    pointer-events: none;\n    z-index: 1;\n}\n\n#sp-elci-gallery .sp-main-image-clip > img {\n    width: 100%;\n    height: 100%;\n    max-width: none;\n    object-fit: contain;\n    display: block;\n    transform:\n    translate(var(--image-x-desktop), var(--image-y-desktop))\n    scale(var(--image-scale-desktop));\n    transform-origin: center center;\n    transition: transform .18s ease;\n}\n\n\/* =========================================================\nVARIANT IMAGE\n========================================================= *\/\n\n#sp-elci-gallery .sp-variant-layout {\n    width: 100%;\n    height: 100%;\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr);\n    align-items: center;\n    gap: 12px;\n}\n\n#sp-elci-gallery .sp-variant-image-wrap {\n    width: 100%;\n    height: 400px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    min-width: 0;\n}\n\n#sp-elci-gallery .sp-variant-image-wrap img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    display: block;\n    transform:\n    translate(var(--image-x-desktop), var(--image-y-desktop))\n    scale(var(--image-scale-desktop));\n    transform-origin: center center;\n    transition: opacity .16s ease, transform .18s ease;\n}\n\n\/* =========================================================\nPRODUCT INFORMATION\n========================================================= *\/\n\n#sp-elci-gallery .sp-slide-info {\n    width: 100%;\n    max-width: 400px;\n    margin-top: -2px;\n    padding: 0 12px;\n    text-align: center;\n    transition: none;\n}\n\n#sp-elci-gallery .sp-side-info {\n    max-width: none;\n    margin: 0;\n    padding: 2px 2px 2px 2px;\n    text-align: left;\n}\n\n#sp-elci-gallery .sp-side-info .sp-slide-title {\n    font-size: 30px;\n    font-family: \"Bebas Neue\", sans-serif;\n    font-weight: 600;\n    letter-spacing: 1.5px;\n}\n\n#sp-elci-gallery .sp-amp-label {\n    margin-top: 17px;\n    color: #777;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: .5px;\n}\n\n#sp-elci-gallery .sp-amp-toggle {\n    display: flex;\n    width: 100%;\n    max-width: 300px;\n    margin-top: 6px;\n    border: 1px solid #d8d8d8;\n    border-radius: 6px;\n    overflow: hidden;\n    background: #fff;\n}\n\n#sp-elci-gallery .sp-amp-btn {\n    flex: 1 1 50%;\n    min-height: 30px;\n    padding: 7px 10px;\n    border: 0;\n    border-right: 0px solid #d8d8d8;\n    background: #fff;\n    color: #333;\n    font-family: \"Montserrat\", sans-serif;\n    font-size: 12px;\n    font-weight: 700;\n    cursor: pointer;\n    appearance: none;\n    -webkit-appearance: none;\n    transition: background .18s ease, color .18s ease;\n}\n\n#sp-elci-gallery .sp-amp-btn:last-child { border-right: 0; }\n#sp-elci-gallery .sp-amp-btn.active { background: var(--sp-orange); color: #fff; }\n#sp-elci-gallery .sp-amp-btn:disabled { background: #f2f2f2; color: #aaa; cursor: not-allowed; }\n\n#sp-elci-gallery .sp-current-amp {\n    margin-top: 8px;\n    color: #555;\n    font-size: 12px;\n}\n\n#sp-elci-gallery .sp-side-info .sp-part-number { margin-top: 10px; }\n\n#sp-elci-gallery .sp-mobile-variant-title {\n    display: none;\n}\n\n#sp-elci-gallery .sp-slide-kicker {\n    color: var(--sp-orange);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: .9px;\n    text-transform: uppercase;\n    line-height: 1.2;\n}\n\n#sp-elci-gallery .sp-slide-title {\n    margin-top: 3px;\n    color: var(--sp-dark);\n    font-family: \"Bebas Neue\", sans-serif;\n    font-size: 25px;\n    line-height: 1;\n    letter-spacing: .4px;\n}\n\n#sp-elci-gallery .sp-slide-subtitle {\n    margin-top: 3px;\n    margin-bottom: 3px;\n    color: var(--sp-muted);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1.35;\n}\n\n#sp-elci-gallery .sp-variant-image.is-empty {\n    visibility: hidden;\n}\n\n#sp-elci-gallery .sp-part-number {\n    display: inline-block;\n    margin-top: 7px;\n    color: #555;\n    font-size: 12px;\n    font-weight: 600;\n    letter-spacing: .5px;\n}\n\n#sp-elci-gallery .sp-part-number strong {\n    color: var(--sp-dark);\n}\n\n\/* =========================================================\nHOTSPOTS\n========================================================= *\/\n\n#sp-elci-gallery .sp-hotspot {\n    position: absolute;\n    z-index: 1;\n    top: var(--sp-hotspot-top-px, calc(var(--top-desktop) + var(--hotspot-y-desktop)));\n    left: var(--sp-hotspot-left-px, calc(var(--left-desktop) + var(--hotspot-x-desktop)));\n    transform:\n    translate(-50%, -50%)\n    scale(var(--hotspot-scale-desktop));\n    transform-origin: center center;\n    outline: none;\n    transition: top .18s ease, left .18s ease, transform .18s ease;\n}\n\n#sp-elci-gallery .sp-dot {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background: var(--dot-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 2px 8px rgba(0,0,0,.18);\n}\n\n#sp-elci-gallery .sp-number {\n    color: var(--number-color);\n    font-size: 13px;\n    font-weight: 700;\n    line-height: 1;\n}\n\n#sp-elci-gallery .sp-tooltip {\n    position: absolute;\n    z-index: 81;\n    bottom: calc(100% + 7px - var(--tooltip-y-desktop));\n    left: calc(50% + var(--tooltip-x-desktop));\n    transform:\n    translateX(-50%)\n    scale(var(--tooltip-scale-desktop));\n    transform-origin: center bottom;\n    width: 230px;\n    padding: 10px;\n    border-radius: 7px;\n    background: var(--tooltip-bg);\n    color: #fff;\n    font-size: 10px;\n    line-height: 1.45;\n    text-align: left;\n    opacity: 0;\n    visibility: hidden;\n    transition:\n    opacity .18s ease,\n    visibility .18s ease,\n    left .18s ease,\n    bottom .18s ease,\n    transform .18s ease;\n    pointer-events: none;\n    z-index:10;\n    box-shadow: 0 4px 14px rgba(0,0,0,.14);\n}\n\n#sp-elci-gallery .sp-hotspot:hover .sp-tooltip,\n#sp-elci-gallery .sp-hotspot:focus-visible .sp-tooltip,\n#sp-elci-gallery .sp-hotspot.is-open .sp-tooltip {\n    opacity: 1;\n    visibility: visible;\n}\n\n\/* =========================================================\nAMAZON-STYLE PRODUCT SELECTOR\n========================================================= *\/\n\n#sp-elci-gallery .sp-product-selector {\n    width: 100%;\n    display: flex;\n    align-items: stretch;\n    gap: 6px;\n    margin-top: 4px;\n}\n\n#sp-elci-gallery .sp-thumbnails {\n    flex: 1 1 auto;\n    min-width: 0;\n    display: flex;\n    align-items: stretch;\n    justify-content: center;\n    gap: 7px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    padding: 2px 0;\n}\n\n#sp-elci-gallery .sp-thumbnails::-webkit-scrollbar {\n    display: none;\n}\n\n#sp-elci-gallery .sp-thumb {\n    flex: 0 0 72px;\n    width: 72px;\n    min-height: 94px;\n    padding: 5px 5px 6px;\n    border: 1px solid var(--sp-border);\n    border-radius: 7px;\n    background: #fff;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 3px;\n    appearance: none;\n    -webkit-appearance: none;\n    transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease;\n}\n\n#sp-elci-gallery .sp-thumb:hover {\n    border-color: var(--sp-orange);\n    transform: translateY(-1px);\n}\n\n#sp-elci-gallery .sp-thumb.active {\n    border: 2px solid var(--sp-orange);\n    box-shadow: 0 2px 8px rgba(223,107,48,.13);\n}\n\n#sp-elci-gallery .sp-thumb:focus {\n    outline: none;\n}\n\n#sp-elci-gallery .sp-thumb:focus-visible {\n    border-color: var(--sp-orange);\n    box-shadow: 0 0 0 2px rgba(223,107,48,.18);\n}\n\n#sp-elci-gallery .sp-thumb-image {\n    width: 100%;\n    height: 57px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    border-radius: 4px;\n    background: #fff;\n}\n\n#sp-elci-gallery .sp-thumb img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    display: block;\n    pointer-events: none;\n}\n\n#sp-elci-gallery .sp-thumb-label {\n    display: block;\n    width: 100%;\n    color: var(--sp-dark);\n    font-size: 9px;\n    font-weight: 700;\n    line-height: 1.15;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n#sp-elci-gallery .sp-thumb-part {\n    display: block;\n    color: #777;\n    font-size: 8px;\n    font-weight: 600;\n    line-height: 1;\n}\n\n#sp-elci-gallery .sp-thumb-view {\n    display: block;\n    color: #777;\n    font-size: 8px;\n    font-weight: 600;\n    line-height: 1;\n}\n\n#sp-elci-gallery .sp-feature-thumb .sp-thumb-part {\n    visibility: hidden;\n}\n\n\/* =========================================================\nTHUMBNAIL ARROWS\n========================================================= *\/\n\n#sp-elci-gallery .sp-thumb-nav {\n    display: none;\n    width: 26px;\n    min-width: 26px;\n    height: 26px;\n    align-self: center;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: #fff;\n    color: #222;\n    font-family: Arial, sans-serif;\n    font-size: 16px;\n    line-height: 26px;\n    text-align: center;\n    cursor: pointer;\n    appearance: none;\n    -webkit-appearance: none;\n}\n\n\/* =========================================================\nPAGINATION\n========================================================= *\/\n\n#sp-elci-gallery .sp-gallery-pagination {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 6px;\n    margin-top: 7px;\n}\n\n#sp-elci-gallery .sp-page-dot {\n    width: 6px;\n    height: 6px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: #c7c7c7;\n    cursor: pointer;\n    appearance: none;\n    -webkit-appearance: none;\n    transition: background .2s ease, transform .2s ease;\n}\n\n#sp-elci-gallery .sp-page-dot:hover,\n#sp-elci-gallery .sp-page-dot.active {\n    background: var(--sp-orange);\n}\n\n#sp-elci-gallery .sp-page-dot.active {\n    transform: scale(1.25);\n}\n\n\/* =========================================================\nFULL SCREEN VIEW + HOVER ZOOM\n========================================================= *\/\n\n#sp-elci-gallery .sp-fullscreen-trigger {\n    position: static;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    margin-top: 7px;\n    transform: none;\n    z-index: 10;\n    border: 1px solid #d7d7d7;\n    border-radius: 4px;\n    background: #fff;\n    color: #333;\n    padding: 6px 11px;\n    font-family: \"Montserrat\", sans-serif;\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: .2px;\n    line-height: 1;\n    cursor: pointer;\n    white-space: nowrap;\n    appearance: none;\n    -webkit-appearance: none;\n    box-shadow: 0 1px 4px rgba(0,0,0,.08);\n    transition: border-color .18s ease, color .18s ease, background .18s ease;\n}\n\n#sp-elci-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\n    display: none;\n}\n\n#sp-elci-gallery .sp-fullscreen-trigger:hover {\n    border-color: var(--sp-orange);\n    color: var(--sp-orange);\n}\n\n#sp-elci-gallery .sp-zoom-preview {\n    position: absolute;\n    top: 0;\n    left: calc(100% + 12px);\n    width: 78%;\n    height: 100%;\n    background: #fff;\n    border: 1px solid #e3e3e3;\n    border-radius: 8px;\n    box-shadow: 0 6px 20px rgba(0,0,0,.18);\n    overflow: hidden;\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    z-index: 1;\n    transition: opacity .12s ease, visibility .12s ease;\n}\n\n#sp-elci-gallery .sp-zoom-preview img {\n    position: absolute;\n    width: 200%;\n    height: 200%;\n    max-width: none;\n    object-fit: contain;\n    display: block;\n    pointer-events: none;\n    transform-origin: top left;\n}\n\n#sp-elci-gallery .sp-variant-image-wrap.sp-zoom-active .sp-zoom-preview {\n    opacity: 1;\n    visibility: visible;\n}\n\n\/* Full-screen product popup *\/\n#sp-elci-gallery .sp-fullscreen-modal {\n    position: fixed;\n    inset: 0;\n    z-index: 999999;\n    display: none;\n    align-items: center;\n    justify-content: center;\n    padding: 20px;\n    background: rgba(0,0,0,.38);\n}\n\n#sp-elci-gallery .sp-fullscreen-modal.is-open {\n    display: flex;\n}\n\n#sp-elci-gallery .sp-fullscreen-dialog {\n    position: relative;\n\n    \/* =====================================================\n       FULL SCREEN POPUP SIZE \u2014 EDIT HERE\n       Change these values for the desktop popup size.\n       ===================================================== *\/\n    width: var(--sp-popup-width-desktop, 1100px);\n    height: var(--sp-popup-height-desktop, 520px);\n    max-width: calc(100vw - 30px);\n    max-height: calc(100vh - 40px);\n\n    display: grid;\n    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr);\n    gap: 28px;\n    padding: 24px 28px;\n    background: #fff;\n    border-radius: 7px;\n    box-shadow: 0 8px 35px rgba(0,0,0,.25);\n    overflow: hidden;\n}\n\n#sp-elci-gallery .sp-fullscreen-close {\n    position: absolute;\n    top: 8px;\n    right: 10px;\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: #222;\n    font-family: Arial, sans-serif;\n    font-size: 24px;\n    line-height: 28px;\n    cursor: pointer;\n    z-index: 5;\n}\n\n#sp-elci-gallery .sp-fullscreen-image-area {\n    min-width: 0;\n    min-height: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n\n#sp-elci-gallery .sp-fullscreen-image {\n    \/*\n     * Popup image size and position are controlled by the\n     * FULLSCREEN_CONTENT settings below.\n     *\/\n    width: var(--sp-popup-image-width-desktop, 100%);\n    height: var(--sp-popup-image-height-desktop, 100%);\n    max-width: none;\n    max-height: none;\n    object-fit: contain;\n    display: block;\n    transform: translate(\n        var(--sp-popup-image-x-desktop, 0px),\n        var(--sp-popup-image-y-desktop, 0px)\n    );\n}\n\n#sp-elci-gallery .sp-fullscreen-info {\n    min-width: 0;\n    padding: 8px 8px 8px 0;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    overflow-y: auto;\n}\n\n#sp-elci-gallery .sp-fullscreen-kicker {\n    color: var(--sp-orange);\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: .7px;\n    text-transform: uppercase;\n}\n\n#sp-elci-gallery .sp-fullscreen-title {\n    margin-top: 5px;\n    color: var(--sp-dark);\n    font-family: \"Bebas Neue\", sans-serif;\n    font-size: 31px;\n    line-height: 1;\n    letter-spacing: 1.5px;\n    font-weight: 700;\n}\n\n#sp-elci-gallery .sp-fullscreen-description {\n    margin-top: 8px;\n    color: #666;\n    font-size: 12px;\n    line-height: 1.45;\n}\n\n#sp-elci-gallery .sp-fullscreen-part-number {\n    margin-top: 8px;\n    color: #555;\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: .5px;\n}\n\n#sp-elci-gallery .sp-fullscreen-part-number strong {\n    color: var(--sp-dark);\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-wrap {\n    display: none;\n    margin-top: 14px;\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-wrap.is-visible {\n    display: block;\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-label {\n    margin-bottom: 5px;\n    color: #777;\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: .5px;\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-toggle {\n    display: flex;\n    width: 250px;\n    max-width: 100%;\n    border: 1px solid #d8d8d8;\n    border-radius: 6px;\n    overflow: hidden;\n    background: #fff;\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-btn {\n    flex: 1 1 50%;\n    min-height: 32px;\n    padding: 7px 10px;\n    border: 0;\n    background: #fff;\n    color: #333;\n    font-family: \"Montserrat\", sans-serif;\n    font-size: 11px;\n    font-weight: 700;\n    cursor: pointer;\n    appearance: none;\n    -webkit-appearance: none;\n    transition: background .18s ease, color .18s ease;\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-btn.active {\n    background: var(--sp-orange);\n    color: #fff;\n}\n\n#sp-elci-gallery .sp-fullscreen-amp-btn:disabled {\n    background: #f2f2f2;\n    color: #aaa;\n    cursor: not-allowed;\n}\n\n#sp-elci-gallery .sp-fullscreen-thumbnails {\n    width: 100%;\n    margin-top: 18px;\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: 8px;\n}\n\n#sp-elci-gallery .sp-fullscreen-thumb {\n    width: 100%;\n    height: 72px;\n    padding: 4px;\n    border: 1px solid var(--sp-border);\n    border-radius: 4px;\n    background: #fff;\n    cursor: pointer;\n    overflow: hidden;\n}\n\n#sp-elci-gallery .sp-fullscreen-thumb.active {\n    border: 2px solid var(--sp-orange);\n}\n\n#sp-elci-gallery .sp-fullscreen-thumb img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    display: block;\n}\n\n\/* =========================================================\nMOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n    #sp-elci-gallery .sp-fullscreen-trigger {\n        position: static;\n        display: inline-flex;\n        margin-top: 6px;\n        transform: none;\n        font-size: 8px;\n        padding: 6px 10px;\n    }\n\n    #sp-elci-gallery .sp-zoom-preview {\n        display: none;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-modal {\n        padding: 8px;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-dialog {\n        \/*\n         * FULL SCREEN POPUP SIZE \u2014 MOBILE EDIT HERE\n         *\/\n        width: var(--sp-popup-width-mobile, calc(100vw - 16px));\n        height: var(--sp-popup-height-mobile, 90vh);\n        max-width: calc(100vw - 16px);\n        max-height: calc(100vh - 16px);\n        min-height: 0;\n        grid-template-columns: 1fr;\n        gap: 8px;\n        padding: 18px 12px 12px;\n        border-radius: 8px;\n        box-shadow: 0 8px 30px rgba(0,0,0,.22);\n        overflow-y: auto;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-image-area {\n        height: var(--sp-popup-image-area-height-mobile, 54vh);\n        min-height: 260px;\n        overflow: hidden;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-image {\n        width: var(--sp-popup-image-width-mobile, 100%);\n        height: var(--sp-popup-image-height-mobile, 100%);\n        transform: translate(\n            var(--sp-popup-image-x-mobile, 0px),\n            var(--sp-popup-image-y-mobile, 0px)\n        );\n    }\n\n    #sp-elci-gallery .sp-fullscreen-info {\n        padding: 0 4px 4px;\n        overflow: visible;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-title {\n        font-size: 25px;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-description {\n        font-size: 10px;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-part-number {\n        font-size: 9px;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-amp-wrap {\n        margin-top: 8px;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-amp-label {\n        font-size: 9px;\n        margin-bottom: 4px;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-amp-toggle {\n        width: 250px;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-amp-btn {\n        min-height: 30px;\n        padding: 6px 8px;\n        font-size: 10px;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-thumbnails {\n        margin-top: 10px;\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n        gap: 5px;\n    }\n\n    #sp-elci-gallery .sp-fullscreen-thumb {\n        height: 58px;\n    }\n\n    \/* =====================================================\n       MOBILE PRODUCT GALLERY\n       Compact Amazon-style vertical product layout\n       ===================================================== *\/\n\n    #sp-elci-gallery {\n        width: 100%;\n        max-width: 100%;\n        height: auto;\n        min-height: 0;\n        margin: 0 auto;\n        overflow: visible;\n    }\n\n    #sp-elci-gallery .sp-main-view {\n        width: 100%;\n        height: auto;\n        min-height: 0;\n        overflow: visible;\n    }\n\n    #sp-elci-gallery .sp-gallery-slide {\n        width: 100%;\n        height: auto;\n        min-height: 0;\n        display: none;\n        position: relative;\n        overflow: visible;\n        flex-direction: column;\n        align-items: center;\n        justify-content: flex-start;\n    }\n\n    #sp-elci-gallery .sp-gallery-slide.active {\n        display: flex;\n    }\n\n    \/* FEATURE IMAGE\n       The main\/features image uses the same responsive viewing frame. *\/\n    #sp-elci-gallery .sp-main-product {\n        width: 100%;\n        height: auto;\n        aspect-ratio: 3.3 \/ 3;\n        min-height: 0;\n        flex: 0 0 auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        order: 1;\n        position: relative;\n        overflow: visible;\n    }\n\n    #sp-elci-gallery .sp-main-image-clip {\n        inset: 0;\n    }\n\n    #sp-elci-gallery .sp-main-image-clip > img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        transform:\n            translate(var(--image-x-mobile), var(--image-y-mobile))\n            scale(var(--image-scale-mobile));\n    }\n\n    \/* VARIANT LAYOUT *\/\n    #sp-elci-gallery .sp-variant-layout {\n        width: 100%;\n        height: auto;\n        min-height: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: flex-start;\n        gap: 0;\n    }\n\n    \/* Title at the top *\/\n    #sp-elci-gallery .sp-mobile-variant-title {\n        display: block;\n        width: 100%;\n        min-height: 46px;\n        padding: 0 8px;\n        text-align: center;\n        order: 1;\n        margin: 0;\n        position: relative;\n        z-index: 2;\n    }\n\n    #sp-elci-gallery .sp-mobile-variant-title .sp-slide-kicker {\n        margin: 0;\n        font-size: 8px;\n        line-height: 1.1;\n    }\n\n    #sp-elci-gallery .sp-mobile-variant-title .sp-slide-title {\n        margin: 2px 0 0;\n        font-size: 23px;\n        line-height: .95;\n        letter-spacing: .8px;\n    }\n\n    #sp-elci-gallery .sp-mobile-variant-title .sp-slide-subtitle {\n        margin: 3px 0 0;\n        font-size: 10px;\n        line-height: 1.2;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-fullscreen-trigger {\n        display: inline-flex;\n        margin-left: auto;\n        margin-right: auto;\n    }\n\n    #sp-elci-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\n        display: none;\n    }\n\n    \/* PRODUCT IMAGEEvery variation uses the responsive viewing frame. *\/\n    #sp-elci-gallery .sp-variant-image-wrap {\n        width: 100%;\n        height: auto;\n        aspect-ratio: 5 \/ 3;\n        min-height: 0;\n        flex: 0 0 auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        order: 2;\n        position: relative;\n        overflow: visible;\n    }\n\n    #sp-elci-gallery .sp-variant-image-wrap img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        transform:\n            translate(var(--image-x-mobile), var(--image-y-mobile))\n            scale(var(--image-scale-mobile));\n        transform-origin: center center;\n        transition: opacity .16s ease, transform .18s ease;\n    }\n\n    #sp-elci-gallery .sp-slide-info .sp-fullscreen-trigger {\n        margin-left: auto;\n        margin-right: auto;\n    }\n\n    \/* PRODUCT INFORMATION \/ CONTROLS *\/\n    #sp-elci-gallery .sp-side-info {\n        width: 100%;\n        max-width: 100%;\n        height: auto;\n        min-height: 0;\n        padding: 0;\n        margin: 0;\n        text-align: center;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: flex-start;\n        gap: 0;\n        order: 3;\n    }\n\n    \/* Hide duplicate desktop title. *\/\n    #sp-elci-gallery .sp-side-info .sp-slide-kicker,\n    #sp-elci-gallery .sp-side-info .sp-slide-title,\n    #sp-elci-gallery .sp-side-info .sp-slide-subtitle {\n        display: none;\n    }\n\n    \/* View selector label *\/\n    #sp-elci-gallery .sp-side-info .sp-amp-label {\n        display: block;\n        width: 100%;\n        margin: 0 0 4px;\n        color: #777;\n        font-size: 10px;\n        line-height: 1.1;\n        font-weight: 700;\n        letter-spacing: .5px;\n        text-align: center;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-amp-toggle {\n        display: flex;\n        width: 180px;\n        max-height: none;\n        gap: 2px;\n        border: none;\n        background: transparent;\n        overflow: visible;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-amp-btn {\n        width: 100%;\n        height: 35px;\n        min-height: 35px;\n        padding: 5px 10px;\n        font-size: 11px;\n    }\n\n    \/* Keep the existing view switching fully functional. *\/\n    #sp-elci-gallery .sp-side-info .sp-current-amp {\n        display: block;\n        width: 100%;\n        margin: 5px 0 0;\n        color: #666;\n        font-size: 11px;\n        line-height: 1.15;\n        text-align: center;\n    }\n\n    \/* Part number *\/\n    #sp-elci-gallery .sp-side-info .sp-part-number {\n        display: inline-block;\n        margin: 5px auto 0;\n        padding: 0;\n        color: #555;\n        font-size: 8px;\n        letter-spacing: .4px;\n        text-align: center;\n    }\n\n    #sp-elci-gallery .sp-part-number strong {\n        color: var(--sp-dark);\n    }\n\n    #sp-elci-gallery .sp-variant-image.is-empty {\n        visibility: hidden;\n    }\n\n    \/* HOTSPOTS *\/\n    #sp-elci-gallery .sp-hotspot {\n        top: var(--sp-hotspot-top-px, calc(var(--top-mobile) + var(--hotspot-y-mobile)));\n        left: var(--sp-hotspot-left-px, calc(var(--left-mobile) + var(--hotspot-x-mobile)));\n        transform:\n            translate(-50%, -50%)\n            scale(var(--hotspot-scale-mobile));\n    }\n\n    #sp-elci-gallery .sp-tooltip {\n        bottom: calc(100% + 7px - var(--tooltip-y-mobile));\n        left: calc(50% + var(--tooltip-x-mobile));\n        transform:\n            translateX(-50%)\n            scale(var(--tooltip-scale-mobile));\n        width: min(190px, calc(100vw - 22px));\n        padding: 8px;\n        font-size: 9px;\n    }\n\n    \/* MOBILE THUMBNAIL STRIP *\/\n    #sp-elci-gallery .sp-product-selector {\n        width: 100%;\n        display: flex;\n        align-items: center;\n        gap: 3px;\n        margin-top: 7px;\n    }\n\n    #sp-elci-gallery .sp-thumb-nav {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex: 0 0 26px;\n        width: 26px;\n        min-width: 26px;\n        height: 26px;\n        min-height: 26px;\n        padding: 0;\n        border: 0;\n        border-radius: 50%;\n        background: #fff;\n        color: #222;\n        font-size: 16px;\n        line-height: 26px;\n        cursor: pointer;\n        z-index: 3;\n    }\n\n    #sp-elci-gallery .sp-thumbnails {\n        flex: 1 1 auto;\n        width: auto;\n        max-width: calc(100% - 58px);\n        min-width: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 4px;\n        overflow-x: auto;\n        overflow-y: hidden;\n        scroll-behavior: smooth;\n        scrollbar-width: none;\n        padding: 1px 0;\n    }\n\n    #sp-elci-gallery .sp-thumbnails::-webkit-scrollbar {\n        display: none;\n    }\n\n    #sp-elci-gallery .sp-thumb {\n        flex: 0 0 62px;\n        width: 62px;\n        min-width: 62px;\n        min-height: 75px;\n        height: 75px;\n        padding: 3px;\n        border: 1px solid var(--sp-border);\n        border-radius: 5px;\n        gap: 2px;\n    }\n\n    #sp-elci-gallery .sp-thumb.active {\n        border: 2px solid var(--sp-orange);\n    }\n\n    #sp-elci-gallery .sp-thumb-image {\n        width: 100%;\n        height: 45px;\n        min-height: 45px;\n        border-radius: 3px;\n    }\n\n    #sp-elci-gallery .sp-thumb-label {\n        font-size: 8px;\n        line-height: 1.05;\n    }\n\n    #sp-elci-gallery .sp-thumb-part {\n        font-size: 7px;\n        line-height: 1;\n    }\n\n    #sp-elci-gallery .sp-thumb-view {\n        font-size: 7px;\n        line-height: 1;\n    }\n\n    \/* PAGINATION *\/\n    #sp-elci-gallery .sp-gallery-pagination {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 5px;\n        margin-top: 4px;\n        height: 7px;\n    }\n\n    #sp-elci-gallery .sp-page-dot {\n        width: 6px;\n        height: 6px;\n    }\n\n    \/* LENGTH TOGGLE *\/\n    #sp-elci-gallery .sp-side-info .sp-amp-toggle {\n        width: 240px;\n        max-width: 240px;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-amp-btn {\n        min-width: 0;\n        white-space: nowrap;\n    }\n\n    \/* LOCKED RESPONSIVE VIEWING FRAME *\/\n    #sp-elci-gallery .sp-main-view {\n        overflow: visible;\n    }\n\n    #sp-elci-gallery .sp-gallery-slide {\n        height: 100%;\n        min-height: 0;\n    }\n\n    #sp-elci-gallery .sp-main-product,\n    #sp-elci-gallery .sp-variant-image-wrap {\n        flex-shrink: 0;\n    }\n\n    \/* LOCKED IMAGE FRAME: image swaps never change the reserved viewing area *\/\n    #sp-elci-gallery .sp-variant-image-wrap img,\n    #sp-elci-gallery .sp-main-image-clip > img {\n        flex-shrink: 0;\n    }\n\n}\n\/* Elementor containers must not clip hotspot tooltips *\/\n.sp-gallery-overflow,\n.sp-gallery-overflow > .e-con,\n.sp-gallery-overflow > .elementor-widget-container {\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   CHANGE LOG \u2014 MOBILE RESPONSIVE FIX\n   =========================================================\n   1. Removed the mobile side-info minimum height that created\n      excessive empty space above the thumbnail strip.\n   2. Added a fixed mobile title area so different title lengths\n      do not make the controls appear at different levels.\n   3. Added a compact, fixed mobile controls area so the\n      configuration, current selection, part number, and\n      Full Screen button stay evenly aligned between variations.\n   4. Reduced the spacing between the Full Screen button and\n      the thumbnail strip.\n   5. Kept the mobile image viewing frame fixed so image swaps\n      do not change the gallery layout.\n   ========================================================= *\/\n\n\/* DESKTOP \u2014 KEEP THE EXISTING FIXED VIEWING FRAME *\/\n#sp-elci-gallery .sp-main-view{height:430px;min-height:430px;}\n#sp-elci-gallery .sp-gallery-slide{height:100%;min-height:430px;}\n#sp-elci-gallery .sp-variant-layout{height:100%;min-height:0;}\n#sp-elci-gallery .sp-variant-image-wrap{height:400px;min-height:400px;flex:0 0 400px;}\n#sp-elci-gallery .sp-side-info{min-height:220px;}\n#sp-elci-gallery .sp-amp-toggle{min-height:30px;height:30px;}\n#sp-elci-gallery .sp-side-info .sp-part-number{\n    display:block;\n    width:max-content;\n    max-width:100%;\n}\n\n#sp-elci-gallery .sp-side-info .sp-fullscreen-trigger{\n    display:flex;\n    position:static;\n    width:max-content;\n    margin-top:6px;\n    margin-left:0;\n    margin-right:0;\n    align-self:flex-start;\n}\n\n\/* MOBILE \u2014 FIXED TITLE \/ IMAGE \/ CONTROLS SPACING *\/\n@media (max-width:767px){\n    #sp-elci-gallery .sp-main-view{\n        height:auto;\n        min-height:380px;\n    }\n\n    #sp-elci-gallery .sp-gallery-slide{\n        height:auto;\n        min-height:0;\n    }\n\n    #sp-elci-gallery .sp-variant-layout{\n        height:auto;\n        min-height:380px;\n    }\n\n    \/* Keep every variation on the same image viewing frame. *\/\n    #sp-elci-gallery .sp-variant-image-wrap{\n        height:auto;\n        min-height:0;\n        flex:0 0 auto;\n        aspect-ratio:5 \/ 3;\n    }\n\n    \/* Reserve the same title space for every variation. *\/\n    #sp-elci-gallery .sp-mobile-variant-title{\n        height:70px;\n        min-height:70px;\n        max-height:70px;\n        overflow:hidden;\n        display:block;\n    }\n\n    \/* Keep the product controls aligned at the same level. *\/\n    #sp-elci-gallery .sp-side-info{\n        height:112px;\n        min-height: 112px;\n        max-height: 112px;\n        overflow:visible;\n        justify-content:flex-start;\n    }\n\n    \/* Keep the configuration label and buttons compact. *\/\n    #sp-elci-gallery .sp-side-info .sp-amp-label{\n        margin:0 0 4px;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-amp-toggle{\n        height:35px;\n        min-height:35px;\n        flex:0 0 35px;\n    }\n\n    \/* Tighten the information below the configuration buttons. *\/\n    #sp-elci-gallery .sp-side-info .sp-current-amp{\n        margin:3px 0 0;\n        line-height:1.1;\n    }\n\n    #sp-elci-gallery .sp-side-info .sp-part-number{\n        margin:3px auto 0;\n        line-height:1.05;\n    }\n\n    \/* Keep the Full Screen button directly below the part number. *\/\n    #sp-elci-gallery .sp-side-info .sp-fullscreen-trigger{\n        margin-top:5px;\n    }\n\n    \/* Reduce the gap between product details and thumbnails. *\/\n    #sp-elci-gallery .sp-product-selector{\n        margin-top:2px;\n    }\n\n    #sp-elci-gallery .sp-gallery-pagination{\n        margin-top:3px;\n    }\n\n    #sp-elci-gallery .sp-thumbnails{\n        justify-content:center;\n    }\n\n    \/* Compact mobile configuration grids. *\/\n\n    #sp-elci-gallery .sp-variant-slide .sp-amp-btn{\n        width:100%;\n        min-width:0;\n    }\n}\n\n\n\/* =========================================================\n   CORDSET BAG \u2014 KICKERS REMOVED\n   Preserve the reference layout while keeping the target\n   product's current content rules.\n   ========================================================= *\/\n#sp-elci-gallery .sp-slide-kicker,\n#sp-elci-gallery .sp-fullscreen-kicker,\n#sp-elci-gallery [class*=\"kicker\"]{\n    display:none !important;\n    width:0 !important;\n    height:0 !important;\n    margin:0 !important;\n    padding:0 !important;\n}\n\n\/* Elementor must be allowed to show the gallery overflow,\n   especially hotspot tooltips and desktop hover zoom. *\/\n.sp-gallery-overflow,\n.sp-gallery-overflow > .e-con,\n.sp-gallery-overflow > .elementor-widget-container{\n    overflow:visible !important;\n}\n\n<\/style>\n\n<script>\n(function () {\n    function initSmartPlugELCIGallery() {\n        const gallery = document.getElementById(\"sp-elci-gallery\");\n        if (!gallery || gallery.dataset.initialized === \"true\") return;\n        gallery.dataset.initialized = \"true\";\n\n        const slides = gallery.querySelectorAll(\".sp-gallery-slide\");\n        const thumbs = gallery.querySelectorAll(\".sp-thumb\");\n        const hotspots = gallery.querySelectorAll(\".sp-hotspot\");\n        const pageDots = gallery.querySelectorAll(\".sp-page-dot\");\n        const variantSlides = gallery.querySelectorAll(\".sp-variant-slide\");\n\n        \/* =================================================\n           RESPONSIVE FEATURE HOTSPOTS\n           Hotspots are anchored to the actual rendered image,\n           not to fixed gallery\/container percentages.\n           ================================================= *\/\n\n        function getResponsiveMode() {\n            const width = window.innerWidth || document.documentElement.clientWidth || 0;\n\n            if (width <= 600) return \"mobile\";\n            if (width <= 1024) return \"tablet\";\n            if (width <= 1366) return \"laptop\";\n\n            return \"desktop\";\n        }\n\n        function readCssNumber(element, property, fallback) {\n            if (!element) return fallback;\n\n            const inlineValue = element.style\n                ? element.style.getPropertyValue(property)\n                : \"\";\n\n            const computedValue = window.getComputedStyle(element)\n                .getPropertyValue(property);\n\n            const raw = (inlineValue || computedValue || \"\").trim();\n            if (!raw) return fallback;\n\n            const match = raw.match(\/-?[\\d.]+\/);\n            if (!match) return fallback;\n\n            const value = parseFloat(match[0]);\n            return Number.isFinite(value) ? value : fallback;\n        }\n\n        function readResponsiveImageSetting(image, propertyBase, responsiveMode, fallback) {\n            if (!image) return fallback;\n\n            const responsiveProperty = propertyBase + \"-\" + responsiveMode;\n            const desktopProperty = propertyBase + \"-desktop\";\n\n            const responsiveValue = readCssNumber(\n                image,\n                responsiveProperty,\n                NaN\n            );\n\n            if (Number.isFinite(responsiveValue)) {\n                return responsiveValue;\n            }\n\n            return readCssNumber(\n                image,\n                desktopProperty,\n                fallback\n            );\n        }\n\n        function syncFeatureHotspots() {\n            const featureSlide = slides[0];\n            if (!featureSlide) return;\n\n            const product = featureSlide.querySelector(\n                \".sp-main-product.sp-hotspot-image\"\n            );\n\n            const clip = featureSlide.querySelector(\n                \".sp-main-image-clip\"\n            );\n\n            const image = featureSlide.querySelector(\n                \".sp-main-image-clip > img\"\n            );\n\n            const featureHotspots = featureSlide.querySelectorAll(\n                \".sp-hotspot\"\n            );\n\n            if (\n                !product ||\n                !clip ||\n                !image ||\n                !featureHotspots.length\n            ) {\n                return;\n            }\n\n            if (\n                !image.naturalWidth ||\n                !image.naturalHeight\n            ) {\n                return;\n            }\n\n            const clipRect = clip.getBoundingClientRect();\n            const productRect = product.getBoundingClientRect();\n\n            if (\n                !clipRect.width ||\n                !clipRect.height ||\n                !productRect.width ||\n                !productRect.height\n            ) {\n                return;\n            }\n\n            const responsiveMode = getResponsiveMode();\n\n            const imageX = readResponsiveImageSetting(\n                image,\n                \"--image-x\",\n                responsiveMode,\n                0\n            );\n\n            const imageY = readResponsiveImageSetting(\n                image,\n                \"--image-y\",\n                responsiveMode,\n                0\n            );\n\n            const imageScale = Math.max(\n                0.001,\n                readResponsiveImageSetting(\n                    image,\n                    \"--image-scale\",\n                    responsiveMode,\n                    1\n                )\n            );\n\n            const imageRatio =\n                image.naturalWidth \/ image.naturalHeight;\n\n            const containerRatio =\n                clipRect.width \/ clipRect.height;\n\n            let renderedWidth;\n            let renderedHeight;\n\n            \/* Match object-fit: contain. *\/\n            if (imageRatio > containerRatio) {\n                renderedWidth = clipRect.width;\n                renderedHeight = renderedWidth \/ imageRatio;\n            } else {\n                renderedHeight = clipRect.height;\n                renderedWidth = renderedHeight * imageRatio;\n            }\n\n            \/* Match the CSS transform: scale(...). *\/\n            renderedWidth *= imageScale;\n            renderedHeight *= imageScale;\n\n            const imageLeftInClip =\n                (clipRect.width - renderedWidth) \/ 2 +\n                imageX;\n\n            const imageTopInClip =\n                (clipRect.height - renderedHeight) \/ 2 +\n                imageY;\n\n            \/* Hotspots are positioned relative to .sp-main-product. *\/\n            const clipOffsetLeft =\n                clipRect.left - productRect.left;\n\n            const clipOffsetTop =\n                clipRect.top - productRect.top;\n\n            const imageLeft =\n                clipOffsetLeft + imageLeftInClip;\n\n            const imageTop =\n                clipOffsetTop + imageTopInClip;\n\n            featureHotspots.forEach(function (hotspot) {\n                const top = readCssNumber(\n                    hotspot,\n                    \"--top\",\n                    NaN\n                );\n\n                const left = readCssNumber(\n                    hotspot,\n                    \"--left\",\n                    NaN\n                );\n\n                const hotspotX = readCssNumber(\n                    hotspot,\n                    \"--hotspot-x\",\n                    0\n                );\n\n                const hotspotY = readCssNumber(\n                    hotspot,\n                    \"--hotspot-y\",\n                    0\n                );\n\n                if (\n                    !Number.isFinite(top) ||\n                    !Number.isFinite(left)\n                ) {\n                    return;\n                }\n\n                const hotspotLeft =\n                    imageLeft +\n                    (renderedWidth * left \/ 100) +\n                    hotspotX;\n\n                const hotspotTop =\n                    imageTop +\n                    (renderedHeight * top \/ 100) +\n                    hotspotY;\n\n                hotspot.style.setProperty(\n                    \"--sp-hotspot-left-px\",\n                    hotspotLeft + \"px\"\n                );\n\n                hotspot.style.setProperty(\n                    \"--sp-hotspot-top-px\",\n                    hotspotTop + \"px\"\n                );\n\n                hotspot.setAttribute(\n                    \"data-responsive-zone\",\n                    responsiveMode\n                );\n            });\n        }\n\n        let hotspotFrame = null;\n\n        function scheduleFeatureHotspotSync() {\n            if (hotspotFrame) {\n                cancelAnimationFrame(hotspotFrame);\n            }\n\n            hotspotFrame = requestAnimationFrame(function () {\n                hotspotFrame = null;\n                syncFeatureHotspots();\n            });\n        }\n\n        function setupFeatureHotspotObservers() {\n            const featureSlide = slides[0];\n            if (!featureSlide) return;\n\n            const featureImage = featureSlide.querySelector(\n                \".sp-main-image-clip > img\"\n            );\n\n            const featureClip = featureSlide.querySelector(\n                \".sp-main-image-clip\"\n            );\n\n            const featureWrap = featureSlide.querySelector(\n                \".sp-main-product.sp-hotspot-image\"\n            );\n\n            const mainView = gallery.querySelector(\n                \".sp-main-view\"\n            );\n\n            if (featureImage) {\n                featureImage.addEventListener(\n                    \"load\",\n                    scheduleFeatureHotspotSync\n                );\n            }\n\n            window.addEventListener(\n                \"resize\",\n                scheduleFeatureHotspotSync\n            );\n\n            window.addEventListener(\n                \"orientationchange\",\n                scheduleFeatureHotspotSync\n            );\n\n            if (window.ResizeObserver) {\n                const hotspotObserver = new ResizeObserver(\n                    function () {\n                        scheduleFeatureHotspotSync();\n                    }\n                );\n\n                if (featureClip) {\n                    hotspotObserver.observe(featureClip);\n                }\n\n                if (featureWrap) {\n                    hotspotObserver.observe(featureWrap);\n                }\n\n                if (featureImage) {\n                    hotspotObserver.observe(featureImage);\n                }\n\n                if (mainView) {\n                    hotspotObserver.observe(mainView);\n                }\n\n                gallery._spFeatureHotspotObserver = hotspotObserver;\n            }\n\n            if (window.jQuery) {\n                jQuery(document).on(\n                    \"found_variation.spELCIGalleryHotspots reset_data.spELCIGalleryHotspots\",\n                    \"form.variations_form\",\n                    scheduleFeatureHotspotSync\n                );\n\n                jQuery(window).on(\n                    \"elementor\/frontend\/init.spELCIGalleryHotspots\",\n                    function () {\n                        setTimeout(\n                            scheduleFeatureHotspotSync,\n                            150\n                        );\n                    }\n                );\n            }\n\n            scheduleFeatureHotspotSync();\n        }\n\n        const thumbnailContainer = gallery.querySelector(\".sp-thumbnails\");\n        const thumbPrev = gallery.querySelector(\".sp-thumb-prev\");\n        const thumbNext = gallery.querySelector(\".sp-thumb-next\");\n\n        if (!slides.length || !thumbs.length) return;\n\n        let currentIndex = 0;\n\n        function showSlide(index) {\n            if (index < 0) index = slides.length - 1;\n            if (index >= slides.length) index = 0;\n\n            slides.forEach(function (slide, i) {\n                slide.classList.toggle(\"active\", i === index);\n            });\n\n            thumbs.forEach(function (thumb) {\n                const target = parseInt(thumb.getAttribute(\"data-target\"), 10);\n                thumb.classList.toggle(\"active\", target === index);\n            });\n\n            pageDots.forEach(function (dot, i) {\n                dot.classList.toggle(\"active\", i === index);\n            });\n\n            currentIndex = index;\n\n            if (index === 0) {\n                updateFeatureText();\n            } else {\n                const activeVariant = slides[index];\n                if (activeVariant) {\n                    updateVariantText(activeVariant, activeVariant.dataset.currentView || activeVariant.dataset.view || activeVariant.dataset.variant || \"\");\n                }\n            }\n\n            const activeThumb = Array.from(thumbs).find(function (thumb) {\n                return parseInt(thumb.getAttribute(\"data-target\"), 10) === index;\n            });\n\n            if (activeThumb && thumbnailContainer) {\n                const left = activeThumb.offsetLeft;\n                const right = left + activeThumb.offsetWidth;\n                const viewLeft = thumbnailContainer.scrollLeft;\n                const viewRight = viewLeft + thumbnailContainer.clientWidth;\n\n                if (left < viewLeft || right > viewRight) {\n                    thumbnailContainer.scrollTo({\n                        left: left - (thumbnailContainer.clientWidth \/ 2) + (activeThumb.offsetWidth \/ 2),\n                        behavior: \"smooth\"\n                    });\n                }\n            }\n\n            hotspots.forEach(function (hotspot) {\n                hotspot.classList.remove(\"is-open\");\n            });\n\n            if (index === 0) {\n                scheduleFeatureHotspotSync();\n            }\n        }\n\n        thumbs.forEach(function (thumb) {\n            thumb.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const target = parseInt(thumb.getAttribute(\"data-target\"), 10);\n                if (!isNaN(target)) showSlide(target);\n            });\n        });\n\n        pageDots.forEach(function (dot) {\n            dot.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const target = parseInt(dot.getAttribute(\"data-page\"), 10);\n                if (!isNaN(target)) showSlide(target);\n            });\n        });\n\n        function scrollThumbnailStrip(direction) {\n            if (!thumbnailContainer || !window.matchMedia(\"(max-width: 600px)\").matches) return;\n\n            const items = Array.from(thumbnailContainer.querySelectorAll(\".sp-thumb\"));\n            if (!items.length) return;\n\n            let activeIndex = items.findIndex(function (thumb) {\n                return thumb.classList.contains(\"active\");\n            });\n\n            if (activeIndex < 0) activeIndex = 0;\n\n            let targetIndex = activeIndex + (direction > 0 ? 1 : -1);\n            if (targetIndex < 0) targetIndex = items.length - 1;\n            if (targetIndex >= items.length) targetIndex = 0;\n\n            items[targetIndex].click();\n            items[targetIndex].scrollIntoView({\n                behavior: \"smooth\",\n                block: \"nearest\",\n                inline: \"center\"\n            });\n        }\n\n        if (thumbPrev) {\n            thumbPrev.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n                scrollThumbnailStrip(-1);\n            });\n        }\n\n        if (thumbNext) {\n            thumbNext.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n                scrollThumbnailStrip(1);\n            });\n        }\n\n        hotspots.forEach(function (hotspot) {\n            hotspot.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const isOpen = hotspot.classList.contains(\"is-open\");\n\n                hotspots.forEach(function (item) {\n                    item.classList.remove(\"is-open\");\n                });\n\n                if (!isOpen) hotspot.classList.add(\"is-open\");\n            });\n        });\n\n        document.addEventListener(\"click\", function (event) {\n            if (!gallery.contains(event.target)) {\n                hotspots.forEach(function (hotspot) {\n                    hotspot.classList.remove(\"is-open\");\n                });\n            }\n        });\n\n        \/* =================================================\n           DYNAMIC EDITABLE TITLE \/ SUBTITLE \/ PART NUMBER\n           Kicker is intentionally removed from every view.\n           ================================================= *\/\n\n        function getViewDataAttributeName(view, field) {\n            if (!view) return \"data-\" + field;\n            return \"data-\" + view.replace(\/\\s+\/g, \"-\") + \"-\" + field;\n        }\n\n        function getViewCopy(slide, view) {\n            if (!slide) {\n                return {\n                    title: \"\",\n                    subtitle: \"\",\n                    partNumber: \"\"\n                };\n            }\n\n            const variationView = view || \"\";\n            const isVariation = slide.classList.contains(\"sp-variant-slide\");\n\n            if (isVariation && variationView) {\n                return {\n                    title: slide.getAttribute(getViewDataAttributeName(variationView, \"title\")) || \"\",\n                    subtitle: slide.getAttribute(getViewDataAttributeName(variationView, \"subtitle\")) || \"\",\n                    partNumber: slide.getAttribute(getViewDataAttributeName(variationView, \"part-number\")) || \"\"\n                };\n            }\n\n            return {\n                title: slide.getAttribute(\"data-title\") || \"\",\n                subtitle: slide.getAttribute(\"data-subtitle\") || \"\",\n                partNumber: slide.getAttribute(\"data-part-number\") || \"\"\n            };\n        }\n\n        function updateVariantText(slide, view) {\n            const copy = getViewCopy(slide, view);\n            const mobileTitle = slide.querySelector(\".sp-mobile-variant-title .sp-slide-title\");\n            const mobileSubtitle = slide.querySelector(\".sp-mobile-variant-title .sp-slide-subtitle\");\n            const desktopTitle = slide.querySelector(\".sp-side-info .sp-slide-title\");\n            const desktopSubtitle = slide.querySelector(\".sp-side-info .sp-slide-subtitle\");\n            const partNumber = slide.querySelector(\".sp-part-number-value\");\n\n            if (mobileTitle) mobileTitle.textContent = copy.title;\n            if (mobileSubtitle) mobileSubtitle.textContent = copy.subtitle;\n            if (desktopTitle) desktopTitle.textContent = copy.title;\n            if (desktopSubtitle) desktopSubtitle.textContent = copy.subtitle;\n            if (partNumber) partNumber.textContent = copy.partNumber;\n        }\n\n        function updateFeatureText() {\n            const featureSlide = slides[0];\n            if (!featureSlide) return;\n\n            const copy = getViewCopy(featureSlide, \"\");\n            const title = featureSlide.querySelector(\".sp-slide-info .sp-slide-title\");\n            const subtitle = featureSlide.querySelector(\".sp-slide-info .sp-slide-subtitle\");\n            const partNumber = featureSlide.querySelector(\".sp-part-number-value\");\n\n            if (title) title.textContent = copy.title;\n            if (subtitle) subtitle.textContent = copy.subtitle;\n            if (partNumber) partNumber.textContent = copy.partNumber;\n        }\n\n        \/* =================================================\n           VARIATION IMAGE \/ EDITABLE COPY\n           Each variation uses the existing state-based\n           configuration\/toggle architecture.\n           ================================================= *\/\n\n        variantSlides.forEach(function (slide) {\n            const image = slide.querySelector(\".sp-variant-image\");\n            if (!image) return;\n\n            const initialView = slide.dataset.view || slide.dataset.variant || \"cordset-bag\";\n            slide.dataset.currentView = initialView;\n\n            function updateImage(selectedView) {\n                const view = selectedView || slide.dataset.currentView || initialView;\n                const source = slide.getAttribute(\"data-\" + view) || \"\";\n\n                slide.dataset.currentView = view;\n                updateVariantText(slide, view);\n                image.style.opacity = \"0\";\n\n                window.setTimeout(function () {\n                    if (source) {\n                        image.src = source;\n                        image.classList.remove(\"is-empty\");\n                    } else {\n                        image.removeAttribute(\"src\");\n                        image.classList.add(\"is-empty\");\n                    }\n\n                    image.style.opacity = \"1\";\n\n                    slide.querySelectorAll(\".sp-variant-toggle-btn\").forEach(function (button) {\n                        button.classList.toggle(\"active\", button.dataset.view === view);\n                    });\n\n                    const showingValue = slide.querySelector(\".sp-variant-showing-value\");\n                    if (showingValue) {\n                        const activeButton = slide.querySelector('.sp-variant-toggle-btn[data-view=\"' + view + '\"]');\n                        showingValue.textContent = activeButton\n                            ? activeButton.textContent.trim()\n                            : view.charAt(0).toUpperCase() + view.slice(1);\n                    }\n\n                    const existingModal = gallery.querySelector(\".sp-fullscreen-modal\");\n                    if (existingModal && existingModal.classList.contains(\"is-open\")) {\n                        refreshFullscreenModal();\n                    }\n                }, 90);\n            }\n\n            slide._setView = function (selectedView) {\n                slide.dataset.currentView = selectedView || initialView;\n                updateImage(slide.dataset.currentView);\n            };\n\n            slide.querySelectorAll(\".sp-variant-toggle-btn\").forEach(function (button) {\n                button.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    const selectedView = button.dataset.view || initialView;\n                    slide._setView(selectedView);\n                });\n            });\n\n            slide._setView(initialView);\n        });\n\n        \/* =================================================\n           VIEW FULL SCREEN + HOVER ZOOM\n           ================================================= *\/\n           \n        const fullscreenModal = document.createElement(\"div\");\n        fullscreenModal.className = \"sp-fullscreen-modal\";\n        fullscreenModal.setAttribute(\"aria-hidden\", \"true\");\n        fullscreenModal.innerHTML = `\n            <div class=\"sp-fullscreen-dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Product full screen view\">\n                <button type=\"button\" class=\"sp-fullscreen-close\" aria-label=\"Close full screen\">&times;<\/button>\n                <div class=\"sp-fullscreen-image-area\">\n                    <img class=\"sp-fullscreen-image\" alt=\"\">\n                <\/div>\n                <div class=\"sp-fullscreen-info\">\n                    <div class=\"sp-fullscreen-title\"><\/div>\n                    <div class=\"sp-fullscreen-description\"><\/div>\n                    <div class=\"sp-fullscreen-part-number\">PART NUMBER: <strong class=\"sp-fullscreen-part-number-value\"><\/strong><\/div>\n                    <div class=\"sp-fullscreen-variant-toggle\" aria-label=\"Variation configuration\"><\/div>\n                    <div class=\"sp-fullscreen-thumbnails\"><\/div>\n                <\/div>\n            <\/div>\n        `;\n\n        gallery.appendChild(fullscreenModal);\n\n        const fullscreenImage = fullscreenModal.querySelector(\".sp-fullscreen-image\");\n        const fullscreenTitle = fullscreenModal.querySelector(\".sp-fullscreen-title\");\n        const fullscreenDescription = fullscreenModal.querySelector(\".sp-fullscreen-description\");\n        const fullscreenPartNumber = fullscreenModal.querySelector(\".sp-fullscreen-part-number-value\");\n        const fullscreenThumbs = fullscreenModal.querySelector(\".sp-fullscreen-thumbnails\");\n        const fullscreenVariantToggle = fullscreenModal.querySelector(\".sp-fullscreen-variant-toggle\");\n        let fullscreenVariantButtons = [];\n        const fullscreenClose = fullscreenModal.querySelector(\".sp-fullscreen-close\");\n\n        \/* =================================================\n           FEATURE IMAGE \u2014 NORMAL VIEW \/ FULL SCREEN VIEW\n           Normal view and full screen use separate images.\n           ================================================= *\/\n        const FEATURE_FULLSCREEN_IMAGE = \"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/08\/SmartPlug-Cordset-Storage-Bag-2.png\";\n\n        function getActiveGalleryImage() {\n            const activeSlide = slides[currentIndex];\n            if (!activeSlide) return null;\n\n            if (currentIndex === 0) {\n                return activeSlide.querySelector(\".sp-main-image-clip img\");\n            }\n\n            return activeSlide.querySelector(\".sp-variant-image\");\n        }\n\n        function getActiveGalleryCopy() {\n            const activeSlide = slides[currentIndex];\n\n            if (!activeSlide) {\n                return {\n                    title: \"\",\n                    description: \"\",\n                    partNumber: \"\"\n                };\n            }\n\n            const view = activeSlide.classList.contains(\"sp-variant-slide\")\n                ? (activeSlide.dataset.currentView || activeSlide.dataset.view || activeSlide.dataset.variant || \"\")\n                : \"\";\n\n            const copy = getViewCopy(activeSlide, view);\n\n            return {\n                title: copy.title,\n                description: copy.subtitle,\n                partNumber: copy.partNumber\n            };\n        }\n\n        function applyFullscreenSettings() {\n            const dialog = fullscreenModal.querySelector(\".sp-fullscreen-dialog\");\n            if (!dialog) return;\n\n            dialog.style.setProperty(\"--sp-popup-width-desktop\", \"1100px\");\n            dialog.style.setProperty(\"--sp-popup-height-desktop\", \"520px\");\n            dialog.style.setProperty(\"--sp-popup-width-mobile\", \"calc(100vw - 16px)\");\n            dialog.style.setProperty(\"--sp-popup-height-mobile\", \"90vh\");\n            dialog.style.setProperty(\"--sp-popup-image-area-height-mobile\", \"54vh\");\n\n            fullscreenImage.style.setProperty(\"--sp-popup-image-width-desktop\", \"100%\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-height-desktop\", \"100%\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-x-desktop\", \"0px\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-y-desktop\", \"0px\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-width-mobile\", \"100%\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-height-mobile\", \"100%\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-x-mobile\", \"0px\");\n            fullscreenImage.style.setProperty(\"--sp-popup-image-y-mobile\", \"0px\");\n        }\n\n        function refreshFullscreenModal() {\n            const activeImage = getActiveGalleryImage();\n            if (!activeImage || !activeImage.src) return;\n\n            const copy = getActiveGalleryCopy();\n            const activeSlide = slides[currentIndex];\n            const isVariation = currentIndex >= 1 && activeSlide;\n            const view = isVariation\n                ? (activeSlide.dataset.currentView || activeSlide.dataset.view || activeSlide.dataset.variant || \"\")\n                : \"\";\n\n            const viewImage = isVariation\n                ? (activeSlide.getAttribute(\"data-\" + view) || \"\")\n                : FEATURE_FULLSCREEN_IMAGE;\n\n            applyFullscreenSettings();\n\n            fullscreenImage.src = viewImage || activeImage.currentSrc || activeImage.src;\n            fullscreenImage.alt = copy.title || activeImage.alt || \"\";\n            fullscreenTitle.textContent = copy.title || \"\";\n            fullscreenDescription.textContent = copy.description || \"\";\n\n            if (fullscreenPartNumber) {\n                fullscreenPartNumber.textContent = isVariation ? (copy.partNumber || \"\") : \"\";\n                fullscreenPartNumber.parentElement.style.display = isVariation && copy.partNumber ? \"\" : \"none\";\n            }\n\n            const isVariationSlide = currentIndex >= 1 && activeSlide && activeSlide.classList.contains(\"sp-variant-slide\");\n            if (fullscreenVariantToggle) {\n                const sourceButtons = isVariationSlide\n                    ? activeSlide.querySelectorAll(\".sp-variant-toggle-btn\")\n                    : [];\n\n                fullscreenVariantToggle.classList.toggle(\"is-visible\", isVariationSlide && sourceButtons.length > 0);\n\n                if (isVariationSlide && sourceButtons.length > 0) {\n\n                    fullscreenVariantToggle.innerHTML = \"\";\n                    fullscreenVariantButtons = [];\n\n                    sourceButtons.forEach(function (sourceButton) {\n                        const button = document.createElement(\"button\");\n                        button.type = \"button\";\n                        button.className = \"sp-fullscreen-variant-btn\";\n                        button.textContent = sourceButton.textContent.trim();\n                        button.dataset.view = sourceButton.dataset.view || \"\";\n                        button.classList.toggle(\"active\", button.dataset.view === view);\n                        fullscreenVariantToggle.appendChild(button);\n                        fullscreenVariantButtons.push(button);\n                    });\n\n                    fullscreenVariantToggle.setAttribute(\n                        \"aria-label\",\n                        activeSlide.dataset.variant === \"cordset-bag-variation\"\n                            ? \"Cordset bag configuration\"\n                            : \"Cordset options\"\n                    );\n                }\n            }\n\n            fullscreenThumbs.innerHTML = \"\";\n\n            thumbs.forEach(function (thumb) {\n                const sourceImage = thumb.querySelector(\"img\");\n                if (!sourceImage) return;\n\n                const modalThumb = document.createElement(\"button\");\n                modalThumb.type = \"button\";\n                modalThumb.className = \"sp-fullscreen-thumb\";\n                modalThumb.setAttribute(\"aria-label\", thumb.getAttribute(\"aria-label\") || \"View product image\");\n\n                const modalThumbImage = document.createElement(\"img\");\n                modalThumbImage.src = sourceImage.currentSrc || sourceImage.src;\n                modalThumbImage.alt = sourceImage.alt || \"\";\n                modalThumb.appendChild(modalThumbImage);\n\n                const thumbTarget = parseInt(thumb.getAttribute(\"data-target\"), 10);\n                if (thumbTarget === currentIndex) modalThumb.classList.add(\"active\");\n\n                modalThumb.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    showSlide(thumbTarget);\n                    window.setTimeout(refreshFullscreenModal, 110);\n                });\n\n                fullscreenThumbs.appendChild(modalThumb);\n            });\n        }\n\n        let fullscreenScrollTop = 0;\n        let fullscreenScrollLeft = 0;\n        let fullscreenBodyPaddingRight = \"\";\n\n        function openFullscreenModal() {\n            refreshFullscreenModal();\n\n            fullscreenScrollTop = window.scrollY || window.pageYOffset || 0;\n            fullscreenScrollLeft = window.scrollX || window.pageXOffset || 0;\n            fullscreenBodyPaddingRight = document.body.style.paddingRight;\n\n            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n            if (scrollbarWidth > 0) {\n                document.body.style.paddingRight = scrollbarWidth + \"px\";\n            }\n\n            fullscreenModal.classList.add(\"is-open\");\n            fullscreenModal.setAttribute(\"aria-hidden\", \"false\");\n            document.body.style.overflow = \"hidden\";\n        }\n\n        function closeFullscreenModal() {\n            fullscreenModal.classList.remove(\"is-open\");\n            fullscreenModal.setAttribute(\"aria-hidden\", \"true\");\n            document.body.style.overflow = \"\";\n            document.body.style.paddingRight = fullscreenBodyPaddingRight;\n\n            window.scrollTo({\n                top: fullscreenScrollTop,\n                left: fullscreenScrollLeft,\n                behavior: \"auto\"\n            });\n        }\n\n        const featureFullscreenTrigger = gallery.querySelector(\".sp-feature-fullscreen-trigger\");\n        if (featureFullscreenTrigger) {\n            featureFullscreenTrigger.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n                openFullscreenModal();\n            });\n        }\n\n        fullscreenClose.addEventListener(\"click\", function (event) {\n            event.preventDefault();\n            closeFullscreenModal();\n        });\n\n        fullscreenVariantToggle.addEventListener(\"click\", function (event) {\n            event.preventDefault();\n            event.stopPropagation();\n\n            const button = event.target.closest(\".sp-fullscreen-variant-btn\");\n            if (!button || button.disabled) return;\n\n            const activeSlide = slides[currentIndex];\n            if (!activeSlide || !activeSlide.classList.contains(\"sp-variant-slide\")) return;\n\n            const selectedView = button.dataset.view || activeSlide.dataset.currentView || activeSlide.dataset.view || \"\";\n            activeSlide.dataset.currentView = selectedView;\n\n            if (typeof activeSlide._setView === \"function\") {\n                activeSlide._setView(selectedView);\n            } else {\n                const image = activeSlide.querySelector(\".sp-variant-image\");\n                const source = activeSlide.getAttribute(\"data-\" + selectedView) || \"\";\n                if (image && source) image.src = source;\n                updateVariantText(activeSlide, selectedView);\n            }\n\n            fullscreenVariantButtons.forEach(function (item) {\n                item.classList.toggle(\"active\", item.dataset.view === selectedView);\n            });\n\n            window.setTimeout(refreshFullscreenModal, 110);\n        });\n\n        fullscreenModal.addEventListener(\"click\", function (event) {\n            if (event.target === fullscreenModal) closeFullscreenModal();\n        });\n\n        document.addEventListener(\"keydown\", function (event) {\n            if (event.key === \"Escape\" && fullscreenModal.classList.contains(\"is-open\")) {\n                closeFullscreenModal();\n            }\n        });\n\n        function addFullscreenButtons() {\n            variantSlides.forEach(function (slide) {\n                const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\n                if (!imageWrap || slide.querySelector(\".sp-fullscreen-trigger\")) return;\n\n                const button = document.createElement(\"button\");\n                button.type = \"button\";\n                button.className = \"sp-fullscreen-trigger\";\n                button.textContent = \"View Full Screen\";\n                button.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    openFullscreenModal();\n                });\n\n                const sideInfo = slide.querySelector(\".sp-side-info\");\n\n                if (sideInfo) {\n                    const partNumber = sideInfo.querySelector(\".sp-part-number\");\n                    if (partNumber) {\n                        partNumber.insertAdjacentElement(\"afterend\", button);\n                    } else {\n                        sideInfo.appendChild(button);\n                    }\n                } else {\n                    imageWrap.appendChild(button);\n                }\n            });\n        }\n\n        function setupHoverZoom() {\n            const zoomMediaQuery = window.matchMedia(\"(min-width:601px) and (pointer:fine)\");\n\n            function clamp01(value) {\n                return Math.max(0, Math.min(1, value));\n            }\n\n            variantSlides.forEach(function (slide) {\n                const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\n                const image = slide.querySelector(\".sp-variant-image\");\n                if (!imageWrap || !image || imageWrap.dataset.zoomInitialized === \"true\") return;\n\n                imageWrap.dataset.zoomInitialized = \"true\";\n\n                const preview = document.createElement(\"div\");\n                preview.className = \"sp-zoom-preview\";\n\n                const previewImage = document.createElement(\"img\");\n                previewImage.alt = \"\";\n                previewImage.setAttribute(\"draggable\", \"false\");\n                preview.appendChild(previewImage);\n                imageWrap.appendChild(preview);\n\n                let rafId = 0;\n\n                function syncPreviewImage() {\n                    const source = image.currentSrc || image.src;\n                    if (source && previewImage.src !== source) {\n                        previewImage.src = source;\n                    }\n                }\n\n                function updatePreview(clientX, clientY) {\n                    if (!zoomMediaQuery.matches) return;\n\n                    const imageRect = image.getBoundingClientRect();\n                    const previewRect = preview.getBoundingClientRect();\n\n                    if (!imageRect.width || !imageRect.height || !previewRect.width || !previewRect.height) {\n                        return;\n                    }\n\n                    const x = clamp01((clientX - imageRect.left) \/ imageRect.width);\n                    const y = clamp01((clientY - imageRect.top) \/ imageRect.height);\n\n                    \/*\n                     * Preview image = 200% of the preview viewport.\n                     * Its travel range is exactly one viewport in each axis.\n                     * Pixel offsets keep the zoom position synchronized with\n                     * the cursor rather than using drifting percentage math.\n                     *\/\n                    const left = (previewRect.width * 0.5) - (x * previewRect.width * 2);\n                    const top = (previewRect.height * 0.5) - (y * previewRect.height * 2);\n\n                    previewImage.style.left = left + \"px\";\n                    previewImage.style.top = top + \"px\";\n                }\n\n                function queuePreviewPosition(clientX, clientY) {\n                    window.cancelAnimationFrame(rafId);\n                    rafId = window.requestAnimationFrame(function () {\n                        updatePreview(clientX, clientY);\n                    });\n                }\n\n                image.addEventListener(\"load\", syncPreviewImage);\n                syncPreviewImage();\n\n                image.addEventListener(\"mouseenter\", function (event) {\n                    if (!zoomMediaQuery.matches) return;\n                    syncPreviewImage();\n                    imageWrap.classList.add(\"sp-zoom-active\");\n                    updatePreview(event.clientX, event.clientY);\n                });\n\n                image.addEventListener(\"mousemove\", function (event) {\n                    if (!zoomMediaQuery.matches) return;\n                    queuePreviewPosition(event.clientX, event.clientY);\n                });\n\n                image.addEventListener(\"mouseleave\", function () {\n                    window.cancelAnimationFrame(rafId);\n                    imageWrap.classList.remove(\"sp-zoom-active\");\n                });\n\n                const resetZoom = function () {\n                    window.cancelAnimationFrame(rafId);\n                    imageWrap.classList.remove(\"sp-zoom-active\");\n                };\n\n                if (zoomMediaQuery.addEventListener) {\n                    zoomMediaQuery.addEventListener(\"change\", resetZoom);\n                } else if (zoomMediaQuery.addListener) {\n                    zoomMediaQuery.addListener(resetZoom);\n                }\n            });\n        }\n\n        setupFeatureHotspotObservers();\n        scheduleFeatureHotspotSync();\n\n        addFullscreenButtons();\n        setupHoverZoom();\n\n        \/* WooCommerce variation compatibility *\/\n        if (window.jQuery) {\n            jQuery(document).on(\n                \"found_variation.spELCIGallery\",\n                \"form.variations_form\",\n                function (event, variation) {\n                    if (!variation || !variation.image || !variation.image.src) return;\n\n                    const variationImage = variation.image.src;\n\n                    thumbs.forEach(function (thumb, index) {\n                        const image = thumb.querySelector(\"img\");\n                        if (!image) return;\n\n                        const thumbImage = image.currentSrc || image.src;\n\n                        if (\n                            thumbImage === variationImage ||\n                            thumbImage.includes(variationImage) ||\n                            variationImage.includes(thumbImage)\n                        ) {\n                            showSlide(index);\n                        }\n                    });\n                }\n            );\n        }\n\n        showSlide(0);\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\"DOMContentLoaded\", initSmartPlugELCIGallery);\n    } else {\n        initSmartPlugELCIGallery();\n    }\n\n    if (window.jQuery) {\n        jQuery(window).on(\"elementor\/frontend\/init\", function () {\n            setTimeout(initSmartPlugELCIGallery, 150);\n        });\n    }\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a272c0a 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=\"a272c0a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7215ebd elementor-widget elementor-widget-heading\" data-id=\"7215ebd\" 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\">Cordset Storage Bag<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1801f52 elementor-widget elementor-widget-text-editor\" data-id=\"1801f52\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>The SmartPlug Cordset Storage Bag is designed to keep your SmartPlug cordset organized and protected when not in use. It features a clear see-through window for easy identification of the bag&#8217;s contents, two durable carry straps for a comfortable grip, and an embroidered SmartPlug logo for a premium finish. A heavy-duty zipper helps protect the cord from dirt and the elements, ensuring long-lasting durability. Please note that this storage bag is not compatible with the 50 ft 50 Amp cord.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7d17b6 elementor-widget elementor-widget-button\" data-id=\"b7d17b6\" 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 Cordset Storage Bag 1 Durable MaterialMade from rugged weather-resistance fabric for long-lasting use. 2 Carrying HandleStrudy handle makes it easy to carry and transport your cordset anywhere. 3 Heavy-Duty ZipperDurable zipper keeps your cordset securely stored and protected from dust and moisture. Cordset Bag View Full Screen Cordset Bag 25ft \/ 50ft Cordset Bag 25ft \/ 50ft PART NUMBER: &#10094; Features Cordset Bag &#10095; Cordset Storage Bag The SmartPlug Cordset Storage Bag is designed to keep your SmartPlug cordset organized and protected when not in use. It features a clear see-through window for easy identification of the bag&#8217;s contents, two durable carry straps for a comfortable grip, and an embroidered SmartPlug logo for a premium finish. A heavy-duty zipper helps protect the cord from dirt and the elements, ensuring long-lasting durability. Please note that this storage bag is not compatible with the 50 ft 50 Amp cord. 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-11189","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11189","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=11189"}],"version-history":[{"count":115,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11189\/revisions"}],"predecessor-version":[{"id":20213,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11189\/revisions\/20213"}],"wp:attachment":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/media?parent=11189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}