@charset "UTF-8";
/* Normalize (SASS) */
/* Базовый ресет */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent !important;
}

/* Базовые элементы */
a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    cursor: pointer;
}

img {
    max-width: 100%;
}

span, label {
    display: inline-block;
}

html {
    scroll-behavior: smooth;
}

input, textarea {
    outline: none;
    border: 0;
    background: transparent;
    font-weight: 400;
}

button, select {
    border: none;
    cursor: pointer;
    background: transparent;
    outline: 0;
    font-weight: 400;
}

address {
    font-style: normal;
}

.wrapper {
    width: 100%;
    overflow: hidden;
    min-height: 100svh;
}

    .wrapper::-webkit-scrollbar {
        display: none;
    }

ul, ol, dl {
    list-style: none;
    padding: 0;
    margin: 0;
}

p, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
    font-weight: 400;
}

/* number-спиннеры */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
}

/* =========================
 * Safe-area переменные
 * ========================= */
:root {
    --safe-left: 0px;
    --safe-right: 0px;
    --safe-top: 0px;
    --safe-bottom: 0px;
}

@supports (padding: max(0px)) {
    :root {
        --safe-left: env(safe-area-inset-left);
        --safe-right: env(safe-area-inset-right);
        --safe-top: env(safe-area-inset-top);
        --safe-bottom: env(safe-area-inset-bottom);
    }
}
/* =========================
 * Геометрия корня/тела
 * (без фонов — фон задаётся в style.sass)
 * ========================= */
html, body {
    background: transparent;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

@supports (height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}
/* =========================
 * Утилиты safe-area
 * (вешать на .header/.footer/фиксы и т.п., НЕ на body)
 * ========================= */
.with-safe-area {
    padding-left: max(0px, var(--safe-left));
    padding-right: max(0px, var(--safe-right));
    padding-top: max(0px, var(--safe-top));
    padding-bottom: max(0px, var(--safe-bottom));
}

.with-safe-area-x {
    padding-left: max(0px, var(--safe-left));
    padding-right: max(0px, var(--safe-right));
}

.with-safe-area-y {
    padding-top: max(0px, var(--safe-top));
    padding-bottom: max(0px, var(--safe-bottom));
}

@font-face {
    font-family: "Congenial";
    src: url("../font/CongenialCyrillicBETA-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Congenial";
    src: url("../font/CongenialCyrillicBETA-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lorrach BETA";
    src: url("../font/LORRACHBETA-Heavy.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
/**
 * * Конвертирует пиксели в vw относительно ширины макета 1440px
 * * 
 * * @param {number} $px - Значение в пикселях из макета (без единиц измерения)
 * * @param {number} $design-width [1440] - Ширина дизайн-макета в пикселях
 * * 
 * * @returns {vw} - Значение в vw единицах
 * * 
 * * @example
 * * // Для макета 1440px:
 * * width: toVW(720);     // → 50vw
 * * padding: toVW(72);    // → 5vw  
 * * font-size: toVW(28.8); // → 2vw
 * * 
 * * @example
 * * // Для другого макета:
 * * width: toVW(360, 1920); // → 18.75vw (для макета 1920px)
 * */
/* Это фон для декстопа - кладём на html, чтобы прокрашивал края (iOS/XS landscape) */
html {
    background: #766EAC url("../images/bg/bg-xxl.webp") repeat;
    background-size: contain;
}

body {
    font-family: "Congenial", sans-serif;
    font-weight: 500;
    color: #1A1A1A;
    background: transparent;
    /* Блокировка скролла когда меню открыто */
}

    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

.container {
    min-height: 100%;
}

    /* Опционально: линии в SVG не худеют при transform: scale() внутри сцены */
    .container svg * {
        vector-effect: non-scaling-stroke;
    }

:root {
    --scale: 1;
}

h1, h2, h3 {
    font-family: "Lorrach BETA", sans-serif;
    font-weight: 800;
}

.container {
    width: 1440px;
    margin: 0 auto;
    position: relative;
}

.logo {
    position: absolute;
    z-index: 10;
}

.logo__header {
    width: 104px;
    height: auto;
    top: 30px;
    left: 50px;
}

button {
    font-family: "Congenial", sans-serif;
    font-weight: 500;
}

.select--toggle {
    display: block;
}

.reset-absolute {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    /*** Подчёркивание пунктов меню ***/
    /* База: убираем подчёркивание у всех пунктов меню */
}

.menu__main_nav--list a,
.menu__mobile_item {
    text-decoration: none;
    /* Активный пункт (скрипт ставит aria-current="page" и .active) */
}

    .menu__main_nav--list a[aria-current=page],
    .menu__main_nav--list a.active,
    .menu__mobile_item[aria-current=page],
    .menu__mobile_item.active {
        text-decoration: underline;
    }

.menu__main_nav {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.menu__main_nav--list {
    list-style: none;
    display: flex;
    gap: 40px;
}

    .menu__main_nav--list a {
        color: #FFFFFF;
        text-decoration: none;
        font-size: 18px;
        font-weight: 500;
    }

.menu__mobile {
    /* Логотип слева сверху */
    /* Кнопка закрытия (крестик) справа сверху */
    /* Большое «облако» Milka по центру */
    /* Навигация */
}

.menu__mobile_button {
    position: relative;
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    cursor: pointer;
}

    .menu__mobile_button::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        background-color: #FFFFFF;
        width: 38.35px;
        height: 4.79px;
        border-radius: 10px;
    }

    .menu__mobile_button::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        background-color: #FFFFFF;
        width: 19.18px;
        height: 4.79px;
        border-radius: 10px;
        margin-top: 10px;
    }

.menu__mobile_wrap {
    position: fixed;
    z-index: 1001;
    background: #7D69AC;
    -webkit-overflow-scrolling: touch;
    display: none;
    opacity: 0;
    width: 100%;
    height: 100vh;
    padding-top: 52.15vw;
}

.menu__mobile--logo {
    position: absolute;
    top: 3.9vw;
    left: 6.5vw;
    width: 18.74vw;
    height: auto;
    pointer-events: none;
}

.menu__mobile_close {
    position: absolute;
    top: 0;
    right: 0;
    width: 25vw;
    height: 20vw;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #FFFFFF;
    /* размер самого SVG-крестика */
}

.menu__mobile_close-icon {
    height: 4vw;
    width: 4vw;
}

.menu__mobile--img {
    position: absolute;
    width: 80%;
    height: auto;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    z-index: -1;
}

.menu__mobile_nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
}

.menu__mobile_item {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
    font-size: 10.625vw;
    line-height: 1.1;
    letter-spacing: 0.2px;
}

    .menu__mobile_item:hover, .menu__mobile_item:active {
        opacity: 0.85;
    }

.menu__mobile--visible {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.btn {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}

    .btn.recepies__btn--weekend {
        border: none;
        justify-content: center;
    }

.btn__buy {
    position: absolute;
    z-index: 30;
}

    .btn__buy a {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #3D2F6F;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        text-decoration: none;
        font-weight: 500;
        transition: filter 0.3s ease;
        height: 80px;
        width: 540px;
        padding-left: 28px;
    }

    .btn__buy img {
        width: 45px;
        height: auto;
    }

.btn__buy--hero {
    font-size: 22px;
}

    .btn__buy--hero a {
        border-radius: 200px 0 0 200px;
        background: #FBB9FE;
        transform: rotate(5deg);
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.35) 18%, rgba(255, 255, 255, 0) 55%);
        box-shadow: 0 12px 24px rgba(56, 42, 111, 0.2), 0 3px 6px rgba(56, 42, 111, 0.53), inset 0 4px 4px rgba(207, 201, 225, 0.5), inset 0 -8px 10px rgba(59, 39, 116, 0.12);
    }

.btn__buy--recepies {
    font-size: 19px;
    transform: rotate(-3deg);
}

    .btn__buy--recepies a {
        width: 402px;
        height: 73px;
        background: #A9DAF3;
        text-align: center;
        padding-right: 30px;
        justify-content: flex-end;
    }

.background-image {
    position: absolute;
    pointer-events: none;
}

.clips {
    position: absolute;
}

.header h1 {
    font-size: 84px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
}

.header__titles {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #FFFFFF;
    z-index: 10;
    text-align: center;
    width: 600px;
}

    .header__titles p {
        text-transform: uppercase;
    }

.header__titles--hero {
    top: 103px;
}

    .header__titles--hero h1 {
        margin-bottom: -8px;
    }

    .header__titles--hero p {
        font-size: 42px;
        font-weight: 700;
    }

.header__titles--recepies {
    top: 145px;
}

    .header__titles--recepies h1 {
        font-size: 40px;
    }

    .header__titles--recepies p {
        font-size: 24px;
        font-weight: 500;
    }

.header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/bg/bg-top-strip.webp ");
    background-repeat: no-repeat;
    z-index: 1;
}

.header__bg {
    display: none;
}

.header__bg_tablet {
    position: absolute;
    object-fit: cover;
    pointer-events: none;
}

    .header__bg_tablet::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("../images/bg/bg-top-strip.webp ");
        background-repeat: no-repeat;
        z-index: 1;
    }

    .header__bg_tablet img {
        position: relative;
        height: 575px;
        object-fit: cover;
        top: -15px;
    }

.header__bg_tablet--hero img {
    height: 375px;
    top: 0;
}

.header__bg_tablet--hero::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50px;
    left: 0;
    bottom: -13px;
    background: #735F9F;
    filter: blur(10px);
    transform: matrix(-1, 0, 0, 1, 0, 0);
    z-index: 2;
}

.header__titles--hero {
    top: 100px;
}

/* ✦ Окно подсказок поиска ✦ */
.search-suggest {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 100%;
    background: #FFFFFF;
    border-radius: 16px;
    border: calc(3px / var(--scale)) solid #D0CAE2;
    box-shadow: 0 10px 24px rgba(63, 47, 114, 0.35);
    padding: 18px 20px;
    z-index: 30;
    display: none;
}

    .search-suggest[hidden] {
        display: none;
    }

.search-suggest__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-suggest__item + .search-suggest__item {
    margin-top: 10px;
}

.search-suggest__link {
    display: block;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    color: #3B2774;
    text-decoration: none;
}

    .search-suggest__link:hover, .search-suggest__link:focus-visible {
        text-decoration: underline;
    }

.hero__header {
    position: relative;
    height: 300px;
}

.hero__bg-image {
    position: absolute;
    pointer-events: none;
}

.hero__bg-image--top {
    display: none;
}

.hero__bg-header {
    width: 100%;
    max-width: 1440px;
    height: 300px;
    object-fit: cover;
    object-position: center;
}

.hero__bg--jar {
    top: 115px;
    width: 250px;
    left: 280px;
    z-index: 3;
}

.hero__bg--board {
    right: 0;
    width: 520px;
    top: 190px;
    z-index: 3;
}

.hero__bg--heart {
    top: 310px;
    left: 25px;
    width: 335px;
}

.hero__search {
    position: absolute;
    top: 315px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 15;
    width: 420px;
    align-items: center;
    /* КРЕСТИК */
}

.hero__search-field {
    position: relative;
    flex: 1 1 auto;
    /* Для Firefox */
}

    .hero__search-field input {
        width: 100%;
        padding: 12px 145px 12px 25px;
        border: none;
        border-radius: 50px;
        font-size: 16px;
        background: #FFFFFF;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        border: 3px solid #cfc9e1;
        font-weight: 500;
        font-family: "Congenial", sans-serif;
        /* Префиксы для старых браузеров*/
        /* Показ крестика, когда поле не пустое */
        /* Если инпут disabled, крестик всегда спрятан */
    }

        .hero__search-field input::placeholder {
            color: #CFC9E1;
            opacity: 1;
        }

        .hero__search-field input::-webkit-input-placeholder {
            color: #CFC9E1;
            opacity: 1;
        }

        .hero__search-field input::-moz-placeholder {
            color: #CFC9E1;
            opacity: 1;
        }

        .hero__search-field input:-ms-input-placeholder {
            color: #CFC9E1;
            opacity: 1;
        }

        .hero__search-field input::-ms-input-placeholder {
            color: #CFC9E1;
            opacity: 1;
        }

        .hero__search-field input:disabled {
            opacity: 1;
        }

            .hero__search-field input:disabled ~ .hero__search-clear {
                opacity: 0;
                pointer-events: none;
            }

        .hero__search-field input:not(:placeholder-shown) ~ .hero__search-clear {
            opacity: 1;
            pointer-events: auto;
        }

    .hero__search-field #site-search::-webkit-search-cancel-button,
    .hero__search-field #site-search::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

    .hero__search-field #site-search::-ms-clear {
        display: none;
        width: 0;
        height: 0;
    }

    .hero__search-field #site-search {
        -moz-appearance: textfield;
    }

.hero__search-clear {
    position: absolute;
    top: 50%;
    right: 110px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #766eac;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    border-radius: 50%;
    z-index: 2;
}

    .hero__search-clear:hover {
        color: #5d2d7e;
        background-color: rgba(118, 110, 172, 0.1);
    }

.hero__search_btn {
    position: absolute;
    right: 6px;
    justify-content: center;
    width: 96px;
    background: #3B2774;
    font-family: "Congenial", sans-serif;
    color: #FFFFFF;
    border: none;
    padding: 9px 0;
    border-radius: 200px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.hero__search .hero__search_btn--icon {
    margin-right: 4px;
}

.hero__filters {
    position: absolute;
    top: 0;
}

.hero__control {
    position: absolute;
    top: 600px;
    left: 100px;
}

.hero__book {
    position: relative;
    pointer-events: none;
    /* Обёртка на всю ширину экрана */
}

.hero__book_wrap {
    position: relative;
    width: 100%;
    max-width: 1190px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.hero__book_box-wrap {
    position: absolute;
    top: 0;
}

.hero__book_box--one {
    top: 148px;
    left: 207px;
}

.hero__book_box--two {
    top: 212px;
    left: 198px;
}

.hero__book_box--three {
    top: 274px;
    left: 190px;
}

.hero__book_box--for {
    top: 336px;
    left: 180px;
}

.hero__book_box--five {
    top: 396px;
    left: 172px;
}

.hero__bookmark {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    width: 108px;
    height: 190px;
    background: #3B2774;
}

.hero__bookmark-wrap {
    position: relative;
    display: flex;
    gap: 15px;
    padding: 0;
    width: 860px;
    margin-left: 540px;
    margin-right: auto;
    margin-top: 140px;
    margin-bottom: -140px;
}

.hero__bookmark--first {
    transform: rotate(-4deg);
}

.hero__bookmark--second {
    transform: rotate(-2deg);
    top: -5px;
}

.hero__bookmark--third {
    transform: rotate(0deg);
    top: -25px;
}

.hero__bookmark--fourth {
    transform: rotate(2deg);
    top: -15px;
}

.hero__bookmark--fifth {
    transform: rotate(4deg);
    top: -5px;
}

.hero__bookmark--sixth {
    transform: rotate(6deg);
    top: 5px;
}

.hero__bookmark--bubble {
    width: 83px;
    height: 83px;
    background: #CFC9E1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
}

.hero__bookmark--icon {
    width: auto;
    height: 65%;
}

.hero__bookmark--title {
    font-size: 14px;
    text-align: center;
    color: #CFC9E1;
    transition: all 0.4s ease-in-out;
}

.hero__bookmark.active .hero__bookmark--title {
    color: #3B2774;
}

.hero__bookmark.active .hero__bookmark--bubble {
    background: none;
}

.hero__bookmark--recepies {
    --bm-w: 130px;
    --bm-h: 180px;
    --bm-notch-w: 65px;
    --bm-notch-h: 18px;
    position: relative;
    display: grid;
    place-items: center;
    bottom: -15px;
    left: 112px;
    gap: 10px;
    width: var(--bm-w);
    height: var(--bm-h);
    padding: 35px 16px;
    text-align: center;
    background: #FFFFFF;
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transform: rotate(6deg);
    transform-origin: bottom center;
    clip-path: polygon(0 0, calc(50% - var(--bm-notch-w)) 0, 50% var(--bm-notch-h), calc(50% + var(--bm-notch-w)) 0, 100% 0, 100% 100%, 0 100%);
}

    .hero__bookmark--recepies:hover {
        transform: rotate(8deg) translateY(-2px);
    }

.hero__slider_recipies--desktop.swiper {
    position: absolute;
    top: 175px;
    left: 405px;
    width: 944px;
}

    .hero__slider_recipies--desktop.swiper .swiper-slide {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 10px;
    }

.hero__slider_recipies.swiper {
    overflow: visible;
}

    .hero__slider_recipies.swiper .swiper-slide {
        opacity: 0;
    }

    .hero__slider_recipies.swiper .swiper-slide-active {
        opacity: 1;
    }

    .hero__slider_recipies.swiper .swiper-slide.cards--1 {
        grid-template-columns: 1fr;
        gap: 0;
        transform: translateX(-50%);
        left: 50%;
    }

        .hero__slider_recipies.swiper .swiper-slide.cards--1 .hero__card--four {
            display: flex;
            justify-content: center;
        }

        .hero__slider_recipies.swiper .swiper-slide.cards--1 .hero__card--one, .hero__slider_recipies.swiper .swiper-slide.cards--1 .hero__card--two, .hero__slider_recipies.swiper .swiper-slide.cards--1 .hero__card--three, .hero__slider_recipies.swiper .swiper-slide.cards--1 .hero__card--five, .hero__slider_recipies.swiper .swiper-slide.cards--1 .hero__card--six {
            display: none;
        }

    .hero__slider_recipies.swiper .swiper-slide.cards--2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        left: 15%;
    }

        .hero__slider_recipies.swiper .swiper-slide.cards--2 .hero__card--two, .hero__slider_recipies.swiper .swiper-slide.cards--2 .hero__card--four, .hero__slider_recipies.swiper .swiper-slide.cards--2 .hero__card--five, .hero__slider_recipies.swiper .swiper-slide.cards--2 .hero__card--six {
            display: none;
        }

    .hero__slider_recipies.swiper .swiper-slide.cards--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        left: 15%;
    }

        .hero__slider_recipies.swiper .swiper-slide.cards--3 .hero__card--six {
            display: flex;
            justify-content: center;
            grid-column: 1/-1;
        }

        .hero__slider_recipies.swiper .swiper-slide.cards--3 .hero__card--two, .hero__slider_recipies.swiper .swiper-slide.cards--3 .hero__card--three, .hero__slider_recipies.swiper .swiper-slide.cards--3 .hero__card--five {
            display: none;
        }

    .hero__slider_recipies.swiper .swiper-slide.cards--4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        left: 15%;
    }

        .hero__slider_recipies.swiper .swiper-slide.cards--4 .hero__card--two, .hero__slider_recipies.swiper .swiper-slide.cards--4 .hero__card--five {
            display: none;
        }

    .hero__slider_recipies.swiper .swiper-slide.cards--5 .hero__card--five {
        display: none;
    }

    .hero__slider_recipies.swiper .swiper-slide.cards--null {
        display: flex;
        height: 100%;
        padding-left: 150px;
        padding-top: 160px;
    }

        .hero__slider_recipies.swiper .swiper-slide.cards--null h2 {
            font-family: "Congenial", sans-serif;
            color: #766EAC;
            font-size: 100px;
            width: 550px;
            transform: rotate(3.5deg);
        }

.hero__card {
    position: relative;
    width: 100%;
}

.hero__card_clips {
    position: absolute;
    width: 54px;
    top: 25px;
    right: -20px;
}

.hero__card_image {
    height: 237px;
    text-align: left;
}

.hero__card_image--one {
    transform: rotate(-3deg);
}

.hero__card_image--three {
    transform: rotate(3deg);
}

.hero__card_image--five {
    transform: rotate(-3deg);
}

.hero__card_image img {
    max-width: unset;
    height: 237px;
    border-radius: 20px;
    width: 274px;
    object-fit: cover;
}

.hero__card_text {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 18px 16px 18px;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease;
    width: 290px;
    min-height: 128px;
}

.hero__card_text--one {
    right: -23px;
    top: -38px;
}

    .hero__card_text--one .hero__card_clips {
        top: 55px;
        right: -14px;
        transform: rotate(95deg);
    }

.hero__card_text--two {
    right: -16px;
    top: -323px;
}

.hero__card_text--three {
    left: -30px;
    top: -43px;
}

    .hero__card_text--three .hero__card_clips {
        top: -5px;
        right: 8px;
        transform: rotate(-43deg);
    }

.hero__card_text--four {
    left: -9px;
    top: -51px;
}

    .hero__card_text--four .hero__card_clips {
        top: 0px;
        right: -12px;
    }

.hero__card_text--five {
    right: -6px;
    top: -335px;
}

.hero__card_text--six {
    left: -30px;
    top: -44px;
}

    .hero__card_text--six .hero__card_clips {
        top: -5px;
        right: 8px;
        transform: rotate(-43deg);
    }

.hero__card_text h3 {
    font-size: 20px;
    font-weight: bold;
    color: #766EAC;
    line-height: 1;
    width: 100%;
    text-transform: uppercase;
}

.hero__card_text p {
    font-size: 14px;
    color: #1A1A1A;
    line-height: 1.4;
    font-weight: 500;
    color: #766EAC;
}

.hero__card-footer {
    display: grid;
    grid-template-columns: 3fr 3fr 4fr;
    gap: 5px;
    align-items: center;
    width: 100%;
    margin-top: auto;
}

    .hero__card-footer .hero__card-btn {
        display: flex;
        justify-content: center;
        font-size: 10px;
        align-items: center;
        white-space: nowrap;
        padding: 0 5px;
        height: 21px;
        overflow: hidden;
    }

    .hero__card-footer .hero__card-btn_what span {
        display: flex;
        align-items: center;
        height: 21px;
        padding: 0 7px;
    }

.hero__card-btn {
    align-items: center;
    gap: 6px;
    border-radius: 47.94px;
    color: #766EAC;
    border: 1px solid #766EAC;
    border-width: calc(1px / var(--scale));
    max-width: 100%;
    width: 100%;
}

.hero__card-btn--text {
    transform: translateY(0.2px);
    justify-content: center;
    font-size: 10px;
    text-align: center;
    margin: auto;
}

.hero__card-btn--icon {
    width: 14px;
    height: 14px;
    margin-left: 0;
    margin-right: auto;
}

.hero__card-btn--clock {
    width: 12px;
    height: 12px;
}

.hero__card-btn_what {
    border: none;
    color: #3B2774;
    border-radius: 0;
    white-space: nowrap;
}

    .hero__card-btn_what span {
        width: 100%;
    }

.hero__card-btn_what--kind {
    background-color: #8B5BA3;
}

.hero__card-btn_what--everyday {
    background-color: #A9DAF3;
}

.hero__card-btn_what--childs {
    background-color: #FDFF95;
}

.hero__card-btn_what--weekend {
    background-color: #FBB9FE;
}

.hero__card-btn_what--childs {
    background-color: #FDFF95;
}

.hero__card-btn_what--want {
    background-color: #ADE984;
}

.hero__card-btn_what--without {
    background-color: #FFD572;
}

.hero__card a {
    pointer-events: auto;
    position: relative;
}

.hero__card .swiper-slide {
    width: 100% !important;
}

.hero__card--two {
    bottom: -12px;
}

.hero__card--three {
    left: 15px;
}

.hero__card--four {
    top: -15px;
}

.hero__card--six {
    left: 15px;
}

.hero__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    padding: 0 25px;
    border-radius: 200px;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    height: 40px;
    border-style: solid;
    border-color: #FFFFFF;
    border-width: clamp(1px, 1px / var(--scale), 2px);
}

    .hero__btn img {
        filter: brightness(0) invert(1);
    }

    .hero__btn.active {
        background: #FFFFFF;
        color: #766EAC;
    }

        .hero__btn.active img {
            filter: unset;
        }

    .hero__btn.hero__btn-prev img {
        transform: rotate(180deg);
    }

.hero__btn-wrap {
    position: absolute;
    transform: translateX(-54%);
    left: 54%;
    bottom: 112px;
    display: flex;
    gap: 20px;
    pointer-events: auto;
    z-index: 2;
}

    .hero__btn-wrap .hero__btn {
        display: flex;
    }

.hero__btn-wrap--mobile .btn {
    width: 222.91px;
    transition: all 0.3s ease-in-out;
}

    .hero__btn-wrap--mobile .btn.active {
        background: #FFFFFF;
        color: #766EAC;
        width: 409.87px;
        justify-content: space-between;
    }

.hero__btn-wrap--mobile .btn-prev img {
    transform: rotate(180deg);
}

.hero__filters {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero__filters_set {
    border: none;
    margin: 0;
    padding: 0;
}

.hero__book_box-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero__book_box {
    position: absolute;
    border-radius: 50%;
    border: 2px solid gray;
    width: 20px;
    height: 20px;
    background-color: #fff;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
}

    .hero__book_box::after {
        content: "";
        position: absolute;
        top: -14px;
        left: -20px;
        height: 44px;
        width: 190px;
    }

.hero__book_box--one::after {
    top: -18px;
    width: 160px;
    transform: rotate(-4deg);
}

.hero__book_box--five::after {
    top: -10px;
    width: 200px;
    transform: rotate(4.5deg);
}

.hero__book_box-label {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
}

.hero__book_box-icon {
    width: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tag__control:checked + .hero__book_box-label .hero__book_box-icon {
    opacity: 1;
}

.hero__book_box--one {
    top: 148px;
    left: 207px;
}

.hero__book_box--two {
    top: 212px;
    left: 198px;
}

.hero__book_box--three {
    top: 274px;
    left: 188px;
}

.hero__book_box--for {
    top: 335px;
    left: 182px;
}

.hero__book_box--five {
    top: 396px;
    left: 173px;
}

.hero__book_box:hover {
    border-color: #766EAC;
    transform: scale(1.1);
}

    .hero__book_box:hover .hero__book_box-icon {
        opacity: 0.5;
    }

.hero__controls {
    position: absolute;
    top: 452px;
    left: 264px;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: auto;
}

.hero__controls_set {
    border: none;
    margin: 0;
    padding: 0;
}

.hero__controls-wrap {
    display: flex;
    row-gap: 10px;
    justify-content: center;
    flex-direction: column;
}

.hero__control_item {
    display: inline-block;
    height: 40px;
}

.hero__control_item--all {
    width: 160px;
}

.hero__control_item--reset {
    width: 205px;
}

.hero__control_label {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
    font-weight: 500;
    border: 1px solid #FFFFFF;
    border-width: calc(1px / var(--scale));
    height: 100%;
}

    .hero__control_label.active-filter img {
        opacity: 1;
    }

.hero__control_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 19px;
    height: 19px;
    margin-left: 12px;
}

    .hero__control_icon img {
        width: 10px;
        height: 10px;
        opacity: 0;
        transition: opacity 0.3s ease;
        filter: brightness(0) invert(1);
    }

.hero__control_text {
    color: #FFFFFF;
    font-size: 16px;
}

.tag__control:checked + .hero__book_box-label ~ .hero__book_box,
.hero__book_box.filter-active {
    border-color: #CFC9E1;
    background-color: #f0f0f0;
    box-shadow: 0 0 10px rgba(118, 110, 172, 0.3);
}

    .tag__control:checked + .hero__book_box-label ~ .hero__book_box:hover .hero__book_box-icon,
    .hero__book_box.filter-active:hover .hero__book_box-icon {
        opacity: 0.8;
    }

.tag__control.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.control__radio.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.main__bg-bottom {
    position: relative;
    height: 430px;
    overflow: hidden;
    pointer-events: none;
}

    .main__bg-bottom img {
        pointer-events: none;
        position: absolute;
    }

.main__bg-bottom--one {
    left: -180px;
    top: -325px;
    width: auto;
    height: 810px;
}

.main__bg-bottom--two {
    top: 0;
    right: 70px;
    width: auto;
    height: 335px;
}

.main__bg-bottom--three {
    height: 315px;
    top: 105px;
    left: 170px;
    width: auto;
}

.main__bg-bottom--four {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 460px;
}

.main .hero__header::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50px;
    left: 0;
    bottom: -33px;
    background: #735F9F;
    filter: blur(10px);
    transform: matrix(-1, 0, 0, 1, 0, 0);
    z-index: 2;
}

/* Меню "Время готовки" */
.cooking-time {
    position: absolute;
    z-index: 5;
    width: 213px;
    height: 42px;
    left: 245px;
    top: 425px;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    overflow: visible;
    cursor: default;
    transition: box-shadow 0.2s ease;
    /* fieldset / legend для доступности */
    /* Стиль для выбранного пункта */
    /* Фокус с клавиатуры */
}

    .cooking-time.open .cooking-time__content {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    .cooking-time.open .cooking-time__arrow {
        transform: rotate(180deg);
    }

.cooking-time__header {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    width: 213px;
    height: 42px;
    background: #766EAC;
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    padding: 0 16px;
    z-index: 3;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(63, 47, 114, 0.45);
}

.cooking-time__title {
    font-weight: 500;
    line-height: 21px;
    font-size: 18px;
    color: #FFFFFF;
    flex: 1;
}

.cooking-time__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cooking-time__arrow {
    width: 18px;
    height: 9px;
    transition: transform 0.28s ease;
}

.cooking-time__content {
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    padding: 16px 0;
    background: #FFFFFF;
    border-radius: 16px;
    border: calc(3px / var(--scale)) solid #D0CAE2;
    box-shadow: 0 10px 24px rgba(63, 47, 114, 0.35);
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    display: none;
}

.cooking-time__option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 40px;
    padding: 7px 12px 7px 52px;
    width: 100%;
    border-radius: 999px;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .cooking-time__option::before {
        content: "";
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background-image: url("../images/icons/clock-bold.webp");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

.cooking-time__option--text {
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    color: #3B2774;
    margin: 0;
}

.cooking-time__option--icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.cooking-time__divider {
    height: 10px;
    margin: 0;
    background: transparent;
    border: 0;
}

.cooking-time__fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.cooking-time__legend.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.cooking-time__radio:checked + .cooking-time__option {
    background-color: #f1ecff;
}

    .cooking-time__radio:checked + .cooking-time__option::before {
        border-color: #3B2774;
    }

    .cooking-time__radio:checked + .cooking-time__option .cooking-time__option--text {
        color: #3B2774;
        font-weight: 600;
    }

.cooking-time__radio:focus-visible + .cooking-time__option {
    outline: 2px solid #3B2774;
    outline-offset: 2px;
}

@supports not (clip-path: polygon(0 0)) {
    .hero__bookmark--recepies {
        overflow: hidden;
    }

        .hero__bookmark--recepies::before {
            content: "";
            position: absolute;
            top: -6px;
            left: 50%;
            width: calc(var(--bm-notch-w) * 2 + 12px);
            height: calc(var(--bm-notch-h) + 12px);
            transform: translateX(-50%) rotate(45deg);
            box-shadow: 0 0 0 99px #FFFFFF;
            pointer-events: none;
        }
}

.footer {
    color: #FFFFFF;
    position: relative;
    padding: 0 150px 40px 150px;
    overflow: hidden;
}

.footer__nav {
    justify-content: center;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(4, auto);
    text-align: center;
}

    .footer__nav a {
        color: #FFFFFF;
        text-decoration: none;
        font-size: 16px;
        font-family: "Congenial";
        font-weight: 500;
        padding: 0 25px;
    }

        .footer__nav a:not(:last-child) {
            border-right: 1px solid white;
        }

        .footer__nav a:hover {
            text-decoration: underline;
        }

.footer__bottom {
    display: grid;
    grid-template-columns: auto 2fr 4fr 2fr;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid #FFFFFF;
    padding-bottom: 30px;
    width: 100%;
}

.footer .phone {
    font-size: 24px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    color: #FFFFFF;
}

    .footer .phone a {
        font-family: "Lorrach BETA", sans-serif;
    }

    .footer .phone span {
        position: relative;
        font-size: 12px;
        font-weight: normal;
        margin-top: 5px;
        font-weight: 500;
    }

        .footer .phone span::before {
            content: "";
            position: absolute;
            top: -6px;
            left: 0;
            width: 100%;
            height: 1px;
            background: #FFFFFF;
            z-index: 1;
        }

.footer__connect-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #A9DAF3;
    color: #1A1A1A;
    text-decoration: none;
    transition: background 0.3s ease;
    width: 157px;
    height: 35px;
    border-radius: 200px;
    font-size: 14px;
    font-weight: 500;
}

    .footer__connect-btn:hover {
        background: rgb(35, 195.1673640167, 255);
    }

.footer__bottom--about {
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    justify-self: end;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.container {
    transform-origin: top center;
}

html {
    overflow-y: scroll;
}

body {
    overflow-x: hidden;
}

.btn__buy--recepies,
.recepies__instructions_card--btn,
.visible-none, .btn__buy {
    display: none !important;
}

.hero__card-footer.recepies__btn--top {
    pointer-events: none;
}

.swiper .hero__card-footer .hero__card-btn:nth-child(2) .hero__card-btn--text {
    max-width: 10ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recepies__instructions {
    --layout-h: 1158px;
    --title-h: 48px;
    --print-h: 52px;
    --img-offset-top: 24px;
    --img-offset-bottom: 24px;
    --row-h: 154px;
    --row-gap: 24px;
    --rows-count: 1;
    --extra-block-h: 100px;
    --extra-block-gap: 24px;
    --extra-block-count: 0;
    --work-area-h: calc(var(--layout-h) - var(--title-h) - var(--print-h) - var(--img-offset-top) - var(--img-offset-bottom));
    --rows-block-h: calc((var(--row-h) + var(--row-gap)) * var(--rows-count));
    --extra-blocks-h: calc((var(--extra-block-h) + var(--extra-block-gap)) * var(--extra-block-count));
    --img-bottom-base: calc(var(--img-offset-top) + var(--img-offset-bottom) + var(--print-h));
    --img-bottom: calc(var(--img-bottom-base) + var(--extra-blocks-h));
    --img-h: 500px;
    --layout-need-h: calc(var(--title-h) + var(--print-h) + var(--img-offset-top) + var(--rows-block-h) + var(--extra-blocks-h) + var(--img-h) + var(--img-offset-bottom));
}

.advice-text {
    display: none;
}

.recepies__header_titles {
    top: 145px;
}

    .recepies__header_titles h1 {
        font-size: 40px;
        margin-bottom: 6px;
    }

    .recepies__header_titles h3 {
        font-size: 24px;
        font-weight: 500;
    }

.recepies__btn--top {
    position: absolute;
    width: 100%;
    max-width: 320px;
    grid-template-columns: 2fr 3fr;
    top: 265px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

    .recepies__btn--top .hero__card-btn {
        border: 1px solid #FFFFFF;
        border-width: calc(1px / var(--scale));
        color: #FFFFFF;
        padding: 0 11px;
    }

    .recepies__btn--top .hero__card-btn--icon {
        width: 20px;
        height: 20px;
    }

    .recepies__btn--top .hero__card-btn, .recepies__btn--top span {
        height: 40px;
        font-size: 18px;
    }

    .recepies__btn--top .hero__card-btn--text {
        font-size: 18px;
    }

    .recepies__btn--top span:last-child {
        margin-left: 8px;
    }

.recepies__wrap {
    position: relative;
}

    .recepies__wrap .main__bg-bottom {
        overflow: visible;
        margin-top: 100px;
    }

    .recepies__wrap .main__bg-bottom--one {
        height: 370px;
        top: -160px;
        left: 325px;
    }

    .recepies__wrap .main__bg-bottom--two {
        left: 30px;
        transform: rotate(-18deg);
        top: 40px;
    }

    .recepies__wrap .main__bg-bottom--three {
        height: 385px;
        top: 5px;
        transform: rotate(-20deg);
        right: 115px;
        left: auto;
    }

.recepies__bg-top--one {
    z-index: 5;
    right: 150px;
    top: 100px;
    width: 170px;
    transform: rotate(-64deg);
}

.recepies .hero__bg-header {
    height: 400px;
}

.recepies .hero__header {
    height: 400px;
}

.recepies .hero__bookmark.active {
    position: absolute;
    top: -165px;
    left: 30px;
    pointer-events: none;
    color: #5D2D7E;
    transform: rotate(5deg);
    height: 220px;
}

.recepies .hero__bookmark.active--title {
    margin-top: 10px;
    color: #3B2774;
}

.recepies .hero__bookmark.active--svg {
    position: absolute;
    z-index: -1;
    height: auto;
    width: 100px;
    top: 0;
}

.recepies .hero__bookmark.active--bubble {
    margin-top: 25px;
    background: none;
    margin-bottom: -20px;
}

.recepies__instructions {
    position: relative;
    border-radius: 0 18px 18px 18px;
    padding: 24px 16px;
    margin-top: -45px;
    overflow: hidden;
}

.recepies__instructions_page-type--one {
    --rows-count: 3;
}

.recepies__instructions_page-type--two {
    --rows-count: 3;
}

.recepies__instructions_page-type--three {
    --rows-count: 2;
}

.recepies__instructions_page-type--four {
    --rows-count: 4;
}

.recepies__instructions_page-type--five {
    --rows-count: 4;
}

.recepies__instructions_page-type--six {
    --rows-count: 4;
}

.recepies__instructions_page-type--seven {
    --rows-count: 2;
    --extra-block-count: 1;
}

    .recepies__instructions_page-type--seven .advice-text {
        display: flex;
    }

.recepies__instructions_page-type--eight {
    --rows-count: 3;
    --extra-block-count: 1;
}

    .recepies__instructions_page-type--eight .advice-text {
        display: flex;
    }

.recepies__instructions_page-type--nine {
    --rows-count: 3;
    --extra-block-count: 1;
}

    .recepies__instructions_page-type--nine .advice-text {
        display: flex;
    }

.recepies__instructions_page-type--ten {
    --extra-block-count: 1;
}

    .recepies__instructions_page-type--ten .advice-text {
        display: flex;
    }

.recepies__instructions_page-type--long-1 {
    --rows-count: 8;
    --extra-block-count: 0;
    --img-h: 500px;
}

.recepies__instructions_wrap {
    position: absolute;
    top: 110px;
    left: 182px;
    height: 1158px;
    max-width: 1078px;
    padding: 0 24px;
}

.recepies__instructions .hero__book_wrap {
    max-width: 1300px;
    left: -70px;
}

.recepies__instructions_picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.recepies__instructions_picture-wrap {
    overflow: hidden;
    position: absolute;
    width: 1030px;
    border-radius: 16px;
    height: calc(var(--work-area-h) - var(--rows-block-h) - var(--extra-blocks-h));
    bottom: var(--img-bottom);
}

.recepies__instructions_advice {
    position: absolute;
    bottom: var(--img-bottom-base);
    display: flex;
    width: 100%;
    height: 100px;
    max-width: 1030px;
    justify-content: center;
    align-items: center;
    background-color: #F7F4FF;
    font-size: 16px;
    border-radius: 16px;
    color: #766EAC;
}

.recepies__instructions_list {
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-row-gap: var(--row-gap);
    grid-column-gap: 16px;
}

.recepies__instructions_header {
    display: flex;
    align-items: center;
    padding: 0 24px;
    margin-bottom: 5px;
}

.recepies__instructions_title {
    margin: 0;
}

.recepies__instructions_card {
    position: relative;
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: 16px;
    min-height: 150px;
    padding: 8px;
    background: #FFFFFF;
    border: 2px solid #CFC9E1;
    border-radius: 16px;
}

.recepies__instructions_card--btn.hero__card-footer {
    position: absolute;
    grid-template-columns: 1fr 1fr;
    max-width: 350px;
    gap: 10px;
    bottom: 40px;
    right: 0;
}

    .recepies__instructions_card--btn.hero__card-footer.mobile-hidden a.btn.hero__card-btn,
    .recepies__instructions_card--btn.hero__card-footer.mobile-hidden button.btn.hero__card-btn {
        font-size: 16px;
        color: #D0CAE2;
        border-radius: 0;
        border: none;
        background: transparent;
        text-decoration: none;
        padding: 0 14px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .recepies__instructions_card--btn.hero__card-footer.mobile-hidden a.btn.hero__card-btn + button.btn.hero__card-btn {
            border-left: 2px solid #D0CAE2;
        }

    .recepies__instructions_card--btn.hero__card-footer.mobile-hidden img {
        margin-right: 10px;
    }

.recepies__instructions_card--wide {
    grid-column: 1/-1;
}

.recepies__instructions_card--num {
    position: absolute;
    top: 16px;
    left: -12px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #766EAC;
    color: #FFFFFF;
    font-family: "Lorrach BETA", system-ui, sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 0 0 6px #FFFFFF;
}

.recepies__instructions_card--img {
    width: 100px;
    height: 134px;
    border-radius: 8px;
    overflow: hidden;
}

    .recepies__instructions_card--img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.recepies__instructions_card--text {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1;
    color: #766EAC;
    margin-left: 0;
    margin-right: auto;
}

.recepies__instructions .hero__card-btn--icon {
    height: 21px;
    width: auto;
}

.ingredients {
    position: relative;
    max-width: 1135px;
    margin: auto;
}

.ingredients__inner {
    position: relative;
    padding: 24px 24px 26px;
    margin: 0;
    border-radius: 24px;
}

    .ingredients__inner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 24px;
        background: #D0CAE2;
        z-index: -1;
        height: 600px;
    }

.ingredients__inner_main {
    position: relative;
    transform: rotate(-2deg);
    left: -5px;
    width: 1105px;
}

    .ingredients__inner_main::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: url("../images/bg/bg-ingredients.webp") right top/cover no-repeat;
    }

.ingredients__inner .clips {
    top: -25px;
    width: 65px;
    right: 10px;
    transform: rotate(-33deg);
}

.ingredients--second {
    width: 100%;
    max-width: 680px;
    transform: rotate(2deg);
    box-shadow: 11px 4px 25px rgba(34, 20, 100, 0.78);
    padding-bottom: 195px;
}

    .ingredients--second::before {
        background: url("../images/bg/bg-ingredients.webp") right top/cover no-repeat;
        height: 100%;
        transform: scaleX(-1) scaleY(-1);
        filter: brightness(0) invert(1);
        z-index: -5;
    }

.ingredients--third {
    width: 100%;
    max-width: 400px;
    z-index: 0;
    box-shadow: 11px 4px 25px rgba(34, 20, 100, 0.78);
    bottom: -85px;
    left: -90px;
}

    .ingredients--third::before {
        background: url("../images/bg/bg-ingredients.webp") right top/cover no-repeat;
        height: 600px;
        transform: scaleX(-1) scaleY(-1);
        filter: brightness(0) invert(1);
        z-index: -5;
    }

    .ingredients--third::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 24px;
        background: #D0CAE2;
        z-index: -6;
        height: 600px;
    }

    .ingredients--third .clips {
        display: none;
    }

.ingredients__chapters_wrap {
    display: flex;
    margin-bottom: -160px;
}

.ingredients__chapters_two .ingredients__inner_main {
    margin-bottom: 20px;
}

.ingredients__chapters_two .recepies__instructions {
    margin-top: -240px;
}

.ingredients__chapters_three .recepies__instructions {
    overflow: visible;
}

.ingredients__chapters_three .recepies__instructions_wrap {
    height: auto;
    padding-left: 24px;
    padding-right: 24px;
    background: #FFFFFF;
    z-index: 10;
}

.ingredients__chapters_three .recepies__instructions_picture-wrap {
    position: relative;
    bottom: auto;
    margin-top: 24px;
    width: auto;
    padding-bottom: 100px;
}

.ingredients__chapters_three .recepies__instructions_card--btn.hero__card-footer {
    position: relative;
    bottom: auto;
    right: auto;
    margin: 35px 0 35px auto;
}

.ingredients__chapters_three .recepies__bg-top--one {
    top: 50px;
}

.ingredients__chapters_three .ingredients__inner_main {
    transform: rotate(0deg);
}

.ingredients__title {
    margin: 0 0 6px;
    font-family: "Lorrach BETA", system-ui, sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 28px;
    text-transform: uppercase;
    color: #3B2774;
}

.ingredients__list {
    display: grid;
    grid-auto-rows: 68px;
    gap: 10px 16px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ingredients__list--main {
    grid-template-columns: repeat(5, minmax(190px, 1fr));
}

.ingredients__list--second {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
}

.ingredients__list--third {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
}

.ingredients__item {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ingredients__pic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FFFFFF;
    display: grid;
    place-items: center;
}

    .ingredients__pic img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

.ingredients__text {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ingredients__amount {
    display: block;
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    color: #3B2774;
    white-space: nowrap;
}

.ingredients__name {
    display: block;
    font-weight: 300;
    font-size: 14px;
    color: #3B2774;
    opacity: 0.95;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 992px) {
    .ingredients__list--main {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
    }
}

@media screen and (max-width: 1439px) {
    .btn__buy--hero {
        font-size: 1.53vw;
    }

        .btn__buy--hero a {
            padding: 1.53vw 4.17vw 1.53vw x 1.94vw;
            gap: 0.83vw;
            right: -1.39vw;
            height: 5.555vw;
            width: 37.5vw;
        }

        .btn__buy--hero img {
            width: 3.13vw;
        }
}

@media screen and (max-width: 1023px) {
    .mobile-hidden {
        display: none !important;
    }

    .logo__header {
        width: 143.81px;
    }

    .header__titles p {
        font-size: 43.14px;
    }

    .header__titles--recepies {
        top: 239.69px;
        width: calc(100% - 191.76px);
    }

        .header__titles--recepies h1 {
            font-size: 67.11px;
            margin-bottom: 19.18px;
        }

        .header__titles--recepies p {
            text-transform: lowercase;
        }

    .header__titles--hero {
        top: 179.77px;
    }

        .header__titles--hero h1 {
            font-size: 95.88px;
        }

    .menu__main {
        position: absolute;
        top: 36px;
        right: 64px;
        z-index: 30;
    }

    .menu__main_nav {
        display: none;
    }

    .btn__buy {
        position: relative;
        right: -60px;
    }

        .btn__buy a {
            height: 191.75px;
            font-size: 38.35px;
            padding-left: 47.94px;
            width: 720px;
        }

        .btn__buy img {
            margin-right: 10px;
            width: 83.89px;
            height: auto;
        }

    .btn__buy--recepies {
        display: none;
    }

    .main__book {
        position: relative;
        z-index: 3;
    }

    .main__bg-bottom {
        margin-top: 250px;
        overflow: unset;
        height: 880px;
    }

    .main__bg-bottom--one {
        left: -310px;
        top: -240px;
    }

    .main__bg-bottom--two {
        top: 40px;
        right: -150px;
    }

    .main__bg-bottom--three {
        height: 425px;
        top: 460px;
        left: -110px;
    }

    .main__bg-bottom--four {
        left: 50%;
        transform: translateX(-50%);
        top: 200px;
    }

    .hero__titles {
        top: 179.77px;
    }

        .hero__titles h1 {
            font-size: 95.88px;
        }

        .hero__titles h2 {
            font-size: 43.14px;
        }

        .hero__titles span {
            font-size: 43.14px;
        }

    .hero__bg--board {
        bottom: auto;
        right: -400px;
        width: 540px;
        top: -300px;
    }

    .hero__bg--jar {
        top: 0;
        left: 5px;
        width: 310px;
        rotate: 15;
        transform: rotate(9deg);
    }

    .hero__bg-header {
        height: 376.31px;
        object-fit: cover;
    }

    .hero__bg-image {
        position: relative;
    }

    .hero__header {
        height: 376.31px;
    }

        .hero__header .recepies__btn--top {
            top: 450px;
            width: calc(100% - 191.76px);
            max-width: unset;
        }

    .hero__card {
        bottom: auto;
        top: auto;
        left: auto;
        right: auto;
    }

    .hero__card--three {
        top: 207px;
    }

    .hero__card--five {
        top: 185px;
    }

    .hero__card_image {
        height: 479.38px;
    }

        .hero__card_image img {
            height: 479.38px;
            width: 553.68px;
        }

    .hero__card_image--one {
        transform: rotate(-3deg);
    }

    .hero__card_image--three {
        transform: none;
    }

    .hero__card_image--five {
        transform: rotate(5deg);
    }

    .hero__card_text {
        position: absolute;
        overflow: visible;
        width: 623.19px;
        height: 299.61px;
        padding: 43.14px 43.14px 35.95px 43.14px;
        padding-bottom: 107.86px;
        border-radius: 35.95px;
    }

        .hero__card_text h3 {
            font-size: 47.94px;
        }

        .hero__card_text p {
            font-size: 31.16px;
            line-height: 1;
        }

    .hero__card_text--one {
        top: auto;
        bottom: -131.83px;
        right: auto;
        left: 0;
    }

    .hero__card_text--two {
        right: auto;
        left: 0;
        top: auto;
        bottom: -107.86px;
    }

    .hero__card_text--three {
        left: -69.51px;
        top: -203.73px;
    }

    .hero__card_text--four {
        left: -38.35px;
        bottom: -158.19px;
        top: auto;
    }

    .hero__card_text--five {
        right: -11.98px;
        top: -179.77px;
    }

    .hero__card_text--six {
        left: -69.51px;
        bottom: -203.73px;
        top: auto;
    }

    .hero__card_clips {
        height: 95.88px;
        width: auto;
    }

    .hero__card-btn {
        border-width: 2px;
    }

    .hero__card-btn_what span {
        padding: 0 16.78px;
    }

    .hero__card-btn--icon {
        width: 33.56px;
        height: 33.56px;
    }

    .hero__card-btn--clock {
        width: 26.37px;
        height: 26.37px;
    }

    .hero__card-btn--text {
        font-size: 23.97px;
        transform: translateY(2px);
    }

    .hero__card-footer {
        position: absolute;
        width: 599.22px;
        gap: 11.98px;
        bottom: 33.56px;
    }

        .hero__card-footer .hero__card-btn, .hero__card-footer .hero__card-btn_what {
            height: 50.33px;
            padding: 0 11.98px;
        }

    .hero__card a {
        left: 50%;
        transform: translateX(-50%);
    }

    .hero__search {
        top: -540px;
        width: 575.25px;
    }

        .hero__search input {
            height: 95.88px;
            border: 7.19px solid #CFC9E1;
            font-size: 31.16px;
            padding-right: 270px;
        }

    .hero__search_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 45px;
        width: 222.91px;
        height: 76.7px;
        font-size: 33.56px;
        right: 11px;
    }

    .hero__search_btn--icon {
        height: 23.97px;
        width: auto;
        margin-right: 20px;
    }

    .hero__search-clear {
        right: 248px;
    }

        .hero__search-clear svg {
            width: 34px;
            height: 34px;
        }

    .hero__book {
        position: relative;
        z-index: -2;
        pointer-events: unset;
        margin-top: 600px;
    }

    .hero__book_mobile .cooking-time {
        position: relative;
        top: auto;
        left: auto;
        width: 510.53px;
        height: 119.84px;
    }

    .hero__book_mobile .cooking-time__wrap {
        position: relative;
        display: flex;
        top: -160px;
        justify-content: center;
    }

    .hero__book_mobile .cooking-time__content {
        top: 156px;
        border-radius: 38.35px;
        padding: 38.35px 0;
        border-width: 7px;
    }

    .hero__book_mobile .cooking-time__menu {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 119.84px;
        height: 119.84px;
        border: 4px solid #FFFFFF;
        border-radius: 100px;
        overflow: hidden;
        cursor: pointer;
        margin-left: 19.18px;
        background: #3B2774;
    }

        .hero__book_mobile .cooking-time__menu .menu__mobile_button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

            .hero__book_mobile .cooking-time__menu .menu__mobile_button::after {
                left: 19px;
            }

    .hero__book_mobile .cooking-time__header {
        height: 119.84px;
        width: 510.53px;
        border: 4px solid #FFFFFF;
    }

    .hero__book_mobile .cooking-time__title {
        font-size: 43.14px;
    }

    .hero__book_mobile .cooking-time__option {
        padding: 16.78px 28.76px 16.78px 124.64px;
        min-height: 91.08px;
    }

        .hero__book_mobile .cooking-time__option::before {
            left: 38.35px;
            width: 57.53px;
            height: 57.53px;
        }

    .hero__book_mobile .cooking-time__option--text {
        font-size: 31.16px;
    }

    .hero__book_mobile .cooking-time__option--icon {
        height: 45.54px;
        width: auto;
        margin: 0 15px;
    }

    .hero__book_mobile .cooking-time__arrow {
        width: 43.14px;
        height: 14.38px;
    }

    .hero__book-mobile {
        z-index: -2;
        width: 100%;
        height: 1100px;
        margin: 0;
        padding: 0;
        position: relative;
    }

    .hero__book-mobile--img {
        position: absolute;
        top: 140px;
        pointer-events: none;
        left: 0;
        width: 100%;
        height: 1100px;
        object-fit: cover;
        object-position: 55%;
    }

    .hero__book-mobile .swiper {
        overflow: unset;
    }

    .hero__book-mobile .swiper-button-next, .hero__book-mobile .swiper-button-prev {
        display: none;
    }

    .hero__bookmark {
        width: 191.75px;
        height: 325.98px;
    }

    .hero__bookmark-wrap {
        margin: 0;
        margin-left: 59.92px;
    }

    .hero__bookmark.active {
        clip-path: polygon(0 0, calc(50% - 84px) 0, 50% 38px, calc(50% + 84px) 0, 100% 0, 100% 100%, 0 100%);
        background-color: #FFFFFF;
        transform: translateY(-20px);
        color: #5D2D7E;
    }

    .hero__bookmark--first.active {
        transform: rotate(-4deg) translateY(-20px);
    }

    .hero__bookmark--second.active {
        transform: rotate(-2deg) translateY(-20px);
    }

    .hero__bookmark--fourth.active {
        transform: rotate(2deg) translateY(-20px);
    }

    .hero__bookmark--fifth.active {
        transform: rotate(4deg) translateY(-20px);
    }

    .hero__bookmark--sixth {
        transform: rotate(3deg);
    }

        .hero__bookmark--sixth.active {
            transform: rotate(3deg) translateY(-20px);
        }

    .hero__bookmark--bubble {
        width: 135px;
        height: 135px;
    }

    .hero__bookmark--title {
        font-size: 22px;
    }

    .hero__bg--heart {
        display: none;
    }

    .hero__btn {
        font-size: 33.56px;
        display: flex;
        font-family: "Congenial", sans-serif;
        height: 95.88px;
        padding: 0 35px;
    }

    .hero__btn-wrap {
        transform: translateX(-50%);
        left: 50%;
        bottom: -255px;
        width: 100%;
        justify-content: center;
    }

    .hero__btn-prev--mob img {
        transform: rotate(180deg);
    }

    .hero__btn img {
        width: 45.54px;
    }

    .hero__slider_bookmarks.swiper {
        z-index: -1;
    }

        .hero__slider_bookmarks.swiper .swiper-slide {
            width: auto;
        }

        .hero__slider_bookmarks.swiper .hero__bookmark.active {
            padding-top: 19.18px;
        }

            .hero__slider_bookmarks.swiper .hero__bookmark.active .hero__bookmark--bubble {
                margin-top: 15px;
            }

            .hero__slider_bookmarks.swiper .hero__bookmark.active .hero__bookmark--icon {
                margin-top: 5px;
            }

    .hero__slider_recipies.swiper .swiper-slide.cards--null h2 {
        font-size: 100px;
    }

    .ingredients__inner {
        max-width: 738.24px;
        left: 15px;
        background-color: #D0CAE2;
        overflow: hidden;
        border-radius: 49.09px;
        padding: 49.09px 49.09px 53.18px;
    }

    .ingredients__inner_main--second {
        position: relative;
        transform: rotate(2deg);
        z-index: 1;
        left: 2%;
        margin: 0;
        top: -70px;
    }

    .ingredients__inner_main {
        margin-top: 179.99px;
        transform: rotate(-1deg);
    }

    .ingredients__inner .clips {
        width: 112.49px;
        top: -40px;
        right: 200px;
    }

    .ingredients__inner::before {
        height: 100%;
        border-radius: 49.09px;
    }

    .ingredients__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 53.18px 32.73px;
        grid-auto-rows: 139.08px;
        padding-bottom: 140px;
    }

    .ingredients__list--third {
        padding-bottom: 30px;
    }

    .ingredients__item {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .ingredients__pic {
        width: 122.72px;
        height: 122.72px;
    }

        .ingredients__pic img {
            width: 81.81px;
            height: 81.81px;
        }

    .ingredients__title {
        font-size: 45px;
        margin-bottom: 32.73px;
        line-height: 57.27px;
    }

    .ingredients__amount {
        font-size: 36.82px;
        line-height: 42.95px;
    }

    .ingredients__name {
        font-size: 24.54px;
        line-height: 28.63px;
    }

    .ingredients__text {
        margin-left: -6.14px;
    }

    .ingredients__chapters_two .ingredients--second {
        background: #D0CAE2;
        overflow: visible;
        padding-bottom: 600px;
        top: -140px;
    }

        .ingredients__chapters_two .ingredients--second::before {
            border-radius: 0 0 32.73px 0;
        }

    .ingredients__chapters_two .recepies__instructions {
        margin-top: -730px;
    }

    .ingredients__chapters_three .ingredients__chapters_wrap {
        position: relative;
        top: 0;
        left: 0;
        flex-wrap: wrap;
        height: auto;
        margin-top: -140px;
        margin-bottom: 0;
    }

        .ingredients__chapters_three .ingredients__chapters_wrap .ingredients--second {
            margin-top: 0;
            overflow: visible;
        }

    .ingredients__chapters_three .recepies__instructions {
        margin-top: 150px;
    }

    .ingredients__chapters_three .recepies__instructions_wrap {
        padding: 0 0 0 137px;
    }

    .ingredients__chapters_three .ingredients--third {
        margin-top: -235px;
        padding-bottom: 80px;
    }

    .ingredients__chapters--second {
        overflow: visible;
    }

    .recepies__bg-top--one {
        top: 620px;
        right: 0;
    }

    .recepies__bg-top--one--chokolate {
        top: 610px;
    }

    .recepies__bg-top .main__bg-bottom {
        margin-top: 70px;
    }

    .recepies__chapters_wrap {
        flex-wrap: wrap;
    }

    .recepies__chapters_three .recepies__instructions {
        margin-top: -240px;
    }

    .recepies__chapters_three .recepies__instructions_wrap {
        left: auto;
        padding: 0 0 0 135px;
        background: none;
    }

    .recepies__chapters_three .ingredients--second {
        max-width: 736.32px;
    }

    .recepies--third {
        top: -200px;
        bottom: 0;
        padding-bottom: 170px;
        box-shadow: 11px 4px 25px rgba(34, 20, 100, 0.78);
    }

    .recepies__instructions {
        top: -150px;
        margin: 0;
        z-index: 5;
        padding: 0;
        border-radius: unset;
        /* Контент должен быть поверх фона */
    }

    .recepies__instructions_header {
        padding: 100px 0 0;
        margin-bottom: 40px;
    }

    .recepies__instructions_title.ingredients__title {
        margin: 0;
    }

    .recepies__instructions_wrap {
        position: relative;
        padding: 0 0 0 137px;
        top: 0;
        left: 0;
        height: auto;
    }

    .recepies__instructions_wrap_bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        pointer-events: none;
    }

    .recepies__instructions_wrap .recepies__instructions_advice {
        font-size: 33.56px;
    }

    .recepies__instructions_wrap .desktop-hidden .recepies__instructions_card--img {
        height: 613.6px;
    }

    .recepies__instructions_card {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 100%;
        border-radius: 32.73px;
        padding: 16.36px;
    }

    .recepies__instructions_card--img {
        height: 286.35px;
        width: 100%;
        max-width: 100%;
        border-radius: 32.73px;
    }

        .recepies__instructions_card--img img {
            object-fit: cover;
        }

    .recepies__instructions_card--text {
        font-size: 32.73px;
    }

    .recepies__instructions_card--num {
        width: 65.45px;
        height: 65.45px;
        top: 35px;
        left: -32px;
        font-size: 32.73px;
    }

    .recepies__instructions_card--btn.hero__card-footer {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
        width: 100%;
        gap: 16.36px;
        margin-top: 0;
        bottom: auto;
    }

        .recepies__instructions_card--btn.hero__card-footer .hero__card-btn {
            justify-content: flex-start;
            width: 100%;
            height: 108.4px;
            border: 2px solid #CFC9E1;
            border-radius: 200px;
            font-size: 32.73px;
            padding-left: 32.73px;
        }

            .recepies__instructions_card--btn.hero__card-footer .hero__card-btn img {
                height: 42.95px;
                width: auto;
                margin-right: 20.45px;
            }

    .recepies__instructions_list {
        max-width: 552.24px;
        padding: 0;
        gap: 49.09px;
    }

        .recepies__instructions_list li:last-of-type {
            padding-bottom: 130.9px;
        }

    .recepies__instructions .bg-top {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        background: url("../images/bg/bg-top.webp") no-repeat top center;
        background-size: 100% auto;
    }

    .recepies__instructions .advice-text {
        position: relative;
        bottom: auto;
        max-width: 552.24px;
        padding: 24px 30px;
        height: auto;
    }

    .recepies__instructions .bg-middle {
        position: absolute;
        top: 200px;
        left: 0;
        right: 0;
        bottom: 150px;
        background: url("../images/bg/bg-middle.svg") repeat-y center;
        background-size: 100% auto;
    }

    .recepies__instructions .bg-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 150px;
        background: url("../images/bg/bg-bottom.svg") no-repeat bottom center;
        background-size: 100% auto;
    }

    .recepies__instructions_header, .recepies__instructions_list, .recepies__instructions_card--btn {
        position: relative;
        z-index: 1;
    }

    .recepies__instructions_list {
        margin: 0;
        grid-template-columns: 1fr;
    }

    .recepies__card-footer span {
        justify-content: flex-start;
        padding: 0 30px;
        gap: 25px;
    }

    .recepies .hero__header {
        height: 777.23px;
    }

    .recepies .hero__bg-header {
        height: 777.23px;
    }

    .recepies .hero__bookmark {
        box-shadow: none;
    }

        .recepies .hero__bookmark.active {
            display: grid;
            grid-template-columns: fit-content(100%) auto;
            top: -175px;
            width: 476.56px !important;
            height: 114.54px !important;
            transform: rotate(0);
            left: -12px;
            clip-path: margin-box;
            gap: 0;
            background: none;
        }

    .recepies .hero__bookmark--bubble {
        width: auto;
        height: 81.81px;
        margin: auto 16.36px auto 49.09px;
    }

    .recepies .hero__bookmark--title {
        order: 1;
        font-size: 28.63px;
        width: 153.4px;
        text-align: left;
    }

    .recepies .hero__bookmark svg {
        position: absolute;
        z-index: -1;
        width: 454.06px;
        height: 114.54px;
    }

    .recepies .main__bg-bottom {
        height: 460px;
    }

    .recepies .main__bg-bottom--one {
        height: auto;
        width: 367.25px;
        top: -235px;
        left: 285px;
    }

    .recepies .main__bg-bottom--two {
        height: auto;
        width: 321.18px;
        transform: rotate(1deg);
        left: -90px;
        top: -200px;
    }

    .recepies .main__bg-bottom--three {
        height: 365px;
        top: 115px;
        transform: rotate(-5deg);
        right: -55px;
    }

    .recepies .main__bg-bottom--four {
        height: 460px;
        top: -100px;
    }

    .recepies__btn--top .hero__card-btn {
        height: 77.72px;
        width: 235.21px;
        border-radius: 200px;
        font-size: 32.73px;
    }

    .recepies__btn--top .hero__card-btn--icon {
        height: 40.91px;
        width: auto;
    }

    .recepies__btn--top .hero__card-btn--text {
        font-size: 32.73px;
    }

    .recepies__btn--buy {
        margin-top: 0;
    }

    .recepies__btn--weekend.btn {
        height: 75.68px;
        width: 335.43px;
        margin-left: 0;
        margin-right: auto;
        font-size: 32.73px;
        color: #766EAC;
    }

    .recepies__wrap .main__bg-bottom {
        margin-top: 50px;
    }

    .recepies__wrap .main__bg-bottom--five {
        display: none;
    }

    .recepies .footer {
        margin-top: 170px;
    }

    .footer {
        display: flex;
        flex-wrap: wrap;
        margin-top: 130px;
        padding: 0;
    }

    .footer__nav {
        position: relative;
        max-width: 511.33px;
        margin: 0 auto;
        padding: 8px 0 14px;
        align-items: center;
        text-align: center;
        gap: 45px;
        grid-template-columns: repeat(1, auto);
    }

        .footer__nav a {
            position: relative;
            display: block;
            font-size: 32.73px;
            line-height: 1.3;
            padding: 30.68px 0;
            /* линия и отступ только у ссылок, у которых слева есть ссылка */
        }

            .footer__nav a:hover {
                opacity: 0.85;
            }

            .footer__nav a:not(:last-child) {
                border: none;
            }

            .footer__nav a + a::before {
                content: "";
                position: absolute;
                top: -20px;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                height: 2px;
                background: #FFFFFF;
            }

    .footer__bottom {
        grid-template-columns: 1fr;
        padding-top: 100px;
    }

        .footer__bottom .phone {
            font-size: 49.09px;
            margin: auto;
            text-align: center;
        }

            .footer__bottom .phone span {
                font-size: 28.63px;
                text-decoration: none !important;
            }

            .footer__bottom .phone a {
                margin: auto;
            }

    .footer__bottom--about {
        margin: auto;
        font-size: 28.63px;
        padding: 0 20px;
        text-align: center;
    }

    .footer__bottom--img {
        width: 337.48px;
        margin: 30px auto 60px auto;
    }

    .footer__connect-btn {
        width: 321.12px;
        height: 71.59px;
        color: #5D2D7E;
        margin: 30px auto 60px auto;
        font-size: 28.63px;
    }
    /* Слайды должны иметь авто-высоту по контенту */
    .hero__slider_recipies--mobile .hero__card_clips {
        transform: rotate(30deg);
        top: 50px;
    }

    .hero__slider_recipies--mobile .swiper-slide {
        height: auto;
    }

    .recepies__btn--top .hero__card-btn {
        border-width: 2px;
    }
    /* ✦ Мобильное меню фильтров "Время готовки" ✦ */
    .cooking-menu {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: none;
        opacity: 0;
        visibility: hidden;
        background: #7D69AC;
        overflow-y: auto;
        overflow-x: hidden;
        /* состояние "открыто" — JS добавляет этот класс */
        /* внутренний контейнер, который масштабируем */
        /* кнопка закрытия (крестик) в правом верхнем углу */
        /* ✦ Блок "книга + фильтры" внутри меню ✦ */
        /* сама картинка книги */
        /* форма с фильтрами поверх книги */
    }

        .cooking-menu.cooking-menu--visible {
            display: block;
            opacity: 1;
            visibility: visible;
        }

    .cooking-menu__inner {
        position: relative;
        width: 767px;
        height: 100%;
        margin: 0 auto;
        transform-origin: left top;
        transform: scale(var(--scale));
    }

    .cooking-menu__close {
        position: absolute;
        z-index: 10;
        top: 36px;
        right: 54px;
        width: 60px;
        height: 60px;
        border: none;
        background: transparent;
        cursor: pointer;
    }

        .cooking-menu__close svg {
            width: 28.76px;
            height: 28.76px;
            color: #FFFFFF;
        }

    .cooking-menu .hero__book--filters {
        position: absolute;
        top: 155.8px;
        left: 67.11px;
        width: 100%;
    }

    .cooking-menu .hero__book_wrap--filters {
        display: block;
        width: 100%;
        height: auto;
    }

    .cooking-menu .hero__book_box-wrap--mobile {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .cooking-menu .hero__book_box {
        width: 45.54px;
        height: 45.54px;
    }

    .cooking-menu .hero__book_box-icon {
        width: 45.54px;
    }

    .cooking-menu .hero__book_box img {
        width: 45.54px;
        max-width: unset;
    }

    .cooking-menu .hero__book_box--one {
        top: 138px;
        left: 153px;
    }

    .cooking-menu .hero__book_box--two {
        top: 310px;
        left: 121px;
    }

    .cooking-menu .hero__book_box--three {
        top: 474px;
        left: 93px;
    }

    .cooking-menu .hero__book_box--for {
        top: 635px;
        left: 65px;
    }

    .cooking-menu .hero__book_box--five {
        top: 792px;
        left: 53px;
    }

    .cooking-menu .hero__book_box:after {
        left: -40px;
        top: -32px;
        height: 100px;
        width: 490px;
    }

    .cooking-menu .hero__book_box--one::after {
        top: -36px;
        transform: rotate(-3deg);
    }

    .cooking-menu .hero__book_box--five::after {
        top: -18px;
    }

    .cooking-menu .hero__controls {
        top: 952px;
        left: 314px;
    }

    .cooking-menu .hero__controls-wrap {
        row-gap: 38.35px;
    }

    .cooking-menu .hero__control_item {
        height: 122.24px;
    }

    .cooking-menu .hero__control_item--reset {
        width: 378.71px;
    }

    .cooking-menu .hero__control_item--all {
        width: 651.95px;
    }

    .cooking-menu .hero__control_label {
        gap: 19.18px;
        border-radius: 0 150px 150px 0;
    }

    .cooking-menu .hero__control_text {
        font-size: 38.35px;
    }

    .cooking-menu .hero__control_icon {
        width: 45.54px;
        height: 45.54px;
        margin-left: 28.76px;
    }

        .cooking-menu .hero__control_icon img {
            width: 23.97px;
            height: 23.97px;
        }

    .cooking-menu .menu__mobile--logo {
        top: 4.69vw;
        left: 57.53px;
        width: 146.21px;
    }
}

@media screen and (max-width: 640px) {
    .hero__btn {
        border-width: 2px;
    }
    /* стили для горизонтальной ориентации смартфона */
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 480px) {
    .menu__mobile_wrap {
        padding-top: 52vh;
    }

    .menu__mobile_item {
        font-size: 32px;
    }

    .menu__mobile--img {
        width: 35%;
    }
}

@media screen and (min-width: 1024px) {
    .desktop-hidden,
    .menu__mobile_content,
    .menu__mobile_button {
        display: none !important;
    }

    .recepies__instructions_page-type--one .recepies__instructions_list > .recepies__instructions_card:nth-child(5) {
        grid-column: 1/-1;
    }

    .recepies__instructions_page-type--five .recepies__instructions_list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

        .recepies__instructions_page-type--five .recepies__instructions_list > .recepies__instructions_card:nth-child(-n+3) {
            grid-column: span 2;
        }

        .recepies__instructions_page-type--five .recepies__instructions_list > .recepies__instructions_card:nth-child(n+4) {
            grid-column: span 3;
        }

    .recepies__instructions_page-type--nine .recepies__instructions_list > .recepies__instructions_card:nth-child(5) {
        grid-column: 1/-1;
    }

    .recepies__instructions_page-type--ten > .recepies__instructions_card:nth-child(-n+3) {
        grid-column: span 2;
    }

    .recepies__instructions_page-type--long-1 {
        --rows-count: 8;
        --extra-block-count: 0;
        --img-h: 500px;
        --extra-margin: calc(var(--rows-block-h) + var(--extra-blocks-h) + var(--img-h) - var(--work-area-h));
        margin-bottom: calc(var(--extra-margin) - 30px);
        /* переписываем высоту самой картинки */
    }

        .recepies__instructions_page-type--long-1 .recepies__instructions_picture-wrap {
            height: auto;
        }

        .recepies__instructions_page-type--long-1 .recepies__instructions_picture {
            height: var(--img-h);
        }

    .ingredients__inner_main::after {
        height: 800px;
    }

    .ingredients__chapters_two .ingredients__inner_main::after {
        background: url("../images/bg/bg-ingredients.webp") right top/contain no-repeat;
        height: 500px;
    }

    .ingredients__chapters_three .ingredients__list--second {
        grid-template-columns: repeat(2, minmax(190px, 1fr));
    }

    .ingredients__chapters_three .ingredients__chapters_wrap {
        margin-bottom: -255px;
        margin-top: 25px;
    }

    .main__bg-bottom {
        overflow: visible;
    }

    .hero__bookmark {
        transition: all 0.4s ease-in-out;
    }

        .hero__bookmark:hover, .hero__bookmark.active {
            clip-path: polygon(0 0, calc(50% - 54px) 0, 50% 18px, calc(50% + 54px) 0, 100% 0, 100% 100%, 0 100%);
            background-color: #FFFFFF;
            transform: translateY(-20px);
        }

        .hero__bookmark .hero__bookmark--bubble {
            margin-top: 15px;
        }

        .hero__bookmark .hero__bookmark--icon {
            margin-top: 5px;
        }

        .hero__bookmark .hero__bookmark--title {
            margin-top: -10px;
        }

    .hero__bookmark--first:hover, .hero__bookmark--first.active {
        transform: rotate(-4deg) translateY(-20px);
    }

    .hero__bookmark--second:hover, .hero__bookmark--second.active {
        transform: rotate(-2deg) translateY(-20px);
    }

    .hero__bookmark--fourth:hover, .hero__bookmark--fourth.active {
        transform: rotate(2deg) translateY(-20px);
    }

    .hero__bookmark--fifth:hover, .hero__bookmark--fifth.active {
        transform: rotate(4deg) translateY(-20px);
    }

    .hero__bookmark--sixth:hover, .hero__bookmark--sixth.active {
        transform: rotate(6deg) translateY(-20px);
    }

    .hero__btn::hover {
        background: #8B5BA3;
        color: #FFFFFF;
    }

        .hero__btn::hover img {
            filter: brightness(0) invert(1);
        }

    .hero__slider_recipies--desktop.swiper .swiper-slide.cards--3, .hero__slider_recipies--desktop.swiper .swiper-slide.cards--4, .hero__slider_recipies--desktop.swiper .swiper-slide.cards--2 {
        padding: 0 200px 0 0;
    }

    .hero__slider_recipies--desktop.swiper .swiper-slide-next, .hero__slider_recipies--desktop.swiper .swiper-slide-next a {
        pointer-events: none;
    }

    .cooking-time__option:hover {
        background-color: #f6f1ff;
        box-shadow: 0 4px 10px rgba(63, 47, 114, 0.18);
    }

    .btn__buy--hero {
        position: fixed;
        bottom: 50px;
        right: -20px;
    }

    .btn__buy--recepies {
        position: fixed;
        left: -30px;
        top: 730px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        background: none;
        z-index: 5;
    }

    .hero__bg-image.hero__bg-header {
        visibility: hidden;
    }

    .header__bg_tablet {
        display: block;
    }

    .header::before {
        content: none;
    }

    .header__titles--recepies {
        top: 140px;
        width: 100%;
    }

    .recepies__btn--top {
        top: 150px;
    }

    .recepies .hero__bookmark.active {
        left: calc(-1 * ((100vw - 767px) / 2 + 5px));
    }

    .ingredients__inner_main {
        margin-top: -50px;
    }

    .hero__book {
        margin-top: 635px;
    }

    .hero__search {
        top: -575px;
    }

    .main .hero__header::after {
        content: none;
    }

    .btn__buy {
        right: -165px;
    }

    .btn__buy--static-mobile {
        right: -73px;
    }

    .btn__buy--floating-mobile {
        right: -10px;
    }

    .hero__header .recepies__btn--top {
        top: 120px;
    }
}

@media (min-width: 500px) and (max-width: 766px) {
    .btn__buy--floating-mobile, .btn__buy--static-mobile {
        transform: scale(0.7) !important;
    }

    .btn__buy--static-mobile {
        right: -155px;
    }
}

@media screen and (min-width: 640px) {
    .hero__btn {
        border-width: 2px;
    }
}

.btn__buy--floating-mobile {
    position: fixed !important;
    bottom: 50px !important;
    right: -8px;
    z-index: 1000;
    top: auto !important;
}