/* BP Tunisia Product Hero widget styles
 *
 * Full-bleed editorial hero (section spans edge to edge, 1140px
 * inner content container):
 *
 *   BACKGROUND
 *      One single combined product scene image (package + G3
 *      bowl + G4 bowl + badges + olive decoration + gold arc)
 *      sits as a true full-width background of the section,
 *      absolutely positioned to cover the whole hero. The
 *      cream readability veil fades from the left so the text
 *      stays legible.
 *
 *   LEFT CONTENT
 *      `.bp-product-hero__content` lives inside the 1140px
 *      inner, anchored to the LEFT side of the section.
 *      Holds the eyebrow / serif title / decorative divider /
 *      description / CTAs / G3+G4 chips.
 *
 * No "right product scene" as a separate contained image, no
 * 44/56 grid, no narrow column for the text. The product
 * image is a TRUE background-image of the section itself.
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #EDDBC3  cream
 *   #B8B25A  olive / gold
 *   #FFFFFF  white
 *   plus existing neutral / page-background tokens.
 */

.bp-product-hero {
	/* ---- Theme tokens ---- */
	--bp-ph-bg:           #F8F4ED;
	--bp-ph-fallback-bg:  #F8F4ED;
	--bp-ph-eyebrow:      #374F37;
	--bp-ph-title:        #374F37;
	--bp-ph-description:  #1F2A1F;
	--bp-ph-divider:      #B8B25A;
	--bp-ph-chip-bg:      #F8F4ED;
	--bp-ph-chip-bd:      #E4DCCB;
	--bp-ph-cta-bg:       #374F37;
	--bp-ph-cta-fg:       #FFFFFF;
	--bp-ph-cta2-fg:      #374F37;
	--bp-ph-cta2-bd:      #374F37;
	--bp-ph-veil:         #F8F4ED;
	--bp-ph-veil-strength: 92%;

	/* ---- Layout tokens ---- */
	--bp-ph-inner-max:    1140px;
	--bp-ph-content-max:  600px;

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

	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: none;
	margin: 0;
	padding: 0;
	background: var(--bp-ph-fallback-bg);
	color: var(--bp-ph-description);
	font-family: var(--bp-ph-font-body);
	min-block-size: clamp( 480px, 62vh, 720px );
}

.bp-product-hero *,
.bp-product-hero *::before,
.bp-product-hero *::after {
	box-sizing: border-box;
}

/* ---------------- Elementor full-bleed breakout ----------------
 * Force the surrounding Elementor column / section / widget to
 * take the full viewport width so the hero truly spans
 * edge-to-edge regardless of the parent's container width. */
.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-hero,
.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-hero,
.elementor .bp-product-hero,
.e-con.bp-product-hero,
.bp-product-hero {
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
}

.elementor-inner section.elementor-section,
.elementor-inner section.elementor-section > .elementor-container,
.elementor-inner section.elementor-section > .elementor-row,
.elementor-inner section.elementor-section > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section > .elementor-row > .elementor-column > .elementor-widget-wrap {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
	padding-inline: 0 !important;
}

.elementor .elementor-widget.elementor-widget-bp-tunisia-product-hero,
.elementor-widget.elementor-widget-bp-tunisia-product-hero {
	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;
}

.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-bp-tunisia-product-hero),
.elementor-section:has(> .elementor-container > .elementor-row > .elementor-column > .elementor-widget-wrap > .elementor-widget-bp-tunisia-product-hero) {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
	padding-inline: 0 !important;
}

/* ---------------- Full-width background image ----------------
 * The product scene is rendered as a TRUE CSS background-image
 * of the section itself (set inline on the element by the widget
 * via `--bp-ph-bg-image`). The image ALWAYS fills the section
 * width and the height auto-adjusts to preserve the aspect
 * ratio (no stretching, no weird squish).
 *
 * The user can freely:
 *   --bp-ph-bg-w   scale the image width (default 100% = full
 *                  width; >100% scales up, <100% shrinks).
 *                  Height is `auto` and always respects the
 *                  image's own aspect ratio.
 *   --bp-ph-bg-x   shift the image left / right
 *                  (0% = left, 50% = centered, 100% = right,
 *                   negative px = past the left edge).
 *   --bp-ph-bg-y   shift the image up / down
 *                  (0% = top, 50% = centered, 100% = bottom,
 *                   negative px = past the top).
 *   background-repeat  no-repeat (default) / repeat / repeat-x /
 *                     repeat-y.
 *
 * A dedicated mobile image is set via `--bp-ph-bg-image-mobile`
 * and swapped in via a media query below. */
.bp-product-hero {
	background-color: var(--bp-ph-fallback-bg);
	background-image: var(--bp-ph-bg-image, none);
	background-repeat: no-repeat;
	background-size: var(--bp-ph-bg-w, 100%) auto;
	background-position: var(--bp-ph-bg-x, 50%) var(--bp-ph-bg-y, 50%);
}

/* ---------------- Cream readability veil ----------------
 * Strong cream gradient on the left half so the text stays
 * fully readable, fading to transparent on the right so the
 * product image is fully visible. The 0% / 50% breakpoint
 * matches the reference where the left half is opaque cream. */
.bp-product-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to right,
		var(--bp-ph-veil) 0%,
		var(--bp-ph-veil) 50%,
		rgba( 248, 244, 237, 0.55 ) 65%,
		rgba( 248, 244, 237, 0.15 ) 80%,
		rgba( 248, 244, 237, 0 ) 95%
	);
	opacity: calc( var(--bp-ph-veil-strength) / 100 );
}

[dir="rtl"] .bp-product-hero__veil,
[lang="ar"] .bp-product-hero__veil {
	background: linear-gradient(
		to left,
		var(--bp-ph-veil) 0%,
		var(--bp-ph-veil) 50%,
		rgba( 248, 244, 237, 0.55 ) 65%,
		rgba( 248, 244, 237, 0.15 ) 80%,
		rgba( 248, 244, 237, 0 ) 95%
	);
}

/* ---------------- Inner content container (1140px) ----------------
 * The 1140px container is the safe-area for the text. The
 * content block inside it is left-aligned and capped at
 * ~50% of the inner width so it stays on the LEFT half of
 * the section. */
.bp-product-hero__inner {
	position: relative;
	z-index: 3;
	inline-size: calc( 100% - 40px );
	max-inline-size: var(--bp-ph-inner-max);
	margin-inline: auto;
	padding-block: clamp( 40px, 5vw, 72px );
	min-block-size: inherit;
}

/* ---------------- LEFT content block ----------------
 * Holds eyebrow / title / divider / description / CTAs /
 * chips. Anchored to the LEFT of the section, capped so
 * the right half stays visually free for the product image
 * and the bottom-right benefit strip. */
.bp-product-hero__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 14px;
	inline-size: 100%;
	max-inline-size: var(--bp-ph-content-max);
	min-inline-size: 0;
	text-align: start;
	margin-inline: 0;
	padding: 0;
}

/* ---------------- Eyebrow ---------------- */
.bp-product-hero__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--bp-ph-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-ph-eyebrow);
	line-height: 1.3;
}

.bp-product-hero__eyebrow-line {
	inline-size: 36px;
	block-size: 1px;
	background: var(--bp-ph-divider);
	flex: 0 0 auto;
}

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

.bp-product-hero__eyebrow-leaf {
	inline-size: 18px;
	block-size: 18px;
	color: var(--bp-ph-eyebrow);
	flex: 0 0 auto;
	transform: translateY(-1px);
}

/* ---------------- Title ----------------
 * Display serif, deep green. The clamp keeps the title
 * large at desktop (up to 62px) while preventing tiny
 * viewports from blowing it up. `inline-size: 100%` plus
 * `min-inline-size: 0` on the column lets the title use
 * the full content block width and wrap into three lines
 * the way the reference shows. */
.bp-product-hero__title {
	margin: 0;
	font-family: var(--bp-ph-font-display);
	font-weight: 400;
	color: var(--bp-ph-title);
	font-size: clamp( 48px, 4vw, 62px );
	line-height: 1.02;
	letter-spacing: 0;
	inline-size: 100%;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.bp-product-hero__title-line {
	display: block;
}

.bp-product-hero__title-line:last-child {
	font-size: 0.84em;
}

/* ---------------- Decorative divider ---------------- */
.bp-product-hero__divider {
	display: flex;
	align-items: center;
	gap: 10px;
	inline-size: 140px;
	margin-block: 18px;
	opacity: 0.95;
}

.bp-product-hero__divider-line {
	flex: 1 1 auto;
	block-size: 1px;
	background: var(--bp-ph-divider);
}

.bp-product-hero__divider-diamond {
	inline-size: 12px;
	block-size: 12px;
	flex: 0 0 auto;
	color: var(--bp-ph-divider);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bp-product-hero__divider-diamond svg {
	inline-size: 12px;
	block-size: 12px;
	display: block;
}

/* ---------------- Description ----------------
 * Capped to ~500px so the paragraph reads at about 4 lines
 * on desktop. `min-inline-size: 0` lets the paragraph
 * shrink inside its container. */
.bp-product-hero__description {
	margin: 0;
	font-family: var(--bp-ph-font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--bp-ph-description);
	max-inline-size: 500px;
	min-inline-size: 0;
}

/* ---------------- CTAs ----------------
 * One clean row desktop. ~48px height, 16px gap. */
.bp-product-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-block-start: 8px;
}

.bp-product-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 48px;
	padding: 13px 28px;
	border-radius: 999px;
	font-family: var(--bp-ph-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: transform 200ms ease, background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
	white-space: nowrap;
}

.bp-product-hero__cta--primary {
	background: var(--bp-ph-cta-bg);
	color: var(--bp-ph-cta-fg);
	border-color: var(--bp-ph-cta-bg);
}

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

.bp-product-hero__cta--secondary {
	background: transparent;
	color: var(--bp-ph-cta2-fg);
	border-color: var(--bp-ph-cta2-bd);
}

.bp-product-hero__cta--secondary:hover,
.bp-product-hero__cta--secondary:focus-visible {
	transform: translateY(-2px);
	background: rgba( 55, 79, 55, 0.05 );
	box-shadow: 0 4px 12px rgba( 55, 79, 55, 0.08 );
}

/* ---------------- G3 / G4 chips ----------------
 * One horizontal row desktop, ~42px height, 10-14px gap. */
.bp-product-hero__chips {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bp-product-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 20px;
	min-block-size: 42px;
	border-radius: 999px;
	background: var(--bp-ph-chip-bg);
	border: 1px solid var(--bp-ph-chip-bd);
	font-family: var(--bp-ph-font-body);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--bp-ph-title);
	line-height: 1.2;
}

.bp-product-hero__chip-icon {
	display: inline-flex;
	inline-size: 18px;
	block-size: 18px;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

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

.bp-product-hero__chip--g3 .bp-product-hero__chip-icon { color: var(--bp-ph-eyebrow); }
.bp-product-hero__chip--g4 .bp-product-hero__chip-icon { color: var(--bp-ph-divider); }

/* ---------------- Animation: gentle entrance ----------------
 * Reuses the shared `data-bp-reveal` observer; pure CSS
 * keyframe so no new JS is loaded. */
@keyframes bp-ph-rise {
	from { transform: translateY( 14px ); opacity: 0.001; }
	to   { transform: translateY( 0 );    opacity: 1; }
}

.bp-product-hero [data-bp-reveal] {
	animation: bp-ph-rise 700ms ease both;
}

.bp-product-hero [data-bp-stagger="0"] { animation-delay: 0ms; }
.bp-product-hero [data-bp-stagger="1"] { animation-delay: 120ms; }
.bp-product-hero [data-bp-stagger="2"] { animation-delay: 240ms; }
.bp-product-hero [data-bp-stagger="3"] { animation-delay: 360ms; }
.bp-product-hero [data-bp-stagger="4"] { animation-delay: 480ms; }
.bp-product-hero [data-bp-stagger="5"] { animation-delay: 600ms; }

/* ---------------- TABLET (769-1024) ----------------
 * Keep the left content composition, narrow the content cap,
 * soften the veil. */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-product-hero__content  { max-inline-size: 520px; }
	.bp-product-hero__title     { font-size: clamp( 38px, 5vw, 48px ); }
	.bp-product-hero__description { max-inline-size: 420px; font-size: 14.5px; }
	.bp-product-hero__inner     { padding-block: 32px 40px; }
}

/* ---------------- MOBILE (<= 768) ----------------
 * On mobile the mobile image (if provided via
 * `--bp-ph-bg-image-mobile`) replaces the desktop one AND
 * the background-size switches from `100% auto` to `cover`
 * so the image always fills the entire section edge to edge
 * (no letterboxing, no squish). User's bg_scale / bg_position
 * are intentionally overridden here on mobile with !important
 * so the responsive image control never breaks the cover
 * behaviour. The section keeps a tall min-height so the
 * product image is clearly visible above the text + veil. */
@media ( max-width: 768px ) {

	.bp-product-hero {
		background-image: var(--bp-ph-bg-image-mobile, var(--bp-ph-bg-image, none)) !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
		min-block-size: clamp( 520px, 88vh, 720px );
	}

	.bp-product-hero__veil {
		background: linear-gradient(
			to bottom,
			var(--bp-ph-veil) 0%,
			rgba( 248, 244, 237, 0.85 ) 45%,
			rgba( 248, 244, 237, 0.5 ) 100%
		);
	}

	.bp-product-hero__inner {
		padding-block: 28px 20px;
	}

	.bp-product-hero__content  { gap: 12px; max-inline-size: 100%; }
	.bp-product-hero__title     { font-size: clamp( 32px, 9vw, 40px ); }
	.bp-product-hero__title-line:last-child { font-size: 0.82em; }
	.bp-product-hero__description { max-inline-size: 100%; font-size: 15px; }

	.bp-product-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.bp-product-hero__cta {
		inline-size: 100%;
		min-block-size: 50px;
		padding: 14px 24px;
	}

	.bp-product-hero__chips { gap: 8px; flex-wrap: wrap; }
	.bp-product-hero__chip { font-size: 12.5px; padding: 7px 14px; min-block-size: 38px; }
}

/* ---------------- <= 520 ---------------- */
@media ( max-width: 520px ) {
	.bp-product-hero__inner { padding-inline: 0; }
	.bp-product-hero__title { font-size: clamp( 28px, 8.5vw, 34px ); }
	.bp-product-hero__eyebrow { font-size: 12px; letter-spacing: 0.16em; }
	.bp-product-hero__eyebrow-line { inline-size: 26px; }
	.bp-product-hero__divider { inline-size: 100px; }
	.bp-product-hero__cta { min-block-size: 48px; }
}

/* ---------------- <= 420 ---------------- */
@media ( max-width: 420px ) {
	.bp-product-hero__title { font-size: 30px; line-height: 1.04; }
	.bp-product-hero__description { font-size: 14px; }
	.bp-product-hero__eyebrow { font-size: 11px; letter-spacing: 0.14em; }
	.bp-product-hero__divider { inline-size: 88px; margin-block: 12px; }
	.bp-product-hero__chip { font-size: 12px; padding: 6px 12px; }
}

/* ---------------- <= 360 ---------------- */
@media ( max-width: 360px ) {
	.bp-product-hero__title { font-size: 28px; }
	.bp-product-hero__eyebrow { font-size: 10.5px; letter-spacing: 0.12em; }
	.bp-product-hero__chip { font-size: 11.5px; padding: 6px 10px; }
}

/* ---------------- Full-bleed on mobile (always) ----------------
 * On mobile the widget must STILL span the full viewport width
 * edge-to-edge (same full-bleed behaviour as desktop). The
 * previous "prevent horizontal scroll" override forced
 * `inline-size: 100%` which clamped the hero to its parent's
 * inner width on mobile — that's why the hero was no longer
 * full-width on small screens. The desktop full-bleed rule
 * above (100vw + negative margin) is reapplied here so the
 * hero always breaks out to the viewport edges. */
@media ( max-width: 768px ) {
	.elementor .elementor-widget.elementor-widget-bp-tunisia-product-hero,
	.elementor-widget.elementor-widget-bp-tunisia-product-hero {
		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;
	}
}

/* ---------------- ARABIC / RTL ---------------- */
[lang="ar"] .bp-product-hero__title,
[dir="rtl"] .bp-product-hero__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}

/* ---------------- Reduced motion ---------------- */
@media ( prefers-reduced-motion: reduce ) {
	.bp-product-hero [data-bp-reveal],
	.bp-product-hero [data-bp-stagger] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
	.bp-product-hero__cta { transition: none !important; }
}

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

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