/* ============================================================================
   EUX Blocks — Example Integration Card
   ----------------------------------------------------------------------------
   Card frame: white bg, border, padding, hover lift. The content is split
   into a header (icon + heading + paragraph) and a mockup illustration
   below. Mockup HTML/animations are baked into the preset on the PHP side.

   All flex children inside the mockup containers explicitly declare their
   sizing (flex: 0 0 auto / specific flex values) so Salient's blanket flex
   rules don't stretch them — same lesson learnt with the API mockup.
   ============================================================================ */

/* ==========================================================================
   Card frame
   --------------------------------------------------------------------------
   Layout-critical properties use !important to defend against Salient's
   high-specificity column/row selectors. The card uses flex column with a
   gap to space the header from the mockup frame; without the !important
   defence, Salient can flip display to block and stack things incorrectly.
   ========================================================================== */
.eux-block--example-card {
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: var(--eux-r-lg);
	padding: 24px;
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	transition: border-color var(--eux-dur-base) var(--eux-ease-out),
	            transform     var(--eux-dur-base) var(--eux-ease-out),
	            box-shadow    var(--eux-dur-base) var(--eux-ease-out);
}
.eux-block--example-card:hover {
	border-color: var(--eux-ink-200);
	transform: translateY(-2px);
	box-shadow: var(--eux-shadow-2);
}

/* --------------------------------------------------------------------------
   Editor canvas: kill wrapper transform/transition.
   --------------------------------------------------------------------------
   Gutenberg animates block reordering via useMovingAnimation, which sets an
   inline transform: translate3d(...) on this same wrapper element. Our CSS
   `transition: transform` would intercept that inline change and re-time it,
   fighting Framer Motion. The hover translateY would collide with the
   matrix transform mid-drag. Net effect: blocks snap into place with no
   smooth slide.

   We strip the transform/transition only inside the editor. The frontend
   keeps the hover-lift unchanged. Matches the editor-override pattern from
   salient-coexistence.md (Defense 9).
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .eux-block--example-card,
.editor-styles-wrapper .eux-block--example-card:hover {
	transition: none;
	transform: none;
}

/* ==========================================================================
   Header: icon box + (heading + paragraph) — must lay out as a row, icon
   left, text right. !important defends against Salient block-level resets.

   v0.17.0 note — TWO structures in play:
     - Legacy: <header.eux-example__hdr> wraps icon + .eux-example__hdr-text;
       .eux-example__mock sits as a separate sibling below.
     - New (v0.17.0+): <article> directly contains .eux-example__ic +
       .eux-example__body (where .eux-example__body holds heading +
       paragraph + eux/example-mockup sub-block in flat order).
   ========================================================================== */

/* --- LEGACY layout (pre-v0.17.0) --- */
.eux-block--example-card .eux-example__hdr {
	display: flex !important;
	flex-direction: row !important;
	gap: 18px !important;
	align-items: flex-start !important;
}
.eux-block--example-card .eux-example__hdr-text {
	flex: 1 1 auto !important;
	min-width: 0;
}

/* --- NEW layout (v0.17.0+) ---
   Goal: visually match v0.16.x, while letting editors reorder InnerBlocks
   in the list view and have those changes actually take effect on the
   canvas. Earlier versions (v0.17.0–v0.17.10) used `display: contents`
   on the body div plus explicit `grid-row` assignments on each child by
   class — which meant heading was always row 1, paragraph row 3, mockup
   row 5, regardless of the underlying DOM order. Reordering in the list
   view changed nothing visually. v0.17.11 returns to a simple structure
   where DOM order = visual order.

   Structure:
     - Article is a 2-col grid: 48px icon column, 1fr text column.
     - Icon sits at col 1, row 1, top-aligned.
     - Body sits at col 2, row 1 — single grid item, flex column inside.
     - Heading / paragraph / mockup stack inside the body in DOM order
       via flexbox; reorder via Gutenberg arrows just works.
     - Mockup uses a negative left margin to escape the col 2 constraint
       and extend back to the article's content edge, restoring the
       v0.16.x full-card-width visual.

   Trade-off accepted: if an editor moves the mockup to be the FIRST
   block inside the body (above the heading), the mockup's negative left
   margin will overlap with the icon at top-left. This is an unusual case
   the design doesn't anticipate; the editor will see the issue and undo.
   The previous "lock everything" approach removed this edge case at the
   cost of removing all reordering, which was worse UX.
   ============================================================== */
.eux-block--example-card.eux-example {
	display: grid !important;
	grid-template-columns: 48px 1fr;
	/* `gap` shorthand on the base .eux-block--example-card rule (above) is
	   `gap: 20px !important;`. We override row-gap to 0 because the body
	   is a single grid item (only one row), and column-gap to 18px for
	   icon-to-text spacing. Both longhands carry !important to beat the
	   inherited shorthand. */
	gap:        18px !important;
	row-gap:    0    !important;
	column-gap: 18px !important;
}

.eux-block--example-card.eux-example > .eux-example__ic {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	align-self: start;
}

/* Body — single grid item in col 2. Block flow inside so Gutenberg's
   block-move animation works correctly when reordering InnerBlocks via
   the list view arrows (custom flex column wrappers break that animation —
   see capability-card style.css for the same fix). Adjacent-sibling margin
   reproduces the 6px gap that the flex version used. */
.eux-block--example-card .eux-example__body {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}
.eux-block--example-card .eux-example__body > * + * {
	margin-top: 6px;
}

/* Mockup extends back to the article's content edge (full width).
   The negative left margin equals the icon column (48px) plus the
   column-gap (18px) = 66px. margin-top is 12px (was 6px in 0.17.11 when
   the body was flex + gap:6px; with block flow, the mockup carries the
   full 12px paragraph→mockup spacing on its own). */
.eux-block--example-card .eux-example__body > .eux-block--example-mockup {
	margin-left: -66px;
	margin-top: 12px;
}

.eux-block--example-card .wp-block-heading.eux-example__name,
.eux-block--example-card .eux-example__name {
	font-family: var(--eux-font-display);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: -0.01em;
	/* margin: 0 — spacing between this heading and the paragraph below
	   is now expressed via the grid's explicit 6px spacer row (row 2),
	   not via margin-bottom here. Removing the margin avoids doubling
	   when the grid spacer is also present. */
	margin: 0;
	color: var(--eux-black);
	line-height: 1.25;
}
.eux-block--example-card p,
.eux-block--example-card .eux-example__line {
	font-family: var(--eux-font-body);
	font-size: 13px;
	line-height: 1.55;
	color: var(--eux-ink-700);
	margin: 0;
}

/* ==========================================================================
   Icon box — colour tinted per preset, holds either an inline SVG or a
   monogram (text-based logo).
   ========================================================================== */
.eux-block .eux-example__ic {
	width: 48px !important;
	height: 48px !important;
	border-radius: 10px;
	background: var(--eux-woo-50);
	color: var(--eux-woo-purple);
	display: grid !important;
	place-items: center !important;
	flex-shrink: 0 !important;
	flex: 0 0 48px !important;
	font-family: var(--eux-font-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.04em;
}
.eux-block .eux-example__ic svg     { width: 26px; height: 26px; display: block; }
.eux-block .eux-example__ic--mbc svg { width: 24px; height: 24px; }

.eux-block .eux-example__ic--mbc    { background: var(--eux-ink-50);            color: #006dce; }
.eux-block .eux-example__ic--wedd   { background: rgba(217, 119,   6, 0.10);    color: #b8770a; }
.eux-block .eux-example__ic--sf     { background: rgba(  0, 161, 224, 0.10);    color: #009ddc; }
.eux-block .eux-example__ic--whse   { background: rgba( 31, 138,  91, 0.10);    color: #1f8a5b; }
.eux-block .eux-example__ic--stripe { background: rgba( 99,  91, 255, 0.10);    color: #635BFF; }
.eux-block .eux-example__ic--bron   { background: rgba( 14, 165, 233, 0.10);    color: #0EA5E9; }

/* Monogram styling — used when the icon is text rather than an SVG */
.eux-block .eux-example__monogram {
	font-family: var(--eux-font-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}
.eux-block .eux-example__ic--whse .eux-example__monogram { font-size: 12px; letter-spacing: 0.04em; }
.eux-block .eux-example__monogram--italic { font-style: italic; font-size: 22px; }
.eux-block .eux-example__monogram b { font-weight: 800; }

/* ==========================================================================
   Mockup frame — common to all six presets
   --------------------------------------------------------------------------
   position: relative is critical: every mockup inside positions absolutely
   against this frame. Salient can override single-class rules so we use
   !important to lock the geometry. Frame is 180px tall (the design used
   156px but Salient inherits a taller body line-height (~1.7 vs the
   design's ~1.4), making text content 15-25px taller than the design
   anticipated; the extra 24px gives content room without clipping).
   ========================================================================== */
.eux-block--example-card .eux-example__mock {
	position: relative !important;
	height: 180px !important;
	border-radius: 12px;
	background: #fafaf7;
	border: 1px solid var(--eux-ink-100);
	overflow: hidden !important;
	flex: 0 0 auto !important;
	/* Explicit line-height kills the inherit from Salient's body rules — all
	   internal sizing assumes ~1.4 line-height and breaks at 1.7. */
	line-height: 1.4 !important;
}
/* Pause animations until the card is in view.
   --------------------------------------------------------------------------
   The `.eux-reveal` class — which the frontend script observes and toggles
   `.eux-is-in-view` on — is on the article (.eux-block--example-card), not
   on the .eux-example__mock div. So the `:not()` check must run on the
   article, with the mock as a descendant. (Earlier versions checked the
   wrong element, which left animations permanently paused.) */
.eux-block--example-card:not(.eux-is-in-view) .eux-example__mock * {
	animation-play-state: paused;
}

/* ==========================================================================
   Bulletproof absolute positioning for every mockup's outer container.
   --------------------------------------------------------------------------
   Originally this used `inset: 14px` shorthand on each .eux-mk-* selector,
   but Salient's column-system rules can override individual top/right/bottom/
   left properties (longhand wins over shorthand at the same specificity).
   Setting the longhand explicitly with !important on a unified selector
   makes the absolute positioning impervious to theme interference. Each
   mockup still gets its own visual styles (display, flex-direction, etc.)
   in its own block below — only the position anchor is locked here.
   ========================================================================== */
.eux-block--example-card .eux-mk-mbc,
.eux-block--example-card .eux-mk-wedd,
.eux-block--example-card .eux-mk-sf,
.eux-block--example-card .eux-mk-whse,
.eux-block--example-card .eux-mk-stripe,
.eux-block--example-card .eux-mk-bron {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	bottom: 14px !important;
	left: 14px !important;
	margin: 0 !important;
}

/* Shared "brand row" across mockups — appears at the top of most presets.
   Critical: flex: 0 0 auto stops Salient stretching the brand row vertically
   inside its column-flex parent (the same defence as the API row fix in
   0.5.1). Without this, the brand row grows to fill space, compressing the
   rest of the mockup. */
.eux-block .eux-mk-brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--eux-font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eux-ink-700);
}

/* ==========================================================================
   1. MBC — bidirectional sync diagram
   ========================================================================== */
.eux-block .eux-mk-mbc {
	/* Position locked by .eux-block--example-card .eux-mk-mbc rule above. */
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr !important;
	gap: 0;
	align-items: stretch;
}
.eux-block .eux-mk-mbc__panel {
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 8px;
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-family: var(--eux-font-display);
}
.eux-block .eux-mk-mbc__hd {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--eux-ink-900);
	margin-bottom: 6px;
}
.eux-block .eux-mk-mbc__hd .eux-logo-woo {
	width: 16px; height: 16px;
	border-radius: 4px;
	background: var(--eux-woo-purple);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: -0.04em;
	flex-shrink: 0;
}
.eux-block .eux-mk-mbc__hd .eux-logo-ms { width: 14px; height: 14px; flex-shrink: 0; }
.eux-block .eux-mk-mbc__row {
	font-size: 10.5px;
	font-weight: 500;
	color: var(--eux-ink-700);
	background: var(--eux-ink-50);
	border-radius: 4px;
	padding: 4px 6px;
}
.eux-block .eux-mk-mbc__row[data-r="orders"] { background: rgba(124, 58, 165, 0.10); color: var(--eux-woo-purple); }
.eux-block .eux-mk-mbc__row[data-r="inv"]    { background: rgba(  0, 109, 206, 0.10); color: #006dce; }
.eux-block .eux-mk-mbc__row[data-r="price"]  { background: rgba( 31, 138,  91, 0.10); color: #1f8a5b; }
.eux-block .eux-mk-mbc__panel > .eux-mk-mbc__row + .eux-mk-mbc__row { margin-top: 3px; }

.eux-block .eux-mk-mbc__lines { width: 100%; height: 100%; }
.eux-block .eux-mk-mbc__lines line { stroke: var(--eux-ink-200); stroke-width: 1; stroke-dasharray: 2 3; }
.eux-block .eux-mk-mbc__lines .eux-dot { fill: var(--eux-woo-purple); opacity: 0; }
.eux-block .eux-mk-mbc__lines .eux-dot--ltr { animation: eux-mbcLtr 1.8s linear infinite; }
.eux-block .eux-mk-mbc__lines .eux-dot--rtl { animation: eux-mbcRtl 1.8s linear infinite; fill: #006dce; }
.eux-block .eux-mk-mbc__lines .eux-dot:nth-of-type(2) { animation-delay: -0.6s; }
.eux-block .eux-mk-mbc__lines .eux-dot:nth-of-type(3) { animation-delay: -1.2s; }
@keyframes eux-mbcLtr {
	0%   { transform: translateX(0);    opacity: 0; }
	15%  { opacity: 1; }
	85%  { opacity: 1; }
	100% { transform: translateX(80px); opacity: 0; }
}
@keyframes eux-mbcRtl {
	0%   { transform: translateX(80px); opacity: 0; }
	15%  { opacity: 1; }
	85%  { opacity: 1; }
	100% { transform: translateX(0);    opacity: 0; }
}

/* ==========================================================================
   2. Wedderburn POS
   ========================================================================== */
.eux-block .eux-mk-wedd {
	display: flex !important;
	flex-direction: column !important;
	gap: 7px;
	font-family: var(--eux-font-display);
}
.eux-block .eux-mk-wedd__brand .eux-name {
	font-family: var(--eux-font-display);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #b8770a;
	font-size: 11px;
}
.eux-block .eux-mk-wedd__brand .eux-sub  { font-weight: 500; letter-spacing: 0.06em; color: var(--eux-ink-700); font-size: 9px; }
.eux-block .eux-mk-wedd__brand .eux-led {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #b8770a;
	box-shadow: 0 0 6px #b8770a;
	margin-left: auto;
	animation: eux-weddLed 1.8s ease-in-out infinite;
}
@keyframes eux-weddLed { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.eux-block .eux-mk-wedd__scan {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 6px;
	padding: 5px 10px;
	font-size: 11px;
	color: var(--eux-ink-900);
	position: relative;
	overflow: hidden;
	flex: 0 0 auto;
}
.eux-block .eux-mk-wedd__scan::before {
	content: "";
	position: absolute;
	left: -40%; top: 0; bottom: 0;
	width: 30%;
	background: linear-gradient(90deg, transparent, rgba(184, 119, 10, 0.25), transparent);
	pointer-events: none;
	animation: eux-weddScan 2.4s ease-in-out infinite;
}
@keyframes eux-weddScan { 0% { left: -40%; } 100% { left: 110%; } }
.eux-block .eux-mk-wedd__scan .eux-sku   { font-weight: 600; letter-spacing: 0.02em; }
.eux-block .eux-mk-wedd__scan .eux-qty   { color: var(--eux-ink-700); font-size: 10px; }
.eux-block .eux-mk-wedd__scan .eux-price { margin-left: auto; font-weight: 600; color: #b8770a; }
.eux-block .eux-mk-wedd__sync {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	flex: 1 1 auto;
	min-height: 0;
}
.eux-block .eux-mk-wedd__cell {
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 6px;
	padding: 5px 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: relative;
	overflow: hidden;
}
.eux-block .eux-mk-wedd__cell .eux-lbl   { font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--eux-ink-700); }
.eux-block .eux-mk-wedd__cell .eux-v     { font-size: 13px; font-weight: 600; color: var(--eux-ink-900); letter-spacing: -0.01em; }
.eux-block .eux-mk-wedd__cell .eux-arrow {
	position: absolute;
	right: 6px; top: 6px;
	width: 10px; height: 10px;
	color: #1f8a5b;
	animation: eux-weddArrow 1.4s ease-in-out infinite;
}
.eux-block .eux-mk-wedd__cell:nth-child(2) .eux-arrow { animation-delay: -0.45s; }
.eux-block .eux-mk-wedd__cell:nth-child(3) .eux-arrow { animation-delay: -0.9s; }
@keyframes eux-weddArrow {
	0%, 100% { opacity: 0.25; transform: translateY(0); }
	50%      { opacity: 1;    transform: translateY(-2px); }
}

/* ==========================================================================
   3. Salesforce CRM
   ========================================================================== */
.eux-block .eux-mk-sf {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px;
	font-family: var(--eux-font-display);
}
.eux-block .eux-mk-sf__brand .eux-logo-sf { width: 22px; height: 14px; flex-shrink: 0; }
.eux-block .eux-mk-sf__brand .eux-name  { color: #009ddc; letter-spacing: 0.08em; }
.eux-block .eux-mk-sf__brand .eux-pulse {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--eux-ink-700);
	font-size: 9px;
	letter-spacing: 0.06em;
}
.eux-block .eux-mk-sf__brand .eux-pulse::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #009ddc;
	box-shadow: 0 0 0 0 rgba(0, 157, 220, 0.5);
	animation: eux-sfPing 1.6s ease-out infinite;
}
@keyframes eux-sfPing {
	0%   { box-shadow: 0 0 0 0 rgba(0, 157, 220, 0.6); }
	100% { box-shadow: 0 0 0 8px rgba(0, 157, 220, 0); }
}
.eux-block .eux-mk-sf__contact {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 6px;
	padding: 5px 10px;
	flex: 0 0 auto;
}
.eux-block .eux-mk-sf__avatar {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, #009ddc, #006dce);
	color: var(--eux-white);
	display: grid;
	place-items: center;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: -0.02em;
	flex: 0 0 auto;
}
.eux-block .eux-mk-sf__who { display: flex; flex-direction: column; gap: 1px; }
.eux-block .eux-mk-sf__who .eux-name { font-size: 11px; font-weight: 600; color: var(--eux-ink-900); }
.eux-block .eux-mk-sf__who .eux-meta { font-size: 9px;  color: var(--eux-ink-700); }
.eux-block .eux-mk-sf__ltv  { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.eux-block .eux-mk-sf__ltv .eux-lbl { font-size: 8px;  letter-spacing: 0.08em; text-transform: uppercase; color: var(--eux-ink-700); }
.eux-block .eux-mk-sf__ltv .eux-num { font-size: 12px; font-weight: 600; color: #009ddc; letter-spacing: -0.01em; }
.eux-block .eux-mk-sf__events {
	flex: 0 0 auto;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.eux-block .eux-mk-sf__events li {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 4px;
	padding: 3px 8px;
	font-size: 10px;
	color: var(--eux-ink-900);
	animation: eux-sfRowPulse 4.5s ease-in-out infinite;
}
.eux-block .eux-mk-sf__events li:nth-child(1) { animation-delay: 0s; }
.eux-block .eux-mk-sf__events li:nth-child(2) { animation-delay: -1.5s; }
.eux-block .eux-mk-sf__events li:nth-child(3) { animation-delay: -3.0s; }
@keyframes eux-sfRowPulse {
	0%, 100% { background: var(--eux-white);                border-color: var(--eux-ink-100); }
	8%, 16%  { background: rgba(0, 157, 220, 0.08);         border-color: rgba(0, 157, 220, 0.4); }
}
.eux-block .eux-mk-sf__events .eux-tk {
	width: 12px; height: 12px;
	border-radius: 50%;
	background: rgba(0, 157, 220, 0.12);
	color: #009ddc;
	display: grid;
	place-items: center;
	font-size: 8px;
	font-weight: 700;
	flex-shrink: 0;
}
.eux-block .eux-mk-sf__events .eux-ev { flex: 1; }
.eux-block .eux-mk-sf__events .eux-t  { font-size: 9px; color: var(--eux-ink-700); }

/* ==========================================================================
   4. Warehouse / 3PL (EWE)
   ========================================================================== */
.eux-block .eux-mk-whse {
	display: flex !important;
	flex-direction: column !important;
	gap: 7px;
	font-family: var(--eux-font-display);
}
.eux-block .eux-mk-whse__brand .eux-name { color: #1f8a5b; letter-spacing: 0.16em; font-size: 11.5px; font-weight: 700; }
.eux-block .eux-mk-whse__brand .eux-sub  { font-size: 9px; letter-spacing: 0.06em; color: var(--eux-ink-700); }
.eux-block .eux-mk-whse__steps {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 6px;
	flex: 0 0 auto;
}
.eux-block .eux-mk-whse__step {
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 6px;
	padding: 5px 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	color: var(--eux-ink-900);
	font-weight: 500;
	animation: eux-whseStep 3.6s ease-in-out infinite;
}
.eux-block .eux-mk-whse__step .eux-i {
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--eux-ink-50);
	color: var(--eux-ink-700);
	display: grid;
	place-items: center;
	font-size: 9.5px;
	font-weight: 600;
	flex-shrink: 0;
	animation: eux-whseStepI 3.6s ease-in-out infinite;
}
.eux-block .eux-mk-whse__step[data-s="1"], .eux-block .eux-mk-whse__step[data-s="1"] .eux-i { animation-delay: 0s; }
.eux-block .eux-mk-whse__step[data-s="2"], .eux-block .eux-mk-whse__step[data-s="2"] .eux-i { animation-delay: -1.2s; }
.eux-block .eux-mk-whse__step[data-s="3"], .eux-block .eux-mk-whse__step[data-s="3"] .eux-i { animation-delay: -2.4s; }
@keyframes eux-whseStep {
	0%, 100% { border-color: var(--eux-ink-100);          background: var(--eux-white); }
	10%, 30% { border-color: #1f8a5b;                     background: rgba(31, 138, 91, 0.06); }
}
@keyframes eux-whseStepI {
	0%, 100% { background: var(--eux-ink-50);     color: var(--eux-ink-700); }
	10%, 30% { background: #1f8a5b;               color: var(--eux-white); }
}
.eux-block .eux-mk-whse__label {
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 6px;
	padding: 7px 10px;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.eux-block .eux-mk-whse__label-hd { display: flex; align-items: baseline; gap: 8px; }
.eux-block .eux-mk-whse__label-hd .eux-carrier { font-size: 10.5px; letter-spacing: 0.08em; color: #1f8a5b; font-weight: 700; }
.eux-block .eux-mk-whse__label-hd .eux-track   { margin-left: auto; font-size: 10px; font-weight: 500; color: var(--eux-ink-900); letter-spacing: 0.02em; }
/* Barcode — inline SVG. Note: no `display: flex` (invalid on SVG and
   prevents rendering). Explicit min-height ensures the SVG doesn't
   collapse to zero when its flex parent runs out of space. */
.eux-block .eux-mk-whse__barcode {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: 28px;
}
.eux-block .eux-mk-whse__bar {
	fill: var(--eux-ink-900);
	animation: eux-whseBar 1.6s ease-in-out infinite;
}
.eux-block .eux-mk-whse__bar:nth-child(2n) { animation-delay: -0.1s; }
.eux-block .eux-mk-whse__bar:nth-child(3n) { animation-delay: -0.2s; }
.eux-block .eux-mk-whse__bar:nth-child(5n) { animation-delay: -0.3s; }
@keyframes eux-whseBar {
	0%, 100% { opacity: 0.85; }
	50%      { opacity: 0.45; }
}

/* ==========================================================================
   5. Stripe Authorize
   ========================================================================== */
.eux-block .eux-mk-stripe {
	display: flex !important;
	flex-direction: column !important;
	gap: 7px;
	font-family: var(--eux-font-display);
}
.eux-block .eux-mk-stripe__brand .eux-name {
	font-style: italic;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #635BFF;
	font-size: 13px;
	text-transform: lowercase;
}
.eux-block .eux-mk-stripe__brand .eux-chip {
	margin-left: auto;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(99, 91, 255, 0.10);
	color: #635BFF;
	font-size: 9px;
	letter-spacing: 0.06em;
	font-weight: 600;
}
.eux-block .eux-mk-stripe__card {
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 6px;
	padding: 7px 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 0 0 auto;
}
.eux-block .eux-mk-stripe__row { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.eux-block .eux-mk-stripe__row .eux-lbl { color: var(--eux-ink-700); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.eux-block .eux-mk-stripe__row .eux-amt { margin-left: auto; font-weight: 600; color: var(--eux-ink-900); letter-spacing: -0.01em; }
.eux-block .eux-mk-stripe__row--mute .eux-amt { font-weight: 500; color: var(--eux-ink-700); font-family: ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.06em; }
.eux-block .eux-mk-stripe__row--hold .eux-amt { color: #635BFF; font-size: 13px; }
.eux-block .eux-mk-stripe__outcome {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	flex: 1 1 auto;
	min-height: 0;
}
.eux-block .eux-mk-stripe__state {
	border-radius: 6px;
	padding: 6px 8px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	border: 1px solid transparent;
	transition: opacity 320ms var(--eux-ease-out), border-color 320ms var(--eux-ease-out), background 320ms var(--eux-ease-out);
	animation: eux-stripeState 5s ease-in-out infinite;
}
.eux-block .eux-mk-stripe__state .eux-lbl  { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.eux-block .eux-mk-stripe__state .eux-desc { font-size: 9.5px; font-weight: 500; color: var(--eux-ink-700); }
.eux-block .eux-mk-stripe__state--cap  { background: rgba(31, 138,  91, 0.06); border-color: rgba(31, 138,  91, 0.3); color: #1f8a5b; animation-delay: 0s; }
.eux-block .eux-mk-stripe__state--void { background: rgba(99,  91, 255, 0.06); border-color: rgba(99,  91, 255, 0.3); color: #635BFF; animation-delay: -2.5s; }
@keyframes eux-stripeState {
	0%, 45%, 100% { opacity: 0.35; transform: scale(1); }
	50%, 90%      { opacity: 1;    transform: scale(1.02); }
}

/* ==========================================================================
   6. BronID — three documents with shimmering data lines + verification
   stamps. 15s loop alternating Verified / Failed states.
   ========================================================================== */
.eux-block .eux-mk-bron {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px;
	font-family: var(--eux-font-display);
}
.eux-block .eux-mk-bron__brand .eux-name   { font-weight: 700; letter-spacing: -0.01em; color: #0EA5E9; font-size: 12px; }
.eux-block .eux-mk-bron__brand .eux-name b { color: var(--eux-ink-900); font-weight: 700; }
.eux-block .eux-mk-bron__chip { margin-left: auto; position: relative; min-width: 110px; height: 16px; flex-shrink: 0; }
.eux-block .eux-mk-bron__chip .eux-s {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 0 7px;
	border-radius: 4px;
	opacity: 0;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.eux-block .eux-mk-bron__chip .eux-s--scan { background: rgba( 14, 165, 233, 0.12); color: #0EA5E9; animation: eux-bronChipScan 15s ease-in-out infinite; }
.eux-block .eux-mk-bron__chip .eux-s--ok   { background: rgba( 31, 138,  91, 0.14); color: #1f8a5b; animation: eux-bronChipOk   15s ease-in-out infinite; }
.eux-block .eux-mk-bron__chip .eux-s--bad  { background: rgba(217, 119,   6, 0.16); color: #b45309; animation: eux-bronChipBad  15s ease-in-out infinite; }
@keyframes eux-bronChipScan { 0%, 7% { opacity: 1; } 12%, 30% { opacity: 0; } 33%, 40% { opacity: 1; } 45%, 63% { opacity: 0; } 66%, 73% { opacity: 1; } 78%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes eux-bronChipOk   { 0%, 7% { opacity: 0; } 12%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes eux-bronChipBad  { 0%, 40% { opacity: 0; } 45%, 63% { opacity: 1; } 66%, 73% { opacity: 0; } 78%, 96% { opacity: 1; } 100% { opacity: 0; } }

.eux-block .eux-mk-bron__row {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
}
.eux-block .eux-mk-bron__doc {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
	border: 1px solid var(--eux-ink-100);
	border-radius: 5px;
	padding: 5px 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.eux-block .eux-mk-bron__doc .eux-hdr {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 7.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--eux-ink-900);
}
.eux-block .eux-mk-bron__doc .eux-hdr .eux-seal { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.eux-block .eux-mk-bron__doc .eux-hdr .eux-loc {
	margin-left: auto;
	padding: 0 4px;
	border-radius: 2px;
	font-size: 6.5px;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.eux-block .eux-mk-bron__doc--licence  .eux-seal { background: linear-gradient(135deg, #0EA5E9, #1e3a8a); }
.eux-block .eux-mk-bron__doc--licence  .eux-loc  { background: rgba( 30,  58, 138, 0.10); color: #1e3a8a; }
.eux-block .eux-mk-bron__doc--passport .eux-seal { background: linear-gradient(135deg, #b91c1c, #7c2d12); }
.eux-block .eux-mk-bron__doc--passport .eux-loc  { background: rgba(124,  45,  18, 0.10); color: #7c2d12; }
.eux-block .eux-mk-bron__doc--medicare .eux-seal { background: linear-gradient(135deg, #10b981, #047857); }
.eux-block .eux-mk-bron__doc--medicare .eux-loc  { background: rgba(  4, 120,  87, 0.10); color: #047857; }

.eux-block .eux-mk-bron__doc .eux-body { flex: 1 1 auto; display: flex; gap: 5px; align-items: stretch; min-height: 0; }
.eux-block .eux-mk-bron__doc--medicare .eux-body { flex-direction: column; gap: 6px; padding-top: 2px; justify-content: space-between; padding-bottom: 2px; }
.eux-block .eux-mk-bron__doc .eux-field { display: flex; flex-direction: column; gap: 3px; }
.eux-block .eux-mk-bron__doc .eux-sk--label { width: 42%; height: 4px; opacity: 0.7; }
.eux-block .eux-mk-bron__doc .eux-sk--value { width: 85%; height: 5px; }

.eux-block .eux-mk-bron__doc .eux-thumb {
	width: 22px; height: 28px;
	flex-shrink: 0;
	align-self: flex-start;
	border-radius: 2px;
	background: linear-gradient(135deg, #94a3b8, #64748b);
	position: relative;
	overflow: hidden;
}
.eux-block .eux-mk-bron__doc .eux-thumb::before {
	content: "";
	position: absolute;
	left: 50%; top: 5px;
	transform: translateX(-50%);
	width: 8px; height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.65);
}
.eux-block .eux-mk-bron__doc .eux-thumb::after {
	content: "";
	position: absolute;
	left: 50%; top: 13px; bottom: 0;
	transform: translateX(-50%);
	width: 20px;
	border-radius: 50% 50% 0 0;
	background: rgba(255, 255, 255, 0.65);
}
.eux-block .eux-mk-bron__doc--passport .eux-thumb        { width: 22px; height: 28px; }
.eux-block .eux-mk-bron__doc--passport .eux-thumb::after { width: 18px; }

.eux-block .eux-mk-bron__doc .eux-lines {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	justify-content: space-between;
	padding: 1px 0 2px;
}
.eux-block .eux-mk-bron__doc .eux-sk {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 50%, #94a3b8 100%);
	background-size: 200% 100%;
	animation: eux-bronShimmer 1.4s linear infinite;
}
.eux-block .eux-mk-bron__doc .eux-sk--name { height: 5px; width: 90%; }
.eux-block .eux-mk-bron__doc .eux-sk--w90  { width: 90%; }
.eux-block .eux-mk-bron__doc .eux-sk--w80  { width: 80%; }
.eux-block .eux-mk-bron__doc .eux-sk--w70  { width: 70%; }
.eux-block .eux-mk-bron__doc .eux-sk--w60  { width: 60%; }
.eux-block .eux-mk-bron__doc .eux-sk--w50  { width: 50%; }
@keyframes eux-bronShimmer {
	0%   { background-position:  200% 0; }
	100% { background-position: -200% 0; }
}

/* Verification stamps — overlay on each document */
.eux-block .eux-mk-bron__doc .eux-stamp {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%) scale(0.6) rotate(-8deg);
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 3px 6px;
	border-radius: 3px;
	background: var(--eux-white);
	border: 1.5px solid currentColor;
	font-size: 7.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	z-index: 2;
}
.eux-block .eux-mk-bron__doc .eux-stamp svg { width: 9px; height: 9px; flex-shrink: 0; }
.eux-block .eux-mk-bron__doc .eux-stamp--ok  { color: #1f8a5b; }
.eux-block .eux-mk-bron__doc .eux-stamp--bad { color: #dc2626; }

/* 15s loop, 3 phases. A: all ✓ · B: passport ✗ · C: medicare ✗ */
.eux-block .eux-mk-bron__doc--licence  .eux-stamp--ok  { animation: eux-bronLicOk   15s ease-in-out infinite; }
.eux-block .eux-mk-bron__doc--passport .eux-stamp--ok  { animation: eux-bronPassOk  15s ease-in-out infinite; }
.eux-block .eux-mk-bron__doc--passport .eux-stamp--bad { animation: eux-bronPassBad 15s ease-in-out infinite; }
.eux-block .eux-mk-bron__doc--medicare .eux-stamp--ok  { animation: eux-bronMedOk   15s ease-in-out infinite; }
.eux-block .eux-mk-bron__doc--medicare .eux-stamp--bad { animation: eux-bronMedBad  15s ease-in-out infinite; }
@keyframes eux-bronLicOk {
	0%, 8%    { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
	12%, 30%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(-6deg); }
	33%, 40%  { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
	45%, 63%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(-6deg); }
	66%, 73%  { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
	78%, 96%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(-6deg); }
	100%      { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
}
@keyframes eux-bronPassOk {
	0%, 8%    { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
	12%, 30%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(-6deg); }
	33%, 73%  { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
	78%, 96%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(-6deg); }
	100%      { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
}
@keyframes eux-bronPassBad {
	0%, 40%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
	45%, 63%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(-6deg); }
	66%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
}
@keyframes eux-bronMedOk {
	0%, 8%    { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
	12%, 30%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(-6deg); }
	33%, 40%  { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
	45%, 63%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(-6deg); }
	66%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
}
@keyframes eux-bronMedBad {
	0%, 73%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
	78%, 96%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(-6deg); }
	100%      { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); }
}

/* ==========================================================================
   Editor placeholder for the mockup — animations are heavy and distracting
   inside Gutenberg, so we show a labelled card instead.
   ========================================================================== */
.editor-styles-wrapper .eux-block--example-card .eux-example__mock-placeholder {
	min-height: 110px;
	background: var(--eux-cream-50);
	border: 1px dashed var(--eux-ink-200);
	border-radius: 12px;
	display: grid;
	place-items: center;
	padding: 18px;
	text-align: center;
}
.editor-styles-wrapper .eux-example__mock-placeholder-label {
	font-family: var(--eux-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eux-ink-500);
	margin-bottom: 6px;
}
.editor-styles-wrapper .eux-example__mock-placeholder-preset {
	font-family: var(--eux-font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--eux-ink-800);
}