/* ==========================================================================
   Recipe Diaries — fanned card slider
   ========================================================================== */
.recipes {
	padding-block: clamp(56px, 8vw, 100px);
	overflow: hidden;
}
.recipes__fan {
	position: relative;
	height: clamp(340px, 40vw, 460px);
	margin: 0 auto;
	overflow: visible;
}

.recipes__card {
	--scale: 1.05;
	position: absolute;
	top: clamp(88px, 9.2vw, 112px);
	left: 50%;
	width: clamp(140px, 19.6vw, 280px);
	height: clamp(238px, 26.6vw, 294px);
	padding: 0;
	border: 11px solid var(--c-white);
	box-shadow: 0 16px 30px -12px rgba(23, 51, 33, .4);
	background-color: var(--c);
	transform: translateX(calc(-50% + var(--x, 0px))) translateY(0) rotate(var(--rot, 0deg)) scale(var(--scale, 1.05));
	z-index: var(--z, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .85);
	font-size: 30px;
	transition: transform .4s ease, box-shadow .4s ease, width .55s ease, height .55s ease, top .55s ease, border-width .55s ease;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transform-origin: center bottom;
}
.recipes__fan .recipes__card:not(.is-front) {
	filter: blur(1.5px);
}
.recipes__fan .recipes__card:hover {
	filter: blur(0px);
}



.recipes__fan:hover .recipes__card:not(.is-front) {
	transform: translateX(calc(-50% + var(--x, 0px))) translateY(-12px) rotate(var(--rot, 0deg)) scale(var(--scale, 1.05));
}

.recipes__card:hover,
.recipes__fan:hover .recipes__card:not(.is-front):hover {
	z-index: 50 !important;
	transform: translateX(calc(-50% + var(--x, 0px))) translateY(-22px) rotate(var(--rot, 0deg)) scale(1.08) !important;
	box-shadow: 0 30px 48px -14px rgba(23, 51, 33, .55);
}

.recipes__card.is-front {
	--scale: 1.05;
	cursor: pointer;
	box-shadow: 0 28px 48px -12px rgba(23, 51, 33, .55);
	height: clamp(340px, 38vw, 420px);
	top: 52px;
	border-width: 16px;
	width: clamp(200px, 28vw, 400px);
	z-index: 20;
}
.recipes__card.is-front:hover {
	z-index: 51 !important;
	transform: translateX(calc(-50% + var(--x, 0px))) translateY(-18px) rotate(0deg) scale(1.1) !important;
	box-shadow: 0 36px 56px -12px rgba(23, 51, 33, .62);
}

.recipes__play-hint {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 30, 15, .15);
	border-radius: 6px;
	opacity: 1;
	transition: opacity .25s;
	object-fit: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
}

.recipes__play-hint i {
	opacity: 0;
	visibility: hidden;
	background: var(--c-green-400);
	color: #fff;
	width: 52px;
	height: 52px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	border-radius: 100%;
	transition: all 0.3s ease;
}

.recipes__card.is-front:hover .recipes__play-hint i {
	opacity: 1;
	visibility: visible;
}


/* ==========================================================================
   Milestones — stacked card slider
   ========================================================================== */
.milestones__frame {
	max-width: 660px;
	margin-inline: auto;
	padding-inline: 28px;
}
.milestones__stage {
	position: relative;
	aspect-ratio: 16 / 11;
	border-radius: var(--radius-md);
	overflow: visible;
}

.milestones__stage .milestones__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateX(0) scale(.86);
	transition: transform .55s ease, opacity .55s ease, box-shadow .55s ease;
	z-index: 1;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 18px 36px -18px rgba(23, 51, 33, .35);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	background: linear-gradient(150deg, var(--c-red), var(--c-red-700));
}

.milestones__stage .milestones__slide img {
	width: 100%;
	flex: 1;
	min-height: 0;
	object-fit: cover;
	display: block;
}
.milestones__stage .milestones__slide.is-prev {
	opacity: .85;
	pointer-events: auto;
	transform: translateX(-14%) scale(.9);
	z-index: 2;
}

.milestones__stage .milestones__slide.is-next {
	opacity: .85;
	pointer-events: auto;
	transform: translateX(14%) scale(.9);
	z-index: 2;
}

.milestones__stage .milestones__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0) scale(1);
	z-index: 4;
	box-shadow: 0 26px 46px -20px rgba(23, 51, 33, .45);
}

.milestones__stage .milestones__slide.is-active:hover {
	transform: translateX(0) scale(1.03) translateY(-8px);
	box-shadow: 0 32px 50px -18px rgba(23, 51, 33, .55);
}

.milestones__cascade .cascade__arrow {
	z-index: 6;
}

@media (max-width: 640px) {
	.milestones__frame {
		padding-inline: 12px;
	}

	.milestones__stage .milestones__slide.is-prev {
		transform: translateX(-8%) scale(.92);
	}

	.milestones__stage .milestones__slide.is-next {
		transform: translateX(8%) scale(.92);
	}
}

/* ==========================================================================
   Testimonials — stacked card slider
   ========================================================================== */
.peek__card.is-prev,
.peek__card.is-next {
	opacity: .88;
	pointer-events: auto;
	cursor: pointer;
	z-index: 2;
}
.peek__card.is-prev {
	transform: translateX(-20%) scale(.86);
}
.peek__card.is-next {
	transform: translateX(20%) scale(.86);
}
.peek__card.is-prev:hover,
.peek__card.is-next:hover,
.peek__card.is-prev:focus-visible,
.peek__card.is-next:focus-visible {
	opacity: 1;
	z-index: 3;
	outline: none;
}
.peek__card.is-prev:hover,
.peek__card.is-prev:focus-visible {
	transform: translateX(-28%) scale(.9);
}
.peek__card.is-next:hover,
.peek__card.is-next:focus-visible {
	transform: translateX(28%) scale(.9);
}

.peek__card.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0) scale(1);
	z-index: 4;
	box-shadow: 0 26px 46px -20px rgba(23, 51, 33, .42);
}

.peek__card.is-active:hover {
	transform: translateX(0) scale(1.02) translateY(-8px);
	box-shadow: 0 32px 52px -18px rgba(23, 51, 33, .5);
}

@media (max-width: 640px) {
	.peek {
		padding-inline: 28px;
	}

	.peek__card.is-prev {
		transform: translateX(-14%) scale(.9);
	}

	.peek__card.is-next {
		transform: translateX(14%) scale(.9);
	}
}

/* ==========================================================================
   Brands side-card states live in style.css (keep in sync)
   ========================================================================== */
.brands__card.is-active:hover {
	box-shadow: 0 28px 48px -16px rgba(23, 51, 33, .5);
}

.brands__card.is-prev:hover,
.brands__card.is-next:hover,
.brands__card.is-prev2:hover,
.brands__card.is-next2:hover {
	filter: brightness(1.06);
}


.cascade__slide.milestones__slide.is-prev, .cascade__slide.milestones__slide.is-next {
	opacity: 0.7;
}


/* ========================================
   PRELOADER
======================================== */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}

.preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.preloader__spinner {
	width: 200px;
	height: 200px;
	border-top-color: #6b8e23;
	border-radius: 50%;
	border-radius: 100%;
}
.preloader__spinner img {
	border-radius: 100%;
	box-shadow: 0 0 100px #fff;
}

.preloader__text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #666;
}

@keyframes preloader-spin {
    to {
        transform: rotate(360deg);
    }
}





.recipes__nav {
	display: flex;
}

.recipes__slider {
	position: relative;
}

.recipes__slider .cascade__arrow {
	z-index: 60;
}

.recipes__slider .cascade__arrow--prev {
	left: 10px;
}

.recipes__slider .cascade__arrow--next {
	right: 10px;
}

/* =========================================================
   TABLET + MOBILE SLIDER
========================================================= */

@media (max-width: 1199px) {

.recipes__nav {
	display: block;
}
.recipes__card:hover, .recipes__fan:hover .recipes__card:not(.is-front):hover{
	transform: none !important;
}
    .recipes__fan {
        overflow: hidden;
        width: 100%;
    }

.recipes__track {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	transition: transform 0.45s ease;
	will-change: transform;
	gap: 15px;
}

    .recipes__card {
        /*
         * 5 cards on tablet
         */
        flex: 0 0 20%;
        width: 20%;
        max-width: 20%;

        /*
         * Override desktop fan positioning
         */
        position: relative !important;
        left: auto !important;
        top: auto !important;

        transform: none !important;

        opacity: 1 !important;

        z-index: 1 !important;

        pointer-events: auto !important;

        margin: 0 !important;

        box-sizing: border-box;
    }


    /* Navigation */

    .recipes__nav {
        position: absolute;

        top: 50%;
        transform: translateY(-50%);

        width: 42px;
        height: 42px;

        padding: 0;
        border: 0;
        border-radius: 50%;

        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;

        z-index: 50;

        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);

        transition:
            opacity 0.25s ease,
            transform 0.25s ease;
    }

    .recipes__nav:hover {
        transform: translateY(-50%) scale(1.08);
    }

    .recipes__nav--prev {
        left: 10px;
    }

    .recipes__nav--next {
        right: 10px;
    }

    .recipes__nav.is-disabled {
        opacity: 0.3;
        pointer-events: none;
    }
}


/* =========================================================
   MOBILE — 3 CARDS
========================================================= */

@media (max-width: 767px) {

   .recipes__card {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    .recipes__nav {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .recipes__nav--prev {
        left: 5px;
    }

    .recipes__nav--next {
        right: 5px;
    }

	
    .recipes__card {
		height: 240px;
	}
	.recipes__fan {
		height: clamp(240px, 34vw, 240px);
	}
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .recipes__nav {
        width: 32px;
        height: 32px;

        font-size: 11px;
    }

}

.recipes__card .recipes__play-hint i{
    display: none;
}

.recipes__card.has-modal .recipes__play-hint i {
    display: flex;
}


.product-card:hover img {
	/* transform: rotateY(30deg); */
	animation: cardMove 1s ease-in-out infinite alternate;
}
@keyframes cardMove {
    0% {
        transform: rotateY(30deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}