/* Product pages (AllConnect: Smart RV) on the project-page template (sa-case.css).
   Only the few blocks the project pages do not have: the comparison form, the aftermarket
   action and the brand row. Everything else is the project template as it is. */

/* comparison form: text left, form right, inside the section like any other block */
html .sa-c .sa-ac-gate { padding-top: 0; border-top: 0; }
html .sa-c .sa-ac-gate .sa-c-h2 { margin-bottom: 16px; }
html .sa-c .sa-ac-gate .sa-c-lead { margin: 0; max-width: 56ch; }

/* aftermarket: owner line and the one action under it */
html .sa-c .sa-ac-after-owner { max-width: 72ch; }
.sa-c-aft-go { margin: 24px 0 0; }

/* brand row under the awards */
html .sa-c .sa-c-brands-k { margin-top: 48px; }
html .sa-c .sa-ac-brand-list { margin-top: 16px; }

/* the three units on white, no frame */
.sa-c-units { margin: 0; }
.sa-c-units img { display: block; width: 100%; height: auto; }

/* AllDelivery only (Vanessa, 9 Nov 2026): "Route optimization" stays on the first line of the title.
   The text column gets 56 px more and the film gives them up; the title size is unchanged. */
@media (min-width: 901px) {
  html:has(link[rel="canonical"][href$="/alldelivery-route-optimization"]) .sa-c-hero.has-film .sa-c-hero-in { grid-template-columns: minmax(320px, 496px) minmax(0, 1fr); }
}

/* AllDelivery: the live 3D map (action bottom left, clear of the step's label) in "How it works" reads as something to open, not a picture.
   Sharp still of step 1, a chip that names it, and one clear action; the picture leans in on hover. */
.sa-3d.is-step .sa-3d-go { overflow: hidden; background: #F4F5F2; }
.sa-3d.is-step .sa-3d-go img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.sa-3d.is-step .sa-3d-go:hover img, .sa-3d.is-step .sa-3d-go:focus-visible img { transform: scale(1.04); }
.sa-3d.is-step .sa-3d-chip { position: absolute; left: 16px; top: 16px; padding: 8px 12px; background: #FFFFFF; color: #101B37; font-size: 13px; font-weight: 600; font-style: normal; line-height: 1; box-shadow: 0 6px 18px rgba(16, 27, 55, .14); }
html .sa-c-how-media .sa-3d.is-step .sa-3d-go span { left: 16px; bottom: 16px; top: auto; transform: none; gap: 12px; padding: 16px 24px; font-size: 16px; box-shadow: 0 14px 34px rgba(16, 27, 55, .35); transition: background-color .2s ease, transform .2s ease; }
html .sa-c-how-media .sa-3d.is-step .sa-3d-go span svg { width: 14px; height: 14px; flex: none; }
html .sa-c-how-media .sa-3d.is-step .sa-3d-go:hover span { background: #2F579A; }
.sa-3d.is-step .sa-3d-go:focus-visible { outline: 2px solid #4E72B7; outline-offset: 3px; }
@media (max-width: 600px) { html .sa-c-how-media .sa-3d.is-step .sa-3d-go span { left: 12px; bottom: 12px; padding: 12px 16px; font-size: 14px; } .sa-3d.is-step .sa-3d-chip { left: 12px; top: 12px; font-size: 12px; padding: 6px 10px; } }