.elementor-1648 .elementor-element.elementor-element-4e69fc3{--display:flex;--min-height:90vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--overlay-opacity:0.4;--padding-top:8rem;--padding-bottom:8rem;--padding-left:5%;--padding-right:5%;}.elementor-1648 .elementor-element.elementor-element-4e69fc3:not(.elementor-motion-effects-element-type-background), .elementor-1648 .elementor-element.elementor-element-4e69fc3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://dutchcrunch.iandpdev.com/wp-content/uploads/2025/10/dutch-crunch-sando-recipe-header.webp");background-position:center center;background-size:cover;}.elementor-1648 .elementor-element.elementor-element-4e69fc3::before, .elementor-1648 .elementor-element.elementor-element-4e69fc3 > .elementor-background-video-container::before, .elementor-1648 .elementor-element.elementor-element-4e69fc3 > .e-con-inner > .elementor-background-video-container::before, .elementor-1648 .elementor-element.elementor-element-4e69fc3 > .elementor-background-slideshow::before, .elementor-1648 .elementor-element.elementor-element-4e69fc3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1648 .elementor-element.elementor-element-4e69fc3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, #00000000 0%, #000000 100%);}.elementor-1648 .elementor-element.elementor-element-8996df8{width:var( --container-widget-width, 800px );max-width:800px;--container-widget-width:800px;--container-widget-flex-grow:0;text-align:left;}.elementor-1648 .elementor-element.elementor-element-8996df8 .elementor-heading-title{font-size:var( --e-global-typography-0196004-font-size );font-weight:var( --e-global-typography-0196004-font-weight );color:#FFFFFF;}.elementor-1648 .elementor-element.elementor-element-c645990{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1648 .elementor-element.elementor-element-8a785d2{z-index:2;}.elementor-1648 .elementor-element.elementor-element-8a785d2 .mu-shape-divider svg{fill:var( --e-global-color-secondary );}.elementor-1648 .elementor-element.elementor-element-6530316{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1648 .elementor-element.elementor-element-765c349{width:100%;max-width:100%;}.elementor-1648 .elementor-element.elementor-element-e7514dd{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-1648 .elementor-element.elementor-element-b6e30a7{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1648 .elementor-element.elementor-element-990d1b9 > .elementor-widget-container{margin:0rem 0rem 1rem 0rem;}.elementor-1648 .elementor-element.elementor-element-990d1b9{text-align:center;}.elementor-1648 .elementor-element.elementor-element-990d1b9 .elementor-heading-title{font-family:var( --e-global-typography-0fa2a3e-font-family ), Sans-serif;font-size:var( --e-global-typography-0fa2a3e-font-size );font-weight:var( --e-global-typography-0fa2a3e-font-weight );color:var( --e-global-color-primary );}.elementor-1648 .elementor-element.elementor-element-c68ea5e .elementor-button{background-color:var( --e-global-color-secondary );}.elementor-1648 .elementor-element.elementor-element-c68ea5e > .elementor-widget-container{margin:0rem 0rem 3rem 0rem;}.elementor-1648 .elementor-element.elementor-element-eee8850{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:2rem 2rem;--row-gap:2rem;--column-gap:2rem;--margin-top:0rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;}.elementor-1648 .elementor-element.elementor-element-478facd{--display:flex;--border-radius:45px 45px 45px 45px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-1648 .elementor-element.elementor-element-2550451 img{width:100%;border-radius:45px 45px 45px 45px;}.elementor-1648 .elementor-element.elementor-element-696b981{--display:flex;--border-radius:45px 45px 45px 45px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-1648 .elementor-element.elementor-element-305532f img{width:100%;border-radius:45px 45px 45px 45px;}.elementor-1648 .elementor-element.elementor-element-77a6365{--display:flex;--border-radius:45px 45px 45px 45px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-1648 .elementor-element.elementor-element-58e7883 img{width:100%;border-radius:45px 45px 45px 45px;}@media(max-width:1024px){.elementor-1648 .elementor-element.elementor-element-8996df8 .elementor-heading-title{font-size:var( --e-global-typography-0196004-font-size );}.elementor-1648 .elementor-element.elementor-element-990d1b9 .elementor-heading-title{font-size:var( --e-global-typography-0fa2a3e-font-size );}}@media(max-width:767px){.elementor-1648 .elementor-element.elementor-element-4e69fc3{--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0;--padding-bottom:3rem;--padding-left:5%;--padding-right:5%;}.elementor-1648 .elementor-element.elementor-element-8996df8 .elementor-heading-title{font-size:var( --e-global-typography-0196004-font-size );}.elementor-1648 .elementor-element.elementor-element-e7514dd{--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1648 .elementor-element.elementor-element-b6e30a7{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1648 .elementor-element.elementor-element-990d1b9 .elementor-heading-title{font-size:var( --e-global-typography-0fa2a3e-font-size );}.elementor-1648 .elementor-element.elementor-element-eee8850{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0.5rem 0.5rem;--row-gap:0.5rem;--column-gap:0.5rem;--flex-wrap:nowrap;--margin-top:0rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;}}@media(min-width:1025px){.elementor-1648 .elementor-element.elementor-element-4e69fc3:not(.elementor-motion-effects-element-type-background), .elementor-1648 .elementor-element.elementor-element-4e69fc3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for template-element, class: .elementor-element-765c349 *//* Recipes Loop Wrapper */
.recipes-loop {
width: 100vw;
}

h2.text-center {
font-family: var(--e-global-typography-0fa2a3e-font-family), Sans-serif;
font-size: var(--e-global-typography-0fa2a3e-font-size);
font-weight: var(--e-global-typography-0fa2a3e-font-weight);
color: var(--e-global-color-secondary);
text-transform: uppercase;
text-align: center;
width: 100%;
justify-self: center;
align-self: center;
margin: auto auto 1rem auto;
}

/* Type Selector Section */
.recipes-types {
text-align: center;
background: var(--e-global-color-secondary);
padding: .25rem 5% 4rem 5%;
color: #fff;
}

@media (max-width: 767px) {
.recipes-types {
padding-bottom: 2rem;
}
}

.recipes-type-options {
display: flex;
justify-content: center;
gap: 2.5rem;
margin-top: 1rem;
}

@media (max-width: 767px) {
.recipes-type-options {
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
}

a.recipes-type-option {
display: flex;
flex-direction: column;
gap: 0px;
line-height: 1;
color: #fff !important;
transition: all 5s ease;
}

a.recipes-type-option strong {
font-weight: 900;
}

a.recipes-type-option:hover {
transition: all .5s linear;
cursor: pointer;
}

a.recipes-type-option:hover strong {
font-style: italic;
transform: scale(1.1);
border-bottom: 5px solid var(--e-global-color-text);
padding-bottom: -5px;
margin-bottom: -5px;
}

a.recipes-type-option strong {
font-size: 3rem;
}

@media (max-width: 767px) {
a.recipes-type-option {
background: var(--e-global-color-text);
display: flex;
flex-direction: row;
justify-content: center;
gap: .25rem;
padding: 10px;
width: calc(100% - 5%);
border-radius: 18px;
}

a.recipes-type-option strong, a.recipes-type-option span {
color: var(--e-global-color-primary);
font-size: 1rem;
font-weight: 900;
}
}

/* Recipes Grid */
.recipes {
display: flex;
flex-direction: column;
align-items: center;
gap: 0rem;
max-width: var(--content-width) !important;
margin: auto;
padding: 4rem 5%;
}

@media (max-width: 767px) {
.recipes {
padding: 2rem 5%;
}
}

.recipes .recipe-items {
display: flex;
flex-direction: column;
gap: 3rem;
width: 100%;
margin-top: 2rem;
}

@media (max-width: 767px) {
.recipes .recipe-items {
margin-top: .5rem;
}
}

.recipes h2 {

}

/* Recipe Item */
.recipe-item {
flex-direction: column !important;
width: 100% !important;
}

.recipe-item.show {
display: flex;
}

.recipe-item.hide {
display: none;
}

.recipe-item .card {
display: flex;
}


@media (max-width: 767px) {
.recipe-item .card {
flex-direction: column !important;
}
}

.recipe-item .recipe-title a {
font-size: 2rem;
text-align: center;
color: var(--e-global-color-secondary);
margin-bottom: 1rem;
font-family: "Red Rose", Sans-serif;
color: var(--e-global-color-secondary) !important;
display: flex;
justify-content: center;
}

.recipe-item .card .recipe-image {
display: flex;
flex: 1 0 60%;
position: relative;
height: 100%;
overflow: hidden;
}

.recipe-item .card .recipe-image img {
aspect-ratio: 4 / 3;
object-fit: cover !important;
object-position: center center;
width: 100%;
transition: all 1s ease;
}

.recipe-item .card:hover .recipe-image img {
transform: scale(1.05);
transition: all 2s ease;
}

@media (max-width: 767px) {
.recipe-item .recipe-title a {
font-size: 1.2rem;
}
}

/* Recipe Type Icons */
.recipe-type-icons {
position: absolute;
bottom: 0px;
left: 0px;
}

.recipe-type-icons > * {
width: clamp(120px, 10vw, 220px);
height: auto;
aspect-ratio: 228 / 141;
color: transparent;
background-size: contain !important;
}

.recipe-type-icons .hot {
background: url(https://dutchcrunch.iandpdev.com/wp-content/uploads/2025/10/hot-icon.webp);
}

.recipe-type-icons .cold {
background: url(https://dutchcrunch.iandpdev.com/wp-content/uploads/2025/10/cold-icon.webp);
}

.recipe-item .recipe-flipper .icon {
position: absolute;
top: 10px;
right: 30px;
}

@media (max-width: 767px) {
.recipe-item .recipe-flipper .icon {
display: none;
position: relative;
top: 0px;
right: 0px;
}
}

/* Flipper Section */
.recipe-item .card .recipe-flipper {
display: flex;
justify-content: center;
align-items: center;
flex: 1 1 40%;
}

@media (max-width: 767px) {
.recipe-item .card .recipe-flipper {
width: 100%;
}

.recipe-item .card .recipe-flipper .front {
position: relative;
flex-direction: reverse-row;
padding-top: 7px;
padding-bottom: 7px;
}
}

.recipe-item .card .recipe-flipper .front {
text-align: center;
font-family: var(--e-global-typography-0fa2a3e-font-family), Sans-serif;
font-size: var(--e-global-typography-0fa2a3e-font-size);
font-weight: var(--e-global-typography-0fa2a3e-font-weight);
color: var(--e-global-color-secondary);
line-height: 120%;
}

.recipe-flipper {
position: relative;
perspective: 1000px;
margin: 0px auto;
cursor: pointer;
}

@media (max-width: 767px) {
.recipe-flipper {
flex-direction: co;
}
}

.recipe-flipper .front,
.recipe-flipper .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
transition: transform 0.6s;
}

@media (max-width: 767px) {
.recipe-flipper {
flex-direction: column-reverse;    
}

.recipe-flipper .front,
.recipe-flipper .back {
position: relative !important;
}

.recipe-flipper .back {
transform: rotateY(0deg) !important;
display: flex !important;
}
}

.recipe-flipper .headline br {
display: inline !important;
}

/* front side */
.recipe-flipper .front {
transform: rotateY(0deg);
color: #333;
background: var(--e-global-color-text);
}

@media (max-width: 767px) {
.recipe-flipper .front {
margin: 0px 1rem 0px 1rem;
border-radius: 0px 0px 18px 18px;
}
}

.recipe-flipper .front .headline {
display: flex;
flex-direction: column;
}

@media (max-width: 767px) {
.recipe-flipper .front .headline {
flex-direction: row;
}
}

/* back side */
.recipe-flipper .back {
transform: rotateY(180deg);
background-color: var(--e-global-color-secondary);
color: #fff;
padding: clamp(40px, 5vw, 60px);
display: flex;
flex-direction: column;
text-align: left;
align-items: flex-start;
}


@media (max-width: 767px) {
.recipe-flipper .back {
background: var(--e-global-color-text);
}

.recipe-flipper .back ol {
margin-left: 0px;
padding-left: 1rem;
}

.recipe-flipper .back .elementor-button {
display: none;
}
}

.recipe-flipper .back .headline {
font-size: clamp(1.35rem, 3vw, 2rem);
margin: 0px 0px 1rem 0px;
font-family: "Alexandria", sans-serif;
}

@media (max-width: 767px) {
    .recipe-flipper .back .headline {
    color: var(--e-global-color-secondary);
    }
    
    .recipe-flipper .front .headline {
    font-size: clamp(1rem, 3vw, 1rem) !important;
    margin: 0px 0px 0rem 0px;
    font-family: "Alexandria", sans-serif;
    display:flex;
    gap: .25rem;
    }
    
    .recipe-flipper .headline br {
    content: " ";
    display: inline-block;
    }
}

.recipe-flipper .back .elementor-button {
padding: 20px 24px;
background: var(--e-global-color-text);
color: var(--e-global-color-secondary);
cursor: pointer;
transform: scale(1);
transition: all .5s ease;
}

.recipe-flipper .back .elementor-button:hover {
transform: scale(1.025);
transition: all .5s ease;
}

.recipe-flipper .back ol {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 1rem;
}

@media (max-width: 767px) {
.recipe-flipper .back ol {
margin-bottom: 0px;
}

.recipe-flipper .back ol li {
color: #000;
}
}

/* flip animation */
.recipe-flipper:hover .front {
  transform: rotateY(180deg);
}

.recipe-flipper:hover .back {
  transform: rotateY(360deg);
}

@media (max-width: 767px) {
/* flip animation */
.recipe-flipper:hover .front {
  transform: rotateY(0deg) !important;
}

.recipe-flipper:hover .back {
  transform: rotateY(0deg) !important;
}
}

.recipes .type-above {
display: flex;
justify-content: center;
align-items: center;
margin: auto;
background: url(/wp-content/uploads/2025/10/stubby-brush-bg-yellow.png) no-repeat center center;
aspect-ratio: 512 / 261;
background-size: contain;
min-width: 100px;
overflow: hidden;
padding: 15px;
font-weight: 900;
}



/* existing styles from before remain the same */

/* Reusable fade-up animation */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Apply on demand; `both` keeps final state */
.recipe-item.enter {
  animation: fadeUpIn .35s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .recipe-item.enter { animation: none !important; }
}


/* Base state (hidden) */
.recipe-item {
  display: flex;                 /* or grid/block as needed */
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden;
  transition: opacity .5s ease, transform .5s ease, visibility .5s step-end;
  will-change: opacity, transform;
}

/* Visible (animates in) */
.recipe-item.show {
  opacity: 1;
  transform: translateY(0);
  display: flex !important;
  visibility: visible;
  transition: opacity .5s ease, transform .5s ease, visibility 0s step-start;
}

/* Hidden instantly (no animation + removed from layout) */
.recipe-item.hide {
  transition: none !important;
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden;
  display: none !important;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .recipe-item,
  .recipe-item.show {
    transition: none !important;
    transform: none !important;
  }
}

.elementor-1648 .elementor-element.elementor-element-765c349 .elementor-button:hover {
color: var(--e-global-color-text);
border: 3px solid var(--e-global-color-text);
}

.recipe-item .elementor-button.mobile {
display: none;
}

@media (max-width: 767px) {
.recipe-item .elementor-button.mobile {
display: inline-flex;
margin: 2rem auto 0px auto;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2550451 */.elementor-1648 .elementor-element.elementor-element-2550451 img {
aspect-ratio: 3 / 4;
object-fit: cover;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-305532f */.elementor-1648 .elementor-element.elementor-element-305532f img {
aspect-ratio: 3 / 4;
object-fit: cover;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58e7883 */.elementor-1648 .elementor-element.elementor-element-58e7883 img {
aspect-ratio: 3 / 4;
object-fit: cover;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-eee8850 */@media (max-width: 767px) {
.elementor-1648 .elementor-element.elementor-element-eee8850 {
width: 200%;
margin-left: -50%;
overflow-x: hidden !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7514dd */@media (max-width: 767px) {
.elementor-1648 .elementor-element.elementor-element-e7514dd {
max-width: 100vw !important;
overflow-x: hidden;
}
}/* End custom CSS */