.nff-product-landing-page {
	background-color: var(--wp--preset--color--neutrals-label-30, #fdfcf8);
	color: var(--wp--preset--color--primary-vine, #004539);
	overflow-x: hidden;
}

.nff-product-hero {
	position: relative;
	width: 100%;
}

.nff-product-hero__banner {
	width: 100%;
	aspect-ratio: 1440 / 496;
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--50, 1rem);
}

.nff-product-hero__banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nff-product-hero__breadcrumbs {
	padding-top: var(--wp--preset--spacing--40, 0.75rem);
	padding-bottom: var(--wp--preset--spacing--30, 0.5rem);
}

.nff-product-hero__header {
	margin-top: var(--wp--preset--spacing--40, 0.75rem);
	margin-bottom: var(--wp--preset--spacing--100, 4rem);
}

.nff-product-hero__title {
	font-family: var(--wp--preset--font-family--poppins, sans-serif);
	font-size: var(--wp--preset--font-size--xxx-large, 4rem);
	font-weight: 700;
	line-height: 1.08;
	color: var(--wp--preset--color--primary-vine, #004539);
	margin: 0;
}

.nff-product-category-row {
	margin-top: var(--wp--preset--spacing--90, 3rem);
	margin-bottom: var(--wp--preset--spacing--110, 4.5rem);
	position: relative;
}

.nff-product-category-row:first-of-type {
	margin-top: var(--wp--preset--spacing--70, 2rem);
}

.nff-product-category-row__card {
	max-width: 1344px;
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--wp--custom--radius--media, 8px);
	padding: var(--wp--preset--spacing--60, 1.5rem);
	position: relative;
	overflow: visible;
}

.nff-product-category-row--secondary-cheers-teal .nff-product-category-row__card {
	background-color: color-mix(in srgb, var(--wp--preset--color--secondary-cheers-teal, #1cad93) 20%, transparent);
}

.nff-product-category-row--secondary-organic-green .nff-product-category-row__card {
	background-color: color-mix(in srgb, var(--wp--preset--color--secondary-organic-green, #67c04d) 20%, transparent);
}

.nff-product-category-row--secondary-obsessions-purple .nff-product-category-row__card {
	background-color: color-mix(in srgb, var(--wp--preset--color--secondary-obsessions-purple, #3d0a85) 20%, transparent);
}

.nff-product-category-row--secondary-thrills-yellow .nff-product-category-row__card {
	background-color: color-mix(in srgb, var(--wp--preset--color--secondary-thrills-yellow, #ffa300) 20%, transparent);
}

.nff-product-category-row--secondary-thrills-magenta .nff-product-category-row__card {
	background-color: color-mix(in srgb, var(--wp--preset--color--secondary-thrills-magenta, #d30058) 20%, transparent);
}

.nff-product-category-row--secondary-zens-pistachio .nff-product-category-row__card {
	background-color: color-mix(in srgb, var(--wp--preset--color--secondary-zens-pistachio, #c5e896) 20%, transparent);
}

.nff-product-category-row--secondary-cheers-teal .nff-product-category-row__image {
	filter: drop-shadow(0 14px 4px rgba(0, 0, 0, 0.04));
}

.nff-product-category-row__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--70, 2rem);
	align-items: center;
	position: relative;
}

.nff-product-category-row__media-col {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: relative;
	z-index: 2;
}

.nff-product-category-row__image-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.nff-product-category-row__image {
	width: 100%;
	max-width: 600px;
	height: auto;
	max-height: 480px;
	object-fit: contain;
	display: block;
	border-radius: var(--wp--custom--radius--media, 8px);
}

.nff-product-category-row__content-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.nff-product-category-row__content-inner {
	max-width: 443px;
}

.nff-product-category-row__title {
	font-family: var(--wp--preset--font-family--poppins, sans-serif);
	font-size: var(--wp--preset--font-size--xx-large, 3.5rem);
	font-weight: 700;
	line-height: 1.08;
	color: var(--wp--preset--color--primary-vine, #004539);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--60, 1.5rem);
}

.nff-product-category-row__desc {
	font-family: var(--wp--preset--font-family--poppins, sans-serif);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 400;
	line-height: 1.32;
	color: var(--wp--preset--color--primary-vine, #004539);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--70, 2rem);
}

.nff-product-category-row__cta {
	display: flex;
}

.nff-product-category-row__cta .nff-btn {
	padding: var(--wp--preset--spacing--50, 1rem) var(--wp--preset--spacing--60, 1.5rem);
	font-family: var(--wp--preset--font-family--calibre, sans-serif);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 600;
	line-height: 1.24;
}

@media (min-width: 992px) {
	.nff-product-category-row {
		margin-top: 0;
		margin-bottom: 100px;
		position: relative;
	}

	.nff-product-category-row:has(+ .nff-faq-section) {
		margin-bottom: var(--wp--preset--spacing--30, 0.5rem);
	}

	.nff-product-category-row:first-of-type {
		margin-top: 0;
	}

	.nff-product-category-row__card {
		padding: 0;
		height: 450px;
		min-height: 450px;
		display: flex;
		align-items: center;
		position: relative;
		overflow: visible;
	}

	.nff-product-category-row__layout {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		position: relative;
	}

	.nff-product-category-row__content-col {
		box-sizing: border-box;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 2;
	}

	.nff-product-category-row--ltr .nff-product-category-row__content-col {
		margin-left: auto;
		margin-right: clamp(1.5rem, 8vw, 112px);
		max-width: 443px;
		width: 100%;
		padding: 0;
	}

	.nff-product-category-row--rtl .nff-product-category-row__content-col {
		margin-left: clamp(1.5rem, 8vw, 113px);
		margin-right: auto;
		max-width: 443px;
		width: 100%;
		padding: 0;
	}

	.nff-product-category-row__media-col {
		position: absolute;
		z-index: 3;
		pointer-events: none;
		display: block;
	}

	.nff-product-category-row__image-wrapper {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
	}

	.nff-product-category-row__image {
		display: block;
		max-width: none;
		max-height: none;
		height: auto;
		border-radius: 0;
	}

	.nff-product-category-row--secondary-cheers-teal .nff-product-category-row__media-col {
		left: 15px;
		top: 21px;
		width: 700px;
	}

	.nff-product-category-row--secondary-organic-green .nff-product-category-row__media-col {
		right: -18px;
		top: -93px;
		width: 858px;
	}

	.nff-product-category-row--secondary-obsessions-purple .nff-product-category-row__media-col {
		left: -19px;
		top: -30px;
		width: 984px;
	}

	/*
	 * Strawberries: 780px wide (was 886px) so the half berry clears the text
	 * column, and narrower on small laptops (the text column ends about 560px
	 * into the row). Centered on the same point as before (174px down).
	 */
	.nff-product-category-row--secondary-thrills-yellow .nff-product-category-row__media-col {
		right: 0;
		top: 174px;
		translate: 0 -50%;
		width: min(780px, calc(100% - 560px));
	}
}

.nff-category-stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--nff-stage-ratio);
	clip-path: inset(var(--nff-stage-clip));
}

.nff-category-stage__layer {
	position: absolute;
	left: var(--nff-layer-left);
	top: var(--nff-layer-top);
	width: var(--nff-layer-width);
	aspect-ratio: var(--nff-layer-ratio);
	transform-origin: var(--nff-layer-origin);
}

.nff-category-stage__picture,
.nff-category-stage__image {
	display: block;
	width: 100%;
	height: 100%;
}

/* Category stage motion: Lottie choreography on the high-res layers. */
.nff-category-stage--strawberries .nff-category-stage__layer--scene {
	scale: 1.04;
}

.nff-category-stage--strawberries .nff-category-stage__layer--shadow-whole {
	opacity: 0.8;
	scale: 1.38162 1;
}

.nff-category-stage--strawberries .nff-category-stage__layer--shadow-half {
	opacity: 0.8;
	scale: 1.51698 1;
}

@media (prefers-reduced-motion: no-preference) {
	.nff-js .nff-category-stage:not(.is-playing) .nff-category-stage__layer {
		animation-play-state: paused;
	}

	.nff-js .nff-category-stage--tomatoes .nff-category-stage__layer--whole {
		animation: nff-category-stage-tomatoes-roll 1600ms cubic-bezier(0.45, 0, 0.3, 1) 500ms both;
	}

	.nff-js .nff-category-stage--peppers .nff-category-stage__layer--top {
		animation:
			nff-category-stage-peppers-drop 600ms cubic-bezier(0.55, 0, 0.9, 0.6) 333.33ms both,
			nff-category-stage-peppers-wobble 1233.33ms ease-in-out 333.33ms both;
	}

	.nff-js .nff-category-stage--peppers .nff-category-stage__layer--top-shadow {
		animation: nff-category-stage-fade-in 200ms ease-out 880ms both;
	}

	.nff-js .nff-category-stage--cucumbers .nff-category-stage__layer--long {
		animation: nff-category-stage-cucumbers-long 1233.33ms ease-in-out both;
	}

	.nff-js .nff-category-stage--cucumbers .nff-category-stage__layer--medium {
		animation: nff-category-stage-cucumbers-medium 1233.33ms ease-in-out 200ms both;
	}

	.nff-js .nff-category-stage--cucumbers .nff-category-stage__layer--small {
		animation: nff-category-stage-cucumbers-small 1233.33ms ease-in-out 400ms both;
	}

	.nff-js .nff-category-stage--cucumbers .nff-category-stage__layer--mini {
		animation: nff-category-stage-cucumbers-mini 1233.33ms ease-in-out 600ms both;
	}

	.nff-js .nff-category-stage--strawberries .nff-category-stage__layer--scene {
		animation: nff-category-stage-strawberries-push 6000ms cubic-bezier(0.45, 0, 0.55, 1) both;
	}

	.nff-js .nff-category-stage--strawberries .nff-category-stage__layer--shadow-whole {
		animation:
			nff-category-stage-fade-in 2666.67ms cubic-bezier(0.45, 0, 0.55, 1) 933.33ms both,
			nff-category-stage-strawberries-shadow-whole-spread 3600ms cubic-bezier(0.45, 0, 0.55, 1) both,
			nff-category-stage-strawberries-shadow-float 4800ms cubic-bezier(0.45, 0, 0.55, 1) 3600ms 3;
	}

	.nff-js .nff-category-stage--strawberries .nff-category-stage__layer--shadow-half {
		animation:
			nff-category-stage-fade-in 2666.67ms cubic-bezier(0.45, 0, 0.55, 1) 333.33ms both,
			nff-category-stage-strawberries-shadow-half-spread 3000ms cubic-bezier(0.45, 0, 0.55, 1) both,
			nff-category-stage-strawberries-shadow-float 5600ms cubic-bezier(0.45, 0, 0.55, 1) 4100ms 3;
	}

	.nff-js .nff-category-stage--strawberries .nff-category-stage__layer--half {
		animation:
			nff-category-stage-fade-in 1133.33ms cubic-bezier(0.45, 0, 0.55, 1) 200ms both,
			nff-category-stage-strawberries-half-settle 3000ms cubic-bezier(0.25, 0.1, 0.2, 1) both,
			nff-category-stage-strawberries-half-float 5600ms cubic-bezier(0.45, 0, 0.55, 1) 4100ms 3;
	}

	.nff-js .nff-category-stage--strawberries .nff-category-stage__layer--whole {
		animation:
			nff-category-stage-fade-in 1133.33ms cubic-bezier(0.45, 0, 0.55, 1) 800ms both,
			nff-category-stage-strawberries-whole-settle 3600ms cubic-bezier(0.25, 0.1, 0.2, 1) both,
			nff-category-stage-strawberries-whole-float 4800ms cubic-bezier(0.45, 0, 0.55, 1) 3600ms 3;
	}

	@keyframes nff-category-stage-fade-in {
		from {
			opacity: 0;
		}
	}

	@keyframes nff-category-stage-tomatoes-roll {
		from {
			translate: -71.6663% 0%;
			rotate: -122.7767deg;
		}
	}

	/*
	 * Hidden until the drop starts: waiting above the stage, the pepper's tip
	 * would show inside the Tomatoes row under its button.
	 */
	@keyframes nff-category-stage-peppers-drop {
		from {
			translate: 0 -168.0554%;
			visibility: hidden;
		}
	}

	@keyframes nff-category-stage-peppers-wobble {
		0% {
			rotate: -6deg;
		}

		48.6486% {
			rotate: 0deg;
		}

		64.8649% {
			rotate: 2.5deg;
		}

		83.7838% {
			rotate: -0.8deg;
		}

		100% {
			rotate: 0deg;
		}
	}

	@keyframes nff-category-stage-cucumbers-long {
		0%,
		45.9459%,
		78.3784%,
		100% {
			rotate: 0deg;
		}

		24.3243% {
			rotate: 2deg;
		}

		62.1622% {
			rotate: 0.6deg;
		}

		89.1892% {
			rotate: 0.16deg;
		}
	}

	@keyframes nff-category-stage-cucumbers-medium {
		0%,
		45.9459%,
		78.3784%,
		100% {
			rotate: 0deg;
		}

		24.3243% {
			rotate: -4deg;
		}

		62.1622% {
			rotate: -1.2deg;
		}

		89.1892% {
			rotate: -0.32deg;
		}
	}

	@keyframes nff-category-stage-cucumbers-small {
		0%,
		45.9459%,
		78.3784%,
		100% {
			rotate: 0deg;
		}

		24.3243% {
			rotate: 5deg;
		}

		62.1622% {
			rotate: 1.5deg;
		}

		89.1892% {
			rotate: 0.4deg;
		}
	}

	@keyframes nff-category-stage-cucumbers-mini {
		0%,
		45.9459%,
		78.3784%,
		100% {
			rotate: 0deg;
		}

		24.3243% {
			rotate: -6deg;
		}

		62.1622% {
			rotate: -1.8deg;
		}

		89.1892% {
			rotate: -0.48deg;
		}
	}

	@keyframes nff-category-stage-strawberries-push {
		from {
			scale: 1;
		}
	}

	@keyframes nff-category-stage-strawberries-shadow-whole-spread {
		from {
			scale: 1.13984 0.825;
		}
	}

	@keyframes nff-category-stage-strawberries-shadow-half-spread {
		from {
			scale: 1.25151 0.825;
		}
	}

	@keyframes nff-category-stage-strawberries-half-settle {
		from {
			translate: 0 10.6603%;
			rotate: 2.5deg;
			scale: 0.96;
		}
	}

	@keyframes nff-category-stage-strawberries-whole-settle {
		from {
			translate: 0 8.1426%;
			rotate: -2.5deg;
			scale: 0.96;
		}
	}

	@keyframes nff-category-stage-strawberries-half-float {
		50% {
			transform: translateY(-3.1181%) rotate(-0.6deg);
		}
	}

	@keyframes nff-category-stage-strawberries-whole-float {
		50% {
			transform: translateY(-2.5859%) rotate(0.6deg);
		}
	}

	@keyframes nff-category-stage-strawberries-shadow-float {
		50% {
			transform: scale(0.9);
			filter: opacity(0.72);
		}
	}
}