/* BP Comment Utiliser — "AVANT DE COMMENCER" widget styles
 *
 * Premium intro / preparation section for the "Comment utiliser"
 * page. Explains what the user should understand BEFORE using
 * Barbary Plante (Identifier / Choisir / Adapter).
 *
 * Width architecture (HARD CONSTRAINT):
 *   .bp-cu-before                       <-- FULL viewport width
 *     .bp-cu-before__bg                 absolute, low-opacity photo
 *     .bp-cu-before__decor-layer        absolute, full-bleed
 *       .bp-cu-before__decor--left      anchored to SCREEN EDGE
 *       .bp-cu-before__decor--right     anchored to SCREEN EDGE
 *     .bp-cu-before__inner              <-- max 1140px centered
 *       .bp-cu-before__layout           2-column grid
 *         .bp-cu-before__intro-col      left intro + retenir card
 *         .bp-cu-before__composition-col  right composition
 *           .bp-cu-before__concept--top   IDENTIFIER (top center)
 *           .bp-cu-before__concept--left  CHOISIR (left of product)
 *           .bp-cu-before__visual         product image
 *           .bp-cu-before__concept--right ADAPTER (right of product)
 *     .bp-cu-before__inner--strip       second inner wrapper
 *       .bp-cu-before__strip            4-item summary
 *
 * Decoration layer sits OUTSIDE the 1140px inner wrapper so the
 * botanicals can reach the actual screen edges. Inner content is
 * centered with proper 18-20px mobile gutters.
 *
 * Approved palette:
 *   #374F37  deep green     (icons on light, dark circles)
 *   #FBF6EC  cream          (section bg, light card bg, icons in dark circles)
 *   #B8B25A  olive / gold   (accents, dividers)
 *   + existing neutrals (#1F2A1F, #5C6A5C, #E4DCCB).
 *
 * All visual rules use logical CSS properties (padding-inline,
 * inset-inline, border-inline-start) so the same stylesheet
 * covers /ar/ without a separate RTL file.
 */

/* =========================================================
 * ROOT
 * ========================================================= */
.bp-cu-before {
	--bp-cub-green:       #374F37;
	--bp-cub-olive:       #B8B25A;
	--bp-cub-cream:       #FBF6EC;
	--bp-cub-cream-soft:  #F5EFE0;
	--bp-cub-text:        #1F2A1F;
	--bp-cub-text-muted:  #5C6A5C;
	--bp-cub-border:      #E4DCCB;
	--bp-cub-white:       #FFFFFF;

	--bp-cub-inner-max:   1140px;
	--bp-cub-decor-x:     0px;
	--bp-cub-decor-y:     0px;
	--bp-cub-decor-rot:   0deg;

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

	position: relative;
	isolation: isolate;
	inline-size: 100vw;
	max-inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: 80px 24px;
	padding-inline: 0;
	background-color: var(--bp-cub-cream);
	color: var(--bp-cub-text);
	font-family: var(--bp-cub-font-body);
	overflow: hidden;
}

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

/* =========================================================
 * BACKGROUND IMAGE
 * ========================================================= */
.bp-cu-before__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	opacity: 0;
	pointer-events: none;
	display: none;
}

/* =========================================================
 * BOTANICAL DECORATIONS — anchored to SCREEN EDGE
 * ========================================================= */
.bp-cu-before__decor-layer {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.bp-cu-before__decor {
	--bp-cub-decor-x:   0px;
	--bp-cub-decor-y:   0px;
	--bp-cub-decor-rot: 0deg;

	position: absolute;
	z-index: 1;
	pointer-events: none;
	display: none;
	color: var(--bp-cub-green);
	inline-size: 260px;
	block-size: auto;
	transform: translate(var(--bp-cub-decor-x), var(--bp-cub-decor-y)) rotate(var(--bp-cub-decor-rot));
	transform-origin: center center;
}

.bp-cu-before__decor.is-on {
	display: block;
}

.bp-cu-before__decor-img,
.bp-cu-before__decor-svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
	color: currentColor;
}

.bp-cu-before__decor--left {
	inset-block-start: 40px;
	/* Physical anchor: same FR side in /ar/ (no RTL mirror). */
	left: 0;
	right: auto;
}
.bp-cu-before__decor--right {
	inset-block-start: 60px;
	right: 0;
	left: auto;
}

/* =========================================================
 * INNER WRAPPER (1140px content)
 * ========================================================= */
.bp-cu-before__inner {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: var(--bp-cub-inner-max);
	margin-inline: auto;
	padding-inline: 0;
}

.bp-cu-before__inner--strip {
	margin-block-start: 40px;
}

/* =========================================================
 * LAYOUT — 2 columns (intro + composition)
 * ========================================================= */
.bp-cu-before__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
	padding-inline: 0;
}

/* =========================================================
 * LEFT INTRO COLUMN
 * ========================================================= */
.bp-cu-before__intro-col {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-inline-size: 460px;
	padding-inline: 0;
}

.bp-cu-before__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--bp-cub-green);
	font-family: var(--bp-cub-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	line-height: 1;
}

.bp-cu-before__eyebrow-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18px;
	block-size: 18px;
	color: var(--bp-cub-green);
}
.bp-cu-before__eyebrow-leaf svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.bp-cu-before__title {
	margin: 0;
	color: var(--bp-cub-green);
	font-family: var(--bp-cub-font-display);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.005em;
	font-size: 52px;
}

.bp-cu-before__divider {
	display: inline-block;
	inline-size: 64px;
	block-size: 1.5px;
	background: var(--bp-cub-olive);
	opacity: 0.85;
}

.bp-cu-before__intro {
	margin: 0;
	color: var(--bp-cub-text);
	font-family: var(--bp-cub-font-body);
	font-size: 15px;
	line-height: 1.65;
	max-inline-size: 420px;
}

/* =========================================================
 * À RETENIR CARD
 * ========================================================= */
.bp-cu-before__retenir {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-block-start: 14px;
	padding: 18px 20px;
	background-color: var(--bp-cub-cream);
	border: 1px solid var(--bp-cub-border);
	border-radius: 16px;
	box-shadow: 0 10px 30px -22px rgba(55, 79, 55, 0.35);
}

.bp-cu-before__retenir-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 42px;
	block-size: 42px;
	border-radius: 999px;
	background-color: var(--bp-cub-green);
	color: var(--bp-cub-cream);
}
.bp-cu-before__retenir-icon svg,
.bp-cu-before__retenir-icon i {
	inline-size: 18px;
	block-size: 18px;
	font-size: 18px;
}

.bp-cu-before__retenir-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-inline-size: 0;
}

.bp-cu-before__retenir-title {
	margin: 0;
	font-family: var(--bp-cub-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-cub-green);
}

.bp-cu-before__retenir-text {
	margin: 0;
	color: var(--bp-cub-text);
	font-family: var(--bp-cub-font-body);
	font-size: 13.5px;
	line-height: 1.55;
}

/* =========================================================
 * RIGHT COMPOSITION COLUMN
 * Holds the visual + 3 concept blocks arranged around it
 * with a subtle SVG connector system.
 * ========================================================= */
.bp-cu-before__composition-col {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	gap: 16px 18px;
	align-items: start;
	padding-block: 12px;
	min-block-size: 480px;
}

.bp-cu-before__connectors {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	color: var(--bp-cub-olive);
	opacity: 0.85;
	pointer-events: none;
	z-index: 0;
}

/* Concept 1 — IDENTIFIER (top, spans all 3 columns) */
.bp-cu-before__concept--top {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	padding-block: 0;
	z-index: 2;
}

.bp-cu-before__concept--top .bp-cu-before__concept-icon {
	inline-size: 56px;
	block-size: 56px;
}

/* Concept 2 — CHOISIR (left of product) */
.bp-cu-before__concept--left {
	grid-column: 1;
	grid-row: 2 / span 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	padding-block: 24px;
	z-index: 2;
}

/* Product visual (center, column 2) */
.bp-cu-before__visual {
	grid-column: 2;
	grid-row: 2 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	min-inline-size: 0;
	min-block-size: 0;
}

.bp-cu-before__visual-frame {
	display: block;
	inline-size: 100%;
	max-inline-size: 520px;
	margin-inline: auto;
}

.bp-cu-before__visual-image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 460px;
	object-fit: contain;
}

.bp-cu-before__visual-placeholder {
	display: block;
	inline-size: 100%;
	max-inline-size: 480px;
	margin-inline: auto;
	color: var(--bp-cub-green);
	opacity: 0.55;
}
.bp-cu-before__visual-placeholder svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Concept 3 — ADAPTER (right of product) */
.bp-cu-before__concept--right {
	grid-column: 3;
	grid-row: 2 / span 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	padding-block: 24px;
	z-index: 2;
}

/* Concept base styling */
.bp-cu-before__concept-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 999px;
	background-color: var(--bp-cub-cream);
	border: 1.5px solid var(--bp-cub-green);
	color: var(--bp-cub-green);
}
.bp-cu-before__concept-icon svg,
.bp-cu-before__concept-icon i {
	inline-size: 22px;
	block-size: 22px;
	font-size: 22px;
}

.bp-cu-before__concept-title {
	margin: 0;
	color: var(--bp-cub-green);
	font-family: var(--bp-cub-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.bp-cu-before__concept-line {
	display: block;
	inline-size: 24px;
	block-size: 1.5px;
	background: var(--bp-cub-olive);
	opacity: 0.9;
	margin-block: 2px;
}

.bp-cu-before__concept-text {
	margin: 0;
	color: var(--bp-cub-text);
	font-family: var(--bp-cub-font-body);
	font-size: 13px;
	line-height: 1.5;
	max-inline-size: 220px;
}

/* =========================================================
 * CHOISIR PILLS (G3 / G4)
 * ========================================================= */
.bp-cu-before__pills {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-block-start: 6px;
}

.bp-cu-before__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 6px;
	background: var(--bp-cub-white);
	border: 1px solid var(--bp-cub-border);
	border-radius: 999px;
	box-shadow: 0 6px 16px -14px rgba(55, 79, 55, 0.3);
	font-family: var(--bp-cub-font-body);
}

.bp-cu-before__pill-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 999px;
	background: var(--bp-cub-green);
	color: var(--bp-cub-cream);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.bp-cu-before__pill-desc {
	color: var(--bp-cub-text);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bp-cu-before__pill-or {
	color: var(--bp-cub-text-muted);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* =========================================================
 * ADAPTER CULTURE LIST
 * ========================================================= */
.bp-cu-before__cultures {
	list-style: none;
	margin: 6px 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	inline-size: 100%;
	max-inline-size: 240px;
}

.bp-cu-before__culture {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	background: var(--bp-cub-cream);
	border: 1px solid var(--bp-cub-border);
	border-radius: 999px;
	font-family: var(--bp-cub-font-body);
}

.bp-cu-before__culture-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 999px;
	background: var(--bp-cub-green);
	color: var(--bp-cub-cream);
	flex: 0 0 auto;
}
.bp-cu-before__culture-icon svg,
.bp-cu-before__culture-icon i {
	inline-size: 12px;
	block-size: 12px;
	font-size: 12px;
}

.bp-cu-before__culture-label {
	color: var(--bp-cub-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* =========================================================
 * BOTTOM SUMMARY STRIP
 * 4 items on desktop, single column on mobile.
 * ========================================================= */
.bp-cu-before__strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	background: var(--bp-cub-cream-soft);
	border: 1px solid var(--bp-cub-border);
	border-radius: 16px;
	padding: 14px 18px;
	box-shadow: 0 14px 36px -28px rgba(55, 79, 55, 0.35);
	inline-size: 100%;
}

.bp-cu-before__summary-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-inline: 18px;
	padding-block: 8px;
	min-inline-size: 0;
}
.bp-cu-before__summary-item:first-child {
	padding-inline-start: 6px;
}
.bp-cu-before__summary-item + .bp-cu-before__summary-item {
	border-inline-start: 1px solid rgba(55, 79, 55, 0.18);
}

.bp-cu-before__summary-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 999px;
	background: rgba(55, 79, 55, 0.08);
	color: var(--bp-cub-green);
}
.bp-cu-before__summary-icon svg,
.bp-cu-before__summary-icon i {
	inline-size: 16px;
	block-size: 16px;
	font-size: 16px;
}

.bp-cu-before__summary-item.is-prominent .bp-cu-before__summary-icon {
	background: var(--bp-cub-green);
	color: var(--bp-cub-cream);
}

.bp-cu-before__summary-text {
	color: var(--bp-cub-text);
	font-family: var(--bp-cub-font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	min-inline-size: 0;
}
.bp-cu-before__summary-item.is-prominent .bp-cu-before__summary-text {
	font-weight: 600;
}

/* =========================================================
 * ICON COLORS (forced, scoped)
 *   Light / cream background → dark green #374F37
 *   Dark green circle        → cream #FBF6EC
 * Scoped ONLY to this widget; no global svg/path rules.
 * ========================================================= */
.bp-cu-before .bp-cu-before__retenir-icon,
.bp-cu-before .bp-cu-before__retenir-icon svg,
.bp-cu-before .bp-cu-before__retenir-icon i,
.bp-cu-before .bp-cu-before__retenir-icon svg * {
	color: #FBF6EC;
	fill: #FBF6EC;
	stroke: #FBF6EC;
}

.bp-cu-before .bp-cu-before__concept-icon,
.bp-cu-before .bp-cu-before__concept-icon svg,
.bp-cu-before .bp-cu-before__concept-icon i,
.bp-cu-before .bp-cu-before__concept-icon svg * {
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}

.bp-cu-before .bp-cu-before__eyebrow,
.bp-cu-before .bp-cu-before__eyebrow svg,
.bp-cu-before .bp-cu-before__eyebrow svg * {
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}

.bp-cu-before .bp-cu-before__pill-label,
.bp-cu-before .bp-cu-before__pill-label svg,
.bp-cu-before .bp-cu-before__pill-label svg * {
	color: #FBF6EC;
	fill: #FBF6EC;
	stroke: #FBF6EC;
}

.bp-cu-before .bp-cu-before__culture-icon,
.bp-cu-before .bp-cu-before__culture-icon svg,
.bp-cu-before .bp-cu-before__culture-icon i,
.bp-cu-before .bp-cu-before__culture-icon svg * {
	color: #FBF6EC;
	fill: #FBF6EC;
	stroke: #FBF6EC;
}

.bp-cu-before .bp-cu-before__summary-icon,
.bp-cu-before .bp-cu-before__summary-icon svg,
.bp-cu-before .bp-cu-before__summary-icon i,
.bp-cu-before .bp-cu-before__summary-icon svg * {
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}

.bp-cu-before .bp-cu-before__summary-item.is-prominent .bp-cu-before__summary-icon,
.bp-cu-before .bp-cu-before__summary-item.is-prominent .bp-cu-before__summary-icon svg,
.bp-cu-before .bp-cu-before__summary-item.is-prominent .bp-cu-before__summary-icon i,
.bp-cu-before .bp-cu-before__summary-item.is-prominent .bp-cu-before__summary-icon svg * {
	color: #FBF6EC;
	fill: #FBF6EC;
	stroke: #FBF6EC;
}

/* =========================================================
 * ELEMENTOR WIDGET WRAPPER — keep our own breakout consistent
 * ========================================================= */
.elementor .elementor-widget.elementor-widget-bp-comment-utiliser-before,
.elementor-widget.elementor-widget-bp-comment-utiliser-before {
	inline-size: 100vw;
	max-inline-size: 100vw;
	min-inline-size: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end:   calc(50% - 50vw);
	position: relative;
	z-index: 1;
	overflow-x: clip;
}

/* =========================================================
 * TABLET (769–1024)
 * ========================================================= */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-cu-before { padding-block: 60px 20px; }

	.bp-cu-before__layout {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: 28px;
	}

	.bp-cu-before__title { font-size: 42px; }
	.bp-cu-before__intro { font-size: 14.5px; max-inline-size: 100%; }

	.bp-cu-before__composition-col {
		min-block-size: 420px;
		gap: 14px;
	}

	.bp-cu-before__concept-icon { inline-size: 54px; block-size: 54px; }
	.bp-cu-before__concept--top .bp-cu-before__concept-icon { inline-size: 48px; block-size: 48px; }
	.bp-cu-before__concept-text { font-size: 12.5px; max-inline-size: 180px; }

	.bp-cu-before__visual-image { max-block-size: 360px; }

	.bp-cu-before__strip {
		padding: 12px 14px;
	}
	.bp-cu-before__summary-item { padding-inline: 12px; }
	.bp-cu-before__summary-text { font-size: 12.5px; }
	.bp-cu-before__summary-icon { inline-size: 34px; block-size: 34px; }
}

/* =========================================================
 * MOBILE (<= 768)
 * Intentional stacked composition:
 *   intro → identifier → visual → choisir → adapter → retenir → strip
 * The desktop connector system disappears.
 * ========================================================= */
@media ( max-width: 768px ) {
	.bp-cu-before {
		padding-block: 56px 18px;
	}

	.bp-cu-before__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding-inline: 20px;
	}

	.bp-cu-before__intro-col {
		max-inline-size: 100%;
		gap: 18px;
	}

	.bp-cu-before__title { font-size: 36px; line-height: 1.05; }
	.bp-cu-before__intro { max-inline-size: 100%; font-size: 15px; }

	.bp-cu-before__composition-col {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding-block: 0;
		min-block-size: 0;
	}
	.bp-cu-before__connectors { display: none; }

	.bp-cu-before__concept--top,
	.bp-cu-before__concept--left,
	.bp-cu-before__concept--right {
		grid-column: auto;
		grid-row: auto;
		padding-block: 0;
		text-align: start;
		align-items: center;
	}

	.bp-cu-before__concept-text { max-inline-size: 360px; }

	.bp-cu-before__visual-image { max-block-size: 320px; }

	.bp-cu-before__retenir { margin-block-start: 6px; }

	.bp-cu-before__inner--strip {
		margin-block-start: 24px;
		padding-inline: 20px;
	}
	.bp-cu-before__strip {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 12px 14px;
	}
	.bp-cu-before__summary-item {
		padding-block: 12px;
		padding-inline: 0;
		border-inline-start: 0 !important;
		border-block-start: 1px solid rgba(55, 79, 55, 0.18);
	}
	.bp-cu-before__summary-item:first-child {
		padding-block-start: 4px;
		border-block-start: 0;
	}
	.bp-cu-before__summary-icon { inline-size: 36px; block-size: 36px; }
	.bp-cu-before__summary-text { font-size: 13.5px; }
}

/* ≤ 480 — MOBILE REBUILD */
@media ( max-width: 480px ) {
	/* === ROOT: kill the width bug === */
	.elementor-widget.elementor-widget-bp-comment-utiliser-before,
	.elementor .elementor-widget.elementor-widget-bp-comment-utiliser-before {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		margin-inline: 0 !important;
		overflow-x: clip;
	}
	.bp-cu-before {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		margin-inline: 0 !important;
		padding-block: 48px 14px;
		height: auto;
		min-height: 0;
	}

	/* === INNER: real content wrapper === */
	.bp-cu-before__inner,
	.bp-cu-before__inner--strip {
		inline-size: calc(100% - 36px) !important;
		width: calc(100% - 36px) !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		margin-inline: auto !important;
		padding-inline: 0 !important;
	}
	.bp-cu-before__inner--strip {
		margin-block-start: 18px;
	}

	/* === Hide decorative botanicals === */
	.bp-cu-before__decor { display: none !important; }

	/* === LAYOUT GRID → 1 column === */
	.bp-cu-before__layout {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		gap: 16px !important;
		width: 100% !important;
		padding-inline: 0 !important;
	}
	.bp-cu-before__layout > * {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		max-width: none !important;
		min-inline-size: 0 !important;
	}

	/* === INTRO COL === */
	.bp-cu-before__intro-col {
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		width: 100% !important;
		gap: 18px;
	}
	.bp-cu-before__intro {
		max-inline-size: 100% !important;
		font-size: 14.5px;
	}

	/* === COMPOSITION COL → vertical flow === */
	.bp-cu-before__composition-col {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 18px !important;
		padding-block: 0;
		min-block-size: 0;
		min-inline-size: 0 !important;
		width: 100% !important;
	}
	/* Force the product visual to be the FIRST element in the
	 * composition column on mobile. */
	.bp-cu-before__visual {
		order: -1 !important;
		grid-row: 1 !important;
		grid-column: 1 / -1 !important;
	}
	.bp-cu-before__composition-col > * {
		width: 100% !important;
		max-width: none !important;
		flex: 0 0 auto !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		transform: none !important;
		grid-column: auto !important;
		grid-row: auto !important;
		padding-block: 0;
		text-align: start;
	}
	.bp-cu-before__connectors { display: none; }
	.bp-cu-before__visual { min-block-size: 0; }
	.bp-cu-before__visual-image { max-block-size: 260px; }
	.bp-cu-before__visual-frame,
	.bp-cu-before__visual-placeholder { max-inline-size: 100%; }
	.bp-cu-before__concept-text { max-inline-size: 100%; }
	.bp-cu-before__cultures { max-inline-size: 100%; }

	/* === RETENIR CARD === */
	.bp-cu-before__retenir {
		margin-block-start: 6px;
		padding: 16px;
	}
	.bp-cu-before__retenir-text { font-size: 13px; }

	/* === BOTTOM STRIP → 1 col === */
	.bp-cu-before__strip {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		gap: 0 !important;
		padding: 12px 14px;
		width: 100% !important;
	}
	.bp-cu-before__strip > * {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		max-width: none !important;
		min-inline-size: 0 !important;
	}
	.bp-cu-before__summary-item {
		padding-block: 12px;
		padding-inline: 0;
		border-inline-start: 0 !important;
		border-block-start: 1px solid rgba(55, 79, 55, 0.18);
	}
	.bp-cu-before__summary-item:first-child {
		padding-block-start: 4px;
		border-block-start: 0;
	}
	.bp-cu-before__summary-icon { inline-size: 36px; block-size: 36px; }
	.bp-cu-before__summary-text { font-size: 13.5px; }
}

/* ≤ 430 */
@media ( max-width: 430px ) {
	.bp-cu-before__layout { padding-inline: 18px; gap: 24px; }
	.bp-cu-before__title { font-size: 30px; }
	.bp-cu-before__eyebrow { font-size: 11px; letter-spacing: 0.2em; }
	.bp-cu-before__intro { font-size: 14px; }
}

/* ≤ 390 */
@media ( max-width: 390px ) {
	.bp-cu-before { padding-block: 42px 12px; }
	.bp-cu-before__layout { padding-inline: 18px; }
	.bp-cu-before__title { font-size: 28px; }
	.bp-cu-before__visual-image { max-block-size: 240px; }
	.bp-cu-before__inner--strip { padding-inline: 18px; }
	.bp-cu-before__summary-text { font-size: 13px; }
}

/* ≤ 375 */
@media ( max-width: 375px ) {
	.bp-cu-before__layout { padding-inline: 18px; gap: 22px; }
	.bp-cu-before__title { font-size: 26px; }
	.bp-cu-before__intro { font-size: 13.5px; }
	.bp-cu-before__retenir { padding: 14px; }
	.bp-cu-before__retenir-text { font-size: 13px; }
}

/* ≤ 360 */
@media ( max-width: 360px ) {
	.bp-cu-before { padding-block: 36px 10px; }
	.bp-cu-before__layout { padding-inline: 16px; gap: 20px; }
	.bp-cu-before__title { font-size: 24px; }
	.bp-cu-before__eyebrow { font-size: 10px; letter-spacing: 0.16em; }
	.bp-cu-before__intro { font-size: 13px; }
	.bp-cu-before__visual-image { max-block-size: 220px; }
	.bp-cu-before__inner--strip { padding-inline: 16px; }
	.bp-cu-before__summary-text { font-size: 12.5px; }
}

/* =========================================================
 * ARABIC / RTL
 * Display headline uses the Arabic family. Layout mirrors
 * automatically via logical properties.
 * ========================================================= */
[lang="ar"] .bp-cu-before__title,
[dir="rtl"] .bp-cu-before__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: 0;
}
[lang="ar"] .bp-cu-before__retenir-title,
[lang="ar"] .bp-cu-before__concept-title,
[lang="ar"] .bp-cu-before__eyebrow,
[lang="ar"] .bp-cu-before__pill-desc,
[lang="ar"] .bp-cu-before__culture-label {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
}

/* In RTL the concept blocks should still sit on the correct
 * sides of the visual. The grid column order stays the same
 * (top / left / right by grid position) but the textual order
 * reads RTL. Concept titles should be centered like LTR. */
[dir="rtl"] .bp-cu-before__composition-col,
[lang="ar"] .bp-cu-before__composition-col {
	direction: ltr; /* keep grid composition symmetric */
}
[dir="rtl"] .bp-cu-before__composition-col > *,
[lang="ar"] .bp-cu-before__composition-col > * {
	direction: rtl; /* re-establish RTL reading order inside each concept */
}
/* Connectors are decorative curves connecting concept blocks.
 * They must keep the SAME visual composition in AR (no RTL mirror). */

/* =========================================================
 * REDUCED MOTION
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.bp-cu-before [data-bp-reveal],
	.bp-cu-before [data-bp-stagger] {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}