/* v8.23: final mobile header + menu fix. Loaded last on purpose. */ @media (max-width:767px){ html body.new5-home-ui .new5-primary-header .new5-utility-navbar{ position:relative!important;z-index:6000!important;overflow:visible!important; min-height:60px!important;height:60px!important;background:#131313!important; } html body.new5-home-ui .new5-primary-header .new5-utility-container{ position:relative!important;display:block!important;width:100%!important;max-width:100%!important; min-height:60px!important;height:60px!important;margin:0!important;padding:0 8px!important;overflow:visible!important; } html body.new5-home-ui .new5-primary-header .new5-brand-wrap.navbar-header{ float:none!important;position:relative!important;display:block!important;width:100%!important;height:60px!important; margin:0!important;padding:0!important;text-align:center!important; } html body.new5-home-ui .new5-primary-header a.new5-brand.navbar-brand{ float:none!important;position:absolute!important;left:50%!important;top:50%!important; transform:translate(-50%,-50%)!important;display:flex!important;align-items:center!important;justify-content:center!important; width:auto!important;max-width:calc(100% - 96px)!important;height:54px!important; margin:0!important;padding:0!important; } html body.new5-home-ui .new5-primary-header a.new5-brand.navbar-brand img{ position:static!important;display:block!important;width:auto!important;height:auto!important; max-width:180px!important;max-height:46px!important;margin:0 auto!important;padding:0!important;object-fit:contain!important; } html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle{ float:none!important;display:block!important;position:absolute!important;left:8px!important;top:50%!important; transform:translateY(-50%)!important;width:34px!important;height:38px!important;margin:0!important;padding:8px 6px!important; z-index:6100!important;background:transparent!important;border:0!important; } /* Top hamburger menu: dark compact panel directly below header. */ html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu{ display:none!important;position:absolute!important;top:60px!important;left:0!important;right:0!important; width:100%!important;min-width:100%!important;max-width:100%!important;height:auto!important;max-height:calc(100dvh - 60px)!important; margin:0!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important; background:#181818!important;border:0!important;border-top:1px solid #343434!important;border-bottom:1px solid #343434!important; border-radius:0!important;box-shadow:0 12px 28px rgba(0,0,0,.6)!important;z-index:6200!important; transform:none!important;float:none!important; } html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu.active{display:block!important} html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu, html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu *{box-sizing:border-box!important} html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu ul, html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu .new5-utility-list{ display:block!important;position:static!important;width:100%!important;max-width:100%!important; margin:0!important;padding:0!important;list-style:none!important;background:#181818!important;border:0!important;box-shadow:none!important; } html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu li{ display:block!important;position:relative!important;float:none!important;width:100%!important;margin:0!important;padding:0!important; background:#181818!important;border:0!important;list-style:none!important; } html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu li>a{ display:flex!important;align-items:center!important;width:100%!important;min-height:46px!important; margin:0!important;padding:12px 16px!important;color:#fff!important;background:#181818!important; border:0!important;border-bottom:1px solid #303030!important;border-radius:0!important;box-shadow:none!important; font-family:'Open Sans',Arial,sans-serif!important;font-size:15px!important;font-weight:600!important;line-height:1.35!important; text-align:left!important;white-space:normal!important;text-decoration:none!important; } html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu li>a:hover, html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu li>a:focus{background:#292929!important;color:#fff!important} html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu .sub-menu{ display:none!important;position:static!important;inset:auto!important;width:100%!important;min-width:100%!important;max-width:100%!important; margin:0!important;padding:0!important;background:#242424!important;border:0!important;box-shadow:none!important;transform:none!important; } html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu .menu-item-has-children.mp-open>.sub-menu{display:block!important} html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu .sub-menu li, html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu .sub-menu li>a{background:#242424!important} html body.new5-home-ui .new5-primary-header #nav-menu-links.new5-utility-menu .sub-menu li>a{padding-left:28px!important;font-size:14px!important} /* Category drawer: one dark fixed drawer. */ html body.new5-home-ui #category-links.category-links{ display:block!important;position:fixed!important;top:60px!important;left:-82%!important;right:auto!important; width:82%!important;max-width:340px!important;height:calc(100dvh - 60px)!important;max-height:calc(100dvh - 60px)!important; margin:0!important;padding:0 0 36px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important; background:#303030!important;border:0!important;border-right:1px solid #4a4a4a!important;border-radius:0!important; box-shadow:8px 0 24px rgba(0,0,0,.45)!important;z-index:6500!important;transition:left .24s ease!important; white-space:normal!important;transform:none!important; } html body.new5-home-ui #category-links.category-links.active{left:0!important} html body.new5-home-ui #category-links.category-links>li{ display:block!important;position:relative!important;width:100%!important;margin:0!important;padding:0!important;background:#303030!important; } html body.new5-home-ui #category-links.category-links>li>a{ display:block!important;width:100%!important;margin:0!important;padding:14px 16px!important; color:#fff!important;background:#303030!important;border:0!important;border-bottom:1px solid #464646!important;border-radius:0!important; font-size:16px!important;font-weight:600!important;line-height:1.35!important;text-align:left!important;white-space:normal!important; } html body.new5-home-ui #category-links.category-links>li>a:hover, html body.new5-home-ui #category-links.category-links>li>a:focus{background:#383838!important;color:#fff!important} html body.new5-home-ui #category-links.category-links .dropdown-menu{ display:none!important;position:static!important;inset:auto!important;width:100%!important;min-width:100%!important;max-width:100%!important; height:auto!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important; visibility:visible!important;opacity:1!important;transform:none!important;float:none!important; background:#404040!important;border:0!important;border-radius:0!important;box-shadow:none!important; } html body.new5-home-ui #category-links.category-links .dropdown.open>.dropdown-menu{display:block!important} html body.new5-home-ui #category-links.category-links .dropdown-menu li{ display:block!important;position:static!important;width:100%!important;margin:0!important;padding:0!important;background:#404040!important; } html body.new5-home-ui #category-links.category-links .dropdown-menu li>a{ display:block!important;width:100%!important;margin:0!important;padding:11px 18px 11px 28px!important; color:#f1f1f1!important;background:#404040!important;border:0!important;border-bottom:1px solid #505050!important; font-size:14.5px!important;font-weight:600!important;line-height:1.35!important;text-align:left!important;white-space:normal!important; } html body.new5-home-ui #category-links.category-links .dropdown-menu li>a:hover{background:#484848!important;color:#fff!important} html body.new5-home-ui #category-links.category-links .new5-dropdown-trigger{position:relative!important;padding-right:42px!important} html body.new5-home-ui #category-links.category-links .new5-dropdown-trigger .arrow{ position:absolute!important;right:16px!important;top:50%!important;transform:translateY(-50%)!important;transition:transform .18s ease!important; } html body.new5-home-ui #category-links.category-links .dropdown.open>.new5-dropdown-trigger .arrow{transform:translateY(-50%) rotate(180deg)!important} } /* v8.24 — keep the category drawer below the 60px mobile header; no top items hidden */ @media (max-width:767px){ html body.new5-home-ui #category-links.category-links #mobile-search{ display:block!important;position:relative!important;width:100%!important;margin:0!important;padding:10px 12px!important; background:#303030!important;border-bottom:1px solid #464646!important; } html body.new5-home-ui #category-links.category-links #mobile-search form, html body.new5-home-ui #category-links.category-links #mobile-search .input-group{display:block!important;width:100%!important;margin:0!important;padding:0!important} html body.new5-home-ui #category-links.category-links #mobile-search input{ display:block!important;width:100%!important;height:38px!important;margin:0!important;padding:8px 10px!important; box-sizing:border-box!important;background:#fff!important;color:#111!important;border:1px solid #0d8ee8!important;border-radius:3px!important; } } /* v8.48 — FINAL MOBILE TOP HEADER (approved v8.32 size + v8.34 hamburger fix). */ @media (max-width:767px){ html body.new5-home-ui .new5-primary-header .new5-utility-navbar, html body.new5-home-ui .new5-primary-header .new5-utility-container, html body.new5-home-ui .new5-primary-header .new5-brand-wrap.navbar-header{ min-height:82px!important; height:82px!important; } html body.new5-home-ui .new5-primary-header a.new5-brand.navbar-brand{ position:absolute!important; left:50%!important; top:50%!important; transform:translate(-50%,-50%)!important; width:190px!important; max-width:190px!important; height:58px!important; padding:0!important; margin:0!important; overflow:visible!important; } html body.new5-home-ui .new5-primary-header a.new5-brand.navbar-brand img{ display:block!important; width:190px!important; max-width:190px!important; height:auto!important; max-height:58px!important; margin:0 auto!important; object-fit:contain!important; } html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle{ position:absolute!important; left:9px!important; top:50%!important; transform:translateY(-50%)!important; width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; margin:0!important; padding:0!important; overflow:hidden!important; border:2px solid #fff!important; border-radius:5px!important; background:transparent!important; box-sizing:border-box!important; display:block!important; } html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle .icon-bar{ display:block!important; position:absolute!important; left:7px!important; width:22px!important; height:3px!important; min-height:3px!important; margin:0!important; padding:0!important; transform:none!important; background:#fff!important; border:0!important; border-radius:1px!important; opacity:1!important; } html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle .icon-bar:nth-of-type(2){top:9px!important} html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle .icon-bar:nth-of-type(3){top:17px!important} html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle .icon-bar:nth-of-type(4){top:25px!important} } /* v8.33 — MOBILE ONLY: category bar matched to supplied reference screenshot.
   Reference proportions at ~517px viewport:
   bar ~63px, hamburger x~7, 4K button 126x42, search max 177x43.
   Does NOT change top logo header or the opened category drawer. */ @media (max-width:767px){ html body.new5-home-ui .new5-category-header{ height:63px!important; min-height:63px!important; background:#000!important; } html body.new5-home-ui .new5-category-header .category-navbar{ position:relative!important; width:100%!important; height:63px!important; min-height:63px!important; padding:0!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:space-between!important; background:#141414!important; border-top:1px solid #2a2a2a!important; border-bottom:1px solid #2a2a2a!important; border-left:0!important; border-right:0!important; border-radius:0!important; box-sizing:border-box!important; } /* Left hamburger: same clean 3-line look/location as reference. */ html body.new5-home-ui .new5-category-header .category-toggle{ display:flex!important; position:absolute!important; left:7px!important; top:50%!important; transform:translateY(-50%)!important; width:22px!important; height:22px!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; flex-direction:column!important; justify-content:center!important; gap:4px!important; z-index:3600!important; } html body.new5-home-ui .new5-category-header .category-toggle .icon-bar{ display:block!important; width:22px!important; height:2px!important; min-height:2px!important; margin:0!important; background:#fff!important; border-radius:0!important; } /* Keep only the visible 4K button in the left group at the reference position. */ html body.new5-home-ui .new5-category-header .left-group{ display:flex!important; align-items:center!important; flex:0 0 auto!important; width:auto!important; height:63px!important; min-width:0!important; margin:0 0 0 57px!important; padding:0!important; } html body.new5-home-ui .new5-category-header .custom-button{ flex:0 0 126px!important; width:126px!important; min-width:126px!important; max-width:126px!important; height:42px!important; min-height:42px!important; max-height:42px!important; margin:0!important; padding:0 12px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; box-sizing:border-box!important; border:0!important; border-radius:5px!important; background:#ffc107!important; color:#000!important; font-size:14px!important; font-weight:700!important; line-height:1!important; white-space:nowrap!important; } /* Search is wider than 4K in the reference; keep it responsive on narrow phones. */ html body.new5-home-ui .new5-category-header .search-container{ position:absolute!important; right:8px!important; top:50%!important; transform:translateY(-50%)!important; flex:none!important; width:clamp(145px,34.25vw,177px)!important; min-width:145px!important; max-width:177px!important; height:43px!important; min-height:43px!important; max-height:43px!important; margin:0!important; padding:0!important; box-sizing:border-box!important; } html body.new5-home-ui .new5-category-header .new5-search-box, html body.new5-home-ui .new5-category-header .new5-search-box form, html body.new5-home-ui .new5-category-header .new5-search-box .input-group{ width:100%!important; height:43px!important; min-height:43px!important; max-height:43px!important; margin:0!important; padding:0!important; background:transparent!important; box-sizing:border-box!important; } html body.new5-home-ui .new5-category-header .new5-search-box input{ display:block!important; width:100%!important; height:43px!important; min-height:43px!important; max-height:43px!important; margin:0!important; padding:0 11px!important; box-sizing:border-box!important; background:#fff!important; color:#333!important; border:1.5px solid #0087fc!important; border-radius:4px!important; box-shadow:none!important; font-size:14px!important; font-weight:400!important; line-height:40px!important; } } /* Keep the same visual relationship on very narrow phones without overlap. */ @media (max-width:375px){ html body.new5-home-ui .new5-category-header .left-group{ margin-left:48px!important; } html body.new5-home-ui .new5-category-header .custom-button{ width:120px!important; min-width:120px!important; max-width:120px!important; padding-left:9px!important; padding-right:9px!important; font-size:13.5px!important; } html body.new5-home-ui .new5-category-header .search-container{ right:7px!important; width:145px!important; min-width:145px!important; max-width:145px!important; } } /* v8.50 — MOBILE ONLY: reference spacing for the 4K-bar hamburger + fully visible drawer search.
   Fixes: hamburger too close to screen edge; drawer still starting at old 60px while top header is 82px. */ @media (max-width:767px){ html body.new5-home-ui .new5-category-header .category-toggle{ left:14px!important; top:50%!important; width:22px!important; height:22px!important; transform:translateY(-50%)!important; } html body.new5-home-ui .new5-category-header .left-group{ margin-left:64px!important; } html body.new5-home-ui .new5-category-header .search-container{ right:2px!important; } /* Top mobile header is 82px in the approved design, so the drawer must begin below it. */ html body.new5-home-ui #category-links.category-links{ top:82px!important; height:calc(100dvh - 82px)!important; max-height:calc(100dvh - 82px)!important; padding-top:0!important; scroll-padding-top:0!important; } html body.new5-home-ui #category-links.category-links #mobile-search{ display:block!important; position:sticky!important; top:0!important; z-index:3!important; width:100%!important; margin:0!important; padding:10px 12px!important; box-sizing:border-box!important; background:#303030!important; border-bottom:1px solid #464646!important; } html body.new5-home-ui #category-links.category-links #mobile-search form, html body.new5-home-ui #category-links.category-links #mobile-search .input-group, html body.new5-home-ui #category-links.category-links #mobile-search input{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } } /* Narrow phones: preserve no-overlap spacing. */ @media (max-width:375px){ html body.new5-home-ui .new5-category-header .category-toggle{left:8px!important} html body.new5-home-ui .new5-category-header .left-group{margin-left:48px!important} html body.new5-home-ui .new5-category-header .search-container{right:7px!important} } /* v8.52 — MOBILE ONLY: reference-like blue hover/focus on TOP hamburger. */ @media (max-width:767px){ html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle{ cursor:pointer!important; transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease!important; } html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle:hover, html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle:focus, html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle:focus-visible, html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle[aria-expanded="true"]{ background:rgba(13,110,253,.22)!important; border-color:#4b91ff!important; box-shadow:0 0 0 2px rgba(13,110,253,.20),0 0 12px rgba(13,110,253,.28)!important; outline:0!important; } html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle:hover .icon-bar, html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle:focus .icon-bar, html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle:focus-visible .icon-bar, html body.new5-home-ui .new5-primary-header button.new5-utility-toggle.navbar-toggle[aria-expanded="true"] .icon-bar{ background:#fff!important; } }