/* ================================
   FONTS
================================ */

@font-face {
	font-family: 'NewspaperSans';
	src: url('../fonts/newspaper-sans_normal.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'RU Maggi KC';
	src: url('../fonts/RU-Maggi-KC.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'RU Maggi Bcwt';
	src: url('../fonts/RU-Maggi-Bcwt.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Kitchen Cupboard';
	src: url('../fonts/KitchenCupboard-Regular.woff2') format('woff2'),
	     url('../fonts/KitchenCupboard-Regular.woff') format('woff'),
	     url('../fonts/KitchenCupboard-Regular.ttf') format('truetype'),
	     url('../fonts/KitchenCupboard-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ================================
   CSS VARIABLES
================================ */

:root {
	/* ===== Colors ===== */
	--color-dune: rgba(64, 51, 51, 1);
	--color-dune: rgba(64, 51, 51, 1);
	--color-millbrook: #5A443C;
	--color-black-marlin: #3E2B1A;
	--color-white: #ffffff;
	--color-black: #121212;
	--color-video-bg: #000;
	--color-gradient-start: rgba(165, 90, 103, 1);
	--color-gradient-end: rgba(180, 109, 121, 1);

	/* ===== Typography ===== */
	--font-family-montserrat: 'Montserrat', Helvetica, sans-serif;
	--font-family-newspapersans: 'NewspaperSans', Helvetica, sans-serif;
	--font-family-ru-maggi-kc: 'RU Maggi KC', Helvetica, sans-serif;
	--font-family-ru-maggi-bcwt: 'RU Maggi Bcwt', Helvetica, sans-serif;
	--font-family-kitchen-cupboard: 'Kitchen Cupboard', Helvetica, sans-serif;

	/* Font sizes */
	--font-size-h1: 100px;
	--font-size-h2: 60px;
	--font-size-h2-promo: 80px;
	--font-size-h3: 50px;
	--font-size-h4: 40px;
	--font-size-h5: 30px;
	--font-size-h6: 25px;
	--font-size-large: 24px;
	--font-size-medium: 20px;
	--font-size-base: 18px;
	--font-size-small: 16px;

	/* Line heights */
	--line-height-tight: 1;
	--line-height-normal: 1.2;
	--line-height-relaxed: 1.5;

	/* Letter spacing */
	--letter-spacing-tight: -3px;
	--letter-spacing-medium: -1.8px;
	--letter-spacing-normal: 0;

	/* ===== Spacing System ===== */
	--spacing-xs: 8px;
	--spacing-sm: 10px;
	--spacing-md: 18px;
	--spacing-lg: 24px;
	--spacing-xl: 30px;
	--spacing-2xl: 32px;
	--spacing-3xl: 45px;
	--spacing-4xl: 50px;
	--spacing-5xl: 54px;
	--spacing-6xl: 58px;
	--spacing-7xl: 80px;

	/* ===== Dimensions ===== */
	--header-height: 857px;
	--container-max-width: 1440px;
	--container-desktop: 1084px;
	--container-tablet: 574px;
	--container-mobile: 100%;
	--min-width: 320px;

	/* ===== Border ===== */
	--border-width: 3px;
	--border-radius-sm: 5px;
	--border-radius-md: 8px;

	/* ===== Shadows ===== */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 3px 6px rgba(0, 0, 0, 0.15);

	/* ===== Transitions ===== */
	--transition-fast: 0.3s ease;
	--transition-medium: 0.4s ease-out;
	--transition-slow: 0.5s ease-out;

	/* ===== Z-index Scale ===== */
	--z-base: 2;
	--z-elevated: 3;

	/* ===== Breakpoints (for reference in @media) ===== */
	--bp-tablet: 767.98px;
	--bp-desktop: 1199.98px;
	--bp-large-desktop: 1200px;

	/* ===== Opacity ===== */
	--opacity-dim: 0.4;

	/* ===== Recipe Steps Variables (mobile defaults) ===== */
	--lp-recipe-step-direction-even: column;
	--lp-recipe-step-direction-odd: column;
	--lp-recipe-step-counter-size: 30px;
	--lp-recipe-step-counter-font-size: 20px;
	--lp-recipe-step-description-size-x: calc(var(--m-column-width-responsive) * 20);
	--lp-recipe-step-photo-width: 100%;
	--lp-recipe-step-gap: var(--spacing-md);
	--lp-recipe-steps-gap: var(--spacing-4xl);
}

/* ================================
   RESPONSIVE IMAGE VARIANTS (DESKTOP FIRST: 1200px+)
================================ */

.garlic-mixes--desktop {
	display: flex;
}
.garlic-mixes--tablet {
	display: none !important;
}
.garlic-mixes--mobile {
	display: none !important;
}

/* ================================
   LP GARLIC – HERO + TITLE
================================ */

.lp-root.lp-garlic {
	position: relative;
	min-width: var(--min-width);
	overflow-x: hidden;
	font-family: "PTSans", sans-serif;

	/* Column-based responsive variables */
	--lp-header-height: clamp(20.1875rem, 39.677vw + 10.645rem, 53.5625rem); /* 323px to 857px */
	--lp-header-title-font-size: clamp(2.5rem, 3.871vw + 1.452rem, 6.25rem); /* 40px to 100px */
	--lp-header-subtitle-font-size: clamp(1.5625rem, 2.258vw + 0.968rem, 3.75rem); /* 25px to 60px */
	--lp-header-products-size-x: calc(var(--m-column-width-responsive) * 20); /* ~300px to ~974px */
	--lp-header-products-aspect-ratio: 1.578; /* 974/617 */

	/* Decoration sizes using column system */
	--lp-decor-spices-left-size-x: calc(var(--m-column-width-responsive) * 6); /* ~90px to ~271px */
	--lp-decor-tomato-size-x: calc(var(--m-column-width-responsive) * 5); /* ~82px to ~320px */
	--lp-decor-garlic-top-size-x: calc(var(--m-column-width-responsive) * 3); /* ~45px to ~190px */
	--lp-decor-beans-bottom-size-x: calc(var(--m-column-width-responsive) * 2.5); /* ~30px to ~163px */
	--lp-decor-spices-bottom-size-x: calc(var(--m-column-width-responsive) * 6); /* ~90px to ~271px */

	/* Intro section */
	--lp-intro-text-font-size: clamp(1rem, 0.581vw + 0.871rem, 1.5625rem); /* 16px to 25px */
	--lp-intro-container-width: calc(var(--m-column-width-responsive) * 22);
	--lp-intro-padding-x: calc(var(--m-column-width-responsive) * 2);

	/* Product showcase */
	--lp-showcase-spacing-x: calc(var(--m-column-width-responsive) * 2);
	--lp-showcase-gap: calc(var(--m-column-width-responsive) * 1);
	--lp-showcase-info-width: calc(var(--m-column-width-responsive) * 24);
	--lp-showcase-category-font-size: clamp(1rem, 0.129vw + 0.968rem, 1.125rem); /* 16px to 18px */
	--lp-showcase-name-font-size: clamp(1.5625rem, 0.968vw + 1.331rem, 2.5rem); /* 25px to 40px */
	--lp-showcase-title-font-size: clamp(2.5rem, 1.29vw + 2.097rem, 3.75rem); /* 40px to 60px */
	--lp-showcase-description-font-size: clamp(1rem, 0.129vw + 0.968rem, 1.125rem); /* 16px to 18px */
	--lp-showcase-ingredients-title-font-size: clamp(1.25rem, 0.323vw + 1.177rem, 1.875rem); /* 20px to 30px */
	--lp-showcase-image-size-x: calc(var(--m-column-width-responsive) * 20); /* ~312px to ~542px */
	--lp-showcase-badge-size-x: 216px;
	--lp-showcase-badge-font-size: clamp(1.875rem, 0.645vw + 1.73rem, 2.5rem); /* 30px to 40px */
	--lp-showcase-decor-left-size-x: calc(var(--m-column-width-responsive) * 2.5); /* ~128px to ~103px adjusted */
}

/* ===== HEADER (TITLE) ===== */

.lp-garlic-header {
	position: relative;
	margin: 0 auto;
	padding: 0;
	/* height: var(--lp-header-height); */
	height: auto;
	text-align: center;
	overflow: hidden;
	background-image: url("../images/Head-bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.header__content {
	position: relative;
	z-index: var(--z-base);
	padding-top: clamp(1.125rem, 0.645vw + 0.98rem, 1.875rem); /* 18px to 30px */
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.header__title-wrap {
	width: 100%;
	max-width: calc(var(--m-column-width-responsive) * 24);
	background: transparent;
	padding: 0 calc(var(--m-column-width-responsive) * 2);
}

.header__title {
	margin: 0;
	font-family: var(--font-family-newspapersans);
	font-weight: 400;
	font-size: var(--lp-header-title-font-size);
	line-height: var(--line-height-tight);
	letter-spacing: -0.03em;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-millbrook);
}

.header__title span {
	display: block;
	font-size: var(--lp-header-subtitle-font-size);
	line-height: var(--line-height-tight);
	letter-spacing: -0.03em;
}

/* Products */
.header__products {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: var(--lp-header-products-size-x);
	height: auto;
	aspect-ratio: var(--lp-header-products-aspect-ratio);
	z-index: var(--z-elevated);
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 50px;
}

.header__product-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Decorations */
.header__decorations {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: var(--z-base);
}

.header__decorations-mobile {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: var(--z-base);
	display: none;
}

.header__decor {
	position: absolute;
	object-fit: contain;
}

.header__decor img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Left top - spices */
.header__decor--spices-left {
	left: 0;
	top: clamp(3.625rem, 1.935vw + 3.113rem, 5.625rem); /* 58px to 90px adjusted proportionally */
	width: var(--lp-decor-spices-left-size-x);
	height: auto;
}

/* Left bottom - tomato */
.header__decor--tomato {
	left: 0;
	bottom: 0;
	width: var(--lp-decor-tomato-size-x);
	height: auto;
}

/* Right top - garlic */
.header__decor--garlic-top {
	right: 0;
	top: 0;
	width: var(--lp-decor-garlic-top-size-x);
	height: auto;
}

/* Right center - beans */
.header__decor--beans-bottom {
	right: clamp(0rem, 3.226vw + -0.323rem, 3.125rem); /* 0 to 50px */
	top: clamp(10.5rem, 16.452vw + 7.355rem, 27.625rem); /* 168px to 442px */
	width: var(--lp-decor-beans-bottom-size-x);
	height: auto;
	transform: none;
}

/* Right bottom - spices */
.header__decor--spices-bottom {
	right: 0;
	bottom: clamp(-1.875rem, 16.129vw + -4.339rem, 0rem); /* mobile: higher position, desktop: 0 */
	width: var(--lp-decor-spices-bottom-size-x);
	height: auto;
}

/* ===== HERO IMAGE ===== */

.lp-garlic-hero {
	position: relative;
	width: 100%;
}

.lp-garlic-hero__inner {
	position: relative;
	margin: 0 auto;
	max-width: var(--container-max-width);
	width: 100%;
}

.lp-garlic-hero__media,
.lp-garlic-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ================================
   INTRO SECTION
================================ */

.intro-section {
	position: relative;
	margin: 0 auto;
	padding-top: var(--m-spacing-y-2);
	padding-bottom: var(--m-page-spacing-y);
	background-image: url('../images/Bg-paper.png');
	background-size: 100% auto;
	background-repeat: repeat-y;
	background-position: center top;
}

.intro-section__container {
	max-width: 100%;
	margin: 0 auto;
	width: 100%;
}

.intro-section__content {
	display: flex;
	flex-direction: column;
	gap: var(--m-spacing-y-2);
	padding: 0 var(--lp-intro-padding-x);
}

.intro-section__text {
	margin: 0;
	font-family: var(--font-family-montserrat);
	font-size: var(--lp-intro-text-font-size);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	color: var(--color-dune);
}

.intro-section__text--primary {
	margin-top: -0.0625rem;
}

.intro-section__highlight {
	font-weight: 700;
}

/* ================================
   PRODUCT SHOWCASE
================================ */

.product-showcase {
	position: relative;
	margin: 0 auto;
	padding-top: var(--m-spacing-y-1);
	padding-bottom: var(--m-spacing-y-1);
	padding-left: var(--lp-showcase-spacing-x);
	padding-right: var(--lp-showcase-spacing-x);
	background-image: url('../images/Bg-paper.png');
	background-size: 100% auto;
	background-repeat: repeat-y;
	background-position: center top;
}

.product-showcase__container-wrapper {
	display: flex;
	flex-direction: column-reverse;
}

.product-showcase__container {
	position: relative;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lp-showcase-gap);
	width: 100%;
}

.product-showcase__decor-left {
	position: absolute;
	left: calc(var(--lp-showcase-decor-left-size-x) / -2);
	top: clamp(13.4375rem, 0.645vw + 13.292rem, 14.125rem); /* 215px to 226px */
	width: var(--lp-showcase-decor-left-size-x);
	height: auto;
	object-fit: contain;
	display: none;
}

.product-showcase__info {
	display: flex;
	flex-direction: column;
	gap: var(--m-spacing-y-2);
	width: 100%;
	max-width: 488px;
	flex-shrink: 0;
}

.product-showcase__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--m-spacing-y-4);
}

.product-showcase__category {
	font-family: var(--font-family-montserrat);
	font-size: var(--lp-showcase-category-font-size);
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-dune);
	white-space: nowrap;
}

.product-showcase__titles {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	align-self: stretch;
}

.product-showcase__name {
	margin: 0;
	font-family: var(--font-family-newspapersans);
	font-size: var(--lp-showcase-name-font-size);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.03em;
	text-align: center;
	color: var(--color-dune);
	align-self: stretch;
}

.product-showcase__title {
	margin: 0;
	font-family: var(--font-family-newspapersans);
	font-size: var(--lp-showcase-title-font-size);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.03em;
	text-align: center;
	color: var(--color-dune);
	align-self: stretch;
}

.product-showcase__description {
	margin: 0;
	font-family: var(--font-family-montserrat);
	font-size: var(--lp-showcase-description-font-size);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	color: var(--color-dune);
	align-self: stretch;
}

.product-showcase__ingredients {
	display: flex;
	flex-direction: column;
	gap: var(--m-spacing-y-5);
	align-self: stretch;
}

.product-showcase__ingredients-title {
	margin: 0;
	font-family: var(--font-family-newspapersans);
	font-size: var(--lp-showcase-ingredients-title-font-size);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.03em;
	text-align: center;
	color: var(--color-dune);
	align-self: stretch;
}

.product-showcase__ingredients-list {
	margin: 0;
	font-family: var(--font-family-montserrat);
	font-size: var(--lp-showcase-description-font-size);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	color: var(--color-dune);
	align-self: stretch;
}

.product-showcase__ingredients-note {
	margin: 0;
	font-family: var(--font-family-montserrat);
	font-size: var(--lp-showcase-description-font-size);
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	color: var(--color-dune);
	opacity: var(--opacity-dim);
	align-self: stretch;
}

.product-showcase__image {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: var(--lp-showcase-image-size-x);
	margin-top: var(--m-spacing-y-2);
}

.product-showcase__image-bg {
	width: 100%;
	height: auto;
}

.product-showcase__image-dish {
	position: absolute;
	left: 30.42%;
	top: 0;
	width: 69.58%;
	height: 91.46%;
	object-fit: contain;
}

.product-showcase__image-shadow {
	position: absolute;
	left: 10.57%;
	top: 8.10%;
	width: 80.48%;
	height: 91.78%;
	mix-blend-mode: multiply;
}

.product-showcase__image-product {
	position: absolute;
	width: 100%;
	height: 100%;
}

.product-showcase__image-onion {
	position: absolute;
	left: 0;
	top: 65.88%;
	width: 44.39%;
	height: 34.12%;
	object-fit: contain;
}

.product-showcase__image-garlic {
	position: absolute;
	right: 0;
	top: 39.19%; /* 203/518 ≈ 39.19% */
	width: 35.79%; /* 194/542 ≈ 35.79% */
	height: 43.05%; /* 223/518 ≈ 43.05% */
	object-fit: contain;
}

.product-showcase__image-spices {
	position: absolute;
	top: 3793px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.product-showcase__badge {
	position: absolute;
	left: 0;
	top: clamp(0rem, 3.871vw + -0.774rem, 3.75rem); /* 0 mobile to 60px desktop */
	width: var(--lp-showcase-badge-size-x);
	height: 3.625rem; /* 58px */
	transform: rotate(180deg) scaleX(-1);
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: image-set(
		url("../images/group-145.png") 1x,
		url("../images/group-145@2x.png") 2x
	);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.product-showcase__badge-text {
	position: relative;
	transform: rotate(-180deg) scaleX(-1);
	font-family: var(--font-family-newspapersans);
	font-size: var(--lp-showcase-badge-font-size);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.04em;
	text-align: center;
	color: var(--color-white);
	white-space: nowrap;
	z-index: 1;
}

/* French variant - hide left decor */
.product-showcase--french .product-showcase__decor-left {
	display: none !important;
}

/* ================================
   VIDEO BLOCK
================================ */

.video-block {
	align-items: center;
	align-self: stretch;
	background: linear-gradient(180deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: var(--spacing-2xl);
	justify-content: center;
	padding: var(--spacing-3xl) 0;
	position: relative;
	width: 100%;
}

.video-block--italian {
	background: #1D583D!important;
}

.video-block .header {
	font-family: var(--font-family-newspapersans);
	font-style: normal;
	font-weight: 400;
	font-size: var(--font-size-h2);
	line-height: var(--line-height-tight);
	text-align: center;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--color-white);
}

.video-block .video {
	aspect-ratio: 1.78;
	background-color: var(--color-video-bg);
	height: 609.75px;
	position: relative;
	width: var(--container-desktop);
	overflow: hidden;
	/* border-radius: var(--border-radius-md); */
}

.video-block .video-player {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background-color: var(--color-video-bg);
}

.video-block .for-block {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: var(--spacing-sm);
	position: relative;
	width: var(--container-desktop);
}

.video-block .subheader {
	font-family: var(--font-family-newspapersans);
	font-style: normal;
	font-weight: 400;
	font-size: var(--font-size-h3);
	line-height: var(--line-height-normal);
	text-align: center;
	letter-spacing: -0.03em;
	color: var(--color-white);
}

.video-block .dishes {
	align-items: center;
	gap: var(--spacing-4xl);
	height: 164px;
	display: inline-flex;
	position: relative;
}

.video-block .dishes .container .label {
	font-family: var(--font-family-ru-maggi-bcwt);
	color: var(--color-white);
	font-style: normal;
	font-weight: 400;
	font-size: var(--font-size-h6);
	line-height: var(--line-height-normal);
	letter-spacing: -0.04em;
	text-transform: uppercase;
}

.video-block .container {
	width: 100px;
	align-items: center;
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	position: relative;
}

.video-block .container img {
	height: 83px;
	position: relative;
	width: 90px;
}

.video-block .label {
	line-height: var(--line-height-normal);
	font-size: var(--font-size-h5);
}

/* ================================
   BUTTON SECTION (see_reciept)
================================ */

.see_reciept {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 var(--spacing-4xl) 0;
	background-image: url('../images/Bg-paper.png');
	background-size: 100% auto;
	background-repeat: repeat-y;
	background-position: center top;
	transition: max-height var(--transition-slow),
	            opacity var(--transition-medium),
	            padding var(--transition-slow),
	            gap var(--transition-slow);
}

.see_reciept:has(.lp-recipe-steps.is-visible) {
	gap: var(--spacing-4xl);
	padding: var(--spacing-4xl) 0;
}

.see_reciept .button {
	border: var(--border-width) solid var(--color-black);
	display: inline-flex;
	background: none;
	border-radius: var(--border-radius-sm);
	padding: 23px var(--spacing-xl);
	cursor: pointer;
	transition: all var(--transition-fast);
	box-shadow: var(--shadow-sm);
}

.see_reciept .button:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.see_reciept .button:active {
	transform: translateY(0);
	box-shadow: var(--shadow-sm);
}

.see_reciept .button-2 {
	align-items: center;
	flex: 0 0 auto;
	flex-direction: column;
	gap: var(--spacing-sm);
	justify-content: center;
	position: relative;
}

.see_reciept .text_label {
	margin-top: 0;
	font-family: var(--font-family-ru-maggi-bcwt);
	font-size: var(--font-size-large);
	font-weight: 400;
	line-height: var(--font-size-large);
	letter-spacing: var(--letter-spacing-normal);
	text-align: center;
	color: var(--color-black-marlin);
	text-transform: uppercase;
}

.see_reciept .text_label-2 {
	align-self: stretch;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--font-size-large);
	position: relative;
	text-align: center;
}

/* ================================
   RECIPE HEADER (Ingredients & Preview)
================================ */

.recipe-header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4xl);
	align-items: center;
	width: 100%;
}

.recipe-header__title {
	margin: 0;
	font-family: var(--font-family-newspapersans);
	font-size: var(--font-size-h2);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: var(--letter-spacing-medium);
	text-align: center;
	color: var(--color-dune);
	text-transform: uppercase;
}

.recipe-header__content {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-5xl);
	width: 100%;
	max-width: var(--container-desktop);
}

/* Recipe Ingredients List */

.recipe-ingredients {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 650px;
	flex-shrink: 0;
}

.recipe-ingredients__header {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--spacing-sm);
	padding: var(--spacing-md) 0;
	background-color: transparent;
}

.recipe-ingredients__title {
	margin: 0;
	flex: 1;
	font-family: var(--font-family-ru-maggi-bcwt);
	font-size: var(--font-size-h5);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--letter-spacing-normal);
	color: var(--color-dune);
	text-align: left;
}

.recipe-ingredients__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) 0;
	align-self: stretch;
	text-transform: none;
}

.recipe-ingredients__name {
	flex: 1;
	font-family: var(--font-family-montserrat);
	font-size: var(--font-size-base);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--letter-spacing-normal);
	color: var(--color-dune);
	text-align: left;
	text-transform: none;
}

.recipe-ingredients__quantity {
	font-family: var(--font-family-montserrat);
	font-size: var(--font-size-base);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--letter-spacing-normal);
	color: var(--color-dune);
	text-align: right;
	white-space: nowrap;
	text-transform: none;
}

.recipe-ingredients__divider {
	align-self: stretch;
	height: 1.57px;
	background-color: var(--color-dune);
	opacity: 0.2;
}

/* Recipe Preview */

.recipe-preview {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}

.recipe-preview__image {
	align-self: stretch;
	aspect-ratio: 1;
	display: block;
}

.recipe-preview__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recipe-preview__caption {
	font-family: var(--font-family-montserrat);
	font-size: var(--font-size-base);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--letter-spacing-normal);
	color: var(--color-dune);
	opacity: 0.4;
	text-align: center;
	white-space: nowrap;
	text-transform: none;
}

/* ================================
   RECIPE STEPS
================================ */

.see_reciept__container {
	display: none;
}
.lp-recipe-steps {
	flex-direction: column;
	gap: var(--lp-recipe-steps-gap);
	margin-top: var(--lp-recipe-steps-gap);
	counter-reset: recipe-step;
	text-transform: uppercase;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	/*transition: opacity var(--transition-medium),
	            max-height var(--transition-slow);*/
}

.lp-recipe-steps.is-visible {
	display: flex;
	opacity: 1;
	max-height: 10000px;
}

.lp-recipe-steps-wrapper {
	padding: 0 calc(var(--m-column-width-responsive) * 2);
}

.lp-recipe-step {
	display: flex;
	flex-direction: var(--lp-recipe-step-direction-even);
	align-items: center;
	gap: var(--lp-recipe-step-gap);
}

.lp-recipe-step:nth-child(2n) {
	flex-direction: var(--lp-recipe-step-direction-odd);
}

.lp-recipe-step__description {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 434px;
	min-height: 60px;
	font-family: var(--font-family-montserrat);
	font-style: normal;
	font-weight: 500;
	font-size: var(--font-size-h6);
	line-height: var(--line-height-normal);
	text-align: center;
	color: var(--color-dune);
	flex: none;
	order: 1;
	align-self: stretch;
	flex-grow: 0;
	text-transform: none;
}

.lp-recipe-step__description span {
	display: block;
	margin-top: 30px;
	font-size: var(--font-size-base);
}

.lp-recipe-step__description::before {
	counter-increment: recipe-step;
	content: counter(recipe-step);
	display: block;
	width: var(--lp-recipe-step-counter-size);
	aspect-ratio: 0.890625;
	line-height: var(--lp-recipe-step-counter-size);
	padding-top: 0;
	font-size: var(--lp-recipe-step-counter-font-size);
	border-radius: 50%;
	color: white;
	font-family: var(--font-family-ru-maggi-kc);
	margin: 0 auto var(--spacing-md);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 57 64'%3E%3Cpath fill='%23145034' d='M41.63 53.44A28.28 28.28 0 0 0 57 28.3 28.4 28.4 0 0 0 28.5 0 28.4 28.4 0 0 0 0 28.3c0 10.64 5.9 19.9 14.63 24.75 1.43 1 2.85 1.88 4.06 2.4A20.93 20.93 0 0 1 28.42 64c.54-1 3.45-5.8 9.72-8.54a22.72 22.72 0 0 0 3.5-2.02Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center center;
}

.see_reciept--french .lp-recipe-step__description::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 57 64'%3E%3Cpath fill='%23A85D6A' d='M41.63 53.44A28.28 28.28 0 0 0 57 28.3 28.4 28.4 0 0 0 28.5 0 28.4 28.4 0 0 0 0 28.3c0 10.64 5.9 19.9 14.63 24.75 1.43 1 2.85 1.88 4.06 2.4A20.93 20.93 0 0 1 28.42 64c.54-1 3.45-5.8 9.72-8.54a22.72 22.72 0 0 0 3.5-2.02Z'/%3E%3C/svg%3E");
}

.lp-recipe-step__photo {
	width: var(--lp-recipe-step-photo-width);
	flex-shrink: 0;
	flex-grow: 1;
}

.lp-recipe-step__photo img {
	width: 596px;
	height: auto;
}

/* ================================
   COLLECTION PROMO SECTION
================================ */

.collection-promo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-2xl);
	padding: var(--spacing-4xl) var(--spacing-lg);
	background-image: url('../images/ftr-bg.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
}

.collection-promo__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.collection-promo__title-wrapper {
	display: block;
}

.collection-promo__subtitle {
	font-family: var(--font-family-ru-maggi-kc);
	font-style: normal;
	font-weight: 400;
	font-size: 64px;
	line-height: 1.2;
	color: var(--color-white);
	text-transform: none;
}

.collection-promo__title {
	display: inline-block;
	font-family: var(--font-family-ru-maggi-kc);
	font-style: normal;
	font-weight: 400;
	font-size: 100px;
	line-height: 1;
	color: var(--color-white);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
}

.collection-promo__title--maggi {
	display: inline-block;
	margin-left: 20px;
	font-family: var(--font-family-kitchen-cupboard);
	font-style: normal;
	font-weight: 400;
	font-size: 100px;
	line-height: 110%;
	text-align: center;
	text-transform: uppercase;
	color: #FFFFFF;
	flex: none;
	order: 1;
	flex-grow: 0;
}

.collection-promo__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 23px var(--spacing-xl);
	background-color: var(--color-white);
	border: var(--border-width) solid var(--color-white);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--transition-fast);
}

.collection-promo__button:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.collection-promo__button-text {
	font-family: var(--font-family-ru-maggi-bcwt);
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 24px;
	text-align: center;
	text-transform: uppercase;
	color: #3E2B1A;
	flex: none;
	order: 0;
	align-self: stretch;
	flex-grow: 0;
}


/* ============================================================
   RESPONSIVE OVERRIDES (GROUPED AT THE BOTTOM)
   Desktop is the base (incl. 1280px). Below are tablet/mobile.
============================================================ */

/* ================================
   TABLET + UP (>= 768px)
================================ */

@media (min-width: 768px) {
	:root {
		--lp-recipe-step-direction-even: row-reverse;
		--lp-recipe-step-direction-odd: row;
		--lp-recipe-step-counter-size: 42px;
		--lp-recipe-step-counter-font-size: 28px;
		--lp-recipe-step-description-size-x: calc(var(--m-column-width-responsive) * 8);
		--lp-recipe-step-photo-width: 55%;
		--lp-recipe-step-gap: var(--spacing-lg);
	}

	.lp-root.lp-garlic {
		--lp-intro-padding-x: calc(var(--m-column-width-responsive) * 3.5);
		--lp-showcase-info-width: calc(var(--m-column-width-responsive) * 12);
	}

	.product-showcase__decor-left {
		display: block;
	}

	.product-showcase__image {
		margin-top: 0;
	}

	.collection-promo__title {
		font-size: var(--font-size-h2-promo);
	}

	.collection-promo__title--maggi {
		font-size: var(--font-size-h2-promo);
	}

	.collection-promo__subtitle {
		font-size: var(--font-size-h2);
	}
}

/* ================================
   DESKTOP (>= 1200px)
================================ */

@media (min-width: 1200px) {
	.lp-root.lp-garlic {
		--lp-showcase-info-width: calc(var(--m-column-width-responsive) * 10);
	}
	.lp-garlic-header {
		height: clamp(857px, calc(100vw * 857 / 1400), 2000px);
	}

	.header__products {
		padding: 0 15px!important;
	}
	.product-showcase__container-wrapper {
		flex-direction: row;
	}

	.product-showcase__container {
		flex-direction: row;
		align-items: flex-start;
		max-width: calc(var(--m-column-width-responsive) * 24);
	}

	.product-showcase__image {
		flex: 1;
		justify-content: flex-end;
		margin-top: calc(var(--m-spacing-y-2) * -1);
	}

	/* Desktop-first variants (explicit) */
	.garlic-mixes--desktop { display: flex; }
	.garlic-mixes--tablet  { display: none !important; }
	.garlic-mixes--mobile  { display: none !important; }

	.collection-promo__title {
		font-size: var(--font-size-h1);
	}

	.collection-promo__title--maggi {
		font-size: var(--font-size-h1);
	}

	.collection-promo__subtitle {
		font-size: 64px;
	}
	.product-showcase__badge {
		margin-top: -50px;
	}
}

/* ================================
   TABLET (768px – 1199.98px)
================================ */

@media (min-width: 768px) and (max-width: 1199.98px) {
	/* image variants */
	.garlic-mixes--desktop { display: none !important; }
	.garlic-mixes--tablet  { display: flex !important; }
	.garlic-mixes--mobile  { display: none !important; }
	.product-showcase__info { max-width: 100%; }

	/* Product Showcase Image - Tablet */
	.product-showcase__image {
		margin-top: -30px;
	}

	.product-showcase__header {
		max-width: 100%!important;
	}

	/* Product Showcase Badge - Tablet */
	.product-showcase__badge {
		justify-content: flex-start;
		padding-left: 50px;
	}

	/* Tablet layout tweaks */
	.lp-garlic-header {
		width: 100%;
		max-width: calc(var(--m-column-width-responsive) * 24 + var(--m-column-width-responsive) * 4);
	}

	.header__title-wrap {
		padding-top: var(--m-spacing-y-3);
	}

	.see_reciept {
		gap: 0;
		padding: 0 0 35px 0;
	}

	.see_reciept:has(.lp-recipe-steps.is-visible) {
		gap: 35px;
		padding: 35px 0;
	}

	.lp-recipe-steps {
		max-width: var(--container-tablet);
	}

	.video-block {
		padding: var(--spacing-3xl) 0;
		/* border-radius: 10px; */
	}

	.recipe-header {
		gap: var(--spacing-lg);
	}

	.lp-recipe-step__photo img {
		width: 318px;
	}

	.lp-recipe-step__description {
		width: 100%;
		max-width: 230px;
		font-size: var(--font-size-small);
		padding: 0 var(--spacing-sm);
		box-sizing: border-box;
	}

	.lp-recipe-step__description span {
		margin-top: 20px;
		font-size: 12px;
	}
	.product-showcase {
		padding-bottom: 30px!important;
	}
	.product-showcase__name {
		font-size: 35px!important;
	}
	.product-showcase__title {
		font-size: 60px!important;
	}
	.product-showcase__ingredients-title {
		font-size: 36px!important;
	}
	.product-showcase__badge-text {
		font-size: 40px!important;
	}
	.lp-recipe-steps.is-visible {
		margin-top: 0px!important;
	}

	.product-showcase--italia {
		color: rgba(64, 51, 51, 1)!important;s
	}

	.recipe-header__title {
		font-size: var(--font-size-h2);
		line-height: 1.25;
		letter-spacing: var(--letter-spacing-medium);
		max-width: var(--container-tablet);
	}

	.recipe-header__content {
		flex-direction: column-reverse;
		align-items: center;
		gap: var(--spacing-lg);
		max-width: var(--container-tablet);
	}

	.recipe-ingredients {
		width: 100%;
		max-width: var(--container-tablet);
	}

	.video-block .header {
		letter-spacing: -1.80px;
		line-height: var(--font-size-h2);
		width: var(--container-tablet);
		font-size: var(--font-size-h2);
	}

	.video-block .video {
		aspect-ratio: 1.78;
		background-color: var(--color-video-bg);
		height: 322.88px;
		position: relative;
		width: var(--container-tablet);
		overflow: hidden;
		/* border-radius: var(--border-radius-md); */
	}

	.video-block .for-block {
		width: var(--container-tablet);
	}

	.video-block .subheader {
		font-size: 35px;
		letter-spacing: -1.05px;
		line-height: 42.0px;
	}

	.video-block .dishes {
		gap: var(--spacing-4xl);
		height: 164px;
	}

	.video-block .container img {
		height: 83px;
		width: 90px;
	}

	.video-block .dishes .container .label {
		line-height: var(--line-height-normal);
		font-size: var(--font-size-medium);
	}
}

/* ================================
   MOBILE (<= 767.98px)
================================ */

@media (max-width: 767.98px) {
	/* Mobile header variables */
	:root {
		--lp-header-padding-top-mobile: 100px;
		--lp-header-base-height-mobile: 23rem;
	}

	/* Mobile page layout */
	.page {
		display: block;
	}

	/* Mobile header padding */
	.lp-garlic-header {
		padding-top: var(--lp-header-padding-top-mobile);
		height: 455px;

	}
	.header__title-wrap {
		max-width: 100%!important;
	}

	/* Header decorations swap */
	.header__decorations {
		display: none;
	}
	.header__decorations-mobile {
		display: block;
	}
	.header__products {
		padding: 0;
		align-items: flex-start;
		max-width: 100%;
	}
	.header__product-image {
		width: clamp(300px, calc(300px + (100vw - 360px) * 50 / 70), 390px);
        object-fit: unset;
        height: auto;
        margin-left: clamp(
    0px,
    calc(10px - (100vw - 360px) * 30 / 70),
    30px
  );
        margin-top: 0;
	}

	/* Header decorations - Mobile sizes */
	.header__decor--tomato {
		width: 100px;
	}
	.header__decor--spices-bottom {
		width: 105px;
		bottom: 0px;
	}
	.header__decor--spices-left {
		width: 100px
	}
	.header__decor--garlic-top {
		width: 45px;
	}

	/* image variants */
	.garlic-mixes--desktop { display: none !important; }
	.garlic-mixes--tablet  { display: none !important; }
	.garlic-mixes--mobile  { display: flex !important; }

	.lp-recipe-steps.is-visible {
		margin-top: 0px!important;
	}

	.product-showcase {
		padding-bottom: 30px!important;
	}

	.product-showcase__badge {
		background-image: url("../images/Subtract.png");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}

	/* Product Showcase Image - Mobile */
	.product-showcase__image {
		margin-top: -20px;
		max-width: none;
	}

	.header__title-wrap {
		max-width: calc(var(--m-column-width-responsive) * 24);
		margin: 0 auto;
	}

	/* Recipe Header - Mobile */
	.recipe-header {
		gap: var(--spacing-xl);
	}

	.recipe-header__title {
		font-size: var(--font-size-h4);
		line-height: 1.25;
		letter-spacing: -1.2px;
	}

	.recipe-header__content {
		flex-direction: column-reverse;
		align-items: center;
		gap: var(--spacing-lg);
		padding: 0;
	}

	.recipe-ingredients {
		width: 100%;
		max-width: 100%;
	}

	.recipe-ingredients__header {
		padding: var(--spacing-sm) 0;
	}

	.recipe-ingredients__title {
		font-size: var(--font-size-large);
		letter-spacing: -0.6px;
		line-height: var(--font-size-large);
	}

	.recipe-ingredients__item {
		padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) 0;
	}

	.recipe-ingredients__name,
	.recipe-ingredients__quantity {
		font-size: var(--font-size-small);
		line-height: 1.2;
	}

	.recipe-preview__caption {
		font-size: var(--font-size-small);
		line-height: 1.2;
	}

	/* Video Block - Mobile */
	.video-block {
		align-items: center;
		align-self: stretch;
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		gap: var(--spacing-2xl);
		justify-content: center;
		padding: var(--spacing-3xl) var(--spacing-lg);
		position: relative;
		width: 100%;
		background: linear-gradient(180deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
		/* border-radius: 10px; */
	}

	.video-block .header {
		letter-spacing: -1.20px;
		line-height: var(--font-size-h4);
		margin-top: -1.00px;
		position: relative;
		text-align: center;
		max-width: 300px;
		width: 100%;
		color: var(--color-white);
		font-family: var(--font-family-newspapersans);
		font-size: var(--font-size-h4);
		font-weight: 400;
	}

	.video-block .video {
		align-self: stretch;
		aspect-ratio: 1.78;
		background-color: var(--color-video-bg);
		position: relative;
		width: 100%;
		overflow: hidden;
		height: auto;
		/* border-radius: var(--border-radius-md); */
	}

	.video-block .for-block {
		align-items: center;
		align-self: stretch;
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		gap: var(--spacing-sm);
		position: relative;
		width: 100%;
	}

	.video-block .subheader {
		align-self: stretch;
		color: var(--color-white);
		font-family: var(--font-family-newspapersans);
		font-size: var(--font-size-h5);
		font-weight: 400;
		letter-spacing: -0.72px;
		line-height: 28.8px;
		margin-top: -1.00px;
		position: relative;
		text-align: center;
	}

	.video-block .dishes {
		align-items: center;
		display: inline-flex;
		flex: 0 0 auto;
		gap: var(--spacing-xl);
		height: 84px;
		position: relative;
	}

	.video-block .container {
		width: 50px;
		align-items: center;
		display: inline-flex;
		flex: 0 0 auto;
		flex-direction: column;
		gap: var(--spacing-sm);
		position: relative;
	}

	.video-block .container img {
		aspect-ratio: 1.08;
		height: 46px;
		position: relative;
		width: 50px;
	}

	.video-block .label {
		letter-spacing: var(--letter-spacing-normal);
		line-height: 19.2px;
		position: relative;
		white-space: nowrap;
		width: fit-content;
		color: var(--color-white);
		font-family: var(--font-family-ru-maggi-bcwt);
		font-size: var(--font-size-small);
		font-weight: 400;
	}

	.video-block .dishes .container .label {
		font-size: var(--font-size-small);
	}

	/* Product Showcase Badge - Mobile */
	.product-showcase__badge {
		width: 135px;
		height: 58px;
		background-size: 100% 100%;
		background-position: center;
	}

	/* Button Section - Mobile */
	.see_reciept {
		align-items: center;
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		gap: 0;
		padding: 0 var(--spacing-lg) var(--spacing-xl) var(--spacing-lg);
		position: relative;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.see_reciept:has(.lp-recipe-steps.is-visible) {
		gap: var(--spacing-xl);
		padding: var(--spacing-xl) var(--spacing-lg);
	}

	.see_reciept .button-2 {
		align-self: stretch;
		border: var(--border-width) solid var(--color-black);
		width: 100%;
		box-sizing: border-box;
	}

	.lp-recipe-steps {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		gap: 30px;
	}

	.see_reciept .button:hover {
		transform: translateY(-1px);
		box-shadow: var(--shadow-lg);
	}

	.see_reciept .text_label-2 {
		margin-top: -3px;
		font-size: var(--font-size-large);
		line-height: var(--font-size-large);
	}

	.lp-recipe-step__description {
		width: 100%;
		max-width: 100%;
		font-size: var(--font-size-small);
		padding: 0 var(--spacing-sm);
		box-sizing: border-box;
	}

	.lp-recipe-step__description span {
		margin-top: 15px;
		font-size: 14px;
	}

	.lp-recipe-step__photo {
		width: 100%;
	}

	.lp-recipe-step__photo img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

/* ================================
   LARGE DESKTOP (>= 1400px)
================================ */

@media (min-width: 1400px) {
	:root {
		--lp-recipe-step-counter-size: 57px;
		--lp-recipe-step-counter-font-size: 42px;
	}
}


/* Responsive adjustments */
@media (max-width: 767px) {
	.collection-promo {
		padding-top: var(--spacing-xl);
		padding-bottom: var(--spacing-xl);
		padding-left: 0;
		padding-right: 0;
		gap: var(--spacing-xl);
	}
	.collection-promo__content {
		padding-left: 0;
		padding-right: 0;
		gap: 0;
	}

	.collection-promo__subtitle {
		font-size: var(--font-size-h4);
	}

	.collection-promo__title {
		font-size: var(--font-size-h3);
	}

	.collection-promo__button {
		max-width: 200px;
	}

	.collection-promo__title--maggi {
		font-size: var(--font-size-h3);
		margin-left: 10px;
	}

	.collection-promo__title-wrapper {
		flex-direction: row;
		gap: var(--spacing-sm);
	}

	.collection-promo__button {
		width: 100%;
		padding: 20px var(--spacing-lg);
	}

	.collection-promo__button-text {
		font-size: var(--font-size-h6);
	}
}