/* Elementor adapter — Commerce: Integrations & Pricing (21515) only.
   Patches where the Elementor container DOM differs from the PHP markup
   commerce-b.css expected. Loaded last for this page. */

/* Grid sections: the class must beat the .e-con flex default regardless
   of stylesheet load order. Columns/gaps come from commerce-b.css
   (its 900px media rules only change grid-template-columns, so no
   breakpoint mirror is needed here). */
.e-con.velp-cb-hero-grid,
.e-con.velp-cb-plan,
.e-con.velp-cb-cta-card { display: grid; }

/* Row-flex: .e-con defaults to flex-direction column; restore the row the
   original CSS assumed. No breakpoint mirror needed — the original never
   stacks it (flex-wrap handles narrow widths). */
.e-con.velp-cb-hero-actions { flex-direction: row; }

/* The orbit mock sizes itself via aspect-ratio; inside a flex .e-con the
   widget wrapper fails to pick up that height (stacked mobile layout
   collapses to ~48px and the next section overlaps). Block flow resolves
   it and is layout-identical here. */
.e-con.velp-cb-hero-visual { display: block; }

/* keydesign-framework forces text-editor <p> to inherit font metrics, and
   Elementor's `.e-con .elementor-widget.elementor-widget{margin-block-end:0}`
   (0-3-0) eats paragraph class margin-bottoms — restore both on the widget
   wrapper at >=0-3-0 (guide item 6). */
.e-con.velp-cb-cta-card .elementor-widget-text-editor:has(p) { font-size: 17px; line-height: 1.55; }
.e-con .elementor-widget.velp-cb-hero-sub { margin-bottom: 27px; line-height: 1.5; }
.e-con .elementor-widget.vel-section-sub { margin-bottom: 44px; line-height: 1.6; }
/* The group-label <p> keeps its own margin-top inside the widget while the
   class-carrying wrapper adds another — and the original relied on margin
   collapse with the previous element (h2 mb 14 / plan mb 20), which flex
   containers don't do. Zero the inner p and set the wrapper top so the
   visual gap totals the original 30px. */
.vel-main .elementor-widget-text-editor p.velp-cb-plan-group { margin-top: 0; }
.e-con .elementor-widget.velp-cb-plan-group { margin-top: 32px; margin-bottom: 12px; }
.e-con .elementor-widget.velp-cb-plan-group--standalone { margin-top: 32px; }
.e-con .elementor-widget.velp-cb-plan-eyebrow { margin-bottom: 2px; }
.e-con .elementor-widget.velp-cb-plan-note { line-height: 1.5; }

/* keydesign also sets line-height 1.75 on every text-editor wrapper, which
   inflates non-paragraph content (pills, chips, headings); restore normal
   inheritance for widgets that hold no <p>. */
.vel-main .elementor-widget-text-editor:not(:has(p)) { line-height: inherit; }

/* ==========================================================================
   2026-08-07 — real vendor artwork (design audit). New class names so the
   orbit/chip rules still in commerce-b.css do not apply to this markup.
   ========================================================================== */

/* --- hero orbit: 8 vendor tiles on one solid ring, Velocity mark at centre.
   Ring radius is 44.52% of the box (187px of the design's 420px frame); each
   tile's left/top comes from its measured angle and is written inline. --- */
.velp-cb-orb {
	position: relative;
	width: 100%;
	/* Figma ring is 392px across in a 491px column (79.8%); at the site's 511px
	   column that is 408px, which this box's 90.2% ring inset resolves from. */
	max-width: 452px;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
}

.velp-cb-orb-ring {
	position: absolute;
	inset: 5.6%;
	border: 1px solid #ececec;
	border-radius: 50%;
}

.velp-cb-orb-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 71.5%;
	height: 71.5%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, #dce3fe 0%, #e4eaff 44%, #ebf1ff 62%, #f7f9ff 66%, #f8faff 96%, rgba(255, 255, 255, 0) 100%);
}

.velp-cb-orb-core,
.velp-cb-orb-tile {
	position: absolute;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
}

.velp-cb-orb-core {
	top: 50%;
	left: 50%;
	width: 86px;
	height: 86px;
	border-radius: 24px;
	box-shadow: 0 18px 38px -18px rgba(18, 32, 53, 0.28);
	z-index: 3;
}

.velp-cb-orb-tile {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	box-shadow: 0 10px 22px -10px rgba(18, 32, 53, 0.22);
	z-index: 2;
}

.velp-cb-orb img { display: block; max-width: 100%; max-height: 100%; }
.velp-cb-orb-core img { width: 49px; height: 49px; border-radius: 10px; }

@media (max-width: 560px) {
	.velp-cb-orb { max-width: 320px; }
	.velp-cb-orb-tile { width: 38px; height: 38px; border-radius: 11px; }
	.velp-cb-orb-core { width: 66px; height: 66px; border-radius: 18px; }
	.velp-cb-orb-core img { width: 38px; height: 38px; }
}

/* --- integrations grid: 15 logo tiles (14 vendors + "More") --- */
.velp-cb-int-logos {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 22px;
	max-width: 1040px;
	margin: 0 auto;
}

.velp-cb-int-logos span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 87px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #f3f7fc;
}

.velp-cb-int-logos img { display: block; max-width: 100%; height: auto; }

.velp-cb-int-logos .is-more {
	font-size: 15px;
	font-weight: 700;
	color: var(--vel-slate-light);
}

@media (max-width: 900px) {
	.velp-cb-int-logos { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
	.velp-cb-int-logos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.velp-cb-int-logos span { min-height: 66px; padding: 12px; }
}

/* ==========================================================================
   2026-08-10 design-match pass
   ========================================================================== */

/* The plan grid's own type is set in commerce-b.css; keydesign forces every
   text-editor <p> to inherit, so the note/name/price wrappers need the size
   re-asserted at widget specificity. */
.e-con.velp-cb-plan-head .elementor-widget.velp-cb-plan-note { font-size: 13.5px; }

/* The three plan cards stack 20px apart in the design (commerce-b sets the
   card's own margin-bottom); the flex .e-con eats it. */
.e-con.velp-cb-plan { margin-bottom: 20px; }

/* Figma: the standalone plan's chip/eyebrow/name block, then Custom at 30px. */
.e-con .elementor-widget.velp-cb-plan-eyebrow { font-size: 20px; font-weight: 600; color: var(--vel-navy); }

/* Figma CTA card: 70px padding around the copy block; the Elementor text
   container's own gap replaces the h2 margin. */
.e-con.velp-cb-cta-card { padding: 64px 40px; }
.e-con.velp-cb-cta-text { gap: 12px; }
.velp-cb-cta-card h2 { margin-bottom: 0; }

/* This page's CTA section renders ~26px more trailing space than 21514's
   does from an identical container tree; trimmed so both CTA bands measure
   the design's 413px. Re-check if the section markup ever changes. */
.e-con.velp-cb-cta { padding-bottom: 62px; }