/* BP Product Comparison widget styles
 *
 * Tunisia product page "comparer en un coup d'œil" section.
 * Side-by-side G3 (hydratée) + G4 (déshydratée) cards with a
 * circular VS badge centered between them, plus a full-width
 * bottom strip summarising the shared benefits.
 *
 * Layout:
 *   - transparent outer section (no section background, no shadow)
 *   - centered inner (max 1140px, inline-size: calc(100% - 40px))
 *   - centered header: eyebrow + serif title + description
 *   - 2-column comparison grid: G3 | VS | G4
 *   - VS is a 68px circular badge absolutely centered on the
 *     gridline between the two cards, with short dotted
 *     connectors running into the cards (hidden on mobile)
 *   - cards: light background, 1px thin border, 20px radius,
 *     28px padding, no heavy shadow
 *   - card product image is positioned top-left for G3 / top-
 *     right for G4 and sized via the Elementor slider
 *   - features: 4 equal columns (repeat(4, minmax(0, 1fr))) with
 *     ~30px icons and subtle vertical separators; on mobile they
 *     become a 2×2 grid
 *   - CONDITIONNEMENTS: 4 equal boxes; on mobile, 2×2
 *   - CTA: full-width green pill
 *   - bottom strip: full combined width, rounded light panel,
 *     thin border, large green circle + intro text + G3/G4 lines
 *     + 4 shared benefits (editable icons)
 *   - decorative botanicals: left / right / center-pale-behind-VS,
 *     each fully responsive (width, X, Y, rotation, opacity)
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #EDDBC3  cream
 *   #B8B25A  olive / gold
 *   #FFFFFF  white
 *   plus existing neutral tokens (#FBF6EC, #E4DCCB, #1F2A1F,
 *   #5C6A5C). No invented greens or browns.
 *
 * All rules are scoped under `.bp-product-comparison` and use
 * logical CSS properties (margin-inline, padding-inline,
 * inset-inline …) so LTR and RTL share the same ruleset.
 */

.bp-product-comparison {
	/* ---- Theme tokens (approved palette only) ---- */
	--bp-pc-bg:             transparent;
	--bp-pc-card-bg:        #FBF6EC;
	--bp-pc-card-border:    #E4DCCB;
	--bp-pc-card-radius:    20px;
	--bp-pc-card-border-w:  1px;

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

	--bp-pc-inner-max:      1140px;
	--bp-pc-cards-gap:      24px;          /* tight gap so the VS line clearly connects both cards */
	--bp-pc-vs-size:        68px;

	--bp-pc-font-body:      var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-pc-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-pc-g3-img-x:       0px;
	--bp-pc-g3-img-y:       0px;
	--bp-pc-g4-img-x:       0px;
	--bp-pc-g4-img-y:       0px;

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

	--bp-pc-center-leaf-width:    140px;
	--bp-pc-center-leaf-x:        0px;
	--bp-pc-center-leaf-y:        0px;
	--bp-pc-center-leaf-rotate:   0deg;
	--bp-pc-center-leaf-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: var(--bp-pc-bg);
	color: var(--bp-pc-text);
	font-family: var(--bp-pc-font-body);
}

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

.elementor .elementor-widget.elementor-widget-bp-product-comparison,
.elementor-widget.elementor-widget-bp-product-comparison {
	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-pc__inner {
	position: relative;
	z-index: 2;
	inline-size: calc(100% - 40px);
	max-inline-size: var(--bp-pc-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-pc-{left,right,center}-leaf-*)
 * which are written inline by Elementor per-device. The wrappers are
 * absolutely positioned, sit on the section's own z-layer, never affect
 * layout, and stay pointer-events: none. */
.bp-pc__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-pc-olive);
	inline-size: 200px;
}

.bp-pc__botanical--left {
	left: 0;
	right: auto;
	inline-size: var(--bp-pc-left-leaf-width);
	transform: translate(
		var(--bp-pc-left-leaf-x, 0px),
		var(--bp-pc-left-leaf-y, 0px)
	) rotate(var(--bp-pc-left-leaf-rotate, 0deg));
	opacity: var(--bp-pc-left-leaf-opacity, 100%);
}
.bp-pc__botanical--right {
	right: 0;
	left: auto;
	inline-size: var(--bp-pc-right-leaf-width);
	transform: translate(
		var(--bp-pc-right-leaf-x, 0px),
		var(--bp-pc-right-leaf-y, 0px)
	) rotate(var(--bp-pc-right-leaf-rotate, 0deg));
	opacity: var(--bp-pc-right-leaf-opacity, 100%);
}

.bp-pc__botanical--center {
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: var(--bp-pc-center-leaf-width);
	transform: translate(
		calc(-50% + var(--bp-pc-center-leaf-x, 0px)),
		calc(-50% + var(--bp-pc-center-leaf-y, 0px))
	) rotate(var(--bp-pc-center-leaf-rotate, 0deg));
	opacity: var(--bp-pc-center-leaf-opacity, 35%);
	z-index: 0;
}

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

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

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

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

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

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

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

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

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

/* ---------------- Comparison row (2 cards + VS) ----------------
 * 2 equal columns with the VS in the middle. The VS wrapper is
 * placed between the two cards so it is exactly centered on the
 * gridline. Each card carries its own horizontal line connector
 * on the side that faces the VS badge: G3's right edge and G4's
 * left edge get a thin horizontal rule that meets the badge,
 * so the VS visually links both cards. */
.bp-pc__compare {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	column-gap: var(--bp-pc-cards-gap, 24px);
	row-gap: 28px;
	align-items: stretch;
}

/* Center pale botanical sits behind the VS badge only on desktop. */
.bp-pc__compare > .bp-pc__botanical--center {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: center;
	inline-size: var(--bp-pc-center-leaf-width);
	opacity: var(--bp-pc-center-leaf-opacity, 35%);
}

/* ---------------- VS badge (desktop) ----------------
 * Sits between the two cards, vertically centered to the row. */
.bp-pc__vs {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: center;
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0;
	inline-size: auto;
	min-inline-size: var(--bp-pc-vs-size, 68px);
}

.bp-pc__vs-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-pc-vs-size, 68px);
	block-size: var(--bp-pc-vs-size, 68px);
	border-radius: 50%;
	background: var(--bp-pc-white);
	color: var(--bp-pc-green);
	border: 1px solid var(--bp-pc-border);
	font-family: var(--bp-pc-font-display);
	font-weight: 400;
	font-size: 22px;
	letter-spacing: 0.02em;
	line-height: 1;
	box-shadow: 0 4px 14px rgba(55, 79, 55, 0.08);
	flex: 0 0 auto;
}

.bp-pc__vs-line {
	display: block;
	inline-size: 36px;
	block-size: 1px;
	background-image: linear-gradient( to right, var(--bp-pc-olive) 50%, transparent 50% );
	background-size: 6px 1px;
	background-repeat: repeat-x;
	background-color: transparent;
	flex: 0 0 auto;
}

/* ---------------- Cards ----------------
 * Light background, thin border, 20px radius, ~28px padding.
 * NO heavy shadow, NO fixed giant height. The card head is a
 * 2-column grid: G3 → image LEFT, text block RIGHT; G4 → text
 * block LEFT, image RIGHT. Below the head, the description,
 * features, rule, conditionnements, and CTA stack vertically. */
.bp-pc__card {
	position: relative;
	background: var(--bp-pc-card-bg);
	border: var(--bp-pc-card-border-w) solid var(--bp-pc-card-border);
	border-radius: var(--bp-pc-card-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 28px;
	box-shadow: none;
	min-inline-size: 0;
}

.bp-pc__card--g3 {
	grid-column: 1;
	grid-row: 1;
}

.bp-pc__card--g4 {
	grid-column: 3;
	grid-row: 1;
}

/* ---------------- Card head (image + text side by side) ----------------
 * Two equal-ish columns: product image + text block. The text
 * block centers the badge, code, version, and decorative divider
 * (matches the reference exactly). The product image is wider
 * than tall and lives in its own column. */
.bp-pc__head {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	column-gap: 18px;
	row-gap: 0;
	align-items: center;
	margin-block-end: 18px;
}

/* G4 mirrors the head: text on the LEFT, image on the RIGHT. */
.bp-pc__card--g4 .bp-pc__head {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.bp-pc__head-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	min-inline-size: 0;
}

/* Product image cell — sized by the editor's max-width slider
 * and tunable via the per-card X/Y CSS variables. */
.bp-pc__product {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 0;
	padding: 0;
	background: transparent;
	min-inline-size: 0;
}

.bp-pc__card--g3 .bp-pc__product {
	transform: translate(var(--bp-pc-g3-img-x, 0px), var(--bp-pc-g3-img-y, 0px));
}

.bp-pc__card--g4 .bp-pc__product {
	transform: translate(var(--bp-pc-g4-img-x, 0px), var(--bp-pc-g4-img-y, 0px));
}

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

.bp-pc__product-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 180px;
	block-size: 200px;
	border: 1px dashed var(--bp-pc-border);
	border-radius: 14px;
	color: var(--bp-pc-green);
	font-family: var(--bp-pc-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Badge */
.bp-pc__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 14px;
	margin-block-end: 4px;
	background: var(--bp-pc-green);
	color: var(--bp-pc-white);
	border-radius: 999px;
	font-family: var(--bp-pc-font-body);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	max-inline-size: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Code (G3 / G4) — huge centered serif, scaled to fit the
 * text block (not the full card anymore). */
.bp-pc__code {
	margin: 2px 0 2px;
	text-align: center;
	font-family: var(--bp-pc-font-display);
	font-weight: 400;
	font-size: clamp(54px, 5.4vw, 76px);
	line-height: 1;
	color: var(--bp-pc-green);
	letter-spacing: -0.01em;
}

/* Version title (VERSION HYDRATÉE …) */
.bp-pc__version {
	margin: 0;
	text-align: center;
	font-family: var(--bp-pc-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bp-pc-green);
	line-height: 1.2;
}

/* Decorative divider: thin line + leaf + thin line, fits the
 * narrower head-text column. */
.bp-pc__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	inline-size: 100%;
	max-inline-size: 220px;
	margin: 6px auto 0;
}

.bp-pc__divider-line {
	flex: 1 1 auto;
	block-size: 1px;
	background: var(--bp-pc-olive);
}

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

.bp-pc__divider-leaf svg {
	inline-size: 100%;
	block-size: 100%;
	fill: currentColor;
}

/* Card description */
.bp-pc__card-description {
	margin: 0 0 18px;
	text-align: center;
	color: var(--bp-pc-text);
	font-family: var(--bp-pc-font-body);
	font-size: 15px;
	line-height: 1.55;
	max-inline-size: 480px;
	margin-inline: auto;
}

/* Features row: 4 equal columns, ~30px icons, subtle vertical
 * separators. No overlap. */
.bp-pc__features {
	list-style: none;
	margin: 4px 0 22px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.bp-pc__feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 6px 8px;
	min-inline-size: 0;
	border-inline-start: 1px solid transparent;
}

.bp-pc__feature + .bp-pc__feature {
	border-inline-start-color: rgba( 184, 178, 90, 0.35 );
}

.bp-pc__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 30px;
	block-size: 30px;
	color: var(--bp-pc-green);
	flex: 0 0 auto;
}

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

.bp-pc__feature-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--bp-pc-font-body);
	line-height: 1.3;
	min-inline-size: 0;
	max-inline-size: 100%;
}

.bp-pc__feature-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--bp-pc-text);
	letter-spacing: 0.01em;
}

.bp-pc__feature-subtitle {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--bp-pc-text-muted);
	letter-spacing: 0.01em;
}

/* Thin rule between features and conditionnements */
.bp-pc__rule {
	margin: 0 0 18px;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 1px;
	border: 0;
	background: var(--bp-pc-border);
}

/* CONDITIONNEMENTS — 4 equal boxes */
.bp-pc__conditionnements {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-block-end: 18px;
}

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

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

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

/* CTA — full width green pill
 * Desktop: single line (icon | label | arrow). The label never
 * carries a trailing arrow in its text — the dedicated
 * `.bp-pc__cta-arrow` span is the only arrow on the button.
 * Mobile: same structure but smaller icon / padding / gap so the
 * whole label fits; the layout is allowed to wrap as a safety
 * net (icon + label + arrow) without overflowing. */
.bp-pc__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: 48px;
	padding: 12px 16px;
	margin-block-start: auto;
	background: var(--bp-pc-green);
	color: var(--bp-pc-white);
	border: 1px solid var(--bp-pc-green);
	border-radius: 8px;
	font-family: var(--bp-pc-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
	white-space: nowrap;
	text-align: center;
	line-height: 1.3;
}

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

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

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

.bp-pc__cta-label {
	flex: 1 1 auto;
	min-inline-size: 0;
	text-align: center;
	white-space: normal;
	word-break: normal;
	hyphens: auto;
}

.bp-pc__cta-arrow {
	font-family: var(--bp-pc-font-body);
	font-weight: 700;
	flex: 0 0 auto;
	inline-size: 1em;
	text-align: end;
}

/* ---------------- Bottom strip ---------------- */
.bp-pc__strip {
	position: relative;
	z-index: 2;
	margin-block-start: 32px;
}

.bp-pc__strip-card {
	inline-size: 100%;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px 26px;
	background: var(--bp-pc-card-bg);
	border: 1px solid var(--bp-pc-border);
	border-radius: 16px;
	box-shadow: none;
}

.bp-pc__strip-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background: var(--bp-pc-green);
	color: var(--bp-pc-white);
	flex: 0 0 auto;
}

.bp-pc__strip-circle i,
.bp-pc__strip-circle svg {
	inline-size: 25px;
	block-size: 25px;
	fill: currentColor;
}

.bp-pc__strip-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 0 0 auto;
	min-inline-size: 260px;
	max-inline-size: 360px;
	font-family: var(--bp-pc-font-body);
	line-height: 1.45;
}

.bp-pc__strip-text--strong {
	color: var(--bp-pc-text);
	font-size: 15.5px;
	font-weight: 700;
}

.bp-pc__strip-text--secondary {
	color: var(--bp-pc-text-muted);
	font-size: 13.5px;
	font-weight: 500;
}

.bp-pc__strip-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.bp-pc__strip-benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 4px 6px;
	min-inline-size: 0;
}

.bp-pc__strip-benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	color: var(--bp-pc-green);
	flex: 0 0 auto;
}

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

.bp-pc__strip-benefit-label {
	font-family: var(--bp-pc-font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bp-pc-text);
	line-height: 1.3;
	max-inline-size: 100%;
}

/* ---------------- TABLET (769–1024) ---------------- */
@media (min-width: 769px) and (max-width: 1024px) {
	.bp-product-comparison { padding-block: 52px; }
	.bp-pc__header { margin-block-end: 36px; }
	.bp-pc__title { font-size: clamp(32px, 4.4vw, 44px); }
	.bp-pc__description { font-size: 16px; }
	.bp-pc__compare { column-gap: 18px; }
	.bp-pc__card { padding: 22px 22px; }
	.bp-pc__head { column-gap: 14px; }
	.bp-pc__code { font-size: clamp(48px, 5.4vw, 64px); }
	.bp-pc__version { font-size: 14px; }
	.bp-pc__divider { max-inline-size: 180px; }
	.bp-pc__product img { max-inline-size: 150px; max-block-size: 170px; }
	.bp-pc__features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
	.bp-pc__feature { padding: 4px 4px; }
	.bp-pc__feature-icon { inline-size: 26px; block-size: 26px; }
	.bp-pc__feature-icon i,
	.bp-pc__feature-icon svg { inline-size: 24px; block-size: 24px; }
	.bp-pc__feature-title { font-size: 12px; }
	.bp-pc__feature-subtitle { font-size: 10.5px; }
	.bp-pc__strip-card { padding: 18px 22px; gap: 18px; }
	.bp-pc__strip-circle { inline-size: 50px; block-size: 50px; }
	.bp-pc__strip-circle i, .bp-pc__strip-circle svg { inline-size: 22px; block-size: 22px; }
	.bp-pc__strip-text { min-inline-size: 220px; max-inline-size: 320px; }
	.bp-pc__strip-text--strong { font-size: 14.5px; }
	.bp-pc__strip-text--secondary { font-size: 12.5px; }
	.bp-pc__strip-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
	.bp-pc__strip-benefit-label { font-size: 11.5px; }
}

/* ---------------- MOBILE (≤ 768px) ----------------
 * Stack: G3 → VS → G4 → bottom strip. The VS is moved out of the
 * middle column and placed between the two stacked cards. Card
 * features become a 2x2 grid. No overlap, no overflow. */
@media (max-width: 768px) {

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

	.bp-pc__header { margin-block-end: 28px; gap: 12px; }
	.bp-pc__eyebrow { font-size: 12px; letter-spacing: 0.18em; gap: 10px; }
	.bp-pc__eyebrow-line { inline-size: 24px; }
	.bp-pc__eyebrow-leaf { inline-size: 14px; block-size: 14px; }
	.bp-pc__title { font-size: clamp( 30px, 8.5vw, 40px ); line-height: 1.1; }
	.bp-pc__description { font-size: 15.5px; line-height: 1.55; max-inline-size: 540px; }

	.bp-pc__compare {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}

	/* Move the center botanical out of the desktop grid; it is
	 * already absolutely positioned and stays decorative. */
	.bp-pc__compare > .bp-pc__botanical--center {
		display: none;
	}

	.bp-pc__card--g3 { grid-column: 1; grid-row: 1; }
	.bp-pc__vs       { grid-column: 1; grid-row: 2; min-inline-size: 0; }
	.bp-pc__card--g4 { grid-column: 1; grid-row: 3; }

	.bp-pc__vs-line { inline-size: 18px; }
	.bp-pc__vs-badge { inline-size: 56px; block-size: 56px; font-size: 18px; }

	.bp-pc__card { padding: 22px 20px; }

	/* On mobile collapse the head back to a single column so the
	 * product image, badge, code, version, and divider do not get
	 * squashed side by side. Both G3 and G4 stack identically. */
	.bp-pc__head,
	.bp-pc__card--g4 .bp-pc__head {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
		margin-block-end: 14px;
	}
	.bp-pc__head-text { order: 2; }
	.bp-pc__product { order: 1; }

	/* Center the product image on mobile for both cards */
	.bp-pc__card--g3 .bp-pc__product,
	.bp-pc__card--g4 .bp-pc__product {
		justify-content: center;
		transform: none;
	}
	.bp-pc__product img { max-inline-size: 160px; max-block-size: 180px; }

	.bp-pc__badge { font-size: 11.5px; padding: 7px 14px; }
	.bp-pc__code { font-size: clamp( 56px, 16vw, 72px ); }
	.bp-pc__version { font-size: 14px; letter-spacing: 0.1em; }
	.bp-pc__divider { max-inline-size: 260px; margin-block-end: 14px; }
	.bp-pc__card-description { font-size: 14.5px; max-inline-size: 100%; margin-block-end: 14px; }

	/* Features 2x2 on mobile */
	.bp-pc__features {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		row-gap: 14px;
		column-gap: 8px;
		margin-block-end: 18px;
	}
	.bp-pc__feature {
		padding: 4px;
	}
	/* Top row: no border-top; cells in the same row use a
	 * vertical separator on the start edge. */
	.bp-pc__feature:nth-child( odd ) { border-inline-start: 0; }
	.bp-pc__feature:nth-child( even ) { border-inline-start: 1px solid rgba( 184, 178, 90, 0.35 ); }
	/* Bottom row: clear the inherited border on the left-most
	 * cell of the second row */
	.bp-pc__feature:nth-child( 3 ) { border-inline-start: 0; }
	.bp-pc__feature:nth-child( 4 ) { border-inline-start: 1px solid rgba( 184, 178, 90, 0.35 ); }

	.bp-pc__feature-icon { inline-size: 26px; block-size: 26px; }
	.bp-pc__feature-icon i,
	.bp-pc__feature-icon svg { inline-size: 24px; block-size: 24px; }
	.bp-pc__feature-title { font-size: 12px; }
	.bp-pc__feature-subtitle { font-size: 10.5px; }

	.bp-pc__rule { margin-block-end: 14px; }

	/* CONDITIONNEMENTS: 2x2 */
	.bp-pc__sizes { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 8px; }
	.bp-pc__size { min-block-size: 40px; font-size: 13px; padding: 7px 10px; }

	.bp-pc__cta {
		font-size: 11.5px;
		padding: 10px 12px;
		gap: 8px;
		letter-spacing: 0.06em;
		min-block-size: 44px;
		white-space: normal;
	}
	.bp-pc__cta-icon i,
	.bp-pc__cta-icon svg { inline-size: 13px; block-size: 13px; }

	.bp-pc__strip { margin-block-start: 24px; }
	.bp-pc__strip-card {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 18px 18px;
	}
	.bp-pc__strip-circle { inline-size: 46px; block-size: 46px; align-self: flex-start; }
	.bp-pc__strip-circle i, .bp-pc__strip-circle svg { inline-size: 20px; block-size: 20px; }
	.bp-pc__strip-text { min-inline-size: 0; max-inline-size: 100%; }
	.bp-pc__strip-text--strong { font-size: 14.5px; }
	.bp-pc__strip-text--secondary { font-size: 13px; }
	.bp-pc__strip-benefits {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		row-gap: 12px;
		column-gap: 8px;
	}
	.bp-pc__strip-benefit-icon { inline-size: 24px; block-size: 24px; }
	.bp-pc__strip-benefit-icon i,
	.bp-pc__strip-benefit-icon svg { inline-size: 22px; block-size: 22px; }
	.bp-pc__strip-benefit-label { font-size: 11.5px; }
}

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

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

	.bp-pc__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-pc__header { margin-block-end: 22px; }
	.bp-pc__title { font-size: clamp( 26px, 8vw, 32px ); }
	.bp-pc__description { font-size: 14.5px; }

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

	.bp-pc__card,
	.bp-pc__card--g3,
	.bp-pc__card--g4,
	.bp-pc__vs,
	.bp-pc__strip,
	.bp-pc__strip-card {
		grid-column: 1 / -1 !important;
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		margin: 0 !important;
	}

	.bp-pc__strip-benefits {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-flow: row !important;
		gap: 12px !important;
		width: 100% !important;
	}
	.bp-pc__strip-benefit {
		grid-column: 1 / -1 !important;
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
	}

	.bp-pc__card { padding: 20px 18px; }
	.bp-pc__vs {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
		margin-inline: auto !important;
		inset-inline-start: auto !important;
		inset-inline-end: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		inline-size: auto !important;
		max-inline-size: 100% !important;
	}

	.bp-pc__product img { max-inline-size: 140px; max-block-size: 160px; }

	.bp-pc__code { font-size: clamp( 48px, 14vw, 60px ); }
	.bp-pc__version { font-size: 13px; }
	.bp-pc__card-description { font-size: 14px; }
	.bp-pc__divider { max-inline-size: 220px; }

	.bp-pc__feature-title { font-size: 11.5px; }
	.bp-pc__feature-subtitle { font-size: 10px; }

	.bp-pc__size { font-size: 12.5px; padding: 7px 8px; }

	.bp-pc__cta {
		font-size: 10.5px;
		padding: 9px 10px;
		gap: 6px;
		letter-spacing: 0.04em;
		min-block-size: 42px;
		white-space: normal;
		line-height: 1.25;
	}
	.bp-pc__cta-icon i,
	.bp-pc__cta-icon svg { inline-size: 12px; block-size: 12px; }

	.bp-pc__strip-card { padding: 16px 14px; }
	.bp-pc__strip-circle { inline-size: 40px; block-size: 40px; }
	.bp-pc__strip-circle i, .bp-pc__strip-circle svg { inline-size: 18px; block-size: 18px; }
	.bp-pc__strip-text--strong { font-size: 13.5px; }
	.bp-pc__strip-text--secondary { font-size: 12px; }

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

/* ---------------- Prevent horizontal scroll on mobile ---------------- */
@media (max-width: 768px) {
	.elementor .elementor-widget.elementor-widget-bp-product-comparison,
	.elementor-widget.elementor-widget-bp-product-comparison {
		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-pc__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-pc__title,
[dir="rtl"] .bp-pc__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-pc__code,
[dir="rtl"] .bp-pc__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-comparison [data-bp-reveal],
	.bp-product-comparison [data-bp-stagger] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
	.bp-pc__cta { transition: none !important; }
}

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

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