/* Elementor DOM adapter — Order Management (21512) only. */

/* Grid classes now on containers must beat the .e-con flex default
   (vel-cards-3 is covered by the shared adapter). */
.e-con.velp-ca-hero-grid,
.e-con.velp-ca-steps,
.e-con.vel-stats-grid,
.e-con.velp-ca-cta-card { display: grid; }

/* Row-flex hero actions (original: flex row + wrap). */
.e-con.velp-ca-actions { flex-direction: row; }

/* The pipeline mock used to claim its intrinsic min-content width, which left
   the h1 only ~365px — at the design's 64px h1 that breaks "management"
   mid-word. The design gives the two hero columns roughly equal width and
   lets the mock's inner labels wrap, so let the grid ratio decide. The source
   nodes' white-space:nowrap is what made the mock unshrinkable; the design
   wraps "Customer Service Orders" over two lines. */
.velp-ca-pipeline-sources .velp-ca-node { white-space: normal; }

/* Letting the sources shrink was not enough: the row's non-shrinking parts
   (hub 148 + Delivered 92 + connectors 46/32 + three 12px gaps) still exceeded
   the mock card's ~454px inner width, so the Delivered node was cut off at the
   card's right edge. The design's mock is the same width with visibly narrower
   fixed parts — trim them rather than widen the card. */
.velp-ca-pipeline-row { gap: 8px; }
.velp-ca-pipeline-row .velp-ca-hub { min-width: 132px; }
.velp-ca-pipeline-row .velp-ca-done { min-width: 68px; }
.velp-ca-pipeline-row .velp-ca-merge { flex: 0 0 34px; }
.velp-ca-pipeline-row .velp-ca-merge svg { width: 34px; }
.velp-ca-pipeline-row .velp-ca-link { flex: 0 0 22px; }
.velp-ca-pipeline-row .velp-ca-link svg { width: 22px; }

/* keydesign-framework forces text-editor <p> font metrics to inherit, and
   Elementor suppresses a trailing paragraph's margin-bottom — restore both
   on the widget wrappers (classed root <p>s carry their class there). */
.e-con .elementor-widget.velp-ca-hero-sub { margin-bottom: 24px; }
.elementor-widget-text-editor.velp-ca-hero-sub { font-size: 18px; line-height: 1.5; }
.velp-ca-step .elementor-widget-text-editor:has(p) { font-size: 14px; line-height: 1.6; }
/* Stat labels (bare <span>) inherited line-height:normal from body in the
   original flow; keydesign's text-editor wrapper 1.75 makes each stat taller. */
.vel-stat .elementor-widget-text-editor { line-height: normal; }
.velp-ca-cta-card .elementor-widget-text-editor:has(p) { font-size: 16px; line-height: 1.62; color: var(--vel-blue-light, #d7efff); }

/* Positioned boxes: the CTA card clips its vel-w-abs deco overlay, and the
   step's ::after connector arrow anchors to the step container. Elementor's
   per-element post CSS forces overflow:visible at 0-3-0, so the clips need
   a 0-3-0 selector (adapter loads later = wins). */
.e-con.velp-ca-cta-card { position: relative; }
.e-con.velp-ca-cta-card.velp-ca-cta-card { overflow: hidden; }
.e-con.velp-ca-hero.velp-ca-hero { overflow: hidden; }
.e-con.velp-ca-step { position: relative; }

/* Sibling margin collapse is lost between widget wrappers — zero/reduce the
   facing margins so gaps equal the original collapsed values. */
.velp-ca-hero-title { margin-top: 0; }          /* eyebrow mb14 vs h1 mt12 collapsed to 14 */
.e-con.velp-ca-steps { margin-top: 32px; }      /* h2 mb14 + 32 = original collapsed 46 */

/* CTA buttons: original align-items:stretch equalized the stacked anchors;
   anchors are now inside full-width widget wrappers, so stretch the anchor.
   Mirror the original breakpoints (≤900 shrink+center, ≤560 full width). */
.e-con.velp-ca-cta-actions .vel-btn { width: 100%; }

@media (max-width: 900px) {
	.e-con.velp-ca-cta-actions .vel-btn { width: auto; }
}

@media (max-width: 560px) {
	/* align-items:center shrinks the widget wrappers, so widen them too */
	.e-con.velp-ca-cta-actions > .elementor-widget { width: 100%; }
	.e-con.velp-ca-cta-actions .vel-btn { width: 100%; }
}