PageSourceSearch

https://juggernautcase.com/about-us/

html juggernautcase.com collected 2026-09-30 09:28:58 UTC 375,014 bytes, 9,098 lines download raw bytes

1
2<!DOCTYPE html>
3<html class="no-js" lang="en">
4    
5
6    <head>
7        <title>About Juggernaut Case | Rugged EUD Systems</title>
8        <link rel="dns-prefetch preconnect" href="https://cdn11.bigcommerce.com/s-wfkpm4ltxc" crossorigin><link rel="dns-prefetch preconnect" href="https://fonts.googleapis.com/" crossorigin><link rel="dns-prefetch preconnect" href="https://fonts.gstatic.com/" crossorigin>
9        <meta name="keywords" content="rugged phone case, military phone case, tactical phone case, iPhone case, Samsung case, Android case, Galaxy case, phone mount, MOLLE mount, plate carrier mount, drop protection, field gear, combat gear, tactical gear, device protection, Juggernaut.Case, mission-ready gear, durable phone accessories"><meta name="description" content="Learn how Juggernaut.Case designs, engineers, tests, and assembles combat-proven cases, mounts, cables, and integrated EUD systems in the USA."><link rel='canonical' href='https://juggernautcase.com/about-us/' /><meta name='platform' content='bigcommerce.stencil' />
10                
11         
12
13        <link href="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/product_images/Juggernaut%20Case%20%20%281%29.png?t=1787087254" rel="shortcut icon">
14        <meta name="viewport" content="width=device-width, initial-scale=1">
15
16        <link rel="preconnect" href="https://fonts.googleapis.com">
17        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18        <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800;900&display=swap">
19        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800;900&display=swap">
20
21        
21<script nonce="">
22            document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
23        </script>
23
24
25        
25<script nonce="">
26    function browserSupportsAllFeatures() {
27        return window.Promise
28            && window.fetch
29            && window.URL
30            && window.URLSearchParams
31            && window.WeakMap
32            // object-fit support
33            && ('objectFit' in document.documentElement.style);
34    }
35
36    function loadScript(src) {
37        var js = document.createElement('script');
38        js.src = src;
39        js.nonce = '';
40        js.onerror = function () {
41            console.error('Failed to load polyfill script ' + src);
42        };
43        document.head.appendChild(js);
44    }
45
46    if (!browserSupportsAllFeatures()) {
47        loadScript('https://cdn11.bigcommerce.com/s-wfkpm4ltxc/stencil/ad737610-69cd-013f-c1e1-2aca43d705a8/e/45debc00-98db-013f-e7cd-7608931f64d7/dist/theme-bundle.polyfills.js');
48    }
49</script>
49
50<!-- preload polyfill -->
vendor: 1,210 bytes, line 51
51<script nonce="">!function(n){"use strict";n.loadCSS||(n.loadCSS=function(){});var o=loadCSS.relpreload={};if(o.support=function(){var e;try{e=n.document.createElement("link").relList.supports("preload")}catch(t){e=!1}return function(){return e}}(),o.bindMediaToggle=function(t){var e=t.media||"all";function a(){t.addEventListener?t.removeEventListener("load",a):t.attachEvent&&t.detachEvent("onload",a),t.setAttribute("onload",null),t.media=e}t.addEventListener?t.addEventListener("load",a):t.attachEvent&&t.attachEvent("onload",a),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(a,3e3)},o.poly=function(){if(!o.support())for(var t=n.document.getElementsByTagName("link"),e=0;e<t.length;e++){var a=t[e];"preload"!==a.rel||"style"!==a.getAttribute("as")||a.getAttribute("data-loadcss")||(a.setAttribute("data-loadcss",!0),o.bindMediaToggle(a))}},!o.support()){o.poly();var t=n.setInterval(o.poly,500);n.addEventListener?n.addEventListener("load",function(){o.poly(),n.clearInterval(t)}):n.attachEvent&&n.attachEvent("onload",function(){o.poly(),n.clearInterval(t)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:n.loadCSS=loadCSS}("undefined"!=typeof global?global:this);</script>
51
52        
52<script nonce="">window.consentManagerTranslations = `{"locale":"en","locales":{"consent_manager.data_collection_warning":"en","consent_manager.accept_all_cookies":"en","consent_manager.gdpr_settings":"en","consent_manager.data_collection_preferences":"en","consent_manager.manage_data_collection_preferences":"en","consent_manager.use_data_by_cookies":"en","consent_manager.data_categories_table":"en","consent_manager.allow":"en","consent_manager.accept":"en","consent_manager.deny":"en","consent_manager.dismiss":"en","consent_manager.reject_all":"en","consent_manager.category":"en","consent_manager.purpose":"en","consent_manager.functional_category":"en","consent_manager.functional_purpose":"en","consent_manager.analytics_category":"en","consent_manager.analytics_purpose":"en","consent_manager.targeting_category":"en","consent_manager.advertising_category":"en","consent_manager.advertising_purpose":"en","consent_manager.essential_category":"en","consent_manager.esential_purpose":"en","consent_manager.yes":"en","consent_manager.no":"en","consent_manager.not_available":"en","consent_manager.cancel":"en","consent_manager.save":"en","consent_manager.back_to_preferences":"en","consent_manager.close_without_changes":"en","consent_manager.unsaved_changes":"en","consent_manager.by_using":"en","consent_manager.agree_on_data_collection":"en","consent_manager.change_preferences":"en","consent_manager.cancel_dialog_title":"en","consent_manager.privacy_policy":"en","consent_manager.allow_category_tracking":"en","consent_manager.disallow_category_tracking":"en"},"translations":{"consent_manager.data_collection_warning":"We use cookies (and other similar technologies) to collect data to improve your shopping experience.","consent_manager.accept_all_cookies":"Accept All Cookies","consent_manager.gdpr_settings":"Settings","consent_manager.data_collection_preferences":"Website Data Collection Preferences","consent_manager.manage_data_collection_preferences":"Manage Website Data Collection Preferences","consent_manager.use_data_by_cookies":" uses data collected by cookies and JavaScript libraries to improve your shopping experience.","consent_manager.data_categories_table":"The table below outlines how we use this data by category. To opt out of a category of data collection, select 'No' and save your preferences.","consent_manager.allow":"Allow","consent_manager.accept":"Accept","consent_manager.deny":"Deny","consent_manager.dismiss":"Dismiss","consent_manager.reject_all":"Reject all","consent_manager.category":"Category","consent_manager.purpose":"Purpose","consent_manager.functional_category":"Functional","consent_manager.functional_purpose":"Enables enhanced functionality, such as videos and live chat. If you do not allow these, then some or all of these functions may not work properly.","consent_manager.analytics_category":"Analytics","consent_manager.analytics_purpose":"Provide statistical information on site usage, e.g., web analytics so we can improve this website over time.","consent_manager.targeting_category":"Targeting","consent_manager.advertising_category":"Advertising","consent_manager.advertising_purpose":"Used to create profiles or personalize content to enhance your shopping experience.","consent_manager.essential_category":"Essential","consent_manager.esential_purpose":"Essential for the site and any requested services to work, but do not perform any additional or secondary function.","consent_manager.yes":"Yes","consent_manager.no":"No","consent_manager.not_available":"N/A","consent_manager.cancel":"Cancel","consent_manager.save":"Save","consent_manager.back_to_preferences":"Back to Preferences","consent_manager.close_without_changes":"You have unsaved changes to your data collection preferences. Are you sure you want to close without saving?","consent_manager.unsaved_changes":"You have unsaved changes","consent_manager.by_using":"By using our website, you're agreeing to our","consent_manager.agree_on_data_collection":"By using our website, you're agreeing to the collection of data as described in our ","consent_manager.change_preferences":"You can change your preferences at any time","consent_manager.cancel_dialog_title":"Are you sure you want to cancel?","consent_manager.privacy_policy":"Privacy Policy","consent_manager.allow_category_tracking":"Allow [CATEGORY_NAME] tracking","consent_manager.disallow_category_tracking":"Disallow [CATEGORY_NAME] tracking"}}`;</script>
52
53
54        
54<script nonce="">
55            window.lazySizesConfig = window.lazySizesConfig || {};
56            window.lazySizesConfig.loadMode = 1;
57        </script>
57
58        
58<script async src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/stencil/ad737610-69cd-013f-c1e1-2aca43d705a8/e/45debc00-98db-013f-e7cd-7608931f64d7/dist/theme-bundle.head_async.js" nonce=""></script>
58
59
60                <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Saira:wght@400;600;700&amp;display=swap">
61
62            <link data-stencil-stylesheet href="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/stencil/ad737610-69cd-013f-c1e1-2aca43d705a8/e/45debc00-98db-013f-e7cd-7608931f64d7/css/theme-2e60b4b0-9e6e-013f-d66e-26439a302926.css" rel="stylesheet">
63            <!-- Start Tracking Code for analytics_facebook -->
64
65<script>
66!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');
67
68fbq('set', 'autoConfig', 'false', '572028010124684');
69fbq('dataProcessingOptions', ['LDU'], 0, 0);
70fbq('init', '572028010124684', {"external_id":"544dfbf8-7ee3-485e-9749-3c884a3eac04"});
71fbq('set', 'agent', 'bigcommerce', '572028010124684');
72
73function trackEvents() {
74    var pathName = window.location.pathname;
75
76    
77
78    // Search events start -- only fire if the shopper lands on the /search.php page
79    if (pathName.indexOf('/search.php') === 0 && getUrlParameter('search_query')) {
80        fbq('trackSingle', '572028010124684', 'Search', {
81            content_type: 'product_group',
82            content_ids: [],
83            search_string: getUrlParameter('search_query')
84        });
85    }
86    // Search events end
87
88    // Wishlist events start -- only fire if the shopper attempts to add an item to their wishlist
89    if (pathName.indexOf('/wishlist.php') === 0 && getUrlParameter('added_product_id')) {
90        fbq('trackSingle', '572028010124684', 'AddToWishlist', {
91            content_type: 'product_group',
92            content_ids: []
93        });
94    }
95    // Wishlist events end
96
97    // Lead events start -- only fire if the shopper subscribes to newsletter
98    if (pathName.indexOf('/subscribe.php') === 0 && getUrlParameter('result') === 'success') {
99        fbq('trackSingle', '572028010124684', 'Lead', {});
100    }
101    // Lead events end
102
103    // Registration events start -- only fire if the shopper registers an account
104    if (pathName.indexOf('/login.php') === 0 && getUrlParameter('action') === 'account_created') {
105        fbq('trackSingle', '572028010124684', 'CompleteRegistration', {}, "");
106    }
107    // Registration events end
108
109    
110
111    function getUrlParameter(name) {
112        var cleanName = name.replace(/[\[]/, '\[').replace(/[\]]/, '\]');
113        var regex = new RegExp('[\?&]' + cleanName + '=([^&#]*)');
114        var results = regex.exec(window.location.search);
115        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
116    }
117}
118
119if (window.addEventListener) {
120    window.addEventListener("load", trackEvents, false)
121}
122</script>
122
123<noscript><img height="1" width="1" style="display:none" alt="null" src="https://www.facebook.com/tr?id=572028010124684&ev=PageView&noscript=1&a=plbigcommerce1.2&eid="/></noscript>
124
125<!-- End Tracking Code for analytics_facebook -->
126
127<!-- Start Tracking Code for analytics_googleanalytics4 -->
128
129<script data-cfasync="false" src="https://cdn11.bigcommerce.com/shared/js/google_analytics4_bodl_subscribers-358423becf5d870b8b603a81de597c10f6bc7699.js" integrity="sha256-gtOfJ3Avc1pEE/hx6SKj/96cca7JvfqllWA9FTQJyfI=" crossorigin="anonymous"></script>
vendor: 1 bytes, line 129
129
130<script data-cfasync="false">
131  (function () {
132    window.dataLayer = window.dataLayer || [];
133
134    function gtag(){
135        dataLayer.push(arguments);
136    }
137
138    function initGA4(event) {
139         function setupGtag() {
140            function configureGtag() {
141                gtag('js', new Date());
142                gtag('set', 'developer_id.dMjk3Nj', true);
143                gtag('config', 'G-6N6G54PD3E');
144            }
145
146            var script = document.createElement('script');
147
148            script.src = 'https://www.googletagmanager.com/gtag/js?id=G-6N6G54PD3E';
149            script.async = true;
150            script.onload = configureGtag;
151
152            document.head.appendChild(script);
153        }
154
155        setupGtag();
156
157        if (typeof subscribeOnBodlEvents === 'function') {
158            subscribeOnBodlEvents('G-6N6G54PD3E', false);
159        }
160
161        window.removeEventListener(event.type, initGA4);
162    }
163
164    
165
166    var eventName = document.readyState === 'complete' ? 'consentScriptsLoaded' : 'DOMContentLoaded';
167    window.addEventListener(eventName, initGA4, false);
168  })()
169</script>
169
170
171<!-- End Tracking Code for analytics_googleanalytics4 -->
172
173<!-- Start Tracking Code for analytics_siteverification -->
174
175<!-- ECI Start: Bing Base code -->
176<script>
177(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"187007328"};o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)})(window,document,"script","//bat.bing.com/bat.js","uetq");
178 </script>
178
179<!-- ECI End: Bing Base code -->
180<script>
181    if(window.location.pathname == '/checkout'){
182        sessionStorage.setItem("eci_first_time_access","true");   
183        sessionStorage.setItem("eci_bing_first_time_access","true");
184sessionStorage.setItem("agi_vwo_purchase_first_time_access", "true");
185    }
186</script>
vendor: 65 bytes, lines 186-188
186
187
188<script async src="https://www.googletagmanager.com/gtag/js?id=
188AW-616568697
vendor: 12 bytes, line 188
188"></script>
189<script>
vendor: 127 bytes, lines 190-193
190window.dataLayer = window.dataLayer || [];
191function gtag(){dataLayer.push(arguments);}
192gtag('js', new Date());
193gtag('config', '
193AW-616568697
vendor: 4 bytes, line 193
193');
194</script>
194 
195<!-- Google Tag Manager -->
196<script>
vendor: 327 bytes, lines 196-200
196(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
197new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
198j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
199'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
200})(window,document,'script','dataLayer','
200GTM-W427M84
vendor: 3 bytes, line 200
200');
200</script>
200
201<!-- End Google Tag Manager -->
202
203<meta name="facebook-domain-verification" content="8s9j0x8mqwbzavx08ihwq7y6bjkumy" />
204
205<meta name="google-site-verification" content="mab5BAWWREtEcmtHWDI2E6u3vhjekZX7dTkGuneYLA0" />
206
207
208<!-- End Tracking Code for analytics_siteverification -->
209
210
211<script type="text/javascript" src="https://checkout-sdk.bigcommerce.com/v1/loader.js" defer ></script>
vendor: 1 bytes, line 211
211
212<script type="text/javascript">
213var BCData = {};
214</script>
vendor: 1 bytes, line 214
214
215<script   async="async" type="text/javascript" src="https://appdevelopergroup.co/apps/bc_firewall/js/firewall.js?shop=e0123b4ef9ae6571b3aa2d531c4b7107"></script>
215<script>
216
217(function () {
218    "use strict";
219
220    /* ---------------------------------------------------------------------
221       1. IDENTITY
222    --------------------------------------------------------------------- */
223    const VERSION = "v9";
224    const CONTROLLER_KEY = "__JC_HEADER_UTILITY_BANNER_V9__";
225    const LEGACY_CONTROLLER_KEYS = [
226        "__JC_HEADER_UTILITY_SCRIPT__",
227        "__JC_STANDALONE_UTILITY_BANNER__",
228        "__JC_TOP_UTILITY_V5__",
229        "__JC_HEADER_UTILITY_BANNER_V6__",
230        "__JC_HEADER_UTILITY_BANNER_V7__",
231        "__JC_HEADER_UTILITY_BANNER_V8__"
232    ];
233
234    const BANNER_ID = "jcUtilityBannerV9";
235    const STYLE_ID = "jcUtilityBannerStylesV9";
236    const FONT_PRECONNECT_ID = "jcUtilityBannerFontPreV9";
237    const FONT_ID = "jcUtilityBannerFontV9";
238    const STICKY_CLASS = "jc-util-sticky-header";
239    const DISMISS_KEY = "jcUtilityBannerDismissedV9";
240
241    const LEGACY_BANNER_SELECTORS = [
242        "#jcUtilityBannerV8",
243        "#jcScriptUtilityBannerV7",
244        "#jcScriptUtilityBannerV6",
245        "#jcScriptUtilityBanner",
246        "#jcStandaloneUtilityBanner",
247        "#jcDesktopUtilityBar",
248        "[data-jc-generated-banner]",
249        "[data-jc-top-links]"
250    ];
251    const LEGACY_STYLE_IDS = [
252        "jcUtilityBannerStylesV8",
253        "jcScriptUtilityBannerStylesV7",
254        "jcScriptUtilityBannerStylesV6",
255        "jcScriptUtilityBannerStyles",
256        "jcStandaloneUtilityBannerStyles"
257    ];
258
259    /* ---------------------------------------------------------------------
260       2. SETTINGS  (edit these)
261    --------------------------------------------------------------------- */
262    const SETTINGS = {
263        desktopBreakpoint: 1024,   // banner shows at this width and up
264        bannerHeight: 42,          // banner height in px
265        animationDuration: 280,    // collapse / restore speed in ms
266
267        signupText: "Join Our Email List for Product Updates",
268        signupTarget: "#newsletter-signup",
269
270        aboutText: "About Us",
271        aboutUrl: "/about-us/",
272
273        contactText: "Contact Us",
274        contactUrl: "https://juggernaut-case.frontkb.com/en",
275
276        rememberDismissalForSession: true
277    };
278
279    /* ---------------------------------------------------------------------
280       3. DESTROY ANY PRIOR INSTANCE (self included)
281    --------------------------------------------------------------------- */
282    LEGACY_CONTROLLER_KEYS.concat(CONTROLLER_KEY).forEach(function (key) {
283        const inst = window[key];
284        if (inst && typeof inst.destroy === "function") {
285            try { inst.destroy(); } catch (e) { /* ignore old cleanup errors */ }
286        }
287    });
288
289    /* ---------------------------------------------------------------------
290       4. STATE
291    --------------------------------------------------------------------- */
292    let header = null;
293    let banner = null;
294    let hero = null;
295    let observer = null;
296    let heroObserver = null;
297    let collapseThreshold = Infinity;
298    let dismissed = false;
299    let destroyed = false;
300    let reconcileQueued = false;
301    let scrollQueued = false;
302    let resizeQueued = false;
303
304    if (SETTINGS.rememberDismissalForSession) {
305        try {
306            dismissed = window.sessionStorage.getItem(DISMISS_KEY) === "true";
307        } catch (e) {
308            dismissed = false;
309        }
310    }
311
312    /* ---------------------------------------------------------------------
313       5. ENVIRONMENT CHECKS
314    --------------------------------------------------------------------- */
315    function isDesktop() {
316        return window.innerWidth >= SETTINGS.desktopBreakpoint;
317    }
318
319    function isHomepage() {
320        const path = window.location.pathname.replace(/\/+$/, "") || "/";
321        if (path === "/") { return true; }
322        const body = document.body;
323        if (!body) { return false; }
324        return /(^|\s)(pages-home|page-home|home)(\s|$)/.test(body.className);
325    }
326
327    function shouldShowBanner() {
328        return isHomepage() && !dismissed;
329    }
330
331    /* ---------------------------------------------------------------------
332       6. THEME + LEGACY CLEANUP
333    --------------------------------------------------------------------- */
334    function removeThemeBanner() {
335        document.querySelectorAll([
336            "#banners-carousel",
337            ".banners-wrapper._top-carousel-global",
338            ".banners-wrapper[id='banners-carousel']",
339            "[data-banner-location='top']"
340        ].join(",")).forEach(function (el) { el.remove(); });
341    }
342
343    function removeLegacyBanners() {
344        document.querySelectorAll(LEGACY_BANNER_SELECTORS.join(","))
345            .forEach(function (el) { if (el !== banner) { el.remove(); } });
346    }
347
348    function removeLegacyStyles() {
349        LEGACY_STYLE_IDS.forEach(function (id) {
350            const el = document.getElementById(id);
351            if (el) { el.remove(); }
352        });
353    }
354
355    /* ---------------------------------------------------------------------
356       7. FONT (preconnect + stylesheet pair, injected once)
357    --------------------------------------------------------------------- */
358    function injectFont() {
359        if (!document.getElementById(FONT_PRECONNECT_ID)) {
360            const pre1 = document.createElement("link");
361            pre1.id = FONT_PRECONNECT_ID;
362            pre1.rel = "preconnect";
363            pre1.href = "https://fonts.googleapis.com";
364            document.head.appendChild(pre1);
365
366            const pre2 = document.createElement("link");
367            pre2.rel = "preconnect";
368            pre2.href = "https://fonts.gstatic.com";
369            pre2.crossOrigin = "anonymous";
370            document.head.appendChild(pre2);
371        }
372
373        if (!document.getElementById(FONT_ID)) {
374            const sheet = document.createElement("link");
375            sheet.id = FONT_ID;
376            sheet.rel = "stylesheet";
377            sheet.href =
378                "https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800&display=swap";
379            document.head.appendChild(sheet);
380        }
381    }
382
383    /* ---------------------------------------------------------------------
384       8. STYLES (one style element)
385    --------------------------------------------------------------------- */
386    function buildCss() {
387        const id = BANNER_ID;
388        const h = SETTINGS.bannerHeight;
389        const bp = SETTINGS.desktopBreakpoint;
390        const mobileMax = SETTINGS.desktopBreakpoint - 1;
391        const dur = SETTINGS.animationDuration;
392        const ease = "cubic-bezier(0.4, 0, 0.2, 1)";
393
394        return `
395        /* Hide the theme announcement carousel on every viewport */
396        #banners-carousel,
397        .banners-wrapper._top-carousel-global,
398        .banners-wrapper[id="banners-carousel"],
399        [data-banner-location="top"] {
400            display: none !important;
401            height: 0 !important;
402            min-height: 0 !important;
403            max-height: 0 !important;
404            margin: 0 !important;
405            padding: 0 !important;
406            overflow: hidden !important;
407            border: 0 !important;
408            opacity: 0 !important;
409            visibility: hidden !important;
410            pointer-events: none !important;
411        }
412
413        /* Banner hidden until the desktop media query enables it */
414        #${id} { display: none; }
415
416        /* ---- DESKTOP BASE ---- */
417        @media screen and (min-width: ${bp}px) {
418
419            .${STICKY_CLASS} {
420                position: sticky !important;
421                top: 0 !important;
422                z-index: 10000 !important;
423                overflow: visible !important;
424            }
425
426            #${id},
427            #${id} *,
428            #${id} *::before,
429            #${id} *::after {
430                box-sizing: border-box;
431                font-family: "Saira", Arial, sans-serif !important;
432            }
433
434            #${id} {
435                display: block;
436                position: relative;
437                width: 100%;
438                height: ${h}px;
439                min-height: ${h}px;
440                max-height: ${h}px;
441                flex: 0 0 auto;
442                margin: 0;
443                padding: 0;
444                overflow: hidden;
445                background: #f2f2f2;
446                color: #111111;
447                opacity: 1;
448                visibility: visible;
449                transform: translateY(0);
450                transition:
451                    height ${dur}ms ${ease},
452                    min-height ${dur}ms ${ease},
453                    max-height ${dur}ms ${ease},
454                    flex-basis ${dur}ms ${ease},
455                    opacity 180ms ease,
456                    transform ${dur}ms ${ease};
457                will-change: height, max-height, opacity, transform;
458                z-index: 10005;
459            }
460
461            #${id}
461 .jc-util__inner {
462                display: flex;
463                align-items: center;
464                width: 100%;
465                height: ${h}px;
466                margin: 0;
467                padding: 0 8px 0 24px;
468                opacity: 1;
469                transform: translateY(0);
470                transition:
471                    opacity 160ms ease,
472                    transform ${dur}ms ${ease};
473            }
474
475            #${id} .jc-util__spacer {
476                flex: 1 1 0;
477                min-width: 0;
478            }
479
480            #${id} .jc-util__signup {
481                flex: 0 0 auto;
482                display: inline-flex;
483                align-items: center;
484                justify-content: center;
485                min-height: ${h}px;
486                min-width: 0;
487                padding: 0 20px;
488                color: #111111 !important;
489                background: transparent !important;
490                border: 0 !important;
491                font-size: 12px !important;
492                font-weight: 700 !important;
493                line-height: 1 !important;
494                letter-spacing: 0.07em !important;
495                text-align: center;
496                text-decoration: none !important;
497                text-transform: uppercase;
498                white-space: nowrap;
499                -webkit-tap-highlight-color: transparent;
500                transition: color 150ms ease !important;
501            }
502
503            #${id} .jc-util__right {
504                flex: 1 1 0;
505                min-width: 0;
506                display: flex;
507                align-items: center;
508                justify-content: flex-end;
509                height: ${h}px;
510            }
511
512            #${id} .jc-util__nav {
513                display: flex;
514                align-items: center;
515                justify-content: flex-end;
516                min-width: 0;
517                height: ${h}px;
518            }
519
520            #${id} .jc-util__link {
521                display: inline-flex;
522                align-items: center;
523                justify-content: center;
524                min-height: ${h}px;
525                color: #111111 !important;
526                background: transparent !important;
527                border: 0 !important;
528                font-size: 12px !important;
529                font-weight: 500 !important;
530                line-height: 1 !important;
531                letter-spacing: 0.025em !important;
532                text-decoration: none !important;
533                white-space: nowrap;
534                -webkit-tap-highlight-color: transparent;
535                transition: color 150ms ease !important;
536            }
537
538            #${id} .jc-util__divider {
539                flex: 0 0 1px;
540                width: 1px;
541                height: 13px;
542                margin: 0 12px;
543                background: rgba(17, 17, 17, 0.35);
544            }
545
546            #${id} .jc-util__close {
547                flex: 0 0 ${h}px;
548                display: inline-flex;
549                align-items: center;
550                justify-content: center;
551                width: ${h}px;
552                height: ${h}px;
553                min-width: ${h}px;
554                margin: 0 0 0 8px;
555                padding: 0;
556                color: #111111 !important;
557                background: transparent !important;
558                border: 0 !important;
559                border-radius: 0 !important;
560                box-shadow: none !important;
561                cursor: pointer;
562                -webkit-tap-highlight-color: transparent;
563                transition: color 150ms ease, background-color 150ms ease;
564            }
565
566            #${id} .jc-util__close-icon {
567                position: relative;
568                display: block;
569                width: 14px;
570                height: 14px;
571            }
572
573            #${id} .jc-util__close-icon::before,
574            #${id} .jc-util__close-icon::after {
575                content: "";
576                position: absolute;
577                top: 6px;
578                left: 0;
579                display: block;
580                width: 14px;
581                height: 1.5px;
582                background: currentColor;
583            }
584            #${id}
584 .jc-util__close-icon::before { transform: rotate(45deg); }
585            #${id} .jc-util__close-icon::after  { transform: rotate(-45deg); }
586
587            /* Collapsed (scroll) + dismissed (X). No display:none so it animates. */
588            #${id}.is-collapsed,
589            #${id}.is-dismissed {
590                height: 0;
591                min-height: 0;
592                max-height: 0;
593                flex-basis: 0;
594                margin: 0;
595                padding: 0;
596                overflow: hidden;
597                opacity: 0;
598                transform: translateY(-10px);
599                pointer-events: none;
600            }
601            #${id}.is-collapsed .jc-util__inner,
602            #${id}.is-dismissed .jc-util__inner {
603                opacity: 0;
604                transform: translateY(-8px);
605            }
606        }
607
608        /* ---- DESKTOP HOVER (gated so touch laptops do not stick) ---- */
609        @media screen and (min-width: ${bp}px) and (hover: hover) {
610            #${id} .jc-util__signup:hover,
611            #${id} .jc-util__link:hover { color: #ff8f1c !important; }
612            #${id} .jc-util__close:hover {
613                color: #ff8f1c !important;
614                background: rgba(0, 0, 0, 0.045) !important;
615            }
616        }
617
618        /* ---- KEYBOARD FOCUS (any input type) ---- */
619        @media screen and (min-width: ${bp}px) {
620            #${id} .jc-util__signup:focus-visible,
621            #${id} .jc-util__link:focus-visible,
622            #${id} .jc-util__close:focus-visible {
623                color: #ff8f1c !important;
624                outline: 2px solid #111111;
625                outline-offset: -4px;
626            }
627        }
628
629        /* ---- SMALLER DESKTOP ---- */
630        @media screen and (min-width: ${bp}px) and (max-width: 1199px) {
631            #${id} .jc-util__inner { padding-left: 16px; }
632            #${id} .jc-util__signup,
633            #${id} .jc-util__link { font-size: 11px !important; }
634            #${id} .jc-util__signup {
635                letter-spacing: 0.045em !important;
636                padding: 0 14px;
637            }
638            #${id} .jc-util__divider { margin: 0 9px; }
639        }
640
641        /* ---- MOBILE + TABLET: never show the custom banner ---- */
642        @media screen and (max-width: ${mobileMax}px) {
643            #${id} { display: none !important; }
644        }
645
646        /* ---- REDUCED MOTION ---- */
647        @media (prefers-reduced-motion: reduce) {
648            #${id},
649            #${id} .jc-util__inner,
650            #${id} * { transition: none !important; }
651        }
652        `;
653    }
654
655    function injectStyles() {
656        removeLegacyStyles();
657        const existing = document.getElementById(STYLE_ID);
658        if (existing) { existing.remove(); }
659        const style = document.createElement("style");
660        style.id = STYLE_ID;
661        style.textContent = buildCss();
662        document.head.appendChild(style);
663    }
664
665    /* ---------------------------------------------------------------------
666       9. HEADER
667    --------------------------------------------------------------------- */
668    function findHeader() {
669        const selectors = [
670            "header.header",
671            "header[data-header]",
672            "body > header",
673            "[data-header]",
674            ".header"
675        ];
676        for (let i = 0; i < selectors.length; i++) {
677            const el = document.querySelector(selectors[i]);
678            if (
679                el &&
680                !el.closest("#banners-carousel") &&
681                !el.closest(".banners-wrapper._top-carousel-global")
682            ) {
683                return el;
684            }
685        }
686        return null;
687    }
688
689    // Keeps the sticky class current, and detects header replacement by the theme.
690    function ensureStickyHeader() {
691        const current = findHeader();
692        if (!current) { return false; }
693        if (current !== header) {
694            if (header) { header.classList.remove(STICKY_CLASS); }
695            header = current;
696            banner = null; // the replaced header took its old banner with it
697        }
698        header.classList.add(STICKY_CLASS);
699        return true;
700    }
701
702    /* ---------------------------------------------------------------------
703       10. BANNER
704    --------------------------------------------------------------------- */
705    function bannerMarkup() {
706        return `
707            <div class="jc-util__inner">
708                <div class="jc-util__spacer" aria-hidden="true"></div>
709                <a class="jc-util__signup" href="${SETTINGS.signupTarget}" data-jc-signup>${SETTINGS.signupText}</a>
710                <div class="jc-util__right">
711                    <nav class="jc-util__nav" aria-label="Company links">
712                        <a class="jc-util__link" href="${SETTINGS.aboutUrl}">${SETTINGS.aboutText}</a>
713                        <span class="jc-util__divider" aria-hidden="true"></span>
714                        <a class="jc-util__link" href="${SETTINGS.contactUrl}" target="_blank" rel="noopener noreferrer">${SETTINGS.contactText}</a>
715                    </nav>
716                    <button class="jc-util__close" type="button" aria-label="Close banner" data-jc-close>
717                        <span class="jc-util__close-icon" aria-hidden="true"></span>
718                    </button>
719                </div>
720            </div>
721        `;
722    }
723
724    function ensureBanner() {
725        if (!ensureStickyHeader()) { return; }
726
727        // Already mounted in the current header: nothing to do.
728        if (banner && document.documentElement.contains(banner) && header.contains(banner)) {
729            return;
730        }
731
732        removeLegacyBanners();
733        const stale = document.getElementById(BANNER_ID);
734        if (stale && stale !== banner) { stale.remove(); }
735
736        banner = document.createElement("div");
737        banner.id = BANNER_ID;
738        banner.setAttribute("role", "region");
739        banner.setAttribute("aria-label", "Email signup and company links");
740        banner.innerHTML = bannerMarkup();
741
742        header.insertBefore(banner, header.firstChild);
743
744        wireClose();
745        wireSignup();
746
747        window.requestAnimationFrame(updateThreshold);
748    }
749
750    function removeBanner() {
751        if (banner && banner.parentNode) { banner.remove(); }
752        banner = null;
753        if (heroObserver) { heroObserver.disconnect(); heroObserver = null; }
754        hero = null;
755        collapseThreshold = Infinity;
756    }
757
758    function wireClose() {
759        const btn = banner.querySelector("[data-jc-close]");
760        if (!btn) { return; }
761        btn.addEventListener("click", function () {
762            if (!banner || dismissed) { return; }
763            dismissed = true;
764
765            if (SETTINGS.rememberDismissalForSession) {
766                try { window.sessionStorage.setItem(DISMISS_KEY, "true"); }
767                catch (e) { /* session storage unavailable */ }
768            }
769
770            banner.classList.remove("is-collapsed");
771            banner.classList.add("is-dismissed");
772            banner.setAttribute("aria-hidden", "true");
773
774            if (banner.contains(document.activeElement)) {
775                document.activeElement.blur();
776            }
777
778            const node = banner;
779            window.setTimeout(function () {
780                if (node && node.parentNode) { node.remove(); }
781                if (banner === node) { banner = null; }
782                if (heroObserver) { heroObserver.disconnect(); heroObserver = null; }
783                hero = null;
784            }, SETTINGS.animationDuration + 60);
785        });
786    }
787
788    /* ---------------------------------------------------------------------
789       11. NEWSLETTER SCROLL
790    --------------------------------------------------------------------- */
791    function findNewsletterTarget() {
792        const selectors = [
793            "#newsletter-signup",
794            "#jcNewsletterSignup",
795            "[data-section-type='newsletterSubscription']",
796            ".footer-info-col--newsletter",
797            ".footer-newsletter",
798            "footer form[action*='subscribe']",
799            "footer input[name='nl_email']",
800            "footer input[type='email']"
801        ];
802        for (let i = 0; i < selectors.length; i++) {
803            const el = document.querySelector(selectors[i]);
804            if (el) { return el; }
805        }
806        return document.querySelector("footer");
807    }
808
809    function wireSignup() {
810        const link = banner.querySelector("[data-jc-signup]");
811        if (!link) { return; }
812        link.addEventListener("click", function (event) {
813            const target = findNewsletterTarget();
814            if (!target) { return; }
815            event.preventDefault();
816            target.scrollIntoView({ behavior: "smooth", block: "center" });
817            window.setTimeout(function () {
818                const input = target.matches("input[type='email']")
819                    ? target
820                    : target.querySelector("input[type='email'], input[name='nl_email']");
821                if (input) {
822                    try { input.focus({ preventScroll: true }); }
823                    catch (e) { input.focus(); }
824                }
825            }, 600);
826        });
827    }
828
829    /* ---------------------------------------------------------------------
830       12. HERO + SCROLL COLLAPSE
831    --------------------------------------------------------------------- */
832    function findHero() {
833        const selectors = [
834            "[data-jc-initial-hero]",
835            "[data-jc-hero]",
836            ".jc-hero",
837            ".heroCarousel",
838            ".home-hero",
839            ".hero-banner"
840        ];
841        for (let s = 0; s < selectors.length; s++) {
842            const list = document.querySelectorAll(selectors[s]);
843            for (let i = 0; i < list.length; i++) {
844                const el = list[i];
845                if (el && !el.closest("header") && el.offsetHeight > 150) {
846                    return el;
847                }
848            }
849        }
850        return null;
851    }
852
853    function persistentHeaderHeight() {
854        if (!header) { return 0; }
855        const full = header.getBoundingClientRect().height;
856        const bannerH = banner ? banner.getBoundingClientRect().height : 0;
857        return Math.max(0, full - bannerH);
858    }
859
860    // Recomputes the collapse point from the CURRENT hero. No re-observing here,
861    // so the hero ResizeObserver can call it safely without looping.
862    function recalcFromHero() {
863        if (!hero || !banner || dismissed || !isHomepage() || !isDesktop()) {
864            return false;
865        }
866        const rect = hero.getBoundingClientRect();
867        const heroBottom = rect.top + window.pageYOffset + rect.height;
868        collapseThreshold = Math.max(0, heroBottom - persistentHeaderHeight());
869        return true;
870    }
871
872    // Re-observes the hero only when the hero element identity changes.
873    function refreshHero() {
874        const found = (banner && !dismissed && isHomepage() && isDesktop())
875            ? findHero()
876            : null;
877        if (found === hero) { return; }
878        hero = found;
879        if (heroObserver) { heroObserver.disconnect(); heroObserver = null; }
880        if (hero && "ResizeObserver" in window) {
881            heroObserver = new ResizeObserver(function () {
882                if (recalcFromHero()) { applyScrollState(); }
883            });
884            heroObserver.observe(hero);
885        }
886    }
887
888    function updateThreshold() {
889        if (destroyed) { return; }
890        refreshHero();
891        if (recalcFromHero()) {
892            applyScrollState();
893        } else {
894            collapseThreshold = Infinity;
895            if (banner && !dismissed) {
896                banner.classList.remove("is-collapsed");
897                banner.removeAttribute("aria-hidden");
898            }
899        }
900    }
901
902    function applyScrollState() {
903        if (destroyed || !banner || dismissed || !isHomepage() || !isDesktop()) {
904            return;
905        }
906        const collapse = window.pageYOffset >= collapseThreshold;
907        banner.classList.toggle("is-collapsed", collapse);
908        if (collapse) {
909            banner.setAttribute("aria-hidden", "true");
910            if (banner.contains(document.activeElement)) {
911                document.activeElement.blur();
912            }
913        } else {
914            banner.removeAttribute("aria-hidden");
915        }
916    }
917
918    function onScroll() {
919        if (scrollQueued) { return; }
920        scrollQueued = true;
921        window.requestAnimationFrame(function () {
922            scrollQueued = false;
923            applyScrollState();
924        });
925    }
926
927    function onResize() {
928        if (resizeQueued) { return; }
929        resizeQueued = true;
930        window.requestAnimationFrame(function () {
931            resizeQueued = false;
932            updateThreshold();
933        });
934    }
935
936    /* ---------------------------------------------------------------------
937       13. RECONCILE + OBSERVER
938       The observer is paused around our own DOM writes so it never reacts
939       to the banner it just inserted (no recursion, no loops).
940    --------------------------------------------------------------------- */
941    function reconcile() {
942        if (destroyed) { return; }
943        stopObserver();
944        try {
945            removeThemeBanner();
946            removeLegacyBanners();
947            ensureStickyHeader();
948            if (shouldShowBanner()) { ensureBanner(); }
949            else { removeBanner(); }
950        } finally {
951            startObserver();
952        }
953    }
954
955    function scheduleReconcile() {
956        if (reconcileQueued || destroyed) { return; }
957        reconcileQueued = true;
958        window.requestAnimationFrame(function () {
959            reconcileQueued = false;
960            reconcile();
961        });
962    }
963
964    function startObserver() {
965        if (destroyed || !document.body) { return; }
966        if (!observer) { observer = new MutationObserver(scheduleReconcile); }
967        observer.observe(document.body, { childList: true, subtree: true });
968    }
969
970    function stopObserver() {
971        if (observer) { observer.disconnect(); }
972    }
973
974    /* ---------------------------------------------------------------------
975       14. INIT
976    --------------------------------------------------------------------- */
977    function onLoad() {
978        removeThemeBanner();
979        ensureStickyHeader();
980        if (shouldShowBanner()) { ensureBanner(); }
981        updateThreshold();
982    }
983
984    function init() {
985        if (destroyed) { return; }
986        injectFont();
987        injectStyles();
988        removeThemeBanner();
989        removeLegacyBanners();
990        ensureStickyHeader();
991        if (shouldShowBanner()) { ensureBanner(); }
992
993        startObserver();
994
995        window.addEventListener("scroll", onScroll, { passive: true });
996        window.addEventListener("resize", onResize, { passive: true });
997        window.addEventListener("load", onLoad);
998    }
999
1000    if (document.readyState === "loading") {
1001        document.addEventListener("DOMContentLoaded", init, { once: true });
1002    } else {
1003        init();
1004    }
1005
1006    /* ---------------------------------------------------------------------
1007       15. CONTROLLER (lets the next version tear this one down cleanly
1007)
1008    --------------------------------------------------------------------- */
1009    window[CONTROLLER_KEY] = {
1010        version: VERSION,
1011        destroy: function () {
1012            destroyed = true;
1013            window.removeEventListener("scroll", onScroll);
1014            window.removeEventListener("resize", onResize);
1015            window.removeEventListener("load", onLoad);
1016            if (observer) { observer.disconnect(); observer = null; }
1017            if (heroObserver) { heroObserver.disconnect(); heroObserver = null; }
1018            if (banner && banner.parentNode) { banner.remove(); }
1019            if (header) { header.classList.remove(STICKY_CLASS); }
1020            const style = document.getElementById(STYLE_ID);
1021            if (style) { style.remove(); }
1022            banner = null;
1023            header = null;
1024            hero = null;
1025        }
1026    };
1027})();
1028</script>
1028<script nonce="">
1029if(typeof fbq === 'function') {
1030  fbq('trackSingle', '572028010124684', 'PageView', {}, {"eventID":"df6a261f-4024-4efc-b2f4-a149e3ed0b2b"});
1031} else if (typeof window.addEventListener === 'function') {
1032  window.addEventListener("load", function() { fbq('trackSingle', '572028010124684', 'PageView', {}, {"eventID":"df6a261f-4024-4efc-b2f4-a149e3ed0b2b"}); }, false)
1033}
1034</script>
1034
1035 
1035<script data-cfasync="false" src="https://microapps.bigcommerce.com/bodl-events/1.9.4/index.js" integrity="sha256-Y0tDj1qsyiKBRibKllwV0ZJ1aFlGYaHHGl/oUFoXJ7Y=" nonce="" crossorigin="anonymous"></script>
1035
1036 
1036<script data-cfasync="false" nonce="">
1037
1038 (function() {
1039    function decodeBase64(base64) {
1040       const text = atob(base64);
1041       const length = text.length;
1042       const bytes = new Uint8Array(length);
1043       for (let i = 0; i < length; i++) {
1044          bytes[i] = text.charCodeAt(i);
1045       }
1046       const decoder = new TextDecoder();
1047       return decoder.decode(bytes);
1048    }
1049    window.bodl = JSON.parse(decodeBase64("eyJzZXNzaW9uIjp7ImlkIjoiMWM5YmE4NGUtY2Q0OS00OTY0LTljZGMtN2YxMjFjZWQyNDYyIiwiZmlyc3RfdG91Y2hfdGltZXN0YW1wIjoiMjAyNi0wOS0zMFQwOToyODo1OCIsImZpcnN0X3RvdWNoX3JlZmVycmFsX3VybCI6IiIsImZpcnN0X3RvdWNoX3JlcXVlc3RfdXJsIjoiaHR0cHM6Ly9qdWdnZXJuYXV0Y2FzZS5jb20vYWJvdXQtdXMvIn0sInNob3BwZXIiOnsidmlzaXRvcl9pZCI6IiIsImN1c3RvbWVyX2lkIjpudWxsLCJlbWFpbCI6bnVsbCwiZmlyc3RfbmFtZSI6bnVsbCwibGFzdF9uYW1lIjpudWxsfSwiZGF0YV9jb25zZW50Ijp7ImZ1bmN0aW9uYWwiOnRydWUsImFuYWx5dGljcyI6dHJ1ZSwiYWR2ZXJ0aXNpbmciOnRydWV9LCJldmVudHMiOltdfQ=="));
1050 })()
1051
1052 </script>
1052
1053
1054<script nonce="">
1055(function () {
1056    var xmlHttp = new XMLHttpRequest();
1057    
1058    xmlHttp.open('POST', 'https://bes.gcp.data.bigcommerce.com/nobot');
1059    xmlHttp.setRequestHeader('Content-Type', 'application/json');
1060    xmlHttp.send('{"store_id":"1002659245","timezone_offset":"-7.0","timestamp":"2026-09-30T09:28:58.13404500Z","visit_id":"e3daf2cf-5294-4d98-a4ed-76e1549fcb33","channel_id":1}');
1061})();
1062</script>
1062
1063
1064        
1065
1066
1067
1068        
1069        
1070
1071        <!-- snippet location htmlhead -->
1072
1073         
1074    </head>
1075    <body class="csscolumns supermarket-layout--fullwidth
1076        
1077        supermarket-pageType--page
1078        supermarket-page--pages-page
1079        
1080        
1081        
1082        
1083        
1084        
1085        _product-card-has-brand
1086        _product-card-has-sku
1087        
1088        
1089        _product-card-has-rating
1090        " id="topOfPage">
1091
1092        <!-- snippet location header -->
1093
1094        <svg data-src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/stencil/ad737610-69cd-013f-c1e1-2aca43d705a8/e/45debc00-98db-013f-e7cd-7608931f64d7/img/icon-sprite.svg" class="icons-svg-sprite"></svg>
1095
1096        
1097<div class="banners-wrapper _top-carousel-global" id="banners-carousel">
1098    <div class="banners--global">
1099        <div data-content-region="top_banner_carousel--global"></div>
1100    </div>
1101
1102    <button class="banners-close" aria-label="Close">
1103        <span class="_close">
1104            <span class="is-srOnly">Close</span>
1105            <svg class="icon"><use href="#icon-close2"></use></svg>
1106        </span>
1107    </button>
1108</div>
1109
1110<header id="dinosaur_header" class="header jc-header" role="banner">
1111
1112    <div class="jc-header__main">
1113        <div class="jc-header__inner">
1114
1115            <div class="jc-header__zone jc-header__zone--left">
1116
1117                <a href="#menu"
1118                   class="jc-header__menuToggle mobileMenu-toggle"
1119                   data-mobile-menu-toggle="menu"
1120                   aria-controls="menu"
1121                   aria-expanded="false"
1122                   aria-label="Menu">
1123                    <span class="mobileMenu-toggleIcon" aria-hidden="true">
1124                        <span class="_icon"></span>
1125                    </span>
1126                    <span class="_label is-srOnly">Menu</span>
1127                </a>
1128
1129                    <div class="jc-header__logo header-logo _isImg">
1130                        <a href="https://juggernautcase.com/" data-instantload='{"page":"home"}'>
1131            <img class="header-logo-image-unknown-size" src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/jc_lockup_grey_1785088442__75622.original.png" alt="Juggernaut.Case™" title="Juggernaut.Case™">
1132</a>
1133                    </div>
1134
1135            </div>
1136
1137            <div class="jc-header__zone jc-header__zone--center">
1138                <div class="navPages-container" id="menu" data-menu aria-hidden="true">
1139
1140                    <div class="jc-mobile-menu-topbar">
1141                        <div class="jc-mobile-menu-logo">
1142                            <a href="https://juggernautcase.com/" data-instantload='{"page":"home"}'>
1143            <img class="header-logo-image-unknown-size" src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/jc_lockup_grey_1785088442__75622.original.png" alt="Juggernaut.Case™" title="Juggernaut.Case™">
1144</a>
1145                        </div>
1146
1147                        <button type="button"
1148                                class="jc-mobile-menu-close"
1149                                aria-label="Close">
1150                            <span class="is-srOnly">Close</span>
1151                        </button>
1152                    </div>
1153
1154                    <div class="container" id="bf-fix-menu-mobile">
1155                        <nav class="navPages _hasMegamenu _hasWidgets">
1156    <ul class="navPages-list">
1157
1158                    <li class="navPages-item navPages-item--id-173">
1159                        <a class="navPages-action has-subMenu u-hideMobile u-hideTablet "
1160    href="https://juggernautcase.com/categories/protect.html"
1161    data-instantload
1162    
1163>Protect</a>
1164<a class="navPages-action-toggle" href="#" data-collapsible="navPages-173">
1165    <span>Protect</span>
1166    <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-add"></use></svg></span>
1167    <span class="_less"><span class="is-srOnly">Back</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-remove"></use></svg></span>
1168</a>
1169<a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Protect" data-collapsible="navPages-173" title="More"><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg></a>
1170<div class="navPage-subMenu
1171    " id="navPages-173">
1172        <div class="navPage-subMenu-top">
1173            <div data-content-region="navPages_173_top--global"></div>
1174        </div>
1175    <div class="navPage-subMenu-middle">
1176            <div data-content-region="navPages_173_left--global"></div>
1177        <ul class="navPage-subMenu-list">
1178                <!-- 0 -->
1179                <li class="navPage-subMenu-item">
1180                    <div data-content-region="navPages_174_top--global"></div>
1181                        <a
1182                            class="navPage-subMenu-action has-subMenu"
1183                            href="https://juggernautcase.com/categories/apple.html"
1184                            data-instantload
1185                            
1186                            >
1187                                <span>Apple</span>
1188                        </a>
1189                        <span class="_hideToggleFirst u-hidden" aria-hidden="true"></span>
1190                        <a class="navPages-action-toggle" href="#"
1191                            data-collapsible="navPages-174">
1192                            <span>Apple</span>
1193                            <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg></span>
1194                            <span class="_less"><span class="is-srOnly">Close</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-left"></use></svg></span>
1195                        </a>
1196                        <a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Apple" data-collapsible="navPages-174" title="More">
1197                                <svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg>
1198                        </a>
1199                        <ul class="navPage-childList" id="navPages-174">
1200                                <!-- 1 -->
1201                                <li class="navPage-childList-item">
1202                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/iphone-18-pro-max.html" >iPhone 18 Pro Max</a>
1203                                </li>
1204                                <!-- 2 -->
1205                                <li class="navPage-childList-item">
1206                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/iphone-18-pro.html" >iPhone 18 Pro</a>
1207                                </li>
1208                                <!-- 3 -->
1209                                <li class="navPage-childList-item">
1210                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/iphone-17-pro-max.html" >iPhone 17 Pro Max</a>
1211                                </li>
1212                                <!-- 4 -->
1213                                <li class="navPage-childList-item">
1214                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/iphone-17-pro.html" >iPhone 17 Pro</a>
1215                                </li>
1216                                <!-- 5 -->
1217                                <li class="navPage-childList-item">
1218                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/iphone-16-pro-max.html" >iPhone 16 Pro Max</a>
1219                                </li>
1220                                <!-- 6 -->
1221                                <li class="navPage-childList-item">
1222                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/iphone-16-pro.html" >iPhone 16 Pro</a>
1223                                </li>
1224                                <!-- 7 -->
1225                                <li class="navPage-childList-item">
1226                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/iphone-15-pro-max.html" >iPhone 15 Pro Max</a>
1227                                </li>
1228                                <!-- 8 -->
1229                                <li class="navPage-childList-item">
1230                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/iphone-15-pro.html" >iPhone 15 Pro</a>
1231                                </li>
1232                                <!-- 9 -->
1233                                <li class="navPage-childList-item">
1234                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/iphone-14-pro-max.html" >iPhone 14 Pro Max</a>
1235                                </li>
1236                                <!-- 10 -->
1237                                <li class="navPage-childList-item">
1238                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/iphone-14-pro.html" >iPhone 14 Pro</a>
1239                                </li>
1240                                <!-- 11 -->
1241                                <li class="navPage-childList-item">
1242                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/iphone-14-plus.html" >iPhone 14+ Plus</a>
1243                                </li>
1244                            <li class="navPage-childList-item u-hideDesktop">
1245                                <a href="https://juggernautcase.com/categories/apple.html" class="navPage-childList-action">All Products</a>
1246                            </li>
1247                            <span class="_hideToggle u-hideDesktop" aria-hidden="true"></span>
1248                        </ul>
1249                        <div data-content-region="navPages_174_bottom--global"></div>
1250                </li>
1251                <!-- 12 -->
1252                <li class="navPage-subMenu-item">
1253                    <div data-content-region="navPages_175_top--global"></div>
1254                        <a
1255                            class="navPage-subMenu-action has-subMenu"
1256                            href="https://juggernautcase.com/categories/samsung.html"
1257                            data-instantload
1258                            
1259                            >
1260                                <span>Samsung</span>
1261                        </a>
1262                        <span class="_hideToggleFirst u-hidden" aria-hidden="true"></span>
1263                        <a class="navPages-action-toggle" href="#"
1264                            data-collapsible="navPages-175">
1265                            <span>Samsung</span>
1266                            <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg></span>
1267                            <span class="_less"><span class="is-srOnly">Close</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-left"></use></svg></span>
1268                        </a>
1269                        <a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Samsung" data-collapsible="navPages-175" title="More">
1270                                <svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg>
1271                        </a>
1272                        <ul class="navPage-childList" id="navPages-175">
1273                                <!-- 13 -->
1274                                <li class="navPage-childList-item">
1275                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/galaxy-s26-ultra.html" >Galaxy S26 Ultra</a>
1276                                </li>
1277                                <!-- 14 -->
1278                                <li class="navPage-childList-item">
1279                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/galaxy-s26.html" >Galaxy S26</a>
1280                                </li>
1281                                <!-- 15 -->
1282                                <li class="navPage-childList-item">
1283                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/galaxy-s25-ultra.html" >Galaxy S25 Ultra</a>
1284                                </li>
1285                                <!-- 16 -->
1286                                <li class="navPage-childList-item">
1287                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/galaxy-s25.html" >Galaxy S25</a>
1288                                </li>
1289                                <!-- 17 -->
1290                                <li class="navPage-childList-item">
1291                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/galaxy-s24-ultra.html" >Galaxy S24 Ultra</a>
1292                                </li>
1293                                <!-- 18 -->
1294                                <li class="navPage-childList-item">
1295                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/galaxy-s24.html" >Galaxy S24</a>
1296                                </li>
1297                                <!-- 19 -->
1298                                <li class="navPage-childList-item">
1299                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/galaxy-s23-ultra.html" >Galaxy S23 Ultra</a>
1300                                </li>
1301                                <!-- 20 -->
1302                                <li class="navPage-childList-item">
1303                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/galaxy-s23.html" >Galaxy S23</a>
1304                                </li>
1305                                <!-- 21 -->
1306                                <li class="navPage-childList-item">
1307                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/galaxy-s22-ultra.html" >Galaxy S22 Ultra</a>
1308                                </li>
1309                                <!-- 22 -->
1310                                <li class="navPage-childList-item">
1311                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/galaxy-s22-plus.html" >Galaxy S22+ (plus)</a>
1312                                </li>
1313                                <!-- 23 -->
1314                                <li class="navPage-childList-item">
1315                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/galaxy-s22.html" >Galaxy S22</a>
1316                                </li>
1317                                <!-- 24 -->
1318                                <li class="navPage-childList-item">
1319                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/galaxy-s20.html" >Galaxy S20</a>
1320                                </li>
1321                                <!-- 25 -->
1322                                <li class="navPage-childList-item">
1323                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/xcover7-pro.html" >XCover7 Pro</a>
1324                                </li>
1325                                <!-- 26 -->
1326                                <li class="navPage-childList-item">
1327                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/xcover7.html" >XCover7</a>
1328                                </li>
1329                                <!-- 27 -->
1330                                <li class="navPage-childList-item">
1331                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/xcover6-pro.html" >XCover6 Pro</a>
1332                                </li>
1333                            <li class="navPage-childList-item u-hideDesktop">
1334                                <a href="https://juggernautcase.com/categories/samsung.html" class="navPage-childList-action">All Products</a>
1335                            </li>
1336                            <span class="_hideToggle u-hideDesktop" aria-hidden="true"></span>
1337                        </ul>
1338                        <div data-content-region="navPages_175_bottom--global"></div>
1339                </li>
1340                <!-- 28 -->
1341                <li class="navPage-subMenu-item">
1342                    <div data-content-region="navPages_176_top--global"></div>
1343                        <a
1344                            class="navPage-subMenu-action has-subMenu"
1345                            href="https://juggernautcase.com/categories/tablet-cases.html"
1346                            data-instantload
1347                            
1348                            >
1349                                <span>Tablet Cases</span>
1350                        </a>
1351                        <span class="_hideToggleFirst u-hidden" aria-hidden="true"></span>
1352                        <a class="navPages-action-toggle" href="#"
1353                            data-collapsible="navPages-176">
1354                            <span>Tablet Cases</span>
1355                            <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg></span>
1356                            <span class="_less"><span class="is-srOnly">Close</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-left"></use></svg></span>
1357                        </a>
1358                        <a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Tablet Cases" data-collapsible="navPages-176" title="More">
1359                                <svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg>
1360                        </a>
1361                        <ul class="navPage-childList" id="navPages-176">
1362                                <!-- 29 -->
1363                                <li class="navPage-childList-item">
1364                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/tab-active-5.html" >Tab Active 5</a>
1365                                </li>
1366                                <!-- 30 -->
1367                                <li class="navPage-childList-item">
1368                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/tab-active-3.html" >Tab Active 3</a>
1369                                </li>
1370                                <!-- 31 -->
1371                                <li class="navPage-childList-item">
1372                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/tab-active-2.html" >Tab Active 2</a>
1373                                </li>
1374                            <li class="navPage-childList-item u-hideDesktop">
1375                                <a href="https://juggernautcase.com/categories/tablet-cases.html" class="navPage-childList-action">All Products</a>
1376                            </li>
1377                            <span class="_hideToggle u-hideDesktop" aria-hidden="true"></span>
1378                        </ul>
1379                        <div data-content-region="navPages_176_bottom--global"></div>
1380                </li>
1381                <!-- 32 -->
1382                <li class="navPage-subMenu-item">
1383                    <div data-content-region="navPages_177_top--global"></div>
1384                        <a
1385                            class="navPage-subMenu-action has-subMenu"
1386                            href="https://juggernautcase.com/categories/accessories.html"
1387                            data-instantload
1388                            
1389                            >
1390                                <span>Accessories</span>
1391                        </a>
1392                        <span class="_hideToggleFirst u-hidden" aria-hidden="true"></span>
1393                        <a class="navPages-action-toggle" href="#"
1394                            data-collapsible="navPages-177">
1395                            <span>Accessories</span>
1396                            <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg></span>
1397                            <span class="_less"><span class="is-srOnly">Close</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-left"></use></svg></span>
1398                        </a>
1399                        <a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Accessories" data-collapsible="navPages-177" title="More">
1400                                <svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg>
1401                        </a>
1402                        <ul class="navPage-childList" id="navPages-177">
1403                                <!-- 33 -->
1404                                <li class="navPage-childList-item">
1405                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/replacement-parts.html" >Replacement Parts</a>
1406                                </li>
1407                                <!-- 34 -->
1408                                <li class="navPage-childList-item">
1409                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/shld-screen-protectors.html" >SHLD Screen Protectors</a>
1410                                </li>
1411                            <li class="navPage-childList-item u-hideDesktop">
1412                                <a href="https://juggernautcase.com/categories/accessories.html" class="navPage-childList-action">All Products</a>
1413                            </li>
1414                            <span class="_hideToggle u-hideDesktop" aria-hidden="true"></span>
1415                        </ul>
1416                        <div data-content-region="navPages_177_bottom--global"></div>
1417                </li>
1418            <li class="navPage-subMenu-item u-hideDesktop">
1419                <a href="https://juggernautcase.com/categories/protect.html" class="navPage-subMenu-action">
1420                    <span>All Products</span>
1421                </a>
1422            </li>
1423        </ul>
1424            <div data-content-region="navPages_173_right--global"></div>
1425    </div>
1426        <div class="navPage-subMenu-bottom">
1427            <div data-content-region="navPages_173_bottom--global"><div data-layout-id="e64c9e92-8768-40f9-9b29-52c1ec1feae2">       <div data-sub-layout-container="549646cb-866d-4001-9ec2-f053691f1d88" data-layout-name="Layout">
1428    <style data-container-styling="549646cb-866d-4001-9ec2-f053691f1d88">
1429        [data-sub-layout-container="549646cb-866d-4001-9ec2-f053691f1d88"] {
1430            box-sizing: border-box;
1431            display: flex;
1432            flex-wrap: wrap;
1433            z-index: 0;
1434            position: relative;
1435            height: ;
1436            padding-top: 0px;
1437            padding-right: 0px;
1438            padding-bottom: 0px;
1439            padding-left: 0px;
1440            margin-top: 0px;
1441            margin-right: 0px;
1442            margin-bottom: 0px;
1443            margin-left: 0px;
1444            border-width: 0px;
1445            border-style: solid;
1446            border-color: #333333;
1447        }
1448
1449        [data-sub-layout-container="549646cb-866d-4001-9ec2-f053691f1d88"]:after {
1450            display: block;
1451            position: absolute;
1452            top: 0;
1453            left: 0;
1454            bottom: 0;
1455            right: 0;
1456            background-size: cover;
1457            z-index: auto;
1458        }
1459    </style>
1460
1461    <div data-sub-layout="f2dafc31-ef24-4610-8161-ac21065f7839">
1462        <style data-column-styling="f2dafc31-ef24-4610-8161-ac21065f7839">
1463            [data-sub-layout="f2dafc31-ef24-4610-8161-ac21065f7839"] {
1464                display: flex;
1465                flex-direction: column;
1466                box-sizing: border-box;
1467                flex-basis: 100%;
1468                max-width: 100%;
1469                z-index: 0;
1470                position: relative;
1471                height: ;
1472                padding-top: 0px;
1473                padding-right: 10.5px;
1474                padding-bottom: 0px;
1475                padding-left: 10.5px;
1476                margin-top: 0px;
1477                margin-right: 0px;
1478                margin-bottom: 0px;
1479                margin-left: 0px;
1480                border-width: 0px;
1481                border-style: solid;
1482                border-color: #333333;
1483                justify-content: center;
1484            }
1485            [data-sub-layout="f2dafc31-ef24-4610-8161-ac21065f7839"]:after {
1486                display: block;
1487                position: absolute;
1488                top: 0;
1489                left: 0;
1490                bottom: 0;
1491                right: 0;
1492                background-size: cover;
1493                z-index: auto;
1494            }
1495            @media only screen and (max-width: 700px) {
1496                [data-sub-layout="f2dafc31-ef24-4610-8161-ac21065f7839"] {
1497                    flex-basis: 100%;
1498                    max-width: 100%;
1499                }
1500            }
1501        </style>
1502        <div data-widget-id="6b30ed2c-4fa6-4eb8-bdc6-a4e86126d8cc" data-placement-id="12a97b4f-4bcf-4f19-9f11-82a0a92dd05d" data-placement-status="ACTIVE"><style>
1503@import url('https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600;700;800;900&display=swap');
1504
1505.jc-callout-widget,
1506.jc-callout-widget * {
1507  box-sizing: border-box;
1508  font-family: 'Saira', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
1509}
1510
1511.jc-callout-widget {
1512  width: 100%;
1513  margin: 0;
1514  padding: 0;
1515}
1516
1517.jc-callout-content {
1518  display: flex;
1519  align-items: center;
1520  justify-content: flex-start;
1521  width: 100%;
1522  padding: 16px 20px;
1523  background: #f7f7f7;
1524  border-left: 3px solid #FF8F1C;
1525}
1526
1527.jc-callout-text {
1528  flex: 1 1 auto;
1529  margin: 0;
1530  font-size: 13px;
1531  font-weight: 400;
1532  line-height: 1.5;
1533  color: #333333;
1534}
1535
1536.jc-callout-highlight {
1537  color: #111111;
1538  font-weight: 900;
1539}
1540
1541@media (max-width: 768px) {
1542  .jc-callout-content {
1543    padding: 14px 16px;
1544  }
1545
1546  .jc-callout-text {
1547    font-size: 12px;
1548    line-height: 1.45;
1549  }
1550}
1551</style>
1552
1553<div class="jc-callout-widget">
1554  <div class="jc-callout-content">
1555    <p class="jc-callout-text">
1556      <strong class="jc-callout-highlight">Don’t see your device?</strong> Our development roadmap is driven by government requirements, agency demand, and real-world field feedback.
1557    </p>
1558  </div>
1559</div>
1560</div>
1561    </div>
1562</div>
1563
1564</div></div>
1565        </div>
1566</div>
1567                    </li>
1568                    <li class="navPages-item navPages-item--id-178">
1569                        <a class="navPages-action has-subMenu u-hideMobile u-hideTablet "
1570    href="https://juggernautcase.com/categories/mount.html"
1571    data-instantload
1572    
1573>Mount</a>
1574<a class="navPages-action-toggle" href="#" data-collapsible="navPages-178">
1575    <span>Mount</span>
1576    <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-add"></use></svg></span>
1577    <span class="_less"><span class="is-srOnly">Back</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-remove"></use></svg></span>
1578</a>
1579<a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Mount" data-collapsible="navPages-178" title="More"><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg></a>
1580<div class="navPage-subMenu
1581    " id="navPages-178">
1582        <div class="navPage-subMenu-top">
1583            <div data-content-region="navPages_178_top--global"></div>
1584        </div>
1585    <div class="navPage-subMenu-middle">
1586            <div data-content-region="navPages_178_left--global"></div>
1587        <ul class="navPage-subMenu-list">
1588                <!-- 35 -->
1589                <li class="navPage-subMenu-item">
1590                    <div data-content-region="navPages_179_top--global"></div>
1591                        <a
1592                            class="navPage-subMenu-action has-subMenu"
1593                            href="https://juggernautcase.com/categories/mount/body-worn.html"
1594                            data-instantload
1595                            
1596                            >
1597                                <span>Body-Worn</span>
1598                        </a>
1599                        <span class="_hideToggleFirst u-hidden" aria-hidden="true"></span>
1600                        <a class="navPages-action-toggle" href="#"
1601                            data-collapsible="navPages-179">
1602                            <span>Body-Worn</span>
1603                            <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg></span>
1604                            <span class="_less"><span class="is-srOnly">Close</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-left"></use></svg></span>
1605                        </a>
1606                        <a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Body-Worn" data-collapsible="navPages-179" title="More">
1607                                <svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg>
1608                        </a>
1609                        <ul class="navPage-childList" id="navPages-179">
1610                                <!-- 36 -->
1611                                <li class="navPage-childList-item">
1612                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/armor-mount.html" >Armor Mount</a>
1613                                </li>
1614                                <!-- 37 -->
1615                                <li class="navPage-childList-item">
1616                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/armor-mount-tablet.html" >Armor Mount (tablet)</a>
1617                                </li>
1618                                <!-- 38 -->
1619                                <li class="navPage-childList-item">
1620                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/belt-mount.html" >Belt Mount</a>
1621                                </li>
1622                                <!-- 39 -->
1623                                <li class="navPage-childList-item">
1624                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/forearm-mount.html" >Forearm Mount</a>
1625                                </li>
1626                                <!-- 40 -->
1627                                <li class="navPage-childList-item">
1628                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/clip-mount.html" >Clip Mount</a>
1629                                </li>
1630                            <li class="navPage-childList-item u-hideDesktop">
1631                                <a href="https://juggernautcase.com/categories/mount/body-worn.html" class="navPage-childList-action">All Products</a>
1632                            </li>
1633                            <span class="_hideToggle u-hideDesktop" aria-hidden="true"></span>
1634                        </ul>
1635                        <div data-content-region="navPages_179_bottom--global"></div>
1636                </li>
1637                <!-- 41 -->
1638                <li class="navPage-subMenu-item">
1639                    <div data-content-region="navPages_180_top--global"></div>
1640                        <a
1641                            class="navPage-subMenu-action has-subMenu"
1642                            href="https://juggernautcase.com/categories/vehicle-aviation-mounts.html"
1643                            data-instantload
1644                            
1645                            >
1646                                <span>Vehicle &amp; Aviation Mounts</span>
1647                        </a>
1648                        <span class="_hideToggleFirst u-hidden" aria-hidden="true"></span>
1649                        <a class="navPages-action-toggle" href="#"
1650                            data-collapsible="navPages-180">
1651                            <span>Vehicle &amp; Aviation Mounts</span>
1652                            <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg></span>
1653                            <span class="_less"><span class="is-srOnly">Close</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-left"></use></svg></span>
1654                        </a>
1655                        <a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Vehicle &amp; Aviation Mounts" data-collapsible="navPages-180" title="More">
1656                                <svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg>
1657                        </a>
1658                        <ul class="navPage-childList" id="navPages-180">
1659                                <!-- 42 -->
1660                                <li class="navPage-childList-item">
1661                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/vehicle-mount.html" >Vehicle Mount</a>
1662                                </li>
1663                                <!-- 43 -->
1664                                <li class="navPage-childList-item">
1665                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/vehicle-mount-tablet.html" >Vehicle Mount (tablet)</a>
1666                                </li>
1667                                <!-- 44 -->
1668                                <li class="navPage-childList-item">
1669                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/ejection-seat-ekb-solution.html" >Ejection-Seat EKB Solution</a>
1670                                </li>
1671                                <!-- 45 -->
1672                                <li class="navPage-childList-item">
1673                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/kneeboard-mount.html" >Kneeboard Mount</a>
1674                                </li>
1675                                <!-- 46 -->
1676                                <li class="navPage-childList-item">
1677                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/ram-mount-kits.html" >RAM Mount Kits</a>
1678                                </li>
1679                            <li class="navPage-childList-item u-hideDesktop">
1680                                <a href="https://juggernautcase.com/categories/vehicle-aviation-mounts.html" class="navPage-childList-action">All Products</a>
1681                            </li>
1682                            <span class="_hideToggle u-hideDesktop" aria-hidden="true"></span>
1683                        </ul>
1684                        <div data-content-region="navPages_180_bottom--global"></div>
1685                </li>
1686                <!-- 47 -->
1687                <li class="navPage-subMenu-item">
1688                    <div data-content-region="navPages_181_top--global"></div>
1689                        <a
1690                            class="navPage-subMenu-action has-subMenu"
1691                            href="https://juggernautcase.com/categories/inductive-charge-mounts.html"
1692                            data-instantload
1693                            
1694                            >
1695                                <span>Inductive Charge Mounts</span>
1696                        </a>
1697                        <span class="_hideToggleFirst u-hidden" aria-hidden="true"></span>
1698                        <a class="navPages-action-toggle" href="#"
1699                            data-collapsible="navPages-181">
1700                            <span>Inductive Charge Mounts</span>
1701                            <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg></span>
1702                            <span class="_less"><span class="is-srOnly">Close</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-left"></use></svg></span>
1703                        </a>
1704                        <a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Inductive Charge Mounts" data-collapsible="navPages-181" title="More">
1705                                <svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg>
1706                        </a>
1707                        <ul class="navPage-childList" id="navPages-181">
1708                                <!-- 48 -->
1709                                <li class="navPage-childList-item">
1710                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/inductive-charge-armor-mount.html" >Inductive Charge Armor Mount</a>
1711                                </li>
1712                                <!-- 49 -->
1713                                <li class="navPage-childList-item">
1714                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/inductive-charge-vehicle-mount.html" >Inductive Charge Vehicle Mount</a>
1715                                </li>
1716                            <li class="navPage-childList-item u-hideDesktop">
1717                                <a href="https://juggernautcase.com/categories/inductive-charge-mounts.html" class="navPage-childList-action">All Products</a>
1718                            </li>
1719                            <span class="_hideToggle u-hideDesktop" aria-hidden="true"></span>
1720                        </ul>
1721                        <div data-content-region="navPages_181_bottom--global"></div>
1722                </li>
1723                <!-- 50 -->
1724                <li class="navPage-subMenu-item">
1725                    <div data-content-region="navPages_182_top--global"></div>
1726                        <a
1727                            class="navPage-subMenu-action has-subMenu"
1728                            href="https://juggernautcase.com/categories/specialty-support.html"
1729                            data-instantload
1730                            
1731                            >
1732                                <span>Specialty / Support</span>
1733                        </a>
1734                        <span class="_hideToggleFirst u-hidden" aria-hidden="true"></span>
1735                        <a class="navPages-action-toggle" href="#"
1736                            data-collapsible="navPages-182">
1737                            <span>Specialty / Support</span>
1738                            <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg></span>
1739                            <span class="_less"><span class="is-srOnly">Close</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-left"></use></svg></span>
1740                        </a>
1741                        <a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Specialty / Support" data-collapsible="navPages-182" title="More">
1742                                <svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg>
1743                        </a>
1744                        <ul class="navPage-childList" id="navPages-182">
1745                                <!-- 51 -->
1746                                <li class="navPage-childList-item">
1747                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/radio-holster.html" >Radio Holster</a>
1748                                </li>
1749                                <!-- 52 -->
1750                                <li class="navPage-childList-item">
1751                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/mount/specialty-support/pals-sternum-panel.html" >PALS Sternum Panel</a>
1752                                </li>
1753                                <!-- 53 -->
1754                                <li class="navPage-childList-item">
1755                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/stylus-pen-and-garage-kit.html" >Stylus Pen and Garage Kit</a>
1756                                </li>
1757                                <!-- 54 -->
1758                                <li class="navPage-childList-item">
1759                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/haho-l
1759ite-nav-board.html" >HAHO Lite Nav Board</a>
1760                                </li>
1761                            <li class="navPage-childList-item u-hideDesktop">
1762                                <a href="https://juggernautcase.com/categories/specialty-support.html" class="navPage-childList-action">All Products</a>
1763                            </li>
1764                            <span class="_hideToggle u-hideDesktop" aria-hidden="true"></span>
1765                        </ul>
1766                        <div data-content-region="navPages_182_bottom--global"></div>
1767                </li>
1768            <li class="navPage-subMenu-item u-hideDesktop">
1769                <a href="https://juggernautcase.com/categories/mount.html" class="navPage-subMenu-action">
1770                    <span>All Products</span>
1771                </a>
1772            </li>
1773        </ul>
1774            <div data-content-region="navPages_178_right--global"></div>
1775    </div>
1776        <div class="navPage-subMenu-bottom">
1777            <div data-content-region="navPages_178_bottom--global"><div data-layout-id="2babbbcb-90e8-44a1-84f4-db784865276a">       <div data-sub-layout-container="0e1f610a-810a-4f46-ada7-53155ec8ca71" data-layout-name="Layout">
1778    <style data-container-styling="0e1f610a-810a-4f46-ada7-53155ec8ca71">
1779        [data-sub-layout-container="0e1f610a-810a-4f46-ada7-53155ec8ca71"] {
1780            box-sizing: border-box;
1781            display: flex;
1782            flex-wrap: wrap;
1783            z-index: 0;
1784            position: relative;
1785            height: ;
1786            padding-top: 0px;
1787            padding-right: 0px;
1788            padding-bottom: 0px;
1789            padding-left: 0px;
1790            margin-top: 0px;
1791            margin-right: 0px;
1792            margin-bottom: 0px;
1793            margin-left: 0px;
1794            border-width: 0px;
1795            border-style: solid;
1796            border-color: #333333;
1797        }
1798
1799        [data-sub-layout-container="0e1f610a-810a-4f46-ada7-53155ec8ca71"]:after {
1800            display: block;
1801            position: absolute;
1802            top: 0;
1803            left: 0;
1804            bottom: 0;
1805            right: 0;
1806            background-size: cover;
1807            z-index: auto;
1808        }
1809    </style>
1810
1811    <div data-sub-layout="676b21db-0ff2-4eeb-8b56-2d590646ae1d">
1812        <style data-column-styling="676b21db-0ff2-4eeb-8b56-2d590646ae1d">
1813            [data-sub-layout="676b21db-0ff2-4eeb-8b56-2d590646ae1d"] {
1814                display: flex;
1815                flex-direction: column;
1816                box-sizing: border-box;
1817                flex-basis: 100%;
1818                max-width: 100%;
1819                z-index: 0;
1820                position: relative;
1821                height: ;
1822                padding-top: 0px;
1823                padding-right: 10.5px;
1824                padding-bottom: 0px;
1825                padding-left: 10.5px;
1826                margin-top: 0px;
1827                margin-right: 0px;
1828                margin-bottom: 0px;
1829                margin-left: 0px;
1830                border-width: 0px;
1831                border-style: solid;
1832                border-color: #333333;
1833                justify-content: center;
1834            }
1835            [data-sub-layout="676b21db-0ff2-4eeb-8b56-2d590646ae1d"]:after {
1836                display: block;
1837                position: absolute;
1838                top: 0;
1839                left: 0;
1840                bottom: 0;
1841                right: 0;
1842                background-size: cover;
1843                z-index: auto;
1844            }
1845            @media only screen and (max-width: 700px) {
1846                [data-sub-layout="676b21db-0ff2-4eeb-8b56-2d590646ae1d"] {
1847                    flex-basis: 100%;
1848                    max-width: 100%;
1849                }
1850            }
1851        </style>
1852        <div data-widget-id="0ce5f9b3-0c03-4de8-8eaf-bca234668206" data-placement-id="24efe034-3378-4ba2-9fad-17f3594d416f" data-placement-status="ACTIVE"><style>
1853@import url('https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600;700;800;900&display=swap');
1854
1855.jc-callout-widget,
1856.jc-callout-widget * {
1857  box-sizing: border-box;
1858  font-family: 'Saira', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
1859}
1860
1861.jc-callout-widget {
1862  width: 100%;
1863  margin: 0;
1864  padding: 0;
1865}
1866
1867.jc-callout-content {
1868  display: flex;
1869  align-items: center;
1870  justify-content: flex-start;
1871  width: 100%;
1872  padding: 16px 20px;
1873  background: #f7f7f7;
1874  border-left: 3px solid #FF8F1C;
1875}
1876
1877.jc-callout-text {
1878  flex: 1 1 auto;
1879  margin: 0;
1880  font-size: 13px;
1881  font-weight: 400;
1882  line-height: 1.5;
1883  color: #333333;
1884}
1885
1886.jc-callout-highlight {
1887  color: #111111;
1888  font-weight: 900;
1889}
1890
1891@media (max-width: 768px) {
1892  .jc-callout-content {
1893    padding: 14px 16px;
1894  }
1895
1896  .jc-callout-text {
1897    font-size: 12px;
1898    line-height: 1.45;
1899  }
1900}
1901</style>
1902
1903<div class="jc-callout-widget">
1904  <div class="jc-callout-content">
1905    <p class="jc-callout-text">
1906      <strong class="jc-callout-highlight">Check mount size before ordering.</strong> Mounts are sized to the phone case. Confirm the correct mount size on your case product page before purchase.
1907    </p>
1908  </div>
1909</div>
1910</div>
1911    </div>
1912</div>
1913
1914</div></div>
1915        </div>
1916</div>
1917                    </li>
1918                    <li class="navPages-item navPages-item--id-183">
1919                        <a class="navPages-action has-subMenu u-hideMobile u-hideTablet "
1920    href="https://juggernautcase.com/categories/connect.html"
1921    data-instantload
1922    
1923>Connect</a>
1924<a class="navPages-action-toggle" href="#" data-collapsible="navPages-183">
1925    <span>Connect</span>
1926    <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-add"></use></svg></span>
1927    <span class="_less"><span class="is-srOnly">Back</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-remove"></use></svg></span>
1928</a>
1929<a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Connect" data-collapsible="navPages-183" title="More"><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg></a>
1930<div class="navPage-subMenu
1931    " id="navPages-183">
1932        <div class="navPage-subMenu-top">
1933            <div data-content-region="navPages_183_top--global"></div>
1934        </div>
1935    <div class="navPage-subMenu-middle">
1936            <div data-content-region="navPages_183_left--global"></div>
1937        <ul class="navPage-subMenu-list">
1938                <!-- 55 -->
1939                <li class="navPage-subMenu-item">
1940                    <div data-content-region="navPages_184_top--global"></div>
1941                        <a
1942                            class="navPage-subMenu-action has-subMenu"
1943                            href="https://juggernautcase.com/categories/oprtr-cables.html"
1944                            data-instantload
1945                            
1946                            >
1947                                <span>OPRTR cables</span>
1948                        </a>
1949                        <span class="_hideToggleFirst u-hidden" aria-hidden="true"></span>
1950                        <a class="navPages-action-toggle" href="#"
1951                            data-collapsible="navPages-184">
1952                            <span>OPRTR cables</span>
1953                            <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg></span>
1954                            <span class="_less"><span class="is-srOnly">Close</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-left"></use></svg></span>
1955                        </a>
1956                        <a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More OPRTR cables" data-collapsible="navPages-184" title="More">
1957                                <svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg>
1958                        </a>
1959                        <ul class="navPage-childList" id="navPages-184">
1960                                <!-- 56 -->
1961                                <li class="navPage-childList-item">
1962                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/connect/oprtr-cables/power-delivery.html" >Power Delivery</a>
1963                                </li>
1964                                <!-- 57 -->
1965                                <li class="navPage-childList-item">
1966                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/connect/oprtr-cables/source-mode.html" >Source Mode</a>
1967                                </li>
1968                                <!-- 58 -->
1969                                <li class="navPage-childList-item">
1970                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/connect/oprtr-cables/sink-mode.html" >Sink Mode</a>
1971                                </li>
1972                                <!-- 59 -->
1973                                <li class="navPage-childList-item">
1974                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/connect/oprtr-cables/usb-c-charge-cable.html" >USB-C Charge Cable</a>
1975                                </li>
1976                            <li class="navPage-childList-item u-hideDesktop">
1977                                <a href="https://juggernautcase.com/categories/oprtr-cables.html" class="navPage-childList-action">All Products</a>
1978                            </li>
1979                            <span class="_hideToggle u-hideDesktop" aria-hidden="true"></span>
1980                        </ul>
1981                        <div data-content-region="navPages_184_bottom--global"></div>
1982                </li>
1983                <!-- 60 -->
1984                <li class="navPage-subMenu-item">
1985                    <div data-content-region="navPages_185_top--global"></div>
1986                        <a
1987                            class="navPage-subMenu-action has-subMenu"
1988                            href="https://juggernautcase.com/categories/basic-charging.html"
1989                            data-instantload
1990                            
1991                            >
1992                                <span>Basic charging</span>
1993                        </a>
1994                        <span class="_hideToggleFirst u-hidden" aria-hidden="true"></span>
1995                        <a class="navPages-action-toggle" href="#"
1996                            data-collapsible="navPages-185">
1997                            <span>Basic charging</span>
1998                            <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg></span>
1999                            <span class="_less"><span class="is-srOnly">Close</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-left"></use></svg></span>
2000                        </a>
2001                        <a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Basic charging" data-collapsible="navPages-185" title="More">
2002                                <svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg>
2003                        </a>
2004                        <ul class="navPage-childList" id="navPages-185">
2005                                <!-- 61 -->
2006                                <li class="navPage-childList-item">
2007                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/inductive-charge-armor-mount-1.html" >Inductive Charge Armor Mount</a>
2008                                </li>
2009                                <!-- 62 -->
2010                                <li class="navPage-childList-item">
2011                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/inductive-charge-vehicle-mount-1.html" >Inductive Charge Vehicle Mount</a>
2012                                </li>
2013                                <!-- 63 -->
2014                                <li class="navPage-childList-item">
2015                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/charge-cables.html" >Charge Cables</a>
2016                                </li>
2017                            <li class="navPage-childList-item u-hideDesktop">
2018                                <a href="https://juggernautcase.com/categories/basic-charging.html" class="navPage-childList-action">All Products</a>
2019                            </li>
2020                            <span class="_hideToggle u-hideDesktop" aria-hidden="true"></span>
2021                        </ul>
2022                        <div data-content-region="navPages_185_bottom--global"></div>
2023                </li>
2024                <!-- 64 -->
2025                <li class="navPage-subMenu-item">
2026                    <div data-content-region="navPages_186_top--global"></div>
2027                        <a
2028                            class="navPage-subMenu-action has-subMenu"
2029                            href="https://juggernautcase.com/categories/specialty.html"
2030                            data-instantload
2031                            
2032                            >
2033                                <span>Specialty</span>
2034                        </a>
2035                        <span class="_hideToggleFirst u-hidden" aria-hidden="true"></span>
2036                        <a class="navPages-action-toggle" href="#"
2037                            data-collapsible="navPages-186">
2038                            <span>Specialty</span>
2039                            <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg></span>
2040                            <span class="_less"><span class="is-srOnly">Close</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-arrow-left"></use></svg></span>
2041                        </a>
2042                        <a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More Specialty" data-collapsible="navPages-186" title="More">
2043                                <svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg>
2044                        </a>
2045                        <ul class="navPage-childList" id="navPages-186">
2046                                <!-- 65 -->
2047                                <li class="navPage-childList-item">
2048                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/connect/specialty/oprtr-locking-usb-c-cable-for-tw-7520-adapter.html" >OPRTR Locking USB-C Cable (for TW-7520 Adapter)</a>
2049                                </li>
2050                                <!-- 66 -->
2051                                <li class="navPage-childList-item">
2052                                        <a class="navPage-childList-action" data-instantload href="https://juggernautcase.com/categories/integrator-quick-disconnect-cable.html" >Integrator Quick Disconnect Cable</a>
2053                                </li>
2054                            <li class="navPage-childList-item u-hideDesktop">
2055                                <a href="https://juggernautcase.com/categories/specialty.html" class="navPage-childList-action">All Products</a>
2056                            </li>
2057                            <span class="_hideToggle u-hideDesktop" aria-hidden="true"></span>
2058                        </ul>
2059                        <div data-content-region="navPages_186_bottom--global"></div>
2060                </li>
2061            <li class="navPage-subMenu-item u-hideDesktop">
2062                <a href="https://juggernautcase.com/categories/connect.html" class="navPage-subMenu-action">
2063                    <span>All Products</span>
2064                </a>
2065            </li>
2066        </ul>
2067            <div data-content-region="navPages_183_right--global"></div>
2068    </div>
2069        <div class="navPage-subMenu-bottom">
2070            <div data-content-region="navPages_183_bottom--global"></div>
2071        </div>
2072</div>
2073                    </li>
2074                    <li class="navPages-item navPages-item--id-165">
2075                        <a class="navPages-action has-subMenu u-hideMobile u-hideTablet "
2076    href="https://juggernautcase.com/categories/velox-ecosystem.html"
2077    data-instantload
2078    
2079>VELOX ECOSYSTEM</a>
2080<a class="navPages-action-toggle" href="#" data-collapsible="navPages-165">
2081    <span>VELOX ECOSYSTEM</span>
2082    <span class="_more"><span class="is-srOnly">More</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-add"></use></svg></span>
2083    <span class="_less"><span class="is-srOnly">Back</span><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-remove"></use></svg></span>
2084</a>
2085<a class="navPages-action-toggle-desktop" role="button" tabindex="0" aria-expanded="false" aria-label="More VELOX ECOSYSTEM" data-collapsible="navPages-165" title="More"><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-caret-down"></use></svg></a>
2086<div class="navPage-subMenu
2087    " id="navPages-165">
2088        <div class="navPage-subMenu-top">
2089            <div data-content-region="navPages_165_top--global"></div>
2090        </div>
2091    <div class="navPage-subMenu-middle">
2092            <div data-content-region="navPages_165_left--global"></div>
2093        <ul class="navPage-subMenu-list">
2094                <!-- 67 -->
2095                <li class="navPage-subMenu-item">
2096                    <div data-content-region="navPages_245_top--global"><div data-layout-id="b69a1575-4e89-4281-8b0c-2c6dd2fa7062">       <div data-sub-layout-container="c6517753-07d4-4d8f-81ae-3d13992ddb84" data-layout-name="Layout">
2097    <style data-container-styling="c6517753-07d4-4d8f-81ae-3d13992ddb84">
2098        [data-sub-layout-container="c6517753-07d4-4d8f-81ae-3d13992ddb84"] {
2099            box-sizing: border-box;
2100            display: flex;
2101            flex-wrap: wrap;
2102            z-index: 0;
2103            position: relative;
2104            height: ;
2105            padding-top: 0px;
2106            padding-right: 0px;
2107            padding-bottom: 0px;
2108            padding-left: 0px;
2109            margin-top: 0px;
2110            margin-right: 0px;
2111            margin-bottom: 0px;
2112            margin-left: 0px;
2113            border-width: 0px;
2114            border-style: solid;
2115            border-color: #333333;
2116        }
2117
2118        [data-sub-layout-container="c6517753-07d4-4d8f-81ae-3d13992ddb84"]:after {
2119            display: block;
2120            position: absolute;
2121            top: 0;
2122            left: 0;
2123            bottom: 0;
2124            right: 0;
2125            background-size: cover;
2126            z-index: auto;
2127        }
2128    </style>
2129
2130    <div data-sub-layout="57a11a03-6577-4607-95df-7398a7ca90ef">
2131        <style data-column-styling="57a11a03-6577-4607-95df-7398a7ca90ef">
2132            [data-sub-layout="57a11a03-6577-4607-95df-7398a7ca90ef"] {
2133                display: flex;
2134                flex-direction: column;
2135                box-sizing: border-box;
2136                flex-basis: 100%;
2137                max-width: 100%;
2138                z-index: 0;
2139                position: relative;
2140                height: ;
2141                padding-top: 0px;
2142                padding-right: 10.5px;
2143                padding-bottom: 0px;
2144                padding-left: 10.5px;
2145                margin-top: 0px;
2146                margin-right: 0px;
2147                margin-bottom: 0px;
2148                margin-left: 0px;
2149                border-width: 0px;
2150                border-style: solid;
2151                border-color: #333333;
2152                justify-content: center;
2153            }
2154            [data-sub-layout="57a11a03-6577-4607-95df-7398a7ca90ef"]:after {
2155                display: block;
2156                position: absolute;
2157                top: 0;
2158                left: 0;
2159                bottom: 0;
2160                right: 0;
2161                background-size: cover;
2162                z-index: auto;
2163            }
2164            @media only screen and (max-width: 700px) {
2165                [data-sub-layout="57a11a03-6577-4607-95df-7398a7ca90ef"] {
2166                    flex-basis: 100%;
2167                    max-width: 100%;
2168                }
2169            }
2170        </style>
2171        <div data-widget-id="1063216d-c8d2-4dac-b9c8-8f4c69367358" data-placement-id="5880dd6a-c392-4ed8-9fb2-462fe08c0f24" data-placement-status="ACTIVE"><!-- BEGIN VELOX MEGA MENU WIDGET -->
2172<div class="velox-mega">
2173  <div class="velox-mega__inner">
2174
2175    <!-- Column 1: VELOX wordmark -->
2176    <div class="velox-mega__col velox-mega__col--overview">
2177      <div class="velox-mega__wordmark">
2178        <img src="https://cdn11.bigcommerce.com/s-dat6f8vwhv/images/stencil/original/image-manager/velox-lt-grey.png?t=1779772615" alt="" aria-hidden="true" loading="lazy" decoding="async">
2179      </div>
2180    </div>
2181
2182    <!-- Column 2: Explore VELOX -->
2183    <div class="velox-mega__col velox-mega__col--explore">
2184      <div class="velox-mega__col-title">Explore VELOX</div>
2185
2186      <ul class="velox-mega__list">
2187        <li>
2188          <a href="/velox-system-overview/" class="velox-mega__link">
2189            <span class="velox-mega__link-title">
2190              VELOX System Overview
2191            </span>
2192
2193            <span class="velox-mega__link-desc">
2194              See how VELOX supports charging, data sync, mounting, and device turnover.
2195            </span>
2196          </a>
2197        </li>
2198
2199        <li>
2200          <a href="/velox-integrations/" class="velox-mega__link">
2201            <span class="velox-mega__link-title">
2202              VELOX Integrations
2203            </span>
2204
2205            <span class="velox-mega__link-desc">
2206              Explore how VELOX supports partner technologies across the larger kit.
2207            </span>
2208          </a>
2209        </li>
2210      </ul>
2211    </div>
2212
2213    <!-- Column 3: System Components -->
2214    <div class="velox-mega__col velox-mega__col--components">
2215      <div class="velox-mega__col-title">System Components</div>
2216
2217      <ul class="velox-mega__list">
2218        <li>
2219          <a href="/pages/velox-smart-block.html" class="velox-mega__link">
2220            <span class="velox-mega__link-title">
2221              VELOX Smart-Block
2222            </span>
2223
2224            <span class="velox-mega__link-desc">
2225              Creates the powered interface and protects the device USB connection.
2226            </span>
2227          </a>
2228        </li>
2229
2230        <li>
2231          <a href="/pages/velox-armor-mount.html" class="velox-mega__link">
2232            <span class="velox-mega__link-title">
2233              VELOX Armor Mount
2234            </span>
2235
2236            <span class="velox-mega__link-desc">
2237              Secures the EUD and creates a fast powered connection on kit.
2238            </span>
2239          </a>
2240        </li>
2241
2242        <li>
2243          <a href="/pages/velox-charge-data-dock.html" class="velox-mega__link">
2244            <span class="velox-mega__link-title">
2245              VELOX Charge/Data Dock
2246            </span>
2247
2248            <span class="velox-mega__link-desc">
2249              Supports charging, data transfer, provisioning, and faster device turnover.
2250            </span>
2251          </a>
2252        </li>
2253
2254        <li>
2255          <a href="/velox-field-cable/" class="velox-mega__link">
2256            <span class="velox-mega__link-title">
2257              VELOX Field Cable
2258            </span>
2259
2260            <span class="velox-mega__link-desc">
2261              Provides a direct power and data connection for Smart-Block-equipped OPRTR cases.
2262            </span>
2263          </a>
2264        </li>
2265      </ul>
2266    </div>
2267
2268    <!-- Column 4: Supported Devices -->
2269    <div class="velox-mega__col velox-mega__col--devices">
2270      <div class="velox-mega__col-title">Supported Devices</div>
2271
2272      <ul class="velox-mega__list velox-mega__list--compact">
2273        <li>
2274          <a href="/products/galaxy-s23-oprtr-phone-case.html" class="velox-mega__link">
2275            <span class="velox-mega__link-title velox-mega__link-title--device">
2276              Galaxy S23 OPRTR
2277            </span>
2278          </a>
2279        </li>
2280
2281        <li>
2282          <a href="/products/galaxy-s25-oprtr-phone-case.html" class="velox-mega__link">
2283            <span class="velox-mega__link-title velox-mega__link-title--device">
2284              Galaxy S25 OPRTR
2285            </span>
2286          </a>
2287        </li>
2288
2289        <li>
2290          <a href="/categories/galaxy-s26.html" class="velox-mega__link">
2291            <span class="velox-mega__link-title velox-mega__link-title--device">
2292              Galaxy S26 OPRTR
2293            </span>
2294          </a>
2295        </li>
2296      </ul>
2297    </div>
2298
2299  </div>
2300</div>
2301
2302<style>
2303  /*
2304   * Saira should be loaded once by the global theme/header.
2305   * Do not use @import here because this widget appears in the global menu.
2306   */
2307
2308  .velox-mega,
2309  .velox-mega * {
2310    box-sizing: border-box;
2311    font-family: 'Saira', system-ui, -apple-system, Arial, sans-serif !important;
2312  }
2313
2314  .velox-mega {
2315    width: 100%;
2316    padding: 24px 24px 32px;
2317    color: #333333;
2318    background: transparent;
2319    border: none !important;
2320    text-align: left;
2321  }
2322
2323  .velox-mega__inner {
2324    display: grid;
2325    grid-template-columns:
2326      minmax(260px, 0.95fr)
2327      minmax(330px, 1.05fr)
2328      minmax(460px, 1.45fr)
2329      minmax(220px, 0.75fr);
2330    align-items: flex-start;
2331    gap: clamp(34px, 3.4vw, 58px);
2332    width: 100%;
2333    max-width: 1480px;
2334    margin: 0 auto;
2335    border: none !important;
2336  }
2337
2338  .velox-mega__col {
2339    min-width: 0;
2340    padding: 0;
2341    border: none !important;
2342    box-shadow: none !important;
2343  }
2344
2345  .velox-mega__col--overview {
2346    transform: translateY(-8px);
2347  }
2348
2349  .velox-mega__wordmark {
2350    width: 100%;
2351    max-width: 230px;
2352    margin: 0 0 22px;
2353  }
2354
2355  .velox-mega__wordmark img {
2356    display: block;
2357    width: 100%;
2358    height: auto;
2359    object-fit: contain;
2360  }
2361
2362  .velox-mega__col-title {
2363    display: inline-block;
2364    margin: 0 0 18px;
2365    padding-bottom: 9px;
2366    color: #111111;
2367    border-bottom: 1px solid #111111;
2368    font-size: 11px;
2369    font-weight: 800;
2370    line-height: 1.2;
2371    letter-spacing: 0.18em;
2372    text-transform: uppercase;
2373  }
2374
2375  .velox-mega__list {
2376    display: grid;
2377    gap: 16px;
2378    margin: 0;
2379    padding: 0;
2380    list-style: none;
2381  }
2382
2383  .velox-mega__list--compact {
2384    gap: 12px;
2385  }
2386
2387  .velox-mega__list li {
2388    margin: 0;
2389    padding: 0;
2390  }
2391
2392  .velox-mega__link {
2393    display: block;
2394    color: inherit;
2395    text-decoration: none;
2396    transition:
2397      color 0.18s ease,
2398      transform 0.18s ease;
2399  }
2400
2401  .velox-mega__link:hover {
2402    transform: translateX(3px);
2403  }
2404
2405  .velox-mega__link-title {
2406    display: block;
2407    margin-bottom: 4px;
2408    color: #222222;
2409    font-size: 14px;
2410    font-weight: 700;
2411    line-height: 1.25;
2412  }
2413
2414  .velox-mega__link-title--device {
2415    font-weight: 500;
2416    white-space: nowrap;
2417  }
2418.velox-mega__link-desc {
2419    display: block;
2420    max-width: 440px;
2421    color: #666666;
2422    font-size: 12px;
2423    font-weight: 400;
2424    line-height: 1.45;
2425    text-wrap: pretty;
2426  }
2427
2428  .velox-mega__col--explore .velox-mega__link-desc {
2429    max-width: 390px;
2430  }
2431
2432  .velox-mega__col--components .velox-mega__link-desc {
2433    max-width: 460px;
2434  }
2435
2436  .velox-mega__link:hover .velox-mega__link-title,
2437  .velox-mega__link:focus .velox-mega__link-title,
2438  .velox-mega__link:focus-visible .velox-mega__link-title {
2439    color: #FF8F1C;
2440  }
2441
2442  .velox-mega__link:focus-visible {
2443    outline: 2px solid #111111;
2444    outline-offset: 4px;
2445  }
2446
2447  .velox-mega-dummy-hide,
2448  .velox-mega-dummy-hide[hidden] {
2449    display: none !important;
2450    visibility: hidden !important;
2451  }
2452
2453
2454  /*
2455   * Hide only the backend Supported Devices category anchor that shares
2456   * the same navigation row as this VELOX widget.
2457   *
2458   * Do not hide the parent <li>;
2458 the Page Builder widget is mounted inside
2459   * that same <li>, and hiding it would remove the entire mega menu.
2460   */
2461  #dinosaur_header.jc-header
2462    .navPage-subMenu-item:has(.velox-mega)
2463    > a.navPage-subMenu-action[href*="/categories/supported-devices.html"],
2464  #dinosaur_header.jc-header
2465    .navPage-subMenu-item:has(.velox-mega)
2466    > a.navPage-childList-action[href*="/categories/supported-devices.html"] {
2467    display: none !important;
2468  }
2469
2470  @media (max-width: 1180px) {
2471    .velox-mega__inner {
2472      grid-template-columns: 1fr 1fr;
2473      gap: 36px 44px;
2474      max-width: none;
2475    }
2476
2477    .velox-mega__link-desc,
2478    .velox-mega__col--explore .velox-mega__link-desc,
2479    .velox-mega__col--components .velox-mega__link-desc {
2480      max-width: 100%;
2481    }
2482  }
2483
2484  /* Mobile fallback layout */
2485  @media (max-width: 700px) {
2486    .velox-mega {
2487      width: 100% !important;
2488      max-width: 100% !important;
2489      height: auto !important;
2490      max-height: none !important;
2491      margin: 0 !important;
2492      padding: 12px 0 18px !important;
2493      overflow: visible !important;
2494      background: transparent !important;
2495      touch-action: auto !important;
2496    }
2497
2498    .velox-mega__inner {
2499      display: block !important;
2500      width: 100% !important;
2501      max-width: 100% !important;
2502      margin: 0 !important;
2503      padding: 0 !important;
2504      overflow: visible !important;
2505    }
2506
2507    .velox-mega__col {
2508      width: 100% !important;
2509      margin: 0 0 14px !important;
2510      padding: 0 !important;
2511      border: none !important;
2512    }
2513
2514    .velox-mega__col--overview {
2515      display: none !important;
2516    }
2517
2518    .velox-mega__col-title {
2519      display: block;
2520      margin: 0 0 6px !important;
2521      padding: 0 !important;
2522      color: #111111 !important;
2523      border: none !important;
2524      font-size: 13px !important;
2525      font-weight: 800 !important;
2526      line-height: 1.2 !important;
2527      letter-spacing: 0.04em !important;
2528      text-transform: none !important;
2529    }
2530
2531    .velox-mega__list,
2532    .velox-mega__list--compact {
2533      display: block !important;
2534      margin: 0 !important;
2535      padding: 0 !important;
2536    }
2537
2538    .velox-mega__list li {
2539      margin: 0 !important;
2540      padding: 0 !important;
2541    }
2542
2543    .velox-mega__link {
2544      display: block !important;
2545      width: 100% !important;
2546      min-height: auto !important;
2547      padding: 6px 0 !important;
2548      color: #222222 !important;
2549      text-decoration: none !important;
2550      transform: none !important;
2551      touch-action: manipulation !important;
2552    }
2553
2554    .velox-mega__link:hover {
2555      transform: none !important;
2556    }
2557
2558    .velox-mega__link:focus-visible {
2559      outline-offset: 2px;
2560    }
2561
2562    .velox-mega__link-title {
2563      margin: 0 !important;
2564      color: #222222 !important;
2565      font-size: 13px !important;
2566      font-weight: 500 !important;
2567      line-height: 1.25 !important;
2568      white-space: normal !important;
2569    }
2570
2571    .velox-mega__link:hover .velox-mega__link-title,
2572    .velox-mega__link:focus .velox-mega__link-title,
2573    .velox-mega__link:focus-visible .velox-mega__link-title {
2574      color: #FF8F1C !important;
2575    }
2576
2577    .velox-mega__link-desc {
2578      display: none !important;
2579    }
2580.velox-mega__col--components,
2581    .velox-mega__col--devices {
2582      margin-top: 12px !important;
2583      padding-top: 12px !important;
2584      border-top: 1px solid #E3E3E3 !important;
2585    }
2586  }
2587
2588  @media (prefers-reduced-motion: reduce) {
2589    .velox-mega__link {
2590      transition: none !important;
2591      transform: none !important;
2592    }
2593  }
2594</style>
2595
2596<!--
2597  This widget intentionally contains no JavaScript.
2598  The backend Supported Devices placeholder should be hidden by the navigation
2599  template/header class, not by DOM traversal from inside this widget.
2600-->
2601<!-- END VELOX MEGA MENU WIDGET -->
2602</div>
2603    </div>
2604</div>
2605
2606</div></div>
2607                        <a class="navPage-subMenu-action" href="https://juggernautcase.com/categories/supported-devices.html" data-instantload >
2608                            <span>Supported Devices</span>
2609                        </a>
2610                        <div data-content-region="navPages_245_bottom--global"></div>
2611                </li>
2612            <li class="navPage-subMenu-item u-hideDesktop">
2613                <a href="https://juggernautcase.com/categories/velox-ecosystem.html" class="navPage-subMenu-action">
2614                    <span>All Products</span>
2615                </a>
2616            </li>
2617        </ul>
2618            <div data-content-region="navPages_165_right--global"></div>
2619    </div>
2620        <div class="navPage-subMenu-bottom">
2621            <div data-content-region="navPages_165_bottom--global"><div data-layout-id="669b2d50-ff5e-44e3-97b2-bde4f73dd5fa">       <div data-sub-layout-container="4c79e3b6-d7dd-4215-906d-7c8251ed0cd0" data-layout-name="Layout">
2622    <style data-container-styling="4c79e3b6-d7dd-4215-906d-7c8251ed0cd0">
2623        [data-sub-layout-container="4c79e3b6-d7dd-4215-906d-7c8251ed0cd0"] {
2624            box-sizing: border-box;
2625            display: flex;
2626            flex-wrap: wrap;
2627            z-index: 0;
2628            position: relative;
2629            height: ;
2630            padding-top: 0px;
2631            padding-right: 0px;
2632            padding-bottom: 0px;
2633            padding-left: 0px;
2634            margin-top: 0px;
2635            margin-right: 0px;
2636            margin-bottom: 0px;
2637            margin-left: 0px;
2638            border-width: 0px;
2639            border-style: solid;
2640            border-color: #333333;
2641        }
2642
2643        [data-sub-layout-container="4c79e3b6-d7dd-4215-906d-7c8251ed0cd0"]:after {
2644            display: block;
2645            position: absolute;
2646            top: 0;
2647            left: 0;
2648            bottom: 0;
2649            right: 0;
2650            background-size: cover;
2651            z-index: auto;
2652        }
2653    </style>
2654
2655    <div data-sub-layout="9bd995d2-7c38-44cf-95ae-1d78ba47a581">
2656        <style data-column-styling="9bd995d2-7c38-44cf-95ae-1d78ba47a581">
2657            [data-sub-layout="9bd995d2-7c38-44cf-95ae-1d78ba47a581"] {
2658                display: flex;
2659                flex-direction: column;
2660                box-sizing: border-box;
2661                flex-basis: 100%;
2662                max-width: 100%;
2663                z-index: 0;
2664                position: relative;
2665                height: ;
2666                padding-top: 0px;
2667                padding-right: 10.5px;
2668                padding-bottom: 0px;
2669                padding-left: 10.5px;
2670                margin-top: 0px;
2671                margin-right: 0px;
2672                margin-bottom: 0px;
2673                margin-left: 0px;
2674                border-width: 0px;
2675                border-style: solid;
2676                border-color: #333333;
2677                justify-content: center;
2678            }
2679            [data-sub-layout="9bd995d2-7c38-44cf-95ae-1d78ba47a581"]:after {
2680                display: block;
2681                position: absolute;
2682                top: 0;
2683                left: 0;
2684                bottom: 0;
2685                right: 0;
2686                background-size: cover;
2687                z-index: auto;
2688            }
2689            @media only screen and (max-width: 700px) {
2690                [data-sub-layout="9bd995d2-7c38-44cf-95ae-1d78ba47a581"] {
2691                    flex-basis: 100%;
2692                    max-width: 100%;
2693                }
2694            }
2695        </style>
2696        <div data-widget-id="0534a223-e67b-4d37-914b-ffde84c8da05" data-placement-id="0893d37c-8b00-4db3-9bab-e7779a634a22" data-placement-status="ACTIVE"><style>
2697@import url('https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600;700;800;900&display=swap');
2698
2699.jc-callout-widget,
2700.jc-callout-widget * {
2701  box-sizing: border-box;
2702  font-family: 'Saira', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
2703}
2704
2705.jc-callout-widget {
2706  width: 100%;
2707  margin: 0;
2708  padding: 0;
2709}
2710
2711.jc-callout-content {
2712  display: flex;
2713  align-items: center;
2714  justify-content: flex-start;
2715  gap: 24px;
2716  width: 100%;
2717  padding: 16px 20px;
2718  background: #f7f7f7;
2719  border-left: 3px solid #FF8F1C;
2720}
2721
2722.jc-callout-label {
2723  flex: 0 0 auto;
2724  min-width: 150px;
2725  font-size: 11px;
2726  font-weight: 800;
2727  line-height: 1;
2728  letter-spacing: 0.12em;
2729  text-transform: uppercase;
2730  color: #111111;
2731  white-space: nowrap;
2732}
2733
2734.jc-callout-text {
2735  flex: 1 1 auto;
2736  margin: 0;
2737  font-size: 13px;
2738  font-weight: 400;
2739  line-height: 1.5;
2740  color: #333333;
2741}
2742
2743.jc-callout-text strong {
2744  font-weight: 800;
2745  color: #111111;
2746}
2747
2748@media (max-width: 768px) {
2749  .jc-callout-content {
2750    flex-direction: column;
2751    align-items: flex-start;
2752    gap: 8px;
2753    padding: 14px 16px;
2754  }
2755
2756  .jc-callout-label {
2757    min-width: 0;
2758    font-size: 10px;
2759  }
2760
2761  .jc-callout-text {
2762    font-size: 12px;
2763    line-height: 1.45;
2764  }
2765}
2766</style>
2767
2768<div class="jc-callout-widget">
2769  <div class="jc-callout-content">
2770    <span class="jc-callout-label">OPRTR Required</span>
2771    <p class="jc-callout-text">
2772      VELOX is built around select OPRTR cases. <strong>The Smart-Block replaces the standard OPRTR door to create the powered interface for charging, data transfer, mounting, and device turnover.</strong>
2773    </p>
2774  </div>
2775</div>
2776</div>
2777    </div>
2778</div>
2779
2780</div></div>
2781        </div>
2782</div>
2783                    </li>
2784            
2785            <li class="border-separation--top u-hideDesktop"></li>
2786            
2787                    <li class="navPages-item navPages-item--page">
2788                        <a class="navPages-action" href="https://juggernautcase.com/pages/partner-integrations.html" data-instantload data-current-category>Partner Integrations</a>
2789                    </li>
2790    </ul>
2791
2792    <ul class="navPages-list navPages-list--user u-hidden">
2793
2794
2795    </ul>
2796</nav>
2797
2798
2799                    </div>
2800
2801                    <div class="jc-mobile-generated" aria-label="Mobile navigation"></div>
2802                    <div class="jc-mobile-panel-root"></div>
2803
2804                </div>
2805            </div>
2806
2807            <div class="jc-header__zone jc-header__zone--right">
2808
2809                <div class="jc-header__searchBar _searchBar" data-quick-search-bar>
2810                    <div class="beautify__quickSearch is-open" data-prevent-quick-search-close>
2811    <!-- snippet location forms_search -->
2812    <form class="form" action="https://juggernautcase.com/search.php">
2813        <fieldset class="form-fieldset">
2814            <div class="form-field">
2815                <label class="is-srOnly" for="search_query">Search</label>
2816                <div class="form-prefixPostfix">
2817                    <input class="form-input" data-search-quick name="search_query" id="search_query" data-error-message="Search f
2817ield cannot be empty." placeholder="Search products..." autocomplete="off">
2818                    <button type="submit" class="button _submit"><svg class="icon"><use href="#icon-ih-search"></use></svg><span class="is-srOnly">Search</span></button>
2819                    <button type="button" class="button _close" data-quick-search-close><svg class="icon"><use href="#icon-close"></use></svg><span class="sr-only">Close</span></button>
2820                </div>
2821            </div>
2822        </fieldset>
2823    </form>
2824</div>
2825                </div>
2826
2827                <ul class="jc-header__actions navUser-section">
2828
2829                    <li class="navUser-item navUser-item--account">
2830                        <a id="login-dropdown-navHeader"
2831                           data-toggle="login-popup"
2832                           class="navUser-action navUser-action--account login-dropdown--popup login-dropdown--desktop"
2833                           href="https://juggernautcase.com/login.php"
2834                           title="Account"
2835                           aria-label="Account">
2836                            <svg class="icon"><use href="#icon-account"></use></svg>
2837                            <span class="_label is-srOnly">Account</span>
2838                        </a>
2839
2840                        <div id="login-popup"
2841                             class="login-popup general-account "
2842                             aria-hidden="true">
2843                            <a href="#" class="button-close u-hideDesktop" id="close-popup-login" data-toggle="login-popup">
2844    <svg class="icon"><use href="#icon-close"/></svg>
2845    <span class="sr-only">Close</span>
2846</a>
2847        <a href="https://juggernautcase.com/login.php?action=create_account" class="button-login button button--default">
2848            Create Account
2849        </a>
2850        <div class="border-or">
2851            <span>Or</span>
2852        </div>
2853    <h4 class="heading">Sign in</h4>
2854    <form class="account-form form" action="https://juggernautcase.com/login.php?action=check_login" method="post" data-login-form>
2855        
2856        
2857        <div class="form-field">
2858            <label class="form-label is-srOnly" for="login_email_popup">Email Address:</label>
2859            <input class="form-input" name="login_email" id="login_email_popup" type="email" placeholder="Enter your email">
2860        </div>
2861        <div class="form-field">
2862            <label class="form-label is-srOnly" for="login_pass_popup">Password:</label>
2863            <input class="form-input" name="login_pass" id="login_pass_popup" type="password" autocomplete="off" placeholder="Enter your password">
2864        </div>
2865        <div class="form-actions">
2866            <input type="submit" class="button button--small button--default button--submit" value="Sign in">
2867            <a class="forgot-password" href="https://juggernautcase.com/login.php?action=reset_password">Forgot your password?</a>
2868        </div>
2869    </form>
2870                        </div>
2871
2872                        <div class="previewLogin-overlay" id="popup-overlay"></div>
2873                    </li>
2874
2875                    <li class="navUser-item navUser-item--cart">
2876                        <a data-cart-preview
2877                           data-toggle="cart-preview-dropdown"
2878                           href="https://juggernautcase.com/cart.php"
2879                           title="Cart"
2880                           class="navUser-action navUser-action--cart _cart-btnToggle"
2881                           aria-label="Cart">
2882                            <span class="_cart-icon">
2883                                <svg class="icon"><use href="#icon-cart"></use></svg>
2884                                <span class="countPill cart-quantity"></span>
2885                            </span>
2886
2887                            <span class="_total-cart is-srOnly">
2888                                <span data-cart-preview-price class="_total-price-nav"></span>
2889                                <span class="_total-items">
2890                                    <span class="cart-quantity-label">
2891                                        <span class="_single-item">item</span>
2892                                        <span class="_plural-item">items</span>
2893                                    </span>
2894                                </span>
2895                            </span>
2896                        </a>
2897                    </li>
2898
2899                </ul>
2900
2901            </div>
2902
2903        </div>
2904    </div>
2905
2906    <div class="headerMenu-overlay"></div>
2907
2908</header>
2909
2910<div class="previewCart-overlay"></div>
2911<div class="dropdown-menu" id="cart-preview-dropdown" aria-hidden="true"></div>
2912
2913<div class="dropdown dropdown--quickSearch"
2914     id="quickSearch"
2915     aria-hidden="true"
2916     tabindex="-1"
2917     data-prevent-quick-search-close>
2918    <div class="quickSearchSuggestions">
2919        <div class="_popular" data-papathemes-search-popular="OPRTR, ENFRCR, Galaxy S25, Galaxy S23, XCover7 Pro, Tab Active5, Belt Mount, Vehicle Mount, VELOX, QD Cable, SHLD Screen Protector">
2920            <div class="container">
2921                <div class="_heading">Popular Search</div>
2922
2923                <button type="button"
2924                        class="button button--small button--link is-open"
2925                        data-collapsible="quickSearch-popular-list"
2926                        aria-expanded="true">
2927                    <span class="switch">
2928                        <input id="switch-rounded" type="checkbox" />
2929                        <label for="switch-rounded"></label>
2930                    </span>
2931                </button>
2932
2933                <ul id="quickSearch-popular-list" class="is-open" aria-hidden="false"></ul>
2934            </div>
2935        </div>
2936
2937        <div class="_recent" data-papathemes-search-history style="display: none;">
2938            <div class="container">
2939                <div class="_heading">Your Search History</div>
2940
2941                <button type="button"
2942                        class="button button--small button--link is-open"
2943                        data-papathemes-delete-search-history>
2944                    <span class="on">
2945                        <svg class="icon"><use xlink:href="#icon-recycle"></use></svg>
2946                    </span>
2947                </button>
2948
2949                <ul id="quickSearch-recently-list"></ul>
2950            </div>
2951        </div>
2952    </div>
2953
2954    <div class="_resultSearch">
2955        <div class="container">
2956            <section class="quickSearchResults" data-bind="html: results"></section>
2957        </div>
2958    </div>
2959</div>
2960
2961<div class="papathemes-overlay"></div>
2962
2963<div data-content-region="header_bottom--global"></div>
2964<div data-content-region="header_bottom"></div>
2965
2966<style>
2967/* =============================================================================
2968   JUGGERNAUT MOBILE MENU v3.6 — LINKED PANEL TITLES, LIGHTER ROWS,
2969   VELOX WIDGET + CALLOUT SUPPORT
2970   v3.6: the drawer breakpoint moved from 900px to 1024px. Phones AND tablets
2971   now use the drawer; the desktop mega menu starts at 1025px. This removes
2972   the 901 to 1024 band where untouched theme styles could overlap the logo.
2973   v3.2 changes:
2974   - Top-level panel titles (PROTECT / MOUNT / CONNECT) are now links to the
2975     section landing page; the duplicate bottom section link is removed.
2976     VELOX ECOSYSTEM keeps a plain, non-linked title by request.
2977   - Drawer X and panel X recolored to medium gray (#8A8D91); tap targets
2978     unchanged at 46x46.
2979   v3.1 fixes:
2980   - Removed touch-action:none from the scroll lock (it blocked touch
2981     scrolling INSIDE the drawer/panels on Chrome and some iOS builds,
2982     because touch-action intersects down the DOM tree).
2983   - Panels now stack ABOVE the drawer topbar; previously the opaque drawer
2984     topbar (z 100050) covered every panel topbar, hiding the Back button.
2985   - Each panel topbar now has its own X (closes the whole menu), matching
2986     the space already reserved by the 66px right padding.
2987   - Chevron only renders on BUTTON top-level rows (panel openers). Direct
2988     link rows (e.g. Partner Integrations) no longer show a false chevron.
2989   Desktop mega menu untouched by this block. All mobile markup is
2990   JS-generated with jc- classes only, so no theme selectors can leak in.
2991============================================================================= */
2992
2993@media (min-width: 1025px) {
2994  #dinosaur_header.jc-header .jc-mobile-menu-topbar,
2995  #dinosaur_header.jc-header .jc-mobile-generated,
2996  #dinosaur_header.jc-header .jc-mobile-panel-root {
2997    display: none !important;
2998  }
2999}
3000
3001@media (max-width: 1024px) {
3002  html.jc-mobile-menu-lock,
3003  body.jc-mobile-menu-lock {
3004    overflow: hidden !important;
3005    height: 100% !important;
3006  }
3007
3008  /* v3.6: the drawer now serves phones AND tablets (up to 1024px). The theme
3009     hides its hamburger above its own ~900px breakpoint, so force it visible
3010     across the whole drawer range. */
3011  /* v3.7: the theme treats 901 to 1024px as desktop, so in that band its
3012     header CSS positioned the toggle and logo on top of each other (and the
3013     toggle icon rendered half-styled). The header row is now explicitly owned
3014     across the entire drawer range: static flex, no transforms, our own
3015     burger icon, logo capped and in flow. This also removes the momentary
3016     overlap flash while theme JS settles. */
3017  #dinosaur_header.jc-header .jc-header__inner {
3018    display: flex !important;
3019    flex-wrap: nowrap !important;
3020    align-items: center !important;
3021    width: 100% !important;
3022    max-width: none !important;
3023    margin: 0 !important;
3024    padding: 0 16px !important;
3025    min-height: 64px !important;
3026    column-gap: 12px !important;
3027    position: relative !important;
3028  }
3029
3030  #dinosaur_header.jc-header .jc-header__zone--left,
3031  #dinosaur_header.jc-header .jc-header__zone--center,
3032  #dinosaur_header.jc-header .jc-header__zone--right {
3033    position: static !important;
3034    transform: none !important;
3035    float: none !important;
3036    margin: 0 !important;
3037  }
3038
3039  #dinosaur_header.jc-header .jc-header__zone--left {
3040    display: flex !important;
3041    align-items: center !important;
3042    gap: 12px !important;
3043    flex: 0 0 auto !important;
3044    min-width: 0 !important;
3045  }
3046
3047  /* Toggle: in flow, fixed 44x44 tap target, never absolute */
3048  #dinosaur_header.jc-header .jc-header__menuToggle {
3049    display: inline-flex !important;
3050    align-items: center !important;
3051    justify-content: center !important;
3052    position: static !important;
3053    transform: none !important;
3054    flex: 0 0 auto !important;
3055    width: 44px !important;
3056    height: 44px !important;
3057    margin: 0 !important;
3058    padding: 0 !important;
3059    background: transparent !important;
3060    border: 0 !important;
3061    -webkit-tap-highlight-color: transparent !important;
3062  }
3063
3064  /* Our own 3-bar burger; theme's half-styled icon internals are hidden */
3065  #dinosaur_header.jc-header .jc-header__menuToggle .mobileMenu-toggleIcon {
3066    display: block !important;
3067    position: static !important;
3068    width: 24px !important;
3069    height: 2px !important;
3070    margin: 0 !important;
3071    padding: 0 !important;
3072    background: #1F2024 !important;
3073    border: 0 !important;
3074    box-shadow: 0 -7px 0 #1F2024, 0 7px 0 #1F2024 !important;
3075    transform: none !important;
3076  }
3077
3078  #dinosaur_header.jc-header .jc-header__menuToggle .mobileMenu-toggleIcon::before,
3079  #dinosaur_header.jc-header .jc-header__menuToggle .mobileMenu-toggleIcon::after,
3080  #dinosaur_header.jc-header .jc-header__menuToggle .mobileMenu-toggleIcon ._icon {
3081    display: none !important;
3082    content: none !important;
3083  }
3084
3085  /* v3.8: logo is centered on the viewport across the whole drawer band.
3086     Absolute with left/right 0 and auto margins (no transforms), stretched
3087     top-to-bottom with flex vertical centering. Width is capped to the free
3088     corridor between the burger and the utility icons, so it can never touch
3089     either at any phone width. */
3090  #dinosaur_header.jc-header .jc-header__zone--left .jc-header__logo {
3091    position: absolute !important;
3092    left: 0 !important;
3093    right: 0 !important;
3094    top: 0 !important;
3095    bottom: 0 !important;
3096    margin: 0 auto !important;
3097    transform: none !important;
3098    display: flex !important;
3099    align-items: center !important;
3100    justify-content: center !important;
3101    width: fit-content !important;
3102    max-width: min(58vw, calc(100% - 152px), 280px) !important;
3103    min-width: 0 !important;
3104    overflow: visible !important;
3105  }
3106
3107  #dinosaur_header.jc-header .jc-header__zone--left .jc-header__logo a {
3108    display: flex !important;
3109    align-items: center !important;
3110    min-width: 0 !important;
3111  }
3112
3113  #dinosaur_header.jc-header .jc-header__zone--left .jc-header__logo img,
3114  #dinosaur_header.jc-header .jc-header__zone--left .jc-header__logo .header-logo-image {
3115    display: block !important;
3116    width: auto !important;
3117    max-width: 100% !important;
3118    max-height: 40px !important;
3119    object-fit: contain !important;
3120  }
3121
3122  /* Utilities keep to the right edge */
3123  #dinosaur_header.jc-header .jc-header__zone--right {
3124    display: flex !important;
3125    align-items: center !important;
3126    flex: 0 0 auto !important;
3127    margin-left: auto !important;
3128  }
3129
3130  /* Full-screen drawer shell */
3131  #dinosaur_header.jc-header #menu.navPages-container {
3132    position: fixed !important;
3133    inset: 0 !important;
3134    z-index: 99999 !important;
3135    width: 100vw !important;
3136    height: 100vh !important;
3137    height: 100dvh !important;
3138    max-width: none !important;
3139    max-height: none !important;
3140    margin: 0 !important;
3141    padding: 0 !important;
3142    background: #ffffff !important;
3143    border: 0 !important;
3144    overflow: hidden !important;
3145    opacity: 0 !important;
3146    visibility: hidden !important;
3147    pointer-events: none !important;
3148    transform: translateX(-100%) !important;
3149    transition:
3150      transform 0.32s cubic-bezier(.22, .61, .36, 1),
3151      opacity 0.2s ease,
3152      visibility 0.2s ease !important;
3153  }
3154
3155  body.jc-mobile-menu-open #dinosaur_header.jc-header #menu.navPages-container {
3156    opacity: 1 !important;
3157    visibility: visible !important;
3158    pointer-events: auto !important;
3159    transform: translateX(0) !important;
3160  }
3161
3162  /* The theme nav markup is the data source only. Never visible on mobile. */
3163  #dinosaur_header.jc-header #bf-fix-menu-mobile {
3164    display: none !important;
3165  }
3166
3167  /* Drawer topbar: logo left, X right */
3168  #dinosaur_header.jc-header .jc-mobile-menu-topbar {
3169    position: absolute !important;
3170    top: 0 !important;
3171    left: 0 !important;
3172    right: 0 !important;
3173    z-index: 100050 !important;
3174    display: flex !important;
3175    align-items: center !important;
3176    justify-content: space-between !important;
3177    height: 68px !important;
3178    padding: 0 16px 0 20px !important;
3179    background: #ffffff !important;
3180    border-bottom: 1px solid #ececec !important;
3181  }
3182
3183  #dinosaur_header.jc-header .jc-mobile-menu-logo,
3184  #dinosaur_header.jc-header .jc-mobile-menu-logo a {
3185    display: inline-flex !important;
3186    align-items: center !important;
3187    max-width: 220px !important;
3188    min-width: 0 !important;
3189  }
3190
3191  #dinosaur_header.jc-header .jc-mobile-menu-logo img,
3192  #dinosaur_header.jc-header .jc-mobile-menu-logo .header-logo-image {
3193    display: block !important;
3194    width: auto !important;
3195    max-width: 215px !important;
3196    max-height: 34px !important;
3197    object-fit: contain !important;
3198  }
3199
3200  #dinosaur_header.jc-header .jc-mobile-menu-close {
3201    position: relative !important;
3202    display: inline-flex !important;
3203    align-items: center !important;
3204    justify-content: center !important;
3205    flex: 0 0 auto !important;
3206    width: 46px !important;
3207    height: 46px !important;
3208    margin: 0 !important;
3209    padding: 0 !important;
3210    background: transparent !important;
3211    border: 0 !important;
3212    border-radius: 0 !important;
3213    box-shadow: none !important;
3214    cursor: pointer !important;
3215    appearance: none !important;
3216    -webkit-tap-highlight-color: transparent !important;
3217  }
3218
3219  #dinosaur_header.jc-header .jc-mobile-menu-close::before,
3220  #dinosaur_header.jc-header .jc-mobile-menu-close::after {
3221    content: "" !important;
3222    position: absolute !important;
3223    width: 26px !important;
3224    height: 2px !important;
3225    background: #8A8D91 !important;
3226  }
3227
3228  #dinosaur_header.jc-header .jc-mobile-menu-close::before { transform: rotate(45deg) !important; }
3229  #dinosaur_header.jc-header .jc-mobile-menu-close::after  { transform: rotate(-45deg) !important; }
3230
3231  /* Main (level 0) generated list */
3232  #dinosaur_header.jc-header .jc-mobile-generated {
3233    display: block !important;
3234    position: absolute !important;
3235    top: 68px !important;
3236    left: 0 !important;
3237    right: 0 !important;
3238    bottom: 0 !important;
3239    margin: 0 !important;
3240    padding: 16px 22px 40px !important;
3241    background: #ffffff !important;
3242    overflow-y: auto !important;
3243    overflow-x: hidden !important;
3244    -webkit-overflow-scrolling: touch !important;
3245    overscroll-behavior: contain !important;
3246    font-family: "Saira", Arial, sans-serif !important;
3247  }
3248
3249  #dinosaur_header.jc-header .jc-mobile-primary-list {
3250    display: block !important;
3251    width: 100% !important;
3252    margin: 0 !important;
3253    padding: 0 !important;
3254    list-style: none !important;
3255  }
3256
3257  #dinosaur_header.jc-header .jc-mobile-primary-item {
3258    display: block !important;
3259    width: 100% !important;
3260    margin: 0 !important;
3261    padding: 0 !important;
3262    list-style: none !important;
3263  }
3264
3265  /* Top-level rows: strong, this is the only heavy weight in the drawer */
3266  #dinosaur_header.jc-header .jc-mobile-primary-action {
3267    position: relative !important;
3268    display: flex !important;
3269    align-items: center !important;
3270    justify-content: flex-start !important;
3271    width: 100% !important;
3272    min-height: 56px !important;
3273    margin: 0 !important;
3274    padding: 0 42px 0 0 !important;
3275    color: #1F2024 !important;
3276    background: #ffffff !important;
3277    border: 0 !important;
3278    box-shadow: none !important;
3279    cursor: pointer !important;
3280    font-family: "Saira", Arial, sans-serif !important;
3281    font-size: 23px !important;
3282    font-weight: 800 !important;
3283    line-height: 1.05 !important;
3284    letter-spacing: -0.02em !important;
3285    text-transform: uppercase !important;
3286    text-align: left !important;
3287    text-decoration: none !important;
3288    appearance: none !important;
3289    -webkit-tap-highlight-color: transparent !important;
3290  }
3291
3292  #dinosaur_header.jc-header .jc-mobile-primary-action:active {
3293    color: #FF8F1C !important;
3294  }
3295
3296  /* Subtle chevron: panel-opening BUTTON rows only. Direct links get none. */
3297  #dinosaur_header.jc-header button.jc-mobile-primary-action::after {
3298    content: "" !important;
3299    position: absolute !important;
3300    top: 50% !important;
3301    right: 13px !important;
3302    width: 9px !important;
3303    height: 9px !important;
3304    border-top: 1.5px solid currentColor !important;
3305    border-right: 1.5px solid currentColor !important;
3306    transform: translateY(-50%) rotate(45deg) !important;
3307    opacity: 0.4 !important;
3308    pointer-events: none !important;
3309  }
3310
3311  /* Slide-over panels (all levels) */
3312  #dinosaur_header.jc-header .jc-mobile-panel-root {
3313    display: block !important;
3314  }
3315
3316  #dinosaur_header.jc-header .jc-mobile-panel {
3317    position: fixed !important;
3318    inset: 0 !important;
3319    display: block !important;
3320    width: 100vw !important;
3321    height: 100vh !important;
3322    height: 100dvh !important;
3323    margin: 0 !important;
3324    padding: 68px 0 0 !important;
3325    background: #ffffff !important;
3326    overflow: hidden !important;
3327    opacity: 0 !important;
3328    visibility: hidden !important;
3329    pointer-events: none !important;
3330    transform: translateX(100%) !important;
3331    transition:
3332      transform 0.32s cubic-bezier(.22, .61, .36, 1),
3333      opacity 0.2s ease,
3334      visibility 0.2s ease !important;
3335  }
3336
3337  #dinosaur_header.jc-header .jc-mobile-panel.is-panel-active {
3338    opacity: 1 !important;
3339    visibility: visible !important;
3340    pointer-events: auto !important;
3341    transform: translateX(0) !important;
3342  }
3343
3344  #dinosaur_header.jc-header .jc-mobile-panel-topbar {
3345    position: absolute !important;
3346    top: 0 !important;
3347    left: 0 !important;
3348    right: 0 !important;
3349    display: flex !important;
3350    align-items: center !important;
3351    justify-content: space-between !important;
3352    height: 68px !important;
3353    padding: 0 66px 0 12px !important;
3354    background: #ffffff !important;
3355    border-bottom: 1px solid #ececec !important;
3356  }
3357
3358  /* Per-panel X: same look/position as the drawer X, closes the whole menu */
3359  #dinosaur_header.jc-header .jc-mobile-panel-close {
3360    position: absolute !important;
3361    top: 50% !important;
3362    right: 16px !important;
3363    transform: translateY(-50%) !important;
3364    display: inline-flex !important;
3365    align-items: center !important;
3366    justify-content: center !important;
3367    width: 46px !important;
3368    height: 46px !important;
3369    margin: 0 !important;
3370    padding: 0 !important;
3371    background: transparent !important;
3372    border: 0 !important;
3373    border-radius: 0 !important;
3374    box-shadow: none !important;
3375    cursor: pointer !important;
3376    appearance: none !important;
3377    -webkit-tap-highlight-color: transparent !important;
3378  }
3379
3380  #dinosaur_header.jc-header .jc-mobile-panel-close::before,
3381  #dinosaur_header.jc-header .jc-mobile-panel-close::after {
3382    content: "" !important;
3383    position: absolute !important;
3384    width: 26px !important;
3385    height: 2px !important;
3386    background: #8A8D91 !important;
3387  }
3388
3389  #dinosaur_header.jc-header .jc-mobile-panel-close::before { transform: rotate(45deg) !important; }
3390  #dinosaur_header.jc-header .jc-mobile-panel-close::after  { transform: rotate(-45deg) !important; }
3391
3392  #dinosaur_header.jc-header .jc-mobile-back {
3393    display: inline-flex !important;
3394    align-items: center !important;
3395    gap: 10px !important;
3396    min-height: 44px !important;
3397    margin: 0 !important;
3398    padding: 0 10px !important;
3399    background: transparent !important;
3400    border: 0 !important;
3401    color: #1F2024 !important;
3402    cursor: pointer !important;
3403    font-family: "Saira", Arial, sans-serif !important;
3404    font-size: 12px !important;
3405    font-weight: 800 !important;
3406    letter-spacing: 0.16em !important;
3407    line-height: 1 !important;
3408    text-transform: uppercase !important;
3409    appearance: none !important;
3410    -webkit-tap-highlight-color: transparent !important;
3411  }
3412
3413  #dinosaur_header.jc-header .jc-mobile-back::before {
3414    content: "" !important;
3415    width: 9px !important;
3416    height: 9px !important;
3417    border-left: 1.5px solid currentColor !important;
3418    border-bottom: 1.5px solid currentColor !important;
3419    transform: rotate(45deg) !important;
3420  }
3421
3422  #dinosaur_header.jc-header .jc-mobile-back:active {
3423    color: #FF8F1C !important;
3424  }
3425
3426  #dinosaur_header.jc-header .jc-mobile-panel-title {
3427    flex: 1 1 auto !important;
3428    min-width: 0 !important;
3429    padding: 0 8px !important;
3430    overflow: hidden !important;
3431    color: #1F2024 !important;
3432    font-family: "Saira", Arial, sans-serif !important;
3433    font-size: 13px !important;
3434    font-weight: 800 !important;
3435    letter-spacing: 0.12em !important;
3436    line-height: 1.1 !important;
3437    text-align: right !important;
3438    text-transform: uppercase !important;
3439    text-overflow: ellipsis !important;
3440    white-space: nowrap !important;
3441  }
3442
3443  /* v3.2: linked panel titles (top-level sections). Same typography and
3444     position; the whole flexible title area is the tap target (>= 44px). */
3445  #dinosaur_header.jc-header a.jc-mobile-panel-title {
3446    display: inline-flex !important;
3447    align-items: center !important;
3448    justify-content: flex-end !important;
3449    min-height: 44px !important;
3450    text-decoration: none !important;
3451    -webkit-tap-highlight-color: transparent !important;
3452  }
3453
3454  #dinosaur_header.jc-header a.jc-mobile-panel-title:active {
3455    color: #FF8F1C !important;
3456  }
3457
3458  /* Panel body scrolls independently */
3459  #dinosaur_header.jc-header .jc-mobile-panel-body {
3460    display: block !important;
3461    height: 100% !important;
3462    padding: 10px 22px 48px !important;
3463    overflow-y: auto !important;
3464    overflow-x: hidden !important;
3465    -webkit-overflow-scrolling: touch !important;
3466    overscroll-behavior: contain !important;
3467    font-family: "Saira", Arial, sans-serif !important;
3468  }
3469
3470  #dinosaur_header.jc-header .jc-mobile-panel-list {
3471    display: block !important;
3472    width: 100% !important;
3473    margin: 0 !important;
3474    padding: 0 !important;
3475    list-style: none !important;
3476  }
3477
3478  #dinosaur_header.jc-header .jc-mobile-panel-list li {
3479    display: block !important;
3480    width: 100% !important;
3481    margin: 0 !important;
3482    padding: 0 !important;
3483    list-style: none !important;
3484  }
3485
3486  /* Group headings inside a panel (VELOX widget column titles) */
3487  #dinosaur_header.jc-header .jc-mobile-panel-heading {
3488    display: block !important;
3489    margin: 18px 0 2px !important;
3490    padding: 0 !important;
3491    color: #6D6F70 !important;
3492    font-family: "Saira", Arial, sans-serif !important;
3493    font-size: 11px !important;
3494    font-weight: 800 !important;
3495    letter-spacing: 0.2em !important;
3496    line-height: 1.2 !important;
3497    text-transform: uppercase !important;
3498  }
3499
3500  #dinosaur_header.jc-header .jc-mobile-panel-list li:first-child .jc-mobile-panel-heading {
3501    margin-top: 4px !important;
3502  }
3503
3504  /* Rows inside panels: LIGHT weight, condensed */
3505  #dinosaur_header.jc-header .jc-mobile-panel-row {
3506    position: relative !important;
3507    display: flex !important;
3508    align-items: center !important;
3509    justify-content: flex-start !important;
3510    width: 100% !important;
3511    min-height: 44px !important;
3512    margin: 0 !important;
3513    padding: 8px 34px 8px 0 !important;
3514    color: #1F2024 !important;
3515    background: #ffffff !important;
3516    border: 0 !important;
3517    box-shadow: none !important;
3518    cursor: pointer !important;
3519    font-family: "Saira", Arial, sans-serif !important;
3520    font-size: 16px !important;
3521    font-weight: 400 !important;
3522    line-height: 1.3 !important;
3523    text-align: left !important;
3524    text-decoration: none !important;
3525    text-transform: none !important;
3526    letter-spacing: 0 !important;
3527    appearance: none !important;
3528    -webkit-tap-highlight-color: transparent !important;
3529  }
3530
3531  #dinosaur_header.jc-header .jc-mobile-panel-row:active {
3532    color: #FF8F1C !important;
3533  }
3534
3535  /* Branch rows (open a deeper panel): slightly stronger, subtle chevron */
3536  #dinosaur_header.jc-header .jc-mobile-panel-row--branch {
3537    font-weight: 600 !important;
3538  }
3539
3540  #dinosaur_header.jc-header .jc-mobile-panel-row--branch::after {
3541    content: "" !important;
3542    position: absolute !important;
3543    top: 50% !important;
3544    right: 13px !important;
3545    width: 8px !important;
3546    height: 8px !important;
3547    border-top: 1.5px solid currentColor !important;
3548    border-right: 1.5px solid currentColor !important;
3549    transform: translateY(-50%) rotate(45deg) !important;
3550    opacity: 0.35 !important;
3551    pointer-events: none !important;
3552  }
3553
3554  /* Leaf link rows: no chevron, clean list */
3555  #dinosaur_header.jc-header .jc-mobile-panel-row--link::after {
3556    content: none !important;
3557    display: none !important;
3558  }
3559
3560  /* Static (non-tappable) rows, e.g. Coming Soon items with no link */
3561  #dinosaur_header.jc-header .jc-mobile-panel-row--static {
3562    color: #6D6F70 !important;
3563    cursor: default !important;
3564  }
3565
3566  /* v3.2: bottom section links removed. The panel title now links to the
3567     section landing page, so the duplicate bottom link no longer renders. */
3568
3569  /* Compact callout strip (OPRTR requirement, mount-size warning) */
3570  #dinosaur_header.jc-header .jc-mobile-callout {
3571    display: block !important;
3572    width: 100% !important;
3573    margin: 18px 0 0 !important;
3574    padding: 12px 14px !important;
3575    background: #F4F4F4 !important;
3576    border-left: 3px solid #FF8F1C !important;
3577  }
3578
3579  #dinosaur_header.jc-header .jc-mobile-callout-label {
3580    display: block !important;
3581    margin: 0 0 4px !important;
3582    color: #1F2024 !important;
3583    font-family: "Saira", Arial, sans-serif !important;
3584    font-size: 10px !important;
3585    font-weight: 800 !important;
3586    letter-spacing: 0.14em !important;
3587    line-height: 1.2 !important;
3588    text-transform: uppercase !important;
3589  }
3590
3591  #dinosaur_header.jc-header .jc-mobile-callout-text {
3592    display: block !important;
3593    margin: 0 !important;
3594    color: #5F6368 !important;
3595    font-family: "Saira", Arial, sans-serif !important;
3596    font-size: 12px !important;
3597    font-weight: 400 !important;
3598    line-height: 1.45 !important;
3599  }
3600
3601  @media (prefers-reduced-motion: reduce) {
3602    #dinosaur_header.jc-header #menu.navPages-container,
3603    #dinosaur_header.jc-header .jc-mobile-panel {
3604      transition: opacity 0.15s ease, visibility 0.15s ease !important;
3605      transform: none !important;
3606    }
3607  }
3608}
3609</style>
3610
3611<script>
3612(function () {
3613  function ready(callback) {
3614    if (document.readyState !== "loading") {
3615      callback();
3616    } else {
3617      document.addEventListener("DOMContentLoaded", callback);
3618    }
3619  }
3620
3621  ready(function () {
3622    var header = document.getElementById("dinosaur_header");
3623    var menu = document.getElementById("menu");
3624
3625    if (!header || !menu) return;
3626    if (menu.dataset.jcMobileV3Init === "true") return;
3627    menu.dataset.jcMobileV3Init = "true";
3628
3629    var toggle = header.querySelector('[data-mobile-menu-toggle="menu"]');
3630    var closeButton = menu.querySelector(".jc-mobile-menu-close");
3631    var generated = menu.querySelector(".jc-mobile-generated");
3632    var panelRoot = menu.querySelector(".jc-mobile-panel-root");
3633    var sourceNav = menu.querySelector("#bf-fix-menu-mobile");
3634
3635    if (!generated || !panelRoot || !sourceNav) return;
3636
3637    var panelStack = [];
3638    var panelCount = 0;
3639    /* v3.1: panels must stack ABOVE the drawer topbar (z 100050), otherwise
3640       the opaque topbar covers every panel's Back bar. */
3641    var BASE_Z = 100100;
3642
3643    function isMobile() {
3644      return window.innerWidth <= 1024;
3645    }
3646
3647    function directChild(parent, selector) {
3648      if (!parent) return null;
3649      var children = parent.children;
3650      for (var i = 0; i < children.length; i++) {
3651        if (children[i].matches && children[i].matches(selector)) return children[i];
3652      }
3653      return null;
3654    }
3655
3656    function cleanText(element) {
3657      if (!element) return "";
3658      var clone = element.cloneNode(true);
3659      var junk = clone.querySelectorAll(
3660        "svg, .icon, .navPages-action-moreIcon, .is-srOnly, .countPill, " +
3661        ".velox-mega__badge, .jc-master-nav-badge, .jc-mobile-badge, ._badge, .badge, ._new, ._coming-soon"
3662      );
3663      for (var i = 0; i < junk.length; i++) junk[i].remove();
3664      return clone.textContent.replace(/\s+/g, " ").trim();
3665    }
3666
3667    function realHref(el) {
3668      if (!el) return "";
3669      var href = el.getAttribute("href") || "";
3670      if (!href || href === "#" || href.indexOf("#") === 0) return "";
3671      return href;
3672    }
3673
3674    /* ---------- PARSE: theme DOM -> clean data tree ---------- */
3675
3676    function parseChildList(listEl) {
3677      var nodes = [];
3678      if (!listEl) return nodes;
3679
3680      var children = listEl.children;
3681      for (var i = 0; i < children.length; i++) {
3682        var item = children[i];
3683        if (!item.classList || !item.classList.contains("navPage-childList-item")) continue;
3684
3685        var action = directChild(item, ".navPage-childList-action") ||
3686                     item.querySelector(":scope > a.navPage-childList-action, :scope > a");
3687        if (!action) continue;
3688
3689        var label = cleanText(action);
3690        if (!label) continue;
3691
3692        var nestedList = directChild(item, ".navPage-childList");
3693
3694        nodes.push({
3695          label: label,
3696          href: realHref(action),
3697          children: parseChildList(nestedList)
3698        });
3699      }
3700      return nodes;
3701    }
3702
3703    /* VELOX mega widget -> flat mobile list with group headings */
3704    function parseVeloxMega(subMenuEl) {
3705      var mega = subMenuEl.querySelector(".velox-mega");
3706      if (!mega) return null;
3707
3708      var nodes = [];
3709      var cols = mega.querySelectorAll(".velox-mega__col");
3710
3711      cols.forEach(function (col) {
3712        var titleEl = col.querySelector(".velox-mega__col-title");
3713        var titleText = titleEl ? cleanText(titleEl) : "";
3714
3715        if (titleText) {
3716          nodes.push({ type: "heading", label: titleText });
3717        }
3718
3719        var links = col.querySelectorAll(".velox-mega__link");
3720
3721        links.forEach(function (link) {
3722          var titleNode = link.querySelector(".velox-mega__link-title");
3723          var label = cleanText(titleNode || link);
3724          if (!label) return;
3725
3726          var href = "";
3727          if (link.tagName === "A") {
3728            href = realHref(link);
3729          } else {
3730            var innerA = link.querySelector("a");
3731            href = realHref(innerA);
3732          }
3733
3734          nodes.push({ label: label, href: href, children: [] });
3735        });
3736
3737        /* Plain-text device rows (e.g. Coming Soon items with no anchor) */
3738        if (!links.length) {
3739          var textItems = col.querySelectorAll("li, p, .velox-mega__item");
3740          textItems.forEach(function (ti) {
3741            if (ti.querySelector(".velox-mega__link")) return;
3742            var label = cleanText(ti);
3743            if (!label || label === titleText) return;
3744            var innerA = ti.tagName === "A" ? ti : ti.querySelector("a");
3745            nodes.push({ label: label, href: realHref(innerA), children: [] });
3746          });
3747        }
3748      });
3749
3750      return nodes.length ? nodes : null;
3751    }
3752
3753    /* jc-callout widgets inside a dropdown -> compact info strips */
3754    function parseCallouts(subMenuEl) {
3755      var callouts = [];
3756      if (!subMenuEl) return callouts;
3757
3758      var widgets = subMenuEl.querySelectorAll(".jc-callout-widget");
3759
3760      widgets.forEach(function (w) {
3761        var labelEl = w.querySelector(".jc-callout-label");
3762        var textEl = w.querySelector(".jc-callout-text");
3763        var label = labelEl ? cleanText(labelEl) : "";
3764        var text = textEl ? cleanText(textEl) : "";
3765        if (label || text) callouts.push({ label: label, text: text });
3766      });
3767
3768      return callouts;
3769    }
3770
3771    function parseSubMenu(subMenuEl) {
3772      var nodes = [];
3773      if (!subMenuEl) return nodes;
3774
3775      /* If this dropdown is the VELOX widget, use the widget parser instead
3776         of the nav parser so the full widget content is represented and the
3777         theme's partial nav rows do not duplicate it. */
3778      var veloxNodes = parseVeloxMega(subMenuEl);
3779      if (veloxNodes) return veloxNodes;
3780
3781      var items = subMenuEl.querySelectorAll(".navPage-subMenu-item");
3782
3783      items.forEach(function (item) {
3784        var action = directChild(item, ".navPage-subMenu-action") ||
3785                     item.querySelector(".navPage-subMenu-action");
3786        if (!action) return;
3787
3788        var label = cleanText(action);
3789        if (!label) return;
3790
3791        var childList = directChild(item, ".navPage-childList") ||
3792                        item.querySelector(":scope > .navPage-childList");
3793
3794        nodes.push({
3795          label: label,
3796          href: realHref(action),
3797          children: parseChildList(childList)
3798        });
3799      });
3800
3801      return nodes;
3802    }
3803
3804    function getBestLabelLink(item) {
3805      return (
3806        directChild(item, ".navPages-action.has-subMenu.u-hideMobile") ||
3807        directChild(item, ".navPages-action.has-subMenu.u-hideTablet") ||
3808        directChild(item, ".navPages-action.has-subMenu") ||
3809        directChild(item, ".navPages-action:not(.navPages-action-toggle):not(.navPages-action-toggle-desktop)")
3810      );
3811    }
3812
3813    function parseTopLevel() {
3814      var results = [];
3815      var seen = {};
3816
3817      var items = sourceNav.querySelectorAll(".navPages-item");
3818
3819      items.forEach(function (item) {
3820        if (item.closest(".navPage-subMenu")) return;
3821        if (item.closest(".navPages-list--user")) return;
3822        if (item.classList.contains("border-separation")) return;
3823
3824        var labelLink = getBestLabelLink(item);
3825        if (!labelLink) return;
3826
3827        var label = cleanText(labelLink);
3828        if (!label) return;
3829
3830        var key = label.toLowerCase();
3831        if (seen[key]) return;
3832        seen[key] = true;
3833
3834        var subMenu = directChild(item, ".navPage-subMenu");
3835
3836        results.push({
3837          label: label,
3838          href: realHref(labelLink),
3839          children: parseSubMenu(subMenu),
3840          callouts: parseCallouts(subMenu)
3841        });
3842      });
3843
3844      return results;
3845    }
3846
3847    /* ---------- PANEL MANAGEMENT ---------- */
3848
3849    function deactivatePanel(panel) {
3850      panel.classList.remove("is-panel-active");
3851      panel.setAttribute("aria-hidden", "true");
3852      /* v3.1: keep the opener button's aria-expanded in sync */
3853      if (panel._jcTrigger) panel._jcTrigger.setAttribute("aria-expanded", "false");
3854    }
3855
3856    function closeAllPanels() {
3857      while (panelStack.length) {
3858        deactivatePanel(panelStack.pop());
3859      }
3860    }
3861
3862    function popPanel() {
3863      if (!panelStack.length) return false;
3864      deactivatePanel(panelStack.pop());
3865      return true;
3866    }
3867
3868    function openPanel(panel) {
3869      panel.classList.add("is-panel-active");
3870      panel.setAttribute("aria-hidden", "false");
3871      if (panel._jcTrigger) panel._jcTrigger.setAttribute("aria-expanded", "true");
3872      panelStack.push(panel);
3873
3874      var body = panel.querySelector(".jc-mobile-panel-body");
3875      if (body) body.scrollTop = 0;
3876
3877      var back = panel.querySelector(".jc-mobile-back");
3878      window.setTimeout(function () {
3879        if (back) back.focus();
3880      }, 200);
3881    }
3882
3883    /* ---------- RENDER: data tree -> clean panels ---------- */
3884
3885    function buildPanel(node, depth, sectionLabel) {
3886      var panel = document.createElement("div");
3887      panel.className = "jc-mobile-panel";
3888      panel.id = "jc-mobile-panel-" + (panelCount++);
3889      panel.setAttribute("aria-hidden", "true");
3890      panel.style.zIndex = String(BASE_Z + depth);
3891
3892      var topbar = document.createElement("div");
3893      topbar.className = "jc-mobile-panel-topbar";
3894
3895      var back = document.createElement("button");
3896      back.type = "button";
3897      back.className = "jc-mobile-back";
3898      back.textContent = "Back";
3899      back.setAttribute("aria-label", "Back");
3900      back.addEventListener("click", function (event) {
3901        event.preventDefault();
3902        event.stopPropagation();
3903        popPanel();
3904      });
3905
3906      /* v3.2: top-level section titles link to the section landing page.
3907         VELOX ECOSYSTEM is intentionally NOT linked. Nested panel titles
3908         (Apple, Samsung, etc.) stay plain. */
3909      var isVelox = (sectionLabel || "").toLowerCase().indexOf("velox") > -1;
3910      var title;
3911      if (depth === 0 && node.href && !isVelox) {
3912        title = document.createElement("a");
3913        title.href = node.href;
3914      } else {
3915        title = document.createElement("div");
3916      }
3917      title.className = "jc-mobile-panel-title";
3918      title.textContent = node.label;
3919
3920      /* v3.1: per-panel X that closes the whole menu (space for it was
3921         already reserved by the topbar's 66px right padding) */
3922      var panelClose = document.createElement("button");
3923      panelClose.type = "button";
3924      panelClose.className = "jc-mobile-panel-close";
3925      panelClose.setAttribute("aria-label", "Close menu");
3926      panelClose.addEventListener("click", function (event) {
3927        event.preventDefault();
3928        event.stopPropagation();
3929        closeMenu();
3930      });
3931
3932      topbar.appendChild(back);
3933      topbar.appendChild(title);
3934      topbar.appendChild(panelClose);
3935      panel.appendChild(topbar);
3936
3937      var body = document.createElement("div");
3938      body.className = "jc-mobile-panel-body";
3939
3940      var list = document.createElement("ul");
3941      list.className = "jc-mobile-panel-list";
3942
3943      node.children.forEach(function (child) {
3944        var li = document.createElement("li");
3945
3946        if (child.type === "heading") {
3947          var heading = document.createElement("div");
3948          heading.className = "jc-mobile-panel-heading";
3949          heading.textContent = child.label;
3950          li.appendChild(heading);
3951        } else if (child.children && child.children.length) {
3952          var childPanel = buildPanel(child, depth + 1, sectionLabel);
3953          panelRoot.appendChild(childPanel);
3954
3955          var button = document.createElement("button");
3956          button.type = "button";
3957          button.className = "jc-mobile-panel-row jc-mobile-panel-row--branch";
3958          button.textContent = child.label;
3959          button.setAttribute("aria-controls", childPanel.id);
3960          button.setAttribute("aria-expanded", "false");
3961          childPanel._jcTrigger = button;
3962
3963          button.addEventListener("click", function (event) {
3964            event.preventDefault();
3965            event.stopPropagation();
3966            openPanel(childPanel);
3967          });
3968
3969          li.appendChild(button);
3970        } else if (child.href) {
3971          var link = document.createElement("a");
3972          link.className = "jc-mobile-panel-row jc-mobile-panel-row--link";
3973          link.href = child.href;
3974          link.textContent = child.label;
3975          li.appendChild(link);
3976        } else {
3977          /* No link and no children: static informational row */
3978          var stat = document.createElement("span");
3979          stat.className = "jc-mobile-panel-row jc-mobile-panel-row--static";
3980          stat.textContent = child.label;
3981          li.appendChild(stat);
3982        }
3983
3984        list.appendChild(li);
3985      });
3986
3987      body.appendChild(list);
3988
3989      /* v3.2: bottom section link removed; the linked panel title replaces it */
3990
3991      /* Compact callout strips (OPRTR requirement, mount-size warning) */
3992      if (node.callouts && node.callouts.length) {
3993        node.callouts.forEach(function (c) {
3994          var strip = document.createElement("div");
3995          strip.className = "jc-mobile-callout";
3996
3997          if (c.label) {
3998            var cl = document.createElement("span");
3999            cl.className = "jc-mobile-callout-label";
4000            cl.textContent = c.label;
4001            strip.appendChild(cl);
4002          }
4003
4004          if (c.text) {
4005            var ct = document.createElement("span");
4006            ct.className = "jc-mobile-callout-text";
4007            ct.textContent = c.text;
4008            strip.appendChild(ct);
4009          }
4010
4011          body.appendChild(strip);
4012        });
4013      }
4014
4015      panel.appendChild(body);
4016      return panel;
4017    }
4018
4019    function buildMobileMenu() {
4020      generated.innerHTML = "";
4021      panelRoot.innerHTML = "";
4022      panelStack = [];
4023      panelCount = 0;
4024
4025      var tree = parseTopLevel();
4026
4027      var list = document.createElement("ul");
4028      list.className = "jc-mobile-primary-list";
4029
4030      tree.forEach(function (node) {
4031        var li = document.createElement("li");
4032        li.className = "jc-mobile-primary-item";
4033
4034        if (node.children.length) {
4035          var panel = buildPanel(node, 0, node.label);
4036          panelRoot.appendChild(panel);
4037
4038          var button = document.createElement("button");
4039          button.type = "button";
4040          button.className = "jc-mobile-primary-action";
4041          button.textContent = node.label;
4042          button.setAttribute("aria-controls", panel.id);
4043          button.setAttribute("aria-expanded", "false");
4044          panel._jcTrigger = button;
4045
4046          button.addEventListener("click", function (event) {
4047            event.preventDefault();
4048            event.stopPropagation();
4049            openPanel(panel);
4050          });
4051
4052          li.appendChild(button);
4053        } else {
4054          var link = document.createElement("a");
4055          link.className = "jc-mobile-primary-action";
4056          /* NOTE: falls back to "#" only if the theme provides no href for a
4057             top-level item with no children. Flag if this ever renders. */
4058          link.href = node.href || "#";
4059          link.textContent = node.label;
4060          li.appendChild(link);
4061        }
4062
4063        list.appendChild(li);
4064      });
4065
4066      generated.appendChild(list);
4067    }
4068
4069    /* ---------- OPEN / CLOSE DRAWER ---------- */
4070
4071    function closeMenu() {
4072      closeAllPanels();
4073
4074      document.documentElement.classList.remove("jc-mobile-menu-lock");
4075      document.body.classList.remove("jc-mobile-menu-lock");
4076      document.body.classList.remove("jc-mobile-menu-open");
4077      document.body.classList.remove("has-activeNavPages");
4078      document.body.classList.remove("mobileMenu-is-open");
4079
4080      menu.classList.remove("is-open");
4081      menu.classList.remove("open");
4082      menu.setAttribute("aria-hidden", "true");
4083
4084      if (toggle) toggle.setAttribute("aria-expanded", "false");
4085    }
4086
4087    function isMenuOpen() {
4088      return document.body.classList.contains("jc-mobile-menu-open");
4089    }
4090
4091    function openMenu() {
4092      if (!isMobile()) return;
4093
4094      document.documentElement.classList.add("jc-mobile-menu-lock");
4095      document.body.classList.add("jc-mobile-menu-lock");
4096      document.body.classList.add("jc-mobile-menu-open");
4097
4098      menu.setAttribute("aria-hidden", "false");
4099
4100      if (toggle) toggle.setAttribute("aria-expanded", "true");
4101
4102      window.setTimeout(function () {
4103        if (closeButton) closeButton.focus();
4104      }, 120);
4105    }
4106
4107    buildMobileMenu();
4108
4109    if (toggle) {
4110      toggle.addEventListener("click", function (event) {
4111        if (!isMobile()) return;
4112
4113        event.preventDefault();
4114        event.stopImmediatePropagation();
4115
4116        if (isMenuOpen()) {
4117          closeMenu();
4118        } else {
4119          buildMobileMenu();
4120          openMenu();
4121        }
4122      }, true);
4123    }
4124
4125    if (closeButton) {
4126      closeButton.addEventListener("click", function (event) {
4127        event.preventDefault();
4128        event.stopPropagation();
4129        closeMenu();
4130      });
4131    }
4132
4133    /* Any real link tap inside the drawer closes the menu, then navigates */
4134    menu.addEventListener("click", function (event) {
4135      if (!isMobile()) return;
4136
4137      var link = event.target.closest("a");
4138      if (!link) return;
4139
4140      var href = link.getAttribute("href") || "";
4141      if (!href || href.charAt(0) === "#") return;
4142
4143      closeMenu();
4144    });
4145
4146    /* Escape pops one panel first, then closes the drawer */
4147    document.addEventListener("keydown", function (event) {
4148      if (event.key !== "Escape") return;
4149      if (!isMenuOpen()) return;
4150
4151      if (!popPanel()) closeMenu();
4152    });
4153
4154    /* v3.1: only tear down when the drawer is actually open. Previously this
4155       ran closeMenu on EVERY desktop resize event, forcing aria-hidden=true
4156       onto the visible desktop nav over and over. */
4157    window.addEventListener("resize", function () {
4158      if (!isMobile() && isMenuOpen()) closeMenu();
4159    });
4160
4161    /* v3.1: bfcache restore never shows a stale open drawer or scroll lock
4162       (e.g. navigating away via the drawer logo, then hitting Back) */
4163    window.addEventListener("pageshow", function () {
4164      if (isMenuOpen()) closeMenu();
4165    });
4166  });
4167})();
4168</script>
4168
4169
4170<script>
4171/* =============================================================================
4172   JC MOBILE MENU UTILITY PATCH
4173   Mobile drawer only.
4174
4175   Responsibilities:
4176   - Partner Integrations remains a direct link.
4177   - Removes redundant top-level "Shop All" links when the panel title already
4178     links to the same section.
4179   - Badge handling is intentionally NOT included here. All navigation badges
4180     are controlled by the single MASTER NAV BADGE CONTROL script at the bottom
4181     of this file.
4182============================================================================= */
4183(function () {
4184  'use strict';
4185
4186  var PARTNER_TEXT = 'partner integrations';
4187  var PARTNER_HREF = '/pages/partner-integrations/';
4188
4189  function normText(element) {
4190    if (!element) return '';
4191
4192    var clone = element.cloneNode(true);
4193
4194    clone.querySelectorAll(
4195      '.jc-master-nav-badge, .jc-mobile-badge, .velox-mega__badge, ' +
4196      '._badge, .badge, ._new, ._coming-soon'
4197    ).forEach(function (badge) {
4198      badge.remove();
4199    });
4200
4201    return (clone.textContent || '').replace(/\s+/g, ' ').trim();
4202  }
4203
4204  function normHref(href) {
4205    if (!href) return '';
4206
4207    href = href.trim().toLowerCase();
4208
4209    if (href.charAt(0) === '#') return '';
4210
4211    return href.replace(/\/+$/, '');
4212  }
4213
4214  function fixPartnerIntegrations(scope) {
4215    scope.querySelectorAll(
4216      '.jc-mobile-primary-action:not([data-jc-partner])'
4217    ).forEach(function (element) {
4218      if (normText(element).toLowerCase() !== PARTNER_TEXT) return;
4219
4220      element.setAttribute('data-jc-partner', 'true');
4221
4222      if (element.tagName === 'A') {
4223        element.setAttribute('href', PARTNER_HREF);
4224        return;
4225      }
4226
4227      var link = document.createElement('a');
4228
4229      link.className = element.className;
4230      link.href = PARTNER_HREF;
4231      link.textContent = normText(element);
4232      link.setAttribute('data-jc-partner', 'true');
4233
4234      element.parentNode.replaceChild(link, element);
4235    });
4236  }
4237
4238  function dedupeSectionLinks(scope) {
4239    scope.querySelectorAll(
4240      '.jc-mobile-panel:not([data-jc-deduped])'
4241    ).forEach(function (panel) {
4242      var titleLink = panel.querySelector('a.jc-mobile-panel-title');
4243
4244      panel.setAttribute('data-jc-deduped', 'true');
4245
4246      if (!titleLink) return;
4247
4248      var target = normHref(titleLink.getAttribute('href'));
4249
4250      panel.querySelectorAll(
4251        '.jc-mobile-panel-row--link'
4252      ).forEach(function (row) {
4253        var text = normText(row).toLowerCase();
4254        var textMatch = text === 'all products' || text === 'shop all';
4255        var hrefMatch =
4256          target &&
4257          normHref(row.getAttribute('href')) === target;
4258
4259        if (!textMatch && !hrefMatch) return;
4260
4261        var item = row.closest('li');
4262
4263        if (item && item.parentNode) {
4264          item.parentNode.removeChild(item);
4265        } else if (row.parentNode) {
4266          row.parentNode.removeChild(row);
4267        }
4268      });
4269    });
4270  }
4271
4272  function runPatch() {
4273    var menu = document.getElementById('menu');
4274
4275    if (!menu) return;
4276
4277    fixPartnerIntegrations(menu);
4278    dedupeSectionLinks(menu);
4279  }
4280
4281  function init() {
4282    var menu = document.getElementById('menu');
4283
4284    if (!menu) return;
4285
4286    runPatch();
4287
4288    var scheduled = false;
4289
4290    var observer = new MutationObserver(function () {
4291      if (scheduled) return;
4292
4293      scheduled = true;
4294
4295      window.setTimeout(function () {
4296        scheduled = false;
4297        runPatch();
4298      }, 30);
4299    });
4300
4301    observer.observe(menu, {
4302      childList: true,
4303      subtree: true
4304    });
4305  }
4306
4307  if (document.readyState === 'loading') {
4308    document.addEventListener('DOMContentLoaded', init);
4309  } else {
4310    init();
4311  }
4312})();
4313</script>
4313
4314
4315<style>
4316/* =============================================================================
4317   JC DESKTOP MEGA MENU — CLICK TO OPEN
4318   Desktop only (min-width: 1025px). Converts the hover mega menu to click,
4319   adds a drop-down animation and an X close button, and guarantees the page
4320   always loads with the menu closed. Mobile drawer untouched.
4321============================================================================= */
4322@media (min-width: 1025px) {
4323
4324  /* Closed state: kill hover-open and any stale theme is-open.
4325     Only .jc-mega-open (set by this widget's JS) can show a panel. */
4326  body:not(.editing-menu-widgets) #dinosaur_header.jc-header .navPages-item:hover > .navPage-subMenu:not(.jc-mega-open),
4327  body:not(.editing-menu-widgets) #dinosaur_header.jc-header .navPage-subMenu.is-open:not(.jc-mega-open),
4328  body:not(.editing-menu-widgets) #dinosaur_header.jc-header .navPage-subMenu.is-focus-open:not(.jc-mega-open),
4329  body:not(.editing-menu-widgets) #dinosaur_header.jc-header .navPage-subMenu:not(.jc-mega-open) {
4330    opacity: 0 !important;
4331    visibility: hidden !important;
4332    pointer-events: none !important;
4333    transform: translateY(-12px) !important;
4334    transition:
4335      transform 0.24s cubic-bezier(.22, .61, .36, 1),
4336      opacity 0.18s ease,
4337      visibility 0.18s ease !important;
4338  }
4339
4340  /* Open state: drop-down animation */
4341  body:not(.editing-menu-widgets) #dinosaur_header.jc-header .navPage-subMenu.jc-mega-open {
4342    opacity: 1 !important;
4343    visibility: visible !important;
4344    pointer-events: auto !important;
4345    transform: translateY(0) !important;
4346    transition:
4347      transform 0.28s cubic-bezier(.22, .61, .36, 1),
4348      opacity 0.2s ease,
4349      visibility 0.2s ease !important;
4350  }
4351
4352  /* The hover bridge is a hover-era artifact; disable it so it can't
4353     intercept clicks above the panel. */
4354  body:not(.editing-menu-widgets) #dinosaur_header.jc-header .navPage-subMenu::before {
4355    display: none !important;
4356    content: none !important;
4357    pointer-events: none !important;
4358  }
4359
4360  /* Orange underline follows the clicked-open item, not hover */
4361  body:not(.editing-menu-widgets) #dinosaur_header.jc-header .navPages-item.jc-mega-active > .navPages-action {
4362    color: #FF8F1C !important;
4363    border-bottom-color: #FF8F1C !important;
4364    background-size: 100% 2px !important;
4365  }
4366
4367  /* X close button, top right of the open panel */
4368  #dinosaur_header.jc-header .jc-mega-close {
4369    position: absolute !important;
4370    top: 14px !important;
4371    right: 28px !important;
4372    z-index: 5 !important;
4373    display: inline-flex !important;
4374    align-items: center !important;
4375    justify-content: center !important;
4376    width: 40px !important;
4377    height: 40px !important;
4378    margin: 0 !important;
4379    padding: 0 !important;
4380    background: transparent !important;
4381    border: 0 !important;
4382    border-radius: 0 !important;
4383    box-shadow: none !important;
4384    cursor: pointer !important;
4385    appearance: none !important;
4386    -webkit-tap-highlight-color: transparent !important;
4387  }
4388
4389  #dinosaur_header.jc-header .jc-mega-close::before,
4390  #dinosaur_header.jc-header .jc-mega-close::after {
4391    content: "" !important;
4392    position: absolute !important;
4393    width: 20px !important;
4394    height: 2px !important;
4395    background: #1F2024 !important;
4396    transition: background 0.16s ease !important;
4397  }
4398
4399  #dinosaur_header.jc-header .jc-mega-close::before { transform: rotate(45deg) !important; }
4400  #dinosaur_header.jc-header .jc-mega-close::after  { transform: rotate(-45deg) !important; }
4401
4402  @media (hover: hover) {
4403    #dinosaur_header.jc-header .jc-mega-close:hover::before,
4404    #dinosaur_header.jc-header .jc-mega-close:hover::after {
4405      background: #FF8F1C !important;
4406    }
4407  }
4408
4409  @media (prefers-reduced-motion: reduce) {
4410    body:not(.editing-menu-widgets) #dinosaur_header.jc-header .navPage-subMenu,
4411    body:not(.editing-menu-widgets) #dinosaur_header.jc-header .navPage-subMenu.jc-mega-open {
4412      transform: none !important;
4413      transition: opacity 0.15s ease, visibility 0.15s ease !important;
4414    }
4415  }
4416}
4417
4418/* Never show the injected X on mobile */
4419@media (max-width: 1024px) {
4420  #dinosaur_header.jc-header .jc-mega-close {
4421    display: none !important;
4422  }
4423}
4424</style>
4425
4426<script>
4427(function () {
4428  function ready(callback) {
4429    if (document.readyState !== "loading") {
4430      callback();
4431    } else {
4432      document.addEventListener("DOMContentLoaded", callback);
4433    }
4434  }
4435
4436  ready(function () {
4437    var header = document.getElementById("dinosaur_header");
4438    if (!header) return;
4439    if (header.dataset.jcMegaClickInit === "true") return;
4440    header.dataset.jcMegaClickInit = "true";
4441
4442    function isDesktop() {
4443      return window.innerWidth >= 1025;
4444    }
4445
4446    /* Top-level items that own a mega panel */
4447    function getMegaItems() {
4448      var items = [];
4449      header.querySelectorAll(".navPages-item").forEach(function (item) {
4450        if (item.closest(".navPage-subMenu")) return;
4451        if (item.closest(".navPages-list--user")) return;
4452
4453        var panel = null;
4454        for (var i = 0; i < item.children.length; i++) {
4455          if (item.children[i].classList &&
4456              item.children[i].classList.contains("navPage-subMenu")) {
4457            panel = item.children[i];
4458            break;
4459          }
4460        }
4461        if (!panel) return;
4462
4463        var action = null;
4464        for (var j = 0; j < item.children.length; j++) {
4465          if (item.children[j].classList &&
4466              item.children[j].classList.contains("navPages-action")) {
4467            action = item.children[j];
4468            break;
4469          }
4470        }
4471
4472        items.push({ item: item, panel: panel, action: action });
4473      });
4474      return items;
4475    }
4476
4477    var megaItems = getMegaItems();
4478    if (!megaItems.length) return;
4479
4480    function closeAll() {
4481      megaItems.forEach(function (m) {
4482        m.panel.classList.remove("jc-mega-open");
4483        m.panel.classList.remove("is-open");
4484        m.panel.classList.remove("is-focus-open");
4485        m.panel.setAttribute("aria-hidden", "true");
4486        m.item.classList.remove("jc-mega-active");
4487        if (m.action) m.action.setAttribute("aria-expanded", "false");
4488      });
4489    }
4490
4491    function open(m) {
4492      closeAll();
4493      m.panel.classList.add("jc-mega-open");
4494      m.panel.setAttribute("aria-hidden", "false");
4495      m.item.classList.add("jc-mega-active");
4496      if (m.action) m.action.setAttribute("aria-expanded", "true");
4497    }
4498
4499    /* Always start the page fresh: strip any stale open state */
4500    closeAll();
4501
4502    megaItems.forEach(function (m) {
4503      /* Inject the X close button once per panel */
4504      if (!m.panel.querySelector(".jc-mega-close")) {
4505        var closeBtn = document.createElement("button");
4506        closeBtn.type = "button";
4507        closeBtn.className = "jc-mega-close";
4508        closeBtn.setAttribute("aria-label", "Close menu");
4509
4510        closeBtn.addEventListener("click", function (event) {
4511          event.preventDefault();
4512          event.stopPropagation();
4513          closeAll();
4514        });
4515
4516        m.panel.insertBefore(closeBtn, m.panel.firstChild);
4517      }
4518
4519      /* Click the top-level label toggles the panel (desktop only).
4520         Capture phase so theme hover/click handlers can't interfere. */
4521      var action = m.action;
4522      if (!action) return;
4523
4524      action.addEventListener("click", function (event) {
4525        if (!isDesktop()) return;
4526
4527        event.preventDefault();
4528        event.stopImmediatePropagation();
4529
4530        if (m.panel.classList.contains("jc-mega-open")) {
4531          closeAll();
4532        } else {
4533          open(m);
4534        }
4535      }, true);
4536    });
4537
4538    /* Click anywhere outside the open panel / nav closes it */
4539    document.addEventListener("click", function (event) {
4540      if (!isDesktop()) return;
4541
4542      var anyOpen = megaItems.some(function (m) {
4543        return m.panel.classList.contains("jc-mega-open");
4544      });
4545      if (!anyOpen) return;
4546
4547      if (event.target.closest(".navPage-subMenu")) return;
4548      if (event.target.closest(".navPages-item")) return;
4549
4550      closeAll();
4551    });
4552
4553    /* A real link click inside a panel closes it, then navigates normally */
4554    header.addEventListener("click", function (event) {
4555      if (!isDesktop()) return;
4556
4557      var link = event.target.closest(".navPage-subMenu a");
4558      if (!link) return;
4559
4560      var href = link.getAttribute("href") || "";
4561      if (!href || href.charAt(0) === "#") return;
4562
4563      closeAll();
4564    });
4565
4566    /* Escape closes */
4567    document.addEventListener("keydown", function (event) {
4568      if (event.key === "Escape" && isDesktop()) closeAll();
4569    });
4570
4571    /* Crossing the breakpoint closes everything */
4572    window.addEventListener("resize", function () {
4573      if (!isDesktop()) closeAll();
4574    });
4575
4576    /* Back/forward cache restore: never show a stale open menu */
4577    window.addEventListener("pageshow", function () {
4578      closeAll();
4579    });
4580  });
4581})();
4582</script>
4582
4583
4584<style>
4585/* =============================================================================
4586   JC DESKTOP HEADER LAYOUT v3 — STRUCTURAL FLEX, NO OVERLAP POSSIBLE
4587   Desktop only (min-width: 1025px). Tablet and below (max-width: 1024px) now
4588   use the mobile drawer, so there is no unowned band where theme styles can
4589   overlap the logo.
4590   v3.9: the desktop header is now position: sticky (top: 0) with a scrolled
4591   shadow. See the STICKY HEADER sub-section below and the sticky script at
4592   the bottom of the file.
4593   Structure: logo = shrinkable flex-basis with a floor, nav = flex: 1 with
4594   min-width: 0 centered in the leftover space, utilities = content width.
4595   All positioning hazards (absolute, transforms, floats, stray margins) are
4596   neutralized on the header row so the three zones negotiate space in normal
4597   flex flow; overlap is geometrically impossible. Sizes are fluid clamp()
4598   values, so narrowing the window and raising browser zoom (110 to 175
4599   percent) degrade gradually instead of colliding.
4600============================================================================= */
4601@media (min-width: 1025px) {
4602
4603  /* ---------------------------------------------------------------------
4604     DESKTOP STICKY HEADER (position: sticky, not fixed)
4605     The header pins to the top on scroll with no layout shift because sticky
4606     stays in normal flow. It also serves as the containing block for the
4607     absolutely-positioned mega panels, so they open directly beneath it and
4608     are never clipped (overflow-x: clip leaves the vertical axis visible, so
4609     downward panels are unaffected). Background stays opaque white for
4610     readability over page content; the shadow is added only once pinned.
4611     Mobile/tablet (<=1024px) is handled by the drawer block and is untouched.
4612     --------------------------------------------------------------------- */
4613  #dinosaur_header.jc-header {
4614    position: -webkit-sticky !important;
4615    position: sticky !important;
4616    top: 0 !important;
4617    z-index: 100 !important;
4618    max-width: 100%;
4619    overflow-x: clip;
4620    background: #ffffff !important;
4621    transition: box-shadow 0.2s ease !important;
4622  }
4623
4624  #dinosaur_header.jc-header .jc-header__main {
4625    background: #ffffff !important;
4626  }
4627
4628  /* Scrolled state: subtle shadow once the header is pinned to the top.
4629     No border, no gradient, no background change, no motion beyond the fade.
4630     The .jc-stuck class is toggled by the sticky script at the bottom. */
4631  #dinosaur_header.jc-header.jc-stuck {
4632    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
4633  }
4634
4635  /* The header row: single nowrap flex line, full width, fluid gutters */
4636  #dinosaur_header.jc-header .jc-header__inner {
4637    display: flex !important;
4638    flex-wrap: nowrap !important;
4639    align-items: center !important;
4640    width: 100% !important;
4641    max-width: none !important;
4642    margin: 0 !important;
4643    padding: 0 clamp(20px, 2vw, 36px) !important;
4644    min-height: 88px;
4645    column-gap: clamp(16px, 1.8vw, 32px);
4646    position: relative !important;
4647  }
4648
4649  /* Neutralize positioning hazards on all three zones */
4650  #dinosaur_header.jc-header .jc-header__zone--left,
4651  #dinosaur_header.jc-header .jc-header__zone--center,
4652  #dinosaur_header.jc-header .jc-header__zone--right {
4653    position: static !important;
4654    transform: none !important;
4655    float: none !important;
4656    margin: 0 !important;
4657  }
4658
4659  /* Hamburger never renders on desktop, regardless of theme thresholds */
4660  #dinosaur_header.jc-header .jc-header__menuToggle {
4661    display: none !important;
4662  }
4663
4664  /* LEFT: logo owns a real flex-basis and shrinks gradually to a floor,
4665     never below it. Image is width-driven so it scales with the container. */
4666  #dinosaur_header.jc-header .jc-header__zone--left {
4667    display: flex;
4668    align-items: center;
4669    flex: 0 1 auto;
4670    min-width: 0;
4671  }
4672
4673  #dinosaur_header.jc-header .jc-header__logo {
4674    display: flex !important;
4675    align-items: center !important;
4676    flex: 0 1 340px !important;
4677    min-width: 190px !important;
4678    max-width: 340px !important;
4679    width: auto !important;
4680    margin: 0 !important;
4681    overflow: visible !important;
4682  }
4683
4684  #dinosaur_header.jc-header .jc-header__logo a {
4685    display: flex !important;
4686    align-items: center !important;
4687    width: 100% !important;
4688  }
4689
4690  #dinosaur_header.jc-header .jc-header__logo img,
4691  #dinosaur_header.jc-header .jc-header__logo .header-logo-image {
4692    width: 100% !important;
4693    height: auto !important;
4694    max-height: 62px !important;
4695    object-fit: contain !important;
4696    object-position: left center !important;
4697  }
4698
4699  /* CENTER: the only flexing zone; nav centered in the leftover space */
4700  #dinosaur_header.jc-header .jc-header__zone--center {
4701    flex: 1 1 auto;
4702    min-width: 0;
4703    display: flex;
4704    justify-content: center;
4705  }
4706
4707  /* The nav container participates in normal flow on desktop */
4708  #dinosaur_header.jc-header #menu.navPages-container {
4709    position: static !important;
4710    transform: none !important;
4711    width: auto !important;
4712    max-width: 100% !important;
4713    margin: 0 !important;
4714    padding: 0 !important;
4715  }
4716
4717  /* Top-level list: nowrap flex with fluid gaps */
4718  #dinosaur_header.jc-header .navPages-list:not(.navPages-list--user) {
4719    display: flex !important;
4720    flex-wrap: nowrap !important;
4721    align-items: center !important;
4722    gap: clamp(12px, 1.7vw, 36px);
4723    margin: 0 !important;
4724  }
4725
4726  /* Labels: fluid 13 to 16px, Saira 800, uppercase, never wrap or clip */
4727  #dinosaur_header.jc-header .navPages-list:not(.navPages-list--user) > .navPages-item > .navPages-action {
4728    font-family: 'Saira', Arial, sans-serif !important;
4729    font-size: clamp(13px, 1.1vw, 16px) !important;
4730    font-weight: 800 !important;
4731    letter-spacing: 0.06em !important;
4732    text-transform: uppercase !important;
4733    white-space: nowrap !important;
4734    line-height: 1 !important;
4735    -webkit-tap-highlight-color: transparent;
4736  }
4737
4738  /* RIGHT: utilities fixed to content width */
4739  #dinosaur_header.jc-header .jc-header__zone--right {
4740    display: flex;
4741    align-items: center;
4742    flex: 0 0 auto;
4743  }
4744}
4745
4746/* Condensed desktop: tighten tracking so the long labels (VELOX ECOSYSTEM,
4747   PARTNER INTEGRATIONS) release width before anything else has to give */
4748@media (min-width: 1025px) and (max-width: 1220px) {
4749  #dinosaur_header.jc-header .navPages-list:not(.navPages-list--user) > .navPages-item > .navPages-action {
4750    letter-spacing: 0.03em !important;
4751  }
4752}
4753</style>
4754
4755<script>
4756/* =============================================================================
4757   JC NAV CENTER ANCHOR + COLLISION GUARD
4758   Desktop only (min-width: 1025px). Shifts the top-level nav so CONNECT sits
4759   at the exact horizontal center of the page, then clamps the shift so the
4760   nav can NEVER overlap the logo zone on the left or the utility icons on
4761   the right (this also fixes the PROTECT-over-logo overlap seen at collapsed
4762   widths). Layout-agnostic: it measures and corrects iteratively instead of
4763   assuming how the theme centers the nav. Mobile drawer untouched.
4764============================================================================= */
4765(function () {
4766  function ready(callback) {
4767    if (document.readyState !== "loading") {
4768      callback();
4769    } else {
4770      document.addEventListener("DOMContentLoaded", callback);
4771    }
4772  }
4773
4774  ready(function () {
4775    var header = document.getElementById("dinosaur_header");
4776    if (!header) return;
4777    if (header.dataset.jcNavAnchorInit === "true") return;
4778    header.dataset.jcNavAnchorInit = "true";
4779
4780    var CLEARANCE = 24; /* min px between nav and the logo / utility zones */
4781
4782    function isDesktop() {
4783      return window.innerWidth >= 1025;
4784    }
4785
4786    /* The visible top-level list (theme may render hidden duplicates) */
4787    function getList() {
4788      var lists = header.querySelectorAll(".navPages-list");
4789      for (var i = 0; i < lists.length; i++) {
4790        if (lists[i].classList.contains("navPages-list--user")) continue;
4791        if (lists[i].closest(".navPage-subMenu")) continue;
4792        var r = lists[i].getBoundingClientRect();
4793        if (r.width > 0 && r.height > 0) return lists[i];
4794      }
4795      return null;
4796    }
4797
4798    /* The visible CONNECT top-level action */
4799    function findConnect(list) {
4800      var actions = list.querySelectorAll(".navPages-action");
4801      for (var i = 0; i < actions.length; i++) {
4802        var a = actions[i];
4803        if (a.closest(".navPage-subMenu")) continue;
4804        var t = (a.textContent || "").replace(/\s+/g, " ").trim().toLowerCase();
4805        if (t !== "connect") continue;
4806        var r = a.getBoundingClientRect();
4807        if (r.width > 0 && r.height > 0) return a;
4808      }
4809      return null;
4810    }
4811
4812    /* Real visual edges. The previous version measured only the zone
4813       wrappers; if the theme constrained the logo container, the 62px logo
4814       image overflowed it and the clamp cleared a phantom edge while the
4815       visual logo kept extending under PROTECT. Now every candidate element
4816       is measured, including the logo image itself, and the widest wins. */
4817    function leftBoundary() {
4818      var edge = 0;
4819      var candidates = header.querySelectorAll(
4820        ".jc-header__zone--left, .jc-header__logo, .jc-header__logo img, .header-logo-image"
4821      );
4822      for (var i = 0; i < candidates.length; i++) {
4823        var r = candidates[i].getBoundingClientRect();
4824        if (r.width > 0 && r.right > edge) edge = r.right;
4825      }
4826      return edge;
4827    }
4828
4829    function rightBoundary() {
4830      var edge = window.innerWidth;
4831      var candidates = header.querySelectorAll(
4832        ".jc-header__zone--right, .jc-header__searchBar, .jc-header__actions"
4833      );
4834      for (var i = 0; i < candidates.length; i++) {
4835        var r = candidates[i].getBoundingClientRect();
4836        if (r.width > 0 && r.left < edge) edge = r.left;
4837      }
4838      return edge;
4839    }
4840
4841    function apply() {
4842      /* Never fight Page Builder's menu editing mode */
4843      if (document.body.classList.contains("editing-menu-widgets")) return;
4844
4845      var list = getList();
4846      if (!list) return;
4847
4848      if (!isDesktop()) {
4849        list.style.marginLeft = "";
4850        return;
4851      }
4852
4853      list.style.marginLeft = "0px";
4854
4855      var connect = findConnect(list);
4856      if (!connect) {
4857        list.style.marginLeft = "";
4858        return;
4859      }
4860
4861      var target = window.innerWidth / 2;
4862      var m = 0;
4863      var i;
4864
4865      /* Center CONNECT: measure, correct, repeat. Converges regardless of
4866         whether the theme centers the nav with flex, margins, or absolute
4867         positioning, because each pass corrects the remaining error. */
4868      for (i = 0; i < 6; i++) {
4869        var cr = connect.getBoundingClientRect();
4870        var err = target - (cr.left + cr.width / 2);
4871        if (Math.abs(err) < 0.5) break;
4872        m += err;
4873        list.style.marginLeft = m + "px";
4874      }
4875
4876      /* Collision clamp: pull the nav back inside the free corridor between
4877         the visual logo and the utility icons. */
4878      var minLeft = leftBoundary() + CLEARANCE;
4879      var maxRight = rightBoundary() - CLEARANCE;
4880
4881      for (i = 0; i < 20; i++) {
4882        var lr = list.getBoundingClientRect();
4883        if (lr.left < minLeft - 0.5) {
4884          m += (minLeft - lr.left);
4885          list.style.marginLeft = m + "px";
4886          continue;
4887        }
4888        if (lr.right > maxRight + 0.5) {
4889          m -= (lr.right - maxRight);
4890          list.style.marginLeft = m + "px";
4891          continue;
4892        }
4893        break;
4894      }
4895
4896      /* If the corridor is narrower than the nav itself, no shift can help;
4897         leave the theme's own layout untouched. */
4898      var fin = list.getBoundingClientRect();
4899      if (fin.left < minLeft - 1 && fin.right > maxRight + 1) {
4900        list.style.marginLeft = "";
4901      }
4902    }
4903
4904    var rafId = null;
4905    function schedule() {
4906      if (rafId) return;
4907      rafId = window.requestAnimationFrame(function () {
4908        rafId = null;
4909        apply();
4910      });
4911    }
4912
4913    apply();
4914
4915    window.addEventListener("resize", schedule);
4916    window.addEventListener("load", schedule);
4917
4918    /* Saira loading changes label widths, so re-run once fonts settle */
4919    if (document.fonts && document.fonts.ready && document.fonts.ready.then) {
4920      document.fonts.ready.then(schedule);
4921    }
4922
4923    /* Slow logo image or late theme JS can change header geometry after
4924       DOMContentLoaded; re-run a couple of times and track the logo image
4925       load directly. */
4926    window.setTimeout(schedule, 300);
4927    window.setTimeout(schedule, 1200);
4928
4929    var logoImg = header.querySelector(".jc-header__logo img, .header-logo-image");
4930    if (logoImg && !logoImg.complete) {
4931      logoImg.addEventListener("load", schedule);
4932    }
4933
4934    if (typeof ResizeObserver !== "undefined") {
4935      var ro = new ResizeObserver(schedule);
4936      ro.observe(header);
4937    }
4938  });
4939})();
4940</script>
4940
4941
4942<script>
4943/* =============================================================================
4944   JC DESKTOP STICKY HEADER — scrolled-state shadow only
4945   Desktop only (min-width: 1025px). The header itself is made position: sticky
4946   in CSS (no fixed positioning, no cloned header, no body padding, so there is
4947   no layout shift). This script does one thing: toggle a .jc-stuck class once
4948   the header is actually pinned to the top, so the shadow fades in on scroll
4949   and disappears at the very top. Mobile drawer and everything else untouched.
4950============================================================================= */
4951(function () {
4952  function ready(cb) {
4953    if (document.readyState !== "loading") { cb(); }
4954    else { document.addEventListener("DOMContentLoaded", cb); }
4955  }
4956
4957  ready(function () {
4958    var header = document.getElementById("dinosaur_header");
4959    if (!header) return;
4960    if (header.dataset.jcStickyInit === "true") return;
4961    header.dataset.jcStickyInit = "true";
4962
4963    function isDesktop() { return window.innerWidth >= 1025; }
4964
4965    function update() {
4966      if (!isDesktop()) { header.classList.remove("jc-stuck"); return; }
4967
4968      var y = window.pageYOffset || document.documentElement.scrollTop || 0;
4969      var top = header.getBoundingClientRect().top;
4970
4971      /* Pinned = scrolled at all AND the header's top edge has reached the
4972         viewport top. The scroll check keeps the shadow off at rest even when
4973         no promo banner sits above the header. */
4974      if (y > 0 && top <= 0.5) {
4975        header.classList.add("jc-stuck");
4976      } else {
4977        header.classList.remove("jc-stuck");
4978      }
4979    }
4980
4981    var ticking = false;
4982    function onScroll() {
4983      if (ticking) return;
4984      ticking = true;
4985      window.requestAnimationFrame(function () {
4986        ticking = false;
4987        update();
4988      });
4989    }
4990
4991    update();
4992    window.addEventListener("scroll", onScroll, { passive: true });
4993    window.addEventListener("resize", onScroll);
4994    window.addEventListener("load", update);
4995    window.addEventListener("pageshow", update);
4996  });
4997})();
4998</script>
4998
4999
5000<style>
5001#dinosaur_header.jc-header button.navPages-action-toggle,
5002#dinosaur_header.jc-header button.navPages-action-toggle-desktop,
5003#dinosaur_header.jc-header button._hideToggle,
5004#dinosaur_header.jc-header button._hideToggleFirst {
5005    margin: 0;
5006    padding: 0;
5007    border: 0;
5008    border-radius: 0;
5009    background: transparent;
5010    color: inherit;
5011    font: inherit;
5012    line-height: inherit;
5013    text-align: inherit;
5014    text-transform: inherit;
5015    appearance: none;
5016    -webkit-appearance: none;
5017    box-shadow: none;
5018    cursor: pointer;
5019    -webkit-tap-highlight-color: transparent;
5020}
5021
5022#dinosaur_header.jc-header button.navPages-action-toggle:focus-visible,
5023#dinosaur_header.jc-header button.navPages-action-toggle-desktop:focus-visible,
5024#dinosaur_header.jc-header button._hideToggle:focus-visible,
5025#dinosaur_header.jc-header button._hideToggleFirst:focus-visible {
5026    outline: 2px solid #FF8F1C;
5027    outline-offset: 3px;
5028}
5029</style>
5030
5031<script>
5032/* =============================================================================
5033   JUGGERNAUT CASE — MASTER NAV BADGE CONTROL
5034   Desktop + mobile.
5035
5036   THIS IS THE ONLY BADGE LIST YOU NEED TO EDIT.
5037
5038   Format:
5039     'Exact menu text': 'BADGE TEXT'
5040
5041   Removing an item from this list removes its badge everywhere controlled by
5042   this header. This script also neutralizes the older desktop data-badge
5043   pseudo-element system if an old copy is still being loaded elsewhere.
5044============================================================================= */
5045(function () {
5046  'use strict';
5047
5048  /* --------------------------------------------------------------------------
5049     EDIT BADGES HERE ONLY
5050     -------------------------------------------------------------------------- */
5051  var BADGES = {
5052  'iPhone 18 Pro Max': 'COMING SOON',
5053  'iPhone 18 Pro': 'COMING SOON',
5054  'XCover7 Pro': 'NEW',
5055  'PALS Sternum Panel': 'NEW',
5056  'Galaxy S26 Ultra': 'COMING SOON',
5057  'Galaxy S26': 'COMING SOON',
5058  'Galaxy S26 OPRTR': 'NEW'
5059  };
5060
5061  /* --------------------------------------------------------------------------
5062     DO NOT EDIT BELOW THIS LINE
5063     -------------------------------------------------------------------------- */
5064  var STYLE_ID = 'jc-master-nav-badge-styles';
5065  var BADGE_CLASS = 'jc-master-nav-badge';
5066  var BADGED_CLASS = 'jc-master-badged';
5067  var scheduled = false;
5068
5069  function injectStyles() {
5070    if (document.getElementById(STYLE_ID)) return;
5071
5072    var style = document.createElement('style');
5073
5074    style.id = STYLE_ID;
5075    style.textContent = [
5076      '.' + BADGE_CLASS + ' {',
5077      '  display: inline-block !important;',
5078      '  flex: 0 0 auto !important;',
5079      '  margin-left: 7px !important;',
5080      '  padding: 2px 6px !important;',
5081      '  background: #FF8F1C !important;',
5082      '  color: #FFFFFF !important;',
5083      '  font-family: "Saira", "Helvetica Neue", Arial, sans-serif !important;',
5084      '  font-size: 8px !important;',
5085      '  font-weight: 700 !important;',
5086      '  line-height: 1 !important;',
5087      '  letter-spacing: 0.08em !important;',
5088      '  text-transform: uppercase !important;',
5089      '  white-space: nowrap !important;',
5090      '  border-radius: 2px !important;',
5091      '  vertical-align: middle !important;',
5092      '}',
5093
5094      '.' + BADGE_CLASS + '[data-badge="COMING SOON"] {',
5095      '  background: #6D6F70 !important;',
5096      '  font-size: 7.5px !important;',
5097      '  padding: 2px 5px !important;',
5098      '}',
5099
5100      '.navPage-childList-action.' + BADGED_CLASS + ',',
5101      '.navPage-subMenu-action.' + BADGED_CLASS + ',',
5102      '.velox-mega__link-title.' + BADGED_CLASS + ' {',
5103      '  display: inline-flex !important;',
5104      '  align-items: center !important;',
5105      '}',
5106
5107      '.jc-mobile-panel-row.' + BADGED_CLASS + ' {',
5108      '  display: flex !important;',
5109      '  align-items: center !important;',
5110      '}',
5111
5112      /* Completely suppress the old desktop pseudo-element badge system. */
5113      '.navPage-childList-action[data-badge]::after,',
5114      '.navPage-subMenu-action[data-badge]::after {',
5115      '  content: none !important;',
5116      '  display: none !important;',
5117      '  width: 0 !important;',
5118      '  height: 0 !important;',
5119      '  margin: 0 !important;',
5120      '  padding: 0 !important;',
5121      '  border: 0 !important;',
5122      '  background: transparent !important;',
5123      '}',
5124
5125      /* If an old mobile badge span is injected elsewhere, never show it. */
5126      '.jc-mobile-badge {',
5127      '  display: none !important;',
5128      '}'
5129    ].join('\n');
5130
5131    document.head.appendChild(style);
5132  }
5133
5134  function getCleanText(element) {
5135    if (!element) return '';
5136
5137    var clone = element.cloneNode(true);
5138
5139    clone.querySelectorAll(
5140      '.' + BADGE_CLASS +
5141      ', .jc-mobile-badge' +
5142      ', .velox-mega__badge' +
5143      ', ._badge' +
5144      ', .badge' +
5145      ', ._new' +
5146      ', ._coming-soon' +
5147      ', svg' +
5148      ', .icon' +
5149      ', .is-srOnly' +
5150      ', .navPages-action-moreIcon'
5151    ).forEach(function (node) {
5152      node.remove();
5153    });
5154
5155    return (clone.textContent || '')
5156      .replace(/\s+/g, ' ')
5157      .trim();
5158  }
5159
5160  function neutralizeLegacyBadges() {
5161    /*
5162     * Remove legacy data-badge attributes from desktop links.
5163     *
5164     * IMPORTANT:
5165     * Do NOT leave data-badge="" on the links. The old CSS gives every
5166     * data-badge element padding/background, which is what created the small
5167     * orange dashes after every menu item.
5168     *
5169     * The CSS injected by this master controller suppresses the old ::after
5170     * badge system entirely, so if an older script tries to re-add an
5171     * attribute later, it still cannot render.
5172     */
5173    document.querySelectorAll(
5174      '.navPage-childList-action[data-badge], ' +
5175      '.navPage-subMenu-action[data-badge]'
5176    ).forEach(function (link) {
5177      link.removeAttribute('data-badge');
5178    });
5179
5180    /*
5181     * Remove any legacy mobile badge spans and mark generated mobile rows as
5182     * already processed so an older mobile badge script cannot recreate them.
5183     */
5184    document.querySelectorAll('.jc-mobile-badge').forEach(function (badge) {
5185      badge.remove();
5186    });
5187
5188    document.querySelectorAll('.jc-mobile-panel-row').forEach(function (row) {
5189      if (row.getAttribute('data-jc-badged') !== 'true') {
5190        row.setAttribute('data-jc-badged', 'true');
5191      }
5192    });
5193  }
5194
5195  function syncBadge(element) {
5196    var text = getCleanText(element);
5197    var badgeText = BADGES[text] || '';
5198    var existingBadge = element.querySelector(
5199      ':scope > .' + BADGE_CLASS
5200    );
5201
5202    if (!badgeText) {
5203      if (existingBadge) existingBadge.remove();
5204      element.classList.remove(BADGED_CLASS);
5205      return;
5206    }
5207
5208    element.classList.add(BADGED_CLASS);
5209
5210    if (!existingBadge) {
5211      existingBadge = document.createElement('span');
5212      existingBadge.className = BADGE_CLASS;
5213      element.appendChild(existingBadge);
5214    }
5215
5216    if (existingBadge.getAttribute('data-badge') !== badgeText) {
5217      existingBadge.setAttribute('data-badge', badgeText);
5218    }
5219
5220    if (existingBadge.textContent !== badgeText) {
5221      existingBadge.textContent = badgeText;
5222    }
5223  }
5224
5225  function applyBadges() {
5226    injectStyles();
5227    neutralizeLegacyBadges();
5228
5229    document.querySelectorAll(
5230      [
5231        '.navPage-childList-action',
5232        '.navPage-subMenu-action',
5233        '.velox-mega__link-title',
5234        '.jc-mobile-panel-row'
5235      ].join(', ')
5236    ).forEach(syncBadge);
5237  }
5238
5239  function scheduleApply() {
5240    if (scheduled) return;
5241
5242    scheduled = true;
5243
5244    window.requestAnimationFrame(function () {
5245      scheduled = false;
5246      applyBadges();
5247    });
5248  }
5249
5250  function init() {
5251    var header =
5252      document.getElementById('dinosaur_header') ||
5253      document.getElementById('menu');
5254
5255    if (!header) return;
5256
5257    applyBadges();
5258
5259    var observer = new MutationObserver(function () {
5260      scheduleApply();
5261    });
5262
5263    observer.observe(header, {
5264      childList: true,
5265      subtree: true,
5266      attributes: true,
5267      attributeFilter: ['data-badge']
5268    });
5269
5270    /*
5271     * Extra safeguard for any legacy script that runs when the desktop menu is
5272     * interacted with.
5273     */
5274    document.addEventListener('mouseover', scheduleApply, {
5275      passive: true
5276    });
5277
5278    window.addEventListener('pageshow', scheduleApply);
5279  }
5280
5281  if (document.readyState === 'loading') {
5282    document.addEventListener('DOMContentLoaded', init);
5283  } else {
5284    init();
5285  }
5286})();
5287</script>
5287        <div class="body" data-currency-code="USD">
5288         
5289        <div class="container">
5290            
5291<ul class="breadcrumbs">
5292            <li class="breadcrumb is-active">
5293                <a data-instantload href="https://juggernautcase.com/" class="breadcrumb-label">
5294                        <span>Home</span>
5295                </a>
5296            </li>
5297</ul>
5298<script type="application/ld+json" nonce="">
5299{
5300    "@context": "https://schema.org",
5301    "@type": "BreadcrumbList",
5302    "itemListElement": [
5303        {
5304            "@type": "ListItem",
5305            "position": 1,
5306            "name": "Home",
5307            "item": "https:\u002f\u002fjuggernautcase.com\u002f"
5308        }
5309    ]
5310}
5311</script>
5311
5312<h1 class="page-heading">About Us</h1>
5313
5314
5315<main class="page">
5316
5317    <div class="page-content page-content--centered">
5318        <div class="page-content-body">
5319            <div data-content-region="page_builder_content--global"></div>
5320            <div data-content-region="page_builder_content"><div data-layout-id="70a4b465-483c-45fd-b9a4-ff7274dae008">       <div data-sub-layout-container="010b7825-4df7-44e4-8177-9618ba9f48f6" data-layout-name="Layout">
5321    <style data-container-styling="010b7825-4df7-44e4-8177-9618ba9f48f6">
5322        [data-sub-layout-container="010b7825-4df7-44e4-8177-9618ba9f48f6"] {
5323            box-sizing: border-box;
5324            display: flex;
5325            flex-wrap: wrap;
5326            z-index: 0;
5327            position: relative;
5328            height: ;
5329            padding-top: 0px;
5330            padding-right: 0px;
5331            padding-bottom: 0px;
5332            padding-left: 0px;
5333            margin-top: 0px;
5334            margin-right: 0px;
5335            margin-bottom: 0px;
5336            margin-left: 0px;
5337            border-width: 0px;
5338            border-style: solid;
5339            border-color: #333333;
5340        }
5341
5342        [data-sub-layout-container="010b7825-4df7-44e4-8177-9618ba9f48f6"]:after {
5343            display: block;
5344            position: absolute;
5345            top: 0;
5346            left: 0;
5347            bottom: 0;
5348            right: 0;
5349            background-size: cover;
5350            z-index: auto;
5351        }
5352    </style>
5353
5354    <div data-sub-layout="526b62a5-4d2c-4b56-b47f-6a6278f9407b">
5355        <style data-column-styling="526b62a5-4d2c-4b56-b47f-6a6278f9407b">
5356            [data-sub-layout="526b62a5-4d2c-4b56-b47f-6a6278f9407b"] {
5357                display: flex;
5358                flex-direction: column;
5359                box-sizing: border-box;
5360                flex-basis: 100%;
5361                max-width: 100%;
5362                z-index: 0;
5363                position: relative;
5364                height: ;
5365                padding-top: 0px;
5366                padding-right: 10.5px;
5367                padding-bottom: 0px;
5368                padding-left: 10.5px;
5369                margin-top: 0px;
5370                margin-right: 0px;
5371                margin-bottom: 0px;
5372                margin-left: 0px;
5373                border-width: 0px;
5374                border-style: solid;
5375                border-color: #333333;
5376                justify-content: center;
5377            }
5378            [data-sub-layout="526b62a5-4d2c-4b56-b47f-6a6278f9407b"]:after {
5379                display: block;
5380                position: absolute;
5381                top: 0;
5382                left: 0;
5383                bottom: 0;
5384                right: 0;
5385                background-size: cover;
5386                z-index: auto;
5387            }
5388            @media only screen and (max-width: 700px) {
5389                [data-sub-layout="526b62a5-4d2c-4b56-b47f-6a6278f9407b"] {
5390                    flex-basis: 100%;
5391                    max-width: 100%;
5392                }
5393            }
5394        </style>
5395        <div data-widget-id="8daa7e87-b3c5-47b6-87b2-fa796f717f49" data-placement-id="3db0fff3-b70a-4c18-b170-745ca8159193" data-placement-status="ACTIVE"><link rel="preconnect" href="https://fonts.googleapis.com">
5396<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
5397<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800;900&amp;display=swap">
5398
5399<div class="jc-about-clean">
5400  <style>
5401    .page-heading, .page-title, h1.page-heading, h1.page-title,
5402    .breadcrumbs, .breadcrumb, nav.breadcrumbs,
5403    .page > .container > .page-heading, .page-content > .page-heading,
5404    .body > .container > .page-heading {
5405      display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important;
5406    }
5407
5408    .jc-about-clean, .jc-about-clean *, .jc-about-clean *::before, .jc-about-clean *::after {
5409      font-family: 'Saira', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
5410      box-sizing: border-box !important;
5411    }
5412
5413    .jc-about-clean {
5414      --o: #FF8F1C;
5415      --ink: #1F2024;
5416      --body: #5F6368;
5417      --muted: #6D6F70;
5418      --idle: #B6BBC0;
5419      --grey: #F4F4F4;
5420      --white: #FFFFFF;
5421      --wrap: 1280px;
5422      --pad: clamp(52px, 5.5vw, 88px);
5423      --ease: cubic-bezier(.2, .8, .2, 1);
5424      --shadow-card: 0 1px 3px rgba(0,0,0,.04), 0 18px 42px rgba(0,0,0,.07);
5425      --shadow-hover: 0 24px 56px rgba(0,0,0,.10);
5426      --shadow-feature: 0 34px 80px rgba(0,0,0,.12);
5427
5428      width: 100%; max-width: 100%; overflow-x: hidden;
5429      background: var(--white); color: var(--body);
5430      font-size: 16px; line-height: 1.7;
5431    }
5432
5433    .jc-about-clean img { max-width: 100%; display: block; }
5434    .jc-about-clean a { text-decoration: none; color: inherit; }
5435    .jc-about-clean p, .jc-about-clean h1, .jc-about-clean h2, .jc-about-clean h3 { margin-top: 0; }
5436    .jc-about-clean button { font: inherit; -webkit-tap-highlight-color: transparent; }
5437
5438    .jc-about-clean-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
5439
5440    .jc-about-clean-eyebrow { display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: .26em; text-transform: uppercase; color: var(--o); margin: 0 0 16px; line-height: 1.2; }
5441    .jc-about-clean-h1 { font-weight: 900; font-size: clamp(40px, 5vw, 66px); line-height: 1.0; letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); margin: 0 0 24px; }
5442    .jc-about-clean-h1 span { display: block; }
5443    .jc-about-clean-h2 { font-weight: 900; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; }
5444    .jc-about-clean-h3 { font-weight: 900; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
5445
5446    .jc-about-clean-lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--body) !important; font-weight: 400 !important; margin: 0; max-width: 700px; }
5447    .jc-about-clean-hero-copy { display: flex; flex-direction: column; gap: 14px; max-width: 700px; }
5448    .jc-about-clean-text { font-size: 16px; line-height: 1.7; color: var(--body); margin: 0 0 14px; font-weight: 400; }
5449    .jc-about-clean-text:last-child { margin-bottom: 0; }
5450
5451    .jc-about-clean-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 26px; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; border: 2px solid var(--o); line-height: 1; cursor: pointer; text-align: center; background: var(--o); color: var(--ink) !important; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
5452    .jc-about-clean-btn:hover, .jc-about-clean-btn:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white) !important; transform: translateY(-2px); outline: none; }
5453    .jc-about-clean-btn:active { transform: translateY(0); }
5454
5455    .jc-about-clean-section { padding: var(--pad) 0; }
5456    .jc-about-clean-grey { background: var(--grey); }
5457    .jc-about-clean-head { text-align: center; max-width: 880px; margin: 0 auto clamp(30px, 4vw, 48px); }
5458    .jc-about-clean-head .jc-about-clean-text { margin-left: auto; margin-right: auto; max-width: 780px; }
5459
5460    /* REVEAL (containers only) */
5461    .jc-about-reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
5462    .jc-about-reveal.is-visible { opacity: 1; transform: translateY(0); }
5463
5464    /* HERO */
5465    .jc-about-clean-hero { background: var(--white); padding: clamp(56px, 6.5vw, 90px) 0 clamp(44px, 5vw, 60px); }
5466    .jc-about-clean-hero-row { display: flex; flex-wrap: wrap; gap: clamp(34px, 5vw, 64px); align-items: center; }
5467    .jc-about-clean-hero-text { flex: 1 1 460px; min-width: 0; }
5468    .jc-about-clean-hero-media { flex: 1 1 420px; min-width: 0; aspect-ratio: 4 / 3; background: var(--grey); overflow: hidden; box-shadow: var(--shadow-feature); }
5469    .jc-about-clean-hero-media img { width: 100%; height: 100%; object-fit: cover; }
5470
5471    /* STATS */
5472    .jc-about-clean-stats-row { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 42px); max-width: 980px; margin: 0 auto; }
5473    .jc-about-clean-stat { flex: 1 1 200px; min-width: 0; text-align: center; }
5474    .jc-about-clean-stat-num { font-weight: 900; font-size: clamp(34px, 3.8vw, 48px); line-height: 1; letter-spacing: -.02em; color: var(--ink); margin: 0 0 9px; }
5475    .jc-about-clean-stat-label { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0; }
5476
5477    /* STORY */
5478    .jc-about-clean-story-row { max-width: 1040px; margin: 0 auto; }
5479    .jc-about-clean-story-head { margin: 0 0 clamp(24px, 3.5vw, 36px); }
5480    .jc-about-clean-story-body { max-width: 980px; }
5481    .jc-about-clean-story-body .jc-about-clean-text { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: var(--body); margin-bottom: clamp(16px, 2.2vw, 24px); }
5482
5483    /* ============ TIMELINE (carousel · enlarged tile + horizontal year nav below) ============ */
5484    .jc-about-clean-tl-wrap { width: min(100% - 40px, 1560px); margin: 0 auto; }
5485
5486    .jc-about-clean-tl-stage { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px); align-items: stretch; outline: none; }
5487    .jc-about-clean-tl-stage:focus-visible { outline: 2px solid var(--o); outline-offset: 6px; }
5488
5489    .jc-about-clean-tl-frame { position: relative; flex: 1 1 auto; min-width: 0; padding: 0 clamp(54px, 4.6vw, 70px); }
5490    .jc-about-clean-tl-viewport { position: relative; width: 100%; }
5491
5492    /* Background stack layers (subtle, empty, no text) */
5493    .jc-about-clean-tl-stack { position: absolute; left: 50%; top: 0; width: 100%; height: 100%; background: var(--white); box-shadow: var(--shadow-card); pointer-events: none; }
5494    .jc-about-clean-tl-stack-one { transform: translateX(-50%) translateY(16px) scale(.98); opacity: .20; z-index: 1; }
5495    .jc-about-clean-tl-stack-two { transform: translateX(-50%) translateY(30px) scale(.96); opacity: .10; z-index: 0; }
5496
5497    .jc-about-clean-tl-card { position: absolute; top: 0; left: 0; width: 100%; z-index: 2; display: flex; min-width: 0; background: var(--white); box-shadow: var(--shadow-feature); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px) scale(.99); transition: opacity .34s var(--ease), transform .34s var(--ease), visibility .34s var(--ease); }
5498    .jc-about-clean-tl-card.is-active { position: relative; top: auto; left: auto; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
5499
5500    /* Image fills its column at full size, no crop, no letterbox background */
5501    .jc-about-clean-tl-media { flex: 0 0 56%; min-width: 0; background: var(--white); display: flex; align-items: center; justify-content: center; overflow: hidden; }
5502    .jc-about-clean-tl-media img { width: 100%; height: auto; object-fit: contain; object-position: center center; }
5503
5504    .jc-about-clean-tl-content { flex: 1 1 44%; min-width: 0; padding: clamp(34px, 3.8vw, 60px); display: flex; flex-direction: column; justify-content: center; background: var(--white); }
5505    .jc-about-clean-tl-year { font-weight: 900; font-size: clamp(58px, 6.4vw, 92px); line-height: .9; letter-spacing: -.02em; color: var(--o); margin: 0 0 14px; }
5506    .jc-about-clean-tl-prod { font-style: italic; font-weight: 600; font-size: clamp(16px, 1.3vw, 18px); color: var(--body); margin: 0 0 12px; }
5507    .jc-about-clean-tl-title { font-weight: 900; font-size: clamp(26px, 2.7vw, 36px); line-height: 1.08; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
5508    .jc-about-clean-tl-copy { font-size: clamp(16px, 1.3vw, 17px); line-height: 1.65; color: var(--body); margin: 0; max-width: 52ch; }
5509
5510    /* Horizontal year nav (below the tile) */
5511    .jc-about-clean-tl-rail { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: clamp(2px, .8vw, 10px); padding: 4px 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
5512    .jc-about-clean-tl-rail::-webkit-scrollbar { display: none; }
5513    .jc-about-clean-tl-date { appearance: none; -webkit-appearance: none; display: block; flex: 0 0 auto; width: auto; min-height: 44px; min-width: 44px; border: 0; background: transparent; color: var(--idle); padding: 10px 12px; text-align: center; cursor: pointer; scroll-snap-align: center; transition: color .2s var(--ease); }
5514    .jc-about-clean-tl-date span { display: block; font-size: clamp(15px, 1.25vw, 19px); font-weight: 600; letter-spacing: .02em; line-height: 1.1; }
5515    .jc-about-clean-tl-date.is-active { color: var(--o); }
5516    .jc-about-clean-tl-date.is-active span { font-weight: 800; }
5517    .jc-about-clean-tl-date:focus-visible { outline: 2px solid var(--o); outline-offset: 4px; }
5518
5519    /* Arrow controls */
5520    .jc-about-clean-tl-nav { display: contents; }
5521    .jc-about-clean-tl-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; cursor: pointer; transition: opacity .2s ease; }
5522    .jc-about-clean-tl-arrow-prev { left: 0; }
5523    .jc-about-clean-tl-arrow-next { right: 0; }
5524    .jc-about-clean-tl-arrow svg { width: 26px; height: 26px; display: block; }
5525    .jc-about-clean-tl-arrow svg path { stroke: var(--o); stroke-width: 2.5; fill: none; stroke-linecap: square; transition: stroke .2s ease; }
5526    .jc-about-clean-tl-arrow:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }
5527
5528    @media (hover: hover) {
5529      .jc-about-clean-tl-date:hover { color: var(--muted); }
5530      .jc-about-clean-tl-date.is-active:hover { color: var(--o); }
5531      .jc-about-clean-tl-arrow:hover svg path { stroke: var(--ink); }
5532    }
5533
5534    /* VIDEO */
5535    .jc-about-clean-video { position: relative; width: 100%; height: clamp(220px, 38vw, 460px); background: var(--grey); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--shadow-feature); }
5536    .jc-about-clean-video img, .jc-about-clean-video iframe, .jc-about-clean-video video { width: 100%; height: 100%; object-fit: cover; border: 0; }
5537    .jc-about-clean-play { position: relative; width: 70px; height: 70px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
5538    .jc-about-clean-play::after { content: ''; width: 0; height: 0; margin-left: 5px; border-left: 17px solid var(--o); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
5539
5540    /* CARDS */
5541    .jc-about-clean-cards { display: flex; flex-wrap: wrap; gap: 22px; }
5542    .jc-about-clean-card { flex: 1 1 calc((100% - 44px) / 3); min-width: 0; background: var(--white); padding: 32px 28px; box-shadow: var(--shadow-card); }
5543    .jc-about-clean-card-text { font-size: 15px; line-height: 1.6; color: var(--body); margin: 0; }
5544
5545    /* WHO WE SERVE */
5546    .jc-about-clean-serve { display: flex; flex-wrap: wrap; gap: 18px; }
5547    .jc-about-clean-serve-item { flex: 1 1 calc((100% - 54px) / 4); min-width: 0; background: var(--white); padding: 28px 24px; box-shadow: var(--shadow-card); }
5548    .jc-about-clean-serve-title { font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
5549    .jc-about-clean-serve-text { font-size: 14px; line-height: 1.6; color: var(--body); margin: 0; }
5550
5551    /* LARGE BANNER (full image always visible, no crop) */
5552    .jc-about-clean-banner { background: var(--white); padding: clamp(28px, 4vw, 50px) 0 0; }
5553    .jc-about-clean-banner-wrap { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
5554    .jc-about-clean-banner-media { width: 100%; background: var(--white); overflow: hidden; box-shadow: var(--shadow-feature); }
5555    .jc-about-clean-banner-media img { width: 100%; height: auto; object-fit: contain; display: block; }
5556
5557    /* USA STRIP */
5558    .jc-about-clean-usa { background: var(--white); padding: clamp(28px, 3vw, 40px) 24px clamp(20px, 2.4vw, 30px); text-align: center; }
5559    .jc-about-clean-usa-inner { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; }
5560    .jc-about-clean-usa-text { font-size: clamp(15px, 1.5vw, 19px); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin: 0; }
5561
5562    /* CTA */
5563    .jc-about-clean-cta { background: var(--white); padding: clamp(22px, 3vw, 34px) 0 var(--pad); }
5564    .jc-about-clean-cta-card { max-width: var(--wrap); margin: 0 auto; background: var(--white); padding: clamp(42px, 5vw, 64px) clamp(28px, 4vw, 56px); text-align: center; box-shadow: var(--shadow-card); overflow: hidden; }
5565    .jc-about-clean-cta-card .jc-about-clean-h2 { margin: 0 auto 16px; max-width: 820px; }
5566    .jc-about-clean-cta-card .jc-about-clean-text { width: 100%; max-width: none; margin: 0 auto 24px; font-size: clamp(15px, 1.35vw, 17px); line-height: 1.6; color: var(--body); white-space: nowrap; }
5567
5568    /* SHOP IMAGE CARDS */
5569    .jc-about-clean-cta-grid { display: flex; align-items: stretch; justify-content: center; gap: clamp(16px, 2vw, 24px); width: 100%; margin-top: 30px; }
5570    .jc-about-clean-cta-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; scroll-snap-align: start; }
5571    .jc-about-clean-cta-image { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey); padding: clamp(22px, 3vw, 38px); }
5572    .jc-about-clean-cta-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
5573    .jc-about-clean-cta-item .jc-about-clean-btn { width: 100%; min-width: 0; }
5574
5575    /* RESPONSIVE */
5576    @media (max-width: 1100px) {
5577      .jc-about-clean-serve-item { flex-basis: calc((100% - 18px) / 2); }
5578    }
5579
5580    @media (max-width: 980px) {
5581      .jc-about-clean-cta-card .jc-about-clean-text {
5582        max-width: 720px;
5583        white-space: normal;
5584      }
5585
5586      .jc-about-clean-hero-text, .jc-about-clean-hero-media { flex-basis: 100%; }
5587      .jc-about-clean-card { flex-basis: 100%; max-width: 620px; margin-left: auto; margin-right: auto; }
5588
5589      .jc-about-clean-tl-wrap { width: 100%; padding: 0 clamp(20px, 4vw, 24px); }
5590      .jc-about-clean-tl-stage { gap: 14px; }
5591      .jc-about-clean-tl-frame { padding: 0; }
5592      .jc-about-clean-tl-rail { justify-content: flex-start; gap: 4px; padding: 2px 2px 8px; }
5593      .jc-about-clean-tl-viewport { min-height: 0; }
5594      .jc-about-clean-tl-stack { display: none; }
5595      .jc-about-clean-tl-card { flex-direction: column; min-height: 0; }
5596      .jc-about-clean-tl-media { flex: 0 0 auto; width: 100%; height: auto; }
5597      .jc-about-clean-tl-media img { width: 100%; height: auto; object-fit: contain; }
5598      .jc-about-clean-tl-content { padding: clamp(24px, 5vw, 34px) clamp(20px, 5vw, 24px); text-align: left; }
5599      .jc-about-clean-tl-copy { max-width: none; }
5600
5601      .jc-about-clean-tl-nav { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
5602      .jc-about-clean-tl-arrow { position: static; transform: none; width: 56px; height: 48px; }
5603    }
5604
5605    @media (max-width: 700px) {
5606      .jc-about-clean-section { padding: clamp(46px, 11vw, 64px) 0; }
5607      .jc-about-clean-stat { flex-basis: 100%; }
5608      .jc-about-clean-card { flex-basis: 100%; }
5609      .jc-about-clean-usa-text { letter-spacing: .14em; font-size: 14px; }
5610
5611      /* Mobile swipe row: one card is featured while the next card peeks in */
5612      .jc-about-clean-cta-card { padding-left: 20px; padding-right: 20px; }
5613      .jc-about-clean-cta-grid {
5614        justify-content: flex-start;
5615        flex-wrap: nowrap;
5616        gap: 14px;
5617        width: calc(100% + 40px);
5618        margin-left: -20px;
5619        padding: 0 20px 14px;
5620        overflow-x: auto;
5621        overflow-y: hidden;
5622        scroll-snap-type: x mandatory;
5623        scroll-padding-left: 20px;
5624        overscroll-behavior-inline: contain;
5625        -webkit-overflow-scrolling: touch;
5626        scrollbar-width: none;
5627      }
5628      .jc-about-clean-cta-grid::-webkit-scrollbar { display: none; }
5629      .jc-about-clean-cta-item { flex: 0 0 min(82vw, 330px); }
5630      .jc-about-clean-cta-image { aspect-ratio: 4 / 3; padding: 26px; }
5631    }
5632
5633    @media (max-width: 600px) {
5634      .jc-about-clean-serve-item { flex-basis: 100%; }
5635    }
5636
5637    @media (max-width: 540px) {
5638      .jc-about-clean-h1 { font-size: clamp(34px, 9vw, 44px); }
5639      .jc-about-clean-h2 { font-size: clamp(28px, 8vw, 38px); }
5640      .jc-about-clean-tl-content { padding: 22px 20px 28px; }
5641      .jc-about-clean-tl-year { font-size: 44px; }
5642      .jc-about-clean-tl-title { font-size: 24px; }
5643      .jc-about-clean-btn { width: 100%; min-height: 44px; padding: 11px 20px; font-size: 11px; letter-spacing: .14em; }
5644    }
5645
5646    @media (prefers-reduced-motion: reduce) {
5647      .jc-about-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
5648      .jc-about-clean-tl-card, .jc-about-clean-tl-date, .jc-about-clean-tl-arrow, .jc-about-clean-btn { transition: none !important; }
5649    }
5650  </style>
5651
5652  <!-- HERO -->
5653  <section class="jc-about-clean-hero" aria-labelledby="jc-about-main-title">
5654    <div class="jc-about-clean-wrap">
5655      <div class="jc-about-clean-hero-row">
5656        <div class="jc-about-clean-hero-text jc-about-reveal">
5657          <span class="jc-about-clean-eyebrow">About Juggernaut</span>
5658          <h1 id="jc-about-main-title" class="jc-about-clean-h1"><span>Warfighter</span><span>First</span></h1>
5659          <div class="jc-about-clean-hero-copy">
5660            <p class="jc-about-clean-lead">Our primary goal is, and always will be, to support the warfighter.</p>
5661            <p class="jc-about-clean-lead">Smart devices enhance team communication and tactical coordination through mission-critical software.</p>
5662            <p class="jc-about-clean-lead">But a smart device in a tactical environment creates its own challenges. How do you protect it from battlefield conditions? How does it stay secure and accessible? How does it stay connected for the duration of the operation?</p>
5663            <p class="jc-about-clean-lead">Juggernaut answers those challenges by protecting, mounting, and connecting mobile devices so warfighters can complete the mission.</p>
5664          </div>
5665        </div>
5666        <div class="jc-about-clean-hero-media jc-about-reveal">
5667          <img src="https://cdn11.bigcommerce.com/s-dat6f8vwhv/images/stencil/original/image-manager/about-us-hero-1-.jpg?t=1779835175" alt="Juggernaut rugged device system in the field" loading="eager">
5668        </div>
5669      </div>
5670    </div>
5671  </section>
5672
5673  <!-- STATS -->
5674  <section class="jc-about-clean-section jc-about-clean-grey">
5675    <div class="jc-about-clean-wrap">
5676      <div class="jc-about-clean-stats-row jc-about-reveal">
5677        <div class="jc-about-clean-stat">
5678          <p class="jc-about-clean-stat-num">25+</p>
5679          <p class="jc-about-clean-stat-label">Years of Product Design</p>
5680        </div>
5681        <div class="jc-about-clean-stat">
5682          <p class="jc-about-clean-stat-num">500k+</p>
5683          <p class="jc-about-clean-stat-label">Cases Fielded Around the Globe</p>
5684        </div>
5685        <div class="jc-about-clean-stat">
5686          <p class="jc-about-clean-stat-num">USA</p>
5687          <p class="jc-about-clean-stat-label">Designed, Engineered, Assembled</p>
5688        </div>
5689      </div>
5690    </div>
5691  </section>
5692
5693  <!-- OUR STORY -->
5694  <section class="jc-about-clean-section">
5695    <div class="jc-about-clean-wrap">
5696      <div class="jc-about-clean-story-row jc-about-reveal">
5697        <div class="jc-about-clean-story-head">
5698          <span class="jc-about-clean-eyebrow">Our Story</span>
5699          <h2 class="jc-about-clean-h2">Built Around the Mission.</h2>
5700        </div>
5701        <div class="jc-about-clean-story-body">
5702          <p class="jc-about-clean-text">Juggernaut began in 2000 as a product design firm focused on solving hard problems for demanding users. Our team brought together designers, engineers, and builders with one goal: create products that perform when conditions are at their worst.</p>
5703          <p class="jc-about-clean-text">As smartphones and tablets became powerful enough to run battlefield software, the need for better device protection became clear. The first Juggernaut product was built around a sealed enclosure with a tactical radio connection for the Dell Streak PDA.</p>
5704          <p class="jc-about-clean-text">As platforms and programs like ATAK, APASS, and Nett Warrior evolved, our ecosystem evolved with them. Today, our cases, mounts, and cables support elite teams across the globe.</p>
5705        </div>
5706      </div>
5707    </div>
5708  </section>
5709
5710  <!-- TIMELINE -->
5711  <!-- NOTE: timeline images below are on the LIVE CDN (s-wfkpm4ltxc). Re-upload to the rebuild CDN (s-dat6f8vwhv) and swap before launch. -->
5712  <section class="jc-about-clean-section">
5713    <div class="jc-about-clean-wrap">
5714      <div class="jc-about-clean-head jc-about-reveal">
5715        <span class="jc-about-clean-eyebrow">Company History</span>
5716        <h2 class="jc-about-clean-h2">Built Since 2000.</h2>
5717        <p class="jc-about-clean-text">Each milestone reflects a real field problem we identified and built a solution to solve.</p>
5718      </div>
5719    </div>
5720
5721    <div class="jc-about-clean-tl-wrap">
5722      <div class="jc-about-clean-tl-stage jc-about-reveal" tabindex="0" role="group" aria-label="Company history timeline. Use left and right arrow keys to change milestones.">
5723        <div class="jc-about-clean-tl-frame">
5724          <div class="jc-about-clean-tl-viewport" aria-live="polite">
5725            <span class="jc-about-clean-tl-stack jc-about-clean-tl-stack-two" aria-hidden="true"></span>
5726            <span class="jc-about-clean-tl-stack jc-about-clean-tl-stack-one" aria-hidden="true"></span>
5727
5728            <article class="jc-about-clean-tl-card is-active" data-jc-about-tl-card="0" aria-hidden="false">
5729              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/juggernaut-founded-1200-x-900-px-.jpg?t=1781810087" alt="Juggernaut founded in Scottsdale Arizona" loading="lazy"></div>
5730              <div class="jc-about-clean-tl-content">
5731                <p class="jc-about-clean-tl-year">2000</p>
5732                <p class="jc-about-clean-tl-prod">Juggernaut Founded</p>
5733                <h3 class="jc-about-clean-tl-title">Design at the Core</h3>
5734                <p class="jc-about-clean-tl-copy">Juggernaut was founded in 2000 in Scottsdale, Arizona, as a design firm focused on creating practical products for demanding users.</p>
5735              </div>
5736            </article>
5737
5738            <article class="jc-about-clean-tl-card" data-jc-about-tl-card="1" aria-hidden="true">
5739              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/2010-1200-x-900-px-.jpg?t=1781810086" alt="Dell Streak PDA rugged case" loading="lazy"></div>
5740              <div class="jc-about-clean-tl-content">
5741                <p class="jc-about-clean-tl-year">2010</p>
5742                <p class="jc-about-clean-tl-prod">Dell STREAK 5"</p>
5743                <h3 class="jc-about-clean-tl-title">PDA Case</h3>
5744                <p class="jc-about-clean-tl-copy">Juggernaut entered the military space by building a rugged enclosure for the Dell Streak PDA, helping protect early battlefield smart-device workflows as mobile technology became part of the mission.</p>
5745              </div>
5746            </article>
5747
5748            <article class="jc-about-clean-tl-card" data-jc-about-tl-card="2" aria-hidden="true">
5749              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/atrix-eud.jpg?t=1782623155" alt="Motorola ATRIX Armor Mount" loading="lazy"></div>
5750              <div class="jc-about-clean-tl-content">
5751                <p class="jc-about-clean-tl-year">2011</p>
5752                <p class="jc-about-clean-tl-prod">Gen 1 Armor Mount</p>
5753                <h3 class="jc-about-clean-tl-title">Motorola ATRIX</h3>
5754                <p class="jc-about-clean-tl-copy">Hands-free use drove the first Armor Mount, giving users a chest-mounted way to access their device in the field.</p>
5755              </div>
5756            </article>
5757
5758            <article class="jc-about-clean-tl-card" data-jc-about-tl-card="3" aria-hidden="true">
5759              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/2012-1200-x-900-px-.jpg?t=1781810084" alt="Motorola RAZR CNC case" loading="lazy"></div>
5760              <div class="jc-about-clean-tl-content">
5761                <p class="jc-about-clean-tl-year">2012</p>
5762                <p class="jc-about-clean-tl-prod">Tethered Cable</p>
5763                <h3 class="jc-about-clean-tl-title">Motorola RAZR CNC</h3>
5764                <p class="jc-about-clean-tl-copy">Mounted device use expanded with improved Armor Mount capability and tethered cable support for power and data access.</p>
5765              </div>
5766            </article>
5767
5768            <article class="jc-about-clean-tl-card" data-jc-about-tl-card="4" aria-hidden="true">
5769              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/2013-1200-x-900-px-.jpg?t=1781810083" alt="Samsung Note 1 Juggernaut case" loading="lazy"></div>
5770              <div class="jc-about-clean-tl-content">
5771                <p class="jc-about-clean-tl-year">2013</p>
5772                <p class="jc-about-clean-tl-prod">Complete Kit Solution</p>
5773                <h3 class="jc-about-clean-tl-title">Samsung Note 1 Case</h3>
5774                <p class="jc-about-clean-tl-copy">As Samsung devices powered ATAK, APASS, and Nett Warrior systems, Juggernaut delivered rugged protection and mounting.</p>
5775              </div>
5776            </article>
5777
5778            <article class="jc-about-clean-tl-card" data-jc-about-tl-card="5" aria-hidden="true">
5779              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/2014-1200-x-900-px-.jpg?t=1781810082" alt="Galaxy S3 and S4 Juggernaut case" loading="lazy"></div>
5780              <div class="jc-about-clean-tl-content">
5781                <p class="jc-about-clean-tl-year">2014</p>
5782                <p class="jc-about-clean-tl-prod">Galaxy S3 / S4 / Tab S8.4 / Note 8</p>
5783                <h3 class="jc-about-clean-tl-title">COTS Brand Is Born</h3>
5784                <p class="jc-about-clean-tl-copy">As Samsung and iPhone smartphones and tablets became standard, Juggernaut expanded protection, mounting, and connectivity across smartphones and tablets.</p>
5785              </div>
5786            </article>
5787
5788            <article class="jc-about-clean-tl-card" data-jc-about-tl-card="6" aria-hidden="true">
5789              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/2015-1200-x-900-px-.jpg?t=1781810080" alt="Note 4 and Note 5 Quick Disconnect cable" loading="lazy"></div>
5790              <div class="jc-about-clean-tl-content">
5791                <p class="jc-about-clean-tl-year">2015</p>
5792                <p class="jc-about-clean-tl-prod">Note 4 / 5</p>
5793                <h3 class="jc-about-clean-tl-title">First QD Cable</h3>
5794                <p class="jc-about-clean-tl-copy">The Quick Disconnect cable gave users field switchable connections that enabled future-proof compatibility with a range of mission specific comms equipment.</p>
5795              </div>
5796            </article>
5797
5798            <article class="jc-about-clean-tl-card" data-jc-about-tl-card="7" aria-hidden="true">
5799              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/2016-1200-x-900-px-.jpg?t=1781810079" alt="S7 SLEEV product line" loading="lazy"></div>
5800              <div class="jc-about-clean-tl-content">
5801                <p class="jc-about-clean-tl-year">2016</p>
5802                <p class="jc-about-clean-tl-prod">S7 SLEEV</p>
5803                <h3 class="jc-about-clean-tl-title">SLEEV Line Born</h3>
5804                <p class="jc-about-clean-tl-copy">SLEEV reduced size, weight, and cost while keeping Juggernaut mounting capability.</p>
5805              </div>
5806            </article>
5807
5808            <article class="jc-about-clean-tl-card" data-jc-about-tl-card="8" aria-hidden="true">
5809              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/2017-1200-x-900-px-.jpg?t=1781810078" alt="S8 IMPCT product line" loading="lazy"></div>
5810              <div class="jc-about-clean-tl-content">
5811                <p class="jc-about-clean-tl-year">2017</p>
5812                <p class="jc-about-clean-tl-prod">S8 IMPCT</p>
5813                <h3 class="jc-about-clean-tl-title">IMPCT Line Born</h3>
5814                <p class="jc-about-clean-tl-copy">User feedback drove a lower-profile case with impact protection and mounting in a slimmer design.</p>
5815              </div>
5816            </article>
5817
5818            <article class="jc-about-clean-tl-card" data-jc-about-tl-card="9" aria-hidden="true">
5819              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/2018-1200-x-900-px-.jpg?t=1781810076" alt="Tab Active 2 EKB aviation mount" loading="lazy"></div>
5820              <div class="jc-about-clean-tl-content">
5821                <p class="jc-about-clean-tl-year">2018</p>
5822                <p class="jc-about-clean-tl-prod">Tab Active 2 EKB</p>
5823                <h3 class="jc-about-clean-tl-title">Ejection Seat Approval</h3>
5824                <p class="jc-about-clean-tl-copy">Juggernaut developed a rugged kneeboard mount for cockpit tablets, passing blast testing for aviation use.</p>
5825              </div>
5826            </article>
5827
5828            <article class="jc-about-clean-tl-card" data-jc-about-tl-card="10" aria-hidden="true">
5829              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/2022-1200-x-900-px-1-.jpg?t=1781811415" alt="OPRTR ADVNTR and ENDVR modernized case lineup" loading="lazy"></div>
5830              <div class="jc-about-clean-tl-content">
5831                <p class="jc-about-clean-tl-year">2022</p>
5832                <p class="jc-about-clean-tl-prod">OPRTR / ADVNTR / ENDVR</p>
5833                <h3 class="jc-about-clean-tl-title">Modernized Case Lineup</h3>
5834                <p class="jc-about-clean-tl-copy">OPRTR, ADVNTR, and ENDVR introduced case options built around different mission profiles.</p>
5835              </div>
5836            </article>
5837
5838            <article class="jc-about-clean-tl-card" data-jc-about-tl-card="11" aria-hidden="true">
5839              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/2024-1200-x-900-px-2-.jpg?t=1781811655" alt="VELOX ecosystem" loading="lazy"></div>
5840              <div class="jc-about-clean-tl-content">
5841                <p class="jc-about-clean-tl-year">2024</p>
5842                <p class="jc-about-clean-tl-prod">VELOX</p>
5843                <h3 class="jc-about-clean-tl-title">VELOX</h3>
5844                <p class="jc-about-clean-tl-copy">VELOX supports faster charging, provisioning, mounting, and data-ready device turnover.</p>
5845              </div>
5846            </article>
5847
5848            <article class="jc-about-clean-tl-card" data-jc-about-tl-card="12" aria-hidden="true">
5849              <div class="jc-about-clean-tl-media"><img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/2026-1200-x-900-px-1-.jpg?t=1781811417" alt="ENFRCR case introduced" loading="lazy"></div>
5850              <div class="jc-about-clean-tl-content">
5851                <p class="jc-about-clean-tl-year">2026</p>
5852                <p class="jc-about-clean-tl-prod">ENFRCR</p>
5853                <h3 class="jc-about-clean-tl-title">ENFRCR Introduced</h3>
5854                <p class="jc-about-clean-tl-copy">ENFRCR introduced a modified case platform for law enforcement, refined through ADVNTR user feedback.</p>
5855              </div>
5856            </article>
5857          </div>
5858
5859          <div class="jc-about-clean-tl-nav">
5860            <button class="jc-about-clean-tl-arrow jc-about-clean-tl-arrow-prev" t
5860ype="button" aria-label="Previous milestone">
5861              <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M13 3 L6 10 L13 17"></path></svg>
5862            </button>
5863            <button class="jc-about-clean-tl-arrow jc-about-clean-tl-arrow-next" type="button" aria-label="Next milestone">
5864              <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M7 3 L14 10 L7 17"></path></svg>
5865            </button>
5866          </div>
5867        </div>
5868
5869        <nav class="jc-about-clean-tl-rail" aria-label="Select timeline year">
5870          <button class="jc-about-clean-tl-date is-active" type="button" data-jc-about-tl-index="0"><span>2000</span></button>
5871          <button class="jc-about-clean-tl-date" type="button" data-jc-about-tl-index="1"><span>2010</span></button>
5872          <button class="jc-about-clean-tl-date" type="button" data-jc-about-tl-index="2"><span>2011</span></button>
5873          <button class="jc-about-clean-tl-date" type="button" data-jc-about-tl-index="3"><span>2012</span></button>
5874          <button class="jc-about-clean-tl-date" type="button" data-jc-about-tl-index="4"><span>2013</span></button>
5875          <button class="jc-about-clean-tl-date" type="button" data-jc-about-tl-index="5"><span>2014</span></button>
5876          <button class="jc-about-clean-tl-date" type="button" data-jc-about-tl-index="6"><span>2015</span></button>
5877          <button class="jc-about-clean-tl-date" type="button" data-jc-about-tl-index="7"><span>2016</span></button>
5878          <button class="jc-about-clean-tl-date" type="button" data-jc-about-tl-index="8"><span>2017</span></button>
5879          <button class="jc-about-clean-tl-date" type="button" data-jc-about-tl-index="9"><span>2018</span></button>
5880          <button class="jc-about-clean-tl-date" type="button" data-jc-about-tl-index="10"><span>2022</span></button>
5881          <button class="jc-about-clean-tl-date" type="button" data-jc-about-tl-index="11"><span>2024</span></button>
5882          <button class="jc-about-clean-tl-date" type="button" data-jc-about-tl-index="12"><span>2026</span></button>
5883        </nav>
5884      </div>
5885    </div>
5886  </section>
5887
5888  <!-- FIELD DESIGNED / FIELD TESTED -->
5889  <section class="jc-about-clean-section jc-about-clean-grey">
5890    <div class="jc-about-clean-wrap">
5891      <div class="jc-about-clean-head jc-about-reveal">
5892        <span class="jc-about-clean-eyebrow">Field Designed, Field Tested</span>
5893        <h2 class="jc-about-clean-h2">Built with direct user feedback.</h2>
5894        <p class="jc-about-clean-text">The hardest problems are not solved from behind a desk. We work directly with end users and defense industry partners to refine fit, function, and usability. That feedback shapes the way our cases, mounts, cables, and accessories perform in the field.</p>
5895      </div>
5896
5897      <div class="jc-about-clean-video jc-about-reveal">
5898        <img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/about-us-juggernaut.jpg?t=1785077620" alt="Juggernaut products developed through direct field testing and end-user feedback" loading="lazy" decoding="async">
5899      </div>
5900    </div>
5901  </section>
5902
5903  <!-- WHAT WE BUILD -->
5904  <section class="jc-about-clean-section">
5905    <div class="jc-about-clean-wrap">
5906      <div class="jc-about-clean-head jc-about-reveal">
5907        <span class="jc-about-clean-eyebrow">What We Build</span>
5908        <h2 class="jc-about-clean-h2">Protect. Mount. Connect.</h2>
5909        <p class="jc-about-clean-text">Our product lines are designed to work together as one system. Each piece is built to extreme testing standards and engineered to support the full device lifecycle, from carry and access to power and data.</p>
5910      </div>
5911
5912      <div class="jc-about-clean-cards jc-about-reveal">
5913        <div class="jc-about-clean-card">
5914          <h3 class="jc-about-clean-h3">Protect</h3>
5915          <p class="jc-about-clean-card-text">OPRTR and ENFRCR lead our case lineup, delivering impact protection, environmental defense, and secure integration with Juggernaut mounts and cables.</p>
5916        </div>
5917        <div class="jc-about-clean-card">
5918          <h3 class="jc-about-clean-h3">Mount</h3>
5919          <p class="jc-about-clean-card-text">Body worn, vehicle, aviation, and accessory mounts keep devices locked in place while giving users fast access when movement, visibility, and control matter.</p>
5920        </div>
5921        <div class="jc-about-clean-card">
5922          <h3 class="jc-about-clean-h3">Connect</h3>
5923          <p class="jc-about-clean-card-text">Quick Disconnect cables, rugged power and data solutions, and the VELOX ecosystem help keep devices charged, connected, and ready for the next use cycle.</p>
5924        </div>
5925      </div>
5926    </div>
5927  </section>
5928
5929  <!-- LARGE BANNER IMAGE (full image, no crop) -->
5930  <!-- NOTE: building banner below is on the LIVE CDN (s-wfkpm4ltxc). Re-upload to the rebuild CDN (s-dat6f8vwhv) and swap before launch. -->
5931  <section class="jc-about-clean-banner">
5932    <div class="jc-about-clean-banner-wrap">
5933      <div class="jc-about-clean-banner-media jc-about-reveal">
5934        <img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/about-us-banner.jpg?t=1
5934781812024" alt="Juggernaut headquarters building in Scottsdale, Arizona" loading="lazy">
5935      </div>
5936    </div>
5937  </section>
5938
5939  <!-- USA STRIP -->
5940  <section class="jc-about-clean-usa">
5941    <span class="jc-about-clean-usa-inner">
5942      <p class="jc-about-clean-usa-text">Designed, Engineered &amp; Assembled in the USA</p>
5943    </span>
5944  </section>
5945
5946
5947  <!-- WHO WE SERVE -->
5948  <section class="jc-about-clean-section jc-about-clean-grey">
5949    <div class="jc-about-clean-wrap">
5950      <div class="jc-about-clean-head jc-about-reveal">
5951        <span class="jc-about-clean-eyebrow">Who We Serve</span>
5952        <h2 class="jc-about-clean-h2">Mission-Ready Professionals</h2>
5953        <p class="jc-about-clean-text">When a device supports critical missions, failure is not an option.</p>
5954      </div>
5955
5956      <div class="jc-about-clean-serve jc-about-reveal">
5957        <div class="jc-about-clean-serve-item">
5958          <h3 class="jc-about-clean-serve-title">Military</h3>
5959          <p class="jc-about-clean-serve-text">Warfighters using ATAK, APASS, and Nett Warrior systems across dismounted, vehicle, aviation, and freefall use cases.</p>
5960        </div>
5961        <div class="jc-about-clean-serve-item">
5962          <h3 class="jc-about-clean-serve-title">Law Enforcement</h3>
5963          <p class="jc-about-clean-serve-text">Patrol officers, special response tactical teams, and federal agencies that need device protection built for long shifts and hard use.</p>
5964        </div>
5965        <div class="jc-about-clean-serve-item">
5966          <h3 class="jc-about-clean-serve-title">First Responders</h3>
5967          <p class="jc-about-clean-serve-text">EMS, fire, and search and rescue teams coordinating care, response, and communication in unpredictable conditions.</p>
5968        </div>
5969        <div class="jc-about-clean-serve-item">
5970          <h3 class="jc-about-clean-serve-title">Industry &amp; Outdoor</h3>
5971          <p class="jc-about-clean-serve-text">Field engineers, guides, trades, and outdoor professionals who carry smart devices into rough environments every day.</p>
5972        </div>
5973      </div>
5974    </div>
5975  </section>
5976
5977  <!-- FINAL CTA -->
5978  <section class="jc-about-clean-cta">
5979    <div class="jc-about-clean-wrap">
5980      <div class="jc-about-clean-cta-card jc-about-reveal">
5981        <span class="jc-about-clean-eyebrow">Get Started</span>
5982        <h2 class="jc-about-clean-h2">Build Your Kit</h2>
5983        <p class="jc-about-clean-text">Start with your device, then shop the case, mount, and cable solutions built to support it.</p>
5984
5985        <div class="jc-about-clean-cta-grid" aria-label="Shop product categories">
5986          <div class="jc-about-clean-cta-item">
5987            <a class="jc-about-clean-cta-image" href="/categories/protect.html" aria-label="Shop rugged device cases">
5988              <img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/shop-protect-oprtr-render-updated-newest.png?t=1692204446" alt="Rugged Juggernaut device case" loading="lazy">
5989            </a>
5990            <a class="jc-about-clean-btn" href="/categories/protect.html">Shop Cases</a>
5991          </div>
5992
5993          <div class="jc-about-clean-cta-item">
5994            <a class="jc-about-clean-cta-image" href="/categories/mount.html" aria-label="Shop device mounts">
5995              <img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/vm-2026.png?t=1775842596" alt="Juggernaut vehicle device mount" loading="lazy">
5996            </a>
5997            <a class="jc-about-clean-btn" href="/categories/mount.html">Shop Mounts</a>
5998          </div>
5999
6000          <div class="jc-about-clean-cta-item">
6001            <a class="jc-about-clean-cta-image" href="/categories/connect.html" aria-label="Shop cables and connectivity solutions">
6002              <img src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/connect-hubs.png?t=1746638751" alt="Juggernaut rugged power and data cable" loading="lazy">
6003            </a>
6004            <a class="jc-about-clean-btn" href="/categories/connect.html">Shop Cables</a>
6005          </div>
6006        </div>
6007      </div>
6008    </div>
6009  </section>
6010
6011  
6011<script>
6012    (function () {
6013      /*
6014       * BigCommerce may output a default page-heading H1 above this custom page.
6015       * CSS hiding alone leaves that H1 in the DOM, which can trigger SEO audit
6016       * warnings. Remove only the default H1 outside this custom component.
6017       */
6018      var defaultPageHeadings = document.querySelectorAll(
6019        '.page > .container > h1.page-heading,' +
6020        '.page-content > h1.page-heading,' +
6021        '.body > .container > h1.page-heading,' +
6022        'h1.page-title'
6023      );
6024
6025      Array.prototype.forEach.call(defaultPageHeadings, function (heading) {
6026        if (!heading.closest('.jc-about-clean')) {
6027          heading.parentNode.removeChild(heading);
6028        }
6029      });
6030
6031      var roots = document.querySelectorAll('.jc-about-clean');
6032      Array.prototype.forEach.call(roots, function (root) {
6033        if (root.getAttribute('data-jc-about-init') === '1') return;
6034        root.setAttribute('data-jc-about-init', '1');
6035
6036        var prefersReduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
6037
6038        /* TIMELINE CAROUSEL */
6039        var stage = root.querySelector('.jc-about-clean-tl-stage');
6040        var rail = root.querySelector('.jc-about-clean-tl-rail');
6041        var viewport = root.querySelector('.jc-about-clean-tl-viewport');
6042        var prevBtn = root.querySelector('.jc-about-clean-tl-arrow-prev');
6043        var nextBtn = root.querySelector('.jc-about-clean-tl-arrow-next');
6044        var dates = Array.prototype.slice.call(root.querySelectorAll('.jc-about-clean-tl-date'));
6045        var cards = Array.prototype.slice.call(root.querySelectorAll('.jc-about-clean-tl-card'));
6046
6047        if (stage && viewport && dates.length && cards.length) {
6048          var count = Math.min(dates.length, cards.length);
6049          var index = 0;
6050
6051          function setActive(nextIndex) {
6052            index = ((nextIndex % count) + count) % count; /* continuous loop */
6053
6054            for (var i = 0; i < count; i++) {
6055              var isActive = i === index;
6056              dates[i].classList.toggle('is-active', isActive);
6057              dates[i].setAttribute('aria-current', isActive ? 'true' : 'false');
6058              cards[i].classList.toggle('is-active', isActive);
6059              cards[i].setAttribute('aria-hidden', isActive ? 'false' : 'true');
6060            }
6061
6062            /* keep selected year in view when the rail overflows (mobile) */
6063            if (rail && dates[index] && rail.scrollWidth > rail.clientWidth + 4) {
6064              var d = dates[index];
6065              var target = d.offsetLeft - (rail.clientWidth / 2) + (d.offsetWidth / 2);
6066              try { rail.scrollTo({ left: target, behavior: prefersReduced ? 'auto' : 'smooth' }); }
6067              catch (e) { rail.scrollLeft = target; }
6068            }
6069          }
6070
6071          dates.forEach(function (btn, i) {
6072            btn.addEventListener('click', function () { setActive(i); });
6073          });
6074
6075          if (prevBtn) prevBtn.addEventListener('click', function () { setActive(index - 1); });
6076          if (nextBtn) nextBtn.addEventListener('click', function () { setActive(index + 1); });
6077
6078          stage.addEventListener('keydown', function (event) {
6079            if (event.key === 'ArrowLeft' || event.key === 'Left') { event.preventDefault(); setActive(index - 1); }
6080            if (event.key === 'ArrowRight' || event.key === 'Right') { event.preventDefault(); setActive(index + 1); }
6081          });
6082
6083          /* touch swipe (horizontal only, does not block vertical scrolling) */
6084          var touchX = null, touchY = null;
6085          viewport.addEventListener('touchstart', function (event) {
6086            if (event.touches.length !== 1) { touchX = null; return; }
6087            touchX = event.touches[0].clientX;
6088            touchY = event.touches[0].clientY;
6089          }, { passive: true });
6090
6091          viewport.addEventListener('touchend', function (event) {
6092            if (touchX === null) return;
6093            var dx = event.changedTouches[0].clientX - touchX;
6094            var dy = event.changedTouches[0].clientY - touchY;
6095            if (Math.abs(dx) > 44 && Math.abs(dx) > Math.abs(dy) * 1.4) {
6096              setActive(index + (dx < 0 ? 1 : -1));
6097            }
6098            touchX = null; touchY = null;
6099          }, { passive: true });
6100
6101          setActive(0);
6102        }
6103
6104        /* REVEALS */
6105        var reveals = Array.prototype.slice.call(root.querySelectorAll('.jc-about-reveal'));
6106        if (!('IntersectionObserver' in window) || prefersReduced) {
6107          reveals.forEach(function (el) { el.classList.add('is-visible'); });
6108        } else {
6109          var observer = new IntersectionObserver(function (entries) {
6110            entries.forEach(function (entry) {
6111              if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); }
6112            });
6113          }, { threshold: 0.14, rootMargin: '0px 0px -60px 0px' });
6114          reveals.forEach(function (el) { observer.observe(el); });
6115        }
6116      });
6117    })();
6118  </script>
6118
6119</div>
6120</div>
6121    </div>
6122</div>
6123
6124</div></div>
6125
6126                
6127
6128
6129            <div data-content-region="page_builder_bottom"></div>
6130            <div data-content-region="page_builder_bottom--global"></div>
6131        </div>
6132    </div>
6133</main>
6134
6135
6136        </div>
6137         
6138
6139
6140    <div id="modal" class="modal" data-reveal data-prevent-quick-search-close>
6141    <a href="#" class="modal-close" aria-label="Close" role="button">
6142        <svg class="icon"><use href="#icon-close" /></svg>
6143    </a>
6144    <div class="modal-content"></div>
6145    <div class="loadingOverlay"></div>
6146</div>
6147
6148<div id="previewModal" class="modal modal--large" data-reveal>
6149    <a href="#" class="modal-close" aria-label="Close" role="button">
6150        <svg class="icon"><use href="#icon-close" /></svg>
6151    </a>
6152    <div class="modal-content"></div>
6153    <div class="loadingOverlay"></div>
6154</div>
6155
6156<div id="popupModal" class="modal modal--large" data-reveal>
6157    <a href="#" class="modal-close" aria-label="Close" role="button">
6158        <svg class="icon"><use href="#icon-close" /></svg>
6159    </a>
6160    <div class="modal-content"></div>
6161    <div class="loadingOverlay"></div>
6162</div>
6163
6164<div class="micromodal-slide blog-post-popup" id="blogPostModal" aria-hidden="true">
6165    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
6166        <span class="loader"></span>
6167        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
6168            <header class="modal__header">
6169                <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
6170            </header>
6171            <main class="modal__body">
6172            </main>
6173        </div>
6174    </div>
6175</div>
6176    <div id="alert-modal" class="modal modal--alert modal--small" data-reveal data-prevent-quick-search-close>
6177    <div class="swal2-icon swal2-error swal2-icon-show"><span class="swal2-x-mark"><span class="swal2-x-mark-line-left"></span><span class="swal2-x-mark-line-right"></span></span></div>
6178
6179    <div class="modal-content"></div>
6180
6181    <div class="button-container"><button type="button" class="confirm button" data-reveal-close>OK</button></div>
6182</div>
6183</div>
6184
6185<div class="scrollToTop">
6186    <a href="#topOfPage" class="button button--white u-hiddenVisually" id="scrollToTopFloatingButton" title="Top of Page">
6187        <svg class="icon"><use href="#icon-keyboard-arrow-up"></use></svg>
6188    </a>
6189</div>
6190        
6191<div data-content-region="footer_before"></div>
6192<div data-content-region="footer_before--global"></div>
6193
6194<footer class="footer" role="contentinfo">
6195    <h2 class="is-srOnly">Footer Start</h2>
6196
6197    <div data-content-region="footer_top--global"></div>
6198    <section class="footer-info">
6199        <div class="container ">
6200            <div class="footer-info--list">
6201
6202                <div class="footer-info--wrapper">
6203                    <article class="footer-info--col" data-dinosaur-footer-collapsible>
6204                        <div class="_wrapper is-open" aria-hidden="true" data-dinosaur-footer-collapsible-content>
6205                            <ul class="footer-info-list">
6206                                <div data-content-region="footer_cs1--global"><div data-layout-id="40df5563-5124-4180-8c33-074352acb111">       <div data-sub-layout-container="7236f8bf-a8bb-44c4-8b9e-61299e9cc2ae" data-layout-name="Layout">
6207    <style data-container-styling="7236f8bf-a8bb-44c4-8b9e-61299e9cc2ae">
6208        [data-sub-layout-container="7236f8bf-a8bb-44c4-8b9e-61299e9cc2ae"] {
6209            box-sizing: border-box;
6210            display: flex;
6211            flex-wrap: wrap;
6212            z-index: 0;
6213            position: relative;
6214            height: ;
6215            padding-top: 0px;
6216            padding-right: 0px;
6217            padding-bottom: 0px;
6218            padding-left: 0px;
6219            margin-top: 0px;
6220            margin-right: 0px;
6221            margin-bottom: 0px;
6222            margin-left: 0px;
6223            border-width: 0px;
6224            border-style: solid;
6225            border-color: #333333;
6226        }
6227
6228        [data-sub-layout-container="7236f8bf-a8bb-44c4-8b9e-61299e9cc2ae"]:after {
6229            display: block;
6230            position: absolute;
6231            top: 0;
6232            left: 0;
6233            bottom: 0;
6234            right: 0;
6235            background-size: cover;
6236            z-index: auto;
6237        }
6238    </style>
6239
6240    <div data-sub-layout="9c0b5bf4-7422-4588-81c1-c1568231119a">
6241        <style data-column-styling="9c0b5bf4-7422-4588-81c1-c1568231119a">
6242            [data-sub-layout="9c0b5bf4-7422-4588-81c1-c1568231119a"] {
6243                display: flex;
6244                flex-direction: column;
6245                box-sizing: border-box;
6246                flex-basis: 100%;
6247                max-width: 100%;
6248                z-index: 0;
6249                position: relative;
6250                height: ;
6251                padding-top: 0px;
6252                padding-right: 10.5px;
6253                padding-bottom: 0px;
6254                padding-left: 10.5px;
6255                margin-top: 0px;
6256                margin-right: 0px;
6257                margin-bottom: 0px;
6258                margin-left: 0px;
6259                border-width: 0px;
6260                border-style: solid;
6261                border-color: #333333;
6262                justify-content: center;
6263            }
6264            [data-sub-layout="9c0b5bf4-7422-4588-81c1-c1568231119a"]:after {
6265                display: block;
6266                position: absolute;
6267                top: 0;
6268                left: 0;
6269                bottom: 0;
6270                right: 0;
6271                background-size: cover;
6272                z-index: auto;
6273            }
6274            @media only screen and (max-width: 700px) {
6275                [data-sub-layout="9c0b5bf4-7422-4588-81c1-c1568231119a"] {
6276                    flex-basis: 100%;
6277                    max-width: 100%;
6278                }
6279            }
6280        </style>
6281        <div data-widget-id="d62f3bdb-eac0-4d59-90bb-50e87a50ecf3" data-placement-id="7082801a-52c3-4509-8be9-5d91a815dd71" data-placement-status="ACTIVE"><!-- BEGIN JC FOOTER LOGO WIDGET -->
6282<div class="jc-footer-logo-widget">
6283  <a class="jc-footer-logo-link" href="/" aria-label="Juggernaut.Case homepage">
6284    <img class="jc-footer-logo-img" src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/images/stencil/original/image-manager/lower-footer-logo.png?t=1782914377" alt="Juggernaut.Case" loading="lazy">
6285  </a>
6286</div>
6287
6288<style>
6289  .jc-footer-logo-widget,
6290  .jc-footer-logo-widget * {
6291    box-sizing: border-box;
6292  }
6293
6294  .jc-footer-logo-widget {
6295    width: 100%;
6296    display: flex;
6297    align-items: center;
6298    justify-content: flex-start;
6299    background: transparent;
6300    padding: 0;
6301    margin: 0;
6302  }
6303
6304  .jc-footer-logo-link {
6305    display: inline-flex;
6306    align-items: center;
6307    justify-content: flex-start;
6308    text-decoration: none;
6309    line-height: 0;
6310  }
6311
6312  .jc-footer-logo-img {
6313    display: block;
6314    width: auto;
6315    height: clamp(70px, 5vw, 92px);
6316    max-width: 100%;
6317    object-fit: contain;
6318  }
6319
6320  @media (max-width: 900px) {
6321    .jc-footer-logo-widget {
6322      justify-content: center;
6323      text-align: center;
6324    }
6325
6326    .jc-footer-logo-link {
6327      justify-content: center;
6328    }
6329
6330    .jc-footer-logo-img {
6331      height: 70px;
6332    }
6333  }
6334
6335  @media (max-width: 520px) {
6336    .jc-footer-logo-img {
6337      height: 60px;
6338    }
6339  }
6340</style>
6341<!-- END JC FOOTER LOGO WIDGET -->
6342</div>
6343    </div>
6344</div>
6345
6346</div></div>
6347                            </ul>
6348                        </div>
6349                    </article>
6350
6351                        <article class="footer-info--col" data-dinosaur-footer-collapsible>
6352                                <h3 class="footer-info-heading">
6353                                    <a href="#" aria-expanded="false" data-dinosaur-footer-collapsible-handler>
6354                                        INFO
6355                                        <span class="footer-info--toggle u-hideDesktop">
6356    <svg class="icon" data-close>
6357        <use href="#icon-minus"></use>
6358    </svg>
6359    <svg class="icon is-open" data-open>
6360        <use href="#icon-add"></use>
6361    </svg>
6362</span>
6363                                    </a>
6364                                </h3>
6365                            <div class="_wrapper " aria-hidden="true" data-dinosaur-footer-collapsible-content>
6366                                <div data-content-region="footer_below_col4--global"><div data-layout-id="22278086-913f-4304-ba8a-e08abc0559f1">       <div data-sub-layout-container="bbb5e1cc-036a-441a-8080-219265a2362b" data-layout-name="Layout">
6367    <style data-container-styling="bbb5e1cc-036a-441a-8080-219265a2362b">
6368        [data-sub-layout-container="bbb5e1cc-036a-441a-8080-219265a2362b"] {
6369            box-sizing: border-box;
6370            display: flex;
6371            flex-wrap: wrap;
6372            z-index: 0;
6373            position: relative;
6374            height: ;
6375            padding-top: 0px;
6376            padding-right: 0px;
6377            padding-bottom: 0px;
6378            padding-left: 0px;
6379            margin-top: 0px;
6380            margin-right: 0px;
6381            margin-bottom: 0px;
6382            margin-left: 0px;
6383            border-width: 0px;
6384            border-style: solid;
6385            border-color: #333333;
6386        }
6387
6388        [data-sub-layout-container="bbb5e1cc-036a-441a-8080-219265a2362b"]:after {
6389            display: block;
6390            position: absolute;
6391            top: 0;
6392            left: 0;
6393            bottom: 0;
6394            right: 0;
6395            background-size: cover;
6396            z-index: auto;
6397        }
6398    </style>
6399
6400    <div data-sub-layout="9bcc81bb-61f9-4bc2-8fd9-3efd4bfe1138">
6401        <style data-column-styling="9bcc81bb-61f9-4bc2-8fd9-3efd4bfe1138">
6402            [data-sub-layout="9bcc81bb-61f9-4bc2-8fd9-3efd4bfe1138"] {
6403                display: flex;
6404                flex-direction: column;
6405                box-sizing: border-box;
6406                flex-basis: 100%;
6407                max-width: 100%;
6408                z-index: 0;
6409                position: relative;
6410                height: ;
6411                padding-top: 0px;
6412                padding-right: 10.5px;
6413                padding-bottom: 0px;
6414                padding-left: 10.5px;
6415                margin-top: 0px;
6416                margin-right: 0px;
6417                margin-bottom: 0px;
6418                margin-left: 0px;
6419                border-width: 0px;
6420                border-style: solid;
6421                border-color: #333333;
6422                justify-content: center;
6423            }
6424            [data-sub-layout="9bcc81bb-61f9-4bc2-8fd9-3efd4bfe1138"]:after {
6425                display: block;
6426                position: absolute;
6427                top: 0;
6428                left: 0;
6429                bottom: 0;
6430                right: 0;
6431                background-size: cover;
6432                z-index: auto;
6433            }
6434            @media only screen and (max-width: 700px) {
6435                [data-sub-layout="9bcc81bb-61f9-4bc2-8fd9-3efd4bfe1138"] {
6436                    flex-basis: 100%;
6437                    max-width: 100%;
6438                }
6439            }
6440        </style>
6441        <div data-widget-id="1bfbcd37-f780-488a-a8a5-a47cad7267f6" data-placement-id="a5a4e498-40a9-4694-9688-fc06dd9f370b" data-placement-status="ACTIVE"><style>
6442@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800&display=swap');
6443
6444.jc-footer-section,
6445.jc-footer-section *,
6446.footer,
6447.footer * {
6448  font-family: "Saira", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
6449}
6450
6451.jc-footer-section {
6452  display: flex;
6453  flex-direction: column;
6454  gap: 12px;
6455}
6456
6457.jc-footer-section a {
6458  color: #6D6F70;
6459  text-decoration: none;
6460  font-size: 15px;
6461  line-height: 1.4;
6462  transition: color 0.2s ease;
6463}
6464
6465.jc-footer-section a:hover,
6466.jc-footer-section a:focus-visible {
6467  color: #7A7A7A;
6468  outline: none;
6469}
6470
6471@media (max-width: 768px) {
6472  .jc-footer-section {
6473    gap: 10px;
6474  }
6475
6476  .jc-footer-section a {
6477    font-size: 14px;
6478  }
6479}
6480</style>
6481
6482<div class="jc-footer-section">
6483  <a href="/about-us/">About Us</a>
6484  <a href="/success-stories">Success Stories</a>
6485  <a href="/pages/events.html">Events</a>
6486  <a href="/careers/">Careers</a>
6487  <a href="/patent-info/">Patent Information</a>
6488  <a href="/FAQs">FAQs</a>
6489</div>
6490</div>
6491    </div>
6492</div>
6493
6494</div></div>
6495                            </div>
6496                        </article>
6497
6498                        <article class="footer-info--col" data-dinosaur-footer-collapsible>
6499                                <h3 class="footer-info-heading">
6500                                    <a href="#" aria-expanded="false" data-dinosaur-footer-collapsible-handler>
6501                                        SUPPORT
6502                                        <span class="footer-info--toggle u-hideDesktop">
6503    <svg class="icon" data-close>
6504        <use href="#icon-minus"></use>
6505    </svg>
6506    <svg class="icon is-open" data-open>
6507        <use href="#icon-add"></use>
6508    </svg>
6509</span>
6510                                    </a>
6511                                </h3>
6512                            <div class="_wrapper " aria-hidden="true" data-dinosaur-footer-collapsible-content>
6513                                <div data-content-region="footer_below_col2--global"><div data-layout-id="c8c74615-4f26-4510-9a3f-6e0fc6b2d29f">       <div data-sub-layout-container="497891a3-629c-4b92-8734-8ab5a07bcd80" data-layout-name="Layout">
6514    <style data-container-styling="497891a3-629c-4b92-8734-8ab5a07bcd80">
6515        [data-sub-layout-container="497891a3-629c-4b92-8734-8ab5a07bcd80"] {
6516            box-sizing: border-box;
6517            display: flex;
6518            flex-wrap: wrap;
6519            z-index: 0;
6520            position: relative;
6521            height: ;
6522            padding-top: 0px;
6523            padding-right: 0px;
6524            padding-bottom: 0px;
6525            padding-left: 0px;
6526            margin-top: 0px;
6527            margin-right: 0px;
6528            margin-bottom: 0px;
6529            margin-left: 0px;
6530            border-width: 0px;
6531            border-style: solid;
6532            border-color: #333333;
6533        }
6534
6535        [data-sub-layout-container="497891a3-629c-4b92-8734-8ab5a07bcd80"]:after {
6536            display: block;
6537            position: absolute;
6538            top: 0;
6539            left: 0;
6540            bottom: 0;
6541            right: 0;
6542            background-size: cover;
6543            z-index: auto;
6544        }
6545    </style>
6546
6547    <div data-sub-layout="751bc030-1bce-49db-8b45-16cad9671e5f">
6548        <style data-column-styling="751bc030-1bce-49db-8b45-16cad9671e5f">
6549            [data-sub-layout="751bc030-1bce-49db-8b45-16cad9671e5f"] {
6550                display: flex;
6551                flex-direction: column;
6552                box-sizing: border-box;
6553                flex-basis: 100%;
6554                max-width: 100%;
6555                z-index: 0;
6556                position: relative;
6557                height: ;
6558                padding-top: 0px;
6559                padding-right: 10.5px;
6560                padding-bottom: 0px;
6561                padding-left: 10.5px;
6562                margin-top: 0px;
6563                margin-right: 0px;
6564                margin-bottom: 0px;
6565                margin-left: 0px;
6566                border-width: 0px;
6567                border-style: solid;
6568                border-color: #333333;
6569                justify-content: center;
6570            }
6571            [data-sub-layout="751bc030-1bce-49db-8b45-16cad9671e5f"]:after {
6572                display: block;
6573                position: absolute;
6574                top: 0;
6575                left: 0;
6576                bottom: 0;
6577                right: 0;
6578                background-size: cover;
6579                z-index: auto;
6580            }
6581            @media only screen and (max-width: 700px) {
6582                [data-sub-layout="751bc030-1bce-49db-8b45-16cad9671e5f"] {
6583                    flex-basis: 100%;
6584                    max-width: 100%;
6585                }
6586            }
6587        </style>
6588        <div data-widget-id="f3280524-03d3-4d1d-b9d6-e8ca8d078941" data-placement-id="5835ee36-8dd9-4f95-9d47-75bd07fe2fa2" data-placement-status="ACTIVE"><style>
6589@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800&display=swap');
6590
6591.jc-footer-section,
6592.jc-footer-section *,
6593.footer,
6594.footer * {
6595  font-family: "Saira", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
6596}
6597
6598.jc-footer-section {
6599  display: flex;
6600  flex-direction: column;
6601  gap: 12px;
6602}
6603
6604.jc-footer-section a {
6605  color: #6D6F70;
6606  text-decoration: none;
6607  font-size: 15px;
6608  line-height: 1.4;
6609  transition: color 0.2s ease;
6610}
6611
6612.jc-footer-section a:hover,
6613.jc-footer-section a:focus-visible {
6614  color: #7A7A7A;
6615  outline: none;
6616}
6617
6618@media (max-width: 768px) {
6619  .jc-footer-section {
6620    gap: 10px;
6621  }
6622
6623  .jc-footer-section a {
6624    font-size: 14px;
6625  }
6626}
6627</style>
6628
6629<div class="jc-footer-section">
6630  <a href="https://juggernaut-case.frontkb.com/en" target="_blank" rel="noopener noreferrer">
6631    Contact Us
6632  </a>
6633
6634  <a href="/product-instructions/">Product Instructions</a>
6635  <a href="/discounts/">Discounts</a>
6636  <a href="/pages/partners.html">Partners and Resellers</a>
6637  <a href="/device-compatibility/">Device Compatibility</a>
6638  <a href="/terms-and-conditions/">Terms &amp; Conditions</a>
6639</div>
6640</div>
6641    </div>
6642</div>
6643
6644</div></div>
6645                            </div>
6646                        </article>
6647
6648                        <article class="footer-info--col" data-dinosaur-footer-collapsible>
6649                            <h3 class="footer-info-heading">
6650                                <a href="#" aria-expanded="false" data-dinosaur-footer-collapsible-handler>
6651                                    PRODUCTS
6652                                    <span class="footer-info--toggle u-hideDesktop">
6653    <svg class="icon" data-close>
6654        <use href="#icon-minus"></use>
6655    </svg>
6656    <svg class="icon is-open" data-open>
6657        <use href="#icon-add"></use>
6658    </svg>
6659</span>
6660                                </a>
6661                            </h3>
6662                            <div class="_wrapper " aria-hidden="true" data-dinosaur-footer-collapsible-content>
6663                                <div data-content-region="footer_below_col3--global"><div data-layout-id="6e8c79a9-65d6-420f-817c-d618a7a1113f">       <div data-sub-layout-container="d51ed9fc-f1e5-4267-9c26-d1d262b1c0e3" data-layout-name="Layout">
6664    <style data-container-styling="d51ed9fc-f1e5-4267-9c26-d1d262b1c0e3">
6665        [data-sub-layout-container="d51ed9fc-f1e5-4267-9c26-d1d262b1c0e3"] {
6666            box-sizing: border-box;
6667            display: flex;
6668            flex-wrap: wrap;
6669            z-index: 0;
6670            position: relative;
6671            height: ;
6672            padding-top: 0px;
6673            padding-right: 0px;
6674            padding-bottom: 0px;
6675            padding-left: 0px;
6676            margin-top: 0px;
6677            margin-right: 0px;
6678            margin-bottom: 0px;
6679            margin-left: 0px;
6680            border-width: 0px;
6681            border-style: solid;
6682            border-color: #333333;
6683        }
6684
6685        [data-sub-layout-container="d51ed9fc-f1e5-4267-9c26-d1d262b1c0e3"]:after {
6686            display: block;
6687            position: absolute;
6688            top: 0;
6689            left: 0;
6690            bottom: 0;
6691            right: 0;
6692            background-size: cover;
6693            z-index: auto;
6694        }
6695    </style>
6696
6697    <div data-sub-layout="83ef6c23-5b20-40a3-bfd9-75d48573e636">
6698        <style data-column-styling="83ef6c23-5b20-40a3-bfd9-75d48573e636">
6699            [data-sub-layout="83ef6c23-5b20-40a3-bfd9-75d48573e636"] {
6700                display: flex;
6701                flex-direction: column;
6702                box-sizing: border-box;
6703                flex-basis: 100%;
6704                max-width: 100%;
6705                z-index: 0;
6706                position: relative;
6707                height: ;
6708                padding-top: 0px;
6709                padding-right: 10.5px;
6710                padding-bottom: 0px;
6711                padding-left: 10.5px;
6712                margin-top: 0px;
6713                margin-right: 0px;
6714                margin-bottom: 0px;
6715                margin-left: 0px;
6716                border-width: 0px;
6717                border-style: solid;
6718                border-color: #333333;
6719                justify-content: center;
6720            }
6721            [data-sub-layout="83ef6c23-5b20-40a3-bfd9-75d48573e636"]:after {
6722                display: block;
6723                position: absolute;
6724                top: 0;
6725                left: 0;
6726                bottom: 0;
6727                right: 0;
6728                background-size: cover;
6729                z-index: auto;
6730            }
6731            @media only screen and (max-width: 700px) {
6732                [data-sub-layout="83ef6c23-5b20-40a3-bfd9-75d48573e636"] {
6733                    flex-basis: 100%;
6734                    max-width: 100%;
6735                }
6736            }
6737        </style>
6738        <div data-widget-id="2683d3d6-976a-4aca-9c1d-9f1f9190e046" data-placement-id="b9cb0cfa-aed8-4ee9-b
67380c3-08ebdbdc7a34" data-placement-status="ACTIVE"><style>
6739.jc-footer-section {
6740  display: flex;
6741  flex-direction: column;
6742  gap: 12px;
6743  font-family: "Saira", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
6744}
6745.jc-footer-section a {
6746  font-family: inherit;
6747  color: #6D6F70;
6748  text-decoration: none;
6749  font-size: 15px;
6750  line-height: 1.4;
6751  transition: color 0.2s ease;
6752}
6753.jc-footer-section a:hover,
6754.jc-footer-section a:focus-visible {
6755  color: #FF8F1C;
6756  outline: none;
6757}
6758.jc-footer-section a:focus-visible {
6759  outline: 2px solid #FF8F1C;
6760  outline-offset: 2px;
6761}
6762.jc-sr-only {
6763  position: absolute;
6764  width: 1px;
6765  height: 1px;
6766  padding: 0;
6767  margin: -1px;
6768  overflow: hidden;
6769  clip: rect(0, 0, 0, 0);
6770  white-space: nowrap;
6771  border: 0;
6772}
6773@media (max-width: 768px) {
6774  .jc-footer-section { gap: 10px; }
6775  .jc-footer-section a { font-size: 14px; }
6776}
6777</style>
6778
6779<div class="jc-footer-section">
6780  <a href="/pages/protect.html">Protect</a>
6781  <a href="/pages/mount.html">Mount</a>
6782  <a href="/pages/connect.html">Connect</a>
6783  <a href="/velox-system-overview/">VELOX System Overview</a>
6784  <a href="/pages/partner-integrations.html">Partner Integrations</a>
6785  <a href="/testing-standards/">Testing Standards</a>
6786</div>
6787</div>
6788    </div>
6789</div>
6790
6791</div></div>
6792                            </div>
6793                        </article>
6794
6795                </div>
6796
6797                            <article class="beautify__section  beautify__newsletter">
6798        <div class="container">
6799                <h2 class="page-heading">EMAIL UPDATES</h2>
6800            <form class="form" action="https://juggernautcase.com/subscribe.php" method="post">
6801                <fieldset class="form-fieldset">
6802                    <input type="hidden" name="action" value="subscribe">
6803                    <input type="hidden" name="nl_first_name" value="bc">
6804                    <input type="hidden" name="check" value="1">
6805                    <div class="form-field">
6806                        <label class="form-label is-srOnly" for="nl_email">Email Address</label>
6807                        <input class="form-input" id="nl_email" name="nl_email" type="email" value="" placeholder="Enter Your Email">
6808                        <button class="button button-primary" type="submit" aria-label="Newsletter"><svg class="icon"><use href="#icon-arrow-submit"/></svg></button>
6809                    </div>
6810                </fieldset>
6811            </form>
6812            <div data-content-region="footer_below_newsletters--global"></div>
6813        </div>
6814    </article>
6815            </div>
6816                <ul class="socialLinks--alt socialLinks ">
6817                <li class="socialLinks-item">
6818                    <a class="icon icon--facebook" href="https://www.facebook.com/JuggCase/" target="_blank" rel="noopener" title="Facebook">
6819                        <span class="aria-description--hidden">Facebook</span>
6820                        <svg><use href="#icon-facebook" /></svg>
6821                    </a>
6822                </li>
6823                <li class="socialLinks-item">
6824                    <a class="icon icon--instagram" href="https://www.instagram.com/juggernautcase/" target="_blank" rel="noopener" title="Instagram">
6825                        <span class="aria-description--hidden">Instagram</span>
6826                        <svg><use href="#icon-instagram" /></svg>
6827                    </a>
6828                </li>
6829                <li class="socialLinks-item">
6830                    <a class="icon icon--linkedin" href="https://www.linkedin.com/company/juggernaut.case%E2%84%A2" target="_blank" rel="noopener" title="Linkedin">
6831                        <span class="aria-description--hidden">Linkedin</span>
6832                        <svg><use href="#icon-linkedin" /></svg>
6833                    </a>
6834                </li>
6835                <li class="socialLinks-item">
6836                    <a class="icon icon--youtube" href="https://www.youtube.com/@juggernautcase2000" target="_blank" rel="noopener" title="Youtube">
6837                        <span class="aria-description--hidden">Youtube</span>
6838                        <svg><use href="#icon-youtube" /></svg>
6839                    </a>
6840                </li>
6841    </ul>
6842        </div>
6843    </section>
6844    <div data-content-region="footer_below_columns--global"><div data-layout-id="53aaff50-550d-4b07-9c00-1c24390998d6">       <div data-sub-layout-container="7e223e71-208f-48cb-8530-6c4af19e9329" data-layout-name="Layout">
6845    <style data-container-styling="7e223e71-208f-48cb-8530-6c4af19e9329">
6846        [data-sub-layout-container="7e223e71-208f-48cb-8530-6c4af19e9329"] {
6847            box-sizing: border-box;
6848            display: flex;
6849            flex-wrap: wrap;
6850            z-index: 0;
6851            position: relative;
6852            height: ;
6853            padding-top: 0px;
6854            padding-right: 0px;
6855            padding-bottom: 0px;
6856            padding-left: 0px;
6857            margin-top: 0px;
6858            margin-right: 0px;
6859            margin-bottom: 0px;
6860            margin-left: 0px;
6861            border-width: 0px;
6862            border-style: solid;
6863            border-color: #333333;
6864        }
6865
6866        [data-sub-layout-container="7e223e71-208f-48cb-8530-6c4af19e9329"]:after {
6867            display: block;
6868            position: absolute;
6869            top: 0;
6870            left: 0;
6871            bottom: 0;
6872            right: 0;
6873            background-size: cover;
6874            z-index: auto;
6875        }
6876    </style>
6877
6878    <div data-sub-layout="ee807b71-8016-415e-aafc-2a6f5a6916fd">
6879        <style data-column-styling="ee807b71-8016-415e-aafc-2a6f5a6916fd">
6880            [data-sub-layout="ee807b71-8016-415e-aafc-2a6f5a6916fd"] {
6881                display: flex;
6882                flex-direction: column;
6883                box-sizing: border-box;
6884                flex-basis: 100%;
6885                max-width: 100%;
6886                z-index: 0;
6887                position: relative;
6888                height: ;
6889                padding-top: 0px;
6890                padding-right: 10.5px;
6891                padding-bottom: 0px;
6892                padding-left: 10.5px;
6893                margin-top: 0px;
6894                margin-right: 0px;
6895                margin-bottom: 0px;
6896                margin-left: 0px;
6897                border-width: 0px;
6898                border-style: solid;
6899                border-color: #333333;
6900                justify-content: center;
6901            }
6902            [data-sub-layout="ee807b71-8016-415e-aafc-2a6f5a6916fd"]:after {
6903                display: block;
6904                position: absolute;
6905                top: 0;
6906                left: 0;
6907                bottom: 0;
6908                right: 0;
6909                background-size: cover;
6910                z-index: auto;
6911            }
6912            @media only screen and (max-width: 700px) {
6913                [data-sub-layout="ee807b71-8016-415e-aafc-2a6f5a6916fd"] {
6914                    flex-basis: 100%;
6915                    max-width: 100%;
6916                }
6917            }
6918        </style>
6919        <div data-widget-id="cbaa3081-cb5b-45e4-93fc-574799fefca4" data-placement-id="d5d0f5a2-9c3d-4cc7-ba50-80397e8fc6b3" data-placement-status="ACTIVE"><!-- ========== BEGIN: JC LOWER FOOTER · RESPONSIVE LEFT-ALIGNED MOBILE / USA ONE LINE ========== -->
6920<link rel="preconnect" href="https://fonts.googleapis.com">
6921<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
6922<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Saira:wght@400;600;700;800;900&amp;display=swap">
6923
6924<style>
6925  .jc-lower-footer {
6926    width: 100%;
6927    background: transparent;
6928    padding: 12px 0;
6929    font-family: 'Saira', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
6930    box-sizing: border-box;
6931  }
6932
6933  .jc-lower-footer *,
6934  .jc-lower-footer *::before,
6935  .jc-lower-footer *::after {
6936    box-sizing: border-box;
6937    font-family: inherit !important;
6938  }
6939
6940  .jc-lower-footer__wrap {
6941    width: 100%;
6942    max-width: 1360px;
6943    margin: 0 auto;
6944    padding: 0;
6945    display: flex;
6946    align-items: center;
6947    justify-content: space-between;
6948    gap: 32px;
6949  }
6950
6951  .jc-lower-footer__left {
6952    display: flex;
6953    flex-direction: column;
6954    align-items: flex-start;
6955    justify-content: center;
6956    gap: 9px;
6957    min-width: 0;
6958  }
6959
6960  .jc-lower-footer__cards {
6961    display: flex;
6962    flex-wrap: wrap;
6963    align-items: center;
6964    justify-content: flex-start;
6965    gap: 13px;
6966  }
6967
6968  .jc-lower-footer__card {
6969    display: block;
6970    height: 22px;
6971    width: auto;
6972    flex: 0 0 auto;
6973  }
6974
6975  .jc-lower-footer__copy {
6976    margin: 0;
6977    color: #6F7277;
6978    font-size: 11px;
6979    font-weight: 500;
6980    letter-spacing: .03em;
6981    line-height: 1.4;
6982    text-align: left;
6983  }
6984
6985  .jc-lower-footer__right {
6986    display: flex;
6987    align-items: center;
6988    justify-content: flex-end;
6989    gap: 12px;
6990    min-width: 0;
6991  }
6992
6993  .jc-lower-footer__flag {
6994    width: 40px;
6995    height: 25px;
6996    display: block;
6997    flex: 0 0 auto;
6998  }
6999
7000  .jc-lower-footer__usa-text {
7001    margin: 0;
7002    color: #7A7A7A;
7003    font-size: 11px;
7004    font-weight: 800;
7005    letter-spacing: .12em;
7006    line-height: 1.2;
7007    text-transform: uppercase;
7008    white-space: nowrap;
7009  }
7010
7011  @media (min-width: 1261px) {
7012    .jc-lower-footer__wrap {
7013      transform: translateX(-18px);
7014    }
7015  }
7016
7017  @media (max-width: 1260px) {
7018    .jc-lower-footer {
7019      padding-left: 40px;
7020      padding-right: 40px;
7021    }
7022
7023    .jc-lower-footer__wrap {
7024      max-width: 1180px;
7025    }
7026  }
7027
7028  @media (max-width: 720px) {
7029    .jc-lower-footer {
7030      padding: 28px 22px 18px;
7031    }
7032
7033    .jc-lower-footer__wrap {
7034      width: 100%;
7035      max-width: none;
7036      transform: none !important;
7037      flex-direction: column;
7038      align-items: flex-start;
7039      justify-content: flex-start;
7040      gap: 18px;
7041      text-align: left;
7042    }
7043
7044    .jc-lower-footer__left {
7045      width: 100%;
7046      align-items: flex-start;
7047      justify-content: flex-start;
7048      gap: 8px;
7049    }
7050
7051    .jc-lower-footer__cards {
7052      width: 100%;
7053      justify-content: flex-start;
7054      gap: 12px;
7055    }
7056
7057    .jc-lower-footer__card {
7058      height: 19px;
7059    }
7060
7061    .jc-lower-footer__copy {
7062      width: 100%;
7063      text-align: left;
7064      font-size: 10.5px;
7065      line-height: 1.35;
7066      letter-spacing: .02em;
7067    }
7068
7069    .jc-lower-footer__right {
7070      width: 100%;
7071      align-items: center;
7072      justify-content: flex-start;
7073      gap: 10px;
7074      flex-wrap: nowrap;
7075    }
7076
7077    .jc-lower-footer__flag {
7078      width: 34px;
7079      height: 21px;
7080      flex: 0 0 auto;
7081    }
7082
7083    .jc-lower-footer__usa-text {
7084      max-width: none;
7085      white-space: nowrap;
7086      text-align: left;
7087      font-size: clamp(8px, 2.1vw, 10.5px);
7088      letter-spacing: .08em;
7089      line-height: 1.2;
7090    }
7091  }
7092
7093  @media (max-width: 420px) {
7094    .jc-lower-footer {
7095      padding: 26px 20px 18px;
7096    }
7097
7098    .jc-lower-footer__cards {
7099      gap: 10px;
7100    }
7101
7102    .jc-lower-footer__card {
7103      height: 18px;
7104    }
7105
7106    .jc-lower-footer__copy {
7107      font-size: 10px;
7108    }
7109
7110    .jc-lower-footer__usa-text {
7111      max-width: none;
7112      white-space: nowrap;
7113      font-size: 8px;
7114      letter-spacing: .07em;
7115    }
7116  }
7117</style>
7118
7119<div class="jc-lower-footer">
7120  <div class="jc-lower-footer__wrap">
7121
7122    <div class="jc-lower-footer__left">
7123      <div class="jc-lower-footer__cards" aria-label="Accepted payment methods">
7124        <svg class="jc-lower-footer__card" viewBox="0 0 44 24" xmlns="http://www.w3.org/2000/svg" aria-label="Visa">
7125          <text x="22" y="17" font-family="Arial, Helvetica, sans-serif" font-weight="700" font-style="italic" font-size="16" fill="#8E8F91" text-anchor="middle" letter-spacing=".5">VISA</text>
7126        </svg>
7127
7128        <svg class="jc-lower-footer__card" viewBox="0 0 48 24" xmlns="http://www.w3.org/2000/svg" aria-label="American Express">
7129          <rect x="3" y="3" width="42" height="18" fill="none" stroke="#6E6F71" stroke-width="1"></rect>
7130          <text x="24" y="16.5" font-family="Arial, Helvetica, sans-serif" font-weight="800" font-size="9.5" fill="#8E8F91" text-anchor="middle" letter-spacing=".6">AMEX</text>
7131        </svg>
7132
7133        <svg class="jc-lower-footer__card" viewBox="0 0 66 24" xmlns="http://www.w3.org/2000/svg" aria-label="Discover">
7134          <text x="28" y="16.5" font-family="Arial, Helvetica, sans-serif" font-weight="700" font-size="9.5" fill="#8E8F91" text-anchor="middle" letter-spacing=".4">DISCOVER</text>
7135          <circle cx="57" cy="12" r="4.5" fill="#8E8F91"></circle>
7136        </svg>
7137
7138        <svg class="jc-lower-footer__card" viewBox="0 0 42 24" xmlns="http://www.w3.org/2000/svg" aria-label="Mastercard">
7139          <circle cx="16" cy="12" r="9" fill="#6E6F71"></circle>
7140          <circle cx="26" cy="12" r="9" fill="#B4B5B7" opacity=".9"></circle>
7141        </svg>
7142
7143        <svg class="jc-lower-footer__card" viewBox="0 0 50 24" xmlns="http://www.w3.org/2000/svg" aria-label="PayPal">
7144          <text x="25" y="17.5" font-family="Arial, Helvetica, sans-serif" font-weight="800" font-style="italic" font-size="14" text-anchor="middle" letter-spacing=".2">
7145            <tspan fill="#8C8D8F">Pay</tspan><tspan fill="#B4B5B7">Pal</tspan>
7146          </text>
7147        </svg>
7148      </div>
7149
7150      <p class="jc-lower-footer__copy">
7151        © <span id="jc-lower-footer-year">2026</span> Juggernaut.Case. All Rights Reserved.
7152      </p>
7153    </div>
7154
7155    <div class="jc-lower-footer__right">
7156      <svg class="jc-lower-footer__flag" viewBox="0 0 52 32" xmlns="http://www.w3.org/2000/svg" aria-label="United States flag icon">
7157        <rect width="52" height="32" fill="#2E2F32"></rect>
7158        <rect y="2.46" width="52" height="2.46" fill="#6E6F71"></rect>
7159        <rect y="7.38" width="52" height="2.46" fill="#6E6F71"></rect>
7160        <rect y="12.31" width="52" height="2.46" fill="#6E6F71"></rect>
7161        <rect y="17.23" width="52" height="2.46" fill="#6E6F71"></rect>
7162        <rect y="22.15" width="52" height="2.46" fill="#6E6F71"></rect>
7163        <rect y="27.08" width="52" height="2.46" fill="#6E6F71"></rect>
7164        <rect width="22.8" height="17.2" fill="#1F2024"></rect>
7165
7166        <g fill="#B4B5B7">
7167          <circle cx="3" cy="3" r=".55"></circle><circle cx="6.5" cy="3" r=".55"></circle><circle cx="10" cy="3" r=".55"></circle><circle cx="13.5" cy="3" r=".55"></circle><circle cx="17" cy="3" r=".55"></circle><circle cx="20.5" cy="3" r=".55"></circle>
7168          <circle cx="4.75" cy="5" r=".55"></circle><circle cx="8.25" cy="5" r=".55"></circle><circle cx="11.75" cy="5" r=".55"></circle><circle cx="15.25" cy="5" r=".55"></circle><circle cx="18.75" cy="5" r=".55"></circle>
7169          <circle cx="3" cy="7" r=".55"></circle><circle cx="6.5" cy="7" r=".55"></circle><circle cx="10" cy="7" r=".55"></circle><circle cx="13.5" cy="7" r=".55"></circle><circle cx="17" cy="7" r=".55"></circle><circle cx="20.5" cy="7" r=".55"></circle>
7170          <circle cx="4.75" cy="9" r=".55"></circle><circle cx="8.25" cy="9" r=".55"></circle><circle cx="11.75" cy="9" r=".55"></circle><circle cx="15.25" cy="9" r=".55"></circle><circle cx="18.75" cy="9" r=".55"></circle>
7171          <circle cx="3" cy="11" r=".55"></circle><circle cx="6.5" cy="11" r=".55"></circle><circle cx="10" cy="11" r=".55"></circle><circle cx="13.5" cy="11" r=".55"></circle><circle cx="17" cy="11" r=".55"></circle><circle cx="20.5" cy="11" r=".55"></circle>
7172          <circle cx="4.75" cy="13" r=".55"></circle><circle cx="8.25" cy="13" r=".55"></circle><circle cx="11.75" cy="13" r=".55"></circle><circle cx="15.25" cy="13" r=".55"></circle><circle cx="18.75" cy="13" r=".55"></circle>
7173          <circle cx="3" cy="15" r=".55"></circle><circle cx="6.5" cy="15" r=".55"></circle><circle cx="10" cy="15" r=".55"></circle><circle cx="13.5" cy="15" r=".55"></circle><circle cx="17" cy="15" r=".55"></circle><circle cx="20.5" cy="15" r=".55"></circle>
7174        </g>
7175      </svg>
7176
7177      <p class="jc-lower-footer__usa-text">
7178        Designed, Engineered &amp;
7178 Assembled in the USA
7179      </p>
7180    </div>
7181
7182  </div>
7183</div>
7184
7185<script>
7186  (function () {
7187    var year = document.getElementById('jc-lower-footer-year');
7188    if (year) {
7189      year.textContent = new Date().getFullYear();
7190    }
7191  })();
7192</script>
7192
7193<!-- ========== END: JC LOWER FOOTER · RESPONSIVE LEFT-ALIGNED MOBILE / USA ONE LINE ========== -->
7194</div>
7195    </div>
7196</div>
7197
7198</div></div>
7199    <div class="footer-below">
7200        <div class="container">
7201            <div class="footer-copyright">
7202                <div class="beautify__abovePoweredBy">
7203                    <div data-content-region="footer_above_powerby--global"></div>
7204                </div>
7205                <div class="powered-by">
7206                    <div class="_col">
7207                        <div data-content-region="footer_powered_by--global"></div>
7208                    </div>
7209                    <div data-content-region="footer_copyright--global"></div>
7210                </div>
7211            </div>
7212            <div class="footer-payments">
7213                
7214<div class="footer-payment-icons">
7215    </div>
7216        <div data-content-region="footer_payment_icons--global"></div>
7217                <div class="beautify__footerIcons">
7218    <div data-content-region="ssl_site_seal--global"></div>
7219</div>
7220            </div>
7221        </div>
7222    </div>
7223</footer>
7224<div data-content-region="footer_bottom--global"></div>
7225
7226
7227        
7227<script nonce="">window.__webpack_public_path__ = "https://cdn11.bigcommerce.com/s-wfkpm4ltxc/stencil/ad737610-69cd-013f-c1e1-2aca43d705a8/e/45debc00-98db-013f-e7cd-7608931f64d7/dist/";</script>
7227
7228        
7228<script nonce="">window.__webpack_nonce__ = "";</script>
7228
7229        
7229<script src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/stencil/ad737610-69cd-013f-c1e1-2aca43d705a8/e/45debc00-98db-013f-e7cd-7608931f64d7/dist/theme-bundle.main.js" nonce=""></script>
7229
7230        
7230<script nonce="">
7231            window.stencilBootstrap("page", "{\"variant\":\"woman\",\"add_to_cart_popup\":\"hide\",\"redirect_cart\":false,\"alsobought_thumbnail_size\":\"240x360\",\"brand_size\":\"273x115\",\"pdp_price_label\":\"\",\"pdp_sale_price_label\":\"\",\"pdp_non_sale_price_label\":\"\",\"pdp_retail_price_label\":\"RRP:\",\"alsobought_checked\":false,\"homepage_show_carousel\":false,\"product_recentviewed_count\":\"10\",\"product_cartsuggested_count\":\"10\",\"product_new_count\":\"4\",\"product_featured_count\":\"8\",\"product_top_count\":\"4\",\"homepage_blog_posts_count\":6,\"sidebar_shop_by_brand\":10,\"productpage_videos_count\":10,\"productpage_reviews_count\":\"10\",\"productpage_related_products_count\":\"6\",\"productpage_tabs_desc_fullwidth\":false,\"categorypage_products_per_page\":12,\"brandpage_products_per_page\":12,\"categorypage_search\":\"show\",\"categorypage_search_subs\":true,\"categorypage_layout\":\"left-sidebar\",\"instantload\":false,\"navPages_animation\":\"fade\",\"logo_position\":\"left\",\"show_bulk_order_mode\":false,\"swatch_option_display_type\":\"default\",\"zoom_size\":\"1920x1920\",\"product_size\":\"960x960\",\"product_image_responsive\":false,\"card_show_swatches\":false,\"card_show_variantImg\":true,\"card_show_countdown\":false,\"card_show_priceCall\":false,\"card_swatch_name\":\"Color,Colour,Size\",\"card_custom_fields\":\"\",\"show_rrp\":true,\"price_ranges\":false,\"productgallery_size\":\"600x600\",\"card_show_sku\":true,\"card_show_brand\":true,\"card_show_border\":false,\"card_show_button\":true,\"card_show_qty\":false,\"card_show_compare\":false,\"show_product_quick_view\":false,\"ajax_add_to_cart\":true,\"product_sale_badges\":\"percent\",\"product_sale_label\":\"-\",\"product_custom_badges\":true,\"nl_popup_show\":\"hide\",\"nl_popup_start\":\"5\",\"nl_popup_hide\":\"600\",\"show_quick_search\":true,\"suggest_keywords\":false,\"keywords_file1\":\"/content/suggest-keywords-1.csv\",\"keywords_file2\":\"/content/suggest-keywords-2.csv\",\"keywords_file3\":\"/content/suggest-keywords-3.csv\",\"card_textAlign\":\"left\",\"pd_modifier_name\":\"\",\"genericError\":\"Oops! Something went wrong.\",\"urls\":{\"home\":\"https://juggernautcase.com/\",\"brands\":\"https://juggernautcase.com/brands/\",\"search\":\"https://juggernautcase.com/search.php\",\"compare\":\"https://juggernautcase.com/compare\",\"sitemap\":\"https://juggernautcase.com/sitemap.php\",\"contact_us_submit\":\"https://juggernautcase.com/pages.php?action=sendContactForm\",\"subscribe\":{\"action\":\"https://juggernautcase.com/subscribe.php\"},\"checkout\":{\"single_address\":\"https://juggernautcase.com/checkout\",\"multiple_address\":\"https://juggernautcase.com/checkout.php?action=multiple\"},\"account\":{\"orders\":{\"all\":\"https://juggernautcase.com/account.php?action=order_status\",\"completed\":\"https://juggernautcase.com/account.php?action=view_orders\",\"save_new_return\":\"https://juggernautcase.com/account.php?action=save_new_return\"},\"returns\":\"https://juggernautcase.com/account.php?action=view_returns\",\"addresses\":\"https://juggernautcase.com/account.php?action=address_book\",\"inbox\":\"https://juggernautcase.com/account.php?action=inbox\",\"send_message\":\"https://juggernautcase.com/account.php?action=send_message\",\"add_address\":\"https://juggernautcase.com/account.php?action=add_shipping_address\",\"update_action\":\"https://juggernautcase.com/account.php?action=update_account\",\"details\":\"https://juggernautcase.com/account.php?action=account_details\",\"recent_items\":\"https://juggernautcase.com/account.php?action=recent_items\",\"index\":\"https://juggernautcase.com/account.php\",\"wishlists\":{\"all\":\"https://juggernautcase.com/wishlist.php\",\"add\":\"https://juggernautcase.com/wishlist.php?action=addwishlist\",\"edit\":\"https://juggernautcase.com/wishlist.php?action=editwishlist\",\"delete\":\"https://juggernautcase.com/wishlist.php?action=deletewishlist\"}},\"auth\":{\"login\":\"https://juggernautcase.com/login.php\",\"check_login\":\"https://juggernautcase.com/login.php?action=check_login\",\"create_account\":\"https://juggernautcase.com/login.php?action=create_account\",\"save_new_account\":\"https://juggernautcase.com/login.php?action=save_new_account\",\"forgot_password\":\"https://juggernautcase.com/login.php?action=reset_password\",\"send_password_email\":\"https://juggernautcase.com/login.php?action=send_password_email\",\"save_new_password\":\"https://juggernautcase.com/login.php?action=save_new_password\",\"logout\":\"https://juggernautcase.com/login.php?action=logout\"},\"cart\":\"https://juggernautcase.com/cart.php\",\"product\":{\"post_review\":\"https://juggernautcase.com/postreview.php\"},\"gift_certificate\":{\"purchase\":\"https://juggernautcase.com/giftcertificates.php\",\"redeem\":\"https://juggernautcase.com/giftcertificates.php?action=redeem\",\"balance\":\"https://juggernautcase.com/giftcertificates.php?action=balance\"},\"rss\":{\"products\":[]}},\"secureBaseUrl\":\"https://juggernautcase.com\",\"cartId\":null,\"template\":\"pages/page\",\"pageType\":\"page\",\"validationDictionaryJSON\":\"{\\\"locale\\\":\\\"en\\\",\\\"locales\\\":{\\\"validation_messages.val
7231id_email\\\":\\\"en\\\",\\\"validation_messages.password\\\":\\\"en\\\",\\\"validation_messages.password_match\\\":\\\"en\\\",\\\"validation_messages.invalid_password\\\":\\\"en\\\",\\\"validation_messages.field_not_blank\\\":\\\"en\\\",\\\"validation_messages.certificate_amount\\\":\\\"en\\\",\\\"validation_messages.certificate_amount_range\\\":\\\"en\\\",\\\"validation_messages.price_min_evaluation\\\":\\\"en\\\",\\\"validation_messages.price_max_evaluation\\\":\\\"en\\\",\\\"validation_messages.price_min_not_entered\\\":\\\"en\\\",\\\"validation_messages.price_max_not_entered\\\":\\\"en\\\",\\\"validation_messages.price_invalid_value\\\":\\\"en\\\",\\\"validation_messages.invalid_gift_certificate\\\":\\\"en\\\"},\\\"translations\\\":{\\\"validation_messages.valid_email\\\":\\\"You must enter a valid email.\\\",\\\"validation_messages.password\\\":\\\"You must enter a password.\\\",\\\"validation_messages.password_match\\\":\\\"Your passwords do not match.\\\",\\\"validation_messages.invalid_password\\\":\\\"Passwords must be at least 7 characters and contain both alphabetic and numeric characters.\\\",\\\"validation_messages.field_not_blank\\\":\\\" field cannot be blank.\\\",\\\"validation_messages.certificate_amount\\\":\\\"You must enter a gift certificate amount.\\\",\\\"validation_messages.certificate_amount_range\\\":\\\"You must enter a certificate amount between [MIN] and [MAX]\\\",\\\"validation_messages.price_min_evaluation\\\":\\\"Min. price must be less than max. price.\\\",\\\"validation_messages.price_max_evaluation\\\":\\\"Min. price must be less than max. price.\\\",\\\"validation_messages.price_min_not_entered\\\":\\\"Min. price is required.\\\",\\\"validation_messages.price_max_not_entered\\\":\\\"Max. price is required.\\\",\\\"validation_messages.price_invalid_value\\\":\\\"Input must be greater than 0.\\\",\\\"validation_messages.invalid_gift_certificate\\\":\\\"Please enter your valid certificate code.\\\"}}\",\"validationFallbackDictionaryJSON\":\"{\\\"locale\\\":\\\"en\\\",\\\"locales\\\":{\\\"validation_fallback_messages.valid_email\\\":\\\"en\\\",\\\"validation_fallback_messages.password\\\":\\\"en\\\",\\\"validation_fallback_messages.password_match\\\":\\\"en\\\",\\\"validation_fallback_messages.invalid_password\\\":\\\"en\\\",\\\"validation_fallback_messages.field_not_blank\\\":\\\"en\\\",\\\"validation_fallback_messages.certificate_amount\\\":\\\"en\\\",\\\"validation_fallback_messages.certificate_amount_range\\\":\\\"en\\\",\\\"validation_fallback_messages.price_min_evaluation\\\":\\\"en\\\",\\\"validation_fallback_messages.price_max_evaluation\\\":\\\"en\\\",\\\"validation_fallback_messages.price_min_not_entered\\\":\\\"en\\\",\\\"validation_fallback_messages.price_max_not_entered\\\":\\\"en\\\",\\\"validation_fallback_messages.price_invalid_value\\\":\\\"en\\\",\\\"validation_fallback_messages.invalid_gift_certificate\\\":\\\"en\\\"},\\\"translations\\\":{\\\"validation_fallback_messages.valid_email\\\":\\\"You must enter a valid email.\\\",\\\"validation_fallback_messages.password\\\":\\\"You must enter a password.\\\",\\\"validation_fallback_messages.password_match\\\":\\\"Your passwords do not match.\\\",\\\"validation_fallback_messages.invalid_password\\\":\\\"Passwords must be at least 7 characters and contain both alphabetic and numeric characters.\\\",\\\"validation_fallback_messages.field_not_blank\\\":\\\" field cannot be blank.\\\",\\\"validation_fallback_messages.certificate_amount\\\":\\\"You must enter a gift certificate amount.\\\",\\\"validation_fallback_messages.certificate_amount_range\\\":\\\"You must enter a certificate amount between [MIN] and [MAX]\\\",\\\"validation_fallback_messages.price_min_evaluation\\\":\\\"Min. price must be less than max. price.\\\",\\\"validation_fallback_messages.price_max_evaluation\\\":\\\"Min. price must be less than max. price.\\\",\\\"validation_fallback_messages.price_min_not_entered\\\":\\\"Min. price is required.\\\",\\\"validation_fallback_messages.price_max_not_entered\\\":\\\"Max. price is required.\\\",\\\"validation_fallback_messages.price_invalid_value\\\":\\\"Input must be greater than 0.\\\",\\\"validation_fallback_messages.invalid_gift_certificate\\\":\\\"Please enter your valid certificate code.\\\"}}\",\"validationDefaultDictionaryJSON\":\"{\\\"locale\\\":\\\"en\\\",\\\"locales\\\":{\\\"validation_default_messages.val
7231id_email\\\":\\\"en\\\",\\\"validation_default_messages.password\\\":\\\"en\\\",\\\"validation_default_messages.password_match\\\":\\\"en\\\",\\\"validation_default_messages.invalid_password\\\":\\\"en\\\",\\\"validation_default_messages.field_not_blank\\\":\\\"en\\\",\\\"validation_default_messages.certificate_amount\\\":\\\"en\\\",\\\"validation_default_messages.certificate_amount_range\\\":\\\"en\\\",\\\"validation_default_messages.price_min_evaluation\\\":\\\"en\\\",\\\"validation_default_messages.price_max_evaluation\\\":\\\"en\\\",\\\"validation_default_messages.price_min_not_entered\\\":\\\"en\\\",\\\"validation_default_messages.price_max_not_entered\\\":\\\"en\\\",\\\"validation_default_messages.price_invalid_value\\\":\\\"en\\\",\\\"validation_default_messages.invalid_gift_certificate\\\":\\\"en\\\"},\\\"translations\\\":{\\\"validation_default_messages.valid_email\\\":\\\"You must enter a valid email.\\\",\\\"validation_default_messages.password\\\":\\\"You must enter a password.\\\",\\\"validation_default_messages.password_match\\\":\\\"Your passwords do not match.\\\",\\\"validation_default_messages.invalid_password\\\":\\\"Passwords must be at least 7 characters and contain both alphabetic and numeric characters.\\\",\\\"validation_default_messages.field_not_blank\\\":\\\"The field cannot be blank.\\\",\\\"validation_default_messages.certificate_amount\\\":\\\"You must enter a gift certificate amount.\\\",\\\"validation_default_messages.certificate_amount_range\\\":\\\"You must enter a certificate amount between [MIN] and [MAX]\\\",\\\"validation_default_messages.price_min_evaluation\\\":\\\"Min. price must be less than max. price.\\\",\\\"validation_default_messages.price_max_evaluation\\\":\\\"Min. price must be less than max. price.\\\",\\\"validation_default_messages.price_min_not_entered\\\":\\\"Min. price is required.\\\",\\\"validation_default_messages.price_max_not_entered\\\":\\\"Max. price is required.\\\",\\\"validation_default_messages.price_invalid_value\\\":\\\"Input must be greater than 0.\\\",\\\"validation_default_messages.invalid_gift_certificate\\\":\\\"Please enter your valid certificate code.\\\"}}\",\"ajaxAddToCartEnterQty\":\"Please enter quantity\",\"bulkOrderEnterQty\":\"Please enter quantity\",\"bulkOrderChooseOptions\":\"Please choose options\",\"txtMinQty\":\"The minimum purchasable quantity is %qty%\",\"txtMaxQty\":\"The maximum purchasable quantity is %qty%\",\"compareAddonLang_compare\":\"Compare\",\"compareAddonLang_quick_view\":\"Quick view\",\"compareAddonLang_remove\":\"Remove\",\"compareAddonLang_clear_all\":\"Clear All\",\"loadingImg\":\"https://cdn11.bigcommerce.com/s-wfkpm4ltxc/stencil/ad737610-69cd-013f-c1e1-2aca43d705a8/e/45debc00-98db-013f-e7cd-7608931f64d7/img/loading.svg\",\"money\":{\"currency_token\":\"$\",\"currency_location\":\"left\",\"decimal_token\":\".\",\"decimal_places\":2,\"thousands_token\":\",\"},\"graphQLToken\":\"eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjaWQiOlsxXSwiY29ycyI6WyJodHRwczovL2p1Z2dlcm5hdXRjYXNlLmNvbSJdLCJlYXQiOjE3OTA4NDkxNDYsImlhdCI6MTc5MDY3NjM0NiwiaXNzIjoiQkMiLCJzaWQiOjEwMDI2NTkyNDUsInN1YiI6IkJDIiwic3ViX3R5cGUiOjAsInRva2VuX3R5cGUiOjF9.K1gnlgZezrrsemD5Efr6X_NGn8HeZQUpxk94Ooo_0voAqrctNoXS2ZnU-gcm6BaYFkcd3KGLjunPd0NHFa_FKQ\",\"defaultProductImage\":\"https://cdn11.bigcommerce.com/s-wfkpm4ltxc/stencil/ad737610-69cd-013f-c1e1-2aca43d705a8/e/45debc00-98db-013f-e7cd-7608931f64d7/img/ProductDefault.svg\",\"defaultBrandImage\":\"https://cdn11.bigcommerce.com/s-wfkpm4ltxc/stencil/ad737610-69cd-013f-c1e1-2aca43d705a8/e/45debc00-98db-013f-e7cd-7608931f64d7/img/BrandDefault.svg\",\"txtSelectOne\":\"Please select one\",\"customerRecentlyViewedProductIds\":[],\"customerId\":null,\"currencyCode\":\"USD\",\"hidePriceFromGuests\":false,\"showProductRating\":true,\"txtPriceWithTax\":\"Inc. Tax\",\"txtPriceWithoutTax\":\"Ex. Tax\",\"txtQuickView\":\"Quick view\",\"txtCompare\":\"Compare\",\"txtChooseOptions\":\"Choose Options\",\"txtPreOrder\":\"Pre-Order\",\"txtAddToCart\":\"Add to Cart\",\"txtSelect\":\"Select\",\"txtQuantity\":\"Quantity:\",\"txtQuantityDecrease\":\"Decrease Quantity of undefined\",\"txtQuantityIncrease\":\"Increase Quantity of undefined\",\"txtUnavailable\":\"Unavailable\",\"txtSoldOut\":\"Out of Stock\",\"txtSaveCoupon\":\"Coupon has been saved\",\"txtCouponEmpty\":\"Please add coupon code for ticket\",\"txtSavedWishlist\":\"Saved the product to your %WISHLIST% wishlist for later and removed the product from the cart\",\"txtChange\":\"Change\",\"shippingCountryErrorMessage\":\"The 'Country' field cannot be blank.\",\"shippingProvinceErrorMessage\":\"The '
7231State/Province' field cannot be blank.\",\"outOfStockDefaultMessage\":\"Out of Stock\",\"txtSaleCountdownJSON\":\"{\\\"locale\\\":\\\"en\\\",\\\"locales\\\":{\\\"sale_countdown.sale\\\":\\\"en\\\",\\\"sale_countdown.end_in\\\":\\\"en\\\",\\\"sale_countdown.day\\\":\\\"en\\\",\\\"sale_countdown.days\\\":\\\"en\\\",\\\"sale_countdown.hour\\\":\\\"en\\\",\\\"sale_countdown.hours\\\":\\\"en\\\",\\\"sale_countdown.minute\\\":\\\"en\\\",\\\"sale_countdown.minutes\\\":\\\"en\\\",\\\"sale_countdown.second\\\":\\\"en\\\",\\\"sale_countdown.seconds\\\":\\\"en\\\"},\\\"translations\\\":{\\\"sale_countdown.sale\\\":\\\"Sale Off\\\",\\\"sale_countdown.end_in\\\":\\\"Ends in\\\",\\\"sale_countdown.day\\\":\\\"D\\\",\\\"sale_countdown.days\\\":\\\"D\\\",\\\"sale_countdown.hour\\\":\\\"H\\\",\\\"sale_countdown.hours\\\":\\\"H\\\",\\\"sale_countdown.minute\\\":\\\"M\\\",\\\"sale_countdown.minutes\\\":\\\"M\\\",\\\"sale_countdown.second\\\":\\\"S\\\",\\\"sale_countdown.seconds\\\":\\\"S\\\"}}\",\"isDevelopment\":false,\"invalidEntryMessage\":\"[ENTRY] is not a valid entry\",\"useValidEmail\":\"Please use a valid email address, such as [email protected].\",\"enterPass\":\"You must enter a password.\"}").load();
7232        </script>
7232
7233
7234            
7234<script nonce="">
7235                window.PapathemesShippingCountdownSettings = {
7236                    graphQLToken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjaWQiOlsxXSwiY29ycyI6WyJodHRwczovL2p1Z2dlcm5hdXRjYXNlLmNvbSJdLCJlYXQiOjE3OTA4NDkxNDYsImlhdCI6MTc5MDY3NjM0NiwiaXNzIjoiQkMiLCJzaWQiOjEwMDI2NTkyNDUsInN1YiI6IkJDIiwic3ViX3R5cGUiOjAsInRva2VuX3R5cGUiOjF9.K1gnlgZezrrsemD5Efr6X_NGn8HeZQUpxk94Ooo_0voAqrctNoXS2ZnU-gcm6BaYFkcd3KGLjunPd0NHFa_FKQ',
7237                    storeTZ: 'America/Los_Angeles',
7238                    countdownValues: {
7239                        parcel: '15:00:00',
7240                        LTL: '12:00:00',
7241                    },
7242                    defaultCountdownTime: '0'
7243                };
7244            </script>
7244
7245            
7245<script src="https://cdn11.bigcommerce.com/s-wfkpm4ltxc/stencil/ad737610-69cd-013f-c1e1-2aca43d705a8/e/45debc00-98db-013f-e7cd-7608931f64d7/vendor/papathemes/shipping-countdown.min.js" async defer nonce=""></script>
7245
7246
7247
7248        
7248<script nonce="">
7249            if (typeof window.PapaThemesWidgetCustomerReviewsExtraSettings !== 'object') {
7250                window.PapaThemesWidgetCustomerReviewsExtraSettings = {};
7251            }
7252            window.PapaThemesWidgetCustomerReviewsExtraSettings.slidesToShow = 1;
7253        </script>
7253
7254
7255            
7255<script type="text/javascript" src="https://cdn11.bigcommerce.com/shared/js/csrf-protection-header-5eeddd5de78d98d146ef4fd71b2aedce4161903e.js"></script>
vendor: 1 bytes, line 7255
7255
7256<script src='https://api.goaffpro.com/loader.js?shop=wfkpm4ltxc' ></script>
7256<script src='https://static.klaviyo.com/onsite/js/T7z4Hw/klaviyo.js?company_id=T7z4Hw' async ></script>
7256<script src='https://bigcommerce.route.com/checkout/routeimg.js'   ></script>
7256<script src='https://bigcommerce.route.com/checkout/listener.js?s=wfkpm4ltxc'   ></script>
7256<script>
7257wwPage = window.location.href; var myJsonAddrexx, myJsonAddrexx1, myJsonAddrexx2, cartID;
7258if(wwPage.indexOf("checkout") >= 0){
7259fetch('/api/storefront/cart', {
7260  credentials: 'include'
7261}).then(function(response) {
7262  return response.json();
7263}).then(function(myJson) {
7264  myJsonAddrexx = myJson;
7265  cartID = myJsonAddrexx[0].id;
7266});
7267};
7268function fetch1(){
7269fetch('/api/storefront/cart?includes=consignments.availableShippingOptions', {
7270    credentials: 'include'
7271}).then(function (response) {
7272    return response.json();
7273}).then(function (cartJson) {
7274	myJsonAddrexx1 = cartJson;
7275    return cartJson[0].id;
7276}).catch(function (error) {
7277}).then(function (cartId) {
7278    fetch('/api/storefront/checkouts/' + cartId, {
7279        credentials: 'include'
7280    }).then(function (response) {
7281        return response.json();
7282    }).then(function (checkoutJson) {
7283		myJsonAddrexx2 = checkoutJson;
7284    }).catch(function (error) {
7285    })
7286});
7287};
7288function addressSet(){
7289fetch('/api/storefront/checkouts/', {credentials: 'include'})
7290.then(res => res.json())
7291.then(data => localStorage.setItem("shippingAddress2", (JSON.stringify(data.consignments[0].shippingAddress))));
7292};
7293function addShippingAddress2(addrexxA1, addrexxA2, addrexxZ, addrexxC, addrexxS1, addrexxS2){
7294var cartID = myJsonAddrexx[0].id; var consignmentsID = myJsonAddrexx2.consignments[0].id; var shippingAddressData = myJsonAddrexx2.consignments[0].shippingAddress; shippingAddressData.address1 = addrexxA1; shippingAddressData.address2 = addrexxA2; shippingAddressData.city = addrexxC; shippingAddressData.postalCode = addrexxZ; shippingAddressData.stateOrProvince = addrexxS1; shippingAddressData.stateOrProvinceCode = addrexxS2;
7295jQuery2.each(myJsonAddrexx[0].lineItems.physicalItems, function() {
7296var xhr = new XMLHttpRequest(); xhr.withCredentials = true; var cartQuantity = this.quantity; var itemIDX = this.id;
7297var data = JSON.stringify({
7298	"shippingAddress": shippingAddressData,
7299  "lineItems": [
7300    {
7301      "itemId": itemIDX,
7302	  "quantity": cartQuantity
7303    }
7304  ]
7305});
7306xhr.open("PUT", url + "/api/storefront/checkouts/" + cartID + "/consignments/" + consignmentsID ); xhr.setRequestHeader("content-type", "application/json"); xhr.send(data);		   
7307});
7308};
7309restrictState = ['AK','VI','GU','AS','PR','MH','MP','FM','PW','HI'];
7310restrictState2 = ['AK','VI','GU','AS','PR','MH','MP','FM','PW','HI'];
7311restrictState3 = ['ALASKA','VIRGIN ISLANDS','GUAM','AMERICAN SOMOA','PUERTO RICO','MARSHALL ISLANDS','NORTHERN MARIANA ISLANDS','FEDERATED STATES OF MICRONESIA','PALAU','HAWAII'];
7312var limitCountries = false,
7313setDefaultCountry = false,
7314numberOfChars = 35,
7315autocompleteName = false,
7316cityStateLimited = false, 
7317detectForeignCharacters = true,
7318cssTweak = true,
7319showAutocompleteFooter = !1, 
7320includeCountry = true,
7321poBoxCheck = false,
7322a1Check = true,
7323phoneCheck = false,
7324aptCheck = true,
7325camelCase = false,
7326addZipPlus = false,
7327globalZip = true,
7328ipFunctionality = false,
7329showAutocompleteHeader = !1, 
7330geoInitialComplete = !1,
7331customFields = false,
7332strictA1 = true,
7333strictZip = true,
7334validateAddressLine2 = true,
7335countryWillBeSet = 'united states',
7336countriesShipping = 'United States|Canada|Select a country|Choose a country|',	
7337countriesBilling = 'United States|Canada|Select a country|Choose a country|',
7338zipDoubleCheck = false,
7339restrictStateEnabled = false,
7340phoneCheckAdded = false,
7341postEntryValZip = false,
7342postEntryA2 = false,
7343postEntryCheck = true;
7344function loadaddrexx() {var _cc_url = "xxredda.s3.amazonaws.com/bcinstall/xxerdda2022.js";var _cc_s = document.createElement('script');_cc_s.type = 'text/javascript';_cc_s.src = (("http:" === document.location.protocol) ? "http:" : "https:") + "//" + _cc_url;document.getElementsByTagName("head")[0].appendChild(_cc_s);}
7345if ((wwPage.indexOf("billing_address") >= 0 || wwPage.indexOf("create_account") >= 0 || wwPage.indexOf("shipping_address") >= 0 || wwPage.indexOf("checkout") >= 0) && wwPage.indexOf("confirmation") == -1 ){
7346if(wwPage.indexOf("create_account") >= 0){setTimeout(function() {loadaddrexx();}, 2000);} else {loadaddrexx();}};
7347if(wwPage.indexOf("checkout") >= 0){fetch1();}
7348</script>
7348<script>(async function () {
7349  const zonosElementsUrl = 'https://cdn.jsdelivr.net/npm/@zonos/elements';
7350  const timestamp = new Date().getTime();
7351  const zonosScript = document.querySelector(
7352    `script[src*="${zonosElementsUrl}/dist/scripts/loadZonos.js"]`,
7353  );
7354  const zonosRouteUrl = 'https://alpha.route.js.zonos.com';
7355
7356  const baseZonosHeaders = {
7357    Accept: 'application/json',
7358    'Content-Type': 'application/json',
7359    'Zonos-Is-BigCommerce': 'true',
7360    'Zonos-Referer': window.location.hostname,
7361    'Zonos-Store-Id': '4957',
7362  };
7363
7364  const inventoryCheckEnabled = 'false' === 'true';
7365  const testModeEnabled = 'false' === 'true';
7366
7367  // If testMode is not enabled, the script should always be enabled, or if testMode is enabled, the script should be enabled if the url includes 'zonos=true' or 'zonos=1'
7368  const shouldEnableZonos = !testModeEnabled || (window.location.search.includes('zonos=true') || window.location.search.includes('zonos=1'));
7369
7370  if (!zonosScript && shouldEnableZonos) {
7371    const script = document.createElement('script');
7372    script.src = `${zonosElementsUrl}/dist/scripts/loadZonos.js?timestamp=${timestamp}`;
7373    script.addEventListener(
7374      'load',
7375      () => {
7376        const getCart = async () => {
7377          const options = {
7378            headers: { 'Content-Type': 'application/json' },
7379            method: 'GET',
7380          };
7381          const result = await fetch('/api/storefront/carts', options);
7382          const [data] = await result.json();
7383          const { digitalItems, physicalItems } = data.lineItems;
7384          const cartDiscount = data.discountAmount;
7385
7386          return {
7387            cartDiscount,
7388            cartId: data.id,
7389            coupons: data.coupons,
7390            currencyCode: data.currency.code,
7391            items: [...digitalItems, ...physicalItems],
7392          };
7393        };
7394
7395        void window.Zonos.init({
7396          checkoutSettings: {
7397            bigCommerceConfig: {
7398              storeHash: 'wfkpm4ltxc',
7399            },
7400            buildCartDetail: async () => {
7401              const { cartDiscount, cartId, coupons, currencyCode, items } =
7402                await getCart();
7403              const zonosItems = items.map(item => ({
7404                amount: item.salePrice,
7405                cartId,
7406                currencyCode,
7407                imageUrl: item.imageUrl,
7408                metadata: [],
7409                name: item.name,
7410                productId: item.productId.toString(),
7411                quantity: item.quantity,
7412                sku: item.sku,
7413              }));
7414
7415              const couponItems = coupons
7416                .map(({ code, discountedAmount }) => {
7417                  if (discountedAmount > 0) {
7418                    return {
7419                      amount: -discountedAmount,
7420                      cartId,
7421                      currencyCode,
7422                      imageUrl: '',
7423                      metadata: [],
7424                      name: code,
7425                      productId: '',
7426                      quantity: 1,
7427                      sku: '',
7428                    };
7429                  }
7430                  return null;
7431                })
7432                .filter(Boolean);
7433
7434              const allItems = [...zonosItems, ...couponItems];
7435
7436              if (cartDiscount > 0) {
7437                const cartDiscountItem = {
7438                  amount: -cartDiscount,
7439                  cartId,
7440                  currencyCode,
7441                  imageUrl: '',
7442                  metadata: [],
7443                  name: 'Discount Applied',
7444                  productId: '',
7445                  quantity: 1,
7446                  sku: '',
7447                };
7448                allItems.push(cartDiscountItem);
7449              }
7450
7451              return allItems;
7452            },
7453            buildLandedCost: async ({
7454              billingAddress,
7455              billingContact,
7456              checkoutSessionId,
7457              contact,
7458              shippingAddress,
7459              zonosApiRoute,
7460            }) => {
7461              const zonosHeaders = {
7462                ...baseZonosHeaders,
7463                credentialToken: window.Zonos.zonosApiKey || 'credential_live_57546655-5fdf-4724-83d1-1bb2cb6
7463db8fa',
7464              }              
7465              const { cartId } = await getCart();
7466              const body = {
7467                billingAddress,
7468                billingContact,
7469                cartId,
7470                checkoutSessionId,
7471                contact,
7472                shippingAddress,
7473                storeHash: 'wfkpm4ltxc',
7474              };
7475
7476              const options = {
7477                body: JSON.stringify(body),
7478                headers: zonosHeaders,
7479                method: 'POST',
7480              };
7481
7482              try {
7483                const landedCost = await fetch(
7484                  `${zonosApiRoute}/api/bigcommerce/build-landed-cost`,
7485                  options,
7486                );
7487                const json = await landedCost.json();
7488
7489                return json;
7490              } catch (e) {
7491                console.error('Error building landed cost', e);
7492                return null;
7493              }
7494            },
7495            onInventoryCheck: async (_, { zonosApiRoute, translate }) => {
7496              if (!inventoryCheckEnabled) {
7497                return null;
7498              }
7499              const zonosHeaders = {
7500                ...baseZonosHeaders,
7501                credentialToken: window.Zonos.zonosApiKey || 'credential_live_57546655-5fdf-4724-83d1-1bb2cb6db8fa',
7502              }
7503              try {
7504                const { cartId } = await getCart();
7505                const result = await fetch(`${zonosApiRoute || zonosRouteUrl}/api/bigcommerce/inventory-check`, {
7506                  body: JSON.stringify({ cartId, storeHash: 'wfkpm4ltxc' }),
7507                  headers: zonosHeaders,
7508                  method: 'POST',
7509                });
7510                const data = await result.json();
7511                const outOfStockItems = data.outOfStockItems.filter(Boolean).join(', ');
7512                if (outOfStockItems) {
7513                  return translate?.('"[itemName]" is out of stock. Please remove it from your cart and try again.', {
7514                    itemName: outOfStockItems,
7515                  }) || `"${outOfStockItems}" is out of stock. Please remove it from your cart and try again.`;
7516                }
7517                return null;
7518              } catch (err) {
7519                console.error('Error checking inventory', err);
7520                return null;
7521              }
7522            },
7523            onOrderSuccess: async ({ zonosApiRoute, zonosOrder }) => {
7524              const zonosHeaders = {
7525                ...baseZonosHeaders,
7526                credentialToken: window.Zonos.zonosApiKey || 'credential_live_57546655-5fdf-4724-83d1-1bb2cb6db8fa',
7527              }
7528              
7529              const body = {
7530                orderId: zonosOrder.id,
7531              };
7532              const options = {
7533                body: JSON.stringify(body),
7534                headers: zonosHeaders,
7535                method: 'POST',
7536              };
7537              await fetch(
7538                `${zonosApiRoute}/api/bigcommerce/clear-cart`,
7539                options,
7540              ).catch(_e => {});
7541            },
7542            placeOrderButtonSelector: '.cart-actions a[href*="checkout"], .previewCartAction .previewCartAction-checkout a[href*="checkout"]',
7543          },
7544          helloSettings: {
7545            desktopLocation: 'BOTTOM_RIGHT',
7546          },
7547          storeId: Number('4957'),
7548          zonosApiKey: 'credential_live_57546655-5fdf-4724-83d1-1bb2cb6db8fa',
7549        });
7550      },
7551      false,
7552    );
7553    document.head.appendChild(script);
7554  }
7555})();
7556</script>
7556<script>
7557 var css = `.z-intl .previewCartCheckout-additionalCheckoutButtons, .z-intl .cart-additionalCheckoutButtons, .z-intl div.container > div > div > div:nth-child(7) > ul > li:nth-child(2), .z-intl div.container > div > div > div:nth-child(7) > ul > li:nth-child(4), .z-intl div.modal-content > div.modal-body > div > section.previewCartCheckout > a:nth-child(1), .z-intl #paypal-commerce-cart-messaging-banner{
7558           display: none;
7559           }`;  //use string templates for cleaner css code - ES6 String templates
7560 head = document.head || document.getElementsByTagName('head')[0],
7561 style = document.createElement('style');
7562 style.type = 'text/css';
7563 if (style.styleSheet){
7564 style.styleSheet.cssText = css;
7565 } else {
7566 style.appendChild(document.createTextNode(css));
7567 }
7568 head.appendChild(style);
7569  </script>
7569<script type="text/javascript">
7570    (function(c,l,a,r,i,t,y){
7571        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
7572        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
7573        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
7574    })(window, document, "clarity", "script", "xopyln0b96");
7575</script>
7575<script>
7576(function () {
7577  var fontPreconnect1 = document.createElement("link");
7578  fontPreconnect1.rel = "preconnect";
7579  fontPreconnect1.href = "https://fonts.googleapis.com";
7580  document.head.appendChild(fontPreconnect1);
7581
7582  var fontPreconnect2 = document.createElement("link");
7583  fontPreconnect2.rel = "preconnect";
7584  fontPreconnect2.href = "https://fonts.gstatic.com";
7585  fontPreconnect2.crossOrigin = "anonymous";
7586  document.head.appendChild(fontPreconnect2);
7587
7588  var fontLink = document.createElement("link");
7589  fontLink.rel = "stylesheet";
7590  fontLink.href = "https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800;900&display=swap";
7591  document.head.appendChild(fontLink);
7592
7593  var css = [
7594    ".header,",
7595    ".header *,",
7596    ".navPages,",
7597    ".navPages *,",
7598    ".navPages-container,",
7599    ".navPages-container *,",
7600    ".navPage-subMenu,",
7601    ".navPage-subMenu *,",
7602    ".navPage-childList,",
7603    ".navPage-childList *,",
7604    ".navUser,",
7605    ".navUser *,",
7606    ".dropdown-menu,",
7607    ".dropdown-menu *,",
7608    ".mega-menu,",
7609    ".mega-menu *,",
7610    ".velox-mega,",
7611    ".velox-mega * {",
7612    "  font-family: 'Saira', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;",
7613    "  font-synthesis: none !important;",
7614    "}",
7615
7616    "/* Top navigation */",
7617    ".navPages-action,",
7618    ".navPages-item > a,",
7619    ".navPages-list > li > a,",
7620    ".header a {",
7621    "  font-family: 'Saira', system-ui, -apple-system, Arial, sans-serif !important;",
7622    "  font-weight: 800 !important;",
7623    "  letter-spacing: 0.08em !important;",
7624    "  text-transform: none !important;",
7625    "}",
7626
7627    "/* Mega menu column headings */",
7628    ".navPage-subMenu h2,",
7629    ".navPage-subMenu h3,",
7630    ".navPage-subMenu h4,",
7631    ".navPage-subMenu-title,",
7632    ".navPage-subMenu-action.is-root,",
7633    ".navPage-subMenu .navPage-subMenu-action:first-child,",
7634    ".mega-menu h2,",
7635    ".mega-menu h3,",
7636    ".mega-menu h4 {",
7637    "  font-family: 'Saira', system-ui, -apple-system, Arial, sans-serif !important;",
7638    "  font-weight: 800 !important;",
7639    "  letter-spacing: 0.10em !important;",
7640    "  text-transform: none !important;",
7641    "}",
7642
7643    "/* Mega menu links */",
7644    ".navPage-subMenu a,",
7645    ".navPage-subMenu span,",
7646    ".navPage-childList a,",
7647    ".navPage-childList span,",
7648    ".mega-menu a,",
7649    ".mega-menu span {",
7650    "  font-family: 'Saira', system-ui, -apple-system, Arial, sans-serif !important;",
7651    "  text-transform: none !important;",
7652    "}",
7653
7654    "/* Product/category links inside dropdowns */",
7655    ".navPage-childList-action,",
7656    ".navPage-subMenu-action:not(.is-root) {",
7657    "  font-weight: 400 !important;",
7658    "  letter-spacing: 0 !important;",
7659    "  text-transform: none !important;",
7660    "}",
7661
7662    "/* Mobile menu */",
7663    ".mobileMenu-toggle,",
7664    ".mobileMenu-toggle *,",
7665    ".navPages--mobile,",
7666    ".navPages--mobile *,",
7667    ".mobileMenu,",
7668    ".mobileMenu * {",
7669    "  font-family: 'Saira', system-ui, -apple-system, Arial, sans-serif !important;",
7670    "  text-transform: none !important;",
7671    "}"
7672  ].join('\\n');
7673
7674  var oldStyle = document.getElementById("jc-force-saira-mega-menu");
7675  if (oldStyle) oldStyle.remove();
7676
7677  var style = document.createElement("style");
7678  style.id = "jc-force-saira-mega-menu";
7679  style.type = "text/css";
7680  style.appendChild(document.createTextNode(css));
7681  document.head.appendChild(style);
7682})();
7683</script>
7683<script>
7684(function () {
7685  "use strict";
7686
7687  /* =========================================================
7688     JUGGERNAUT.CASE — SITEWIDE SAIRA ENFORCEMENT
7689     
7690     Brand weight rules:
7691     300 = Light
7692     400 = Regular
7693     500 = Medium
7694     600 = SemiBold
7695     700 = Bold
7696
7697     800 ExtraBold and 900 Black are not permitted.
7698  ========================================================== */
7699
7700  var CONTROLLER_KEY = "__JC_FORCE_SAIRA_SITEWIDE__";
7701
7702  var STYLE_ID = "jc-force-saira-sitewide";
7703  var FONT_ID = "jc-saira-font-link";
7704  var GOOGLE_PRECONNECT_ID = "jc-google-fonts-preconnect";
7705  var GSTATIC_PRECONNECT_ID = "jc-google-fonts-gstatic-preconnect";
7706
7707  var CAP_CLASS = "jc-saira-weight-capped";
7708
7709  var SAIRA_FONT_URL =
7710    "https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600;700&display=swap";
7711
7712  var observer = null;
7713  var animationFrame = null;
7714  var pendingRoots = new Set();
7715
7716  /* =========================================================
7717     DESTROY AN OLDER COPY
7718
7719     This prevents duplicate observers and style blocks when
7720     Script Manager or Page Builder executes the script again.
7721  ========================================================== */
7722
7723  if (
7724    window[CONTROLLER_KEY] &&
7725    typeof window[CONTROLLER_KEY].destroy === "function"
7726  ) {
7727    try {
7728      window[CONTROLLER_KEY].destroy();
7729    } catch (error) {
7730      /* Ignore cleanup errors from an older version */
7731    }
7732  }
7733
7734  /* =========================================================
7735     ICON EXCLUSIONS
7736
7737     Icon-font and SVG elements are excluded so search, account,
7738     cart, social, menu and other theme icons remain intact.
7739  ========================================================== */
7740
7741  var ICON_SELECTOR = [
7742    "svg",
7743    "i",
7744    ".icon",
7745    "[class*=' icon']",
7746    "[class^='icon']",
7747    "[class*='Icon']",
7748    "[class*='fa-']",
7749    ".fa",
7750    ".fas",
7751    ".far",
7752    ".fab",
7753    ".material-icons",
7754    "[data-icon]"
7755  ].join(",");
7756
7757  function isExcludedElement(element) {
7758    if (!(element instanceof HTMLElement)) {
7759      return true;
7760    }
7761
7762    return Boolean(element.closest(ICON_SELECTOR));
7763  }
7764
7765  /* =========================================================
7766     PRECONNECT TO GOOGLE FONTS
7767  ========================================================== */
7768
7769  function ensurePreconnectLinks() {
7770    if (!document.getElementById(GOOGLE_PRECONNECT_ID)) {
7771      var googlePreconnect = document.createElement("link");
7772
7773      googlePreconnect.id = GOOGLE_PRECONNECT_ID;
7774      googlePreconnect.rel = "preconnect";
7775      googlePreconnect.href = "https://fonts.googleapis.com";
7776
7777      document.head.appendChild(googlePreconnect);
7778    }
7779
7780    if (!document.getElementById(GSTATIC_PRECONNECT_ID)) {
7781      var gstaticPreconnect = document.createElement("link");
7782
7783      gstaticPreconnect.id = GSTATIC_PRECONNECT_ID;
7784      gstaticPreconnect.rel = "preconnect";
7785      gstaticPreconnect.href = "https://fonts.gstatic.com";
7786      gstaticPreconnect.crossOrigin = "anonymous";
7787
7788      document.head.appendChild(gstaticPreconnect);
7789    }
7790  }
7791
7792  /* =========================================================
7793     REMOVE DUPLICATE SAIRA FONT FILES
7794
7795     Homepage widgets may inject separate Google Fonts links
7796     containing 800 and 900. Those duplicate links are removed.
7797  ========================================================== */
7798
7799  function normalizeSairaFontLinks() {
7800    var links = document.querySelectorAll(
7801      'link[rel="stylesheet"][href*="fonts.googleapis.com"][href*="family=Saira"]'
7802    );
7803
7804    links.forEach(function (link) {
7805      if (link.id !== FONT_ID) {
7806        link.remove();
7807      }
7808    });
7809
7810    var fontLink = document.getElementById(FONT_ID);
7811
7812    if (!fontLink) {
7813      fontLink = document.createElement("link");
7814      fontLink.id = FONT_ID;
7815      fontLink.rel = "stylesheet";
7816
7817      document.head.appendChild(fontLink);
7818    }
7819
7820    if (fontLink.href !== SAIRA_FONT_URL) {
7821      fontLink.href = SAIRA_FONT_URL;
7822    }
7823  }
7824
7825  /* =========================================================
7826     CLEAN INLINE WIDGET CSS
7827
7828     Existing JC widgets frequently contain declarations such as:
7829
7830     font-weight: 800;
7831     font-weight: 900;
7832
7833     This changes those declarations to 700 before they render.
7834     It only edits inline style blocks associated with Saira or
7835     Juggernaut classes.
7836  ========================================================== */
7837
7838  function sanitizeStyleElement(styleElement) {
7839    if (
7840      !(styleElement instanceof HTMLStyleElement) ||
7841      styleElement.id === STYLE_ID
7842    ) {
7843      return;
7844    }
7845
7846    var originalCSS = styleElement.textContent || "";
7847
7848    var isJuggernautStyle =
7849      /Saira/i.test(originalCSS) ||
7850      /jc[-_]/i.test(originalCSS);
7851
7852    if (!isJuggernautStyle) {
7853      return;
7854    }
7855
7856    var updatedCSS = originalCSS
7857      .replace(
7858        /font-weight\s*:\s*(800|900)\b/gi,
7859        "font-weight: 700"
7860      )
7861      .replace(
7862        /(family=Saira:wght@)([0-9;]+)/gi,
7863        function (match, prefix, weightList) {
7864          var allowedWeights = weightList
7865            .split(";")
7866            .map(function (weight) {
7867              return parseInt(weight, 10);
7868            })
7869            .filter(function (weight) {
7870              return (
7871                Number.isFinite(weight) &&
7872                weight >= 300 &&
7873                weight <= 700
7874              );
7875            })
7876            .filter(function (weight, index, array) {
7877              return array.indexOf(weight) === index;
7878            })
7879            .sort(function (a, b) {
7880              return a - b;
7881            });
7882
7883          if (!allowedWeights.length) {
7884            allowedWeights = [300, 400, 500, 600, 700];
7885          }
7886
7887          return prefix + allowedWeights.join(";");
7888        }
7889      );
7890
7891    if (updatedCSS !== originalCSS) {
7892      styleElement.textContent = updatedCSS;
7893    }
7894  }
7895
7896  function sanitizeExistingAssets() {
7897    normalizeSairaFontLinks();
7898
7899    document
7900      .querySelectorAll("style")
7901      .forEach(sanitizeStyleElement);
7902  }
7903
7904  /* =========================================================
7905     INJECT SITEWIDE FONT RULES
7906  ========================================================== */
7907
7908  function injectSitewideStyles() {
7909    var oldStyle = document.getElementById(STYLE_ID);
7910
7911    if (oldStyle) {
7912      oldStyle.remove();
7913    }
7914
7915    var style = document.createElement("style");
7916
7917    style.id = STYLE_ID;
7918    style.type = "text/css";
7919
7920    style.textContent = `
7921      :root {
7922        --jc-site-font:
7923          "Saira",
7924          system-ui,
7925          -apple-system,
7926          BlinkMacSystemFont,
7927          "Segoe UI",
7928          Arial,
7929          sans-serif;
7930      }
7931
7932      html,
7933      body {
7934        font-family: var(--jc-site-font) !important;
7935        font-synthesis: none !important;
7936        text-rendering: optimizeLegibility;
7937        -webkit-font-smoothing: antialiased;
7938        -moz-osx-font-smoothing: grayscale;
7939      }
7940
7941      /*
7942       * Apply Saira to actual text elements.
7943       * Pseudo-elements are intentionally excluded because
7944       * many BigCommerce icons are rendered with ::before.
7945       */
7946
7947      body :where(*)
7948        :not(svg)
7949        :not(svg *)
7950        :not(i)
7951        :not(.icon)
7952        :not(.icon *)
7953        :not([class*=" icon"])
7954        :not([class*=" icon"] *)
7955        :not([class^="icon"])
7956        :not([class^="icon"] *)
7957        :not([class*="Icon"])
7958        :not([class*="Icon"] *)
7959        :not([class*="fa-"])
7960        :not([class*="fa-"] *)
7961        :not(.fa)
7962        :not(.fas)
7963        :not(.far)
7964        :not(.fab)
7965        :not(.material-icons)
7966        :not([data-icon]) {
7967        font-family: var(--jc-site-font) !important;
7968        font-synthesis: none !important;
7969      }
7970
7971      input,
7972      textarea,
7973      select,
7974      button,
7975      option,
7976      optgroup,
7977      label,
7978      legend,
7979      fieldset {
7980        font-family: var(--jc-site-font) !important;
7981        font-synthesis: none !important;
7982      }
7983
7984      /*
7985       * JavaScript adds this class whenever an element's
7986       * computed weight is greater than Saira Bold.
7987       */
7988
7989      .${CAP_CLASS} {
7990        font-weight: 700 !important;
7991        font-synthesis: none !important;
7992      }
7993    `;
7994
7995    document.head.appendChild(style);
7996  }
7997
7998  /* =========================================================
7999     CAP COMPUTED WEIGHTS AT 700
8000
8001     This catches 800/900 declarations coming from external theme
8002     stylesheets that cannot be directly rewritten.
8003  ========================================================== */
8004
8005  function capElementWeight(element) {
8006    if (
8007      !(element instanceof HTMLElement) ||
8008      element.classList.contains(CAP_CLASS) ||
8009      isExcludedElement(element)
8010    ) {
8011      return;
8012    }
8013
8014    var computedWeight;
8015
8016    try {
8017      computedWeight =
8018        window.getComputedStyle(element).fontWeight;
8019    } catch (error) {
8020      return;
8021    }
8022
8023    var numericWeight = parseInt(computedWeight, 10);
8024
8025    if (computedWeight === "bolder") {
8026      numericWeight = 800;
8027    }
8028
8029    if (
8030      Number.isFinite(numericWeight) &&
8031      numericWeight > 700
8032    ) {
8033      element.classList.add(CAP_CLASS);
8034    }
8035  }
8036
8037  function scanRoot(root) {
8038    if (!root) {
8039      return;
8040    }
8041
8042    if (root instanceof HTMLElement) {
8043      capElementWeight(root);
8044    }
8045
8046    if (
8047      root instanceof Element ||
8048      root instanceof Document
8049    ) {
8050      root
8051        .querySelectorAll("*")
8052        .forEach(capElementWeight);
8053    }
8054  }
8055
8056  /* =========================================================
8057     BATCH DOM SCANS
8058
8059     Added Page Builder widgets are grouped into one animation
8060     frame rather than rescanning immediately for every mutation.
8061  ========================================================== */
8062
8063  function flushPendingRoots() {
8064    animationFrame = null;
8065
8066    pendingRoots.forEach(function (root) {
8067      scanRoot(root);
8068    });
8069
8070    pendingRoots.clear();
8071  }
8072
8073  function queueRoot(root) {
8074    if (!root) {
8075      return;
8076    }
8077
8078    pendingRoots.add(root);
8079
8080    if (animationFrame !== null) {
8081      return;
8082    }
8083
8084    animationFrame =
8085      window.requestAnimationFrame(
8086        flushPendingRoots
8087      );
8088  }
8089
8090  /* =========================================================
8091     PROCESS NEW STYLE OR FONT ELEMENTS
8092  ========================================================== */
8093
8094  function processAddedElement(element) {
8095    if (!(element instanceof Element)) {
8096      return;
8097    }
8098
8099    if (
8100      element.matches(
8101        'link[rel="stylesheet"][href*="fonts.googleapis.com"][href*="family=Saira"]'
8102      )
8103    ) {
8104      if (element.id !== FONT_ID) {
8105        element.remove();
8106      }
8107    } else if (
8108      element.matches('link[rel="stylesheet"]')
8109    ) {
8110      element.addEventListener(
8111        "load",
8112        function () {
8113          if (document.body) {
8114            queueRoot(document.body);
8115          }
8116        },
8117        {
8118          once: true
8119        }
8120      );
8121    }
8122
8123    if (element.matches("style")) {
8124      sanitizeStyleElement(element);
8125
8126      if (document.body) {
8127        queueRoot(document.body);
8128      }
8129    }
8130
8131    element
8132      .querySelectorAll(
8133        'link[rel="stylesheet"][href*="fonts.googleapis.com"][href*="family=Saira"]'
8134      )
8135      .forEach(function (link) {
8136        if (link.id !== FONT_ID) {
8137          link.remove();
8138        }
8139      });
8140
8141    element
8142      .querySelectorAll("style")
8143      .forEach(sanitizeStyleElement);
8144
8145    queueRoot(element);
8146  }
8147
8148  /* =========================================================
8149     OBSERVE PAGE BUILDER AND DYNAMIC THEME CONTENT
8150  ========================================================== */
8151
8152  function startObserver() {
8153    if (!document.documentElement) {
8154      return;
8155    }
8156
8157    observer = new MutationObserver(function (mutations) {
8158      mutations.forEach(function (mutation) {
8159        if (mutation.type === "childList") {
8160          mutation.addedNodes.forEach(function (node) {
8161            if (node instanceof Element) {
8162              processAddedElement(node);
8163            }
8164          });
8165
8166          return;
8167        }
8168
8169        if (
8170          mutation.type === "attributes" &&
8171          mutation.target instanceof HTMLElement
8172        ) {
8173          /*
8174           * Ignore the class mutation caused by this script's
8175           * own weight-capping class.
8176           */
8177          if (
8178            mutation.attributeName === "class" &&
8179            mutation.target.classList.contains(
8180              CAP_CLASS
8181            )
8182          ) {
8183            return;
8184          }
8185
8186          queueRoot(mutation.target);
8187        }
8188      });
8189    });
8190
8191    observer.observe(
8192      document.documentElement,
8193      {
8194        childList: true,
8195        subtree: true,
8196        attributes: true,
8197        attributeFilter: [
8198          "class",
8199          "style",
8200          "href"
8201        ]
8202      }
8203    );
8204  }
8205
8206  /* =========================================================
8207     INITIALIZE
8208  ========================================================== */
8209
8210  function initializeBody() {
8211    if (!document.body) {
8212      return;
8213    }
8214
8215    document.body.classList.add(
8216      "jc-saira-forced"
8217    );
8218
8219    sanitizeExistingAssets();
8220    queueRoot(document.body);
8221    startObserver();
8222
8223    /*
8224     * Recheck once web fonts and the complete storefront have
8225     * finished loading.
8226     */
8227
8228    if (document.fonts && document.fonts.ready) {
8229      document.fonts.ready.then(function () {
8230        if (document.body) {
8231          queueRoot(document.body);
8232        }
8233      });
8234    }
8235
8236    window.addEventListener(
8237      "load",
8238      function () {
8239        sanitizeExistingAssets();
8240
8241        if (document.body) {
8242          queueRoot(document.body);
8243        }
8244      },
8245      {
8246        once: true
8247      }
8248    );
8249  }
8250
8251  ensurePreconnectLinks();
8252  normalizeSairaFontLinks();
8253  injectSitewideStyles();
8254  sanitizeExistingAssets();
8255
8256  if (document.readyState === "loading") {
8257    document.addEventListener(
8258      "DOMContentLoaded",
8259      initializeBody,
8260      {
8261        once: true
8262      }
8263    );
8264  } else {
8265    initializeBody();
8266  }
8267
8268  /* =========================================================
8269     CLEANUP CONTROLLER
8270  ========================================================== */
8271
8272  window[CONTROLLER_KEY] = {
8273    destroy: function () {
8274      if (observer) {
8275        observer.disconnect();
8276      }
8277
8278      if (animationFrame !== null) {
8279        window.cancelAnimationFrame(
8280          animationFrame
8281        );
8282      }
8283
8284      pendingRoots.clear();
8285
8286      document
8287        .querySelectorAll(
8288          "." + CAP_CLASS
8289        )
8290        .forEach(function (element) {
8291          element.classList.remove(
8292            CAP_CLASS
8293          );
8294        });
8295
8296      var injectedStyle =
8297        document.getElementById(STYLE_ID);
8298
8299      if (injectedStyle) {
8300        injectedStyle.remove();
8301      }
8302
8303      if (document.body) {
8304        document.body.classList.remove(
8305          "jc-saira-forced"
8306        );
8307      }
8308
8309      observer = null;
8310      animationFrame = null;
8311    }
8312  };
8313})();
8314</script>
8314<script>
8315(function () {
8316  // ----- BADGES -----
8317  // Edit this list to add/remove badges.
8318  var BADGES = {
8319    'iPhone 17 Pro Max': 'NEW',
8320    'iPhone 17 Pro': 'NEW',
8321    'XCover7 Pro': 'NEW',
8322    'Galaxy S26 Ultra': 'COMING SOON',
8323    'Galaxy S26': 'COMING SOON'
8324  };
8325
8326  // ----- "ALL PRODUCTS" LABEL -----
8327  // Change this prefix if you want a different phrasing (e.g., "All", "View All", "Shop")
8328  var ALL_PRODUCTS_PREFIX = 'Shop All ';
8329
8330  function injectStyles() {
8331    if (document.getElementById('jc-badge-styles')) return;
8332    var s = document.createElement('style');
8333    s.id = 'jc-badge-styles';
8334    s.textContent = [
8335      '.navPage-childList-action[data-badge] {',
8336      '  display: inline-flex !important;',
8337      '  align-items: center !important;',
8338      '  gap: 6px !important;',
8339      '}',
8340      '.navPage-childList-action[data-badge]::after {',
8341      '  content: attr(data-badge) !important;',
8342      '  display: inline-block !important;',
8343      '  font-family: "Saira", "Helvetica Neue", Arial, sans-serif !important;',
8344      '  font-size: 8px !important;',
8345      '  font-weight: 700 !important;',
8346      '  background: #ff8f1c !important;',
8347      '  color: #fff !important;',
8348      '  padding: 2px 6px !important;',
8349      '  border-radius: 2px !important;',
8350      '  letter-spacing: 0.08em !important;',
8351      '  text-transform: uppercase !important;',
8352      '  line-height: 1 !important;',
8353      '  margin-left: 2px !important;',
8354      '}',
8355      '.navPage-childList-action[data-badge="COMING SOON"]::after {',
8356      '  background: #6d6f70 !important;',
8357      '  font-size: 7.5px !important;',
8358      '  padding: 2px 5px !important;',
8359      '}'
8360    ].join('\n');
8361    document.head.appendChild(s);
8362  }
8363
8364  function applyBadges() {
8365    document.querySelectorAll('.navPage-childList-action').forEach(function (link) {
8366      var text = (link.textContent || '').trim();
8367      if (BADGES[text] && !link.hasAttribute('data-badge')) {
8368        link.setAttribute('data-badge', BADGES[text]);
8369      }
8370    });
8371  }
8372
8373  function relabelAllProducts() {
8374    document.querySelectorAll('.navPage-subMenu-item').forEach(function (column) {
8375      var headerEl = column.querySelector('.navPage-subMenu-action span')
8376                  || column.querySelector('.navPage-subMenu-action');
8377      if (!headerEl) return;
8378      var headerText = (headerEl.textContent || '').trim();
8379      if (!headerText) return;
8380
8381      column.querySelectorAll('.navPage-childList-action').forEach(function (link) {
8382        if ((link.textContent || '').trim() === 'All Products') {
8383          link.textContent = ALL_PRODUCTS_PREFIX + headerText;
8384        }
8385      });
8386    });
8387  }
8388
8389  function init() {
8390    injectStyles();
8391    applyBadges();
8392    relabelAllProducts();
8393  }
8394
8395  if (document.readyState === 'loading') {
8396    document.addEventListener('DOMContentLoaded', init);
8397  } else {
8398    init();
8399  }
8400  document.addEventListener('mouseover', function () {
8401    applyBadges();
8402    relabelAllProducts();
8403  }, { passive: true });
8404})();
8405</script>
8405<script>
8406(function () {
8407  var STYLE_ID = "jc-hide-product-shipping-message";
8408
8409  function addHideStyle() {
8410    if (document.getElementById(STYLE_ID)) return;
8411
8412    var style = document.createElement("style");
8413    style.id = STYLE_ID;
8414    style.type = "text/css";
8415
8416    style.innerHTML = [
8417      ".productView-shipping,",
8418      ".productView-shipping *,",
8419      "[data-papathemes-shipping-countdown],",
8420      "[data-papathemes-shipping-countdown] * {",
8421      "  display: none !important;",
8422      "  visibility: hidden !important;",
8423      "}",
8424
8425      ".productView-shipping {",
8426      "  height: 0 !important;",
8427      "  min-height: 0 !important;",
8428      "  max-height: 0 !important;",
8429      "  margin: 0 !important;",
8430      "  padding: 0 !important;",
8431      "  border: 0 !important;",
8432      "  background: transparent !important;",
8433      "  box-shadow: none !important;",
8434      "  overflow: hidden !important;",
8435      "}"
8436    ].join("\n");
8437
8438    document.head.appendChild(style);
8439  }
8440
8441  function hideShippingMessage() {
8442    addHideStyle();
8443
8444    var boxes = document.querySelectorAll(
8445      ".productView-shipping, [data-papathemes-shipping-countdown]"
8446    );
8447
8448    boxes.forEach(function (box) {
8449      box.setAttribute("aria-hidden", "true");
8450      box.style.setProperty("display", "none", "important");
8451      box.style.setProperty("visibility", "hidden", "important");
8452      box.style.setProperty("height", "0", "important");
8453      box.style.setProperty("min-height", "0", "important");
8454      box.style.setProperty("max-height", "0", "important");
8455      box.style.setProperty("margin", "0", "important");
8456      box.style.setProperty("padding", "0", "important");
8457      box.style.setProperty("border", "0", "important");
8458      box.style.setProperty("background", "transparent", "important");
8459      box.style.setProperty("box-shadow", "none", "important");
8460      box.style.setProperty("overflow", "hidden", "important");
8461    });
8462  }
8463
8464  function init() {
8465    hideShippingMessage();
8466
8467    if (window.MutationObserver) {
8468      var observer = new MutationObserver(function () {
8469        hideShippingMessage();
8470      });
8471
8472      observer.observe(document.body, {
8473        childList: true,
8474        subtree: true
8475      });
8476    }
8477  }
8478
8479  if (document.readyState === "loading") {
8480    document.addEventListener("DOMContentLoaded", init);
8481  } else {
8482    init();
8483  }
8484
8485  window.addEventListener("load", hideShippingMessage);
8486})();
8487</script>
8487<script>
8488(function () {
8489  var correctPath = '/pages/partner-integrationshtml/';
8490
8491  function getCorrectUrl() {
8492    var destination = new URL(correctPath, window.location.origin);
8493    var currentUrl = new URL(window.location.href);
8494    var previewToken = currentUrl.searchParams.get('ctk');
8495
8496    /* Keep the BigCommerce theme preview active */
8497    if (previewToken) {
8498      destination.searchParams.set('ctk', previewToken);
8499    }
8500
8501    return destination.pathname + destination.search;
8502  }
8503
8504  function isPartnerIntegrationsLink(link) {
8505    if (!link) return false;
8506
8507    var linkText = (link.textContent || '')
8508      .replace(/\s+/g, ' ')
8509      .trim()
8510      .toLowerCase();
8511
8512    return linkText === 'partner integrations';
8513  }
8514
8515  function updateMenuLinks() {
8516    var links = document.querySelectorAll('a');
8517
8518    links.forEach(function (link) {
8519      if (isPartnerIntegrationsLink(link)) {
8520        link.setAttribute('href', getCorrectUrl());
8521      }
8522    });
8523  }
8524
8525  /* Correct links already loaded on the page */
8526  updateMenuLinks();
8527
8528  /*
8529   * The mobile menu may be created only after the hamburger is opened,
8530   * so keep checking for newly added navigation elements.
8531   */
8532  var observer = new MutationObserver(function () {
8533    updateMenuLinks();
8534  });
8535
8536  observer.observe(document.body, {
8537    childList: true,
8538    subtree: true
8539  });
8540
8541  /*
8542   * Force the correct navigation if the mobile menu JavaScript
8543   * attempts to use an old or cached destination.
8544   */
8545  document.addEventListener('click', function (event) {
8546    var link = event.target.closest('a');
8547
8548    if (!isPartnerIntegrationsLink(link)) {
8549      return;
8550    }
8551
8552    event.preventDefault();
8553    event.stopImmediatePropagation();
8554
8555    window.location.assign(getCorrectUrl());
8556  }, true);
8557})();
8558</script>
8558<script>
8559(function () {
8560  var STYLE_ID = 'jc-remove-product-bag-buttons';
8561  var HIDE_CLASS = 'jc-product-bag-hidden';
8562
8563  /*
8564   * This removes shopping-bag and quick-add buttons from product cards,
8565   * carousels, related products, and recommendation sections.
8566   *
8567   * It does not remove:
8568   * - The header cart icon
8569   * - The main Add to Cart button on product pages
8570   */
8571
8572  function installStyles() {
8573    if (document.getElementById(STYLE_ID)) {
8574      return;
8575    }
8576
8577    var style = document.createElement('style');
8578
8579    style.id = STYLE_ID;
8580
8581    style.textContent = `
8582      .jc-product-bag-hidden,
8583      .productGrid .card-figcaption-button,
8584      .productCarousel .card-figcaption-button,
8585      .productGrid [data-button-type="add-cart"],
8586      .productCarousel [data-button-type="add-cart"],
8587      .productGrid .quick-add,
8588      .productCarousel .quick-add,
8589      .productGrid .quickAdd,
8590      .productCarousel .quickAdd {
8591        display: none !important;
8592        visibility: hidden !important;
8593        width: 0 !important;
8594        height: 0 !important;
8595        min-width: 0 !important;
8596        min-height: 0 !important;
8597        margin: 0 !important;
8598        padding: 0 !important;
8599        border: 0 !important;
8600        overflow: hidden !important;
8601        opacity: 0 !important;
8602        pointer-events: none !important;
8603      }
8604    `;
8605
8606    document.head.appendChild(style);
8607  }
8608
8609  var productCardSelectors = [
8610    '.card',
8611    '.product',
8612    '.productGrid li',
8613    '.productCarousel-slide',
8614    '[data-product-card]',
8615    '.relatedProducts',
8616    '.related-products',
8617    '.recommended-products',
8618    '.product-recommendations',
8619    '.also-bought',
8620    '.alsoBought',
8621    '.frequently-bought',
8622    '.frequentlyBought'
8623  ].join(',');
8624
8625  var excludedSelectors = [
8626    'header',
8627    '.header',
8628    'nav',
8629    '.navUser',
8630    '.navPages',
8631    '.dropdown--quickSearch',
8632    '.previewCart',
8633    '.cart-preview',
8634    '.productView',
8635    '.productView-details',
8636    '[data-cart-item-add]',
8637    'form[data-cart-item-add]',
8638    '.modal'
8639  ].join(',');
8640
8641  function getElementDescription(element) {
8642    return [
8643      element.className,
8644      element.getAttribute('aria-label'),
8645      element.getAttribute('title'),
8646      element.getAttribute('data-action'),
8647      element.getAttribute('data-button-type'),
8648      element.getAttribute('href'),
8649      element.textContent
8650    ]
8651      .filter(Boolean)
8652      .join(' ')
8653      .replace(/\s+/g, ' ')
8654      .toLowerCase();
8655  }
8656
8657  function containsBagOrCartIcon(element) {
8658    return Boolean(
8659      element.querySelector(
8660        [
8661          'svg use[href*="cart"]',
8662          'svg use[xlink\\:href*="cart"]',
8663          'svg use[href*="bag"]',
8664          'svg use[xlink\\:href*="bag"]',
8665          '.icon-cart',
8666          '.icon--cart',
8667          '.icon-shopping-bag',
8668          '.shopping-bag',
8669          '.fa-shopping-bag',
8670          '.fa-bag-shopping'
8671        ].join(',')
8672      )
8673    );
8674  }
8675
8676  function isProductCardButton(element) {
8677    if (!(element instanceof HTMLElement)) {
8678      return false;
8679    }
8680
8681    if (element.closest(excludedSelectors)) {
8682      return false;
8683    }
8684
8685    if (!element.closest(productCardSelectors)) {
8686      return false;
8687    }
8688
8689    var description = getElementDescription(element);
8690
8691    var matchesButtonText =
8692      /add[\s_-]*to[\s_-]*cart/.test(description) ||
8693      /quick[\s_-]*add/.test(description) ||
8694      /shopping[\s_-]*bag/.test(description) ||
8695      /bag[\s_-]*icon/.test(description);
8696
8697    var matchesKnownSelector = element.matches(
8698      [
8699        '.card-figcaption-button',
8700        '[data-button-type="add-cart"]',
8701        '[data-action*="add-cart"]',
8702        '[data-action*="addToCart"]',
8703        '.quick-add',
8704        '.quickAdd',
8705        '.add-to-cart',
8706        '.addToCart'
8707      ].join(',')
8708    );
8709
8710    return (
8711      matchesButtonText ||
8712      matchesKnownSelector ||
8713      containsBagOrCartIcon(element)
8714    );
8715  }
8716
8717  function hideBagButtons(scope) {
8718    var root = scope || document;
8719
8720    var controls = root.querySelectorAll(
8721      'button, a, [role="button"]'
8722    );
8723
8724    controls.forEach(function (control) {
8725      if (!isProductCardButton(control)) {
8726        return;
8727      }
8728
8729      control.classList.add(HIDE_CLASS);
8730
8731      /*
8732       * Some themes place the background and dimensions on a wrapper
8733       * around the actual button. Hide that wrapper when it contains
8734       * nothing except the shopping-bag control.
8735       */
8736      var parent = control.parentElement;
8737
8738      if (
8739        parent &&
8740        parent.children.length === 1 &&
8741        parent.closest(productCardSelectors) &&
8742        !parent.closest(excludedSelectors)
8743      ) {
8744        parent.classList.add(HIDE_CLASS);
8745      }
8746    });
8747  }
8748
8749  function initialize() {
8750    installStyles();
8751    hideBagButtons(document);
8752
8753    /*
8754     * Product recommendations and carousels may load after the page,
8755     * so this catches newly inserted shopping-bag buttons.
8756     */
8757    var observer = new MutationObserver(function (mutations) {
8758      mutations.forEach(function (mutation) {
8759        mutation.addedNodes.forEach(function (node) {
8760          if (!(node instanceof HTMLElement)) {
8761            return;
8762          }
8763
8764          if (isProductCardButton(node)) {
8765            node.classList.add(HIDE_CLASS);
8766          }
8767
8768          hideBagButtons(node);
8769        });
8770      });
8771    });
8772
8773    observer.observe(document.body, {
8774      childList: true,
8775      subtree: true
8776    });
8777  }
8778
8779  if (document.readyState === 'loading') {
8780    document.addEventListener('DOMContentLoaded', initialize);
8781  } else {
8782    initialize();
8783  }
8784})();
8785</script>
8785<script>
8786(function () {
8787  var FONT_LINK_ID = 'jc-saira-product-font';
8788  var STYLE_ID = 'jc-saira-product-page-styles';
8789  var HEADING_CLASS = 'jc-five-w-heading';
8790
8791  /*
8792   * Load the Saira font once.
8793   */
8794  function loadSairaFont() {
8795    if (document.getElementById(FONT_LINK_ID)) {
8796      return;
8797    }
8798
8799    var fontLink = document.createElement('link');
8800
8801    fontLink.id = FONT_LINK_ID;
8802    fontLink.rel = 'stylesheet';
8803    fontLink.href =
8804      'https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800&display=swap';
8805
8806    document.head.appendChild(fontLink);
8807  }
8808
8809  /*
8810   * Force Saira throughout product-page content without affecting
8811   * SVG icons or icon-font elements.
8812   */
8813  function installProductStyles() {
8814    if (document.getElementById(STYLE_ID)) {
8815      return;
8816    }
8817
8818    var style = document.createElement('style');
8819
8820    style.id = STYLE_ID;
8821
8822    style.textContent = `
8823      /*
8824       * PRODUCT PAGE FONT
8825       */
8826      .productView,
8827      .productView-product,
8828      .productView-details,
8829      .productView-descriptionWrapper,
8830      .productView-description,
8831      .productView-description-tabContent,
8832      .productView-description-tabHeading,
8833      .productView-options,
8834      .productView-info,
8835      .productView-price,
8836      .productView-title,
8837      .productView-brand,
8838      .productView-rating,
8839      .productView-detailsWrapper,
8840      .productView-beforeAlsoBought,
8841      .productView-afterAlsoBought,
8842      .productView-addToCart,
8843      .productView .accordion,
8844      .productView .tabs,
8845      .productView .tab,
8846      .productView .tab-content {
8847        font-family:
8848          "Saira",
8849          system-ui,
8850          -apple-system,
8851          BlinkMacSystemFont,
8852          "Segoe UI",
8853          Arial,
8854          sans-serif !important;
8855      }
8856
8857      /*
8858       * TEXT ELEMENTS INSIDE PRODUCT PAGES
8859       */
8860      .productView h1,
8861      .productView h2,
8862      .productView h3,
8863      .productView h4,
8864      .productView h5,
8865      .productView h6,
8866      .productView p,
8867      .productView li,
8868      .productView a:not(.icon),
8869      .productView span:not(.icon),
8870      .productView strong,
8871      .productView em,
8872      .productView label,
8873      .productView button,
8874      .productView input,
8875      .productView select,
8876      .productView textarea,
8877      .productView summary,
8878      .productView-descriptionWrapper h1,
8879      .productView-descriptionWrapper h2,
8880      .productView-descriptionWrapper h3,
8881      .productView-descriptionWrapper h4,
8882      .productView-descriptionWrapper h5,
8883      .productView-descriptionWrapper h6,
8884      .productView-descriptionWrapper p,
8885      .productView-descriptionWrapper li,
8886      .productView-descriptionWrapper a,
8887      .productView-descriptionWrapper span,
8888      .productView-descriptionWrapper strong,
8889      .productView-descriptionWrapper em,
8890      .productView-description-tabContent h1,
8891      .productView-description-tabContent h2,
8892      .productView-description-tabContent h3,
8893      .productView-description-tabContent h4,
8894      .productView-description-tabContent h5,
8895      .productView-description-tabContent h6,
8896      .productView-description-tabContent p,
8897      .productView-description-tabContent li,
8898      .productView-description-tabContent a,
8899      .productView-description-tabContent span,
8900      .productView-description-tabContent strong,
8901      .productView-description-tabContent em {
8902        font-family:
8903          "Saira",
8904          system-ui,
8905          -apple-system,
8906          BlinkMacSystemFont,
8907          "Segoe UI",
8908          Arial,
8909          sans-serif !important;
8910      }
8911
8912      /*
8913       * DESCRIPTION AND DETAILS ACCORDION LABELS
8914       */
8915      .productView-description-tabHeading,
8916      .productView-description-tabHeading *,
8917      .productView-descriptionWrapper .accordion-title,
8918      .productView-descriptionWrapper .accordion-title * {
8919        font-family:
8920          "Saira",
8921          system-ui,
8922          -apple-system,
8923          BlinkMacSystemFont,
8924          "Segoe UI",
8925          Arial,
8926          sans-serif !important;
8927
8928        font-weight: 600 !important;
8929      }
8930
8931      /*
8932       * THE 5 W'S HEADING
8933       * Applied automatically to every matching product description.
8934       */
8935      .productView .${HEADING_CLASS},
8936      .productView-descriptionWrapper .${HEADING_CLASS},
8937      .productView-description-tabContent .${HEADING_CLASS} {
8938        margin-top: 0 !important;
8939        margin-bottom: 10px !important;
8940
8941        color: #111111 !important;
8942
8943        font-family:
8944          "Saira",
8945          system-ui,
8946          -apple-system,
8947          BlinkMacSystemFont,
8948          "Segoe UI",
8949          Arial,
8950          sans-serif !important;
8951
8952        font-size: clamp(20px, 2vw, 25px) !important;
8953        font-weight: 800 !important;
8954        line-height: 1.15 !important;
8955        letter-spacing: 0 !important;
8956        text-transform: uppercase !important;
8957      }
8958
8959      /*
8960       * Product description body copy
8961       */
8962      .productView-description-tabContent p,
8963      .productView-description-tabContent li,
8964      .productView-descriptionWrapper p,
8965      .productView-descriptionWrapper li {
8966        font-weight: 400 !important;
8967      }
8968
8969      @media (max-width: 700px) {
8970        .productView .${HEADING_CLASS},
8971        .productView-descriptionWrapper .${HEADING_CLASS},
8972        .productView-description-tabContent .${HEADING_CLASS} {
8973          font-size: 21px !important;
8974          line-height: 1.18 !important;
8975        }
8976      }
8977    `;
8978
8979    document.head.appendChild(style);
8980  }
8981
8982  /*
8983   * Detect headings such as:
8984   * The 5 W's of an OPRTR Case
8985   * The 5 W’s of a Vehicle Mount
8986   * The 5Ws of a Quick Disconnect Cable
8987   */
8988  function isFiveWsHeading(element) {
8989    if (!element || !element.textContent) {
8990      return false;
8991    }
8992
8993    var text = element.textContent
8994      .replace(/\s+/g, ' ')
8995      .trim();
8996
8997    return /^the\s+5\s*w(?:['’]s|s)?\s+(?:of|for)\s+.+$/i.test(text);
8998  }
8999
9000  function formatFiveWsHeadings(scope) {
9001    var root = scope || document;
9002
9003    var headings = root.querySelectorAll(
9004      [
9005        '.productView-description-tabContent h1',
9006        '.productView-description-tabContent h2',
9007        '.productView-description-tabContent h3',
9008        '.productView-description-tabContent h4',
9009        '.productView-descriptionWrapper h1',
9010        '.productView-descriptionWrapper h2',
9011        '.productView-descriptionWrapper h3',
9012        '.productView-descriptionWrapper h4',
9013        '.productView h1',
9014        '.productView h2',
9015        '.productView h3',
9016        '.productView h4'
9017      ].join(',')
9018    );
9019
9020    headings.forEach(function (heading) {
9021      if (!isFiveWsHeading(heading)) {
9022        return;
9023      }
9024
9025      heading.classList.add(HEADING_CLASS);
9026
9027      /*
9028       * Standardize the visible apostrophe and capitalization.
9029       * CSS also keeps it uppercase if content changes later.
9030       */
9031      var headingText = heading.textContent
9032        .replace(/\s+/g, ' ')
9033        .trim()
9034        .replace(/^the\s+5\s*w(?:['’]s|s)?\s+/i, "THE 5 W'S ")
9035        .replace(/\s+for\s+/i, ' OF ');
9036
9037      heading.textContent = headingText.toUpperCase();
9038    });
9039  }
9040
9041  function initializeProductTypography() {
9042    loadSairaFont();
9043    installProductStyles();
9044    formatFiveWsHeadings(document);
9045
9046    /*
9047     * Product descriptions and recommendation widgets may be
9048     * inserted after initial page load.
9049     */
9050    var observer = new MutationObserver(function (mutations) {
9051      mutations.forEach(function (mutation) {
9052        mutation.addedNodes.forEach(function (node) {
9053          if (!(node instanceof HTMLElement)) {
9054            return;
9055          }
9056
9057          if (
9058            node.matches('h1, h2, h3, h4') &&
9059            isFiveWsHeading(node)
9060          ) {
9061            node.classList.add(HEADING_CLASS);
9062
9063            var headingText = node.textContent
9064              .replace(/\s+/g, ' ')
9065              .trim()
9066              .replace(
9067                /^the\s+5\s*w(?:['’]s|s)?\s+/i,
9068                "THE 5 W'S "
9069              )
9070              .replace(/\s+for\s+/i, ' OF ');
9071
9072            node.textContent = headingText.toUpperCase();
9073          }
9074
9075          formatFiveWsHeadings(node);
9076        });
9077      });
9078    });
9079
9080    observer.observe(document.body, {
9081      childList: true,
9082      subtree: true
9083    });
9084  }
9085
9086  if (document.readyState === 'loading') {
9087    document.addEventListener(
9088      'DOMContentLoaded',
9089      initializeProductTypography
9090    );
9091  } else {
9092    initializeProductTypography();
9093  }
9094})();
9095</script>
9095
9096        <!-- snippet location footer -->
9097    
9097<script>window.__CF$cv$params={r:'a4323352a86bc6c7',t:'MTc5MDc2MDUzOA==',u:'01a0f1a551da7210ac4fdd4e5d95330e',ut:'rsXD.awjhboSzrjfrKcRh_jAiEdLOfMwHaG_6gsh7t4-1790760538-1.2.1.1-w21kecLiFfxYUgY2Zx6Goti_HbzJcKR6gdiRZn_.Tokade89q39647Qcr8TGsHQuhM3gaV0ryaoxau..K919RlBLVKeAkhgnW010snrlFUU',i:60};(function(){if(!document.body)return;var s=document.createElement('script');s.src='/cdn-cgi/challenge-platform/scripts/precursor/main.js';document.head.appendChild(s);})();</script>
9097</body>
9098</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.