.container {
    padding-inline: 1rem;
}

.recipes-wrapper {
    display: grid;
    gap: 1.5rem;
}

header.archive-header {
    height: 100%;
    height: 216px;
    margin-bottom: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
}
header.archive-header h1 {
    position: relative;
    z-index: 10;
    margin: 0;
}
header.archive-header img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.desktop-filters {
    display: none;
}
.order-by {
    margin: 0;
    min-width: unset;
    padding: 0;
    padding-right: 2rem;
    appearance: none;
    background-image: url('../icon/chevron.svg');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    width: max-content;
    font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
    .recipes-wrapper {
        grid-template-columns: 1fr 3fr;
        gap: 2rem;
    }

    .recipes-wrapper .recipe-index {
        grid-column: 2 / 3;
        padding-inline: 0;
    }

    .desktop-filters {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .recipes-wrapper nav.pagination {
        grid-column: 2 / 3;
        justify-content: end;
    }

    header.archive-header {
        height: 422px;
    }
    
}
body.single-recipe {

}

body.single-recipe article.page-body {
    display: block;
    max-width: 1080px;
    margin: 0 auto;
}

body.single-recipe .has-post-thumbnail > .wp-post-image {
    object-fit: cover;
    max-height: 422px;
    margin-bottom: 2rem;
}

body.single-recipe .post-wrapper p {
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
}

body.single-recipe .post-wrapper {
    display: grid;
    grid-template-columns: 1fr;
}

body.single-recipe .post-wrapper aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

body.single-recipe .post-wrapper aside section {
    background: #EBF4FB;
    background: #e1f1d8;
    padding: 1.5rem 1rem;
}
body.single-recipe .post-wrapper aside section.newsletter {
    background: #F1ECDF;
}

body.single-recipe .post-wrapper main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

body.single-recipe .post-wrapper main header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1rem;
}

body.single-recipe h1 {
    font-size: 3.125rem;
    font-weight: 700;
    margin: 0;
}

body.single-recipe header .post-meta {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}

body.single-recipe header .post-meta a,
.simplefavorite-button {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background: none;
    opacity: 1 !important;
    color: #000;
    padding: 0;
    height: 100%;
}

.simplefavorite-button.active rect {
    fill: #FECAC0;
}

body.single-recipe .post-wrapper main header.section-header {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: space-between;
}

body.single-recipe .post-wrapper main header.section-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}
body.single-recipe .post-wrapper main header.section-header a.view-all {
    font-size: 1rem;
    font-weight: 400;
    color: #000;
    text-decoration: none;
    display: inline-flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}
body.single-recipe .post-wrapper main header.section-header a.view-all::after {
    height: 0.875rem;
    width: 1rem;
    clip-path: polygon( 93.605% 51.852%,0% 51.852%,0% 48.148%,93.605% 48.148%,52.537% 2.619%,54.899% 0%,100% 50%,54.899% 100%,52.537% 97.381%,93.605% 51.852% );
    content: '';
    display: block;
    background: #000;
}

@media (min-width: 768px) {
    body.single-recipe .post-wrapper {
        grid-template-columns: 2fr 4fr;
        gap: 2rem;
    }
}

.dropdown-filters {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    font-size: 1.125rem;
    overflow-x: auto;
}
.dropdown-filters .filter {
    flex-shrink: 0;
}
.dropdown-filters select {
    font-weight: 700;
    line-height: normal;
    padding: 0.5rem;
    padding-right: 2rem;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    margin: 0;
    appearance: none;
    background-image: url('../icon/chevron.svg');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
}
aside.filters {
    display: none;
}
@media screen and (min-width: 768px) {
    .dropdown-filters {
        display: none;
    }
    aside.filters {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
}
aside.filters h3 {
    margin: 0;
    margin-bottom: 1rem;
}

.filter ul,
.recipe-terms {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    font-size: 1.125rem;
    margin: 0;
}
.filter ul {
    flex-direction: column;
    margin-inline: 0.5rem;
}
.filter li,
.recipe-terms li {
    line-height: normal;
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}
.filter a,
.recipe-terms a {
    background: #F1ECDF;
    background: #e1f1d8;
    color: #000;
    padding: 0.5rem;
    font-size: inherit;
    line-height: 1;
    display: block;
}
.filter a {
    width: max-content;
}
.wp-block-sail-recipes-steps {
    margin-block: 2rem;
}

.wp-block-sail-recipes-steps .steps-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.wp-block-sail-recipes-steps > ul {
    gap: 1rem;
}

.wp-block-sail-recipes-step {
    font-size: 1.5rem;
    line-height: 1.4;
}

.wp-block-sail-recipes-step * {
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}

.wp-block-sail-recipes-step input[type="checkbox"] {
    flex-basis: 1.125rem;
    height: 1.125rem;
    width: 1.125rem;
    cursor: pointer;
}

.recipe-index {
    display: grid;
    gap: 1rem;
}

.recipe-post.item {
    display: flex;
    flex-direction: row;
    background: #EBF4FB;
    background: #e1f1d8;
    background: transparent;
    color: #000;
    height: 100%;
    position: relative;
}
@media screen and (min-width: 768px) {
    .recipe-post.item {
        flex-direction: column;
    }
}
.recipe-post.item img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
    width: 8.375rem;
}
@media screen and (min-width: 768px) {
    .recipe-post.item img {
        width: 100%;
    }
}
.recipe-post.item .content {
    padding: 0.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.recipe-post.item .content h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}
.recipe-post.item .content .simplefavorite-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    align-items: normal;
}
.recipe-post.item .content .simplefavorite-button rect {
    fill: #F5DB97;
}
.recipe-post.item .content .simplefavorite-button.active rect {
    fill: #FECAC0;
}
.recipe-index .newsletter {
    grid-row: 7 / 7;
    padding: 1rem 2rem 2rem;
}

.newsletter .gform_anchor {
    display: none;
}
.ingredients {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ingredients .portions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
.ingredients .portions label {
    font-size: 1.125rem;
    line-height: normal;
    font-weight: 400;
    margin: 0;
    width: 100%;
}
.ingredients .portions button,
.ingredients .portions input[type="number"] {
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    padding: 0.5rem 0.25rem;
    border: none;
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
}
.ingredients .portions button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 2px solid #000;
    font-size: 1.4rem;
    font-weight: 600;
}
.ingredients .portions input[type="number"] {
    appearance: textfield;
    font-size: 0.875rem;
    padding: 0.5rem 0.25rem;
}

.ingredients h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.ingredients ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ingredients ul li {
    font-size: 1.125rem;
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 768px) {
    .recipe-index {
        gap: 1.5rem;
        grid-template-columns: repeat(3, 1fr);
    }

    .recipe-post.item .content {
        padding-bottom: 1.5rem;
    }

    .recipe-index .newsletter {
        grid-row: 3 / 3;
        grid-column: 1 / span 3;
        padding: 1rem 2rem 2rem;
    }
    .recipe-index .newsletter img,
    .recipe-index .newsletter svg {
        height: 6.25rem;
    }
    .recipe-index .newsletter .gform_title {
        font-size: 1.8125rem;
    }
    .recipe-index .newsletter .gform_description {
        font-size: 1.25rem !important;
    }
    .recipe-index .newsletter .gform_wrapper {
        --gf-ctrl-font-size: 1.125rem;
    }
    .recipe-index .newsletter .gform_footer [type="submit"] {
        font-size: 1.125rem !important;
    }
}
.newsletter {
    background: #F1ECDF;
    text-align: center;
    padding: 3rem 1.5rem;
}

.newsletter img,
.newsletter svg {
    max-width: 100%;
    height: 5.125rem;
}

.newsletter .gform_wrapper,
.newsletter .gform_heading,
.newsletter form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* .newsletter .gform_wrapper {
    max-width: 42rem;
    margin-inline: auto;
} */

.gform_heading .gform_required_legend {
    display: none;
}

.newsletter .gform_title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.newsletter .gform_description {
    font-size: 1rem !important;
    margin: 0 !important;
    white-space: break-spaces;
}
.newsletter .gform_wrapper {
    --gf-ctrl-radius: 0;
    --gf-ctrl-border: 0;
    --gf-ctrl-padding: 0;
    --gf-ctrl-background: transparent;
    --gf-ctrl-color: #000;
    --gf-ctrl-font-size: 1rem;
    --gf-ctrl-font-weight: 400;
    --gf-ctrl-shadow: none;
    --gf-ctrl-btn-shadow: none;
    --gf-ctrl-border-color: transparent;
    --gf-ctrl-bg-color: transparent;
    --gf-form-footer-margin-y-start: 0;
}
.newsletter .gform_wrapper .gform_body {
    margin-block: 0.5rem;
}
.newsletter input[type="text"]::placeholder,
.newsletter input[type="email"]::placeholder {
    font-style: italic;
}
.newsletter input[type="email"] {
    border: 0 !important;
    border-bottom: 2px solid #000 !important;
}
.newsletter .gform_footer {
    justify-content: center;
}

.newsletter form .gform_footer [type="submit"],
.newsletter .gform_footer input[type="submit"]
.newsletter .gform_footer button[type="submit"] {
    font-family: 'Belwe Lt BT Medium' !important;
    background: transparent !important;
    color: #000 !important;
    padding: 0.5rem 1rem;
    font-size: 1rem !important;
    font-weight: 700 !important;
    appearance: none !important;
    display: flex !important;
}

.newsletter .gform_footer [type="submit"]::after {
    content: '' !important;
    display: block !important;
    background: #000;
    height: 1.5rem;
    width: 2.5rem;
    clip-path: polygon( 95.551% 51.852%,0% 51.852%,0% 48.148%,95.551% 48.148%,66.982% 2.619%,68.625% 0%,100% 50%,68.625% 100%,66.982% 97.381%,95.551% 51.852% ); 
}

.rmp-rating-widget p {
    font-size: 1rem !important;
    font-weight: 400 !important;
}
.rmp-rating-widget ul,
.rmp-rating-widget li,
.rmp-rating-widget .rmp-icon--ratings {
    font-size: 1.5rem;
    line-height: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rmp-icon--ratings {
    color: #ECC04B;
    -webkit-text-stroke: 1px #ECC04B;
}
.rmp-icon--ratings {
    color: #ECC04B;
}
.rmp-rating-widget .rmp-icon--ratings {
    color: transparent;
    -webkit-text-stroke: 1px #5CB7FF;
}
.rmp-rating-widget .rmp-icon--ratings.rmp-icon--hovered {
    color: #5CB7FF;
}
.rmp-rating-widget .rmp-icon--ratings.rmp-icon--full-highlight {
    color: #ECC04B;
    -webkit-text-stroke: 1px #ECC04B;
}

.rmp-rating-widget .rmp-icon--half-highlight {
    background: linear-gradient(90deg,#ECC04B 50%,transparent 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #ECC04B;
}

.rating {
    font-family: "Poppins", sans-serif;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    margin-block: 0.5rem;
    font-size: 0.625rem;
    line-height: 1.8;
}
body.single-recipe header .rating {
    font-size: 1rem;
}

ul.stars {
    display: flex;
    flex-direction: row;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.stars,
ul.stars li,
ul.stars li i {
    font-size: 0.875rem;
    line-height: 1;
    margin: 0;
}
body.single-recipe header ul.stars,
body.single-recipe header ul.stars li,
body.single-recipe header ul.stars li i {
    font-size: 1.25rem;
}

.rmp-icon--ratings {
    color: transparent;
    -webkit-text-stroke: 1px #ECC04B;
}
.rmp-icon--ratings.rmp-icon--full-highlight {
    color: #ECC04B;
    -webkit-text-stroke: 1px #ECC04B;
}
.rmp-icon--ratings.rmp-icon--half-highlight {
    background: linear-gradient(90deg,#ECC04B 50%,transparent 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}