/* BP Formulation NPK widget styles
 *
 * Tunisia product page "Formulation NPK" section.
 *
 * Layout:
 *   - widget stays inside its own 1140px container (no full-bleed)
 *   - centered header: eyebrow + serif title + description
 *   - main 2-column composition: ~44% (NPK monogram + 4 nutrient
 *     rows) / ~56% (large rounded image)
 *   - left column: large decorative N / P / K monogram with
 *     small botanical branches + 4 nutrient rows, each with
 *     a circular icon, serif title, dotted horizontal line and
 *     body
 *   - right column: large rounded image panel, object-fit: cover
 *   - bottom process strip: full-width rounded bordered strip
 *     with 4 stages (icon + serif label), gold/green arrow
 *     separators between them, optional olive decorations on
 *     each side
 *   - 4 decorative botanicals: top-left, top-right, side-left
 *     (beside the NPK monogram), side-right (beside the image)
 *     — all absolutely positioned, fully responsive
 *     (width / X / Y / rotation / opacity) from Elementor
 *
 * Mobile: stacks vertically in the order
 *   header → right image → N/P/K nutrient content → process strip.
 * The N/P/K monogram becomes proportionate and non-obstructive.
 * The process strip becomes 2x2 on tablet / mobile.
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #EDDBC3  cream
 *   #B8B25A  olive / gold
 *   #8C6A3A  warm brown/gold
 *   #FFFFFF  white
 *   plus existing neutral tokens (#FBF6EC, #E4DCCB, #1F2A1F,
 *   #5C6A5C). No invented greens or browns.
 *
 * SCOPING:
 *   Every rule is scoped under `.bp-formulation-npk`
 *   (the widget's own root). There are NO global selector
 *   leaks. Logical CSS properties (margin-inline, padding-inline,
 *   inset-inline, inline-size, block-size) are used so LTR and
 *   RTL share the same ruleset.
 */

/* =========================================================
 * ROOT (1140px container, centered)
 * ========================================================= */
.bp-formulation-npk {
	--bp-fnp-green:          #374F37;
	--bp-fnp-olive:          #B8B25A;
	--bp-fnp-cream:          #EDDBC3;
	--bp-fnp-warm:           #8C6A3A;
	--bp-fnp-white:          #FFFFFF;
	--bp-fnp-text:           #1F2A1F;
	--bp-fnp-text-muted:     #5C6A5C;
	--bp-fnp-border:         #E4DCCB;
	--bp-fnp-card-bg:        #FBF6EC;

	--bp-fnp-inner-max:      1140px;

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

	/* Decorative botanicals — fully overridable from Elementor per device. */
	--bp-fnp-tl-width:       220px;
	--bp-fnp-tl-x:           0px;
	--bp-fnp-tl-y:           0px;
	--bp-fnp-tl-rotate:      0deg;
	--bp-fnp-tl-opacity:     100%;

	--bp-fnp-tr-width:       220px;
	--bp-fnp-tr-x:           0px;
	--bp-fnp-tr-y:           0px;
	--bp-fnp-tr-rotate:      0deg;
	--bp-fnp-tr-opacity:     100%;

	--bp-fnp-sl-width:       200px;
	--bp-fnp-sl-x:           0px;
	--bp-fnp-sl-y:           0px;
	--bp-fnp-sl-rotate:      0deg;
	--bp-fnp-sl-opacity:     100%;

	--bp-fnp-sr-width:       200px;
	--bp-fnp-sr-x:           0px;
	--bp-fnp-sr-y:           0px;
	--bp-fnp-sr-rotate:      0deg;
	--bp-fnp-sr-opacity:     100%;

	position: relative;
	isolation: isolate;
	overflow-x: clip;
	overflow-y: visible;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: var(--bp-fnp-inner-max);
	margin-inline: auto;
	padding-block: 72px;
	padding-inline: 0;
	background: transparent;
	color: var(--bp-fnp-text);
	font-family: var(--bp-fnp-font-body);
}

.elementor-18 .elementor-element.elementor-element-b4b71e2 .bp-formulation-npk {
	margin-block-start: 100px !important;
}

.bp-formulation-npk *,
.bp-formulation-npk *::before,
.bp-formulation-npk *::after {
	box-sizing: border-box;
}

/* =========================================================
 * INNER (centers content inside the 1140px container)
 * ========================================================= */
.bp-fnp__inner {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: var(--bp-fnp-inner-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* =========================================================
 * Decorative botanicals (top-left, top-right, side-left, side-right)
 * Absolutely positioned inside the widget's own root. Each leaf
 * uses its own CSS variables (--bp-fnp-{tl,tr,sl,sr}-*) which are
 * written inline by Elementor per-device.
 * ========================================================= */
.bp-formulation-npk .bp-fnp__decor {
	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-fnp-olive);
	max-inline-size: 45%;
}

.bp-formulation-npk .bp-fnp__decor img,
.bp-formulation-npk .bp-fnp__decor svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
	color: inherit;
}

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

.bp-formulation-npk .bp-fnp__decor--tr {
	inset-block-start: 0;
	right: 0;
	left: auto;
	inline-size: var(--bp-fnp-tr-width);
	transform: translate(
		var(--bp-fnp-tr-x, 0px),
		var(--bp-fnp-tr-y, 0px)
	) rotate(var(--bp-fnp-tr-rotate, 0deg));
	opacity: var(--bp-fnp-tr-opacity, 100%);
}

/* Side botanicals: placed in the middle band of the section,
 * outside the 44% / 56% grid columns. They sit at the inline
 * edges of the section, behind the content. */
.bp-formulation-npk .bp-fnp__decor--sl {
	inset-block-start: 38%;
	left: 0;
	right: auto;
	inline-size: var(--bp-fnp-sl-width);
	transform: translate(
		var(--bp-fnp-sl-x, 0px),
		var(--bp-fnp-sl-y, 0px)
	) rotate(var(--bp-fnp-sl-rotate, 0deg));
	opacity: var(--bp-fnp-sl-opacity, 100%);
	z-index: 1;
}

.bp-formulation-npk .bp-fnp__decor--sr {
	inset-block-start: 38%;
	right: 0;
	left: auto;
	inline-size: var(--bp-fnp-sr-width);
	transform: translate(
		var(--bp-fnp-sr-x, 0px),
		var(--bp-fnp-sr-y, 0px)
	) rotate(var(--bp-fnp-sr-rotate, 0deg));
	opacity: var(--bp-fnp-sr-opacity, 100%);
	z-index: 1;
}

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

/* =========================================================
 * HEADER
 * ========================================================= */
.bp-formulation-npk .bp-fnp__header {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	margin-block-end: 40px;
}

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

.bp-formulation-npk .bp-fnp__eyebrow-line {
	inline-size: 44px;
	block-size: 1px;
	background: var(--bp-fnp-olive);
	flex: 0 0 auto;
}

.bp-formulation-npk .bp-fnp__eyebrow-text {
	white-space: nowrap;
}

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

.bp-formulation-npk .bp-fnp__eyebrow-mark {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.bp-formulation-npk .bp-fnp__title {
	margin: 0;
	color: #374F3C;
	font-family: var(--bp-fnp-font-display);
	font-weight: 400;
	font-size: clamp(36px, 3.8vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.005em;
	max-inline-size: 980px;
}

.bp-formulation-npk .bp-fnp__description {
	margin: 0;
	color: var(--bp-fnp-text);
	font-family: var(--bp-fnp-font-body);
	font-size: 16.5px;
	line-height: 1.55;
	max-inline-size: 720px;
}

/* =========================================================
 * MAIN COMPOSITION (2 columns: 44% / 56%)
 * ========================================================= */
.bp-formulation-npk .bp-fnp__main {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 44% 1fr;
	column-gap: 40px;
	row-gap: 28px;
	align-items: start;
	min-inline-size: 0;
}

/* =========================================================
 * LEFT COLUMN (NPK monogram + 4 nutrient rows)
 * ========================================================= */
.bp-formulation-npk .bp-fnp__left {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 18px;
	align-items: start;
	min-inline-size: 0;
}

/* ---- Decorative N / P / K monogram ---- */
.bp-formulation-npk .bp-fnp__monogram {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	min-inline-size: 90px;
	padding-block-start: 4px;
	z-index: 1;
}

.bp-formulation-npk .bp-fnp__letter {
	font-family: var(--bp-fnp-font-display);
	font-weight: 400;
	font-size: 108px;
	line-height: 0.9;
	letter-spacing: -0.01em;
	color: var(--bp-fnp-green);
	display: block;
	opacity: 0.85;
}

.bp-formulation-npk .bp-fnp__letter--n { color: #374F37; }
.bp-formulation-npk .bp-fnp__letter--p { color: #B8B25A; }
.bp-formulation-npk .bp-fnp__letter--k { color: #8C6A3A; }

.bp-formulation-npk .bp-fnp__monogram-branch {
	position: absolute;
	inline-size: 56px;
	block-size: 56px;
	color: var(--bp-fnp-olive);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.bp-formulation-npk .bp-fnp__monogram-branch--n {
	inset-block-start: 8%;
	left: -22px;
	right: auto;
	transform: rotate(-30deg);
}
.bp-formulation-npk .bp-fnp__monogram-branch--p {
	inset-block-start: 42%;
	right: -18px;
	left: auto;
	transform: rotate(150deg);
}
.bp-formulation-npk .bp-fnp__monogram-branch--n,
.bp-formulation-npk .bp-fnp__monogram-branch--p {
	display: none;
}

.bp-formulation-npk .bp-fnp__monogram-branch-svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
	color: inherit;
	fill: none;
	stroke: currentColor;
}

/* ---- 4 nutrient rows ---- */
.bp-formulation-npk .bp-fnp__nut-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-inline-size: 0;
}

.bp-formulation-npk .bp-fnp__nut {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	row-gap: 4px;
	align-items: start;
	min-inline-size: 0;
	padding-block-end: 4px;
}

.bp-formulation-npk .bp-fnp__nut + .bp-fnp__nut {
	border-block-start: 0;
}

.bp-formulation-npk .bp-fnp__nut-letter {
	display: none;
}

.bp-formulation-npk .bp-fnp__nut-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background: var(--bp-fnp-card-bg);
	border: 1px solid var(--bp-fnp-olive);
	color: var(--bp-fnp-green);
	flex: 0 0 auto;
}

.bp-formulation-npk .bp-fnp__nut-circle i,
.bp-formulation-npk .bp-fnp__nut-circle svg {
	inline-size: 25px;
	block-size: 25px;
	fill: currentColor;
	color: var(--bp-fnp-green);
}

.bp-formulation-npk .bp-fnp__nut-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
	max-inline-size: 100%;
	color: var(--bp-fnp-text);
}

.bp-formulation-npk .bp-fnp__nut-title {
	font-family: var(--bp-fnp-font-display);
	font-weight: 400;
	font-size: 18px;
	color: var(--bp-fnp-green);
	line-height: 1.25;
	letter-spacing: 0;
}

.bp-formulation-npk .bp-fnp__nut-dots {
	inline-size: 100%;
	block-size: 8px;
	background-image: radial-gradient(circle, var(--bp-fnp-olive) 1px, transparent 1.4px);
	background-size: 8px 100%;
	background-repeat: repeat-x;
	background-position: 0 50%;
	flex: 0 0 auto;
	margin-block: 2px 0;
}

.bp-formulation-npk .bp-fnp__nut-body {
	font-family: var(--bp-fnp-font-body);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--bp-fnp-text);
	max-inline-size: 100%;
}

/* =========================================================
 * RIGHT COLUMN (large rounded image)
 * ========================================================= */
.bp-formulation-npk .bp-fnp__right {
	position: relative;
	min-inline-size: 0;
	z-index: 2;
}

.bp-formulation-npk .bp-fnp__image-wrap {
	position: relative;
	inline-size: 100%;
	min-block-size: 460px;
	overflow: hidden;
	border-radius: 20px;
	background: var(--bp-fnp-card-bg);
	isolation: isolate;
}

.bp-formulation-npk .bp-fnp__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 20px;
}

.bp-formulation-npk .bp-fnp__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 460px;
	background: linear-gradient(180deg, rgba(55,79,55,0.10), rgba(0,0,0,0.16));
	color: var(--bp-fnp-text-muted);
	font-family: var(--bp-fnp-font-body);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 20px;
}

/* =========================================================
 * BOTTOM PROCESS STRIP
 * ========================================================= */
.bp-formulation-npk .bp-fnp__strip {
	position: relative;
	z-index: 2;
	margin-block-start: 36px;
}

.bp-formulation-npk .bp-fnp__strip-card {
	inline-size: 100%;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
	background: var(--bp-fnp-card-bg);
	border: 1px solid var(--bp-fnp-olive);
	border-radius: 18px;
}

.bp-formulation-npk .bp-fnp__strip-branch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-fnp-olive);
	flex: 0 0 auto;
	inline-size: 72px;
	block-size: 72px;
}

.bp-formulation-npk .bp-fnp__strip-branch img,
.bp-formulation-npk .bp-fnp__strip-branch svg {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	display: block;
	object-fit: contain;
	fill: none;
	stroke: currentColor;
}

.bp-formulation-npk .bp-fnp__strip-branch--left {
	margin-inline-end: 4px;
}
.bp-formulation-npk .bp-fnp__strip-branch--right {
	margin-inline-start: 4px;
}

.bp-formulation-npk .bp-fnp__stages {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-inline-size: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	align-items: center;
}

.bp-formulation-npk .bp-fnp__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	min-inline-size: 0;
	padding-inline: 8px;
}

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

.bp-formulation-npk .bp-fnp__stage-circle i,
.bp-formulation-npk .bp-fnp__stage-circle svg,
.bp-formulation-npk .bp-fnp__stage-circle .bp-fnp__stage-icon-svg {
	inline-size: 25px;
	block-size: 25px;
	fill: currentColor;
	color: inherit;
}

.bp-formulation-npk .bp-fnp__stage-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-inline-size: 0;
	max-inline-size: 100%;
	color: var(--bp-fnp-text);
	font-family: var(--bp-fnp-font-body);
	line-height: 1.3;
}

.bp-formulation-npk .bp-fnp__stage-title {
	font-family: var(--bp-fnp-font-display);
	font-weight: 400;
	font-size: 16px;
	color: var(--bp-fnp-text);
	letter-spacing: 0;
}

.bp-formulation-npk .bp-fnp__stage-sub {
	font-family: var(--bp-fnp-font-body);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bp-fnp-text-muted);
}

.bp-formulation-npk .bp-fnp__arrow {
	position: absolute;
	inset-inline-end: -10px;
	inset-block-start: 50%;
	transform: translate(50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 16px;
	color: var(--bp-fnp-olive);
	z-index: 1;
	pointer-events: none;
}

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

/* =========================================================
 * TABLET (769–1024)
 * ========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
	.bp-formulation-npk { padding-block: 56px; }

	.bp-formulation-npk .bp-fnp__header { margin-block-end: 32px; }
	.bp-formulation-npk .bp-fnp__title { font-size: clamp(30px, 4.2vw, 40px); }
	.bp-formulation-npk .bp-fnp__description { font-size: 15.5px; }

	.bp-formulation-npk .bp-fnp__main {
		grid-template-columns: 46% 1fr;
		column-gap: 28px;
	}

	.bp-formulation-npk .bp-fnp__monogram { min-inline-size: 80px; }
	.bp-formulation-npk .bp-fnp__letter { font-size: 96px; }
	.bp-formulation-npk .bp-fnp__monogram-branch { inline-size: 46px; block-size: 46px; }

	.bp-formulation-npk .bp-fnp__nut-circle { inline-size: 50px; block-size: 50px; }
	.bp-formulation-npk .bp-fnp__nut-circle i,
	.bp-formulation-npk .bp-fnp__nut-circle svg { inline-size: 22px; block-size: 22px; }
	.bp-formulation-npk .bp-fnp__nut-title { font-size: 17px; }
	.bp-formulation-npk .bp-fnp__nut-body { font-size: 13px; }

	.bp-formulation-npk .bp-fnp__image-wrap,
	.bp-formulation-npk .bp-fnp__image-placeholder { min-block-size: 380px; }

	.bp-formulation-npk .bp-fnp__strip { margin-block-start: 28px; }
	.bp-formulation-npk .bp-fnp__strip-card { padding: 18px 18px; gap: 14px; }
	.bp-formulation-npk .bp-fnp__strip-branch { inline-size: 56px; block-size: 56px; }
	.bp-formulation-npk .bp-fnp__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
	.bp-formulation-npk .bp-fnp__stage-circle { inline-size: 50px; block-size: 50px; }
	.bp-formulation-npk .bp-fnp__stage-circle i,
	.bp-formulation-npk .bp-fnp__stage-circle svg { inline-size: 22px; block-size: 22px; }
	.bp-formulation-npk .bp-fnp__stage-title { font-size: 15px; }
	.bp-formulation-npk .bp-fnp__stage-sub { font-size: 12px; }
	.bp-formulation-npk .bp-fnp__arrow { display: none; }
}

/* =========================================================
 * MOBILE (≤ 768px)
 *
 * Stack: header → right image → N/P/K nutrient content → process strip.
 * The N/P/K monogram is reduced in size and placed above the
 * nutrient list. The process strip becomes 2x2.
 * ========================================================= */
@media (max-width: 768px) {

	.bp-formulation-npk { padding-block: 48px; }

	.bp-formulation-npk .bp-fnp__header { margin-block-end: 26px; gap: 12px; }
	.bp-formulation-npk .bp-fnp__eyebrow { font-size: 12px; letter-spacing: 0.18em; gap: 10px; }
	.bp-formulation-npk .bp-fnp__eyebrow-line { inline-size: 24px; }
	.bp-formulation-npk .bp-fnp__eyebrow-leaf { inline-size: 14px; block-size: 14px; }
	.bp-formulation-npk .bp-fnp__title { font-size: clamp(28px, 7.5vw, 36px); line-height: 1.1; }
	.bp-formulation-npk .bp-fnp__description { font-size: 15px; line-height: 1.55; max-inline-size: 540px; }

	/* Stack the right image BEFORE the nutrient content on mobile
	 * (header → image → NPK). */
	.bp-formulation-npk .bp-fnp__main {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	/* On mobile, the right column comes first; reorder via
	 * explicit grid-row / order. */
	.bp-formulation-npk .bp-fnp__right  { order: 1; }
	.bp-formulation-npk .bp-fnp__left   { order: 2; }

	.bp-formulation-npk .bp-fnp__image-wrap,
	.bp-formulation-npk .bp-fnp__image-placeholder { min-block-size: 260px; border-radius: 16px; }
	.bp-formulation-npk .bp-fnp__image { border-radius: 16px; }

	/* Nutrient content (NPK monogram + rows) is single-column,
	 * monogram on top, rows below. */
	.bp-formulation-npk .bp-fnp__left {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 18px;
	}

	.bp-formulation-npk .bp-fnp__monogram {
		flex-direction: row;
		justify-content: center;
		min-inline-size: 0;
		gap: 16px;
		padding-block-start: 0;
		margin-inline: auto;
	}

	.bp-formulation-npk .bp-fnp__letter { font-size: 68px; line-height: 1; }
	.bp-formulation-npk .bp-fnp__monogram-branch { display: none; }

	.bp-formulation-npk .bp-fnp__nut-list { gap: 16px; }

	.bp-formulation-npk .bp-fnp__nut-circle { inline-size: 48px; block-size: 48px; }
	.bp-formulation-npk .bp-fnp__nut-circle i,
	.bp-formulation-npk .bp-fnp__nut-circle svg { inline-size: 21px; block-size: 21px; }
	.bp-formulation-npk .bp-fnp__nut-title { font-size: 16.5px; }
	.bp-formulation-npk .bp-fnp__nut-body { font-size: 13px; }
	.bp-formulation-npk .bp-fnp__nut-dots { display: none; }

	/* Process strip: 2x2 grid, branches hidden, no arrows. */
	.bp-formulation-npk .bp-fnp__strip { margin-block-start: 24px; }
	.bp-formulation-npk .bp-fnp__strip-card {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 18px 16px;
	}
	.bp-formulation-npk .bp-fnp__strip-branch { display: none; }
	.bp-formulation-npk .bp-fnp__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
	.bp-formulation-npk .bp-fnp__stage-circle { inline-size: 50px; block-size: 50px; }
	.bp-formulation-npk .bp-fnp__stage-circle i,
	.bp-formulation-npk .bp-fnp__stage-circle svg { inline-size: 22px; block-size: 22px; }
	.bp-formulation-npk .bp-fnp__stage-title { font-size: 15px; }
	.bp-formulation-npk .bp-fnp__stage-sub { font-size: 12px; }
	.bp-formulation-npk .bp-fnp__arrow { display: none; }

	/* Hide side botanicals on small screens (too much overlap) */
	.bp-formulation-npk .bp-fnp__decor--sl,
	.bp-formulation-npk .bp-fnp__decor--sr { display: none; }
}

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

	.bp-formulation-npk { padding-block: 40px; }

	.bp-formulation-npk .bp-fnp__header { margin-block-end: 22px; }
	.bp-formulation-npk .bp-fnp__title { font-size: clamp(24px, 7.5vw, 30px); }
	.bp-formulation-npk .bp-fnp__description { font-size: 14.5px; }

	.bp-formulation-npk .bp-fnp__image-wrap,
	.bp-formulation-npk .bp-fnp__image-placeholder { min-block-size: 220px; }

	.bp-formulation-npk .bp-fnp__main { row-gap: 20px; }

	.bp-formulation-npk .bp-fnp__monogram { gap: 10px; }
	.bp-formulation-npk .bp-fnp__letter { font-size: 70px; }

	.bp-formulation-npk .bp-fnp__nut-list { gap: 14px; }
	.bp-formulation-npk .bp-fnp__nut-circle { inline-size: 42px; block-size: 42px; }
	.bp-formulation-npk .bp-fnp__nut-circle i,
	.bp-formulation-npk .bp-fnp__nut-circle svg { inline-size: 18px; block-size: 18px; }
	.bp-formulation-npk .bp-fnp__nut-title { font-size: 15.5px; }
	.bp-formulation-npk .bp-fnp__nut-body { font-size: 12.5px; }

	.bp-formulation-npk .bp-fnp__strip-card { padding: 16px 14px; }
	.bp-formulation-npk .bp-fnp__stages { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.bp-formulation-npk .bp-fnp__stage { flex-direction: row; align-items: center; text-align: start; gap: 12px; padding-inline: 4px; }
	.bp-formulation-npk .bp-fnp__stage-text { text-align: start; }
	.bp-formulation-npk .bp-fnp__stage-circle { inline-size: 46px; block-size: 46px; }
	.bp-formulation-npk .bp-fnp__stage-circle i,
	.bp-formulation-npk .bp-fnp__stage-circle svg { inline-size: 20px; block-size: 20px; }
	.bp-formulation-npk .bp-fnp__stage-title { font-size: 14.5px; }
	.bp-formulation-npk .bp-fnp__stage-sub { font-size: 11.5px; }
}

/* =========================================================
 * Safe-area insets (notched devices)
 * ========================================================= */
@supports (padding: max(0px)) {
	.bp-formulation-npk .bp-fnp__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) ----------------
 * Formulation NPK inner centred + every desktop row of
 * nutrient cards / cells becomes 1 vertical column. */
@media ( max-width: 480px ) {
	.bp-formulation-npk .bp-fnp__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-formulation-npk .bp-fnp__row,
	.bp-formulation-npk .bp-fnp__cards,
	.bp-formulation-npk .bp-fnp__grid,
	.bp-formulation-npk .bp-fnp__table,
	.bp-formulation-npk .bp-fnp__nutrients {
		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-formulation-npk .bp-fnp__row > *,
	.bp-formulation-npk .bp-fnp__cards > *,
	.bp-formulation-npk .bp-fnp__grid > *,
	.bp-formulation-npk .bp-fnp__nutrient,
	.bp-formulation-npk .bp-fnp__card,
	.bp-formulation-npk .bp-fnp__cell {
		grid-column: 1 / -1 !important;
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}

	.bp-fn,
	.bp-formulation-npk,
	.bp-formulation-npk * {
		min-inline-size: 0 !important;
	}
}

/* =========================================================
 * ARABIC / RTL
 * The display family falls back to the Arabic family; the rest
 * of the layout mirrors automatically through logical
 * properties.
 * ========================================================= */
[lang="ar"] .bp-formulation-npk .bp-fnp__title,
[dir="rtl"] .bp-formulation-npk .bp-fnp__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-formulation-npk .bp-fnp__letter,
[dir="rtl"] .bp-formulation-npk .bp-fnp__letter {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
}

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

[lang="ar"] .bp-formulation-npk .bp-fnp__stage-title,
[dir="rtl"] .bp-formulation-npk .bp-fnp__stage-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-formulation-npk [data-bp-reveal],
	.bp-formulation-npk [data-bp-stagger] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

/* =========================================================
 * Print
 * ========================================================= */
@media print {
	.bp-formulation-npk { padding-block: 0; }
	.bp-formulation-npk .bp-fnp__decor { display: none; }
}