body.scooter-theme {
  --ride-ink: #233a5f;
  --ride-dark: #233a5f;
  --ride-muted: #536783;
  --ride-paper: #f1f4f8;
  --ride-line: #dfe5ee;
  --ride-lime: #deebff;
  background: white;
  color: var(--ride-ink);
  font-family: Inter, system-ui, sans-serif;
}
body.scooter-theme .mower-announcement-marquee { background: var(--ride-dark); color: #fff; }
body.scooter-theme .mower-site-header { background: #fff; border-color: var(--ride-line); }
body.scooter-theme .mower-site-header .header-row { min-height: 62px; }
body.scooter-theme .mower-site-header .menu-toggle,
body.scooter-theme .mower-site-header .header-cart { background: var(--ride-paper); color: var(--ride-ink); border-color: var(--ride-line); }
body.scooter-theme .mower-site-header .header-cart [data-shop-cart-count] { background: var(--ride-lime); color: var(--ride-dark); }
body.scooter-theme .shop-footer.brand-footer { background: var(--ride-dark); color: white; }
.scooter-theme .shop-footer.brand-footer p,
.scooter-theme .shop-footer.brand-footer nav,
.scooter-theme .shop-footer.brand-footer small { color: #d6e3f6; }
.ride-home { color: var(--ride-ink); }
.ride-home h1, .ride-home h2 { font: 700 34px/1.06 Inter, system-ui, sans-serif; letter-spacing: -.055em; margin: 0; }
.ride-hero { background: var(--ride-dark); color: white; }
.ride-hero-copy { padding: 27px 23px 20px; }
.ride-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 15px; font-size: 10px; line-height: 1.5; letter-spacing: .16em; font-weight: 700; }
.ride-kicker > span { width: 8px; height: 8px; background: var(--ride-lime); border-radius: 2px; }
.ride-hero h1 { color: white; font-size: clamp(43px, 11vw, 76px); }
.ride-hero h1 em { color: var(--ride-lime); font-style: normal; }
.ride-intro { max-width: 28em; margin: 17px 0 22px; color: #d5e1f2; font-size: 14px; line-height: 1.65; }
.ride-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 51px; padding: 13px 16px; border-radius: 8px; background: var(--ride-lime); color: var(--ride-dark); font-size: 13px; font-weight: 700; text-decoration: none; }
.ride-button:hover { background: #f3f7ff; color: var(--ride-dark); }
.ride-button span, .ride-feature-copy a span, .ride-help a span { font-size: 18px; }
.ride-hero-media { position: relative; isolation: isolate; overflow: hidden; margin: 0 13px; border-radius: 12px 12px 0 0; background: radial-gradient(ellipse at 42% 50%,#f1f6ff,#b5c6dd); }
.ride-hero-media img { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 1.18; object-fit: contain; }
.ride-hero-mark { position: absolute; inset: 0; display: grid; place-items: center; color: #ffffff80; font-weight: 850; font-size: clamp(130px, 42vw, 250px); letter-spacing: -.13em; line-height: 1; }
.ride-model-tag, .ride-model-index { position: absolute; z-index: 1; font-size: 8px; color: #233a5f; font-weight: 700; letter-spacing: .13em; }
.ride-model-tag { top: 12px; left: 12px; padding: 6px 8px; background: #ffffffc7; border-radius: 4px; }
.ride-model-index { bottom: 10px; right: 12px; }
.ride-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 24px 18px 20px; background: var(--ride-paper); }
.ride-numbers div { padding: 0 3px 0 8px; border-left: 2px solid #9fb6d7; }
.ride-numbers strong { display: block; font-size: clamp(18px, 5vw, 30px); letter-spacing: -.06em; line-height: 1.1; white-space: nowrap; }
.ride-numbers small { font-size: .55em; letter-spacing: 0; }
.ride-numbers span { display: block; margin-top: 5px; color: var(--ride-muted); font-size: 9px; overflow-wrap: anywhere; }
.ride-numbers p { grid-column: 1/-1; margin: 0; font-size: 10px; line-height: 1.5; color: var(--ride-muted); }
.ride-feature { display: grid; margin: 30px 18px; background: var(--ride-paper); border: 1px solid var(--ride-line); border-radius: 13px; overflow: hidden; }
.ride-feature-copy { padding: 25px 22px 12px; }
.ride-feature-copy p:not(.ride-kicker) { color: var(--ride-muted); font-size: 13px; line-height: 1.65; margin: 14px 0; }
.ride-feature-copy a, .ride-help a { color: var(--ride-ink); font-size: 13px; font-weight: 700; text-underline-offset: 4px; }
.ride-feature-media img { display: block; width: 100%; height: 225px; object-fit: contain; }
.ride-offer { display: grid; gap: 18px; padding: 30px 23px; background: var(--ride-dark); color: white; }
.ride-offer h2 { color: white; font-size: 28px; }
.ride-price { margin: 14px 0 0; display: flex; align-items: baseline; gap: 12px; }
.ride-price strong { font-size: 29px; color: var(--ride-lime); letter-spacing: -.04em; }
.ride-price del { color: #c7d6eb; font-size: 13px; }
.ride-help { padding: 30px 23px 36px; }
.ride-help h2 { margin-bottom: 12px; font-size: 28px; }
@media (min-width: 750px) {
  .ride-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 22px; padding: 40px max(26px, calc((100vw - 1120px) / 2)); }
  .ride-hero-copy { padding: 18px 0; }
  .ride-hero-media { margin: 0; border-radius: 14px; }
  .ride-button { max-width: 330px; }
  .ride-numbers, .ride-offer, .ride-help { padding-inline: max(30px, calc((100vw - 1120px) / 2)); }
  .ride-feature { max-width: 1120px; margin: 45px auto; grid-template-columns: 1fr 1fr; align-items: center; }
  .ride-feature-copy { padding: 35px; }
  .ride-feature-media img { height: 340px; }
  .ride-offer { grid-template-columns: 1fr 330px; align-items: center; }
}

/* Cockpit on the home page */
body.scooter-theme .mower-site-header .header-cart [data-shop-cart-count] { color: white; background: #233a5f; }
.ride-hero h1 { font-size: clamp(38px, 10vw, 70px); }
.ride-hero-media { border-radius: 12px; margin-bottom: 14px; }
.ride-hero { padding-bottom: 1px; }
.ride-cockpit { margin: 30px 18px; border: 1px solid var(--ride-line); border-radius: 13px; overflow: hidden; background: var(--ride-paper); }
.ride-cockpit img { display: block; width: 100%; height: auto; }
.ride-cockpit > div { padding: 22px; }
.ride-cockpit h2 { font-size: 28px; }
.ride-cockpit div > p:not(.ride-kicker) { font-size: 13px; line-height: 1.65; color: var(--ride-muted); margin: 12px 0; }
.ride-cockpit a { color: var(--ride-ink); font-size: 13px; font-weight: 700; text-underline-offset: 4px; }
@media (min-width: 750px) {
  .ride-hero { padding-bottom: 40px; }
  .ride-hero-media { margin-bottom: 0; }
  .ride-cockpit { display: grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 1120px; margin: 45px auto; }
  .ride-cockpit > div { padding: 32px; }
}