/* Дизайн-система Smways (CLAUDE.md) */
:root {
    --primary: #1db1cf;
    --secondary: #a4d6e0;
    --foreground: #1c6b7b;
    --accent: #ffd99c;
    --muted: #e8f4f6;
    --radius: 0.75rem;
    --font-brand: 'Manrope', Arial, sans-serif;
    --font-hero-display: 'Raleway', Arial, sans-serif;
    --foreground-subtle: color-mix(in srgb, var(--foreground) 58%, var(--muted));
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: var(--font-brand);
    margin: 0;
    padding: 0;
    background-color: var(--muted);
    overflow-x: hidden;
    max-width: 100%;
    color: var(--foreground);
}

h1 {
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 111px;
    line-height: 100px;
    letter-spacing: -3px;
}

h2 {
    font-family: var(--font-brand);
    font-weight: 400;
}

h3 {
    font-family: var(--font-brand);
    font-weight: 700;
}

/* Исключение: только заголовок Hero + цена + абзац «7 дней…» — Raleway */
.hero-title,
.hero-title *,
.tour-program > p,
.tour-program > p * {
    font-family: var(--font-hero-display);
}

@media screen and (max-width: 1024px) {
    h1 {
        font-size: 66.6px !important;
        line-height: 60px !important;
        letter-spacing: 0;
    }

    h2 {
        font-size: 34px !important;
        line-height: 50px !important;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    h3 {
        font-size: 14.4px;
        line-height: 12.6px;
    }

    h6 {
        font-size: 9px;
        line-height: 14.4px;
    }
}

@media screen and (max-width: 719px) {
    h1 {
        text-align: center;
        font-size: 44px !important;
        line-height: 44px !important;
    }

    h2 {
        font-size: 30px !important;
        line-height: 36px !important;
    }

    h3 {
        font-size: 24px;
        line-height: 21px;
    }

}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.btn {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    padding: 0 30px;
    border: none;
    font-size: 15px;
    font-family: var(--font-brand);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: var(--radius);
    text-align: center;
    background: radial-gradient(
            50% 50% at 50% 0%,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(255, 255, 255, 0) 100%
    ),
    var(--primary);
    background-blend-mode: lighten;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width: 1024px) {
    .btn {
        height: 48px;
        font-size: 9px;
        border-radius: 12px;
    }
}

@media screen and (max-width: 719px) {
    .btn {
        max-width: 300px;
        height: 80px;
        font-size: 15px;
        border-radius: 19px;
    }
}

.btn.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.btn:hover {
    background: var(--accent);
    color: var(--foreground);
}

/* Бронирование, FAQ, «подробнее о команде» — изначальная оранжевая раскраска кнопок */
.btn[data-target="popup-booking"],
.tour-card .btn,
.tour-program .btn,
.more-tour-item .tour-card .btn,
.popup.popup-tour .popup-content .btn,
.popup.popup-yacht .btn,
.popup-content-booking .form-booking .btn,
#popup-map .popup-content .btn,
#popup-map2 .popup-content .btn,
.faq-header .btn.desktop,
.faq-container .btn.mobile,
.team-section .btn[data-target="popup-team"],
.fleet-section > .btn[data-target="popup-team"] {
    color: #7c5d2c;
    font-weight: 600;
    background: radial-gradient(
            50% 50% at 50% 0%,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 100%
    ),
    #ffba4a;
    background-blend-mode: lighten;
    background-size: cover;
    background-repeat: no-repeat;
}

.btn[data-target="popup-booking"]:hover,
.tour-card .btn:hover,
.tour-program .btn:hover,
.more-tour-item .tour-card .btn:hover,
.popup.popup-tour .popup-content .btn:hover,
.popup.popup-yacht .btn:hover,
.popup-content-booking .form-booking .btn:hover,
#popup-map .popup-content .btn:hover,
#popup-map2 .popup-content .btn:hover,
.faq-header .btn.desktop:hover,
.faq-container .btn.mobile:hover,
.team-section .btn[data-target="popup-team"]:hover,
.fleet-section > .btn[data-target="popup-team"]:hover {
    background: radial-gradient(circle, #ffa500 40%, #ff8c00);
    color: #7c5d2c;
}

/* «Подробнее» — компактная пилюля (outline), без «кнопочного» объёма. */
.tour-card .btn.btn--tour-details {
    width: fit-content;
    max-width: min(260px, 100%);
    min-height: 32px;
    height: auto;
    margin-inline: auto;
    align-self: center;
    padding: 5px 13px;
    font-size: clamp(9px, 0.95vw, 12px);
    font-weight: 500;
    letter-spacing: 0.035em;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--primary);
    border-radius: var(--radius);
    border: 1px solid rgba(29, 177, 207, 0.48);
    background: #dbf2f7;
    box-shadow: 0 1px 4px rgba(29, 177, 207, 0.2);
    border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent);
    background: color-mix(in srgb, var(--primary) 16%, var(--background, #fff));
    box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 20%, transparent);
    background-blend-mode: normal;
    transition: transform 0.16s ease, box-shadow 0.18s ease, background-color 0.18s ease,
        border-color 0.18s ease, color 0.18s ease;
}

.tour-card .btn.btn--tour-details:hover {
    transform: translateY(-1px);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 13%, var(--background, #fff));
    border-color: color-mix(in srgb, var(--primary) 38%, var(--secondary) 38%);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 16%, transparent);
}

html[data-theme="dark"] .tour-card .btn.btn--tour-details {
    background: color-mix(in srgb, var(--primary) 16%, rgba(18, 30, 34, 0.96));
    border-color: color-mix(in srgb, var(--primary) 48%, rgba(255, 255, 255, 0.12));
    color: color-mix(in srgb, var(--secondary) 55%, #fff);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .tour-card .btn.btn--tour-details:hover {
    background: color-mix(in srgb, var(--primary) 24%, rgba(18, 30, 34, 0.98));
    border-color: color-mix(in srgb, var(--primary) 55%, rgba(255, 255, 255, 0.18));
}

/* Явное правило для светлой темы: гарантирует видимую рамку/фон пилюли на iPad
   Safari, где color-mix(... transparent) иногда даёт сплошной transparent. */
html[data-theme="light"] .tour-card .btn.btn--tour-details {
    background: #dbf2f7;
    border-color: rgba(29, 177, 207, 0.55);
    color: rgb(29, 177, 207);
    box-shadow: 0 1px 4px rgba(29, 177, 207, 0.22);
}

html[data-theme="light"] .tour-card .btn.btn--tour-details:hover {
    background: #c9eaf2;
    border-color: rgba(29, 177, 207, 0.75);
    box-shadow: 0 2px 8px rgba(29, 177, 207, 0.28);
}

.tour-card .btn.btn--tour-details:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}

@media screen and (max-width: 1024px) {
    .tour-card .btn.btn--tour-details {
        min-height: 30px;
        padding: 4px 11px;
        font-size: clamp(8px, 1.1vw, 11px);
        letter-spacing: 0.03em;
    }
}

@media screen and (max-width: 719px) {
    .tour-card .btn.btn--tour-details {
        min-height: 34px;
        padding: 6px 14px;
        font-size: 11px;
    }
}

/* Планшет: раньше было min-width 720px — на экранах 720–800px с padding секций давало горизонтальный скролл */
@media screen and (max-width: 1024px) {
    section > * {
        min-width: min(720px, 100%) !important;
        max-width: 100%;
    }
}

@media screen and (max-width: 719px) {
    section > * {
        min-width: 0 !important;
        max-width: 100%;
    }
}

/* .link {
  display: block;
  margin-top: 10px;
  color: white;
  text-decoration: underline;
} */

.bg-wrap {
    background:  url('./../img/bg--banner.png') no-repeat 50% 0;
    background-size:  1920px auto !important;
    overflow: hidden;
}

@media screen and (max-width: 1024px) {
    .bg-wrap {
        background-size: 1141px auto !important;
    }
}

@media screen and (max-width: 719px) {
    .bg-wrap {
        background: url('./../img/bg--banner-mob.jpg') no-repeat 50% 0;
        background-size: 720px auto !important;
    }
}

.hero {
    object-fit: cover;
    color: white;
    text-align: left;
    padding: 141px 20px 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    z-index: 10;
}

@media screen and (max-width: 1024px) {
    .hero {
        min-height: auto;
        padding: 89px 40px 0;
    }
}

@media screen and (max-width: 719px) {
    .hero {
        background: url('./../img/mobile-hero.png') no-repeat center center/cover;
        background-position-y: -100px;
        padding: 80px 10px 0;
    }
}

@media screen and (min-width: 1800px) {
    .tours::before {
        content: '';
        position: absolute;
        top: -420px;
        left: 0;
        width: 100%;
        height: 1000px;
        z-index: -1;
        background: url('./../img/Группа\ 2\ 1\ 1.png') no-repeat bottom center/cover;
        pointer-events: none;
    }
}

.hero h1 {
    background: url('./../img/Ellipse\ 1.png') no-repeat center center / cover;
    padding: 200px;
    margin: -200px;
}

@media screen and (max-width: 1024px) {
    .hero h1 {
        padding-right: 0;
    }
}

@media screen and (max-width: 719px) {
    .hero h1 {
        margin: 0 0 14px;
        padding: 0;
        background: none;
    }
}

.hero-title {
    display: flex;
    align-items: end;
    position: relative;
    width: 786px;
}

@media screen and (max-width: 1024px) {
    .hero-title {
        display: block;
        width: 470px;
    }
}

@media screen and (max-width: 719px) {
    .hero-title {
        width: 100%;
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.hero-title div {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 11px 17px;
    border-radius: 15px;
    position: absolute;
    right: 40px;
    bottom: -10px;
    backdrop-filter: blur(7px);
    font-size: 22px;
    font-weight: 500;

    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 25px;
    letter-spacing: 1px;
}

@media screen and (max-width: 1024px) {
    .hero-title div {
        right: 22px;
        top: 333px;
        bottom: auto;
        padding: 8px 12px;
        font-weight: 500;
        font-size: 13.2px;
        line-height: 15px;
        letter-spacing: .5px;
        text-transform: uppercase;
    }

    .hero-title div img {
        width: 27px;
        height: 27px;
    }
}

@media screen and (max-width: 719px) {
    .hero-title div {
        font-size: 16.5px;
        line-height: 18.8px;
    }
}

.hero-title p {
    font-size: 22px;
    font-weight: 500;

    line-height: 0.25;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.link-program {
    display: block;
    margin-top: 15px;
    font-size: 13px;
    color: #ffffff;
    text-decoration: underline;
    margin-bottom: 50px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-brand);
    line-height: 100%;
    letter-spacing: .5px;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
}

@media screen and (max-width: 1024px) {
    .link-program {
        font-size: 7.8px;
        text-align: left;
    }
}

@media screen and (max-width: 719px) {
    .link-program {
        font-size: 13px;
        text-align: center;
    }
}

.tour-program {
    margin-top: 22px;
    margin-left: 171px;
    max-width: 360px;
    position: relative;
    z-index: 10;
}

@media screen and (max-width: 1024px) {
    .tour-program {
        max-width: 216px;
        margin-top: 12px;
        margin-left: 105px;
    }
}

@media screen and (max-width: 719px) {
    .tour-program {
        margin-left: 0;
        margin-top: 171px;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }
}

.tour-program p {
    font-size: 36px;
    font-weight: 300;
    margin-bottom: 30px;
    line-height: 45px;
    letter-spacing: 0;
    margin-top: 10px;
    margin-left: 4px;
}

@media screen and (max-width: 1024px) {
    .tour-program p {
        font-weight: 300;
        font-size: 21.6px;
        line-height: 27px;
        letter-spacing: 0;
        margin-left: 0;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 719px) {
    .tour-program p {
        font-size: 24px;
        line-height: 31px;
        margin-bottom: 19px;
    }
}

.tour-program b {
    font-weight: 500;
}

.tour-program .btn {
    margin-bottom: 20px;
}

@media screen and (max-width: 719px) {
    .tour-program .btn {
        margin: 0 auto 20px;
    }
}

.footer {
    margin-bottom: 10px;
    overflow: hidden;
    background-color: #fff;
    gap: 30px;
    border-radius: 30px;
    padding: 10px 20px;
    margin-top: 107px;
}

@media screen and (max-width: 1024px) {
    .footer {
        margin-top: 40px
    }
}

@media screen and (max-width: 719px) {
    .footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        border-radius: 20px;
        padding: 20px;
        margin-top: 20px;
        text-align: center;
        width: 100%;
    }
}

.footer-logo img {
    max-width: 107px;
}

@media screen and (max-width: 1024px) {
    .footer-logo img {
        width: 56px;
    }
}

@media screen and (max-width: 719px) {
    .footer-logo img {
        max-width: 120px;
        margin-bottom: 10px;
    }
}

.footer-links {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    /* 6 ссылок в центральной колонке + логотип/соцсети/телефон: при
       недостатке ширины компоненты переносятся на след. строку вместо
       «разъезжания» текста. */
    flex-wrap: wrap;
    row-gap: 14px;
}

@media screen and (max-width: 1439px) {
    .footer-links {
        gap: 14px;
    }
}

@media screen and (max-width: 719px) {
    .footer-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

.footer-links .links {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
    min-width: 0;
}

@media screen and (max-width: 1439px) {
    .footer-links .links {
        gap: 14px;
    }
}

@media screen and (max-width: 1024px) {
    .footer-links .links {
        gap: 10px;
    }
}

.footer-links a {
    color: var(--foreground-subtle);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition-duration: 0.4s;
    border-bottom: 1px solid transparent;
    white-space: nowrap;   /* «расписание и цены» не должно ломаться посреди */
}

.footer-links a:hover {
    color: var(--foreground);
    border-bottom: 1px solid var(--primary);
}

.footer-links div:nth-child(2) {
    text-align: center;
}

@media screen and (max-width: 1024px) {
    .footer-links div:nth-child(2) {
        margin-left: 0;
    }
}

.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social > * {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background: var(--secondary);
    margin-left: 0 !important;
}


@media screen and (max-width: 1024px) {
    .footer-social > * {
        width: 24px;
        height: 24px;
    }

    .footer-social img {
        width: 9px;
        height: 9px;
    }
}

@media screen and (max-width: 719px) {
    .footer-social > * {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        background: var(--secondary);
    }


    .footer-social img {
        width: 16px;
        height: 16px;
    }
}

.footer-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.footer-phone img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
}

.footer-phone a {
    font-size: 24px;
    font-weight: 600;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

@media screen and (max-width: 1439px) {
    .footer-phone a {
        font-size: 20px
    }
}

@media screen and (max-width: 1024px) {
    .footer-phone a {
        font-size: 14.4px !important;
        line-height: 100%;
        letter-spacing: 0;
        text-align: right;
    }
}

@media screen and (max-width: 719px) {
    .footer-phone a {
        font-size: 20px;
    }
}

.footer .cred {
    font-size: 12px;
    color: var(--foreground-subtle);
    justify-content: center !important;
    margin-top: 10px;
}

.hero-content {
    max-width: 1200px;
    position: relative;
    width: 100%;
    min-height: 60vh;
    padding-inline: 40px;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    .hero-content {
        min-height: auto;
    }
}

@media screen and (max-width: 719px) {
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.hero-content .hero-logo {
    display: none;
}

@media screen and (max-width: 719px) {
    .hero-content .hero-logo {
        display: block;
        margin-bottom: 23px;
    }

    .hero-content .hero-logo img {
        width: 91px;
    }
}

.hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 40px;
    overflow-x: hidden;
    z-index: 50;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding-left: max(40px, calc((99vw - 1200px) / 2));
    padding-right: max(40px, calc((99vw - 1200px) / 2));
    padding-top: 14px;
    isolation: isolate;
}

/* Матовое стекло по всей ширине при скролле (лого + меню отдельно от контента) */
.hero-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.hero-header.fixed-header::before {
    opacity: 1;
}

/* Высота хедера одинаковая в обоих состояниях — скачок при toggle убран.
   min-height + contain:layout резервирует место до загрузки шрифта Manrope,
   иначе ширина «ГЛАВНАЯ ТУРЫ …» меняется при font-swap и плашка дёргается. */
.hero-header {
    padding-bottom: 9px;
    min-height: 88px;
    contain: layout;
}
.hero-links {
    min-height: 60px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-header::before {
        transition: opacity 0.15s ease;
    }
}

@media screen and (max-width: 1439px) {
    .hero-header {
        gap: 20px;
    }
}

@media screen and (max-width: 1024px) {
    .hero-header {
        gap: 12px;
        padding: 6px 20px 6px calc(20px + 5px);
    }
}

@media screen and (max-width: 719px) {
    .hero-header {
        padding: 10px 10px 10px calc(10px + 5px);
    }
}

.hero-header .hero-logo {
    position: relative;
    z-index: 2;
}

.fixed-header .hero-logo {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

@media screen and (max-width: 1024px) {
    .hero-logo img {
        width: 84px;
        height: 57px;
    }
}

@media screen and (max-width: 719px) {
    .hero-logo {
        display: none;
    }
}

.hero-header.fixed-header .hero-links {
    background-color: rgba(255, 255, 255, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.65);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Светлая тема + скролл: сильнее просвечивает контент, холодный серый, без «молочной» плотности */
html[data-theme="light"] .hero-header::before {
    background: linear-gradient(
        180deg,
        rgba(232, 244, 246, 0.36) 0%,
        rgba(196, 208, 214, 0.32) 100%
    );
    border-bottom: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 4px 22px color-mix(in srgb, var(--foreground) 5%, transparent);
    backdrop-filter: saturate(150%) blur(26px);
    -webkit-backdrop-filter: saturate(150%) blur(26px);
}

html[data-theme="light"] .hero-header.fixed-header .hero-links {
    background: color-mix(in srgb, rgba(255, 255, 255, 0.62) 55%, rgba(228, 236, 240, 0.45) 45%);
    border: 1px solid color-mix(in srgb, var(--foreground) 14%, var(--secondary));
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 2px 14px color-mix(in srgb, var(--foreground) 8%, transparent);
}

html[data-theme="light"] .hero-header.fixed-header .hero-links a {
    color: color-mix(in srgb, var(--foreground) 78%, white);
}

html[data-theme="light"] .hero-header.fixed-header .hero-links a:hover {
    color: var(--primary);
}

html[data-theme="light"] .hero-header.fixed-header .head-phone a {
    color: var(--foreground) !important;
}

/* Иконки SVG белые — фон кнопок: бирюза (--primary) при скролле; чуть темнее при hover */
html[data-theme="light"] .hero-header.fixed-header .hero-links > .hero-social:not(.menu-button) > a {
    background: var(--primary);
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 38%, transparent);
}

html[data-theme="light"] .hero-header.fixed-header .hero-links > .hero-social:not(.menu-button) > a:hover {
    background: color-mix(in srgb, var(--primary) 78%, var(--foreground));
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 48%, transparent);
}

html[data-theme="light"] .hero-header.fixed-header .hero-social.menu-button > div {
    background: var(--primary);
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 38%, transparent);
}

html[data-theme="light"] .hero-header.fixed-header .hero-social.menu-button > div:hover {
    background: color-mix(in srgb, var(--primary) 78%, var(--foreground));
    border-color: rgba(255, 255, 255, 0.42);
}

html[data-theme="light"] .hero-header.fixed-header .theme-toggle-wrap {
    --tt-border: color-mix(in srgb, var(--foreground) 28%, var(--secondary));
    --tt-muted: rgba(255, 255, 255, 0.95);
    --tt-muted-fg: var(--foreground);
}

.hero-links {
    display: flex;
    align-items: center;
    gap: 30px;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    padding: 15px 20px;
    max-height: 60px;
    flex-grow: 1;
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 5;
}

@media screen and (max-width: 1439px) {
    .hero-links {
        padding: 15px;
        gap: 20px;
    }
}

@media screen and (max-width: 1024px) {
    .hero-links {
        gap: 5px;
        padding: 6px 12px;
        max-height: 36px;
        min-width: 0;
    }
}

@media screen and (max-width: 719px) {
    .hero-links {
        max-height: none;
    }
}

@media screen and (max-width: 719px) {
    .hero-links .desktop-nav,
    .hero-links .hero-links-end .head-phone {
        display: none;
    }
}

.hero-links a {
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    transition-duration: 0.4s;

    font-weight: 600;
    line-height: 26px;
}

.hero-links .desktop-nav > a {
    white-space: nowrap;
    flex: 0 1 auto;
}

.hero-links > .desktop-nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    gap: clamp(6px, 0.95vw, 12px);
    margin-inline: 0;
    overflow: hidden;
}

@media screen and (max-width: 1024px) {
    .hero-links a {
        font-size: clamp(10px, 1.08vw, 12.2px);
        line-height: 1.2;
        white-space: nowrap;
    }

    .hero-links a img {
        width: 12px !important;
    }
}

.hero-links a:hover {
    color: rgba(255, 255, 255, 1);
}

.hero-links div {
    display: flex;
    gap: 17px;
    align-items: center;
}

@media screen and (max-width: 1439px) {
    .hero-links div {
        gap: 10px;
    }
}

/* Телефон + переключатель темы: вместе справа, между ними 10px (перебивает .hero-links div { gap }) */
.hero-links > .hero-links-end {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
    min-width: 0;
}

.head-phone {
    margin-left: 0;
    gap: 10px !important;
}

.head-phone a {
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: right;
    color: #ffffff !important;
}

@media screen and (max-width: 1439px) {
    .head-phone a {
        font-size: 20px;
    }
}

@media screen and (max-width: 1024px) {
    .head-phone a {
        font-size: 14.4px !important;
    }
}

/* Tablet 720-1024: theme-toggle уменьшен на 20% (40 → 32px),
   симметричный gap 6px между [theme-toggle] ↔ [phone-icon] ↔ [phone-number].
   Высвобождает ~30px по горизонтали в правом углу хедера. */
@media screen and (min-width: 720px) and (max-width: 1024px) {
    .theme-toggle-wrap {
        width: 32px;
        height: 32px;
    }
    .theme-toggle__icon svg {
        width: 13px;
        height: 13px;
    }
    .hero-links > .hero-links-end {
        gap: 6px;
    }
    .head-phone {
        gap: 6px !important;
    }
}

/* Tablet 720-820 (768/820): шрифт телефона на шаг меньше; gap между
   social-иконками 2px; theme-toggle ещё на 15% меньше (32 → 27px).
   Блок ниже 720-1024, чтобы перебить его на равной специфичности. */
@media screen and (min-width: 720px) and (max-width: 820px) {
    .head-phone a {
        font-size: 12px !important;
    }
    .hero-social {
        gap: 2px !important;
    }
    .theme-toggle-wrap {
        width: 27px !important;
        height: 27px !important;
    }
    .theme-toggle__icon svg {
        width: 11px !important;
        height: 11px !important;
    }
}

/* Только 768: 2-ю (whatsapp) и 3-ю (telegram) иконки соцсетей
   сдвигаем на 2px влево в сторону логотипа — без изменения flow.
   Также gap между nav-ссылками −1px (с ~7.3 → 6) для центровки.
   `.hero-links { margin-left: -3px }` расширяет плашку влево на 3px
   (`flex-grow: 1` тянет правый край вправо → плашка +3px шире). */
@media screen and (min-width: 720px) and (max-width: 768px) {
    .hero-social > *:nth-child(2),
    .hero-social > *:nth-child(3) {
        transform: translateX(-2px);
    }
    .hero-links > .desktop-nav {
        gap: 6px !important;
        margin-left: -1px;            /* блок ссылок на 1px ближе к telegram */
    }
    .hero-links {
        margin-left: -3px;
        padding-inline: 8px !important;
    }
    /* Соц-иконки впритык (было 2px → 0). */
    .hero-social {
        gap: 0 !important;
    }
    /* Трубка-телефон ближе к номеру: 6 → 5px. */
    .head-phone {
        gap: 5px !important;
    }
    /* Theme-toggle ближе к трубке: 6 → 5px. */
    .hero-links > .hero-links-end {
        gap: 5px;
    }
}

.hero-social {
    margin-right: auto;
    gap: 13px !important;
}

.hero-social.menu-button {
    display: none;
}

@media screen and (max-width: 1024px) {
    .hero-social {
        gap: 8px !important;
    }
}

@media screen and (max-width: 719px) {
    .hero-social {
        display: flex;
        gap: 14px !important;
    }

    .hero-social.menu-button {
        display: flex;
    }
}

.hero-social > * {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.3);
}

@media screen and (max-width: 1024px) {
    .hero-social > * {
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 719px) {
    .hero-social > * {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.3);
    }
}

.hero-social > *:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tours {
    text-align: center;
    padding: 50px 20px 50px;
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent;
}

@media screen and (max-width: 1024px) {
    .tours {
        padding: 22px 40px 0;
    }
}

@media screen and (max-width: 719px) {
    .tours {
        padding: 39px 10px 0;
        z-index: 2;
    }
}

.tours:before {
    content: '';
    position: absolute;
    top: -280px;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 817px;
    background: url('./../img/bg--clouds.png') no-repeat 50% 50%;
    background-size: 100% 100%;
    pointer-events: none;
}

@media screen and (max-width: 1024px) {
    .tours:before {
        width: 1024px;
        height: 435px;
        top: -140px;
    }
}

.tours-content {
    max-width: 1200px;
    width: 100%;
    position: relative;
    z-index: 2;
    padding-inline: 40px;
    box-sizing: border-box;
}

/* Tablet 720-1024: уменьшаем padding для tours-content и переносим
   side-spacing на родительскую секцию `.tours` через её собственный
   `padding: 50px 20px` — карточкам остаётся максимум ширины. */
@media screen and (min-width: 720px) and (max-width: 1024px) {
    .tours-content {
        padding-inline: 8px;
    }
}

.tours-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

@media screen and (max-width: 1024px) {
    .tours-head {
        margin-bottom: 24px;
    }
}

@media screen and (max-width: 719px) {
    .tours-head {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
    }
}

.tours-head h2 {
    font-size: 56px;
    color: var(--foreground);
    text-transform: uppercase;
    line-height: 84px;
    letter-spacing: 0;
}

@media screen and (max-width: 1024px) {
    .tours-head h2 {
        letter-spacing: -0.8px !important;
    }
}

.tours-buttons {
    display: flex;
    gap: 5px;
    padding-top: 30px;
}

@media screen and (max-width: 719px) {
    .tours-buttons {
        padding-top: 22px;
    }
}

.swiper {
    width: 100%;
}

.swiper {
    margin-left: auto;
    margin-right: auto;
}

/* Плавная инициализация свайперов: до того как Swiper конвертирует
   .swiper-wrapper в ленту, принудительно раскладываем слайды в
   горизонтальный row и прячем overflow. Так нет вертикального стека
   и «скачка» layout'а при переходе от пре-init к post-init.
   ВАЖНО: не ставим `transition` на .swiper-wrapper после инициализации —
   Swiper задаёт инлайн `transition-duration` для transform'а слайдов
   и свой `transition-property` через CSS не меняет, поэтому любое
   наше `transition: opacity` ломает transform-анимацию (transitionend
   не срабатывает → слайдер «залипает» после переключения). */
.swiper:not(.swiper-initialized) {
    overflow: hidden;
}
.swiper:not(.swiper-initialized) > .swiper-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    opacity: 0;
    pointer-events: none;
}
.swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    flex: 0 0 auto;
}

/* Резервируем примерную высоту до init, чтобы страница не «прыгала»
   при появлении свайпера. Значения взяты с измеренного post-init. */
#tours-swiper:not(.swiper-initialized) {
    min-height: 860px;
}
.swiper-fleet:not(.swiper-initialized) {
    min-height: 424px;
}
@media screen and (max-width: 1024px) {
    #tours-swiper:not(.swiper-initialized) { min-height: 640px; }
    .swiper-fleet:not(.swiper-initialized) { min-height: 260px; }
}
@media screen and (max-width: 719px) {
    #tours-swiper:not(.swiper-initialized) { min-height: 560px; }
    .swiper-fleet:not(.swiper-initialized) { min-height: 240px; }
}

.swiper-wrapper .swiper-slide {
    height: unset;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* .swiper-wrapper {
  align-items: stretch;
} */
.swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.swiper-button-prev,
.swiper-button-next {
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 183, 77, 1) !important; /* Оранжевый цвет */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s ease, opacity 0.3s ease !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    content: '';
    width: 16px;
    height: 16px;
    background-size: cover !important;
}

@media screen and (max-width: 1024px) {
    .swiper-button-prev,
    .swiper-button-next {
        width: 24px !important;
        height: 24px !important;
    }

    .swiper-button-prev:after,
    .swiper-button-next:after {
        background-size: 9.6px 9.6px !important;
        height: 24px;
        margin-top: 0 !important
    }
}

@media screen and (max-width: 719px) {
    .swiper-button-prev,
    .swiper-button-next {
        width: 40px !important;
        height: 40px !important;
    }

    .swiper-button-prev:after,
    .swiper-button-next:after {
        background-size: 16px 16px !important;
        height: 40px;
        margin-top: 0 !important
    }
}

.swiper-button-disabled {
    background: rgba(200, 200, 200, 0.3) !important; /* Серый цвет */
}

.swiper-button-prev::after {
    background: url('./../csv/Previous\ Icon.svg') no-repeat 50% 50% !important;
}

.swiper-button-next::after {
    background: url('./../csv/Next\ Icon.svg')  no-repeat 50% 50% !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: rgba(255, 183, 77, 1) !important; /* Оранжевый цвет */
    opacity: 1 !important;
}

.swiper-scrollbar {
    max-width: 1200px;
    left: 50% !important;
    transform: translateX(-50%);
}

.tours-content .swiper {
    width: 100%;
    margin-bottom: 39px;
    overflow: visible;
}

@media screen and (max-width: 1024px) {
    .tours-content .swiper {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 719px) {
    .tours-content .swiper {
        margin-bottom: 0;
    }
}

#tours-swiper > .swiper-wrapper {
    align-items: flex-start;
    overflow: visible;
}

@media screen and (max-width: 719px) {
    #tours-swiper > .swiper-wrapper {
        margin-bottom: 20px;
    }
}

/* Три колонки на планшете/десктопе */
@media screen and (min-width: 720px) {
    .tours-content > .swiper-scrollbar {
        display: none;
    }

    #tours-swiper.swiper {
        overflow: hidden;
        /* Desktop/tablet: при узких ширинах в районе 1180-1240px
           текст карточек может дать +1..3px по высоте (из-за переносов).
           Небольшой нижний буфер убирает визуальный срез без влияния
           на композицию и клип off-screen слайдов по X. */
        padding-bottom: 4px;
    }
}

/* Навигация «Программы туров»: заметна в любой теме (стрелки всегда на месте) */
.tours-content .tours-buttons .swiper-button-prev,
.tours-content .tours-buttons .swiper-button-next {
    opacity: 1 !important;
    box-shadow: 0 2px 12px rgba(28, 107, 123, 0.22);
    border: 2px solid rgba(255, 255, 255, 0.95);
}

.tours-content .tours-buttons .swiper-button-disabled {
    background: rgba(255, 183, 77, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.85);
    opacity: 1 !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .tours-content .tours-buttons .swiper-button-prev,
html[data-theme="dark"] .tours-content .tours-buttons .swiper-button-next {
    background: rgba(255, 183, 77, 1) !important;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 3px 14px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .tours-content .tours-buttons .swiper-button-disabled {
    background: rgba(255, 183, 77, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#tours-swiper > .swiper-wrapper > .swiper-slide {
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media screen and (max-width: 1024px) {
    #tours-swiper > .swiper-wrapper > .swiper-slide {
        gap: 13px;
    }
}

@media screen and (max-width: 719px) {
    #tours-swiper > .swiper-wrapper > .swiper-slide {
        gap: 24px;
    }
}

/* Чётные слайды визуально перевёрнуты: карточка сверху, фото снизу.
   На mobile — стандартный порядок (фото сверху). */
#tours-swiper > .swiper-wrapper > .swiper-slide:nth-child(even) > .tour-image {
    order: 2;
}
#tours-swiper > .swiper-wrapper > .swiper-slide:nth-child(even) > .tour-card {
    order: 1;
}
@media screen and (max-width: 719px) {
    #tours-swiper > .swiper-wrapper > .swiper-slide:nth-child(even) > .tour-image,
    #tours-swiper > .swiper-wrapper > .swiper-slide:nth-child(even) > .tour-card {
        order: 0;
    }
}

.tours .swiper-scrollbar.swiper-scrollbar-horizontal {
    height: 6px;
}

/* Tour cards equal-height — порт из sandbox.
   - flex-start снимает legacy `align-items: stretch`, слайд = natural height.
   - JS (syncTourCardHeights) меряет карточки и пишет --tours-card-height.
   - min-height на карточках выравнивает все три блока в строке. */
#tours-swiper > .swiper-wrapper {
    align-items: flex-start;
    overflow: visible;
}

@media screen and (min-width: 720px) {
    #tours-swiper .tour-card {
        min-height: var(--tours-card-height, auto);
    }
}

.tour-item {
    max-width: 453px;
    min-height: 0;
    height: auto;
}

@media screen and (max-width: 1024px) {
    .tour-item {
        max-width: 271px;
    }
}

@media screen and (max-width: 719px) {
    .tour-item {
        max-width: 100%;
    }
}

/* В секции «программы туров» на ≥720px карточки тянутся на три колонки */
@media screen and (min-width: 720px) {
    #tours .tour-item {
        max-width: none;
    }
}

.tour-card {
    background: white;
    padding: 30px;
    border-radius: 40px;
    text-align: left;
    color: var(--foreground);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media screen and (max-width: 1024px) {
    .tour-card {
        padding: 18px;
        border-radius: 24px;
        gap: 2px;
    }
}

@media screen and (max-width: 719px) {
    .tour-card {
        padding: 20px;
        border-radius: 40px;
        gap: 20px;
        /* Card растягивается на доступное пространство слайда — все
           слайды одинаковой высоты (по самому длинному описанию).
           Раньше при разной длине p карточка коллапсировала ниже
           соседних на узком экране (336px). */
        flex: 1 1 auto;
    }

    .tour-card .btn {
        margin: 0 auto
    }
}

.tour-card p {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
}

.tour-card h3 {
    font-weight: 700;
    font-size: 24px;
    line-height: 43px;
    letter-spacing: 0;
    margin-bottom: 10px;
}

@media screen and (max-width: 719px) {
    .tour-card h3 {
        margin-bottom: 0;
    }
}

/* Пилюля «карта маршрута» на фото: единый фон как на карточке #tours (включая попап программы). */
.tour-map {
    background-color: rgba(204, 204, 204, 0.45);
    background-color: color-mix(in srgb, rgba(255, 255, 255, 0.3) 80%, black 20%);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 15px;
    padding: 7px 11px;
    width: fit-content;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 11px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    cursor: pointer;
    z-index: 5;
    position: absolute;
    text-decoration: none;
}

html[data-theme="dark"] .tour-map {
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

@media screen and (max-width: 1024px) {
    .tour-map {
        top: 6px;
        left: 7px;
        gap: 6px;
        padding: 5px 10px;
    }
}

@media screen and (max-width: 719px) {
    .tour-map {
        top: 10px;
        left: 10px;
        gap: 11px;
        padding: 7px 11px;
    }
}

.tour-map img,
.tour-map span {
    pointer-events: none;
}

.tour-image {
    width: 100%;
    height: 320px;
    min-height: 320px;
    background: gray;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    /* iOS/Safari: внутренний `.swiper-wrapper` использует transform — без
       форсированного слоя на родителе скругления не клиппят translated child.
       translateZ(0) + isolation создают стек-контекст, который корректно
       маскирует углы у Swiper-изображений. */
    transform: translateZ(0);
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

@media screen and (max-width: 719px) {
    .tour-image {
        height: auto;
        min-height: auto;
        aspect-ratio: 3/2;
    }
}

.tour-image .swiper {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.tour-image .swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-image .swiper-pagination {
    bottom: 10px !important;
    z-index: 4;
}

.tour-image .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.55;
    transition: opacity 0.45s ease, background-color 0.45s ease, transform 0.35s ease;
}

.tour-image .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--primary);
    transform: scale(1.08);
}

.tour-image span {
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    text-decoration: underline;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
}

@media screen and (max-width: 1024px) {
    .tour-image span {
        font-size: 7.2px;
        line-height: 12.6px;
    }
}

@media screen and (max-width: 719px) {
    .tour-image span {
        font-size: 12px;
        line-height: normal;
    }
}

@media screen and (max-width: 1024px) {
    .tour-image .tour-map img {
        width: 7.2px;
    }
}

@media screen and (max-width: 719px) {
    .tour-image .tour-map img {
        width: 24px;
        height: auto;
    }
}

.tour-image.tour-1 {
    background: url('./../img/image\ \(3\).png') no-repeat center center/cover;
}

.tour-image.tour-2 {
    background: url('./../img/image\ \(4\).png') no-repeat center center/cover;
}

.tour-image.tour-3 {
    background: url('./../img/image\ \(5\).png') no-repeat center center/cover;
}

.tour-image.tour-4 {
    background: url('./../img/image\ \(2\).png') no-repeat center center/cover;
}

.tour-image.tour-5 {
    background: url('./../img/image\ \(1\).png') no-repeat center center/cover;
}

/* «Подробнее» в слайдере — компактная пилюля по центру. */
#tours .tour-details {
    font-family: var(--font-brand);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary);
    font-size: clamp(10px, 1vw, 12px);
    line-height: 1.15;
    letter-spacing: 0.035em;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    text-align: center;
    min-height: 32px;
    padding: 5px 13px;
    border-radius: var(--radius);
    border: 1px solid rgba(29, 177, 207, 0.48);
    background: #dbf2f7;
    box-shadow: 0 1px 4px rgba(29, 177, 207, 0.2);
    border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent);
    background: color-mix(in srgb, var(--primary) 16%, var(--background, #fff));
    box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 20%, transparent);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.18s ease, background-color 0.18s ease,
        border-color 0.18s ease, color 0.18s ease;
}

#tours .tour-details:hover {
    transform: translateY(-1px);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 13%, var(--background, #fff));
    border-color: color-mix(in srgb, var(--primary) 38%, var(--secondary) 38%);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 16%, transparent);
}

html[data-theme="dark"] #tours .tour-details {
    background: color-mix(in srgb, var(--primary) 16%, rgba(18, 30, 34, 0.96));
    border-color: color-mix(in srgb, var(--primary) 48%, rgba(255, 255, 255, 0.12));
    color: color-mix(in srgb, var(--secondary) 55%, #fff);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] #tours .tour-details:hover {
    background: color-mix(in srgb, var(--primary) 24%, rgba(18, 30, 34, 0.98));
    border-color: color-mix(in srgb, var(--primary) 55%, rgba(255, 255, 255, 0.18));
}

/* Явное правило для светлой темы (см. .btn.btn--tour-details выше). */
html[data-theme="light"] #tours .tour-details {
    background: #dbf2f7;
    border-color: rgba(29, 177, 207, 0.55);
    color: rgb(29, 177, 207);
    box-shadow: 0 1px 4px rgba(29, 177, 207, 0.22);
}

html[data-theme="light"] #tours .tour-details:hover {
    background: #c9eaf2;
    border-color: rgba(29, 177, 207, 0.75);
    box-shadow: 0 2px 8px rgba(29, 177, 207, 0.28);
}

#tours .tour-details:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}

@media screen and (max-width: 719px) {
    #tours .tour-details {
        margin-top: 0;
        min-height: 34px;
        padding: 6px 14px;
        font-size: 11px;
        letter-spacing: 0.03em;
    }
}

.tour-features > * {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 1;

    font-weight: 500;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--foreground);
}

.fleet-team {
    padding: 0 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    //overflow: hidden;
}

@media screen and (max-width: 1024px) {
    .fleet-team {
        padding-bottom: 0;
    }
}

.fleet-team:after {
    content: '';
    position: absolute;
    bottom: -475px;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 817px;
    background: url('./../img/bg--clouds.png') no-repeat 50% 50%;
    background-size: 100% 100%;
    pointer-events: none;
}

html[data-theme="dark"] .fleet-team:after {
    background: url('./../img/bg--clouds-dark.png') no-repeat 50% 50%;
    background-size: 100% 100%;
}

#swiper-fleet-pagination,
#swiper-fleet-pagination1 {
    bottom: 70px !important;
}

@media screen and (max-width: 719px) {
    #swiper-fleet-pagination1,
    #swiper-fleet-pagination {
        display: none;
    }
}

#swiper-fleet-pagination1 .swiper-pagination-bullet,
#swiper-fleet-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
}

.swiper-pagination-bullet-active {
    background: #ffffff !important;
}

.fleet-container {
    max-width: 1200px;
    /* background: url('./../img/Group\ 26.png') no-repeat center left/70%; */
    background: transparent;
    min-height: 680px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    position: relative;
    padding-inline: 40px;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    .fleet-container {
        min-height: auto;
        padding: 0 40px;
        gap: 10px;
    }
}

@media screen and (max-width: 719px) {
    .fleet-container {
        flex-direction: column;
        align-items: center;
        /* background: url('./../img/Group\ 26.png') no-repeat top center/180vw; */
        padding: 0 10px;
    }
}

.fleet-container::before {
    content: '';
    position: absolute;
    z-index: -2;
    width: 1065px;
    height: 1122px;
    background: url(./../img/bg--captain.png) no-repeat 0 0;
    background-size: 100% 100%;
    top: -246px;
    left: -368px;
}

@media screen and (max-width: 1024px) {
    .fleet-container::before {
        background-size: 80%;
        width: 768px;
        height: 620px;
        left: -168px;
        top: -136px;
    }
}

@media screen and (max-width: 719px) {
    .fleet-container::before {
        top: 49px;
        width: 683px;
        height: 620px;
        left: -93px;
    }
}

.team-section {
    position: relative;
    width: 40%;
    z-index: 5;
}

@media screen and (max-width: 719px) {
    .team-section {
        display: none;
    }
}

.captain-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 100px;
    background-color: #fff;
    border-radius: 15px;
    padding: 10px;
    color: var(--foreground-subtle);
    font-size: 12px;
    position: absolute;
    left: 118px;
    top: 50%;
    width: fit-content;
}

@media screen and (max-width: 1024px) {
    .captain-info {
        top: 48%;
        left: 65px;
        padding: 6px;
        border-radius: 10px;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 1024px) {
    .captain-info img {
        width: 24px;
    }
}

.team-section .btn {
    position: absolute;
    bottom: 85px;
    left: 0;
    width: 320px;
}

@media screen and (max-width: 1024px) {
    .team-section .btn {
        width: 195px;
        bottom: 72px;
    }
}

.badge {
    display: block;
    color: var(--foreground);
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 15px;
    line-height: 21px;
    letter-spacing: 0;
}

@media screen and (max-width: 1024px) {
    .badge {
        font-family: var(--font-brand);
        font-weight: 500;
        font-size: 9px;
        line-height: 12.6px;
        letter-spacing: 0;
    }
}

@media screen and (max-width: 719px) {
    .badge {
        margin-top: 8px;
        font-size: 15px;
        line-height: 21px;
    }
}

.fleet-section {
    text-align: center;
    width: 62%;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-bottom: 30px;
    position: relative;
    z-index: 5;
}

@media screen and (max-width: 719px) {
    .fleet-section {
        width: 100%;
        align-items: center;
        padding-bottom: 0;
    }
}

.fleet-section > .btn {
    display: none;
}
@media screen and (max-width: 719px) {
    .fleet-section > .btn {
        display: flex;
    }
}

.swiper-fleet {
    margin-top: auto;
}

@media screen and (min-width: 1025px) {
    .swiper-fleet {
        transform: translateY(60px);
    }
}

@media screen and (max-width: 1024px) {
    .swiper-fleet {
        margin-top: 0;
        transform: none;
    }
}

@media screen and (max-width: 719px) {
    .swiper-fleet {
        margin-top: 15px;
    }
}

.swiper-fleet .swiper-slide {
    margin-bottom: 40px;
}

@media screen and (min-width: 1025px) {
    .swiper-fleet .swiper-slide {
        margin-bottom: 110px;
    }
}

@media screen and (max-width: 719px) {
    .swiper-fleet .swiper-slide {
        margin-bottom: 180px;
        margin-top: 80px;
    }
}

/* На фото флота оставили только стрелки prev/next — точки-пагинацию прячем. */
#swiper-fleet-pagination1,
.swiper-fleet .swiper-pagination {
    display: none !important;
}

/* Boat-info висит за пределами слайда своей нижней половиной
   (bottom:0 + translateY(50%) у .boat-info ниже). Горизонтальный
   клип off-screen слайдов и разрешение вертикального overflow
   делаем через clip-path: inset(0 0 -200px 0) — клипит по X ровно
   по границам контейнера, снизу расширяет видимую область на 200px
   (под любую высоту .boat-info). В отличие от padding-bottom,
   clip-path НЕ меняет layout: высота секции и позиция фото
   остаются те же, что были в исходном дизайне (до хаков). */
.swiper-fleet {
    overflow: visible;
    clip-path: inset(-20px 0 -260px 0);
}
.boat-info {
    z-index: 10;
}

/* Обёртка-span вокруг фото: overflow:hidden + border-radius гарантируют,
   что при scale-hover углы не становятся острыми (скруглённая маска
   применяется ДО transform и не зависит от рендеринга img-радиусов).
   inline-block + height:384px — чтобы wrapper «обтекал» img по ширине
   ровно как раньше был сам img (slidesPerView:'auto' считает ширину по содержимому). */
.swiper-fleet .swiper-slide > .boat-cover {
    display: block;
    width: 100%;            /* как у .swiper-fleet-slide — фото на всю ширину слайда */
    height: 384px;
    border-radius: 9px;
    overflow: hidden;       /* при scale-hover углы остаются скруглёнными */
    /* iOS Safari fix: overflow:hidden + border-radius НЕ клипит дочерний
       <img> с `will-change: transform` (img на отдельном compositing-layer).
       На iPad острые углы фото, в DevTools-эмуляции на десктопе всё ок.
       clip-path inset round решает это надёжно (нет transform-child bug). */
    clip-path: inset(0 round 9px);
    -webkit-clip-path: inset(0 round 9px);
    cursor: pointer;
    line-height: 0;
    font-size: 0;
    -webkit-tap-highlight-color: transparent;
}

.swiper-fleet .swiper-slide > .boat-cover > img.js--boat-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease, filter 0.25s ease;
    will-change: transform, filter;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.swiper-fleet .swiper-slide > .boat-cover:hover > img.js--boat-cover {
    transform: scale(1.04);
    filter: brightness(1.04);
}

/* Обратная совместимость со старой разметкой (без wrapper). */
.swiper-fleet .swiper-slide > img {
    height: 384px;
    width: auto;
    border-radius: 9px;
}

@media screen and (max-width: 1024px) {
    .swiper-fleet .swiper-slide > img,
    .swiper-fleet .swiper-slide > .boat-cover {
        height: 230px;
    }
}

@media screen and (max-width: 719px) {
    .swiper-fleet .swiper-slide > img,
    .swiper-fleet .swiper-slide > .boat-cover {
        max-height: 214px;
    }
}

.fleet-section h2 {
    font-size: 56px;
    color: var(--foreground);
    text-transform: uppercase;
    text-align: right;
    line-height: 84px;
    letter-spacing: 0;
    margin-top: 30px;
    margin-bottom: 6px;
}

@media screen and (max-width: 1024px) {
    .fleet-section h2 {
        margin: 35px 0 0;
    }
}

@media screen and (max-width: 719px) {
    .fleet-section h2 {
        text-align: center;
        margin-bottom: 4px;
    }
}

.fleet-section p {
    color: var(--foreground-subtle);
    margin-top: auto;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0;
    text-align: right;
    margin-bottom: auto;
    transform: translateY(-15px);
}

@media screen and (max-width: 1024px) {
    .fleet-section p {
        font-size: 14.4px;
        line-height: 21.6px;
        letter-spacing: 0;
        text-align: right;
        margin: 14px 0;
        transform: none;
    }
}

@media screen and (max-width: 719px) {
    .fleet-section > p {
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 0 !important;
    }
}

.boat-info {
    text-align: left;
    padding: 8px clamp(16px, 1.8vw, 22px);
    position: absolute;
    /* Light theme — мутное стекло, чтобы фото яхты сквозило через blur,
       а не закрывалось плотной teal-плашкой. Dark-вариант — отдельный
       блок ниже (с чёрным tint). */
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(28, 107, 123, 0.16);
    box-shadow: 0 12px 32px rgba(28, 107, 123, 0.2);
    border-radius: 16px;
    /* Якорь — нижняя грань слайда (= нижняя грань .boat-cover, т.к.
       у слайда нет padding-bottom). translateY(50%) сдвигает половину
       блока ниже этой границы — середина блока всегда на кромке фото,
       независимо от высоты .boat-info. Адаптив под любое число строк. */
    right: clamp(12px, 1.8vw, 23px);
    bottom: 0;
    /* translate3d + will-change — поднимает .boat-info в отдельный
       composite-layer GPU. Без этого при Swiper loop-swap (в конце
       перелистывания wrapper сбрасывает layers) 2D-transform блок
       перерисовывается на каждом кадре → верхняя половина мигает. */
    transform: translate3d(0, 50%, 0);
    will-change: transform;
    backface-visibility: hidden;
    left: auto;
    /* Адаптируется по содержимому: ширина = самая длинная колонка;
       ограничена max-width, чтобы не выходить за рамки слайда. */
    width: max-content;
    max-width: min(calc(100% - 40px), 360px);
    color: var(--foreground);
    font-size: clamp(11px, 0.9vw + 0.4rem, 13px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    box-sizing: border-box;
}

@media screen and (min-width: 1025px) {
    .boat-info {
        width: 332px;
    }
}

@media screen and (max-width: 719px) {
    .boat-info {
        /* На узких экранах блок уже не помещается в углу фото —
           сдвигаем ниже и центрируем под фотографией. */
        position: absolute;
        right: auto;
        left: 50%;
        top: auto;
        bottom: -145px;
        transform: translate3d(-50%, 0, 0);
        width: min(calc(100% - 32px), 282px);
        max-width: min(calc(100% - 32px), 282px);
    }
}

/* Карусель флота: одна и та же геометрия карточки на всех яхтах (ширина + min-height),
   чтобы при свайпе не менялись размеры блока. Не трогаем другие .boat-info на странице.
   min-height снижен до фактического контента + небольшой буфер — раньше было
   ~52px пустоты внизу карточки между списком и кнопкой. */
.swiper-fleet .swiper-fleet-slide > .boat-info {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 148px;
}

.swiper-fleet .swiper-fleet-slide > .boat-info .boat-info__list--upper,
.swiper-fleet .swiper-fleet-slide > .boat-info .boat-info__list--lower {
    flex: 0 0 auto;
}

.swiper-fleet .swiper-fleet-slide > .boat-info .boat-info__list--lower:empty {
    display: none;
}

@media screen and (min-width: 1025px) {
    .swiper-fleet .swiper-fleet-slide > .boat-info {
        /* Эталон 332px; длинное имя — одна строка, блок растёт влево (right якорь). */
        width: max-content;
        min-width: 332px;
        max-width: min(520px, calc(100% - 32px));
        min-height: 174px;
        padding-top: 10px;
        padding-bottom: 10px;
        gap: 4px;
        /* Pill + h3 сверху flex-flow; кнопка внизу через margin-top:auto.
           Список спек выведен из flow и спозиционирован абсолютным
           top:50% / translateY(-50%) — горизонтальная средняя линия
           между row1 и row2 совпадает с центром карточки = нижней
           гранью фото. Симметрия строится вокруг этой линии. */
        justify-content: flex-start;
        /* Центр карточки точно на нижней границе фото. */
        transform: translate3d(0, 50%, 0);
    }
    .swiper-fleet .swiper-fleet-slide > .boat-info > h3 {
        margin: 0;
        position: relative;
        top: -10px;
        white-space: nowrap;
        word-break: normal;
        hyphens: none;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Верхний ряд пилюль: нижний край на середине карточки (= нижний край фото).
       Нижний ряд — от этой линии вниз. Легаси: один общий .boat-info__list — по центру. */
    .swiper-fleet .swiper-fleet-slide > .boat-info > .boat-info__list--upper {
        position: absolute;
        left: clamp(16px, 1.8vw, 22px);
        right: clamp(16px, 1.8vw, 22px);
        bottom: 50%;
    }
    .swiper-fleet .swiper-fleet-slide > .boat-info > .boat-info__list--lower {
        position: absolute;
        left: clamp(16px, 1.8vw, 22px);
        right: clamp(16px, 1.8vw, 22px);
        top: 50%;
        margin-top: 3px;
    }
    .swiper-fleet .swiper-fleet-slide > .boat-info > .boat-info__list:not(.boat-info__list--upper):not(.boat-info__list--lower) {
        position: absolute;
        top: 50%;
        left: clamp(16px, 1.8vw, 22px);
        right: clamp(16px, 1.8vw, 22px);
        transform: translateY(-50%);
    }
    /* Длинная пилюля — одна строка; карточка уже max-content влево к стрелкам. */
    .swiper-fleet .swiper-fleet-slide > .boat-info .flex-info > div {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .swiper-fleet .swiper-fleet-slide > .boat-info .details {
        margin-top: auto;
    }
}

@media screen and (max-width: 1024px) {
    .swiper-fleet .swiper-fleet-slide > .boat-info {
        width: min(calc(100% - 32px), 282px);
        max-width: min(calc(100% - 32px), 282px);
        /* 190px = max natural высоты по флоту, чтобы не было скачков
           при свайпе:
           - mobile: Dufour с переносом «Запас топлива: 450 л» на 2 строки
           - tablet: Jeanneau T-Punch с длинным h3 на 2 строки */
        min-height: 190px;
    }
}

/* «Наш флот»: tablet — центр карточки на нижней грани фото; линия между
   рядами пилюль совпадает с этой кромкой (та же геометрия, что и desktop). */
@media screen and (min-width: 720px) and (max-width: 1024px) {
    .swiper-fleet .swiper-fleet-slide > .boat-info {
        transform: translate3d(0, 50%, 0);
        width: max-content;
        min-width: 282px;
        max-width: min(440px, calc(100% - 32px));
        /* Пропорция карточка/фото ближе к desktop. Раньше 190px при photo 230px → ratio 0.83 (много воздуха). */
        min-height: 145px;
        gap: 4px;
    }
    .swiper-fleet .swiper-fleet-slide > .boat-info > h3 {
        white-space: nowrap;
        word-break: normal;
        hyphens: none;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        margin-bottom: 0;
        /* Название яхты — строго по центру промежутка между region-pill (Пхукет)
           и верхним рядом spec-пилюль (Кают). Position absolute → не зависит
           от height других элементов в flex-flow. */
        position: absolute;
        left: clamp(16px, 1.8vw, 22px);
        right: clamp(16px, 1.8vw, 22px);
        top: 32px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0;
    }
    .swiper-fleet-slide .boat-info .region-pill {
        margin-bottom: 4px;
    }
    .swiper-fleet .swiper-fleet-slide > .boat-info > .boat-info__list--upper {
        position: absolute;
        left: clamp(16px, 1.8vw, 22px);
        right: clamp(16px, 1.8vw, 22px);
        bottom: 50%;
    }
    .swiper-fleet .swiper-fleet-slide > .boat-info > .boat-info__list--lower {
        position: absolute;
        left: clamp(16px, 1.8vw, 22px);
        right: clamp(16px, 1.8vw, 22px);
        top: 50%;
        margin-top: 3px;
    }
    .swiper-fleet .swiper-fleet-slide > .boat-info .flex-info > div {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(10px, 0.95vw, 12px);
    }
    /* Кнопка «Подробнее» прижимается к нижней грани карточки;
       без этого она встаёт сразу за h3 и накрывается absolute-пилюлями.
       Высота кнопки -1/4 (32 → 24px), padding-y и font пропорционально.
       margin-bottom 5px → зазор от lower-pill до button и от button до края
       карточки одинаковый (~13px каждый) при card-h 145, btn-h 24. */
    .swiper-fleet .swiper-fleet-slide > .boat-info .details {
        margin-top: auto;
        margin-bottom: 5px;
        min-height: 24px;
        padding: 3px 10px;
        font-size: clamp(8px, 0.78vw, 9.5px);
    }
    /* Light theme: затемнение -15% с графитовым оттенком поверх мутного стекла.
       linear-gradient с одинаковыми стопами добавляет ровный графит-лейер
       (rgba 45,52,65 alpha 0.15) поверх существующего белого rgba 0.55. */
    html[data-theme="light"] .swiper-fleet .swiper-fleet-slide > .boat-info {
        background-image: linear-gradient(rgba(45, 52, 65, 0.10), rgba(45, 52, 65, 0.10));
        border-color: rgba(45, 52, 65, 0.22);
    }
    /* Spec-пилюли (.flex-info > div) — окантовка по всем сторонам видимая
       (вместо бледной 18% до прозрачного). Графитовый border + чуть плотнее
       фон + лёгкая тень — пилюли читаются со всех краёв. */
    .swiper-fleet .swiper-fleet-slide > .boat-info .flex-info > div {
        border: 1px solid rgba(45, 52, 65, 0.42);
        background: rgba(255, 255, 255, 0.62);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.32);
    }
}

@media screen and (max-width: 719px) {
    .swiper-fleet .swiper-fleet-slide > .boat-info {
        bottom: -150px;
        /* Симметричное распределение: pill сверху, h3 / specs / button
           с равными пробелами по вертикали. Сбрасываем флекс-gap (6px),
           отдаём space-between равномерное расстояние. */
        justify-content: space-between;
        gap: 0;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .swiper-fleet .swiper-fleet-slide > .boat-info > h3 {
        margin: 0;
    }
    .swiper-fleet .swiper-fleet-slide > .boat-info .details {
        margin-top: 0;
    }
}

.boat-info img {
    /* Иконки спек: плавный масштаб 10px ↔ 14px без скачка на 6.6px в планшете. */
    width: clamp(10px, 1vw, 14px);
    height: clamp(10px, 1vw, 14px);
    margin-right: 0;
    flex-shrink: 0;
}

/* Grid 2 колонки равной ширины: строго симметрично, каждая пара спек
   выравнивается одна под другой. На очень узких блоках автоматом схлопывается
   в 1 колонку (auto-fit minmax 100px). */
/* Фиксированно 2 колонки — каждая по ширине самого длинного элемента в ней.
   Блок получается прямоугольным, горизонтальным, подстраивается к контенту. */
.flex-info {
    display: grid;
    /* 2 равные ячейки в ряд — 3 ряда × 2 = 6 spec-ов визуально выровнены. */
    grid-template-columns: 1fr 1fr;
    column-gap: 5px;
    row-gap: 4px;
    align-items: center;
}

.flex-info > div {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 2px 5px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 5%, var(--muted));
    color: color-mix(in srgb, var(--foreground) 92%, var(--primary));
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.boat-info h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--foreground);
    /* Заголовок яхты читаем на всех ширинах: 13px ↔ 16px */
    font-size: clamp(13px, 1vw + 0.4rem, 16px);
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
}

.boat-info__list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

@media screen and (max-width: 1024px) {
    .boat-info__list {
        gap: 3px;
    }
}

.boat-info ul {
    list-style: none;
    padding: 0;
}

.boat-info ul li {
    font-size: 14px;
    margin-bottom: 5px;
}

/* Кнопка «ПОДРОБНЕЕ» в .boat-info — точная копия оранжевого варианта
   .btn («Забронировать», «Подробнее о команде»), только с уменьшенным
   размером. Все остальные правила (цвет текста, fonts, gradient, blend,
   border-radius, hover) идентичны. */
.boat-info .details {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    margin: 12px auto 0;
    min-height: 32px;
    padding: 5px 13px;
    border: none;
    color: #7c5d2c;
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: clamp(10px, 1vw, 12px);
    line-height: 100%;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer !important;
    border-radius: var(--radius);
    background: radial-gradient(
            50% 50% at 50% 0%,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 100%
    ),
    #ffba4a;
    background-blend-mode: lighten;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.boat-info .details:hover {
    background: radial-gradient(circle, #ffa500 40%, #ff8c00);
    color: #7c5d2c;
}

@media screen and (max-width: 719px) {
    .boat-info .details {
        margin-top: 0;
        min-height: 34px;
        padding: 6px 14px;
        font-size: 11px;
    }
}

.fleet-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    position: absolute;
    left: 30px;
    bottom: 60px;
    z-index: 30;
}

@media screen and (max-width: 1024px) {
    .fleet-buttons {
        left: 15px;
        bottom: 50px;
    }
}

@media screen and (max-width: 719px) {
    .fleet-buttons {
        top: 347px;
        bottom: auto;
        left: 50%;
        right: auto;
        width: min(calc(100% - 16px), 403px);
        padding: 0;
        justify-content: space-between;
        transform: translateX(-50%);
        pointer-events: none;
    }

    #swiper-fleet1 .fleet-buttons .swiper-button-prev,
    #swiper-fleet1 .fleet-buttons .swiper-button-next {
        width: 32px !important;
        height: 32px !important;
        pointer-events: auto;
    }

    #swiper-fleet1 .fleet-buttons .swiper-button-prev:after,
    #swiper-fleet1 .fleet-buttons .swiper-button-next:after {
        width: 13px;
        height: 13px;
        background-size: 13px 13px !important;
    }

    html[data-theme="dark"] #swiper-fleet1 .fleet-buttons .swiper-button-prev,
    html[data-theme="dark"] #swiper-fleet1 .fleet-buttons .swiper-button-next {
        border: 1px solid rgba(255, 217, 156, 0.55) !important;
        background: rgba(255, 183, 77, 0.92) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    }
}

.swiper-fleet-slide {
    width: 100%;
    position: relative;
}

/* Пилюля региона в блоке описания яхты. */
.swiper-fleet-slide .boat-info .region-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 5px 12px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 3px rgba(28, 107, 123, 0.2);
}

.swiper-fleet-slide .boat-info .region-pill svg {
    flex-shrink: 0;
}

@media screen and (max-width: 1024px) {
    .swiper-fleet-slide .boat-info .region-pill {
        padding: 4px 10px;
        font-size: 11px;
        margin-bottom: 8px;
    }
}

.more-tours {
    text-align: center;
    padding: 0 20px;
    background: url('./../img/Group\ 24.png') 50% 50%;
    background-size: cover;
    background-position-y: -120px;
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

@media screen and (max-width: 1024px) {
    .more-tours {
        padding: 0;
    }
}

.more-tours-content {
    max-width: 1200px;
    width: 100%;
    padding: 50px 40px;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    .more-tours-content {
        padding: 0 40px;
    }
}

@media screen and (max-width: 719px) {
    .more-tours-content {
        padding: 0 10px;
        width: calc(100% - 20px);
    }
}

.more-tours-head {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    grid-column: 1 / -1;
}

@media screen and (max-width: 719px) {
    .more-tours-head {
        margin-bottom: 42px;
    }
}

.more-tours-head h2 {
    display: grid;
    grid-auto-flow: row;
    font-size: 56px;
    color: var(--foreground);
    text-transform: uppercase;
    text-align: right;
    line-height: 84px;
    letter-spacing: 0;
    width: 100%;
}

@media screen and (min-width: 1025px) {
    .more-tours-head h2 {
        font-size: 64px;
        line-height: 96px;
    }
}

.more-tour-item {
    max-width: 380px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Карточка занимает всё, что осталось от 380px-фото; кнопка и иконки
   прижаты к низу (margin-top: auto на .tour-features) — описание сверху,
   воздух растёт в середине, нижние края всех колонок выровнены. */
.more-tour-item .tour-card {
    flex: 1;
}

.more-tour-item .tour-card .tour-features {
    margin-top: auto;
}

.more-tours-wrapper > .more-tour-item {
    max-width: none;
    min-width: 0;
}

/* Средняя колонка: картинка снизу (после переноса заголовка в grid первая карточка — 2-й child) */
.more-tours-wrapper > .more-tour-item:nth-child(3) {
    flex-direction: column-reverse;
    justify-content: flex-end;
}

.more-tours-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 30px;
    align-items: stretch;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    .more-tours-wrapper {
        column-gap: 13px;
    }
}

@media screen and (max-width: 719px) {
    .more-tours-wrapper {
        display: block;
    }

    .more-tours-wrapper .more-tour-item {
        display: none !important;
    }
}

.more-tour-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: left;
    color: var(--foreground);
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.more-tour-card:nth-child(odd) {
    margin-bottom: 15px;
}

.more-tour-card:nth-child(even) {
    margin-top: 15px;
}

.more-tour-image {
    width: 100%;
    height: 320px;
    min-height: 380px;
    background: gray;
    border-radius: 20px;
    overflow: hidden;
}

@media screen and (max-width: 1024px) {
    .more-tour-image {
        min-height: 192px;
        max-height: 192px;
    }
}

@media screen and (max-width: 719px) {
    .more-tour-image {
        min-height: 10px;
        max-height: none;
        height: auto;
    }
}

.more-tour-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*.more-tour-image.tour-1 {
    background: url('./../img/image\ \(6\).png') no-repeat center center/cover;
}

.more-tour-image.tour-2 {
    background: url('./../img/image\ \(7\).png') no-repeat center center/cover;
}

.more-tour-image.tour-3 {
    background: url('./../img/image\ \(8\).png') no-repeat center center/cover;
}*/

.tour-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Иконки в карточках-рекомендациях (.more-tours) — inline <svg> 40×40
   из спрайта #icon--activity-N, эталонный размер из карточек программы. */
.more-tour-item .tour-features svg {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--primary);
    fill: currentColor;
}

/* Кнопка «подробнее» в карточках-рекомендациях ~1.5× от эталона .tour-card .btn--tour-details. */
.more-tour-item .tour-card .btn.btn--tour-details {
    min-height: 48px;
    padding: 8px 22px;
    font-size: clamp(13px, 1.4vw, 18px);
    max-width: min(320px, 100%);
    letter-spacing: 0.045em;
}

@media screen and (max-width: 1024px) {
    .tour-features {
        gap: 5px;
    }
}

@media screen and (max-width: 719px) {
    /* 2×2: крупная иконка + читаемый текст (не перебивать max-1024 глобальным 16px). */
    .tour-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 18px;
        margin: 14px 0 12px;
        align-items: stretch;
    }

    .tour-features > * {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 600;
        text-align: center;
        color: var(--foreground);
    }

    .tour-features > * svg {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        color: var(--primary);
        fill: currentColor;
    }

    .tour-features > * span {
        display: block;
        width: 100%;
        overflow-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

/* Desktop / tablet (≥720): иконки фич туров крупнее и читаемые. Раньше
   были 16-22px на 9px шрифте — терялись на белом фоне. Делаем 2×2 grid
   с вертикальным стеком (icon сверху, label снизу), увеличиваем иконку
   и подтягиваем заголовок/описание ближе, чтобы освободить место под фичи. */
@media screen and (min-width: 720px) {
    .tour-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
        margin-top: 14px;
        margin-bottom: 14px;
    }
    .tour-features > * {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        line-height: 1.35;
        text-align: center;
        font-weight: 600;
        color: var(--foreground);
    }
    .tour-features > * svg {
        width: 40px;
        height: 40px;
        color: var(--primary);
        fill: currentColor;
    }
    .tour-card {
        gap: 6px;
    }
    .tour-card h3 {
        line-height: 1.2;
        margin-bottom: 2px;
    }
    .tour-card p {
        line-height: 22px;
    }
}

/* Tablet (720-1024) — без уменьшения иконки относительно базового ≥720.
   min-height ячейки = иконка + gap + 2 строки label, чтобы все ячейки
   были симметричной высоты независимо от длины подписи. */
@media screen and (min-width: 720px) and (max-width: 1024px) {
    .tour-features > * {
        font-size: 12px;
        min-height: calc(40px + 4px + 2 * 1.35 * 12px);
    }
    .tour-features > * svg {
        width: 40px;
        height: 40px;
    }
    .tour-features {
        gap: 14px 10px;
    }
}

/* Desktop (≥1025) — максимальная заметность в карточке.
   min-height ячейки фиксирует 2-строчный размер для симметрии. */
@media screen and (min-width: 1025px) {
    .tour-features > * svg {
        width: 56px;
        height: 56px;
    }
    .tour-features > * {
        font-size: 14px;
        gap: 4px;
        min-height: calc(56px + 4px + 2 * 1.35 * 14px);
    }
    .tour-features {
        gap: 20px 14px;
    }
}

/* «Подробнее» pill симметрично между кнопкой «Забронировать» и нижней
   границей карточки. card flex.gap=6, нужно довести расстояние сверху
   pill до padding-bottom карточки (18px tablet / 30px desktop). */
@media screen and (min-width: 720px) and (max-width: 1024px) {
    #tours .tour-details {
        margin-top: 12px;
    }
}

/* Reversed-slide (чётный): на широком desktop оставляем прижатие фото
   к низу слайда. На планшетах это создаёт «уплывание» вниз при сжатии. */
@media screen and (min-width: 1280px) {
    #tours-swiper > .swiper-wrapper > .swiper-slide:nth-child(even) > .tour-image {
        margin-top: auto;
    }
}

@media screen and (min-width: 1025px) {
    #tours .tour-details {
        margin-top: 24px;
    }
}

/* Симметричный padding по вертикали: геометрический центр #about совпадает с центром .about-content / .about-right (раньше 20+258 смещал середину секции вниз). */
.about {
    background: var(--muted) url('./../img/bg--about.jpg') no-repeat 50% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 139px 0 139px;
    border-radius: 0 0 30px 30px;
}

@media screen and (min-width: 2000px) {
    .about {
        background-position-y: -150px;
    }
}

@media screen and (max-width: 1024px) {
    .about {
        padding: 84.5px 0 84.5px;
        background-size: auto 100%;
        border-radius: 0;
    }
}

@media screen and (max-width: 719px) {
    .about {
        padding: 20px 0 0;
        background-size: auto 586px;
        background-position: 50% 0;
    }
}

.about-content {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 70px;
    padding-inline: 40px;
    box-sizing: border-box;
}

.about-left {
    flex: 0 0 auto;
    min-width: 0;
}

@media screen and (max-width: 1024px) {
    .about-content {
        gap: 20px;
        padding: 0 40px;
    }
}

@media screen and (max-width: 719px) {
    .about-content {
        display: block;
        padding: 0 10px;
    }
}

.about-logo {
    margin-left: 53px;
    transform: translateX(230px);
}

@media screen and (max-width: 1024px) {
    .about-logo {
        margin-left: 0;
        transform: none;
    }

    .about-logo img {
        width: 182px;
        height: auto;
    }
}

.about-content h2 {
    font-size: 56px;
    color: var(--foreground);
    text-transform: uppercase;
    margin-bottom: 130px;
    line-height: 71px;
    letter-spacing: 0;
}

/* Десктоп: сдвиг через position — визуально стабильнее, чем margin у flex-ребёнка; селектор с #about перебивает любые спорные каскады. */
@media screen and (min-width: 1025px) {
    section#about .about-content h2.about-title {
        text-align: right;
        position: relative;
        top: -85px;
        left: -30px;
    }
}

@media screen and (max-width: 1024px) {
    .about-content h2 {
        margin-bottom: 73px;
    }
}

@media screen and (max-width: 719px) {
    .about-content h2 {
        margin-bottom: 20px;
    }
}

/* Текст в правой колонке «О компании» — те же кегль и ритм, что у кнопки «ПОДРОБНЕЕ О КОМАНДЕ» (.btn) */
.about-content p {
    color: var(--foreground);
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0;
}

.about-content p:not(:last-child) {
    margin-bottom: 23px;
}

@media screen and (max-width: 1024px) {
    .about-content p {
        font-size: 9px;
        line-height: 14px;
    }

    .about-content p:not(:last-child) {
        margin-bottom: 15px;
    }
}

.about-right {
    flex: 1 1 0;
    min-width: 0;
    max-width: 487px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border-radius: 20px;
    padding: 18px 17px;
}

@media screen and (max-width: 1024px) {
    .about-right {
        max-width: 292px;
        padding: 18px 11px 14px;
    }
}

/* Landscape tablet (1025–1366): про desktop max 487px слишком широк
   для уплотнённого viewport — about-left + gap + about-right выходят
   за inner-area 1100px и блок «разъезжается». Промежуточный размер. */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
    .about-content {
        gap: 40px;
    }
    .about-right {
        max-width: 380px;
    }
}

@media screen and (max-width: 719px) {
    .about-right {
        flex: none;
        width: min(100%, 360px);
        max-width: none;
        margin: -108px auto 0;
        text-align: left;
        padding: 16px 18px 15px;
        border-radius: 18px;
    }

    .about-right p {
        font-size: 12px;
        line-height: 18px;
    }
}

.faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--muted);
    position: relative;
    z-index: 2;
    padding-bottom: 16px;
    overflow: hidden;
}

@media screen and (max-width: 1024px) {
    .faq {
        padding-bottom: 0;
    }
}

.faq:before {
    content: '';
    position: absolute;
    top: -385px;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 817px;
    background: url('./../img/bg--clouds-gray.png') no-repeat 50% 50%;
    background-size: 100% 100%;
    pointer-events: none;
}

html[data-theme="dark"] .faq:before {
    background: url('./../img/bg--clouds-gray-dark.png') no-repeat 50% 50%;
}

.faq-container {
    max-width: 1200px;
    width: 100%;
    padding: 50px 40px;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    .faq-container {
        padding: 0 40px;
    }
}

@media screen and (max-width: 719px) {
    .faq-container {
        padding: 28px 10px 260px;
        background: url('./../img/map-mobile.png') no-repeat 50% 101%;
        background-size: 476px auto;
    }
}

@media screen and (min-width: 720px) and (max-width: 1024px) {
    section.faq#faq {
        margin-top: 35px;
    }
}

.faq-container::before {
    content: '';
    position: absolute;
    z-index: -1;
    background: url('./../img/Map.png') no-repeat top right;
    background-size: auto;
    width: 100%;
    height: 100%;
    right: -10%;
    top: 245px;
}

@media screen and (max-width: 1024px) {
    .faq-container::before {
        width: 640px;
        height: 969px;
        top: 115px;
        left: 49%;
        right: 0;
        background: url('./../img/Map-tablet.png') no-repeat 0 0;
    }
}

@media screen and (max-width: 719px) {
    .faq-container::before {
        display: none;
    }
}

html[data-theme="dark"] .faq-container::before {
    background: url('./../img/Map.png') no-repeat top right;
    background-size: auto;
}

.faq-container .btn.mobile {
    display: none;
}

@media screen and (max-width: 719px) {
    .faq-container .btn.mobile {
        display: flex;
        margin: 0 auto;
    }
}

.faq-item {
    background: #fff;
    border-radius: 40px;
    margin-bottom: 15px;
    padding: 30px;
    cursor: pointer;
    transition: 0.3s;
    max-width: 748px;
}

@media screen and (max-width: 1024px) {
    .faq-item {
        border-radius: 24px;
        max-width: 448px;
        padding: 18px;
        margin-bottom: 9px;
    }
}

@media screen and (max-width: 719px) {
    .faq-item {
        border-radius: 40px;
        padding: 31px 30px;
        margin-bottom: 13px;
    }
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--foreground);

    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
}

@media screen and (max-width: 1024px) {
    .faq-question {
        font-size: 12px;
        line-height: 14.4px;
    }
}

@media screen and (max-width: 719px) {
    .faq-question {
        font-size: 20px;
        line-height: 24px;
    }
}

.faq-answer {
    display: none;
    padding-top: 10px;
    color: var(--foreground);

    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-toggle {
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 183, 77, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

@media screen and (max-width: 1024px) {
    .faq-toggle {
        width: 18px;
        height: 18px;
    }

    .faq-toggle img {
        width: 16px;
    }
}

@media screen and (max-width: 719px) {
    .faq-toggle {
        width: 30px;
        height: 30px;
    }

    .faq-toggle img {
        width: 24px;
    }
}

.faq h2 {
    font-size: 56px;
    color: var(--foreground);
    text-transform: uppercase;
    line-height: 84px;
    letter-spacing: 0;
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

@media screen and (max-width: 1024px) {
    .faq-header {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 719px) {
    .faq-header {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }
}

/* Десктоп: центр кнопки «выбрать и забронировать тур» = центр «Забронировать»
   у 3-й карточки (#tours) — та же сетка 3×1fr + gap 20px, что у Swiper ≥1024px,
   и тот же горизонтальный inset 20px, что у секции .tours. */
@media screen and (min-width: 1025px) {
    .faq {
        padding-left: 20px;
        padding-right: 20px;
    }

    .faq-header {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        align-items: center;
    }

    .faq-header h2 {
        grid-column: 1 / span 2;
        justify-self: start;
    }

    .faq-header .btn.desktop {
        grid-column: 3;
        justify-self: center;
    }
}

/* Tablet 720-1024: правый край кнопки FAQ совпадает с правым краем кнопки
   «Забронировать» 3-й карточки (Райский Ко Чанг). Ko Chang button right
   на 1024 = 59px от края viewport; .faq-header c padding 40px → margin-right
   19px на кнопке (40 + 19 = 59 от viewport). */
@media screen and (min-width: 720px) and (max-width: 1024px) {
    .faq-header .btn.desktop {
        margin-right: 19px;
    }
}

.faq-header .btn {
    max-width: 300px;
}

@media screen and (max-width: 1024px) {
    .faq-header .btn {
        max-width: 180px;
        padding: 0 10px;
    }
}

.faq-desc {
    color: var(--foreground-subtle);
    max-width: 52%;
    margin-bottom: 31px;

    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
}

@media screen and (max-width: 1024px) {
    .faq-desc {
        margin-bottom: 18px;
        font-size: 14.4px;
        line-height: 21.6px;
    }
}

@media screen and (max-width: 719px) {
    .faq-desc {
        max-width: 100%;
        font-size: 20px;
        line-height: 36px;
        text-align: center;
    }
}

.people {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 101px 0 59px;
}

@media screen and (max-width: 1024px) {
    .people {
        padding: 37px 0 20px;
    }
}

@media screen and (max-width: 719px) {
    .people {
        padding: 45px 0 0;
    }
}

.people-content {
    max-width: 1200px;
    width: 100%;
    padding-inline: 40px;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    .people-content {
        padding: 0 40px;
    }
}

@media screen and (max-width: 719px) {
    .people-content {
        padding: 0 10px;
    }
}

.people-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 35px;
}

@media screen and (max-width: 1024px) {
    .people-header {
        margin-bottom: 22px;
    }
}

@media screen and (max-width: 719px) {
    .people-header {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }
}

.people h2 {
    font-size: 56px;
    color: var(--foreground);
    text-transform: uppercase;
    line-height: 71px;
    display: inline-block;
}

.people p {
    display: inline-block;
    color: var(--foreground-subtle);
    text-align: right;
    font-size: 14px;
    line-height: 33px;
    min-width: 460px;
}

@media screen and (max-width: 1024px) {
    .people p {
        font-size: 8.4px;
        line-height: 19.8px;
        min-width: 10px;
        width: 400px;
    }
}

@media screen and (max-width: 719px) {
    .people p {
        width: 100%;
        text-align: center;
        font-size: 18px;
        line-height: 24px;
    }
}

.gallery {
    display: flex;
    justify-content: space-between;
    gap: 20px;                 /* явный мин. зазор между колонками,
                                   чтобы при тесном контейнере (≈1120px
                                   inner на 1366×1024) колонки не слипались */
    height: 675px;
    align-items: stretch;
    margin-bottom: 20px;
    overflow: hidden;
}

@media screen and (max-width: 1024px) {
    .gallery {
        height: auto;
        justify-content: center;
        gap: 15px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 719px) {
    .gallery {
        display: none;
    }
}

.gallery-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    flex-shrink: 1;
    position: relative;
    overflow: hidden;
    height: 675px;
}

/* Бесшовная вертикальная прокрутка колонок галереи (десктоп). */
.gallery-row-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: 100%;
    will-change: transform;
    animation: gallery-marquee-up var(--mq-speed, 40s) linear infinite;
}

.gallery-row[data-dir="down"] .gallery-row-track {
    animation-name: gallery-marquee-down;
}

.gallery-row-track.paused {
    animation-play-state: paused;
}

.gallery-row:hover .gallery-row-track {
    animation-play-state: paused;
}

@keyframes gallery-marquee-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
@keyframes gallery-marquee-down {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}

@media screen and (max-width: 1024px) {
    /* На планшете сохраняем marquee, но уменьшаем высоту viewport колонок. */
    .gallery-row {
        height: 560px;
        overflow: hidden;
    }
}

.gallery-row img {
    border-radius: 15px;
    max-width: 280px;
    height: auto;
    gap: 20px;
    object-fit: cover;
    cursor: pointer;
}

/* Элементы галереи персонала из CMS. */
.gallery-row .gallery-item--photo {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
}

.gallery-row .gallery-item--promo {
    width: 100%;
    max-width: 280px;
    display: block;
}

.gallery-row .gallery-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-radius: 15px;
    background: rgba(28, 107, 123, 0.06);
    border: 1px dashed rgba(28, 107, 123, 0.25);
    text-decoration: none;
    color: var(--foreground);
    transition: background 0.2s, transform 0.2s;
}

.gallery-row a.gallery-promo:hover {
    background: rgba(28, 107, 123, 0.1);
    transform: translateY(-2px);
}

.gallery-row .gallery-promo__img {
    width: 100%;
    max-width: 160px;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

.gallery-row .gallery-promo__caption {
    font-size: 12px;
    text-align: center;
    color: var(--muted-foreground, #607a82);
}

.gallery-row .copy {
    max-height: 172px;
    width: 100%;
    object-fit: cover;
}

.gallery-row .copy2 {
    max-height: 243px;
    width: 100%;
    object-fit: cover;
}

.gallery-logo {
    width: 114px;
    margin-top: auto;
    margin-bottom: auto;
}

.people-slider-wrap {
    margin: 0 auto 40px;
    max-width: 1030px;
    overflow: visible;
    position: relative;
}

@media screen and (max-width: 1024px) {
    .people-slider-wrap {
        margin: 0 40px 22px;
    }
}

@media screen and (max-width: 719px) {
    .people-slider-wrap {
        margin: 0 20px 22px;
    }

    #swiper-gallery {
        margin: 0 10px;
        width: calc(100% - 20px);
        overflow: visible;
    }
}

.people-slider-wrap .swiper-people-prev-btn {
    top: 50%;
    transform: translateY(-50%);
    left: -50px;
}

.people-slider-wrap .swiper-people-next-btn {
    top: 50%;
    transform: translateY(-50%);
    right: -50px;
}

@media screen and (max-width: 719px) {
    .people-slider-wrap .swiper-people-prev-btn {
        left: -20px;
    }

    #swiper-gallery .swiper-gallery-prev-btn {
        left: -10px;
    }

    .people-slider-wrap .swiper-people-next-btn {
        right: -20px;
    }

    #swiper-gallery .swiper-gallery-next-btn {
        right: -10px;
    }
}

#swiper-people .swiper-wrapper {
    align-items: center;
}

@media screen and (max-width: 719px) {
    #swiper-people .swiper-wrapper {
        align-items: flex-start;
    }
}

#swiper-people .swiper-slide.js--open-popup {
    cursor: pointer;
}

#swiper-people .swiper-slide.js--open-popup > * {
    pointer-events: none;
}

.swiper-post {
    background: #fff;
    border-radius: 20px;
    padding: 20px !important;
    width: 330px;
    max-width: 330px;
    height: 456px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 15px;
}

@media screen and (max-width: 1024px) {
    .swiper-post {
        padding: 12px !important;
        border-radius: 12px;
    }
}

@media screen and (max-width: 719px) {
    .swiper-post {
        width: 100%;
        max-width: 100%;
    }
}

.post-photo {
    margin-bottom: auto;
}

.post-photo img {
    /* width: 330px; */
    width: 290px;
    height: 264px;
    border-radius: 20px;
}

@media screen and (max-width: 1024px) {
    .post-photo img {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }
}

.post-image {
    width: 330px;
    max-width: 330px;
    height: 484px;
}

.post-image img {
    border-radius: 20px;
    height: 484px;
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1024px) {
    .post-image img {
        height: auto;
        border-radius: 12px;
    }
}

.post-activity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--foreground-subtle);
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: 400;
    font-size: 11px;
    line-height: 17px;
    letter-spacing: 0;
}

@media screen and (max-width: 1024px) {
    .post-activity {
        margin: 0;
    }
}

.post-activity > * {
    display: flex;
    align-items: center;
    gap: 5px;
}

@media screen and (max-width: 1024px) {
    .post-activity img {
        height: 12px;
    }

    .post-activity span {
        font-size: 6.6px;
        line-height: 10.2px;
    }
}

@media screen and (max-width: 719px) {
    .post-activity img {
        height: 20px;
    }

    .post-activity span {
        font-size: 12px;
        line-height: 17px;
    }
}

.post-description {
    color: var(--foreground-subtle);

    font-weight: 400;
    font-size: 10px;
    line-height: 17px;
    letter-spacing: 0;
}

@media screen and (max-width: 1024px) {
    .post-description {
        font-size: 6px;
        line-height: 10.2px;
    }
}

@media screen and (max-width: 719px) {
    .post-description {
        font-size: 10px;
        line-height: 17px;
    }
}

.post-description b {
    margin-right: 5px;
}

.swiper-people-next-btn,
.swiper-people-prev-btn {
    position: absolute !important;
}

.schedule {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 50px;
    position: relative;
    z-index: 30;
}

@media screen and (max-width: 1024px) {
    .schedule {
        padding-bottom: 40px;
    }
}

.leaves-wrap {
    position: relative;
}

.leaves-wrap:before {
    position: absolute;
    z-index: 5;
    content: '';
    width: 905px;
    height: 969px;
    background: url('./../img/img--green.png') no-repeat 0 0;
    background-size: cover !important;
    top: -35px;
    left: 50%;
    transform: translateX(-765px);
}

/* Раскрытое расписание: класс вешает updateScheduleTable — куст ≥1.5×, сдвиг влево 70px от базового */
.leaves-wrap--schedule-expanded::before {
    width: calc(905px * 1.5);
    height: calc(969px * 1.5);
    transform: translateX(calc(-765px - 70px));
}

@media screen and (max-width: 1024px) {
    /* Опечатка `.schedule:before` молча не работала — пальма
       (`.leaves-wrap::before`) на tablet оставалась размера 905×969
       и при expanded 1357×1453, что не вписывается в высоту секции. */
    .leaves-wrap::before {
        width: 452px;
        height: 485px;
        transform: translateX(-440px);
    }
    .leaves-wrap--schedule-expanded::before {
        width: calc(452px * 1.5);
        height: calc(485px * 1.5);
        transform: translateX(calc(-440px - 35px));
    }
}

.schedule-content {
    max-width: 1200px;
    width: 100%;
    position: relative;
    z-index: 10;
    padding-inline: 40px;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    .schedule-content {
        padding: 0 40px;
    }
}

@media screen and (max-width: 719px) {
    .schedule-content {
        padding: 15px 10px 0;
    }
}

.schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

@media screen and (max-width: 1024px) {
    .schedule-header {
        margin-bottom: 22px;
    }
}

@media screen and (max-width: 719px) {
    .schedule-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 39px;
        margin-bottom: 40px;
    }
}

.schedule h2 {
    font-size: 56px;
    color: var(--foreground);
    text-transform: uppercase;
    line-height: 84px;
    letter-spacing: 0;
}

.schedule-header p {
    color: rgba(85, 85, 85, 1);
    text-align: right;
    font-size: 20px;
    line-height: 30px;
}

@media screen and (max-width: 1024px) {
    .schedule-header p {
        font-size: 12px;
        line-height: 18px;
    }
}

@media screen and (max-width: 719px) {
    .schedule-header p {
        font-size: 20px;
        line-height: 30px;
        text-align: center;
    }
}

.schedule-table {
    display: block;
    background: url('./../csv/line.svg') no-repeat top right/ 85% #fff;
    border-radius: 20px;
    padding: 30px;
}

@media screen and (max-width: 1024px) {
    .schedule-table {
        padding: 18px;
    }
}

@media screen and (max-width: 719px) {
    .schedule-table {
        padding: 20px;
        border-radius: 40px;
    }
}

/*.schedule-table.active {
    display: block;
}*/

.schedule-table-month {
    text-align: left;
    color: var(--foreground);
    margin-bottom: 20px;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 24px;
    line-height: 43px;
}

@media screen and (max-width: 1024px) {
    .schedule-table-month {
        font-size: 14.4px;
        line-height: 25.8px;
        margin-bottom: 13px;
    }
}

@media screen and (max-width: 719px) {
    .schedule-table-month {
        font-size: 24px;
        line-height: 43px;
        margin-bottom: 20px;
    }
}

.schedule-table-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media screen and (max-width: 719px) {
    .schedule-table-rows {
        gap: 15px;
    }
}

.schedule-table-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(28, 107, 123, 0.08);
    /* nowrap + flex-basis на ячейках = ячейки сжимаются пропорционально
       при тесном контейнере, а на широком экране держатся базового
       размера (не растут) — никаких media-query костылей. */
    flex-wrap: nowrap;
}

/* Новые строки расписания (DOM-сборка из JSON) */
.schedule-table-row .sched-month,
.schedule-table-row .sched-dates,
.schedule-table-row .sched-boat,
.schedule-table-row .sched-meta,
.schedule-table-row .sched-price {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: var(--foreground);
}

.schedule-table-row .sched-month {
    font-weight: 600;
    min-width: 100px;
}
.schedule-table-row .sched-dates {
    font-variant-numeric: tabular-nums;
    min-width: 180px;
}
.schedule-table-row .sched-boat {
    flex: 1 1 200px;
    font-weight: 500;
}
.schedule-table-row .sched-meta {
    color: var(--muted-foreground, #5a7a80);
    font-size: 13px;
}
.schedule-table-row .sched-price {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--muted, #e8f4f6);
    font-weight: 500;
    white-space: nowrap;
}
.schedule-table-row .sched-bow {
    background: rgba(29, 177, 207, 0.12);
    color: var(--primary);
}
.schedule-table-row .sched-stern {
    background: rgba(255, 217, 156, 0.4);
    color: var(--foreground);
}

.schedule-table-row .details {
    margin-left: auto;
}

.schedule-empty {
    padding: 32px;
    text-align: center;
    color: var(--muted-foreground, #607a82);
    font-size: 14px;
}

/* Шире селект яхты — регион+название часто длинные */
#schedule .menu-container #yacht,
#schedule .menu-container .js--select-style#yacht {
    min-width: 320px;
}
@media screen and (max-width: 1024px) {
    #schedule .menu-container #yacht,
    #schedule .menu-container .js--select-style#yacht {
        min-width: 240px;
    }
}

@media screen and (max-width: 1024px) {
    .schedule-table-row {
        gap: 22px;
    }
}

/*.schedule-table-row.active {
    display: flex;
}*/

.schedule-table-row > * {
    display: flex;
    align-items: center;
    gap: 5px;
}

.schedule-table-row .date {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    /* basis 190 на широком экране, ужимается до min-content на узком. */
    flex: 0 1 190px;
    width: auto;
    min-width: 0;
}

.schedule-table-row .price {
    /* Цвет как у кнопки "Бронировать" в hero — жёлтый #ffba4a + тёмный текст. */
    background: radial-gradient(
            50% 50% at 50% 0%,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 100%
    ),
    #ffba4a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-blend-mode: lighten;
    background-size: cover;
    background-repeat: no-repeat;
    color: #7c5d2c;
    font-weight: 600;
    height: 47px;
    flex: 0 1 280px;
    width: auto;
    min-width: 0;
    border-radius: 30px;
    font-size: 20px;
    line-height: normal;
}

.schedule-table-row .price:hover {
    background: radial-gradient(circle, #ffa500 40%, #ff8c00);
    color: #7c5d2c;
}

.schedule-table-row .price * {
    pointer-events: none;
}

.schedule-table-row .ship {
    background-color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px;
    border-radius: 30px;

    min-height: 47px;
    flex: 0 1 280px;
    width: auto;
    min-width: 0;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.schedule-table-row .ship:hover {
    background-color: var(--secondary);
}

.schedule-table-row .ship * {
    pointer-events: none;
}

@media screen and (max-width: 1024px) {
    .schedule-table-row .ship,
    .schedule-table-row .price {
        height: auto;
        min-height: 28px;
        padding: 5px 10px;
    }
}

@media screen and (max-width: 719px) {
    .schedule-table-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        align-items: stretch;
        padding: 15px 18px;
    }

    .schedule-table-row .date {
        flex: 1 1 100%;
        width: 100%;
        font-size: 21px;
        line-height: 1.25;
        height: auto;
        justify-content: center;
        text-align: center;
    }

    .schedule-table-row .ship {
        flex: 1 1 100%;
        width: 100%;
        min-height: 3rem;
        height: auto;
        padding: 9px 15px;
        font-size: 20px;
        line-height: 1.2;
        gap: 9px;
        border-radius: 27px;
        justify-content: center;
    }

    .schedule-table-row .ship img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        flex-shrink: 0;
    }

    /* Носовая / кормовая: одинаковая ширина и высота, колонка «метка → значение» */
    .schedule-table-row .price {
        flex: 1 1 calc(50% - 6px);
        max-width: calc(50% - 6px);
        width: calc(50% - 6px);
        min-height: 4.5rem;
        height: auto;
        padding: 9px 12px;
        font-size: 20px;
        line-height: 1.2;
        border-radius: 27px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        box-sizing: border-box;
    }

    .schedule-table-row .price span,
    .schedule-table-row .price b {
        display: block;
        width: 100%;
        text-align: center;
        line-height: 1.2;
    }

    .schedule-table-row .price span {
        font-size: 18px;
        font-weight: 500;
    }

    .schedule-table-row .price b {
        font-size: 20px;
        font-weight: 600;
    }
}

.menu-container {
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: center;
    margin-bottom: 37px;
    position: relative;
    z-index: 40;
    overflow: visible;
}

@media screen and (max-width: 1024px) {
    .menu-container {
        gap: 24px;
        margin: 0 40px 24px;
    }
}

@media screen and (max-width: 719px) {
    .menu-container {
        flex-direction: column;
        gap: 16px;
        align-items: center;
        margin: 0 auto 24px;
        width: 100%;
    }
}

.menu-item {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 40px;
    padding: 20px;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.menu-item.up {
    position: relative;
    z-index: 200;
}

@media screen and (max-width: 1024px) {
    .menu-item {
        padding: 10px;
        border-radius: 24px;
    }
}

@media screen and (max-width: 719px) {
    .menu-item {
        width: min(100%, 380px);
        flex-direction: column;
        align-items: center;
        gap: 12px;
        border-radius: 28px;
        padding: 16px;
    }
}

.menu-item label {
    margin-right: 20px;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
}

@media screen and (max-width: 1024px) {
    .menu-item label {
        font-size: 12px;
        line-height: normal;
        margin-right: 12px;
    }
}

@media screen and (max-width: 719px) {
    .menu-item label {
        font-size: 20px;
        margin-right: 0;
        text-align: center;
    }
}

.menu-item #month,
.menu-item #month + .choices__list {
    min-width: 170px;
    width: max-content;
}

.menu-item .choices__inner,
.menu-item #yacht + .choices__list,
.menu-item #yacht + .choices__list.choices__list--single .choices__inner,
.menu-item #month + .choices__list,
.menu-item #month + .choices__list.choices__list--single .choices__inner {
    height: 44px;
}

/* Адаптивная ширина селектов расписания — тянутся под длину выбранного названия
   (Choices.js отрисовывает текст внутри .choices__list--single) */
.menu-item .choices__inner .choices__list.choices__list--single,
.menu-item .choices__inner .choices__list.choices__list--single .choices__item {
    white-space: nowrap;
    overflow: visible;
}
.menu-item .choices[data-type*="select-one"] {
    width: max-content;
    max-width: 100%;
    position: relative;
    z-index: 1;
}
.menu-item .choices[data-type*="select-one"] .choices__inner {
    padding-right: 40px; /* резерв под стрелку, чтобы буквы не «съедались» */
}

.menu-item .choices.is-focused.is-open .choices__list,
.menu-item .choices.is-focused.is-open .choices__inner,
.menu-item .choices.is-focused.is-open .choices__list,
.menu-item .choices.is-focused.is-open .choices__inner {
    border-radius: 19px 19px 0 0 !important;
}

.menu-item .choices.is-focused.is-open  .choices__list.choices__list--dropdown {
    border-radius: 0 0 19px 19px !important;
    z-index: 220;
}

.menu-item .choices__list.choices__list--dropdown .choices__item {
    padding-right: 10px;
}

@media screen and (max-width: 1024px) {
    .menu-item #month,
    .menu-item #month + .choices__list {
        min-width: 102px;
    }
}

.menu-item #yacht,
.menu-item #yacht + .choices__list {
    min-width: 242px;
    width: max-content;
}

@media screen and (max-width: 1024px) {
    .menu-item #yacht,
    .menu-item #yacht + .choices__list {
        min-width: 145px;
    }
}

@media screen and (max-width: 719px) {
    .menu-item .choices[data-type*="select-one"] {
        width: min(100%, 320px);
    }

    .menu-item .choices__inner,
    .menu-item #yacht + .choices__list,
    .menu-item #month + .choices__list {
        width: 100%;
        min-width: 0;
    }

    .menu-item .choices__inner .choices__list.choices__list--single,
    .menu-item .choices__inner .choices__list.choices__list--single .choices__item {
        justify-content: center;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.2;
    }

    .menu-item .choices__list.choices__list--dropdown {
        left: 0;
        right: 0;
        width: 100%;
        max-height: min(46vh, 320px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 16px 32px rgba(15, 35, 45, 0.18);
    }

    .menu-item .choices__list.choices__list--dropdown .choices__list .choices__item {
        padding: 10px 14px;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
        line-height: 1.25;
    }
}

.menu-item .dropdown {
    padding: 15px;
}

@media screen and (max-width: 1024px) {
    .menu-item .dropdown {
        padding: 11px;
    }
}

@media screen and (max-width: 719px) {
    .menu-item .dropdown {
        padding: 14px 15px;
    }
}

.dropdown {
    padding: 10px 15px;
    border-radius: 20px;
    background: var(--muted);
    cursor: pointer;
    outline: none;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('./../csv/arr.svg');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px;
    max-width: 200px;

    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--foreground);
}

/* Заморозка прокрутки страницы под открытым попапом. На mobile Safari
   только overflow:hidden не блокирует rubber-band — нужен position:fixed.
   JS (_lockBodyScroll) сохраняет scrollY и ставит body.style.top:-scrollY,
   чтобы header не уезжал. На разморозке восстанавливаем scroll. Backdrop-
   tap на iOS ловится touchend-fallback'ом → closePopup → _unlockBodyScroll. */
body.popup-locked {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}

.popup-content {
    background: white;
    padding: 30px;
    border-radius: 20px;
    width: 50vw;
    position: relative;
    max-height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
}

@media screen and (max-width: 1024px) {
    /* Mobile/tablet: размер карты-попапа = размер popup-tour
       (Программа маршрута). Карта Leaflet занимает >=75% высоты
       за счёт flex-grow и переопределения min-height clamp. */
    #popup-map .popup-content,
    #popup-map2 .popup-content {
        width: min(480px, calc(100vw - 24px));
        max-width: calc(100vw - 16px);
        height: 90vh;
        max-height: 90vh;
        min-height: 80vh;
        box-sizing: border-box;
    }
    /* Подсказка: занимает всю ширину минус X (top-right абсолютный),
       выравнена по той же горизонтали что и крестик. */
    #popup-map .popup-content.popup-content-map h6,
    #popup-map2 .popup-content.popup-content-map h6 {
        padding-right: 36px;
        text-align: left;
    }
    #popup-map .tour-map-content,
    #popup-map2 .tour-map-content {
        flex: 1 1 0;
        min-height: 0;
    }
    #popup-map .tour-map-leaflet,
    #popup-map2 .tour-map-leaflet {
        flex: 1 1 0;
        height: auto;
        /* Override clamp(360px, calc(50vw - 100px), 620px) из дефолтной
           десктоп-формулы — там min-height ломает flex-grow на mobile. */
        min-height: 0;
    }

    .popup-content {
        width: min(480px, calc(100vw - 24px));
        max-width: calc(100vw - 16px);
        box-sizing: border-box;
        padding: 12px;
        border-radius: 12px;
        font-size: 9px;
        line-height: 14px;
    }

    #popup-map .popup-content .btn {
        width: 216px;
        max-width: 100%;
        margin: 0 auto;
    }
}

/* Tablet 720-1024: возвращаем шрифты программы (+2 шага от 9-9.6 → 13-13.6,
   h3 14.4 → 18.4, h6 → 14.4, features 8.4 → 12.4) и высоту главного фото
   (200 → 439). Положение/ширина/transform попапа НЕ меняются. */
@media screen and (min-width: 720px) and (max-width: 1024px) {
    .popup.popup-tour .tour-image {
        height: 439px !important;
        min-height: 439px !important;
    }
    .popup.popup-tour .popup-content-tour > h3 {
        font-size: 18.4px !important;
        line-height: 22px !important;
    }
    .popup.popup-tour .popup-content-tour,
    .popup.popup-tour .popup-content-tour > p {
        font-size: 13.6px !important;
        line-height: 20px !important;
    }
    .popup.popup-tour .day-plan *,
    .popup.popup-tour .day-num,
    .popup.popup-tour .short-desc,
    .popup.popup-tour .day-plan .details-title {
        font-size: 13px !important;
        line-height: 18px !important;
    }
    .popup.popup-tour .popup-tour-features .features__el {
        font-size: 12.4px !important;
        line-height: 18px !important;
    }
    .popup.popup-tour .popup-content-tour h6 {
        font-size: 14.4px !important;
        line-height: 20px !important;
    }
    /* Пилюля «карта маршрута» на фото — ×1.5 в tablet. */
    .popup.popup-tour .tour-map {
        padding: 7.5px 13.5px !important;
        gap: 10.5px !important;
        border-radius: 15px !important;
    }
    .popup.popup-tour .tour-map img {
        width: 7.2px !important;
    }
    .popup.popup-tour .tour-map span {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }
    /* Пилюля капитана «Савелий Туманов / Сертифицированный капитан» ×1.5
       в секции «Наш флот и команда». Текст + иконка + сама плашка. */
    .captain-info {
        padding: 9px !important;
        border-radius: 15px !important;
        gap: 15px !important;
    }
    .captain-info img {
        width: 36px !important;
    }
    .badge {
        font-size: 13.5px !important;
        line-height: 18.9px !important;
    }
    .captain-info p {
        font-size: 10.8px !important;
        line-height: 15.1px !important;
    }
}

@media screen and (max-width: 719px) {
    .popup-content {
        font-size: 14px;
        line-height: 24px;
    }
}

.popup-slider-wrap {
    overflow: hidden;
    display: grid;
    gap: 10px;
}

/* Галерея попапа: большой main-slider + миниатюры снизу */
.popup.popup-yacht .popup-slider-wrap .popup-slider {
    position: relative;
}

.popup.popup-yacht .popup-slider-wrap .popup-slider .swiper-slide img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* Оверлейные стрелки попапа — это НЕ .swiper-button-* (чтобы глобальные
 * правила лендинга их не перекрывали). Полупрозрачные, всегда видны. */
.popup.popup-yacht .popup-slider-wrap {
    position: relative;
}

.popup.popup-yacht .popup-arrow {
    position: absolute;
    top: 175px;                /* центр main-фото 350px */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 20;
    opacity: 0;                /* скрыты по умолчанию */
    pointer-events: none;
    transition: opacity 0.25s ease, background 0.2s ease, transform 0.2s ease;
}

/* Плавное появление при наведении на фото-зону. */
.popup.popup-yacht .popup-slider-wrap:hover .popup-arrow,
.popup.popup-yacht .popup-arrow:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.popup.popup-yacht .popup-arrow::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgba(255, 255, 255, 0.95);
    border-left: 2px solid rgba(255, 255, 255, 0.95);
}

.popup.popup-yacht .popup-arrow--prev {
    left: 14px;
}
.popup.popup-yacht .popup-arrow--prev::before {
    transform: translateX(2px) rotate(-45deg);
}

.popup.popup-yacht .popup-arrow--next {
    right: 14px;
}
.popup.popup-yacht .popup-arrow--next::before {
    transform: translateX(-2px) rotate(135deg);
}

.popup.popup-yacht .popup-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: translateY(-50%) scale(1.08);
}

.popup.popup-yacht .popup-arrow.swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}

@media screen and (max-width: 1024px) {
    .popup.popup-yacht .popup-arrow {
        top: 110px;            /* центр main-фото 220px */
        width: 32px;
        height: 32px;
    }
    .popup.popup-yacht .popup-arrow::before {
        width: 8px;
        height: 8px;
    }
}

@media screen and (max-width: 719px) {
    .popup.popup-yacht .popup-arrow {
        top: 90px;             /* центр main-фото 180px */
    }
}

.popup.popup-yacht .popup-thumbs {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 2px;
}

.popup.popup-yacht .popup-thumbs .swiper-slide {
    width: 90px !important;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.popup.popup-yacht .popup-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.popup.popup-yacht .popup-thumbs .swiper-slide:hover {
    opacity: 0.9;
}

.popup.popup-yacht .popup-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border-color: var(--primary);
}

@media screen and (max-width: 1024px) {
    .popup.popup-yacht .popup-slider-wrap .popup-slider .swiper-slide img {
        height: 220px;
        border-radius: 12px;
    }
    .popup.popup-yacht .popup-thumbs .swiper-slide {
        width: 56px !important;
        height: 40px;
        border-radius: 6px;
    }
}

@media screen and (max-width: 719px) {
    .popup.popup-yacht .popup-slider-wrap .popup-slider .swiper-slide img {
        height: 180px;
    }
}

.popup.popup-yacht .popup-content {
    width: 680px;
    padding: 18px;
    display: grid;
    gap: 18px;
    /* Тонкая скроллбара в тон бренда. */
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
    /* pan-y: вертикальный скролл — нативный, горизонтальный жест уходит
       в touchend-listener в main.js → переключение на соседнюю яхту. */
    touch-action: pan-y;
}

.popup.popup-yacht .popup-content::-webkit-scrollbar {
    width: 6px;
}
.popup.popup-yacht .popup-content::-webkit-scrollbar-track {
    background: transparent;
}
.popup.popup-yacht .popup-content::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 3px;
    opacity: 0.8;
}
.popup.popup-yacht .popup-content::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
    opacity: 1;
}

@media screen and (max-width: 1024px) {
    .popup.popup-yacht .popup-content {
        width: min(400px, calc(100vw - 24px));
        max-width: calc(100vw - 16px);
        box-sizing: border-box;
    }
}

/* Tablet 720-1024: попап описания яхты совпадает по ширине и высоте
   с попапом «Программа маршрута» (80vw × 88vh). Главное фото ×1.5
   (220 → 330), стрелки центрируются заново, текст -2 шага (24 → 16). */
@media screen and (min-width: 720px) and (max-width: 1024px) {
    .popup.popup-yacht .popup-content {
        width: 80vw !important;
        max-width: calc(100vw - 16px) !important;
        height: 88vh !important;
        max-height: 88vh !important;
        min-height: 88vh !important;
    }
    /* Высокая специфичность через html[data-theme] — побеждает позднее
       в каскаде правило `width: min(360px, 100%) !important`. */
    html[data-theme] .popup.popup-yacht .popup-content .popup-slider,
    html[data-theme] .popup.popup-yacht .popup-content .popup-slider .swiper-slide,
    html[data-theme] .popup.popup-yacht .popup-content .popup-slider .swiper-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
    html[data-theme] .popup.popup-yacht .popup-content {
        padding: 18px 18px !important;
    }
    .popup.popup-yacht .popup-slider-wrap .popup-slider .swiper-slide img {
        height: 330px !important;
        border-radius: 16px;
    }
    .popup.popup-yacht .popup-arrow {
        top: 165px !important;       /* центр фото 330px */
    }
    /* Тело попапа: текст -2 шага (h3 24 → текст 16). */
    .popup.popup-yacht .popup-content p,
    .popup.popup-yacht .popup-content li,
    .popup.popup-yacht .popup-features__el strong,
    .popup.popup-yacht .popup-features__el p {
        font-size: 16px !important;
        line-height: 22px !important;
    }
    /* Compact gaps + структурированная сетка features (2 колонки) */
    html[data-theme] .popup.popup-yacht .popup-content {
        gap: 10px !important;
    }
    .popup.popup-yacht .popup-content > h3 {
        margin: 4px 0 0 !important;
    }
    .popup.popup-yacht .popup-content > p {
        margin: 0 !important;
    }
    .popup.popup-yacht .popup-features {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px 18px;
    }
    .popup.popup-yacht .popup-features__el {
        margin: 0;
    }
    .popup.popup-yacht .popup-features__el .popup-features__header {
        margin-bottom: 0 !important;
    }
    .popup.popup-yacht .popup-features__el p {
        margin: 0 !important;
        line-height: 20px !important;
    }
    /* Миниатюры ×1.5 (из 90 базы → 135), вплотную к главному фото. */
    .popup.popup-yacht .popup-slider-wrap .popup-thumbs {
        margin-top: 0 !important;
        padding: 0 !important;
    }
    .popup.popup-yacht .popup-thumbs .swiper-slide {
        width: 135px !important;
        height: 96px !important;
        border-radius: 12px !important;
    }
    /* Стрелки чуть крупнее. */
    .popup.popup-yacht .popup-arrow {
        width: 36px !important;
        height: 36px !important;
    }
}

.popup.popup-yacht .popup-content .popup-slider {
    width: 630px !important;
    border-radius: 20px;
    overflow: hidden;
}

.popup.popup-yacht .popup-content .popup-slider .swiper-slide {
    width: 630px !important;
}

@media screen and (max-width: 1024px) {
    .popup.popup-yacht .popup-content .popup-slider,
    .popup.popup-yacht .popup-content .popup-slider .swiper-slide {
        width: min(360px, 100%) !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 719px) {
    .popup.popup-yacht .popup-content .popup-slider,
    .popup.popup-yacht .popup-content .popup-slider .swiper-slide {
        width: calc(100vw - 80px) !important;
    }
}

/* Универсальный лайтбокс для фоток из блока "Нас выбирают потрясающие люди".
   Размер и стекло — те же, что у popup-point: одинаковое ощущение по всему сайту.
   Закрытие — клик в любое место, кроме самого фото (см. main.js). */
.popup.popup-gallery-lightbox .popup-content {
    width: 50vw;
    max-width: min(720px, 96vw);
    max-height: 80vh;
    padding: 6px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(15, 35, 45, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.popup.popup-gallery-lightbox .popup-content img.js--lightbox-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 72vh;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
}

/* Портретные фото — такая же «визуальная масса», как горизонтальные,
   но вертикальная рамка 10/16 и бóльшая высота. */
.popup.popup-gallery-lightbox .popup-content.is-portrait {
    width: auto;
    max-width: min(460px, 86vw);
    max-height: min(820px, 92vh);
}
.popup.popup-gallery-lightbox .popup-content.is-portrait img.js--lightbox-img {
    width: auto;
    height: 80vh;
    max-height: 80vh;
    aspect-ratio: 10 / 16;
    object-fit: cover;
}

/* Крестик убран — закрытие по клику в любое место, кроме фото. */
.popup.popup-gallery-lightbox .popup-content .close {
    display: none !important;
}

@media screen and (max-width: 1024px) {
    .popup.popup-gallery-lightbox .popup-content {
        width: min(720px, calc(100vw - 24px));
    }
}

@media screen and (max-width: 719px) {
    .popup.popup-gallery-lightbox .popup-content {
        width: calc(100vw - 24px);
    }
    .popup.popup-gallery-lightbox .popup-content img.js--lightbox-img {
        aspect-ratio: 4 / 3;
        max-height: 60vh;
    }
}

/* Галерея фотографий точки маршрута. Открывается кликом по точке
   на карте маршрута. Карусель на 5 фото, автопрокрутка без остановок.
   Визуально совпадает с popup-map (та же ширина 50vw на десктопе),
   тонкая стеклянная рамка, стрелки по hover. */
.popup.popup-point .popup-content {
    width: 50vw;
    max-width: min(720px, 96vw);
    max-height: 80vh;
    padding: 6px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(15, 35, 45, 0.35);
    overflow: visible;
}

.popup.popup-point .popup-slider-wrap {
    position: relative;
    width: 100%;
    /* Фиксированный aspect-ratio на обёртке + height:100% на всех детях —
       единственный способ гарантировать, что slide и img занимают одну
       и ту же область. Иначе (aspect-ratio на img + height:auto) slide
       получает лишние ~20px снизу из-за flex-column + align-items:center. */
    aspect-ratio: 16 / 10;
    max-height: 72vh;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.popup.popup-point .popup-slider,
.popup.popup-point .popup-slider .swiper-wrapper,
.popup.popup-point .popup-slider .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    background: transparent;
}

/* position:absolute + inset:0 — img заполняет slide ровно, без
   flex-центрирования, которое у swiper-slide (flex-direction:column
   из базового правила) сдвигало img на ~10px вверх внутри slide. */
.popup.popup-point .popup-slider .swiper-slide img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 12px;
}

.popup.popup-point .popup-content .close {
    display: none !important;
}

.popup.popup-point .swiper-pagination {
    display: none;
}

.popup.popup-point .popup-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, background 0.2s ease, transform 0.2s ease;
}

.popup.popup-point .popup-slider-wrap:hover .popup-arrow,
.popup.popup-point .popup-arrow:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.popup.popup-point .popup-arrow::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 11px;
    height: 11px;
    border-top: 2px solid rgba(255, 255, 255, 0.95);
    border-left: 2px solid rgba(255, 255, 255, 0.95);
}

.popup.popup-point .popup-arrow--prev {
    left: 14px;
}
.popup.popup-point .popup-arrow--prev::before {
    transform: translateX(2px) rotate(-45deg);
}

.popup.popup-point .popup-arrow--next {
    right: 14px;
}
.popup.popup-point .popup-arrow--next::before {
    transform: translateX(-2px) rotate(135deg);
}

.popup.popup-point .popup-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.08);
}

.popup.popup-point .popup-arrow.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

@media screen and (max-width: 1024px) {
    .popup.popup-point .popup-content {
        width: min(720px, calc(100vw - 24px));
    }
}

@media screen and (max-width: 719px) {
    .popup.popup-point .popup-content {
        width: calc(100vw - 24px);
    }
    .popup.popup-point .popup-slider .swiper-slide img {
        aspect-ratio: 4 / 3;
        max-height: 60vh;
    }
    .popup.popup-point .popup-arrow {
        width: 40px;
        height: 40px;
        opacity: 1;
        pointer-events: auto;
    }
}

.popup.popup-success .popup-content {
    width: calc(100vw - 80px) !important;
    max-width: 600px !important;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: center;
}

.popup.popup-success .popup-content h4 {
    text-align: center;
    font-size: 24px;
    line-height: 36px;
    max-width: 410px;
    font-weight: 400;
}

.popup.popup-tour .popup-content {
    width: 815px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media screen and (max-width: 1024px) {
    .popup.popup-tour .popup-content {
        width: 80vw;
        max-width: calc(100vw - 16px);
        box-sizing: border-box;
        gap: 15px;
    }
}

.popup.popup-tour .popup-content .btn {
    width: 360px;
    height: 80px;
    min-height: 80px;
}

@media screen and (max-width: 1024px) {
    .popup.popup-tour .popup-content .btn {
        width: 216px;
        height: 48px;
        min-height: 48px;
    }
}

@media screen and (max-width: 719px) {
    .popup.popup-tour .popup-content .btn {
        width: 100%;
        height: 80px;
        min-height: 80px;
    }

    /* Почти на всю ширину (в ~2 раза ближе к краям, чем 100vw−24px), safe-area, крестик не под вырез/UI. */
    .popup.popup-tour {
        align-items: flex-start;
        justify-content: center;
        padding-top: max(6px, env(safe-area-inset-top, 0px));
        padding-right: max(6px, env(safe-area-inset-right, 0px));
        padding-bottom: max(12px, calc(8px + env(safe-area-inset-bottom, 0px)));
        padding-left: max(6px, env(safe-area-inset-left, 0px));
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .popup.popup-tour .popup-content {
        width: calc(100vw - 12px);
        max-width: none;
        margin-top: 0;
        margin-bottom: 0;
        max-height: min(
            92dvh,
            calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)
        );
        padding-top: 12px;
        padding-bottom: max(43px, calc(31px + env(safe-area-inset-bottom, 0px)));
        box-sizing: border-box;
    }

    /* Круглый крестик; на 3px ближе к краю карточки, чем прежние 6px. */
    .popup.popup-tour .popup-content > .close {
        position: absolute;
        top: max(3px, env(safe-area-inset-top, 0px));
        right: max(3px, env(safe-area-inset-right, 0px));
        z-index: 30;
        margin: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(28, 107, 123, 0.16);
        box-shadow: 0 1px 5px rgba(15, 35, 45, 0.08);
        font-size: 15px;
        font-weight: 300;
        line-height: 1;
        color: var(--foreground, #1c6b7b);
        opacity: 0.82;
        transition: opacity 0.15s ease, color 0.15s ease;
    }

    html[data-theme="dark"] .popup.popup-tour .popup-content > .close {
        background: rgba(26, 42, 48, 0.94);
        border-color: rgba(255, 255, 255, 0.14);
        color: rgba(232, 244, 246, 0.95);
    }

    .popup.popup-tour .popup-content > .close:active,
    .popup.popup-tour .popup-content > .close:hover {
        opacity: 1;
    }
}

.popup.popup-tour .tour-image {
    height: 330px;
    min-height: 330px;
    position: relative;
}
@media screen and (max-width: 1024px) {
    .popup.popup-tour .tour-image {
        height: 200px;
        min-height: 200px;
    }
}

.popup.popup-tour .tour-image .swiper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.popup.popup-tour .tour-image .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup.popup-tour .tour-image .swiper-pagination {
    bottom: 12px !important;
    z-index: 4;
}

.popup.popup-tour .tour-image .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.55;
    transition: opacity 0.45s ease, background-color 0.45s ease, transform 0.35s ease;
}

.popup.popup-tour .tour-image .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--primary);
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .tour-image .swiper-pagination-bullet,
    .tour-image .swiper-pagination-bullet-active,
    .popup.popup-tour .tour-image .swiper-pagination-bullet,
    .popup.popup-tour .tour-image .swiper-pagination-bullet-active {
        transition: opacity 0.15s ease, background-color 0.15s ease;
        transform: none;
    }
}

/* Пилюля «карта маршрута» на фото в модалке: ~в 1.5 раза компактнее, ближе к углу снимка. */
.popup.popup-tour .tour-map {
    padding: 5px 9px;
    gap: 7px;
    border-radius: 10px;
    top: 6px;
    left: 6px;
}

.popup.popup-tour .tour-map img {
    margin-bottom: 0;
    width: 8px;
    height: auto;
    flex-shrink: 0;
}

.popup.popup-tour .tour-map span {
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: 0.04em;
}

@media screen and (max-width: 1024px) {
    .popup.popup-tour .tour-map img {
        width: calc(7.2px * 2 / 3);
    }

    .popup.popup-tour .tour-map span {
        font-size: max(7px, calc(7.2px * 2 / 3));
        line-height: 1.2;
    }
}

@media screen and (max-width: 719px) {
    .popup.popup-tour .tour-map span {
        font-size: 9px;
        line-height: 1.25;
    }
}

.popup .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
    z-index: 10;
}

/* Крестик программы тура: круг (позиция top/right — в медиазапросах, чтобы не перебить мобилку). */
.popup.popup-tour .popup-content > .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(28, 107, 123, 0.16);
    box-shadow: 0 1px 5px rgba(15, 35, 45, 0.08);
    font-size: 15px;
    font-weight: 300;
    line-height: 1;
    color: var(--foreground, #1c6b7b);
    opacity: 0.82;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

@media screen and (min-width: 720px) {
    .popup.popup-tour .popup-content > .close {
        top: 7px;
        right: 7px;
    }
}

html[data-theme="dark"] .popup.popup-tour .popup-content > .close {
    background: rgba(26, 42, 48, 0.92);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(232, 244, 246, 0.95);
}

.popup.popup-tour .popup-content > .close:hover,
.popup.popup-tour .popup-content > .close:active {
    opacity: 1;
}

.popup.active {
    visibility: visible;
    opacity: 1;
    z-index: 500;
}

/* Модалка брони: скролл на оверлее, контент без overflow-y — иначе обрезается кастомный список Choices */
#popup-booking.popup {
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#popup-booking .popup-content.popup-content-booking {
    overflow: visible !important;
    max-height: none;
    margin-top: auto;
    margin-bottom: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

#popup-booking .form-booking .choices {
    position: relative;
    z-index: 2;
}

#popup-booking .form-booking .choices.is-open {
    z-index: 10060;
}

/* #popup-team: мобилка — ширина почти на экран, safe-area + dvh/svh, скролл в карточке, sticky-крестик */
@media screen and (max-width: 719px) {
    #popup-team.popup {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding-top: max(12px, env(safe-area-inset-top, 0px));
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        padding-left: max(8px, env(safe-area-inset-left, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
        box-sizing: border-box;
        height: 100vh;
        height: 100dvh;
        height: 100svh;
        max-height: 100vh;
        max-height: 100dvh;
        max-height: 100svh;
        overflow: hidden;
    }

    #popup-team .popup-content.popup-content-team {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #popup-team .popup-content.popup-content-team > .close {
        position: sticky;
        top: 0;
        right: auto;
        left: auto;
        align-self: flex-end;
        z-index: 12;
        margin: 0 0 4px;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(28, 107, 123, 0.16);
        box-shadow: 0 1px 6px rgba(15, 35, 45, 0.12);
        font-size: 16px;
        line-height: 1;
    }

    html[data-theme="dark"] #popup-team .popup-content.popup-content-team > .close {
        background: rgba(34, 34, 34, 0.96);
        border-color: rgba(255, 255, 255, 0.14);
        color: rgba(232, 244, 246, 0.95);
    }
}

#popup-booking .form-booking .label-field {
    overflow: visible;
}

#popup-booking .popup-content-booking .form-booking .input-row {
    overflow: visible;
    /* WebKit/Safari: 1fr без minmax даёт min-width:auto и ломает ширину Choices в половине колонки */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#popup-booking .popup-content-booking .form-booking .input-row > * {
    min-width: 0;
}

#popup-booking .label-field--select {
    display: block;
    width: 100%;
}

#popup-booking .label-field--select .choices {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#popup-booking .label-field--select .choices__inner,
#popup-booking .label-field--select .choices__inner .choices__list--single {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#popup-booking .choices[data-type*="select-one"]::after {
    position: absolute;
    right: 14px;
    left: auto;
    z-index: 3;
    pointer-events: none;
}

#popup-booking .choices.is-flipped .choices__list--dropdown {
    top: 100% !important;
    bottom: auto !important;
}

/* Расписание: даже если Choices пометил is-flipped, рисуем панель вниз от поля. */
.menu-item .choices.is-flipped .choices__list--dropdown {
    top: 100% !important;
    bottom: auto !important;
}

.popup img {
    max-width: 100%;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1024px) {
    .popup img {
        border-radius: 12px;
        margin-bottom: 15px;
    }
}

.popup.popup-yacht img {
    margin-bottom: 0;
}

.popup h3,
.popup h4,
.popup p,
.popup li {
    margin-bottom: 20px;
    color: var(--foreground);
}

@media screen and (max-width: 1024px) {
    .popup h3,
    .popup h4,
    .popup p,
    .popup li {
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 719px) {
    .popup h3,
    .popup h4,
    .popup p,
    .popup li {
        margin-bottom: 25px;
    }
}

.popup.popup-yacht .popup-content h3 {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 0;
}

.popup.popup-yacht .popup-content h4 {
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
    .popup.popup-yacht .popup-content h4 {
        font-size: 9.6px;
        line-height: 12.6px;
    }
}

@media screen and (max-width: 719px) {
    .popup.popup-yacht .popup-content h4 {
        font-size: 16px;
        line-height: 21px;
    }
}

.popup.popup-yacht .popup-content p {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
    .popup.popup-yacht .popup-content p {
        font-size: 9px;
        line-height: 14px;
    }
}

@media screen and (max-width: 719px) {
    .popup.popup-yacht .popup-content p {
        font-size: 14px;
        line-height: 24px;
    }
}

.popup.popup-yacht .popup-content ul {
    list-style-position: inside;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

@media screen and (max-width: 1024px) {
    .popup.popup-yacht .popup-content ul {
        font-size: 9px;
        line-height: 14px;
    }
}

@media screen and (max-width: 719px) {
    .popup.popup-yacht .popup-content ul {
        font-size: 14px;
        line-height: 24px;
    }
}

.popup.popup-yacht .popup-content ul li {
    margin-bottom: 0;
}

.popup .btn {
    width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.popup.popup-yacht .btn {
    width: 360px;
    height: 80px;
    min-height: 80px;
    padding: 20px 60px;
    line-height: normal;
}

@media screen and (max-width: 1024px) {
    .popup.popup-yacht .btn {
        width: 216px;
        height: 48px;
        min-height: 48px;
        padding: 0 10px;
    }
}

@media screen and (max-width: 719px) {
    .popup.popup-yacht .btn {
        width: 260px;
        height: 80px;
        min-height: 80px;
        padding: 0 10px;
    }
}

.popup-features {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.popup.popup-yacht .popup-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: flex-start;
    gap: 20px;
}

/* Mobile: компактная fluid-сетка вместо «один чип на всю ширину».
   auto-fit + minmax(150px, 1fr) даёт 2 колонки на 375px и 1 колонку
   на самых узких viewport'ах (≤320px) без пробелов. */
@media screen and (max-width: 719px) {
    .popup.popup-yacht .popup-features {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }
}

.popup.popup-yacht .popup-features .popup-features__el {
    gap: 5px;
    font-size: 12px;
    line-height: 21px;
}

@media screen and (max-width: 1024px) {
    .popup.popup-yacht .popup-features .popup-features__el {
        font-size: 7px;
        line-height: 12px;
    }
}


@media screen and (max-width: 719px) {
    .popup.popup-yacht .popup-features .popup-features__el {
        font-size: 12px;
        line-height: 21px;
    }
}

/* Header чипа: иконка + текст в одну строку. Flex работает и с иконкой,
   и без — динамические попапы могут не иметь <svg>, и не должны крошить
   strong по букве (был баг grid-template-columns: 25px 1fr). */
.popup.popup-yacht .popup-features .popup-features__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.popup.popup-yacht .popup-features .popup-features__header svg {
    flex-shrink: 0;
    color: var(--primary);
    fill: currentColor;
}

.popup.popup-yacht .popup-features .popup-features__el * {
    font: inherit;
}

.popup.popup-yacht .popup-features strong {
    font-weight: 500;
}

.popup-features div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--foreground);
}

.popup-features div div div:nth-child(2) {
    font-size: 14px;
}

.popup-content-tour > h3,
.popup-content-tour > p {
    text-align: center;
}

.popup-content-tour > h3 {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 4px;
}

@media screen and (max-width: 1024px) {
    .popup-content-tour > h3 {
        font-size: 14.4px;
        line-height: 12.6px;
    }
}

@media screen and (max-width: 719px) {
    .popup-content-tour > h3 {
        font-size: 24px;
        line-height: 29px;
    }
}

.popup-content-tour > p {
    font-weight: 500;
    margin-bottom: 8px;
}

@media screen and (max-width: 1024px) {
    .popup-content-tour,
    .popup-content-tour > p {
        font-size: 9.6px;
        line-height: 14.4px;
    }
}

@media screen and (max-width: 719px) {
    .popup-content-tour,
    .popup-content-tour > p {
        font-size: 16px;
        line-height: 24px;
    }
}

.day-plan {
    display: block;
    gap: 30px;
    background: var(--muted);
    padding: 20px;
    border-radius: 40px;
    margin-top: 5px;
    text-align: left;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
    .day-plan {
        padding: 12px;
        border-radius: 24px;
    }
}

.day-plan.col-2 {
    display: grid;
    grid-template-columns: 272px 1fr;
}

@media screen and (max-width: 1024px) {
    .day-plan.col-2 {
        grid-template-columns: 165px 1fr;
    }
}

@media screen and (max-width: 719px) {
    .day-plan,
    .day-plan.col-2 {
        display: flex;
        flex-direction: column;
    }
}

.day-plan__header {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: flex-start;
}

.day-plan__left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.day-plan__left * {
    margin-bottom: 0 !important;
}

.day-plan__right {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.day-plan__right * {
    margin-bottom: 0 !important;
}

.day-plan ul {
    list-style-position: inside;
}

.day-plan * {
    color: var(--foreground);
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
}

.day-plan li {
    margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
    .day-plan * {
        font-size: 9px;
        line-height: 14.4px;
    }
}

@media screen and (max-width: 719px) {
    .day-plan * {
        font-size: 15px;
        line-height: 24px;
    }
}

.day-num {
    font-weight: bold;
    color: var(--accent) !important;
    font-size: 15px;
}
@media screen and (max-width: 1024px) {
    .day-num {
        font-size: 9px;
        line-height: 14.4px;
    }
}
@media screen and (max-width: 719px) {
    .day-num {
        font-size: 15px;
        line-height: normal;
    }
}

.short-desc {
    font-size: 15px;
}
@media screen and (max-width: 1024px) {
    .short-desc {
        font-size: 9px;
        line-height: 14.4px;
    }
}
@media screen and (max-width: 719px) {
    .short-desc {
        font-size: 15px;
        line-height: normal;
    }
}

.day-plan .details {
    justify-content: flex-start;
}

.day-plan .details b {
    font-weight: 700;
    white-space: nowrap;
}

.details {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.day-plan .details img {
    width: 14px;
    height: 14px;
    transform: translateY(2px);
    margin: 0;
}
@media screen and (max-width: 1024px) {
    .day-plan .details img {
        width: 9.6px;
        height: 9.6px;
    }
}
@media screen and (max-width: 719px) {
    .day-plan .details img {
        width: 14px;
        height: 14px;
        transform: translateY(5px);
    }
}

.day-plan .details-title {
    font-size: 15px;
    color: var(--foreground-subtle);
}
@media screen and (max-width: 1024px) {
    .day-plan .details-title {
        font-size: 9px;
        line-height: 14.4px;
    }
}
@media screen and (max-width: 719px) {
    .day-plan .details-title {
        font-size: 15px;
    }
}

.popup-content-tour {
    margin-top: 30px;
}

.popup-content-tour h6 {
    text-align: center;
    color: var(--foreground-subtle);
    font-weight: normal;
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 4px;
}

.popup-tour-features {
    column-gap: 20px;
    row-gap: 25px;
    justify-content: space-between;
    color: var(--foreground);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 1024px) {
    .popup-tour-features {
        gap: 15px;
    }
}

.popup-tour-features.col-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media screen and (max-width: 719px) {
    .popup-tour-features,
    .popup-tour-features.col-4 {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .popup-tour-features.col-4 {
        gap: 10px;
    }
}

.popup-tour-features .features__el {
    padding-left: 23px;
    position: relative;
    font-size: 14px;
    line-height: 24px;
}

@media screen and (max-width: 1024px) {
    .popup-tour-features .features__el {
        padding-left: 14px;
        font-size: 8.4px;
        line-height: 14.4px;
    }
}

@media screen and (max-width: 719px) {
    .popup-tour-features .features__el {
        padding-left: 23px;
        font-size: 14px;
        line-height: 24px;
    }
}

.popup-tour-features .features__el:before {
    position: absolute;
    content: '';
    width: 15px;
    height: 18px;
    background: url("../csv/loc.svg") no-repeat 50% 50%;
    left: 0;
    top: 0;
}

.popup-tour-features.col-4 .features__el:before {
    width: 17px;
    height: 17px;
    background: url("../csv/check.svg") no-repeat 50% 50%;
}

@media screen and (max-width: 1024px) {
    .popup-tour-features.col-4 .features__el:before,
    .popup-tour-features .features__el:before {
        width: 9px;
        height: 10px;
        background-size: cover;
    }
}

@media screen and (max-width: 719px) {
    .popup-tour-features.col-4 .features__el:before {
        width: 15px;
        height: 18px;
        background-size: cover;
    }

    .popup-tour-features .features__el:before {
        width: 17px;
        height: 17px;
        background-size: cover;
    }
}

.popup-content-team {
    background: var(--muted);
    width: 800px;
}

@media screen and (max-width: 1024px) {
    .popup-content-team {
        width: min(480px, calc(100vw - 24px));
        max-width: calc(100vw - 16px);
        box-sizing: border-box;
    }
}

.popup-team-image img {
    width: 100%;
    border-radius: 20px;
    margin-bottom: 20px;
    height: 330px;
    object-fit: cover;
}

@media screen and (max-width: 1024px) {
    .popup-team-image img {
        height: auto;
        border-radius: 12px;
    }
}

.popup-content-team h3 {
    color: var(--foreground);
    font-size: 36px;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align: center;
    font-weight: normal;
}

@media screen and (max-width: 1024px) {
    .popup-content-team h3 {
        font-size: 28px;
        line-height: 42px;
    }
}

/* попап бронировине */

.popup-content-booking h3 {
    color: var(--foreground);
    font-size: 36px;
    line-height: 36px;
    margin-bottom: 20px;
    text-align: center;
}

@media screen and (max-width: 719px) {
    .popup-content-booking h3 {
        font-size: 32px;
        line-height: 36px;
    }
}

.popup-content-booking.popup-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.popup-content-booking.popup-content .close {
    width: 12px;
    height: 12px;
    font-size: 12px;
    color: var(--foreground-subtle);
}

.popup-content-booking .form-booking {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.popup-content-booking .form-booking .input-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media screen and (max-width: 1024px) {
    .popup-content-booking .form-booking > .input-row {
        display: flex;
        flex-direction: column;
    }
}

.form-booking .label-field {
    position: relative;
    height: 80px;
}

.form-booking .label-field.required:after {
    position: absolute;
    content: '*';
    font-size: 14px;
    color: var(--foreground);
    right: 14px;
    top: 5px;
    opacity: .5;
}

.form-booking .label-field input.input {
    background: var(--muted);
    border-radius: 19px;
    width: 100%;
    height: 80px;
    border: 1px solid var(--muted);
    text-align: center;
    color: var(--foreground);
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-brand);
}

.form-booking .label-field input.input.error {
    border-color: red;
}

.form-booking .label-field input.input.filled,
.form-booking .label-field input.input:focus {
    outline: none;
}

.form-booking .label-field input.input::-webkit-outer-spin-button,
.form-booking .label-field input.input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.form-booking .label-field input.input + .placeholder {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--foreground);
    font-size: 16px;
    text-align: center;
    pointer-events: none;
    opacity: .5;
}

.form-booking .label-field input.input.filled + .placeholder,
.form-booking .label-field input.input:focus + .placeholder {
    opacity: 0;
}

.popup-content-booking .form-booking .btn {
    max-width: 100% !important;
    width: 100% !important;
    height: 80px !important;
}

.form-booking .booking-agree {
    text-align: center;
}

.form-booking .booking-info.hidden {
    display: none;
}

.form-booking .booking-info {
    display: grid;
    grid-template-columns: 168px 284px 248px;
    gap: 20px;
}

@media screen and (max-width: 1024px) {
    .form-booking .booking-info {
        display: flex;
        flex-direction: column;
    }
}

.form-booking .booking-info__col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-booking .booking-info__title {
    display: block;
    font-family: var(--font-brand);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--foreground);
    opacity: .5;
}

.form-booking .booking-info__summ {
    display: block;
    color: var(--foreground);
    font-size: 24px;
    line-height: 1.3;
    font-weight: 500;
}

.form-booking .booking-info__list {
    list-style: decimal;
    column-count: 2;
    column-gap: 10px;
    list-style-position: inside;
}

.form-booking .booking-info__list li {
    display: list-item;
    color: var(--foreground-subtle);
    font-size: 13px;
    line-height: 13px;
    margin-bottom: 5px;
}

.team-accordeon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 20px;
    margin-bottom: 20px;
    gap: 20px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 719px) {
    .team-accordeon {
        flex-direction: column;
    }
}

.team-accordeon .btn {
    width: calc(50% - 10px);
    min-width: 304px;
}
@media screen and (max-width: 1024px) {
    .team-accordeon .btn {
        width: calc(50% - 10px);
        min-width: 182px;
        min-height: 48px;
    }
}
@media screen and (max-width: 719px) {
    .team-accordeon .btn {
        width: 200px;
        min-height: 80px;
    }
}

.team-accordeon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 719px) {
    .team-accordeon-header {
        flex-direction: column;
        gap: 20px
    }
}

.team-accordeon-header > * {
    flex-basis: 45%;
}

.team-accordeon-header-photo img {
    height: 290px;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

@media screen and (max-width: 1024px) {
    .team-accordeon-header-photo img {
        height: auto;
    }
}

.team-accordeon-header-text h4 {
    font-weight: normal;
    font-size: 24px;
}

@media screen and (max-width: 1024px) {
    .team-accordeon-header-text h4 {
        font-size: 14px;
        line-height: 20px;
    }
}

@media screen and (max-width: 719px) {
    .team-accordeon-header-text h4 {
        font-size: 24px;
        line-height: 21px;
    }
}

.team-accordeon-body h6 {
    font-weight: normal;
    font-size: 18px;
    color: var(--foreground);
    margin-bottom: 20px;
}

.team-quote {
    background: #ffffff;
    padding: 10px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.team-qoute-icon img {
    width: 60px;
    height: 60px;
    margin-bottom: 0;
}

.team-quote-words {
    margin-bottom: 5px !important;
}

.team-quote-author {
    margin-bottom: 0 !important;
    font-size: 14px;
    color: var(--foreground-subtle) !important;
}

@media screen and (max-width: 1024px) {
    .team-quote-author {
        font-size: 7.2px;
        line-height: 13.6px;
    }
}

.hidden {
    display: none !important;
}

.btn.inactive {
    background: color-mix(in srgb, var(--muted) 65%, var(--foreground-subtle));
    color: var(--foreground-subtle);
}

.close {
    font-size: 18px;
}

.tour-map-content {
    position: relative;
}

/* Попап карты — компактный flex-column, близкий к квадрату.
   max-height: 90vh + overflow: hidden не даёт кнопке уезжать — ужимается карта.
   Ширина ≈ высоте при типовом экране (640×568 на ноутбуке, 680×612 на FullHD). */
#popup-map .popup-content,
#popup-map2 .popup-content {
    /* По умолчанию до 1024 — ширина от вьюпорта; на широком экране см. min-width 1025px = как программа тура. */
    width: 50vw;
    max-width: min(720px, 96vw);
    max-height: 90vh;
    padding: 12px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Десктоп: та же ширина белой карточки, что у попапа программы тура (815px). */
@media screen and (min-width: 1025px) {
    #popup-map .popup-content,
    #popup-map2 .popup-content {
        width: 815px;
        max-width: min(815px, 96vw);
    }

    #popup-map .tour-map-leaflet,
    #popup-map2 .tour-map-leaflet {
        min-height: clamp(360px, calc(815px - 140px), 620px);
    }
}

/* Подсказка — 11px, тонкая и ненавязчивая, без лишнего воздуха. */
.popup-content-map h6 {
    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;
    text-align: center;
    margin: 0;
    padding: 0 8px;
    color: var(--foreground);
    opacity: 0.7;
    letter-spacing: 0.01em;
}

#popup-map .popup-content.popup-content-map h6,
#popup-map2 .popup-content.popup-content-map h6 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Карта занимает максимум вертикали; min-height: 0 даёт ей усаживаться
   в flex-контексте без «продавливания» родителя. */
.tour-map-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.tour-map-leaflet {
    width: 100%;
    height: 100%;
    /* Высота следует за шириной (50vw), максимум 620px — чтобы попап
       оставался близок к квадрату при любой ширине окна. */
    min-height: clamp(360px, calc(50vw - 100px), 620px);
    border-radius: 16px;
    overflow: hidden;
    background: #dfeef3;
    box-shadow: 0 2px 12px rgba(15, 35, 45, 0.08);
}

/* CTA без отступа от карты сверху — сидит сразу под ней с gap:8px
   общего flex. Центрирован и компактен, под стиль всего попапа. */
#popup-map .popup-content > .btn,
#popup-map2 .popup-content > .btn {
    flex: 0 0 auto;
    height: 46px;
    width: min(240px, 65%);
    margin: 0 auto;
    padding: 0 20px;
    font-size: 12px;
    letter-spacing: 0.5px;
}

@media screen and (max-width: 1024px) {
    #popup-map .popup-content,
    #popup-map2 .popup-content {
        width: min(560px, calc(100vw - 24px));
        padding: 12px;
        gap: 8px;
    }
    .popup-content-map h6 {
        font-size: 10px;
    }
    .tour-map-leaflet {
        min-height: 260px;
    }
}

@media screen and (max-width: 719px) {
    #popup-map.popup,
    #popup-map2.popup {
        align-items: center;
        justify-content: center;
        padding-top: max(10px, env(safe-area-inset-top, 0px));
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
        padding-left: max(8px, env(safe-area-inset-left, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #popup-map .popup-content.popup-content-map,
    #popup-map2 .popup-content.popup-content-map {
        justify-content: center;
        width: min(calc(100vw - 16px), 100%);
        max-width: calc(100vw - 12px);
        padding: 12px;
        min-height: 0;
        max-height: min(
            98dvh,
            calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 8px)
        );
        margin: 0;
        transform: none;
    }

    /* Mobile: размер popup-map = размер popup-tour. Карта Leaflet
       растягивается на весь свободный flex-остаток (≥75% от высоты
       попапа). Раньше тут был квадратный --map-tile — отказались. */
    #popup-map .tour-map-content,
    #popup-map2 .tour-map-content {
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
        margin-top: 0;
        display: block;
    }

    #popup-map .tour-map-leaflet,
    #popup-map2 .tour-map-leaflet {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        max-width: none;
        max-height: none;
        flex: 1 1 0;
        box-sizing: border-box;
    }

    #popup-map .popup-content > .btn,
    #popup-map2 .popup-content > .btn {
        width: min(220px, 100%);
        height: 44px;
    }

    #popup-map .popup-content-map h6,
    #popup-map2 .popup-content-map h6 {
        font-size: 14px;
        line-height: 1.35;
        font-weight: 600;
        opacity: 0.94;
        padding: 0 4px;
        letter-spacing: 0.02em;
        flex-shrink: 0;
    }
}

/* Планшет/десктоп: стек с программой тура — Leaflet без лишнего min-height. */
@media screen and (min-width: 720px) {
    #popup-map.popup.map-over-tour .tour-map-leaflet,
    #popup-map2.popup.map-over-tour .tour-map-leaflet {
        min-height: 0 !important;
    }
}

/* ── Marina map (Leaflet) — полная копия правил с app/globals.css ──────
   Байт-в-байт совпадает с интеграцией из components/marina-map/*.tsx.
   Единственное отличие — dark-scope: на главном сайте `.dark` (Tailwind),
   на лендинге `html[data-theme="dark"]` — второй селектор добавлен отдельно. */
.marina-map-pin {
    background: transparent;
    border: 0;
}
.marina-map-pin__dot {
    display: inline-flex;
    width: 33px;
    height: 33px;
    align-items: flex-start;
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--primary);
    filter: drop-shadow(0 2px 3px rgba(28, 107, 123, 0.35));
}
.marina-map-pin__dot svg {
    width: 33px;
    height: 33px;
    fill: var(--primary);
    stroke: #fff;
    stroke-width: 2;
    stroke-linejoin: round;
}
.marina-map-pin__dot svg circle {
    fill: #fff;
    stroke: none;
}
.marina-map-pin--numbered {
    position: relative;
}
.marina-map-pin__num {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-brand), Manrope, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--primary);
    background: #fff;
    border-radius: 9999px;
    pointer-events: none;
}
.leaflet-popup-content-wrapper {
    border-radius: var(--radius);
    padding: 6px 4px;
    font-family: var(--font-brand), Manrope, system-ui, sans-serif;
    background: var(--background, #fff);
    color: var(--foreground);
    box-shadow: 0 6px 24px rgba(28, 107, 123, 0.15);
}
.leaflet-popup-tip { background: var(--background, #fff); }
.leaflet-popup-content {
    margin: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}
.marina-map-popup__title {
    font-weight: 700;
    color: var(--foreground);
    font-size: 13px;
}
.marina-map-popup__sub {
    color: var(--foreground);
    opacity: 0.6;
    font-size: 11px;
}
.marina-map-popup__link {
    display: inline-flex;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.marina-map-popup__link:hover {
    text-decoration: underline;
}

/* Маркер на карте: на мобильном название точки и «Посмотреть фото» — разные строки, крупнее. */
@media screen and (max-width: 719px) {
    .leaflet-popup-content-wrapper {
        padding: 10px 8px;
    }
    .leaflet-popup-content {
        margin: 6px 10px;
        gap: 10px;
    }
    .marina-map-popup__title {
        font-size: 16px;
        line-height: 1.35;
        font-weight: 700;
        display: block;
    }
    .marina-map-popup__sub {
        font-size: 13px;
        line-height: 1.35;
        opacity: 0.78;
        display: block;
    }
    .marina-map-popup__link {
        display: block;
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: 700;
        margin-top: 0;
        padding-top: 10px;
        border-top: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
        line-height: 1.35;
    }
}
.leaflet-container a.leaflet-popup-close-button { display: none; }
.leaflet-control-attribution {
    background: color-mix(in srgb, var(--background, #fff) 75%, transparent) !important;
    backdrop-filter: blur(4px);
    font-size: 10px !important;
    padding: 1px 6px !important;
    color: var(--foreground);
    opacity: 0.7;
}
.leaflet-control-attribution a {
    color: var(--foreground) !important;
    text-decoration: none !important;
}
.leaflet-control-attribution a:hover { text-decoration: underline !important; }
/* В dark mode светлый стиль MapTiler «winter-v4» приглушаем фильтром:
   brightness ≈ −22%, saturate ≈ −10% — карта остаётся узнаваемо светлой,
   но на пару тонов темнее, без перехода в чёрный. */
html[data-theme="dark"] .leaflet-tile {
    filter: brightness(0.78) saturate(0.9);
}

/* Устаревшее правило — сохранено для совместимости со старыми попапами,
   но тонкая подсказка над Leaflet-картой определяется выше (font-size: 11px). */

.map-location {
    position: absolute;
    background-color: #fff;
    border-radius: 20px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    text-decoration: underline;
}

.map-location span {
    color: var(--foreground);
    font-size: 13px;
    cursor: pointer;
}

.map-location img {
    margin: 0;
}

.map-location span,
.map-location img {
    pointer-events: none;
}

.map-location:nth-child(2) {
    top: 10%;
    left: 10%;
}

.map-location:nth-child(3) {
    top: 28%;
    left: 23%;
}

.map-location:nth-child(4) {
    top: 19%;
    left: 35%;
}

.map-location:nth-child(5) {
    top: 33%;
    left: 50%;
}

.map-location:nth-child(6) {
    top: 80%;
    left: 55%;
}

.map-location:nth-child(7) {
    top: 70%;
    left: 65%;
}

.map-location:nth-child(8) {
    top: 50%;
    left: 55%;
}

.map-location:nth-child(9) {
    top: 60%;
    left: 8%;
}

.swiper.swiper-gallery.hidden {
    display: none !important;
}

html[data-theme="dark"] {
    color-scheme: dark;
    /* на тёмном фоне вторичный текст — светлый, не teal из :root */
    --foreground-subtle: rgba(255, 255, 255, 0.66);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .tours,
html[data-theme="dark"] .faq,
html[data-theme="dark"] .about {
        background-color: #222222;
    }

    /* Solid fill here covers .leaves-wrap::before (img--green) behind Group 24 alpha */
    html[data-theme="dark"] .more-tours {
        background-color: transparent;
    }

    html[data-theme="dark"] .hero-links {
        background-color: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    html[data-theme="dark"] .hero-header::before {
        background: rgba(22, 22, 24, 0.82);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    }

    html[data-theme="dark"] .hero-header.fixed-header .hero-links {
        background-color: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.14);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    html[data-theme="dark"] .fixed-header .hero-logo {
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
    }

    html[data-theme="dark"] .hero-social > * {
        background: rgba(255, 255, 255, 0.3);
    }

    html[data-theme="dark"] .head-phone a {
        color: #fff;
    }

    html[data-theme="dark"] .tours::before {
        background: url('./../img/clouddark.png') no-repeat bottom center/cover;
    }

    html[data-theme="dark"] .tours-head h2 {
        color: #ffffff;
    }

    html[data-theme="dark"] .swiper-button-prev {
        background: rgba(0, 0, 0, 0.3) !important; /* Серый цвет; блок туров переопределён выше по специфичности */
    }

    html[data-theme="dark"] .tour-card {
        background: #222222;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        -moz-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        box-shadow: inset 0px -1px 53px -30px rgba(255, 255, 255, 0.22);
    }

    html[data-theme="dark"] .captain-info {
        background-color: #222;
        color: var(--foreground-subtle);

        font-weight: 400;
        font-size: 12px;
        line-height: 21px;
        letter-spacing: 0;
    }

    html[data-theme="dark"] .badge {
        color: #fff;
    }

    html[data-theme="dark"] .fleet-section p {
        color: var(--foreground-subtle);
    }

    html[data-theme="dark"] .fleet-container::after {
        background: url('./../img/clouddark.png') no-repeat center center/cover;
    }

    /* Карточка флота в dark theme — мутное стекло, не сплошной #222,
       чтобы не сливаться с тёмным фоном страницы. На 20% темнее и
       мутнее версии 1 — чёрный tint вместо белого, blur 20px,
       saturate снижен до 110%. */
    html[data-theme="dark"] .boat-info {
        background-color: rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(20px) saturate(110%);
        -webkit-backdrop-filter: blur(20px) saturate(110%);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    }

    html[data-theme="dark"] .boat-info h3 {
        color: #ffffff;
    }

    html[data-theme="dark"] .boat-info .flex-info > div {
        border-color: rgba(164, 214, 224, 0.18);
        background: rgba(164, 214, 224, 0.06);
        color: rgba(255, 255, 255, 0.86);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] .boat-info .details {
        color: #7c5d2c;
    }

    html[data-theme="dark"] .details {
        color: var(--foreground-subtle);
    }

    html[data-theme="dark"] .fleet-section h2 {
        color: #ffffff;
    }

    html[data-theme="dark"] .faq-item {
        background: #222222;
        border: 1px solid rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        -moz-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        box-shadow: inset 0px -1px 53px -30px rgba(255, 255, 255, 0.22);
    }

    html[data-theme="dark"] .faq-question {
        color: #ffffff;
    }

    html[data-theme="dark"] .faq-answer {
        color: #ffffff;
    }

    html[data-theme="dark"] .faq h2 {
        color: #ffffff;
    }

    html[data-theme="dark"] .faq-desc {
        color: #ffffff;
    }

    html[data-theme="dark"] .about {
        background: url('./../img/about.png') no-repeat center center/cover #222222;
        background-position-y: -50px;
    }

    html[data-theme="dark"] .about-right {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.22);
        box-shadow: 0 20px 60px rgba(15, 35, 45, 0.35);
        backdrop-filter: blur(16px) saturate(130%);
        -webkit-backdrop-filter: blur(16px) saturate(130%);
    }

    html[data-theme="dark"] .about-content h2 {
        color: #ffffff;
    }

    html[data-theme="dark"] .about-content p {
        color: #ffffff;
    }

    html[data-theme="dark"] .about-right {
        background-color: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        -moz-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        box-shadow: inset 0px -1px 53px -30px rgba(255, 255, 255, 0.22);
    }

    html[data-theme="dark"] .people h2 {
        color: #ffffff;
    }

    html[data-theme="dark"] .people p {
        color: #ffffff;
    }

    html[data-theme="dark"] .swiper-post {
        background: #222222;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    html[data-theme="dark"] .post-activity {
        color: var(--foreground-subtle);
    }

    html[data-theme="dark"] .post-description {
        color: #ffffff;
    }

    html[data-theme="dark"] .schedule-content {
        background: url('./../img/Зелень\ \(63\)\ 3.png') no-repeat center left/500px;
    }

    html[data-theme="dark"] .schedule h2 {
        color: #ffffff;
    }

    html[data-theme="dark"] .schedule-header p {
        color: #ffffff;
    }

    html[data-theme="dark"] .schedule-table {
        background: url('./../csv/line.svg') no-repeat top right/ 85% #222222;
        border: 1px solid rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        -moz-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        box-shadow: inset 0px -1px 53px -30px rgba(255, 255, 255, 0.22);
    }

    html[data-theme="dark"] .schedule-table-month {
        color: #ffffff;
    }

    html[data-theme="dark"] .schedule-table-row {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    html[data-theme="dark"] .schedule-table-row .ship {
        background-color: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        padding: 10px 20px;
        border-radius: 30px;
    }

    html[data-theme="dark"] .schedule-table-row .ship:hover {
        background-color: rgba(29, 177, 207, 0.18);
    }

    /* .price в тёмной теме — без дополнительного цвета: жёлтый фон
       с коричневым текстом (#7c5d2c) контрастный и на светлом, и на тёмном. */

    html[data-theme="dark"] .menu-item {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.22);
        box-shadow: 0 16px 40px rgba(15, 35, 45, 0.26);
        backdrop-filter: blur(16px) saturate(130%);
        -webkit-backdrop-filter: blur(16px) saturate(130%);
        color: #fff;
        position: relative;
        z-index: 10;
    }

    html[data-theme="dark"] .menu-item.up {
        z-index: 200;
    }

    html[data-theme="dark"] .dropdown {
        background: #595959;
        color: #fff;
    }

    /*
     * Расписание, Choices.js — тёмная тема: нейтральные серо-чёрные тона,
     * «стекло» за счёт сплошной базы + верхний блик и inset, без бирюзы и без просвета.
     */
    html[data-theme="dark"] .menu-item .choices__inner {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 30%, rgba(0, 0, 0, 0.06) 100%),
            #3a3a3a;
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.11),
            0 2px 10px rgba(0, 0, 0, 0.4);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    html[data-theme="dark"] .menu-item .choices__inner .choices__list.choices__list--single {
        background: transparent;
    }

    html[data-theme="dark"] .menu-item .choices__list.choices__list--dropdown {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0.14) 100%),
            #252525;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 16px 42px rgba(0, 0, 0, 0.62),
            0 0 0 1px rgba(0, 0, 0, 0.28);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    html[data-theme="dark"] .menu-item .choices__item.choices__item--selectable {
        color: #ececec;
    }

    html[data-theme="dark"] .menu-item .choices__item.choices__item--selectable.choices__placeholder {
        color: #9a9a9a;
        opacity: 1;
    }

    html[data-theme="dark"] .menu-item .choices__list.choices__list--dropdown .choices__list .choices__item--selectable:hover,
    html[data-theme="dark"] .menu-item .choices__list.choices__list--dropdown .choices__list .choices__item--selectable.is-highlighted {
        background: #404040 !important;
        color: #ffffff;
        text-decoration: none;
    }

    html[data-theme="dark"] .date,
    html[data-theme="dark"] .ship {
        color: #fff;
    }

    html[data-theme="dark"] .more-tours-head h2 {
        color: #ffffff;
    }

    html[data-theme="dark"] .footer {
        background-color: #222;
        border: 1px solid rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        -moz-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        box-shadow: inset 0px -1px 53px -30px rgba(255, 255, 255, 0.22);
    }

    html[data-theme="dark"] .footer-links a {
        color: var(--foreground-subtle);
    }

    html[data-theme="dark"] .footer-links a:hover {
        color: #fff;
    }

    html[data-theme="dark"] .footer-social > * {
        background: var(--primary);
        margin-left: 0 !important;
    }

    html[data-theme="dark"] .footer-phone a {
        color: #ffffff;
    }

    html[data-theme="dark"] .footer .cred {
        color: var(--foreground-subtle);
    }

    html[data-theme="dark"] .popup {
        background: rgba(0, 0, 0, 0.5);
    }

    html[data-theme="dark"] .popup-content {
        background: #222222;
    }

    html[data-theme="dark"] .popup h3,
    html[data-theme="dark"] .popup h4,
    html[data-theme="dark"] .popup p,
    html[data-theme="dark"] .popup li {
        margin-bottom: 20px;
        color: #ffffff;
    }

    html[data-theme="dark"] .popup-features div {
        color: #ffffff;
    }

    html[data-theme="dark"] .day-plan {
        background: #222222;
        border: 1px solid rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        -moz-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        box-shadow: inset 0px -1px 53px -30px rgba(255, 255, 255, 0.22);
    }

    html[data-theme="dark"] .day-plan * {
        color: #ffffff;
    }

    html[data-theme="dark"] .popup-content-tour h6 {
        color: #ffffff;
    }

    html[data-theme="dark"] .popup-tour-features {
        color: var(--foreground);
    }

    html[data-theme="dark"] .popup-content-team {
        background: #222222;
    }

    html[data-theme="dark"] .popup-content-team h3 {
        color: #ffffff;
    }

    html[data-theme="dark"] .team-accordeon {
        background-color: #222222;
        border: 1px solid rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        -moz-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        box-shadow: inset 0px -1px 53px -30px rgba(255, 255, 255, 0.22);
    }

    html[data-theme="dark"] .team-accordeon-body h6 {
        color: #ffffff;
    }

    html[data-theme="dark"] .team-quote {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        -moz-box-shadow: inset 0px -1px 53px 4px rgba(255, 255, 255, 0.22);
        box-shadow: inset 0px -1px 53px -30px rgba(255, 255, 255, 0.22);
    }

    html[data-theme="dark"] .team-quote-author {
        color: var(--foreground-subtle) !important;
    }

    html[data-theme="dark"] .btn.inactive {
        background: var(--foreground);
        color: var(--foreground-subtle);
    }

    html[data-theme="dark"] .close {
        color: #ffffff;
    }

    html[data-theme="dark"] .popup-tour-features {
        color: #fff !important;
    }

    html[data-theme="dark"] .popup-content-map {
        color: #fff;
    }

    html[data-theme="dark"] .popup-content-map h6 {
        color: #ffffff;
    }

    /* Popup яхты в dark theme → стекло, как у .popup-point и
       .popup-gallery-lightbox. Тот же материал по всему лендингу. */
    html[data-theme="dark"] .popup.popup-yacht .popup-content {
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px) saturate(130%);
        -webkit-backdrop-filter: blur(16px) saturate(130%);
        border: 1px solid rgba(255, 255, 255, 0.22);
        box-shadow: 0 20px 60px rgba(15, 35, 45, 0.35);
    }

    html[data-theme="dark"] .popup.popup-yacht .popup-content h3 {
        color: #ffffff;
    }
    html[data-theme="dark"] .popup.popup-yacht .popup-content h4 {
        color: rgba(255, 255, 255, 0.92);
    }
    html[data-theme="dark"] .popup.popup-yacht .popup-content p,
    html[data-theme="dark"] .popup.popup-yacht .popup-content ul,
    html[data-theme="dark"] .popup.popup-yacht .popup-content li {
        color: rgba(255, 255, 255, 0.82);
    }
    html[data-theme="dark"] .popup.popup-yacht .popup-content ul li b {
        color: #ffffff;
        font-weight: 600;
    }

    /* Спецификации яхты — мягкие чипы в стиле /yachts/[slug]
       (border-primary/25, bg-primary/[0.06]). */
    html[data-theme="dark"] .popup.popup-yacht .popup-features .popup-features__el {
        background: rgba(29, 177, 207, 0.06);
        border: 1px solid rgba(29, 177, 207, 0.28);
        border-radius: 12px;
        padding: 12px 14px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
    html[data-theme="dark"] .popup.popup-yacht .popup-features .popup-features__el strong {
        color: #ffffff;
    }
    html[data-theme="dark"] .popup.popup-yacht .popup-features .popup-features__el p {
        color: rgba(255, 255, 255, 0.72);
    }

    /* Крестик закрытия — белая обводка, белый ✖, в зазоре над фото.
       padding-top на popup-content создаёт зазор, чтобы кнопка не лежала
       на самой картинке. */
    /* Yacht popup на мобиле: зазор сверху, чтобы X не лежал на фото яхты.
       Другим попапам padding-top не нужен — у них наверху текст, а не картинка. */
    @media screen and (max-width: 719px) {
        html[data-theme="dark"] .popup.popup-yacht .popup-content {
            padding-top: 44px;
        }
    }

    /* Универсальный close X для всех попапов в dark + mobile: круговая
       белая обводка + X нарисован двумя пересечёнными линиями (crisp на
       любом фоне, лучше глифа ✖, который анти-алиасингом серый).
       Где close уже скрыт через display:none !important (popup-point,
       popup-gallery-lightbox), правило не рендерится — backdrop-click. */
    @media screen and (max-width: 719px) {
        html[data-theme="dark"] .popup .popup-content .close {
            position: absolute;
            top: 10px;
            right: 12px;
            width: 26px;
            height: 26px;
            display: block;
            font-size: 0;
            color: transparent;
            background: transparent;
            border: 1.5px solid #ffffff;
            border-radius: 50%;
            cursor: pointer;
            z-index: 30;
            transition: background 0.18s ease, transform 0.18s ease;
        }
        html[data-theme="dark"] .popup .popup-content .close::before,
        html[data-theme="dark"] .popup .popup-content .close::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 12px;
            height: 1.5px;
            background: #ffffff;
            border-radius: 1px;
        }
        html[data-theme="dark"] .popup .popup-content .close::before {
            transform: translate(-50%, -50%) rotate(45deg);
        }
        html[data-theme="dark"] .popup .popup-content .close::after {
            transform: translate(-50%, -50%) rotate(-45deg);
        }
        html[data-theme="dark"] .popup .popup-content .close:hover,
        html[data-theme="dark"] .popup .popup-content .close:focus-visible {
            background: rgba(255, 255, 255, 0.14);
            transform: scale(1.08);
        }
    }

    /* Mobile (<=719): компактные чипы — меньше padding, описание чипа
       скрываем, заголовок — одна строка. Десктоп остаётся прежним. */
    @media screen and (max-width: 719px) {
        html[data-theme="dark"] .popup.popup-yacht .popup-features .popup-features__el {
            padding: 8px 10px;
            border-radius: 10px;
            gap: 4px;
        }
        html[data-theme="dark"] .popup.popup-yacht .popup-features .popup-features__el strong {
            font-weight: 500;
            line-height: 1.3;
        }
        html[data-theme="dark"] .popup.popup-yacht .popup-features .popup-features__el p {
            font-size: 11px;
            line-height: 1.35;
            margin: 0;
        }
    }

    html[data-theme="dark"] .map-location {
        background-color: #222;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    html[data-theme="dark"] .mobile-nav {
        background: #222 !important;
    }

    html[data-theme="dark"] .mobile-nav a {
        color: #fff !important;
    }

    html[data-theme="dark"] .mobile-menu {
        background-color: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

html[data-theme="light"] {
    color-scheme: light;
}

/* Переключатель темы: плашка совпадает по материалу с .hero-links
   (муть-стекло) — `rgba(255,255,255,0.3)` + `backdrop-filter: blur(5px)` +
   светлая кромка. Это делает кнопку частью общего glass-бара хедера,
   а не белым пятном на голубом фоне. */
.theme-toggle-wrap {
    flex-shrink: 0;
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 0.625rem;
    --tt-accent: var(--accent);
    --tt-muted-fg: var(--foreground);
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -webkit-tap-highlight-color: transparent;
}

html[data-theme="dark"] .theme-toggle-wrap {
    background: rgba(26, 45, 50, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
    --tt-accent: #e6b86d;
    --tt-muted-fg: #8fa8ae;
}

.theme-toggle-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0.46875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    color: var(--foreground);
    transition: opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle-btn:hover {
    opacity: 0.8;
}

.theme-toggle-btn:active {
    opacity: 0.7;
}

.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.theme-toggle__icon {
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.theme-toggle__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

html[data-theme="dark"] .theme-toggle__icon--sun {
    display: flex;
    color: var(--tt-accent);
}

html[data-theme="light"] .theme-toggle__icon--moon {
    display: flex;
    color: var(--tt-muted-fg);
}

/* Планшет / мобильный: как у .hero-links (max-height 36px при ≤1024px) — компактнее десктопа */
@media screen and (max-width: 1024px) {
    .hero-links .theme-toggle-wrap {
        width: 35px;
        height: 35px;
        border-radius: 0.46875rem;
    }

    .hero-links .theme-toggle-btn {
        border-radius: 0.3125rem;
    }

    .hero-links .theme-toggle__icon svg {
        width: 18px;
        height: 18px;
    }
}

@media screen and (max-width: 719px) {
    .hero-links .theme-toggle-wrap {
        width: 33px;
        height: 33px;
        border-radius: 0.4375rem;
    }

    .hero-links .theme-toggle-btn {
        border-radius: 0.25rem;
    }

    .hero-links .theme-toggle__icon svg {
        width: 15px;
        height: 15px;
    }

    .fixed-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    .hero-title > * {
        text-align: center;
    }

    .hero-title > div {
        position: static;
    }

    .hero-header.hidden {
        display: flex !important;
    }

    .mobile-header {
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
        width: 100%;
    }

    .mobile-menu {
        display: flex;
        position: relative;
        align-items: center;
        gap: 10px;
        padding: 10px 20px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 30px;
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .menu-button {
        margin-right: 0;
    }

    .menu-toggle {
        background: none;
        border: none;
        cursor: pointer;
    }

    .mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: #fff;
        padding: 10px;
        border-radius: 10px;
        position: fixed;
        top: 63px;
        right: 10px;
        z-index: 51;
    }

    .mobile-nav a {
        color: var(--foreground);
        text-decoration: none;
        font-size: 14px;
        padding: 5px 10px;
        border-radius: 5px;
        transition: background 0.3s;
    }

    .mobile-nav a:hover {
        background: rgba(0, 0, 0, 0.1);
    }

    .fixed-header + .mobile-nav {
        position: fixed !important;
    }

    .fixed-header .hero-logo {
        display: none;
    }

    .fixed-header .mobile-menu {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .fleet-container::after {
        bottom: 100px;
    }

    .fleet-section > p {
        text-align: center;
        margin-bottom: 200px;
    }

    .swiper-fleet-slide > img,
    .swiper-fleet-slide > .boat-cover {
        min-height: 200px;
        object-fit: cover;
        border-radius: 9px;
    }
    .swiper-fleet-slide > .boat-cover > img.js--boat-cover {
        min-height: 200px;
        object-fit: cover;
    }

    .fleet-section .captain-info.hidden {
        position: static;
        display: block !important;
        margin-bottom: 40px;
        max-width: 155px;
        margin-right: auto;
        text-align: left !important;
        margin-top: 162px;
        padding: 5px 13px;
    }

    .captain-info.hidden p {
        text-align: left;
        font-size: 12px;
        line-height: 15px;
        margin: 0;
    }

    .captain-info.hidden img {
        width: 20px;
        height: 20px;
    }

    .fleet-section .btn.hidden {
        display: flex !important;
        position: static;
        max-width: fit-content;
    }

    .faq-header .btn.desktop {
        display: none;
    }

    .faq-container .btn.hidden {
        display: block;
        margin-bottom: 180px;
    }

    .about-logo {
        display: none;
    }

    .about-logo-mobile.hidden {
        display: flex !important;
        margin-left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 167px;
    }

    .about-content p {
        font-weight: 500;
        font-size: 15px;
        line-height: 24px;
        letter-spacing: 0;
        text-align: center;
    }

    .about-title {
        text-align: center;
    }

    .post-photo img {
        max-width: 100%;
    }

    .dropdown {
        max-width: 100%;
    }

    .more-tours-head h2 {
        text-align: right;
    }

    .more-buttons {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .footer-links > * {
        margin-left: 0;
        margin-right: 0;
    }

    .links {
        display: flex;
        flex-wrap: wrap;
        gap: 27px;
        justify-content: center !important;
        text-align: center;
    }

    .footer-links a {
        color: var(--foreground);
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
    }

    .footer-links a:hover {
        color: var(--primary);
        text-decoration: underline;
    }

    .footer .cred {
        font-size: 12px;
        color: var(--foreground-subtle);
        margin-top: 10px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .footer-social {
        display: flex;
        gap: 15px;
        margin-top: 15px;
    }

    .footer-phone {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 10px;
    }


    .swiper.swiper-gallery.hidden {
        display: block !important;
    }

    .gallery-photo-slide img {
        width: 100%;
        border-radius: 20px;
        margin-top: auto;
        margin-bottom: auto;
    }

    .swiper-button-next.swiper-gallery-next-btn,
    .swiper-button-prev.swiper-gallery-prev-btn {
        position: absolute !important;
    }

    .popup-content {
        max-height: 98vh;
        max-width: 92vw;
    }

    .popup .btn {
        margin-top: auto;
    }

    .map-location img {
        flex-grow: 0;
    }

    .more-tours-content .swipper.hidden {
        display: block !important;
    }

    #swiper-more {
        display: block !important;
    }

    .more-buttons.hidden {
        display: flex !important;
    }
}

@media screen and (min-width: 720px) and (max-width: 1024px) {
    .mobile-nav {
        display: none !important;
    }

    .gallery img {
        max-width: 100%;
    }

    .swiper.hidden {
        display: none !important;
    }

    .more-tour-item * {
        flex-wrap: wrap;
    }


    .tour-program b {

        font-weight: 500;
        font-size: 21.6px;
        line-height: 27px;
        letter-spacing: 0;
    }

    .tour-image {
        height: 190px;
        min-height: 190px;
    }

    /* Tablet hardening: сохраняем скругление на всех внутренних слоях Swiper. */
    .tour-image,
    .tour-image .swiper,
    .tour-image .swiper .swiper-wrapper,
    .tour-image .swiper .swiper-slide,
    .tour-image .swiper .swiper-slide img {
        border-radius: 20px;
    }

    .tour-image .swiper,
    .tour-image .swiper .swiper-wrapper,
    .tour-image .swiper .swiper-slide {
        overflow: hidden;
    }

    .tour-card h3 {
        font-size: 14.4px;
        line-height: 25.8px;
        letter-spacing: 0;
    }

    .tour-card p {
        font-weight: 500;
        font-size: 10.8px;
        line-height: 16.8px;
        letter-spacing: 0;
    }

    #tours .tour-details {
        min-height: 32px;
        padding: 5px 13px;
        font-size: clamp(10px, 1vw, 12px);
        letter-spacing: 0.035em;
        margin-top: 4px;
    }

    .captain-info p {

        font-weight: 400;
        font-size: 7.2px;
        line-height: 12.6px;
        letter-spacing: 0;
    }

    .boat-info div {

        font-weight: 400;
        font-size: 7.2px;
        line-height: 12.6px;
        letter-spacing: 0;
    }

    .footer * {
        gap: 5px;
    }

    .footer-links div:nth-child(2) div {
        gap: 16px;
    }

    /* Tablet: только размер шрифта меньше; раскладку ячеек
       (`flex: 0 1 …; nowrap`) держит базовое правило. */
    .schedule-table-row .date,
    .schedule-table-row .ship,
    .schedule-table-row .price {
        font-weight: 400;
        font-size: 12px;
        line-height: 14.4px;
        letter-spacing: 0;
    }

    .dropdown {

        font-weight: 400;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0;
    }

    .footer-links a {

        font-weight: 600;
        font-size: 7.2px;
        line-height: 15.6px;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .footer .cred {

        font-weight: 400;
        font-size: 6px;
        line-height: 6.6px;
        letter-spacing: 0;
    }

}

/* iPad Pro / крупные планшеты в landscape: применяем tablet-типографику и pill-стиль
   в диапазоне, который уже не попадает в max-width:1024, но ещё не desktop по UX. */
@media screen and (min-width: 1025px) and (max-width: 1279px) {
    .tour-card p {
        font-weight: 500;
        font-size: 10.8px;
        line-height: 16.8px;
        letter-spacing: 0;
    }

    #tours .tour-details {
        min-height: 32px;
        padding: 5px 13px;
        font-size: clamp(10px, 1vw, 12px);
        letter-spacing: 0.035em;
        margin-top: 4px;
    }
}

/* select */

.choices__inner {
    height: 80px;
    padding: 0;
    border: none;
    border-radius: 19px !important;
}

/* Попап брони: выпадашка вниз, не «от зеркаленная вверх» (ломало Opera и обрезалось overflow) */
#popup-booking .choices.is-open .choices__inner,
#popup-booking .choices.is-open .choices__inner .choices__list.choices__list--single {
    border-radius: 19px 19px 0 0 !important;
}

#popup-booking .choices__list.choices__list--dropdown {
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    margin-top: 0 !important;
    z-index: 10050;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    max-height: min(45vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.choices__inner .choices__list.choices__list--single {
    display: flex;
    align-items: center;
    height: 80px;
    border: 1px solid var(--muted);
    background: var(--muted);
    border-radius: 19px;
    padding-left: 15px;
    font-size: 16px;
    font-family: var(--font-brand);
}

.choices__inner .choices__list.choices__list--single.error {
    border-color: red;
}

.choices[data-type*=select-one]::after {
    border: none;
    width: 24px;
    height: 24px;
    background: url(../img/icon--angle.svg) no-repeat 50% 50%;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease-in-out;
    margin-top: 0;
}

.choices[data-type*=select-one].is-open::after {
    transform: translateY(-50%) rotate(180deg);
}

.choices__item.choices__item--selectable {
    font-weight: 600;
    font-family: var(--font-brand);
    color: var(--foreground);
}

.choices__item.choices__item--selectable.choices__placeholder {
    font-weight: 400;
    opacity: .5;
}

.choices__item--selectable::after {
    content: none !important;
}

.choices__list.choices__list--dropdown {
    background: var(--muted);
    border-radius: 0 0 19px 19px;
    border: none;
}

.choices__list.choices__list--dropdown .choices__list .choices__item.is-selected.choices__item--disabled {
    display: none !important;
}

.choices__list.choices__list--dropdown .choices__list .choices__item {
    padding-left: 15px;
    font-size: 16px;
    font-weight: 500;
}

.choices__list.choices__list--dropdown .choices__list .choices__item:hover {
    font-weight: 700;
    text-decoration: underline;
    background: transparent !important;
}

/* checkbox */

.label-checkbox {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.label-checkbox input {
    display: none;
}

.label-checkbox .psevdocheckbox {
    width: 6px;
    height: 6px;
    border-radius: 1px;
}

.label-checkbox input:checked + .psevdocheckbox {
    background: url('../img/icon--checkbox.svg') no-repeat 50% 50%;
}

.label-checkbox .label {
    max-width: calc(100% - 15px);
    color: #afafaf;
    font-size: 9px;
}
/* ============================================================
   POPUP YACHT — Glass Editorial (адаптация V2 из public/py.html).
   Активируется модификатором .popup-yacht--editorial. Полностью
   переопределяет визуал стандартного .popup.popup-yacht (фон,
   рамка, типографика, сетка спеков, пилюли). Откат — убрать
   модификатор в scripts/build-tour-landing.js → ребилд → CSS
   становится инертной (несуществующий класс).
   ============================================================ */

.popup.popup-yacht--editorial {
    --pe-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Корпус: noise + soft cyan-to-bg вертикальный градиент.
   Фото больше не full-bleed — даём верхний padding. */
html[data-theme] .popup.popup-yacht--editorial .popup-content {
    background:
        var(--pe-noise),
        linear-gradient(180deg,
            color-mix(in srgb, var(--secondary) 26%, #ffffff) 0%,
            #ffffff 35%) !important;
    background-size: 240px, auto !important;
    border: 1px solid transparent;
    background-clip: padding-box;
    border-radius: 20px !important;
    padding: 0 0 22px !important;
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    display: block !important;
    gap: 0 !important;
    width: 620px;
}

/* 1px gradient-border через mask-composite. */
.popup.popup-yacht--editorial .popup-content::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 50%, transparent),
        transparent 30%,
        transparent 70%,
        color-mix(in srgb, var(--secondary) 60%, transparent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 4;
}

/* Close — стеклянная пилюля в правом верхнем углу. */
.popup.popup-yacht--editorial .close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, #ffffff 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft, rgba(28,107,123,0.10));
    color: var(--foreground);
    display: grid;
    place-items: center;
    font-size: 12px;
    cursor: pointer;
    z-index: 11;
}

/* Слайдер-обёртка: инсет от краёв корпуса, без overflow:hidden чтобы
   thumbs могли жить под слайдером, не клиппясь. Скругления — на самом
   .popup-slider (фото-окно), thumbs идут как отдельный ряд под ним. */
.popup.popup-yacht--editorial .popup-slider-wrap {
    position: relative;
    margin: 16px 16px 0;
    padding: 0;
    overflow: visible;
    border-radius: 0;
    display: block;
    gap: 0;
}

html[data-theme] .popup.popup-yacht--editorial .popup-slider-wrap .popup-slider {
    border-radius: 14px;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    /* Перебиваем родительский `touch-action: pan-y` (свайп между яхтами).
       Внутри карусели горизонтальный жест уходит в Swiper → loop:true
       листает фото в любую сторону без «последнего» слайда. */
    touch-action: pan-x;
}

html[data-theme] .popup.popup-yacht--editorial .popup-slider-wrap .popup-thumbs {
    touch-action: pan-x;
}

/* Слайд = aspect-ratio 15:8 (≈1.88:1, −20% высоты от 3:2). Фото
   занимает меньше места, остальная информация поджимается выше.
   width:100% перекрывает legacy `width: 630px !important` из старых правил
   `.popup.popup-yacht .popup-content .popup-slider .swiper-slide`. */
html[data-theme] .popup.popup-yacht--editorial .popup-slider-wrap .popup-slider .swiper-slide {
    aspect-ratio: 15 / 8;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
}

html[data-theme] .popup.popup-yacht--editorial .popup-slider-wrap .popup-slider .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    border-radius: 14px !important;
    display: block;
}

/* Стрелка-навигация поверх фото — всегда по центру высоты,
   перекрывает legacy-правило top:175px/165px/110px. */
html[data-theme] .popup.popup-yacht--editorial .popup-arrow {
    top: 50% !important;
    transform: translateY(-50%);
}

/* Thumbs — компактный ряд под фото, в одном окне со слайдером (inset). */
html[data-theme] .popup.popup-yacht--editorial .popup-thumbs {
    padding: 8px 16px 0 !important;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: auto;
    max-width: 100%;
    margin: 0;
    position: relative;
    z-index: 3;
}

html[data-theme] .popup.popup-yacht--editorial .popup-thumbs .swiper-wrapper { gap: 6px; }

/* Фикс. ширина миниатюры — Swiper в free-mode скроллит горизонтально.
   Ширина подобрана так, чтобы при 22 фото визуально показывалось ~6
   на «один экран» внутри попапа (популярный тур-лендинговый паттерн). */
html[data-theme] .popup.popup-yacht--editorial .popup-thumbs .swiper-slide {
    flex: 0 0 auto !important;
    width: 84px !important;
    height: 56px !important;
    aspect-ratio: auto !important;
    border-radius: 6px !important;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    border: 0 !important;
    opacity: 0.55;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
}

html[data-theme] .popup.popup-yacht--editorial .popup-thumbs .swiper-slide:hover {
    opacity: 0.85;
}

html[data-theme] .popup.popup-yacht--editorial .popup-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 0 !important;
}

html[data-theme] .popup.popup-yacht--editorial .popup-thumbs .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Заголовок: variable Manrope 200 + жирный 800 для модели/якорной части. */
.popup.popup-yacht--editorial .popup-yacht__heading {
    padding: 16px 24px 0;
    display: grid;
    gap: 8px;
    position: relative;
    z-index: 3;
}

/* Один стандартный бренд-шрифт: Manrope 700 (см. CLAUDE.md → дизайн-система).
   Variable-вариация 200/800 убрана — единый вес для названия. */
.popup.popup-yacht--editorial .popup-yacht__heading h3 {
    margin: 0 !important;
    font-size: 1.05rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-variation-settings: normal;
    color: var(--foreground) !important;
    text-transform: none !important;
}

.popup.popup-yacht--editorial .popup-yacht__heading h3 b {
    font-weight: 700;
    font-variation-settings: normal;
}

.popup.popup-yacht--editorial .popup-yacht__heading .meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 0.78rem;
    color: var(--ink-soft, rgba(28,107,123,0.74));
    font-weight: 500;
    margin-top: 2px;
}

.popup.popup-yacht--editorial .popup-yacht__heading .meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.popup.popup-yacht--editorial .popup-yacht__heading .meta-row svg {
    width: 13px;
    height: 13px;
    color: var(--primary);
    flex-shrink: 0;
}

/* Spec-bento — 3×2 сетка тонких плиток с 1px разделителем. */
.popup.popup-yacht--editorial .spec-bento {
    margin: 16px 24px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-soft, rgba(28,107,123,0.10));
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-soft, rgba(28,107,123,0.10));
    position: relative;
    z-index: 3;
}

.popup.popup-yacht--editorial .spec-bento .tile {
    background: color-mix(in srgb, #ffffff 90%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 14px;
    display: grid;
    gap: 2px;
    transition: background 0.25s ease;
}

.popup.popup-yacht--editorial .spec-bento .tile:hover {
    background: color-mix(in srgb, var(--primary) 10%, #ffffff);
}

.popup.popup-yacht--editorial .spec-bento .tile .k {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute, rgba(28,107,123,0.54));
    font-weight: 700;
}

.popup.popup-yacht--editorial .spec-bento .tile .v {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-feature-settings: 'tnum' 1;
}

.popup.popup-yacht--editorial .spec-bento .tile .v small {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ink-mute, rgba(28,107,123,0.54));
    margin-left: 2px;
}

.popup.popup-yacht--editorial .spec-bento .tile .v-empty {
    color: var(--ink-mute, rgba(28,107,123,0.54));
    font-weight: 500;
}

/* Описание — место для контента, который пользователь зальёт позже.
   Пустой блок занимает фиксированный отступ, чтобы оставить «дыхание»
   между bento и pills. Когда контент придёт — появится автоматически. */
.popup.popup-yacht--editorial .popup-yacht__description {
    margin: 18px 24px 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ink-soft, rgba(28,107,123,0.74));
    min-height: 6px;
    position: relative;
    z-index: 3;
}

.popup.popup-yacht--editorial .popup-yacht__description:empty {
    margin-top: 14px;
    min-height: 4px;
}

html[data-theme="dark"] .popup.popup-yacht--editorial .popup-yacht__description {
    color: rgba(236, 246, 248, 0.78);
}

/* Pills row — оборудование (Кухня / Душ / Кондиционер / танки).
   html[data-theme] префикс нужен чтобы перебить legacy
   `.popup.popup-yacht .popup-content ul { display: flex; flex-direction: column }`. */
html[data-theme] .popup.popup-yacht--editorial .popup-yacht__pills {
    margin: 16px 24px 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    list-style: none !important;
    list-style-position: outside !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    position: relative;
    z-index: 3;
}

html[data-theme] .popup.popup-yacht--editorial .popup-yacht__pills li {
    margin: 0 !important;
    padding: 4px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, #ffffff 70%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-soft, rgba(28,107,123,0.10));
    font-size: 0.74rem;
    line-height: 1.25;
    font-weight: 500;
    color: var(--ink, var(--foreground));
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    flex: 0 0 auto;
    list-style: none;
}

html[data-theme] .popup.popup-yacht--editorial .popup-yacht__pills li::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 0 4px color-mix(in srgb, var(--primary) 40%, transparent);
    flex: 0 0 auto;
}

/* ---------- DARK THEME ----------
   Мутное стекло: фон НЕ прозрачный (иначе чёрный backdrop попапа
   просвечивает и текст плывёт). Берём бренд-bg + лёгкий cyan-тон сверху,
   чтобы матовая «глубина» осталась, но шрифт читался. Соответствует
   memory: feedback_liquid_glass_min_opacity (≥72%) + brand mobile dark tones. */
html[data-theme="dark"] .popup.popup-yacht--editorial .popup-content {
    background:
        var(--pe-noise),
        linear-gradient(180deg,
            color-mix(in srgb, var(--secondary) 20%, var(--bg)) 0%,
            color-mix(in srgb, var(--bg) 96%, #ffffff) 60%) !important;
    background-color: var(--bg) !important;
    background-size: 240px, auto !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(236, 246, 248, 0.22);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 8px 28px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .popup.popup-yacht--editorial .popup-content::before {
    opacity: 0.55;
}

html[data-theme="dark"] .popup.popup-yacht--editorial .close {
    background: rgba(236, 246, 248, 0.18);
    border: 1px solid rgba(236, 246, 248, 0.32);
    color: #ffffff;
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

html[data-theme="dark"] .popup.popup-yacht--editorial .spec-bento {
    background: rgba(29, 177, 207, 0.18);
    border: 1px solid rgba(29, 177, 207, 0.32);
}

html[data-theme="dark"] .popup.popup-yacht--editorial .spec-bento .tile {
    background:
        linear-gradient(180deg,
            rgba(236, 246, 248, 0.06),
            rgba(29, 177, 207, 0.10));
    box-shadow: inset 0 0 0 1px rgba(29, 177, 207, 0.20);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme="dark"] .popup.popup-yacht--editorial .spec-bento .tile:hover {
    background:
        linear-gradient(180deg,
            rgba(236, 246, 248, 0.10),
            rgba(29, 177, 207, 0.20));
}

/* Заголовок и meta-row в тёмной теме — чуть светлее основного цвета,
   чтобы стеклянная подложка не съедала контраст. */
html[data-theme="dark"] .popup.popup-yacht--editorial .popup-yacht__heading h3 {
    color: #F4FBFD !important;
}

html[data-theme="dark"] .popup.popup-yacht--editorial .popup-yacht__heading .meta-row {
    color: rgba(236, 246, 248, 0.78);
}

html[data-theme="dark"] .popup.popup-yacht--editorial .spec-bento .tile .v {
    color: #F4FBFD;
}

html[data-theme="dark"] .popup.popup-yacht--editorial .spec-bento .tile .k {
    color: rgba(236, 246, 248, 0.66);
}

html[data-theme="dark"] .popup.popup-yacht--editorial .popup-yacht__pills li {
    background: rgba(236, 246, 248, 0.14);
    border: 1px solid rgba(236, 246, 248, 0.26);
    color: rgba(236, 246, 248, 0.94);
}

/* ---------- RESPONSIVE ----------
   Высоту фото не пиним — aspect-ratio: 3/2 на слайде сам диктует размер
   от ширины попапа, фото всегда «влазит по ширине».
   Расширили максимум до 1366px — покрывает iPad Pro 12.9" landscape
   и все промежуточные «странные» размеры; иначе на горизонтальном
   tablet попап оставался прозрачным (desktop-стайл). */

@media screen and (min-width: 720px) and (max-width: 1366px) {
    /* Перебиваем legacy `width:80vw; height:88vh; min-height:88vh` —
       они растягивали попап на весь экран, оставляя пустоту под контентом.
       Editorial: ширина −20% (80vw → 64vw), высота по контенту,
       max-height страхует от переполнения.
       Light theme на tablet: подложка 40% белого + 30px замутнение
       сквозь backdrop-filter — стекло перестаёт «просвечивать». */
    html[data-theme] .popup.popup-yacht--editorial .popup-content {
        padding: 0 0 22px !important;
        gap: 0 !important;
        width: 64vw !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        max-height: 86vh !important;
        min-height: 0 !important;
        /* +40 % белого поверх текущих ~40 % → итого ≈80 % белого фона. */
        background:
            var(--pe-noise),
            linear-gradient(180deg,
                rgba(255, 255, 255, 0.85) 0%,
                rgba(255, 255, 255, 0.78) 100%) !important;
        background-size: 240px, auto !important;
        backdrop-filter: blur(30px) saturate(1.4) !important;
        -webkit-backdrop-filter: blur(30px) saturate(1.4) !important;
    }

    /* Текст и контуры на 30% темнее — scoped через локальные CSS-vars,
       чтобы на полупрозрачной подложке всё читалось контрастно.
       Бренд `--foreground:#1C6B7B` (HSL L=30%) → L=21% ≈ #134C58. */
    html:not([data-theme="dark"]) .popup.popup-yacht--editorial {
        --foreground: #134C58;
        --ink: #134C58;
        --ink-soft: rgba(19, 76, 88, 0.95);
        --ink-mute: rgba(19, 76, 88, 0.78);
        --border-soft: rgba(19, 76, 88, 0.30);
        --border: rgba(19, 76, 88, 0.42);
    }
    /* Pills и bento-плитки в light tablet — фон чуть плотнее,
       чтобы тёмный шрифт не «висел в воздухе». */
    html:not([data-theme="dark"]) .popup.popup-yacht--editorial .popup-yacht__pills li {
        background: rgba(255, 255, 255, 0.86) !important;
        border: 1px solid rgba(19, 76, 88, 0.32) !important;
        color: #134C58 !important;
    }
    html:not([data-theme="dark"]) .popup.popup-yacht--editorial .spec-bento .tile {
        background: rgba(255, 255, 255, 0.78);
    }
    html:not([data-theme="dark"]) .popup.popup-yacht--editorial .spec-bento {
        background: rgba(19, 76, 88, 0.20);
        border-color: rgba(19, 76, 88, 0.30);
    }
    /* Dark theme на tablet — оставляем брендовую тёмную подложку,
       не перебиваем светлым стеклом. */
    html[data-theme="dark"] .popup.popup-yacht--editorial .popup-content {
        background:
            var(--pe-noise),
            linear-gradient(180deg,
                color-mix(in srgb, var(--secondary) 20%, var(--bg)) 0%,
                color-mix(in srgb, var(--bg) 96%, #ffffff) 60%) !important;
        background-color: var(--bg) !important;
        background-size: 240px, auto !important;
        backdrop-filter: blur(20px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    }
    .popup.popup-yacht--editorial .popup-yacht__heading {
        padding: 14px 20px 0;
    }
    .popup.popup-yacht--editorial .spec-bento,
    .popup.popup-yacht--editorial .popup-yacht__pills {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and (max-width: 719px) {
    html[data-theme] .popup.popup-yacht--editorial .popup-content {
        padding: 0 0 22px !important;
        border-radius: 16px !important;
        width: 100% !important;
    }
    .popup.popup-yacht--editorial .popup-yacht__heading {
        padding: 14px 18px 0;
    }
    .popup.popup-yacht--editorial .popup-yacht__heading h3 {
        font-size: 1rem !important;
    }
    .popup.popup-yacht--editorial .spec-bento {
        grid-template-columns: repeat(2, 1fr);
        margin: 14px 18px 0;
    }
    .popup.popup-yacht--editorial .popup-yacht__pills {
        margin: 14px 18px 0;
    }
    html[data-theme] .popup.popup-yacht--editorial .popup-thumbs {
        padding: 8px 18px 4px !important;
    }
}

/* ============================================================
   POPUP MAP — размеры на tablet (720-1024) зависят от источника
   клика, см. memory project_marina_map_modal-стиля контракт.
   - Без `.map-over-tour` (открыт с главной из фото тур-карточки)
     → размер = popup-yacht editorial (64vw, max 86vh).
   - С `.map-over-tour` (открыт из уже открытого popup-tour)
     → размер = popup-tour (80vw, height пинит JS под тур-попап).
   Класс выставляет `_syncMapPopupHeightToActiveTour` в main.js.
   Диапазон расширен до 1366px — landscape iPad Pro тоже tablet.
   ============================================================ */
@media screen and (min-width: 720px) and (max-width: 1366px) {
    /* (А) С главной → размер popup-yacht editorial.
       Yacht-попап на tablet рендерится контентом ≈60-65vh высотой,
       64vw шириной. Здесь задаём такие же явные значения, чтобы избежать
       коллапса flex-цепочки `tour-map-content { flex: 1 1 0 }`. */
    html[data-theme] #popup-map:not(.map-over-tour) .popup-content,
    html[data-theme] #popup-map2:not(.map-over-tour) .popup-content {
        width: 64vw !important;
        max-width: calc(100vw - 24px) !important;
        height: 62vh !important;
        min-height: 62vh !important;
        max-height: 86vh !important;
    }
    /* Tour-map-content + leaflet внутри (А) — заполняют всю popup-content. */
    html[data-theme] #popup-map:not(.map-over-tour) .tour-map-content,
    html[data-theme] #popup-map2:not(.map-over-tour) .tour-map-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    html[data-theme] #popup-map:not(.map-over-tour) .tour-map-leaflet,
    html[data-theme] #popup-map2:not(.map-over-tour) .tour-map-leaflet {
        height: 100% !important;
        min-height: 0 !important;
    }
    /* (Б) Из popup-tour → размер popup-tour. Высота пинется JS-ом
       (`_syncMapPopupHeightToActiveTour`) под высоту активного тура,
       поэтому height/max-height не задаём — оставляем inline-стиль. */
    html[data-theme] #popup-map.map-over-tour .popup-content,
    html[data-theme] #popup-map2.map-over-tour .popup-content {
        width: 80vw !important;
        max-width: calc(100vw - 16px) !important;
    }
}