/* BP Stockage & Manipulation widget styles
 *
 * Tunisia product page "Stockage & Manipulation" section.
 *
 * Layout (desktop):
 *   - 2 columns (~50/50 with 56px gap)
 *   - LEFT column: centered eyebrow + serif title +
 *     short olive divider + description, then a product
 *     scene: package image on a soft pedestal, with a
 *     soft olive-branch decoration on the left.
 *   - RIGHT column: 2x3 grid of 6 information items
 *     (icon + uppercase title + description) and a
 *     full-width bottom strip (green circle + text +
 *     light tree).
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #EDDBC3  cream
 *   #B8B25A  olive / gold
 *   #FFFFFF  white
 *   plus existing neutral tokens (#FBF6EC, #E4DCCB,
 *   #F1E7D5, #1F2A1F, #5C6A5C, #8C6A3A olive-brown for
 *   the botanical only). No invented greens.
 *
 * SCOPING:
 *   Every rule is scoped under `.bp-stockage-manipulation`
 *   (the widget's own root). 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-stockage-manipulation {
	/* ---- Theme tokens (approved palette only) ---- */
	--bp-sm-green:        #374F37;
	--bp-sm-olive:        #B8B25A;
	--bp-sm-olive-brown:  #8C6A3A;
	--bp-sm-cream:        #EDDBC3;
	--bp-sm-cream-soft:   #F1E7D5;
	--bp-sm-cream-bg:     #FBF6EC;
	--bp-sm-white:        #FFFFFF;
	--bp-sm-text:         #1F2A1F;
	--bp-sm-text-muted:   #5C6A5C;
	--bp-sm-border:       #E4DCCB;

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

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

	--bp-sm-botanical-x: -20px;
	--bp-sm-botanical-y: 0px;
	--bp-sm-botanical-opacity: 100%;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: var(--bp-sm-inner-max);
	margin-inline: auto;
	padding-block: 72px;
	padding-inline: 0;
	background: var(--bp-sm-cream-bg);
	color: var(--bp-sm-text);
	font-family: var(--bp-sm-font-body);
}

.elementor-18 .elementor-element.elementor-element-b156bfa .bp-stockage-manipulation {
	margin-block-start: 100px !important;
}

.bp-stockage-manipulation *,
.bp-stockage-manipulation *::before,
.bp-stockage-manipulation *::after {
	box-sizing: border-box;
}

/* =========================================================
 * INNER
 * ========================================================= */
.bp-stockage-manipulation .bp-sm__inner {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: var(--bp-sm-inner-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 24px);
}

/* =========================================================
 * TWO COLUMNS (50/50 desktop, stack on mobile)
 * ========================================================= */
.bp-stockage-manipulation .bp-sm__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 56px;
	row-gap: 32px;
	align-items: start;
}

.bp-stockage-manipulation .bp-sm__col {
	position: relative;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
}

/* =========================================================
 * LEFT COLUMN - HEADER
 * ========================================================= */
.bp-stockage-manipulation .bp-sm__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
	gap: 14px;
	margin-block-end: 28px;
	margin-inline: 0;
}

.bp-stockage-manipulation .bp-sm__eyebrow,
.bp-stockage-manipulation .bp-sm__title,
.bp-stockage-manipulation .bp-sm__title-rule,
.bp-stockage-manipulation .bp-sm__description {
	align-self: flex-start;
	text-align: start;
	margin-inline: 0;
}

.bp-stockage-manipulation .bp-sm__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--bp-sm-green);
	font-family: var(--bp-sm-font-body);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
	white-space: nowrap;
}

.bp-stockage-manipulation .bp-sm__eyebrow-line {
	inline-size: 36px;
	block-size: 1px;
	background: var(--bp-sm-olive);
	flex: 0 0 auto;
}

.bp-stockage-manipulation .bp-sm__eyebrow-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18px;
	block-size: 18px;
	color: var(--bp-sm-olive);
	flex: 0 0 auto;
}

.bp-stockage-manipulation .bp-sm__eyebrow-mark {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.bp-stockage-manipulation .bp-sm__title {
	margin: 4px 0 0;
	color: var(--bp-sm-text);
	font-family: var(--bp-sm-font-display);
	font-weight: 400;
	font-size: clamp(34px, 4vw, 50px);
	line-height: 1.1;
	letter-spacing: -0.005em;
	max-inline-size: 100%;
}

.bp-stockage-manipulation .bp-sm__title-rule {
	inline-size: 64px;
	block-size: 2px;
	background: var(--bp-sm-olive);
	border-radius: 2px;
	margin-block-start: 4px;
	flex: 0 0 auto;
}

.bp-stockage-manipulation .bp-sm__header-divider {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin: 18px 0 0;
	align-self: flex-start;
}
.bp-stockage-manipulation .bp-sm__header-divider-line {
	display: inline-block;
	inline-size: 56px;
	block-size: 1px;
	background: var(--bp-sm-olive);
	border: 0;
	padding: 0;
	flex: 0 0 auto;
}
.bp-stockage-manipulation .bp-sm__header-divider-diamond {
	display: inline-block;
	inline-size: 8px;
	block-size: 8px;
	transform: rotate(45deg);
	background: var(--bp-sm-olive);
	flex: 0 0 auto;
}

.elementor-18 .bp-stockage-manipulation .bp-sm__header-divider {
	align-self: flex-start !important;
	margin-inline: 0 auto !important;
	justify-content: flex-start !important;
	width: fit-content !important;
}

.bp-stockage-manipulation .bp-sm__description {
	margin: 4px 0 0;
	color: var(--bp-sm-text);
	font-family: var(--bp-sm-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	max-inline-size: 460px;
}

/* =========================================================
 * LEFT COLUMN - PRODUCT SCENE
 * The product sits on a soft cream pedestal, with an
 * olive-branch decoration on the left side that is
 * absolutely positioned and never blocks the product.
 * ========================================================= */
.bp-stockage-manipulation .bp-sm__scene {
	position: relative;
	inline-size: 100%;
	max-block-size: 520px;
	min-block-size: 360px;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-block-end: 0;
}

.bp-stockage-manipulation .bp-sm__botanical {
	position: absolute;
	inset-block-end: 30px;
	left: 0;
	right: auto;
	z-index: 1;
	inline-size: 220px;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	color: var(--bp-sm-olive-brown);
	opacity: var(--bp-sm-botanical-opacity, 100%);
	transform: translate(
		var(--bp-sm-botanical-x, 0px),
		var(--bp-sm-botanical-y, 0px)
	);
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}

.bp-stockage-manipulation .bp-sm__botanical img,
.bp-stockage-manipulation .bp-sm__botanical svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
	fill: none;
	stroke: currentColor;
}

.bp-stockage-manipulation .bp-sm__product {
	position: relative;
	z-index: 2;
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.bp-stockage-manipulation .bp-sm__product img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 520px;
	object-fit: contain;
	object-position: bottom center;
}

.bp-stockage-manipulation .bp-sm__product--empty {
	inline-size: 100%;
	max-inline-size: 480px;
	padding-block-end: 12px;
}

.bp-stockage-manipulation .bp-sm__product-placeholder {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

/* =========================================================
 * RIGHT COLUMN - INFO ITEMS
 * 2-column grid (auto / auto) on desktop, 1-column stack
 * on mobile. Each cell holds: icon + body.
 * ========================================================= */
.bp-stockage-manipulation .bp-sm__items {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 32px;
	row-gap: 32px;
	margin-block-end: 24px;
}

.bp-stockage-manipulation .bp-sm__item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: flex-start;
	column-gap: 14px;
	padding-inline-end: 4px;
	min-inline-size: 0;
}

/* subtle vertical separator between the two cells of the
 * same row (only on row 1 & 2 - the right side of each left
 * cell) */
.bp-stockage-manipulation .bp-sm__item:nth-child(odd)::after {
	content: "";
	position: absolute;
	inset-block: 6px;
	inset-inline-end: -16px;
	inline-size: 1px;
	background: var(--bp-sm-border);
	border-radius: 1px;
	opacity: 0.6;
	pointer-events: none;
}

.bp-stockage-manipulation .bp-sm__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 60px;
	block-size: 60px;
	min-inline-size: 60px;
	min-block-size: 60px;
	border-radius: 50%;
	background: var(--bp-sm-cream-soft);
	color: var(--bp-sm-green);
	flex: 0 0 auto;
}

.bp-stockage-manipulation .bp-sm__item-icon i,
.bp-stockage-manipulation .bp-sm__item-icon svg {
	inline-size: 27px;
	block-size: 27px;
	max-inline-size: 27px;
	max-block-size: 27px;
	fill: currentColor;
}

.bp-stockage-manipulation .bp-sm__item-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-inline-size: 0;
	padding-block-start: 2px;
}

.bp-stockage-manipulation .bp-sm__item-title {
	margin: 0;
	color: var(--bp-sm-text);
	font-family: var(--bp-sm-font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1.25;
	text-transform: uppercase;
}

.bp-stockage-manipulation .bp-sm__item-description {
	margin: 0;
	color: var(--bp-sm-text);
	font-family: var(--bp-sm-font-body);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.55;
}

/* =========================================================
 * BOTTOM STRIP
 * Visual shell (background / border / radius / padding / gap /
 * icon / text / diamond) is provided by the shared
 * `.bp-info-strip` utility. Only the contextual tree decoration
 * and structural spacing remain here.
 * ========================================================= */
.bp-stockage-manipulation .bp-sm__strip {
	inline-size: 100%;
	max-inline-size: 1140px;
	margin-inline: auto;
	margin-block-start: 16px;
}

.bp-stockage-manipulation .bp-sm__strip-text {
	margin: 0;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.bp-stockage-manipulation .bp-sm__strip-tree {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 96px;
	block-size: auto;
	color: var(--bp-sm-olive);
	flex: 0 0 auto;
}

.bp-stockage-manipulation .bp-sm__strip-tree img,
.bp-stockage-manipulation .bp-sm__strip-tree svg {
	inline-size: 100%;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: 96px;
	display: block;
	object-fit: contain;
	fill: none;
	stroke: currentColor;
}

/* =========================================================
 * TABLET (769–1024)
 * ========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
	.bp-stockage-manipulation { padding-block: 56px; }
	.bp-stockage-manipulation .bp-sm__cols { column-gap: 32px; row-gap: 28px; }
	.bp-stockage-manipulation .bp-sm__title { font-size: clamp(30px, 4.2vw, 40px); }
	.bp-stockage-manipulation .bp-sm__description { font-size: 14.5px; }
	.bp-stockage-manipulation .bp-sm__scene { min-block-size: 320px; max-block-size: 460px; }
	.bp-stockage-manipulation .bp-sm__botanical { inline-size: 160px; }
	.bp-stockage-manipulation .bp-sm__items { column-gap: 24px; row-gap: 26px; }
	.bp-stockage-manipulation .bp-sm__item-icon { inline-size: 52px; block-size: 52px; min-inline-size: 52px; min-block-size: 52px; }
	.bp-stockage-manipulation .bp-sm__item-icon i,
	.bp-stockage-manipulation .bp-sm__item-icon svg { inline-size: 24px; block-size: 24px; }
	.bp-stockage-manipulation .bp-sm__item-title { font-size: 13.5px; }
	.bp-stockage-manipulation .bp-sm__item-description { font-size: 13px; }
	.bp-stockage-manipulation .bp-sm__strip-tree { inline-size: 80px; }
}

/* =========================================================
 * MOBILE (≤ 768px)
 * Stacks: left header → product scene → 6 items → strip.
 * Items become a single column with no separators.
 * ========================================================= */
@media (max-width: 768px) {

	.bp-stockage-manipulation { padding-block: 48px; }

	.bp-stockage-manipulation .bp-sm__cols {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	.bp-stockage-manipulation .bp-sm__col--left  { order: 0; }
	.bp-stockage-manipulation .bp-sm__col--right { order: 1; }

	.bp-stockage-manipulation .bp-sm__header { margin-block-end: 20px; gap: 10px; }
	.bp-stockage-manipulation .bp-sm__eyebrow { font-size: 12px; letter-spacing: 0.18em; gap: 10px; }
	.bp-stockage-manipulation .bp-sm__eyebrow-line { inline-size: 24px; }
	.bp-stockage-manipulation .bp-sm__eyebrow-leaf { inline-size: 14px; block-size: 14px; }
	.bp-stockage-manipulation .bp-sm__title { font-size: clamp( 28px, 7.5vw, 36px ); line-height: 1.12; }
	.bp-stockage-manipulation .bp-sm__title-rule { inline-size: 48px; }
	.bp-stockage-manipulation .bp-sm__description { font-size: 14.5px; }

	.bp-stockage-manipulation .bp-sm__scene {
		min-block-size: 320px;
		max-block-size: 460px;
		padding-inline: 12px;
	}
	.bp-stockage-manipulation .bp-sm__botanical { inline-size: 140px; inset-block-end: 16px; }
	.bp-stockage-manipulation .bp-sm__product img { max-block-size: 440px; }
	.bp-stockage-manipulation .bp-sm__product--empty { max-inline-size: 360px; }

	.bp-stockage-manipulation .bp-sm__items {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 22px;
		column-gap: 0;
		margin-block-end: 22px;
	}
	.bp-stockage-manipulation .bp-sm__item {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 14px;
		padding-block: 4px;
	}
	.bp-stockage-manipulation .bp-sm__item::after { content: none; }
	.bp-stockage-manipulation .bp-sm__item-icon { inline-size: 48px; block-size: 48px; min-inline-size: 48px; min-block-size: 48px; }
	.bp-stockage-manipulation .bp-sm__item-icon i,
	.bp-stockage-manipulation .bp-sm__item-icon svg { inline-size: 22px; block-size: 22px; }
	.bp-stockage-manipulation .bp-sm__item-title { font-size: 13.5px; }
	.bp-stockage-manipulation .bp-sm__item-description { font-size: 13px; }

	.bp-stockage-manipulation .bp-sm__strip { margin-block-start: 4px; }
	.bp-stockage-manipulation .bp-sm__strip-tree { inline-size: 60px; }
}

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

	.bp-stockage-manipulation { padding-block: 40px; }

	.bp-stockage-manipulation .bp-sm__title { font-size: clamp( 26px, 8vw, 32px ); }
	.bp-stockage-manipulation .bp-sm__description { font-size: 14px; }
	.bp-stockage-manipulation .bp-sm__scene { min-block-size: 280px; max-block-size: 400px; }
	.bp-stockage-manipulation .bp-sm__botanical { inline-size: 110px; inset-block-end: 8px; --bp-sm-botanical-x: -10px; }
	.bp-stockage-manipulation .bp-sm__product img { max-block-size: 380px; }
	.bp-stockage-manipulation .bp-sm__product--empty { max-inline-size: 320px; }

	.bp-stockage-manipulation .bp-sm__item { column-gap: 12px; }
	.bp-stockage-manipulation .bp-sm__item-icon { inline-size: 44px; block-size: 44px; min-inline-size: 44px; min-block-size: 44px; }
	.bp-stockage-manipulation .bp-sm__item-icon i,
	.bp-stockage-manipulation .bp-sm__item-icon svg { inline-size: 20px; block-size: 20px; }
	.bp-stockage-manipulation .bp-sm__item-title { font-size: 13px; }
	.bp-stockage-manipulation .bp-sm__item-description { font-size: 12.5px; }

	.bp-stockage-manipulation .bp-sm__strip-tree { inline-size: 50px; }
}

/* =========================================================
 * Safe-area insets
 * ========================================================= */
@supports (padding: max(0px)) {
	.bp-stockage-manipulation .bp-sm__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) ----------------
 * Storage/handling items stacked vertically (no alternating
 * odd/even flex row that puts two items side by side). */
@media ( max-width: 480px ) {
	.bp-stockage-manipulation .bp-sm__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-stockage-manipulation .bp-sm__items {
		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-stockage-manipulation .bp-sm__item {
		grid-column: 1 / -1 !important;
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		flex: 0 0 auto !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 12px !important;
		margin: 0 !important;
	}
	.bp-stockage-manipulation .bp-sm__item::after { content: none !important; }

	.bp-sm,
	.bp-stockage-manipulation,
	.bp-stockage-manipulation * {
		min-inline-size: 0 !important;
	}
}

/* =========================================================
 * ARABIC / RTL
 * Display family falls back to the Arabic family; the rest
 * of the layout mirrors automatically through logical
 * properties.
 * ========================================================= */
[lang="ar"] .bp-stockage-manipulation .bp-sm__title,
[dir="rtl"] .bp-stockage-manipulation .bp-sm__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

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

/* =========================================================
 * Print
 * ========================================================= */
@media print {
	.bp-stockage-manipulation { padding-block: 0; }
	.bp-stockage-manipulation .bp-sm__botanical,
	.bp-stockage-manipulation .bp-sm__strip-tree { display: none; }
}

/* =========================================================
 * /produit/ only — restore the section header's native
 * left-aligned title + gold divider. site.css forces this
 * widget's title to be centered (and hides its native
 * title-rule to replace it with a centered gradient line
 * + diamond), so we re-enable the left-aligned layout
 * here for page 18 only. The site.css rule still wins
 * on every other page that uses this widget.
 * ========================================================= */
.elementor-18 .bp-stockage-manipulation .bp-sm__title {
	text-align: start !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}
.elementor-18 .bp-stockage-manipulation .bp-sm__title::after,
.elementor-18 .bp-stockage-manipulation .bp-sm__title::before {
	display: none !important;
}
.elementor-18 .bp-stockage-manipulation .bp-sm__title-rule {
	display: block !important;
	margin-inline: 0 !important;
}