657 HP Stage 2 Performance Controller Power Package | BMW G87 M2 (2023 - 2026)

/* ========================================================= CarBahn Shared Tokens + Base Utilities ========================================================= */ :root{ --cb-max: 1240px; --cb-gutter: clamp(1rem, 3.2vw, 2.5rem); --cb-padY-hero: clamp(2.25rem, 5vw, 4.5rem); --cb-padY: clamp(2.25rem, 5vw, 4.25rem); --cb-bg: #0b0f14; --cb-panel: rgba(255,255,255,.06); --cb-panel2: rgba(255,255,255,.04); --cb-border: rgba(255,255,255,.14); --cb-text: rgba(255,255,255,.94); --cb-muted: rgba(255,255,255,.78); --cb-soft: rgba(255,255,255,.62); --cb-red: #e1122f; --cb-blue: #2b6cff; --cb-delta: #22c55e; --cb-radius: 18px; --cb-radius-lg: 24px; --cb-shadow: 0 18px 55px rgba(0,0,0,.52); --cb-shadow-hero: 0 20px 60px rgba(0,0,0,.55); } /* Scope everything to only these modules */ .cb-hero-powerpkg, .cb-perf-data, .cb-app-control{ color: var(--cb-text); background: var(--cb-bg); position: relative; overflow: hidden; } /* shared grid background */ .cb-hero-powerpkg::before, .cb-perf-data::before, .cb-app-control::before{ content:""; position:absolute; inset:-2px; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 64px 64px; opacity:.10; pointer-events:none; } .cb-hero-powerpkg::before{ opacity:.16; background-size: 56px 56px; mask-image: radial-gradient(60% 55% at 50% 25%, rgba(0,0,0,1) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 85%); } .cb-perf-data::before, .cb-app-control::before{ mask-image: radial-gradient(70% 60% at 50% 10%, rgba(0,0,0,1) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 85%); } .cb-hero-powerpkg *, .cb-perf-data *, .cb-app-control *{ box-sizing: border-box; } .cb-wrap{ width: min(var(--cb-max), calc(100% - (var(--cb-gutter) * 2))); margin: 0 auto; position: relative; z-index: 2; } /* ========================================================= HERO ========================================================= */ .cb-hero-powerpkg{ padding: var(--cb-padY-hero) 0; background: radial-gradient(1200px 600px at 20% 0%, rgba(225,18,47,.22), transparent 60%), radial-gradient(900px 450px at 80% 10%, rgba(43,108,255,.16), transparent 55%), linear-gradient(180deg, #090c10, var(--cb-bg)); } .cb-hero-powerpkg .cb-topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; } .cb-hero-powerpkg .cb-badges{ display:flex; flex-wrap:wrap; gap:.5rem; } .cb-hero-powerpkg .cb-badge{ display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .65rem; border-radius: 999px; border: 1px solid var(--cb-border); background: rgba(255,255,255,.04); color: var(--cb-muted); font-size:.85rem; letter-spacing:.02em; backdrop-filter: blur(6px); } .cb-hero-powerpkg .cb-badge strong{ color: var(--cb-text); font-weight: 700; } .cb-hero-powerpkg .cb-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1rem, 2.2vw, 1.75rem); align-items: stretch; } .cb-hero-powerpkg .cb-media{ border-radius: var(--cb-radius-lg); overflow:hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--cb-shadow-hero); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); position: relative; min-height: 360px; } .cb-hero-powerpkg .cb-media img{ width:100%; height:100%; object-fit: cover; display:block; transform: scale(1.02); } .cb-hero-powerpkg .cb-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.50), rgba(0,0,0,.10) 55%, rgba(0,0,0,.35)), linear-gradient(180deg, rgba(0,0,0,.35), transparent 35%, rgba(0,0,0,.62)); pointer-events:none; } .cb-hero-powerpkg .cb-mediaMark{ position:absolute; left: 1.25rem; bottom: 1.15rem; display:flex; align-items:center; gap:.55rem; z-index: 2; padding:.55rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.32); backdrop-filter: blur(8px); color: rgba(255,255,255,.88); font-size:.85rem; letter-spacing:.03em; text-transform: uppercase; } .cb-hero-powerpkg .cb-dot{ width:10px; height:10px; border-radius:99px; background: var(--cb-red); box-shadow: 0 0 0 3px rgba(225,18,47,.18); } .cb-hero-powerpkg .cb-content{ border-radius: var(--cb-radius-lg); border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow: var(--cb-shadow-hero); padding: clamp(1.15rem, 2.4vw, 1.75rem); position: relative; overflow:hidden; } .cb-hero-powerpkg .cb-content::before{ content:""; position:absolute; inset:0; background: radial-gradient(700px 260px at 0% 0%, rgba(225,18,47,.18), transparent 60%), radial-gradient(600px 240px at 100% 0%, rgba(43,108,255,.12), transparent 60%); opacity:.9; pointer-events:none; } .cb-hero-powerpkg .cb-inner{ position: relative; z-index: 2; } .cb-hero-powerpkg h1{ margin: 0 0 .6rem; font-size: clamp(1.55rem, 3.2vw, 2.35rem); line-height: 1.08; letter-spacing: .01em; font-weight: 900; color: #fff; } .cb-hero-powerpkg .cb-sub{ margin: 0 0 1rem; color: var(--cb-muted); font-size: 1.02rem; line-height: 1.5; max-width: 58ch; } .cb-hero-powerpkg .cb-metricRow{ display:grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1rem 0 1rem; } .cb-hero-powerpkg .cb-metric{ border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); padding: .85rem .85rem .75rem; position: relative; overflow:hidden; } .cb-hero-powerpkg .cb-metric::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(225,18,47,.12), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.06), transparent 60%); opacity:.9; pointer-events:none; } .cb-hero-powerpkg .cb-metric .k{ display:block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cb-soft); margin-bottom: .35rem; } .cb-hero-powerpkg .cb-metric .v{ display:block; font-size: 1.1rem; font-weight: 900; letter-spacing:.01em; color: var(--cb-text); } .cb-hero-powerpkg .cb-metric .v em{ font-style: normal; color: var(--cb-red); } .cb-hero-powerpkg .cb-list{ display:grid; gap: .7rem; margin: 1.05rem 0 1.2rem; padding: 0; list-style: none; } .cb-hero-powerpkg .cb-li{ display:flex; gap:.7rem; align-items:flex-start; padding: .65rem .75rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); } .cb-hero-powerpkg .cb-ico{ width: 22px; height: 22px; flex: 0 0 22px; color: var(--cb-red); margin-top: 2px; filter: drop-shadow(0 8px 18px rgba(225,18,47,.18)); } .cb-hero-powerpkg .cb-li strong{ display:block; font-weight: 850; color: var(--cb-text); margin-bottom: .15rem; } .cb-hero-powerpkg .cb-li span{ display:block; color: var(--cb-muted); line-height: 1.45; font-size: .98rem; } .cb-hero-powerpkg .cb-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top: .35rem; align-items:center; } .cb-hero-powerpkg .cb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding: .9rem 1.05rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font-weight: 900; letter-spacing:.02em; text-decoration:none; user-select:none; transition: transform .15s ease, background .15s ease, border-color .15s ease; white-space: nowrap; } .cb-hero-powerpkg .cb-btn-primary{ background: linear-gradient(180deg, rgba(225,18,47,1), rgba(185,14,36,1)); border-color: rgba(225,18,47,.60); color: #fff; box-shadow: 0 18px 40px rgba(225,18,47,.22); } .cb-hero-powerpkg .cb-btn-primary:hover{ transform: translateY(-1px); } .cb-hero-powerpkg .cb-btn-secondary{ background: rgba(255,255,255,.05); color: rgba(255,255,255,.92); } .cb-hero-powerpkg .cb-btn-secondary:hover{ transform: translateY(-1px); border-color: rgba(43,108,255,.35); background: rgba(43,108,255,.08); } .cb-hero-powerpkg .cb-fine{ margin-top: .85rem; color: rgba(255,255,255,.70); font-size: .86rem; line-height: 1.35; border-top: 1px solid rgba(255,255,255,.12); padding-top: .75rem; } .cb-hero-powerpkg .cb-fine b{ color: rgba(255,255,255,.90); font-weight: 800; } @media (max-width: 980px){ .cb-hero-powerpkg .cb-grid{ grid-template-columns: 1fr; } .cb-hero-powerpkg .cb-media{ min-height: 320px; } } @media (max-width: 560px){ .cb-hero-powerpkg .cb-metricRow{ grid-template-columns: 1fr; } .cb-hero-powerpkg .cb-li{ padding: .6rem .65rem; } .cb-hero-powerpkg .cb-sub{ font-size: 1rem; } } /* ========================================================= PERFORMANCE DATA ========================================================= */ .cb-perf-data{ padding: var(--cb-padY) 0; } .cb-perf-data .cb-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--cb-border); padding-bottom: .85rem; } .cb-kicker{ display:flex; align-items:center; gap:.55rem; color: var(--cb-soft); font-size: .82rem; letter-spacing: .10em; text-transform: uppercase; margin-bottom: .35rem; } .cb-kicker .dot{ width:10px; height:10px; border-radius:999px; background: var(--cb-red); box-shadow: 0 0 0 3px rgba(225,18,47,.18); } .cb-perf-data h2{ margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 900; letter-spacing:.01em; color: var(--cb-text); } .cb-perf-data .cb-dynoGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(.85rem, 2vw, 1.25rem); margin: 1.25rem 0 1.1rem; } .cb-perf-data figure{ margin:0; border-radius: var(--cb-radius); overflow:hidden; border: 1px solid var(--cb-border); background: rgba(0,0,0,.22); box-shadow: var(--cb-shadow); } .cb-perf-data figure img{ width:100%; height:auto; display:block; background:#0a0d11; } .cb-perf-data figcaption{ padding: .75rem .9rem; border-top: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--cb-muted); font-size: .92rem; line-height: 1.35; } .cb-perf-data figcaption b{ color: var(--cb-text); font-weight: 850; } .cb-perf-data .cb-transBlock{ margin-top: 1.15rem; } .cb-perf-data .cb-transBlock + .cb-transBlock{ margin-top: 1.1rem; } .cb-perf-data .cb-tableWrap{ border-radius: var(--cb-radius); border: 1px solid var(--cb-border); background: rgba(255,255,255,.04); overflow:hidden; } .cb-perf-data table{ width:100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .cb-perf-data thead th{ text-align:left; padding: .85rem .9rem; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82); background: rgba(0,0,0,.34); border-bottom: 1px solid rgba(255,255,255,.12); vertical-align: bottom; } .cb-perf-data tbody td{ padding: .85rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.86); vertical-align: top; } .cb-perf-data tbody tr:last-child td{ border-bottom:none; } .cb-perf-data .rowhead{ color: var(--cb-text); font-weight: 850; white-space: nowrap; } .cb-perf-data .fuel{ display:inline-flex; align-items:center; gap:.5rem; font-weight: 900; color: var(--cb-text); } .cb-perf-data .fuel .bar{ width:18px; height:2px; border-radius:99px; background: rgba(255,255,255,.22); position: relative; top:-1px; } .cb-perf-data .fuel93 .bar::after{ content:""; display:block; width:10px; height:2px; border-radius:99px; background: var(--cb-red); } .cb-perf-data .fuel100 .bar::after{ content:""; display:block; width:10px; height:2px; border-radius:99px; background: var(--cb-blue); } .cb-perf-data .gain{ color: rgba(255,255,255,.92); font-weight: 900; } .cb-perf-data .gain em{ font-style: normal; color: var(--cb-delta); font-weight: 950; } .cb-perf-data .note{ margin-top: .9rem; color: rgba(255,255,255,.72); font-size: .88rem; line-height: 1.35; } .cb-perf-data .note b{ color: rgba(255,255,255,.92); font-weight: 850; } @media (max-width: 980px){ .cb-perf-data .cb-dynoGrid{ grid-template-columns: 1fr; } } @media (max-width: 700px){ .cb-perf-data thead{ display:none; } .cb-perf-data table, .cb-perf-data tbody, .cb-perf-data tr, .cb-perf-data td{ display:block; width:100%; } .cb-perf-data tbody tr{ padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.10); } .cb-perf-data tbody tr:last-child{ border-bottom:none; } .cb-perf-data tbody td{ border:none; padding: .35rem .9rem; } .cb-perf-data tbody td::before{ content: attr(data-label); display:block; color: rgba(255,255,255,.62); text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; margin-bottom: .1rem; } .cb-perf-data .rowhead{ margin-top:.15rem; white-space: normal; } } /* ========================================================= APP CONTROL ========================================================= */ .cb-app-control{ padding: var(--cb-padY) 0; } .cb-app-control .cb-head{ border-bottom: 1px solid var(--cb-border); padding-bottom: .85rem; margin-bottom: 1.2rem; } .cb-app-control h2{ margin:0; font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 900; letter-spacing: .01em; color: var(--cb-text); } .cb-app-control .cb-sub{ margin: .55rem 0 0; color: var(--cb-muted); max-width: 78ch; line-height: 1.5; font-size: 1.02rem; } .cb-app-control .cb-sub b{ color: var(--cb-text); } .cb-app-control .cb-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1rem, 2.2vw, 1.5rem); align-items: start; } .cb-app-control .cb-card{ border-radius: var(--cb-radius); border: 1px solid var(--cb-border); background: rgba(255,255,255,.04); box-shadow: var(--cb-shadow); padding: clamp(1.05rem, 2vw, 1.4rem); overflow:hidden; position: relative; } .cb-app-control .cb-card::before{ content:""; position:absolute; inset:0; background: radial-gradient(700px 240px at 0% 0%, rgba(225,18,47,.14), transparent 60%), radial-gradient(600px 220px at 100% 0%, rgba(43,108,255,.10), transparent 60%); pointer-events:none; opacity:.9; } .cb-app-control .cb-inner{ position:relative; z-index:2; } .cb-app-control .cb-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin: .2rem 0 .95rem; } .cb-app-control .cb-badge{ display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .65rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.26); color: rgba(255,255,255,.86); font-size:.85rem; letter-spacing:.02em; backdrop-filter: blur(6px); } .cb-app-control .cb-badge strong{ color: var(--cb-text); font-weight: 900; } .cb-app-control .cb-badge .pill{ width:8px; height:8px; border-radius:999px; background: var(--cb-delta); box-shadow: 0 0 0 3px rgba(34,197,94,.14); } .cb-app-control .cb-p{ margin: 0 0 .8rem; color: var(--cb-muted); line-height: 1.55; font-size: 1.02rem; } .cb-app-control .cb-p b{ color: var(--cb-text); font-weight: 900; } .cb-app-control .cb-download{ display:flex; flex-wrap:wrap; gap: .75rem; align-items:center; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.12); } .cb-app-control .store-badge{ display:inline-flex; align-items:center; justify-content:center; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); padding: .55rem .65rem; transition: transform .15s ease, background .15s ease, border-color .15s ease; text-decoration:none; } .cb-app-control .store-badge:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.09); } .cb-app-control .store-badge img{ display:block; height: 42px; width:auto; } .cb-app-control .cb-links{ display:grid; gap: .35rem; margin-top: .75rem; color: rgba(255,255,255,.82); font-size: .92rem; line-height: 1.35; } .cb-app-control .cb-links a{ color: rgba(255,255,255,.92); text-decoration:none; border-bottom: 1px solid rgba(255,255,255,.22); width: fit-content; } .cb-app-control .cb-links a:hover{ border-bottom-color: rgba(34,197,94,.55); color:#fff; } .cb-app-control .cb-media{ border-radius: var(--cb-radius); overflow:hidden; border: 1px solid var(--cb-border); background: rgba(0,0,0,.22); box-shadow: var(--cb-shadow); } .cb-app-control .cb-media img{ width:100%; height:auto; display:block; background:#0a0d11; } .cb-app-control .cb-mediaCap{ padding: .75rem .9rem; border-top: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--cb-muted); font-size: .92rem; line-height: 1.35; } .cb-app-control .cb-mediaCap b{ color: var(--cb-text); font-weight: 900; } .cb-app-control .cb-compliance{ margin-top: 1.25rem; border-radius: var(--cb-radius); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); padding: 1rem 1.05rem; color: rgba(255,255,255,.78); line-height: 1.5; font-size: .95rem; } .cb-app-control .cb-compliance h3{ margin: 0 0 .35rem; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.88); } .cb-app-control .cb-compliance b{ color: rgba(255,255,255,.92); font-weight: 900; } .cb-app-control .cb-compliance .tag{ display:inline-flex; align-items:center; gap:.45rem; margin-top: .6rem; padding: .35rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.22); color: rgba(255,255,255,.82); font-size: .85rem; } .cb-app-control .cb-compliance .tag .dot{ width:8px; height:8px; border-radius:99px; background: var(--cb-red); box-shadow: 0 0 0 3px rgba(225,18,47,.14); } @media (max-width: 980px){ .cb-app-control .cb-grid{ grid-template-columns: 1fr; } } @media (max-width: 560px){ .cb-app-control .store-badge img{ height: 38px; } } Stage 2 Performance Controller Power Package No Unlocks Required Daily + Track Proven CarBahn Engineered • G87 M2 Stage 2 Performance Controller Power Package for the BMW G87 M2 The most popular way to transform the G87: repeatable power and temperature control without the headaches. Whether you drive an automatic or a manual, this package delivers serious gains with clean integration, stronger pull through the rev range, and cooling engineered to keep performance consistent. Automatic Up to 657 HP / 589 TQ Manual Up to 628 HP / 598 lb-ft Cooling 40% more capacity No unlocks. No drama. Controller-based performance that keeps your path simple while delivering serious results. State-of-the-art heat exchanger Front-mounted cooling engineered for 40% more capacity , designed to stay consistent in heat, altitude, and repeated pulls. OEM mounting points. Clean integration. Bolts on using factory locations for a tidy install and a finish that looks like it belongs there. All-climate spirited driving Perfect for the daily commute and track days alike—built to deliver that “always ready” feeling in any season. View Performance Data Fitment: BMW G87 M2 (manual or automatic). If manual, an upgraded clutch is recommended/required to support the higher torque potential. Performance Data Dyno Results: Automatic Manual Transmission Automatic Transmission: OEM stock vs CarBahn tuned overlay on 93 octane. Manual Transmission: 93 and 100 octane tuned results with OEM stock baseline shown for 93 octane. Automatic Transmission Fuel / Condition Calculated Flywheel Power Measured Wheel Power 93 Octane • OEM Stock 554 HP / 501 TQ 465 WHP / 421 WTQ 93 Octane • CarBahn Tuned 633 HP / 573 TQ 532 WHP / 481 WTQ 93 Octane • Gain over stock +79 HP / +72 TQ +67 WHP / +60 WTQ 100 Octane • CarBahn Tuned 657 HP / 589 TQ 552 WHP / 495 WTQ 100 Octane • Gain over stock +103 HP / +88 TQ +87 WHP / +74 WTQ Manual Transmission Fuel / Condition Calculated Flywheel Power Measured Wheel Power 93 Octane • OEM Stock 527 HP / 475 lb-ft 464 WHP / 418 WTQ 93 Octane • CarBahn Tuned 611 HP / 585 lb-ft 538 WHP / 515 WTQ 93 Octane • Gain over stock +84 HP / +110 lb-ft +74 WHP / +97 WTQ 100 Octane • CarBahn Tuned 628 HP / 598 lb-ft 553 WHP / 527 WTQ 100 Octane • Gain over stock +101 HP / +123 lb-ft +89 WHP / +109 WTQ Note: Results vary by vehicle, environment, transmission, and fuel quality. Automatic and manual vehicles use different baselines and should be evaluated within their own transmission group. App Control Select Maps. Switch Fuels. Stay in Control. The CarBahn Performance Controller is plug-and-play , and map selection is handled in the palm of your hand over Bluetooth . Choose the right calibration for your fuel and conditions—then get back to driving. Bluetooth app control Selectable maps 91 / 93 / 100 octane The CarBahn Performance Controller (CPC) is designed for drivers who want real gains without complicated workflows. Install once, then select your map based on fuel—perfect for daily driving, long road trips, or track days when you want the car at its best. Download the app below and manage maps directly from your phone. Apple: apps.apple.com/us/app/tuning-pro Google: play.google.com/store/apps/details?id=com.sve.gmbh.tuningpro Real-time access: connect over Bluetooth and select the right map for 91, 93, or 100 octane. Emissions note We design calibrations around repeatable performance and responsible engineering. Catalyst removal often via downpipes can create compliance issues and may not deliver the dramatic gains commonly claimed. If you have questions about setup choices for your goals, reach out and we’ll steer you toward the smartest and legal path. Keep it compliant when required Fitment At-a-Glance Compatibility Vehicle BMW G87 M2 Years 2023–2026 Transmission Auto + Manual Drivetrain RWD Engine S58 Install Time ~8 hrs Fits Designed for the G87 M2 using factory mounting points for a clean, OEM+ install. Manual requirement Manual cars require an upgraded clutch with a higher torque limit. View full fitment details Make BMW Model(s) M2 Vehicle Year(s) 2023, 2024, 2025, and 2026 Transmission(s) Automatic and Manual Chassis G87 Body Style(s) Coupe Drivetrain(s) RWD Fits Engines S58 Part Number CBG8X-9004 Installation Time ~8 hours .cb-fitment{ padding: var(--cb-padY) 0; background: var(--cb-bg); position:relative; overflow:hidden; } .cb-fitment::before{ content:""; position:absolute; inset:-2px; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 64px 64px; opacity:.10; pointer-events:none; mask-image: radial-gradient(70% 60% at 50% 10%, rgba(0,0,0,1) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 85%); } .cb-fitQuick{ display:grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; position:relative; z-index:2; margin-top: 1rem; } .cb-fitPill{ border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); padding: .8rem .85rem .75rem; overflow:hidden; position: relative; } .cb-fitPill::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 60%), linear-gradient(90deg, rgba(225,18,47,.10), transparent 55%); opacity:.85; pointer-events:none; } .cb-fitLabel{ display:block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cb-soft); margin-bottom: .35rem; position: relative; z-index: 2; } .cb-fitValue{ display:block; font-size: 1.02rem; font-weight: 900; color: rgba(255,255,255,.92); position: relative; z-index: 2; line-height: 1.15; } .cb-fitCallouts{ display:grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .9rem; position:relative; z-index:2; } .cb-fitCallout{ border-radius: var(--cb-radius); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); padding: .95rem 1rem; box-shadow: var(--cb-shadow); position: relative; overflow:hidden; } .cb-fitCallout::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.9; } .cb-fitOk::before{ background: radial-gradient(700px 200px at 0% 0%, rgba(43,108,255,.12), transparent 60%); } .cb-fitWarn::before{ background: radial-gradient(700px 200px at 0% 0%, rgba(225,18,47,.14), transparent 60%); } .cb-fitCalloutTitle{ font-size: .82rem; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.80); margin-bottom: .35rem; position: relative; z-index:2; font-weight: 900; } .cb-fitCalloutText{ margin:0; color: rgba(255,255,255,.78); line-height: 1.45; font-size: .98rem; position: relative; z-index:2; } .cb-fitCalloutText b{ color: rgba(255,255,255,.92); font-weight: 900; } .cb-fitDetails{ margin-top: 1rem; position:relative; z-index:2; } .cb-fitSummary{ cursor:pointer; list-style:none; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); padding: .75rem .9rem; color: rgba(255,255,255,.88); font-weight: 900; letter-spacing:.01em; user-select:none; } .cb-fitSummary::-webkit-details-marker{ display:none; } .cb-fitSummary::after{ content:""; float:right; width: 10px; height: 10px; border-right: 2px solid rgba(255,255,255,.70); border-bottom: 2px solid rgba(255,255,255,.70); transform: rotate(45deg); margin-top: 4px; transition: transform .15s ease; } .cb-fitDetails[open] .cb-fitSummary::after{ transform: rotate(-135deg); margin-top: 8px; } .cb-fitDetailBox{ margin-top: .65rem; border-radius: var(--cb-radius); border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); overflow:hidden; } .cb-fitList{ margin:0; padding: .35rem 0; } .cb-fitRow{ display:grid; grid-template-columns: minmax(220px, 34%) 1fr; gap: 1rem; padding: .8rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08); align-items: baseline; } .cb-fitRow:last-child{ border-bottom:none; } .cb-fitRow dt{ margin:0; color: rgba(255,255,255,.88); font-weight: 850; } .cb-fitRow dd{ margin:0; color: rgba(255,255,255,.82); text-align:right; font-variant-numeric: tabular-nums; } @media (max-width: 1100px){ .cb-fitQuick{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px){ .cb-fitCallouts{ grid-template-columns: 1fr; } .cb-fitQuick{ grid-template-columns: repeat(2, 1fr); } .cb-fitRow{ grid-template-columns: 1fr; } .cb-fitRow dd{ text-align:left; } }