/**
 * MON PORTE — Icon List element styles (UX Builder "MON PORTE Icon List").
 *
 * Strictly scoped to .mpil-*. Three separate alignment concepts:
 * - List Alignment (.mpil-align-*): auto margins on the root block.
 *   Visible only when the root is narrower than its container
 *   (Hug/Custom). Full Width fills the container, so it is a no-op.
 * - Item Content Alignment (.mpil-ca-*): horizontal placement of the
 *   shared ICON + TEXT composition. Default left keeps the legacy
 *   per-item grid untouched. Center/right use a shared track (subgrid)
 *   in vertical layouts so every icon shares one X and every text
 *   start shares one X — rows never center independently.
 * - Text Alignment (.mpil-ta-*): text-align inside the text column
 *   only. It never moves the icon.
 * No !important. No JS. Subgrid: Safari 16+, Chrome 117+, Firefox 71+.
 */

/* ------------------------------------------------------------------ */
/* Root + widths + block alignment                                    */
/* ------------------------------------------------------------------ */

.mpil {
	position: relative;
	max-width: 100%;
	background-color: var(--mpil-bg, transparent);
	border-radius: var(--mpil-radius, 0px);
}

.mpil-box-on {
	border: var(--mpil-b-w, 1px) solid var(--mpil-b-c, #e3d9c6);
}

.mpil-w-hug {
	width: max-content;
	max-width: 100%;
}

.mpil-w-full {
	width: 100%;
}

.mpil-w-custom {
	width: 100%;
}

.mpil-align-left {
	margin-right: auto;
}

.mpil-align-center {
	margin-left: auto;
	margin-right: auto;
}

.mpil-align-right {
	margin-left: auto;
}

.mpil-items {
	display: flex;
	flex-direction: column;
}

/* ---- vertical / horizontal per breakpoint (pre-resolved classes) ---- */
.mpil-lay-d-vertical .mpil-items {
	display: flex;
	flex-direction: column;
}

.mpil-lay-d-horizontal .mpil-items {
	display: flex;
	flex-direction: row;
	column-gap: var(--mpil-hgap, 32px);
}

.mpil-lay-d-horizontal .mpil-items > .mpil-item {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 850px) {
	.mpil-lay-t-vertical .mpil-items {
		display: flex;
		flex-direction: column;
	}

	.mpil-lay-t-horizontal .mpil-items {
		display: flex;
		flex-direction: row;
		column-gap: var(--mpil-hgap, 32px);
	}

	.mpil-lay-t-horizontal .mpil-items > .mpil-item {
		flex: 1 1 0;
		min-width: 0;
	}
}

@media (max-width: 550px) {
	.mpil-lay-m-vertical .mpil-items {
		display: flex;
		flex-direction: column;
	}

	.mpil-lay-m-horizontal .mpil-items {
		display: flex;
		flex-direction: row;
		column-gap: var(--mpil-hgap, 32px);
	}

	.mpil-lay-m-horizontal .mpil-items > .mpil-item {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ---- text inside the shared text column (icons never move) ---- */
.mpil-ta-left .mpil-text {
	text-align: left;
}

.mpil-ta-center .mpil-text {
	text-align: center;
}

.mpil-ta-right .mpil-text {
	text-align: right;
}

/* ------------------------------------------------------------------ */
/* Row: icon circle + text, locked columns                            */
/* ------------------------------------------------------------------ */

.mpil-item {
	display: grid;
	grid-template-columns: var(--mpil-circle, 48px) minmax(0, 1fr);
	column-gap: var(--mpil-gap, 20px);
	align-items: var(--mpil-va, center);
	padding-top: var(--mpil-row-pad, 20px);
	padding-bottom: var(--mpil-row-pad, 20px);
}

/* Icon on the right: mirrored tracks, text keeps column 1. */
.mpil-pos-right .mpil-item {
	grid-template-columns: minmax(0, 1fr) var(--mpil-circle, 48px);
}

.mpil-pos-right .mpil-ic {
	order: 2;
}

.mpil-pos-right .mpil-item--noicon .mpil-text {
	grid-column: 1;
}

.mpil-item--noicon {
	grid-template-columns: var(--mpil-circle, 48px) minmax(0, 1fr);
}

.mpil-item--noicon .mpil-text {
	grid-column: 2;
}

.mpil-link {
	display: contents;
	color: inherit;
	text-decoration: none;
}

.mpil-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Row hover (soft background only, no motion). */
.mpil-hov-soft .mpil-item:hover {
	background-color: var(--mpil-hov-bg, #f5f0e8);
}

/* ------------------------------------------------------------------ */
/* Icon circle                                                        */
/* ------------------------------------------------------------------ */

.mpil-ic {
	width: var(--mpil-circle, 48px);
	height: var(--mpil-circle, 48px);
	border-radius: 50%;
	background-color: var(--mpil-circle-bg, #f5f0e8);
	color: var(--mpil-icon-c, #3e3834);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	font-size: var(--mpil-icon, 20px);
	line-height: 1;
}

.mpil-shape-rounded .mpil-ic {
	border-radius: 22%;
}

.mpil-shape-custom .mpil-ic {
	border-radius: var(--mpil-shaper, 14px);
}

.mpil-cborder-on .mpil-ic {
	border: var(--mpil-cb-w, 1px) solid var(--mpil-cb-c, #e3d9c6);
}

.mpil-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.mpil-ic svg {
	display: block;
	width: 1em;
	height: 1em;
}

.mpil-ic img {
	display: block;
	width: 1em;
	height: 1em;
	object-fit: contain;
	object-position: center;
}

/* Monochrome: authored non-none paint follows the icon color. */
.mpil-svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.mpil-svg svg {
	display: block;
	width: 1em;
	height: 1em;
}

.mpil-svg svg[fill]:not([fill="none"]):not([fill="transparent"]),
.mpil-svg svg [fill]:not([fill="none"]):not([fill="transparent"]) {
	fill: currentColor;
}

.mpil-svg svg[stroke]:not([stroke="none"]):not([stroke="transparent"]),
.mpil-svg svg [stroke]:not([stroke="none"]):not([stroke="transparent"]) {
	stroke: currentColor;
}

/* ------------------------------------------------------------------ */
/* Text                                                               */
/* ------------------------------------------------------------------ */

.mpil-text {
	margin: 0;
	min-width: 0;
	max-width: var(--mpil-tmax, none);
	font-size: var(--mpil-text, 17px);
	font-weight: var(--mpil-weight, 500);
	line-height: var(--mpil-lh, 1.5);
	letter-spacing: var(--mpil-ls, 0px);
	color: var(--mpil-text-c, #3e3834);
}

.mpil-twrap-balance .mpil-text {
	text-wrap: balance;
}

.mpil-twrap-nowrap .mpil-text {
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Separators: divider ownership = item WITH a visible follower.    */
/* display:none removes rendering but NOT sibling matching, so the  */
/* old item+item ownership stranded dividers above hidden rows.     */
/* :has(~ visible) draws exactly one divider per visible boundary,  */
/* at every breakpoint, with zero trailing/leading rules.           */
/* Hidden sets (native Flatsome ranges): desktop = show-for-small + */
/* show-for-medium; tablet = hide-for-medium + show-for-small;      */
/* mobile = hide-for-small + hide-for-medium. Safari 15.4+.         */
/* Orientation AUTO: vertical lists = row rules, horizontal lists = */
/* column rules. Width partitions never overlap, so orientations    */
/* can never double-draw.                                           */
/* ------------------------------------------------------------------ */

@media (min-width: 851px) {
	.mpil-sep-on.mpil-lay-d-vertical.mpil-sepalign-full .mpil-item:has(~ .mpil-item:not(.show-for-small):not(.show-for-medium)) {
		border-bottom: var(--mpil-sep-w, 1px) var(--mpil-sep-s, solid) var(--mpil-sep-c, #e3d9c6);
	}

	.mpil-sep-on.mpil-lay-d-vertical.mpil-sepalign-text .mpil-item:has(~ .mpil-item:not(.show-for-small):not(.show-for-medium)) .mpil-text {
		border-bottom: var(--mpil-sep-w, 1px) var(--mpil-sep-s, solid) var(--mpil-sep-c, #e3d9c6);
	}

	.mpil-sep-on.mpil-lay-d-horizontal .mpil-item:has(~ .mpil-item:not(.show-for-small):not(.show-for-medium)) {
		border-right: var(--mpil-sep-w, 1px) var(--mpil-sep-s, solid) var(--mpil-sep-c, #e3d9c6);
	}

	/* Custom inset (vertical lists): hairline drawn from the inset point. */
	.mpil-sep-on.mpil-lay-d-vertical.mpil-sepalign-custom .mpil-item:has(~ .mpil-item:not(.show-for-small):not(.show-for-medium)) {
		position: relative;
	}

	.mpil-sep-on.mpil-lay-d-vertical.mpil-sepalign-custom .mpil-item:has(~ .mpil-item:not(.show-for-small):not(.show-for-medium))::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: var(--mpil-sep-inset, 68px);
		right: 0;
		border-bottom: var(--mpil-sep-w, 1px) var(--mpil-sep-s, solid) var(--mpil-sep-c, #e3d9c6);
	}
}

/* Equal-width OFF: horizontal items keep natural widths. */
.mpil-eq-off.mpil-lay-d-horizontal .mpil-items > .mpil-item {
	flex: 0 1 auto;
}

@media (min-width: 551px) and (max-width: 850px) {
	.mpil-sep-on.mpil-lay-t-vertical.mpil-sepalign-full .mpil-item:has(~ .mpil-item:not(.hide-for-medium):not(.show-for-small)) {
		border-bottom: var(--mpil-sep-w, 1px) var(--mpil-sep-s, solid) var(--mpil-sep-c, #e3d9c6);
	}

	.mpil-sep-on.mpil-lay-t-vertical.mpil-sepalign-text .mpil-item:has(~ .mpil-item:not(.hide-for-medium):not(.show-for-small)) .mpil-text {
		border-bottom: var(--mpil-sep-w, 1px) var(--mpil-sep-s, solid) var(--mpil-sep-c, #e3d9c6);
	}

	.mpil-sep-on.mpil-lay-t-horizontal .mpil-item:has(~ .mpil-item:not(.hide-for-medium):not(.show-for-small)) {
		border-right: var(--mpil-sep-w, 1px) var(--mpil-sep-s, solid) var(--mpil-sep-c, #e3d9c6);
	}

	.mpil-sep-on.mpil-lay-t-vertical.mpil-sepalign-custom .mpil-item:has(~ .mpil-item:not(.hide-for-medium):not(.show-for-small)) {
		position: relative;
	}

	.mpil-sep-on.mpil-lay-t-vertical.mpil-sepalign-custom .mpil-item:has(~ .mpil-item:not(.hide-for-medium):not(.show-for-small))::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: var(--mpil-sep-inset, 68px);
		right: 0;
		border-bottom: var(--mpil-sep-w, 1px) var(--mpil-sep-s, solid) var(--mpil-sep-c, #e3d9c6);
	}

	.mpil-eq-off.mpil-lay-t-horizontal .mpil-items > .mpil-item {
		flex: 0 1 auto;
	}
}

@media (max-width: 550px) {
	.mpil-sep-on.mpil-lay-m-vertical.mpil-sepalign-full .mpil-item:has(~ .mpil-item:not(.hide-for-small):not(.hide-for-medium)) {
		border-bottom: var(--mpil-sep-w, 1px) var(--mpil-sep-s, solid) var(--mpil-sep-c, #e3d9c6);
	}

	.mpil-sep-on.mpil-lay-m-vertical.mpil-sepalign-text .mpil-item:has(~ .mpil-item:not(.hide-for-small):not(.hide-for-medium)) .mpil-text {
		border-bottom: var(--mpil-sep-w, 1px) var(--mpil-sep-s, solid) var(--mpil-sep-c, #e3d9c6);
	}

	.mpil-sep-on.mpil-lay-m-horizontal .mpil-item:has(~ .mpil-item:not(.hide-for-small):not(.hide-for-medium)) {
		border-right: var(--mpil-sep-w, 1px) var(--mpil-sep-s, solid) var(--mpil-sep-c, #e3d9c6);
	}

	.mpil-sep-on.mpil-lay-m-vertical.mpil-sepalign-custom .mpil-item:has(~ .mpil-item:not(.hide-for-small):not(.hide-for-medium)) {
		position: relative;
	}

	.mpil-sep-on.mpil-lay-m-vertical.mpil-sepalign-custom .mpil-item:has(~ .mpil-item:not(.hide-for-small):not(.hide-for-medium))::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: var(--mpil-sep-inset, 68px);
		right: 0;
		border-bottom: var(--mpil-sep-w, 1px) var(--mpil-sep-s, solid) var(--mpil-sep-c, #e3d9c6);
	}

	.mpil-eq-off.mpil-lay-m-horizontal .mpil-items > .mpil-item {
		flex: 0 1 auto;
	}
}

/* ------------------------------------------------------------------ */
/* Item Content Alignment (.mpil-ca-*). left (default, or class       */
/* absent on older saves): legacy per-item grid above — untouched.    */
/* center/right + vertical: ONE shared track across rows via subgrid. */
/* The subgrid selectors key off .mpil-items--shared, which render +  */
/* canvas emit ONLY for Full/Custom widths: Hug roots size via        */
/* max-content and must never intrinsic-size a subgrid, so Hug always */
/* keeps legacy grids (identical shared-X contract, robust sizing).   */
/* Every icon shares column 2, every text shares column 3, so text    */
/* length can never move an icon and rows never center independently. */
/* Rows still span 1/-1, so full-width separators, backgrounds and    */
/* hover are preserved. center/right + horizontal: the icon+text pair */
/* centers/ends inside each item column (shrink-wrapped track +       */
/* justify-content). Tier specificity is identical at every tier      */
/* (container 3 classes, item 4) so later tiers override earlier ones */
/* exactly like the layout tiers above. MPIL-002 selectors untouched. */
/* ------------------------------------------------------------------ */

/* ---- desktop tier ---- */
.mpil-lay-d-vertical.mpil-ca-center .mpil-items--shared {
	display: grid;
	grid-template-columns: 1fr auto minmax(0, auto) 1fr;
}

.mpil-lay-d-vertical.mpil-ca-right .mpil-items--shared {
	display: grid;
	grid-template-columns: 1fr auto minmax(0, auto);
}

.mpil-lay-d-vertical.mpil-ca-center .mpil-items--shared > .mpil-item,
.mpil-lay-d-vertical.mpil-ca-right .mpil-items--shared > .mpil-item {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
	column-gap: 0;
}

.mpil-lay-d-vertical.mpil-ca-center .mpil-items--shared > .mpil-item .mpil-ic,
.mpil-lay-d-vertical.mpil-ca-right .mpil-items--shared > .mpil-item .mpil-ic {
	grid-column: 2;
	margin-right: var(--mpil-gap, 20px);
}

.mpil-lay-d-vertical.mpil-ca-center .mpil-items--shared > .mpil-item .mpil-text,
.mpil-lay-d-vertical.mpil-ca-right .mpil-items--shared > .mpil-item .mpil-text {
	grid-column: 3;
}

.mpil-lay-d-vertical.mpil-ca-center.mpil-pos-right .mpil-items--shared > .mpil-item .mpil-ic,
.mpil-lay-d-vertical.mpil-ca-right.mpil-pos-right .mpil-items--shared > .mpil-item .mpil-ic {
	grid-column: 3;
	margin-right: 0;
	margin-left: var(--mpil-gap, 20px);
}

.mpil-lay-d-vertical.mpil-ca-center.mpil-pos-right .mpil-items--shared > .mpil-item .mpil-text,
.mpil-lay-d-vertical.mpil-ca-right.mpil-pos-right .mpil-items--shared > .mpil-item .mpil-text {
	grid-column: 2;
}

.mpil-lay-d-vertical.mpil-ca-center .mpil-items--shared > .mpil-item--noicon .mpil-text,
.mpil-lay-d-vertical.mpil-ca-right .mpil-items--shared > .mpil-item--noicon .mpil-text {
	grid-column: 3;
}

.mpil-lay-d-vertical.mpil-ca-center.mpil-pos-right .mpil-items--shared > .mpil-item--noicon .mpil-text,
.mpil-lay-d-vertical.mpil-ca-right.mpil-pos-right .mpil-items--shared > .mpil-item--noicon .mpil-text {
	grid-column: 2;
}

.mpil-lay-d-horizontal.mpil-ca-center .mpil-items > .mpil-item {
	grid-column: auto;
	grid-template-columns: var(--mpil-circle, 48px) minmax(0, auto);
	column-gap: var(--mpil-gap, 20px);
	justify-content: center;
}

.mpil-lay-d-horizontal.mpil-ca-right .mpil-items > .mpil-item {
	grid-column: auto;
	grid-template-columns: var(--mpil-circle, 48px) minmax(0, auto);
	column-gap: var(--mpil-gap, 20px);
	justify-content: flex-end;
}

.mpil-lay-d-horizontal.mpil-ca-center.mpil-pos-right .mpil-items > .mpil-item,
.mpil-lay-d-horizontal.mpil-ca-right.mpil-pos-right .mpil-items > .mpil-item {
	grid-template-columns: minmax(0, auto) var(--mpil-circle, 48px);
}

.mpil-lay-d-horizontal.mpil-ca-center .mpil-items > .mpil-item--noicon,
.mpil-lay-d-horizontal.mpil-ca-right .mpil-items > .mpil-item--noicon {
	grid-template-columns: minmax(0, auto);
}

.mpil-lay-d-horizontal.mpil-ca-center .mpil-items > .mpil-item--noicon .mpil-text,
.mpil-lay-d-horizontal.mpil-ca-right .mpil-items > .mpil-item--noicon .mpil-text {
	grid-column: 1;
}

/* ---- tablet tier ---- */
@media (max-width: 850px) {
	.mpil-lay-t-vertical.mpil-ca-center .mpil-items--shared {
		display: grid;
		grid-template-columns: 1fr auto minmax(0, auto) 1fr;
	}

	.mpil-lay-t-vertical.mpil-ca-right .mpil-items--shared {
		display: grid;
		grid-template-columns: 1fr auto minmax(0, auto);
	}

	.mpil-lay-t-vertical.mpil-ca-center .mpil-items--shared > .mpil-item,
	.mpil-lay-t-vertical.mpil-ca-right .mpil-items--shared > .mpil-item {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: subgrid;
		column-gap: 0;
	}

	.mpil-lay-t-vertical.mpil-ca-center .mpil-items--shared > .mpil-item .mpil-ic,
	.mpil-lay-t-vertical.mpil-ca-right .mpil-items--shared > .mpil-item .mpil-ic {
		grid-column: 2;
		margin-right: var(--mpil-gap, 20px);
	}

	.mpil-lay-t-vertical.mpil-ca-center .mpil-items--shared > .mpil-item .mpil-text,
	.mpil-lay-t-vertical.mpil-ca-right .mpil-items--shared > .mpil-item .mpil-text {
		grid-column: 3;
	}

	.mpil-lay-t-vertical.mpil-ca-center.mpil-pos-right .mpil-items--shared > .mpil-item .mpil-ic,
	.mpil-lay-t-vertical.mpil-ca-right.mpil-pos-right .mpil-items--shared > .mpil-item .mpil-ic {
		grid-column: 3;
		margin-right: 0;
		margin-left: var(--mpil-gap, 20px);
	}

	.mpil-lay-t-vertical.mpil-ca-center.mpil-pos-right .mpil-items--shared > .mpil-item .mpil-text,
	.mpil-lay-t-vertical.mpil-ca-right.mpil-pos-right .mpil-items--shared > .mpil-item .mpil-text {
		grid-column: 2;
	}

	.mpil-lay-t-vertical.mpil-ca-center .mpil-items--shared > .mpil-item--noicon .mpil-text,
	.mpil-lay-t-vertical.mpil-ca-right .mpil-items--shared > .mpil-item--noicon .mpil-text {
		grid-column: 3;
	}

	.mpil-lay-t-vertical.mpil-ca-center.mpil-pos-right .mpil-items--shared > .mpil-item--noicon .mpil-text,
	.mpil-lay-t-vertical.mpil-ca-right.mpil-pos-right .mpil-items--shared > .mpil-item--noicon .mpil-text {
		grid-column: 2;
	}

	.mpil-lay-t-horizontal.mpil-ca-center .mpil-items,
	.mpil-lay-t-horizontal.mpil-ca-right .mpil-items {
		display: flex;
		flex-direction: row;
		column-gap: var(--mpil-hgap, 32px);
	}

	.mpil-lay-t-horizontal.mpil-ca-center .mpil-items > .mpil-item {
		grid-column: auto;
		grid-template-columns: var(--mpil-circle, 48px) minmax(0, auto);
		column-gap: var(--mpil-gap, 20px);
		justify-content: center;
	}

	.mpil-lay-t-horizontal.mpil-ca-right .mpil-items > .mpil-item {
		grid-column: auto;
		grid-template-columns: var(--mpil-circle, 48px) minmax(0, auto);
		column-gap: var(--mpil-gap, 20px);
		justify-content: flex-end;
	}

	.mpil-lay-t-horizontal.mpil-ca-center.mpil-pos-right .mpil-items > .mpil-item,
	.mpil-lay-t-horizontal.mpil-ca-right.mpil-pos-right .mpil-items > .mpil-item {
		grid-template-columns: minmax(0, auto) var(--mpil-circle, 48px);
	}

	.mpil-lay-t-horizontal.mpil-ca-center .mpil-items > .mpil-item--noicon,
	.mpil-lay-t-horizontal.mpil-ca-right .mpil-items > .mpil-item--noicon {
		grid-template-columns: minmax(0, auto);
	}

	.mpil-lay-t-horizontal.mpil-ca-center .mpil-items > .mpil-item--noicon .mpil-text,
	.mpil-lay-t-horizontal.mpil-ca-right .mpil-items > .mpil-item--noicon .mpil-text {
		grid-column: 1;
	}

	/* Mixed layouts (e.g. vertical desktop + horizontal tablet): kill the
	vertical-tier icon margin so the horizontal base column-gap applies once. */
	.mpil-lay-t-horizontal.mpil-ca-center .mpil-items > .mpil-item .mpil-ic,
	.mpil-lay-t-horizontal.mpil-ca-right .mpil-items > .mpil-item .mpil-ic {
		grid-column: auto;
		margin: 0;
	}

	.mpil-lay-t-horizontal.mpil-ca-center.mpil-pos-right .mpil-items > .mpil-item .mpil-ic,
	.mpil-lay-t-horizontal.mpil-ca-right.mpil-pos-right .mpil-items > .mpil-item .mpil-ic {
		grid-column: auto;
		margin: 0;
	}

	/* Same mixed-layout reset for text placement (desktop vertical tier
	pins icon/text to shared columns 2/3; horizontal uses auto flow). */
	.mpil-lay-t-horizontal.mpil-ca-center .mpil-items > .mpil-item .mpil-text,
	.mpil-lay-t-horizontal.mpil-ca-right .mpil-items > .mpil-item .mpil-text,
	.mpil-lay-t-horizontal.mpil-ca-center.mpil-pos-right .mpil-items > .mpil-item .mpil-text,
	.mpil-lay-t-horizontal.mpil-ca-right.mpil-pos-right .mpil-items > .mpil-item .mpil-text {
		grid-column: auto;
	}
}

/* ---- mobile tier ---- */
@media (max-width: 550px) {
	.mpil-lay-m-vertical.mpil-ca-center .mpil-items--shared {
		display: grid;
		grid-template-columns: 1fr auto minmax(0, auto) 1fr;
	}

	.mpil-lay-m-vertical.mpil-ca-right .mpil-items--shared {
		display: grid;
		grid-template-columns: 1fr auto minmax(0, auto);
	}

	.mpil-lay-m-vertical.mpil-ca-center .mpil-items--shared > .mpil-item,
	.mpil-lay-m-vertical.mpil-ca-right .mpil-items--shared > .mpil-item {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: subgrid;
		column-gap: 0;
	}

	.mpil-lay-m-vertical.mpil-ca-center .mpil-items--shared > .mpil-item .mpil-ic,
	.mpil-lay-m-vertical.mpil-ca-right .mpil-items--shared > .mpil-item .mpil-ic {
		grid-column: 2;
		margin-right: var(--mpil-gap, 20px);
	}

	.mpil-lay-m-vertical.mpil-ca-center .mpil-items--shared > .mpil-item .mpil-text,
	.mpil-lay-m-vertical.mpil-ca-right .mpil-items--shared > .mpil-item .mpil-text {
		grid-column: 3;
	}

	.mpil-lay-m-vertical.mpil-ca-center.mpil-pos-right .mpil-items--shared > .mpil-item .mpil-ic,
	.mpil-lay-m-vertical.mpil-ca-right.mpil-pos-right .mpil-items--shared > .mpil-item .mpil-ic {
		grid-column: 3;
		margin-right: 0;
		margin-left: var(--mpil-gap, 20px);
	}

	.mpil-lay-m-vertical.mpil-ca-center.mpil-pos-right .mpil-items--shared > .mpil-item .mpil-text,
	.mpil-lay-m-vertical.mpil-ca-right.mpil-pos-right .mpil-items--shared > .mpil-item .mpil-text {
		grid-column: 2;
	}

	.mpil-lay-m-vertical.mpil-ca-center .mpil-items--shared > .mpil-item--noicon .mpil-text,
	.mpil-lay-m-vertical.mpil-ca-right .mpil-items--shared > .mpil-item--noicon .mpil-text {
		grid-column: 3;
	}

	.mpil-lay-m-vertical.mpil-ca-center.mpil-pos-right .mpil-items--shared > .mpil-item--noicon .mpil-text,
	.mpil-lay-m-vertical.mpil-ca-right.mpil-pos-right .mpil-items--shared > .mpil-item--noicon .mpil-text {
		grid-column: 2;
	}

	.mpil-lay-m-horizontal.mpil-ca-center .mpil-items,
	.mpil-lay-m-horizontal.mpil-ca-right .mpil-items {
		display: flex;
		flex-direction: row;
		column-gap: var(--mpil-hgap, 32px);
	}

	.mpil-lay-m-horizontal.mpil-ca-center .mpil-items > .mpil-item {
		grid-column: auto;
		grid-template-columns: var(--mpil-circle, 48px) minmax(0, auto);
		column-gap: var(--mpil-gap, 20px);
		justify-content: center;
	}

	.mpil-lay-m-horizontal.mpil-ca-right .mpil-items > .mpil-item {
		grid-column: auto;
		grid-template-columns: var(--mpil-circle, 48px) minmax(0, auto);
		column-gap: var(--mpil-gap, 20px);
		justify-content: flex-end;
	}

	.mpil-lay-m-horizontal.mpil-ca-center.mpil-pos-right .mpil-items > .mpil-item,
	.mpil-lay-m-horizontal.mpil-ca-right.mpil-pos-right .mpil-items > .mpil-item {
		grid-template-columns: minmax(0, auto) var(--mpil-circle, 48px);
	}

	.mpil-lay-m-horizontal.mpil-ca-center .mpil-items > .mpil-item--noicon,
	.mpil-lay-m-horizontal.mpil-ca-right .mpil-items > .mpil-item--noicon {
		grid-template-columns: minmax(0, auto);
	}

	.mpil-lay-m-horizontal.mpil-ca-center .mpil-items > .mpil-item--noicon .mpil-text,
	.mpil-lay-m-horizontal.mpil-ca-right .mpil-items > .mpil-item--noicon .mpil-text {
		grid-column: 1;
	}

	/* Mixed layouts (e.g. vertical desktop/tablet + horizontal mobile):
	same margin reset as the tablet tier above. */
	.mpil-lay-m-horizontal.mpil-ca-center .mpil-items > .mpil-item .mpil-ic,
	.mpil-lay-m-horizontal.mpil-ca-right .mpil-items > .mpil-item .mpil-ic {
		grid-column: auto;
		margin: 0;
	}

	.mpil-lay-m-horizontal.mpil-ca-center.mpil-pos-right .mpil-items > .mpil-item .mpil-ic,
	.mpil-lay-m-horizontal.mpil-ca-right.mpil-pos-right .mpil-items > .mpil-item .mpil-ic {
		grid-column: auto;
		margin: 0;
	}

	/* Same mixed-layout reset for text placement as the tablet tier above. */
	.mpil-lay-m-horizontal.mpil-ca-center .mpil-items > .mpil-item .mpil-text,
	.mpil-lay-m-horizontal.mpil-ca-right .mpil-items > .mpil-item .mpil-text,
	.mpil-lay-m-horizontal.mpil-ca-center.mpil-pos-right .mpil-items > .mpil-item .mpil-text,
	.mpil-lay-m-horizontal.mpil-ca-right.mpil-pos-right .mpil-items > .mpil-item .mpil-text {
		grid-column: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Icon Position Top (V1.3). Each item is a single-column stack:      */
/* ICON over TEXT. No side-by-side track exists, so Top never uses    */
/* .mpil-items--shared (PHP + canvas gate it off) and the subgrid     */
/* tiers above can never match. --mpil-gap becomes the VERTICAL gap   */
/* inside each item (row-gap); item-to-item distance still comes from */
/* row padding (vertical) / --mpil-hgap (horizontal) — independent.   */
/* - Item Content Alignment (.mpil-ca-*) aligns the whole stack via   */
/*   align-items: left = shared left edge, center = icon centered     */
/*   with the composition, right = shared right edge.                 */
/* - Text Alignment (.mpil-ta-*) still aligns text lines only inside  */
/*   .mpil-text; it never moves the icon.                             */
/* - Icon/Text Vertical Align (--mpil-va) is neutralized here (the    */
/*   control is hidden for Top): column stacks always start at top.   */
/* - Text stays width:auto so Hug intrinsic sizing always includes    */
/*   the text track (no zero-width collapse).                         */
/* ------------------------------------------------------------------ */

.mpil-pos-top .mpil-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	grid-template-columns: none;
	column-gap: 0;
	row-gap: var(--mpil-gap, 20px);
}

.mpil-pos-top.mpil-ca-center .mpil-item {
	align-items: center;
}

.mpil-pos-top.mpil-ca-right .mpil-item {
	align-items: flex-end;
}

.mpil-pos-top .mpil-ic {
	order: 0;
	margin: 0;
}

.mpil-pos-top .mpil-text,
.mpil-pos-top .mpil-item--noicon .mpil-text {
	grid-column: auto;
}

/* Horizontal layouts: equal/natural widths come from the base tiers
(unset flex untouched). Stacks stay top-aligned so icons share one
row across columns instead of vertically centering in stretched
equal-height items. */
.mpil-pos-top.mpil-lay-d-horizontal.mpil-ca-center .mpil-items > .mpil-item,
.mpil-pos-top.mpil-lay-d-horizontal.mpil-ca-right .mpil-items > .mpil-item {
	justify-content: flex-start;
}

@media (max-width: 850px) {
	.mpil-pos-top.mpil-lay-t-horizontal.mpil-ca-center .mpil-items > .mpil-item,
	.mpil-pos-top.mpil-lay-t-horizontal.mpil-ca-right .mpil-items > .mpil-item {
		justify-content: flex-start;
	}
}

@media (max-width: 550px) {
	.mpil-pos-top.mpil-lay-m-horizontal.mpil-ca-center .mpil-items > .mpil-item,
	.mpil-pos-top.mpil-lay-m-horizontal.mpil-ca-right .mpil-items > .mpil-item {
		justify-content: flex-start;
	}
}