.moringa-home {
	font-family: "Assistant", sans-serif
}

.moringa-hero,
.moringa-hero * {
	font-family: "Assistant", sans-serif
}

.moringa-hero {
	position: relative;
	width: 100%;
	background: #00321B;
	min-height: 500px;
	display: flex;
	align-items: center;
	overflow: visible
}

.moringa-hero__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center left;
	z-index: 1
}

.moringa-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1
}

.moringa-hero__video--mobile {
	display: none
}

.moringa-hero__overlay {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(270deg, #00321B 45%, rgba(0, 50, 27, 0) 100%);
	z-index: 2
}

.moringa-hero__content {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1700px;
	margin-left: auto;
	margin-right: auto;
	padding: 80px 60px 120px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: right
}

.moringa-hero__subtitle {
	color: #fff;
	font-size: clamp(24px, 2.5vw, 40px);
	font-weight: 400;
	margin-bottom: 15px
}

.moringa-hero__title {
	color: #fff;
	font-size: clamp(40px, 4vw, 64px);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 25px
}

.moringa-hero__subtitle2 {
	color: #fff;
	font-size: clamp(18px, 1.8vw, 26px);
	font-weight: 400;
	margin-bottom: 25px
}

.moringa-hero__ribbon {
	position: relative;
	isolation: isolate;
	background: none !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 311px;
	min-height: 55px;
	text-align: center;
	margin-bottom: 40px;
	clip-path: none;
	transition: none !important
}

.moringa-hero__ribbon::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(293deg, #570501 0%, #97151C 51%, #D3474A 76%, #97151C 88%, #570501 100%);
	clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 50%, 100% 100%, 0 100%, 15px 50%);
	pointer-events: none
}

.moringa-hero__ribbon-top {
	position: relative;
	z-index: 1;
	color: #fff;
	display: flex;
	align-items: baseline;
	gap: 5px
}

.moringa-hero__ribbon-top .small {
	font-size: 16px;
	font-weight: 800
}

.moringa-hero__ribbon-top .large {
	font-size: 32px;
	font-weight: 800
}

.moringa-hero__ribbon-bottom {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	margin-top: -5px
}

.moringa-hero a.moringa-hero__btn,
.moringa-hero__btn {
	display: inline-block !important;
	box-sizing: border-box !important;
	border: 1px solid #fff !important;
	border-radius: 0 !important;
	color: #fff !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	font-family: "Assistant", sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	padding: 12px 40px !important;
	text-align: center !important;
	min-width: 166px !important;
	width: auto !important;
	max-width: none !important;
	transition: all .3s ease !important;
	cursor: pointer !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important
}

.moringa-hero a.moringa-hero__btn:hover,
.moringa-hero a.moringa-hero__btn:focus,
.moringa-hero a.moringa-hero__btn:active,
.moringa-hero__btn:hover,
.moringa-hero__btn:focus,
.moringa-hero__btn:active {
	color: #fff !important;
	background: transparent !important;
	background-color: transparent !important;
	border-color: #fff !important;
	text-decoration: none !important;
	box-shadow: none !important;
	outline: none !important
}

.moringa-hero a.moringa-hero__btn:visited,
.moringa-hero__btn:visited {
	color: #fff !important
}

.moringa-hero__features {
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
	right: auto;
	width: 100%;
	max-width: 1700px;
	padding: 0 60px;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	gap: 2%;
	z-index: 4
}

.moringa-hero__feature {
	background: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, .08);
	border-radius: 10px;
	flex: 1;
	max-width: 100%;
	height: 101px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	gap: 15px
}

.moringa-hero__feature lottie-player {
	width: 60px;
	height: 60px;
	flex-shrink: 0
}

.moringa-hero__feature-text {
	color: #05683A;
	font-size: clamp(14px, 1.2vw, 20px);
	font-weight: 400;
	line-height: 1.2
}

.moringa-cats {
	max-width: 1700px;
	margin: 90px auto 0;
	padding: 0 60px;
	box-sizing: border-box
}

.moringa-cats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 29px
}

.moringa-cats__item {
	position: relative;
	height: 525px;
	border-radius: 10px;
	overflow: hidden
}

.moringa-cats__item img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.moringa-cats__title {
	position: absolute;
	left: 0;
	right: 0;
	top: 428px;
	text-align: center;
	font-size: 32px;
	line-height: 70px;
	color: #05683A
}

.moringa-cats__title.is-white {
	color: #fff
}

.moringa-cats__item .moringa-cats__sale--promo {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	font-family: "Assistant", sans-serif;
	color: #fff
}

.moringa-cats__item .moringa-cats__sale--promo .promo-text {
	position: absolute;
	left: 53px;
	top: 84.24px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: right;
	z-index: 2
}

.moringa-cats__item .moringa-cats__sale--promo .discount-title {
	position: absolute;
	left: 53px;
	top: 37.54px;
	color: #fff;
	font-size: 53.43px;
	font-weight: 800;
	text-align: right;
	line-height: 1;
	z-index: 2
}

.moringa-cats__item .moringa-cats__sale--promo .up-to-text {
	position: absolute;
	left: 262.55px;
	top: 38.44px;
	color: #fff;
	text-align: right;
	z-index: 2
}

.moringa-cats__item .moringa-cats__sale--promo .up-to-text .up {
	font-size: 23.91px;
	font-weight: 800
}

.moringa-cats__item .moringa-cats__sale--promo .percentage-text-wrapper {
	position: absolute;
	left: 178px;
	top: 42px;
	color: #fff;
	display: flex;
	align-items: flex-end;
	direction: ltr;
	z-index: 2
}

.moringa-cats__item .moringa-cats__sale--promo .number-30 {
	font-size: 80px;
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: -2px
}

.moringa-cats__item .moringa-cats__sale--promo .percent-symbol {
	font-size: 45px;
	font-weight: 800;
	line-height: 0.8;
	margin-left: 2px;
	margin-top: 2px
}

.moringa-prods.moringa-home,
.moringa-prods.moringa-home *,
.moringa-prods .section-title,
.moringa-prods .product-card {
	font-family: "Assistant", sans-serif !important
}

.moringa-prods {
	box-sizing: border-box;
	background: #fff;
	padding: 60px 0 !important;
	margin: 0;
	overflow: visible !important
}

.moringa-prods *,
.moringa-prods *::before,
.moringa-prods *::after {
	box-sizing: border-box
}

.moringa-prods.products-section {
	width: 100%;
	max-width: 1700px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding: 60px 60px !important;
	box-sizing: border-box;
	overflow: visible !important
}

.moringa-prods .section-title {
	color: #05683A !important;
	font-size: clamp(30px, 3vw, 42px) !important;
	font-weight: 700 !important;
	margin: 0 0 40px !important;
	padding: 0 !important;
	border: none !important;
	background: none !important
}

.moringa-prods .splide {
	padding: 0;
	position: relative;
	overflow: visible !important
}

.moringa-prods .product-card {
	display: flex;
	flex-direction: column;
	text-align: right;
	background: #fff !important;
	height: 100%;
	padding: 10px;
	margin: 0;
	border: none !important;
	box-shadow: none !important
}

.moringa-prods .image-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: 6px;
	border: 1px solid #DFDFDF;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff
}

.moringa-prods .image-wrapper img {
	width: 80%;
	height: 80%;
	object-fit: contain
}

.moringa-prods .discount-badge {
	position: absolute;
	top: 15px;
	right: -5px;
	z-index: 2;
	line-height: 0;
	display:none;
}

.moringa-prods .product-title {
	color: #00321B !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 0 15px !important;
	padding: 0 !important;
	flex-grow: 1;
	text-align: center;
	border: none !important;
	background: none !important
}

/* Clickable image + title — inherit card styling, no underline.
   Hover slightly highlights the title to signal interactivity. */
.moringa-prods .product-card__image-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.moringa-prods .product-card__image-link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.moringa-prods .product-title .product-card__title-link {
	color: inherit !important;
	text-decoration: none !important;
	background: none !important;
	display: inline-block;
	transition: color .15s ease;
}
.moringa-prods .product-card__image-link:hover img,
.moringa-prods .product-card__image-link:focus img {
	opacity: 0.92;
}
.moringa-prods .product-title .product-card__title-link:hover,
.moringa-prods .product-title .product-card__title-link:focus {
	color: var(--c-green, #05683A) !important;
	text-decoration: none !important;
}

.moringa-prods .product-prices {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-bottom: 15px
}

.moringa-prods .price-new {
	color: #A8242A !important;
	font-size: 26px !important;
	font-weight: 700 !important
}

.moringa-prods .price-old {
	color: #00321B !important;
	font-size: 26px !important;
	font-weight: 400 !important;
	text-decoration: line-through !important
}

.moringa-prods .product-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(48px, auto) auto;
	gap: 10px;
	align-items: stretch
}

.moringa-prods .product-actions>.btn-secondary,
.moringa-prods .product-actions>.btn-primary {
	align-self: stretch
}

.moringa-prods .product-actions>.btn-secondary {
	grid-column: 1;
	grid-row: 1
}

.moringa-prods .product-actions>.btn-primary {
	grid-column: 2;
	grid-row: 1
}

.moringa-prods .product-actions>a.added_to_cart {
	grid-column: 1/-1;
	grid-row: 2;
	margin: 2px 0 0 !important;
	padding: 6px 0 !important;
	height: auto !important;
	min-height: 0 !important;
	display: block !important;
	text-align: center !important;
	background: transparent !important;
	color: #00321B !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-decoration: underline !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	font-family: "Assistant", sans-serif !important
}

.moringa-prods .product-actions>a.btn,
.moringa-prods .product-actions>button.btn {
	flex: unset !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
	height: auto !important;
	min-height: 48px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important
}

.moringa-prods .moringa-atc-vis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	direction: rtl
}

.moringa-prods .moringa-atc-vis svg {
	flex-shrink: 0;
	width: 21px;
	height: 21px;
	display: block
}

.moringa-prods a.btn,
.moringa-prods button.btn {
	flex: 1;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 16px !important;
	font-weight: 600 !important;
	font-family: "Assistant", sans-serif !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: opacity .3s ease;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.2;
	margin: 0;
	padding: 0 8px;
	-webkit-appearance: none;
	appearance: none;
	background-image: none !important
}

.moringa-prods .btn-primary,
.moringa-prods a.btn-primary {
	background-color: #00321B !important;
	color: #fff !important;
	border: none !important
}

.moringa-prods .btn-primary:hover,
.moringa-prods a.btn-primary:hover {
	opacity: .9;
	background-color: #00321B !important;
	color: #fff !important
}

.moringa-prods .btn-secondary,
.moringa-prods a.btn-secondary {
	background-color: transparent !important;
	color: #00321B !important;
	border: 1px solid rgba(0, 50, 27, .4) !important
}

.moringa-prods .btn-secondary:hover,
.moringa-prods a.btn-secondary:hover {
	background-color: rgba(0, 50, 27, .05) !important;
	color: #00321B !important
}

.moringa-prods .all-products-link {
	display: inline-block !important;
	color: #00321B !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	margin-top: 40px !important;
	border: none !important;
	background: none !important
}

.moringa-prods .splide__arrow {
	background: transparent !important;
	opacity: 1 !important;
	width: 40px !important;
	height: 40px !important
}

.moringa-prods .splide__arrow svg {
	fill: none !important;
	width: 40px;
	height: 40px
}

.moringa-prods .splide__arrow--prev {
	right: -24px !important;
	left: auto !important;
	top: 50% !important;
	transform: translateY(-50%) !important
}

.moringa-prods .splide__arrow--next {
	left: -24px !important;
	right: auto !important;
	top: 50% !important;
	transform: translateY(-50%) rotate(180deg) !important
}

.moringa-prods a.moringa-atc-ajax.is-loading {
	pointer-events: none;
	opacity: .92;
	position: relative
}

.moringa-prods a.moringa-atc-ajax.is-loading .moringa-atc-vis {
	opacity: 0;
	transition: opacity .15s ease
}

.moringa-prods a.moringa-atc-ajax.is-loading::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	animation: moringa-atc-spin .55s linear infinite
}

@keyframes moringa-atc-spin {
	to {
		transform: rotate(360deg)
	}
}

.moringa-revs.moringa-home,
.moringa-revs.moringa-home * {
	font-family: "Assistant", sans-serif !important
}

.moringa-revs {
	box-sizing: border-box;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding: 60px 60px;
	background: #fff;
	overflow-x: hidden
}

.moringa-revs .testimonials-section {
	width: 100%;
	text-align: center;
	position: relative
}

.moringa-revs .section-title {
	color: #05683A !important;
	font-size: clamp(30px, 3vw, 42px) !important;
	font-weight: 700 !important;
	margin: 0 0 40px !important;
	padding: 0 !important;
	border: none !important;
	background: none !important
}

.moringa-revs .splide {
	position: relative
}

.moringa-revs .splide__track {
	overflow: visible !important
}

.moringa-revs .video-card {
	display: flex;
	flex-direction: column;
	text-align: center;
	cursor: pointer;
	padding: 0 10px;
	transition: opacity .4s ease
}

.moringa-revs .splide__slide:not(.is-active) .video-card {
	opacity: .5 !important
}

.moringa-revs .splide__slide:not(.is-active) .play-button {
	opacity: 0 !important;
	pointer-events: none !important
}

.moringa-revs .video-thumbnail-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 15px;
	background: #eee
}

.moringa-revs .video-thumbnail-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.moringa-revs .play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	transition: transform .2s ease, opacity .3s ease
}

.moringa-revs .video-title {
	color: #00321B !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	padding: 0 10px !important;
	margin: 0 !important;
	border: none !important;
	background: none !important
}

.moringa-revs .splide__arrows {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	z-index: 10;
	pointer-events: none
}

.moringa-revs .splide__arrow {
	pointer-events: auto !important;
	background: rgba(255, 255, 255, .85) !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .15) !important;
	opacity: 1 !important
}

.moringa-revs .splide__arrow--prev {
	right: -24px !important;
	left: auto !important;
	transform: translateY(-50%) rotate(180deg) !important
}

.moringa-revs .splide__arrow--next {
	left: -24px !important;
	right: auto !important
}

.moringa-revs .splide__arrow svg {
	width: 22px !important;
	height: 22px !important;
	fill: none !important;
	stroke: #00321B !important
}

.moringa-revs .video-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(3, 10, 17, .9) !important;
	z-index: 99999 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility .3s ease
}

.moringa-revs .video-modal.active {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important
}

.moringa-revs .modal-content {
	position: relative;
	width: 90%;
	max-width: 900px;
	aspect-ratio: 16/9;
	background: #000 !important;
	border-radius: 8px !important;
	box-shadow: 0 15px 40px rgba(0, 0, 0, .6) !important
}

.moringa-revs .modal-content iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none !important
}

.moringa-revs .close-modal {
	position: absolute;
	top: 20px;
	left: 30px;
	background: none !important;
	border: none !important;
	color: #fff !important;
	font-size: 50px !important;
	cursor: pointer;
	line-height: 1;
	z-index: 100000;
	transition: color .2s ease
}

.moringa-revs .close-modal:hover {
	color: #ff4d4d !important
}

@media(max-width:768px) {
	.moringa-hero {
		flex-direction: column;
		min-height: auto;
		align-items: stretch;
		background: #00321B;
		margin-bottom: 220px
	}

	.moringa-hero__bg {
	
		width: 100%;
		height: 300px
	}

	.moringa-hero__video--desktop {
		display: none
	}

	.moringa-hero__video--mobile {
		display: block;
		position: relative;
		width: 100%;
		height: 300px
	}

	.moringa-hero__overlay {
		display: none
	}

	.moringa-hero__content {
		max-width: 1700px;
		margin-left: auto;
		margin-right: auto;
		padding: 30px 16px 80px;
		box-sizing: border-box;
		align-items: center;
		text-align: center;
		position: relative
	}

	.moringa-hero__ribbon {
		min-width: 203px;
		min-height: 37px;
		padding: 6px 30px;
		clip-path: none !important;
        position: absolute;
        top: -28px;
        
	}

	.moringa-hero__ribbon::before {
		clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%)
	}

	.moringa-hero__ribbon-top .small {
		font-size: 10px
	}

	.moringa-hero__ribbon-top .large {
		font-size: 21px
	}

	.moringa-hero__ribbon-bottom {
		font-size: 10.5px;
		margin-top: -2px
	}

	.moringa-hero__subtitle {
		font-size: 20px;
		margin-bottom: 10px;
		margin-top: 10px
	}

	.moringa-hero__title {
		font-size: 32px;
		margin-bottom: 20px
	}

	.moringa-hero__subtitle2 {
		font-size: 20px;
		margin-bottom: 20px
	}

	.moringa-hero a.moringa-hero__btn,
	.moringa-hero__btn {
		font-size: 18px !important;
		padding: 10px 25px !important;
		min-width: 144px !important
	}

	.moringa-hero__features {
		position: absolute;
		top: 100%;
		left: 50%;
		right: auto;
		bottom: auto;
		transform: translateX(-50%);
		width: 100%;
		max-width: 1700px;
		box-sizing: border-box;
		margin-top: -50px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px;
		padding: 0 16px
	}

	.moringa-hero__feature {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		height: 101px;
		padding: 10px;
		gap: 8px;
		border-radius: 6px
	}

	.moringa-hero__feature lottie-player {
		width: 36px;
		height: 36px
	}

	.moringa-hero__feature-text {
		font-size: 16px
	}

	.moringa-cats__grid {
		grid-template-columns: 1fr
	}

	.moringa-cats__item {
		height: 400px
	}

	.moringa-cats__title {
		top: 320px
	}

	.moringa-cats {
		padding: 0 16px !important
	}

	.moringa-prods.products-section {
		padding: 40px 16px !important
	}

	.moringa-prods .splide {
		padding: 0;
		position: relative;
		overflow: visible !important
	}

	.moringa-prods .product-title {
		font-size: 20px !important
	}

	.moringa-prods .splide__arrow--prev {
		right: -12px !important;
		top: 50% !important;
		transform: translateY(-50%) !important
	}

	.moringa-prods .splide__arrow--next {
		left: -12px !important;
		top: 50% !important;
		transform: translateY(-50%) rotate(180deg) !important
	}

	.moringa-revs {
		padding: 40px 16px !important
	}

	.moringa-revs .splide__track {
		overflow: hidden !important
	}

	.moringa-revs .splide__arrows {
		width: 100%
	}

	.moringa-revs .splide__arrow--prev {
		right: 10px !important
	}

	.moringa-revs .splide__arrow--next {
		left: 10px !important
	}

	.moringa-revs .video-title {
		font-size: 18px !important;
		padding: 0 5px !important
	}

	.moringa-revs .close-modal {
		top: 10px !important;
		left: 20px !important;
		font-size: 40px !important
	}

	.moringa-hero.moringa-hero--has-mobile-bg .moringa-hero__bg {
		background-image: var(--moringa-hero-bg-mobile) !important;
		background-size: cover;
		background-position: center center
	}
}