/* BP Product Versions widget styles
 *
 * Tunisia product page comparison section:
 *   "NOTRE GAMME NPK — Deux versions adaptées à vos besoins."
 *
 * Layout (clean rebuild — fixes the previous "tiny leaves /
 * cramped cards / collapsing features" issue):
 *   - full-width section, page background, no outer card, no heavy shadow
 *   - centered inner (`max-inline-size: 1140px`, `inline-size: calc(100% - 40px)`)
 *   - centered header: eyebrow (decorative line + tiny leaf + line +
 *     uppercase label) + serif title + readable description
 *   - 2-column grid of premium product cards (G3 + G4), each card
 *     uses an internal 2-column grid: PRODUCT IMAGE column +
 *     CONTENT column. G3 image LEFT / content RIGHT; G4 content
 *     LEFT / image RIGHT (mirrored).
 *   - cards have an EXPLICIT min-height (480px desktop) so the
 *     image cell, the body, and the package image all stay tall
 *     enough to feel premium
 *   - features: 3 equal columns, align-items start, icon + 2-line
 *     text label so wraps don't break alignment
 *   - CONDITIONNEMENTS: 4 equal pills (or 2x2 on mobile)
 *   - Fiche Technique button: full width, 48px, 10px radius
 *   - bottom strip: 940px max, 48px green circle, two-line text,
 *     decorative leaf on the right
 *   - decorative botanicals: LARGE (180-220px wide) absolutely
 *     positioned on the far left and right, sitting behind the
 *     cards. Built-in olive-branch SVG so they always render even
 *     without an uploaded image.
 *
 * 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-product-versions` and use logical
 * CSS properties (margin-inline, padding-inline, inset-inline …)
 * so LTR and RTL share the same ruleset.
 */

.bp-product-versions {
	/* ---- Theme tokens (approved palette only) ---- */
	--bp-pv-bg:            #F8F4ED;
	--bp-pv-card-bg:       #FBF6EC;
	--bp-pv-card-border-g3:#B8B25A;  /* olive/gold accent (subtle) */
	--bp-pv-card-border-g4:#B8B25A;  /* olive/gold accent (subtle) */
	--bp-pv-card-radius:   22px;
	--bp-pv-card-border-w: 1px;

	--bp-pv-green:         #374F37;
	--bp-pv-olive:         #B8B25A;
	--bp-pv-cream:         #EDDBC3;
	--bp-pv-white:         #FFFFFF;
	--bp-pv-text:          #1F2A1F;
	--bp-pv-text-muted:    #5C6A5C;
	--bp-pv-border:        #E4DCCB;
	--bp-pv-divider:       rgba( 184, 178, 90, 0.45 );

	--bp-pv-inner-max:     1140px;
	--bp-pv-cards-gap:     28px;

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

	/* Per-product image responsive offset — each card has its
	 * own X/Y CSS variables so the editor can place G3 and G4
	 * independently from Elementor. */
	--bp-pv-g3-img-x:       0px;
	--bp-pv-g3-img-y:       0px;
	--bp-pv-g4-img-x:       0px;
	--bp-pv-g4-img-y:       0px;

	/* Decorative leaf defaults — every value is fully overridable
	 * from Elementor per-device (desktop / tablet / mobile). */
	--bp-pv-left-leaf-width:    200px;
	--bp-pv-left-leaf-x:        0px;
	--bp-pv-left-leaf-y:        0px;
	--bp-pv-left-leaf-rotate:   0deg;
	--bp-pv-left-leaf-opacity:  95%;
	--bp-pv-right-leaf-width:   200px;
	--bp-pv-right-leaf-x:       0px;
	--bp-pv-right-leaf-y:       0px;
	--bp-pv-right-leaf-rotate:  0deg;
	--bp-pv-right-leaf-opacity: 95%;

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

.bp-product-versions *,
.bp-product-versions *::before,
.bp-product-versions *::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-product-versions,
.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-product-versions,
.elementor .bp-product-versions,
.e-con.bp-product-versions,
.bp-product-versions {
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
	/* When the section is the target of an in-page anchor link
	 * (e.g. #notre-gamme-npk from the hero CTA), keep the sticky
	 * header from hiding the section header. */
	scroll-margin-top: 120px;
}

.elementor .elementor-widget.elementor-widget-bp-product-versions,
.elementor-widget.elementor-widget-bp-product-versions {
	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) ----------------
 * The inner holds the header, the vertically-stacked cards, and
 * the bottom strip. Gap of 0 so each block can carry its own
 * margin and produce the precise vertical rhythm:
 *   HEADER → 40px → G3 → 28px → G4 → 24px → STRIP */
.bp-product-versions__inner {
	position: relative;
	z-index: 2;
	inline-size: calc(100% - 40px);
	max-inline-size: var(--bp-pv-inner-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ---------------- Decorative botanicals (behind content) ----------------
 * Each leaf uses its own CSS variables (--bp-pv-{left,right}-leaf-*)
 * which are written inline by Elementor per-device. This lets the
 * editor freely adjust width, X, Y, rotation, opacity without
 * touching CSS. The wrappers are absolutely positioned, sit on
 * the section's own z-layer, never affect layout, and stay
 * pointer-events: none. */
.bp-product-versions__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-pv-olive);
	inline-size: 200px;
}

.bp-product-versions__botanical--left {
	inset-block-start: 0;
	left: 0;
	right: auto;
	inline-size: var(--bp-pv-left-leaf-width);
	transform: translate(
		var(--bp-pv-left-leaf-x, 0px),
		var(--bp-pv-left-leaf-y, 0px)
	) rotate(var(--bp-pv-left-leaf-rotate, 0deg));
	opacity: var(--bp-pv-left-leaf-opacity, 95%);
}

.bp-product-versions__botanical--right {
	inset-block-start: 0;
	right: 0;
	left: auto;
	inline-size: var(--bp-pv-right-leaf-width);
	transform: translate(
		var(--bp-pv-right-leaf-x, 0px),
		var(--bp-pv-right-leaf-y, 0px)
	) rotate(var(--bp-pv-right-leaf-rotate, 0deg));
	opacity: var(--bp-pv-right-leaf-opacity, 95%);
}

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

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

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

/* FIX: dedicated <span> lines on either side of the eyebrow
 * (used to be `::before/::after` pseudo-elements that were the
 * only visible "leaves" in the broken result). */
.bp-product-versions__eyebrow-line {
	inline-size: 44px;
	block-size: 1px;
	background: var(--bp-pv-olive);
	flex: 0 0 auto;
}

.bp-product-versions__eyebrow-text {
	white-space: nowrap;
}

.bp-product-versions__eyebrow-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18px;
	block-size: 18px;
	color: var(--bp-pv-olive);
	flex: 0 0 auto;
}

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

.bp-product-versions__title {
	margin: 0;
	color: #374F3C;
	font-family: var(--bp-pv-font-display);
	font-weight: 400;
	font-size: clamp(44px, 4vw, 60px);
	line-height: 1.05;
	letter-spacing: -0.005em;
	max-inline-size: 980px;
}

.bp-product-versions__description {
	margin: 0;
	color: var(--bp-pv-text);
	font-family: var(--bp-pv-font-body);
	font-size: 18px;
	line-height: 1.5;
	max-inline-size: 760px;
}

/* ---------------- Cards grid (VERTICAL STACK on desktop) ----------------
 * The two cards (G3 + G4) are now STACKED vertically, each
 * spanning the FULL inner width (max 1140px). NO 2-column
 * side-by-side layout anymore. */
.bp-product-versions__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bp-pv-cards-gap, 28px);
}

/* Each card uses an internal 2-col grid: image (38%) + content
 * (62%). No fixed min-height, no artificial empty space — card
 * height is generated by real content. */
.bp-product-versions__card {
	position: relative;
	background: var(--bp-pv-card-bg);
	border: var(--bp-pv-card-border-w) solid var(--bp-pv-card-border-g3);
	border-radius: var(--bp-pv-card-radius);
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(300px, 0.38fr) minmax(0, 0.62fr);
	column-gap: 48px;
	row-gap: 0;
	padding: 36px 40px;
	align-items: center;
	box-shadow: none;
}

/* G4 mirror: content (62%) on the left, image (38%) on the right. */
.bp-product-versions__card--g4 {
	grid-template-columns: minmax(0, 0.62fr) minmax(300px, 0.38fr);
	border-color: var(--bp-pv-card-border-g4);
}

/* ---------------- Product image cell ----------------
 * No fixed height, no min-block-size: 100%. The cell wraps the
 * image naturally so the card height is driven by content. */
.bp-product-versions__product {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	min-inline-size: 0;
}

.bp-product-versions__card--g3 .bp-product-versions__product {
	transform: translate(var(--bp-pv-g3-img-x, 0px), var(--bp-pv-g3-img-y, 0px));
}

.bp-product-versions__card--g4 .bp-product-versions__product {
	transform: translate(var(--bp-pv-g4-img-x, 0px), var(--bp-pv-g4-img-y, 0px));
}

.bp-product-versions__card--image-left  .bp-product-versions__product { order: 1; }
.bp-product-versions__card--image-right .bp-product-versions__product { order: 2; }

.bp-product-versions__product img {
	display: block;
	inline-size: 100%;
	max-inline-size: 320px;
	block-size: auto;
	max-block-size: 100%;
	object-fit: contain;
	object-position: center center;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.bp-product-versions__product-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	max-inline-size: 320px;
	block-size: 280px;
	border: 1px dashed var(--bp-pv-border);
	border-radius: 14px;
	color: var(--bp-pv-green);
	font-family: var(--bp-pv-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------- Card body ----------------
 * No min-block-size: 100%. The body simply lays out its
 * children at their natural heights. */
.bp-product-versions__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 0;
	min-inline-size: 0;
}

.bp-product-versions__card--image-left  .bp-product-versions__body { order: 2; }
.bp-product-versions__card--image-right .bp-product-versions__body { order: 1; }

.bp-product-versions__card-eyebrow {
	margin: 0;
	color: var(--bp-pv-green);
	font-family: var(--bp-pv-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
}

.bp-product-versions__card-version-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px;
	margin: 0;
}

.bp-product-versions__card-code {
	font-family: var(--bp-pv-font-display);
	font-weight: 400;
	font-size: clamp(56px, 5vw, 68px);
	line-height: 1;
	color: var(--bp-pv-green);
	letter-spacing: -0.01em;
}

.bp-product-versions__card-version {
	font-family: var(--bp-pv-font-body);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bp-pv-green);
	line-height: 1.2;
}

.bp-product-versions__card-description {
	margin: 0;
	color: var(--bp-pv-text);
	font-family: var(--bp-pv-font-body);
	font-size: 16.5px;
	line-height: 1.55;
	max-inline-size: 580px;
}

/* ---------------- Characteristics (features row) ----------------
 * 3 equal columns, generous gap so icons never collide with
 * neighbors. Each item uses an icon-column + text-column grid
 * (auto + 1fr) so wrapping stays inside the column. */
.bp-product-versions__chars {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.bp-product-versions__char {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	min-inline-size: 0;
}

.bp-product-versions__char-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 24px;
	block-size: 24px;
	color: var(--bp-pv-green);
	flex: 0 0 auto;
}

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

.bp-product-versions__char-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--bp-pv-font-body);
	line-height: 1.25;
	min-inline-size: 0;
}

.bp-product-versions__char-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--bp-pv-text-muted);
}

.bp-product-versions__char-value {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--bp-pv-green);
	letter-spacing: 0.01em;
	line-height: 1.25;
}

/* ---------------- Divider ---------------- */
.bp-product-versions__divider {
	margin: 14px 0 4px;
	inline-size: 100%;
	max-inline-size: 520px;
	block-size: 1px;
	border: 0;
	background: var(--bp-pv-divider);
}

/* ---------------- CONDITIONNEMENTS ----------------
 * Kept grouped under the content column (not full card width). */
.bp-product-versions__conditionnements {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-inline-size: 520px;
}

.bp-product-versions__conditionnements-label {
	margin: 0;
	color: var(--bp-pv-green);
	font-family: var(--bp-pv-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.bp-product-versions__sizes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.bp-product-versions__size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 40px;
	padding: 8px 14px;
	border: 1px solid var(--bp-pv-border);
	border-radius: 6px;
	background: var(--bp-pv-white);
	color: var(--bp-pv-green);
	font-family: var(--bp-pv-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* ---------------- Technical sheet button ----------------
 * Natural width, not full card width. */
.bp-product-versions__sheet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	inline-size: fit-content;
	min-inline-size: 320px;
	max-inline-size: 420px;
	min-block-size: 48px;
	padding: 13px 22px;
	margin-block-start: 4px;
	background: var(--bp-pv-green);
	color: var(--bp-pv-white);
	border: 1px solid var(--bp-pv-green);
	border-radius: 10px;
	font-family: var(--bp-pv-font-body);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
	white-space: nowrap;
}

.bp-product-versions__sheet:hover,
.bp-product-versions__sheet:focus-visible {
	transform: translateY(-2px);
	background: #374F37;
	box-shadow: 0 8px 20px rgba(55, 79, 55, 0.22);
	outline: none;
}

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

.bp-product-versions__sheet-icon i,
.bp-product-versions__sheet-icon svg {
	inline-size: 15px;
	block-size: 15px;
	fill: currentColor;
}

.bp-product-versions__sheet-label {
	flex: 1 1 auto;
	text-align: start;
}

/* ---------------- Bottom comparison strip ----------------
 * Visual shell (background / border / radius / padding / gap /
 * icon / text / diamond) is provided by the shared
 * `.bp-info-strip` utility. Only structural hooks, the
 * strong / secondary line hierarchy and the contextual leaf
 * decoration remain here. */
.bp-product-versions__strip {
	position: relative;
	z-index: 2;
	margin-block-start: 24px;
}

.bp-product-versions__strip-card {
	inline-size: 100%;
	max-inline-size: 900px;
}

.bp-product-versions__strip-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-inline-size: 0;
	line-height: 1.45;
}

.bp-product-versions__strip-text--strong {
	font-size: 15.5px;
	font-weight: 700;
}

.bp-product-versions__strip-text--secondary {
	font-size: 14px;
	font-weight: 500;
}

.bp-product-versions__strip-leaf {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 40px;
	color: var(--bp-pv-olive);
}

.bp-product-versions__strip-leaf img,
.bp-product-versions__strip-leaf .bp-product-versions__leaf-svg {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	opacity: 0.95;
}

/* ---------------- TABLET (769–1024) ---------------- */
@media (min-width: 769px) and (max-width: 1024px) {
	.bp-product-versions { padding-block: 52px; }
	.bp-product-versions__grid { gap: 24px; }
	.bp-product-versions__card { padding: 28px 28px; column-gap: 32px; grid-template-columns: minmax(260px, 0.36fr) minmax(0, 0.64fr); }
	.bp-product-versions__card--g4 { grid-template-columns: minmax(0, 0.64fr) minmax(260px, 0.36fr); }
	.bp-product-versions__body { gap: 14px; }
	.bp-product-versions__card-code { font-size: clamp(48px, 5.6vw, 60px); }
	.bp-product-versions__title { font-size: clamp(34px, 4.4vw, 46px); }
	.bp-product-versions__chars { gap: 22px; }
	.bp-product-versions__sheet { min-inline-size: 280px; }
}

/* ---------------- MOBILE (≤ 768px) ----------------
 * ONE clean breakpoint. No more 4-way conflicting overrides
 * (the previous ≤520/≤420/≤360 stack fought itself and made
 * the card feel cramped and inconsistent). Everything stacks
 * vertically: card = single column = IMAGE on top, CONTENT
 * below. The image is centered, naturally sized, never given
 * a fixed block-size. Content is left-aligned, full width. */
@media ( max-width: 768px ) {

	.bp-product-versions {
		padding-block: 48px;
	}

	.bp-product-versions__inner { gap: 0; }
	.bp-product-versions__header {
		margin-block-end: 32px;
		gap: 14px;
	}

	/* Header typography */
	.bp-product-versions__eyebrow {
		font-size: 12px;
		letter-spacing: 0.18em;
		gap: 10px;
	}
	.bp-product-versions__eyebrow-line { inline-size: 24px; }
	.bp-product-versions__eyebrow-leaf { inline-size: 14px; block-size: 14px; }
	.bp-product-versions__title {
		font-size: clamp( 30px, 8.5vw, 40px );
		line-height: 1.1;
	}
	.bp-product-versions__description {
		font-size: 15.5px;
		line-height: 1.55;
		max-inline-size: 540px;
	}

	/* Card stack */
	.bp-product-versions__grid { gap: 20px; }
	.bp-product-versions__card,
	.bp-product-versions__card--g4 {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 18px;
		padding: 24px 22px;
		align-items: start;
	}

	/* On mobile, both cards become: IMAGE → CONTENT. */
	.bp-product-versions__card--image-left  .bp-product-versions__product,
	.bp-product-versions__card--image-right .bp-product-versions__product { order: 1; }
	.bp-product-versions__card--image-left  .bp-product-versions__body,
	.bp-product-versions__card--image-right .bp-product-versions__body    { order: 2; }

	/* Product image cell — let it size from the image. No fixed
	 * block-size, no padding-top, no max-height. Centered image. */
	.bp-product-versions__product {
		padding: 0;
		align-items: center;
	}
	.bp-product-versions__card--g3 .bp-product-versions__product img,
	.bp-product-versions__card--g4 .bp-product-versions__product img {
		max-inline-size: 220px;
	}
	.bp-product-versions__product-placeholder { block-size: 220px; }

	/* Card body — single column, natural width, no max-inline-size */
	.bp-product-versions__body {
		gap: 14px;
		padding: 0;
		text-align: start;
	}
	.bp-product-versions__card-eyebrow { font-size: 13px; }
	.bp-product-versions__card-version-row { gap: 12px; }
	.bp-product-versions__card-code {
		font-size: clamp( 48px, 14vw, 64px );
		line-height: 1;
	}
	.bp-product-versions__card-version { font-size: 17px; letter-spacing: 0.1em; }
	.bp-product-versions__card-description {
		font-size: 15px;
		line-height: 1.55;
		max-inline-size: 100%;
	}

	/* Features: stack 1-per-row on mobile so icons never collide
	 * and each label/value keeps a clean two-line layout. */
	.bp-product-versions__chars {
		grid-template-columns: minmax( 0, 1fr );
		gap: 14px;
	}
	.bp-product-versions__char { gap: 10px; }
	.bp-product-versions__char-icon { inline-size: 22px; block-size: 22px; }
	.bp-product-versions__char-icon i,
	.bp-product-versions__char-icon svg { inline-size: 20px; block-size: 20px; }
	.bp-product-versions__char-value { font-size: 13.5px; }
	.bp-product-versions__char-label { font-size: 11.5px; }

	/* CONDITIONNEMENTS: 2x2 grid, sized to content column (full
	 * width on mobile). Divider matches. */
	.bp-product-versions__divider { max-inline-size: 100%; }
	.bp-product-versions__conditionnements { max-inline-size: 100%; }
	.bp-product-versions__sizes {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 8px;
	}
	.bp-product-versions__size {
		min-block-size: 38px;
		font-size: 13px;
		padding: 7px 10px;
	}

	/* CTA: full width, slightly smaller */
	.bp-product-versions__sheet {
		min-inline-size: 0;
		inline-size: 100%;
		max-inline-size: 100%;
		min-block-size: 48px;
		padding: 13px 18px;
		font-size: 12px;
	}

	/* Bottom strip: structural spacing only — visual shell from
	 * the shared `.bp-info-strip` utility. */
	.bp-product-versions__strip { margin-block-start: 20px; }
	.bp-product-versions__strip-text--strong   { font-size: 13.5px; }
	.bp-product-versions__strip-text--secondary { font-size: 12.5px; }
	.bp-product-versions__strip-leaf { display: none; }
}

/* ---------------- SMALL MOBILE (≤ 480px) ----------------
 * On very narrow phones the 3-col features row gets squeezed.
 * Switch to 2 columns (1 item + 2 items) and trim a few sizes.
 * NO conflicting block-sizes, NO forced product cell heights. */
@media ( max-width: 480px ) {

	.bp-product-versions { padding-block: 40px; }

	.bp-product-versions__header { margin-block-end: 24px; gap: 12px; }
	.bp-product-versions__title { font-size: clamp( 26px, 8vw, 32px ); }
	.bp-product-versions__description { font-size: 15px; }

	.bp-product-versions__grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		gap: 16px !important;
		width: 100% !important;
	}

	.bp-product-versions__card,
	.bp-product-versions__card--g4,
	.bp-product-versions__card--g3 {
		grid-column: 1 / -1 !important;
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		margin: 0 !important;
		padding: 20px 18px;
		row-gap: 16px;
	}

	.bp-product-versions__card--g3 .bp-product-versions__product img,
	.bp-product-versions__card--g4 .bp-product-versions__product img {
		max-inline-size: 180px;
	}
	.bp-product-versions__product-placeholder { block-size: 180px; }

	.bp-product-versions__body { gap: 12px; }
	.bp-product-versions__card-eyebrow { font-size: 12.5px; }
	.bp-product-versions__card-code { font-size: clamp( 40px, 13vw, 48px ); }
	.bp-product-versions__card-version { font-size: 15px; }
	.bp-product-versions__card-description { font-size: 14.5px; }

	/* Each characteristic on its own row (already 1 col from
	 * the ≤768 block above). Just tighten gaps and sizes. */
	.bp-product-versions__chars { gap: 12px; }
	.bp-product-versions__char-icon { inline-size: 20px; block-size: 20px; }
	.bp-product-versions__char-icon i,
	.bp-product-versions__char-icon svg { inline-size: 18px; block-size: 18px; }
	.bp-product-versions__char-value { font-size: 13px; }
	.bp-product-versions__char-label { font-size: 11px; }

	.bp-product-versions__sizes { gap: 7px; }
	.bp-product-versions__size { font-size: 12.5px; padding: 7px 8px; }

	.bp-product-versions__sheet { min-block-size: 46px; font-size: 11.5px; }

	.bp-product-versions__strip-text--strong   { font-size: 13px; }
	.bp-product-versions__strip-text--secondary { font-size: 12px; }

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

/* ---------------- Prevent horizontal scroll on mobile ---------------- */
@media (max-width: 768px) {
	.elementor .elementor-widget.elementor-widget-bp-product-versions,
	.elementor-widget.elementor-widget-bp-product-versions {
		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-product-versions__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));
	}
}

/* ---------------- ARABIC / RTL ----------------
 * Display family falls back to the Arabic family; the rest of
 * the layout mirrors automatically through logical properties. */
[lang="ar"] .bp-product-versions__title,
[dir="rtl"] .bp-product-versions__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-product-versions__card-code,
[dir="rtl"] .bp-product-versions__card-code {
	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-product-versions [data-bp-reveal],
	.bp-product-versions [data-bp-stagger] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
	.bp-product-versions__sheet { transition: none !important; }
}

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

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