/* BP G4 Preparation widget styles
 *
 * Tunisia product page section:
 *   "PRÉPARATION DU G4 / Transformer le G4 déshydraté
 *    en version hydratée."
 *
 * Layout:
 *   - full-width section, soft cream background, no outer card
 *   - centered inner (`max-inline-size: 1140px`, `inline-size: calc(100% - 40px)`)
 *   - subtle agricultural line-art botanicals on the far left and
 *     right, absolutely positioned, faded with default 50% opacity
 *   - centered header: eyebrow (gold line + tiny leaf + uppercase
 *     label + tiny leaf + gold line) + serif title + subtitle
 *   - 4 step cards in a single horizontal row on desktop, each
 *     equal width, cream-white surface, thin border, soft shadow;
 *     small dark-green circular number badge above each card;
 *     gold arrow connector between cards (centered vertically)
 *   - bottom horizontal strip: 6 compact rounded tiles (icon +
 *     text), each with the same rounded style, thin border,
 *     subtle shadow
 *   - bottom centered note with small leaf ornaments on each side
 *
 * Mobile:
 *   - the 4 step cards stack vertically; horizontal arrows
 *     become vertical flow between steps; number badges remain
 *   - the 6 tiles collapse to a 2-column grid then 1 column
 *   - botanicals hide on small screens so they never crowd
 *     the content
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #EDDBC3  cream
 *   #B8B25A  olive / gold
 *   #FFFFFF  white
 *   plus existing neutral tokens (#F8F4ED, #FBF6EC, #E4DCCB,
 *   #1F2A1F, #5C6A5C). No invented greens.
 *
 * All rules are scoped under `.bp-g4-preparation` and use logical
 * CSS properties so LTR and RTL share the same ruleset.
 */

.bp-g4-preparation {
	/* ---- Theme tokens (approved palette only) ---- */
	--bp-g4p-bg:            #F8F4ED;
	--bp-g4p-card-bg:       #FFFFFF;
	--bp-g4p-card-border:   #E4DCCB;
	--bp-g4p-card-radius:   14px;
	--bp-g4p-tile-bg:       #FFFFFF;
	--bp-g4p-tile-border:   #E4DCCB;
	--bp-g4p-tile-radius:   10px;

	--bp-g4p-green:         #374F37;
	--bp-g4p-olive:         #B8B25A;
	--bp-g4p-cream:         #EDDBC3;
	--bp-g4p-white:         #FFFFFF;
	--bp-g4p-text:          #1F2A1F;
	--bp-g4p-text-muted:    #5C6A5C;
	--bp-g4p-shadow:        0 6px 18px rgba(55, 79, 55, 0.07);

	--bp-g4p-inner-max:     1140px;
	--bp-g4p-steps-gap:     12px;
	--bp-g4p-tiles-gap:     12px;
	--bp-g4p-image-height:  170px;
	--bp-g4p-number-size:   44px;
	--bp-g4p-arrow-size:    34px;
	--bp-g4p-card-pad-top:  56px;

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

	/* Per-botanical X/Y CSS variables. Written inline by Elementor
	 * per-device so the editor can freely adjust position without
	 * touching CSS. */
	--bp-g4p-left-x:        0px;
	--bp-g4p-left-y:        0px;
	--bp-g4p-right-x:       0px;
	--bp-g4p-right-y:       0px;

	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-g4p-bg);
	color: var(--bp-g4p-text);
	font-family: var(--bp-g4p-font-body);
}

.bp-g4-preparation *,
.bp-g4-preparation *::before,
.bp-g4-preparation *::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-g4-preparation,
.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-g4-preparation,
.elementor .bp-g4-preparation,
.e-con.bp-g4-preparation,
.bp-g4-preparation {
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
}

.elementor .elementor-widget.elementor-widget-bp-g4-preparation,
.elementor-widget.elementor-widget-bp-g4-preparation {
	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;
}

/* ---------------- Decorative botanicals (background) ----------------
 * The two side botanicals sit behind the section content. They use
 * the olive/gold color and a built-in subtle agricultural line-art
 * SVG by default. pointer-events: none keeps them from intercepting
 * clicks. They never affect layout. */
.bp-g4-preparation__botanical {
	position: absolute;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-g4p-olive);
	inline-size: 220px;
}

.bp-g4-preparation__botanical--left {
	inset-block-start: 0;
	left: 0;
	right: auto;
	transform: translate(
		var(--bp-g4p-left-x, 0px),
		var(--bp-g4p-left-y, 0px)
	);
}

.bp-g4-preparation__botanical--right {
	inset-block-start: 0;
	right: 0;
	left: auto;
	transform: translate(
		var(--bp-g4p-right-x, 0px),
		var(--bp-g4p-right-y, 0px)
	);
}

.bp-g4-preparation__botanical--default {
	opacity: 0.5;
}

.bp-g4-preparation__botanical img,
.bp-g4-preparation__botanical-svg {
	inline-size: 100%;
	block-size: auto;
	max-block-size: 360px;
	display: block;
	color: inherit;
	fill: none;
	stroke: currentColor;
}

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

/* ---------------- Header ---------------- */
.bp-g4-preparation__header {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
}

.bp-g4-preparation__eyebrow {
	position: relative;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--bp-g4p-green);
	font-family: var(--bp-g4p-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	line-height: 1.3;
	flex-wrap: wrap;
}

.bp-g4-preparation__eyebrow-line {
	inline-size: 44px;
	block-size: 1px;
	background-color: var(--bp-g4p-olive);
	flex: 0 0 auto;
}

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

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

.bp-g4-preparation__title {
	margin: 0;
	color: #374F3C;
	font-family: var(--bp-g4p-font-display);
	font-weight: 400;
	font-size: clamp(36px, 3.8vw, 50px);
	line-height: 1.12;
	letter-spacing: 0.005em;
	max-inline-size: 980px;
}

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

/* ---------------- 4 process steps ----------------
 * The .bp-g4-preparation__steps list is a CSS grid with 4 equal
 * columns on desktop. Each .bp-g4-preparation__step is a flex
 * COLUMN so the number badge, the card, and the arrow stack
 * vertically. The arrow between cards is centered vertically
 * with `align-self: center` and absolutely positioned in the
 * middle of the row by using a transform.
 */
.bp-g4-preparation__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--bp-g4p-steps-gap);
	row-gap: 24px;
	position: relative;
	z-index: 1;
	/* `align-items: stretch` (grid default) makes every step
	 * fill the row height. This is the parent that guarantees
	 * all four cards share ONE identical outer height. */
	align-items: stretch;
}

.bp-g4-preparation__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-inline-size: 0;
	min-block-size: 0;
	/* The step itself stretches to the row height (grid
	 * `align-items: stretch` from the parent). The card below
	 * uses `flex: 1 1 auto` so it fills the remaining height
	 * after the number badge. */
	flex: 0 0 auto;
}

/* Number badge: dark-green circle sitting on top of the card
 * border. Anchored to the step's own flex column so the half-
 * overflow visually rests on the card's top edge. */
.bp-g4-preparation__number {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-g4p-number-size);
	block-size: var(--bp-g4p-number-size);
	border-radius: 50%;
	background-color: var(--bp-g4p-green);
	color: var(--bp-g4p-white);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	z-index: 3;
	margin-block-end: calc( var(--bp-g4p-number-size) / -2 + 1px );
	box-shadow: 0 4px 10px rgba(31, 42, 31, 0.18);
}

/* Card: cream-white, thin border, rounded, soft shadow.
 * Internal flex column so the image keeps a fixed pixel height
 * and the title/description sit centered below.
 *
 * Equal-height strategy:
 *   - The step is `display: flex; flex-direction: column;` and
 *     stretches to the row height (grid `align-items: stretch`).
 *   - The number badge is `flex: 0 0 auto` (sits at the top).
 *   - The card uses `flex: 1 1 auto` + `min-block-size: 0` so it
 *     fills the step's remaining height, matching the tallest
 *     card in the row (no manual per-card heights, no negative
 *     margins, no text shrink).
 *   - The card body uses `flex: 1 1 auto` so the lower content
 *     fills the card's remaining height after the image block.
 */
.bp-g4-preparation__card {
	position: relative;
	inline-size: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background-color: var(--bp-g4p-card-bg);
	border: 1px solid var(--bp-g4p-card-border);
	border-radius: var(--bp-g4p-card-radius);
	box-shadow: var(--bp-g4p-shadow);
	overflow: hidden;
	min-inline-size: 0;
	min-block-size: 0;
	flex: 1 1 auto;
	height: 100%;
	z-index: 1;
}

.bp-g4-preparation__image {
	inline-size: 100%;
	block-size: var(--bp-g4p-image-height);
	background-color: rgba(184, 178, 90, 0.06);
	overflow: hidden;
}

.bp-g4-preparation__image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

.bp-g4-preparation__card-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding-block-start: 18px;
	padding-block-end: 22px;
	padding-inline: 14px;
}

.bp-g4-preparation__step-title {
	margin: 0;
	color: var(--bp-g4p-green);
	font-family: var(--bp-g4p-font-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.bp-g4-preparation__step-desc {
	margin: 0;
	color: var(--bp-g4p-text);
	font-family: var(--bp-g4p-font-body);
	font-size: 13.5px;
	line-height: 1.55;
	max-inline-size: 32ch;
}

/* Arrow connector: absolute gold circle with a right arrow icon.
 *
 * STACKING STRATEGY:
 *   - The .bp-g4-preparation__steps grid is `position: relative`
 *     and acts as the containing block for these absolute arrows.
 *   - The cards inside the steps have `position: relative;
 *     z-index: 1` and `overflow: hidden` (so the image is clipped
 *     to the rounded card). The cards live in the grid's stacking
 *     context.
 *   - The arrows are direct children of the grid, NOT inside any
 *     step / card. They are positioned with `position: absolute;
 *     z-index: 10` so they paint ON TOP of every card and are
 *     never clipped by the card's `overflow: hidden`. They are
 *     also DOM-ordered AFTER the steps, which guarantees they
 *     win over later-painted cards.
 *   - `pointer-events: none` keeps them purely decorative.
 *   - On mobile (≤768) the arrows are hidden by `display: none`
 *     so the per-step vertical flow stays clean.
 */
.bp-g4-preparation__arrow {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-g4p-arrow-size);
	block-size: var(--bp-g4p-arrow-size);
	color: var(--bp-g4p-olive);
	background-color: var(--bp-g4p-bg);
	border-radius: 50%;
	z-index: 10;
	pointer-events: none;
}

/* Position each arrow at the gap between the corresponding
 * pair of cards. The .bp-g4-preparation__steps grid is a
 * 4-column grid with `column-gap: 12px`. The gap centers are
 * at 25%, 50%, 75% of the grid width (the small 3-9px offset
 * caused by the column-gap is well within the 34px arrow and
 * is not visually noticeable). */
.bp-g4-preparation__arrow--1-2 { left: 25%; }
.bp-g4-preparation__arrow--2-3 { left: 50%; }
.bp-g4-preparation__arrow--3-4 { left: 75%; }

.bp-g4-preparation__arrow-svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
	color: inherit;
}

/* ---------------- 6 info tiles (bottom strip) ---------------- */
.bp-g4-preparation__tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: var(--bp-g4p-tiles-gap);
	row-gap: 12px;
	position: relative;
	z-index: 2;
}

.bp-g4-preparation__tile {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background-color: var(--bp-g4p-tile-bg);
	border: 1px solid var(--bp-g4p-tile-border);
	border-radius: var(--bp-g4p-tile-radius);
	box-shadow: var(--bp-g4p-shadow);
	min-inline-size: 0;
	min-block-size: 64px;
}

.bp-g4-preparation__tile-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	color: var(--bp-g4p-olive);
	flex: 0 0 auto;
}

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

.bp-g4-preparation__tile-text {
	color: var(--bp-g4p-text);
	font-family: var(--bp-g4p-font-body);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.005em;
	flex: 1 1 auto;
	min-inline-size: 0;
	word-break: normal;
	overflow-wrap: anywhere;
}

/* ---------------- Bottom note ----------------
 * The note container stays a flex row so the text can be centered
 * and the two decorative images are absolutely positioned on
 * either side — they NEVER affect text alignment or strip height.
 * `position: relative` is the anchor for the absolute decorations.
 */
/* Visual shell (background / border / radius / padding / gap /
 * icon / text / diamond) is provided by the shared
 * `.bp-info-strip` utility. The strip keeps `flex-wrap: wrap`
 * so a long line of text can flow onto a second row, and the
 * two absolutely-positioned decorations remain anchored to the
 * strip edges via `position: relative`. */
.bp-g4-preparation__note {
	position: relative;
	z-index: 2;
	margin: 0;
	isolation: isolate;
}

/* Legacy inline SVG leaf (kept harmless so any old CSS reference
 * still works, but no longer rendered by the PHP template). */
.bp-g4-preparation__note-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-g4p-olive);
	flex: 0 0 auto;
}

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

/* Typography owned by the shared `.bp-info-strip__text` utility. */
.bp-g4-preparation__note-text {
}

/* ---- Editable decorative images (left + right) ----
 * Both wrappers are absolutely positioned so the centered text
 * stays untouched. They are pointer-events: none, transparent
 * backgrounds, no border, no box-shadow. The .bp-g4-preparation
 * CSS variables --bp-g4p-ndl-* / --bp-g4p-ndr-* are written
 * inline by Elementor per-device and consumed by the transform.
 */
.bp-g4-preparation__note-decoration {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	display: block;
	inline-size: 22px;
	block-size: auto;
	object-fit: contain;
	object-position: center center;
	max-block-size: 80px;
}

/* Left decoration: anchored from the LEFT edge of the note strip. */
.bp-g4-preparation__note-decoration--left {
	inset-block-start: 50%;
	left: 0;
	right: auto;
	transform-origin: center center;
	transform: translate(
			var(--bp-g4p-ndl-x, 0px),
			calc(-50% + var(--bp-g4p-ndl-y, 0px))
		) rotate(var(--bp-g4p-ndl-rotate, 0deg));
}

/* Right decoration: anchored from the RIGHT edge of the note strip. */
.bp-g4-preparation__note-decoration--right {
	inset-block-start: 50%;
	right: 0;
	left: auto;
	transform-origin: center center;
	transform: translate(
			var(--bp-g4p-ndr-x, 0px),
			calc(-50% + var(--bp-g4p-ndr-y, 0px))
		) rotate(var(--bp-g4p-ndr-rotate, 0deg));
}

/* ---------------- TABLET (769–1024) ---------------- */
@media (min-width: 769px) and (max-width: 1024px) {
	.bp-g4-preparation {
		padding-block: 52px;
	}
	.bp-g4-preparation__inner { gap: 30px; }
	.bp-g4-preparation__title { font-size: clamp(30px, 4.2vw, 42px); }
	.bp-g4-preparation__steps { row-gap: 32px; }
	.bp-g4-preparation__image { block-size: 150px; }
	.bp-g4-preparation__step-title { font-size: 18px; }
	.bp-g4-preparation__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------- MOBILE (≤ 768px) ----------------
 * Stack everything vertically:
 *   - 4 step cards in 1 column with vertical flow arrows
 *   - 6 tiles in 2 columns
 *   - botanicals hide so they never crowd the content
 */
@media (max-width: 768px) {

	.bp-g4-preparation {
		padding-block: 48px;
	}

	.bp-g4-preparation__inner { gap: 28px; }

	/* Header typography */
	.bp-g4-preparation__eyebrow {
		font-size: 12px;
		letter-spacing: 0.18em;
		gap: 10px;
	}
	.bp-g4-preparation__eyebrow-line { inline-size: 24px; }
	.bp-g4-preparation__eyebrow-leaf { inline-size: 13px; block-size: 13px; }
	.bp-g4-preparation__title {
		font-size: clamp(28px, 7.5vw, 36px);
		line-height: 1.15;
	}
	.bp-g4-preparation__subtitle {
		font-size: 15px;
		max-inline-size: 540px;
	}

	/* Steps: single column, vertical flow between steps.
	 * The desktop absolute arrow is hidden on mobile; the
	 * per-step vertical flow is created by `row-gap` plus a
	 * small ::after pseudo-element on each step (below). */
	.bp-g4-preparation__steps {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 18px;
	}

	.bp-g4-preparation__step {
		align-items: stretch;
	}

	.bp-g4-preparation__number {
		align-self: center;
	}

	/* Vertical flow arrow between stacked cards on mobile.
	 * The desktop absolute arrow is hidden; each step gets
	 * its own small rotated arrow underneath via a
	 * pseudo-element so the visual flow stays clean and
	 * there is no overflow. */
	.bp-g4-preparation__arrow { display: none; }
	.bp-g4-preparation__step:not(:last-child)::after {
		content: "";
		display: block;
		inline-size: 28px;
		block-size: 28px;
		margin-inline: auto;
		margin-block-start: 2px;
		border-radius: 50%;
		background-color: var(--bp-g4p-bg);
		color: var(--bp-g4p-olive);
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='11' fill='black'/><path d='M5 12 L 17 12' stroke='white'/><path d='M13 7 L 18 12 L 13 17' stroke='white'/></g></svg>") center / contain no-repeat;
				mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='11' fill='black'/><path d='M5 12 L 17 12' stroke='white'/><path d='M13 7 L 18 12 L 13 17' stroke='white'/></g></svg>") center / contain no-repeat;
		transform: rotate(90deg);
	}

	.bp-g4-preparation__image { block-size: 180px; }
	.bp-g4-preparation__step-title { font-size: 18px; }
	.bp-g4-preparation__step-desc { max-inline-size: 100%; }

	/* Tiles: 2 columns on mobile */
	.bp-g4-preparation__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bp-g4-preparation__tile { padding: 12px 14px; gap: 10px; min-block-size: 58px; }
	.bp-g4-preparation__tile-icon { inline-size: 24px; block-size: 24px; }
	.bp-g4-preparation__tile-icon i,
	.bp-g4-preparation__tile-icon svg { inline-size: 22px; block-size: 22px; }
	.bp-g4-preparation__tile-text { font-size: 12.5px; }

	/* Bottom note — visual shell is shared via `.bp-info-strip` */
	.bp-g4-preparation__note-leaf { inline-size: 18px; block-size: 18px; }

	/* Note decorations: shrink on tablet so they never overlap
	 * the note text. The editor can further resize/reposition
	 * them via the per-device responsive controls. */
	.bp-g4-preparation__note-decoration {
		max-block-size: 48px;
		inline-size: 18px;
	}

	/* Hide large side botanicals on mobile so they never
	 * crowd the content. They are still present in the DOM
	 * and stay accessible to screen readers, just hidden
	 * visually. */
	.bp-g4-preparation__botanical { display: none; }
}

/* ---------------- SMALL MOBILE (≤ 480px) ----------------
 * Very narrow phones: tiles collapse to a single column so the
 * icon + text never overlap and stay readable. Note decorations
 * are hidden by default on very narrow screens so they can never
 * cover the centered text or cause horizontal overflow. The
 * editor can re-enable them per-device using the responsive
 * Width / X / Y / Opacity controls. */
@media (max-width: 480px) {

	.bp-g4-preparation { padding-block: 40px; }

	.bp-g4-preparation__inner { gap: 24px; }
	.bp-g4-preparation__title { font-size: clamp(24px, 7.5vw, 30px); }
	.bp-g4-preparation__subtitle { font-size: 14.5px; }

	.bp-g4-preparation__image { block-size: 170px; }
	.bp-g4-preparation__step-title { font-size: 17px; }
	.bp-g4-preparation__step-desc { font-size: 13px; }

	.bp-g4-preparation__tiles { grid-template-columns: minmax(0, 1fr); }
	.bp-g4-preparation__tile { padding: 12px 14px; min-block-size: 56px; }
	.bp-g4-preparation__tile-text { font-size: 12.5px; }

	/* Hide note decorations by default on very narrow phones so
	 * they can never cover the centered note text. The editor
	 * can opt back in via the per-device responsive controls
	 * (Width > 0 / Opacity > 0) without touching CSS. */
	.bp-g4-preparation__note-decoration {
		display: none;
	}
}

/* ---------------- Prevent horizontal scroll on mobile ---------------- */
@media (max-width: 768px) {
	.elementor .elementor-widget.elementor-widget-bp-g4-preparation,
	.elementor-widget.elementor-widget-bp-g4-preparation {
		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-g4-preparation__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) ----------------
 * 4-step G4 preparation row becomes 1 vertical column. */
@media ( max-width: 480px ) {
	.bp-g4-preparation__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-g4-preparation__steps {
		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-g4-preparation__step,
	.bp-g4-preparation__card {
		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;
	}
	.bp-g4-preparation__step:not(:last-child)::after,
	.bp-g4-preparation__step::after,
	.bp-g4-preparation__steps::after,
	.bp-g4-preparation__card::after {
		content: none !important;
		display: none !important;
		inline-size: 0 !important;
		block-size: 0 !important;
		border: 0 !important;
	}

	/* Reset restrictive min-inline-size across the whole widget on mobile. */
	.bp-g4,
	.bp-g4-preparation,
	.bp-g4-preparation * {
		min-inline-size: 0 !important;
	}
}

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

[lang="ar"] .bp-g4-preparation__step-title,
[dir="rtl"] .bp-g4-preparation__step-title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
}

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

/* ---------------- Elementor wrapper spacing ---------------- */
.e-con:has(> .elementor-widget-bp-g4-preparation),
.e-con:has(> .e-con-inner > .elementor-widget-bp-g4-preparation),
.e-con-inner:has(> .elementor-widget-bp-g4-preparation) {
	--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-g4-preparation {
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

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