body {
    font-family: "Frank Ruhl Libre";
    color: #434455;
    background-color: #ffffff;
    
}

main{

/*background-image: linear-gradient(rgba(191, 165, 136, 0.5),
            rgba(161, 134, 111, 0.7)),
     url(../images/fon3.JPG);*/
    margin: 0 auto;
        max-width: 1440px;
       
        background-position: center;
        background-size: cover;

        
}

a {
    text-decoration: none;
}

ul,
ol {
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0;
    gap: 40px;
        color: #404bbf;
}

.button {
    cursor: pointer;
}

.container {
    width: 1158px;
    padding: 0 15px;
    margin: 0 auto;
}

img {
    display: block;
}
/*header*/

.section {
    padding-top: 120px;
    padding-bottom: 120px;}
/* --- Шапка --- */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    /* фон убираем */
    padding: 15px 40px;
    
}
.header-container{
    max-width: 1180px;
    margin: 0 auto;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
/* Логотип */
.header-logo {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #2a2a2a;
    text-decoration: none;
    
}

.header-logo:hover {
    color: #6b4b8a;
}

/* Навигация */
.header-list {
    list-style: none;
    display: flex;
    gap: 36px;
    margin: 0;
    padding: 0;
}

.header-link {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: 600;
    text-decoration: none;
    color: #2a2a2a;
    transition: color 0.3s ease;
}

.header-link:hover {
    color: #6b4b8a;
}

/* Контакты */
.header-address {
   align-items: center;
    display: flex;
    gap: 20px;
    
}

.header-address a {
    text-decoration: none;
    color: #2a2a2a;
    transition: color 0.3s ease;
}

.header-address a:hover {
    color: #6b4b8a;
}

.contact-pill.phone{
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}
.contact-pill:hover {
    background: rgba(107, 75, 138, 0.12);
    /* акцент при наведении */
    color: #6b4b8a;
}
/* Логотип */
.header-logo {
    font-size: 20px;
    font-weight: bold;
    color: #0E2A4A;
    /* тёмно-синий */
    text-decoration: none;
}

/* Навигация */
.header-list {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-link {
    text-decoration: none;
    font-weight: 500;
    color: #0E2A4A;
    transition: color .3s;
}

.header-link:hover {
    color: #CBB79C;
    /* золотисто-бежевый при наведении */
}

/* Контакты */
.header-address {
    display: flex;
}

.address-list {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-address a {
    text-decoration: none;
    font-size: 14px;
    color: #555;
    transition: color .3s;
}

.header-address a:hover {
    color: #0E2A4A;
}
:root {
    --ink: #0E2A4A;
    /* тёмно-синий бренда */
    --beige: #F5EFE6;
    /* светлый беж для фона */
    --beigeAcc: #CBB79C;
    /* тёплый беж акцент */
}

/* фиксированная прозрачная шапка поверх hero */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    transition: background .3s, box-shadow .3s, color .3s;
}

/* внутреннее выравнивание как было */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 40px;
}

/* --- Вид сверху (прозрачная) — белые ссылки на фото --- */
.header .header-logo,
.header .header-link,
.header .header-address a {
    color: #fff;
    text-decoration: none;
}

.header .header-link:hover {
    color: var(--beigeAcc);
}

/* --- После скролла: бежевый фон и тёмные ссылки --- */
.header.scrolled {
    background: rgba(245, 239, 230, .95);
    /* var(--beige) */
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.header.scrolled .header-logo,
.header.scrolled .header-link,
.header.scrolled .header-address a {
    color: var(--ink);
}

.header.scrolled .header-link:hover {
    color: var(--beigeAcc);
}

/* чтобы якоря не прятались под фикс-шапку */
:root {
    --header-h: 64px;
}

/* подгони, если нужно */
body {
    scroll-padding-top: var(--header-h);
}

.hero {
    padding-top: var(--header-h);
}

/* чтобы верх hero не оказался под шапкой */

/* аккуратность списков */
.header-list,
.address-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 28px;
}

.header-address a {
    font-size: 14px;
    opacity: .9;
}

/*main*/
/*Section 1*/

html,
body {
    height: 100%;
    margin: 0;
}

.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    /* Удаляем старые фоновые картинки/цвета */
    background: none !important;
}

.bg-video {
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.overlay {
    position: absolute;
    inset: 0;
    /* лёгкий градиент + затемнение, чтобы логотип читался */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.38));
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: 100px 16px 40px;
    /* запас под фикс-хедер */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

.logo-emblem {
    max-width: 320px;
    width: 80%;
    margin-bottom: 20px;
}

/* кнопка */
.main-button {
    margin-top: 18px;
    padding: 14px 34px;
    font-size: 18px;
    font-weight: 600;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}

.main-button:hover {
    background: #fff;
    color: #000;
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}


/*.logo-emblem {
   
    max-width: 100%;
    margin: 0 auto 20px;
    display: block;
    opacity: 0;
    transform: translateY(-50px);
    animation: fadeInUp 2s ease-out forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.dark-bg {
    background-color: #2e2f42;
        background-image: linear-gradient(rgba(46, 47, 66, 0.7),
                rgba(199, 183, 94, 0.7)),
            url(../images/fon.jpg);
        margin: 0 auto;
        max-width: 1440px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    padding-bottom: 188px;
        padding-top: 188px;
}
    
   

.main-text {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    color: #2e2f42;
    text-align: center;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp 1.2s ease-out forwards;
    animation-delay: 0.3s;
    text-shadow:
        0 0 8px rgba(46, 47, 66, 0.4),
        0 0 12px rgba(46, 47, 66, 0.3);
}

.sub-text {
    display: block;
    margin-top: 10px;
    font-size: 40px;
    color: #2e2f42;
    text-shadow:
        0 0 6px rgba(46, 47, 66, 0.3),
        0 0 10px rgba(46, 47, 66, 0.2);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


text-shadow: 0 0 8px rgba(46, 47, 66, 0.5),
0 0 12px rgba(46, 47, 66, 0.3);



.main-titles {
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    line-height: 1.11;
    letter-spacing: 0.02em;
    text-align: center;
    color: #2e2f42;
    text-transform: capitalize;
}

.main-button {
font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #141414;
    background-color:transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 16px 32px;
    border: none;
    display: block;
    margin: 0 auto;
    min-width: 169px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 48px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}

.main-button:hover,.main-button:focus {
    background-color:#838488 ;
}*/


     


/*Section 2*/
/* ==== Features Section ==== */

/* ==== Galerie – layout ==== */
.gallery-section {
    padding: 40px 0 28px;
}

.gallery-title {
    text-align: center;
    font-size: clamp(22px, 3.2vw, 34px);
    letter-spacing: 0.06em;
    margin: 0 0 18px;
    opacity: .9;
}

.gallery-viewport {
    /* центрируем и ограничиваем ширину (не на всю) */
    width: min(62vw, 980px);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .06);
}
/* ==== Анимации ==== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.from-left {
    transform: translateX(-80px);
}

.from-right {
    transform: translateX(80px);
}

.reveal.active.from-left,
.reveal.active.from-right {
    transform: translateX(0);
}
/* ==== Features (шахматка) — поддержка двух схем классов ==== */

/* Контейнер секции */
.features,
.ym-features {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 80px 10%;
    background: #f9f9f9;
    /* светлый фон */
}

/* Один элемент (ряд) */
.feature,
.ym-feature {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

/* Инверсия направления для 2-го и 4-го блока */
.feature--reverse,
.ym-feature--right {
    flex-direction: row-reverse;
}

/* На телефонах — всё в колонку и центр */
@media (max-width: 900px) {

    .feature,
    .ym-feature,
    .feature--reverse,
    .ym-feature--right {
        flex-direction: column;
        text-align: center;
    }
}

/* Колонки медиа и текста */
.feature__media,
.ym-feature_media {
    flex: 1 1 45%;
    min-width: 260px;
}

.feature__media img,
.ym-feature_media img {
    display: block;
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

.feature__content,
.ym-feature_content {
    flex: 1 1 45%;
    min-width: 260px;
}

/* Заголовок и текст */
.feature__title,
.ym-feature_title {
    font-size: clamp(26px, 3.2vw, 34px);
    line-height: 1.2;
    margin: 0 0 14px;
    letter-spacing: .02em;
}

.feature__text,
.ym-feature_text {
    font-size: clamp(16px, 1.7vw, 18px);
    line-height: 1.7;
    color: #333;
}
/* ===== ym-features: фон как на ПК на мобиле/планшете ===== */
.ym-features {
    position: relative;
    z-index: 0;
}

/* Псевдоэлемент тянет фон на всю ширину вьюпорта */
@media (max-width: 1024px) {
    .ym-features::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        /* растягиваем к краям экрана */
        margin-right: -50vw;
        background: #f9f9f9;
        /* тот же фон, что на ПК */
        z-index: -1;
        /* под содержимым */
    }

    /* чуть меньше боковые поля внутри секции, чтобы текст не лип к краям */
    .ym-features {
        padding: 56px 16px;
        gap: 56px;
    }
}

/* ПК — ничего не меняем */
@media (min-width: 1025px) {
    .ym-features {
        padding: 80px 10%;
        gap: 80px;
        background: #000000;
    }
}
/* Кнопка (если есть) */
.feature__btn,
.ym-feature_btn {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 18px;
    border-radius: 10px;
    background: #e8d6b0;
    color: #222;
    text-decoration: none;
    font-weight: 600;
}

/* ==== Плавное появление (reveals) ==== */

.reveal,
.ym-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal.in,
.ym-reveal.in {
    opacity: 1;
    transform: translateY(0);
}

.reveal.from-left,
.ym-from-left {
    transform: translateX(-24px);
}

.reveal.from-right,
.ym-from-right {
    transform: translateX(24px);
}

.reveal.from-left.in,
.ym-from-left.in,
.reveal.from-right.in,
.ym-from-right.in {
    transform: translateX(0);
}

/* ==== Galerie – layout ==== */
.gallery-section {
    padding: 40px 0 28px;
}

.gallery-title {
    text-align: center;
    font-size: clamp(22px, 3.2vw, 34px);
    letter-spacing: 0.06em;
    margin: 0 0 18px;
    opacity: .9;
}

.gallery-viewport {
    /* центрируем и ограничиваем ширину (не на всю) */
    width: min(62vw, 980px);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .06);
}

.gallery-track {
    display: flex;
    gap: 16px;
    /* расстояние между кадрами */
    padding: 14px;
    will-change: transform;
    transition: transform .6s ease;
    /* слайд */
}

/* Сколько кадров видно одновременно — через CSS-переменную */
:root {
    --visible: 3;
}

/* десктоп: 3 */
@media (max-width: 1024px) {
    :root {
        --visible: 2;
    }
}

/* планшет */
@media (max-width: 640px) {
    :root {
        --visible: 1;
    }
}

/* телефон */

.gallery-slide {
    flex: 0 0 calc((100% - (var(--visible) - 1) * 16px) / var(--visible));
    /* высокие (портрет) фото выглядят аккуратно */
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #e9e9e9;
    /* фон на время загрузки */
}

/* Картинка заполняет слайд, без искажений */
.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* лёгкий fade при смене */
    opacity: 0.98;
    transition: opacity .6s ease;
}

.gallery-track.is-swapping .gallery-slide img {
    opacity: 1;
}

/* уважение к пользователям, кто отключил анимации */
@media (prefers-reduced-motion: reduce) {
    .gallery-track {
        transition: none;
    }

    .gallery-slide img {
        transition: none;
    }
}



/* section 4 */
.portfolio {
    padding-top: 120px;
    padding-bottom: 120px;
}
.section-title-portfolio {
    color: #2e2f42;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.11;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: capitalize;

}

.section-subtitle-portfolio {
    color: #2e2f42;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.02em;

}

.section-text-portfolio {
    color: #434455;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.02em;

}
.icon {
    fill: #f4f4fd;
}

.lis {
    display: flex;
       justify-content: center;
    align-items: center;
    gap: 24px;
    list-style: none;
    
}

.ite {
    width: 40px;
    height: 40px;
}

.lin {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #f4f4fd;
    background-color: #4d5ae5;
    width: 100%;
    height: 100%;
   
}

.portfolio-image {
    display: flex;


}


.lin:focus,
.lin:hover {
    background-color: #404bbf;
        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    

}
.prtf {
padding: 32px 16px;
    border: 1px solid #e7e9fc;
    border-top: none;
}

    .background-text {
            position: relative;
            overflow: hidden;
        
        }

/*footer*/
/* === Footer clean === */
.footer {
    background: #696969;
    /* твой серый фон */
    padding: 60px 0;
    color: #f4f4f4;
    font-family: inherit;
}

.footer__container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1.1fr .8fr 1.1fr;
    /* три колонки */
    gap: 32px;
    align-items: start;
}

.footer__col {
    min-width: 0;
}

.footer__logo {
    text-decoration: none;
    display: inline-block;
    margin-bottom: 10px;
}

.footer__brand {
    color: #a7813c;
    font-weight: 700;
    letter-spacing: .03em;
}

.footer__text {
    color: #f4f4f4;
    opacity: .9;
    line-height: 1.5;
    margin: 0;
}

.footer__title {
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #fff;
}

.footer__icons {
    display: flex;
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__icons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #b38846, #d9b678, #f1e1c1);
    color: #1d0aa3;
    /* иконка */
    text-decoration: none;
    transition: transform .2s ease, filter .2s ease;
}

.footer__icons a:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.footer__form {
    display: flex;
    gap: 10px;
}

.footer__input {
    flex: 1 1 auto;
    min-width: 160px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: none;
    outline: none;
}

.footer__btn {
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    border: none;
    background: #31d0aa;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.footer__btn:hover {
    filter: brightness(1.05);
}

/* Адаптив: на планшет 2 колонки, на мобилу в столбик */
@media (max-width: 992px) {
    .footer__container {
        grid-template-columns: 1fr 1fr;
    }

    .footer__subscribe {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .footer__container {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .footer {
        padding: 40px 0;
    }

    .footer__form {
        flex-direction: column;
    }

    .footer__btn {
        width: 100%;
    }
}
/* === Footer clean === */
.footer {
    background-color: #333;
    /* тёмный фон */
    color: #fff;
    padding: 40px 20px;
    text-align: center;
}

.footer-container {
    max-width: 1000px;
    margin: 0 auto;
}

.footer-logo a {
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}

.footer-logo span {
    color: #a7813c;
    /* золотой акцент */
}

.footer-logo p {
    margin-top: 10px;
    font-size: 14px;
    color: #ccc;
}

.footer-social {
    margin-top: 20px;
}

.footer-social a {
    margin: 0 15px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: #a7813c;
    /* золотой при наведении */
}

/*Section 4*/
.portfolio {
    padding-top: 120px;
    padding-bottom: 120px;
}

.main-portfolio-list {
    display: flex;
    flex-wrap: wrap;
    gap: 48px 24px;
   
}

.main-portfolio-title {
    margin-bottom: 72px;
    font-weight: 700;
        font-size: 36px;
        line-height: 111%;
        letter-spacing: 0.02em;
        text-align: center;
        color: #2e2f42;
        text-transform: capitalize;
}

.main-portfolio-item {
    background: #fff;
        width: calc((100% - 48px) / 3);
        box-shadow: 0 2px 1px 0 rgba(46, 47, 66, 0.08),
                0 1px 1px 0 rgba(46, 47, 66, 0.16), 0 1px 6px 0 rgba(46, 47, 66, 0.08);
        transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.background-text {
    position: relative;
    overflow: hidden;
}
.portfolio-list-item:hover,
.portfolio-list-item:focus {
    box-shadow: 0px 1px 6px rgba(46, 47, 66, 0.08),
        0px 1px 1px rgba(46, 47, 66, 0.16),
        0px 2px 1px rgba(46, 47, 66, 0.08);
}
.portfolio-list-item:hover .main-portfolio-text {
    transform: translateY(0);
}

.main-portfolio-image {
    margin: 0 auto;
}

.main-portfolio-subtitle {
    margin-bottom: 8px;
}

.prtf {
    padding: 32px 16px;
    border: 1px solid #e7e9fc;
    border-top: none;
}
.main-subtitles {
 font-family: "Roboto", sans-serif;
 font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #434455;
    text-align: left;
}
.main-portfolio-text {
font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #434455;
}
.portfolio-tap-text {
    position: absolute;
    top: 0;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #000;
    background: linear-gradient(to right, #b38846, #d9b678, #f1e1c1);
    height: 100%;
    padding: 40px 32px;
    transform: translateY(100%);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.background-text{
    position: relative;
        overflow: hidden;
}
.main-portfolio-item:hover .portfolio-tap-text {
    transform: translateY(0);
    box-shadow: 0px 1px 6px rgba(46, 47, 66, 0.08),
        0px 1px 1px rgba(46, 47, 66, 0.16), 0px 2px 1px rgba(46, 47, 66, 0.08);
}
/*Massages*/


/*Section5*/
#tarifs {
    background: linear-gradient(to bottom, #DCDCDC, #808080);
    padding: 60px 20px;
    color: #1a1a80;
}

.tarif-container {
    max-width: 800px;
    margin: auto;
}

.accordion-btn {
    background-color: #fff;
    color: #1a1a80;
    cursor: pointer;
    padding: 15px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid #ddd;
}

.accordion-btn:hover,
.accordion-btn.active {
    background-color: #e0e0f8;
}

.panel {
    display: none;
    background-color: #f9f9f9;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
    color: #1a1a80;
}

.panel p {
    margin: 0;
    line-height: 1.6;
}





/* Modal */
.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(46, 47, 66, 0.4);
    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
        visibility 250ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 408px;
    min-height: 584px;
    background-color: #fcfcfc;
    border-radius: 4px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12),
        0px 2px 1px rgba(0, 0, 0, 0.2);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 72px 24px 24px 24px;
}

.close-modal-button {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #e7e9fc;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
        border 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.close-modal-button:hover,
.close-modal-button:focus {
    background-color: #404bbf;
    border: none;
}

.close-modal-icon {
    transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.close-modal-button:hover>.close-modal-icon,
.close-modal-button:focus>.close-modal-icon {
    fill: #ffffff;
}

.modal-text {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0.02em;
    color: #2e2f42;
    margin-bottom: 16px;
}

.modal-field {
    margin-bottom: 8px;
}

.modal-label {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.17;
    letter-spacing: 0.04em;
    color: #8e8f99;
    display: block;
    margin-bottom: 4px;
}

.modal-input {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(46, 47, 66, 0.4);
    border-radius: 4px;
    background-color: transparent;
    padding-left: 38px;
    outline: transparent;
    transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-input:focus {
    border-color: #4d5ae5;
}

.modal-send-button:hover,
.modal-send-button:focus {
    background-color: #404bbf;
}

.check-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.17;
    letter-spacing: 0.04em;
    color: #8e8f99;
}

.check-icon {
    display: inline-flex;
}

.check-label {
    font-size: 12px;
    line-height: 1.17;
    letter-spacing: 0.04em;
    color: #8e8f99;
}

.modal-check:checked+.check-text>.check-span {
    background-color: #404bbf;
    border: none;
    fill: #f4f4fd;
}

.modal-field {
    margin-bottom: 8px;
}

.modal-label {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.17;
    letter-spacing: 0.04em;
    color: #8e8f99;
    display: block;
    margin-bottom: 4px;
}

.modal-field-wrap {
    position: relative;
}

.modal-input {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(46, 47, 66, 0.4);
    border-radius: 4px;
    background-color: transparent;
    padding-left: 38px;
    outline: transparent;
    transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-input:focus {
    border-color: #4d5ae5;
}

.modal-one-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-input:focus+.modal-one-icon {
    fill: #4d5ae5;
}

.modal-content {
    margin-bottom: 16px;
}

.modal-textarea {
    width: 100%;
    height: 120px;
    font-size: 12px;
    line-height: 1.17;
    letter-spacing: 0.04em;
    color: rgba(46, 47, 66, 0.4);
    border: 1px solid rgba(46, 47, 66, 0.4);
    border-radius: 4px;
    background-color: transparent;
    padding: 8px 16px;
    outline: transparent;
    resize: none;
    transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-textarea:focus {
    border-color: #4d5ae5;
}

.modal-check {
    margin-bottom: 24px;
}

.checkbox-label {
    font-size: 12px;
    line-height: 1.17;
    letter-spacing: 0.04em;
    color: #8e8f99;
}

.check-span {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    display: inline-flex;
    fill: transparent;
    border: 1px solid rgba(46, 47, 66, 0.4);
    align-items: center;
    justify-content: center;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
        border 250ms cubic-bezier(0.4, 0, 0.2, 1),
        fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.input-check:checked+.checkbox-label>.check-span {
    background-color: #404bbf;
    border: none;
    fill: #f4f4fd;
}

.text-privacy {
    color: #4d5ae5;
}

.modal-send-button {
    display: block;
    min-width: 169px;
    height: 56px;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #ffffff;
    cursor: pointer;
    background-color: #4d5ae5;
    border: none;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 auto;
}
.contact-section {
    background-color: #f5efe3;
    /* золотисто-бежевый */
    color: #001f4d;
    /* тёмно-синий */
    padding: 40px 20px;
    font-family: 'Georgia', serif;
}

.contact-section h2 {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 25px;
    color: #001f4d;
}

.contact-info {
    text-align: center;
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 30px;
}

.contact-info a {
    color: #001f4d;
    text-decoration: none;
    font-weight: bold;
}

.contact-info a:hover {
    text-decoration: underline;
}

.map-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border: 2px solid #001f4d;
    border-radius: 10px;
    overflow: hidden;
}

.instagram-widget {
    margin-top: 40px;
    text-align: center;
}

.instagram-widget h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #001f4d;
}
/* ====== FIX PACK для блока SPA и кнопок ====== */

/* сетка карточек (если пропала) */
.main-portfolio-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

/* каждая карточка */
.main-portfolio-item{ position: relative; }
.background-text{ position: relative; overflow: hidden; }

/* картинка */
.background-text img{ display:block; width:100%; height:auto; border-radius:6px; }

/* всплывающий текст при наведении (оверлей) */
.portfolio-tap-text{
  position:absolute; inset:0;
  background: rgba(255,255,255,.92);
  padding:14px;
  opacity:0; transition: opacity .25s ease;
  z-index:2; /* ниже бейджа времени и кнопки */
}
.main-portfolio-item:hover .portfolio-tap-text{ opacity:1; }

/* бейдж длительности — ВСЕГДА видим */
.main-portfolio-text{
  position:absolute; left:12px; bottom:10px;
  margin:0; padding:6px 10px;
  font:600 12px/1 'Raleway',sans-serif;
  color:#666; background:rgba(255,255,255,.9);
  backdrop-filter: blur(2px);
  border-radius:8px;
  z-index:3 !important;
}

/* строка: название + кнопка справа */
.spa-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:10px;
  position:relative; z-index:3;
}

/* кнопка рядом с названием — скрыта по умолчанию, видна при hover */
.reserve-inline{
  opacity:0; transform: translateY(-2px); pointer-events:none;
  transition: opacity .25s, transform .25s;
}
.main-portfolio-item:hover .reserve-inline{
  opacity:1; transform: translateY(0); pointer-events:auto;
}
/* на мобильных показывать всегда */
/* на мобильных показывать всегда */
@media (max-width:768px) {
    .reserve-inline {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* универсальная кнопка Réserver (розовая) */
.reserve-btn {
    background: #c08080;
    color: #fff;
    border: 0;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    font: 600 14px/1 'Raleway', sans-serif;
    transition: filter .2s, transform .04s;
}

.reserve-btn:hover {
    filter: brightness(1.08);
}

.reserve-btn:active {
    transform: translateY(1px);
}

/* ссылки */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: #c08080;
}

/* если заголовок наезжает на картинку */
.main-portfolio-subtitle {
    margin: 8px 0 0;
}

/* кнопки внутри overlay */
.portfolio-tap-text .reserve-btn {
    /* ← фигурные скобки! */
    margin-top: 10px;
}
/* ========= BASE / ВАЖНЫЕ ПЕРЕМЕННЫЕ ========= */
:root {
    --ink: #0E2A4A;
    /* тёмно-синий фирменный */
    --rose: #c08080;
    /* твой розовый акцент */
}

/* ссылки не должны быть синими по умолчанию */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--rose);
}

/* универсальная кнопка Réserver */
.reserve-btn {
    background: var(--rose);
    color: #fff;
    border: 0;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    font: 600 14px/1 'Raleway', sans-serif;
    transition: filter .2s, transform .04s;
}

.reserve-btn:hover {
    filter: brightness(1.08);
}

.reserve-btn:active {
    transform: translateY(1px);
}

/* ========= SPA КАРТОЧКИ (твой блок Programmes SPA) ========= */

/* сетка карточек (на случай если слетела) */
.main-portfolio-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.main-portfolio-item {
    position: relative;
}

.background-text {
    position: relative;
    overflow: hidden;
}

.background-text img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* всплывающий текст при hover */
.portfolio-tap-text {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .92);
    padding: 14px;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 2;
    /* НИЖЕ бейджа времени и кнопки */
}

.main-portfolio-item:hover .portfolio-tap-text {
    opacity: 1;
}

/* бейдж длительности — ВСЕГДА виден */
.main-portfolio-text {
    position: absolute;
    left: 12px;
    bottom: 10px;
    margin: 0;
    padding: 6px 10px;
    font: 600 12px/1 'Raleway', sans-serif;
    color: #666;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(2px);
    border-radius: 8px;
    z-index: 3 !important;
    /* ВЫШЕ оверлея */
}

/* строка с названием и кнопкой справа */
.spa-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    position: relative;
    z-index: 3;
    /* поверх оверлея */
}

/* кнопка у названия: скрыта по умолчанию, видна при hover */
.reserve-inline {
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}

.main-portfolio-item:hover .reserve-inline {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* на мобилках кнопка всегда видна */
@media (max-width:768px) {
    .reserve-inline {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* ========= TARIFS (карточки прайса) ========= */
.pricing-mini {
    padding: 56px 20px;
}

.pricing-mini__title {
    text-align: center;
    font-family: 'Playfair Display', serif;
    color: var(--ink);
    font-size: 28px;
    margin: 0 0 18px;
}

.pricing-mini__grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pricing-mini__card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
    transition: transform .2s ease;
}

.pricing-mini__card:hover {
    transform: translateY(-4px);
}

.pricing-mini__name {
    margin: 0 0 6px;
    font: 700 18px/1.3 'Raleway', sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink);
}

.pricing-mini__desc {
    margin: 0 0 10px;
    color: #555;
    font-size: 14px;
}

.pricing-mini__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pricing-mini__list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px dashed rgba(0, 0, 0, .08);
}

.pricing-mini__list li:first-child {
    border-top: 0;
}

/* ========= MODAL (бронирование) ========= */
.booking-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2000;
}

.booking-modal.is-open {
    display: block;
}

.booking-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
}

.booking-modal__dialog {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 5vh auto;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.booking-modal__close {
    position: absolute;
    right: 10px;
    top: 8px;
    font-size: 24px;
    line-height: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.booking-modal__title {
     margin: 0 0 12px;
    font-family: 'Playfair Display', serif;
    color: var(--ink);
    font-size: 24px;
}

#bookingForm {
    display: grid;
    gap: 12px;
}

#bookingForm label {
    display: grid;
    gap: 6px;
    color: #2a2a2a;
    font-size: 14px;
}

#bookingForm input,
#bookingForm textarea {
    font: 500 15px/1.3 'Raleway', sans-serif;
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

#bookingForm input:focus,
#bookingForm textarea:focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(192, 128, 128, .15);
}

.booking-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.booking-modal__consent {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
    font-size: 13px;
}

.booking-modal__cta {
    background: var(--ink);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: filter .2s, transform .04s;
}

.booking-modal__cta:hover {
    filter: brightness(1.05);
}

.booking-modal__cta:active {
    transform: translateY(1px);
}

.booking-modal__msg {
    margin: 4px 0 0;
    font-size: 14px;
}

@media (max-width:560px) {
    .booking-modal__row {
        grid-template-columns: 1fr;
    }
}


/* ===== КРУПНЫЕ контакты в хедере ===== */
.header .header-address {
    display: flex;
    gap: 28px;
    /* расстояние между почтой и телефоном */
    align-items: center;
}

.header .header-address a,
.header .header-address .contact-pill {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 22px;
    /* ← основной размер (как было крупно) */
    line-height: 1.1;
    color: #2a2a2a;
    white-space: nowrap;
    /* не переносить на 2 строки */
    padding: 6px 10px;
    /* лёгкая «таблетка» */
    border-radius: 24px;
    background: rgba(0, 0, 0, .05);
    /* если не нужно – см. ниже */
    transition: color .2s ease, background .2s ease;
}

.header .header-address a:hover,
.header .header-address .contact-pill:hover {
    color: #c08080;
    /* твой розовый при наведении */
    background: rgba(192, 128, 128, .15);
}

/* адаптив, чтобы меню не разъезжалось на узких экранах */
@media (max-width: 1024px) {

    .header .header-address a,
    .header .header-address .contact-pill {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .header .header-address {
        gap: 16px;
    }

    .header .header-address a,
    .header .header-address .contact-pill {
        font-size: 18px;
        padding: 5px 8px;
    }
}
/* === HARD RESET для блока Programmes SPA === */

/* контейнер списка */
.main-portfolio-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    /* 3 колонки */
    gap: 24px;
}

@media (max-width:1024px) {
    .main-portfolio-list {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width:640px) {
    .main-portfolio-list {
        grid-template-columns: 1fr;
    }
}

/* каждая карточка занимает всю ширину своей ячейки */
.main-portfolio-item {
    display: block;
    width: 100%;
    min-width: 0;
    position: relative;
}

.background-text {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* изображение — на всю ширину карточки */
.background-text img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* всплывающий текст */
.portfolio-tap-text {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .92);
    padding: 14px;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 2;
}

.main-portfolio-item:hover .portfolio-tap-text {
    opacity: 1;
}

/* бейдж длительности — ВСЕГДА виден, не съезжает */
.main-portfolio-text {
    position: absolute;
    left: 12px;
    bottom: 10px;
    margin: 0;
    padding: 6px 10px;
    font: 600 12px/1 'Raleway', sans-serif;
    color: #666;
    background: rgba(255, 255, 255, .9);
    border-radius: 8px;
    backdrop-filter: blur(2px);
    z-index: 3;
}

/* название + кнопка справа */
.spa-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    position: relative;
    z-index: 3;
}

/* кнопка у названия — показывать при ховере карточки (на мобиле всегда) */
.reserve-inline {
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}

.main-portfolio-item:hover .reserve-inline {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width:768px) {
    .reserve-inline {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* на всякий случай — запрет «странных» узких ширин внутри карточки */
.main-portfolio-item *,
.background-text * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Время отдельной строкой под названием */
.prtf {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 8px;
}

.main-portfolio-subtitle {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.duration {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}
/* контейнер картинки: даём место под бейдж времени */
.background-text {
    position: relative;
    padding-bottom: 36px;
    /* 32–40px: подбери, чтобы хватило места */
    overflow: hidden;
}

/* сам бейдж времени (остается на фото) */
.main-portfolio-text {
    position: absolute;
    left: 12px;
    bottom: 10px;
    margin: 0;
    padding: 6px 10px;
    font: 600 12px/1 'Raleway', sans-serif;
    color: #666;
    background: rgba(255, 255, 255, .9);
    border-radius: 8px;
    z-index: 3;
}

/* заголовок под фото с нормальным отступом сверху */
.spa-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}
.spa-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* распределяет название, время и кнопку */
    gap: 12px;
    margin-top: 8px;
}

.spa-head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.spa-head .main-portfolio-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #444;
}
.spa-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* распределяет название, время и кнопку */
    gap: 12px;
    margin-top: 8px;
}

.spa-head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.spa-head .main-portfolio-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #444;
}
/* Только 5-я карточка: "À base de plantes" */
.main-portfolio-list>li:nth-child(5) .spa-head .main-portfolio-subtitle {
    margin-top: -12px !important;
    /* поднимаем название */
    margin-bottom: 6px;
}

/* ЕСЛИ время уже внутри .spa-head — выровнять его и убрать фон */
.main-portfolio-list>li:nth-child(5) .spa-head .main-portfolio-text {
    position: static !important;
    margin: 0 0 0 12px;
    padding: 0;
    background: transparent;
    color: #666;
    font-weight: 600;
}

/* ЕСЛИ время у тебя всё ещё под фото (НЕ внутри .spa-head),
   просто дадим запас снизу у блока с картинкой */
.main-portfolio-list>li:nth-child(5) .background-text {
    padding-bottom: 44px !important;
}
/* Базовый стиль времени (для всех кроме 5-го) */
.spa-head .main-portfolio-text {
    font-size: 1rem;
    /* такой же как у 5-го */
    font-weight: 600;
    color: #444;
    margin: 0 12px;
}

/* Исключение: 5-й комплекс (À base de plantes) — остаётся тем же */
.main-portfolio-list>li:nth-child(5) .spa-head .main-portfolio-text {
    font-size: 1rem;
    font-weight: 600;
    color: #666;
    /* можно оставить чуть светлее, чтобы выделялся */
    margin: 0 12px;
}
/* Для всех комплексов */
.main-portfolio-list .spa-head .main-portfolio-text {
    font-size: 1rem !important;
    /* перебиваем размер */
    font-weight: 600 !important;
    color: #444 !important;
    margin: 0 12px !important;
}

/* Исключение: 5-й (À base de plantes) */
.main-portfolio-list>li:nth-child(5) .spa-head .main-portfolio-text {
    color: #666 !important;
    /* мягче цвет, размер тот же */
}
/* === ВРЕМЯ У КОМПЛЕКСОВ: единый размер, кроме 5-го === */

/* общий случай: время внутри .spa-head ИЛИ сразу после неё */
.main-portfolio-list li .spa-head .main-portfolio-text,
.main-portfolio-list li .spa-head+.main-portfolio-text {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #444 !important;
    margin: 0 12px !important;
    background: transparent !important;
    position: static !important;
    /* на всякий случай, чтобы не было absolute */
    white-space: nowrap;
}

/* исключение по цвету: 5-й комплекс (À base de plantes) */
.main-portfolio-list>li:nth-child(5) .spa-head .main-portfolio-text,
.main-portfolio-list>li:nth-child(5) .spa-head+.main-portfolio-text {
    color: #666 !important;
    /* мягче цвет, размер тот же (1rem) */
}

/* точечное принудительное правило на 6-й, если вдруг что-то перебивает */
.main-portfolio-list>li:nth-child(6) .spa-head .main-portfolio-text,
.main-portfolio-list>li:nth-child(6) .spa-head+.main-portfolio-text {
    font-size: 1rem !important;
}
/* === Header cart icon === */
.header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    margin-left: 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .25s, transform .08s;
}

.header-cart svg {
    fill: #2a2a2a;
}

.header-cart:hover {
    background: rgba(0, 0, 0, .06);
}

.header-cart:active {
    transform: translateY(1px);
}

/* badge-счётчик */
.header-cart__count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #c08080;
    color: #fff;
    font: 700 12px/18px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    text-align: center;
    box-shadow: 0 2px 6px rgba(192, 128, 128, .5);
}

/* === Панель корзины: плавное появление === */
.cart {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    visibility: hidden;
}

.cart.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}


/* плавающая кнопка "Tarifs" — поднять над корзиной */




    /* растянуть корзину */
   
/* Единый контейнер для Tarifs + корзины */
 .fixed-stack {
    position: fixed;
    right: 20px;
    bottom: 80px;
    /* ← было 20px; поднимем весь блок чуть выше */
    display: flex;
    flex-direction: column;
    /* порядок: сверху Tarifs, ниже корзина */
    align-items: flex-end;
    gap: 14px;
    /* дистанция между ними */
    z-index: 2000;
}



/* Немного косметики кнопке Tarifs (если нужно) */


/* Адаптив: на узких экранах чуть ближе к краю */
@media (max-width: 768px) {
    .fixed-stack {
        right: 10px;
        bottom: 70px;
        gap: 12px;
    }
}





/* Общий стиль: выравнивание названия, времени и кнопки в SPA-комплексах */
.spa-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Название растягивается */
.spa-head .spa-title {
    flex: 1;
    margin: 0;
}

/* Время – всегда видно, не наезжает на кнопку */
.spa-head .main-portfolio-text {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-right: 8px;
    white-space: nowrap;
}

/* Кнопка фиксированная, не сжимается */
.spa-head .reserve-btn {
    flex-shrink: 0;
}

/* Исключение: 5-й комплекс — оставляем твои старые правила */
.main-portfolio-list>li:nth-child(5) .spa-head {
    display: block;
    /* или тот стиль, что у тебя был */
}

/* --- SPA: шапка комплексa в одну линию (заголовок | время | кнопка) --- */
.spa-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    position: relative;
    z-index: 3;
    /* поверх оверлея описания */
}

/* заголовок растягивается */
.spa-head .main-subtitles.main-portfolio-subtitle {
    flex: 1;
    margin: 0;
}

/* ВРЕМЯ именно в шапке — как текст, без бейджа и без абсолютного позиционирования */
.spa-head .main-portfolio-text {
    position: static !important;
    margin: 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    font: 600 1rem/1.1 'Raleway', sans-serif !important;
    color: #444 !important;
    white-space: nowrap;
}

/* кнопка не сжимается */
.spa-head .reserve-inline {
    flex-shrink: 0;
}

/* на всякий случай: оверлей описания ниже шапки */
.portfolio-tap-text {
    z-index: 2;
}

/* если где-то осталось старое «бейдж на фото» — отключаем его только рядом с .spa-head */
.spa-head+.main-portfolio-text {
    display: none !important;
}
/* --- финальная расстановка в правом нижнем углу --- */
.fixed-stack {
    position: fixed;
    right: 20px;
    bottom: 34px;
    /* было 20px — подняли блок выше */
    display: flex;
    flex-direction: column-reverse;
    /* сверху кнопка, ниже корзина */
    align-items: flex-end;
    gap: 18px;
    /* расстояние между кнопкой и корзиной */
    z-index: 2000;
    /* поверх контента */
}

/* внутри стака элементы НЕ фиксированные — позиционируются стеком */
.fixed-stack .floating-btn {
    position: static !important;
    margin: 0 0 6px 0 !important;
    /* ещё чуть-чуть поднять кнопку */
    z-index: 1600;
}

.fixed-stack .cart {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    width: 100%;
    z-index: 1500;
}

/* адаптив: на узких экранах ещё чуть выше */
@media (max-width: 768px) {
    .fixed-stack {
        bottom: 48px;
        gap: 14px;
    }

    .fixed-stack .floating-btn {
        margin-bottom: 8px !important;
    }
}
/* ====== Стек в правом нижнем углу ====== */
.fixed-stack {
    position: fixed;
    right: 20px;
    bottom: 80px;
    /* подняли выше, чтобы не мешать */
    display: flex;
    flex-direction: column;
    /* сверху Tarifs, ниже корзина */
    align-items: flex-end;
    gap: 14px;
    /* расстояние между ними */
    z-index: 2000;
}

/* внутри стека запрещаем свои фиксы/координаты у детей */
.fixed-stack .floating-btn,
.fixed-stack .cart {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: min(92vw, 360px);
    /* аккуратная ширина на узких экранах */
}



/* адаптив */
@media (max-width:768px) {
    .fixed-stack {
        right: 10px;
        bottom: 10px;
        width: min(95vw, 360px);
    }
}
/* Палитра футера */
.site-footer,
.footer-dark-bg {
  --footer-bg: #2b2f36;
  --footer-text: #eef2f5;
  --footer-accent: #f0b3ff;       /* цвет при наведении */
  --footer-muted: #cfd6de;
  background: var(--footer-bg);
  color: var(--footer-text);
}

/* Бренд: крупнее логотип и слоган */
.footer-brand { text-align: center; margin-bottom: 16px; }
.footer-logo {
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.15;
  color:#ffffff;
}
.footer-logo .brand-accent { color: var(--footer-accent); }
.footer-slogan {
  margin-top: 8px;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.5;
  color: #a7813c;
}

/* Социальные ссылки: иконки + текст, красятся вместе */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 18px;           /* расстояние между кнопками */
  margin-top: 14px;
  flex-wrap: wrap;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--footer-text);
  text-decoration: none;
  font-weight: 600;
  transition: color .25s ease, background-color .25s ease, transform .15s ease;
}
.social-link svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
v-form button:hover {
    background: #b67f4f;
    color: #fff;
}
/* ==== Luxe footer polish ==== */
:root {
    --footer-bg1: #2a2f36;
    /* верх футера */
    --footer-bg2: #1f2328;
    /* низ футера */
    --footer-edge: rgba(255, 255, 255, .08);
    --muted: #c9cdd3;
    --gold: #c9a14a;
    /* основной «золото» */
    --gold-strong: #e1b74e;
    /* яркий блик при hover */
}

.footer-dark-bg {
    position: relative;
    padding: 56px 16px 68px;
    /* больше «воздуха» */
    background: linear-gradient(180deg, var(--footer-bg1), var(--footer-bg2));
    border-top: 1px solid var(--footer-edge);
    color: var(--muted);
    text-align: center;
    overflow: visible;
    animation: footer-fade .6s ease both;
    /* мягкое появление */
}

/* легкая текстура/виниьетка */
.footer-dark-bg::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 160%;
    background: radial-gradient(60% 50% at 50% 0%, rgba(255, 255, 255, .06), transparent 60%);
    pointer-events: none;
}

/* логотип */
.footer-dark-bg .footer-logo,
.footer-dark-bg h3 {
    margin: 0 0 10px;
    font-size: clamp(24px, 2.5vw, 34px);
    line-height: 1.2;
    color: #fff;
    letter-spacing: .4px;
    transition: color .25s ease, text-shadow .25s ease;
}

/* золотая буква Y */
.footer-dark-bg .footer-logo .brand-y {
    color: var(--gold);
    text-shadow: 0 0 0 transparent;
    transition: color .25s ease, text-shadow .25s ease;
}

/* слоган */
.footer-dark-bg .footer-slogan,
.footer-dark-bg p {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    opacity: .95;
}

/* соцсети */
.footer-dark-bg .footer-social {
    display: inline-flex;
    gap: 22px;
    align-items: center;
    justify-content: center;
}

.footer-dark-bg .footer-social a {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    color: #e7e9ee;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 999px;
    transition: color .25s ease, background-color .25s ease, filter .25s ease;
}

.footer-dark-bg .footer-social a svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    /* иконка красится как текст */
    opacity: .95;
    transition: opacity .25s ease;
}

/* hover — золотой акцент + мягкое свечение */
.footer-dark-bg .footer-social a:hover {
    color: var(--gold-strong);
    background: rgba(201, 161, 74, .08);
    filter: drop-shadow(0 0 8px rgba(201, 161, 74, .35));
}

.footer-dark-bg .footer-social a:hover svg {
    opacity: 1;
}

/* небольшой эффект при фокусе с клавиатуры */
.footer-dark-bg .footer-social a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    background: rgba(201, 161, 74, .10);
}

/* при hover всю надпись YMassage подсвечиваем мягко */
.footer-dark-bg:hover .footer-logo .brand-y {
    color: var(--gold-strong);
    text-shadow: 0 0 14px rgba(201, 161, 74, .35);
}

/* адаптив: чуть компактнее на телефонах */
@media (max-width: 540px) {
    .footer-dark-bg {
        padding: 44px 14px 54px;
    }

    .footer-dark-bg .footer-social {
        gap: 14px;
    }

    .footer-dark-bg .footer-social a {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* анимация появления */
@keyframes footer-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.footer-social .social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 18px;
    /* было меньше — теперь крупнее */
    color: #f4f4fd;
    text-decoration: none;
    transition: color .25s ease, transform .2s ease;
    padding: 6px 12px;
}

.footer-social .social-link svg {
    width: 24px;
    /* увеличили иконки */
    height: 24px;
    fill: currentColor;
    transition: opacity .25s ease;
}
/* ==== Увеличение размера соцсетей в футере ==== */
.footer-social .social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 20px !important;
    /* 🔥 делаем крупнее текст */
    color: #f4f4fd;
    text-decoration: none;
    transition: color .25s ease, transform .2s ease;
    padding: 6px 12px;
}

.footer-social .social-link svg {
    width: 26px !important;
    /* 🔥 увеличили иконки */
    height: 26px !important;
    fill: currentColor;
    transition: opacity .25s ease;
}
/* ===== Шахматный порядок для .features > .feature ===== */
.features {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* базовая раскладка блока */
.features .feature {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    margin: 0;
    /* чтобы не плодились отступы из старых стилей */
}

/* шахматка: у чётных карточек меняем порядок сторон */
.features>.feature:nth-child(even) {
    flex-direction: row-reverse !important;
}

/* колонки */
.features .feature__media,
.features .feature__content {
    flex: 1 1 45%;
}

/* картинка */
.features .feature__media img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    object-fit: cover;
}

/* текст */
.features .feature__title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #2c2c2c;
}

.features .feature__text {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #555;
}

/* кнопка (если есть) */
.features .feature__btn {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(135deg, #a67c52, #d4af37);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.features .feature__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    background: linear-gradient(135deg, #d4af37, #a67c52);
}

/* адаптив: на телефонах всё в колонку и центр */
@media (max-width: 900px) {

    .features .feature,
    .features>.feature:nth-child(even) {
        flex-direction: column !important;
        text-align: center;
    }
}

/* ===== Анимации (плавное появление) ===== */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: transform .7s ease, opacity .7s ease;
}

.from-left {
    transform: translateX(-60px);
}

.from-right {
    transform: translateX(60px);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}
/* Разворот только для блоков, где фото должно быть справа */
.feature--right {
    flex-direction: row-reverse;
}

/* На мобильных всё в колонку */
@media (max-width: 900px) {
    .feature--right {
        flex-direction: column;
        text-align: center;
    }
}
/* Заголовки секций */
section.feature .feature__title {
    font-size: 2.4rem !important;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Тексты секций */
section.feature .feature__text {
    font-size: 1.3rem !important;
    line-height: 1.8;
    color: #000000;
}
/* ===== Y Massage: Features ===== */
.ym-features {
    display: flex;
    flex-direction: column;
    gap: 72px;
    padding: 40px 5% 20px;
}

.ym-feature {
    display: flex;
    align-items: center;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
}

.ym-feature--right {
    flex-direction: row-reverse;
}

/* колонки */
.ym-feature__media,
.ym-feature__content {
    flex: 1 1 0;
}

/* картинка */
.ym-feature__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

/* заголовок/текст — КРУПНЕЕ и читаемо */
.ym-feature__title {
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 14px;
    color: #222;
    /* если фон светлый; на тёмном переопределим ниже */
}

.ym-feature__text {
    font-size: clamp(16px, 2.2vw, 20px);
    line-height: 1.75;
    color: #333;
    margin: 0;
}

/* Кнопка (если понадобится) */
.ym-feature__btn {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    background: linear-gradient(135deg, #a67c52, #d4af37);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.ym-feature__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}

/* Адаптив */
@media (max-width: 900px) {

    .ym-feature,
    .ym-feature--right {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
}

/* ===== Анимации появления ===== */
.ym-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: transform .7s ease, opacity .7s ease;
    will-change: transform, opacity;
}

.ym-from-left {
    transform: translateX(-60px);
}

.ym-from-right {
    transform: translateX(60px);
}

.ym-reveal.ym-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* Тёмная секция? — сделай светлый текст точечно (пример) */
/* #feature-massage .ym-feature__title, #feature-massage .ym-feature__text { color:#f3f3f3; } */
/* Заголовки секций — ещё больше */
.ym-feature__title {
    font-size: clamp(28px, 3.8vw, 42px) !important;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 18px;
    color: #222;
}

/* Текст описания — крупнее и удобнее для чтения */
.ym-feature__text {
    font-size: clamp(18px, 2.6vw, 22px) !important;
    line-height: 1.8 !important;
    color: #333;
}
/* Стиль заголовка */
.ym-section-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    text-align: center;
    margin-bottom: 60px;
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    /* изначально скрыт */
    transform: translateY(40px);
    /* смещен вниз */
    transition: opacity 1.2s ease, transform 1.2s ease;
}

/* Когда активирован */
.ym-section-title.ym-visible {
    opacity: 1;
    transform: translateY(0);
}
.ym-section-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    text-align: center;
    margin-bottom: 60px;
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 2px;

    opacity: 0;
    /* скрыт */
    transform: translateY(40px);
    /* сдвинут вниз */
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.ym-section-title.ym-visible {
    opacity: 1;
    transform: translateY(0);
}
.ym-section-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    text-align: center;
    margin-bottom: 60px;
    color: #222;
    /* тёмно-серый/почти чёрный */
    text-transform: uppercase;
    letter-spacing: 2px;

    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}
/* Секция */
.offers {
    max-width: 1100px;
    margin: 80px auto;
    padding: 0 16px;
}

.offers-title {
    text-align: center;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: .04em;
    margin-bottom: 28px;
}

/* Ряды «шахматкой» */
.offer {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 56px 0;
}

.offer.is-reverse {
    flex-direction: row-reverse;
}

.offer-media {
    flex: 1 1 50%;
}

.offer-media img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
    object-fit: cover;
    aspect-ratio: 4/3;
    /* красиво кадрируем */
}

.offer-text {
    flex: 1 1 50%;
}

.offer-text h3 {
    font-size: clamp(22px, 3.2vw, 32px);
    margin: 0 0 10px;
}

.offer-text p {
    font-size: clamp(16px, 2.2vw, 18px);
    line-height: 1.65;
    margin: 0;
}

/* Анимации появления слева/справа */
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
    will-change: transform, opacity;
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Адаптив: в колонку на телефонах */
@media (max-width: 820px) {

    .offer,
    .offer.is-reverse {
        flex-direction: column;
    }

    .offer-media img {
        aspect-ratio: 16/10;
    }

    .offer-text {
        text-align: center;
    }
}
.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: none !important;
    /* убираем мрамор */
}

.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}
.about,
.offers {
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
        url("../images/fon3.JPG") no-repeat center center;
    background-size: cover;
    padding: 80px 20px;
}
.header-logo {
    display: flex;
    align-items: center;
    gap: 5px;
    /* расстояние между лого и текстом */
    text-decoration: none;
    color: inherit;
    font-weight: bold;
    white-space: nowrap;
    /* не переносить Y Massage */
}

/* Зарезервированное место под картинку */
.header-logo__img-wrapper {
    display: inline-block;
    width: 40px;
    /* фиксированная ширина под лого */
    height: 40px;
    /* фиксированная высота под лого */
    flex-shrink: 0;
    /* не даст сжиматься */
}

/* Лого внутри */
.header-logo__img {
    height: 50px;
    /* подгони под размер текста */
    width: auto;
    display: block;
    margin-right: 16px;
    position: relative;
    top:-2px;
    /* чуть опустить вниз, если нужно */
}
.footer-logo {
    text-align: center;
    margin: 20px 0 10px;
    /* сверху 20px, снизу 10px */
}

.footer-logo img {
    height: 50px;
    /* размер логотипа */
    width: auto;
    opacity: 0.9;
    /* лёгкая прозрачность, если хочешь элегантный эффект */
}
.footer-logo {
    display: flex;
    justify-content: center;
    /* центрируем по горизонтали */
    margin-top: 2px;
}

.footer-logo img {
    height: 60px;
    width: auto;
}
.footer-logo {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

.footer-logo .brand-y {
    margin-right: -18px;
}
.btn-tarif {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 18px;
    background-color: #0d3b66;
    /* твой тёмно-синий */
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-tarif:hover {
    background-color: #145ea8;
    /* подсветка при наведении */
}
.spa-group {
    padding: 80px 20px;
    background: #f8f8f8;
    text-align: center;
}

.group-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.group-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.3s ease;
}

.group-card:hover {
    transform: translateY(-6px);
}

.group-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
   
}

.group-card h3 {
    margin: 10px 0;
    color: #0d3b66;
}

.group-card .price {
    display: block;
    margin: 12px 0;
    font-size: 20px;
    font-weight: bold;
    color: #d4a017;
    /* золотистый */
}

/* Цены */
.price-box {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    background: #f9fbfd;
    font-weight: 600;
    color: #0d3b66;
}

.price-box .time {
    font-weight: 500;
    color: #627d98;
}

.price-box .price {
    font-weight: 700;
}

/* Комбо-список */
.combo-list {
    margin: 10px 0 0;
    padding-left: 18px;
    color: #334e68;
}

.combo-list li {
    margin: 6px 0;
}
/* =========================
   Saunas & Jacuzzi — GRID
   ========================= */
.spa-equipements {
    padding: 80px 20px;
    background: #ffffff;
    /* при желании поменяй фон секции */
}

.spa-equipements .section-title {
    text-align: center;
    font-size: 32px;
    color: #0d3b66;
    margin: 0 0 8px;
}

.spa-equipements .section-subtitle {
    text-align: center;
    color: #66788a;
    margin: 0 0 32px;
}

.equipements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* =========================
   CARD
   ========================= */
.equipement-card {
    background: #fff;
    border-radius: 12px;
    text-align: center;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.equipement-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

/* вертикальное фото сверху */
.equipement-card img {
    width: 100%;
    height: 320px;
    /* вертикальный вид */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 14px;
    transition: transform .5s ease;
}

.equipement-card:hover img {
    transform: scale(1.04);
}

/* заголовок и описание */
.equipement-card h3 {
    margin: 4px 0 6px;
    color: #0d3b66;
    font-size: 20px;
}

.equip-desc {
    margin: 0 0 16px;
    color: #486581;
    font-size: 15px;
    line-height: 1.5;
}

/* =========================
   OFFER (описание + цена + кнопка)
   ========================= */
.offer {
    margin: 10px 0;
    padding: 12px;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    background: #f9fbfd;
    text-align: left;
    /* лучше читается длинный текст */
}

.offer p {
    margin: 0 0 8px;
    font-weight: 500;
    color: #334e68;
    font-size: 15px;
    line-height: 1.45;
}

.offer strong {
    color: #0d3b66;
}

/* кнопка под каждой ценой */
.btn-tarif {
    display: inline-block;
    padding: 8px 18px;
    background: #0d3b66;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background .3s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-tarif:hover {
    background: #145ea8;
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

/* подпись "за одного человека" */
.equipement-card .note {
    margin-top: 12px;
    font-size: .85rem;
    color: #829ab1;
    font-style: italic;
}

/* =========================
   ANIMATION: медленное плавное появление
   ========================= */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
   
}

.reveal.in-view {
    opacity: 1;
    transform: none;
}

/* Ступенчатое появление карточек (stagger) */
.equipements-grid .reveal:nth-child(1) {
    transition-delay: .15s;
}

.equipements-grid .reveal:nth-child(2) {
    transition-delay: .35s;
}

.equipements-grid .reveal:nth-child(3) {
    transition-delay: .55s;
}

/* =========================
   ACCESSIBILITY: respect reduce motion
   ========================= */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .equipement-card,
    .equipement-card:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    }

    .equipement-card img,
    .equipement-card:hover img {
        transform: none;
    }
}

/* =========================
   RESPONSIVE TWEAKS
   ========================= */
@media (max-width: 480px) {
    .equipement-card img {
        height: 260px;
    }

    .btn-tarif {
        width: 100%;
        text-align: center;
    }

    /* удобнее тапать на телефоне */
}

/* Делает текст и блоки точно видимыми */
#spa-equipements .equipement-card {
    color: #0d3b66 !important;
}

#spa-equipements .equipement-card p,
#spa-equipements .equipement-card .equip-desc {
    color: #486581 !important;
}

/* Offer (цена + кнопка) */
#spa-equipements .offer {
    display: block !important;
    margin: 10px 0 !important;
    padding: 12px !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 8px !important;
    background: #f9fbfd !important;
    text-align: left !important;
}

#spa-equipements .offer p {
    margin: 0 0 8px !important;
}

/* Кнопка — точно видимая */
#spa-equipements .btn-tarif {
    display: inline-block !important;
    padding: 8px 18px !important;
    background: #0d3b66 !important;
    color: #fff !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* На случай, если где-то обнулялись ссылки */
#spa-equipements a {
    color: inherit;
    text-decoration: none;
}
/* Общий фон для всех 4 блоков */
.massage,
.sauna,
.visage,
.gift-cards {
    background-image: url("images/fon3");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px 20px;
    border-radius: 12px;
    color: white;
}


.yg-spa {
    padding: 80px 0;
}

.yg-container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

.yg-section-title {
    font-size: clamp(24px, 3.2vw, 34px);
    margin: 0 0 28px;
}

.yg-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 28px;
}

.yg-card {
    grid-column: span 4;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
}

@media (max-width: 1024px) {
    .yg-card {
        grid-column: span 6;
    }
}

@media (max-width: 680px) {
    .yg-card {
        grid-column: span 12;
    }
}

/* Вертикальные изображения */
.yg-media {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.yg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
}

.yg-body {
    padding: 18px 18px 20px;
}

.yg-title {
    font-size: 20px;
    margin: 4px 0 6px;
}

.yg-desc {
    margin: 0 0 12px;
    opacity: .85;
    line-height: 1.45;
}

.yg-offers {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: grid;
    gap: 8px;
}

.yg-offers li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(0, 0, 0, .14);
}

.yg-offers li strong {
    font-weight: 700;
}

.yg-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    background: #0d2a5a;
    /* тёмно-синий бренда */
    color: #fff;
    /* белый текст */
    font-weight: 600;
    transition: color .25s ease, background .25s ease, transform .25s ease, opacity .25s ease;
}

.yg-btn:hover {
    color: #d4af37;
    /* золотой при наведении */
    background: #0d2a5a;
    /* фон остаётся синим */
    transform: translateY(-2px);
    opacity: .95;
}

.yg-note {
    margin: 10px 0 0;
    font-size: 13px;
    opacity: .7;
}

/* Плавное появление */
.yg-reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: ygFadeUp .8s ease .1s both;
}

.yg-card:nth-child(2).yg-reveal {
    animation-delay: .2s;
}

.yg-card:nth-child(3).yg-reveal {
    animation-delay: .3s;
}

@keyframes ygFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Кнопка-картинка с e-mail */
.email-img-btn {
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.email-img-btn img {
    display: block;
    height: auto;
    transition: transform .2s ease, opacity .2s ease;
}

.email-img-btn:hover img {
    transform: translateY(-1px);
    opacity: .95;
}

/* ---- Reveal animation ---- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal.in-view {
    opacity: 1;
    transform: none;
}

/* Показывать контент, если IO не сработал */
.no-io .reveal {
    opacity: 1 !important;
    transform: none !important;
}
/* ===== Y Massage Modal (изолировано по префиксу ym-) ===== */
.ym-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    /* скрыто по умолчанию */
    z-index: 9999;
}

.ym-modal.is-open {
    display: grid;
    place-items: center;
}

.ym-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.ym-modal__content {
    position: relative;
    z-index: 1;
    width: min(92vw, 520px);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
    animation: ym-pop .25s ease;
}

.ym-modal__title {
    margin: 0 0 12px;
    text-align: center;
}

.ym-modal__form input,
.ym-modal__form textarea {
    width: 100%;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
}

.ym-modal__form textarea {
    resize: vertical;
    min-height: 88px;
}

.ym-modal__btn {
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: 8px;
    background: #1e3a8a;
    color: #fff;
    cursor: pointer;
    transition: .2s;
}

.ym-modal__btn:hover {
    filter: brightness(.92);
}

.ym-modal__close {
    position: absolute;
    right: 10px;
    top: 8px;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
}

.ym-modal__msg {
    margin: 10px 0 0;
    text-align: center;
    font-weight: 600;
}

@keyframes ym-pop {
    from {
        transform: scale(.97);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

/* Блокируем прокрутку фона только при открытой модалке */
body.ym-modal-open {
    overflow: hidden;
}
.ym-reveal,
.reveal {
    opacity: 1 !important;
    transform: none !important;
}
.header {
    position: fixed;
    /* всегда наверху */
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background-color: transparent;
    /* прозрачный при загрузке */
    transition: background-color 0.6s ease;
    z-index: 1000;
}

.header.scrolled {
    background-color: rgba(0, 0, 0, 0.8);
    /* тёмный после скролла */
}
/* Текст в хедере всегда белый */
.header,
.header a,
.header .header-logo__text,
.header .header-link,
.header .contact-pill {
    color: #fff !important;
}

/* Чтобы при hover тоже был читаемый */
.header .header-link:hover,
.header .contact-pill:hover {
    color: #e6d6be;
    /* можешь выбрать свой оттенок */
}
.ym-features,
.ym-features h2,
.ym-features h3,
.ym-features p {
    color: #fff !important;
}
/* Базовое состояние секции (прозрачная) */
.ym-features {
    background-color: transparent;
    transition: background-color 0.8s ease;
    padding: 80px 10%;
}

/* Когда появляется при скролле — затемнение */
.ym-features.scrolled {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Текст всегда белый */
.ym-features,
.ym-features h2,
.ym-features h3,
.ym-features p,
.ym-features a {
    color: #fff !important;
}
/* секция: сначала прозрачная, при скролле затемняется */
.ym-features {
    background-color: transparent;
    transition: background-color .8s ease;
    padding: 80px 10%;
}

.ym-features.scrolled {
    background-color: rgba(0, 0, 0, .6);
}

/* текст всегда белый внутри секции */
.ym-features,
.ym-features h2,
.ym-features h3,
.ym-features p,
.ym-features a {
    color: #fff !important;
}

/* шахматная анимация элементов */
.ym-feature_media,
.ym-feature_content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

/* направление “слева/справа” */
.ym-feature:not(.ym-feature--right) .ym-feature_media {
    transform: translateX(-40px);
}

.ym-feature:not(.ym-feature--right) .ym-feature_content {
    transform: translateX(40px);
}

.ym-feature--right .ym-feature_media {
    transform: translateX(40px);
}

.ym-feature--right .ym-feature_content {
    transform: translateX(-40px);
}

/* когда входит в зону видимости */
.ym-feature_media.in,
.ym-feature_content.in {
    opacity: 1;
    transform: none;
}
/* ===== Бургер (по умолчанию скрыт, чтобы ПК вид не менялся) ===== */
.header-burger {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    cursor: pointer;
}

.header-burger span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 4px auto;
    border-radius: 2px;
    transition: .25s;
}

/* цвета бургера зависят от состояния шапки (прозрачная/скролл) */
.header:not(.header_scrolled):not(.scrolled):not(.menu-open) .header-burger span {
    background: #fff;
}

.header.header_scrolled .header-burger span,
.header.scrolled .header-burger span,
.header.menu-open .header-burger span {
    background: var(--ink, #0B2B4A);
}

/* анимация "крестик" */
.header-burger.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.header-burger.open span:nth-child(2) {
    opacity: 0;
}

.header-burger.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ===== Планшет: чуть плотнее интервалы ===== */
@media (max-width: 992px) {
    .header-list {
        gap: 28px;
    }

    .header_logo_img {
        height: 34px;
    }
}

/* ===== Телефон: логотип + бургер в шапке, меню выпадает снизу ===== */
@media (max-width: 768px) {

    /* показать бургер */
    .header-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* контейнер шапки: логотип слева, бургер справа */
    .header-container {
        gap: 12px;
    }

    /* выпадающее меню — фиксировано под шапкой, чтобы не ломать герой */
    .header-nav {
        position: fixed;
        top: var(--header-h, 64px);
        /* у тебя уже есть переменная — используем её */
        left: 0;
        right: 0;
        display: none;
        /* скрыто по умолчанию */
        background: rgba(11, 43, 82, .97);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        padding: 16px 0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
        z-index: 999;
        /* ниже самой шапки */
    }

    .header-nav.open {
        display: block;
    }

    /* пункты меню вертикально, читабельные */
    .header-list {
        flex-direction: column;
        gap: 14px;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .header-link {
        font-family: inherit;
        font-size: 18px;
        font-weight: 600;
        color: #fff !important;
        /* на тёмном фоне меню */
        text-decoration: none;
        padding: 10px 14px;
        border-radius: 10px;
    }

    .header-link:hover {
        background: rgba(255, 255, 255, .08);
    }

    /* телефон и корзину на малых скрываем (как на твоём макете) */
    .header-address,
    .header-cart {
        display: none !important;
    }
}
/* блокируем прокрутку страницы, когда открыто меню на телефоне */
.body-lock {
    overflow: hidden;
}
@media (max-width: 768px) {
    .header-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: none;
        cursor: pointer;
        z-index: 1100;
    }

    .header-burger span {
        display: block;
        height: 2px;
        width: 22px;
        margin: 4px auto;
        background: #fff;
        border-radius: 2px;
        transition: .3s;
    }

    .header.scrolled .header-burger span,
    .header.menu-open .header-burger span {
        background: #0b2b52;
    }

    .header-burger.open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .header-burger.open span:nth-child(2) {
        opacity: 0;
    }

    .header-burger.open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .header-nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: rgba(11, 43, 82, .95);
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        padding: 20px 0;
        backdrop-filter: blur(6px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
    }

    .header-nav.open {
        display: flex;
    }

    .header-link {
        color: #fff !important;
        font-size: 18px;
    }

    .header-address,
    .header-cart {
        display: none !important;
    }
}
@media (max-width:768px) {
    .header-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 0;
        background: none;
    }

    .header-burger span {
        height: 2px;
        width: 22px;
        background: #fff;
        margin: 4px auto;
        border-radius: 2px;
    }

    .header-address,
    .header-cart {
        display: none !important;
    }

    .header-nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        display: none;
        background: rgba(11, 43, 82, .95);
        padding: 16px 0;
    }

    .header-nav.open {
        display: flex;
    }

    .header-link {
        color: #fff !important;
        font-size: 18px;
    }
}
/* Сколько слайдов видно одновременно */
:root {
    --visible: 3;
}

@media (max-width:1024px) {
    :root {
        --visible: 2;
    }
}

@media (max-width:640px) {
    :root {
        --visible: 1;
    }
}

/* Вьюпорт и трек */
.gallery-viewport {
    position: relative;
    overflow: hidden;
    /* скрываем лишнее */
    border-radius: 12px;
}

.gallery-track {
    display: flex;
    will-change: transform;
    transition: transform .45s ease;
    /* анимация прокрутки */
}

/* Каждый слайд занимает 1/--visible ширины */
.gallery-slide {
    flex: 0 0 calc(100% / var(--visible));
    aspect-ratio: 3/4;
    /* можно поменять */
    position: relative;
    overflow: hidden;
}

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

/* Стрелки */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s;
}

.gallery-arrow:hover {
    background: rgba(0, 0, 0, .65);
}

.gallery-prev {
    left: 10px;
}

.gallery-next {
    right: 10px;
}

/* отключаем стрелку, если двигаться некуда */
.gallery-arrow[disabled] {
    opacity: .35;
    pointer-events: none;
}
:root {
    --visible: 3;
}

@media (max-width:1024px) {
    :root {
        --visible: 2;
    }
}

@media (max-width:640px) {
    :root {
        --visible: 1;
    }
}/* ====== TABLET (ничего не ломаем на ПК) ====== */
@media (max-width: 1024px) {

    /* Показываем по 2 карточки */
    :root {
        --visible: 2;
    }

    /* Чуть больше кликабельность стрелок */
    .gallery-arrow {
        width: 44px;
        height: 44px;
        font-size: 28px;
    }

    .gallery-prev {
        left: 8px;
    }

    .gallery-next {
        right: 8px;
    }
}

/* ====== PHONE ====== */
@media (max-width: 640px) {

    /* Показываем по 1 карточке */
    :root {
        --visible: 1;
    }

    /* Стрелки крупнее и ближе к краям */
    .gallery-arrow {
        width: 48px;
        height: 48px;
        font-size: 30px;
        background: rgba(0, 0, 0, .40);
    }

    .gallery-prev {
        left: 6px;
    }

    .gallery-next {
        right: 6px;
    }

    /* Мягче скругление вьюпорта, чтобы фото «дышали» */
    .gallery-viewport {
        border-radius: 10px;
    }

    /* Если картинки слишком «высокие», делаем более квадратное окно */
    .gallery-slide {
        aspect-ratio: 4 / 5;
    }

    /* можно 1/1, если хочешь квадрат */
}

/* ====== Мелкие улучшения под тач ====== */
@media (hover: none) {
    .gallery-arrow:hover {
        background: rgba(0, 0, 0, .45);
    }

    /* отключаем «яркий» hover на тач */
}

/* Если слайдов меньше либо равно видимому числу — прячем стрелки (чисто визуально) */
@media (max-width: 9999px) {

    /* работает на всех ширинах, логика — через CSS */
    .gallery-viewport:has(.gallery-slide:nth-child(-n + var(--visible))) .gallery-arrow {
        display: none;
    }
}

/* Если селектор :has не поддерживается — JS уже отключит стрелки, это просто визуальный бонус */
/* ===========================
   SPA GROUP — адаптив только для этой секции
   Десктоп остаётся как у тебя сейчас
   =========================== */

/* ——— планшет ≤ 1024px ——— */
@media (max-width: 1024px) {
    .spa-group {
        padding: 60px 20px;
    }

    /* 2 карточки в ряд, поменьше расстояния */
    .spa-group .group-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-top: 28px;
    }

    /* изображение одинаковой высоты, аккуратный кроп */
    .spa-group .group-card img {
        aspect-ratio: 16 / 10;
        /* можно 4/3, если хочешь выше */
        object-fit: cover;
        width: 100%;
        height: auto;
    }

    .spa-group .group-card {
        padding: 16px;
        border-radius: 12px;
    }

    .spa-group .group-card h3 {
        font-size: 20px;
        margin: 8px 0;
    }

    .spa-group .group-card p {
        font-size: 15px;
        line-height: 1.5;
    }

    /* цена и время в одну строку, но чуть компактнее */
    .spa-group .price-box {
        gap: 10px;
        padding: 8px;
        font-size: 15px;
    }
}

/* ——— телефон ≤ 640px ——— */
@media (max-width: 640px) {
    .spa-group {
        padding: 44px 16px;
    }

    /* 1 карточка в ряд */
    .spa-group .group-cards {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 20px;
    }

    /* более «высокое» изображение для мобильного */
    .spa-group .group-card img {
        aspect-ratio: 4 / 3;
        /* можно 1 / 1 для квадрата */
        object-fit: cover;
    }

    .spa-group .group-card {
        padding: 14px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
    }

    .spa-group .group-card h3 {
        font-size: 18px;
        margin: 6px 0;
    }

    .spa-group .group-card p {
        font-size: 14px;
    }

    /* блок с ценой — в колонку, удобно читать и тапать */
    .spa-group .price-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px;
        font-size: 14px;
    }

    .spa-group .price-box .time {
        font-weight: 600;
    }

    .spa-group .price-box .price {
        font-size: 18px;
        font-weight: 700;
    }

    /* кнопка — на всю ширину, удобный тап */
    .spa-group .btn-tarif {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 16px;
        border-radius: 12px;
        min-height: 44px;
    }
}
/* ==========================
   Адаптив секции Features — как в Saunas & Jacuzzi
   ========================== */
@media (max-width: 1024px) {

    /* общий контейнер — аккуратные отступы */
    .ym-feature,
    .feature {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        text-align: center;
        padding: 40px 20px;
    }

    /* изображение — немного ниже и ровное */
    .ym-feature_media img,
    .feature_media img {
        width: 100%;
        max-width: 600px;
        /* ограничим ширину, чтобы не растягивалось */
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }

    /* текст — центр и чуть меньше */
    .ym-feature_content,
    .feature_content {
        flex: none;
        max-width: 600px;
    }

    .ym-feature_content h2,
    .feature_content h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .ym-feature_content p,
    .feature_content p {
        font-size: 15px;
        line-height: 1.6;
    }
}

/* Телефон ≤ 640px */
@media (max-width: 640px) {

    .ym-feature,
    .feature {
        padding: 32px 16px;
        gap: 20px;
    }

    .ym-feature_media img,
    .feature_media img {
        aspect-ratio: 1 / 1;
        max-width: 100%;
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    .ym-feature_content h2,
    .feature_content h2 {
        font-size: 20px;
    }

    .ym-feature_content p,
    .feature_content p {
        font-size: 14px;
        line-height: 1.5;
    }
}
/* ====== Tablet ≤1024px ====== */
@media (max-width: 1024px) {

    /* 2 карточки в ряд, компактнее отступы */
    .main-portfolio-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    /* фото ровные и не слишком высокие */
    .background-text img {
        aspect-ratio: 4 / 3;
        height: auto;
        /* если где-то задано height:300 — переопределим */
        object-fit: cover;
    }

    /* overlay-текст и бейдж времени немного меньше */
    .portfolio-tap-text {
        padding: 12px;
        font-size: 14px;
    }

    .main-portfolio-text {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* кнопку на планшете лучше показывать сразу */
    .reserve-inline {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .reserve-btn {
        padding: 10px 14px;
        font-size: 14px;
        border-radius: 10px;
    }
}

/* ====== Phone ≤640px ====== */
@media (max-width: 640px) {

    /* 1 карточка в ряд */
    .main-portfolio-list {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* делаем карточку “плоской”, чтобы меньше растягивалась по высоте */
    .background-text img {
        aspect-ratio: 16 / 10;
        /* можно 4/3, если хочешь выше */
        height: auto;
        object-fit: cover;
        border-radius: 10px;
    }

    /* overlay-текст переносим ПОД фото (на тач hover нет) */
    .portfolio-tap-text {
        position: static;
        inset: auto;
        opacity: 1;
        background: transparent;
        padding: 10px 0 0;
        z-index: 1;
        transition: none;
    }

    /* бейдж времени тоже переносим в поток */
    .main-portfolio-text {
        position: static;
        margin-top: 6px;
        padding: 6px 10px;
        font-size: 12px;
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.04);
        border-radius: 8px;
    }

    /* шапка с названием и кнопкой */
    .spa-head {
        gap: 8px;
    }

    /* кнопка всегда видима и удобна для тапа */
    .reserve-inline {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .reserve-btn {
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 10px;
    }
}
/* ====== FEATURES — адаптив (ПК не трогаем) ====== */

/* Планшет ≤ 1024px: компактнее, ровные картинки, центрируем текст */
@media (max-width: 1024px) {
    .ym-features {
        padding: 60px 6%;
        gap: 56px;
    }

    /* каждый ряд становится колонкой, даже “правые” развороты */
    .ym-feature,
    .ym-feature--right {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 22px;
    }

    /* медиа: не фикс. высота, аккуратная пропорция */
    .ym-feature_media img {
        width: 100%;
        height: auto;
        /* перекрываем height:360px */
        aspect-ratio: 4 / 3;
        /* можно 3/2 если хочешь выше */
        object-fit: cover;
        max-width: 880px;
        /* чтобы не растягивалось на широких планшетах */
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
    }

    /* текстовый блок */
    .ym-feature_content {
        max-width: 880px;
        flex: none;
        margin: 0 auto;
    }

    .ym-feature_title {
        font-size: clamp(24px, 2.4vw, 28px);
        margin: 0 0 10px;
    }

    .ym-feature_text {
        font-size: 16px;
        line-height: 1.6;
    }

    /* кнопка */
    .ym-feature_btn {
        display: inline-block;
        padding: 10px 16px;
        border-radius: 10px;
    }
}

/* Телефон ≤ 640px: ещё компактнее, удобные тап-таргеты */
@media (max-width: 640px) {
    .ym-features {
        padding: 40px 16px;
        gap: 40px;
    }

    .ym-feature,
    .ym-feature--right {
        gap: 18px;
    }

    .ym-feature_media img {
        aspect-ratio: 1 / 1;
        /* квадратные превью — выглядят чище на мобилке */
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
    }

    .ym-feature_title {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .ym-feature_text {
        font-size: 14px;
        line-height: 1.5;
    }

    .ym-feature_btn {
        width: 100%;
        min-height: 44px;
        text-align: center;
        padding: 12px 14px;
        border-radius: 12px;
    }
}

/* На тач-устройствах ховеры не нужны — оставим мягкое появление */
@media (hover: none) {
    .ym-reveal {
        transition: opacity .6s ease, transform .6s ease;
    }
}
/* ====== FEATURES — без анимации и с серым фоном на мобильных ====== */
@media (max-width: 1024px) {

    /* Серый фон как на ПК, без эффектов */
    .ym-features {
        background: #279827;
        /* мягкий серый */
    }

    /* Отключаем анимацию появления */
    .ym-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Чтобы всё сразу отображалось */
    .ym-feature,
    .ym-feature--right {
        opacity: 1;
        transform: none;
    }
}
.jacuzzi-section {
    background: linear-gradient(135deg, #f2e6d9, #e8dcc8);
    padding: 60px 20px;
    text-align: center;
    animation: fadeIn 1s ease-in-out;
}

.section-title {
    color: #0a1f44;
    font-size: 2.2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-intro {
    color: #fff;
    background-color: rgba(10, 31, 68, 0.6);
    display: inline-block;
    padding: 12px 25px;
    border-radius: 8px;
    margin-bottom: 40px;
    line-height: 1.6;
}

.jacuzzi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.jacuzzi-card {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jacuzzi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.jacuzzi-card h3 {
    color: #0a1f44;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.duration,
.price {
    color: #7b5e2f;
    font-weight: 600;
}

.desc {
    color: #333;
    margin: 10px 0 20px;
    line-height: 1.5;
}

.btn-reserve {
    background-color: #0a1f44;
    color: #fff;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 6px;
    transition: background-color 0.3s ease;
    font-weight: 500;
}

.btn-reserve:hover {
    background-color: #7b5e2f;
    color: #fff;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 🌸 SECTION EVJF SPA */
.evjf-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #f2e6d9, #e8dcc8);
    text-align: center;
    animation: fadeIn 1s ease-in-out;
}

/* Контейнер с фото по центру и карточками по бокам */
.evjf-container {
    display: grid;
    grid-template-columns: 1fr minmax(420px, 680px) 1fr;
    gap: 40px;
    align-items: center;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto 50px;
}

/* Карточки формул */
.evjf-card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}

.evjf-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Заголовок */
.evjf-title {
    color: #0a1f44;
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Цена и длительность */
.evjf-price {
    color: #7b5e2f;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 12px;
}

.evjf-duration {
    color: #555;
    font-weight: 500;
}

/* Список услуг */
.evjf-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 28px;
    color: #333;
    line-height: 1.7;
}

.evjf-list li::before {
    content: "• ";
    color: #7b5e2f;
}

/* Картинка по центру — больше и выразительнее */
.evjf-image img {
    width: 100%;
    max-width: 680px;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.evjf-image img:hover {
    transform: scale(1.05);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

/* Кнопка бронирования */
.btn-evjf {
    background-color: #0a1f44;
    color: #fff;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 8px;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 600;
}

.btn-evjf:hover {
    background-color: #7b5e2f;
    transform: translateY(-3px);
}

/* Примечания */
.evjf-notes {
    max-width: 950px;
    margin: 0 auto;
    font-size: 1rem;
    color: #333;
    line-height: 1.8;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
}

/* Эффект появления */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 📱 Адаптация для телефонов и планшетов */
@media (max-width: 950px) {
    .evjf-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .evjf-card {
        text-align: center;
    }

    .evjf-image img {
        max-width: 95%;
        width: 95%;
        border-radius: 16px;
    }
}
/* Секция бронирования — фон и отступы в твоей гамме */
.reservation-section {
    background: linear-gradient(135deg, #f2e6d9, #e8dcc8);
    padding: 70px 20px;
}

.reservation-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Заголовок */
.res-title {
    color: #0b2343;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Информационная плашка */
.res-note {
    background: rgba(11, 35, 67, .07);
    border-left: 4px solid #d4af37;
    color: #2e2e2e;
    padding: 14px 18px;
    border-radius: 8px;
    text-align: center;
    margin: 0 auto 28px;
    max-width: 920px;
    line-height: 1.6;
}

/* Обёртка виджета */
.booking-widget {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
    padding: 8px;
    /* тонкая рамка вокруг iframe */
}

/* Сам iframe у SimplyBook создаётся скриптом. На всякий случай делаем его растягиваемым */
.booking-widget iframe {
    width: 100% !important;
    min-height: 820px;
    /* можно увеличить, если виджет высокий */
    border: 0;
    display: block;
}


/* =========  JACUZZI – АДАПТАЦИЯ  ========= */

/* Планшеты ≤1024px */
@media (max-width: 1024px) {
    .jacuzzi-section {
        padding: 40px 16px;
    }

    .jacuzzi-section .section-title {
        font-size: 1.8rem;
        letter-spacing: 0.5px;
        margin-bottom: 16px;
    }

    .jacuzzi-section .section-intro {
        font-size: 1rem;
        line-height: 1.5;
        padding: 12px 16px;
        border-radius: 8px;
        display: inline-block;
    }

    .jacuzzi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .jacuzzi-card {
        padding: 18px;
        border-radius: 10px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
    }

    .jacuzzi-card h3 {
        font-size: 1.2rem;
        margin-bottom: 6px;
    }

    .jacuzzi-card .duration,
    .jacuzzi-card .price {
        font-size: 0.95rem;
    }

    .jacuzzi-card .desc {
        font-size: 0.95rem;
        margin: 8px 0 16px;
        line-height: 1.45;
    }

    .jacuzzi-section .btn-reserve {
        padding: 10px 14px;
        font-size: 0.95rem;
        border-radius: 6px;
    }
}

/* Телефоны ≤600px */
@media (max-width: 600px) {
    .jacuzzi-section {
        padding: 28px 12px;
        text-align: center;
    }

    .jacuzzi-section .section-title {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }

    .jacuzzi-section .section-intro {
        font-size: 0.95rem;
        padding: 10px 12px;
        border-radius: 6px;
        display: block;
        /* ширина по контейнеру */
        margin: 0 auto 14px;
        line-height: 1.45;
    }

    .jacuzzi-grid {
        grid-template-columns: 1fr;
        /* по одному в колонку */
        gap: 12px;
    }

    .jacuzzi-card {
        padding: 16px;
        box-shadow: 0 5px 14px rgba(0, 0, 0, .10);
    }

    .jacuzzi-card h3 {
        font-size: 1.1rem;
    }

    .jacuzzi-card .duration,
    .jacuzzi-card .price {
        font-size: 0.9rem;
    }

    .jacuzzi-card .desc {
        font-size: 0.9rem;
        margin: 8px 0 14px;
        line-height: 1.45;
    }

    .jacuzzi-section .btn-reserve {
        width: 100%;
        /* удобная кнопка на мобиле */
        padding: 12px 16px;
        font-weight: 600;
    }
}
@media (max-width:1024px) {

    /* галерея/портфолио */
    .main-portfolio-list {
        display: flex;
        flex-wrap: wrap;
        gap: 32px 20px;
    }

    .main-portfolio-item {
        width: calc((100% - 20px)/2);
        box-shadow: 0 1px 4px rgba(46, 47, 66, .12);
    }

    /* изображения в карточках */
    .main-portfolio-item img,
    .main-portfolio-image {
        width: 100%;
        height: auto;
    }

    /* оверлей-текст становится статичным (на тач нет hover) */
    @media (hover:none) {
        .portfolio-tap-text {
            transform: none !important;
        }
    }

    .portfolio-tap-text {
        padding: 24px 20px;
        height: auto;
        box-shadow: none;
    }

    .main-portfolio-subtitle {
        font-size: 18px;
        line-height: 1.3;
    }

    .main-portfolio-text,
    .portfolio-tap-text p {
        font-size: 15px;
    }

    /* кнопки Réserver/Sélectionner чуть крупнее и без “прыжков” */
    .reserve-btn,
    ._reserve-btn,
    .reserve-inline,
    .sb_btn {
        font-size: 14px;
        padding: 10px 14px;
        border-radius: 8px;
    }

    /* 2-я секция оборудования SPA — без анимации и на сером фоне */
    #spa-equipements {
        background: #f0f0f0 !important;
        animation: none !important;
    }
}
@media (max-width:768px) {

    /* сетка */
    .main-portfolio-list {
        gap: 24px;
    }

    .main-portfolio-item {
        width: 100%;
    }

    /* оверлей превращаем в обычный блок под картинкой */
    .background-text {
        overflow: visible;
        position: relative;
    }

    .portfolio-tap-text {
        position: static;
        background: none;
        padding: 16px 0 0;
        box-shadow: none;
        transform: none;
    }

    /* типографика поуже */
    .main-portfolio-subtitle {
        font-size: 17px;
    }

    .main-portfolio-text,
    .portfolio-tap-text p {
        font-size: 14px;
    }

    /* кнопка на всю ширину – удобно тапать */
    .reserve-btn,
    ._reserve-btn,
    .reserve-inline,
    .sb_btn {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        padding: 12px 18px;
        font-size: 15px;
    }

    /* приглушить тени на карточках */
    .main-portfolio-item {
        box-shadow: 0 1px 3px rgba(46, 47, 66, .1);
    }

    /* аккордеон тарифов – увеличим зоны клика */
    .accordion-btn {
        padding: 16px 18px;
        font-size: 16px;
    }

    .accordion-panel {
        padding: 14px 0 6px;
    }
}
@media (max-width:360px) {

    .container,
    .yg-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .reserve-btn,
    ._reserve-btn,
    .reserve-inline {
        padding: 10px 12px;
        font-size: 14px;
    }
}
/* обёртка твоего виджета */
.booking-widget {
    position: relative;
    overflow: hidden;
}

/* высоту iframe можно подправить при необходимости */
.booking-widget iframe {
    width: 100%;
    border: 0;
    display: block;
    height: 1200px;
}

/* если внизу снова появится служебная строка — мягко перекрываем фоновым цветом секции */
.booking-widget::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    background: #f1e1c1;
    /* поставь свой фон секции */
    pointer-events: none;
    z-index: 2;
}

/* мобильные отступы вокруг блока бронирования */
@media (max-width:768px) {
    .booking-widget {
        margin-left: -8px;
        margin-right: -8px;
    }
}
:root {
    --ink: #2E2F42;
    /* тёмно-синий */
    --rose: #c80880;
    /* розово-золотой акцент (если другой – подставь свой) */
}

/* единый стиль CTA */
.reserve-btn,
._reserve-btn,
.reserve-inline,
.sb_btn {
    background: var(--rose);
    color: #fff;
    font-weight: 600;
    transition: filter .25s, transform .05s;
}

.reserve-btn:hover,
._reserve-btn:hover,
.reserve-inline:hover,
.sb_btn:hover {
    filter: brightness(1.08);
}

.reserve-btn:active,
._reserve-btn:active,
.reserve-inline:active,
.sb_btn:active {
    transform: translateY(1px);
}
/* ======================= TABLET ≤1024px ======================= */
@media (max-width:1024px) {

    /* SPA-карточки: 2 колонки, картинки не гигантские */
    .main-portfolio-list {
        display: flex;
        flex-wrap: wrap;
        gap: 24px 16px;
    }

    .main-portfolio-item {
        width: calc((100% - 16px)/2);
    }

    .main-portfolio-item img,
    .background-text img {
        width: 100%;
        height: 220px;
        /* фиксируем высоту на планшете */
        object-fit: cover;
        /* обрезаем по краям, без растяжения */
        border-radius: 12px;
        display: block;
    }

    /* оверлей превращаем в статичный текст */
    .portfolio-tap-text {
        position: static;
        background: none;
        padding: 16px 0 0;
        height: auto;
        transform: none;
        box-shadow: none;
    }

    /* кнопка "Réserver" — компактнее */
    .reserve-btn,
    .reserve-inline,
    ._reserve-btn {
        width: auto;
        min-width: 180px;
        display: inline-flex;
        padding: 10px 14px;
        font-size: 15px;
        align-self: flex-start;
    }
}

/* ======================= MOBILE ≤768px ======================= */
@media (max-width:768px) {

    /* SPA-карточки: 1 колонка, уменьшить отступы */
    .main-portfolio-list {
        gap: 20px;
    }

    .main-portfolio-item {
        width: 100%;
    }

    .main-portfolio-item img,
    .background-text img {
        width: 100%;
        height: 180px;
        /* на телефоне ещё ниже */
        object-fit: cover;
        border-radius: 12px;
    }

    .main-portfolio-subtitle {
        font-size: 18px;
        margin: 8px 0;
    }

    .main-portfolio-text {
        font-size: 14px;
        line-height: 1.45;
    }

    /* кнопка "Réserver" — не на всю ширину и не громоздкая */
    .reserve-btn,
    .reserve-inline,
    ._reserve-btn {
        width: auto;
        min-width: 170px;
        padding: 10px 16px;
        font-size: 15px;
        border-radius: 10px;
        margin-top: 8px;
    }

    /* ===== ГРУППОВЫЕ ФОРМУЛЫ (EVJF/Privatisation) ===== */
    /* подгони под свои контейнеры: .group-formules / #evjf */
    .group-formules,
    #evjf {
        max-width: 100%;
        margin: 0 auto;
    }

    .group-formules .card,
    #evjf .card {
        padding: 14px;
        border-radius: 16px;
    }

    .group-formules img,
    #evjf img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 12px;
    }

    /* ===== Jacuzzi privatif ===== */
    /* подгони селектор, если у тебя .jacuzzi-privatif */
    .jacuzzi,
    .jacuzzi-privatif {
        max-width: 100%;
    }

    .jacuzzi .card,
    .jacuzzi-privatif .card {
        padding: 14px;
    }

    .jacuzzi img,
    .jacuzzi-privatif img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 12px;
    }

    .jacuzzi .title,
    .jacuzzi-privatif .title {
        font-size: 18px;
    }

    /* заголовки секций короче и ближе к контенту */
    section h2 {
        font-size: 22px;
        margin: 16px 0 10px;
    }

    /* страхуемся от фиксированных высот, заданных атрибутами */
    img[width][height] {
        height: auto !important;
    }

    /* ===== SimplyBook виджет в телефоне ===== */
    .booking-widget {
        position: relative;
        overflow: hidden;
        margin: 0 -8px;
    }

    .booking-widget iframe {
        width: 100%;
        border: 0;
        display: block;
        height: 1200px;
    }

    /* если внизу снова прилипает технический низ — закрываем фоном секции */
    .booking-widget::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 48px;
        background: #f1e1c1;
        pointer-events: none;
        z-index: 2;
    }
}

/* ======================= VERY SMALL ≤360px ======================= */
@media (max-width:360px) {

    .reserve-btn,
    .reserve-inline,
    ._reserve-btn {
        padding: 9px 12px;
        font-size: 14px;
    }
}
/* ===== МОБИЛЬНАЯ СЕТКА ДЛЯ КАРТОЧЕК НА САЙТЕ ===== */
@media (max-width:768px) {

    /* 1 колонка для всех карточек программ SPA */
    .main-portfolio-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .main-portfolio-item {
        width: 100%;
    }

    /* картинки одной высоты и без растяжений */
    .main-portfolio-item img,
    .background-text img {
        width: 100%;
        height: 180px;
        /* одинаковая высота */
        object-fit: cover;
        /* обрезаем края, не тянем */
        border-radius: 12px;
        display: block;
    }

    /* текст-оверлей превращаем в обычный блок под фото */
    .portfolio-tap-text {
        position: static;
        background: none;
        padding: 12px 0 0;
        height: auto;
        transform: none;
        box-shadow: none;
    }

    /* компактная кнопка Réserver, не на всю ширину */
    .reserve-btn,
    .reserve-inline,
    ._reserve-btn {
        width: auto;
        min-width: 170px;
        padding: 10px 16px;
        font-size: 15px;
        border-radius: 10px;
        display: inline-flex;
        justify-content: center;
        align-self: flex-start;
    }

    /* Групповые формулы (если у секции есть такие классы/ID — оставь, иначе можно удалить) */
    .group-formules,
    #evjf,
    .jacuzzi,
    .jacuzzi-privatif {
        max-width: 100%;
        margin: 0 auto;
    }

    .group-formules img,
    #evjf img,
    .jacuzzi img,
    .jacuzzi-privatif img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 12px;
    }

    /* чуть компактнее заголовки секций */
    section h2 {
        font-size: 22px;
        margin: 14px 0 10px;
    }

    /* на всякий случай убираем влияние html-атрибутов width/height */
    img[width][height] {
        height: auto !important;
    }
}
/* ===== МОБИЛЬНАЯ СЕТКА ВНУТРИ ВИДЖЕТА SIMPLYBOOK ===== */
@media (max-width:768px) {

    /* Категории и список услуг: одна колонка */
    #sb_main .sb-grid,
    #sb_main .sb_list,
    #sb_main .categories,
    #sb_main .services,
    #sb_main .service-list {
        display: block !important;
    }

    /* ячейки сетки — на всю ширину */
    #sb_main .sb-grid>*,
    #sb_main .sb_list>*,
    #sb_main .categories>*,
    #sb_main .services>*,
    #sb_main .service-list>* {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px 0 !important;
    }

    /* карточки — более компактные отступы */
    #sb_main .sb-card,
    #sb_main .sb_item,
    #sb_main .service-item {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    /* изображения в карточках — одинаковая высота */
    #sb_main .sb-card img,
    #sb_main .service-item img,
    #sb_main .category-item img {
        width: 100% !important;
        height: 180px !important;
        /* одинаковая высота */
        object-fit: cover !important;
        border-radius: 12px !important;
        display: block !important;
    }

    /* кнопки Réserver/Sélectionner — не на всю ширину */
    #sb_main .sb_btn,
    #sb_main button[type="button"],
    #sb_main .btn {
        width: auto !important;
        min-width: 170px !important;
        padding: 10px 16px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    /* уменьшаем межблочные отступы */
    #sb_main .sb-block,
    #sb_main .sb-section {
        margin-bottom: 16px !important;
    }
}/* ====== FORMULES GROUPE (NEW) ====== */
:root {
    --gp-bg: #efe6d6;
    /* бежево-золотистый фон секции */
    --gp-card: #fff;
    /* фон карточки */
    --gp-ink: #0e2a47;
    /* тёмно-синий текст */
    --gp-accent: #0e2a47;
    /* тёмно-синий для кнопок/заголовков */
    --gp-muted: #6b6b6b;
    --gp-radius: 14px;
    --gp-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

.group-packages {
    background: var(--gp-bg);
    padding: clamp(28px, 4vw, 64px) 0;
}

.gp-container {
    width: min(1240px, 92%);
    /* немного шире секция */
}

.gp-title {
    font-family: inherit;
    color: var(--gp-ink);
    text-align: center;
    font-size: clamp(24px, 2.6vw, 42px);
    letter-spacing: .06em;
    margin: 0 0 22px;
}

.gp-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.2vw, 28px);
}

/* планшет */
@media (max-width: 1024px) {
    .gp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* телефон */
@media (max-width: 680px) {
    .gp-grid {
        grid-template-columns: 1fr;
    }
}

.gp-card {
    background: var(--gp-card);
    border-radius: var(--gp-radius);
    box-shadow: var(--gp-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}

.gp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

/* Медиа: одинаковая высота картинок */

/* === MEDIA: показывать всю картинку, без обрезки === */
.gp-card__media {
    position: relative;
    width: 100%;
    height: clamp(320px, 30vw, 460px);
    /* ↑ было 200–320px — теперь крупнее на ПК */
    padding: 6px;
    background: #f4efe6;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    overflow: hidden;
}
/* планшет */
@media (max-width: 1024px) {
    .gp-card__media {
        height: clamp(240px, 28vw, 340px);
    }
}

/* телефон */
@media (max-width: 680px) {
    .gp-card__media {
        height: 210px;
    }
}

 .gp-card__media img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     /* показываем всю картинку */
     object-position: center;
     display: block;
 }

.gp-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(14, 42, 71, .9);
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
}

/* Тело карточки */
.gp-card__body {
    padding: 18px 18px 16px;
    color: var(--gp-ink);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.gp-card__name {
    font-size: clamp(18px, 1.6vw, 22px);
    margin: 0;
    color: var(--gp-accent);
    text-align: center;
    letter-spacing: .02em;
}

.gp-card__desc {
    margin: 0;
    color: var(--gp-muted);
    text-align: center;
    line-height: 1.5;
}

/* Список преимуществ */
.gp-list {
    margin: 4px 0 0;
    padding: 0 0 0 18px;
    color: var(--gp-ink);
    line-height: 1.5;
}

.gp-list li {
    margin: 4px 0;
}

/* Футер карточки */
.gp-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    padding-top: 6px;
}

.gp-price {
    font-weight: 700;
    color: var(--gp-accent);
    font-size: 18px;
}

.gp-btn {
    display: inline-block;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--gp-accent);
    color: #fff;
    font-weight: 600;
    line-height: 1;
    transition: transform .15s ease, opacity .15s ease;
    white-space: nowrap;
}

.gp-btn:active {
    transform: translateY(1px);
}

.gp-btn:hover {
    opacity: .9;
}

/* небольшая тень вокруг секции на десктопе — опционально */
@media (min-width: 1025px) {
    .group-packages {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
    }
}
/* --- ВЫРАВНИВАНИЕ СЕТКИ ПО ЦЕНТРУ И РОВНЫЕ КОЛОНКИ --- */
.gp-container {
    width: min(1240px, 92%);
    margin-inline: auto;
}

.gp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    /* равные 3 колонки */
    gap: 24px;
    justify-content: center;
    /* центрируем всю сетку в контейнере */
}

@media (max-width:1024px) {
    .gp-grid {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

@media (max-width:680px) {
    .gp-grid {
        grid-template-columns: 1fr;
    }
}

/* одинаковая ширина/высота карточек */
.gp-card {
    width: 100%;
    max-width: 360px;
    /* чтобы колонки не «растягивались» */
    margin-inline: auto;
    /* центрирование каждой карточки в колонке */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* одинаковая высота блока с изображением + показать всю картинку */
.gp-card__media {
    position: relative;
    height: clamp(320px, 30vw, 440px);
    /* ПК крупнее, планшет/моб ниже */
    padding: 6px;
    background: #f4efe6;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    overflow: hidden;
}

@media (max-width:1024px) {
    .gp-card__media {
        height: clamp(240px, 28vw, 340px);
    }
}

@media (max-width:680px) {
    .gp-card__media {
        height: 210px;
    }
}

.gp-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* не обрезаем */
    object-position: center;
    display: block;
}

/* выравнивание контента внутри карточки */
.gp-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.gp-card__footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* ===== JACUZZI (NEW CLASSES) ===== */
:root {
    --jcz-bg: #efe6d6;
    /* фон секции: бежево-золотистый */
    --jcz-card: #ffffff;
    /* фон карточек */
    --jcz-ink: #0e2a47;
    /* тёмно-синий текст */
    --jcz-muted: #6b6b6b;
    --jcz-accent: #0e2a47;
    /* кнопка/заголовки */
    --jcz-radius: 14px;
    --jcz-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

.spa-jcz-section {
    background: var(--jcz-bg);
    padding: clamp(28px, 4vw, 64px) 0;
}

.spa-jcz-wrap {
    width: min(1240px, 92%);
    margin-inline: auto;
}

.spa-jcz-title {
    color: var(--jcz-ink);
    text-align: center;
    font-size: clamp(24px, 2.6vw, 42px);
    letter-spacing: .06em;
    margin: 0 0 16px;
}

.spa-jcz-intro {
    margin: 0 auto 26px;
    width: min(860px, 92%);
    text-align: center;
    color: #fff;
    background: var(--jcz-accent);
    padding: 14px 18px;
    border-radius: 12px;
    line-height: 1.45;
}

/* сетка */
.spa-jcz-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    gap: 22px;
    justify-content: center;
    /* центр всей сетки */
}

/* планшет: 2 в ряд */
@media (max-width: 1024px) {
    .spa-jcz-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

/* телефон: 1 в ряд */
@media (max-width: 640px) {
    .spa-jcz-grid {
        grid-template-columns: 1fr;
    }
}

.spa-jcz-card {
    background: var(--jcz-card);
    border-radius: var(--jcz-radius);
    box-shadow: var(--jcz-shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: var(--jcz-ink);
    width: 100%;
    max-width: 360px;
    /* чтобы колонки не «прыгали» по ширине */
    margin-inline: auto;
    /* центр каждой карточки в колонке */
    transition: transform .2s ease, box-shadow .2s ease;
    min-height: 280px;
    /* равная высота базово */
}

.spa-jcz-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

.spa-jcz-name {
    margin: 2px 0 8px;
    font-size: clamp(18px, 1.4vw, 20px);
    color: var(--jcz-accent);
}

.spa-jcz-meta {
    margin: 0;
    color: var(--jcz-muted);
}

.spa-jcz-price {
    margin: 2px 0 8px;
    font-weight: 700;
    color: var(--jcz-accent);
}

.spa-jcz-desc {
    margin: 0 0 14px;
    color: var(--jcz-ink);
    line-height: 1.5;
}

/* кнопка */
.spa-jcz-btn {
    margin-top: auto;
    display: inline-block;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--jcz-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: transform .15s ease, opacity .15s ease;
}

.spa-jcz-btn:hover {
    opacity: .92;
}

.spa-jcz-btn:active {
    transform: translateY(1px);
}
/* ===== PROGRAMMES SPA — new classes with hover curtain ===== */
:root {
    --cmp-bg: #efe6d6;
    /* общий фон секции */
    --cmp-ink: #0e2a47;
    /* тёмно-синий */
    --cmp-muted: #6b6b6b;
    --cmp-accent: #0e2a47;
    /* кнопка/акценты */
    --cmp-card: #ffffff;
    --cmp-radius: 14px;
    --cmp-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

.spa-cmp-section {
    background: var(--cmp-bg);
    padding: clamp(28px, 4vw, 64px) 0;
}

.spa-cmp-wrap {
    width: min(1240px, 92%);
    margin-inline: auto;
}

.spa-cmp-title {
    text-align: center;
    color: var(--cmp-ink);
    font-size: clamp(24px, 2.6vw, 42px);
    letter-spacing: .06em;
    margin: 0 0 18px;
}

/* GRID */
.spa-cmp-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    justify-content: center;
}

@media (max-width:1024px) {
    .spa-cmp-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width:680px) {
    .spa-cmp-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* CARD */
.spa-cmp-card {
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
    margin-inline: auto;
}

.spa-cmp-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--cmp-radius);
    box-shadow: var(--cmp-shadow);
    height: clamp(260px, 30vw, 420px);
    /* единая высота */
    margin: 0;
    background: #e9e4db;
}

@media (max-width:680px) {
    .spa-cmp-media {
        height: 320px;
    }
}

.spa-cmp-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .45s ease;
}

/* OVERLAY (шторка) */
.spa-cmp-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 42, 71, .0) 0%, rgba(14, 42, 71, .85) 65%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}

.spa-cmp-features {
    margin: 0 0 10px;
    padding: 0 0 0 18px;
    line-height: 1.45;
}

.spa-cmp-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.spa-cmp-price {
    font-weight: 700;
}

.spa-cmp-btn {
    display: inline-block;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--cmp-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: transform .15s ease, opacity .15s ease;
}

.spa-cmp-btn:hover {
    opacity: .92;
}

.spa-cmp-btn:active {
    transform: translateY(1px);
}

/* hover/focus эффект */
.spa-cmp-media:hover img {
    transform: scale(1.04);
}

.spa-cmp-media:hover .spa-cmp-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* доступность с клавиатуры */
.spa-cmp-media:focus-within .spa-cmp-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* На телефоне шторка всегда открыта */
@media (max-width:680px) {
    .spa-cmp-overlay {
        opacity: 1;
        transform: none;
        background: rgba(14, 42, 71, .88);
    }
}

/* подпись под картинкой */
.spa-cmp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--cmp-ink);
    padding: 2px 4px 0;
}

.spa-cmp-name {
    font-weight: 600;
}

.spa-cmp-time {
    color: var(--cmp-muted);
}
/* === КНОПКИ RÉSERVER — Y MASSAGE === */
.spa-prg-btn {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 12px;
    background: #0e2a47;
    /* тёмно-синий */
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .25s ease;
    border: 2px solid transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

/* при наведении */
.spa-prg-btn:hover {
    background: linear-gradient(90deg, #b38b47 0%, #d2b98b 100%);
    color: #0e2a47;
    border-color: #b38b47;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

/* при нажатии */
.spa-prg-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
}
/* ===== Кнопка Réserver для SPA ===== */
.spa-cmp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 36px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background: #2E2F42;
    /* тёмно-синий */
    border: none;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-family: 'Playfair Display', serif;
    /* в твоём стиле */
}

.spa-cmp-btn:hover {
    background: linear-gradient(45deg, #2E2F42, #cda676);
    /* тёмно-синий + золотисто-бежевый */
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.spa-cmp-btn:active {
    transform: translateY(1px);
}

/* Адаптация под телефон */
@media(max-width:768px) {
    .spa-cmp-btn {
        width: 100%;
        padding: 16px 0;
        font-size: 17px;
        border-radius: 12px;
    }
}
/* ===== Кнопка "Réserver maintenant" (Jacuzzi / SPA) ===== */
.spa-jcz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 38px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background: #2E2F42;
    /* тёмно-синий */
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.5px;
}

.spa-jcz-btn:hover {
    background: linear-gradient(45deg, #2E2F42, #cda676);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.spa-jcz-btn:active {
    transform: translateY(1px);
}

/* Мобильная адаптация */
@media(max-width:768px) {
    .spa-jcz-btn {
        width: 100%;
        padding: 16px 0;
        font-size: 17px;
        border-radius: 12px;
    }
}
/* ===== Кнопка EVJF / Groupes ===== */
.btn-evjf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 38px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background: #cda676;
    /* золотисто-бежевый фон */
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.5px;
}

.btn-evjf:hover {
    background: linear-gradient(45deg, #cda676, #2E2F42);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.btn-evjf:active {
    transform: translateY(1px);
}

/* Мобильная адаптация */
@media(max-width:768px) {
    .btn-evjf {
        width: 100%;
        padding: 16px 0;
        font-size: 17px;
        border-radius: 12px;
    }
}
html {
    scroll-behavior: smooth;
}
/* ===== Подарочная кнопка (вариант "carte cadeau") ===== */
.gift-cards .ym-feature__btn {
    background: #cda676;
    /* золотисто-бежевый */
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 18px 36px;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}

.gift-cards .ym-feature__btn:hover {
    background: linear-gradient(45deg, #cda676, #2E2F42);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

@media(max-width:768px) {
    .gift-cards .ym-feature__btn {
        width: 100%;
        padding: 16px 0;
        border-radius: 12px;
        font-size: 17px;
    }
}
html {
    scroll-behavior: smooth;
}
/* ===== 🌸 STYLES DES BOUTONS Y MASSAGE ===== */

a[class*="btn"],
button[class*="btn"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 36px;
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #fff;
    background: linear-gradient(135deg, #2E2F42 0%, #1d2435 100%);
    border: none;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* 🌿 Hover — мягкий золотистый переход */
a[class*="btn"]:hover,
button[class*="btn"]:hover {
    background: linear-gradient(135deg, #2E2F42 0%, #cda676 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

/* ✨ Активное состояние (нажатие) */
a[class*="btn"]:active,
button[class*="btn"]:active {
    transform: translateY(1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* 💫 Специальные цвета по контексту */
.btn-evjf {
    background: linear-gradient(135deg, #cda676, #a67b48);
}

.btn-evjf:hover {
    background: linear-gradient(135deg, #a67b48, #2E2F42);
}

.spa-jcz-btn {
    background: linear-gradient(135deg, #2E2F42, #4b5673);
}

.spa-jcz-btn:hover {
    background: linear-gradient(135deg, #2E2F42, #cda676);
}

/* 🎁 Кнопки подарков */
.gift-cards .ym-feature__btn {
    background: linear-gradient(135deg, #cda676, #d8b77b);
    color: #fff;
}

.gift-cards .ym-feature__btn:hover {
    background: linear-gradient(135deg, #2E2F42, #cda676);
}

/* 📱 Мобильная адаптация */
@media(max-width:768px) {

    a[class*="btn"],
    button[class*="btn"] {
        width: 100%;
        font-size: 17px;
        border-radius: 12px;
        padding: 14px 0;
    }
}
/* ====== MOBILE/TABLET ONLY (ПК без изменений) ====== */

/* планшет */
@media (max-width: 1024px) {
    .header-container {
        padding: 10px 16px;
        gap: 16px;
    }

    .header-logo {
        font-size: 24px;
    }

    .header-list {
        gap: 22px;
    }
}

/* телефон */
@media (max-width: 680px) {

    /* контейнер: логотип слева, бургер справа */
    .header-container {
        padding: 10px 14px;
        gap: 12px;
    }

    /* показать бургер */
    .header-burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 30px;
        height: 22px;
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
    }

    .header-burger span {
        display: block;
        width: 100%;
        height: 3px;
        background: currentColor;
        border-radius: 2px;
        transition: transform .25s ease, opacity .25s ease;
    }

    /* скрыть обычное горизонтальное меню */
    .header-nav {
        position: fixed;
        top: var(--header-h, 64px);
        /* ниже шапки */
        left: 0;
        right: 0;
        background: rgba(245, 239, 230, .98);
        /* var(--beige) */
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, transform .25s ease, visibility 0s .25s;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    }

    /* вертикальный список в моб. меню */
    .header-list {
        flex-direction: column;
        gap: 0;
    }

    .header-list li {
        border-top: 1px solid rgba(0, 0, 0, .06);
    }

    .header-list li:last-child {
        border-bottom: 1px solid rgba(0, 0, 0, .06);
    }

    .header-link {
        display: block;
        padding: 14px 18px;
        font-size: 16px;
    }

    /* показать меню, когда активен бургер */
    .header-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity .25s ease, transform .25s ease;
    }

    /* анимация иконки бургера */
    .header-burger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .header-burger.active span:nth-child(2) {
        opacity: 0;
    }

    .header-burger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* контакты в шапке можно скрыть на очень узких экранах (если есть) */
    .header-address,
    .contact-pill {
        display: none;
    }
}

/* улучшение кликабельности на таче */
@media (hover:none) {
    .header-link {
        padding: 14px 18px;
    }
}

/* чтобы контент не прятался под fixed-шапкой на мобайле */
@media (max-width: 680px) {
    :root {
        --header-h: 64px;
    }

    body {
        scroll-padding-top: var(--header-h);
    }

    .hero {
        padding-top: var(--header-h);
    }
}
/* ============ Y MASSAGE HEADER (золотой градиент при наведении) ============ */
:root {
    --ym-ink: #0E2A4A;
    --ym-beige: #F5EFE6;
    --ym-accent: #CBB79C;
    --ym-h: 88px;
    /* высота шапки */
}

/* --- ОСНОВА --- */
.ym-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}

.ym-shell {
    width: min(1240px, 94vw);
    margin-inline: auto;
    height: var(--ym-h);
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 40px;
}

/* --- ЛОГО --- */
.ym-logo {
    display: flex;
    align-items: center;
    gap: 0;
    /* убираем стандартное расстояние */
    text-decoration: none;
    color: #fff;
    transition: color .3s ease;
    position: relative;
}

.ym-logo__img {
    width: 140px;
    height: 140px;
    margin-right: -68px;
    /* ← отрицательное значение сближает картинку и текст */
    transform: translateY(6px);
        /* 🔸 вниз на 6 пикселей */
}
.ym-logo__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* текст логотипа */
.ym-logo__text {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 40px;
    letter-spacing: 0.02em;
    color: #fff;
    transition: all .4s ease;
}

/* красивый градиент при наведении */
.ym-logo:hover .ym-logo__text {
    background: linear-gradient(90deg, #cfa974 0%, #7a5a33 45%, #000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 12px rgba(207, 169, 116, 0.5);
    transform: scale(1.02);
}

/* --- МЕНЮ --- */
.ym-nav {
    margin-left: auto;
}

.ym-menu {
    display: flex;
    gap: 46px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ym-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.03em;
    position: relative;
    transition: color .25s;
}

.ym-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 0;
    background: var(--ym-accent);
    transition: width .25s;
}

.ym-link:hover {
    color: var(--ym-accent);
}

.ym-link:hover::after {
    width: 100%;
}

/* --- ТЕЛЕФОН --- */
.ym-phone {
    margin-left: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    background: rgba(14, 42, 74, 0.25);
    padding: 10px 22px;
    border-radius: 26px;
    transition: all .25s;
}

.ym-phone:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* --- БУРГЕР --- */
.ym-burger {
    display: none;
}

/* --- ПРИ СКРОЛЛЕ --- */
.ym-header.ym-scrolled {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

.ym-header.ym-scrolled .ym-logo,
.ym-header.ym-scrolled .ym-link,
.ym-header.ym-scrolled .ym-phone {
    color: #fff;
}

.ym-header.ym-scrolled .ym-phone {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ym-header.ym-scrolled .ym-link:hover {
    color: var(--ym-accent);
}

/* --- ПЛАНШЕТ --- */
@media (max-width: 1024px) {
    .ym-shell {
        gap: 18px;
    }

    .ym-logo__img {
        width: 80px;
        height: 80px;
    }

    .ym-logo__text {
        font-size: 32px;
    }

    .ym-menu {
        gap: 28px;
    }

    .ym-link {
        font-size: 20px;
    }

    .ym-phone {
        display: none;
    }
}

/* --- ТЕЛЕФОН --- */
@media (max-width: 768px) {
    .ym-shell {
        padding: 0 18px;
    }

    .ym-logo__img {
        width: 60px;
        height: 60px;
    }

    .ym-logo__text {
        font-size: 26px;
    }

    /* бургер */
    .ym-burger {
        margin-left: auto;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        width: 38px;
        height: 32px;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .ym-burger span {
        display: block;
        width: 26px;
        height: 3px;
        margin: 4px auto;
        background: currentColor;
        border-radius: 2px;
        transition: transform .25s, opacity .25s;
    }

    .ym-logo,
    .ym-link {
        color: #fff;
    }

    /* меню */
    .ym-nav {
        position: fixed;
        top: var(--ym-h);
        left: 0;
        right: 0;
        display: none;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 18px 0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
        z-index: 999;
    }

    .ym-menu {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .ym-link {
        font-size: 22px;
        padding: 12px 16px;
        border-radius: 10px;
    }

    .ym-link:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    /* бургер-анимация */
    .ym-nav.is-open {
        display: block;
    }

    .ym-burger.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .ym-burger.is-open span:nth-child(2) {
        opacity: 0;
    }

    .ym-burger.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .ym-header.ym-scrolled .ym-burger span {
        background: #fff;
    }

    .ym-header.ym-scrolled .ym-logo,
    .ym-header.ym-scrolled .ym-link {
        color: #fff;
    }
}

/* якоря не прячутся под фикс-шапку */
html {
    scroll-padding-top: var(--ym-h);
}
.booking-widget {
    max-width: 100%;
    padding: 0 10px;
    overflow: visible;
}
/* Обёртка виджета */
.booking-widget {
    max-width: 100%;
    padding: 0 12px;
    overflow: visible;
    display: flex;
    justify-content: center;
}

/* База для ПК — вид не меняем */
.booking-widget iframe {
    width: 100%;
    min-height: 1000px;
    border: none;
}

/* Планшет */
@media (max-width: 1024px) {
    .booking-widget iframe {
        min-height: 1200px;
    }
}

/* Телефон */
@media (max-width: 768px) {
    .booking-widget iframe {
        min-height: 1400px;
        transform: scale(0.97);
        transform-origin: top center;
    }
}

/* Очень узкие экраны */
@media (max-width: 380px) {
    .booking-widget iframe {
        min-height: 1550px;
        transform: scale(0.94);
    }
}
/* ===== SimplyBook: мобильная подгонка высоты ===== */
.booking-widget {
    max-width: 100%;
    padding: 0 12px;
    overflow: visible;
    display: flex;
    justify-content: center;
}

.booking-widget iframe {
    width: 100%;
    border: 0;
}

/* ПК — без изменений */
@media (min-width: 1025px) {
    .booking-widget iframe {
        min-height: 1000px;
    }
}

/* Планшет */
@media (max-width: 1024px) {
    .booking-widget iframe {
        min-height: 1150px;
    }
}

/* iPhone / телефоны ~390–430px шириной */
@media (max-width: 768px) {
    .booking-widget iframe {
        min-height: 1020px;
        /* было 1400 — убираем пустоту */
    }

    .reservation-section {
        padding-bottom: 20px;
    }

    /* чтобы карта не «поджималась» */
}

/* Очень узкие телефоны (SE и т.п.) */
@media (max-width: 380px) {
    .booking-widget iframe {
        min-height: 1080px;
    }
}
.booking-widget {
    max-width: 100%;
    padding: 0 12px;
    display: flex;
    justify-content: center;
}

.booking-widget iframe {
    width: 100%;
    border: 0;
}

@media (min-width:1025px) {
    .booking-widget iframe {
        min-height: 1000px;
    }
}

@media (max-width:1024px) {
    .booking-widget iframe {
        min-height: 1150px;
    }
}

@media (max-width:768px) {
    .booking-widget iframe {
        min-height: 1020px;
    }
}

@media (max-width:380px) {
    .booking-widget iframe {
        min-height: 1080px;
    }
}

/* чуть опустить виджет, чтобы баннер-заметка не наезжал */
.res-note {
    margin-bottom: 12px;
}
/* ===== Réserver un soin — заголовок и примечание ===== */

/* базовая секция */
.reservation-section {
    padding: 48px 0;
    /* ПК */
}

/* заголовок */
.res-title {
    /* аккуратное авто-масштабирование: от 22 до 36 px */
    font-size: clamp(22px, 2.6vw, 36px);
    line-height: 1.2;
    text-align: center;
    color: #0b2343;
    /* твой тёмно-синий */
    margin: 0 0 16px 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* примечание (серо-бежевый бокс с тонкой окантовкой) */
.res-note {
    max-width: 980px;
    /* ширина как у контента */
    margin: 0 auto 24px auto;
    padding: 10px 14px;
    background: #f3f3f3;
    /* светлая плашка */
    border: 1px solid rgba(11, 35, 67, .08);
    border-left: 3px solid #d4af37;
    /* тонкий золотой акцент слева */
    border-radius: 10px;
    color: #2e2e2e;
    /* читаемый адаптивный размер текста: 14–16 px */
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.5;
}

/* чтобы эмодзи не уезжало строку вверх на iOS */
.res-note::first-line {
    vertical-align: baseline;
}

/* ——— планшет ——— */
@media (max-width: 1024px) {
    .reservation-section {
        padding: 40px 0;
    }

    .res-note {
        max-width: 760px;
        margin-bottom: 20px;
        padding: 10px 12px;
    }
}

/* ——— телефон ——— */
@media (max-width: 768px) {
    .reservation-section {
        padding: 32px 0;
    }

    .res-title {
        margin-bottom: 12px;
    }

    .res-note {
        max-width: 100%;
        margin: 0 12px 16px 12px;
        /* боковые поля, чтобы не прилипало к краям */
        padding: 10px 12px;
        border-radius: 8px;
    }
}

/* очень узкие экраны */
@media (max-width: 380px) {
    .res-note {
        margin: 0 10px 14px 10px;
    }
}/* ===== Коррекция отступов блока бронирования ===== */
.reservation-section {
    padding-top: 40px;
    padding-bottom: 60px;
}

/* заголовок */
.res-title {
    font-size: clamp(22px, 2.6vw, 36px);
    text-align: center;
    color: #0b2343;
    margin-bottom: 16px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* примечание */
.res-note {
    max-width: 980px;
    margin: 0 auto 32px auto;
    /* добавляем больше воздуха снизу */
    padding: 10px 14px;
    background: #f9f9f9;
    border-left: 3px solid #d4af37;
    border-radius: 10px;
    color: #2e2e2e;
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.5;
    text-align: center;
}

/* планшет */
@media (max-width: 1024px) {
    .res-note {
        margin-bottom: 28px;
        padding: 10px 12px;
    }
}

/* телефон */
@media (max-width: 768px) {
    .res-note {
        margin: 0 12px 24px 12px;
        padding: 10px 12px;
        font-size: 15px;
    }

    .res-title {
        font-size: 24px;
        margin-bottom: 12px;
    }
}
/* ===== Фон секции "Découvrez Nos Offres" на телефонах ===== */
@media (max-width: 1024px) {
    .ym-features {
        background: #f9f9f9;
        /* тот же цвет, что на ПК */
        background-attachment: fixed;
        /* фон не дергается при прокрутке */
        background-size: cover;
        background-repeat: no-repeat;
        padding: 56px 16px;
        gap: 56px;
    }

    /* чтобы ни Instagram, ни Safari не обрезали фон */
    body {
        background-color: #f9f9f9;
    }
}
.booking-widget iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block;
    border-radius: 16px;
    background: #fff;
}

@media (max-width: 1024px) {
    .booking-widget {
        min-height: 980px;
        border-radius: 14px;
    }
}

@media (max-width: 768px) {
    .booking-widget {
        min-height: 1200px;
        border-radius: 12px;
    }
}

@media (max-width: 420px) {
    .booking-widget {
        min-height: 1400px;
        border-radius: 10px;
    }
}
/* === АДАПТАЦИЯ СЕКЦИИ РЕЗЕРВАЦИИ ПОД ТЕЛЕФОН === */

/* Общая секция на мобильных — во весь экран */
@media (max-width: 768px) {
    #reservation {
        padding: 0;
        margin: 0;
        background: #fff;
    }

    #reservation .container {
        width: 100vw;
        margin: 0;
        padding: 0;
        max-width: 100vw;
    }

    /* Заголовок и текст — немного внутреннего отступа */
    .res-title,
    .res-note {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Сам iframe SimplyBook (или контейнер) во весь экран */
    .booking-widget,
    .booking-widget+iframe {
        display: block !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* Чтобы всё выглядело как самостоятельная страница */
    body,
    html {
        overflow-x: hidden;
    }
}

/* Для планшетов можно задать чуть меньше */
@media (min-width: 769px) and (max-width: 1024px) {
    .booking-widget+iframe {
        min-height: 1000px;
    }
}
/* Секция бронирования — поджать поля сверху/снизу */
#reservation {
    padding-top: 8px;
    padding-bottom: 12px;
}

#reservation .res-note {
    margin-bottom: 8px;
}

/* Чуть подтягиваем сам iframe к заметке, если он рендерится соседом */
#reservation .booking-widget+iframe {
    margin-top: -12px;
}

/* На телефоне — во весь экран (как просила ранее) */
@media (max-width: 768px) {
    #reservation .container {
        width: 100vw;
        margin: 0;
        padding: 0;
    }

    #reservation .booking-widget,
    #reservation .booking-widget+iframe {
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
}
/* Кнопка "назад" на мобиле */
#ym-back-btn {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 9999;
    padding: 10px 14px;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    background: #d4af37;
    color: #0b2343;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

@media (min-width:769px) {
    #ym-back-btn {
        display: none;
    }
}
/* подтягиваем виджет к заголовку, убираем пустое место */
#reservation .booking-widget+iframe {
    margin-top: -8px;
    width: 100% !important;
    border: 0;
}

/* на телефоне — на всю ширину; на десктопе всё остаётся как было */
@media (max-width: 768px) {
    #reservation .container {
        width: 100vw;
        margin: 0;
        padding: 0;
    }

    #reservation .booking-widget,
    #reservation .booking-widget+iframe {
        width: 100vw !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}
/* === Уменьшаем высоту и отступы зоны бронирования === */

/* общий контейнер секции */
#reservation {
    padding-top: 10px;
    padding-bottom: 15px;
}

/* сжимаем расстояние между текстом и самим виджетом */
#reservation .res-note {
    margin-bottom: 8px !important;
}

/* сам контейнер виджета */
#reservation .booking-widget {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* iframe самого SimplyBook */
#reservation .booking-widget+iframe {
    margin-top: -10px !important;
    /* сдвигаем выше */
    margin-bottom: 0 !important;
    min-height: 700px !important;
    /* стандарт для десктопа */
    border-radius: 12px !important;
}

/* для телефонов – во весь экран, без лишних зазоров */
@media (max-width: 768px) {
    #reservation {
        padding: 0;
        margin: 0;
    }

    #reservation .res-note {
        margin-bottom: 6px !important;
        padding: 0 10px;
    }

    #reservation .booking-widget+iframe {
        margin-top: -15px !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
    }
}
/* === OPTIMISATION VISUELLE — Réservation SimplyBook === */

/* Общая секция бронирования */
#reservation {
    padding-top: 25px;
    /* раньше было больше — теперь меньше */
    padding-bottom: 40px;
    background: #f8f5f2;
    /* чтобы блок сливался с остальными разделами */
}

/* Сжимаем расстояние между примечанием и iframe */
#reservation .res-note {
    margin-bottom: 12px !important;
    text-align: center;
}

/* Контейнер виджета — убираем лишние отступы */
#reservation .booking-widget {
    margin: 0 !important;
    padding: 0 !important;
}

/* Сам iframe виджета (SimplyBook) */
#reservation .booking-widget+iframe {
    display: block !important;
    margin: 0 auto !important;
    margin-top: -8px !important;
    /* немного поднимаем вверх */
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 1100px;
    /* ограничиваем ширину, чтобы по центру */
    min-height: 680px !important;
    /* меньше белого пространства */
    border: 0;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    background: #fff;
}

/* --- Мобильная версия --- */
@media (max-width: 768px) {
    #reservation {
        padding: 0;
        margin: 0;
        background: #fff;
    }

    #reservation .res-note {
        margin-bottom: 8px !important;
        padding: 0 10px;
        font-size: 15px;
        line-height: 1.4;
    }

    #reservation .booking-widget+iframe {
        margin-top: -15px !important;
        border-radius: 0 !important;
        min-height: 100vh !important;
        width: 100vw !important;
        box-shadow: none !important;
    }
}
/* --- РЕЗЕРВАЦИЯ: чтобы не обрезало фразу над виджетом --- */

/* Больше воздуха под примечанием */
#reservation .res-note {
    margin-bottom: 16px !important;
    line-height: 1.45;
}

/* Убираем агрессивную подтяжку iframe на десктопе */
@media (min-width: 1025px) {
    #reservation .booking-widget+iframe {
        margin-top: -6px !important;
        /* было -32 / -15 — делаем мягче */
        min-height: 660px !important;
        /* можно 640–700 по вкусу */
    }
}

/* Планшет — без перекрытия текста */
@media (min-width: 769px) and (max-width: 1024px) {
    #reservation .booking-widget+iframe {
        margin-top: -8px !important;
    }
}

/* Мобильная версия — полноэкранно, но не заезжаем на текст */
@media (max-width: 768px) {
    #reservation .res-note {
        margin-bottom: 10px !important;
    }

    #reservation .booking-widget+iframe {
        margin-top: -10px !important;
        /* лёгкая «подтяжка», текст виден */
        min-height: 100vh !important;
    }
}

/* На всякий — не скрывать содержимое секции ничем */
#reservation,
#reservation .container {
    overflow: visible !important;
}

/* Если переходишь по якорю #reservation и шапка перекрывает заголовок */
#reservation {
    scroll-margin-top: 80px;
}
/* === Y Massage • Reservation: визуально убираем лишний верх в iframe === */
#reservation .booking-widget {
    position: relative;
    overflow: hidden;
    /* прячем то, что вылезет за край */
}

/* универсальный обрезатель: на ПК убираем больше, на мобиле меньше */
#reservation {
    --sb-crop: 80px;
}

/* сколько “срезать” сверху на ПК */
@media (max-width: 1024px) {
    #reservation {
        --sb-crop: 48px;
    }
}

@media (max-width: 768px) {
    #reservation {
        --sb-crop: 12px;
    }
}

/* на телефоне почти не режем */

/* сдвигаем iframe вверх на величину “среза” и компенсируем высоту */
#reservation .booking-widget>iframe,
#reservation .booking-widget+iframe {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    transform: translateY(calc(-1 * var(--sb-crop)));
    height: calc(100% + var(--sb-crop)) !important;
    min-height: calc(700px + var(--sb-crop)) !important;
    /* можно 620–760 под монитор */
    border-radius: 12px;
    background: #fff;
}

/* если на мобиле у тебя полноэкранный режим — не оставляем скругления/тени */
@media (max-width: 768px) {

    #reservation .booking-widget>iframe,
    #reservation .booking-widget+iframe {
        border-radius: 0;
        box-shadow: none;
        min-height: calc(100vh + var(--sb-crop)) !important;
    }
}
/* Компактнее отступы вокруг виджета */
#reservation {
    padding-top: 22px;
    padding-bottom: 34px;
}

#reservation .res-note {
    margin-bottom: 14px !important;
}

/* Контейнер и сам iframe */
#reservation .booking-widget {
    position: relative;
    overflow: hidden;
}

#reservation .booking-widget>iframe,
#reservation .booking-widget+iframe {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    margin: 0 auto !important;
    margin-top: -12px !important;
    /* аккуратно подтягиваем вверх */
    min-height: 660px !important;
    /* при желании 620–700 */
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
    background: #fff;
}

/* Планшет — мягче */
@media (max-width:1024px) {

    #reservation .booking-widget>iframe,
    #reservation .booking-widget+iframe {
        margin-top: -8px !important;
    }
}

/* Телефон: во всю ширину/высоту, список в одну колонку */
@media (max-width:768px) {
    #reservation {
        padding: 0;
    }

    #reservation .container {
        width: 100vw;
        margin: 0;
        padding: 0;
    }

    #reservation .res-note {
        margin: 8px 0 10px !important;
        padding: 0 12px;
    }

    #reservation .booking-widget>iframe,
    #reservation .booking-widget+iframe {
        width: 100vw !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-top: -10px !important;
    }
}
/* ===== Reservation • Classic — компактные отступы и читабельность ===== */
#reservation {
    padding-top: 22px;
    padding-bottom: 34px;
}

#reservation .res-note {
    margin-bottom: 14px !important;
    line-height: 1.45;
}

#reservation .booking-widget {
    position: relative;
    overflow: hidden;
}

/* сам iframe (будь то внутри .booking-widget или соседом) */
#reservation .booking-widget>iframe,
#reservation .booking-widget+iframe {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    margin: 0 auto !important;
    margin-top: -12px !important;
    /* аккуратно подтягиваем вверх */
    min-height: 660px !important;
    /* 620–700 подбери по вкусу */
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
    background: #fff;
}

/* планшет — чуть мягче */
@media (max-width: 1024px) {

    #reservation .booking-widget>iframe,
    #reservation .booking-widget+iframe {
        margin-top: -8px !important;
    }
}

/* телефон — во всю ширину/высоту, список в столбик */
@media (max-width: 768px) {
    #reservation {
        padding: 0;
    }

    #reservation .container {
        width: 100vw;
        margin: 0;
        padding: 0;
    }

    #reservation .res-note {
        margin: 8px 0 10px !important;
        padding: 0 12px;
    }

    #reservation .booking-widget>iframe,
    #reservation .booking-widget+iframe {
        width: 100vw !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-top: -10px !important;
    }
}

/* лёгкое усиление контраста текста внутри iframe (визуально) */
#reservation iframe {
    filter: contrast(1.12) brightness(1.03);
}

@media (max-width:768px) {
    #reservation iframe {
        filter: contrast(1.18) brightness(1.06);
    }
}
/* === Mobile: черный текст в секции FEATURES === */
@media (max-width: 768px) {

    .ym-feature__title,
    .ym-feature__text {
        color: #000000 !important;
        /* черный */
    }
}
@media (max-width: 768px) {
    .ym-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}
/* ================= Y MASSAGE — FOOTER (NEW CLASSES) ================= */
.ym-footer {
    /* локальные переменные с фолбэками — не зависят от остального сайта */
    --ym-footer-bg1: #0d0f14;
    --ym-footer-bg2: #171a21;
    --ym-edge: rgba(255, 255, 255, 0.06);
    --ym-text: #ffffff;
    --ym-muted: #cfd3de;
    --ym-gold: #c9a14a;
    --ym-gold-strong: #e3b858;

    position: relative;
    isolation: isolate;
    /* создаёт новый контекст наложения */
    padding: clamp(40px, 6vw, 72px) 16px clamp(50px, 7vw, 84px);
    background: linear-gradient(180deg, var(--ym-footer-bg1), var(--ym-footer-bg2));
    border-top: 1px solid var(--ym-edge);
    color: var(--ym-text);
    text-align: center;
    overflow: visible;
    animation: ym-footer-fade .6s ease both;
}

/* мягкая виньетка/текстура */
.ym-footer::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -30% -15% auto -15%;
    height: 160%;
    background: radial-gradient(60% 50% at 50% 0%, rgba(255, 255, 255, .07), transparent 60%);
    pointer-events: none;
}

/* внутренний контейнер */
.ym-footer__inner {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2.8vw, 16px);
}

/* бренд */
.ym-footer__brand {
    margin: 0;
    font-weight: 700;
    font-size: clamp(26px, 4.8vw, 36px);
    line-height: 1.15;
    color: #fff;
    letter-spacing: .4px;
    text-decoration: none;
    transition: color .25s ease, text-shadow .25s ease, transform .2s ease;
    will-change: transform;
}

.ym-footer__brand-y {
    color: var(--ym-gold);
    transition: color .25s ease, text-shadow .25s ease;
}

.ym-footer:hover .ym-footer__brand-y {
    color: var(--ym-gold-strong);
    text-shadow: 0 0 14px rgba(201, 161, 74, .35);
}

/* слоган */
.ym-footer__tagline {
    margin: 6px 0 0 0;
    font-size: clamp(14px, 2.6vw, 16px);
    line-height: 1.6;
    color: var(--ym-muted);
    opacity: .95;
    padding-inline: 6px;
}

/* соцсети */
.ym-footer__social {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2.6vw, 22px);
    margin-top: clamp(8px, 2vw, 12px);
}

.ym-social__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: clamp(16px, 2.8vw, 18px);
    color: #e7e9ee;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 999px;
    background: transparent;
    transition: color .25s ease, background-color .25s ease, filter .25s ease, transform .15s ease;
}

.ym-social__icon {
    width: clamp(20px, 3.6vw, 24px);
    height: clamp(20px, 3.6vw, 24px);
    fill: currentColor;
    opacity: .95;
    transition: opacity .25s ease;
}

.ym-social__link:hover {
    color: var(--ym-gold-strong);
    background: rgba(201, 161, 74, .08);
    filter: drop-shadow(0 0 8px rgba(201, 161, 74, .35));
    transform: translateY(-1px);
}

.ym-social__link:focus-visible {
    outline: 2px solid var(--ym-gold);
    outline-offset: 2px;
    background: rgba(201, 161, 74, .10);
}

/* копирайт */
.ym-footer__copy {
    margin: clamp(6px, 2vw, 10px) 0 0 0;
    font-size: clamp(13px, 2.4vw, 14px);
    color: var(--ym-muted);
}

/* логотип внизу */
.ym-footer__logo {
    margin-top: clamp(12px, 3vw, 16px);
    opacity: .95;
    transition: opacity .25s ease, transform .2s ease;
}

.ym-footer__logo img {
    max-width: min(200px, 60vw);
    height: auto;
    display: block;
    margin: 0 auto;
}

/* hover эффекты */
.ym-footer__logo:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.ym-footer__brand:focus-visible {
    outline: 2px solid var(--ym-gold);
    outline-offset: 3px;
}

/* ====== адаптивные уточнения ====== */

/* ≥480px — чуть крупнее шрифты, побольше отступы */
@media (min-width: 480px) {
    .ym-social__link {
        padding: 10px 16px;
    }
}

/* ≥768px — планшеты: компактнее вертикальные зазоры */
@media (min-width: 768px) {
    .ym-footer__inner {
        gap: 14px;
    }

    .ym-footer__tagline {
        max-width: 760px;
    }
}

/* ≥1024px — маленькие десктопы и выше */
@media (min-width: 1024px) {
    .ym-footer {
        padding: 64px 16px 92px;
    }

    .ym-footer__inner {
        gap: 16px;
    }
}

/* анимация появления + respect user preference */
@keyframes ym-footer-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .ym-footer,
    .ym-social__link,
    .ym-footer__brand,
    .ym-footer__logo {
        animation: none;
        transition: none;
    }
}/* ====== YMX Features (new namespace) ====== */
.ymx-features {
    --ymx-bg: #f9f9f9;
    /* общий светлый фон секции */
    --ymx-text: #222;
    /* основной текст */
    --ymx-muted: #333;
    /* абзацы */
    --ymx-card-radius: 14px;
    --ymx-shadow: 0 10px 28px rgba(0, 0, 0, .14);
    --ymx-gold: #c9a14a;

    position: relative;
    z-index: 0;
    background: var(--ymx-bg);
    padding: clamp(40px, 7vw, 88px) clamp(16px, 6vw, 10%);
}

.ymx-section-title {
    margin: 0 0 clamp(28px, 5vw, 48px);
    text-align: center;
    font-size: clamp(24px, 4.2vw, 36px);
    line-height: 1.2;
    letter-spacing: .02em;
    color: #111;
}

/* Один ряд */
.ymx-feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 4vw, 28px);
    align-items: center;
    margin-bottom: clamp(36px, 7vw, 80px);
}

/* Медиа */
.ymx-feature__media img {
    display: block;
    width: 100%;
    height: clamp(220px, 42vw, 360px);
    object-fit: cover;
    border-radius: var(--ymx-card-radius);
    box-shadow: var(--ymx-shadow);
}

/* Контент */
.ymx-feature__title {
    margin: 0 0 10px;
    font-size: clamp(22px, 3.4vw, 32px);
    line-height: 1.2;
    letter-spacing: .02em;
}

.ymx-feature__text {
    margin: 0;
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.7;
    color: var(--ymx-muted);
}

/* Кнопка */
.ymx-button {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 18px;
    border-radius: 10px;
    background: #e8d6b0;
    color: #222;
    text-decoration: none;
    font-weight: 600;
    transition: transform .15s ease, filter .2s ease;
}

.ymx-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.ymx-button:focus-visible {
    outline: 2px solid var(--ymx-gold);
    outline-offset: 2px;
}

/* ====== Desktop layout: «шахматка» ====== */
@media (min-width: 900px) {
    .ymx-feature {
        grid-template-columns: 1fr 1fr;
        gap: clamp(20px, 4vw, 50px);
    }

    /* Чётные блоки — меняем порядок: фото справа, текст слева */
    .ymx-feature:nth-child(even) .ymx-feature__media {
        order: 2;
    }

    .ymx-feature:nth-child(even) .ymx-feature__content {
        order: 1;
    }
}

/* ====== Reveal animations (respect reduced motion) ====== */
[data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
}

[data-reveal].is-in {
    opacity: 1;
    transform: none;
}

[data-reveal="left"] {
    transform: translateX(-24px);
}

[data-reveal="right"] {
    transform: translateX(24px);
}

[data-reveal="left"].is-in,
[data-reveal="right"].is-in {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none !important;
        transition: none !important;
    }
}/* FIX: не прятать контейнеры фичей */
.ymx-feature[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
}

/* Прятать только внутренние элементы */
.ymx-feature__media[data-reveal],
.ymx-feature__content[data-reveal] {
    opacity: 0;
    transform: translateY(12px);
}

.ymx-feature__media[data-reveal="left"] {
    transform: translateX(-24px);
}

.ymx-feature__media[data-reveal="right"] {
    transform: translateX(24px);
}

.ymx-feature__content[data-reveal="left"] {
    transform: translateX(-24px);
}

.ymx-feature__content[data-reveal="right"] {
    transform: translateX(24px);
}

.ymx-feature__media.is-in,
.ymx-feature__content.is-in {
    opacity: 1;
    transform: none;
}
/* ==== улучшенный вид секции YMX Features ==== */

/* фон секции — мягкий серо-бежевый, как раньше */
.ymx-features {
    --ymx-bg: #f4f4f4;
    /* прежний серый */
    background: var(--ymx-bg);
}

/* текст: чуть темнее и крупнее */
.ymx-feature__title {
    color: #111;
    font-size: clamp(24px, 3.8vw, 36px);
    margin-bottom: 14px;
}

.ymx-feature__text {
    font-size: clamp(17px, 2.2vw, 20px);
    /* 🔥 крупнее описание */
    line-height: 1.8;
    color: #2a2a2a;
    /* темнее серый */
}

/* кнопка — чуть теплее оттенок */
.ymx-button {
    background: #e6d0a0;
    color: #222;
    font-size: clamp(15px, 1.8vw, 17px);
    padding: 12px 22px;
    border-radius: 12px;
}

/* небольшое свечение при наведении */
.ymx-button:hover {
    filter: drop-shadow(0 0 6px rgba(201, 161, 74, .35));
}

/* на планшетах и телефонах — увеличить внутренние отступы секции,
   чтобы фон «дышал» */
@media (max-width: 900px) {
    .ymx-features {
        padding: 64px 20px;
    }
}
/* ==== Тёмно-серый фон и улучшенная типографика секции ==== */
.ymx-features {
    --ymx-bg: #e3e3e3;
    /* теперь фон темнее, благородный серый */
    background: linear-gradient(180deg, #dcdcdc 0%, #e3e3e3 40%, #d8d8d8 100%);
    color: #1a1a1a;
}

/* Заголовок и текст */
.ymx-feature__title {
    color: #0d0d0d;
    font-size: clamp(25px, 3.6vw, 36px);
    margin-bottom: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.ymx-feature__text {
    font-size: clamp(18px, 2.3vw, 21px);
    /* 🔥 крупнее и комфортнее */
    line-height: 1.85;
    color: #202020;
    opacity: 0.95;
}

/* Кнопка — золотой акцент с лёгким блеском */
.ymx-button {
    background: linear-gradient(90deg, #d8b978, #c9a14a);
    color: #111;
    font-size: clamp(16px, 1.8vw, 18px);
    padding: 12px 26px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
    transition: all 0.25s ease;
}

.ymx-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08) drop-shadow(0 0 6px rgba(201, 161, 74, .35));
}

/* На телефонах — больше воздуха */
@media (max-width: 900px) {
    .ymx-features {
        padding: 64px 20px;
        background: linear-gradient(180deg, #dcdcdc 0%, #e1e1e1 100%);
    }
}
/* ============ YMX HEADER (responsive, transparent on scroll) ============ */
:root {
    --ymx-h: 88px;
    /* высота шапки на десктопе */
    --ymx-ink: #0E2A4A;
    --ymx-accent: #CBB79C;
}

/* Основа */
.ymx-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    background: transparent;
    transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease;
}

.ymx-shell {
    width: min(1240px, 94vw);
    margin-inline: auto;
    height: var(--ymx-h);
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 40px;
}

/* Лого */
.ymx-logo {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: #fff;
    position: relative;
}

.ymx-logo__img {
    width: 140px;
    height: 140px;
    margin-right: -68px;
    transform: translateY(6px);
}

.ymx-logo__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ymx-logo__text {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 40px;
    letter-spacing: .02em;
    color: #fff;
    transition: all .4s ease;
}

/* «Золотой» градиент при ховере */
.ymx-logo:hover .ymx-logo__text {
    background: linear-gradient(90deg, #cfa974 0%, #7a5a33 45%, #000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 12px rgba(207, 169, 116, .5);
    transform: scale(1.02);
}

/* Навигация */
.ymx-nav {
    margin-left: auto;
}

.ymx-menu {
    display: flex;
    gap: 46px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ymx-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: .03em;
    position: relative;
    transition: color .25s ease;
}

.ymx-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 0;
    background: var(--ymx-accent);
    transition: width .25s;
}

.ymx-link:hover {
    color: var(--ymx-accent);
}

.ymx-link:hover::after {
    width: 100%;
}

/* Телефон (desktop only) */
.ymx-phone {
    margin-left: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    background: rgba(14, 42, 74, .25);
    padding: 10px 22px;
    border-radius: 26px;
    transition: all .25s;
}

.ymx-phone:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

/* Бургер — скрыт на desktop */
.ymx-burger {
    display: none;
}

/* Эффект при скролле — как на ПК */
.ymx-header.is-scrolled {
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

.ymx-header.is-scrolled .ymx-link,
.ymx-header.is-scrolled .ymx-logo,
.ymx-header.is-scrolled .ymx-phone {
    color: #fff;
}

.ymx-header.is-scrolled .ymx-phone {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
}

/* ================== Адаптив ================== */

/* Планшеты ≤ 1024px */
@media (max-width:1024px) {
    :root {
        --ymx-h: 78px;
    }

    .ymx-shell {
        gap: 18px;
    }

    .ymx-logo__img {
        width: 100px;
        height: 100px;
        margin-right: -48px;
        transform: translateY(4px);
    }

    .ymx-logo__text {
        font-size: 32px;
    }

    .ymx-menu {
        gap: 28px;
    }

    .ymx-link {
        font-size: 20px;
    }

    .ymx-phone {
        display: none;
    }

    /* как в твоём варианте */
}

/* Телефоны ≤ 768px */
@media (max-width:768px) {
    :root {
        --ymx-h: 68px;
    }

    .ymx-shell {
        padding: 0 18px;
        gap: 16px;
    }

    .ymx-logo__img {
        width: 64px;
        height: 64px;
        margin-right: -22px;
        transform: none;
    }

    .ymx-logo__text {
        font-size: 26px;
    }

    /* Бургер показываем */
    .ymx-burger {
        margin-left: auto;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        width: 38px;
        height: 32px;
        border: 0;
        background: none;
        cursor: pointer;
        color: #fff;
    }

    .ymx-burger span {
        display: block;
        width: 26px;
        height: 3px;
        margin: 4px auto;
        background: currentColor;
        border-radius: 2px;
        transition: transform .25s, opacity .25s;
    }

    /* Мобильное меню: фикс панель под шапкой */
    .ymx-nav {
        position: fixed;
        top: var(--ymx-h);
        left: 0;
        right: 0;
        display: none;
        background: rgba(0, 0, 0, .9);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 18px 0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
        z-index: 999;
    }

    .ymx-menu {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .ymx-link {
        font-size: 22px;
        padding: 12px 16px;
        border-radius: 10px;
    }

    .ymx-link:hover {
        background: rgba(255, 255, 255, .08);
        color: #fff;
    }

    /* Открытое меню */
    .ymx-nav.is-open {
        display: block;
    }

    /* Анимация бургера */
    .ymx-burger.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .ymx-burger.is-open span:nth-child(2) {
        opacity: 0;
    }

    .ymx-burger.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* В скролле — белые полоски бургера тоже видны */
    .ymx-header.is-scrolled .ymx-burger span {
        background: #fff;
    }
}

/* Очень узкие экраны ≤ 380px: ещё компактнее логотип */
@media (max-width:380px) {
    .ymx-logo__img {
        width: 54px;
        height: 54px;
        margin-right: -14px;
    }

    .ymx-logo__text {
        font-size: 24px;
    }
}

/* Нотч / безопасная зона iOS */
@supports (padding: max(0px)) {
    .ymx-header {
        padding-top: env(safe-area-inset-top);
    }
}

/* Якоря не прячутся под фикс-шапку */
html {
    scroll-padding-top: var(--ymx-h);
}/* Optional: Makes the sample page fill the window. */
html,
body {
    height: 100%;
    margin: 0;
}

.map-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

.map-container iframe {
    display: block;
}
 /* ===== Y Massage — Offer Card (clean, elegant) ===== */
 .ym-offer {
     --ym-bg: #f3ecdf;
     /* золотисто-бежевый фон */
     --ym-ink: #0f2744;
     /* тёмно-синий текст */
     --ym-accent: #c8a76a;
     /* тёплое золото (акцент) */
     --ym-accent-2: #8a6b32;
     /* тёмное золото для контраста */
     --ym-white: #fff;
     --ym-shadow: 0 20px 40px rgba(15, 39, 68, 0.12);
     --ym-radius: 20px;
     --ym-gap: clamp(18px, 2.4vw, 28px);
     background: linear-gradient(180deg, #faf6ee 0%, var(--ym-bg) 100%);
     padding: clamp(28px, 5vw, 64px) 16px;
 }

 .ym-offer__shell {
     max-width: 1100px;
     margin: 0 auto;
     background: var(--ym-white);
     border-radius: var(--ym-radius);
     box-shadow: var(--ym-shadow);
     padding: clamp(18px, 2.6vw, 32px);
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: var(--ym-gap);
     align-items: center;
     position: relative;
     overflow: hidden;
 }

 /* тонкая декоративная окантовка */
 .ym-offer__shell:before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: calc(var(--ym-radius) + 1px);
     pointer-events: none;
     border: 1px solid rgba(200, 167, 106, 0.35);
 }

 .ym-offer__badge {
     position: absolute;
     top: 16px;
     left: 16px;
     background: linear-gradient(135deg, var(--ym-accent) 0%, var(--ym-accent-2) 100%);
     color: var(--ym-white);
     font-weight: 600;
     letter-spacing: .2px;
     font-size: 12px;
     padding: 8px 12px;
     border-radius: 999px;
     box-shadow: 0 8px 16px rgba(200, 167, 106, .25);
 }

 .ym-offer__content {
     color: var(--ym-ink);
 }

 .ym-offer__title {
     font-family: "Playfair Display", Georgia, serif;
     font-weight: 700;
     line-height: 1.15;
     font-size: clamp(26px, 3.2vw, 38px);
     margin: 6px 0 8px;
     color: var(--ym-ink);
     text-shadow: 0 1px 0 rgba(0, 0, 0, .04);
 }

 .ym-offer__subtitle {
     font-family: "Frank Ruhl Libre", "Times New Roman", serif;
     font-size: clamp(16px, 2vw, 20px);
     color: #3a4a60;
     margin: 0 0 14px;
 }

 .ym-offer__list {
     margin: 0;
     padding: 0 0 0 24px;
     display: grid;
     gap: 8px;
     font-size: clamp(14px, 1.6vw, 16px);
 }

 .ym-offer__list li {
     list-style: none;
     position: relative;
     padding-left: 12px;
 }

 .ym-offer__list li::before {
     content: "•";
     position: absolute;
     left: -12px;
     top: 0;
     color: var(--ym-accent-2);
     font-weight: 700;
 }

 .ym-offer__meta {
     margin-top: 14px;
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: clamp(15px, 1.8vw, 18px);
     color: #2b3a4e;
 }

 .ym-offer__price {
     font-weight: 800;
     color: var(--ym-ink);
     background: linear-gradient(135deg, var(--ym-accent) 0%, var(--ym-accent-2) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     text-shadow: 0 0 0 rgba(0, 0, 0, 0);
     /* чёткий градиентный текст */
 }

 .ym-offer__dot {
     opacity: .5;
 }

 .ym-offer__cta {
     margin-top: 18px;
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .ym-btn {
     --h: 46px;
     display: inline-flex;
     height: var(--h);
     align-items: center;
     justify-content: center;
     padding: 0 18px;
     border-radius: 999px;
     font-weight: 700;
     text-decoration: none;
     transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
     will-change: transform;
     outline: none;
     border: 1px solid transparent;
 }

 .ym-btn--primary {
     background: linear-gradient(135deg, var(--ym-ink) 0%, #1a3a61 100%);
     color: var(--ym-white);
     box-shadow: 0 8px 18px rgba(15, 39, 68, .25);
 }

 .ym-btn--primary:hover {
     transform: translateY(-1px);
     box-shadow: 0 10px 22px rgba(15, 39, 68, .3);
 }

 .ym-btn--primary:active {
     transform: translateY(0);
 }

 .ym-btn--ghost {
     background: transparent;
     color: var(--ym-ink);
     border-color: rgba(15, 39, 68, .15);
 }

 .ym-btn--ghost:hover {
     background: rgba(15, 39, 68, .06);
 }

 .ym-offer__visual {
     position: relative;
     margin: 0;
     border-radius: calc(var(--ym-radius) - 4px);
     overflow: hidden;
     box-shadow: var(--ym-shadow);
     min-height: 260px;
 }

 .ym-offer__visual img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scale(1.02);
     transition: transform .5s ease;
 }

 .ym-offer__shell:hover .ym-offer__visual img {
     transform: scale(1.05);
 }

 .ym-offer__tag {
     position: absolute;
     bottom: 12px;
     left: 12px;
     padding: 8px 12px;
     background: rgba(15, 39, 68, .75);
     color: var(--ym-white);
     border-radius: 10px;
     font-size: 12px;
     letter-spacing: .2px;
     backdrop-filter: blur(2px);
 }

 /* ===== Responsive ===== */
 @media (max-width: 960px) {
     .ym-offer__shell {
         grid-template-columns: 1fr;
     }

     .ym-offer__visual {
         order: -1;
         /* картинка сверху на мобильном */
         min-height: 220px;
     }

     .ym-offer__badge {
         top: 12px;
         left: 12px;
     }
 }
 /* ===== Section wrapper ===== */
 .ym-duo {
     --ym-bg: #f3ecdf;
     --ym-ink: #0f2744;
     --ym-accent: #c8a76a;
     --ym-accent-2: #8a6b32;
     --ym-white: #fff;
     background: linear-gradient(180deg, #faf6ee 0%, var(--ym-bg) 100%);
     padding: clamp(28px, 6vw, 72px) 16px;
 }

 .ym-duo__wrap {
     max-width: 1180px;
     margin: 0 auto;
 }

 .ym-duo__head {
     text-align: center;
     margin-bottom: clamp(22px, 4vw, 42px);
 }

 .ym-duo__title {
     font-family: "Playfair Display", Georgia, serif;
     color: var(--ym-ink);
     font-size: clamp(28px, 4vw, 44px);
     line-height: 1.15;
     margin: 0 0 6px;
 }

 .ym-duo__subtitle {
     color: #3a4a60;
     font-size: clamp(14px, 2vw, 18px);
     margin: 0;
 }

 /* ===== Grid (2 cols desktop / 1 col mobile) ===== */
 .ym-duo__grid {
     display: grid;
     gap: clamp(18px, 2.4vw, 28px);
     grid-template-columns: 1fr 1fr;
 }

 @media (max-width: 960px) {
     .ym-duo__grid {
         grid-template-columns: 1fr;
     }
 }

/* ===== Section wrapper ===== */
.ym-duo{--ym-bg:#f3ecdf;--ym-ink:#0f2744;--ym-white:#fff;
  background:linear-gradient(180deg,#faf6ee 0%,var(--ym-bg) 100%);
  padding:clamp(28px,6vw,72px) 16px;}
.ym-duo__wrap{max-width:1180px;margin:0 auto;}
.ym-gift-banner{
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-weight:700; letter-spacing:.2px;
  background:linear-gradient(135deg,#c8a76a 0%,#8a6b32 100%); color:#fff;
  padding:12px 16px; border-radius:14px; margin:0 0 clamp(16px,3vw,24px);
  box-shadow:0 10px 22px rgba(200,167,106,.25);
}
.ym-duo__head{text-align:center;margin-bottom:clamp(22px,4vw,42px);}
.ym-duo__title{font-family:"Playfair Display",Georgia,serif;color:var(--ym-ink);
  font-size:clamp(28px,4vw,44px);line-height:1.15;margin:0 0 6px;}
.ym-duo__subtitle{color:#3a4a60;font-size:clamp(14px,2vw,18px);margin:0;}
.ym-duo__grid{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:1fr 1fr;}
@media (max-width:960px){.ym-duo__grid{grid-template-columns:1fr;}}

/* ===== Offer Card (shared style) ===== */
.ym-offer__shell{
  position:relative;overflow:hidden;background:var(--ym-white);
  border-radius:20px;box-shadow:0 20px 40px rgba(15,39,68,.12);
  padding:clamp(18px,2.6vw,32px);
  display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:clamp(18px,2.4vw,28px);
}
.ym-offer__shell:before{
  content:"";position:absolute;inset:0;border-radius:21px;pointer-events:none;
  border:1px solid rgba(200,167,106,.35);
}
@media (max-width:960px){.ym-offer__shell{grid-template-columns:1fr;}}

.ym-offer__badge{
  position:absolute;top:16px;left:16px;z-index:2;color:#fff;font-weight:700;
  font-size:12px;padding:8px 12px;border-radius:999px;
  box-shadow:0 8px 16px rgba(0,0,0,.25); letter-spacing:.2px;
}
.ym-offer__title{font-family:"Playfair Display",Georgia,serif;font-weight:700;
  line-height:1.15;font-size:clamp(24px,3.2vw,36px);margin:6px 0 8px;color:var(--ym-ink);}
.ym-offer__subtitle{font-family:"Frank Ruhl Libre","Times New Roman",serif;
  font-size:clamp(16px,2vw,20px);color:#3a4a60;margin:0 0 14px;}
.ym-offer__list{margin:0;padding:0 0 0 24px;display:grid;gap:8px;font-size:clamp(14px,1.6vw,16px);}
.ym-offer__list li{list-style:none;position:relative;padding-left:12px;}
.ym-offer__list li::before{content:"•";position:absolute;left:-12px;top:0;color:#c8a76a;font-weight:700;}
.ym-offer__meta{margin-top:10px;display:flex;align-items:center;gap:10px;font-size:clamp(14px,1.8vw,17px);color:#2b3a4e;}
.ym-offer__cta{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;}

.ym-offer__prices{
  display:flex;align-items:baseline;gap:10px;margin-top:12px;flex-wrap:wrap;
}
.ym-price{font-weight:800;line-height:1;}
.ym-price--old{
  color:#7b8796;text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:#a3b0bf;opacity:.8;font-size:clamp(18px,2.2vw,20px);
}
.ym-price--new{
  font-size:clamp(22px,2.8vw,28px);
  background:linear-gradient(135deg,#c8a76a 0%,#8a6b32 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ym-price__note{
  font-size:12px;padding:4px 8px;border-radius:999px;
  background:rgba(200,167,106,.15);color:#8a6b32;font-weight:700;letter-spacing:.3px;
}

.ym-btn{
  --h:46px;display:inline-flex;height:var(--h);align-items:center;justify-content:center;
  padding:0 18px;border-radius:999px;font-weight:700;text-decoration:none;border:1px solid transparent;
  background:linear-gradient(135deg,#0f2744 0%,#1a3a61 100%);color:#fff;
  box-shadow:0 8px 18px rgba(15,39,68,.25);transition:.25s ease all;
}
.ym-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,39,68,.3);}

.ym-offer__visual{position:relative;margin:0;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 40px rgba(15,39,68,.12);min-height:260px;}
.ym-offer__visual img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .5s ease;}
.ym-offer__shell:hover .ym-offer__visual img{transform:scale(1.05);}
.ym-offer__tag{position:absolute;bottom:12px;left:12px;padding:8px 12px;background:rgba(15,39,68,.75);color:#fff;border-radius:10px;font-size:12px;}

/* ---- Цветовые акценты ---- */
.ym-offer--promo-filles{background:linear-gradient(180deg,#fff6f8 0%,#fae7ef 100%);}
.ym-offer--promo-couple{background:linear-gradient(180deg,#fff5f5 0%,#f8eaea 100%);}
.ym-offer__badge--filles{background:linear-gradient(135deg,#e48fa2 0%,#c86b86 100%);}
.ym-offer__badge--couple{background:linear-gradient(135deg,#d15b5b 0%,#a32626 100%);}
.ym-offer--promo-filles .ym-offer__promo-text{color:#c86b86;}
.ym-offer--promo-couple .ym-offer__promo-text{color:#a32626;}
.ym-offer__promo-text{margin-top:10px;font-size:clamp(14px,1.8vw,17px);font-weight:600;}
/* ===== Section and banner ===== */
.ym-duo {
    --ym-bg: #f3ecdf;
    --ym-ink: #0f2744;
    --ym-white: #fff;
    background: linear-gradient(180deg, #faf6ee 0%, var(--ym-bg) 100%);
    padding: clamp(28px, 6vw, 72px) 16px;
}

.ym-duo__wrap {
    max-width: 1180px;
    margin: 0 auto;
}

.ym-gift-banner {
    text-align: center;
    font-weight: 700;
    letter-spacing: .2px;
    background: linear-gradient(135deg, #c8a76a 0%, #8a6b32 100%);
    color: #fff;
    padding: 12px 16px;
    border-radius: 14px;
    margin: 0 0 clamp(16px, 3vw, 24px);
    box-shadow: 0 10px 22px rgba(200, 167, 106, .25);
}

.ym-duo__head {
    text-align: center;
    margin-bottom: clamp(22px, 4vw, 42px);
}

.ym-duo__title {
    font-family: "Playfair Display", Georgia, serif;
    color: var(--ym-ink);
    font-size: clamp(28px, 4vw, 44px);
}

.ym-duo__subtitle {
    color: #3a4a60;
    font-size: clamp(14px, 2vw, 18px);
}

.ym-duo__grid {
    display: grid;
    gap: clamp(18px, 2.4vw, 28px);
    grid-template-columns: 1fr 1fr;
}

@media(max-width:960px) {
    .ym-duo__grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Offers shared ===== */
.ym-offer__shell {
    position: relative;
    overflow: hidden;
    background: var(--ym-white);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(15, 39, 68, .12);
    padding: clamp(18px, 2.6vw, 32px);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: clamp(18px, 2.4vw, 28px);
}

@media(max-width:960px) {
    .ym-offer__shell {
        grid-template-columns: 1fr;
    }
}

.ym-offer__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .25);
}

.ym-offer__title {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: clamp(24px, 3vw, 36px);
    margin: 6px 0 8px;
    color: var(--ym-ink);
}

.ym-offer__subtitle {
    font-family: "Frank Ruhl Libre", "Times New Roman", serif;
    font-size: clamp(16px, 2vw, 20px);
    color: #3a4a60;
    margin: 0 0 14px;
}

.ym-offer__list {
    margin: 0;
    padding: 0 0 0 24px;
    display: grid;
    gap: 8px;
    font-size: clamp(14px, 1.6vw, 16px);
}

.ym-offer__list li {
    list-style: none;
    position: relative;
    padding-left: 12px;
}

.ym-offer__list li::before {
    content: "•";
    position: absolute;
    left: -12px;
    top: 0;
    color: #c8a76a;
    font-weight: 700;
}

.ym-offer__meta {
    margin-top: 8px;
    font-weight: 600;
    color: #2b3a4e;
    font-size: clamp(14px, 1.8vw, 17px);
}

/* Prices */
.ym-offer__prices {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.ym-price {
    font-weight: 800;
    line-height: 1;
}

.ym-price--old {
    text-decoration: line-through;
    color: #7b8796;
    opacity: .8;
    font-size: clamp(18px, 2vw, 20px);
}

.ym-price--new {
    font-size: clamp(22px, 2.8vw, 28px);
    background: linear-gradient(135deg, #c8a76a 0%, #8a6b32 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ym-price__note {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(200, 167, 106, .15);
    color: #8a6b32;
    font-weight: 700;
    letter-spacing: .3px;
}

.ym-offer__validity {
    margin-top: 4px;
    font-size: 13px;
    color: #8a6b32;
    font-weight: 600;
}

.ym-offer__promo-text {
    margin-top: 10px;
    font-size: clamp(14px, 1.8vw, 17px);
    font-weight: 600;
}

.ym-offer__cta {
    margin-top: 14px;
}

.ym-btn {
    --h: 46px;
    display: inline-flex;
    height: var(--h);
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(135deg, #0f2744 0%, #1a3a61 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 39, 68, .25);
    transition: .25s;
}

.ym-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 39, 68, .3);
}

.ym-offer__visual {
    position: relative;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 39, 68, .12);
    min-height: 260px;
}

.ym-offer__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform .5s ease;
}

.ym-offer__shell:hover .ym-offer__visual img {
    transform: scale(1.05);
}

.ym-offer__tag {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 8px 12px;
    background: rgba(15, 39, 68, .75);
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
}

/* Colors */
.ym-offer--promo-filles {
    background: linear-gradient(180deg, #fff6f8 0%, #fae7ef 100%);
}

.ym-offer--promo-couple {
    background: linear-gradient(180deg, #fff5f5 0%, #f8eaea 100%);
}

.ym-offer__badge--filles {
    background: linear-gradient(135deg, #e48fa2 0%, #c86b86 100%);
}

.ym-offer__badge--couple {
    background: linear-gradient(135deg, #d15b5b 0%, #a32626 100%);
}

.ym-offer--promo-filles .ym-offer__promo-text {
    color: #c86b86;
}

.ym-offer--promo-couple .ym-offer__promo-text {
    color: #a32626;
}
@media (max-width:768px) {
    .ymx-header.is-scrolled {
        background: rgba(0, 0, 0, .7) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}.ym-promo-btn {
    display: inline-block;
    background-color: #0a1e3f;
    color: #fff;
    padding: 14px 26px;
    border-radius: 8px;
    font-size: 1.1rem;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #d4af37;
    transition: 0.3s ease;
}

.ym-promo-btn:hover {
    background-color: #d4af37;
    color: #0a1e3f;
}
html {
    scroll-behavior: smooth;
}
.ym-promo-btn {
    display: inline-block;
    background-color: #0a1e3f;
    color: #fff;
    padding: 14px 26px;
    border-radius: 8px;
    font-size: 1.1rem;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #d4af37;
    transition: 0.3s ease;

    margin-top: 5cm;
    /* ✅ верхний отступ */
}
.ym-ethics-block {
    background-color: #0a1e3f;
    /* тёмно-синий */
    padding: 40px 20px;
    border-bottom: 3px solid #d4af37;
    /* золотая линия */
}

/* --- ФОН ЗАТЕМНЕНИЯ --- */
.ym-modal {
    display: flex;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* --- САМО ОКНО --- */
.ym-modal-content {
    background-color: rgba(255, 255, 255, 0.88);
    /* прозрачный белый */
    color: #000000;
    /* чёрный текст */
    padding: 35px 30px;
    border-radius: 14px;
    max-width: 650px;
    width: 100%;
    border: 2px solid #d4af37;
    /* золото */
    text-align: center;
    position: relative;
    backdrop-filter: blur(6px);
    /* красивое размытие */
}

/* --- ЗАГОЛОВОК --- */
.ym-modal-content h2 {
    color: #071733 !important;
    /* глубокий тёмно-синий */
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: 700 !important;
}

/* --- ВЫДЕЛЕННЫЕ ФРАЗЫ --- */
.ym-modal-content strong {
    color: #030d1f !important;
    /* ещё темнее */
    font-weight: 800 !important;
    /* очень жирный */
}

/* --- КРЕСТИК ЗАКРЫТИЯ --- */
.ym-close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #000000;
    /* чёрный */
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
}

.ym-close:hover {
    color: #d4af37;
    /* золото */
}

/* --- МОБИЛЬНАЯ АДАПТАЦИЯ --- */
@media (max-width: 480px) {
    .ym-modal-content {
        padding: 25px 18px;
    }

    .ym-modal-content h2 {
        font-size: 1.4rem;
    }
}
.ymx-buttons {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.ymx-btn-contact {
    padding: 12px 20px;
    border: 2px solid #d4af37;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    background: rgba(212, 175, 55, 0.15);
    transition: all 0.3s ease;
}

.ymx-btn-contact:hover {
    background: #d4af37;
    color: #000;
}
.ymx-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

.ymx-btn-reserver,
.ymx-btn-contact {
    padding: 12px 22px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.ymx-btn-reserver {
    background: #d4af37;
    color: #000;
    border: 2px solid #d4af37;
}

.ymx-btn-reserver:hover {
    background: transparent;
    color: #fff;
}

.ymx-btn-contact {
    background: transparent;
    border: 2px solid #d4af37;
    color: #fff;
}

.ymx-btn-contact:hover {
    background: #d4af37;
    color: #000;
}
/* Центрированная секция */
.ym-offer-section {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(180deg, #faf6ee 0%, #f3ecdf 100%);
}

.ym-offer--promo-filles {
    max-width: 1100px;
    width: 100%;
}

/* Уменьшение изображения */
.ym-offer--promo-filles .ym-offer__visual {
    min-height: 240px;
}

.ym-offer--promo-filles .ym-offer__visual img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    transition: transform 0.4s ease;
}

.ym-offer--promo-filles .ym-offer__shell:hover .ym-offer__visual img {
    transform: scale(1.03);
}

/* Адаптация под мобильные устройства */
@media (max-width: 960px) {
    .ym-offer-section {
        padding: 1.5rem 1rem;
    }

    .ym-offer--promo-filles .ym-offer__shell {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ym-offer--promo-filles .ym-offer__visual {
        order: -1;
        margin-bottom: 1rem;
    }

    .ym-offer--promo-filles .ym-offer__list {
        text-align: left;
        padding-left: 1.5rem;
    }

    .ym-offer--promo-filles .ym-offer__cta {
        justify-content: center;
    }
}
/* ==================== Y MASSAGE — TARIFS MASSAGES BIEN-ÊTRE ==================== */
/* Всё строго в неймспейсе .ym-prices-bienetre */
.ym-prices-bienetre {
    background: #f8f5f2;
    padding: 48px 0;
}

.ym-prices-bienetre__wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.ym-prices-bienetre__head {
    margin-bottom: 18px;
}

.ym-prices-bienetre__title {
    color: #0b2343;
    font-size: 32px;
    line-height: 1.2;
    margin: 0 0 6px;
}

.ym-prices-bienetre__note {
    color: #405064;
    margin: 0;
    font-size: 15px;
}

/* Сетка */
.ym-prices-bienetre__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width:768px) {
    .ym-prices-bienetre__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Карточка цены */
.ym-bienetre-price {
    background: #fff;
    border: 1px solid rgba(11, 35, 67, .12);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ym-bienetre-price:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
    border-color: rgba(221, 175, 55, .45);
    /* золото */
}

/* Левая часть */
.ym-bienetre-price__left {
    min-width: 0;
}

.ym-bienetre-price__name {
    color: #0b2343;
    font-size: 18px;
    margin: 0 0 6px;
    line-height: 1.25;
}

.ym-bienetre-price__dur {
    color: #7a8aa0;
    font-size: 14px;
    letter-spacing: .02em;
}

/* Правая часть */
.ym-bienetre-price__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ym-bienetre-price__val {
    color: #0b2343;
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
}

/* Кнопка */
.ym-bienetre-price__btn {
    display: inline-block;
    padding: 8px 14px;
    border: 2px solid #0b2343;
    color: #0b2343;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.ym-bienetre-price__btn:hover,
.ym-bienetre-price__btn:focus {
    background: #ddaf37;
    color: #0b2343;
    border-color: #ddaf37;
    box-shadow: 0 6px 16px rgba(221, 175, 55, .35);
    outline: 0;
}

.ym-bienetre-price__btn:active {
    transform: translateY(1px);
}

/* Мобайл */
@media (max-width:480px) {
    .ym-bienetre-price {
        flex-direction: column;
        align-items: flex-start;
    }

    .ym-bienetre-price__right {
        width: 100%;
        justify-content: space-between;
    }

    .ym-prices-bienetre__title {
        font-size: 26px;
    }
}

/* Доступность + уважение к reduce-motion */
@media (prefers-reduced-motion:reduce) {

    .ym-bienetre-price,
    .ym-bienetre-price__btn {
        transition: none;
    }
}