/* Match the dominant background colour of logo.jpg. */
:root { --sws-dark: #18191b; }
body { background-color: var(--sws-dark); }
.site-header { position: relative; z-index: 50; background: var(--sws-dark); color: #fff; padding: 0; border-bottom: 1px solid #202020; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 109px; padding: 8px 3.125%; gap: 32px; }
.header-brand { flex-shrink: 0; width: 208px; }
.header-brand a { display: block; }
.site-header .custom-logo { display: block; width: 208px; height: 94px; object-fit: contain; }
.header-desktop { margin-left: clamp(0px, 6.8vw, 105px); margin-right: auto; }
.header-menu { display: flex; align-items: center; gap: 37px; list-style: none; padding: 0; margin: 0; }
.header-menu > li { position: relative; }
.header-menu a { display: flex; align-items: center; gap: 8px; color: #f5f5f5; font: 500 13px/1.4 Roboto, Arial, sans-serif; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.header-menu > li > a { position: relative; padding: 26px 0; }
.header-menu a:hover, .header-menu .current-menu-item > a, .header-menu .current-menu-ancestor > a { color: #00c8e8; }
.header-menu > .current-menu-item > a::after, .header-menu > .current-menu-ancestor > a::after { content: ''; position: absolute; height: 2px; background: #00c8e8; bottom: 9px; left: 0; right: 0; }
.header-chevron, .header-menu > .menu-item-has-children > a::before { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.header-menu > .menu-item-has-children > a::before { order: 1; }
.header-menu .sub-menu { display: none; position: absolute; top: 100%; left: -16px; min-width: 190px; padding: 12px 16px; margin: 0; list-style: none; background: var(--sws-dark); border: 1px solid #252525; }
.header-menu .sub-menu a { padding: 10px 0; }
.header-menu li:hover > .sub-menu, .header-menu li:focus-within > .sub-menu { display: block; }
.header-actions { display: flex; align-items: center; gap: 34px; flex-shrink: 0; }
.header-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 34px; color: #fff; cursor: pointer; }
.header-icon svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.header-icon:hover { color: #00c8e8; }
.header-count { position: absolute; top: 0; right: -12px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 50%; background: #373737; color: #fff; font: 10px Arial, sans-serif; }
.header-cart .header-count { background: #00546b; color: #00d3f4; }
.header-search summary { list-style: none; }
.header-search summary::-webkit-details-marker { display: none; }
.header-search-form { box-sizing: border-box; position: absolute; right: 3.125%; top: 100%; display: flex; gap: 8px; padding: 16px; background: var(--sws-dark); border: 1px solid #333; width: min(360px, 94vw); }
.header-search-form input { min-width: 0; width: 100%; background: #fff; color: #111; padding: 10px; }
.header-search-form button { color: #00c8e8; }
.site-header :focus-visible { outline: 2px solid #00c8e8; outline-offset: 5px; }
.header-menu-toggle { display: none; align-items: center; justify-content: center; box-sizing: border-box; width: 40px; height: 40px; padding: 8px; border: 1px solid #17414b; border-radius: 6px; background: transparent; color: #00c8e8; cursor: pointer; }
.header-menu-toggle svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.header-menu-toggle:hover { background: #00c8e814; border-color: #00c8e8; }
.site-header .js-mobile-panel a { color: #f5f5f5; text-decoration: none; overflow-wrap: anywhere; transition: color .2s, background-color .2s; }
.site-header .js-mobile-panel a:hover { color: #00c8e8; }
.site-header .js-mobile-menu[hidden] { display: none !important; }
.site-header .js-mobile-menu { position: fixed; inset: 0; z-index: 999; background: rgb(0 0 0 / 70%); }
.site-header .js-mobile-panel { box-sizing: border-box; margin-left: auto; height: 100vh; height: 100dvh; width: min(100%, 384px); overflow-y: auto; padding: 32px 32px 80px; background: var(--sws-dark); color: #fff; }
.site-header .js-mobile-panel nav ul { list-style: none; margin: 0; padding: 0; }
.site-header .js-mobile-panel nav > ul > li + li { border-top: 1px solid #ffffff14; }
.site-header .js-mobile-panel nav a { display: block; box-sizing: border-box; padding: 16px 0; font: 500 16px/1.5 Roboto, Arial, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.site-header .js-mobile-panel nav a:hover, .site-header .js-mobile-panel nav a:focus-visible, .site-header .js-mobile-panel nav .current-menu-item > a, .site-header .js-mobile-panel nav .current-menu-ancestor > a, .site-header .js-mobile-panel nav a[aria-current="page"] { color: #00c8e8; }
.site-header .js-mobile-panel nav .sub-menu a { padding: 10px 0; color: #b8c1c4; font-size: 14px; font-weight: 400; letter-spacing: .3px; text-transform: none; }
.site-header .js-mobile-panel nav .sub-menu a:hover, .site-header .js-mobile-panel nav .sub-menu a:focus-visible, .site-header .js-mobile-panel nav .sub-menu .current-menu-item > a { color: #00c8e8; }
.site-header .js-mobile-panel nav .sub-menu { margin: 0 0 12px; padding-left: 18px; border-left: 1px solid #17414b; }
.site-header .js-menu-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 0 32px auto; border: 1px solid #00c8e8; border-radius: 50%; background: transparent; color: #00c8e8; cursor: pointer; }
.site-header .js-menu-close svg { width: 20px; height: 20px; }
body.mobile-menu-open { overflow: hidden; }
@media (max-width: 1279px) {
.header-inner { gap: 24px; }
.header-desktop { margin-left: 0; }
.header-menu { gap: 20px; }
.header-actions { gap: 24px; }
.header-brand, .site-header .custom-logo { width: 180px; }
}
@media (max-width: 1099px) {
.header-desktop { display: none; }
.header-menu-toggle { display: inline-flex; flex-shrink: 0; }
.header-actions { margin-left: auto; }
.header-inner { min-height: 88px; padding: 8px 24px; }
.site-header .custom-logo { height: 72px; }
}
@media (max-width: 479px) {
.header-inner { padding: 8px 16px; gap: 10px; }
.header-brand, .site-header .custom-logo { width: 130px; }
.site-header .custom-logo { height: 62px; }
.header-actions { gap: 16px; }
.header-icon { width: 22px; }
}