/* BP Production & Quality widget styles
 *
 * Transparent, non-full-bleed section for the "Production &
 * Qualité" block of the "À propos" page. The whole section is
 * capped at `max-inline-size: 1140px` and centered with
 * `margin-inline: auto`, so it sits on the existing page
 * background without an outer card, border, shadow or radius.
 * The individual content cards inside the section carry their
 * own background, border and radius; the outer container is
 * intentionally bare.
 *
 * Layout (top → bottom):
 *   1. Centered header: olive eyebrow + small leaf divider +
 *      serif title + paragraph.
 *   2. Two large botanical decorations positioned beside the
 *      header (inline-start / inline-end), behind the content
 *      with `pointer-events: none`.
 *   3. A 2-column grid (44% / 56%) under the header:
 *        - Left:  a tall bordered card containing a 5-step
 *          vertical production timeline (number circle +
 *          connector + icon badge + title + description,
 *          all bound by a subtle dotted vertical rail).
 *        - Right: a stack of three bordered cards: a large
 *          production / lab image, a "Nos garanties qualité"
 *          row of 4 equal items, and a horizontal quality
 *          message card.
 *   4. A full-width bottom strip inside the 1140px section
 *      with 4 equal items (dark-green circular icon badge +
 *      title + description, separated by hairline vertical
 *      dividers) and optional leaves decorations at both
 *      ends.
 *
 * All rules stay under .bp-production-quality. Logical
 * properties (margin-inline, padding-inline, inset-inline,
 * text-align: start/end) keep LTR/RTL aligned without a
 * separate RTL file. No JS, no jQuery, no Bootstrap, no
 * Swiper, no GSAP. The reveal-on-scroll entrance language is
 * inherited from the shared `bp-reveal.css` stylesheet via
 * the `data-bp-reveal` / `data-bp-stagger` attributes the
 * widget already emits.
 */

/* ================== Section root ================== */
.bp-production-quality {
	--bp-pq-max-w:           1140px;
	--bp-pq-fg:              #1F2A1F;
	--bp-pq-muted:           #5C6A5C;
	--bp-pq-eyebrow:         #B8B25A;
	--bp-pq-title:           #1F2A1F;
	--bp-pq-divider:         #B8B25A;
	--bp-pq-card-bg:         #FBF6EC;
	--bp-pq-card-border:     #E4DCCB;
	--bp-pq-card-radius:     16px;
	--bp-pq-green:           #374F37;
	--bp-pq-olive:           #B8B25A;
	--bp-pq-rail:            #B8B25A;
	--bp-pq-main-cols-gap:   20px;
	--bp-pq-right-rows-gap:  20px;
	--bp-pq-header-grid-gap: 48px;
	--bp-pq-strip-top:       28px;
	--bp-pq-image-h:         280px;
	--bp-pq-timeline-pad:    32px;
	--bp-pq-guarantees-pad:  22px;
	--bp-pq-quality-pad:     24px;
	--bp-pq-strip-pad:       22px;
	--bp-pq-num-size:        44px;
	--bp-pq-icon-badge:      72px;
	--bp-pq-icon-size:       22px;
	--bp-pq-g-icon-badge:    56px;
	--bp-pq-g-icon-size:     20px;
	--bp-pq-q-icon-box:      84px;
	--bp-pq-q-icon-size:     28px;
	--bp-pq-s-icon-badge:    56px;
	--bp-pq-s-icon-size:     20px;
	--bp-pq-botanical-w:     26%;
	--bp-pq-botanical-op:    0.75;
	--bp-pq-pad-block:       64px;
	--bp-pq-font:            var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-pq-display:         var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	position: relative;
	font-family: var(--bp-pq-font);
	color: var(--bp-pq-fg);

	/* Transparent section: no background, no border, no shadow,
	 * no outer radius. The page background shows through. */
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-block-start: 0;
	padding-block-end:   var(--bp-pq-pad-block);
	padding-inline: 0;
	overflow: visible;
}

.bp-production-quality__inner {
	position: relative;
	max-inline-size: var(--bp-pq-max-w);
	inline-size: 100%;
	margin-inline: auto;
	padding-inline: clamp(20px, 3vw, 32px);
	z-index: 1;
}

/* ================== Side botanicals ==================
 * Two large transparent images positioned beside the header.
 * They sit behind the content (z-index 0) and use
 * `pointer-events: none` so they never block interaction.
 * Negative `inset-inline` offsets let them "enter" the
 * 1140px content from the sides without pushing it. */
.bp-production-quality__botanical {
	position: absolute;
	inline-size: var(--bp-pq-botanical-w);
	block-size: auto;
	max-block-size: 55%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	opacity: var(--bp-pq-botanical-op);
	z-index: 0;
}

.bp-production-quality__botanical--left {
	inset-block-start: 4%;
	inset-inline-start: clamp(-220px, -10vw, -32px);
}

.bp-production-quality__botanical--right {
	inset-block-start: 4%;
	inset-inline-end: clamp(-220px, -10vw, -32px);
}

/* ================== Header ==================
 * Centered eyebrow + small leaf divider + serif title +
 * paragraph. The eyebrow uses the olive accent color, the
 * title uses the deep display family. The paragraph is
 * centered with a constrained readable width. */
.bp-production-quality__header {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	z-index: 2;
}

.bp-production-quality__eyebrow {
	margin: 0;
	font-family: var(--bp-pq-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-pq-eyebrow);
	line-height: 1.3;
}

.bp-production-quality__divider {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-block: 2px;
}

.bp-production-quality__divider-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	color: var(--bp-pq-divider);
	transform: translateY(-1px);
}

.bp-production-quality__title {
	margin: 0;
	font-family: var(--bp-pq-display);
	font-weight: 400;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.005em;
	color: var(--bp-pq-title);
}

.bp-production-quality__description {
	margin: 0;
	font-family: var(--bp-pq-font);
	font-size: 15px;
	line-height: 1.7;
	color: var(--bp-pq-muted);
	max-inline-size: 720px;
}

/* ================== Main 2-column grid ==================
 * Desktop: 44% / 56% with a 20px gap. The right column
 * stacks three cards vertically with the same gap. The left
 * timeline stretches to the natural combined height of the
 * three right-side cards. */
.bp-production-quality__main {
	position: relative;
	display: grid;
	grid-template-columns: 44% minmax(0, 1fr);
	column-gap: var(--bp-pq-main-cols-gap);
	row-gap: var(--bp-pq-right-rows-gap);
	align-items: stretch;
	margin-block-start: var(--bp-pq-header-grid-gap);
	z-index: 2;
}

.bp-production-quality__right {
	display: flex;
	flex-direction: column;
	gap: var(--bp-pq-right-rows-gap);
	min-inline-size: 0;
}

/* ================== Shared internal card ================== */
.bp-production-quality__card {
	position: relative;
	background-color: var(--bp-pq-card-bg);
	border: 1px solid var(--bp-pq-card-border);
	border-radius: var(--bp-pq-card-radius);
	overflow: hidden;
}

/* ================== Timeline card ==================
 * Tall bordered card on the inline-start. Holds a dotted
 * vertical rail, 5 process steps, and an optional botanical
 * decoration tucked into the bottom inline-end corner. */
.bp-production-quality__timeline {
	padding: var(--bp-pq-timeline-pad);
	display: flex;
	flex-direction: column;
	isolation: isolate; /* keeps rail pseudo behind content */
}

/* Timeline layout: 2-column grid.
 *   - inline-start: dedicated number column (44px wide)
 *     that holds all 5 numbered circles stacked vertically.
 *   - inline-end:   steps column that holds the 5 rows
 *     (icon + title + description).
 * `align-items: stretch` makes the number column take the
 * full height of the steps column, so the shared rail can
 * be sized from the center of step 1 to the center of
 * step 5. */
.bp-production-quality__timeline-layout {
	position: relative;
	display: grid;
	grid-template-columns: var(--bp-pq-num-size) minmax(0, 1fr);
	column-gap: 16px;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 2;
}

/* Dedicated number column. `position: relative` is the
 * positioning context for the shared rail, which is sized
 * relative to this column. */
.bp-production-quality__timeline-numbers {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding-block: 6px;
}

/* Shared dotted vertical rail. Centered on the number
 * column with `inset-inline-start: 50%` +
 * `transform: translateX(-50%)` so it runs through the
 * exact horizontal center of the numbered circles. Sized
 * from the center of the first number to the center of
 * the last number, so it stops at step 5 and does not
 * continue below it. Placed at z-index 0 so the numbered
 * circles (z-index 2) sit on top of it. */
.bp-production-quality__timeline-rail {
	position: absolute;
	inset-block-start: calc(var(--bp-pq-num-size) / 2);
	inset-block-end:   calc(var(--bp-pq-num-size) / 2);
	inset-inline-start: 50%;
	inline-size: 1px;
	transform: translateX(-50%);
	background-image: radial-gradient(circle, var(--bp-pq-rail) 1px, transparent 1.5px);
	background-size: 1px 8px;
	background-repeat: repeat-y;
	z-index: 0;
	pointer-events: none;
}

.bp-production-quality__timeline-deco {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-end: 12px;
	inline-size: 30%;
	max-inline-size: 140px;
	block-size: auto;
	object-fit: contain;
	opacity: 0.85;
	pointer-events: none;
	z-index: 1;
}

.bp-production-quality__timeline-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
}

.bp-production-quality__step {
	display: grid;
	/* 2-column grid: icon | text. The number lives in the
	 * dedicated number column. The text column uses
	 * `minmax(0, 1fr)` so it can shrink below its intrinsic
	 * content width and let long titles / body copy wrap
	 * normally instead of forcing character breaks. */
	grid-template-columns: var(--bp-pq-icon-badge) minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
	padding-block: 18px;
	border-block-end: 1px solid var(--bp-pq-card-border);
}

.bp-production-quality__step--last {
	border-block-end: 0;
	padding-block-end: 6px;
}

.bp-production-quality__step:first-child {
	padding-block-start: 6px;
}

/* Numbered circle on the inline-start. Sits in the
 * dedicated number column, above the shared rail. */
.bp-production-quality__step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-pq-num-size);
	block-size: var(--bp-pq-num-size);
	border-radius: 999px;
	border: 1px solid var(--bp-pq-olive);
	background-color: var(--bp-pq-card-bg);
	color: var(--bp-pq-green);
	font-family: var(--bp-pq-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	position: relative;
	z-index: 2;
	flex-shrink: 0;
}

/* Short horizontal connector from the number circle to the
 * icon badge. Drawn as a 1px dotted line. */
.bp-production-quality__step-connector {
	display: none;
}

/* Larger circular icon badge in the center column. */
.bp-production-quality__step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-pq-icon-badge);
	block-size: var(--bp-pq-icon-badge);
	border-radius: 999px;
	border: 1px solid var(--bp-pq-olive);
	background-color: var(--bp-pq-card-bg);
	color: var(--bp-pq-green);
	position: relative;
	z-index: 2;
}

.bp-production-quality__step-icon i,
.bp-production-quality__step-icon svg {
	display: block;
	color: inherit;
	fill: currentColor;
}

.bp-production-quality__step-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-block-start: 6px;
	/* Fill the text column and allow it to shrink below the
	 * intrinsic content width so titles and descriptions
	 * wrap on word boundaries instead of being squeezed into
	 * a narrow column with character-by-character breaks. */
	inline-size: 100%;
	min-inline-size: 0;
	word-break: normal;
	overflow-wrap: normal;
}

.bp-production-quality__step-title {
	margin: 0;
	font-family: var(--bp-pq-display);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.25;
	color: var(--bp-pq-green);
	word-break: normal;
	overflow-wrap: normal;
}

.bp-production-quality__step-body {
	margin: 0;
	font-family: var(--bp-pq-font);
	font-size: 13px;
	line-height: 1.6;
	color: var(--bp-pq-muted);
	word-break: normal;
	overflow-wrap: normal;
}

/* ================== Production image card ==================
 * Full card width landscape image. Fixed visual height so
 * the right column stays visually balanced against the
 * timeline. The image uses object-fit: cover to fill the
 * box without distortion. */
.bp-production-quality__image {
	overflow: hidden;
}

.bp-production-quality__image img {
	display: block;
	inline-size: 100%;
	block-size: var(--bp-pq-image-h);
	object-fit: cover;
	object-position: center;
}

/* ================== Guarantees card ==================
 * Bordered card holding a "Nos garanties qualité" title
 * and 4 equal items (icon badge + 2-line label) separated
 * by hairline vertical dividers. */
.bp-production-quality__guarantees {
	position: relative;
	padding: var(--bp-pq-guarantees-pad);
}

.bp-production-quality__guarantees-deco {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 12px;
	inline-size: 22%;
	max-inline-size: 120px;
	block-size: auto;
	object-fit: contain;
	opacity: 0.75;
	pointer-events: none;
	z-index: 1;
}

.bp-production-quality__guarantees-title {
	position: relative;
	margin: 0 0 18px;
	font-family: var(--bp-pq-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
	color: var(--bp-pq-green);
	text-align: start;
	z-index: 2;
}

.bp-production-quality__guarantees-row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 0;
	row-gap: 14px;
	z-index: 2;
}

.bp-production-quality__guarantee {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-inline: 12px;
	padding-block: 6px;
	text-align: center;
	border-inline-start: 1px solid var(--bp-pq-card-border);
	min-inline-size: 0;
}

.bp-production-quality__guarantee:first-child {
	border-inline-start: 0;
}

.bp-production-quality__guarantee-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-pq-g-icon-badge);
	block-size: var(--bp-pq-g-icon-badge);
	border-radius: 999px;
	border: 1px solid var(--bp-pq-olive);
	background-color: var(--bp-pq-card-bg);
	color: var(--bp-pq-green);
}

.bp-production-quality__guarantee-icon i,
.bp-production-quality__guarantee-icon svg {
	display: block;
	color: inherit;
	fill: currentColor;
}

.bp-production-quality__guarantee-label {
	display: block;
	font-family: var(--bp-pq-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--bp-pq-green);
	letter-spacing: 0.005em;
}

/* ================== Quality message card ==================
 * Compact horizontal card. Large circular botanical icon
 * on the inline-start, title + body on the inline-end, with
 * an optional decoration near the inline-end edge. */
.bp-production-quality__quality {
	position: relative;
	padding: var(--bp-pq-quality-pad);
	display: grid;
	grid-template-columns: var(--bp-pq-q-icon-box) minmax(0, 1fr);
	column-gap: 18px;
	align-items: center;
}

.bp-production-quality__quality-deco {
	position: absolute;
	inset-block-end: 8px;
	inset-inline-end: 10px;
	inline-size: 22%;
	max-inline-size: 110px;
	block-size: auto;
	object-fit: contain;
	opacity: 0.8;
	pointer-events: none;
	z-index: 1;
}

.bp-production-quality__quality-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-pq-q-icon-box);
	block-size: var(--bp-pq-q-icon-box);
	border-radius: 999px;
	border: 1px solid var(--bp-pq-olive);
	background-color: var(--bp-pq-card-bg);
	color: var(--bp-pq-green);
	position: relative;
	z-index: 2;
}

.bp-production-quality__quality-icon i,
.bp-production-quality__quality-icon svg {
	display: block;
	color: inherit;
	fill: currentColor;
}

.bp-production-quality__quality-text {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-inline-size: 0;
	z-index: 2;
}

.bp-production-quality__quality-title {
	margin: 0;
	font-family: var(--bp-pq-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.25;
	color: var(--bp-pq-green);
}

.bp-production-quality__quality-body {
	margin: 0;
	font-family: var(--bp-pq-font);
	font-size: 13px;
	line-height: 1.6;
	color: var(--bp-pq-muted);
}

/* ================== Bottom strip ==================
 * Full inner width strip with 4 equal items separated by
 * hairline vertical dividers. Each item: dark-green
 * circular icon badge + title + description. Optional
 * botanical decorations at both ends. */
.bp-production-quality__strip {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 0;
	row-gap: 14px;
	padding: var(--bp-pq-strip-pad);
	margin-block-start: var(--bp-pq-strip-top);
	overflow: visible;
}

.bp-production-quality__strip-deco {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inline-size: 18%;
	max-inline-size: 110px;
	block-size: auto;
	object-fit: contain;
	opacity: 0.8;
	pointer-events: none;
	z-index: 1;
}

.bp-production-quality__strip-deco--left {
	inset-inline-start: -8px;
}

.bp-production-quality__strip-deco--right {
	inset-inline-end: -8px;
}

.bp-production-quality__strip-item {
	display: grid;
	/* Two internal columns: icon on the inline-start, copy
	 * (title + description) on the inline-end. The copy
	 * wrapper is a flex-column so the description sits
	 * directly below the title and aligns with its start
	 * edge, instead of wrapping under the icon. */
	grid-template-columns: var(--bp-pq-s-icon-badge) minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
	padding-inline: 18px;
	padding-block: 6px;
	border-inline-start: 1px solid var(--bp-pq-card-border);
	min-inline-size: 0;
}

.bp-production-quality__strip-item:first-child {
	border-inline-start: 0;
}

/* Copy column: holds the title and the description in a
 * single flex-column so the description always sits below
 * the title and shares the same start edge. */
.bp-production-quality__strip-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-inline-size: 0;
}

.bp-production-quality__strip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-pq-s-icon-badge);
	block-size: var(--bp-pq-s-icon-badge);
	border-radius: 999px;
	background-color: var(--bp-pq-green);
	color: #FFFFFF;
	position: relative;
	z-index: 2;
}

.bp-production-quality__strip-icon i,
.bp-production-quality__strip-icon svg {
	display: block;
	color: inherit;
	fill: currentColor;
}

.bp-production-quality__strip-title {
	margin: 0;
	font-family: var(--bp-pq-display);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.25;
	color: var(--bp-pq-green);
}

.bp-production-quality__strip-body {
	margin: 0;
	font-family: var(--bp-pq-font);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--bp-pq-muted);
}

/* ================== Tablet ==================
 * The main grid stays side-by-side but narrows the timeline
 * column. The bottom strip collapses to 2 columns. The
 * header botanicals shrink. */
@media (max-width: 1024px) {
	.bp-production-quality {
		--bp-pq-pad-block: 56px;
		--bp-pq-timeline-pad: 26px;
		--bp-pq-botanical-w: 20%;
		--bp-pq-image-h: 240px;
		--bp-pq-icon-badge: 60px;
		--bp-pq-num-size: 32px;
	}

	.bp-production-quality__main {
		grid-template-columns: 42% minmax(0, 1fr);
		column-gap: 16px;
	}

	.bp-production-quality__guarantees-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 14px;
	}

	.bp-production-quality__guarantee {
		border-inline-start: 0;
	}

	.bp-production-quality__guarantee:nth-child(odd) {
		border-inline-end: 1px solid var(--bp-pq-card-border);
		padding-inline-end: 14px;
	}

	.bp-production-quality__guarantee:nth-child(even) {
		padding-inline-start: 14px;
	}

	.bp-production-quality__strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 16px;
	}

	.bp-production-quality__strip-item {
		border-inline-start: 0;
		padding-inline: 12px;
	}

	.bp-production-quality__strip-item:nth-child(odd) {
		border-inline-end: 1px solid var(--bp-pq-card-border);
	}
}

/* ================== Mobile ==================
 * The main grid stacks into a single column. The timeline
 * keeps the 5 steps. Guarantees collapse to a single
 * column. The bottom strip stacks as a single column. The
 * side botanicals are hidden. */
@media (max-width: 768px) {
	.bp-production-quality {
		--bp-pq-pad-block: 48px;
		--bp-pq-header-grid-gap: 36px;
		--bp-pq-timeline-pad: 22px;
		--bp-pq-image-h: 220px;
		--bp-pq-icon-badge: 56px;
		--bp-pq-num-size: 30px;
		--bp-pq-q-icon-box: 70px;
		--bp-pq-strip-top: 22px;
	}

	.bp-production-quality__botanical {
		display: none;
	}

	.bp-production-quality__title {
		font-size: clamp(26px, 7vw, 34px);
	}

	.bp-production-quality__description {
		font-size: 14px;
	}

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

	.bp-production-quality__right {
		row-gap: 16px;
	}

	.bp-production-quality__step {
		grid-template-columns: var(--bp-pq-icon-badge) minmax(0, 1fr);
		column-gap: 10px;
		padding-block: 14px;
	}

	.bp-production-quality__step-title {
		font-size: 16px;
	}

	.bp-production-quality__guarantees-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 14px;
	}

	.bp-production-quality__guarantee:nth-child(odd) {
		border-inline-end: 1px solid var(--bp-pq-card-border);
		padding-inline-end: 10px;
		padding-inline-start: 6px;
	}

	.bp-production-quality__guarantee:nth-child(even) {
		padding-inline-start: 10px;
	}

	.bp-production-quality__quality {
		grid-template-columns: var(--bp-pq-q-icon-box) minmax(0, 1fr);
		column-gap: 14px;
	}

	.bp-production-quality__quality-title {
		font-size: 18px;
	}

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

	.bp-production-quality__strip-item {
		grid-template-columns: var(--bp-pq-s-icon-badge) minmax(0, 1fr);
		column-gap: 12px;
		border-inline-start: 0;
		padding-inline: 0;
	}
}

@media (max-width: 480px) {
	.bp-production-quality__inner {
		padding-inline: 18px;
	}

	.bp-production-quality__guarantees-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.bp-production-quality__guarantee {
		border-inline-start: 0 !important;
		padding-inline: 0 !important;
	}
}

/* ================== Arabic / RTL ==================
 * The display headlines fall back to the Arabic family
 * instead of inheriting the Latin display family. The
 * layout already mirrors via logical properties. */
[lang="ar"] .bp-production-quality__title,
[dir="rtl"] .bp-production-quality__title,
[lang="ar"] .bp-production-quality__step-title,
[dir="rtl"] .bp-production-quality__step-title,
[lang="ar"] .bp-production-quality__guarantees-title,
[dir="rtl"] .bp-production-quality__guarantees-title,
[lang="ar"] .bp-production-quality__quality-title,
[dir="rtl"] .bp-production-quality__quality-title,
[lang="ar"] .bp-production-quality__strip-title,
[dir="rtl"] .bp-production-quality__strip-title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	letter-spacing: 0;
}

/* ================== Reduced motion ==================
 * The shared `bp-reveal.css` already neutralises the
 * reveal-on-scroll animation under `prefers-reduced-motion:
 * reduce`, so no widget-specific override is needed here. */

/* ================== Elementor wrapper spacing ==================
 * Elementor's `.e-con` / `.elementor-section` add a default
 * 10px padding on every side, which produces a visible blank
 * strip above this section when it follows another widget.
 * We zero that default padding on the wrappers that hold this
 * widget so the section sits flush against the previous one.
 * The widget's own `padding-block-start` token stays in
 * control of any intentional top spacing; the wrapper padding
 * is purely the Elementor default and is removed
 * unconditionally. */
.elementor .elementor-widget.elementor-widget-bp-production-quality,
.elementor-widget.elementor-widget-bp-production-quality,
.elementor .elementor-widget-bp-production-quality,
.e-con.e-parent:has(> .elementor-widget-bp-production-quality),
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-bp-production-quality),
.elementor .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-bp-production-quality) {
	--container-default-padding-top:    0px;
	--container-default-padding-bottom: 0px;
	margin-block: 0;
}