/** Shopify CDN: Minification failed

Line 657:40 Unexpected ")"

**/
:root {
  --motivelle-graphite: #06121c;
  --motivelle-deep-steel: #0c1c2a;
  --motivelle-inspection-amber: #1b86f8; /* accent blue (was amber); name kept so existing rules keep working */
  --motivelle-blue-line: #1eb5ff;
  --motivelle-technical-paper: #f0f3f7;
  --motivelle-heading-ink: #101820;
  --motivelle-muted-steel: #67747a;
  --motivelle-heading-section: clamp(2rem, 4.2vw, 3.5rem);
  --motivelle-heading-band: clamp(1.5rem, 2.6vw, 2.25rem);
  --motivelle-eyebrow-size: 0.75rem;

  /* Type scale (Tracy 2026-09-28). Seven levels only; every PDP text size
     must use one of these. Benchmarks: Evil Energy PDP (H1 30px, CTA 16px,
     breadcrumb 14px), 16px body per Baymard / Shopify reference themes.
     Hierarchy only descends: nothing inside a panel may exceed --mv-type-h3. */
  --mv-type-h1: 1.875rem;      /* 30px product title */
  --mv-type-price: 1.5rem;     /* 24px price */
  --mv-type-h2: 1.5rem;        /* 24px section title */
  --mv-type-h3: 1.125rem;      /* 18px panel / sub heading */
  --mv-type-body: 1rem;        /* 16px body, buttons, values */
  --mv-type-small: 0.875rem;   /* 14px breadcrumb, hints, table cells */
  --mv-type-caption: 0.75rem;  /* 12px uppercase labels, table heads */
}

@media screen and (max-width: 749px) {
  :root {
    --mv-type-h1: 1.5rem;      /* 24px */
    --mv-type-price: 1.375rem; /* 22px */
    --mv-type-h2: 1.25rem;     /* 20px */
  }
}

/* Site container (Tracy 2026-09-28): content max 1280px, centred, with a
   real gutter (16 / 32 / 48px). The theme setting is "wide" (2400px), which
   let a 1920px screen run content from 40px to 1880px. Header, PDP and footer
   all sit in this one container so their left edges line up. */
body:is(.page-width-wide, .page-width-normal, .page-width-narrow) {
  --page-content-width: 80rem;
  --page-margin: max(16px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

@media screen and (min-width: 750px) {
  body:is(.page-width-wide, .page-width-normal, .page-width-narrow) {
    --page-margin: max(32px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
  }
}

@media screen and (min-width: 990px) {
  body:is(.page-width-wide, .page-width-normal, .page-width-narrow) {
    --page-margin: max(48px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
  }
}

/* JS toggles `hidden` on Motivelle components; a class-level `display`
   (grid/flex) would otherwise override it and show hidden UI. */
[class^="motivelle-"][hidden], [class*=" motivelle-"][hidden] { display: none !important; }

motivelle-header-garage {
  display: contents;
}

.motivelle-header-garage__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 11rem;
}

.motivelle-header-garage__label {
  overflow: hidden;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* No vehicle saved: icon only, no empty label + gap widening the tap target. */
.motivelle-header-garage__label:empty {
  display: none;
}

/* Horizon's mobile header grid is symmetric (44 44 1fr 44 44) and puts every
   header action in the last 44px cell. The Garage icon makes that cell hold
   two icons, which overflowed left over the logo. Widen only the right
   bookend when Garage is present (it is always visible: display: contents
   above intentionally keeps the header Garage entry even with no vehicle); the logo column keeps >= 138px at
   390px (logo image is 124px). The drawer selector mirrors Horizon's own
   id-scoped duplicate in sections/header.liquid. */
@media screen and (max-width: 749px) {
  #header-component .header__columns:has(motivelle-header-garage) {
    --header-template-columns: 44px 44px 1fr 44px 88px;
  }

  .motivelle-header-garage__link {
    justify-content: center;
    min-width: 44px;
  }

  /* A saved-vehicle label would re-widen the cell on phones; icon only. */
  .motivelle-header-garage__label {
    display: none;
  }
}

#header-component[data-menu-style='drawer'] .header__columns:has(motivelle-header-garage) {
  --header-template-columns: 44px 44px 1fr 44px 88px;
}

.motivelle-brand-lockup {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* Published lockup SVG. 36px tall on desktop; 28px on phones is the minimum lockup height (brand/tokens.json logo.minHeightPx.lockup). */
.motivelle-brand-lockup svg {
  display: block;
  width: auto;
  height: 2.25rem;
}

@media screen and (max-width: 749px) {
  .motivelle-brand-lockup svg {
    height: 1.75rem;
  }
}

.motivelle-technical-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(30rem, 0.97fr);
  min-height: clamp(28rem, 58vw, 38rem);
  overflow: hidden;
  background: var(--motivelle-graphite);
}

/* The hero background bleeds edge to edge, but its copy and the proof strip
   start on the same left edge as the header and every other section: the
   centred 1280px site container (Tracy 2026-09-28). cqi = the section's own
   width, so a desktop scrollbar doesn't shift the edge. */
.shopify-section:has(> .section > .motivelle-technical-hero),
section:has(> .motivelle-technical-hero) {
  container-type: inline-size;
}

.motivelle-technical-hero,
.motivelle-technical-hero__proof {
  --mv-hero-gutter: max(var(--page-margin), calc((100cqi - var(--page-content-width)) / 2));
}

.motivelle-technical-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--mv-hero-gutter) max(var(--page-margin), 3rem);
}

.motivelle-technical-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  color: var(--motivelle-inspection-amber);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.motivelle-technical-hero__eyebrow::before {
  width: 2.5rem;
  height: 2px;
  background: currentColor;
  content: '';
}

/* Session 2 (2026-09-29): the h1 now names what the store sells, so it is
   longer; at the old 6.5rem it pushed search and everything else below the
   first screen. */
.motivelle-technical-hero h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.motivelle-technical-hero__body {
  max-width: 38rem;
  margin-top: 1.75rem;
  color: rgb(var(--color-foreground-rgb) / 0.74);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

.motivelle-technical-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 38rem;
  margin-top: 1.75rem;
}

.motivelle-technical-hero__vehicle-link {
  flex: 0 0 auto;
  margin-top: 1.6875rem;
}

.motivelle-technical-hero__search {
  display: grid;
  flex: 1 1 20rem;
  gap: 0.625rem;
  min-width: 0;
  max-width: 38rem;
  margin-top: 0;
}

.motivelle-technical-hero__scope {
  margin: 1.25rem 0 0;
  color: rgb(var(--color-foreground-rgb) / 0.6);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.motivelle-technical-hero__search > label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.motivelle-technical-hero__search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.625rem;
}

.motivelle-technical-hero__search input {
  min-width: 0;
  min-height: 3.25rem;
  padding-inline: 0.875rem;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.35);
  border-radius: 2px;
  background: rgb(0 0 0 / 0.18);
  color: var(--color-foreground);
}

.motivelle-technical-hero__search :is(input, button):focus-visible {
  outline: 3px solid var(--motivelle-inspection-amber);
  outline-offset: 2px;
}

/* Current product lines: two plain links with live counts under the search. */
.motivelle-technical-hero__lines {
  max-width: 38rem;
  margin-top: 1.5rem;
}

.motivelle-technical-hero__lines-label {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.motivelle-technical-hero__lines ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.motivelle-technical-hero__lines ul:has(li:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 749px) {
  .motivelle-technical-hero__lines ul:has(li:nth-child(3)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.motivelle-technical-hero__lines a {
  display: grid;
  gap: 0.25rem;
  height: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.28);
  border-left: 3px solid rgb(var(--color-foreground-rgb) / 0.5);
  color: var(--color-foreground);
  text-decoration: none;
}

.motivelle-technical-hero__lines a:hover {
  border-color: rgb(var(--color-foreground-rgb) / 0.6);
}

.motivelle-technical-hero__lines a:focus-visible {
  outline: 3px solid var(--motivelle-inspection-amber);
  outline-offset: 2px;
}

.motivelle-technical-hero__lines strong {
  font-size: 1rem;
  line-height: 1.25;
}

.motivelle-technical-hero__lines span {
  color: rgb(var(--color-foreground-rgb) / 0.64);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.motivelle-technical-hero__visual {
  position: relative;
  min-height: clamp(20rem, 46vw, 30rem);
  overflow: hidden;
  background: radial-gradient(circle at 48% 42%, #0c1c2a 0, #08151f 40%, #06121c 72%);
}

.motivelle-technical-hero__visual::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 2.25rem 2.25rem;
  content: '';
}

.motivelle-technical-hero__visual > img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.motivelle-technical-hero__visual-label {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: grid;
  gap: 0.25rem;
  max-width: 22rem;
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--motivelle-inspection-amber);
  background: rgb(13 23 29 / 0.82);
}

.motivelle-technical-hero__visual-label strong,
.motivelle-technical-hero__visual-label span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.motivelle-technical-hero__visual-label span {
  color: rgb(var(--color-foreground-rgb) / 0.64);
}

@media screen and (max-width: 989px) {
  .motivelle-technical-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .motivelle-technical-hero__copy {
    padding: 4rem var(--page-margin);
  }

  .motivelle-technical-hero__visual {
    min-height: 24rem;
  }
}

@media screen and (max-width: 749px) {
  .motivelle-technical-hero {
    min-height: auto;
  }

  .motivelle-technical-hero h1 {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

  .motivelle-technical-hero__copy {
    padding-block: 2rem 2.25rem;
  }

  .motivelle-technical-hero__body {
    margin-top: 1rem;
  }

  .motivelle-technical-hero__actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 1.25rem;
  }

  .motivelle-technical-hero__vehicle-link {
    margin-top: 0;
  }

  /* In the column layout the desktop `flex: 1 1 20rem` became a 320px
     height, stretching the input and button to ~95px each. */
  .motivelle-technical-hero__search {
    flex: 0 0 auto;
  }

  .motivelle-technical-hero__search > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .motivelle-technical-hero__search .button {
    width: 100%;
  }

  /* Decorative blueprint only; on phones it pushed the vehicle selector and
     products ~290px further down. */
  .motivelle-technical-hero__visual {
    display: none;
  }
}

.motivelle-technical-hero__proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0 var(--mv-hero-gutter);
  border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.16);
  background: #0d171d;
  list-style: none;
}

.motivelle-technical-hero__proof-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem max(var(--page-margin), 1.25rem);
  border-inline-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  color: var(--color-foreground);
  font-size: 0.875rem;
  font-weight: 600;
}

.motivelle-technical-hero__proof-item:first-child {
  border-inline-start: 0;
  /* First label sits on the site container edge, like the hero copy above. */
  padding-inline-start: 0;
}

.motivelle-technical-hero__proof-item > span {
  color: var(--motivelle-inspection-amber);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 989px) {
  .motivelle-technical-hero__proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .motivelle-technical-hero__proof-item:nth-child(odd) {
    border-inline-start: 0;
  }

  .motivelle-technical-hero__proof-item:nth-child(n + 3) {
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }
}

.motivelle-repair-directions {
  display: grid;
  gap: 2rem;
}

.motivelle-repair-directions__header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  gap: 2rem;
  align-items: end;
}

.motivelle-repair-directions__header > div:first-child > p {
  margin: 0 0 0.75rem;
  color: var(--color-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.motivelle-repair-directions__header h2 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.motivelle-repair-directions__header .rte {
  color: rgb(var(--color-foreground-rgb) / 0.7);
}

.motivelle-repair-directions__disclaimer {
  margin: 0;
  padding-block: 0.75rem;
  border-block: 1px solid rgb(var(--color-foreground-rgb) / 0.16);
  color: rgb(var(--color-foreground-rgb) / 0.66);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.motivelle-repair-directions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.motivelle-repair-direction__card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
  border-radius: 2px;
  background: var(--motivelle-deep-steel);
  color: #f4f6f7;
  text-decoration: none;
}

.motivelle-repair-direction__card:is(a):hover {
  border-color: var(--motivelle-inspection-amber);
  text-decoration: none;
}

.motivelle-repair-direction__card:is(a):focus-visible {
  outline: 3px solid var(--motivelle-inspection-amber);
  outline-offset: 3px;
}

.motivelle-repair-direction__visual {
  position: relative;
  aspect-ratio: 500 / 260;
  overflow: hidden;
  background: linear-gradient(145deg, #263c48, #101d24);
}

.motivelle-repair-direction__visual-label {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  max-width: calc(100% - 1.5rem);
  padding: 0.5rem 0.625rem;
  border-left: 2px solid var(--motivelle-inspection-amber);
  background: rgb(13 23 29 / 0.82);
  color: #f4f6f7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.motivelle-repair-direction__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.motivelle-repair-direction__body {
  padding: 1.5rem;
}

.motivelle-repair-direction__body > span {
  color: var(--motivelle-inspection-amber);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.motivelle-repair-direction__body h3 {
  margin: 0.625rem 0 0.5rem;
  color: inherit;
  font-size: 1.5rem;
}

.motivelle-repair-direction__body p {
  margin: 0;
  color: rgb(244 246 247 / 0.72);
  font-size: 0.8125rem;
}

@media screen and (max-width: 989px) {
  .motivelle-repair-directions__header,
  .motivelle-repair-directions__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.color-scheme-5 {
  --color-background: #06121c;
  --color-background-rgb: 6 18 28;
  --color-foreground: #dce3e8;
  --color-foreground-rgb: 220 227 232;
  --color-foreground-heading: #ffffff;
  --color-primary: #1b86f8;
  --color-primary-rgb: 27 134 248;
  --color-primary-hover: #4da3ff;
  --color-border: #4d5f6b;
  --color-primary-button-background: #0068e0;
  --color-primary-button-text: #ffffff;
  --color-primary-button-border: #0068e0;
  --color-primary-button-hover-background: #0057bd;
  --color-primary-button-hover-text: #ffffff;
  --color-primary-button-hover-border: #0057bd;
  --color-secondary-button-background: rgba(0, 0, 0, 0);
  --color-secondary-button-text: #f4f6f7;
  --color-secondary-button-border: #6b7f92;
  --color-secondary-button-hover-background: #253640;
  --color-secondary-button-hover-text: #ffffff;
  --color-secondary-button-hover-border: #f4f6f7;
  --color-input-background: #18262f;
  --color-input-text: #f4f6f7;
  --color-input-border: #6e818d;
  --color-input-hover-background: #1e303b;
  color: var(--color-foreground);
  background-color: var(--color-background);
}
.motivelle-technical-hero__search input {
  background: #f4f6f7;
  color: #101820;
  border-color: #6e818d;
}

.motivelle-technical-hero__search input::placeholder {
  color: #52636d;
}


/* Motivelle: footer decorative layer -- base colors now come from
   sections/footer-group.json (background_color + per-block text_color/
   heading_text_color/input_*/icon_color), not from here. Scoped under
   <footer> so nothing bleeds into .menu__heading/.menu__item elsewhere
   (shared accordion classes used by e.g. product-info accordions). */

footer .menu__heading,
footer .footer-content h2 {
  color: #1b86f8;
  margin-bottom: 6px;
}




footer .menu__heading .menu__heading__toggle {
  display: none;
}

footer nav.details-content {
  margin-top: 16px;
}

footer .menu__item {
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.3;
}

footer .menu__item:first-child {
  padding-top: 0;
}

footer .menu__item a {
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.15s ease;
}

footer .menu__item a:hover {
  color: #1b86f8 !important;
  padding-left: 4px;
}

footer .footer-content .rte p {
  opacity: 0.75;
  font-size: 14px;
}

footer .email-signup__input-group {
  margin-top: 16px;
}

footer .footer-utilities {
  border-top: 1px solid rgb(220 227 232 / 0.14);
}

footer .footer-utilities a:hover {
  color: #1b86f8 !important;
}

/* Motivelle: Horizon's own .utilities--blocks-1 rule left-aligns a single
   utility block (e.g. copyright alone, no policy links or social icons)
   to the section's start edge. That reads as pinned to the far-left corner
   directly under the now-centered .footer-content cluster above it (see the
   footer-column centering fix in this same file), instead of sitting under
   the same visual center. Center it too so the whole footer reads as one
   consistent block, not two different alignment systems stacked. */
footer .utilities--blocks-1 {
  justify-content: center !important;
}

footer .utilities--blocks-1 > * {
  justify-self: center !important;
  text-align: center !important;
}


/* Motivelle: remove the header row's own outer section padding -- Horizon's
   generic .section utility class adds top/bottom padding independent of
   section_height (which only sets the row's min-height), creating a visible
   white band between the dark announcement bar and the header, and between
   the header and page content. */
.header-section .header__row--top.section {
  padding-block: 0 !important;
}


/* Motivelle: Horizon's constrain-to-viewport gallery targets ~100vh minus
   the header, which reads as "the photo fills the whole screen" for a small
   hardware part photographed on a plain white background. Cap the main PDP
   image to a calmer share of the viewport (parts-catalog PDPs -- FCP Euro,
   ECS Tuning -- typically run the main image around 55-65% of viewport
   height), while keeping the existing 500px floor for short viewports. */
.product-media-container.constrain-height {
  --constrained-height: min(65vh, max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)))) !important;
}

/* Motivelle: size footer columns to their own content instead of
   stretching every column to an equal fraction of the full page width.
   Reference: shopify.com's own footer -- a short column and a long column
   sit at their natural widths with a fixed gap, not forced to match.
   justify-content: center (not flex-start) keeps the natural-width cluster
   from reading as pinned to the left edge on this theme's wide page-width
   setting -- flex-start left the whole cluster hugging the section's start
   edge with all of the leftover space dumped on the right, instead of
   splitting it evenly on both sides.
   Desktop only: below 990px Horizon's own single column (mobile) and
   2-column (tablet) footer layout applies; forcing 4 columns there squeezed
   a 390px footer into 54px columns with text broken letter by letter. */
@media screen and (min-width: 990px) {
  footer .footer-content {
    grid-template-columns: repeat(var(--grid-columns), minmax(0, max-content)) !important;
    justify-content: center !important;
    align-items: start !important;
    column-gap: clamp(48px, 8vw, 120px) !important;
    row-gap: 28px !important;
  }
}


/* Motivelle: PDP spec list (OE Part Number / Specification / Qty Required /
   Engine Platform etc.) is a flat <dl><dt><dd>...</dl> inside each
   product's own description HTML, rendered by blocks/motivelle-product-description
   in the Description accordion row (it used to be the buy-box text_aEtTtq
   block, removed in the PDP rebuild). Lay label/value out side by side
   instead of the browser's default stacked, indented rendering. */
.motivelle-product-description .rte dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 8px;
  margin: 16px 0 0;
}

.motivelle-product-description .rte dt,
.motivelle-product-description .rte dd {
  margin: 0;
}

.motivelle-product-description .rte dt {
  white-space: nowrap;
}

.motivelle-product-description .rte dd {
  margin: 0;
  overflow-wrap: anywhere;
}


/* ===== 2026-10-30 home & card polish ===== */
:root {
  --mv-blue: #0068e0;
  --mv-blue-hover: #0057bd;
  --mv-blue-bright: #1b86f8;
  --mv-blue-line: #1eb5ff;
}

/* Hero: only eyebrow, heading, one-line subtitle, search and the three entry cards; generous air. */
.motivelle-technical-hero__copy {
  padding-block: 96px;
}

.motivelle-technical-hero__eyebrow {
  margin: 0;
}

.motivelle-technical-hero h1 {
  max-width: none;
  margin: 32px 0 0;
  font-size: 3rem;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.motivelle-technical-hero__body {
  margin-top: 32px;
  font-size: 1.125rem;
}

.motivelle-technical-hero__body p {
  margin: 0;
}

.motivelle-technical-hero__actions,
.motivelle-technical-hero__lines {
  margin-top: 32px;
}

.motivelle-technical-hero .visually-hidden:not(:focus, :active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Entry cards: 3px blue left line; hover lifts the background and brightens the line. */
.motivelle-technical-hero__lines a {
  border-left: 3px solid var(--mv-blue);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.motivelle-technical-hero__lines a:hover {
  border-left-color: var(--mv-blue-line);
  background-color: rgb(255 255 255 / 0.07);
}

@media screen and (max-width: 749px) {
  .motivelle-technical-hero__copy {
    padding-block: 64px;
  }

  .motivelle-technical-hero h1 {
    font-size: 2.125rem;
  }
}

/* Vehicle selector: one-line heading; the long fitment text is folded into "How fitment works". */
.motivelle-selector .motivelle-selector__heading {
  max-width: none;
  font-size: clamp(1.375rem, 2.2vw, 2rem);
}

.motivelle-selector__details {
  margin-top: 16px;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.24);
  border-left: 3px solid var(--mv-blue);
}

.motivelle-selector__details summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
}

.motivelle-selector__details .rte {
  padding: 0 16px 16px;
  color: rgb(var(--color-foreground-rgb) / 0.8);
}

.motivelle-selector__details .rte p {
  margin: 0;
}

/* Section headings: short blue bar above the title, one grey subtitle line, blue "View all" with an arrow. */
.section-resource-list__header h2::before {
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 14px;
  background: var(--mv-blue);
  content: '';
}

.section-resource-list__subtitle {
  max-width: 62ch;
  margin: -12px 0 0;
  color: rgb(var(--color-foreground-rgb) / 0.72);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.section-resource-list__header :is(a, a.button) {
  padding: 0;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--mv-blue) !important;
  font-weight: 600;
  text-decoration: none;
}

.section-resource-list__header :is(a, a.button)::after {
  content: ' \2192';
}

.section-resource-list__header :is(a, a.button):hover {
  color: var(--mv-blue-hover) !important;
}

/* Footer: blue top line, blue hovers. */
[id*='footer_m9NzUG'] {
  border-top: 3px solid var(--mv-blue-line);
}

[id*='footer_'] .social-icons__icon-wrapper:hover,
[id*='footer_'] .social-icons__icon-wrapper:hover .social-icons__icon {
  color: var(--mv-blue-bright);
}


/* ===== 2026-10-30b: tighter mobile spacing under the hero; "How fitment works" as a small text disclosure ===== */
@media screen and (max-width: 749px) {
  .motivelle-technical-hero__copy {
    padding-block-end: 40px;
  }
}

.motivelle-selector__details {
  margin-top: 12px;
  border: 0;
}

.motivelle-selector__details summary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  color: var(--mv-blue-bright);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.motivelle-selector__details summary::-webkit-details-marker {
  display: none;
}

.motivelle-selector__details summary::after {
  content: '+';
  display: inline-block;
  width: 1ch;
  text-align: center;
  text-decoration: none;
}

.motivelle-selector__details[open] summary::after {
  content: '\2212';
}

.motivelle-selector__details summary:focus-visible {
  outline: 3px solid var(--mv-blue-line);
  outline-offset: 3px;
}

.motivelle-selector__details[open] .rte {
  max-width: 62ch;
  margin-top: 12px;
  padding: 12px 16px;
  border-left: 3px solid var(--mv-blue);
  background: rgb(255 255 255 / 0.04);
}