@media screen and (min-width:768px) {
    .product-slider {
        grid-template-columns: 5fr 2fr;
        column-gap: 3rem
    }
}

@media screen and (max-width:767px) {
    .product-slider {
        grid-template-columns: 100%
    }
}

.product-slider {
    width: 100%;
    display: grid;
    row-gap: 4rem
}

.product-slider .button-wrapper {
    grid-column: 1 / -1
}

.product-slider .product-slider__text-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.product-slider__heading {
    color: #fff;
    text-transform: uppercase
}

.product-slider .product-slider__text-container .text {
    color: #F1EBE0
}

.product-slider__product-slider-control-buttons {
    display: flex;
    gap: 1rem;
    color: var(--brand-color);
    margin-top: auto;
    margin-left: auto
}

.product-slider__link {
    color: #fff;
    text-transform: uppercase;
    width: max-content;
    max-width: 100%;
    margin-top: auto;
    margin-left: auto;
    text-decoration: underline
}

.product-slider__product-slider-control-buttons .product-slider-control-button {
    width: 3.125rem;
    height: 3.125rem;
    object-fit: contain;
    object-position: center;
    cursor: pointer
}

.product-slider__product-slider-control-buttons .product-slider-control-button.swiper-button-disabled {
    opacity: .5
}

.product-slider__product-slider-container {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.product-slider__product-slider__body {
    width: 100%;
    padding: 4px;
}

.product-slider__product-slider__body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.product-slider__product-slider__body .swiper-slide {
    border: 2px solid var(--special-color);
    width: 100%;
    aspect-ratio: 98 / 137
}

.butchers-choice-product-overview__section[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.butchers-choice-product-overview__heading {
    text-transform: uppercase
}

.butchers-choice-product-overview__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5rem
}

@media screen and (min-width:768px) {
    .butchers-choice-product-overview__filter-bar {
        grid-template-columns: 1fr max-content max-content
    }

    .butchers-choice-product-overview__reset {
        grid-column: 2 / 3
    }

    .butchers-choice-product-overview__filter {
        grid-column: 3 / 4
    }

    .butchers-choice-product-overview__filter-content {
        grid-template-columns: 2fr 3fr 1fr 1fr;
        column-gap: 3rem;
        row-gap: 5rem;
        padding: 2rem
    }

    .butchers-choice-product-overview__filter--cut {
        grid-column: 1 / 3
    }

    .butchers-choice-product-overview__filter--cut-options {
        flex: 1 0 calc((100% - var(--gap) - 300px))
    }

    .butchers-choice-product-overview__filter--portion-size {
        grid-column: 2 / 5
    }

    .butchers-choice-product-overview__filter--portion-size {
        padding-left: 7.5rem
    }
}

@media screen and (max-width:767px) {
    .butchers-choice-product-overview__heading {
        margin-bottom: 1rem
    }

    .butchers-choice-product-overview__filter-bar {
        grid-template-columns: 1fr 1fr
    }

    .butchers-choice-product-overview__reset {
        justify-content: center
    }

    .butchers-choice-product-overview__filter {
        justify-content: center
    }

    .butchers-choice-product-overview__filter-content {
        grid-template-columns: 100%;
        row-gap: 2rem;
        padding: 2rem 1rem
    }

    .butchers-choice-product-overview__filter--cut-options {
        width: 100%
    }

    .butchers-choice-product-overview__filter--portion-size {
        flex-direction: column
    }
}

.butchers-choice-product-overview__filter-bar {
    width: 100%;
    display: grid;
    grid-template-rows: max-content 0fr;
    column-gap: 2.5rem;
    row-gap: 1.7rem;
    transition: grid-template-rows 120ms var(--cubic-transition)
}

.butchers-choice-product-overview__filter-bar.active {
    grid-template-rows: max-content 1fr
}

.butchers-choice-product-overview__reset {
    color: var(--color-light-grey);
    display: flex;
    gap: .5rem;
    align-items: center;
    cursor: pointer
}

.butchers-choice-product-overview__filter {
    color: #fff;
    display: flex;
    gap: .5rem;
    align-items: center;
    cursor: pointer;
    transition: color 120ms var(--cubic-transition)
}

.butchers-choice-product-overview__filter-bar.active .butchers-choice-product-overview__filter {
    color: var(--brand-color)
}

.butchers-choice-product-overview__filter svg:last-of-type {
    transition: transform 120ms var(--cubic-transition)
}

.butchers-choice-product-overview__filter-bar.active .butchers-choice-product-overview__filter svg:last-of-type {
    transform: rotate(180deg)
}

.butchers-choice-product-overview__filter-container {
    grid-column: 1 / -1;
    grid-template-rows: 2 / 3;
    width: 100%;
    overflow: hidden
}

.butchers-choice-product-overview__filter-content {
    width: 100%;
    height: 100%;
    background-color: #1A1A1A80;
    border: 1px solid var(--color-dark-line);
    display: grid;
    justify-items: flex-start;
    align-items: flex-start;
    --not-checked-color: #fff;
    --checked-color: var(--brand-color)
}

.butchers-choice-product-overview__filter-content .filter-option {
    cursor: pointer;
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap: .5rem;
    color: var(--color-light-grey);
    margin-bottom: 1rem
}

.butchers-choice-product-overview__filter-content .custom-checkbox {
    margin-top: .25rem;
    width: 1rem;
    height: 1rem
}

.butchers-choice-product-overview__filter--heading {
    width: 100%;
    text-transform: uppercase;
    font-weight: 500
}

.butchers-choice-product-overview__filter--cut {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    --gap: 3rem;
    column-gap: var(--gap);
    row-gap: 2rem
}

.butchers-choice-product-overview__filter--beef-icon-wrapper {
    width: 250px;
    height: max-content
}

.butchers-choice-product-overview__filter--beef-icon-wrapper svg {
    width: 100%;
    height: auto;
    object-fit: contain
}

.butchers-choice-product-overview__filter--beef-icon-wrapper svg path {
    transition: color 120ms var(--cubic-transition)
}

.butchers-choice-product-overview__filter--beef-icon-wrapper svg path.active {
    color: var(--brand-color)
}

.butchers-choice-product-overview__filter--cut-options {
    columns: 3 8rem
}

.butchers-choice-product-overview__filter--origin,
.butchers-choice-product-overview__filter--special {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    --gap: 3rem;
    column-gap: var(--gap);
    row-gap: 2rem
}

.custom-checkbox+p {
    transition: color 120ms var(--cubic-transition)
}

.custom-checkbox:has(input:checked)+p {
    color: var(--checked-color, var(--default-checked-color))
}

.butchers-choice-product-overview__products {
    width: 100%;
    min-height: 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    --animation-time: 500ms
}

.butchers-choice-product-overview__products .loader-wrapper {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 1;
    top: 0;
    pointer-events: none;
    animation: hide-element var(--animation-time) linear 0s 1
}

.butchers-choice-product-overview__products-grid {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.875rem;
    animation: show-element var(--animation-time) linear 0s 1
}

.butchers-choice-product-overview__products-grid>.product-preview-item {
    flex: 0 0 calc((100% - 2 * 1.875rem) / 3);
    min-width: 300px;
    aspect-ratio: 98 / 137
}

.butchers-choice-product-overview__products .loader-wrapper .loader {
    height: 8rem
}

.butchers-choice-product-overview__no-products {
    text-align: center;
    max-width: 60rem;
    padding: 2rem;
    background-color: #1A1A1A80;
    border: 1px solid var(--color-dark-line)
}

.butchers-choice-product-overview__filter--price-range {
    width: 100%;
    display: flex;
    flex-wrap: wrap
}

.butchers-choice-product-overview__filter--price-range .butchers-choice-product-overview__filter--heading {
    width: max-content;
    margin-bottom: .5rem
}

.butchers-choice-product-overview__filter--price-range .double-sided-range {
    margin-top: 2rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto
}

.butchers-choice-product-overview__filter--price-range-labels {
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    color: var(--color-grey)
}

.butchers-choice-product-overview__filter--price-range-label {
    width: 100%;
    color: var(--brand-color);
    font-weight: 500
}

.butchers-choice-product-overview__filter--portion-size {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 5rem
}

.butchers-choice-product-overview__filter--portion-size .butchers-choice-product-overview__filter--heading {
    margin-bottom: 3rem
}

.product-preview-item {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 2rem
}

.product-preview-item__image-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.product-preview-item__wishlist-icon {
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem
}

.product-preview-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 150ms cubic-bezier(.42, 0, .58, 1)
}

.product-preview-item__image-wrapper:hover .product-preview-item__image, .product-preview-item__image-wrapper:focus-within .product-preview-item__image {
    transform: scale(1.2) rotate(5deg)
}

.product-preview-item__title:hover {
    color: var(--brand-color)
}

.product-preview-item__image-gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, #0D0D0D00, #0D0D0DE5)
}

.product-preview-item__title {
    position: relative;
    z-index: 0;
    display: block;
    padding: 0 2rem;
    color: #fff;
    margin-bottom: .25rem;
    text-transform: uppercase;
    transition: color 150ms var(--cubic-transition)
}

.product-preview-item__footer {
    z-index: 0;
    padding: 0 2rem 2rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1rem
}

.product-preview-item__desc {
    position: relative;
    z-index: 0;
    padding: 0 0 1.5rem 0;
    color: #989898;
    width: 100%;
    height: 2.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.product-preview-item__variant-select {
    margin-right: auto;
    white-space: nowrap;
    color: var(--brand-color);
    display: grid;
    column-gap: 1rem;
    grid-template-columns: max-content 1fr;
    align-items: center
}

.product-preview-item__variant-price {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    text-align: right;
    opacity: 0
}

.product-preview-item__variant-price:not(.invisible) {
    opacity: 1
}

.product-preview-item__variant-select-wrapper {
    width: max-content;
    max-width: 100%;
    border: 1px solid var(--brand-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.product-preview-item__variant-select-wrapper::after {
    position: absolute;
    right: .35rem;
    content: '';
    width: .7rem;
    height: .7rem;
    -webkit-mask: url(/assets/system-files/chevron-bottom.svg) no-repeat 50% 50%;
    mask: url(/assets/system-files/chevron-bottom.svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--brand-color);
    pointer-events: none
}

.product-preview-item__variant-select select {
    width: max-content;
    max-width: 100%;
    color: var(--brand-color);
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    padding: .25rem 1.4rem .25rem .5rem;
    border: none
}

.product-preview-item__add-to-cart {
    white-space: nowrap
}

.contact-form {
    max-width: 60rem;
    width: 100%;
    display: grid
}

.contact-form__text-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem
}

.contact-form__form-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.contact-form__form {
    width: 100%;
    margin-bottom: .25rem
}

.contact-form__heading {
    text-transform: uppercase
}

.contact-form__text {
    margin-bottom: .5rem;
    color: var(--color-grey)
}

.contact-form__contact-card {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    padding: 1rem 2rem 1rem 1rem;
    border: 1px solid var(--color-dark-line);
    background-color: var(--color-dark-line-50);
    color: var(--color-light-grey);
    backdrop-filter: blur(3.5px)
}

.contact-form__contact-icon {
    width: calc(100% - 1rem);
    height: auto;
    aspect-ratio: 1 / 1;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    align-self: center;
    background-color: var(--color-dark-line);
    border-radius: 50%;
    display: grid;
    place-items: center
}

.contact-form__contact-icon svg {
    width: 50%;
    height: auto;
    object-fit: contain;
    object-position: center
}

.contact-form__successfull-sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center
}

.contact-form__successfull-sent span {
    display: grid;
    place-items: center;
    width: 3rem;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: .5rem;
    color: #fff;
    background-color: var(--brand-color);
    border-radius: 50%
}

.contact-form__successfull-sent svg {
    width: 100%;
    height: auto
}

.contact-form__form {
    display: flex;
    --column-gap: 2rem;
    column-gap: 2rem;
    row-gap: 1.5rem;
    border: 1px solid var(--color-dark-line);
    background: rgba(26, 26, 26, .5);
    color: var(--color-grey)
}

.contact-form__form>*:not(.button-wrapper) {
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.contact-form__form label {
    padding-left: 1rem;
    padding-right: 1rem
}

.contact-form__form :is(input, textarea) {
    border: 1px solid var(--color-grey);
    padding: 1rem;
    background-color: transparent;
    resize: none;
    font-family: inherit;
    color: inherit
}

.contact-form__form :is(input, textarea)::placeholder {
    color: var(--color-form-grey);
    font-size: 1rem;
    line-height: 147.2%
}

.contact-form__form :is(input, textarea):focus-visible {
    outline: 2px solid var(--brand-color)
}

@media screen and (min-width:768px) {
    .contact-form {
        grid-template-columns: 1fr 2fr;
        column-gap: 6rem;
        row-gap: 3rem
    }

    .contact-form__form {
        flex-wrap: wrap;
        align-items: center;
        padding: 2.5rem 2rem
    }

    .contact-form__form>*:not(.full-width, .button-wrapper) {
        flex: 1 0 calc((100% - var(--column-gap)) / 2)
    }

    .contact-form__form>*.full-width {
        width: 100%
    }
}

@media screen and (max-width:767px) {
    .contact-form {
        grid-template-columns: 100%;
        row-gap: 2rem
    }

    .contact-form__form {
        flex-direction: column;
        padding: 2rem 1rem
    }

    .contact-form__form>* {
        width: 100%
    }
}

.recipes__section[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.recipes {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.recipes__heading {
    text-transform: uppercase
}

.recipes__text {
    color: var(--color-creme)
}

.recipes__container {
    margin-top: 1rem;
    --column-gap: 2rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--column-gap);
    row-gap: 1.5rem
}

@media screen and (min-width:768px) {
    .recipes__container .recipe-preview-item {
        align-self: stretch;
        flex: 0 0 calc((100% - 2 * var(--column-gap)) / 3);
        min-width: 300px;
        height: auto;
        width: unset
    }
}

@media screen and (max-width:767px) {
    .recipes__container .recipe-preview-item {
        width: 100%
    }
}

.recipe-preview-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-rows: max-content 1fr;
    border: 1px solid var(--color-dark-line)
}

.recipe-preview-item__image-wrapper {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative
}

.recipe-preview-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 150ms cubic-bezier(.42, 0, .58, 1)
}

.recipe-preview-item__image-wrapper:hover .recipe-preview-item__image {
    transform: scale(1.2) rotate(5deg)
}

.recipe-preview-item__tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: #fff;
    background-color: var(--color-black);
    padding: .5rem 1rem;
    border-radius: 4px
}

.recipe-preview-item__title:hover {
    color: var(--brand-color)
}

.recipe-preview-item__image-gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, #0D0D0D00, #0D0D0DE5)
}

.recipe-preview-item__footer {
    position: relative;
    z-index: 0;
    padding: 1.5rem 1rem 2rem 1rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2.188rem;
    grid-template-rows: 1fr max-content;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
    row-gap: 2rem;
    background-color: #1A1A1A80
}

.recipe-preview-item__title {
    grid-column: 1 / -1;
    height: 100%;
    display: block;
    color: #fff;
    text-transform: uppercase;
    transition: color 150ms var(--cubic-transition)
}

.recipe-preview-item__to-recipe {
    width: max-content;
    max-width: 100%;
    color: #fff;
    text-decoration: underline;
    transition: color 150ms var(--cubic-transition)
}

.recipe-preview-item__to-recipe:hover {
    color: var(--brand-color)
}

.wishlist__section[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.wishlist {
    display: flex;
    flex-direction: column;
    gap: 3rem
}

.wishlist-container__no-favorites {
    grid-column: 1 / -1;
    width: 100% !important;
    height: 50vh !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    text-transform: uppercase;
    font-weight: 500
}

.wishlist-container__no-favorites svg {
    width: 8rem;
    height: auto
}

.wishlist-container__no-favorites a {
    transition: color 120ms var(--cubic-transition)
}

.wishlist-container__no-favorites a:hover {
    color: var(--brand-color)
}

.wishlist__heading {
    text-transform: uppercase
}

.wishlist-container {
    width: 100%;
    display: flex;
    flex-direction: column
}

.wishlist-tabs {
    width: 100%;
    display: flex;
    border-bottom: 1px solid var(--color-grey-medium);
    margin-bottom: 2rem
}

.wishlist-tabs>* {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.wishlist-tabs>*.active {
    background-color: var(--brand-color);
    font-weight: 600
}

.wishlist-content {
    --column-gap: 2rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, calc((100% - 2 * var(--column-gap)) / 3)));
    column-gap: var(--column-gap);
    row-gap: 1.5rem
}

.wishlist-content:not(.active) {
    display: none
}

#wishlist-products.wishlist-content>*:not(.wishlist-number) {
    aspect-ratio: 3 / 4
}

.wishlist-content>* {
    width: 100%;
    height: auto
}

.wishlist-number {
    grid-column: 1 / -1;
    color: var(--color-grey-medium)
}

.faqs__section[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.faqs {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%
}

.faqs__heading {
    grid-column: 1 / -1;
    color: #fff;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    text-transform: uppercase
}

.faqs__section .faqs-wrapper {
    width: 100%
}

.faqs__section .faqs-block {
    width: 100%;
    border-bottom: 1px solid var(--color-grey-dark)
}

.faqs__section .faqs-text-wrapper {
    transition: all 300ms ease;
    overflow: hidden;
    padding-right: 5rem;
    padding-left: .5rem;
    display: grid;
    grid-template-rows: 0fr
}

.faqs__section .faqs-heading.active+.faqs-text-wrapper {
    padding-bottom: 2rem;
    grid-template-rows: 1fr
}

.faqs__section .faqs-text {
    overflow: hidden;
    color: var(--color-grey)
}

.faqs__section .faqs-heading svg {
    width: 1.313rem;
    height: auto;
    color: var(--color-grey);
    transition: transform 150ms cubic-bezier(.42, 0, .58, 1)
}

.faqs__section .faqs-heading.active svg {
    transform: rotate(180deg)
}

.faqs__section .faqs-heading {
    width: 100%;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 1.313rem;
    align-items: center;
    text-align: left;
    column-gap: 1rem;
    padding: 1rem .5rem;
    color: #fff;
    position: relative
}

.faqs__section .faqs-heading h5 {
    font-weight: 500
}

.hero__section {
    position: relative
}

.hero__section[style] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.hero {
    padding-top: 2rem;
    padding-bottom: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff
}

.hero__heading {
    text-transform: uppercase
}

.hero__content-overlay {
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.hero__text-wrapper {
    width: 100%;
    display: flex;
    gap: 1rem
}

.hero__text-wrapper hr {
    width: 3rem;
    height: 0;
    border: 1.5px solid #fff;
    margin: 1rem 0 0 0
}

.hero__text-wrapper hr+.hero__text {
    text-transform: uppercase
}

@media screen and (min-width:768px) {
    .hero.full-height {
        height: 100vh
    }

    .hero.medium-height {
        height: 70vh
    }
}

@media screen and (max-width:767px) {
    .hero {
        gap: 1rem
    }

    .hero.full-height {
        min-height: 100vh
    }

    .hero.medium-height {
        min-height: 70vh
    }
}

.image-banner__section {
    position: relative;
    overflow: hidden
}

.image-banner__section[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.image-banner__section[data-bg].parallax {
    background-attachment: fixed
}

.image-banner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.image-banner .image-banner__text-overlay {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.image-banner .image-banner__text-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 9rem;
    margin-bottom: 9rem;
}

.image-banner__section.content-alignment-left .image-banner__text-container {
    align-items: flex-start;
    text-align: left
}

.image-banner__section.content-alignment-center .image-banner__text-container {
    align-items: center;
    text-align: center
}

.image-banner__section.content-alignment-right .image-banner__text-container {
    align-items: flex-end;
    text-align: right
}

.image-banner .image-banner__text-container .preheading {
    color: var(--color-creme);
    text-transform: uppercase;
    pointer-events: all;
}

.image-banner .image-banner__text-container .heading {
    color: #fff;
    text-transform: uppercase;
    pointer-events: all;
}

.image-banner .image-banner__text-container .text {
    color: var(--color-light-grey);
    pointer-events: all;
}

.image-banner .image-banner__text-container .button-wrapper {
    pointer-events: all;
}

.image-banner .image-banner__background-video {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: grid;
    place-items: center
}

.image-banner .image-banner__background-video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-banner__image-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #00000000, #0000007D, #0000007D, #0000007D, #00000000);
    pointer-events: none;
}

.image-text {
    width: 100%;
    display: grid;
    gap: 1rem
}

.image-text__image-container {
    width: 100%;
    position: relative
}

.image-text__image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    inset: 0;
}

.image-text__text-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: #fff;
    background-color: #1A1A1A80;
    border: 1px solid #272727
}

.image-text__text-heading {
    text-transform: uppercase
}

.image-text__text {
    color: var(--color-grey)
}

.image-text__text-container .button-text {
    text-transform: uppercase
}

.image-text .button-text {
    font-size: inherit;
    line-height: inherit
}

@media screen and (min-width:768px) {
    .image-text {
        grid-template-columns: var(--grid-layout)
    }

    .image-text__text-container {
        padding: 4rem 2rem
    }

    .image-text__image-container {
        height: 100%
    }

    .image-text.image-left .image-text__image-container {
        order: 1
    }

    .image-text.image-left .image-text__text-container {
        order: 2
    }

    .image-text.image-right .image-text__image-container {
        order: 2
    }

    .image-text.image-right .image-text__text-container {
        order: 1
    }
}

@media screen and (max-width:767px) {
    .image-text {
        grid-template-columns: 100%
    }

    .image-text__text-container {
        order: 1;
        padding: 3rem 1rem
    }

    .image-text__image-container {
        order: 2;
        height: auto;
        aspect-ratio: 4 / 3
    }
}

.linking-cards {
    width: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.linking-cards__heading {
    justify-content: center;
    text-transform: uppercase
}

.linking-cards__text {
    text-align: center
}

.linking-cards__card-wrapper {
    --gap: 1rem;
    width: 100%;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.linking-cards__card-row {
    display: flex;
    gap: 1rem
}

.linking-cards__card {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 1.5rem;
    overflow: hidden
}

a.linking-cards__card:hover .linking-cards__card__bg-image {
    transform: scale(1.2) rotate(5deg)
}

a.linking-cards__card:hover .linking-cards__card__title {
    color: var(--brand-color)
}

.linking-cards__card__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 150ms cubic-bezier(.42, 0, .58, 1)
}

.linking-cards__card__bg-gradient {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #0D0D0D00, #0D0D0DE5)
}

.linking-cards__card__title {
    width: 100%;
    position: relative;
    color: #fff;
    text-transform: uppercase;
    transition: color 150ms cubic-bezier(.42, 0, .58, 1)
}

@media screen and (min-width:768px) {
    .linking-cards__card {
        height: 20rem
    }
}

@media screen and (max-width:767px) {
    .linking-cards__card-row {
        flex-direction: column
    }

    .linking-cards__card {
        height: auto;
        aspect-ratio: 4 / 3
    }
}

@media screen and (min-width:768px) {
    .location-cards__container .location-cards__card {
        flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
        min-width: 350px
    }
}

@media screen and (max-width:767px) {
    .location-cards__container .location-cards__card {
        width: 100%
    }
}

.location-cards__section[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.location-cards {
    width: 100%;
    display: flex;
    flex-direction: column
}

.location-cards__container {
    --gap: 1.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--gap)
}

.location-cards__container .location-cards__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem
}

.location-cards__heading {
    grid-column: 1 / -1;
    width: 100%;
    text-transform: uppercase;
    color: #fff
}

.location-card__text {
    grid-column: 1 / -1;
    width: 100%;
    color: var(--color-creme);
    margin-bottom: 2rem
}

.location-cards__card {
    background: #1A1A1A80;
    border: 1px solid #272727;
    padding: 2rem
}

.location-cards__card-title {
    color: #fff;
    text-transform: uppercase
}

.location-cards__card-phone {
    color: var(--brand-color)
}

.location-cards__card-phone:hover {
    text-decoration: underline
}

.location-cards__card-email {
    color: var(--color-grey)
}

.location-cards__card-email:hover {
    text-decoration: underline
}

.location-cards__card-address {
    color: #fff;
    font-weight: 600
}

.producer__section[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.producer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.producer__heading {
    text-transform: uppercase
}

.producer__container {
    width: 100%;
    display: flex;
    flex-direction: column
}

.producer__tabs {
    width: 100%;
    display: flex;
    gap: 1rem;
    text-align: center
}

.producer__tabs>* {
    width: 100%;
    background: var(--color-dark-line);
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.producer__tabs>*.active {
    border-top: 1px solid var(--color-dark-line);
    border-right: 1px solid var(--color-dark-line);
    border-left: 1px solid var(--color-dark-line);
    background: rgba(26, 26, 26, .5);
    backdrop-filter: blur(3.5px)
}

.producer__tabs>*:not(.active) {
    cursor: pointer;
    transition: color 120ms var(--cubic-transition)
}

.producer__tabs>*:not(.active):hover {
    color: var(--brand-color)
}

.producer-content {
    display: none;
    width: 100%;
    border: 1px solid #272727;
    background: rgba(26, 26, 26, .5)
}

.producer-content.active {
    display: grid;
    column-gap: 2.5rem;
    row-gap: 1rem;
    align-items: center
}

.producer-content a {
    display: block
}

.producer-content .producer-logo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center
}

.producer-content .producer-origin {
    color: var(--color-creme)
}

.producer-content .producer-name {
    color: var(--brand-color);
    text-transform: uppercase;
    font-weight: 600
}

.producer-content .producer-desc {
    margin-top: 2rem;
    color: var(--color-light-grey)
}

@media screen and (min-width:768px) {
    .producer__tabs>* {
        padding: 1.5rem 2rem
    }

    .producer-content.active {
        grid-template-columns: 15.625rem 1fr;
        grid-template-rows: max-content max-content max-content max-content;
        padding: 6rem
    }

    .producer-content .producer-logo {
        grid-column: 1 / 2;
        grid-row: 1 / 4
    }

    .producer-content .producer-origin {
        grid-column: 2 / 3;
        grid-row: 1 / 2
    }

    .producer-content .producer-name {
        grid-column: 2 / 3;
        grid-row: 2 / 3
    }

    .producer-content .producer-website {
        grid-column: 2 / 3;
        grid-row: 3 / 4
    }

    .producer-content .producer-desc {
        grid-column: 1 / -1
    }
}

@media screen and (max-width:767px) {
    .producer__tabs>* {
        padding: .75rem 1rem
    }

    .producer-content.active {
        grid-template-columns: 100%;
        padding: 2rem 1rem
    }

    .producer-content .producer-website {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
    }
}

.product-overview__section[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.product-overview {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5rem
}

.product-overview__heading {
    text-transform: uppercase
}

.product-overview__products {
    width: 100%;
    min-height: 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

.product-overview__products-grid {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.875rem
}

.product-overview__products-grid>.product-preview-item {
    flex: 0 0 calc((100% - 2 * 1.875rem) / 3);
    min-width: 300px;
    aspect-ratio: 98 / 137
}

.product-overview__no-products {
    text-align: center;
    max-width: 60rem;
    padding: 2rem;
    background-color: #1A1A1A80;
    border: 1px solid var(--color-dark-line)
}

.recipe-list__section[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.recipe-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    color: #fff
}

.recipe-list__bg-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.recipe-list__heading {
    justify-content: center;
    text-transform: uppercase
}

.recipe-list__text {
    text-align: center;
    color: var(--color-creme)
}

.recipe-list__product-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.875rem
}

.recipe-list .button-text {
    text-transform: uppercase
}

@media screen and (min-width:768px) {
    .recipe-list__product-wrapper>* {
        flex: 0 0 calc((100% - 2 * 1.875rem) / 3);
        min-width: 300px;
        aspect-ratio: 49 / 60
    }
}

@media screen and (max-width:767px) {
    .recipe-list__product-wrapper>* {
        width: 100%
    }
}

@media screen and (min-width:768px) {
    .recipe-slider {
        grid-template-columns: 1fr 2fr
    }

    .recipe-slider__recipe-slider-container {
        grid-column: 2 / -1
    }

    .recipe-slider .recipe-slider__text-container {
        grid-template-columns: 1fr 1fr
    }

    .recipe-slider__recipe-slider-control-buttons {
        grid-column: 2 / -1
    }
}

@media screen and (max-width:767px) {
    .recipe-slider {
        grid-template-columns: 100%;
        grid-auto-rows: max-content
    }

    .recipe-slider .recipe-slider__text-container {
        grid-template-columns: 100%
    }
}

.recipe-slider__section[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.recipe-slider {
    width: 100%;
    display: grid;
    grid-auto-rows: 1fr;
    row-gap: 4rem;
    column-gap: 4rem
}

.recipe-slider .recipe-slider__text-container {
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
    height: max-content;
    display: grid;
    gap: 1.5rem
}

.recipe-slider .recipe-slider__text-container .recipe-slider__heading {
    grid-column: 1 / -1;
    text-transform: uppercase;
    color: #fff
}

.recipe-slider .recipe-slider__text-container .text {
    grid-column: 1 / -1;
    color: var(--color-creme)
}

.recipe-slider__text-container .button {
    margin-top: auto;
    margin-bottom: auto
}

.recipe-slider__recipe-slider-control-buttons {
    margin-left: auto;
    display: flex;
    gap: 1rem;
    color: var(--color-creme)
}

.recipe-slider__recipe-slider-control-buttons .recipe-slider-control-button {
    width: 3.125rem;
    height: 3.125rem;
    object-fit: contain;
    object-position: center;
    cursor: pointer
}

.recipe-slider__recipe-slider-control-buttons .recipe-slider-control-button.swiper-button-disabled {
    opacity: .5
}

.recipe-slider__recipe-slider-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.recipe-slider__recipe-slider__body {
    width: 100%
}

.recipe-slider__recipe-slider__body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.recipe-slider__recipe-slider__body .swiper-slide {
    border: 2px solid var(--special-color);
    width: 100%;
    height: auto
}

.simple-hero {
    width: 100%;
    height: 70vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff
}

.simple-hero__heading {
    text-transform: uppercase
}

.simple-hero__content-overlay {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.simple-hero__text-wrapper {
    width: 100%;
    display: flex;
    gap: 1rem
}

.simple-hero__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

@media screen and (min-width:768px) {
    .small-product-slider {
        grid-template-columns: 1fr 2fr
    }

    .small-product-slider {
        grid-auto-rows: 1fr
    }

    .small-product-slider__small-product-slider-container {
        grid-column: 2 / -1
    }
}

@media screen and (max-width:767px) {
    .small-product-slider {
        grid-template-columns: 100%
    }
}

.small-product-slider__section {
    position: relative
}

.small-product-slider__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1
}

.small-product-slider {
    width: 100%;
    display: grid;
    row-gap: 4rem;
    column-gap: 4rem
}

.small-product-slider .small-product-slider__text-container {
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
    height: max-content;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
}

.small-product-slider .small-product-slider__text-container .small-product-slider__heading {
    grid-column: 1 / -1;
    color: #fff;
    text-transform: uppercase
}

.small-product-slider .small-product-slider__text-container .text {
    grid-column: 1 / -1;
    color: var(--color-creme)
}

.small-product-slider__text-container .button {
    margin-top: auto;
    margin-bottom: auto
}

.small-product-slider__small-product-slider-control-buttons {
    grid-column: 2 / -1;
    margin-left: auto;
    display: flex;
    gap: 1rem;
    color: var(--color-creme)
}

.small-product-slider__small-product-slider-control-buttons .small-product-slider-control-button {
    width: 3.125rem;
    height: 3.125rem;
    object-fit: contain;
    object-position: center;
    cursor: pointer
}

.small-product-slider__small-product-slider-control-buttons .small-product-slider-control-button.swiper-button-disabled {
    opacity: .5
}

.small-product-slider__small-product-slider-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.small-product-slider__small-product-slider__body {
    width: 100%
}

.small-product-slider__small-product-slider__body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.small-product-slider__small-product-slider__body .swiper-slide {
    border: 2px solid var(--special-color);
    width: 100%;
    height: auto;
    aspect-ratio: 98 / 137
}

.steps {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: #fff
}

.steps__steps-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.step__step {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.step__step-text {
    color: var(--color-light-grey)
}

.text__section[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.text {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center
}

.text__bg-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.text.alignment-left {
    align-items: flex-start
}

.text.alignment-center {
    align-items: center
}

.text.alignment-right {
    align-items: flex-end
}

.text.alignment-left .text__heading {
    justify-content: flex-start
}

.text.alignment-center .text__heading {
    justify-content: center
}

.text.alignment-right .text__heading {
    justify-content: flex-end
}

.text__heading {
    color: #fff;
    text-transform: uppercase
}

.text__heading svg {
    margin-top: -.5rem;
    width: 1.5rem;
    height: auto
}

.text.alignment-left .text__text {
    text-align: left
}

.text.alignment-center .text__text {
    text-align: center
}

.text.alignment-right .text__text {
    text-align: right
}

.text__text {
    color: var(--color-light-grey);
    display: flex;
    flex-direction: column;
    gap: 1.3rem
}

.two-columns-igt {
    width: 100%;
    display: grid;
    color: #fff;
    column-gap: 5vw;
    row-gap: 2rem
}

.two-columns-igt__image-gallery-container {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(9, 1fr);
    gap: 1rem
}

.two-columns-igt__image-wrapper {
    width: 100%;
    height: 100%;
    position: relative
}

.two-columns-igt__image-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.two-columns-igt__image-wrapper:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 5
}

.two-columns-igt__image-wrapper:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 5 / -1
}

.two-columns-igt__image-wrapper:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 1 / 3
}

.two-columns-igt__image-wrapper:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 3 / 8
}

.two-columns-igt__image-wrapper:nth-child(5) {
    grid-column: 2 / 3;
    grid-row: 8 / -1
}

.two-columns-igt__image-wrapper:nth-child(6) {
    grid-column: 3 / 4;
    grid-row: 1 / 4
}

.two-columns-igt__image-wrapper:nth-child(7) {
    grid-column: 3 / 4;
    grid-row: 4 / 7
}

.two-columns-igt__image-wrapper:nth-child(8) {
    grid-column: 3 / 4;
    grid-row: 7 / -1
}

.two-columns-igt__text-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem
}

.two-columns-igt__text {
    color: var(--color-light-grey);
    display: flex;
    flex-direction: column;
    gap: 1.656rem
}

@media screen and (min-width:768px) {
    .two-columns-igt {
        grid-template-columns: 1fr 1fr
    }
}

@media screen and (max-width:767px) {
    .two-columns-igt {
        grid-template-columns: 100%
    }
}

.two-columns-tt {
    width: 100%;
    display: grid;
    color: #fff;
    column-gap: 5vw;
    row-gap: 2rem
}

.two-columns-tt__text-1,
.two-columns-tt__text-2 {
    color: var(--color-light-grey);
    display: flex;
    flex-direction: column;
    gap: 1.656rem
}

@media screen and (min-width:768px) {
    .two-columns-tt {
        grid-template-columns: 1fr 1fr
    }
}

@media screen and (max-width:767px) {
    .two-columns-tt {
        grid-template-columns: 100%
    }

    .two-columns-tt__heading-t-1 {
        order: 1
    }

    .two-columns-tt__text-1 {
        order: 2
    }

    .two-columns-tt__heading-t-2 {
        order: 3
    }

    .two-columns-tt__text-2 {
        order: 4
    }
}

.usp-cards__section[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.usp-cards {
    --gap: 1.5rem;
    width: 100%;
    display: grid;
    gap: var(--gap)
}

.usp-cards>* {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.usps-cards__heading-card {
    padding: 2rem 2rem 2rem 0;
    justify-content: center
}

.usp-cards__heading {
    text-transform: uppercase
}

.usp-cards__card {
    background: #1A1A1A;
    border: 1px solid #272727
}

.usp-cards__card-image-wrapper {
    margin: 1rem 0;
    max-width: 150px;
    width: 100%;
    height: auto;
    aspect-ratio: 25 / 16
}

.usp-cards__card-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center
}

.usp-cards__card-title {
    color: #fff;
    text-transform: uppercase
}

.usp-cards__card-text {
    color: #989898
}

.usp-cards__heading {
    color: #fff
}

.ups-cards__text {
    color: #EBEBEB
}

@media screen and (min-width:768px) {
    .usp-cards {
        grid-template-columns: repeat(auto-fit, minmax(400px, calc((100% - 2 * var(--gap)) / 3)))
    }

    .usp-cards__card {
        padding: 2rem
    }
}

@media screen and (max-width:767px) {
    .usp-cards {
        grid-template-columns: 100%
    }

    .usp-cards__card {
        padding: 1rem
    }
}

.recipe-popup {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgb(0, 0, 0, .5);
    display: grid;
    place-items: center;
    transition: opacity 120ms var(--cubic-transition);
    pointer-events: none;
    opacity: 0
}

.recipe-popup.opened {
    pointer-events: all;
    opacity: 1
}

.recipe-popup__content {
    max-width: calc(100vw - 4rem);
    min-width: min(50rem, calc(100vw - 4rem));
    width: max-content;
    height: max-content;
    max-height: 80vh;
    background-color: var(--color-creme);
    padding: 3rem;
    color: var(--color-bg-black);
    position: relative
}

.recipe-popup__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-grey-medium);
    cursor: pointer
}

.recipe-popup__close svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center
}

.recipe-popup__content__heading {
    text-transform: uppercase
}

.recipe-popup__content__additional-ingredients {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.recipe-popup__content__additional-ingredients__heading {
    font-weight: 500
}

.recipe-popup__content__additional-ingredients-list {
    list-style-type: none;
    list-style-position: inside
}

.recipe-popup__content__additional-ingredients-list li {
    margin-top: .25rem
}

.recipe-popup__content__products {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-grey-medium)
}

@media screen and (min-width:768px) {
    .recipe-popup__content__product {
        grid-template-columns: 3% 40% 25% 15% 15%
    }
}

@media screen and (max-width:767px) {
    .recipe-popup__content__product {
        grid-template-columns: max-content max-content 1fr;
        row-gap: .5rem
    }

    .recipe-popup__content__product:not(:first-child) {
        padding-top: 1rem;
        border-top: 1px solid var(--color-grey-medium)
    }

    .recipe-popup__content__product .custom-checkbox {
        order: 1;
        grid-column: 1 / 2
    }

    .recipe-popup__content__product-title {
        order: 2;
        grid-column: 2 / 4
    }

    .recipe-popup__content__product-variant {
        order: 3;
        grid-column: 1 / 3
    }

    .recipe-popup__content__product-qty-wrapper {
        order: 4;
        grid-column: 3 / 4
    }

    .recipe-popup__content__product-price {
        order: 5;
        grid-column: 1 / -1
    }
}

.recipe-popup__content__product {
    width: 100%;
    display: grid;
    column-gap: 1rem;
    justify-items: start;
    align-items: center
}

.recipe-popup__content__product-title {
    transition: color 120ms var(--cubic-transition)
}

.custom-checkbox:has(input:checked)+.recipe-popup__content__product-title {
    color: var(--brand-color)
}

.recipe-popup__content__product-variant {
    width: max-content;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--color-bg-black)
}

.recipe-popup__content__product-variant::after {
    position: absolute;
    right: .35rem;
    content: '';
    width: .7rem;
    height: .7rem;
    -webkit-mask: url(/assets/system-files/chevron-bottom.svg) no-repeat 50% 50%;
    mask: url(/assets/system-files/chevron-bottom.svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--color-bg-black);
    pointer-events: none
}

.recipe-popup__content__product-variant select {
    width: max-content;
    max-width: 100%;
    color: var(--color-bg-black);
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    padding: .5rem 1.4rem .5rem .5rem;
    border: none
}

.recipe-popup__content__product-variant select:focus-visible {
    outline: none
}

.recipe-popup__content__product-qty-wrapper {
    width: 100%;
    height: 1.75rem;
    display: flex;
    align-items: center;
    gap: .25rem
}

.recipe-popup__content__product-qty {
    width: 1.5rem;
    max-width: 100%;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    background-color: unset;
    border: none;
    text-align: center
}

.recipe-popup__content__product-qty-minus,
.recipe-popup__content__product-qty-plus {
    cursor: pointer;
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-bg-black)
}

.recipe-popup__content__product-qty-wrapper svg {
    width: 50%;
    height: 50%;
    object-fit: contain;
    object-position: center
}

@media screen and (min-width:768px) {
    .recipe-popup__content__footer {
        justify-content: flex-end;
        gap: 2rem
    }
}

@media screen and (max-width:767px) {
    .recipe-popup__content__footer {
        flex-direction: column;
        gap: 1rem
    }

    .recipe-popup__content__footer>* {
        width: 100%
    }
}

.recipe-popup__content__footer {
    margin-top: 2rem;
    width: 100%;
    display: flex
}

.recipe-popup__content__footer input {
    border: none
}

@media screen and (min-width:768px) {
    #search__container-content {
        grid-template-columns: 1fr 1.6rem;
        gap: 1.5rem
    }

    #search-input-wrapper {
        height: 3rem;
        padding: .5rem 2.6rem .5rem 1rem;
        grid-template-columns: 1.5rem 1fr
    }

    #reset-search-input {
        right: .5rem;
        width: 1.6rem;
        height: 1.6rem;
        padding: .35rem
    }

    #search-string {
        font-size: 1.2rem
    }

    #search-result-container {
        width: calc(100% - 3.1rem - 2rem)
    }
}

@media screen and (max-width:767px) {
    #search__container-content {
        grid-template-columns: 1fr 1rem;
        gap: 1rem
    }

    #search-input-wrapper {
        height: 2.5rem;
        padding: .25rem 2rem .25rem .5rem;
        grid-template-columns: 1rem 1fr
    }

    #search-string {
        font-size: .9rem
    }

    #reset-search-input {
        right: .3rem;
        width: 1.4rem;
        height: 1.4rem;
        padding: .35rem
    }

    #search-result-container {
        width: calc(100% - 2rem - 2rem + 2px)
    }
}

#search__placeholder {
    display: flex;
    align-items: center;
    gap: .58rem
}

#search__placeholder-icon {
    display: block;
    width: max-content;
    height: .945rem
}

#search__placeholder-icon svg {
    object-fit: contain;
    object-position: center
}

#search__background {
    pointer-events: none;
    opacity: 0;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(255, 255, 255, .3);
    transition: opacity 120ms var(--cubic-transition);
    z-index: 1
}

#header-searchbar.active #search__background {
    pointer-events: all;
    opacity: 1
}

#search__container {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--info-bar-bg-color);
    transition: opacity 120ms var(--cubic-transition);
    z-index: 1
}

#header-searchbar.active #search__container {
    pointer-events: all;
    opacity: 1
}

#search__container-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 50rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    align-items: center
}

#search-input-wrapper {
    width: 100%;
    display: grid;
    align-items: center;
    gap: 1rem;
    border: 2px solid var(--color-grey);
    position: relative
}

#search-input-wrapper:has(input:focus-visible) {
    border-color: var(--brand-color)
}

#search-input-wrapper__icon {
    flex-shrink: 0;
    display: block;
    width: 100%;
    height: auto
}

#search-input-wrapper__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center
}

#search-input-wrapper #search-string {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    color: #fff
}

#search-input-wrapper #search-string:focus-visible {
    outline: none;
    border-radius: 0
}

#reset-search-input {
    display: none
}

#search-string:not(:placeholder-shown)+#reset-search-input {
    display: block
}

#reset-search-input {
    position: absolute;
    cursor: pointer;
    border-radius: 50%;
    background-color: #000;
    color: #fff
}

#reset-search-input svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center
}

#close-search-bar {
    width: 100%;
    height: max-content;
    display: flex;
    align-items: center
}

#close-search-bar svg {
    cursor: pointer;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center
}

#search-result-container {
    position: absolute;
    top: 100%;
    left: 1rem;
    max-height: calc(90vh - 100%);
    overflow-y: scroll;
    background-color: var(--info-bar-bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1)
}

#search-result-container .no-results {
    padding: 1rem;
    width: 100%;
    text-align: left
}

#search-result-container .search-result-container__heading {
    position: sticky;
    top: 0;
    width: 100%;
    padding: .5rem 1rem .1rem 1rem;
    color: var(--color-grey);
    background-color: var(--info-bar-bg-color)
}

#search-result-container .search-result-container__heading span {
    display: block;
    border-bottom: 1px solid var(--color-grey)
}

#search-result-container .search-result-container__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .5rem 1rem;
    transition: background-color 80ms var(--cubic-transition)
}

#search-result-container .search-result-container__item:hover {
    background-color: rgb(255, 255, 255, .1)
}

#search-result-container .search-result-container__item-image {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    object-position: center
}

#search-result-container .search-result-container__item-title {
    transition: color 80ms var(--cubic-transition)
}

#search-result-container .search-result-container__item:hover .search-result-container__item-title {
    color: var(--brand-color)
}

#side-cart-container {
    opacity: 0;
    z-index: 99;
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
    background-color: rgb(0, 0, 0, .5);
    pointer-events: none;
    --transition-time: 200ms;
    transition: opacity var(--transition-time) var(--cubic-transition)
}

#side-cart-container.active {
    opacity: 1;
    pointer-events: all
}

#side-cart {
    width: 500px;
    max-width: 100vw;
    height: 100vh;
    background-color: var(--color-black);
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%);
    transition: transform var(--transition-time) var(--cubic-transition)
}

#side-cart-content {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: max-content 1fr max-content
}

#side-cart-container.active #side-cart {
    transform: translateX(0)
}

#side-cart__head {
    width: 100%;
    height: max-content;
    padding: 1.5rem 2rem;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid var(--color-grey-line)
}

#side-cart__heading {
    width: 100%;
    color: #fff;
    text-align: center
}

#side-cart__close-cart {
    cursor: pointer;
    position: absolute;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    color: white;
    background-color: transparent;
    padding: 0;
}

#side-cart__close-cart svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

#side-cart__body {
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll
}

@media screen and (min-width: 768px) {
    #side-cart__footer {
        padding: 2rem 2rem 3rem 2rem
    }
}

@media screen and (max-width: 767px) {
    #side-cart__footer {
        padding: 2rem 2rem 8rem 2rem
    }
}

#side-cart__footer {
    border-top: 1px solid var(--color-grey-line);
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem
}

.side-cart__line-item {
    display: grid;
    grid-template-columns: 7rem 1fr 1fr 1.125rem;
    grid-template-rows: max-content max-content 1fr;
    column-gap: .75rem;
    row-gap: 1.25rem;
    color: #fff;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--color-grey-line)
}

.side-cart__line-item__image {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    padding-right: 1rem;
    width: 100%;
    height: auto
}

.side-cart__line-item__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top
}

.side-cart__line-item__product-title {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    width: 100%;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase
}

.side-cart__line-item__variant-title {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    width: 100%
}

.side-cart__line-item__variant-select-wrapper {
    width: max-content;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid #fff
}

.side-cart__line-item__variant-select-wrapper::after {
    position: absolute;
    right: .35rem;
    content: '';
    width: .7rem;
    height: .7rem;
    -webkit-mask: url(/assets/system-files/chevron-bottom.svg) no-repeat 50% 50%;
    mask: url(/assets/system-files/chevron-bottom.svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: #fff;
    pointer-events: none
}

.side-cart__line-item__variant-select-wrapper select {
    width: max-content;
    max-width: 100%;
    color: #fff;
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    padding: .25rem 1.4rem .25rem .5rem;
    border: none
}

.side-cart__line-item__variant-select-wrapper select:focus-visible {
    outline: none
}

.side-cart__line-item__price {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
    width: 100%
}

.side-cart__line-item__qty {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem
}

.side-cart__line-item__qty-field {
    width: 1.5rem;
    max-width: 100%;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    background-color: unset;
    border: none;
    text-align: center;
    color: #fff
}

.side-cart__line-item__qty-minus,
.side-cart__line-item__qty-plus {
    cursor: pointer;
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff
}

.side-cart__line-item__qty svg {
    width: 40%;
    height: 40%;
    object-fit: contain;
    object-position: center
}

.side-cart__line-item__delete {
    grid-column: 4 / 5;
    grid-row: 1 / 5;
    width: 100%;
    height: max-content;
    cursor: pointer;
    color: var(--color-grey-medium)
}

.side-cart__line-item__delete svg {
    width: 100%;
    height: auto
}

.side-cart__cart-empty {
    width: 100%;
    padding-left: 3.5rem;
    padding-right: 3.5rem;
    color: var(--brand-color);
    margin-top: 30vh;
    text-align: center
}

#side-cart__subtotal-container {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1rem;
    color: #fff
}

#side-cart__subtotal-heading {
    text-transform: uppercase;
    color: var(--color-grey-medium)
}

#side-cart__checkout-mb-info {
    padding: 1rem .5rem;
    background-color: var(--color-grey-dark);
    width: 100%;
    display: grid;
    grid-template-columns: 3rem 1fr;
    column-gap: 1rem;
    align-items: center
}

#side-cart__checkout-mb-info-icon {
    display: block;
    width: 100%;
    height: max-content
}

#side-cart__checkout-mb-info-icon svg {
    width: 100%;
    height: auto
}

#side-cart__checkout-mb-info-text {
    display: block;
    width: 100%
}