{"id":11314,"date":"2025-12-19T21:11:25","date_gmt":"2025-12-19T21:11:25","guid":{"rendered":"https:\/\/dev.smartplug.com\/staging\/?page_id=11314"},"modified":"2026-09-29T19:36:29","modified_gmt":"2026-09-29T19:36:29","slug":"smartplug-weathercap","status":"publish","type":"page","link":"https:\/\/dev.smartplug.com\/staging\/smartplug-weathercap\/","title":{"rendered":"SmartPlug Weathercap"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11314\" class=\"elementor elementor-11314\">\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 Weathercap<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-88192ed e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"88192ed\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4723124 e-grid e-con-full wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"4723124\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-75c0c77 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"75c0c77\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0f1f6b sp-hotspot-image elementor-widget elementor-widget-html\" data-id=\"c0f1f6b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMARTPLUG WEATHER CAP GALLERY -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<div id=\"sp-weather-caps-gallery\">\n    <div class=\"sp-main-view\">\n\n        <!-- =========================================================\n        FEATURES\n        ========================================================== -->\n        <div class=\"sp-gallery-slide active\"\n            data-slide=\"0\"\n            data-kicker=\"SMARTPLUG WEATHER CAP\"\n            data-title=\"KEY FEATURES\"\n            data-subtitle=\"Click the numbered points to explore the Weather Cap\"\n            data-part-number=\"A1001\"\n        >\n            <div class=\"sp-product-image-wrap sp-main-product sp-hotspot-image\" style=\"\n                --image-x-desktop:0px;\n                --image-y-desktop:20px;\n                --image-scale-desktop:1.8;\n                --image-x-mobile:0px;\n                --image-y-mobile:12px;\n                --image-scale-mobile:2;\n            \">\n                <div class=\"sp-main-image-clip\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/06\/SmartPlug-Weathercap-1-1.png\"\n                         alt=\"SmartPlug Weather Cap\">\n                <\/div>\n\n                <!-- Protective Cover -->\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                    --top:7%;\n                    --left:35%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-mobile:.8;\n                    --tooltip-x-desktop:0px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n                    --tooltip-x-mobile:0px;\n                    --tooltip-y-mobile:0px;\n                    --tooltip-scale-mobile:1;\n                    --dot-color:#DF6B30;\n                    --number-color:#ffffff;\n                    --tooltip-bg:#DF6B30;\n                    --tooltip-width:220px;\n                    --dot-size:34px;\n                    --number-size:14px;\n                \">\n                    <div class=\"sp-dot\"><span class=\"sp-number\">1<\/span><\/div>\n                    <div class=\"sp-tooltip\"><strong>Protective Cover<\/strong><br>Protects against moisture, dirt, and debris.<\/div>\n                <\/div>\n\n                <!-- Retention Strap -->\n                <div class=\"sp-hotspot\" tabindex=\"0\" style=\"\n                    --top:63%;\n                    --left:32%;\n                    --hotspot-x:0px;\n                    --hotspot-y:0px;\n                    --hotspot-scale-desktop:1;\n                    --hotspot-scale-mobile:.8;\n                    --tooltip-x-desktop:0px;\n                    --tooltip-y-desktop:0px;\n                    --tooltip-scale-desktop:1;\n                    --tooltip-x-mobile:0px;\n                    --tooltip-y-mobile:0px;\n                    --tooltip-scale-mobile:1;\n                    --dot-color:#DF6B30;\n                    --number-color:#ffffff;\n                    --tooltip-bg:#DF6B30;\n                    --tooltip-width:240px;\n                    --dot-size:34px;\n                    --number-size:16px;\n                \">\n                    <div class=\"sp-dot\"><span class=\"sp-number\">2<\/span><\/div>\n                    <div class=\"sp-tooltip\"><strong>Retention Strap<\/strong><br>Keeps the cover attached and secure.<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"sp-slide-info\">\n                <div class=\"sp-slide-title\">KEY FEATURES<\/div>\n                <div class=\"sp-slide-subtitle\">Click the numbered points to explore the Weather Cap<\/div>\n               \n            <\/div>\n        <\/div>\n\n        <!-- =========================================================\n        FIRST VARIATION \u2014 FRONT \/ BACK\n        ========================================================== -->\n        <div class=\"sp-gallery-slide sp-variant-slide\"\n            data-slide=\"1\"\n            data-variant=\"first\"\n            data-view=\"Front\"\n            data-Front=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Weathercap-Front.png\"\n            data-Back=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Weathercap-Back.png\"\n\n            data-Front-title=\"WEATHER CAP\"\n            data-Front-subtitle=\"Front\"\n            data-Front-part-number=\"A1001\"\n\n            data-Back-title=\"WEATHER CAP\"\n            data-Back-subtitle=\"Back\"\n            data-Back-part-number=\"A1001\"\n        >\n            <div class=\"sp-variant-layout\">\n                <div class=\"sp-mobile-variant-title\">\n                    <div class=\"sp-slide-kicker\">SMARTPLUG WEATHERCAP<\/div>\n                    <div class=\"sp-slide-title\">WEATHERCAP<\/div>\n                    <div class=\"sp-slide-subtitle\">Front<\/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\/Weathercap-Front.png\"\n                         alt=\"SmartPlug Weather Cap Front\"\n                         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:-20px;\n                            --image-scale-mobile:1.1;\n                         \">\n                <\/div>\n\n                <div class=\"sp-slide-info sp-side-info\">\n                    <div class=\"sp-slide-kicker\">SMARTPLUG WEATHERCAP<\/div>\n                    <div class=\"sp-slide-title\">WEATHERCAP<\/div>\n                    <div class=\"sp-slide-subtitle\">Front<\/div>\n\n                    <div class=\"sp-amp-label\">SELECT VIEW<\/div>\n                    <div class=\"sp-amp-toggle\"\n                         role=\"group\"\n                         aria-label=\"Weather Cap Front or Back view\">\n                        <button type=\"button\" class=\"sp-amp-btn active\" data-view=\"Front\">Front<\/button>\n                        <button type=\"button\" class=\"sp-amp-btn\" data-view=\"Back\">Back<\/button>\n                    <\/div>\n\n                    <div class=\"sp-current-amp\" aria-live=\"polite\">\n                        Showing <strong>Front<\/strong>\n                    <\/div>\n\n                    <div class=\"sp-part-number\">\n                        PART NUMBER: <strong class=\"sp-part-number-value\"><\/strong>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- =========================================================\n        SECOND VARIATION \u2014 ATTACHED \/ NOT-ATTACHED\n        ========================================================== -->\n        <div class=\"sp-gallery-slide sp-variant-slide\"\n            data-slide=\"2\"\n            data-variant=\"second\"\n            data-view=\"Attached\"\n            data-Attached=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Connector-Weathercap-Attached.png\"\n            data-Not-Attached=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Connector-Weathercap-Not-Attached.png\"\n\n            data-Attached-title=\"WEATHER CAP\"\n            data-Attached-subtitle=\"Attached\"\n            data-Attached-part-number=\"A1001\"\n\n            data-Not-Attached-title=\"WEATHER CAP\"\n            data-Not-Attached-subtitle=\"Not-Attached\"\n            data-Not-Attached-part-number=\"A1001\"\n        >\n            <div class=\"sp-variant-layout\">\n                <div class=\"sp-mobile-variant-title\">\n                    <div class=\"sp-slide-kicker\">SMARTPLUG WEATHER CAP<\/div>\n                    <div class=\"sp-slide-title\">WEATHER CAP<\/div>\n                    <div class=\"sp-slide-subtitle\">Attached<\/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\/Connector-Weathercap-Attached.png\"\n                         alt=\"SmartPlug Weather Cap Connector Attached\"\n                         style=\"\n                            --image-x-desktop:0px;\n                            --image-y-desktop:0px;\n                            --image-scale-desktop:1.1;\n                            --image-x-mobile:0px;\n                            --image-y-mobile:-20px;\n                            --image-scale-mobile:1.1;\n                         \">\n                <\/div>\n\n                <div class=\"sp-slide-info sp-side-info\">\n                    <div class=\"sp-slide-kicker\">SMARTPLUG WEATHER CAP<\/div>\n                    <div class=\"sp-slide-title\">WEATHER CAP<\/div>\n                    <div class=\"sp-slide-subtitle\">Attached<\/div>\n\n                    <div class=\"sp-amp-label\">SELECT VIEW<\/div>\n                    <div class=\"sp-amp-toggle\"\n                         role=\"group\"\n                         aria-label=\"Weather Cap Attached or Not-Attached view\">\n                        <button type=\"button\" class=\"sp-amp-btn active\" data-view=\"Attached\">Attached<\/button>\n                        <button type=\"button\" class=\"sp-amp-btn\" data-view=\"Not-Attached\">Not-Attached<\/button>\n                    <\/div>\n\n                    <div class=\"sp-current-amp\" aria-live=\"polite\">\n                        Showing <strong>Attached<\/strong>\n                    <\/div>\n\n                    <div class=\"sp-part-number\">\n                        PART NUMBER: <strong class=\"sp-part-number-value\"><\/strong>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <!-- =========================================================\n    EXACTLY 3 MAIN THUMBNAILS\n    ========================================================== -->\n    <div class=\"sp-product-selector\">\n        <button type=\"button\"\n                class=\"sp-thumb-nav sp-thumb-prev\"\n                aria-label=\"Previous product image\">\n            &#10094;\n        <\/button>\n\n        <div class=\"sp-thumbnails\">\n            <button type=\"button\"\n                    class=\"sp-thumb sp-feature-thumb active\"\n                    data-target=\"0\"\n                    aria-label=\"View Weather Cap features\">\n                <span class=\"sp-thumb-image\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Weathercap-Front.png\"\n                         alt=\"SmartPlug Weather Cap\">\n                <\/span>\n                <span class=\"sp-thumb-label\">Features<\/span>\n            <\/button>\n\n            <button type=\"button\"\n                    class=\"sp-thumb\"\n                    data-target=\"1\"\n                    aria-label=\"View Weather Cap First Variation\">\n                <span class=\"sp-thumb-image\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Weathercap-Front.png\"\n                         alt=\"SmartPlug Weather Cap Front\">\n                <\/span>\n                <span class=\"sp-thumb-label\">Front & Back<\/span>\n            <\/button>\n\n            <button type=\"button\"\n                    class=\"sp-thumb\"\n                    data-target=\"2\"\n                    aria-label=\"View Weather Cap Second Variation\">\n                <span class=\"sp-thumb-image\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.smartplug.com\/staging\/wp-content\/uploads\/2026\/09\/Connector-Weathercap-Attached.png\"\n                         alt=\"SmartPlug Weather Cap Connector Attached\">\n                <\/span>\n                <span class=\"sp-thumb-label\">In Use<\/span>\n            <\/button>\n        <\/div>\n\n        <button type=\"button\"\n                class=\"sp-thumb-nav sp-thumb-next\"\n                aria-label=\"Next product image\">\n            &#10095;\n        <\/button>\n    <\/div>\n\n    <!-- EXACTLY 3 PAGINATION DOTS -->\n    <div class=\"sp-gallery-pagination\"\n         aria-label=\"Product gallery pagination\">\n        <button type=\"button\"\n                class=\"sp-page-dot active\"\n                data-page=\"0\"\n                aria-label=\"Go to features\">\n        <\/button>\n        <button type=\"button\"\n                class=\"sp-page-dot\"\n                data-page=\"1\"\n                aria-label=\"Go to First Variation\">\n        <\/button>\n        <button type=\"button\"\n                class=\"sp-page-dot\"\n                data-page=\"2\"\n                aria-label=\"Go to Second Variation\">\n        <\/button>\n    <\/div>\n<\/div>\n\n<style>\n\n\/* =========================================================\nSMARTPLUG WEATHER CAP GALLERY\nAmazon-inspired product selector\n========================================================= *\/\n\n#sp-weather-caps-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-weather-caps-gallery *,\n#sp-weather-caps-gallery *::before,\n#sp-weather-caps-gallery *::after {\n    box-sizing: border-box;\n}\n\n\/* =========================================================\nMAIN VIEW\n========================================================= *\/\n\n#sp-weather-caps-gallery .sp-main-view {\n    position: relative;\n    width: 100%;\n    height: 430px;\n    overflow: visible;\n}\n\n#sp-weather-caps-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-weather-caps-gallery .sp-gallery-slide.active {\n    display: flex;\n}\n\n\/* =========================================================\nFEATURE IMAGE\n========================================================= *\/\n\n#sp-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-amp-btn:last-child { border-right: 0; }\n#sp-weather-caps-gallery .sp-amp-btn.active { background: var(--sp-orange); color: #fff; }\n#sp-weather-caps-gallery .sp-amp-btn:disabled { background: #f2f2f2; color: #aaa; cursor: not-allowed; }\n\n#sp-weather-caps-gallery .sp-current-amp {\n    margin-top: 8px;\n    color: #555;\n    font-size: 12px;\n}\n\n#sp-weather-caps-gallery .sp-side-info .sp-part-number { margin-top: 10px; }\n\n#sp-weather-caps-gallery .sp-mobile-variant-title {\n    display: none;\n}\n\n#sp-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-variant-image.is-empty {\n    visibility: hidden;\n}\n\n#sp-weather-caps-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-weather-caps-gallery .sp-part-number strong {\n    color: var(--sp-dark);\n}\n\n\/* =========================================================\nHOTSPOTS\n========================================================= *\/\n\n#sp-weather-caps-gallery .sp-hotspot {\n    position: absolute;\n    z-index: 1;\n    top: var(--sp-hotspot-top-px, var(--top));\n    left: var(--sp-hotspot-left-px, var(--left));\n    transform:\n    translate(-50%, -50%)\n    scale(var(--hotspot-scale-desktop));\n    transform-origin: center center;\n    outline: none;\n    transition: top .18s ease, left .18s ease, transform .18s ease;\n    will-change: top, left, transform;\n}\n\n#sp-weather-caps-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-weather-caps-gallery .sp-number {\n    color: var(--number-color);\n    font-size: 13px;\n    font-weight: 700;\n    line-height: 1;\n}\n\n#sp-weather-caps-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-weather-caps-gallery .sp-hotspot:hover .sp-tooltip,\n#sp-weather-caps-gallery .sp-hotspot:focus-visible .sp-tooltip,\n#sp-weather-caps-gallery .sp-hotspot.is-open .sp-tooltip {\n    opacity: 1;\n    visibility: visible;\n}\n\n\/* =========================================================\nAMAZON-STYLE PRODUCT SELECTOR\n========================================================= *\/\n\n#sp-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-thumbnails::-webkit-scrollbar {\n    display: none;\n}\n\n#sp-weather-caps-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-weather-caps-gallery .sp-thumb:hover {\n    border-color: var(--sp-orange);\n    transform: translateY(-1px);\n}\n\n#sp-weather-caps-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-weather-caps-gallery .sp-thumb:focus {\n    outline: none;\n}\n\n#sp-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-feature-thumb .sp-thumb-part {\n    visibility: hidden;\n}\n\n\/* =========================================================\nTHUMBNAIL ARROWS\n========================================================= *\/\n\n#sp-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-page-dot:hover,\n#sp-weather-caps-gallery .sp-page-dot.active {\n    background: var(--sp-orange);\n}\n\n#sp-weather-caps-gallery .sp-page-dot.active {\n    transform: scale(1.25);\n}\n\n\/* =========================================================\nFULL SCREEN VIEW + HOVER ZOOM\n========================================================= *\/\n\n#sp-weather-caps-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: 0;\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-weather-caps-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\n    display: none;\n}\n\n#sp-weather-caps-gallery .sp-fullscreen-trigger:hover {\n    border-color: var(--sp-orange);\n    color: var(--sp-orange);\n}\n\n#sp-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-fullscreen-modal.is-open {\n    display: flex;\n}\n\n#sp-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-fullscreen-description {\n    margin-top: 8px;\n    color: #666;\n    font-size: 12px;\n    line-height: 1.45;\n}\n\n#sp-weather-caps-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-weather-caps-gallery .sp-fullscreen-part-number strong {\n    color: var(--sp-dark);\n}\n\n#sp-weather-caps-gallery .sp-fullscreen-amp-wrap {\n    display: none;\n    margin-top: 14px;\n}\n\n#sp-weather-caps-gallery .sp-fullscreen-amp-wrap.is-visible {\n    display: block;\n}\n\n#sp-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-fullscreen-amp-btn.active {\n    background: var(--sp-orange);\n    color: #fff;\n}\n\n#sp-weather-caps-gallery .sp-fullscreen-amp-btn:disabled {\n    background: #f2f2f2;\n    color: #aaa;\n    cursor: not-allowed;\n}\n\n#sp-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-fullscreen-thumb.active {\n    border: 2px solid var(--sp-orange);\n}\n\n#sp-weather-caps-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-weather-caps-gallery .sp-fullscreen-trigger {\n        display: none;\n    }\n\n    #sp-weather-caps-gallery .sp-zoom-preview {\n        display: none;\n    }\n\n    #sp-weather-caps-gallery .sp-fullscreen-modal {\n        padding: 8px;\n    }\n\n    #sp-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-fullscreen-info {\n        padding: 0 4px 4px;\n        overflow: visible;\n    }\n\n    #sp-weather-caps-gallery .sp-fullscreen-title {\n        font-size: 25px;\n    }\n\n    #sp-weather-caps-gallery .sp-fullscreen-description {\n        font-size: 10px;\n    }\n\n    #sp-weather-caps-gallery .sp-fullscreen-part-number {\n        font-size: 9px;\n    }\n\n    #sp-weather-caps-gallery .sp-fullscreen-amp-wrap {\n        margin-top: 8px;\n    }\n\n    #sp-weather-caps-gallery .sp-fullscreen-amp-label {\n        font-size: 9px;\n        margin-bottom: 4px;\n    }\n\n    #sp-weather-caps-gallery .sp-fullscreen-amp-toggle {\n        width: 250px;\n    }\n\n    #sp-weather-caps-gallery .sp-fullscreen-amp-btn {\n        min-height: 30px;\n        padding: 6px 8px;\n        font-size: 10px;\n    }\n\n    #sp-weather-caps-gallery .sp-fullscreen-thumbnails {\n        margin-top: 10px;\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n        gap: 5px;\n    }\n\n    #sp-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-main-view {\n        width: 100%;\n        height: auto;\n        min-height: 0;\n        overflow: visible;\n    }\n\n    #sp-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-main-image-clip {\n        inset: 0;\n    }\n\n    #sp-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-mobile-variant-title .sp-slide-kicker {\n        margin: 0;\n        font-size: 8px;\n        line-height: 1.1;\n    }\n\n    #sp-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-side-info .sp-fullscreen-trigger {\n        display: inline-flex;\n        margin-left: auto;\n        margin-right: auto;\n    }\n\n    #sp-weather-caps-gallery .sp-mobile-variant-title .sp-fullscreen-trigger {\n        display: none;\n    }\n\n    \/* PRODUCT IMAGEEvery variation uses the responsive viewing frame. *\/\n    #sp-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-slide-info .sp-fullscreen-trigger {\n        margin-left: auto;\n        margin-right: auto;\n    }\n\n    \/* PRODUCT INFORMATION \/ CONTROLS *\/\n    #sp-weather-caps-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-weather-caps-gallery .sp-side-info .sp-slide-kicker,\n    #sp-weather-caps-gallery .sp-side-info .sp-slide-title,\n    #sp-weather-caps-gallery .sp-side-info .sp-slide-subtitle {\n        display: none;\n    }\n\n    \/* View selector label *\/\n    #sp-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-side-info .sp-part-number {\n        display: inline-block;\n        margin: 5px auto 0;\n        padding: 0;\n        color: #555;\n        font-size: 10px;\n        letter-spacing: .4px;\n        text-align: center;\n    }\n\n    #sp-weather-caps-gallery .sp-part-number strong {\n        color: var(--sp-dark);\n    }\n\n    #sp-weather-caps-gallery .sp-variant-image.is-empty {\n        visibility: hidden;\n    }\n\n    \/* HOTSPOTS *\/\n    #sp-weather-caps-gallery .sp-hotspot {\n        top: var(--sp-hotspot-top-px, var(--top));\n        left: var(--sp-hotspot-left-px, var(--left));\n        transform:\n            translate(-50%, -50%)\n            scale(var(--hotspot-scale-mobile));\n    }\n\n    #sp-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-thumbnails::-webkit-scrollbar {\n        display: none;\n    }\n\n    #sp-weather-caps-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-weather-caps-gallery .sp-thumb.active {\n        border: 2px solid var(--sp-orange);\n    }\n\n    #sp-weather-caps-gallery .sp-thumb-image {\n        width: 100%;\n        height: 45px;\n        min-height: 45px;\n        border-radius: 3px;\n    }\n\n    #sp-weather-caps-gallery .sp-thumb-label {\n        font-size: 8px;\n        line-height: 1.05;\n    }\n\n    #sp-weather-caps-gallery .sp-thumb-part {\n        font-size: 7px;\n        line-height: 1;\n    }\n\n    #sp-weather-caps-gallery .sp-thumb-view {\n        font-size: 7px;\n        line-height: 1;\n    }\n\n    \/* PAGINATION *\/\n    #sp-weather-caps-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-weather-caps-gallery .sp-page-dot {\n        width: 6px;\n        height: 6px;\n    }\n\n    \/* WEATHER CAP VIEW TOGGLE *\/\n    #sp-weather-caps-gallery .sp-side-info .sp-amp-toggle {\n        width: 240px;\n        max-width: 240px;\n    }\n\n    #sp-weather-caps-gallery .sp-side-info .sp-amp-btn {\n        min-width: 0;\n        white-space: nowrap;\n    }\n\n    \/* LOCKED RESPONSIVE VIEWING FRAME *\/\n    #sp-weather-caps-gallery .sp-main-view {\n        overflow: visible;\n    }\n\n    #sp-weather-caps-gallery .sp-gallery-slide {\n        height: 100%;\n        min-height: 0;\n    }\n\n    #sp-weather-caps-gallery .sp-main-product,\n    #sp-weather-caps-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-weather-caps-gallery .sp-variant-image-wrap img,\n    #sp-weather-caps-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      view, 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-weather-caps-gallery .sp-main-view{height:430px;min-height:430px;}\n#sp-weather-caps-gallery .sp-gallery-slide{height:100%;min-height:430px;}\n#sp-weather-caps-gallery .sp-variant-layout{height:100%;min-height:0;}\n#sp-weather-caps-gallery .sp-variant-image-wrap{height:400px;min-height:400px;flex:0 0 400px;}\n#sp-weather-caps-gallery .sp-side-info{min-height:220px;}\n#sp-weather-caps-gallery .sp-amp-toggle{min-height:30px;height:30px;}\n#sp-weather-caps-gallery .sp-fullscreen-trigger{display:inline-flex;position:static;margin-top:7px;}\n\n\/* MOBILE \u2014 FIXED TITLE \/ IMAGE \/ CONTROLS SPACING *\/\n@media (max-width:767px){\n    #sp-weather-caps-gallery .sp-main-view{\n        height:auto;\n        min-height:370px;\n    }\n\n    #sp-weather-caps-gallery .sp-gallery-slide{\n        height:auto;\n        min-height:0;\n    }\n\n    #sp-weather-caps-gallery .sp-variant-layout{\n        height:auto;\n        min-height:370px;\n    }\n\n    \/* Keep every variation on the same image viewing frame. *\/\n    #sp-weather-caps-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-weather-caps-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-weather-caps-gallery .sp-side-info{\n        height:112px;\n        min-height: 112px;\n        max-height: 112px;\n        overflow:visible;\n        justify-content:flex-start;\n        margin-top:5px;\n    }\n\n    \/* Keep the view label and buttons compact. *\/\n    #sp-weather-caps-gallery .sp-side-info .sp-amp-label{\n        margin:0 0 4px;\n    }\n\n    #sp-weather-caps-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 view buttons. *\/\n    #sp-weather-caps-gallery .sp-side-info .sp-current-amp{\n        margin:3px 0 0;\n        line-height:1.1;\n    }\n\n    #sp-weather-caps-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-weather-caps-gallery .sp-side-info .sp-fullscreen-trigger{\n        margin-top:5px;\n    }\n\n    \/* Reduce the gap between product details and thumbnails. *\/\n    #sp-weather-caps-gallery .sp-product-selector{\n        margin-top:2px;\n    }\n\n    #sp-weather-caps-gallery .sp-gallery-pagination{\n        margin-top:3px;\n    }\n\n    #sp-weather-caps-gallery .sp-thumbnails{\n        justify-content:center;\n    }\n}\n\n\n\/* =========================================================\n   WEATHER CAP \u2014 2 TOGGLE BUTTONS \/ 2 COLUMNS \u00d7 1 ROW\n   ========================================================= *\/\n#sp-weather-caps-gallery .sp-amp-toggle{\n    display:flex;\n    flex-wrap:nowrap;\n    width:100%;\n    max-width:300px;\n    min-width:0;\n}\n#sp-weather-caps-gallery .sp-amp-btn{\n    flex:1 1 50%;\n    min-width:0;\n    white-space:nowrap;\n}\n@media (max-width:767px){\n    #sp-weather-caps-gallery .sp-side-info .sp-amp-toggle{\n        display:flex;\n        flex-wrap:nowrap;\n        width:240px;\n        max-width:240px;\n    }\n    #sp-weather-caps-gallery .sp-side-info .sp-amp-btn{\n        flex:1 1 50%;\n        min-width:0;\n        white-space:nowrap;\n    }\n}\n\/* Desktop variation fullscreen button: below part number, left-aligned. *\/\n@media (min-width:768px){\n    #sp-weather-caps-gallery .sp-side-info{\n        display:flex;\n        flex-direction:column;\n        align-items:flex-start;\n    }\n    #sp-weather-caps-gallery .sp-side-info .sp-fullscreen-trigger{\n        align-self:flex-start;\n    }\n}\n\n<\/style>\n\n<script>\n\n(function () {\n    function initSmartPlugWeatherCapGallery() {\n        const gallery = document.getElementById(\"sp-weather-caps-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        const thumbnailContainer = gallery.querySelector(\".sp-thumbnails\");\n        const thumbPrev = gallery.querySelector(\".sp-thumb-prev\");\n        const thumbNext = gallery.querySelector(\".sp-thumb-next\");\n\n        if (!slides.length || !thumbs.length) return;\n\n        let currentIndex = 0;\n\n        \/* =================================================\n           RESPONSIVE FEATURE HOTSPOT POSITIONING\n           Match the actual rendered image, not the gallery box.\n           Weather Cap uses desktop\/mobile image settings, so the\n           breakpoint mode mirrors the existing image CSS.\n           ================================================= *\/\n\n        function getResponsiveMode() {\n            const width = window.innerWidth || document.documentElement.clientWidth || 0;\n            return width <= 767 ? \"mobile\" : \"desktop\";\n        }\n\n        function readCssNumber(element, customProperty, fallback) {\n            if (!element) return fallback;\n\n            const inlineValue = element.style\n                ? element.style.getPropertyValue(customProperty)\n                : \"\";\n\n            if (inlineValue && inlineValue.trim()) {\n                const parsedInline = parseFloat(inlineValue);\n                if (Number.isFinite(parsedInline)) return parsedInline;\n            }\n\n            const computedValue = window.getComputedStyle(element)\n                .getPropertyValue(customProperty);\n\n            if (computedValue && computedValue.trim()) {\n                const parsedComputed = parseFloat(computedValue);\n                if (Number.isFinite(parsedComputed)) return parsedComputed;\n            }\n\n            return fallback;\n        }\n\n        function readResponsiveImageSetting(image, baseName, responsiveMode, fallback) {\n            if (!image) return fallback;\n\n            const responsiveProperty = baseName + \"-\" + responsiveMode;\n            const desktopProperty = baseName + \"-desktop\";\n\n            let value = readCssNumber(image, responsiveProperty, NaN);\n            if (Number.isFinite(value)) return value;\n\n            value = readCssNumber(image, desktopProperty, NaN);\n            if (Number.isFinite(value)) return value;\n\n            const imageWrap = image.closest(\n                \".sp-main-product, .sp-variant-image-wrap\"\n            );\n\n            value = readCssNumber(imageWrap, responsiveProperty, NaN);\n            if (Number.isFinite(value)) return value;\n\n            value = readCssNumber(imageWrap, desktopProperty, NaN);\n            if (Number.isFinite(value)) return value;\n\n            return fallback;\n        }\n\n        function syncFeatureHotspots() {\n            const featureSlide = slides[0];\n            if (!featureSlide) return;\n\n            const clip = featureSlide.querySelector(\".sp-main-image-clip\");\n            const image = featureSlide.querySelector(\".sp-main-image-clip > img\");\n            const featureHotspots = featureSlide.querySelectorAll(\".sp-hotspot\");\n\n            if (!clip || !image || !featureHotspots.length) return;\n            if (!image.naturalWidth || !image.naturalHeight) return;\n\n            const clipRect = clip.getBoundingClientRect();\n            if (!clipRect.width || !clipRect.height) return;\n\n            const responsiveMode = getResponsiveMode();\n\n            const imageScale = readResponsiveImageSetting(\n                image,\n                \"image-scale\",\n                responsiveMode,\n                1\n            );\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 imageRatio =\n                image.naturalWidth \/\n                image.naturalHeight;\n\n            const containerRatio =\n                clipRect.width \/\n                clipRect.height;\n\n            let renderedWidth;\n            let renderedHeight;\n\n            \/*\n             * Reproduce object-fit: contain using the image's\n             * natural dimensions and the actual clip dimensions.\n             *\/\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            \/*\n             * Match the CSS transform: scale(...)\n             * around the image center.\n             *\/\n            renderedWidth *= imageScale;\n            renderedHeight *= imageScale;\n\n            \/*\n             * The hotspots live inside the same clip as the image,\n             * so the final coordinates are relative to that clip.\n             *\/\n            const imageLeftInClip =\n                (clipRect.width - renderedWidth) \/ 2 +\n                imageX;\n\n            const imageTopInClip =\n                (clipRect.height - renderedHeight) \/ 2 +\n                imageY;\n\n            featureHotspots.forEach(function (hotspot) {\n                \/*\n                 * ONE canonical hotspot anchor across viewports.\n                 *\/\n                const topPercent = readCssNumber(\n                    hotspot,\n                    \"--top\",\n                    50\n                );\n\n                const leftPercent = readCssNumber(\n                    hotspot,\n                    \"--left\",\n                    50\n                );\n\n                const hotspotX = readCssNumber(\n                    hotspot,\n                    \"--hotspot-x\",\n                    0\n                );\n\n                const hotspotY = readCssNumber(\n                    hotspot,\n                    \"--hotspot-y\",\n                    0\n                );\n\n                const leftPx =\n                    imageLeftInClip +\n                    (renderedWidth * leftPercent \/ 100) +\n                    hotspotX;\n\n                const topPx =\n                    imageTopInClip +\n                    (renderedHeight * topPercent \/ 100) +\n                    hotspotY;\n\n                hotspot.style.setProperty(\n                    \"--sp-hotspot-left-px\",\n                    leftPx + \"px\"\n                );\n\n                hotspot.style.setProperty(\n                    \"--sp-hotspot-top-px\",\n                    topPx + \"px\"\n                );\n\n                hotspot.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 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.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || activeVariant.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\");\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 KICKER \/ TITLE \/ SUBTITLE \/ PART NUMBER\n           ================================================= *\/\n\n        function getViewDataAttributeName(view, field) {\n            if (!view) return \"data-\" + field;\n            return \"data-\" + view.replace(\/\\s+\/g, \"-\") + \"-\" + field;\n        }\n\n        function getViewCopy(slide, view) {\n            if (!slide) {\n                return {\n                    kicker: \"\",\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                    kicker: slide.getAttribute(getViewDataAttributeName(variationView, \"kicker\")) || \"\",\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                kicker: slide.getAttribute(\"data-kicker\") || \"\",\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 mobileKicker = slide.querySelector(\".sp-mobile-variant-title .sp-slide-kicker\");\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 desktopKicker = slide.querySelector(\".sp-side-info .sp-slide-kicker\");\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 (mobileKicker) mobileKicker.textContent = copy.kicker;\n            if (mobileTitle) mobileTitle.textContent = copy.title;\n            if (mobileSubtitle) mobileSubtitle.textContent = copy.subtitle;\n            if (desktopKicker) desktopKicker.textContent = copy.kicker;\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 kicker = featureSlide.querySelector(\".sp-slide-info .sp-slide-kicker\");\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 (kicker) kicker.textContent = copy.kicker;\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 TOGGLE\n           ================================================= *\/\n\n        variantSlides.forEach(function (slide) {\n            const image = slide.querySelector(\".sp-variant-image\");\n            const viewButtons = slide.querySelectorAll(\".sp-amp-btn\");\n            const currentView = slide.querySelector(\".sp-current-amp\");\n\n            if (!image) return;\n\n            slide.dataset.currentView = slide.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || slide.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\";\n\n            function updateImage() {\n                const view = slide.dataset.currentView || \"\";\n                const source = slide.getAttribute(\"data-\" + view) || \"\";\n                updateVariantText(slide, view);\n\n                image.style.opacity = \"0\";\n\n                window.setTimeout(function () {\n                    if (source) {\n                        image.src = source;\n                        image.classList.remove(\"is-empty\");\n                    } else {\n                        image.removeAttribute(\"src\");\n                        image.classList.add(\"is-empty\");\n                    }\n\n                    image.style.opacity = \"1\";\n\n                    if (fullscreenModal.classList.contains(\"is-open\")) {\n                        refreshFullscreenModal();\n                    }\n                }, 90);\n\n                viewButtons.forEach(function (button) {\n                    button.classList.toggle(\n                        \"active\",\n                        button.getAttribute(\"data-view\") === view\n                    );\n                });\n\n                if (currentView) {\n                    currentView.innerHTML = \"Showing <strong>\" + view + \"<\/strong>\";\n                }\n            }\n\n            function setView(view) {\n                slide.dataset.currentView = view || \"\";\n                updateImage();\n            }\n\n            slide._setView = setView;\n\n            viewButtons.forEach(function (button) {\n                button.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setView(button.getAttribute(\"data-view\"));\n                });\n            });\n\n            \/* Initialize every variation to its first configured image. *\/\n            setView(slide.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || slide.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\");\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-kicker\"><\/div>\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-amp-wrap\">\n                        <div class=\"sp-fullscreen-amp-label\">SELECT VIEW<\/div>\n                        <div class=\"sp-fullscreen-amp-toggle\" role=\"group\" aria-label=\"Fullscreen product view\">\n                            <button type=\"button\" class=\"sp-fullscreen-amp-btn active\" data-view=\"\"><\/button>\n                            <button type=\"button\" class=\"sp-fullscreen-amp-btn\" data-view=\"\"><\/button>\n                        <\/div>\n                    <\/div>\n                    <div class=\"sp-fullscreen-thumbnails\"><\/div>\n                <\/div>\n            <\/div>\n        `;\n\n        gallery.appendChild(fullscreenModal);\n\n        const fullscreenImage = fullscreenModal.querySelector(\".sp-fullscreen-image\");\n        const fullscreenKicker = fullscreenModal.querySelector(\".sp-fullscreen-kicker\");\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 fullscreenViewWrap = fullscreenModal.querySelector(\".sp-fullscreen-amp-wrap\");\n        const fullscreenViewButtons = fullscreenModal.querySelectorAll(\".sp-fullscreen-amp-btn\");\n        const fullscreenThumbs = fullscreenModal.querySelector(\".sp-fullscreen-thumbnails\");\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\/09\/Weathercap-Front.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            if (!activeSlide) {\n                return {\n                    kicker: \"\",\n                    title: \"\",\n                    description: \"\",\n                    partNumber: \"\"\n                };\n            }\n\n            const view = activeSlide.classList.contains(\"sp-variant-slide\")\n                ? (activeSlide.dataset.currentView || activeSlide.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || activeSlide.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\")\n                : \"\";\n\n            const copy = getViewCopy(activeSlide, view);\n\n            return {\n                kicker: copy.kicker,\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.querySelector(\".sp-amp-btn.active\")?.getAttribute(\"data-view\") || activeSlide.querySelector(\".sp-amp-btn\")?.getAttribute(\"data-view\") || \"\")\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            fullscreenKicker.textContent = copy.kicker || \"\";\n            fullscreenTitle.textContent = copy.title || \"\";\n            fullscreenDescription.textContent = copy.description || \"\";\n\n            \/* The Feature slide does not have a part number.\n               Variation slides keep their part numbers. *\/\n            if (fullscreenPartNumber) {\n                fullscreenPartNumber.textContent = isVariation ? (copy.partNumber || \"\") : \"\";\n                fullscreenPartNumber.parentElement.style.display = isVariation ? \"\" : \"none\";\n            }\n\n            fullscreenViewWrap.classList.toggle(\"is-visible\", !!isVariation);\n\n            if (isVariation) {\n                const activeButtons = Array.from(activeSlide.querySelectorAll(\".sp-amp-btn\"));\n                fullscreenViewButtons.forEach(function (button, index) {\n                    const sourceButton = activeButtons[index];\n                    if (sourceButton) {\n                        button.setAttribute(\"data-view\", sourceButton.getAttribute(\"data-view\") || \"\");\n                        button.textContent = sourceButton.textContent.trim();\n                    }\n                });\n            }\n\n            fullscreenViewButtons.forEach(function (button) {\n                const buttonView = button.getAttribute(\"data-view\");\n                button.classList.toggle(\"active\", buttonView === view);\n                button.disabled = !isVariation;\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\n                    showSlide(thumbTarget);\n                    window.setTimeout(refreshFullscreenModal, 110);\n                });\n\n                fullscreenThumbs.appendChild(modalThumb);\n            });\n        }\n\n        fullscreenViewButtons.forEach(function (button) {\n            button.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                if (!fullscreenModal.classList.contains(\"is-open\")) return;\n\n                const activeSlide = slides[currentIndex];\n                if (!activeSlide || currentIndex < 1) return;\n\n                if (typeof activeSlide._setView === \"function\") {\n                    activeSlide._setView(button.getAttribute(\"data-view\"));\n                    window.setTimeout(refreshFullscreenModal, 110);\n                }\n            });\n        });\n\n        let fullscreenScrollTop = 0;\n        let fullscreenScrollLeft = 0;\n        let fullscreenBodyPaddingRight = \"\";\n\n        function openFullscreenModal() {\n            refreshFullscreenModal();\n\n            fullscreenScrollTop = window.scrollY || window.pageYOffset || 0;\n            fullscreenScrollLeft = window.scrollX || window.pageXOffset || 0;\n            fullscreenBodyPaddingRight = document.body.style.paddingRight;\n\n            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n            if (scrollbarWidth > 0) {\n                document.body.style.paddingRight = scrollbarWidth + \"px\";\n            }\n\n            fullscreenModal.classList.add(\"is-open\");\n            fullscreenModal.setAttribute(\"aria-hidden\", \"false\");\n            document.body.style.overflow = \"hidden\";\n        }\n\n        function closeFullscreenModal() {\n            fullscreenModal.classList.remove(\"is-open\");\n            fullscreenModal.setAttribute(\"aria-hidden\", \"true\");\n            document.body.style.overflow = \"\";\n            document.body.style.paddingRight = fullscreenBodyPaddingRight;\n\n            window.scrollTo({\n                top: fullscreenScrollTop,\n                left: fullscreenScrollLeft,\n                behavior: \"auto\"\n            });\n        }\n\n        fullscreenClose.addEventListener(\"click\", function (event) {\n            event.preventDefault();\n            closeFullscreenModal();\n        });\n\n        fullscreenModal.addEventListener(\"click\", function (event) {\n            if (event.target === fullscreenModal) closeFullscreenModal();\n        });\n\n        document.addEventListener(\"keydown\", function (event) {\n            if (event.key === \"Escape\" && fullscreenModal.classList.contains(\"is-open\")) {\n                closeFullscreenModal();\n            }\n        });\n\n        function addFullscreenButtons() {\n            \/* Fullscreen is intentionally available only on variation slides. *\/\n            variantSlides.forEach(function (slide) {\n                const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\n                if (!imageWrap || slide.querySelector(\".sp-fullscreen-trigger\")) return;\n\n                const button = document.createElement(\"button\");\n                button.type = \"button\";\n                button.className = \"sp-fullscreen-trigger\";\n                button.textContent = \"View Full Screen\";\n                button.addEventListener(\"click\", function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    openFullscreenModal();\n                });\n\n                const sideInfo = slide.querySelector(\".sp-side-info\");\n\n                if (sideInfo) {\n                    const partNumber = sideInfo.querySelector(\".sp-part-number\");\n                    if (partNumber) {\n                        partNumber.insertAdjacentElement(\"afterend\", button);\n                    } else {\n                        sideInfo.appendChild(button);\n                    }\n                } else {\n                    imageWrap.appendChild(button);\n                }\n            });\n        }\n\n        function setupHoverZoom() {\n            variantSlides.forEach(function (slide) {\n                const imageWrap = slide.querySelector(\".sp-variant-image-wrap\");\n                const image = slide.querySelector(\".sp-variant-image\");\n                if (!imageWrap || !image || imageWrap.dataset.zoomInitialized === \"true\") return;\n\n                imageWrap.dataset.zoomInitialized = \"true\";\n\n                const preview = document.createElement(\"div\");\n                preview.className = \"sp-zoom-preview\";\n\n                const previewImage = document.createElement(\"img\");\n                previewImage.alt = \"\";\n                preview.appendChild(previewImage);\n                imageWrap.appendChild(preview);\n\n                function syncPreviewImage() {\n                    const source = image.currentSrc || image.src;\n                    if (source) previewImage.src = source;\n                }\n\n                image.addEventListener(\"load\", syncPreviewImage);\n                syncPreviewImage();\n\n                imageWrap.addEventListener(\"mouseenter\", function () {\n                    syncPreviewImage();\n                    imageWrap.classList.add(\"sp-zoom-active\");\n                });\n\n                imageWrap.addEventListener(\"mouseleave\", function () {\n                    imageWrap.classList.remove(\"sp-zoom-active\");\n                });\n\n                imageWrap.addEventListener(\"mousemove\", function (event) {\n                    if (window.innerWidth <= 600) return;\n\n                    const rect = imageWrap.getBoundingClientRect();\n                    const x = Math.max(0, Math.min(1, (event.clientX - rect.left) \/ rect.width));\n                    const y = Math.max(0, Math.min(1, (event.clientY - rect.top) \/ rect.height));\n\n                    previewImage.style.left = (-x * 100) + \"%\";\n                    previewImage.style.top = (-y * 100) + \"%\";\n                });\n            });\n        }\n\n\n        \/* =================================================\n           HOTSPOT RESYNC TRIGGERS\n           ================================================= *\/\n\n        const featureImage = slides[0]\n            ? slides[0].querySelector(\".sp-main-image-clip > img\")\n            : null;\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(function () {\n                scheduleFeatureHotspotSync();\n            });\n\n            const featureClip = slides[0]\n                ? slides[0].querySelector(\".sp-main-image-clip\")\n                : null;\n\n            const featureWrap = slides[0]\n                ? slides[0].querySelector(\".sp-main-product.sp-hotspot-image\")\n                : null;\n\n            const mainView = gallery.querySelector(\".sp-main-view\");\n\n            if (featureClip) hotspotObserver.observe(featureClip);\n            if (featureWrap) hotspotObserver.observe(featureWrap);\n            if (featureImage) hotspotObserver.observe(featureImage);\n            if (mainView) hotspotObserver.observe(mainView);\n        }\n\n        if (window.jQuery) {\n            jQuery(document).on(\n                \"found_variation.spWeatherCapHotspots reset_data.spWeatherCapHotspots\",\n                \"form.variations_form\",\n                function () {\n                    scheduleFeatureHotspotSync();\n                }\n            );\n\n            jQuery(window).on(\n                \"elementor\/frontend\/init.spWeatherCapHotspots\",\n                function () {\n                    setTimeout(scheduleFeatureHotspotSync, 150);\n                }\n            );\n        }\n\n        scheduleFeatureHotspotSync();\n\n        addFullscreenButtons();\n        setupHoverZoom();\n\n        \/* WooCommerce variation compatibility *\/\n        if (window.jQuery) {\n            jQuery(document).on(\n                \"found_variation.spWeatherCapGallery\",\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\", initSmartPlugWeatherCapGallery);\n    } else {\n        initSmartPlugWeatherCapGallery();\n    }\n\n    if (window.jQuery) {\n        jQuery(window).on(\"elementor\/frontend\/init\", function () {\n            setTimeout(initSmartPlugWeatherCapGallery, 150);\n        });\n    }\n})();\n\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8fd309a e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"8fd309a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f404ad elementor-widget elementor-widget-heading\" data-id=\"9f404ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Weathercap<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b747897 elementor-widget elementor-widget-text-editor\" data-id=\"b747897\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>The SmartPlug WeatherCap (A1001) is a weatherproof cover designed to protect SmartPlug park power connectors from moisture when they are not in use. It includes a lanyard that tethers the cover to the cordset, helping prevent loss and keeping it readily accessible. The WeatherCap features a weatherproof seal with a multi-fin gasket that helps keep out moisture, locks securely onto the face of a SmartPlug connector for ease of use, and is easy to store thanks to its integrated lanyard. It is also interchangeable, making it compatible with all SmartPlug connectors.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f79334f elementor-widget elementor-widget-button\" data-id=\"f79334f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/dev.smartplug.com\/staging\/where-to-buy\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">WHERE TO BUY<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SmartPlug Weathercap 1 Protective CoverProtects against moisture, dirt, and debris. 2 Retention StrapKeeps the cover attached and secure. KEY FEATURES Click the numbered points to explore the Weather Cap SMARTPLUG WEATHERCAP WEATHERCAP Front SMARTPLUG WEATHERCAP WEATHERCAP Front SELECT VIEW Front Back Showing Front PART NUMBER: SMARTPLUG WEATHER CAP WEATHER CAP Attached SMARTPLUG WEATHER CAP WEATHER CAP Attached SELECT VIEW Attached Not-Attached Showing Attached PART NUMBER: &#10094; Features Front &#038; Back In Use &#10095; Weathercap The SmartPlug WeatherCap (A1001) is a weatherproof cover designed to protect SmartPlug park power connectors from moisture when they are not in use. It includes a lanyard that tethers the cover to the cordset, helping prevent loss and keeping it readily accessible. The WeatherCap features a weatherproof seal with a multi-fin gasket that helps keep out moisture, locks securely onto the face of a SmartPlug connector for ease of use, and is easy to store thanks to its integrated lanyard. It is also interchangeable, making it compatible with all SmartPlug connectors. 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-11314","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11314","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=11314"}],"version-history":[{"count":34,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11314\/revisions"}],"predecessor-version":[{"id":19616,"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/pages\/11314\/revisions\/19616"}],"wp:attachment":[{"href":"https:\/\/dev.smartplug.com\/staging\/wp-json\/wp\/v2\/media?parent=11314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}