PageSourceSearch

https://unrealstudios.ca/products/view-all

html unrealstudios.ca collected 2026-10-08 13:52:53 UTC 194,765 bytes, 5,031 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta name="theme-color" content="#BE4AFF">
5    <meta property="og:type" content="website">
6    <meta property="og:title" content="Products | Unreal Studios">
7    <meta property="og:description" content="Unreal Studios creates premium FiveM scripts, Minecraft mods, websites, and custom software.">
8    <meta property="og:url" content="https://unrealstudios.ca/products/view-all">
9    <meta property="og:image" content="https://unrealstudios.ca/assets/img/backgrounds/url-embed-banner.png">
10    <meta property="og:image:secure_url" content="https://unrealstudios.ca/assets/img/backgrounds/url-embed-banner.png">
11    <meta property="og:image:type" content="image/png">
12    <meta property="og:image:width" content="468">
13    <meta property="og:image:height" content="60">
14    <meta property="og:image:alt" content="Products | Unreal Studios">
15    <meta name="twitter:card" content="summary_large_image">
16    <meta name="twitter:title" content="Products | Unreal Studios">
17    <meta name="twitter:description" content="Unreal Studios creates premium FiveM scripts, Minecraft mods, websites, and custom software.">
18    <meta name="twitter:image" content="https://unrealstudios.ca/assets/img/backgrounds/url-embed-banner.png">
19    <link rel="canonical" href="https://unrealstudios.ca/products/view-all">
20    <!-- Global social preview v1 -->
21    <meta charset="UTF-8">
22    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
23
24    <title>Products | Unreal Studios</title>
25
26    
26<script src="https://unpkg.com/lucide@latest"></script>
26
27
28    <link rel="preconnect" href="https://fonts.googleapis.com">
29    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
30    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto+Mono:wght@600;700;800&display=swap" rel="stylesheet">
31    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
32
33    <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/normal-apple-touch-icon.png">
34    <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/normal-favicon-32x32.png">
35    <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/normal-favicon-16x16.png">
36    <link rel="icon" type="image/x-icon" href="/assets/img/favicons/normal-favicon.ico">
37    <link rel="manifest" href="/assets/img/favicons/site.webmanifest">
38
39    <link rel="stylesheet" href="/css/public/browse-products.css?v=20261004-old-price-purple-2">
40
41    <!-- Product hover video performance hints -->
42    <link rel="preconnect" href="https://www.youtube.com">
43    <link rel="preconnect" href="https://i.ytimg.com">
44    <link rel="preconnect" href="https://googlevideo.com">
45
46
47</head>
48
49<body>
50
51    <!-- Server-provided state is available before the shared header initializes. -->
52    
52<script>
53        window.__AUTH_USER__ = null;
54        window.__PRODUCTS__ = [{"product_id":1,"title":"Unreal Studios Extra Menu + Livery + Licence Plate [Escrow]","slug":"urs-extra-menu","description":"Vehicle extras, livery, and plate editor system with a clean modern UI.","image_url":"/assets/img/posters/fivem/URS-Vehicle Extras V2.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/6817107","product_url":"/products/urs-extra-menu","video_url":"/assets/videos/extra-menu.mp4\n/assets/videos/extra-menu-guide.mp4","price":"9.99","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"ESX,QBCore,QBox, Standalone"},{"product_id":2,"title":"Unreal Studios Vehicle Hud + AOP + Postal Code [Escrow]","slug":"urs-vehicle-hud","description":"Clean vehicle HUD with AOP display, postal code support, and QBCore integration.","image_url":"/assets/img/posters/fivem/URS-Hud V2.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/6853335","product_url":"/products/urs-vehicle-hud","video_url":"/assets/videos/vehicle-hud.mp4","price":"15.45","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"QBCore, QBox"},{"product_id":3,"title":"Unreal Studios Police Lanyard + Animations [Escrow]","slug":"urs-police-lanyard","description":"Police lanyard system with animations, job checks, and clean interaction flow.","image_url":"/assets/img/posters/fivem/URS-Police Lanyards V2.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/6821318","product_url":"/products/urs-police-lanyard","video_url":"/assets/videos/police-lanyards.mp4","price":"5.99","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"Standalone"},{"product_id":5,"title":"Unreal Studios Music Zones + Playlists + Multiple Locations [Escrow]","slug":"urs-music-zones","description":"Create music zones with playlists, multiple locations, and synchronized playback.","image_url":"/assets/img/posters/fivem/URS-Music Zones V2.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/7106893","product_url":"/products/urs-music-zones","video_url":"/assets/videos/music-zones.mp4\n/assets/videos/music-zones-v3.mp4","price":"11.99","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"ESX,QBCore,QBox,Standalone"},{"product_id":6,"title":"Unreal Studios ControlX [Escrow]","slug":"urs-lvc-controller","description":"Standalone emergency vehicle control system for FiveM with integrated sirens, lighting controls, UVC support, driver settings, and optional Stream Deck integration.\n","image_url":"/assets/img/posters/fivem/URS-Controlx-V3.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/6853245","product_url":"/products/urs-lvc-controller","video_url":"/assets/videos/siren-controller.mp4","price":"20.99","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"Standalone"},{"product_id":7,"title":"Unreal Studios Vehicle Spawner + Job Locks + Multiple Locations [Escrow]","slug":"urs-vehicle-spawner","description":"Job-locked vehicle spawner with configurable locations and clean spawn logic.","image_url":"/assets/img/posters/fivem/URS-Vehicle Spawner V2.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/6853340","product_url":"/products/urs-vehicle-spawner","video_url":"/assets/videos/vehicle-spawner.mp4","price":"4.99","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"QBCore, QBox"},{"product_id":8,"title":"Unreal Studios TAB Bridge Plugin","slug":"urs-tab-bridge","description":"FPP TAB Bridge connects Fake Player Plugin bot data to Velocity network TAB displays.","image_url":"/assets/img/posters/minecraft/URS-FPP Bridge V2.png","checkout_url":"https://modrinth.com/plugin/fpp-tab-bridge","product_url":"/products/urs-tab-bridge","video_url":"/assets/placeholders/videos/product-video.mp4","price":"0.00","old_price":"0.00","discount_label":"v21.1x","game":"Minecraft","frameworks":"Velocity"},{"product_id":9,"title":"Unreal Studios Player Radar Plugin","slug":"urs-player-radar","description":"Player Radar is a highly customizable mod that provides real-time player tracking and a adjustable HUD.","image_url":"/assets/img/posters/minecraft/URS-Player Radars V2.png","checkout_url":"https://modrinth.com/mod/urs-player-radar","product_url":"/products/urs-player-radar","video_url":"/assets/placeholders/videos/product-video.mp4","price":"0.00","old_price":"0.00","discount_label":"v26.3x","game":"Minecraft","frameworks":"Fabric"},{"product_id":10,"title":"Unreal Studios Mace Rituals Plugin","slug":"urs-mace-rituals","description":"Mace Ritual is a plugin built around a one-at-a-time ritual mace system with hard anti-dupe and anti-storage protection.","image_url":"/assets/img/posters/minecraft/URS-Mace Rituals V2.png","checkout_url":"https://modrinth.com/plugin/mace-rituals","product_url":"/products/urs-mace-rituals","video_url":"https://cdn.modrinth.com/data/kCdA5Zpx/images/ad24ba0c17e327bab20fbbadca2ed962424eb222.gif","price":"0.00","old_price":"0.00","discount_label":"v26.2x","game":"Minecraft","frameworks":"Paper, Purpur, Spigot, Bukkit"},{"product_id":11,"title":"Unreal Studios Mythical Cards Plugin","slug":"urs-mythical-cards","description":"Mythical Cards is a paper plugin that grants players the ability to obtain powers from cards.","image_url":"/assets/img/posters/minecraft/URS-Mythical Cards V2.png","checkout_url":"https://www.curseforge.com/minecraft/bukkit-plugins/mythical-cards","product_url":"/products/urs-mythical-cards","video_url":"/assets/placeholders/videos/product-video.mp4","price":"0.00","old_price":"0.00","discount_label":"v26.2x","game":"Minecraft","frameworks":"Paper, Purpur, Spigot, Bukkit"},{"product_id":12,"title":"Unreal Studios Mythical Cards Rebinded","slug":"urs-mythical-cards-rebinded","description":"Mythical Cards Rebinded is a Fabric mod that grants players the ability to rebind the Mythical Cards keybinds.","image_url":"/assets/img/posters/minecraft/URS-Cards Rebinded V2.png","checkout_url":"https://modrinth.com/mod/mythical-cards-rebinded","product_url":"/products/urs-mythical-cards-rebinded","video_url":"/assets/placeholders/videos/product-video.mp4","price":"0.00","old_price":"0.00","discount_label":"v26.2x","game":"Minecraft","frameworks":"Fabric"},{"product_id":13,"title":"Unreal Studios Trailer Support [Escrow]","slug":"urs-trailer-support","description":"A menu to build trailer and vehicle combos and spawn them together, as well as attach and detach them.","image_url":"/assets/img/posters/fivem/URS-Trailer Support V2.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/7600741","product_url":"/products/urs-trailer-support","video_url":"/assets/videos/trailer-support.mp4","price":"8.99","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"ESX,QBCore,QBox"},{"product_id":14,"title":"Unreal Studios No Extras [Open-Source]","slug":"urs-no-extras","description":"A script that is used to disable all extras on a specific vehicle and model.","image_url":"/assets/img/posters/fivem/URS-No Extras V2.png","checkout_url":"https://github.com/OfficialUnrealNetwork/URS-No-Extras","product_url":"/products/urs-no-extras","video_url":"/assets/placeholders/videos/product-video.mp4","price":"0.00","old_price":"0.00","discount_label":"v1.1.0","game":"FiveM","frameworks":"Standalone"}];
55    </script>
55
56
57    <!-- Unreal Studios shared header -->
58<style id="urs-shared-header-base">
59/* Keep the layout viewport width identical between short and long pages.
60   Prevents the shared header from shifting sideways when the vertical scrollbar
61   appears or disappears during navigation. */
62html {
63    /* Always reserve the desktop scrollbar track so a reload cannot resize the viewport. */
64    overflow-y: scroll;
65    scrollbar-gutter: stable;
66}
67
68/* =========================================================
69       EXACT PRODUCTS-PAGE TOPBAR LANGUAGE
70       ========================================================= */
71
72    #navbar.topbar {
73        position: fixed !important;
74        top: 0 !important;
75        left: 0 !important;
76        right: 0 !important;
77        z-index: 1000 !important;
78        width: 100% !important;
79        height: 64px !important;
80        min-height: 64px !important;
81        padding: 0 !important;
82        display: block !important;
83        border: 0 !important;
84        border-bottom: 1px solid rgba(255,255,255,.06) !important;
85        /* Keep the bar on one stable paint layer. A sticky backdrop-filter was
86           forcing Chromium to rebuild the header layer during full page navs. */
87        background: #09090d !important;
88        box-shadow: none !important;
89        backdrop-filter: none !important;
90        -webkit-backdrop-filter: none !important;
91        isolation: isolate !important;
92    }
93
94    .urs-topbar-flow-spacer {
95        width: 100%;
96        height: 64px;
97        min-height: 64px;
98        flex: 0 0 64px;
99        pointer-events: none;
100    }
101
102    #navbar.topbar::after {
103        display: none !important;
104    }
105
106    #navbar .nav-inner {
107        position: relative;
108        /* Lock the header to the visual viewport instead of the document's
109           scrollable client width. Chrome can briefly remove/re-add the
110           scrollbar during a full navigation; 100% + margin:auto then moves
111           the whole header by half a scrollbar width. Using vw for both the
112           width and left gutter keeps every top-bar item pixel-stable. */
113        width: min(1440px, calc(100vw - 48px));
114        height: 100%;
115        margin: 0;
116        margin-left: max(24px, calc((100vw - 1440px) / 2));
117        padding: 0;
118        display: flex;
119        align-items: center;
120        justify-content: space-between;
121        gap: 0;
122    }
123
124    #navbar .topbar-left {
125        min-width: 0;
126        display: inline-flex;
127        align-items: center;
128        gap: 16px;
129    }
130
131    @media (min-width: 1181px) {
132        #navbar .topbar-left {
133            /* Same visual offset without promoting this side of the header to
134               a separate transformed compositor layer. */
135            margin-left: 34px;
136            transform: none !important;
137        }
138    }
139
140    #navbar .brand {
141        min-width: 0;
142        display: inline-flex;
143        align-items: center;
144        flex: 0 0 auto;
145    }
146
147    #navbar .brand img {
148        display: block;
149        width: 106px;
150        height: auto;
151    }
152
153    #navbar .topbar-socials {
154        display: inline-flex;
155        align-items: center;
156        gap: 3px;
157    }
158
159    #navbar .topbar-social-divider {
160        width: 1px;
161        height: 20px;
162        margin-right: 8px;
163        background: rgba(255,255,255,.07);
164    }
165
166    #navbar .topbar-socials a {
167        width: 31px;
168        height: 31px;
169        display: inline-flex;
170        align-items: center;
171        justify-content: center;
172        border: 0;
173        border-radius: 8px;
174        background: transparent;
175        color: rgba(255,255,255,.34);
176        font-size: 13px;
177        transition: color 140ms ease, background 140ms ease, transform 140ms ease;
178    }
179
180    #navbar .topbar-socials a:hover {
181        color: rgba(235,222,243,.92);
182        background: rgba(185,143,214,.055);
183        transform: translateY(-1px);
184    }
185
186    #navbar .desktop-nav {
187        position: absolute;
188        inset: 0;
189        height: 100%;
190        display: flex;
191        align-items: center;
192        justify-content: center;
193        gap: 2px;
194        transform: none !important;
195        pointer-events: none;
196    }
197
198    #navbar .desktop-nav .nav-link {
199        pointer-events: auto;
200    }
201
202    #navbar .nav-link {
203        position: relative;
204        height: 100%;
205        padding: 0 15px;
206        display: inline-flex;
207        align-items: center;
208        justify-content: center;
209        border-radius: 0;
210        background: transparent !important;
211        color: rgba(255,255,255,.44);
212        font-size: 12.5px;
213        font-weight: 690;
214        letter-spacing: -.01em;
215        transition: color 150ms ease;
216    }
217
218    #navbar .nav-link:hover {
219        color: rgba(255,255,255,.78);
220    }
221
222    #navbar .nav-link.active {
223        color: rgba(255,255,255,.92);
224    }
225
226    #navbar .nav-link.active::after {
227        display: none !important;
228    }
229
230    #navbar .desktop-actions {
231        position: relative;
232        z-index: 2;
233        margin-left: auto;
234        display: flex;
235        align-items: center;
236        justify-content: flex-end;
237        gap: 3px;
238        opacity: 1 !important;
239        visibility: visible !important;
240    }
241
242    #navbar .basket-icon,
243    #navbar .basket-icon > svg,
244    #navbar #currency-widget-container,
245    #navbar #desktopAuth {
246        opacity: 1 !important;
247        visibility: visible !important;
248    }
249
250    #navbar .desktop-actions::before {
251        content: "";
252        width: 1px;
253        height: 21px;
254        margin-right: 7px;
255        background: rgba(255,255,255,.065);
256    }
257
258    #navbar .icon-btn,
259    #navbar #trigger-btn {
260        height: 36px;
261        border: 0;
262        border-radius: 8px;
263        background: transparent;
264        color: rgba(255,255,255,.54);
265        box-shadow: none;
266        cursor: pointer;
267    }
268
269    #navbar .icon-btn:hover,
270    #navbar #trigger-btn:hover,
271    #navbar #trigger-btn[aria-expanded="true"] {
272        background: rgba(255,255,255,.04) !important;
273        color: white !important;
274    }
275
276    #navbar .basket-icon {
277        width: 36px;
278        min-width: 36px;
279        padding: 0;
280        display: inline-flex;
281        align-items: center;
282        justify-content: center;
283    }
284
285    #navbar .basket-icon svg,
286    #navbar .basket-icon i {
287        width: 15px;
288        height: 15px;
289    }
290
291    #currency-widget-container {
292        position: relative;
293        z-index: 1010;
294    }
295
296    #trigger-btn {
297        width: auto !important;
298        min-width: 0 !important;
299        padding: 0 7px !important;
300        display: inline-flex !important;
301        align-items: center !important;
302        justify-content: center !important;
303        gap: 5px !important;
304        color: rgba(255,255,255,.58) !important;
305    }
306
307    #trigger-btn #active-label {
308        color: rgba(255,255,255,.62) !important;
309        font-size: 11px !important;
310        font-weight: 700 !important;
311        line-height: 1 !important;
312        letter-spacing: .035em !important;
313    }
314
315    #trigger-btn #widget-arrow {
316        width: 11px !important;
317        height: 11px !important;
318        color: rgba(255,255,255,.25) !important;
319        transition: transform 150ms ease, color 150ms ease;
320    }
321
322    #trigger-btn[aria-expanded="true"] #widget-arrow {
323        transform: rotate(180deg);
324    }
325
326    #dropdown-wrapper {
327        position: fixed !important;
328        top: calc(100% + 7px) !important;
329        right: -7px !important;
330        z-index: 6500 !important;
331        width: 228px !important;
332        max-width: calc(100vw - 24px) !important;
333        margin: 0 !important;
334        padding: 0 !important;
335        border: 0 !important;
336        background: transparent !important;
337        box-shadow: none !important;
338    }
339
340    .currency-menu {
341        width: 100%;
342        overflow: hidden;
343        padding: 6px;
344        border: 1px solid rgba(255,255,255,.10);
345        border-radius: 14px;
346        background: rgba(12,14,18,.38);
347        box-shadow: 0 18px 48px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08);
348        backdrop-filter: blur(44px) saturate(150%) brightness(.88);
349        -webkit-backdrop-filter: blur(44px) saturate(150%) brightness(.88);
350    }
351
352    .currency-menu-title {
353        height: 30px;
354        padding: 0 8px;
355        display: flex;
356        align-items: center;
357        margin-bottom: 4px;
358        border-bottom: 1px solid rgba(255,255,255,.045);
359        color: rgba(255,255,255,.30);
360        font-size: 9px;
361        font-weight: 720;
362        letter-spacing: .11em;
363        text-transform: uppercase;
364    }
365
366    #currency-grid {
367        width: 100% !important;
368        max-height: 310px !important;
369        overflow-y: auto !important;
370        padding: 0 !important;
371        display: flex !important;
372        flex-direction: column !important;
373        gap: 1px !important;
374        border: 0 !important;
375        border-radius: 0 !important;
376        background: transparent !important;
377        box-shadow: none !important;
378        scrollbar-width: thin;
379        scrollbar-color: rgba(185,143,214,.28) transparent;
380    }
381
382    #currency-grid .currency-btn {
383        position: relative;
384        width: 100% !important;
385        height: 34px !important;
386        padding: 0 30px 0 9px !important;
387        display: grid !important;
388        grid-template-columns: 42px minmax(0,1fr) !important;
389        align-items: center !important;
390        gap: 5px !important;
391        border: 0 !important;
392        border-radius: 7px !important;
393        background: transparent !important;
394        color: rgba(255,255,255,.72) !important;
395        text-align: left !important;
396        font-size: 10.5px !important;
397        line-height: 1 !important;
398        font-weight: 720 !important;
399        letter-spacing: .03em !important;
400    }
401
402    #currency-grid .currency-btn:hover {
403        background: rgba(255,255,255,.035) !important;
404        color: rgba(255,255,255,.92) !important;
405    }
406
407    #currency-grid .currency-btn.active {
408        background: rgba(185,143,214,.08) !important;
409        color: rgba(238,226,245,.96) !important;
410    }
411
412    #navbar .login-pill {
413        height: 36px;
414        padding: 0 8px;
415        display: inline-flex;
416        align-items: center;
417        gap: 6px;
418        border: 0;
419        border-radius: 8px;
420        background: transparent;
421        color: rgba(232,218,240,.82);
422        font-size: 11.5px;
423        font-weight: 700;
424    }
425
426    #navbar .login-pill:hover {
427        background: rgba(255,255,255,.04);
428        color: #fff;
429    }
430
431    #mobile-menu-btn {
432        display: none;
433        width: 36px;
434        min-width: 36px;
435        height: 36px;
436        border: 0;
437        border-radius: 8px;
438        background: transparent;
439        color: rgba(255,255,255,.58);
440    }
441
442@media (max-width: 1180px) {
443    #navbar .desktop-nav,
444    #navbar .desktop-actions {
445        display: none !important;
446    }
447
448    #navbar .topbar-left {
449        transform: none;
450    }
451
452    #navbar .topbar-socials {
453        display: none;
454    }
455
456    #mobile-menu-btn {
457        display: inline-flex !important;
458        align-items: center;
459        justify-content: center;
460    }
461}
462
463@media (max-width: 680px) {
464    #navbar .nav-inner {
465        width: min(calc(100% - 40px), 1380px) !important;
466        margin-left: 24px !important;
467    }
468
469    #navbar.topbar {
470        height: 60px !important;
471        min-height: 60px !important;
472    }
473
474    #navbar .brand img {
475        width: 94px !important;
476    }
477}
478/* Screenshot-calibrated alignment: align KEY / INITIATIVES text stack with EXPLORE / UNREAL STUDIOS. */
479.about-mega-initiatives > h3{
480    align-self:start!important;
481    margin:8px 0 0 0!important;
482    padding:0!important;
483    transform:none!important;
484}
485
486
487/* Final title alignment: match actual Explore text wrapper position. */
488.about-mega-initiatives > h3{
489    height:55px!important;
490    margin:0!important;
491    padding:0!important;
492    display:flex!important;
493    flex-direction:column!important;
494    justify-content:center!important;
495    gap:1px!important;
496    transform:translateY(7px)!important;
497}
498
499</style>
500
501    <style id="urs-topbar-auth-currency-exact-match">
502    .hidden {
503        display: none !important;
504    }
505
506    /* =========================================================
507       CURRENCY — EXACT PRODUCT PAGE MATCH
508       ========================================================= */
509
510    #currency-widget-container {
511        position: relative !important;
512        z-index: 1100 !important;
513    }
514
515    #trigger-btn {
516        width: auto !important;
517        min-width: 0 !important;
518        height: 34px !important;
519        padding: 0 7px !important;
520        display: inline-flex !important;
521        align-items: center !important;
522        justify-content: center !important;
523        gap: 5px !important;
524        border: 0 !important;
525        border-radius: 7px !important;
526        background: transparent !important;
527        box-shadow: none !important;
528        color: rgba(255,255,255,.58) !important;
529        cursor: pointer !important;
530    }
531
532    #trigger-btn #active-label {
533        color: rgba(255,255,255,.62) !important;
534        font-size: 11px !important;
535        font-weight: 700 !important;
536        line-height: 1 !important;
537        letter-spacing: .035em !important;
538    }
539
540    #trigger-btn #widget-arrow {
541        width: 11px !important;
542        height: 11px !important;
543        color: rgba(255,255,255,.25) !important;
544        transition:
545            transform 150ms ease,
546            color 150ms ease !important;
547    }
548
549    #trigger-btn:hover,
550    #trigger-btn[aria-expanded="true"] {
551        background: rgba(255,255,255,.035) !important;
552    }
553
554    #trigger-btn:hover #active-label,
555    #trigger-btn[aria-expanded="true"] #active-label {
556        color: rgba(245,240,248,.9) !important;
557    }
558
559    #trigger-btn:hover #widget-arrow,
560    #trigger-btn[aria-expanded="true"] #widget-arrow {
561        color: rgba(198,168,216,.62) !important;
562    }
563
564    #trigger-btn[aria-expanded="true"] #widget-arrow {
565        transform: rotate(180deg) !important;
566    }
567
568    #dropdown-wrapper {
569        position: fixed !important;
570        top: calc(100% + 7px) !important;
571        right: -7px !important;
572        left: auto !important;
573        width: 228px !important;
574        max-width: calc(100vw - 24px) !important;
575        height: auto !important;
576        margin: 0 !important;
577        padding: 6px !important;
578        border: 1px solid rgba(255,255,255,.14) !important;
579        border-radius: 13px !important;
580        background: rgba(12,14,18,.44) !important;
581        box-shadow: 0 18px 48px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.075), 0 0 0 1px rgba(0,0,0,.16) !important;
582        backdrop-filter: blur(48px) saturate(140%) brightness(.86) !important;
583        -webkit-backdrop-filter: blur(48px) saturate(140%) brightness(.86) !important;
584        overflow: hidden !important;
585        transform-origin: top right !important;
586        z-index: 995 !important;
587    }
588
589    #dropdown-wrapper[style*="display: block"],
590    #dropdown-wrapper:not([style*="display: none"]) {
591        animation: none !important;
592    }
593
594    .currency-menu {
595        width: 100% !important;
596        overflow: visible !important;
597        padding: 0 !important;
598        border: 0 !important;
599        border-radius: 0 !important;
600        background: transparent !important;
601        box-shadow: none !important;
602        backdrop-filter: none !important;
603        -webkit-backdrop-filter: none !important;
604    }
605
606    .currency-menu-title {
607        height: 30px !important;
608        padding: 0 8px !important;
609        display: flex !important;
610        align-items: center !important;
611        margin: 0 0 4px !important;
612        border-bottom: 1px solid rgba(255,255,255,.045) !important;
613        color: rgba(255,255,255,.30) !important;
614        font-size: 9px !important;
615        font-weight: 720 !important;
616        letter-spacing: .11em !important;
617        text-transform: uppercase !important;
618    }
619
620    #currency-grid {
621        width: 100% !important;
622        max-height: 310px !important;
623        overflow-y: auto !important;
624        padding: 0 !important;
625        display: flex !important;
626        flex-direction: column !important;
627        grid-template-columns: none !important;
628        gap: 1px !important;
629        border: 0 !important;
630        border-radius: 0 !important;
631        background: transparent !important;
632        box-shadow: none !important;
633        scrollbar-width: thin !important;
634        scrollbar-color: rgba(185,143,214,.22) rgba(255,255,255,.02) !important;
635    }
636
637    #currency-grid::-webkit-scrollbar {
638        width: 6px;
639    }
640
641    #currency-grid::-webkit-scrollbar-track {
642        background: rgba(255,255,255,.02);
643        border-radius: 999px;
644    }
645
646    #currency-grid::-webkit-scrollbar-thumb {
647        border-radius: 999px;
648        background: rgba(185,143,214,.22);
649    }
650
651    #currency-grid .currency-btn {
652        position: relative !important;
653        width: 100% !important;
654        min-width: 0 !important;
655        height: 34px !important;
656        padding: 0 30px 0 9px !important;
657        display: grid !important;
658        grid-template-columns: 42px minmax(0,1fr) !important;
659        align-items: center !important;
660        gap: 5px !important;
661        border: 0 !important;
662        border-radius: 7px !important;
663        background: transparent !important;
664        box-shadow: none !important;
665        color: rgba(255,255,255,.72) !important;
666        text-align: left !important;
667        font-size: 10.5px !important;
668        line-height: 1 !important;
669        font-weight: 720 !important;
670        letter-spacing: .03em !important;
671        cursor: pointer !important;
672        transition:
673            background 120ms ease,
674            color 120ms ease !important;
675    }
676
677    #currency-grid .currency-btn::after {
678        display: block !important;
679        min-width: 0 !important;
680        overflow: hidden !important;
681        color: rgba(255,255,255,.30) !important;
682        font-size: 9.5px !important;
683        line-height: 1 !important;
684        font-weight: 500 !important;
685        letter-spacing: 0 !important;
686        text-overflow: ellipsis !important;
687        white-space: nowrap !important;
688    }
689
690    #currency-grid .currency-btn[data-currency="AUD"]::after { content: "Australian Dollar"; }
691    #currency-grid .currency-btn[data-currency="BRL"]::after { content: "Brazilian Real"; }
692    #currency-grid .currency-btn[data-currency="CAD"]::after { content: "Canadian Dollar"; }
693    #currency-grid .currency-btn[data-currency="DKK"]::after { content: "Danish Krone"; }
694    #currency-grid .currency-btn[data-currency="EUR"]::after { content: "Euro"; }
695    #currency-grid .currency-btn[data-currency="NOK"]::after { content: "Norwegian Krone"; }
696    #currency-grid .currency-btn[data-currency="NZD"]::after { content: "New Zealand Dollar"; }
697    #currency-grid .currency-btn[data-currency="PLN"]::after { content: "Polish Zloty"; }
698    #currency-grid .currency-btn[data-currency="GBP"]::after { content: "British Pound"; }
699    #currency-grid .currency-btn[data-currency="SEK"]::after { content: "Swedish Krona"; }
700    #currency-grid .currency-btn[data-currency="TRY"]::after { content: "Turkish Lira"; }
701    #currency-grid .currency-btn[data-currency="USD"]::after { content: "US Dollar"; }
702
703    #currency-grid .currency-btn:hover {
704        background: rgba(255,255,255,.04) !important;
705        color: rgba(255,255,255,.94) !important;
706        transform: none !important;
707    }
708
709    #currency-grid .currency-btn:hover::after {
710        color: rgba(255,255,255,.46) !important;
711    }
712
713    #currency-grid .currency-btn.active {
714        background: rgba(185,143,214,.085) !important;
715        color: rgba(235,220,244,.96) !important;
716        border: 0 !important;
717        box-shadow: none !important;
718        transform: none !important;
719    }
720
721    #currency-grid .currency-btn.active::before {
722        content: "✓" !important;
723        position: absolute !important;
724        right: 10px !important;
725        top: 50% !important;
726        transform: translateY(-50%) !important;
727        color: rgba(204,173,222,.82) !important;
728        font-size: 10px !important;
729        font-weight: 800 !important;
730    }
731
732    #currency-grid .currency-btn.active::after {
733        color: rgba(211,190,224,.55) !important;
734    }
735
736    /* =========================================================
737       AUTH / ACCOUNT — EXACT PRODUCT PAGE MATCH
738       ========================================================= */
739
740    #desktopAuth.auth-wrap {
741        position: relative !important;
742        z-index: 1200 !important;
743        width: 104px !important;
744        min-width: 104px !important;
745        flex: 0 0 104px !important;
746        display: inline-flex !important;
747        align-items: center !important;
748        justify-content: flex-end !important;
749    }
750
751    /* Keep auth content out of paint until we have either a cached or verified state. */
752    #desktopAuth.auth-wrap:not([data-auth-ready="true"]) {
753        visibility: hidden !important;
754    }
755
756    #open-login.login-pill {
757        width: 104px !important;
758        min-width: 104px !important;
759        justify-content: center !important;
760        height: 34px !important;
761        padding: 0 8px !important;
762        display: inline-flex !important;
763        align-items: center !important;
764        gap: 6px !important;
765        border: 0 !important;
766        border-radius: 8px !important;
767        background: transparent !important;
768        box-shadow: none !important;
769        color: rgba(232,218,240,.82) !important;
770        font-size: 11.5px !important;
771        font-weight: 700 !important;
772    }
773
774    #open-login.login-pill:hover {
775        background: rgba(255,255,255,.04) !important;
776        color: #fff !important;
777    }
778
779    /* Logged-out button stays close to Currency while the 104px auth slot remains reserved. */
780    #desktopAuth.auth-wrap:has(#open-login:not(.hidden):not([hidden])) {
781        justify-content: flex-start !important;
782    }
783    #desktopAuth.auth-wrap #open-login.login-pill:not(.hidden):not([hidden]) {
784        width: auto !important;
785        min-width: 0 !important;
786        max-width: none !important;
787        flex: 0 0 auto !important;
788        padding-inline: 8px !important;
789    }
790
791    #desktopUserBtn.user-pill {
792        width: 104px !important;
793        min-width: 104px !important;
794        max-width: 104px !important;
795        height: 34px !important;
796        padding: 0 6px 0 3px !important;
797        display: inline-flex !important;
798        align-items: center !important;
799        gap: 6px !important;
800        border: 0 !important;
801        border-radius: 8px !important;
802        background: transparent !important;
803        box-shadow: none !important;
804        color: rgba(255,255,255,.72) !important;
805        cursor: pointer !important;
806        user-select: none !important;
807        -webkit-user-select: none !important;
808    }
809
810    #desktopUserBtn.user-pill:hover,
811    #desktopUserBtn.user-pill[aria-expanded="true"] {
812        background: rgba(255,255,255,.03) !important;
813    }
814
815    #desktopUserBtn .user-avatar {
816        width: 26px !important;
817        height: 26px !important;
818        flex: 0 0 26px !important;
819        display: block !important;
820        border-radius: 8px !important;
821        border: 1px solid rgba(255,255,255,.075) !important;
822        object-fit: cover !important;
823        background: rgba(185,143,214,.10) !important;
824    }
825
826    #desktopUserBtn .user-name {
827        flex: 1 1 auto !important;
828        min-width: 0 !important;
829        max-width: none !important;
830        overflow: hidden !important;
831        color: rgba(255,255,255,.58) !important;
832        font-size: 9.5px !important;
833        font-weight: 620 !important;
834        line-height: 1 !important;
835        text-overflow: ellipsis !important;
836        white-space: nowrap !important;
837    }
838
839    #desktopUserBtn:hover .user-name,
840    #desktopUserBtn[aria-expanded="true"] .user-name {
841        color: rgba(255,255,255,.86) !important;
842    }
843
844    #desktopUserBtn > svg:last-child,
845    #desktopUserBtn > i:last-child {
846        width: 11px !important;
847        height: 11px !important;
848        color: rgba(255,255,255,.24) !important;
849        transition:
850            color 120ms ease,
851            transform 120ms ease !important;
852    }
853
854    #desktopUserBtn[aria-expanded="true"] > svg:last-child,
855    #desktopUserBtn[aria-expanded="true"] > i:last-child {
856        color: rgba(202,178,216,.65) !important;
857        transform: rotate(180deg) !important;
858    }
859
860    #desktopUserDropdown.urs-account-menu-minimal {
861        position: fixed !important;
862        top: 72px !important;
863        right: 12px !important;
864        left: auto !important;
865        z-index: 995 !important;
866        width: 220px !important;
867        margin: 0 !important;
868        padding: 5px !important;
869        overflow: hidden !important;
870        border: 1px solid rgba(255,255,255,.10) !important;
871        border-radius: 13px !important;
872        background: rgba(12,14,18,.38) !important;
873        box-shadow: 0 22px 56px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.075) !important;
874        backdrop-filter: blur(44px) saturate(150%) brightness(.88) !important;
875        -webkit-backdrop-filter: blur(44px) saturate(150%) brightness(.88) !important;
876        opacity: 1 !important;
877        visibility: hidden !important;
878        pointer-events: none !important;
879        transform: translateY(calc(-100% - 16px)) !important;
880        transform-origin: top right !important;
881        transition: transform 220ms cubic-bezier(.4,0,.2,1), visibility 0s linear 220ms !important;
882    }
883
884    #desktopUserDropdown.urs-account-menu-minimal.active {
885        visibility: visible !important;
886        pointer-events: auto !important;
887        transform: translateY(0) !important;
888        transition: transform 280ms cubic-bezier(.16,1,.3,1), visibility 0s linear 0s !important;
889    }
890
891    #desktopUserDropdown.urs-account-menu-minimal > * {
892        opacity: 1 !important;
893        transform: none !important;
894        transition: none !important;
895    }
896
897    .urs-account-mini-profile {
898        min-height: 48px !important;
899        margin-bottom: 2px !important;
900        border-radius: 9px !important;
901        background: rgba(255,255,255,.018) !important;
902        padding: 6px 7px !important;
903        display: flex !important;
904        align-items: center !important;
905        gap: 7px !important;
906    }
907
908    .urs-account-mini-profile #dropdownUserAvatar {
909        width: 32px !important;
910        height: 32px !important;
911        flex: 0 0 32px !important;
912        display: block !important;
913        border-radius: 8px !important;
914        border: 1px solid rgba(255,255,255,.09) !important;
915        object-fit: cover !important;
916        background: rgba(255,255,255,.035) !important;
917        box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
918    }
919
920    .urs-account-mini-identity {
921        min-width: 0 !important;
922        display: flex !important;
923        flex-direction: column !important;
924        gap: 3px !important;
925    }
926
927    #desktopUserDropdown.urs-account-menu-minimal .user-dropdown-name {
928        margin: 0 !important;
929        max-width: 150px !important;
930        overflow: hidden !important;
931        color: rgba(255,255,255,.94) !important;
932        font-size: 11px !important;
933        line-height: 1 !important;
934        font-weight: 720 !important;
935        letter-spacing: -.01em !important;
936        text-overflow: ellipsis !important;
937        white-space: nowrap !important;
938    }
939
940    #desktopUserDropdown.urs-account-menu-minimal .user-dropdown-sub {
941        margin: 0 !important;
942        max-width: 150px !important;
943        overflow: hidden !important;
944        color: rgba(255,255,255,.38) !important;
945        font-size: 8px !important;
946        line-height: 1 !important;
947        font-weight: 560 !important;
948        text-overflow: ellipsis !important;
949        white-space: nowrap !important;
950    }
951
952    .urs-account-mini-links {
953        padding: 4px 1px !important;
954        display: flex !important;
955        flex-direction: column !important;
956        gap: 2px !important;
957        border-top: 1px solid rgba(255,255,255,.055) !important;
958    }
959
960    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link,
961    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout {
962        position: relative !important;
963        width: 100% !important;
964        height: 32px !important;
965        min-height: 32px !important;
966        padding: 0 7px !important;
967        display: flex !important;
968        align-items: center !important;
969        justify-content: flex-start !important;
970        gap: 7px !important;
971        border: 1px solid transparent !important;
972        border-radius: 7px !important;
973        background: transparent !important;
974        box-shadow: none !important;
975        color: rgba(255,255,255,.57) !important;
976        text-decoration: none !important;
977        font-size: 10px !important;
978        font-weight: 620 !important;
979        transition: background 130ms ease, color 130ms ease, border-color 130ms ease !important;
980    }
981
982    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link > svg,
983    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link > i,
984    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout > svg,
985    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout > i {
986        width: 17px !important;
987        height: 17px !important;
988        flex: 0 0 17px !important;
989        padding: 0 !important;
990        box-sizing: border-box !important;
991        border: 0 !important;
992        border-radius: 0 !important;
993        background: transparent !important;
994        color: rgba(207,188,220,.58) !important;
995        stroke-width: 1.8 !important;
996    }
997
998    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link:not(.urs-account-staff-link)::after {
999        content: "›";
1000        margin-left: auto;
1001        color: rgba(255,255,255,.20);
1002        font-size: 14px;
1003        line-height: 1;
1004        font-weight: 400;
1005        transform: translateY(-1px);
1006    }
1007
1008    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link:hover {
1009        background: rgba(255,255,255,.045) !important;
1010        border-color: rgba(255,255,255,.045) !important;
1011        color: rgba(255,255,255,.92) !important;
1012    }
1013
1014    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link:hover > svg,
1015    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link:hover > i {
1016        background: transparent !important;
1017        color: rgba(222,205,233,.82) !important;
1018    }
1019
1020    .urs-account-mini-divider {
1021        height: 1px !important;
1022        margin: 3px 3px !important;
1023        background: rgba(255,255,255,.055) !important;
1024    }
1025
1026    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout {
1027        margin: 1px 2px 2px !important;
1028        width: calc(100% - 4px) !important;
1029        color: rgba(255,255,255,.42) !important;
1030    }
1031
1032    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout:hover {
1033        background: rgba(255,84,110,.05) !important;
1034        border-color: rgba(255,84,110,.06) !important;
1035        color: rgba(255,144,160,.88) !important;
1036    }
1037
1038    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout:hover > svg,
1039    #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout:hover > i {
1040        color: rgba(255,144,160,.78) !important;
1041        background: rgba(255,84,110,.035) !important;
1042    }
1043
1044    #desktopPartnerSection[hidden],
1045    #mobilePartnerLink[hidden],
1046    #desktopStaffSection[hidden],
1047    #mobileStaffLink[hidden] {
1048        display: none !important;
1049    }
1050
1051    #desktopUserDropdown.urs-account-menu-minimal .urs-account-staff-section {
1052        display: block;
1053        padding: 2px 1px !important;
1054    }
1055
1056    #desktopUserDropdown.urs-account-menu-minimal .urs-account-staff-link {
1057        height: 32px !important;
1058        margin: 0 !important;
1059        padding: 0 7px !important;
1060        border: 1px solid transparent !important;
1061        border-radius: 7px !important;
1062        color: rgba(218,200,230,.76) !important;
1063        background: transparent !important;
1064        box-shadow: none !important;
1065    }
1066
1067    #desktopUserDropdown.urs-account-menu-minimal .urs-account-staff-link > svg,
1068    #desktopUserDropdown.urs-account-menu-minimal .urs-account-staff-link > i {
1069        width: 16px !important;
1070        height: 16px !important;
1071        flex: 0 0 16px !important;
1072        padding: 0 !important;
1073        border: 0 !important;
1074        border-radius: 0 !important;
1075        background: transparent !important;
1076        color: rgba(195,164,214,.72) !important;
1077    }
1078
1079    #desktopUserDropdown.urs-account-menu-minimal .urs-account-staff-link:hover {
1080        color: rgba(244,236,249,.96) !important;
1081        background: rgba(185,143,214,.055) !important;
1082        border-color: transparent !important;
1083        box-shadow: none !important;
1084    }
1085
1086    #desktopUserDropdown.urs-account-menu-minimal .urs-account-staff-link::after {
1087        content: "›";
1088        margin-left: 3px;
1089        color: rgba(224,204,236,.26);
1090        font-size: 13px;
1091        line-height: 1;
1092        transform: translateY(-1px);
1093    }
1094
1095    .urs-account-staff-badge {
1096        margin-left: auto !important;
1097        min-width: 30px !important;
1098        height: 16px !important;
1099        padding: 0 5px !important;
1100        display: inline-flex !important;
1101        align-items: center !important;
1102        justify-content: center !important;
1103        border: 1px solid rgba(185,143,214,.13) !important;
1104        border-radius: 999px !important;
1105        color: rgba(221,200,234,.62) !important;
1106        background: rgba(185,143,214,.03) !important;
1107        box-shadow: none !important;
1108        font-size: 6px !important;
1109        line-height: 1 !important;
1110        font-weight: 800 !important;
1111        letter-spacing: .09em !important;
1112    }
1113
1114
1115    /* Used only when another top-bar dropdown replaces the current one. */
1116    #desktopUserDropdown.urs-topbar-instant-close,
1117    #dropdown-wrapper.urs-topbar-instant-close,
1118    #aboutMegaMenu.urs-topbar-instant-close {
1119        display: none !important;
1120        visibility: hidden !important;
1121        opacity: 0 !important;
1122        pointer-events: none !important;
1123        transition: none !important;
1124        animation: none !important;
1125    }
1126
1127    .urs-topbar-instant-close *,
1128    .urs-topbar-instant-close::before,
1129    .urs-topbar-instant-close::after,
1130    .urs-topbar-instant-close *::before,
1131    .urs-topbar-instant-close *::after {
1132        transition: none !important;
1133        animation: none !important;
1134    }
1135</style><style id="urs-auth-logged-out-safety">
1136    #desktopUserBtn.hidden {
1137        display: none !important;
1138    }
1139
1140    #desktopUserDropdown:not(.active) {
1141        visibility: hidden !important;
1142        pointer-events: none !important;
1143    }
1144</style><style id="urs-home-exact-product-currency">
1145        /* =========================================================
1146           CURRENCY MENU — COMPACT MINIMAL REDESIGN
1147           ========================================================= */
1148
1149        #currency-widget-container {
1150            position: relative;
1151            z-index: 1100;
1152        }
1153
1154        /* Flat trigger — no permanent box. */
1155        #trigger-btn {
1156            width: auto !important;
1157            min-width: 0 !important;
1158            height: 34px !important;
1159            padding: 0 7px !important;
1160            display: inline-flex !important;
1161            align-items: center !important;
1162            justify-content: center !important;
1163            gap: 5px !important;
1164            border: 0 !important;
1165            border-radius: 7px !important;
1166            background: transparent !important;
1167            box-shadow: none !important;
1168            color: rgba(255,255,255,.58) !important;
1169        }
1170
1171        #trigger-btn #active-label {
1172            color: rgba(255,255,255,.62) !important;
1173            font-size: 11px !important;
1174            font-weight: 700 !important;
1175            line-height: 1 !important;
1176            letter-spacing: .035em !important;
1177        }
1178
1179        #trigger-btn #widget-arrow {
1180            width: 11px !important;
1181            height: 11px !important;
1182            color: rgba(255,255,255,.25) !important;
1183            transition:
1184                transform 150ms ease,
1185                color 150ms ease;
1186        }
1187
1188        #trigger-btn:hover,
1189        #trigger-btn[aria-expanded="true"] {
1190            background: rgba(255,255,255,.035) !important;
1191        }
1192
1193        #trigger-btn:hover #active-label,
1194        #trigger-btn[aria-expanded="true"] #active-label {
1195            color: rgba(245,240,248,.9) !important;
1196        }
1197
1198        #trigger-btn:hover #widget-arrow,
1199        #trigger-btn[aria-expanded="true"] #widget-arrow {
1200            color: rgba(198,168,216,.62) !important;
1201        }
1202
1203        #trigger-btn[aria-expanded="true"] #widget-arrow {
1204            transform: rotate(180deg);
1205        }
1206
1207        #dropdown-wrapper[style*="display: block"],
1208        #dropdown-wrapper:not([style*="display: none"]) {
1209            animation: none !important;
1210        }
1211
1212        @keyframes currencyMenuOpen {
1213            from {
1214                opacity: 0;
1215                transform: translateY(-4px);
1216            }
1217            to {
1218                opacity: 1;
1219                transform: translateY(0);
1220            }
1221        }
1222
1223        .currency-menu-title {
1224            height: 30px;
1225            padding: 0 8px;
1226            display: flex;
1227            align-items: center;
1228            color: rgba(255,255,255,.30);
1229            font-size: 9px;
1230            font-weight: 720;
1231            letter-spacing: .11em;
1232            text-transform: uppercase;
1233            border-bottom: 1px solid rgba(255,255,255,.045);
1234            margin-bottom: 4px;
1235        }
1236
1237        #currency-grid {
1238            width: 100% !important;
1239            max-height: 310px !important;
1240            overflow-y: auto !important;
1241            padding: 0 !important;
1242            display: flex !important;
1243            flex-direction: column !important;
1244            gap: 1px !important;
1245            border: 0 !important;
1246            border-radius: 0 !important;
1247            background: transparent !important;
1248            box-shadow: none !important;
1249        }
1250
1251        #currency-grid .currency-btn {
1252            position: relative;
1253            width: 100% !important;
1254            min-width: 0 !important;
1255            height: 34px !important;
1256            padding: 0 30px 0 9px !important;
1257            display: grid !important;
1258            grid-template-columns: 42px minmax(0,1fr) !important;
1259            align-items: center !important;
1260            gap: 5px !important;
1261            border: 0 !important;
1262            border-radius: 7px !important;
1263            background: transparent !important;
1264            box-shadow: none !important;
1265            color: rgba(255,255,255,.72) !important;
1266            text-align: left !important;
1267            font-size: 10.5px !important;
1268            line-height: 1 !important;
1269            font-weight: 720 !important;
1270            letter-spacing: .03em !important;
1271            cursor: pointer;
1272            transition:
1273                background 120ms ease,
1274                color 120ms ease;
1275        }
1276
1277        #currency-grid .currency-btn::after {
1278            display: block !important;
1279            min-width: 0;
1280            overflow: hidden;
1281            color: rgba(255,255,255,.30);
1282            font-size: 9.5px;
1283            line-height: 1;
1284            font-weight: 500;
1285            letter-spacing: 0;
1286            text-overflow: ellipsis;
1287            white-space: nowrap;
1288        }
1289
1290        #currency-grid .currency-btn[data-currency="AUD"]::after { content: "Australian Dollar"; }
1291        #currency-grid .currency-btn[data-currency="BRL"]::after { content: "Brazilian Real"; }
1292        #currency-grid .currency-btn[data-currency="CAD"]::after { content: "Canadian Dollar"; }
1293        #currency-grid .currency-btn[data-currency="DKK"]::after { content: "Danish Krone"; }
1294        #currency-grid .currency-btn[data-currency="EUR"]::after { content: "Euro"; }
1295        #currency-grid .currency-btn[data-currency="NOK"]::after { content: "Norweg
1295ian Krone"; }
1296        #currency-grid .currency-btn[data-currency="NZD"]::after { content: "New Zealand Dollar"; }
1297        #currency-grid .currency-btn[data-currency="PLN"]::after { content: "Polish Zloty"; }
1298        #currency-grid .currency-btn[data-currency="GBP"]::after { content: "British Pound"; }
1299        #currency-grid .currency-btn[data-currency="SEK"]::after { content: "Swedish Krona"; }
1300        #currency-grid .currency-btn[data-currency="TRY"]::after { content: "Turkish Lira"; }
1301        #currency-grid .currency-btn[data-currency="USD"]::after { content: "US Dollar"; }
1302
1303        #currency-grid .currency-btn:hover {
1304            background: rgba(255,255,255,.04) !important;
1305            color: rgba(255,255,255,.94) !important;
1306            transform: none !important;
1307        }
1308
1309        #currency-grid .currency-btn:hover::after {
1310            color: rgba(255,255,255,.46);
1311        }
1312
1313        #currency-grid .currency-btn.active {
1314            background: rgba(185,143,214,.085) !important;
1315            color: rgba(235,220,244,.96) !important;
1316            border: 0 !important;
1317            box-shadow: none !important;
1318            transform: none !important;
1319        }
1320
1321        #currency-grid .currency-btn.active::before {
1322            content: "✓";
1323            position: absolute;
1324            right: 10px;
1325            top: 50%;
1326            transform: translateY(-50%);
1327            color: rgba(204,173,222,.82);
1328            font-size: 10px;
1329            font-weight: 800;
1330        }
1331
1332        #currency-grid .currency-btn.active::after {
1333            color: rgba(211,190,224,.55);
1334        }
1335
1336        /* Remove all pieces from the previous currency redesign. */
1337        .currency-dropdown-panel,
1338        .currency-dropdown-head,
1339        .currency-dropdown-head-icon,
1340        .currency-dropdown-head-copy,
1341        .currency-dropdown-foot,
1342        #trigger-btn .currency-trigger-icon {
1343            display: none !important;
1344        }
1345
1346        #currency-grid {
1347            scrollbar-width: thin;
1348            scrollbar-color: rgba(185,143,214,.28) transparent;
1349        }
1350
1351        #currency-grid::-webkit-scrollbar {
1352            width: 4px;
1353        }
1354
1355        #currency-grid::-webkit-scrollbar-track {
1356            background: transparent;
1357        }
1358
1359        #currency-grid::-webkit-scrollbar-thumb {
1360            border-radius: 999px;
1361            background: rgba(185,143,214,.24);
1362        }
1363
1364        @media (max-width: 520px) {
1365            #dropdown-wrapper {
1366                right: 0 !important;
1367                width: 220px !important;
1368            }
1369        }
1370</style><style id="urs-auth-visibility-safety">
1371    #open-login.hidden,
1372    .open-login-btn.hidden,
1373    #open-login[hidden],
1374    .open-login-btn[hidden] {
1375        display: none !important;
1376    }
1377
1378    #desktopUserBtn.hidden,
1379    #desktopUserBtn[hidden] {
1380        display: none !important;
1381    }
1382</style><style id="urs-mobile-drawer-base-fix">
1383/* =========================================================
1384   UNREAL STUDIOS MOBILE MENU — PREMIUM COMPACT RESTYLE
1385   Same IDs/behavior, redesigned presentation only.
1386   ========================================================= */
1387
1388.us-menu {
1389    position: relative;
1390    z-index: 20000;
1391}
1392
1393.us-menu .menu-overlay {
1394    position: fixed !important;
1395    inset: 0 !important;
1396    z-index: 20000 !important;
1397    display: block !important;
1398    width: 100vw !important;
1399    height: 100dvh !important;
1400    margin: 0 !important;
1401    background: rgba(3,3,7,.70) !important;
1402    backdrop-filter: blur(9px) saturate(112%) !important;
1403    -webkit-backdrop-filter: blur(9px) saturate(112%) !important;
1404    opacity: 0 !important;
1405    visibility: hidden !important;
1406    pointer-events: none !important;
1407    transition: opacity 180ms ease, visibility 180ms ease !important;
1408}
1409
1410.us-menu .menu-overlay.active {
1411    opacity: 1 !important;
1412    visibility: visible !important;
1413    pointer-events: auto !important;
1414}
1415
1416.us-menu .drawer {
1417    position: fixed !important;
1418    top: 10px !important;
1419    right: 10px !important;
1420    bottom: 10px !important;
1421    left: auto !important;
1422    z-index: 20001 !important;
1423
1424    width: min(360px, calc(100vw - 20px)) !important;
1425    height: auto !important;
1426    max-height: calc(100dvh - 20px) !important;
1427    margin: 0 !important;
1428    padding: 0 !important;
1429
1430    overflow: hidden !important;
1431    border: 1px solid rgba(255,255,255,.075) !important;
1432    border-radius: 20px !important;
1433
1434    background:
1435        radial-gradient(circle at 82% -4%, rgba(185,143,214,.12), transparent 180px),
1436        linear-gradient(180deg, rgba(17,17,23,.99), rgba(10,10,15,.995)) !important;
1437
1438    box-shadow:
1439        0 30px 90px rgba(0,0,0,.58),
1440        inset 0 1px 0 rgba(255,255,255,.025) !important;
1441
1442    transform: translate3d(calc(100% + 24px),0,0) scale(.985) !important;
1443    opacity: 0 !important;
1444    visibility: hidden !important;
1445    pointer-events: none !important;
1446
1447    transition:
1448        transform 220ms cubic-bezier(.22,.8,.24,1),
1449        opacity 180ms ease,
1450        visibility 220ms ease !important;
1451
1452    will-change: transform, opacity;
1453}
1454
1455.us-menu .drawer.active {
1456    transform: translate3d(0,0,0) scale(1) !important;
1457    opacity: 1 !important;
1458    visibility: visible !important;
1459    pointer-events: auto !important;
1460}
1461
1462.us-menu .drawer-inner {
1463    width: 100% !important;
1464    height: 100% !important;
1465    max-height: calc(100dvh - 20px) !important;
1466    padding: 0 14px 16px !important;
1467    overflow-x: hidden !important;
1468    overflow-y: auto !important;
1469    overscroll-behavior: contain;
1470    -webkit-overflow-scrolling: touch;
1471    scrollbar-width: none;
1472}
1473
1474.us-menu .drawer-inner::-webkit-scrollbar {
1475    display: none;
1476}
1477
1478/* Header */
1479.us-menu .drawer .topbar {
1480    position: sticky !important;
1481    top: 0 !important;
1482    z-index: 5 !important;
1483
1484    height: 72px !important;
1485    min-height: 72px !important;
1486    margin: 0 -14px 8px !important;
1487    padding: 0 14px !important;
1488
1489    display: flex !important;
1490    align-items: center !important;
1491    justify-content: space-between !important;
1492
1493    border: 0 !important;
1494    border-bottom: 1px solid rgba(255,255,255,.05) !important;
1495    background: rgba(14,14,20,.92) !important;
1496    backdrop-filter: blur(18px) !important;
1497    -webkit-backdrop-filter: blur(18px) !important;
1498    box-shadow: none !important;
1499}
1500
1501.us-menu .drawer .brand {
1502    display: flex !important;
1503    flex-direction: column !important;
1504    align-items: flex-start !important;
1505    justify-content: center !important;
1506    gap: 4px !important;
1507    min-width: 0 !important;
1508}
1509
1510.us-menu .drawer .brand img {
1511    display: block !important;
1512    width: 104px !important;
1513    height: auto !important;
1514}
1515
1516
1517.us-menu .drawer .close-btn {
1518    position: static !important;
1519    width: 36px !important;
1520    height: 36px !important;
1521    min-width: 36px !important;
1522    padding: 0 !important;
1523
1524    display: inline-grid !important;
1525    place-items: center !important;
1526
1527    border: 1px solid rgba(255,255,255,.06) !important;
1528    border-radius: 10px !important;
1529    background: rgba(255,255,255,.025) !important;
1530    color: rgba(255,255,255,.48) !important;
1531
1532    font-size: 13px !important;
1533    line-height: 1 !important;
1534    cursor: pointer !important;
1535
1536    transition:
1537        background 140ms ease,
1538        border-color 140ms ease,
1539        color 140ms ease,
1540        transform 140ms ease !important;
1541}
1542
1543.us-menu .drawer .close-btn:hover {
1544    border-color: rgba(185,143,214,.20) !important;
1545    background: rgba(185,143,214,.075) !important;
1546    color: rgba(255,255,255,.92) !important;
1547    transform: rotate(3deg) !important;
1548}
1549
1550/* Groups */
1551.us-menu .group {
1552    width: 100% !important;
1553    margin: 0 !important;
1554    padding: 12px 0 !important;
1555    border: 0 !important;
1556    border-top: 1px solid rgba(255,255,255,.045) !important;
1557}
1558
1559.us-menu .group:first-of-type {
1560    padding-top: 4px !important;
1561    border-top: 0 !important;
1562}
1563
1564.us-menu .section-title {
1565    margin: 0 0 8px !important;
1566    padding: 0 5px !important;
1567    color: rgba(255,255,255,.28) !important;
1568    font-size: 8px !important;
1569    font-weight: 780 !important;
1570    line-height: 1 !important;
1571    letter-spacing: .13em !important;
1572    text-transform: uppercase !important;
1573}
1574
1575/* Main nav */
1576.us-menu .nav-list {
1577    display: grid !important;
1578    gap: 5px !important;
1579}
1580
1581.us-menu .nav-item,
1582.us-menu .nav-toggle {
1583    width: 100% !important;
1584    min-height: 48px !important;
1585    padding: 5px 9px 5px 7px !important;
1586
1587    display: flex !important;
1588    align-items: center !important;
1589    justify-content: space-between !important;
1590    gap: 10px !important;
1591
1592    border: 1px solid transparent !important;
1593    border-radius: 11px !important;
1594    background: transparent !important;
1595    color: rgba(255,255,255,.62) !important;
1596
1597    font: inherit !important;
1598    font-size: 11px !important;
1599    font-weight: 660 !important;
1600    text-align: left !important;
1601    text-decoration: none !important;
1602    cursor: pointer !important;
1603
1604    transition:
1605        background 130ms ease,
1606        border-color 130ms ease,
1607        color 130ms ease,
1608        transform 130ms ease !important;
1609}
1610
1611.us-menu .nav-item:hover,
1612.us-menu .nav-toggle:hover {
1613    border-color: rgba(255,255,255,.055) !important;
1614    background: rgba(255,255,255,.028) !important;
1615    color: rgba(255,255,255,.92) !important;
1616    transform: translateX(2px) !important;
1617}
1618
1619.us-menu .nav-left {
1620    min-width: 0 !important;
1621    display: flex !important;
1622    align-items: center !important;
1623    gap: 10px !important;
1624}
1625
1626.us-menu .nav-icon {
1627    width: 34px !important;
1628    height: 34px !important;
1629    flex: 0 0 34px !important;
1630
1631    display: grid !important;
1632    place-items: center !important;
1633
1634    border: 1px solid rgba(255,255,255,.045) !important;
1635    border-radius: 9px !important;
1636    background: rgba(255,255,255,.018) !important;
1637    color: rgba(202,173,220,.72) !important;
1638
1639    font-size: 12px !important;
1640}
1641
1642.us-menu .nav-arrow {
1643    color: rgba(255,255,255,.17) !important;
1644    font-size: 8px !important;
1645    transition: transform 150ms ease, color 150ms ease !important;
1646}
1647
1648.us-menu .nav-item:hover .nav-arrow,
1649.us-menu .nav-toggle:hover .nav-arrow {
1650    color: rgba(204,176,220,.58) !important;
1651}
1652
1653.us-menu #usScriptsToggle.open .nav-arrow {
1654    transform: rotate(180deg) !important;
1655    color: rgba(204,176,220,.70) !important;
1656}
1657
1658/* Products submenu */
1659.us-menu .submenu {
1660    max-height: 0 !important;
1661    overflow: hidden !important;
1662    opacity: 0 !important;
1663    transition:
1664        max-height 180ms ease,
1665        opacity 140ms ease,
1666        margin 180ms ease !important;
1667}
1668
1669.us-menu .submenu.open {
1670    max-height: 100px !important;
1671    margin-top: 2px !important;
1672    opacity: 1 !important;
1673}
1674
1675.us-menu .submenu-inner {
1676    padding: 4px 3px 2px 51px !important;
1677    display: grid !important;
1678    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
1679    gap: 5px !important;
1680}
1681
1682.us-menu .submenu-inner a {
1683    min-width: 0 !important;
1684    min-height: 33px !important;
1685    padding: 0 6px !important;
1686
1687    display: flex !important;
1688    align-items: center !important;
1689    justify-content: center !important;
1690
1691    border: 1px solid rgba(255,255,255,.045) !important;
1692    border-radius: 8px !important;
1693    background: rgba(255,255,255,.012) !important;
1694    color: rgba(255,255,255,.34) !important;
1695
1696    font-size: 8.5px !important;
1697    font-weight: 670 !important;
1698    text-decoration: none !important;
1699    white-space: nowrap !important;
1700
1701    transition:
1702        background 120ms ease,
1703        border-color 120ms ease,
1704        color 120ms ease !important;
1705}
1706
1707.us-menu .submenu-inner a:hover {
1708    border-color: rgba(185,143,214,.13) !important;
1709    background: rgba(185,143,214,.055) !important;
1710    color: rgba(235,224,241,.90) !important;
1711}
1712
1713/* Socials */
1714.us-menu .social-grid {
1715    display: grid !important;
1716    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
1717    gap: 6px !important;
1718}
1719
1720.us-menu .social-btn {
1721    min-width: 0 !important;
1722    min-height: 66px !important;
1723    padding: 9px 5px !important;
1724
1725    display: flex !important;
1726    flex-direction: column !important;
1727    align-items: center !important;
1728    justify-content: center !important;
1729    gap: 7px !important;
1730
1731    border: 1px solid rgba(255,255,255,.05) !important;
1732    border-radius: 11px !important;
1733    background: rgba(255,255,255,.015) !important;
1734    color: rgba(255,255,255,.38) !important;
1735
1736    font-size: 9px !important;
1737    font-weight: 650 !important;
1738    text-decoration: none !important;
1739
1740    transition:
1741        transform 130ms ease,
1742        background 130ms ease,
1743        border-color 130ms ease,
1744        color 130ms ease !important;
1745}
1746
1747.us-menu .social-btn i {
1748    font-size: 16px !important;
1749    color: rgba(199,171,216,.66) !important;
1750}
1751
1752.us-menu .social-btn:hover {
1753    transform: translateY(-2px) !important;
1754    border-color: rgba(185,143,214,.14) !important;
1755    background: rgba(185,143,214,.045) !important;
1756    color: rgba(255,255,255,.88) !important;
1757}
1758
1759/* Currency */
1760.us-menu .currency-grid {
1761    display: grid !important;
1762    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
1763    gap: 5px !important;
1764}
1765
1766.us-menu .currency-grid .currency-btn {
1767    width: 100% !important;
1768    height: 34px !important;
1769    padding: 0 !important;
1770
1771    border: 1px solid rgba(255,255,255,.045) !important;
1772    border-radius: 8px !important;
1773    background: rgba(255,255,255,.012) !important;
1774    color: rgba(255,255,255,.34) !important;
1775
1776    font-size: 9px !important;
1777    font-weight: 720 !important;
1778    letter-spacing: .02em !important;
1779
1780    cursor: pointer !important;
1781    transition:
1782        background 120ms ease,
1783        border-color 120ms ease,
1784        color 120ms ease,
1785        transform 120ms ease !important;
1786}
1787
1788.us-menu .currency-grid .currency-btn:hover {
1789    border-color: rgba(255,255,255,.075) !important;
1790    background: rgba(255,255,255,.03) !important;
1791    color: rgba(255,255,255,.76) !important;
1792    transform: translateY(-1px) !important;
1793}
1794
1795.us-menu .currency-grid .currency-btn.active {
1796    border-color: rgba(185,143,214,.20) !important;
1797    background: rgba(185,143,214,.095) !important;
1798    color: rgba(236,223,244,.96) !important;
1799    box-shadow: inset 0 0 0 1px rgba(185,143,214,.025) !important;
1800}
1801
1802/* Basket + account */
1803.us-menu .basket-btn,
1804.us-menu .login-btn {
1805    width: 100% !important;
1806    min-height: 44px !important;
1807    padding: 0 12px !important;
1808
1809    display: flex !important;
1810    align-items: center !important;
1811    justify-content: center !important;
1812    gap: 9px !important;
1813
1814    border-radius: 10px !important;
1815    text-decoration: none !important;
1816    font-size: 10px !important;
1817    font-weight: 720 !important;
1818
1819    transition:
1820        transform 130ms ease,
1821        border-color 130ms ease,
1822        background 130ms ease,
1823        color 130ms ease !important;
1824}
1825
1826.us-menu .basket-btn {
1827    border: 1px solid rgba(255,255,255,.10) !important;
1828    background: rgba(255,255,255,.94) !important;
1829    color: #101014 !important;
1830}
1831
1832.us-menu .basket-btn:hover {
1833    background: #fff !important;
1834    color: #08080c !important;
1835    transform: translateY(-1px) !important;
1836}
1837
1838.us-menu .login-btn {
1839    border: 1px solid rgba(185,143,214,.16) !important;
1840    background: rgba(185,143,214,.065) !important;
1841    color: rgba(233,219,242,.88) !important;
1842}
1843
1844.us-menu .login-btn:hover {
1845    border-color: rgba(185,143,214,.26) !important;
1846    background: rgba(185,143,214,.10) !important;
1847    color: #fff !important;
1848}
1849
1850.us-menu .basket-btn i,
1851.us-menu .login-btn i {
1852    font-size: 11px !important;
1853}
1854
1855/* Visibility */
1856@media (min-width: 1181px) {
1857    .us-menu {
1858        display: none !important;
1859    }
1860}
1861
1862@media (max-width: 1180px) {
1863    .us-menu {
1864        display: block !important;
1865    }
1866}
1867
1868@media (max-width: 480px) {
1869    .us-menu .drawer {
1870        top: 6px !important;
1871        right: 6px !important;
1872        bottom: 6px !important;
1873        width: calc(100vw - 12px) !important;
1874        max-height: calc(100dvh - 12px) !important;
1875        border-radius: 17px !important;
1876    }
1877
1878    .us-menu .drawer-inner {
1879        max-height: calc(100dvh - 12px) !important;
1880        padding-left: 11px !important;
1881        padding-right: 11px !important;
1882    }
1883
1884    .us-menu .drawer .topbar {
1885        margin-left: -11px !important;
1886        margin-right: -11px !important;
1887        padding-left: 11px !important;
1888        padding-right: 11px !important;
1889    }
1890
1891    .us-menu .submenu-inner {
1892        padding-left: 45px !important;
1893    }
1894}
1895
1896@media (prefers-reduced-motion: reduce) {
1897    .us-menu .menu-overlay,
1898    .us-menu .drawer,
1899    .us-menu .submenu,
1900    .us-menu .nav-item,
1901    .us-menu .nav-toggle,
1902    .us-menu .social-btn,
1903    .us-menu .currency-btn,
1904    .us-menu .basket-btn,
1905    .us-menu .login-btn {
1906        transition: none !important;
1907    }
1908}
1909</style><style id="urs-mobile-product-submenu-icons">
1910.us-menu .submenu-inner {
1911    align-items: stretch !important;
1912}
1913
1914.us-menu .submenu-inner a {
1915    min-height: 35px !important;
1916    padding: 0 8px !important;
1917    display: inline-flex !important;
1918    align-items: center !important;
1919    justify-content: center !important;
1920    gap: 5px !important;
1921    text-align: center !important;
1922}
1923
1924.us-menu .submenu-product-icon,
1925.us-menu .submenu-brand-logo {
1926    flex: 0 0 auto !important;
1927    display: inline-block !important;
1928}
1929
1930.us-menu .submenu-product-icon {
1931    width: 10px !important;
1932    font-size: 9px !important;
1933    line-height: 1 !important;
1934    text-align: center !important;
1935    color: rgba(202,173,220,.62) !important;
1936    transition: color 120ms ease, transform 120ms ease !important;
1937}
1938
1939.us-menu .submenu-brand-logo {
1940    width: 11px !important;
1941    height: 11px !important;
1942    object-fit: contain !important;
1943    object-position: center !important;
1944    filter: drop-shadow(0 0 0 rgba(0,0,0,0)) !important;
1945    transition: transform 120ms ease !important;
1946}
1947
1948.us-menu .submenu-brand-logo-fivem {
1949    width: 12px !important;
1950}
1951
1952.us-menu .submenu-brand-logo-minecraft {
1953    width: 11px !important;
1954    height: 11px !important;
1955    image-rendering: -webkit-optimize-contrast;
1956    image-rendering: crisp-edges;
1957}
1958
1959.us-menu .submenu-inner a:hover .submenu-product-icon {
1960    color: rgba(225,204,238,.92) !important;
1961    transform: translateY(-1px) !important;
1962}
1963
1964.us-menu .submenu-inner a:hover .submenu-brand-logo {
1965    transform: translateY(-1px) !important;
1966}
1967
1968.us-menu .submenu-inner a span {
1969    min-width: 0 !important;
1970    overflow: hidden !important;
1971    text-overflow: ellipsis !important;
1972    white-space: nowrap !important;
1973}
1974
1975@media (max-width: 480px) {
1976    .us-menu .submenu-inner {
1977        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
1978        gap: 5px !important;
1979    }
1980
1981    .us-menu .submenu-inner a {
1982        min-height: 34px !important;
1983        padding: 0 7px !important;
1984        font-size: 8.25px !important;
1985    }
1986
1987    .us-menu .submenu-brand-logo-fivem {
1988        width: 11px !important;
1989    }
1990
1991    .us-menu .submenu-brand-logo-minecraft,
1992    .us-menu .submenu-product-icon {
1993        width: 10px !important;
1994    }
1995}
1996</style><style id="urs-mobile-product-submenu-alignment-fix">
1997/* Products submenu: align exactly with the Products dropdown row */
1998.us-menu #usScriptsMenu {
1999    width: 100% !important;
2000    margin: 0 !important;
2001    padding: 0 !important;
2002    box-sizing: border-box !important;
2003}
2004
2005.us-menu #usScriptsMenu.open {
2006    margin-top: 6px !important;
2007}
2008
2009.us-menu #usScriptsMenu .submenu-inner {
2010    width: 100% !important;
2011    max-width: none !important;
2012    margin: 0 !important;
2013    padding: 0 !important;
2014
2015    display: grid !important;
2016    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
2017    align-items: stretch !important;
2018    justify-items: stretch !important;
2019    gap: 6px !important;
2020
2021    box-sizing: border-box !important;
2022}
2023
2024.us-menu #usScriptsMenu .submenu-inner > a {
2025    width: 100% !important;
2026    min-width: 0 !important;
2027    max-width: none !important;
2028    height: 36px !important;
2029    min-height: 36px !important;
2030    margin: 0 !important;
2031    padding: 0 8px !important;
2032
2033    display: flex !important;
2034    align-items: center !important;
2035    justify-content: center !important;
2036    gap: 6px !important;
2037
2038    box-sizing: border-box !important;
2039    overflow: hidden !important;
2040}
2041
2042.us-menu #usScriptsMenu .submenu-inner > a span {
2043    min-width: 0 !important;
2044    max-width: 100% !important;
2045    overflow: hidden !important;
2046    text-overflow: ellipsis !important;
2047    white-space: nowrap !important;
2048}
2049
2050.us-menu #usScriptsMenu .submenu-brand-logo,
2051.us-menu #usScriptsMenu .submenu-product-icon {
2052    flex-shrink: 0 !important;
2053}
2054
2055/* Keep the product row aligned with the same inner edges as Products */
2056.us-menu .nav-list {
2057    width: 100% !important;
2058    box-sizing: border-box !important;
2059}
2060
2061@media (max-width: 480px) {
2062    .us-menu #usScriptsMenu .submenu-inner {
2063        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
2064        gap: 5px !important;
2065    }
2066
2067    .us-menu #usScriptsMenu .submenu-inner > a {
2068        height: 35px !important;
2069        min-height: 35px !important;
2070        padding: 0 6px !important;
2071        gap: 5px !important;
2072    }
2073}
2074</style><style id="urs-mobile-product-submenu-final-alignment">
2075/* Final visual alignment for the Products submenu */
2076.us-menu #usScriptsMenu {
2077    width: calc(100% - 12px) !important;
2078    margin-left: 6px !important;
2079    margin-right: 6px !important;
2080    box-sizing: border-box !important;
2081}
2082
2083.us-menu #usScriptsMenu.open {
2084    margin-top: 5px !important;
2085}
2086
2087.us-menu #usScriptsMenu .submenu-inner {
2088    width: 100% !important;
2089    margin: 0 !important;
2090    padding: 0 !important;
2091
2092    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
2093    gap: 5px !important;
2094
2095    box-sizing: border-box !important;
2096}
2097
2098.us-menu #usScriptsMenu .submenu-inner > a {
2099    width: 100% !important;
2100    min-width: 0 !important;
2101    height: 35px !important;
2102    min-height: 35px !important;
2103    padding: 0 7px !important;
2104
2105    display: flex !important;
2106    align-items: center !important;
2107    justify-content: center !important;
2108    gap: 5px !important;
2109
2110    box-sizing: border-box !important;
2111}
2112
2113.us-menu #usScriptsMenu .submenu-inner > a span {
2114    flex: 0 1 auto !important;
2115    min-width: 0 !important;
2116    text-align: center !important;
2117}
2118
2119.us-menu #usScriptsMenu .submenu-brand-logo,
2120.us-menu #usScriptsMenu .submenu-product-icon {
2121    flex: 0 0 auto !important;
2122}
2123
2124@media (max-width: 480px) {
2125    .us-menu #usScriptsMenu {
2126        width: calc(100% - 10px) !important;
2127        margin-left: 5px !important;
2128        margin-right: 5px !important;
2129    }
2130
2131    .us-menu #usScriptsMenu .submenu-inner {
2132        gap: 4px !important;
2133    }
2134
2135    .us-menu #usScriptsMenu .submenu-inner > a {
2136        height: 34px !important;
2137        min-height: 34px !important;
2138        padding: 0 6px !important;
2139        gap: 4px !important;
2140    }
2141}
2142
2143/* Final auth visibility guard. Specific ID selectors intentionally override all
2144   page/header display:flex rules so hidden auth controls can never bleed through. */
2145#navbar #desktopAuth #open-login.hidden,
2146#navbar #desktopAuth #open-login[hidden],
2147#navbar #desktopAuth #desktopUserBtn.hidden,
2148#navbar #desktopAuth #desktopUserBtn[hidden] {
2149    display: none !important;
2150}
2151
2152
2153/* Normalize the desktop currency control across pages with/without CSS resets. */
2154#navbar #currency-widget-container {
2155    width: 64px !important;
2156    min-width: 64px !important;
2157    max-width: 64px !important;
2158    flex: 0 0 64px !important;
2159}
2160#navbar #currency-widget-container #trigger-btn {
2161    width: 64px !important;
2162    min-width: 64px !important;
2163    max-width: 64px !important;
2164    height: 34px !important;
2165    padding: 0 7px !important;
2166    box-sizing: border-box !important;
2167    font-family: Inter, Arial, sans-serif !important;
2168    font-size: 11px !important;
2169    line-height: 1 !important;
2170    font-weight: 700 !important;
2171    font-style: normal !important;
2172    text-transform: none !important;
2173    -webkit-appearance: none !important;
2174    appearance: none !important;
2175}
2176#navbar #currency-widget-container #trigger-btn #active-label {
2177    width: 27px !important;
2178    min-width: 27px !important;
2179    max-width: 27px !important;
2180    flex: 0 0 27px !important;
2181    display: inline-block !important;
2182    font-family: Inter, Arial, sans-serif !important;
2183    font-size: 11px !important;
2184    line-height: 11px !important;
2185    font-weight: 700 !important;
2186    letter-spacing: .035em !important;
2187    text-align: left !important;
2188    white-space: nowrap !important;
2189}
2190#navbar #currency-widget-container #trigger-btn #widget-arrow {
2191    width: 11px !important;
2192    min-width: 11px !important;
2193    max-width: 11px !important;
2194    height: 11px !important;
2195    flex: 0 0 11px !important;
2196}
2197
2198</style><style id="urs-mobile-navigation-label-fix">
2199.us-menu .group:first-of-type {
2200    padding-top: 9px !important;
2201}
2202
2203.us-menu .group:first-of-type > .section-title {
2204    margin: 0 0 8px !important;
2205    padding: 0 6px !important;
2206    line-height: 1 !important;
2207}
2208</style><style id="urs-mobile-account-products-match">
2209/* =========================================================
2210   MOBILE ACCOUNT — MATCH PRODUCTS PAGE
2211   ========================================================= */
2212
2213.us-menu #mobileAuthSlot {
2214    width: 100% !important;
2215}
2216
2217.us-menu #mobileLoginBtn.hidden,
2218.us-menu #mobileLoginBtn[hidden],
2219.us-menu #mobileUserBox.hidden,
2220.us-menu #mobileUserBox[hidden] {
2221    display: none !important;
2222}
2223
2224/* Logged-out row */
2225.us-menu #mobileLoginBtn {
2226    width: 100% !important;
2227    min-height: 46px !important;
2228    padding: 0 11px !important;
2229    display: flex !important;
2230    align-items: center !important;
2231    justify-content: space-between !important;
2232    gap: 10px !important;
2233
2234    border: 1px solid transparent !important;
2235    border-radius: 11px !important;
2236    background: transparent !important;
2237    color: rgba(247,247,251,.68) !important;
2238
2239    font-size: 11px !important;
2240    font-weight: 700 !important;
2241    text-decoration: none !important;
2242}
2243
2244.us-menu #mobileLoginBtn:hover {
2245    color: #fff !important;
2246    border-color: rgba(255,255,255,.08) !important;
2247    background: rgba(255,255,255,.03) !important;
2248}
2249
2250/* Logged-in row — deliberately NOT a card */
2251.us-menu .home-mobile-auth-user {
2252    width: 100% !important;
2253    margin: 0 !important;
2254    padding: 0 !important;
2255}
2256
2257.us-menu .home-mobile-auth-head {
2258    width: 100% !important;
2259    min-height: 46px !important;
2260    margin: 0 !important;
2261    padding: 0 11px !important;
2262
2263    display: flex !important;
2264    align-items: center !important;
2265    justify-content: space-between !important;
2266    gap: 10px !important;
2267
2268    border: 1px solid transparent !important;
2269    border-radius: 11px !important;
2270    background: transparent !important;
2271    box-shadow: none !important;
2272    color: rgba(247,247,251,.68) !important;
2273
2274    font: inherit !important;
2275    font-size: 11px !important;
2276    font-weight: 800 !important;
2277    cursor: pointer !important;
2278
2279    transition:
2280        color 150ms ease,
2281        border-color 150ms ease,
2282        background 150ms ease !important;
2283}
2284
2285.us-menu .home-mobile-auth-head:hover,
2286.us-menu .home-mobile-auth-head[aria-expanded="true"] {
2287    color: #fff !important;
2288    border-color: rgba(255,255,255,.08) !important;
2289    background: rgba(255,255,255,.03) !important;
2290}
2291
2292.us-menu .home-mobile-auth-left {
2293    min-width: 0 !important;
2294    display: inline-flex !important;
2295    align-items: center !important;
2296    gap: 9px !important;
2297}
2298
2299.us-menu .home-mobile-auth-left > img {
2300    width: 30px !important;
2301    height: 30px !important;
2302    flex: 0 0 30px !important;
2303    display: block !important;
2304    object-fit: cover !important;
2305    border: 0 !important;
2306    border-radius: 9px !important;
2307    background: rgba(255,255,255,.03) !important;
2308}
2309
2310.us-menu .home-mobile-auth-left > span:last-child {
2311    min-width: 0 !important;
2312    display: flex !important;
2313    flex-direction: column !important;
2314    align-items: flex-start !important;
2315}
2316
2317.us-menu .home-mobile-auth-name {
2318    max-width: 190px !important;
2319    overflow: hidden !important;
2320    text-overflow: ellipsis !important;
2321    white-space: nowrap !important;
2322    color: #fff !important;
2323    font-size: 11px !important;
2324    font-weight: 850 !important;
2325    line-height: 1.15 !important;
2326}
2327
2328.us-menu .home-mobile-auth-sub {
2329    max-width: 190px !important;
2330    overflow: hidden !important;
2331    text-overflow: ellipsis !important;
2332    white-space: nowrap !important;
2333    color: rgba(247,247,251,.43) !important;
2334    font-size: 9px !important;
2335    font-weight: 700 !important;
2336    line-height: 1.15 !important;
2337}
2338
2339.us-menu .mobile-account-toggle-chevron {
2340    width: 14px !important;
2341    height: 14px !important;
2342    flex: 0 0 14px !important;
2343    color: rgba(255,255,255,.28) !important;
2344    font-size: 8px !important;
2345    transition:
2346        transform 150ms ease,
2347        color 150ms ease !important;
2348}
2349
2350.us-menu .home-mobile-auth-head[aria-expanded="true"] .mobile-account-toggle-chevron {
2351    transform: rotate(180deg) !important;
2352    color: rgba(255,255,255,.55) !important;
2353}
2354
2355/* Dropdown stays completely out of layout until the row is tapped */
2356.us-menu #mobileAccountDropdown.home-account-dropdown {
2357    display: none !important;
2358    width: 100% !important;
2359    margin: 0 !important;
2360    padding: 4px 0 4px 14px !important;
2361    border: 0 !important;
2362    border-radius: 0 !important;
2363    background: transparent !important;
2364    box-shadow: none !important;
2365    backdrop-filter: none !important;
2366    -webkit-backdrop-filter: none !important;
2367}
2368
2369.us-menu #mobileAccountDropdown.home-account-dropdown.open {
2370    display: grid !important;
2371    gap: 3px !important;
2372}
2373
2374/* Same lightweight nested links as Products */
2375.us-menu #mobileAccountDropdown a,
2376.us-menu #mobileAccountDropdown button {
2377    width: 100% !important;
2378    min-height: 40px !important;
2379    margin: 0 !important;
2380    padding: 0 11px !important;
2381
2382    display: flex !important;
2383    align-items: center !important;
2384    gap: 8px !important;
2385
2386    border: 0 !important;
2387    border-radius: 9px !important;
2388    background: transparent !important;
2389    box-shadow: none !important;
2390    color: rgba(247,247,251,.43) !important;
2391
2392    font: inherit !important;
2393    font-size: 10.5px !important;
2394    font-weight: 700 !important;
2395    text-align: left !important;
2396    text-decoration: none !important;
2397    cursor: pointer !important;
2398
2399    transition:
2400        color 140ms ease,
2401        background 140ms ease !important;
2402}
2403
2404.us-menu #mobileAccountDropdown a > i,
2405.us-menu #mobileAccountDropdown button > i {
2406    width: 14px !important;
2407    flex: 0 0 14px !important;
2408    text-align: center !important;
2409    font-size: 9px !important;
2410    color: rgba(185,143,214,.60) !important;
2411}
2412
2413.us-menu #mobileAccountDropdown a:hover {
2414    color: #fff !important;
2415    background: rgba(185,143,214,.10) !important;
2416}
2417
2418.us-menu #mobileAccountDropdown .home-account-dropdown-logout {
2419    color: rgba(255,110,130,.72) !important;
2420}
2421
2422.us-menu #mobileAccountDropdown .home-account-dropdown-logout > i {
2423    color: rgba(255,110,130,.68) !important;
2424}
2425
2426.us-menu #mobileAccountDropdown .home-account-dropdown-logout:hover {
2427    color: rgba(255,135,150,.98) !important;
2428    background: rgba(255,66,102,.06) !important;
2429}
2430
2431.us-menu #mobileAccountDropdown .home-account-dropdown-staff {
2432    color: rgba(216,190,236,.72) !important;
2433    background: rgba(185,143,214,.035) !important;
2434}
2435
2436.us-menu #mobileAccountDropdown .home-account-dropdown-staff:hover {
2437    color: rgba(240,226,249,.96) !important;
2438    background: rgba(185,143,214,.10) !important;
2439}
2440
2441/* Keep the Account section spacing consistent with the drawer */
2442.us-menu .mobile-account-group {
2443    padding-top: 12px !important;
2444    padding-bottom: 12px !important;
2445}
2446
2447@media (max-width: 480px) {
2448    .us-menu .home-mobile-auth-name,
2449    .us-menu .home-mobile-auth-sub {
2450        max-width: 175px !important;
2451    }
2452}
2453</style>
2454
2455<style id="urs-shared-currency-visibility">
2456/* =========================================================
2457   CURRENCY MENU
2458   Closed is the hard default. It only becomes visible after
2459   the trigger explicitly adds .urs-currency-open.
2460   ========================================================= */
2461
2462#dropdown-wrapper {
2463    display: block !important;
2464    opacity: 1 !important;
2465    visibility: hidden !important;
2466    pointer-events: none !important;
2467    margin-top: 0 !important;
2468    transform: translateY(calc(-100% - 16px)) !important;
2469    transform-origin: top right !important;
2470    transition: transform 220ms cubic-bezier(.4,0,.2,1), visibility 0s linear 220ms !important;
2471}
2472
2473#dropdown-wrapper.urs-currency-open {
2474    opacity: 1 !important;
2475    visibility: visible !important;
2476    pointer-events: auto !important;
2477    margin-top: 0 !important;
2478    transform: translateY(0) !important;
2479    transition: transform 280ms cubic-bezier(.16,1,.3,1), visibility 0s linear 0s !important;
2480}
2481
2482#dropdown-wrapper .currency-menu-title,
2483#dropdown-wrapper #currency-grid {
2484    opacity: 1 !important;
2485    transform: none !important;
2486    transition: none !important;
2487}
2488
2489</style>
2490
2491<style id="urs-404-navbar-hover-fix">
2492/* Navbar hover: text color only. No box, background, border, shadow, or movement. */
2493#navbar .nav-link,
2494#navbar .nav-link:hover,
2495#navbar .nav-link:focus,
2496#navbar .nav-link:focus-visible,
2497#navbar .nav-link:active {
2498    border: 0 !important;
2499    outline: 0 !important;
2500    box-shadow: none !important;
2501    background: transparent !important;
2502    transform: none !important;
2503}
2504
2505#navbar .nav-link:hover,
2506#navbar .nav-link:focus-visible {
2507    color: #ffffff !important;
2508}
2509
2510#navbar .nav-link::before,
2511#navbar .nav-link::after {
2512    display: none !important;
2513    content: none !important;
2514}
2515</style>
2516
2517    <style id="urs-shared-shell-firewall">
2518/* Shared-shell firewall: public page CSS must not alter header metrics. */
2519#navbar,
2520#navbar button,
2521#navbar a,
2522#navbar input,
2523#navbar select {
2524    font-family: Inter, Arial, sans-serif !important;
2525    font-style: normal !important;
2526    text-decoration: none;
2527}
2528#navbar,
2529#navbar *,
2530#navbar *::before,
2531#navbar *::after {
2532    box-sizing: border-box !important;
2533}
2534#navbar img { max-width: none !important; }
2535
2536#navbar #currency-widget-container #trigger-btn,
2537#navbar #currency-widget-container #trigger-btn #active-label {
2538    font-family: Inter, Arial, sans-serif !important;
2539    font-size: 11px !important;
2540    line-height: 11px !important;
2541    font-weight: 700 !important;
2542    font-style: normal !important;
2543    letter-spacing: .035em !important;
2544    text-transform: none !important;
2545}
2546#navbar #desktopUserBtn .user-name {
2547    font-family: Inter, Arial, sans-serif !important;
2548    font-size: 9.5px !important;
2549    line-height: 9.5px !important;
2550    font-weight: 620 !important;
2551    font-style: normal !important;
2552    letter-spacing: 0 !important;
2553    text-transform: none !important;
2554}
2555#navbar #desktopUserBtn .user-avatar {
2556    width: 26px !important;
2557    height: 26px !important;
2558    min-width: 26px !important;
2559    max-width: 26px !important;
2560    min-height: 26px !important;
2561    max-height: 26px !important;
2562}
2563</style>
2564
2565<style id="urs-about-mega-menu-style">
2566#navbar .about-mega-trigger{appearance:none;-webkit-appearance:none;border:0;font-family:inherit;cursor:pointer;gap:5px}
2567#navbar .about-mega-trigger svg{display:block;width:13px;height:13px;min-width:13px;max-width:13px;flex:0 0 13px;transition:transform 180ms cubic-bezier(.2,.75,.25,1),color 150ms ease}
2568#navbar .about-mega-trigger[aria-expanded="true"]{color:rgba(255,255,255,.92)}
2569#navbar .about-mega-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
2570.about-mega-menu{position:fixed;top:64px;left:50%;z-index:995;width:min(1435px,calc(100vw - 56px));opacity:1;visibility:hidden;pointer-events:none;transform:translate(-50%,-432px);transform-origin:50% 0;transition:transform 260ms cubic-bezier(.4,0,.2,1),visibility 0s linear 260ms}
2571.about-mega-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:transform 320ms cubic-bezier(.16,1,.3,1),visibility 0s linear 0s}
2572.about-mega-shell{position:relative;display:grid;grid-template-columns:385px minmax(0,1fr) 405px;height:430px;overflow:hidden;border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(12,14,18,.38);box-shadow:0 28px 78px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(255,255,255,.02);backdrop-filter:blur(44px) saturate(150%) brightness(.88);-webkit-backdrop-filter:blur(44px) saturate(150%) brightness(.88)}
2573.about-mega-shell::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008));opacity:.82}
2574.about-mega-shell>section{position:relative;z-index:1}
2575.about-mega-shell>section{min-width:0;padding:19px 20px}.about-mega-shell>section+section{border-left:1px solid rgba(255,255,255,.065)}
2576.about-mega-shell h3{margin:0 0 13px;display:flex;align-items:center;gap:4px;color:#ececef;font-size:12px;font-weight:760;letter-spacing:-.012em}.about-mega-shell h3 svg{width:12px;height:12px;color:#7a7d83}
2577.about-mega-heading-link{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none;cursor:pointer}
2578.about-mega-brand{height:55px;margin:0 0 18px;display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:14px;color:inherit;text-decoration:none}
2579.about-mega-brand-map{position:relative;width:150px;height:46px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:linear-gradient(28deg,rgba(219,223,218,.95),rgba(245,246,241,.98));box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
2580.about-mega-brand-map::before{content:"";position:absolute;inset:-10px;background:linear-gradient(28deg,transparent 0 17%,rgba(181,187,180,.30) 17% 21%,transparent 21% 47%,rgba(190,196,189,.28) 47% 52%,transparent 52%),linear-gradient(118deg,transparent 0 28%,rgba(204,209,202,.45) 28% 34%,transparent 34% 63%,rgba(194,201,194,.34) 63% 69%,transparent 69%);transform:rotate(-5deg)}
2581.about-mega-brand-map::before{display:none!important}
2582.about-mega-brand-map .about-mega-map-art{position:absolute;inset:0;z-index:1;width:100%!important;height:100%!important;display:block;filter:none!important;overflow:hidden}
2583.about-mega-brand-map{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 1px 0 rgba(255,255,255,.05)}
2584.about-mega-brand>span:nth-child(2){display:flex;flex-direction:column;gap:1px;min-width:0}.about-mega-brand small{color:#70747b;font-size:7.5px;font-weight:800;letter-spacing:.22em}.about-mega-brand strong{color:#f0f0f2;font-size:11px;font-weight:760;white-space:nowrap}
2585.about-mega-link-list{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.035);border-radius:11px;overflow:hidden;background:rgba(10,12,16,.34)}
2586.about-mega-link-list>a{height:62px;padding:0 10px;display:grid;grid-template-columns:34px minmax(0,1fr) 12px;align-items:center;gap:9px;color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.055);transition:background 140ms ease}.about-mega-link-list>a:last-child{border-bottom:0}.about-mega-link-list>a:hover{background:rgba(255,255,255,.035)}
2587.about-mega-link-list>a>svg{width:12px;height:12px;
2587color:#777a80}.about-mega-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:#c2c4c9;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.055)}.about-mega-icon svg,.about-mega-icon i{width:17px;height:17px;font-size:16px}
2588.about-mega-link-list a>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}.about-mega-link-list strong{color:#e9e9eb;font-size:10px;font-weight:720}.about-mega-link-list small{color:#74777d;font-size:8.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
2589.about-mega-initiatives{display:flex;flex-direction:column}.about-mega-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;height:306px}
2590.about-mega-card{position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.04);border-radius:11px;background:rgba(10,12,16,.34);color:inherit;text-decoration:none;transition:transform 160ms ease,border-color 160ms ease,background 160ms ease}.about-mega-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.08);background:rgba(18,20,25,.40)}
2591.about-mega-card-media{position:relative;height:118px;display:block;overflow:hidden;background:#101114}.about-mega-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.03),rgba(7,8,10,.34))}.about-mega-card-media img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.7) brightness(.68);transform:scale(1.01);transition:transform 220ms ease,filter 220ms ease}.about-mega-card:hover .about-mega-card-media img{transform:scale(1.025);filter:saturate(.82) brightness(.75)}
2592.about-mega-card-badge{position:absolute;z-index:2;left:13px;top:13px;width:36px;height:36px;display:grid;place-items:center;border-radius:8px;color:white;font-size:25px;font-weight:800;line-height:1;box-shadow:0 5px 15px rgba(0,0,0,.28)}.about-mega-card-badge.is-orange{background:linear-gradient(145deg,#f89a36,#e75a14)}.about-mega-card-badge.is-purple{background:linear-gradient(145deg,#bd49f1,#7a22d8)}.about-mega-card-badge svg{width:20px;height:20px}
2593.about-mega-card-copy{padding:11px 13px 42px;display:flex;flex-direction:column;gap:5px}.about-mega-card-copy strong{color:#ececee;font-size:10.5px;font-weight:750}.about-mega-card-copy small{color:#7c7f84;font-size:8.7px;line-height:1.45}.about-mega-card-arrow{position:absolute;left:13px;bottom:12px;width:27px;height:27px;display:grid;place-items:center;border-radius:7px;color:#b3b4b9;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06)}.about-mega-card-arrow svg{width:12px;height:12px}
2594.about-mega-search{height:46px;margin:0 0 17px;padding:0 14px;display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.035);border-radius:12px;background:rgba(10,12,16,.30);transition:border-color 150ms ease,background 150ms ease}.about-mega-search:focus-within{border-color:rgba(124,109,242,.18);background:rgba(14,16,21,.38)}.about-mega-search svg{width:15px;height:15px;color:#777980}.about-mega-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#e7e7e9;font:inherit;font-size:9.5px}.about-mega-search input::placeholder{color:#62656b}
2595.about-mega-update-list{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.035);border-radius:11px;overflow:hidden;background:rgba(10,12,16,.32)}.about-mega-update-list>a{height:82px;padding:9px 10px;display:grid;grid-template-columns:minmax(0,1fr) 55px;gap:10px;align-items:center;color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.05);transition:background 140ms ease}.about-mega-update-list>a:last-child{border-bottom:0}.about-mega-update-list>a:hover{background:rgba(255,255,255,.035)}
2596.about-mega-update-list>a>span:first-child{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}.about-mega-update-list strong{color:#e9e9eb;font-size:9.4px;font-weight:720;line-height:1.25}.about-mega-update-list small{color:#74777c;font-size:7.9px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.about-mega-update-date{display:inline-flex!important;align-items:center!important;gap:4px!important;margin-top:1px!important;color:#74777c!important;font-size:7.5px!important;line-height:1!important;font-weight:500!important;white-space:nowrap!important}.about-mega-update-date svg{width:9px!important;height:9px!important;flex:0 0 9px!important}
2597.about-mega-update-thumb{width:55px;height:48px;display:block;overflow:hidden;border-radius:8px;background:#15151a;border:1px solid rgba(255,255,255,.055)}.about-mega-update-thumb img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.75) brightness(.72)}.about-mega-update-thumb.is-logo{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(134,51,193,.36),rgba(44,28,55,.9))}.about-mega-update-thumb.is-logo img{width:30px;height:30px;object-fit:contain;filter:none}
2598.about-mega-empty{min-height:128px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;border:1px solid rgba(255,255,255,.045);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.012));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
2599.about-mega-empty-icon{width:36px;height:36px;display:grid;place-items:center;margin-bottom:2px;border-radius:10px;color:#cfc7e9;background:rgba(124,109,242,.10);border:1px solid rgba(124,109,242,.16)}.about-mega-empty-icon svg{width:16px;height:16px}
2600.about-mega-empty strong{color:#e9e9ed;font-size:10.5px;font-weight:730}.about-mega-empty small{max-width:260px;color:#7d8088;font-size:8.4px;line-height:1.45}
2601.about-mega-empty-clear{height:30px;margin-top:3px;padding:0 12px;border:1px solid rgba(255,255,255,.055);border-radius:8px;background:rgba(255,255,255,.035);color:#d9d9de;font:inherit;font-size:8.5px;font-weight:650;cursor:pointer;transition:background 140ms ease,border-color 140ms ease,transform 140ms ease}.about-mega-empty-clear:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}.about-mega-empty-clear:active{transform:translateY(1px)}
2602.about-mega-menu [hidden]{display:none!important}
2603.about-mega-updates.is-empty .about-mega-update-list{display:none!important}
2604.about-mega-updates.is-empty .about-mega-empty{min-height:250px;margin-top:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:30px 18px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:9px}
2605.about-mega-updates.is-empty .about-mega-empty-icon{width:36px;height:36px;border-radius:10px;margin:0 0 1px;background:rgba(124,109,242,.08);border:1px solid rgba(124,109,242,.14);box-shadow:none}
2606.about-mega-updates.is-empty .about-mega-empty strong{font-size:11px}
2607.about-mega-updates.is-empty .about-mega-empty small{font-size:8px;max-width:235px;color:#74777c}
2608.about-mega-updates.is-empty .about-mega-empty-clear{height:28px;padding:0 11px;margin-top:2px;font-size:8.3px;background:rgba(255,255,255,.028)}
2609
2610/* Shared alignment baseline for the three mega-menu columns. */
2611.about-mega-company,.about-mega-initiatives,.about-mega-updates{box-sizing:border-box}
2612.about-mega-shell h3{min-height:15px;line-height:15px}
2613.about-mega-link-list,.about-mega-cards,.about-mega-update-list{margin-top:0!important}
2614.about-mega-card,.about-mega-link-list,.about-mega-update-list{align-self:stretch}
2615.about-mega-update-list>a,.about-mega-link-list>a{box-sizing:border-box}
2616
2617
2618/* Reference-lock: one shared vertical grid for all three mega-menu columns. */
2619.about-mega-shell>section{
2620    display:grid;
2621    grid-template-rows:72px 28px minmax(0,1fr);
2622    align-content:stretch;
2623}
2624.about-mega-company .about-mega-brand,
2625.about-mega-updates .about-mega-search{
2626    grid-row:1;
2627    align-self:start;
2628    margin:0;
2629}
2630.about-mega-company .about-mega-brand{height:46px;}
2631.about-mega-company>
2631h3,
2632.about-mega-initiatives>h3,
2633.about-mega-updates>h3{
2634    grid-row:2;
2635    align-self:center;
2636    margin:0;
2637}
2638.about-mega-link-list,
2639.about-mega-cards,
2640.about-mega-update-list{
2641    grid-row:3;
2642    align-self:stretch;
2643    height:auto;
2644    min-height:0;
2645}
2646.about-mega-link-list{
2647    display:grid;
2648    grid-template-rows:repeat(4,minmax(0,1fr));
2649}
2650.about-mega-link-list>a{height:auto;min-height:0;}
2651.about-mega-cards{height:auto;}
2652.about-mega-card{height:100%;min-height:0;}
2653.about-mega-update-list{
2654    display:grid;
2655    grid-template-rows:repeat(3,minmax(0,1fr));
2656}
2657.about-mega-update-list>a{height:auto;min-height:0;}
2658.about-mega-initiatives>h3{padding-left:2px;}
2659.about-mega-initiatives .about-mega-cards{margin-top:2px!important;}
2660
2661/* Let Key Initiatives use the otherwise-empty top row while keeping its bottom aligned with the side columns. */
2662.about-mega-initiatives{
2663    grid-template-rows:28px minmax(0,1fr)!important;
2664}
2665.about-mega-initiatives>h3{
2666    grid-row:1!important;
2667    align-self:start!important;
2668    margin:0!important;
2669}
2670.about-mega-initiatives .about-mega-cards{
2671    grid-row:2!important;
2672    align-self:stretch!important;
2673    height:auto!important;
2674    min-height:0!important;
2675    grid-template-rows:minmax(0,1.75fr) minmax(0,.9fr)!important;
2676    gap:12px!important;
2677    margin-top:2px!important;
2678}
2679.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-media{
2680    height:118px!important;
2681    flex:0 0 118px!important;
2682}
2683.about-mega-initiatives .about-mega-card:nth-child(3){
2684    grid-template-rows:1fr!important;
2685    height:auto!important;
2686    min-height:0!important;
2687}
2688.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-media{
2689    height:100%!important;
2690    min-height:0!important;
2691}
2692
2693/* Final 2 + 1 Key Initiatives layout. */
2694.about-mega-initiatives{
2695    grid-template-rows:28px minmax(0,1fr)!important;
2696}
2697.about-mega-initiatives>h3{
2698    grid-row:1!important;
2699    align-self:start!important;
2700    margin:0 0 10px!important;
2701}
2702.about-mega-initiatives .about-mega-cards{
2703    grid-row:2!important;
2704    display:grid!important;
2705    grid-template-columns:repeat(2,minmax(0,1fr))!important;
2706    grid-template-rows:minmax(0,1.7fr) minmax(0,.85fr)!important;
2707    gap:12px!important;
2708    height:100%!important;
2709    min-height:0!important;
2710    align-self:stretch!important;
2711    margin-top:0!important;
2712}
2713.about-mega-initiatives .about-mega-card{
2714    height:auto!important;
2715    min-height:0!important;
2716    border-radius:12px!important;
2717    overflow:hidden!important;
2718    background:rgba(255,255,255,.028)!important;
2719    border-color:rgba(255,255,255,.045)!important;
2720}
2721.about-mega-initiatives .about-mega-card:nth-child(-n+2){
2722    display:flex!important;
2723    flex-direction:column!important;
2724}
2725.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-media{
2726    height:92px!important;
2727    flex:0 0 92px!important;
2728}
2729.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-copy{
2730    padding:11px 13px 39px!important;
2731    gap:4px!important;
2732}
2733.about-mega-initiatives .about-mega-card-copy strong{
2734    font-size:10.25px!important;
2735    line-height:1.25!important;
2736}
2737.about-mega-initiatives .about-mega-card-copy small{
2738    font-size:8.25px!important;
2739    line-height:1.4!important;
2740}
2741.about-mega-initiatives .about-mega-card-arrow{
2742    width:28px!important;
2743    height:28px!important;
2744}
2745.about-mega-initiatives .about-mega-card-badge{
2746    width:34px!important;
2747    height:34px!important;
2748    left:12px!important;
2749    top:12px!important;
2750    border-radius:9px!important;
2751}
2752.about-mega-initiatives .about-mega-card-badge svg{width:18px!important;height:18px!important}
2753.about-mega-initiatives .about-mega-card:nth-child(3){
2754    grid-column:1 / -1!important;
2755    display:grid!important;
2756    grid-template-columns:170px minmax(0,1fr)!important;
2757    grid-template-rows:minmax(0,1fr)!important;
2758    height:auto!important;
2759    min-height:0!important;
2760}
2761.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-media{
2762    height:100%!important;
2763    min-height:0!important;
2764}
2765.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-copy{
2766    justify-content:center!important;
2767    padding:12px 56px 12px 15px!important;
2768}
2769.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-arrow{
2770    left:auto!important;
2771    right:14px!important;
2772    bottom:50%!important;
2773    transform:translateY(50%)!important;
2774}
2775.about-mega-initiatives .about-mega-card:hover{
2776    transform:translateY(-2px)!important;
2777    background:rgba(255,255,255,.04)!important;
2778    border-color:rgba(255,255,255,.075)!important;
2779}
2780
2781
2782/* Purpose-built art for the three initiative cards. */
2783.about-mega-initiatives .about-mega-card-media img{
2784    filter:saturate(.92) brightness(.82)!important;
2785    object-position:center center;
2786}
2787.about-mega-initiatives .about-mega-card:hover .about-mega-card-media img{
2788    filter:saturate(1) brightness(.9)!important;
2789}
2790.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-media img{
2791    object-position:center 48%;
2792}
2793
2794/* Align Key Initiatives with the Explore / Unreal Studios header block. */
2795.about-mega-initiatives{
2796    display:grid!important;
2797    grid-template-rows:72px minmax(0,1fr)!important;
2798    align-content:stretch!important;
2799}
2800.about-mega-initiatives>h3{
2801    grid-row:1!important;
2802    align-self:start!important;
2803    margin:8px 0 0 0!important;
2804    padding-left:0!important;
2805}
2806.about-mega-initiatives .about-mega-cards{
2807    grid-row:2!important;
2808    align-self:stretch!important;
2809    margin-top:0!important;
2810}
2811
2812/* Match Key Initiatives header hierarchy to the Explore / Unreal Studios brand block. */
2813.about-mega-initiatives-kicker{
2814    grid-row:1!important;
2815    align-self:start!important;
2816    margin:-2px 0 0 0!important;
2817    display:grid!important;
2818    grid-template-columns:auto auto 1fr!important;
2819    grid-template-rows:auto auto!important;
2820    column-gap:8px!important;
2821    row-gap:1px!important;
2822    align-items:center!important;
2823    width:max-content!important;
2824}
2825.about-mega-initiatives-kicker small{
2826    grid-column:1 / 3!important;
2827    color:#70747b!important;
2828    font-size:7.5px!important;
2829    font-weight:800!important;
2830    letter-spacing:.22em!important;
2831    line-height:1.1!important;
2832}
2833.about-mega-initiatives-kicker strong{
2834    grid-column:1!important;
2835    grid-row:2!important;
2836    color:#f0f0f2!important;
2837    font-size:11px!important;
2838    font-weight:760!important;
2839    line-height:1.15!important;
2840}
2841.about-mega-initiatives-kicker svg{
2842    grid-column:2!important;
2843    grid-row:2!important;
2844    width:12px!important;
2845    height:12px!important;
2846    color:#7a7d83!important;
2847}
2848.about-mega-initiatives .about-mega-cards{grid-row:2!important;}
2849
2850/* Exact vertical alignment for Explore + Key heading stacks. */
2851.about-mega-brand>span:nth-child(2),
2852.about-mega-initiatives>h3{
2853    align-self:center!important;
2854}
2855.about-mega-brand small,
2856.about-mega-initiatives>h3 .initiative-eyebrow{
2857    line-height:1!important;
2858}
2859.about-mega-brand strong,
2860.about-mega-initiatives>h3 .initiative-title{
2861    line-height:1.05!important;
2862}
2863.about-mega-initiatives>h3{
2864    margin:0!important;
2865    padding:0!important;
2866    display:flex!important;
2867    flex-direction:column!important;
2868    justify-content:center!important;
2869    gap:5px!important;
2870    height:46px!important;
2871}
2872.about-mega-initiatives>h3 .initiative-eyebrow{
2873    display:block!important;
2874    color:#70747b!important;
2875    font-size:7.5px!important;
2876    font-weight:800!important;
2877    letter-spacing:.22em!important;
2878}
2879.about-mega-initiatives>h3 .initiative-title{
2880    display:flex!important;
2881    align-items:center!important;
2882    gap:5px!important;
2883    color:#f0f0f2!important;
2884    font-size:11px!important;
2885    font-weight:760!important;
2886    letter-spacing:0!important;
2887}
2888.about-mega-initiatives>h3 .initiative-title svg{
2889    width:12px!important;
2890    height:12px!important;
2891}
2892@media(max-width:1180px){.about-mega-menu{display:none!important}}@media(prefers-reduced-motion:reduce){.about-mega-menu,#navbar .about-mega-trigger svg,.about-mega-card,.about-mega-card-media img{transition:none!important}}
2893
2894/* Definitive alignment: mirror the EXPLORE / UNREAL STUDIOS text stack exactly. */
2895.about-mega-initiatives > h3{
2896    grid-row:1!important;
2897    align-self:start!important;
2898    width:max-content!important;
2899    height:46px!important;
2900    margin:0!important;
2901    padding:0!important;
2902    transform:translateY(12px)!important;
2903    display:flex!important;
2904    flex-direction:column!important;
2905    justify-content:center!important;
2906    align-items:flex-start!important;
2907    gap:1px!important;
2908}
2909.about-mega-initiatives > h3 .initiative-eyebrow{
2910    display:block!important;
2911    color:#70747b!important;
2912    font-size:7.5px!important;
2913    font-weight:800!important;
2914    letter-spacing:.22em!important;
2915    line-height:normal!important;
2916}
2917.about-mega-initiatives > h3 .initiative-title{
2918    display:flex!important;
2919    align-items:center!important;
2920    gap:5px!important;
2921    color:#f0f0f2!important;
2922    font-size:11px!important;
2923    font-weight:760!important;
2924    line-height:normal!important;
2925}
2926
2927
2928
2929</style>
2930
2931<style id="urs-topbar-nav-font-layout-lock">
2932/* Keep the desktop nav completely immune to webfont swaps during page loads.
2933   Each slot has a fixed width, so fallback-font metrics cannot move the group. */
2934@media (min-width:1181px) {
2935    #navbar .desktop-nav {
2936        position:absolute !important;
2937        top:0 !important;
2938        left:50% !important;
2939        right:auto !important;
2940        width:516px !important;
2941        min-width:516px !important;
2942        max-width:516px !important;
2943        height:64px !important;
2944        margin-left:-258px !important;
2945        display:grid !important;
2946        grid-template-columns:68px 86px 132px 68px 80px 82px !important;
2947        align-items:stretch !important;
2948        justify-content:initial !important;
2949        gap:0 !important;
2950        transform:none !important;
2951    }
2952    #navbar .desktop-nav > .nav-link {
2953        width:100% !important;
2954        min-width:0 !important;
2955        max-width:none !important;
2956        padding:0 !important;
2957        margin:0 !important;
2958        justify-self:stretch !important;
2959        font-family:"Segoe UI", Arial, sans-serif !important;
2960        font-size:12.5px !important;
2961        line-height:1 !important;
2962        font-weight:650 !important;
2963        letter-spacing:-.01em !important;
2964        white-space:nowrap !important;
2965    }
2966}
2967</style>
2968
2969<nav id="navbar" class="topbar">
2970    <div class="nav-inner">
2971        <div class="topbar-left">
2972            <a href="/" class="brand" aria-label="Unreal Studios home">
2973                <img src="/assets/img/logos/logoandtext-display.png?v=20261007-3" alt="Unreal Studios">
2974            </a>
2975
2976            <div class="topbar-socials" aria-label="Unreal Studios social links">
2977                <span class="topbar-social-divider" aria-hidden="true"></span>
2978
2979                <a href="https://discord.com/invite/WAZe8ruSTm"
2980                   target="_blank"
2981                   rel="noopener noreferrer nofollow"
2982                   aria-label="Discord"
2983                   title="Discord">
2984                    <i class="fa-brands fa-discord"></i>
2985                </a>
2986
2987                <a href="https://www.youtube.com/channel/UClyh4g7SBGC59djP1yt2Amw"
2988                   target="_blank"
2989                   rel="noopener noreferrer nofollow"
2990                   aria-label="YouTube"
2991                   title="YouTube">
2992                    <i class="fa-brands fa-youtube"></i>
2993                </a>
2994
2995                <a href="https://github.com/Official-Unreal-Studios"
2996                   target="_blank"
2997                   rel="noopener noreferrer nofollow"
2998                   aria-label="GitHub"
2999                   title="GitHub">
3000                    <i class="fa-brands fa-github"></i>
3001                </a>
3002            </div>
3003        </div>
3004
3005        <div class="desktop-nav">
3006            <a href="/" class="nav-link">Home</a>
3007            <a href="/products/view-all" class="nav-link">Products</a>
3008            <a href="/documentation"
3009       rel="noopener noreferrer nofollow"
3010       class="nav-link">Documentation</a>
3011			<a href="/news" class="nav-link" id="newsNavLink">News</a>
3012            <a href="/support" class="nav-link">Support</a>
3013            <button id="aboutMegaTrigger" type="button" class="nav-link about-mega-trigger" aria-expanded="false" aria-controls="aboutMegaMenu">
3014                <span>More</span>
3015                <svg class="about-mega-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
3016                    <path d="m6 9 6 6 6-6"></path>
3017                </svg>
3018            </button>
3019        </div>
3020        <div class="desktop-actions">
3021            <a href="https://unreal-studios-shop.tebex.io/checkout/basket"
3022               id="open-basket-btn"
3023               class="icon-btn basket-icon"
3024               aria-label="Basket"
3025               title="Basket"
3026               data-click-set="true">
3027                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
3028                    <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"></path>
3029                    <path d="M3 6h18"></path>
3030                    <path d="M16 10a4 4 0 0 1-8 0"></path>
3031                </svg>
3032            </a>
3033
3034            <div id="currency-widget-container">
3035                <button id="trigger-btn" type="button" aria-label="Change currency" aria-expanded="false">
3036                    <span id="active-label">USD</span>
3037                    <svg id="widget-arrow" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3">
3038                        <path d="m6 9 6 6 6-6"></path>
3039                    </svg>
3040                </button>
3041
3042            </div>
3043
3044            
3045            <div id="desktopAuth" class="auth-wrap" data-auth-ready="true">
3046                <a href="/login" id="open-login" class="login-pill"  data-click-set="true">
3047                    <i class="fa-solid fa-arrow-right-to-bracket"></i>
3048                    <span>Login</span>
3049                </a>
3050
3051                <button id="desktopUserBtn" class="user-pill hidden" hidden type="button" aria-expanded="false">
3052                    <img id="desktopUserAvatar" class="user-avatar" src="/assets/img/logos/urs-logo-bw.png" alt="Profile">
3053                    <span id="desktopUserName" class="user-name">Account</span>
3054                    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
3055                        <path d="m6 9 6 6 6-6"></path>
3056                    </svg>
3057                </button>
3058            </div>
3059        </div>
3060
3061        <button id="mobile-menu-btn" type="button" aria-label="Open mobile menu" aria-expanded="false">
3062            <i data-lucide="menu"></i>
3063        </button>
3064    </div>
3065</nav>
3066<div class="urs-topbar-flow-spacer" aria-hidden="true"></div>
3067<script>
3068    (() => {
3069        const newsNavLink = document.getElementById('newsNavLink');
3070        const path = window.location.pathname.replace(/\/+$/, '') || '/';
3071        const onNewsPage = path === '/news' || path.startsWith('/news/');
3072        if (!newsNavLink) return;
3073        newsNavLink.classList.toggle('active', onNewsPage);
3074        if (onNewsPage) newsNavLink.setAttribute('aria-current', 'page');
3075        else newsNavLink.removeAttribute('aria-current');
3076    })();
3077</script>
3077
3078
3079<div id="desktopUserDropdown" class="user-dropdown urs-account-menu-minimal">
3080                    <div class="urs-account-mini-profile">
3081                        <img id="dropdownUserAvatar" alt="Profile">
3082
3083                        <div class="urs-account-mini-identity">
3084                            <div id="dropdownUserName" class="user-dropdown-name">Account</div>
3085                            <div class="urs-account-subline">
3086                                <div id="dropdownUserSub" class="user-dropdown-sub">Signed in</div>
3087                                <span id="dropdownStatusBadge" class="urs-account-status-pill" hidden></span>
3088                            </div>
3089                        </div>
3090                    </div>
3091
3092                    <div class="urs-account-mini-links">
3093                        <a href="/account/settings" class="user-shortcut urs-account-mini-link">
3094                            <i data-lucide="circle-user-round"></i>
3095                            <span>My Account</span>
3096                        </a>
3097
3098                        <a href="/account/transactions" class="user-shortcut urs-account-mini-link">
3099                            <i data-lucide="receipt-text"></i>
3100                            <span>Orders</span>
3101                        </a>
3102
3103                        <a href="/account/support" class="user-shortcut urs-account-mini-link">
3104                            <i data-lucide="life-buoy"></i>
3105                            <span>Support</span>
3106                        </a>
3107
3108                        <a href="/account/security" class="user-shortcut urs-account-mini-link">
3109                            <i data-lucide="shield-check"></i>
3110                            <span>Security</span>
3111                        </a>
3112                    </div>
3113
3114                    <div id="desktopPartnerSection" class="urs-account-staff-section" hidden aria-hidden="true">
3115                        <div class="urs-account-mini-divider"></div>
3116                        <a href="/partner/portal" id="desktopPartnerLink" class="user-shortcut urs-account-mini-link urs-account-staff-link">
3117                            <i data-lucide="handshake"></i>
3118                            <span>Partner Portal</span>
3119                            <span class="urs-account-staff-badge">PARTNER</span>
3120                        </a>
3121                    </div>
3122
3123                    <div id="desktopStaffSection" class="urs-account-staff-section" hidden aria-hidden="true">
3124                        <div class="urs-account-mini-divider"></div>
3125                        <a href="/employee/dashboard" id="desktopStaffLink" class="user-shortcut urs-account-mini-link urs-account-staff-link">
3126                            <i data-lucide="badge-check"></i>
3127                            <span>Service Desk</span>
3128                            <span class="urs-account-staff-badge">STAFF</span>
3129                        </a>
3130                    </div>
3131
3132                    <div class="urs-account-mini-divider"></div>
3133
3134                    <a href="/api/logout" class="user-shortcut danger urs-account-mini-logout">
3135                        <i data-lucide="log-out"></i>
3136                        <span>Sign out</span>
3137                    </a>
3138                </div>
3139<div id="dropdown-wrapper">
3140    <div class="currency-menu">
3141        <div class="currency-menu-title">Currency</div>
3142        <div id="currency-grid"></div>
3143    </div>
3144</div>
3145
3146<div id="aboutMegaMenu" class="about-mega-menu" aria-hidden="true">
3147    <div class="about-mega-shell">
3148        <section class="about-mega-company" aria-labelledby="aboutMegaCompanyTitle">
3149            <a href="/about" class="about-mega-brand">
3150                <span class="about-mega-brand-map" aria-hidden="true">
3151                    <svg class="about-mega-map-art" viewBox="0 0 300 92" preserveAspectRatio="none" focusable="false">
3152                        <rect width="300" height="92" rx="16" fill="#e7eae4"/>
3153                        <path d="M-18 62L74 6L118 6L24 72Z" fill="#d8ddd6"/>
3154                        <path d="M76 -8L156 28L139 49L58 13Z" fill="#daddd8"/>
3155                        <path d="M176 -10L319 48L319 74L160 9Z" fill="#d7dbd5"/>
3156                        <path d="M165 53L250 20L319 42L319 92L236 92Z" fill="#d9ddd7"/>
3157                        <path d="M-8 87L73 44L113 65L63 92H-8Z" fill="#d5dad3"/>
3158                        <path d="M0 33C44 37 66 48 97 65C126 80 163 91 210 93" fill="none" stroke="#f5f6f2" stroke-width="15" stroke-linecap="round"/>
3159                        <path d="M205 -9C189 15 176 35 167 55C160 69 158 81 157 95" fill="none" stroke="#f5f6f2" stroke-width="14" stroke-linecap="round"/>
3160                        <path d="M-10 18C42 30 84 27 125 18C166 10 205 7 311 21" fill="none" stroke="#f2f4ef" stroke-width="10" stroke-linecap="round"/>
3161                        <path d="M11 0C31 24 55 45 88 64C110 77 129 84 151 91" fill="none" stroke="#cfd4ce" stroke-width="2" opacity=".65"/>
3162                        <path d="M211 -3C192 21 179 41 171 61C167 72 164 82 164 94" fill="none" stroke="#cfd4ce" stroke-width="2" opacity=".62"/>
3163                        <path d="M-2 20C39 30 83 29 126 20C174 10 220 10 301 22" fill="none" stroke="#d2d6d0" stroke-width="1.8" opacity=".55"/>
3164                        <g transform="translate(136 27)">
3165                            <path d="M14 0C6.27 0 0 6.27 0 14c0 10.25 14 25.8 14 25.8S28 24.25 28 14C28 6.27 21.73 0 14 0Z" fill="#9f4fd8"/>
3166                            <circle cx="14" cy="14" r="5.25" fill="#eef1ec"/>
3167                        </g>
3168                    </svg>
3169                </span>
3170                <span><small>EXPLORE</small><strong>UNREAL STUDIOS</strong></span>
3171            </a>
3172            <h3 id="aboutMegaCompanyTitle"><a href="/about" class="about-mega-heading-link">Company &amp; Resources <i data-lucide="chevron-right"></i></a></h3>
3173            <div class="about-mega-link-list">
3174                <a href="/about#team" data-about-search="meet the team team staff people">
3175                    <span class="about-mega-icon"><i data-lucide="users"></i></span>
3176                    <span><strong>Meet the Team</strong><small>Get to know our team</small></span>
3177                    <i data-lucide="chevron-right"></i>
3178                </a>
3179                <a href="/about#mission" data-about-search="our mission mission values what we stand for">
3180                    <span class="about-mega-icon"><i data-lucide="file-text"></i></span>
3181                    <span><strong>Our Mission</strong><small>What we stand for</small></span>
3182                    <i data-lucide="chevron-right"></i>
3183                </a>
3184                <a href="https://discord.com/invite/WAZe8ruSTm" target="_blank" rel="noopener noreferrer nofollow" data-about-search="community forum conversation discord">
3185                    <span class="about-mega-icon"><i data-lucide="message-square"></i></span>
3186                    <span><strong>Community Forum</strong><small>Join the conversation</small></span>
3187                    <i data-lucide="chevron-right"></i>
3188                </a>
3189                <a href="/partners" data-about-search="partnership program creators partners">
3190                    <span class="about-mega-icon"><i data-lucide="handshake"></i></span>
3191                    <span><strong>Partnership Program</strong><small>Creators &amp; partners</small></span>
3192                    <i data-lucide="chevron-right"></i>
3193                </a>
3194            </div>
3195        </section>
3196
3197        <section class="about-mega-initiatives" aria-labelledby="aboutMegaInitiativesTitle">
3198            <div class="about-mega-initiatives-kicker"><small>KEY</small><strong>INITIATIVES</strong><i data-lucide="chevron-right"></i></div>
3199            <div class="about-mega-cards">
3200                <a href="/products/view-all" class="about-mega-card" data-about-search="game server solutions hosting deployment management">
3201                    <span class="about-mega-card-media fivem"><img src="/assets/img/banners/site banners/game-resource-development-banner.png" alt=""><span class="about-mega-card-badge is-orange"><i data-lucide="gamepad-2"></i></span></span>
3202                    <span class="about-mega-card-copy"><strong>Game Resource Development</strong><small>Custom scripts, systems, and polished gameplay tools built for game communities.</small><span class="about-mega-card-meta"><span>FiveM Resources</span><span>Minecraft Mods</span><span>Custom Systems</span></span></span>
3203                    <span class="about-mega-card-arrow"><i data-lucide="arrow-up-right"></i></span>
3204                </a>
3205                <a href="/documentation" class="about-mega-card" data-about-search="project catalyst class editor block utilities custom code tools">
3206                    <span class="about-mega-card-media minecraft"><img src="/assets/img/banners/site banners/software-development-banner.png" alt=""><span class="about-mega-card-badge is-purple"><i data-lucide="code-2"></i></span></span>
3207                    <span class="about-mega-card-copy"><strong>Software Development</strong><small>Purpose-built apps, integrations, utilities, and backend tools for real workflows.</small><span class="about-mega-card-meta"><span>Desktop Tools</span><span>Automation</span><span>Integrations</span></span></span>
3208                    <span class="about-mega-card-arrow"><i data-lucide="arrow-up-right"></i></span>
3209                </a>
3210                <a href="/about#direction" class="about-mega-card" data-about-search="studio partnerships creators partners community collaboration">
3211                    <span class="about-mega-card-media minecraft"><img src="/assets/img/banners/site banners/website-development-banner.png" alt=""><span class="about-mega-card-badge is-purple"><i data-lucide="panels-top-left"></i></span></span>
3212                    <span class="about-mega-card-copy"><strong>Website Development</strong><small>Modern websites, dashboards, storefronts, and web apps designed for performance.</small><span class="about-mega-card-meta"><span>Dashboards</span><span>Storefronts</span><span>Web Apps</span></span></span>
3213                    <span class="about-mega-card-arrow"><i data-lucide="arrow-up-right"></i></span>
3214                </a>
3215            </div>
3216        </section>
3217
3218        <section class="about-mega-updates" aria-labelledby="aboutMegaUpdatesTitle">
3219            <label class="about-mega-search">
3220                <i data-lucide="search"></i>
3221                <input id="aboutMegaSearch" type="search" placeholder="Search Updates & News..." autocomplete="off" aria-label="Search About resources">
3222            </label>
3223            <h3 id="aboutMegaUpdatesTitle"><a href="/news" class="about-mega-heading-link">Updates &amp; News <i data-lucide="chevron-right"></i></a></h3>
3224            <div class="about-mega-update-list">
3225                
3226                    <a href="/news/controlx-v3-1-0"
3227                       
3228                       data-about-search="ControlX v3.1.0 3.1.0 FiveM update UVC lighting PARK sync emergency vehicle standalone">
3229                        <span>
3230                            <strong>ControlX v3.1.0 Is Now Available</strong>
3231                            <small>ControlX v3.1.0 is out now with improved UVC compatibility, lighting reliability, PARK synchronization, and general stability improvements.</small>
3232                            <span class="about-mega-update-date"><i data-lucide="calendar-days"></i> 06 Oct, 2026</span>
3233                        </span>
3234                        <span class="about-mega-update-thumb"><img src="/assets/img/news/updates/controlx-v3.1.0/thumbnail.png" alt=""></span>
3235                    </a>
3236                
3237                    <a href="/news/fall-sale-2026"
3238                       
3239                       data-about-search="fall sale 2026 30 off sitewide sale unreal studios discount fivem minecraft software products">
3240                        <span>
3241                            <strong>Fall Sale 2026: 30% Off Sitewide</strong>
3242                            <small>The Unreal Studios Fall Sale 2026 is live with 30% off across the entire store for a limited time.</small>
3243                            <span class="about-mega-update-date"><i data-lucide="calendar-days"></i> 04 Oct, 2026</span>
3244                        </span>
3245                        <span class="about-mega-update-thumb"><img src="/assets/img/news/announcements/fall-sale-2026/thumbnail.png" alt=""></span>
3246                    </a>
3247                
3248                    <a href="/news/rocketnode-partnership"
3249                       
3250                       data-about-search="rocketnode partnership hosting fivem minecraft game server community partner">
3251                        <span>
3252                            <strong>Unreal Studios partners with RocketNode</strong>
3253                            <small>We’re partnering with RocketNode to give our FiveM and Minecraft communities access to game-server hosting with instant setup, DDoS protection, global locations, 24/7 support, and partner offers.</small>
3254                            <span class="about-mega-update-date"><i data-lucide="calendar-days"></i> 27 Sep, 2026</span>
3255                        </span>
3256                        <span class="about-mega-update-thumb"><img src="/assets/img/news/partners/rocketnode/thumbnail.png" alt=""></span>
3257                    </a>
3258                
3259            </div>
3260            <div id="aboutMegaNoResults" class="about-mega-empty" hidden>
3261                <span class="about-mega-empty-icon"><i data-lucide="search-x"></i></span>
3262                <strong>No matching updates</strong>
3263                <small>Try another keyword or clear your search to see all updates.</small>
3264                <button type="button" id="aboutMegaClearSearch" class="about-mega-empty-clear">Clear search</button>
3265            </div>
3266        </section>
3267    </div>
3268</div>
3269
3270    <div class="us-menu">
3271
3272  <div class="menu-overlay" id="usMenuOverlay"></div>
3273
3274  <aside class="drawer" id="usMenuDrawer">
3275    <div class="drawer-inner">
3276      <div class="topbar">
3277        <div class="brand">
3278          <img
3279            src="/assets/img/logos/logoandtext-display.png?v=20261007-3"
3280            alt="Unreal Studios"
3281          />
3282        </div>
3283
3284        <button class="close-btn" id="usMenuCloseBtn" aria-label="Close menu">
3285          <i class="fa-solid fa-xmark"></i>
3286        </button>
3287      </div>
3288
3289      <div class="group">
3290        <div class="section-title">Navigation</div>
3291        <div class="nav-list">
3292          <a href="/" class="nav-item">
3293            <div class="nav-left">
3294              <span class="nav-icon"><i class="fa-solid fa-house"></i></span>
3295              <span>Home</span>
3296            </div>
3297            <i class="fa-solid fa-chevron-right nav-arrow"></i>
3298          </a>
3299
3300          <button class="nav-toggle" id="usScriptsToggle" type="button">
3301            <div class="nav-left">
3302              <span class="nav-icon"><i class="fa-solid fa-code"></i></span>
3303              <span>Products</span>
3304            </div>
3305            <i class="fa-solid fa-chevron-down nav-arrow"></i>
3306          </button>
3307
3308          <div class="submenu" id="usScriptsMenu">
3309            <div class="submenu-inner">
3310              <a href="/products/fivem">
3311                <img
3312                  class="submenu-brand-logo submenu-brand-logo-fivem"
3313                  src="https://cdn.simpleicons.org/fivem/F40552"
3314                  alt=""
3315                  aria-hidden="true"
3316                />
3317                <span>FiveM</span>
3318              </a>
3319              <a href="/products/minecraft">
3320                <img
3321                  class="submenu-brand-logo submenu-brand-logo-minecraft"
3322                  src="https://commons.wikimedia.org/wiki/Special:Redirect/file/Minecraft-creeper-face.svg"
3323                  alt=""
3324                  aria-hidden="true"
3325                />
3326                <span>Minecraft</span>
3327              </a>
3328              <a href="/products/other">
3329                <i class="fa-solid fa-shapes submenu-product-icon" aria-hidden="true"></i>
3330                <span>Other</span>
3331              </a>
3332            </div>
3333          </div>
3334
3335          <a href="/documentation" class="nav-item">
3336            <div class="nav-left">
3337              <span class="nav-icon"><i class="fa-regular fa-file-lines"></i></span>
3338              <span>Documentation</span>
3339            </div>
3340            <i class="fa-solid fa-chevron-right nav-arrow"></i>
3341          </a>
3342        </div>
3343      </div>
3344
3345      <div class="group">
3346        <div class="section-title">Follow us</div>
3347        <div class="social-grid">
3348          <a href="https://discord.com/invite/WAZe8ruSTm" class="social-btn">
3349            <i class="fa-brands fa-discord"></i>
3350            <span>Discord</span>
3351          </a>
3352          <a href="https://www.youtube.com/channel/UClyh4g7SBGC59djP1yt2Amw" class="social-btn">
3353            <i class="fa-brands fa-youtube"></i>
3354            <span>YouTube</span>
3355          </a>
3356          <a href="https://github.com/Official-Unreal-Studios" class="social-btn">
3357            <i class="fa-brands fa-github"></i>
3358            <span>GitHub</span>
3359          </a>
3360        </div>
3361      </div>
3362
3363      <div class="group">
3364        <div class="section-title">Currency</div>
3365        <div class="currency-grid">
3366          <button class="currency-btn active" type="button" data-currency="USD">USD</button>
3367          <button class="currency-btn" type="button" data-currency="GBP">GBP</button>
3368          <button class="currency-btn" type="button" data-currency="EUR">EUR</button>
3369          <button class="currency-btn" type="button" data-currency="AUD">AUD</button>
3370          <button class="currency-btn" type="button" data-currency="CAD">CAD</button>
3371          <button class="currency-btn" type="button" data-currency="PLN">PLN</button>
3372        </div>
3373      </div>
3374
3375      <div class="group">
3376        <a href="https://unreal-studios-shop.tebex.io/checkout/basket" class="basket-btn">
3377  <i class="fa-solid fa-cart-shopping"></i>
3378  <span>Basket</span>
3379  <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
3380</a>
3381      </div>
3382
3383     <div class="group mobile-account-group">
3384    <div class="section-title">Account</div>
3385
3386    <div id="mobileAuthSlot">
3387        <a id="mobileLoginBtn" href="/login" class="login-btn open-login-btn">
3388            <span>
3389                <i class="fa-solid fa-arrow-right-to-bracket"></i>
3390                Login
3391            </span>
3392            <i class="fa-solid fa-chevron-right"></i>
3393        </a>
3394
3395        <div id="mobileUserBox" class="home-mobile-auth-user hidden" hidden aria-hidden="true">
3396            <button
3397                id="mobileAccountToggle"
3398                class="home-mobile-auth-head"
3399                type="button"
3400                aria-expanded="false"
3401            >
3402                <span class="home-mobile-auth-left">
3403                    <img
3404                        id="mobileUserAvatar"
3405                        alt="Profile"
3406                    >
3407                    <span>
3408                        <span id="mobileUserName" class="home-mobile-auth-name">Account</span>
3409                        <span class="home-mobile-auth-meta">
3410                            <span id="mobileUserRole" class="home-mobile-auth-sub">Signed in</span>
3411                            <span id="mobileStatusBadge" class="urs-account-status-pill" hidden></span>
3412                        </span>
3413                    </span>
3414                </span>
3415
3416                <i class="fa-solid fa-chevron-down mobile-account-toggle-chevron"></i>
3417            </button>
3418
3419            <div id="mobileAccountDropdown" class="home-account-dropdown">
3420                <a href="/account/settings">
3421                    <i class="fa-solid fa-user"></i>
3422                    <span>My Account</span>
3423                </a>
3424
3425                <a href="/account/transactions">
3426                    <i class="fa-solid fa-receipt"></i>
3427                    <span>Orders</span>
3428                </a>
3429
3430                <a href="/account/support">
3431                    <i class="fa-solid fa-life-ring"></i>
3432                    <span>Support</span>
3433                </a>
3434
3435                <a href="/account/security">
3436                    <i class="fa-solid fa-shield-halved"></i>
3437                    <span>Security</span>
3438                </a>
3439
3440                <a href="/partner/portal" id="mobilePartnerLink" class="home-account-dropdown-staff" hidden aria-hidden="true">
3441                    <i class="fa-solid fa-handshake"></i>
3442                    <span>Partner Portal</span>
3443                </a>
3444
3445                <a href="/employee/dashboard" id="mobileStaffLink" class="home-account-dropdown-staff" hidden aria-hidden="true">
3446                    <i class="fa-solid fa-user-shield"></i>
3447                    <span>Service Desk</span>
3448                </a>
3449
3450                <button
3451                    type="button"
3452                    class="home-account-dropdown-logout logout-trigger"
3453                >
3454                    <i class="fa-solid fa-right-from-bracket"></i>
3455                    <span>Logout</span>
3456                </button>
3457            </div>
3458        </div>
3459    </div>
3460</div>
3461    </div>
3462  </aside>
3463</div>
3464
3465
3466<style id="urs-account-status-pill-style">
3467.urs-account-subline,.home-mobile-auth-meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
3468.urs-account-status-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;padding:0;border:0;border-radius:0;background:transparent;opacity:.94}
3469.urs-account-status-pill.is-limited{color:#f4c542 !important;background:transparent !important;border:0 !important}
3470.urs-account-status-pill.is-limited::before{content:"\f017";font-family:"Font Awesome 6 Free";font-weight:400;font-size:8.5px;line-height:1;color:inherit;transform:translateY(-.15px)}
3471.urs-account-status-pill.is-flagged{color:#fb923c !important;background:transparent !important;border:0 !important}
3472
3473/* Structural alignment: mirror the 55px Explore brand text row exactly. */
3474.about-mega-initiatives{
3475    grid-template-rows:73px minmax(0,1fr)!important;
3476}
3477.about-mega-initiatives > h3{
3478    grid-row:1!important;
3479    height:55px!important;
3480    margin:0!important;
3481    padding:0!important;
3482    transform:none!important;
3483    align-self:start!important;
3484    display:flex!important;
3485    flex-direction:column!important;
3486    justify-content:center!important;
3487    gap:1px!important;
3488}
3489.about-mega-initiatives > h3 .initiative-eyebrow{
3490    line-height:normal!important;
3491}
3492.about-mega-initiatives > h3 .initiative-title{
3493    line-height:normal!important;
3494}
3495.about-mega-initiatives .about-mega-cards{
3496    grid-row:2!important;
3497}
3498
3499/* REAL Key Initiatives alignment fix: target the element that actually renders. */
3500.about-mega-initiatives{
3501    grid-template-rows:55px minmax(0,1fr)!important;
3502}
3503.about-mega-initiatives-kicker{
3504    grid-row:1!important;
3505    align-self:stretch!important;
3506    height:55px!important;
3507    margin:0!important;
3508    padding:0!important;
3509    transform:translateY(-6px)!important;
3510    display:grid!important;
3511    grid-template-columns:auto auto!important;
3512    grid-template-rows:auto auto!important;
3513    column-gap:5px!important;
3514    row-gap:1px!important;
3515    align-content:center!important;
3516    justify-content:start!important;
3517    width:max-content!important;
3518}
3519.about-mega-initiatives-kicker small{grid-column:1 / 3!important;grid-row:1!important;line-height:normal!important;}
3520.about-mega-initiatives-kicker strong{grid-column:1!important;grid-row:2!important;line-height:normal!important;}
3521.about-mega-initiatives-kicker svg{grid-column:2!important;grid-row:2!important;align-self:center!important;}
3522.about-mega-initiatives .about-mega-cards{grid-row:2!important;}
3523
3524/* Fill Key Initiatives cards without making them heavy. */
3525.about-mega-card-copy{padding:13px 14px 46px!important;gap:6px!important}
3526.about-mega-card-copy strong{font-size:11px!important;line-height:1.2!important}
3527.about-mega-card-copy small{font-size:8.5px!important;line-height:1.45!important;max-width:96%!important}
3528.about-mega-card-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
3529.about-mega-card-meta>span{height:20px;padding:0 7px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.045);color:#bfc1c8;font-size:7.3px;font-weight:620;line-height:1;white-space:nowrap}
3530.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-meta{margin-top:5px}
3531
3532/* Clean final Key Initiatives layout. */
3533.about-mega-initiatives .about-mega-cards{
3534    display:grid!important;
3535    grid-template-columns:repeat(2,minmax(0,1fr))!important;
3536    grid-template-rows:238px 123px!important;
3537    gap:12px!important;
3538    height:373px!important;
3539    min-height:0!important;
3540    overflow:visible!important;
3541}
3542.about-mega-initiatives .about-mega-card{position:relative!important;min-height:0!important;height:100%!important;overflow:hidden!important;}
3543.about-mega-initiatives .about-mega-card:nth-child(-n+2){display:flex!important;flex-direction:column!important;}
3544.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-media{height:108px!important;flex:0 0 108px!important;}
3545.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-copy{flex:1 1 auto!important;padding:13px 58px 13px 14px!important;display:flex!important;flex-direction:column!important;gap:6px!important;justify-content:flex-start!important;overflow:hidden!important;}
3546.about-mega-initiatives .about-mega-card-copy strong{font-size:10.7px!important;line-height:1.22!important;}
3547.about-mega-initiatives .about-mega-card-copy small{font-size:8.35px!important;line-height:1.4!important;max-width:100%!important;}
3548.about-mega-initiatives .about-mega-card-meta{display:flex!important;flex-wrap:wrap!important;gap:5px!important;margin-top:2px!important;padding:0!important;}
3549.about-mega-initiatives .about-mega-card-meta>span{height:19px!important;padding:0 7px!important;font-size:7.1px!important;}
3550.about-mega-initiatives .about-mega-card-arrow{position:absolute!important;left:auto!important;right:14px!important;bottom:14px!important;width:34px!important;height:34px!important;border-radius:10px!important;display:grid!important;place-items:center!important;color:#eeeef4!important;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032))!important;border:1px solid rgba(255,255,255,.065)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 6px 16px rgba(0,0,0,.16)!important;transform:none!important;transition:transform 160ms ease,background 160ms ease,border-color 160ms ease!important;}
3551.about-mega-initiatives .about-mega-card-arrow svg{width:14px!important;height:14px!important;}
3552.about-mega-initiatives .about-mega-card:hover .about-mega-card-arrow{transform:translate(1px,-1px)!important;background:linear-gradient(180deg,rgba(139,108,255,.18),rgba(255,255,255,.045))!important;border-color:rgba(150,120,255,.20)!important;}
3553.about-mega-initiatives .about-mega-card:nth-child(3){grid-column:1/-1!important;display:grid!important;
3553grid-template-columns:170px minmax(0,1fr)!important;grid-template-rows:123px!important;height:123px!important;}
3554.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-media{height:123px!important;min-height:123px!important;}
3555.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-copy{padding:18px 64px 16px 16px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:6px!important;overflow:hidden!important;}
3556.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-meta{margin-top:2px!important;padding:0!important;}
3557.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-arrow{right:14px!important;bottom:50%!important;transform:translateY(50%)!important;}
3558.about-mega-initiatives .about-mega-card:nth-child(3):hover .about-mega-card-arrow{transform:translate(1px,calc(50% - 1px))!important;}
3559
3560/* Keep only the middle initiative cards contained; do not resize the side columns. */
3561.about-mega-shell{height:430px!important;min-height:0!important;}
3562.about-mega-initiatives{display:grid!important;grid-template-rows:55px minmax(0,1fr)!important;min-height:0!important;overflow:hidden!important;}
3563.about-mega-initiatives .about-mega-cards{height:100%!important;min-height:0!important;overflow:hidden!important;grid-template-rows:minmax(0,1.55fr) minmax(0,.72fr)!important;}
3564.about-mega-initiatives .about-mega-card{min-height:0!important;max-height:100%!important;}
3565.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-media{height:88px!important;flex:0 0 88px!important;}
3566.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-copy{padding:10px 12px 44px!important;overflow:hidden!important;}
3567.about-mega-initiatives .about-mega-card:nth-child(3){min-height:0!important;overflow:hidden!important;}
3568.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-media{min-height:0!important;overflow:hidden!important;}
3569.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-copy{min-height:0!important;overflow:hidden!important;padding:10px 56px 10px 14px!important;}
3570
3571/* Keep Updates & News fully visible in the final mega-menu layout. */
3572.about-mega-updates{
3573    display:grid!important;
3574    grid-template-rows:55px 28px minmax(0,1fr)!important;
3575    min-height:0!important;
3576    overflow:visible!important;
3577}
3578.about-mega-updates .about-mega-search{grid-row:1!important;align-self:start!important;}
3579.about-mega-updates>h3{grid-row:2!important;align-self:center!important;}
3580.about-mega-updates .about-mega-update-list{
3581    grid-row:3!important;
3582    display:grid!important;
3583    grid-template-rows:repeat(3,minmax(0,1fr))!important;
3584    width:100%!important;
3585    min-height:0!important;
3586    height:auto!important;
3587    opacity:1!important;
3588    visibility:visible!important;
3589    overflow:hidden!important;
3590}
3591.about-mega-updates .about-mega-update-list>a:not([hidden]){
3592    display:grid!important;
3593    min-height:0!important;
3594    opacity:1!important;
3595    visibility:visible!important;
3596}
3597
3598/* Landscape thumbnails for Updates & News. */
3599.about-mega-update-list>a{grid-template-columns:minmax(0,1fr) 110px!important;gap:14px!important;padding:11px 12px!important;}
3600.about-mega-update-thumb{width:110px!important;height:62px!important;border-radius:5px!important;justify-self:end!important;border:0!important;box-shadow:none!important;}
3601.about-mega-update-thumb img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;filter:saturate(.82) brightness(.78)!important;}
3602.about-mega-update-thumb.is-logo{display:block!important;background:radial-gradient(circle at 50% 45%,rgba(134,51,193,.32),rgba(44,28,55,.82))!important;}
3603.about-mega-update-thumb.is-logo img{width:100%!important;height:100%!important;object-fit:cover!important;filter:none!important;}
3604
3605</style>
3606
3607<script src="/javascript/public/currency-system.js?v=20261004-usd-tebex-sale-3"></script>
vendor: 1 bytes, line 3607
3607
3608<script id="urs-site-shell-controller">
3609(() => {
3610    const CURRENCIES = [
3611        ["USD", "US Dollar"],
3612        ["GBP", "British Pound"],
3613        ["EUR", "Euro"],
3614        ["AUD", "Australian Dollar"],
3615        ["CAD", "Canadian Dollar"],
3616        ["PLN", "Polish Zloty"]
3617    ];
3618
3619    const $ = (id) => document.getElementById(id);
3620
3621    function displayName(user) {
3622        return (
3623            user?.global_name ||
3624            user?.display_name ||
3625            user?.displayName ||
3626            user?.discord_username ||
3627            user?.username ||
3628            user?.name ||
3629            user?.cfx_username ||
3630            "Account"
3631        );
3632    }
3633
3634    function avatarUrl(user) {
3635        if (!user) return "/assets/img/logos/urs-logo-bw.png";
3636
3637        const avatar = String(user.avatar || "").trim();
3638
3639        if (avatar.startsWith("/uploads/")) return avatar;
3640        if (/^https?:\/\//i.test(avatar)) return avatar;
3641
3642        const discordId = String(user.discord_id || user.discordId || "").trim();
3643
3644        if (avatar && discordId) {
3645            const ext = avatar.startsWith("a_") ? "gif" : "png";
3646            return `https://cdn.discordapp.com/avatars/${discordId}/${avatar}.${ext}?size=128`;
3647        }
3648
3649        if (discordId && /^\d+$/.test(discordId)) {
3650            try {
3651                const index = Number((BigInt(discordId) >> 22n) % 6n);
3652                return `https://cdn.discordapp.com/embed/avatars/${index}.png`;
3653            } catch (_) {}
3654        }
3655
3656        return "/assets/img/logos/urs-logo-bw.png";
3657    }
3658
3659    function accountRole(user) {
3660        return user?.account_rank || user?.login_platform || "Signed in";
3661    }
3662
3663    function accountStatus(user) {
3664        const status = String(user?.account_status || '').trim().toLowerCase();
3665        return status === 'limited' ? status : '';
3666    }
3667
3668    function isStaffAccount(user) {
3669        const rank = String(
3670            user?.account_rank ||
3671            user?.staff_rank ||
3672            user?.rank ||
3673            user?.role ||
3674            ""
3675        ).trim().toLowerCase();
3676
3677        return ["trial support", "support", "senior support", "mod", "moderator", "senior moderator", "manager", "admin", "administrator", "owner"].includes(rank);
3678    }
3679
3680    function isPartnerAccount(user) {
3681        const rank = String(user?.account_rank || user?.rank || user?.role || "").trim().toLowerCase();
3682        return rank === "partner" || Number(user?.partner_portal_access || 0) === 1;
3683    }
3684
3685    // --------------------------------------------------------
3686    // Desktop account
3687    // --------------------------------------------------------
3688    const desktopLogin = $("open-login");
3689    const desktopUserBtn = $("desktopUserBtn");
3690    const desktopDropdown = $("desktopUserDropdown");
3691    const desktopPartnerSection = $("desktopPartnerSection");
3692    const desktopStaffSection = $("desktopStaffSection");
3693
3694    function positionDesktopAccountDropdown() {
3695        if (!desktopUserBtn || !desktopDropdown) return;
3696        const rect = desktopUserBtn.getBoundingClientRect();
3697        const navBottom = document.getElementById("navbar")?.getBoundingClientRect().bottom || 64;
3698        const right = Math.max(12, window.innerWidth - rect.right);
3699        desktopDropdown.style.setProperty("top", `${Math.round(Math.max(rect.bottom + 8, navBottom + 8))}px`, "important");
3700        desktopDropdown.style.setProperty("right", `${Math.round(right)}px`, "important");
3701        desktopDropdown.style.setProperty("left", "auto", "important");
3702    }
3703
3704    function closeDesktopAccount({ instant = false } = {}) {
3705        if (instant) desktopDropdown?.classList.add("urs-topbar-instant-close");
3706        desktopDropdown?.classList.remove("active");
3707        desktopUserBtn?.setAttribute("aria-expanded", "false");
3708        if (instant && desktopDropdown) {
3709            void desktopDropdown.offsetHeight;
3710            requestAnimationFrame(() => desktopDropdown.classList.remove("urs-topbar-instant-close"));
3711        }
3712    }
3713
3714    desktopUserBtn?.addEventListener("click", (event) => {
3715        event.preventDefault();
3716        event.stopPropagation();
3717
3718        if (desktopDropdown?.classList.contains("active")) {
3719            closeDesktopAccount();
3720            return;
3721        }
3722
3723        setDesktopCurrencyOpen(false, { instant: true });
3724        closeAboutMega({ instant: true });
3725
3726        // A forced close from a previous top-bar switch must never consume
3727        // the next Account click. Clear that state before opening explicitly.
3728        desktopDropdown?.classList.remove("urs-topbar-instant-close");
3729        desktopDropdown?.style.removeProperty("display");
3730        positionDesktopAccountDropdown();
3731        desktopDropdown?.classList.add("active");
3732        desktopUserBtn.setAttribute("aria-expanded", "true");
3733    });
3734
3735    window.addEventListener("resize", () => {
3736        if (desktopDropdown?.classList.contains("active")) positionDesktopAccountDropdown();
3737    }, { passive: true });
3738
3739    desktopDropdown?.addEventListener("click", (event) => event.stopPropagation());
3740
3741    // --------------------------------------------------------
3742    // Mobile drawer
3743    // --------------------------------------------------------
3744    const mobileMenuBtn = $("mobile-menu-btn");
3745    const mobileOverlay = $("usMenuOverlay");
3746    const mobileDrawer = $("usMenuDrawer");
3747    const mobileClose = $("usMenuCloseBtn");
3748    const productsToggle = $("usScriptsToggle");
3749    const productsMenu = $("usScriptsMenu");
3750
3751    function openMobileMenu() {
3752        mobileOverlay?.classList.add("active");
3753        mobileDrawer?.classList.add("active");
3754        mobileDrawer?.setAttribute("aria-hidden", "false");
3755        mobileMenuBtn?.setAttribute("aria-expanded", "true");
3756        document.documentElement.style.overflow = "hidden";
3757    }
3758
3759    function closeMobileMenu() {
3760        mobileOverlay?.classList.remove("active");
3761        mobileDrawer?.classList.remove("active");
3762        mobileDrawer?.setAttribute("aria-hidden", "true");
3763        mobileMenuBtn?.setAttribute("aria-expanded", "false");
3764        document.documentElement.style.removeProperty("overflow");
3765    }
3766
3767    mobileMenuBtn?.addEventListener("click", (event) => {
3768        event.preventDefault();
3769        event.stopPropagation();
3770        openMobileMenu();
3771    });
3772
3773    mobileClose?.addEventListener("click", closeMobileMenu);
3774    mobileOverlay?.addEventListener("click", closeMobileMenu);
3775
3776    productsToggle?.addEventListener("click", (event) => {
3777        event.preventDefault();
3778        const open = !productsMenu?.classList.contains("open");
3779        productsMenu?.classList.toggle("open", open);
3780        productsToggle.classList.toggle("open", open);
3781        productsToggle.setAttribute("aria-expanded", open ? "true" : "false");
3782    });
3783
3784    // --------------------------------------------------------
3785    // Currency
3786    // --------------------------------------------------------
3787    const desktopCurrencyTrigger = $("trigger-btn");
3788    const desktopCurrencyDropdown = $("dropdown-wrapper");
3789    const desktopCurrencyGrid = $("currency-grid");
3790    const activeLabel = $("active-label");
3791
3792    function getCurrency() {
3793        if (window.URS_CURRENCY) return window.URS_CURRENCY.getSelected();
3794        const saved = String(localStorage.getItem("user-currency") || "USD").toUpperCase();
3795        return CURRENCIES.some(([code]) => code === saved) ? saved : "USD";
3796    }
3797
3798    function setCurrency(code) {
3799        if (!CURRENCIES.some(([item]) => item === code)) return;
3800
3801        if (window.URS_CURRENCY) {
3802            window.URS_CURRENCY.setSelected(code);
3803        } else {
3804            localStorage.setItem("user-currency", code);
3805            window.dispatchEvent(new CustomEvent("urs:currency-change", { detail: { currency: code } }));
3806        }
3807
3808        if (activeLabel) activeLabel.textContent = code;
3809
3810        document.querySelectorAll(".us-menu .currency-btn").forEach((button) => {
3811            const buttonCode = String(button.dataset.currency || button.textContent || "").trim().toUpperCase();
3812            button.dataset.currency = buttonCode;
3813            button.classList.toggle("active", buttonCode === code);
3814        });
3815
3816        desktopCurrencyGrid?.querySelectorAll(".currency-btn").forEach((button) => {
3817            button.classList.toggle("active", button.dataset.currency === code);
3818        });
3819    }
3820
3821    if (desktopCurrencyGrid) {
3822        desktopCurrencyGrid.innerHTML = "";
3823
3824        CURRENCIES.forEach(([code, name]) => {
3825            const button = document.createElement("button");
3826            button.type = "button";
3827            button.className = "currency-btn";
3828            button.dataset.currency = code;
3829            button.textContent = code;
3830            button.setAttribute("aria-label", name);
3831            button.addEventListener("click", () => {
3832                setCurrency(code);
3833                setDesktopCurrencyOpen(false);
3834                desktopCurrencyTrigger?.setAttribute("aria-expanded", "false");
3835            });
3836            desktopCurrencyGrid.appendChild(button);
3837        });
3838    }
3839
3840    function positionDesktopCurrencyDropdown() {
3841        if (!desktopCurrencyTrigger || !desktopCurrencyDropdown) return;
3842        const rect = desktopCurrencyTrigger.getBoundingClientRect();
3843        const navBottom = document.getElementById("navbar")?.getBoundingClientRect().bottom || 64;
3844        const right = Math.max(12, window.innerWidth - rect.right);
3845        desktopCurrencyDropdown.style.setProperty("top", `${Math.round(Math.max(rect.bottom + 7, navBottom + 7))}px`, "important");
3846        desktopCurrencyDropdown.style.setProperty("right", `${Math.round(right)}px`, "important");
3847        desktopCurrencyDropdown.style.setProperty("left", "auto", "important");
3848    }
3849
3850    function setDesktopCurrencyOpen(open, { instant = false } = {}) {
3851        if (!desktopCurrencyDropdown || !desktopCurrencyTrigger) return;
3852        if (open) {
3853            closeDesktopAccount({ instant: true });
3854            closeAboutMega({ instant: true });
3855            positionDesktopCurrencyDropdown();
3856        } else if (instant) {
3857            desktopCurrencyDropdown.classList.add("urs-topbar-instant-close");
3858        }
3859        desktopCurrencyDropdown.classList.toggle("urs-currency-open", open);
3860        desktopCurrencyTrigger.setAttribute("aria-expanded", open ? "true" : "false");
3861        if (!open && instant) {
3862            void desktopCurrencyDropdown.offsetHeight;
3863            requestAnimationFrame(() => desktopCurrencyDropdown.classList.remove("urs-topbar-instant-close"));
3864        }
3865    }
3866
3867    desktopCurrencyTrigger?.addEventListener("click", (event) => {
3868        event.preventDefault();
3869        event.stopPropagation();
3870        setDesktopCurrencyOpen(!desktopCurrencyDropdown?.classList.contains("urs-currency-open"));
3871    });
3872
3873    window.addEventListener("resize", () => {
3874        if (desktopCurrencyDropdown?.classList.contains("urs-currency-open")) positionDesktopCurrencyDropdown();
3875    }, { passive: true });
3876
3877    desktopCurrencyDropdown?.addEventListener("click", (event) => event.stopPropagation());
3878
3879    document.querySelectorAll(".us-menu .currency-btn").forEach((button) => {
3880        const code = String(button.textContent || "").trim().toUpperCase();
3881        button.dataset.currency = code;
3882        button.addEventListener("click", () => setCurrency(code));
3883    });
3884
3885    setDesktopCurrencyOpen(false);
3886    desktopCurrencyTrigger?.setAttribute("aria-expanded", "false");
3887    setCurrency(getCurrency());
3888
3889    // --------------------------------------------------------
3890    // Mobile account
3891    // --------------------------------------------------------
3892    const mobileLogin = $("mobileLoginBtn");
3893    const mobileUserBox = $("mobileUserBox");
3894    const mobileAccountToggle = $("mobileAccountToggle");
3895    const mobileAccountDropdown = $("mobileAccountDropdown");
3896    const mobilePartnerLink = $("mobilePartnerLink");
3897    const mobileStaffLink = $("mobileStaffLink");
3898
3899    const HEADER_AUTH_CACHE_KEY = "urs-header-auth-v2";
3900
3901    function readHeaderAuthCache() {
3902        try {
3903            const raw = sessionStorage.getItem(HEADER_AUTH_CACHE_KEY);
3904            if (!raw) return null;
3905            const cached = JSON.parse(raw);
3906            return cached && typeof cached === "object" ? cached : null;
3907        } catch (_) {
3908            return null;
3909        }
3910    }
3911
3912    function writeHeaderAuthCache(user) {
3913        try {
3914            sessionStorage.setItem(HEADER_AUTH_CACHE_KEY, JSON.stringify({
3915                global_name: displayName(user),
3916                avatar: avatarUrl(user),
3917                account_rank: user?.account_rank || 'Member',
3918                account_status: user?.account_status || 'enabled',
3919                login_platform: user?.login_platform || null
3920            }));
3921        } catch (_) {}
3922    }
3923
3924    function clearHeaderAuthCache() {
3925        try { sessionStorage.removeItem(HEADER_AUTH_CACHE_KEY); } catch (_) {}
3926    }
3927
3928    function closeMobileAccount() {
3929        mobileAccountDropdown?.classList.remove("open");
3930        mobileAccountToggle?.setAttribute("aria-expanded", "false");
3931    }
3932
3933    mobileAccountToggle?.addEventListener("click", (event) => {
3934        event.preventDefault();
3935        event.stopPropagation();
3936
3937        const open = !mobileAccountDropdown?.classList.contains("open");
3938        mobileAccountDropdown?.classList.toggle("open", open);
3939        mobileAccountToggle.setAttribute("aria-expanded", open ? "true" : "false");
3940    });
3941
3942    mobileAccountDropdown?.addEventListener("click", (event) => event.stopPropagation());
3943
3944    // --------------------------------------------------------
3945    // Auth state from the real session endpoint.
3946    // --------------------------------------------------------
3947    function showLoggedOut() {
3948        try {
3949            sessionStorage.setItem(HEADER_AUTH_CACHE_KEY, JSON.stringify({ loggedOut: true }));
3950        } catch (_) {}
3951        desktopAuth?.setAttribute("data-auth-ready", "true");
3952        if (desktopLogin) {
3953            desktopLogin.classList.remove("hidden");
3954            desktopLogin.hidden = false;
3955            desktopLogin.style.removeProperty("display");
3956        }
3957
3958        if (desktopUserBtn) {
3959            desktopUserBtn.classList.add("hidden");
3960            desktopUserBtn.hidden = true;
3961        }
3962
3963        if (desktopPartnerSection) {
3964            desktopPartnerSection.hidden = true;
3965            desktopPartnerSection.setAttribute("aria-hidden", "true");
3966        }
3967
3968        if (mobilePartnerLink) {
3969            mobilePartnerLink.hidden = true;
3970            mobilePartnerLink.setAttribute("aria-hidden", "true");
3971        }
3972
3973        if (desktopStaffSection) {
3974            desktopStaffSection.hidden = true;
3975            desktopStaffSection.setAttribute("aria-hidden", "true");
3976        }
3977
3978        if (mobileStaffLink) {
3979            mobileStaffLink.hidden = true;
3980            mobileStaffLink.setAttribute("aria-hidden", "true");
3981        }
3982
3983        if (mobileLogin) {
3984            mobileLogin.classList.remove("hidden");
3985            mobileLogin.hidden = false;
3986            mobileLogin.style.removeProperty("display");
3987        }
3988
3989        if (mobileUserBox) {
3990            mobileUserBox.classList.add("hidden");
3991            mobileUserBox.hidden = true;
3992            mobileUserBox.setAttribute("aria-hidden", "true");
3993        }
3994
3995        closeDesktopAccount();
3996        closeMobileAccount();
3997    }
3998
3999    function showLoggedIn(user) {
4000        const name = displayName(user);
4001        const avatar = avatarUrl(user);
4002        const role = accountRole(user);
4003        writeHeaderAuthCache(user);
4004        desktopAuth?.setAttribute("data-auth-ready", "true");
4005
4006        if (desktopLogin) {
4007            desktopLogin.classList.add("hidden");
4008            desktopLogin.hidden = true;
4009            desktopLogin.style.setProperty("display", "none", "important");
4010        }
4011
4012        if (desktopUserBtn) {
4013            desktopUserBtn.classList.remove("hidden");
4014            desktopUserBtn.hidden = false;
4015        }
4016
4017        const desktopAvatar = $("desktopUserAvatar");
4018        const desktopName = $("desktopUserName");
4019        const dropdownAvatar = $("dropdownUserAvatar");
4020        const dropdownName = $("dropdownUserName");
4021        const dropdownSub = $("dropdownUserSub");
4022
4023        if (desktopAvatar) desktopAvatar.src = avatar;
4024        if (desktopName) desktopName.textContent = name;
4025        if (dropdownAvatar) dropdownAvatar.src = avatar;
4026        if (dropdownName) dropdownName.textContent = name;
4027        if (dropdownSub) dropdownSub.textContent = role;
4028        const status = accountStatus(user);
4029        const dropdownStatusBadge = $("dropdownStatusBadge");
4030        if (dropdownStatusBadge) {
4031            dropdownStatusBadge.hidden = true;
4032            dropdownStatusBadge.textContent = '';
4033            dropdownStatusBadge.classList.remove('is-limited', 'is-flagged');
4034        }
4035
4036        const rawStatus = String(user?.account_status || '').trim().toLowerCase();
4037        const limitedAccount = rawStatus === 'limited';
4038        const privateLinks = document.querySelectorAll(
4039            '#desktopUserDropdown a[href="/account/settings"], #desktopUserDropdown a[href="/account/transactions"], #desktopUserDropdown a[href="/account/security"], ' +
4040            '#mobileAccountDropdown a[href="/account/settings"], #mobileAccountDropdown a[href="/account/transactions"], #mobileAccountDropdown a[href="/account/security"]'
4041        );
4042        privateLinks.forEach((link) => { link.hidden = limitedAccount; });
4043
4044        const partnerAccount = !limitedAccount && isPartnerAccount(user);
4045        if (desktopPartnerSection) {
4046            desktopPartnerSection.hidden = !partnerAccount;
4047            desktopPartnerSection.setAttribute("aria-hidden", partnerAccount ? "false" : "true");
4048        }
4049        if (mobilePartnerLink) {
4050            mobilePartnerLink.hidden = !partnerAccount;
4051            mobilePartnerLink.setAttribute("aria-hidden", partnerAccount ? "false" : "true");
4052        }
4053
4054        const staffAccount = !limitedAccount && isStaffAccount(user);
4055        if (desktopStaffSection) {
4056            desktopStaffSection.hidden = !staffAccount;
4057            desktopStaffSection.setAttribute("aria-hidden", staffAccount ? "false" : "true");
4058        }
4059        if (mobileStaffLink) {
4060            mobileStaffLink.hidden = !staffAccount;
4061            mobileStaffLink.setAttribute("aria-hidden", staffAccount ? "false" : "true");
4062        }
4063
4064        if (mobileLogin) {
4065            mobileLogin.classList.add("hidden");
4066            mobileLogin.hidden = true;
4067            mobileLogin.style.setProperty("display", "none", "important");
4068        }
4069
4070        if (mobileUserBox) {
4071            mobileUserBox.classList.remove("hidden");
4072            mobileUserBox.hidden = false;
4073            mobileUserBox.style.removeProperty("display");
4074            mobileUserBox.setAttribute("aria-hidden", "false");
4075        }
4076
4077        const mobileAvatar = $("mobileUserAvatar");
4078        const mobileName = $("mobileUserName");
4079        const mobileRole = $("mobileUserRole");
4080
4081        if (mobileAvatar) mobileAvatar.src = avatar;
4082        if (mobileName) mobileName.textContent = name;
4083        if (mobileRole) mobileRole.textContent = role;
4084        const mobileStatusBadge = $("mobileStatusBadge");
4085        if (mobileStatusBadge) {
4086            mobileStatusBadge.hidden = true;
4087            mobileStatusBadge.textContent = '';
4088            mobileStatusBadge.classList.remove('is-limited', 'is-flagged');
4089        }
4090
4091        closeDesktopAccount();
4092        closeMobileAccount();
4093    }
4094
4095    const headerWasServerAuthenticated = !!(
4096        desktopUserBtn &&
4097        !desktopUserBtn.hidden &&
4098        !desktopUserBtn.classList.contains("hidden")
4099    );
4100
4101    async function syncAuth() {
4102        try {
4103            const response = await fetch("/api/user", {
4104                credentials: "include",
4105                cache: "no-store",
4106                headers: { Accept: "application/json" }
4107            });
4108
4109            /* A full navigation already rendered the signed-in account from the
4110               server. Never blank that stable UI because a background auth
4111               refresh briefly fails or races the session store. */
4112            if (!response.ok) {
4113                if (!headerWasServerAuthenticated) showLoggedOut();
4114                return;
4115            }
4116
4117            const data = await response.json();
4118
4119            if (
4120                data?.loggedIn === true &&
4121                data?.user &&
4122                typeof data.user === "object"
4123            ) {
4124                showLoggedIn(data.user);
4125            } else if (!headerWasServerAuthenticated) {
4126                showLoggedOut();
4127            }
4128        } catch (_) {
4129            if (!headerWasServerAuthenticated && !readHeaderAuthCache()) showLoggedOut();
4130        }
4131    }
4132
4133    async function logout(event) {
4134        event.preventDefault();
4135        event.stopPropagation();
4136
4137        try {
4138            await fetch("/api/logout", {
4139                method: "POST",
4140                credentials: "include",
4141                cache: "no-store",
4142                headers: { Accept: "application/json" }
4143            });
4144        } catch (_) {}
4145
4146        window.location.replace("/");
4147    }
4148
4149    document.querySelectorAll(".urs-account-mini-logout, .logout-trigger").forEach((node) => {
4150        node.addEventListener("click", logout);
4151    });
4152
4153    // Login controls go to the real login page.
4154    desktopLogin?.addEventListener("click", (event) => {
4155        event.preventDefault();
4156        window.location.href = "/login";
4157    });
4158    mobileLogin?.setAttribute("href", "/login");
4159
4160    // --------------------------------------------------------
4161    // About mega menu.
4162    // --------------------------------------------------------
4163    const aboutMegaTrigger = document.getElementById('aboutMegaTrigger');
4164    const aboutMegaMenu = document.getElementById('aboutMegaMenu');
4165    const aboutMegaSearch = document.getElementById('aboutMegaSearch');
4166    const aboutMegaNoResults = document.getElementById('aboutMegaNoResults');
4167    const aboutMegaUpdates = aboutMegaMenu?.querySelector('.about-mega-updates');
4168
4169    function closeAboutMega({ restoreFocus = false, instant = false } = {}) {
4170        if (!aboutMegaMenu || !aboutMegaTrigger) return;
4171        if (instant) aboutMegaMenu.classList.add('urs-topbar-instant-close');
4172        aboutMegaMenu.classList.remove('is-open');
4173        aboutMegaMenu.setAttribute('aria-hidden', 'true');
4174        aboutMegaTrigger.setAttribute('aria-expanded', 'false');
4175        if (aboutMegaSearch) {
4176            aboutMegaSearch.value = '';
4177            aboutMegaMenu.querySelectorAll('[data-about-search]').forEach((item) => { item.hidden = false; });
4178            if (aboutMegaNoResults) aboutMegaNoResults.hidden = true;
4179        aboutMegaUpdates?.classList.remove('is-empty');
4180        }
4181        if (restoreFocus) aboutMegaTrigger.focus({ preventScroll: true });
4182        if (instant) {
4183            void aboutMegaMenu.offsetHeight;
4184            requestAnimationFrame(() => aboutMegaMenu.classList.remove('urs-topbar-instant-close'));
4185        }
4186    }
4187
4188    function openAboutMega() {
4189        if (!aboutMegaMenu || !aboutMegaTrigger || window.innerWidth <= 1180) return;
4190        closeDesktopAccount({ instant: true });
4191        closeMobileAccount();
4192        setDesktopCurrencyOpen(false, { instant: true });
4193        desktopCurrencyTrigger?.setAttribute('aria-expanded', 'false');
4194        aboutMegaMenu.classList.add('is-open');
4195        aboutMegaMenu.setAttribute('aria-hidden', 'false');
4196        aboutMegaTrigger.setAttribute('aria-expanded', 'true');
4197    }
4198
4199    aboutMegaTrigger?.addEventListener('click', (event) => {
4200        event.preventDefault();
4201        event.stopPropagation();
4202        const shouldOpen = !aboutMegaMenu?.classList.contains('is-open');
4203        if (shouldOpen) openAboutMega();
4204        else closeAboutMega();
4205    });
4206
4207    aboutMegaMenu?.addEventListener('click', (event) => {
4208        event.stopPropagation();
4209        if (event.target.closest('a')) closeAboutMega();
4210    });
4211
4212    aboutMegaSearch?.addEventListener('keydown', (event) => {
4213        if (event.key !== 'Enter') return;
4214        event.preventDefault();
4215        const query = String(aboutMegaSearch.value || '').trim();
4216        const target = query ? `/news?q=${encodeURIComponent(query)}` : '/news';
4217        window.location.assign(target);
4218    });
4219
4220    aboutMegaSearch?.addEventListener('input', () => {
4221        const query = String(aboutMegaSearch.value || '').trim().toLowerCase();
4222        let visible = 0;
4223        const updateItems = aboutMegaMenu?.querySelectorAll('.about-mega-updates .about-mega-update-list [data-about-search]') || [];
4224        updateItems.forEach((item) => {
4225            const haystack = `${item.getAttribute('data-about-search') || ''} ${item.textContent || ''}`.toLowerCase();
4226            const match = !query || haystack.includes(query);
4227            item.hidden = !match;
4228            if (match) visible += 1;
4229        });
4230        if (aboutMegaNoResults) aboutMegaNoResults.hidden = !query || visible > 0;
4231        aboutMegaUpdates?.classList.toggle('is-empty', !!query && visible === 0);
4232    });
4233
4234    document.getElementById('aboutMegaClearSearch')?.addEventListener('click', () => {
4235        if (!aboutMegaSearch) return;
4236        aboutMegaSearch.value = '';
4237        aboutMegaSearch.dispatchEvent(new Event('input', { bubbles: true }));
4238        aboutMegaSearch.focus({ preventScroll: true });
4239    });
4240
4241    window.addEventListener('resize', () => {
4242        if (window.innerWidth <= 1180) closeAboutMega();
4243    }, { passive: true });
4244
4245    document.addEventListener("click", () => {
4246        closeAboutMega();
4247        closeDesktopAccount();
4248        closeMobileAccount();
4249
4250        setDesktopCurrencyOpen(false);
4251        desktopCurrencyTrigger?.setAttribute("aria-expanded", "false");
4252    });
4253
4254    document.addEventListener("keydown", (event) => {
4255        if (event.key !== "Escape") return;
4256        closeAboutMega({ restoreFocus: aboutMegaMenu?.classList.contains('is-open') });
4257        closeDesktopAccount();
4258        closeMobileAccount();
4259        closeMobileMenu();
4260
4261        setDesktopCurrencyOpen(false);
4262        desktopCurrencyTrigger?.setAttribute("aria-expanded", "false");
4263    });
4264
4265    const cachedHeaderAuth = readHeaderAuthCache();
4266    if (cachedHeaderAuth?.loggedOut === true) {
4267        showLoggedOut();
4268    } else if (cachedHeaderAuth) {
4269        showLoggedIn(cachedHeaderAuth);
4270    }
4271    syncAuth();
4272
4273    if (window.lucide) {
4274        window.lucide.createIcons();
4275    }
4276})();
4277</script>
4277
4278
4279
4280    <main class="products-page-content">
4281        <!-- =====================================================
4282             PRODUCT CATALOG HEADER
4283             This is intentionally compact: products are the focus.
4284             ===================================================== -->
4285        <header class="catalog-header">
4286            <div class="page-shell catalog-heading">
4287                <div class="catalog-intro">
4288                    <div class="breadcrumb">
4289                        <span>Unreal Studios</span>
4290                        <i data-lucide="chevron-right"></i>
4291                        <span>Store</span>
4292                        <i data-lucide="chevron-right"></i>
4293                        <span>Products</span>
4294                    </div>
4295
4296                    <h1 class="catalog-title">Browse <span>Products</span></h1>
4297
4298                    <p class="catalog-subtitle">
4299                        Search all Unreal Studios resources in one place. Filter by platform and framework,
4300                        then open a product to view details, compatibility, and purchase options.
4301                    </p>
4302
4303                    <div class="catalog-game-row">
4304                        <div class="game-filters" aria-label="Product categories">
4305                            <button class="game-chip active" data-game="all" type="button">
4306                                <i data-lucide="grid-2x2"></i>
4307                                All
4308                            </button>
4309
4310                            <button class="game-chip" data-game="FiveM" type="button">
4311                                <img
4312                                    class="game-brand-logo game-brand-logo-fivem"
4313                                    src="https://cdn.simpleicons.org/fivem/F40552"
4314                                    alt=""
4315                                    aria-hidden="true"
4316                                >
4317                                FiveM
4318                            </button>
4319
4320                            <button class="game-chip" data-game="Minecraft" type="button">
4321                                <img
4322                                    class="game-brand-logo game-brand-logo-minecraft"
4323                                    src="https://commons.wikimedia.org/wiki/Special:Redirect/file/Minecraft-creeper-face.svg"
4324                                    alt=""
4325                                    aria-hidden="true"
4326                                >
4327                                Minecraft
4328                            </button>
4329
4330                            <button class="game-chip" data-game="Other" type="button">
4331                                <i data-lucide="package"></i>
4332                                Other
4333                            </button>
4334                        </div>
4335                    </div>
4336                </div>
4337
4338            </div>
4339        </header>
4340
4341        <!-- =====================================================
4342             FILTERS
4343             ===================================================== -->
4344        <section class="filters-layer">
4345            <div class="page-shell">
4346                <div class="filter-panel">
4347                    <div class="filter-row-secondary">
4348                        <div class="framework-filter-group">
4349                            <p id="frameworkLabel">Filter</p>
4350
4351                            <div id="frameworkFilters"></div>
4352
4353                            <div id="frameworkDropdownWrap" class="framework-dropdown-wrap hidden">
4354                                <button id="frameworkDropdownBtn" class="framework-dropdown-btn" type="button">
4355                                    <span id="frameworkDropdownLabel">All Frameworks</span>
4356                                    <i data-lucide="chevron-down"></i>
4357                                </button>
4358
4359                                <div id="frameworkDropdownMenu" class="framework-dropdown-menu hidden"></div>
4360                            </div>
4361                        </div>
4362
4363                        <div class="catalog-search-actions">
4364                            <label class="filter-search-box" for="productSearch">
4365                                <i data-lucide="search"></i>
4366                                <input id="productSearch" type="search" placeholder="Search products" autocomplete="off">
4367                            </label>
4368
4369                            <div class="catalog-filter-menu-wrap">
4370                                <button
4371                                    id="ursCatalogFilterToggle"
4372                                    class="urs-catalog-filter-toggle"
4373                                    type="button"
4374                                    aria-label="Open product filters"
4375                                    aria-expanded="false"
4376                                    aria-controls="ursCatalogFilterPanel"
4377                                >
4378                                    <i data-lucide="sliders-horizontal" aria-hidden="true"></i>
4379                                    <span class="urs-filter-active-dot" aria-hidden="true"></span>
4380                                </button>
4381
4382                                <div id="ursCatalogFilterPanel" class="urs-filter-panel hidden" hidden aria-hidden="true" role="dialog" aria-label="Product filters">
4383                                    <div class="urs-filter-panel-head">
4384                                        <div>
4385                                            <strong>Filters</strong>
4386                                            <span>Refine the product list</span>
4387                                        </div>
4388
4389                                        <button id="ursCatalogFilterClose" class="urs-filter-panel-close" type="button" aria-label="Close filters">
4390                                            <i data-lucide="x"></i>
4391                                        </button>
4392                                    </div>
4393
4394                                    <div class="urs-filter-panel-content">
4395                                        <section class="urs-filter-group">
4396                                            <div class="urs-filter-group-label">Availability</div>
4397
4398                                            <div class="availability-filter urs-filter-pills" role="group" aria-label="Product pricing type">
4399                                                <button class="catalog-filter-chip active" type="button" data-availability="all">All</button>
4400                                                <button class="catalog-filter-chip" type="button" data-availability="paid">Paid</button>
4401                                                <button class="catalog-filter-chip" type="button" data-availability="free">Free</button>
4402                                                <button class="catalog-filter-chip" type="button" data-availability="sale">Sale</button>
4403                                            </div>
4404                                        </section>
4405
4406                                        <section class="urs-filter-list">
4407                                            <label class="urs-filter-list-row">
4408                                                <span class="urs-filter-list-icon">
4409                                                    <i data-lucide="badge-dollar-sign"></i>
4410                                                </span>
4411                                                <span class="urs-filter-list-copy">
4412                                                    <strong>Price</strong>
4413                                                    <small>Limit by cost</small>
4414                                                </span>
4415                                                <span class="urs-filter-select">
4416                                                    <select id="catalogPriceFilter" aria-label="Filter by price">
4417                                                        <option value="all">Any price</option>
4418                                                        <option value="free">Free</option>
4419                                                        <option value="under10">Under 10</option>
4420                                                        <option value="10to25">10 – 25</option>
4421                                                        <option value="25to50">25 – 50</option>
4422                                                        <option value="50plus">50+</option>
4423                                                    </select>
4424                                                    <i data-lucide="chevron-down"></i>
4425                                                </span>
4426                                            </label>
4427
4428                                            <label class="urs-filter-list-row">
4429                                                <span class="urs-filter-list-icon">
4430                                                    <i data-lucide="arrow-up-down"></i>
4431                                                </span>
4432                                                <span class="urs-filter-list-copy">
4433                                                    <strong>Sort by</strong>
4434                                                    <small>Change the order</small>
4435                                                </span>
4436                                                <span class="urs-filter-select">
4437                                                    <select id="catalogSort" aria-label="Sort products">
4438                                                        <option value="default">Default</option>
4439                                                        <option value="newest">Newest</option>
4440                                                        <option value="oldest">Oldest</option>
4441                                                        <option value="price-asc">Price ↑</option>
4442                                                        <option value="price-desc">Price ↓</option>
4443                                                        <option value="title-asc">A → Z</option>
4444                                                    </select>
4445                                                    <i data-lucide="chevron-down"></i>
4446                                                </span>
4447                                            </label>
4448                                        </section>
4449                                    </div>
4450
4451                                    <div class="urs-filter-panel-foot">
4452                                        <span id="catalogResultCount" class="urs-filter-result-count">0 products</span>
4453
4454                                        <button id="clearCatalogFilters" class="urs-filter-reset" type="button">
4455                                            <i data-lucide="rotate-ccw"></i>
4456                                            Reset
4457                                        </button>
4458                                    </div>
4459                                </div>
4460                            </div>
4461                        </div>
4462                    </div>
4463                </div>
4464            </div>
4465        </section>
4466
4467        <!-- =====================================================
4468             PRODUCT GRID
4469             browse-products.js renders real product cards here.
4470             ===================================================== -->
4471        <section id="products" class="products-layer">
4472            <div class="page-shell">
4473                <div id="productGrid"></div>
4474
4475                <div id="emptyState" class="empty-state">
4476                    <div class="empty-state-icon">
4477                        <i data-lucide="search-x" class="h-5 w-5"></i>
4478                    </div>
4479                    <h3>No products found</h3>
4480                    <p>Try another search term or change the selected platform/framework filter.</p>
4481                </div>
4482            </div>
4483        </section>
4484    </main>
4485
4486    <!-- Unreal Studios shared footer -->
4487<style id="urs-shared-footer-style">
4488.site-footer {
4489    --border: rgba(255, 255, 255, 0.08);
4490    --text-2: rgba(247, 247, 251, 0.68);
4491    --text-3: rgba(247, 247, 251, 0.43);
4492    --text-4: rgba(247, 247, 251, 0.25);
4493    --purple-soft: rgba(185, 143, 214, 0.12);
4494    --purple-line: rgba(185, 143, 214, 0.28);
4495
4496    width: 100%;
4497    max-width: 100%;
4498    overflow: hidden;
4499    border-top: 1px solid var(--border);
4500    background: #09090d;
4501    box-sizing: border-box;
4502    color: #f7f7fb;
4503    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
4504    font-style: normal;
4505    letter-spacing: normal;
4506}
4507
4508.site-footer,
4509.site-footer * {
4510    box-sizing: border-box;
4511}
4512
4513/* Footer owns its own link presentation so page-level article CSS cannot leak into it. */
4514.site-footer a,
4515.site-footer a:hover,
4516.site-footer a:focus,
4517.site-footer a:active {
4518    text-decoration: none;
4519}
4520
4521.footer-main {
4522    width: min(1380px, calc(100% - 40px));
4523    margin: 0 auto;
4524    padding: 46px 0 34px;
4525
4526    display: grid;
4527    grid-template-columns: minmax(250px, 1fr) minmax(0, 1.7fr);
4528    gap: 70px;
4529
4530    min-width: 0;
4531}
4532
4533.footer-brand,
4534.footer-columns,
4535.footer-column {
4536    min-width: 0;
4537}
4538
4539/* =========================
4540   BRAND
4541   ========================= */
4542
4543.footer-logo-link {
4544    display: inline-block;
4545    line-height: 0;
4546    border-radius: 10px;
4547    transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
4548}
4549
4550.footer-logo-link:hover {
4551    transform: translateY(-2px);
4552}
4553
4554.footer-logo-link img {
4555    display: block;
4556    width: 150px;
4557    max-width: 100%;
4558    height: auto;
4559    transition: transform 160ms ease, filter 160ms ease;
4560}
4561
4562.footer-logo-link:hover img {
4563    transform: scale(1.025);
4564    filter: brightness(1.12);
4565}
4566
4567.footer-brand p {
4568    max-width: 390px;
4569    margin: 14px 0 0;
4570
4571    color: var(--text-3);
4572
4573    font-size: 10px;
4574    line-height: 1.7;
4575    font-weight: 600;
4576
4577    overflow-wrap: anywhere;
4578}
4579
4580.footer-powered {
4581    width: fit-content;
4582    max-width: 100%;
4583
4584    margin-top: 16px;
4585    padding: 6px 8px;
4586
4587    border: 1px solid var(--border);
4588    border-radius: 8px;
4589
4590    color: var(--text-4);
4591    background: rgba(255,255,255,.02);
4592
4593    font-size: 8px;
4594    font-weight: 800;
4595    letter-spacing: .05em;
4596    text-transform: uppercase;
4597
4598    white-space: normal;
4599}
4600
4601.footer-powered strong {
4602    color: var(--text-2);
4603}
4604
4605/* =========================
4606   COLUMNS
4607   ========================= */
4608
4609.footer-columns {
4610    display: grid;
4611    grid-template-columns: repeat(4, minmax(0, 1fr));
4612    gap: 26px;
4613}
4614
4615.footer-column h4 {
4616    margin: 0 0 12px;
4617
4618    color: var(--text-2);
4619
4620    font-size: 9px;
4621    font-weight: 900;
4622    letter-spacing: .13em;
4623    text-transform: uppercase;
4624}
4625
4626.footer-column ul {
4627    margin: 0;
4628    padding: 0;
4629    list-style: none;
4630
4631    display: grid;
4632    gap: 8px;
4633}
4634
4635.footer-column li {
4636    min-width: 0;
4637}
4638
4639.footer-column a {
4640    display: inline-block;
4641    max-width: 100%;
4642
4643    color: var(--text-3);
4644
4645    font-size: 10px;
4646    font-weight: 650;
4647    line-height: 1.4;
4648
4649    overflow-wrap: anywhere;
4650    word-break: normal;
4651
4652    transition: color 140ms ease;
4653}
4654
4655.footer-column a:hover {
4656    color: white;
4657}
4658
4659/* =========================
4660   BOTTOM
4661   ========================= */
4662
4663.footer-bottom {
4664    width: min(1380px, calc(100% - 40px));
4665    margin: 0 auto;
4666    padding: 18px 0 25px;
4667
4668    display: flex;
4669    align-items: flex-start;
4670    justify-content: space-between;
4671    gap: 30px;
4672
4673    border-top: 1px solid var(--border);
4674
4675    min-width: 0;
4676}
4677
4678.footer-legal {
4679    max-width: 930px;
4680    min-width: 0;
4681
4682    color: rgba(255,255,255,.22);
4683
4684    font-size: 8px;
4685    line-height: 1.65;
4686    font-weight: 600;
4687
4688    overflow-wrap: anywhere;
4689}
4690
4691.footer-legal p {
4692    margin: 0;
4693}
4694
4695.footer-legal p + p {
4696    margin-top: 4px;
4697}
4698
4699.footer-socials {
4700    display: flex;
4701    align-items: center;
4702    flex-shrink: 0;
4703    gap: 6px;
4704}
4705
4706.footer-socials a {
4707    width: 34px;
4708    height: 34px;
4709
4710    display: inline-flex;
4711    align-items: center;
4712    justify-content: center;
4713
4714    flex: 0 0 34px;
4715
4716    border: 1px solid var(--border);
4717    border-radius: 9px;
4718
4719    background: rgba(255,255,255,.02);
4720    color: var(--text-3);
4721
4722    transition:
4723        color 140ms ease,
4724        border-color 140ms ease,
4725        background 140ms ease,
4726        transform 140ms ease;
4727}
4728
4729.footer-socials a:hover {
4730    color: white;
4731    border-color: var(--purple-line);
4732    background: var(--purple-soft);
4733    transform: translateY(-1px);
4734}
4735
4736
4737/* =========================================================
4738   TABLET
4739   ========================================================= */
4740
4741@media (max-width: 900px) {
4742    .footer-main {
4743        grid-template-columns: 1fr;
4744        gap: 34px;
4745    }
4746
4747    .footer-columns {
4748        grid-template-columns: repeat(4, minmax(0, 1fr));
4749    }
4750}
4751
4752
4753/* =========================================================
4754   MOBILE
4755   ========================================================= */
4756
4757@media (max-width: 680px) {
4758    .site-footer {
4759        overflow-x: hidden;
4760    }
4761
4762    .footer-main {
4763        width: calc(100% - 28px);
4764        padding: 34px 0 28px;
4765        gap: 30px;
4766    }
4767
4768    .footer-logo-link img {
4769        width: 136px;
4770    }
4771
4772    .footer-brand p {
4773        max-width: 320px;
4774        margin-top: 12px;
4775        font-size: 9.5px;
4776        line-height: 1.65;
4777    }
4778
4779    .footer-powered {
4780        margin-top: 13px;
4781        font-size: 7.5px;
4782    }
4783
4784    .footer-columns {
4785        grid-template-columns: repeat(2, minmax(0, 1fr));
4786        gap: 28px 22px;
4787    }
4788
4789    .footer-column h4 {
4790        margin-bottom: 10px;
4791        font-size: 8.5px;
4792    }
4793
4794    .footer-column ul {
4795        gap: 7px;
4796    }
4797
4798    .footer-column a {
4799        font-size: 10px;
4800    }
4801
4802    .footer-bottom {
4803        width: calc(100% - 28px);
4804        padding: 20px 0 24px;
4805
4806        flex-direction: column;
4807        align-items: flex-start;
4808
4809        gap: 17px;
4810    }
4811
4812    .footer-legal {
4813        width: 100%;
4814        max-width: 100%;
4815
4816        font-size: 7.75px;
4817        line-height: 1.6;
4818    }
4819
4820    .footer-socials {
4821        width: 100%;
4822        justify-content: flex-start;
4823    }
4824
4825    .footer-socials a {
4826        width: 36px;
4827        height: 36px;
4828        flex-basis: 36px;
4829    }
4830}
4831
4832
4833/* =========================================================
4834   SMALL PHONES
4835   ========================================================= */
4836
4837@media (max-width: 420px) {
4838    .footer-main,
4839    .footer-bottom {
4840        width: calc(100% - 24px);
4841    }
4842
4843    .footer-main {
4844        padding-top: 30px;
4845    }
4846
4847    .footer-columns {
4848        gap: 25px 16px;
4849    }
4850
4851    .footer-column h4 {
4852        font-size: 8px;
4853        letter-spacing: .11em;
4854    }
4855
4856    .footer-column a {
4857        font-size: 9.5px;
4858    }
4859
4860    .footer-brand p {
4861        font-size: 9px;
4862    }
4863
4864    .footer-legal {
4865        font-size: 7.5px;
4866    }
4867}
4868</style>
4869
4870
4871<style id="urs-shared-footer-firewall">
4872/* Shared-shell firewall: public page CSS must not alter footer metrics. */
4873.site-footer {
4874    font-family: Inter, Arial, sans-serif !important;
4875    font-size: 16px !important;
4876    line-height: normal !important;
4877    font-style: normal !important;
4878    letter-spacing: normal;
4879    text-transform: none;
4880}
4881.site-footer,
4882.site-footer *,
4883.site-footer *::before,
4884.site-footer *::after {
4885    box-sizing: border-box !important;
4886}
4887.site-footer a,
4888.site-footer button,
4889.site-footer input,
4890.site-footer select {
4891    font-family: Inter, Arial, sans-serif !important;
4892    font-style: normal !important;
4893}
4894.site-footer img { max-width: none; }
4895.site-footer .footer-logo-link img { max-width: 100% !important; }
4896</style>
4897
4898<footer class="site-footer">
4899    <div class="footer-main">
4900
4901        <div class="footer-brand">
4902            <a href="/" class="footer-logo-link" aria-label="Go to Unreal Studios home">
4903                <img
4904                    src="/assets/img/logos/logoandtext-display.png?v=20261007-3"
4905                    alt="Unreal Studios"
4906                >
4907            </a>
4908
4909            <p>
4910                Premium FiveM resources, Minecraft projects, and development tools from Unreal Studios.
4911            </p>
4912
4913            <div class="footer-powered">
4914                Checkout powered by <strong>Tebex</strong>
4915            </div>
4916        </div>
4917
4918
4919        <div class="footer-columns">
4920
4921            <div class="footer-column">
4922                <h4>Store</h4>
4923
4924                <ul>
4925                    <li><a href="/products/view-all">All Products</a></li>
4926                    <li><a href="https://unreal-studios-shop.tebex.io/checkout/basket">Basket</a></li>
4927                    <li><a href="/account/transactions">Orders</a></li>
4928					<li><a href="/partners">Partners</a></li>
4929                </ul>
4930            </div>
4931
4932
4933            <div class="footer-column">
4934                <h4>Resources</h4>
4935
4936                <ul>
4937                    <li><a href="/documentation">Documentation</a></li>
4938                    <li><a href="/support">Support</a></li>
4939					<li><a href="/news">News</a></li>
4940                    <li><a href="/about">About Us</a></li>
4941                    <li><a href="https://unrealstudios.instatus.com/">Status</a></li>
4942                </ul>
4943            </div>
4944
4945
4946            <div class="footer-column">
4947                <h4>Community</h4>
4948
4949                <ul>
4950                    <li><a href="https://discord.com/invite/WAZe8ruSTm">Discord</a></li>
4951                    <li><a href="https://forum.cfx.re/u/itzfuture/summary">Cfx.re</a></li>
4952                    <li><a href="https://github.com/Official-Unreal-Studios">GitHub</a></li>
4953                    <li><a href="https://www.youtube.com/channel/UClyh4g7SBGC59djP1yt2Amw">YouTube</a></li>
4954                </ul>
4955            </div>
4956
4957
4958            <div class="footer-column">
4959                <h4>Legal</h4>
4960
4961                <ul>
4962                    <li><a href="/terms-of-service">Terms & Conditions</a></li>
4963                    <li><a href="/privacy-policy">Privacy Policy</a></li>
4964                    <li><a href="https://unreal-studios-shop.tebex.io/terms/checkout">Tebex Terms</a></li>
4965                    <li><a href="https://unreal-studios-shop.tebex.io/terms/impressum">Impressum</a></li>
4966                </ul>
4967            </div>
4968
4969        </div>
4970    </div>
4971
4972
4973    <div class="footer-bottom">
4974
4975        <div class="footer-legal">
4976            <p>
4977                Copyright © 2026 <strong>Unreal Studios</strong>. This project is not affiliated with or endorsed by Rockstar North,
4978                Take-Two Interactive, Mojang, or other rights holders.
4979            </p>
4980
4981            <p>
4982                Checkout is securely owned and operated by <strong>Tebex Limited</strong>, who handle product fulfilment,
4983                billing support, and refund requests.
4984            </p>
4985        </div>
4986
4987
4988        <div class="footer-socials">
4989
4990            <a
4991                href="https://discord.com/invite/WAZe8ruSTm"
4992                target="_blank"
4993                rel="noopener noreferrer nofollow"
4994                aria-label="Discord"
4995            >
4996                <i class="fa-brands fa-discord"></i>
4997            </a>
4998
4999            <a
5000                href="https://www.youtube.com/channel/UClyh4g7SBGC59djP1yt2Amw"
5001                target="_blank"
5002                rel="noopener noreferrer nofollow"
5003                aria-label="YouTube"
5004            >
5005                <i class="fa-brands fa-youtube"></i>
5006            </a>
5007
5008            <a
5009                href="https://github.com/Official-Unreal-Studios"
5010                target="_blank"
5011                rel="noopener noreferrer nofollow"
5012                aria-label="GitHub"
5013            >
5014                <i class="fa-brands fa-github"></i>
5015            </a>
5016
5017        </div>
5018
5019    </div>
5020</footer>
5021
5022
5023    <!-- One source of behavior only. No duplicate filter/menu/auth listeners. -->
5024
5025    <!-- Shared header owns authentication/account behavior. -->
5026
5027    
5027<script src="/javascript/public/browse-products.js?v=20261004-tebex-live-sale-4"></script>
5027
5028    
5028<script src="/javascript/public/products.js?v=20260929-no-date-filter-1"></script>
5028
5029    
5029<script src="../javascript/tools/traffic-tracker.js?v=5" defer></script>
5029
5030</body>
5031</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.