/* kk3 header + footer on the older templates (scoped to .kk3s so nothing else changes) */
.kk3s{--night:#0D1014;--night2:#151A20;--night3:#1D242C;--paper:#F4F2EE;--card:#FFFFFF;--ink:#111417;--mute:#5D646C;--mute2:#9AA1A9;--line:rgba(17,20,23,.12);--lined:rgba(255,255,255,.14);--or:#F06A13;--ord:#C4520A;--r:14px;font:400 16px/1.55 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink)}
.kk3s *,.kk3s *:before,.kk3s *:after{box-sizing:border-box}
.kk3s a{color:inherit;text-decoration:none}
.kk3s a:hover{color:var(--or)}
.kk3s button{font-family:inherit;color:inherit;cursor:pointer}
.kk3s img{display:block;max-width:100%;height:auto}
.kk3s .ib{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;border-radius:50%;color:inherit}
.kk3s .ib:hover{background:rgba(127,127,127,.15)}
.kk3s .mob-only{display:none}
.kk3s .hdr{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .25s,color .25s;color:#fff}
.kk3s .hdr.clear{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.kk3s .hdr.solid{background:rgba(13,16,20,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--lined)}
.kk3s .annc{min-height:36px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--or);color:#fff;font-size:13px;padding:6px 16px;text-align:center;flex-wrap:wrap}
.kk3s .annc a{text-decoration:underline;color:#fff}.kk3s .annc-m{display:none}@keyframes anncA{0%,49.99%{opacity:1;visibility:visible}50%,100%{opacity:0;visibility:hidden}}@keyframes anncB{0%,49.99%{opacity:0;visibility:hidden}50%,100%{opacity:1;visibility:visible}}@media (max-width:760px) and (prefers-reduced-motion:reduce){.kk3s .annc .annc-1.annc-1,.kk3s .annc .annc-m.annc-m{animation:none}.kk3s .annc .annc-m.annc-m{position:static;padding:0;flex-basis:100%;visibility:visible;opacity:1}}
.kk3s .hbar{display:flex;align-items:center;gap:28px;height:68px;padding:0 32px;max-width:1440px;margin:0 auto}
.kk3s .logo{display:flex;align-items:flex-end;gap:6px}
.kk3s .logo img{height:26px;width:auto}
.kk3s .logo .us{font:700 11px Manrope;letter-spacing:.12em;opacity:.7;margin-bottom:-2px}
.kk3s .hnav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.kk3s .hnav>a,.kk3s .hnav>button{font:600 14.5px Manrope;padding:10px 14px;border-radius:999px;border:0;background:transparent;color:inherit;white-space:nowrap}
.kk3s .hnav>a:hover,.kk3s .hnav>button:hover,.kk3s .hnav>button[aria-expanded=true]{background:rgba(255,255,255,.12);color:#fff}
.kk3s .hact{display:flex;gap:4px}
.kk3s .cartbtn{position:relative}
.kk3s .cc{position:absolute;top:4px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--or);color:#fff;font:800 11px/18px Manrope;text-align:center;padding:0 4px}
.kk3s .cc[hidden]{display:none}
.kk3s .mega{background:rgba(13,16,20,.98);border-top:1px solid var(--lined);color:#fff}
.kk3s .mega[hidden]{display:none}
.kk3s .mega-in{max-width:1320px;margin:0 auto;padding:28px 32px 34px;display:grid;grid-template-columns:1fr 300px;gap:36px}
.kk3s .mega-models{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.kk3s .mm{border-radius:var(--r);padding:12px;background:var(--night3);transition:background .15s;display:block}
.kk3s .mm:hover{background:#28313B;color:#fff!important}
.kk3s .mm-img{background:#fff;border-radius:10px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.kk3s .mm-img img{width:84%;height:84%;object-fit:contain}
.kk3s .mm-role{font-size:12px;color:var(--mute2)}
.kk3s .mm-name{font:800 24px/1.05 'Barlow Condensed';text-transform:uppercase}
.kk3s .mm-meta{font-size:13px;color:#C9CED4;margin-top:4px}
.kk3s .mm-pre{white-space:nowrap}
.kk3s .mega-side{display:flex;flex-direction:column;gap:4px}
.kk3s .ms-k{font:700 12px Manrope;letter-spacing:.14em;text-transform:uppercase;color:var(--mute2);margin-bottom:6px}
.kk3s .mega-side>a{display:flex;flex-direction:column;padding:12px 14px;border-radius:10px;font:800 22px/1.1 'Barlow Condensed';text-transform:uppercase}
.kk3s .mega-side>a>span{font:500 13px Manrope;text-transform:none;color:var(--mute2)}
.kk3s .mega-side>a:hover{background:var(--night3);color:#fff!important}
.kk3s .mega-side>a.ms-cta{flex-direction:row;align-items:center;gap:8px;font:700 14px Manrope;text-transform:none;color:var(--or)}
.kk3s .mobnav{position:fixed;inset:0;background:var(--night);color:#fff;z-index:60;overflow:auto;padding:16px}
.kk3s .mobnav[hidden]{display:none}
.kk3s .mobnav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.kk3s .mobnav-top img{height:24px;width:auto}
.kk3s .mob-k{font:700 12px Manrope;letter-spacing:.14em;text-transform:uppercase;color:var(--mute2);margin:18px 0 8px}
.kk3s .mobnav>a{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--lined)}
.kk3s .mobnav>a>img{width:56px;height:56px;background:#fff;border-radius:8px;object-fit:contain}
.kk3s .mobnav>a>span{display:flex;flex-direction:column}
.kk3s .mobnav>a>span>b{font:800 22px 'Barlow Condensed';text-transform:uppercase}
.kk3s .mobnav>a>span>i{font-style:normal;font-size:13px;color:var(--mute2)}
.kk3s .mobnav>a.plain{font:800 24px 'Barlow Condensed';text-transform:uppercase;padding:12px 0}
.kk3s .foot{background:var(--night);color:#fff;padding:80px 0 40px}
.kk3s .ft-in{max-width:1320px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.kk3s .ft-brand img{height:26px;width:auto;margin-bottom:16px}
.kk3s .ft-brand>p{color:var(--mute2);font-size:14.5px;max-width:340px}.kk3s .ft-brand>p.ft-ig{margin-top:14px;font-size:14px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}.kk3s .ft-ig-n{color:var(--mute2)}.kk3s .ft-ig a{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none}.kk3s .ft-ig a:hover span{text-decoration:underline}
.kk3s .ft-brand>a{font-size:14px;color:#fff}
.kk3s .ft-in>div>b{display:block;font:700 12px Manrope;letter-spacing:.14em;text-transform:uppercase;color:var(--mute2);margin-bottom:12px}
.kk3s .ft-in>div>a{display:block;padding:5px 0;color:rgba(255,255,255,.85);font-size:15px}
.kk3s .ft-legal{max-width:1320px;margin:48px auto 0;padding:24px 32px 0;border-top:1px solid var(--lined);color:var(--mute2);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 18px}
.kk3s .ft-legal a{color:var(--mute2);text-decoration:underline}
@media (max-width:1100px){.kk3s .hnav{display:none}.kk3s .mob-only{display:inline-flex}.kk3s .hbar{gap:12px}.kk3s .logo{margin-right:auto}}
@media (max-width:760px){.kk3s .hbar{padding:0 8px;height:60px}.kk3s .desk-only{display:none}.kk3s .annc{font-size:12px;padding:7px 12px}.kk3s .annc .annc-x{display:none}.kk3s .annc{position:relative;overflow:hidden}.kk3s .annc .annc-1,.kk3s .annc .annc-m{animation:anncA 10s step-end infinite}.kk3s .annc .annc-m{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;padding:7px 12px;font-weight:700;text-decoration:none;animation-name:anncB}.kk3s .annc .annc-m u{margin-left:4px}.kk3s .ft-in{grid-template-columns:1fr 1fr}.kk3s .ft-brand{grid-column:1/-1}}

/* W39: the orange announcement line scrolls away with the page and the header bar stays on top, as on the kk3 layout:
   the wrapper sticks at minus the line's height (--kk-annc-h, measured by kk3.js). Offsets that matter only once the page
   has scrolled (anchor jumps, keyboard focus, sticky columns, --v2-header-height before v2-theme.js measures the header)
   use the bar's height, --kk-hbar-h. */
:root{--kk-annc-h:36px;--kk-hbar-h:68px;--v2-header-height:var(--kk-hbar-h)}
@media (max-width:760px){:root{--kk-hbar-h:60px}}
html{scroll-padding-top:calc(var(--kk-hbar-h) + 4px)}
.kk3s-h{position:sticky;top:calc(-1 * var(--kk-annc-h));z-index:50}
form[id]{scroll-margin-top:calc(var(--kk-hbar-h) + 16px)}
.kk3s-h .hdr{position:relative}
.kk3s .ft-news{margin-top:22px;max-width:340px}
.kk3s .ft-news>label{display:block;font:700 12px Manrope;letter-spacing:.12em;text-transform:uppercase;color:var(--mute2);margin-bottom:8px}
.kk3s .ft-news>div{display:flex;gap:6px;background:var(--night3);border:1px solid var(--lined);border-radius:999px;padding:4px}
.kk3s .ft-news input[type=email]{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:500 14px Manrope;padding:0 14px;outline:none}
.kk3s .ft-news button{height:38px;padding:0 16px;border:0;border-radius:999px;background:var(--or);color:#fff;font:700 14px Manrope}
.kk3s .ft-ok{margin-top:18px;color:#fff;font-weight:700}.ft-err{margin:8px 0 0;color:#ffb38a;font:700 13px/1.4 Manrope}
/* Phones: the dark section backgrounds use a 900px copy of night-hero-desktop.webp (58 KB instead of 291 KB). */
@media (max-width:749px){.night-catalog-head{background:linear-gradient(90deg,#151b21f5 10%,#151b21df 48%,#151b2133),url('night-hero-desktop-900.webp') center 54%/cover}.night-catalog-head--parts{background:linear-gradient(90deg,#1d282ff9 35%,#1d282f80),url('night-hero-desktop-900.webp') center 69%/cover}.night-editorial-head{background:linear-gradient(90deg,#19232bf7 40%,#19232b80),url('night-hero-desktop-900.webp') center 38%/cover}.night-journal-cover{background:linear-gradient(90deg,#17212af5 25%,#17212a99),url('night-hero-desktop-900.webp') center 28%/cover}.v2-not-found{background:linear-gradient(90deg,#1b2733ee,#1b2733ce),url('night-hero-desktop-900.webp') center/cover}.v2-collection-hero::before{background:linear-gradient(90deg,#151b22f5,#151b22bf 50%,#151b2240),url('night-hero-desktop-900.webp') center 61%/cover}}
/* 320px phones: keep the announcement line on one row */
@media (max-width:340px){.kk3s .annc{font-size:11px;padding:7px 8px}.kk3s .annc .annc-m{padding:7px 8px}}
/* W39: the older templates never mapped the v2 theme's data font (a monospace stack) to the site's fonts, so labels,
   prices and buttons that use it (availability line, option names, the buy bar's Add to cart, warranty add-on) showed in
   monospace on part, accessory and coming-soon pages. Same Manrope as the rest of the night theme. */
.night-theme{--v2-font-data:var(--body,Manrope,Arial,sans-serif)}
/* W39: the part and accessory buy bar sits at the bottom on every width, like the scooter pages' bar (above 720px it
   was fixed under the old v2 header, which these pages no longer have, so it hid behind the new one), and the footer
   ends above it. */
.v2-product-sticky{inset-block:auto 0;padding-block-end:env(safe-area-inset-bottom,0)}
body:has([data-v2-product-sticky]) .foot{padding-bottom:calc(40px + 4.5rem + 2px + env(safe-area-inset-bottom))}
/* W39: a collection card with no sale badge keeps the badge's place (the row lines up with its neighbours) but shows no
   empty pill */
.night-card__top>span:first-child:empty{visibility:hidden}
/* W39: collection fold-outs ("Choosing between models?", "Getting the right fit") on the beige band of these templates:
   the heading takes the row (the v2 grid kept a 6rem column for an index these pages do not print), and the text is
   dark instead of the v2 dark-band grey (1.03:1 on beige) */
.v2-collection-context-disclosure>summary{grid-template-columns:minmax(0,1fr) auto}
.v2-collection-context__body{color:#4a433c}
.v2-collection-context__body>*{margin-inline:0}