/* BP Hydro Retention Technology widget styles
 *
 * Tunisia product page "Comment ça fonctionne ?" section.
 * Large central root / soil illustration (~64% of the section
 * width) surrounded by four floating callouts (01..04) — one in
 * each corner of the composition. Each callout has a large
 * serif number inside a thin circular treatment, a small
 * botanical ornament, a serif title, a short body, and a thin
 * connector line + dot pointing toward the corresponding point
 * on the central image. A cream rounded statement strip with a
 * thin #B8B25A border and a small botanical icon closes the
 * section.
 *
 * Layout:
 *   - transparent outer section, no card, no shadow
 *   - centered inner (max 1140px, inline-size: calc(100% - 40px))
 *   - centered header: eyebrow (line / leaf / line + text) + serif
 *     title + description
 *   - composition: 3-column grid `[1fr | 64% image | 1fr]`
 *     - left col: 2 callouts (01 top-aligned, 03 bottom-aligned)
 *     - middle col: large central image
 *     - right col: 2 callouts (02 top-aligned, 04 bottom-aligned)
 *   - each callout has a thin horizontal connector line + dot
 *     on its inner side, pointing toward the image
 *   - callouts are NOT inside cards — they float cleanly around
 *     the central image
 *   - statement strip: full-width rounded cream panel with
 *     thin #B8B25A border, small green botanical icon, centered
 *     uppercase text
 *   - top-left / top-right olive branches: absolutely positioned,
 *     fully responsive (width, X, Y, rotation, opacity)
 *   - background scientific / soil line-art: absolutely
 *     positioned, low opacity, behind everything
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #EDDBC3  cream
 *   #B8B25A  olive / gold
 *   #FFFFFF  white
 *   plus existing neutral tokens (#FBF6EC, #1F2A1F, #5C6A5C).
 *   No invented greens or browns.
 *
 * All rules are scoped under `.bp-hydro-retention-technology`
 * and use logical CSS properties (margin-inline, padding-inline,
 * inset-inline …) so LTR and RTL share the same ruleset.
 */

/* ================== Section root ================== */
.bp-hydro-retention-technology {
	--bp-hrt-green:          #374F37;
	--bp-hrt-cream:          #FBF6EC;
	--bp-hrt-olive:          #B8B25A;
	--bp-hrt-white:          #FFFFFF;
	--bp-hrt-text:           #1F2A1F;
	--bp-hrt-text-muted:     #5C6A5C;
	--bp-hrt-card-bg:        #FBF6EC;
	--bp-hrt-border:         #E4DCCB;

	--bp-hrt-inner-max:      1140px;
	--bp-hrt-image-w:        64%;
	--bp-hrt-gutter:         32px;

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

	/* Corner botanical defaults — each value is fully
	 * overridable from Elementor per-device. */
	--bp-hrt-tl-leaf-width:     220px;
	--bp-hrt-tl-leaf-x:         0px;
	--bp-hrt-tl-leaf-y:         0px;
	--bp-hrt-tl-leaf-rotate:    0deg;
	--bp-hrt-tl-leaf-opacity:   100%;
	--bp-hrt-tr-leaf-width:     220px;
	--bp-hrt-tr-leaf-x:         0px;
	--bp-hrt-tr-leaf-y:         0px;
	--bp-hrt-tr-leaf-rotate:    0deg;
	--bp-hrt-tr-leaf-opacity:   100%;

	/* Background decor defaults */
	--bp-hrt-bg-left-opacity:   35%;
	--bp-hrt-bg-right-opacity:  35%;

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

.bp-hydro-retention-technology *,
.bp-hydro-retention-technology *::before,
.bp-hydro-retention-technology *::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-hydro-retention-technology,
.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-hydro-retention-technology,
.elementor .bp-hydro-retention-technology,
.e-con.bp-hydro-retention-technology,
.bp-hydro-retention-technology {
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
	margin-block-start: 100px !important;
}

.elementor .elementor-widget.elementor-widget-bp-hydro-retention-technology,
.elementor-widget.elementor-widget-bp-hydro-retention-technology {
	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-hrt__inner {
	position: relative;
	z-index: 3;
	inline-size: calc(100% - 40px);
	max-inline-size: var(--bp-hrt-inner-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ---------------- Background scientific / soil line-art ---------------- */
.bp-hrt__bg-decor {
	position: absolute;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	z-index: 1;
	color: var(--bp-hrt-olive);
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 200px;
	block-size: auto;
	max-block-size: 50%;
}

.bp-hrt__bg-decor--left {
	inset-block-start: 50%;
	left: 0;
	right: auto;
	opacity: var(--bp-hrt-bg-left-opacity, 35%);
	transform: translate(
		0,
		calc(-50%)
	);
}

.bp-hrt__bg-decor--right {
	inset-block-end: 20%;
	right: 0;
	left: auto;
	opacity: var(--bp-hrt-bg-right-opacity, 35%);
}

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

/* ---------------- Top corner olive branches ---------------- */
.bp-hrt__leaf {
	position: absolute;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-hrt-olive);
	inline-size: 220px;
}

.bp-hrt__leaf--tl {
	inset-block-start: 0;
	left: 0;
	right: auto;
	inline-size: var(--bp-hrt-tl-leaf-width);
	transform: translate(
		var(--bp-hrt-tl-leaf-x, 0px),
		var(--bp-hrt-tl-leaf-y, 0px)
	) rotate(var(--bp-hrt-tl-leaf-rotate, 0deg));
	opacity: var(--bp-hrt-tl-leaf-opacity, 100%);
	transform-origin: start start;
}

.bp-hrt__leaf--tr {
	inset-block-start: 0;
	right: 0;
	left: auto;
	inline-size: var(--bp-hrt-tr-leaf-width);
	transform: translate(
		var(--bp-hrt-tr-leaf-x, 0px),
		var(--bp-hrt-tr-leaf-y, 0px)
	) rotate(var(--bp-hrt-tr-leaf-rotate, 0deg)) scaleX(-1);
	opacity: var(--bp-hrt-tr-leaf-opacity, 100%);
	transform-origin: end start;
}

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

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

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

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

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

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

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

.bp-hrt__title {
	margin: 0;
	color: var(--bp-hrt-text);
	font-family: var(--bp-hrt-font-display);
	font-weight: 400;
	font-size: clamp(40px, 4vw, 54px);
	line-height: 1.05;
	letter-spacing: -0.005em;
	max-inline-size: 980px;
}

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

/* ---------------- Composition: 3-column grid ----------------
 * Left col / center image / right col. The middle column holds
 * the large root / soil illustration; the two outer columns
 * each carry two callouts (top + bottom). Callouts sit at the
 * four corners of the visible composition area and float
 * cleanly around the central image — they are NOT inside cards. */
.bp-hrt__composition {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--bp-hrt-image-w, 64%)) minmax(0, 1fr);
	column-gap: clamp(16px, 2.5vw, 32px);
	row-gap: 24px;
	align-items: stretch;
}

.bp-hrt__callouts-col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 56px;
	min-inline-size: 0;
	padding-block: 12px;
}

.bp-hrt__callouts-col--left  { align-items: stretch; }
.bp-hrt__callouts-col--right { align-items: stretch; }

/* ---------------- Central image ---------------- */
.bp-hrt__image-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 0;
	min-inline-size: 0;
	isolation: isolate;
}

.bp-hrt__image,
.bp-hrt__image-placeholder {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: auto;
	max-block-size: 640px;
	object-fit: contain;
	object-position: center center;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.bp-hrt__image-placeholder {
	inline-size: 100%;
	block-size: 460px;
	border: 1px dashed var(--bp-hrt-border);
	border-radius: 16px;
	color: var(--bp-hrt-green);
	font-family: var(--bp-hrt-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* ---------------- Callouts ----------------
 * Floating text blocks, no card, no border, no shadow. Each
 * callout has: number circle (thin olive border) + small
 * botanical ornament on the same line, serif title, body, and
 * a thin connector line + dot pointing toward the image.
 *
 * Left-side callouts (01, 03): the connector sits on the right
 * edge of the callout and points right toward the image.
 * Right-side callouts (02, 04): the connector sits on the left
 * edge and points left toward the image. The mark (number +
 * ornament) is centered, the title is centered, the body is
 * centered, the connector is the only off-center element. */
.bp-hrt__callout {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	max-inline-size: 220px;
	min-inline-size: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	margin-inline: auto;
}

.bp-hrt__callout--tl,
.bp-hrt__callout--bl {
	align-items: flex-end;
	text-align: end;
	margin-inline-start: 0;
	margin-inline-end: auto;
}

.bp-hrt__callout--tr,
.bp-hrt__callout--br {
	align-items: flex-start;
	text-align: start;
	margin-inline-start: auto;
	margin-inline-end: 0;
}

.bp-hrt__callout-mark {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 2px;
}

.bp-hrt__callout--tl .bp-hrt__callout-mark,
.bp-hrt__callout--bl .bp-hrt__callout-mark {
	flex-direction: row-reverse;
}

.bp-hrt__callout-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 52px;
	block-size: 52px;
	border-radius: 50%;
	border: 1px solid var(--bp-hrt-olive);
	color: var(--bp-hrt-green);
	font-family: var(--bp-hrt-font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0.02em;
	background: transparent;
	flex: 0 0 auto;
}

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

.bp-hrt__callout-ornament svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.bp-hrt__callout-title {
	margin: 4px 0 0;
	font-family: var(--bp-hrt-font-display);
	font-weight: 400;
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: 0.005em;
	color: var(--bp-hrt-text);
	max-inline-size: 100%;
}

.bp-hrt__callout-body {
	margin: 4px 0 0;
	font-family: var(--bp-hrt-font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--bp-hrt-text-muted);
	max-inline-size: 100%;
}

/* Connector: thin line + small dot on the inner side of the
 * callout, pointing toward the image. */
.bp-hrt__connector {
	position: absolute;
	top: 26px;
	display: inline-flex;
	align-items: center;
	gap: 0;
	pointer-events: none;
}

.bp-hrt__callout--tl .bp-hrt__connector,
.bp-hrt__callout--bl .bp-hrt__connector {
	inset-inline-start: 100%;
	margin-inline-start: 14px;
	flex-direction: row;
}

.bp-hrt__callout--tr .bp-hrt__connector,
.bp-hrt__callout--br .bp-hrt__connector {
	inset-inline-end: 100%;
	margin-inline-end: 14px;
	flex-direction: row-reverse;
}

.bp-hrt__connector-line {
	display: block;
	inline-size: clamp(40px, 6vw, 80px);
	block-size: 1px;
	background: var(--bp-hrt-olive);
	opacity: 0.65;
}

.bp-hrt__connector-dot {
	display: inline-block;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--bp-hrt-olive);
	flex: 0 0 auto;
}

.bp-hrt__callout--tl .bp-hrt__connector-dot,
.bp-hrt__callout--bl .bp-hrt__connector-dot {
	margin-inline-start: 4px;
}

.bp-hrt__callout--tr .bp-hrt__connector-dot,
.bp-hrt__callout--br .bp-hrt__connector-dot {
	margin-inline-end: 4px;
}

/* ---------------- STEPS 01 / 02 ANNOTATION ----------------
 * Long elbow connector that starts at the image edge (where
 * the 01 / 02 callout text meets the central illustration)
 * and lands on a specific point inside the root area of the
 * image. The endpoint X / Y are editable from Elementor so the
 * operator can fine-tune where the line lands on the hydrated
 * sphere area (01) and the nutrient particle area (02).
 *
 * The line is built from two thin arms (horizontal + vertical)
 * and a small endpoint dot. The default start Y is 8% of the
 * image height (aligned with the 01 / 02 number circle) and
 * the endpoint lands on the root target via the
 * --bp-hrt-ann-x / --bp-hrt-ann-y CSS variables exposed by
 * the Elementor sliders on each .bp-hrt__annotation--0X.
 *
 * Only visible on desktop. Hidden on tablet and mobile so the
 * path never crosses stacked content. The simple in-callout
 * connector is hidden on desktop for 01 / 02 (replaced by this
 * longer one) and remains visible on tablet for 03 / 04. */
.bp-hrt__annotation {
	--bp-hrt-ann-start-y: 8%;

	position: absolute;
	inset-block-start: 0;
	inset-block-end: 0;
	inset-inline-start: -3.2%;
	inset-inline-end: -3.2%;
	pointer-events: none;
	z-index: 3;
	display: none; /* shown on desktop via the media query below */
}

.bp-hrt__annotation-arm {
	position: absolute;
	background: var(--bp-hrt-olive);
	opacity: 0.7;
	transform: translateZ(0);
}

.bp-hrt__annotation-arm--h {
	inline-size: var(--bp-hrt-ann-h-len, 30%);
	block-size: 1px;
	inset-block-start: var(--bp-hrt-ann-start-y);
	inset-inline-start: 0;
}

.bp-hrt__annotation-arm--v {
	inline-size: 1px;
	block-size: var(--bp-hrt-ann-v-len, 50%);
	inset-block-start: var(--bp-hrt-ann-start-y);
	inset-inline-start: var(--bp-hrt-ann-v-x, 30%);
}

.bp-hrt__annotation-dot {
	position: absolute;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var(--bp-hrt-olive);
	inset-block-start: var(--bp-hrt-ann-y, 58%);
	inset-inline-start: var(--bp-hrt-ann-x, 30%);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 3px rgba(184, 178, 90, 0.12);
}

/* Step 01 — left callout -> LEFT root / hydrated area.
 * Arm --h grows from the left edge of the image-wrap to the
 * target X. Arm --v drops from the target X to the target Y.
 * Endpoint dot is centered on (target X, target Y). */
.bp-hrt__annotation--01 {
	--bp-hrt-ann-x: 30%;
	--bp-hrt-ann-y: 58%;
	--bp-hrt-ann-h-len: var(--bp-hrt-ann-x, 30%);
	--bp-hrt-ann-v-x: var(--bp-hrt-ann-x, 30%);
	--bp-hrt-ann-v-len: calc(var(--bp-hrt-ann-y, 58%) - var(--bp-hrt-ann-start-y));
}

/* Step 02 — right callout -> RIGHT root / nutrient area.
 * The horizontal arm grows from the right edge back to the
 * target X, so its length is (100% - target X) and it is
 * anchored to the inline-end edge of the annotation box. */
.bp-hrt__annotation--02 {
	--bp-hrt-ann-x: 70%;
	--bp-hrt-ann-y: 58%;
	--bp-hrt-ann-h-len: calc(100% - var(--bp-hrt-ann-x, 70%));
	--bp-hrt-ann-v-x: var(--bp-hrt-ann-x, 70%);
	--bp-hrt-ann-v-len: calc(var(--bp-hrt-ann-y, 58%) - var(--bp-hrt-ann-start-y));
}

.bp-hrt__annotation--02 .bp-hrt__annotation-arm--h {
	inset-inline-start: auto;
	inset-inline-end: 0;
	inline-size: var(--bp-hrt-ann-h-len);
}

.bp-hrt__annotation--02 .bp-hrt__annotation-arm--v {
	inset-inline-start: var(--bp-hrt-ann-v-x);
}

.bp-hrt__annotation--02 .bp-hrt__annotation-dot {
	inset-inline-start: var(--bp-hrt-ann-x);
}

/* Desktop: show the long annotation and hide the short
 * in-callout connector for the two top callouts (the long line
 * replaces it). 03 / 04 keep the short connector. */
@media (min-width: 1025px) {
	.bp-hrt__annotation { display: block; }
	.bp-hrt__callout--tl .bp-hrt__connector,
	.bp-hrt__callout--tr .bp-hrt__connector { display: none; }
}

/* Tablet and mobile: hide the long annotation entirely so it
 * never crosses the stacked image / callouts / strip. The
 * short in-callout connector is hidden on mobile (existing
 * rule) and remains visible on tablet for 03 / 04 only — for
 * 01 / 02 it is also hidden on tablet to keep the stack clean. */
@media (max-width: 1024px) {
	.bp-hrt__annotation { display: none !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
	.bp-hrt__callout--tl .bp-hrt__connector,
	.bp-hrt__callout--tr .bp-hrt__connector { display: none; }
}

/* ---------------- Statement strip ----------------
 * Visual shell (background / border / radius / padding / gap /
 * icon / text / diamond) is provided by the shared
 * `.bp-info-strip` utility. Only the wrapper centering and
 * the text-only hierarchy remain here. */
.bp-hrt__strip-wrap {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
}

.bp-hrt__strip {
	inline-size: 100%;
	max-inline-size: 100%;
	flex-wrap: wrap;
}

.bp-hrt__strip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.bp-hrt__strip-icon i,
.bp-hrt__strip-icon svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
	fill: currentColor;
}

.bp-hrt__strip-text {
	margin: 0;
	/* Typography owned by the shared `.bp-info-strip__text` utility
	 * (15px / 400 / 1.5 / Manrope / #1F2A1F / left). */
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* ---------------- TABLET (769–1024) ---------------- */
@media (min-width: 769px) and (max-width: 1024px) {
	.bp-hydro-retention-technology { padding-block: 52px; }
	.bp-hrt__inner { gap: 32px; }
	.bp-hrt__title { font-size: clamp(32px, 4.4vw, 44px); }
	.bp-hrt__description { font-size: 15.5px; max-inline-size: 640px; }
	.bp-hrt__composition {
		column-gap: 20px;
		row-gap: 20px;
	}
	.bp-hrt__callouts-col { gap: 40px; }
	.bp-hrt__callout { max-inline-size: 180px; }
	.bp-hrt__callout-number { inline-size: 46px; block-size: 46px; font-size: 19px; }
	.bp-hrt__callout-ornament { inline-size: 16px; block-size: 16px; }
	.bp-hrt__callout-title { font-size: 17px; }
	.bp-hrt__callout-body { font-size: 13px; }
	.bp-hrt__connector-line { inline-size: clamp(28px, 5vw, 56px); }
	.bp-hrt__image, .bp-hrt__image-placeholder { max-block-size: 500px; }
	.bp-hrt__image-placeholder { block-size: 380px; }
	/* Strip text sizing owned by `.bp-info-strip__text` responsive
	 * block (15px desktop / 14px mobile). */
}

/* ---------------- MOBILE (≤ 768px) ----------------
 * Stack: header → central image → callouts (2x2) → strip.
 * No connector lines on mobile (per the project spec) so the
 * callouts become clean full-width / 2×2 blocks. No overlap,
 * no horizontal overflow, no giant gaps. */
@media (max-width: 768px) {

	.bp-hydro-retention-technology { padding-block: 48px; }

	.bp-hrt__inner { gap: 28px; }
	.bp-hrt__header { gap: 12px; }
	.bp-hrt__eyebrow { font-size: 12px; letter-spacing: 0.18em; gap: 10px; }
	.bp-hrt__eyebrow-line { inline-size: 24px; }
	.bp-hrt__eyebrow-leaf { inline-size: 14px; block-size: 14px; }
	.bp-hrt__title { font-size: clamp(30px, 8.5vw, 40px); line-height: 1.1; }
	.bp-hrt__description { font-size: 15px; line-height: 1.55; max-inline-size: 540px; }

	/* Hide the corner botanicals and bg decor on mobile so the
	 * stack stays clean and uncluttered. */
	.bp-hrt__leaf,
	.bp-hrt__bg-decor { display: none; }

	/* Composition collapses: image on top, then a 2x2 callout
	 * grid below, all in one column. */
	.bp-hrt__composition {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 18px;
	}

	.bp-hrt__image-wrap { grid-column: 1; grid-row: 1; }
	.bp-hrt__callouts-col--left  { grid-column: 1; grid-row: 2; }
	.bp-hrt__callouts-col--right { grid-column: 1; grid-row: 3; }

	.bp-hrt__image { max-block-size: 420px; }
	.bp-hrt__image-placeholder { block-size: 280px; }

	/* On mobile the outer columns become 2x2 grids (top + bot
	 * stacked) so all 4 callouts read in the natural 01..04
	 * order. The callouts are centered, not aligned to the
	 * outer edge, and connectors are hidden. */
	.bp-hrt__callouts-col {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 18px;
		row-gap: 24px;
		gap: 0;
		padding-block: 0;
		justify-content: stretch;
	}

	.bp-hrt__callout,
	.bp-hrt__callout--tl,
	.bp-hrt__callout--bl,
	.bp-hrt__callout--tr,
	.bp-hrt__callout--br {
		align-items: center;
		text-align: center;
		margin-inline: auto;
		max-inline-size: 100%;
	}

	.bp-hrt__callout--tl .bp-hrt__callout-mark,
	.bp-hrt__callout--bl .bp-hrt__callout-mark {
		flex-direction: row;
	}

	.bp-hrt__connector { display: none; }

	.bp-hrt__callout-number { inline-size: 44px; block-size: 44px; font-size: 18px; }
	.bp-hrt__callout-ornament { inline-size: 15px; block-size: 15px; }
	.bp-hrt__callout-title { font-size: 16px; }
	.bp-hrt__callout-body { font-size: 12.5px; }

	/* Strip text sizing owned by `.bp-info-strip__text` responsive
	 * block. */
}

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

	.bp-hydro-retention-technology { padding-block: 40px; }

	.bp-hrt__inner { gap: 22px; }

	.bp-hrt__title { font-size: clamp(26px, 8vw, 32px); }
	.bp-hrt__description { font-size: 14.5px; }

	.bp-hrt__image { max-block-size: 320px; }
	.bp-hrt__image-placeholder { block-size: 220px; }

	.bp-hrt__callouts-col { column-gap: 12px; row-gap: 18px; }
	.bp-hrt__callout-number { inline-size: 38px; block-size: 38px; font-size: 16px; }
	.bp-hrt__callout-ornament { inline-size: 13px; block-size: 13px; }
	.bp-hrt__callout-title { font-size: 15px; }
	.bp-hrt__callout-body { font-size: 12px; }

	/* Strip text sizing owned by `.bp-info-strip__text` responsive
	 * block (14px on mobile). */

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

/* ---------------- Prevent horizontal scroll on mobile ---------------- */
@media (max-width: 768px) {
	.elementor .elementor-widget.elementor-widget-bp-hydro-retention-technology,
	.elementor-widget.elementor-widget-bp-hydro-retention-technology {
		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-hrt__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) ----------------
 * Hydro-retention rows: every desktop flex/grid row forced
 * to one column, every child full-width. */
@media ( max-width: 480px ) {
	.bp-hrt__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-hrt__main,
	.bp-hrt__row,
	.bp-hrt__cards,
	.bp-hrt__features,
	.bp-hrt__visual,
	.bp-hrt__content {
		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-hrt__main > *,
	.bp-hrt__row > *,
	.bp-hrt__cards > *,
	.bp-hrt__features > *,
	.bp-hrt__visual,
	.bp-hrt__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;
	}
	/* Contain the absolute visual so it cannot widen the page. */
	.bp-hrt__visual,
	.bp-hrt__visual img,
	.bp-hrt__visual svg,
	.bp-hrt__visual 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-hrt__title,
[dir="rtl"] .bp-hrt__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-hrt__callout-title,
[dir="rtl"] .bp-hrt__callout-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-hydro-retention-technology [data-bp-reveal],
	.bp-hydro-retention-technology [data-bp-stagger] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

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

/* ---------------- Print ---------------- */
@media print {
	.elementor .elementor-widget.elementor-widget-bp-hydro-retention-technology,
	.elementor-widget.elementor-widget-bp-hydro-retention-technology {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}
	.bp-hydro-retention-technology { padding-block: 0; }
	.bp-hrt__leaf, .bp-hrt__bg-decor { display: none; }
}