/* BP Root Interaction Diagram widget styles
 *
 * Tunisia product page "AU NIVEAU RACINAIRE" section. Centered
 * header (eyebrow + serif title + description) flanked by subtle
 * decorative olive branches, then a 2-column main area (left
 * illustration panel with 4 numbered markers / right stack of 4
 * explanation cards), then a process strip (icons + labels +
 * arrow separators) and a final centered cream statement strip.
 *
 * Layout:
 *   - transparent outer section (no section background, no shadow)
 *   - centered inner (max 1140px, inline-size: calc(100% - 40px))
 *   - header: eyebrow (line + text + leaf + line) + serif title +
 *     description
 *   - main: 2 columns (~58/42), illustration panel on the left
 *     with 4 absolutely-positioned circular markers (each with its
 *     own responsive X / Y variables), 4 explanation cards stacked
 *     on the right
 *   - process strip: full-width rounded bordered card with 4
 *     (icon + label) steps separated by thin gold arrows
 *   - final strip: full-width rounded cream card with statement
 *     text and small ornaments on each side
 *   - decorative olive branches: top-left and top-right, each
 *     fully responsive (width, X, Y, opacity)
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #EDDBC3  cream
 *   #B8B25A  olive / gold
 *   #FFFFFF  white
 *   plus existing neutral tokens (#FBF6EC, #E4DCCB, #1F2A1F,
 *   #5C6A5C). No invented greens or browns.
 *
 * All rules are scoped under `.bp-root-diagram` and use logical
 * CSS properties (margin-inline, padding-inline, inset-inline …)
 * so LTR and RTL share the same ruleset.
 */

.bp-root-diagram {
	/* ---- Theme tokens (approved palette only) ---- */
	--bp-rd-bg:             transparent;
	--bp-rd-card-bg:        #FFFFFF;
	--bp-rd-card-border:    #E4DCCB;
	--bp-rd-panel-bg:       #FBF6EC;
	--bp-rd-panel-border:   #E4DCCB;
	--bp-rd-process-bg:     #FFFFFF;
	--bp-rd-final-bg:       #EDDBC3;

	--bp-rd-green:          #374F37;
	--bp-rd-olive:          #B8B25A;
	--bp-rd-cream:          #EDDBC3;
	--bp-rd-white:          #FFFFFF;
	--bp-rd-text:           #1F2A1F;
	--bp-rd-text-muted:     #5C6A5C;
	--bp-rd-border:         #E4DCCB;

	--bp-rd-inner-max:      1140px;
	--bp-rd-cards-gap:      14px;
	--bp-rd-panel-radius:   20px;
	--bp-rd-image-radius:   20px;

	--bp-rd-font-body:      var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-rd-font-display:   var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	/* Per-marker X / Y defaults — Elementor overwrites them
	 * per-device via the responsive sliders. */
	--bp-rd-marker-x:        50%;
	--bp-rd-marker-y:        50%;

	/* Decorative branch defaults — every value is fully
	 * overridable from Elementor per-device. */
	--bp-rd-left-x:         0px;
	--bp-rd-left-y:         0px;
	--bp-rd-left-opacity:   100%;
	--bp-rd-right-x:        0px;
	--bp-rd-right-y:        0px;
	--bp-rd-right-opacity:  100%;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	padding-block: 64px;
	background: var(--bp-rd-bg);
	color: var(--bp-rd-text);
	font-family: var(--bp-rd-font-body);
}

.bp-root-diagram *,
.bp-root-diagram *::before,
.bp-root-diagram *::after {
	box-sizing: border-box;
}

/* ---------------- Elementor full-bleed breakout ---------------- */
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-root-diagram,
.elementor-section .elementor-container,
.e-con.e-parent,
.e-con .e-con-inner,
.e-con-inner {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
}

.elementor-element.bp-root-diagram,
.elementor .bp-root-diagram,
.e-con.bp-root-diagram,
.bp-root-diagram {
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
}

.elementor .elementor-widget.elementor-widget-bp-root-interaction-diagram,
.elementor-widget.elementor-widget-bp-root-interaction-diagram {
	inline-size: 100vw !important;
	max-inline-size: 100vw !important;
	min-inline-size: 100vw !important;
	margin-inline-start: calc(50% - 50vw) !important;
	margin-inline-end:   calc(50% - 50vw) !important;
	position: relative;
	z-index: 1;
}

/* ---------------- Inner container (1140px, centered) ---------------- */
.bp-rd__inner {
	position: relative;
	z-index: 2;
	inline-size: calc(100% - 40px);
	max-inline-size: var(--bp-rd-inner-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ---------------- Decorative olive branches ----------------
 * Top-left and top-right branches sit behind the content. They
 * are absolutely positioned, never affect layout, and stay
 * pointer-events: none. Each branch uses its own CSS variables
 * (--bp-rd-{left,right}-*) which Elementor writes inline. */
.bp-rd__branch {
	position: absolute;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	color: var(--bp-rd-olive);
	inline-size: 220px;
}

.bp-rd__branch--left {
	inset-block-start: 0;
	left: 0;
	right: auto;
	inline-size: var(--bp-rd-left-width, 220px);
	transform: translate(
		var(--bp-rd-left-x, 0px),
		var(--bp-rd-left-y, 0px)
	);
	opacity: var(--bp-rd-left-opacity, 100%);
}

.bp-rd__branch--right {
	inset-block-start: 0;
	right: 0;
	left: auto;
	inline-size: var(--bp-rd-right-width, 220px);
	transform: translate(
		var(--bp-rd-right-x, 0px),
		var(--bp-rd-right-y, 0px)
	);
	opacity: var(--bp-rd-right-opacity, 100%);
}

.bp-rd__branch-svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
	color: inherit;
	fill: none;
	stroke: currentColor;
}

/* ---------------- Header ---------------- */
.bp-rd__header {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	margin-block-end: 40px;
}

.bp-rd__eyebrow {
	position: relative;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--bp-rd-green);
	font-family: var(--bp-rd-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
	white-space: nowrap;
}

.bp-rd__eyebrow-line {
	inline-size: 44px;
	block-size: 1px;
	background: var(--bp-rd-olive);
	flex: 0 0 auto;
}

.bp-rd__eyebrow-text {
	white-space: nowrap;
}

.bp-rd__eyebrow-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 16px;
	block-size: 16px;
	color: var(--bp-rd-olive);
	flex: 0 0 auto;
}

.bp-rd__eyebrow-mark {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.bp-rd__title {
	margin: 0;
	color: #374F3C;
	font-family: var(--bp-rd-font-display);
	font-weight: 400;
	font-size: clamp(36px, 4vw, 52px);
	line-height: 1.1;
	letter-spacing: -0.005em;
	max-inline-size: 920px;
}

.bp-rd__description {
	margin: 0;
	color: var(--bp-rd-text);
	font-family: var(--bp-rd-font-body);
	font-size: 16px;
	line-height: 1.55;
	max-inline-size: 720px;
}

/* ---------------- Main 2-column area ----------------
 * Left column holds the illustration panel + markers, right
 * column holds the 4 explanation cards. The column ratio is
 * driven by the Elementor "Main columns ratio" slider. */
.bp-rd__main {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	column-gap: 24px;
	row-gap: 24px;
	align-items: stretch;
	margin-block-end: 24px;
}

/* ---------------- Illustration panel ----------------
 * Rounded bordered panel that holds the editable main image.
 * The image fills the panel with `object-fit: cover` so any
 * uploaded art is presented at a consistent size. The 4
 * numbered markers sit on top of the image, positioned via
 * their own X / Y CSS variables. */
.bp-rd__panel {
	position: relative;
	background: var(--bp-rd-panel-bg);
	border: 1px solid var(--bp-rd-panel-border);
	border-radius: var(--bp-rd-panel-radius, 20px);
	padding: 12px;
	overflow: hidden;
	min-block-size: 0;
	min-inline-size: 0;
}

.bp-rd__image,
.bp-rd__image-placeholder {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 360px;
	max-block-size: 560px;
	object-fit: cover;
	object-position: center center;
	border-radius: var(--bp-rd-image-radius, 20px);
}

.bp-rd__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--bp-rd-border);
	background: var(--bp-rd-cream);
	color: var(--bp-rd-green);
	font-family: var(--bp-rd-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bp-rd__markers {
	position: absolute;
	inset: 12px;
	pointer-events: none;
	z-index: 2;
}

.bp-rd__marker {
	position: absolute;
	inset-inline-start: var(--bp-rd-marker-x, 50%);
	inset-block-start:  var(--bp-rd-marker-y, 50%);
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background: var(--bp-rd-cream);
	color: var(--bp-rd-green);
	border: 1px solid var(--bp-rd-border);
	font-family: var(--bp-rd-font-display);
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(55, 79, 55, 0.10);
	pointer-events: auto;
}

/* ---------------- Explanation cards (right column) ----------------
 * 4 stacked rounded cards. Each card is a 3-column grid:
 * large number, circular icon, text block. */
.bp-rd__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bp-rd-cards-gap, 14px);
	min-inline-size: 0;
}

.bp-rd__card {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 0;
	align-items: center;
	padding: 16px 18px;
	background: var(--bp-rd-card-bg);
	border: 1px solid var(--bp-rd-card-border);
	border-radius: 14px;
	min-inline-size: 0;
}

.bp-rd__card-number {
	font-family: var(--bp-rd-font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: 1;
	color: var(--bp-rd-green);
	letter-spacing: -0.01em;
	min-inline-size: 44px;
	text-align: center;
}

.bp-rd__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 52px;
	block-size: 52px;
	border-radius: 50%;
	background: var(--bp-rd-cream);
	color: var(--bp-rd-green);
	flex: 0 0 auto;
}

.bp-rd__card-icon i,
.bp-rd__card-icon svg {
	inline-size: 26px;
	block-size: 26px;
	fill: currentColor;
}

.bp-rd__card-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-inline-size: 0;
	font-family: var(--bp-rd-font-body);
	line-height: 1.45;
}

.bp-rd__card-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--bp-rd-green);
	letter-spacing: 0.01em;
}

.bp-rd__card-description {
	font-size: 13px;
	font-weight: 500;
	color: var(--bp-rd-text);
	letter-spacing: 0.005em;
}

/* ---------------- Process strip ----------------
 * Full-width rounded bordered strip with 4 (icon + label) steps
 * separated by thin gold arrows. Wraps to 2×2 on mobile. */
.bp-rd__process {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 12px;
	padding: 18px 22px;
	margin-block-end: 14px;
	background: var(--bp-rd-process-bg);
	border: 1px solid var(--bp-rd-border);
	border-radius: 16px;
}

.bp-rd__process-step {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-inline-size: 0;
	flex: 1 1 0;
}

.bp-rd__process-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background: var(--bp-rd-cream);
	color: var(--bp-rd-green);
	flex: 0 0 auto;
}

.bp-rd__process-icon i,
.bp-rd__process-icon svg {
	inline-size: 22px;
	block-size: 22px;
	fill: currentColor;
}

.bp-rd__process-label {
	font-family: var(--bp-rd-font-body);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--bp-rd-text);
	letter-spacing: 0.005em;
	line-height: 1.3;
	min-inline-size: 0;
}

.bp-rd__process-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-rd-olive);
	flex: 0 0 auto;
	inline-size: 32px;
	block-size: 12px;
}

.bp-rd__process-arrow svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

/* ---------------- Final statement strip ----------------
 * Centered rounded cream strip with the statement text and
 * small decorative ornaments on each side. */
.bp-rd__final {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 18px 26px;
	background: var(--bp-rd-final-bg);
	border: 1px solid var(--bp-rd-border);
	border-radius: 16px;
	text-align: center;
}

.bp-rd__final-text {
	margin: 0;
	font-family: var(--bp-rd-font-display);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.4;
	color: var(--bp-rd-green);
	letter-spacing: 0.005em;
	max-inline-size: 760px;
}

.bp-rd__final-ornament {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	color: var(--bp-rd-olive);
	flex: 0 0 auto;
}

.bp-rd__final-ornament img,
.bp-rd__final-ornament svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
	color: inherit;
}

.bp-rd__ornament-svg {
	fill: none;
	stroke: currentColor;
}

/* ---------------- TABLET (769–1024) ---------------- */
@media (min-width: 769px) and (max-width: 1024px) {
	.bp-root-diagram { padding-block: 52px; }
	.bp-rd__header { margin-block-end: 32px; }
	.bp-rd__title { font-size: clamp(32px, 4.2vw, 44px); }
	.bp-rd__description { font-size: 15.5px; }
	.bp-rd__main { column-gap: 20px; row-gap: 20px; }
	.bp-rd__image,
	.bp-rd__image-placeholder { min-block-size: 320px; max-block-size: 480px; }
	.bp-rd__card { padding: 14px 16px; column-gap: 12px; }
	.bp-rd__card-number { font-size: 24px; min-inline-size: 38px; }
	.bp-rd__card-icon { inline-size: 46px; block-size: 46px; }
	.bp-rd__card-icon i, .bp-rd__card-icon svg { inline-size: 22px; block-size: 22px; }
	.bp-rd__card-title { font-size: 14.5px; }
	.bp-rd__card-description { font-size: 12.5px; }
	.bp-rd__process { padding: 16px 18px; gap: 10px 8px; }
	.bp-rd__process-label { font-size: 13.5px; }
	.bp-rd__final-text { font-size: 16px; }
}

/* ---------------- MOBILE (≤ 768px) ----------------
 * Stack everything vertically:
 *   header → illustration panel → 4 cards → process strip →
 *   final strip. No overlap, no overflow. */
@media (max-width: 768px) {

	.bp-root-diagram { padding-block: 44px; }

	/* Hide the decorative branches on small screens to keep the
	 * section clean (they are absolutely positioned and would
	 * otherwise steal visual space at the top). */
	.bp-rd__branch { display: none; }

	.bp-rd__header { margin-block-end: 24px; gap: 10px; }
	.bp-rd__eyebrow { font-size: 12px; letter-spacing: 0.16em; gap: 10px; }
	.bp-rd__eyebrow-line { inline-size: 22px; }
	.bp-rd__eyebrow-leaf { inline-size: 14px; block-size: 14px; }
	.bp-rd__title { font-size: clamp(28px, 8vw, 36px); line-height: 1.1; }
	.bp-rd__description { font-size: 15px; line-height: 1.55; max-inline-size: 540px; }

	.bp-rd__main {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
		margin-block-end: 18px;
	}

	.bp-rd__panel { padding: 8px; border-radius: 16px; }
	.bp-rd__image,
	.bp-rd__image-placeholder { min-block-size: 220px; max-block-size: 360px; border-radius: 12px; }

	.bp-rd__marker { inline-size: 30px; block-size: 30px; font-size: 13px; }

	.bp-rd__card { padding: 12px 14px; column-gap: 10px; }
	.bp-rd__card-number { font-size: 22px; min-inline-size: 32px; }
	.bp-rd__card-icon { inline-size: 40px; block-size: 40px; }
	.bp-rd__card-icon i, .bp-rd__card-icon svg { inline-size: 20px; block-size: 20px; }
	.bp-rd__card-title { font-size: 14px; }
	.bp-rd__card-description { font-size: 12.5px; }

	.bp-rd__process {
		padding: 14px 14px;
		gap: 12px 10px;
	}
	/* On mobile the 4 steps and 3 arrows stack as a 2×2 grid of
	 * (icon + label) cells with arrows in the gutter rows. */
	.bp-rd__process {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		row-gap: 12px;
		column-gap: 8px;
	}
	.bp-rd__process-step { flex: 0 1 auto; }
	.bp-rd__process-step:nth-of-type(1) { grid-column: 1; grid-row: 1; }
	.bp-rd__process-arrow:nth-of-type(1)  { grid-column: 2; grid-row: 1; }
	.bp-rd__process-step:nth-of-type(2) { grid-column: 3; grid-row: 1; }
	.bp-rd__process-step:nth-of-type(3) { grid-column: 1; grid-row: 2; }
	.bp-rd__process-arrow:nth-of-type(2)  { grid-column: 2; grid-row: 2; }
	.bp-rd__process-step:nth-of-type(4) { grid-column: 3; grid-row: 2; }
	.bp-rd__process-arrow:nth-of-type(3)  { display: none; }

	.bp-rd__process-icon { inline-size: 32px; block-size: 32px; }
	.bp-rd__process-icon i, .bp-rd__process-icon svg { inline-size: 18px; block-size: 18px; }
	.bp-rd__process-label { font-size: 13px; }

	.bp-rd__final {
		flex-direction: column;
		gap: 10px;
		padding: 16px 16px;
	}
	.bp-rd__final-text { font-size: 15px; }
	.bp-rd__final-ornament { inline-size: 24px; block-size: 24px; }
}

/* ---------------- SMALL MOBILE (≤ 480px) ---------------- */
@media (max-width: 480px) {

	.bp-root-diagram { padding-block: 36px; }

	.bp-rd__header { margin-block-end: 20px; }
	.bp-rd__title { font-size: clamp(24px, 7.5vw, 30px); }
	.bp-rd__description { font-size: 14.5px; }

	.bp-rd__main { row-gap: 16px; margin-block-end: 14px; }
	.bp-rd__image,
	.bp-rd__image-placeholder { min-block-size: 200px; max-block-size: 300px; }
	.bp-rd__marker { inline-size: 26px; block-size: 26px; font-size: 12px; }

	.bp-rd__card-number { font-size: 20px; min-inline-size: 28px; }
	.bp-rd__card-icon { inline-size: 36px; block-size: 36px; }
	.bp-rd__card-icon i, .bp-rd__card-icon svg { inline-size: 18px; block-size: 18px; }
	.bp-rd__card-title { font-size: 13.5px; }
	.bp-rd__card-description { font-size: 12px; }

	.bp-rd__process { padding: 12px 12px; row-gap: 10px; }
	.bp-rd__process-icon { inline-size: 28px; block-size: 28px; }
	.bp-rd__process-icon i, .bp-rd__process-icon svg { inline-size: 16px; block-size: 16px; }
	.bp-rd__process-label { font-size: 12.5px; }

	/* ============================================================
	 * .bp-rd__process — ONE rounded container, vertical step
	 * layout on mobile (<= 480px). Same desktop border /
	 * background / radius preserved.
	 *
	 * Steps:
	 *   1 Hydro-rétenteur
	 *   2 Eau retenue
	 *   3 Nutriments disponibles
	 *   4 Absorption racinaire
	 *
	 * Between every step: a small vertical down-arrow row.
	 * ============================================================ */

	/* Container: strict flex column, no grid, no side-by-side. */
	.bp-rd__process,
	.bp-rd__process.is-revealed {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		inset: auto !important;
		transform: none !important;
		inline-size: 100% !important;
		width: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		block-size: auto !important;
		height: auto !important;
		min-block-size: 0 !important;
		min-height: 0 !important;
		gap: 0 !important;
		row-gap: 0 !important;
		column-gap: 0 !important;
		margin-block: 0 !important;
		margin-inline: 0 !important;
		padding: 8px 0 !important;
		box-sizing: border-box !important;
	}
	/* Kill any leftover grid placement from the tablet/2-row layout. */
	.bp-rd__process > .bp-rd__process-step,
	.bp-rd__process > .bp-rd__process-arrow {
		grid-column: auto !important;
		grid-row: auto !important;
	}

	/* Each step: full-width row, icon LEFT of label. */
	.bp-rd__process > .bp-rd__process-step,
	.bp-rd__process-step {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		inset: auto !important;
		transform: none !important;
		inline-size: 100% !important;
		width: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		flex: 0 0 auto !important;
		gap: 12px !important;
		padding: 12px 18px !important;
		box-sizing: border-box !important;
		margin: 0 !important;
	}

	/* Icon wrapper — ~36×36, fixed, left of label. */
	.bp-rd__process-step .bp-rd__process-icon,
	.bp-rd__process-step > .bp-rd__process-icon {
		inline-size: 36px !important;
		block-size: 36px !important;
		min-inline-size: 36px !important;
		min-block-size: 36px !important;
		max-inline-size: 36px !important;
		max-block-size: 36px !important;
		flex: 0 0 36px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* Inner icon glyph — 22-24px. */
	.bp-rd__process-step .bp-rd__process-icon i,
	.bp-rd__process-step .bp-rd__process-icon svg,
	.bp-rd__process-step .bp-rd__process-icon img {
		inline-size: 22px !important;
		block-size: 22px !important;
		max-inline-size: 22px !important;
		max-block-size: 22px !important;
	}
	/* Label — flex 1, allowed to wrap, no overlap. */
	.bp-rd__process-step .bp-rd__process-label,
	.bp-rd__process-step > .bp-rd__process-label {
		flex: 1 1 auto !important;
		min-inline-size: 0 !important;
		min-width: 0 !important;
		inline-size: auto !important;
		width: auto !important;
		font-size: 13px !important;
		line-height: 1.4 !important;
		text-align: start !important;
	}

	/* Arrows: own row between steps, centred, vertical down.
	 * The wrapper itself stays in normal flow (no transform).
	 * Only the inner icon/SVG is rotated to point DOWN. */
	.bp-rd__process > .bp-rd__process-arrow,
	.bp-rd__process-arrow {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		inset: auto !important;
		transform: none !important;
		inline-size: 100% !important;
		width: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		flex: 0 0 20px !important;
		block-size: 20px !important;
		height: 20px !important;
		min-block-size: 20px !important;
		min-height: 20px !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
	}
	.bp-rd__process > .bp-rd__process-arrow svg,
	.bp-rd__process-arrow svg {
		inline-size: 20px !important;
		block-size: 20px !important;
		max-inline-size: 20px !important;
		max-block-size: 20px !important;
		color: var(--bp-rd-olive, #B8B25A) !important;
		display: block !important;
		transform: rotate(90deg) !important;
		transform-origin: 50% 50% !important;
	}

	/* ============================================================
	 * .bp-rd__process + .bp-rd__final — DIRECTLY ADJACENT.
	 * The PHP markup already renders them as true siblings
	 * inside .bp-rd__inner (process closes, then final opens).
	 * On mobile we only need normal vertical flow + a small
	 * bottom margin on the process for visual spacing. No
	 * order / grid-row / absolute tricks are used to fake
	 * the relationship — document order is the relationship.
	 * ============================================================ */

	/* Common parent — normal vertical flow. */
	.bp-rd__inner,
	.bp-rd__inner.is-revealed {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
	}

	/* Process — normal flow, 12px gap below for visual rhythm. */
	.bp-rd__process.is-revealed,
	.bp-rd__process {
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		transform: none !important;
		width: 100% !important;
		min-inline-size: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 12px !important;
		float: none !important;
		clear: none !important;
	}

	/* Final — normal flow, no spacing tweaks (process has the gap). */
	.bp-rd__final.is-revealed,
	.bp-rd__final {
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		transform: none !important;
		width: 100% !important;
		min-inline-size: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		float: none !important;
		clear: none !important;
	}

	.bp-rd__final { padding: 14px 12px; }
	.bp-rd__final-text { font-size: 14.5px; }

	/* Mobile-only hide: process + final blocks.
	 * Desktop/tablet above 480px are untouched (no rule there). */
	.elementor-18 .bp-rd__process.is-revealed,
	.elementor-18 .bp-rd__final.is-revealed {
		display: none !important;
	}

	/* Force root diagram main grid to a strict 1-col mobile layout. */
	.bp-rd__main,
	.bp-rd__main.is-revealed {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		column-gap: 0 !important;
		row-gap: 16px !important;
		inline-size: 100% !important;
		width: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
	}
	.bp-rd__main > *,
	.bp-rd__main.is-revealed > * {
		grid-column: 1 / -1 !important;
		inline-size: 100% !important;
		width: 100% !important;
		max-inline-size: none !important;
		max-width: none !important;
		min-inline-size: 0 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}

	/* Icon / feature containers — visibly smaller on mobile. */
	.bp-rd__feature,
	.bp-rd__callout,
	.bp-rd__process,
	.bp-rd__step-icon,
	.bp-rd__card-icon,
	.bp-rd__marker,
	.bp-rd__feature-icon,
	.bp-rd__callout-icon,
	.bp-rd__process-icon,
	.bp-rd__icon,
	.bp-rd__feature-icon,
	.bp-rd__callout-icon,
	.bp-rd__process-icon {
		inline-size: 52px !important;
		block-size: 52px !important;
		min-inline-size: 52px !important;
		min-block-size: 52px !important;
		max-inline-size: 52px !important;
		max-block-size: 52px !important;
		flex: 0 0 52px !important;
		min-inline-size: 0 !important;
	}
	.bp-rd__feature-icon i,
	.bp-rd__feature-icon svg,
	.bp-rd__callout-icon i,
	.bp-rd__callout-icon svg,
	.bp-rd__process-icon i,
	.bp-rd__process-icon svg,
	.bp-rd__card-icon i,
	.bp-rd__card-icon svg,
	.bp-rd__icon i,
	.bp-rd__icon svg,
	.bp-rd__marker i,
	.bp-rd__marker svg {
		inline-size: 30px !important;
		block-size: 30px !important;
		max-inline-size: 30px !important;
		max-block-size: 30px !important;
	}

	/* Hide the decorative botanical / ornament inside the final block. */
	.bp-rd__final.is-revealed > img,
	.bp-rd__final.is-revealed > svg,
	.bp-rd__final.is-revealed > picture,
	.bp-rd__final.is-revealed > i,
	.bp-rd__final-ornament,
	.bp-rd__final-ornament img,
	.bp-rd__final-ornament svg,
	.bp-rd__final-ornament i,
	.bp-rd__final-botanical,
	.bp-rd__final-botanical img,
	.bp-rd__final-botanical svg,
	.bp-rd__final-leaf,
	.bp-rd__final-leaf img,
	.bp-rd__final-leaf svg,
	.bp-rd__final-decoration,
	.bp-rd__final-decoration img,
	.bp-rd__final-decoration svg,
	.bp-rd__final-droplet,
	.bp-rd__final-droplet img,
	.bp-rd__final-droplet svg,
	.bp-rd__final-root,
	.bp-rd__final-root img,
	.bp-rd__final-root svg,
	.bp-rd__final > [class*="botanical"],
	.bp-rd__final > [class*="decor"],
	.bp-rd__final > [class*="ornament"],
	.bp-rd__final > [class*="leaf"],
	.bp-rd__final > [class*="plant"],
	.bp-rd__final > [class*="droplet"],
	.bp-rd__final > [class*="root"] {
		display: none !important;
	}

	/* Final block — fully vertical flow, no absolute desktop labels. */
	.bp-rd__final,
	.bp-rd__final.is-revealed {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		column-gap: 16px !important;
		row-gap: 16px !important;
		inline-size: 100% !important;
		width: 100% !important;
		position: relative !important;
		min-block-size: 0 !important;
		min-height: 0 !important;
		block-size: auto !important;
		height: auto !important;
		overflow: clip !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.bp-rd__final > *,
	.bp-rd__final.is-revealed > * {
		inline-size: 100% !important;
		width: 100% !important;
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		inset: auto !important;
		transform: none !important;
		margin: 0 !important;
	}

	/* Hide ALL decorative absolute elements inside the final block. */
	.bp-rd__final::before,
	.bp-rd__final::after,
	.bp-rd__final.is-revealed::before,
	.bp-rd__final.is-revealed::after,
	.bp-rd__final-decoration,
	.bp-rd__final-deco,
	.bp-rd__final-square,
	.bp-rd__final-ornament,
	.bp-rd__final-ornament img,
	.bp-rd__final-ornament svg,
	.bp-rd__final-ornament i,
	.bp-rd__final-botanical,
	.bp-rd__final-botanical img,
	.bp-rd__final-botanical svg,
	.bp-rd__final-leaf,
	.bp-rd__final-leaf img,
	.bp-rd__final-leaf svg,
	.bp-rd__final-droplet,
	.bp-rd__final-droplet img,
	.bp-rd__final-droplet svg,
	.bp-rd__final-root,
	.bp-rd__final-root img,
	.bp-rd__final-root svg,
	.bp-rd__final-connector,
	.bp-rd__final-connector::before,
	.bp-rd__final-connector::after,
	.bp-rd__final-line,
	.bp-rd__final-line::before,
	.bp-rd__final-line::after,
	.bp-rd__final-bg,
	.bp-rd__final-bg::before,
	.bp-rd__final-bg::after,
	.bp-rd__final-veil,
	.bp-rd__final-veil::before,
	.bp-rd__final-veil::after,
	.bp-rd__final-blob,
	.bp-rd__final-blob img,
	.bp-rd__final-blob svg,
	.bp-rd__final > img,
	.bp-rd__final > svg,
	.bp-rd__final > picture,
	.bp-rd__final > i,
	.bp-rd__final > [class*="botanical"],
	.bp-rd__final > [class*="decor"],
	.bp-rd__final > [class*="ornament"],
	.bp-rd__final > [class*="leaf"],
	.bp-rd__final > [class*="plant"],
	.bp-rd__final > [class*="droplet"],
	.bp-rd__final > [class*="root"],
	.bp-rd__final > [class*="square"],
	.bp-rd__final > [class*="blob"],
	.bp-rd__final > [class*="connector"],
	.bp-rd__final > [class*="line"],
	.bp-rd__final > [class*="veil"],
	.bp-rd__final > [class*="bg-"] {
		display: none !important;
		content: none !important;
	}

	/* Nutrient row — icon + label horizontal. */
	.bp-rd__final .bp-rd__final-item--nutrients,
	.bp-rd__final-nutrients,
	.bp-rd__final [class*="nutrient"]:not([class*="text"]) {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		column-gap: 10px !important;
		row-gap: 10px !important;
		inline-size: 100% !important;
		width: 100% !important;
		position: relative !important;
		inset: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
		order: 1 !important;
		flex-wrap: nowrap !important;
	}
	/* Hide the stand-alone empty decorative square in the nutrient row. */
	.bp-rd__final .bp-rd__final-item--nutrients > [class*="square"],
	.bp-rd__final .bp-rd__final-item--nutrients > [class*="empty"],
	.bp-rd__final .bp-rd__final-item--nutrients > [class*="placeholder"],
	.bp-rd__final-nutrients > [class*="square"],
	.bp-rd__final-nutrients > [class*="empty"],
	.bp-rd__final-nutrients > [class*="placeholder"],
	.bp-rd__final .bp-rd__final-square,
	.bp-rd__final-square,
	.bp-rd__final-deco-square {
		display: none !important;
	}
	.bp-rd__final .bp-rd__final-item--nutrients .bp-rd__icon,
	.bp-rd__final .bp-rd__final-item--nutrients .bp-rd__feature-icon,
	.bp-rd__final .bp-rd__final-item--nutrients .bp-rd__callout-icon,
	.bp-rd__final .bp-rd__final-item--nutrients .bp-rd__process-icon,
	.bp-rd__final .bp-rd__final-item--nutrients .bp-rd__card-icon,
	.bp-rd__final .bp-rd__final-item--nutrients .bp-rd__final-icon,
	.bp-rd__final .bp-rd__final-item--nutrients i,
	.bp-rd__final .bp-rd__final-item--nutrients svg,
	.bp-rd__final-nutrients .bp-rd__icon,
	.bp-rd__final-nutrients .bp-rd__feature-icon,
	.bp-rd__final-nutrients .bp-rd__final-icon,
	.bp-rd__final-nutrients i,
	.bp-rd__final-nutrients svg,
	.bp-rd__final .bp-rd__final-nutrient-icon,
	.bp-rd__final .bp-rd__final-nutrient-icons,
	.bp-rd__final .bp-rd__final-nutrient-icons > * {
		inline-size: 38px !important;
		block-size: 38px !important;
		min-inline-size: 38px !important;
		min-block-size: 38px !important;
		max-inline-size: 38px !important;
		max-block-size: 38px !important;
		flex: 0 0 38px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important;
		inset: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.bp-rd__final .bp-rd__final-item--nutrients i,
	.bp-rd__final .bp-rd__final-item--nutrients svg,
	.bp-rd__final .bp-rd__final-item--nutrients img,
	.bp-rd__final-nutrients i,
	.bp-rd__final-nutrients svg,
	.bp-rd__final-nutrients img {
		inline-size: 26px !important;
		block-size: 26px !important;
		max-inline-size: 26px !important;
		max-block-size: 26px !important;
	}
	.bp-rd__final .bp-rd__final-item--nutrients > .bp-rd__label,
	.bp-rd__final .bp-rd__final-item--nutrients > .bp-rd__final-label,
	.bp-rd__final .bp-rd__final-item--nutrients > .bp-rd__final-nutrients-text,
	.bp-rd__final .bp-rd__final-item--nutrients > [class*="label"],
	.bp-rd__final .bp-rd__final-item--nutrients > [class*="text"]:not([class*="nutrient-icon"]),
	.bp-rd__final-nutrients > [class*="label"],
	.bp-rd__final-nutrients > [class*="text"] {
		flex: 1 1 auto !important;
		min-inline-size: 0 !important;
		min-width: 0 !important;
		inline-size: auto !important;
		width: auto !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
	}

	/* Beige statement — own row, centred, no overlap. */
	.bp-rd__final .bp-rd__final-text,
	.bp-rd__final .bp-rd__final-result,
	.bp-rd__final .bp-rd__final-summary,
	.bp-rd__final .bp-rd__final-statement,
	.bp-rd__final-text,
	.bp-rd__final-result,
	.bp-rd__final-summary,
	.bp-rd__final-statement {
		inline-size: 100% !important;
		width: 100% !important;
		max-inline-size: 100% !important;
		max-width: 100% !important;
		min-inline-size: 0 !important;
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		inset: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 20px 16px !important;
		box-sizing: border-box !important;
		text-align: center !important;
		font-size: 14.5px !important;
		line-height: 1.5 !important;
		order: 2 !important;
		grid-row: 2 !important;
		grid-column: 1 / -1 !important;
		background: transparent !important;
		z-index: 1 !important;
	}

	/* Absorption row — icon + label horizontal. */
	.bp-rd__final .bp-rd__final-item--absorption,
	.bp-rd__final .bp-rd__final-item--root,
	.bp-rd__final-absorption,
	.bp-rd__final [class*="absorption"]:not([class*="text"]),
	.bp-rd__final [class*="root"]:not([class*="text"]) {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		column-gap: 10px !important;
		row-gap: 10px !important;
		inline-size: 100% !important;
		width: 100% !important;
		position: relative !important;
		inset: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
		order: 3 !important;
		flex-wrap: nowrap !important;
	}
	.bp-rd__final .bp-rd__final-item--absorption .bp-rd__icon,
	.bp-rd__final .bp-rd__final-item--absorption .bp-rd__feature-icon,
	.bp-rd__final .bp-rd__final-item--absorption .bp-rd__final-icon,
	.bp-rd__final .bp-rd__final-item--absorption .bp-rd__final-absorption-icon,
	.bp-rd__final .bp-rd__final-item--absorption i,
	.bp-rd__final .bp-rd__final-item--absorption svg,
	.bp-rd__final-absorption .bp-rd__icon,
	.bp-rd__final-absorption .bp-rd__feature-icon,
	.bp-rd__final-absorption .bp-rd__final-icon,
	.bp-rd__final-absorption i,
	.bp-rd__final-absorption svg,
	.bp-rd__final-absorption-icon,
	.bp-rd__final-root-icon {
		inline-size: 38px !important;
		block-size: 38px !important;
		min-inline-size: 38px !important;
		min-block-size: 38px !important;
		max-inline-size: 38px !important;
		max-block-size: 38px !important;
		flex: 0 0 38px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important;
		inset: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.bp-rd__final .bp-rd__final-item--absorption i,
	.bp-rd__final .bp-rd__final-item--absorption svg,
	.bp-rd__final .bp-rd__final-item--absorption img,
	.bp-rd__final-absorption i,
	.bp-rd__final-absorption svg,
	.bp-rd__final-absorption img,
	.bp-rd__final-absorption-icon i,
	.bp-rd__final-absorption-icon svg,
	.bp-rd__final-absorption-icon img,
	.bp-rd__final-root-icon i,
	.bp-rd__final-root-icon svg,
	.bp-rd__final-root-icon img {
		inline-size: 26px !important;
		block-size: 26px !important;
		max-inline-size: 26px !important;
		max-block-size: 26px !important;
	}
	.bp-rd__final .bp-rd__final-item--absorption > .bp-rd__label,
	.bp-rd__final .bp-rd__final-item--absorption > .bp-rd__final-label,
	.bp-rd__final .bp-rd__final-item--absorption > [class*="label"],
	.bp-rd__final .bp-rd__final-item--absorption > [class*="text"]:not([class*="icon"]),
	.bp-rd__final-absorption > [class*="label"],
	.bp-rd__final-absorption > [class*="text"] {
		flex: 1 1 auto !important;
		min-inline-size: 0 !important;
		min-width: 0 !important;
		inline-size: auto !important;
		width: auto !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
	}

	/* Final block icons (droplet/leaf/root) — strictly 48px wrapper / 28–30px icon. */
	.bp-rd__final .bp-rd__icon,
	.bp-rd__final .bp-rd__feature-icon,
	.bp-rd__final .bp-rd__callout-icon,
	.bp-rd__final .bp-rd__process-icon,
	.bp-rd__final .bp-rd__card-icon,
	.bp-rd__final .bp-rd__final-icon,
	.bp-rd__final .bp-rd__final-ornament,
	.bp-rd__final .bp-rd__final-droplet,
	.bp-rd__final .bp-rd__final-leaf,
	.bp-rd__final .bp-rd__final-root,
	.bp-rd__final-icon,
	.bp-rd__final-droplet,
	.bp-rd__final-leaf,
	.bp-rd__final-root {
		inline-size: 48px !important;
		block-size: 48px !important;
		max-inline-size: 48px !important;
		max-block-size: 48px !important;
		min-inline-size: 48px !important;
		min-block-size: 48px !important;
		flex: 0 0 48px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.bp-rd__final .bp-rd__icon i,
	.bp-rd__final .bp-rd__icon svg,
	.bp-rd__final .bp-rd__icon img,
	.bp-rd__final .bp-rd__feature-icon i,
	.bp-rd__final .bp-rd__feature-icon svg,
	.bp-rd__final .bp-rd__feature-icon img,
	.bp-rd__final .bp-rd__callout-icon i,
	.bp-rd__final .bp-rd__callout-icon svg,
	.bp-rd__final .bp-rd__callout-icon img,
	.bp-rd__final .bp-rd__process-icon i,
	.bp-rd__final .bp-rd__process-icon svg,
	.bp-rd__final .bp-rd__process-icon img,
	.bp-rd__final .bp-rd__card-icon i,
	.bp-rd__final .bp-rd__card-icon svg,
	.bp-rd__final .bp-rd__card-icon img,
	.bp-rd__final .bp-rd__final-icon i,
	.bp-rd__final .bp-rd__final-icon svg,
	.bp-rd__final .bp-rd__final-icon img,
	.bp-rd__final-droplet i,
	.bp-rd__final-droplet svg,
	.bp-rd__final-droplet img,
	.bp-rd__final-leaf i,
	.bp-rd__final-leaf svg,
	.bp-rd__final-leaf img,
	.bp-rd__final-root i,
	.bp-rd__final-root svg,
	.bp-rd__final-root img {
		inline-size: 30px !important;
		block-size: 30px !important;
		max-inline-size: 30px !important;
		max-block-size: 30px !important;
	}

	/* Order: Nutriments → Text → Absorption */
	.bp-rd__final .bp-rd__final-item--nutrients,
	.bp-rd__final-nutrients,
	.bp-rd__final [class*="nutrient"] {
		order: 1 !important;
		grid-row: 1 !important;
	}
	.bp-rd__final .bp-rd__final-text,
	.bp-rd__final .bp-rd__final-result,
	.bp-rd__final .bp-rd__final-summary,
	.bp-rd__final-text,
	.bp-rd__final-result,
	.bp-rd__final-summary {
		order: 2 !important;
		grid-row: 2 !important;
	}
	.bp-rd__final .bp-rd__final-item--absorption,
	.bp-rd__final .bp-rd__final-item--root,
	.bp-rd__final-absorption,
	.bp-rd__final-root,
	.bp-rd__final [class*="absorption"],
	.bp-rd__final [class*="root"] {
		order: 3 !important;
		grid-row: 3 !important;
	}
	/* Reset restrictive min-inline-size across the whole widget on mobile. */
	.bp-rd,
	.bp-root-interaction-diagram,
	.bp-root-interaction-diagram *,
	.bp-rd * {
		min-inline-size: 0 !important;
	}

	/* ============================================================
	 * .bp-rd__final — LAST BLOCK + SIMPLE 3-ROW MOBILE LAYOUT
	 * Applies only at <= 480px. The desktop diagram is NOT
	 * preserved on mobile. Document order (sibling of
	 * .bp-rd__process) is the relationship — no order,
	 * grid-row, or absolute tricks used.
	 * ============================================================ */

	/* Simplify the final block itself: flex column, no desktop absolute. */
	.bp-rd__final,
	.bp-rd__final.is-revealed {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 16px !important;
		row-gap: 16px !important;
		column-gap: 16px !important;
		inline-size: 100% !important;
		width: 100% !important;
		max-inline-size: 100% !important;
		position: relative !important;
		min-block-size: 0 !important;
		min-height: 0 !important;
		block-size: auto !important;
		height: auto !important;
		overflow: clip !important;
		margin: 0 !important;
		padding: 14px 12px !important;
		box-sizing: border-box !important;
		background: var(--bp-rd-final-bg, #EDDBC3) !important;
		border-radius: 16px !important;
	}

	/* 3. ALL children reset to normal flow, no absolute positioning. */
	.bp-rd__final > *,
	.bp-rd__final.is-revealed > * {
		position: relative !important;
		inset: auto !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		transform: none !important;
		float: none !important;
		clear: none !important;
		margin: 0 !important;
	}

	/* 4. Hide ALL decorative elements / pseudo-elements inside the final block. */
	.bp-rd__final::before,
	.bp-rd__final::after,
	.bp-rd__final.is-revealed::before,
	.bp-rd__final.is-revealed::after,
	.bp-rd__final-ornament,
	.bp-rd__final-ornament--left,
	.bp-rd__final-ornament--right,
	.bp-rd__final-ornament--default,
	.bp-rd__final-ornament img,
	.bp-rd__final-ornament svg,
	.bp-rd__final-decoration,
	.bp-rd__final-deco,
	.bp-rd__final-square,
	.bp-rd__final-deco-square,
	.bp-rd__final-botanical,
	.bp-rd__final-leaf,
	.bp-rd__final-droplet,
	.bp-rd__final-root,
	.bp-rd__final-connector,
	.bp-rd__final-line,
	.bp-rd__final-bg,
	.bp-rd__final-veil,
	.bp-rd__final-blob,
	.bp-rd__final > img,
	.bp-rd__final > svg,
	.bp-rd__final > picture,
	.bp-rd__final > i,
	.bp-rd__final > [class*="botanical"],
	.bp-rd__final > [class*="decor"],
	.bp-rd__final > [class*="ornament"],
	.bp-rd__final > [class*="leaf"],
	.bp-rd__final > [class*="plant"],
	.bp-rd__final > [class*="droplet"],
	.bp-rd__final > [class*="root"],
	.bp-rd__final > [class*="square"],
	.bp-rd__final > [class*="blob"],
	.bp-rd__final > [class*="connector"],
	.bp-rd__final > [class*="line"],
	.bp-rd__final > [class*="veil"],
	.bp-rd__final > [class*="bg-"] {
		display: none !important;
		content: none !important;
	}

	/* 5. Nutrient row — icon + label horizontal, no overlap. */
	.bp-rd__final .bp-rd__final-item--nutrients,
	.bp-rd__final-nutrients,
	.bp-rd__final [class*="nutrient"]:not([class*="text"]) {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		inline-size: 100% !important;
		width: 100% !important;
		position: relative !important;
		inset: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
		order: 1 !important;
		grid-row: 1 !important;
		grid-column: 1 / -1 !important;
	}
	/* Nutrient icon wrappers — 38px. */
	.bp-rd__final .bp-rd__final-item--nutrients .bp-rd__icon,
	.bp-rd__final .bp-rd__final-item--nutrients .bp-rd__final-icon,
	.bp-rd__final .bp-rd__final-item--nutrients i,
	.bp-rd__final .bp-rd__final-item--nutrients svg,
	.bp-rd__final-nutrients .bp-rd__icon,
	.bp-rd__final-nutrients .bp-rd__final-icon,
	.bp-rd__final-nutrients i,
	.bp-rd__final-nutrients svg,
	.bp-rd__final-nutrients .bp-rd__final-nutrient-icon,
	.bp-rd__final .bp-rd__final-nutrient-icon,
	.bp-rd__final .bp-rd__final-nutrient-icons,
	.bp-rd__final .bp-rd__final-nutrient-icons > * {
		inline-size: 38px !important;
		block-size: 38px !important;
		min-inline-size: 38px !important;
		min-block-size: 38px !important;
		max-inline-size: 38px !important;
		max-block-size: 38px !important;
		flex: 0 0 38px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important;
		inset: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* Nutrient icon inner SVG/img — 26px. */
	.bp-rd__final .bp-rd__final-item--nutrients i,
	.bp-rd__final .bp-rd__final-item--nutrients svg,
	.bp-rd__final .bp-rd__final-item--nutrients img,
	.bp-rd__final-nutrients i,
	.bp-rd__final-nutrients svg,
	.bp-rd__final-nutrients img {
		inline-size: 26px !important;
		block-size: 26px !important;
		max-inline-size: 26px !important;
		max-block-size: 26px !important;
	}
	/* Nutrient text — flex:1, min-width:0, no overlap. */
	.bp-rd__final .bp-rd__final-item--nutrients > .bp-rd__label,
	.bp-rd__final .bp-rd__final-item--nutrients > .bp-rd__final-label,
	.bp-rd__final .bp-rd__final-item--nutrients > [class*="label"],
	.bp-rd__final .bp-rd__final-item--nutrients > [class*="text"]:not([class*="icon"]),
	.bp-rd__final-nutrients > [class*="label"],
	.bp-rd__final-nutrients > [class*="text"] {
		flex: 1 1 auto !important;
		min-inline-size: 0 !important;
		min-width: 0 !important;
		inline-size: auto !important;
		width: auto !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
	}

	/* 6. Beige statement — own row, centred, no overlap. */
	.bp-rd__final .bp-rd__final-text,
	.bp-rd__final-text,
	.bp-rd__final .bp-rd__final-result,
	.bp-rd__final-result,
	.bp-rd__final .bp-rd__final-summary,
	.bp-rd__final-summary,
	.bp-rd__final .bp-rd__final-statement,
	.bp-rd__final-statement {
		inline-size: 100% !important;
		width: 100% !important;
		max-inline-size: 100% !important;
		max-width: 100% !important;
		min-inline-size: 0 !important;
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		inset: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 20px 16px !important;
		box-sizing: border-box !important;
		text-align: center !important;
		font-size: 14.5px !important;
		line-height: 1.5 !important;
		order: 2 !important;
		grid-row: 2 !important;
		grid-column: 1 / -1 !important;
		background: transparent !important;
		z-index: 1 !important;
	}

	/* 7. Absorption row — icon + label horizontal, no overlap. */
	.bp-rd__final .bp-rd__final-item--absorption,
	.bp-rd__final .bp-rd__final-item--root,
	.bp-rd__final-absorption,
	.bp-rd__final-root,
	.bp-rd__final [class*="absorption"]:not([class*="text"]),
	.bp-rd__final [class*="root"]:not([class*="text"]) {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		inline-size: 100% !important;
		width: 100% !important;
		position: relative !important;
		inset: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
		order: 3 !important;
		grid-row: 3 !important;
		grid-column: 1 / -1 !important;
	}
	/* Absorption icon wrappers — 38px. */
	.bp-rd__final .bp-rd__final-item--absorption .bp-rd__icon,
	.bp-rd__final .bp-rd__final-item--absorption .bp-rd__final-icon,
	.bp-rd__final .bp-rd__final-item--absorption i,
	.bp-rd__final .bp-rd__final-item--absorption svg,
	.bp-rd__final-absorption .bp-rd__icon,
	.bp-rd__final-absorption .bp-rd__final-icon,
	.bp-rd__final-absorption i,
	.bp-rd__final-absorption svg,
	.bp-rd__final-absorption-icon,
	.bp-rd__final-root-icon {
		inline-size: 38px !important;
		block-size: 38px !important;
		min-inline-size: 38px !important;
		min-block-size: 38px !important;
		max-inline-size: 38px !important;
		max-block-size: 38px !important;
		flex: 0 0 38px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important;
		inset: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* Absorption icon inner SVG/img — 26px. */
	.bp-rd__final .bp-rd__final-item--absorption i,
	.bp-rd__final .bp-rd__final-item--absorption svg,
	.bp-rd__final .bp-rd__final-item--absorption img,
	.bp-rd__final-absorption i,
	.bp-rd__final-absorption svg,
	.bp-rd__final-absorption img,
	.bp-rd__final-absorption-icon i,
	.bp-rd__final-absorption-icon svg,
	.bp-rd__final-absorption-icon img,
	.bp-rd__final-root-icon i,
	.bp-rd__final-root-icon svg,
	.bp-rd__final-root-icon img {
		inline-size: 26px !important;
		block-size: 26px !important;
		max-inline-size: 26px !important;
		max-block-size: 26px !important;
	}
	/* Absorption text — flex:1, min-width:0, no overlap. */
	.bp-rd__final .bp-rd__final-item--absorption > .bp-rd__label,
	.bp-rd__final .bp-rd__final-item--absorption > .bp-rd__final-label,
	.bp-rd__final .bp-rd__final-item--absorption > [class*="label"],
	.bp-rd__final .bp-rd__final-item--absorption > [class*="text"]:not([class*="icon"]),
	.bp-rd__final-absorption > [class*="label"],
	.bp-rd__final-absorption > [class*="text"] {
		flex: 1 1 auto !important;
		min-inline-size: 0 !important;
		min-width: 0 !important;
		inline-size: auto !important;
		width: auto !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
	}
}

/* ---------------- Prevent horizontal scroll on mobile ---------------- */
@media (max-width: 768px) {
	.elementor .elementor-widget.elementor-widget-bp-root-interaction-diagram,
	.elementor-widget.elementor-widget-bp-root-interaction-diagram {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 100% !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}
}

/* ---------------- Safe-area insets (notched devices) ---------------- */
@supports (padding: max(0px)) {
	.bp-rd__inner {
		padding-inline-start: max(clamp(16px, 3vw, 24px), env(safe-area-inset-left));
		padding-inline-end:   max(clamp(16px, 3vw, 24px), env(safe-area-inset-right));
	}
}

/* ---------------- SMALL MOBILE (≤ 480px) ----------------
 * Root-interaction diagram cards stacked, diagram goes
 * above the description block. */
@media ( max-width: 480px ) {
	.bp-rd__inner {
		inline-size: calc(100% - 36px) !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		margin-inline: auto !important;
		padding-inline: 0 !important;
	}
	.bp-rd__cards {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		column-gap: 0 !important;
		row-gap: 16px !important;
		width: 100% !important;
	}
	.bp-rd__card,
	.bp-rd__diagram,
	.bp-rd__legend,
	.bp-rd__visual,
	.bp-rd__content {
		grid-column: 1 / -1 !important;
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}
	/* Real root-diagram wrappers forced vertical. */
	.bp-root-diagram,
	.bp-root-diagram__inner,
	.bp-root-diagram__main,
	.bp-root-diagram__row,
	.bp-root-diagram__grid,
	.bp-root-diagram__cards,
	.bp-root-diagram__content,
	.bp-root-diagram__visual,
	.bp-root-diagram__legend,
	.bp-root-diagram__zone {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		column-gap: 0 !important;
		row-gap: 16px !important;
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
	}
	.bp-root-diagram__zone,
	.bp-root-diagram__visual,
	.bp-root-diagram__legend,
	.bp-root-diagram__content,
	.bp-root-diagram__card,
	.bp-root-diagram > * {
		grid-column: 1 / -1 !important;
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}
	.bp-root-diagram img,
	.bp-root-diagram svg,
	.bp-root-diagram picture {
		position: static !important;
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		block-size: auto !important;
		inset: auto !important;
		transform: none !important;
	}
}

/* ---------------- ARABIC / RTL ----------------
 * Display family falls back to the Arabic family; the rest of
 * the layout mirrors automatically through logical properties. */
[lang="ar"] .bp-rd__title,
[dir="rtl"] .bp-rd__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

[lang="ar"] .bp-rd__final-text,
[dir="rtl"] .bp-rd__final-text {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
	.bp-root-diagram [data-bp-reveal],
	.bp-root-diagram [data-bp-stagger] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

/* ---------------- Elementor wrapper spacing ---------------- */
.e-con:has(> .elementor-widget-bp-root-interaction-diagram),
.e-con:has(> .e-con-inner > .elementor-widget-bp-root-interaction-diagram),
.e-con-inner:has(> .elementor-widget-bp-root-interaction-diagram) {
	--container-default-padding-top: 0px !important;
	--container-default-padding-bottom: 0px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.elementor-widget.elementor-widget-bp-root-interaction-diagram {
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

/* ---------------- Print ---------------- */
@media print {
	.elementor .elementor-widget.elementor-widget-bp-root-interaction-diagram,
	.elementor-widget.elementor-widget-bp-root-interaction-diagram {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}
	.bp-root-diagram { padding-block: 0; }
	.bp-rd__branch { display: none; }
}