/* Elementor adapter — Commerce: Territory & Commissions (21514) 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. */
.e-con.velp-cb-hero-grid,
.e-con.velp-cb-split-grid,
.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; }

/* 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-split-copy .elementor-widget-text-editor:has(p) { font-size: 18px; line-height: 1.5; }
.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; }

/* 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; }

/* ==========================================================================
   Design-parity pass — client issues T1–T3 (2026-08-07)
   Figma: "Velocity by Medshift (3)/Commerce — Territory Mapping &
   Commissions@2x.png". Page-scoped file, so bare .vel-* overrides are safe.
   ========================================================================== */

/* T1 — eyebrow orange measured #F8A581 (site token #d98e63); hero sits on
   white; chips are #EAF3FB. */
.vel-eyebrow--orange { color: #f8a581; }
.e-con.velp-cb-hero { background: #fff; }
.vel-pill { background: #eaf3fb; }

/* Hero/split columns are an even 491/58/491 split in the design — the base
   file already says so; nothing to patch here. */

/* T3 — both lower bands carry the #F3F7FC tint in the design. */
.e-con.velp-cb-split--soft { background: #f3f7fc; }
.e-con.vel-features { background: #f3f7fc; }

/* T3 — icon badges are pale blue with navy glyphs (not peach), and the cards
   carry a resting shadow. */
.vel-card-icon.vel-accent-orange { background: #d7efff; color: var(--vel-navy); }
.vel-features .vel-card { box-shadow: 0 6px 18px rgba(18, 32, 53, 0.05); }

/* T2 — checklist ticks are #F8A581; labels 16px regular ink-70 on a 36px pitch. */
.velp-cb-checklist li { font-size: 16px; font-weight: 400; color: #41546b; }
.velp-cb-checklist li::before {
	width: 19px;
	height: 19px;
	top: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8a581' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 6.5'/%3E%3C/svg%3E");
}

/* T3/S6 — CTA decoration: the canonical deco spec lives in commerce-b.css
   (11px bars, 10px gap, heights 50/100/80/120, baseline 40px). No page
   override — the bars must be identical across every CTA card. */

/* ==========================================================================
   2026-08-10 design-match pass — real product visuals
   The hero territory-map dashboard and the order-routing card are photographic
   product visuals in the Figma frame, not CSS constructs; both are now image
   widgets fed by crops of the @3x export, so the hand-built .velp-cb-terr-*
   and .velp-cb-order-* mocks no longer render on this page.
   ========================================================================== */

/* Each crop carries the card's own drop shadow as transparent bleed, so the
   image has to be scaled UP past the column and pulled left by that bleed for
   the card itself to land on the column edges. Percentages (not px) so the
   relationship survives every breakpoint.
     hero:  550px crop / 491px card, 29px left bleed
     order: 536px crop / 490px card, 21px left bleed */
.velp-cb-shot img {
	display: block;
	height: auto;
	max-width: none;
}

.velp-cb-shot--hero img { width: 112.02%; margin-left: -5.91%; }
.velp-cb-shot--order img { width: 109.39%; margin-left: -4.29%; }

/* T3 — the capabilities band shares the split band's 88px rhythm. */
.e-con.vel-features { padding: 88px 0; }

/* Figma CTA card: 237px tall — 70px padding around a 97px copy block. The
   Elementor text container's default 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; }