/* ==========================================================
   VILLA ARNEST UI CORE v1
   Общий визуальный слой поверх Bootstrap
   ========================================================== */


/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */

:root {

    /* ------------------------------------------------------
       Brand
       ------------------------------------------------------ */

    --villa-green-dark: #005a4f;
    --villa-green: #00815f;
    --villa-green-light: #87c088;
    --villa-yellow-light: #fffded;


    /* ------------------------------------------------------
       Text
       ------------------------------------------------------ */

    --villa-text: #2f2f2f;
    --villa-text-soft: #555;
    --villa-muted: #6f6f6f;


    /* ------------------------------------------------------
       Surfaces
       ------------------------------------------------------ */

    --villa-surface: rgba(255, 255, 255, .86);
    --villa-surface-solid: #fff;

    --villa-surface-soft:
        rgba(var(--bs-villa-lg-rgb), .12);

    --villa-surface-green:
        rgba(var(--bs-villa-gr-rgb), .07);

    --villa-surface-green-hover:
        rgba(var(--bs-villa-gr-rgb), .12);


    /* ------------------------------------------------------
       Borders
       ------------------------------------------------------ */

    --villa-border:
        rgba(var(--bs-villa-dg-rgb), .12);

    --villa-border-soft:
        rgba(0, 0, 0, .08);


    /* ------------------------------------------------------
       Radius

       sm  — мелкие внутренние элементы
       md  — обычные карточки
       lg  — крупные hero / большие панели
       ------------------------------------------------------ */

    --villa-radius-sm: .75rem;
    --villa-radius: 1rem;
    --villa-radius-lg: 1.5rem;


    /* ------------------------------------------------------
       Shadows
       ------------------------------------------------------ */

    --villa-shadow:
        0 6px 20px rgba(var(--bs-villa-dg-rgb), .08);

    --villa-shadow-hover:
        0 10px 28px rgba(var(--bs-villa-dg-rgb), .14);

    --villa-shadow-strong:
        0 12px 32px rgba(var(--bs-villa-dg-rgb), .16);


    /* ------------------------------------------------------
       Motion
       ------------------------------------------------------ */

    --villa-transition:
        .2s ease;


    /* ------------------------------------------------------
       Focus
       ------------------------------------------------------ */

    --villa-focus-color:
        var(--bs-villa-gr);

    --villa-focus-ring:
        0 0 0 .2rem rgba(var(--bs-villa-gr-rgb), .22);


    /* ------------------------------------------------------
       Fix старой переменной.
       В начале нынешнего style.css --bs-villa-ly
       затем случайно перезаписывается RGB-значением.
       ------------------------------------------------------ */

    --bs-villa-ly: #fffded;
}


/* ==========================================================
   2. FONTS
   ========================================================== */

/*
 * Если реальные файлы находятся в другом каталоге,
 * поправим только URL.
 */

@font-face {
    font-family: "Century Gothic";
    src:
        url("/assets/fonts/centurygothic.ttf")
        format("truetype");

    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: "Century Gothic";
    src:
        url("/assets/fonts/centurygothic-bold.ttf")
        format("truetype");

    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


.f-cg {
    font-family:
        "Century Gothic",
        Arial,
        sans-serif;
}


.f-cg-bold {
    font-family:
        "Century Gothic",
        Arial,
        sans-serif;

    font-weight: 700;
}


/* ==========================================================
   3. ACCESSIBILITY BASE
   ========================================================== */

/*
 * Возвращаем системный scrollbar.
 *
 * В текущем style.css он полностью скрывается.
 * Для доступности лучше его не убирать.
 */

html {
    scrollbar-width: auto;
}


html::-webkit-scrollbar {
    display: initial !important;

    width: auto !important;
    height: auto !important;
}


/*
 * Единый клавиатурный focus.
 */

:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]
):focus-visible {
    outline:
        3px solid
        var(--villa-focus-color);

    outline-offset: 3px;
}


/* ==========================================================
   4. TYPOGRAPHY HELPERS
   ========================================================== */

.villa-eyebrow {
    margin-bottom: .45rem;

    color:
        var(--villa-green);

    font-size: .82rem;
    font-weight: 600;

    letter-spacing: .05em;
    text-transform: uppercase;
}


.villa-lead {
    color:
        var(--villa-green-dark);

    font-size:
        clamp(1.15rem, 2vw, 1.35rem);

    line-height: 1.55;
}


.villa-muted {
    color:
        var(--villa-muted);
}


.villa-section-head {
    max-width: 820px;

    margin:
        0 auto
        2.5rem;

    text-align: center;
}


.villa-section-head h2 {
    color:
        var(--villa-green-dark);
}


.villa-section-head p {
    margin-bottom: 0;

    color:
        var(--villa-muted);

    font-size: 1.05rem;
    line-height: 1.6;
}


/* ==========================================================
   5. BUTTONS
   ========================================================== */

/*
 * Основная кнопка.
 *
 * Геометрия остаётся прямоугольной:
 * карточка может быть округлой,
 * кнопка остаётся очевидным действием.
 */

/* ==========================================================
   PRIMARY BUTTON
   ========================================================== */

.btn-villa {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--villa-green);
    --bs-btn-border-color: var(--villa-green);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--villa-green-dark);
    --bs-btn-hover-border-color: var(--villa-green-dark);

    --bs-btn-focus-shadow-rgb:
        var(--bs-villa-gr-rgb);

    --bs-btn-active-color:
        var(--villa-green-dark);

    --bs-btn-active-bg:
        var(--villa-green-light);

    --bs-btn-active-border-color:
        var(--villa-green-light);

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--villa-green);
    --bs-btn-disabled-border-color: var(--villa-green);

    --bs-btn-border-radius: 0;

    border-radius: 0;

    box-shadow:
        2px 2px 10px
        rgba(var(--bs-villa-dg-rgb), .32);

    text-decoration: none;

    transition:
        background-color var(--villa-transition),
        border-color var(--villa-transition),
        box-shadow var(--villa-transition),
        transform var(--villa-transition);
}


.btn-villa:hover {
    transform:
        translateY(-1px);

    box-shadow:
        3px 5px 14px
        rgba(var(--bs-villa-dg-rgb), .40);

    text-decoration: none;
}


.btn-villa:active,
.btn-villa.active {
    transform:
        translateY(0);

    box-shadow:
        1px 2px 6px
        rgba(var(--bs-villa-dg-rgb), .28);
}


.btn-villa:focus-visible {
    box-shadow:
        var(--villa-focus-ring),
        2px 2px 10px
        rgba(var(--bs-villa-dg-rgb), .32);
}


/* Центровка обычных CTA */

.btn-villa-action {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    text-align: center;
    line-height: 1.25;
}


/* Крупная CTA */

.btn-villa-lg {
    min-height: 54px;

    padding:
        .8rem
        1.4rem;

    font-size: 1.1rem;
}


/*
 * Вторичная кнопка.
 */

.btn-outline-villa {
    transition:
        background-color var(--villa-transition),
        border-color var(--villa-transition),
        color var(--villa-transition),
        box-shadow var(--villa-transition),
        transform var(--villa-transition);
}

.btn-outline-villa:hover {
    transform:
        translateY(-1px);

    box-shadow:
        2px 4px 12px
        rgba(var(--bs-villa-dg-rgb), .18);
}

.btn-outline-villa:active {
    transform:
        translateY(0);

    box-shadow: none;
}



/* ==========================================================
   6. GENERIC CARD
   ========================================================== */

.card-villa {
    border:
        1px solid
        var(--villa-border);

    border-radius:
        var(--villa-radius);

    background:
        var(--villa-surface);

    box-shadow:
        var(--villa-shadow);
}


.card-villa-hover {
    transition:
        transform var(--villa-transition),
        box-shadow var(--villa-transition),
        border-color var(--villa-transition);
}


.card-villa-hover:hover {
    border-color:
        rgba(var(--bs-villa-gr-rgb), .18);

    transform:
        translateY(-2px);

    box-shadow:
        var(--villa-shadow-hover);
}


/* ==========================================================
   7. PANEL / SURFACE
   ========================================================== */

/*
 * Нейтральная смысловая поверхность.
 *
 * Hero intro, пояснение, заключение,
 * группа текста и т.п.
 */

.villa-panel {
    padding:
        1.75rem
        2rem;

    border:
        1px solid
        var(--villa-border);

    border-radius:
        var(--villa-radius-lg);

    background:
        var(--villa-surface);

    box-shadow:
        var(--villa-shadow);
}


.villa-panel--soft {
    background:
        var(--villa-surface-green);
}


.villa-panel--flat {
    box-shadow: none;
}


/* ==========================================================
   8. HERO
   ========================================================== */

.villa-hero {
    width: 100%;

    padding:
        2rem
        2rem
        4rem;
}


.villa-hero__content {
    max-width: 680px;
}


.villa-hero__title {
    color:
        var(--villa-green-dark);
}


.villa-hero__lead {
    color:
        var(--villa-green-dark);

    font-size:
        clamp(1.25rem, 2.4vw, 1.6rem);

    font-weight: 300;
    line-height: 1.45;
}


.villa-hero__content > p {
    line-height: 1.65;
}


/*
 * Радиус непосредственно на img.
 *
 * Это должно устранить неприятный clipping,
 * который сейчас заметен на About / Medicine.
 */

.villa-hero__media {
    width: 100%;
}


.villa-hero__media img {
    display: block;

    width: 100%;
    height:
        clamp(280px, 38vw, 460px);

    object-fit: cover;
    object-position: center;

    border-radius:
        var(--villa-radius-lg);

    box-shadow:
        var(--villa-shadow-strong);
}


/* ==========================================================
   9. ICON FEATURE CARD
   ========================================================== */

/*
 * Карточки типа:
 * About -> особенности
 * Medicine -> направления.
 */

.villa-feature {
    display: grid;

    grid-template-columns:
        64px
        minmax(0, 1fr);

    gap: 1.2rem;

    height: 100%;

    padding: 1.5rem;

    color: inherit;
    text-decoration: none;

    border:
        1px solid
        transparent;

    border-radius:
        var(--villa-radius);

    background:
        var(--villa-surface-green);
}


a.villa-feature {
    cursor: pointer;

    transition:
        transform var(--villa-transition),
        box-shadow var(--villa-transition),
        border-color var(--villa-transition);
}


a.villa-feature,
a.villa-feature:hover,
a.villa-feature:focus,
a.villa-feature:active {
    color: inherit;
    text-decoration: none;
}


a.villa-feature:hover {
    border-color:
        var(--villa-border);

    transform:
        translateY(-2px);

    box-shadow:
        var(--villa-shadow-hover);
}


.villa-feature__icon {
    display: flex;

    width: 56px;
    height: 56px;

    align-items: center;
    justify-content: center;

    color:
        var(--villa-green);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .88);

    box-shadow:
        0 5px 16px
        rgba(var(--bs-villa-dg-rgb), .10);
}


.villa-feature__icon svg,
.villa-feature__icon i {
    font-size: 1.45rem;
}


.villa-feature__title {
    margin-bottom: .55rem;

    color:
        var(--villa-green-dark);

    font-size: 1.25rem;
    line-height: 1.3;
}


.villa-feature__text {
    margin-bottom: 0;

    line-height: 1.55;
}


.villa-feature__more {
    display: inline-flex;

    align-items: center;

    gap: .4rem;

    margin-top: .75rem;

    color:
        var(--villa-green);

    font-weight: 500;
}


/* ==========================================================
   9.1 Feature modifiers
   ========================================================== */

.villa-feature-list--alternating
.villa-feature:nth-child(4n + 1),

.villa-feature-list--alternating
.villa-feature:nth-child(4n + 4) {
    background:
        rgba(207, 249, 255, .36);
}

.villa-feature-list--alternating
.villa-feature:nth-child(4n + 2),

.villa-feature-list--alternating
.villa-feature:nth-child(4n + 3) {
    background:
        rgba(255, 255, 255, .76);
}


/* ==========================================================
   10. WIDE NAVIGATION PANEL
   ========================================================== */

/*
 * Общий наследник:
 * about-section-link
 * medicine-format-item
 */

.villa-link-panel {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        280px;

    min-height: 190px;

    overflow: hidden;

    color: inherit;
    text-decoration: none;

    border:
        1px solid
        var(--villa-border);

    border-radius:
        var(--villa-radius-lg);

    background:
        var(--villa-surface);

    box-shadow:
        var(--villa-shadow);

    transition:
        transform var(--villa-transition),
        box-shadow var(--villa-transition),
        border-color var(--villa-transition);
}


.villa-link-panel,
.villa-link-panel:hover,
.villa-link-panel:focus,
.villa-link-panel:active {
    color: inherit;
    text-decoration: none;
}


.villa-link-panel:hover {
    border-color:
        rgba(var(--bs-villa-gr-rgb), .18);

    transform:
        scale(1.006);

    box-shadow:
        0 14px 34px rgba(var(--bs-villa-dg-rgb), .16);
}


.villa-link-panel__body {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        1.75rem
        2rem;
}


.villa-link-panel__label {
    margin-bottom: .4rem;

    color:
        var(--villa-green);

    font-size: .8rem;
    font-weight: 600;

    letter-spacing: .045em;
    text-transform: uppercase;
}


.villa-link-panel__title {
    margin-bottom: .55rem;

    color:
        var(--villa-green-dark);
}


.villa-link-panel__text {
    max-width: 720px;

    margin-bottom: .8rem;

    line-height: 1.55;
}


.villa-link-panel__more {
    color:
        var(--villa-green);

    font-weight: 500;
}


.villa-link-panel__media {
    overflow: hidden;

    isolation: isolate;
}


.villa-link-panel__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

}



/* ==========================================================
   10.1 Wide panel modifiers
   ========================================================== */

.villa-link-list--alternating
.villa-link-panel:nth-child(odd) {
    background:
        rgba(255, 255, 255, .78);
}

.villa-link-list--alternating
.villa-link-panel:nth-child(even) {
    background:
        rgba(207, 249, 255, .34);
}



/* ==========================================================
   11. PRODUCT / CHOICE CARD
   ========================================================== */

/*
 * Основа для:
 * лечебных программ,
 * IV,
 * модулей,
 * пакетов,
 * других наборов выбора.
 */

.villa-product-card {
    position: relative;

    width: 100%;
    max-width: 400px;

    margin-inline: auto;

    border:
        1px solid
        var(--villa-border);

    border-radius:
        var(--villa-radius-lg);

    background:
        var(--villa-surface-solid);

    box-shadow:
        var(--villa-shadow);

    transition:
        box-shadow var(--villa-transition),
        border-color var(--villa-transition);
}


.villa-product-card:hover {
    border-color:
        rgba(var(--bs-villa-gr-rgb), .18);

    box-shadow:
        var(--villa-shadow-hover);
}


/*
 * Внешняя карточка НЕ overflow:hidden,
 * чтобы CTA / закладки могли выступать наружу.
 */

.villa-product-card__media {
    position: relative;

    overflow: visible;
}


.villa-product-card__image {
    overflow: hidden;

    border-radius:
        var(--villa-radius-lg)
        var(--villa-radius-lg)
        0
        0;

    background:
        #f7f8f6;
}


.villa-product-card__image img {
    display: block;

    width: 100%;

    aspect-ratio:
        1 / 1;

    object-fit: cover;
    object-position: center;

}



/*
 * Метаданные-закладки.
 */

.villa-product-card__meta {
    position: absolute;

    left: 1rem;
    bottom: -.6rem;

    z-index: 3;

    display: flex;

    flex-wrap: wrap;

    gap: .45rem;
}


.villa-product-card__badge {
    display: inline-flex;

    align-items: center;

    min-height: 34px;

    padding:
        .4rem
        .7rem;

    color:
        var(--villa-green-dark);

    background:
        rgba(255, 255, 255, .94);

    border:
        1px solid
        var(--villa-border);

    border-radius:
        var(--villa-radius-sm);

    box-shadow:
        0 4px 12px
        rgba(var(--bs-villa-dg-rgb), .10);

    font-size: .82rem;
    font-weight: 500;
}


/*
 * Выступающая CTA.
 */

.villa-product-card__cta {
    position: absolute;

    right: -.55rem;
    bottom: 1rem;

    z-index: 4;
}


.villa-product-card__body {
    padding:
        1.5rem
        1.25rem
        1.25rem;

    text-align: center;
}


.villa-product-card__title {
    margin-bottom: .45rem;

    color:
        var(--villa-green-dark);

    font-size: 1.25rem;
    line-height: 1.3;
}


.villa-product-card__text {
    margin-bottom: 0;

    color:
        var(--villa-muted);

    font-size: .94rem;
    line-height: 1.5;
}



/* ==========================================================
   OPTIONAL IMAGE ZOOM
   ========================================================== */

.villa-img-zoom {
    overflow: hidden;

    /* Улучшает clipping по скруглённым краям */
    isolation: isolate;
}


/*
 * Небольшой scale(1.001) вместо transform:none.
 *
 * Это почти визуально равно 1,
 * но изображение остаётся на одном compositing layer
 * до, во время и после hover.
 */

.villa-img-zoom > img,
.villa-img-zoom picture > img {
    display: block;

    transform:
        translateZ(0)
        scale(1.001);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: transform;

    transition:
        transform .35s ease;
}


/* Наведение непосредственно на изображение */

.villa-img-zoom:hover > img,
.villa-img-zoom:hover picture > img,

/* Наведение на всю карточку */

.villa-product-card:hover
.villa-img-zoom > img,

.villa-product-card:hover
.villa-img-zoom picture > img,

.villa-link-panel:hover
.villa-img-zoom > img,

.villa-link-panel:hover
.villa-img-zoom picture > img {
    transform:
        translateZ(0)
        scale(1.05);
}


/* ==========================================================
   12. CALLOUT
   ========================================================== */

/*
 * Информационная вставка:
 * "рекомендуем скрининг",
 * "обратите внимание",
 * переход в связанный раздел.
 */

.villa-callout {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding:
        1.5rem
        1.75rem;

    border:
        1px solid
        var(--villa-border);

    border-radius:
        var(--villa-radius-lg);

    background:
        var(--villa-surface-green);
}


.villa-callout__content {
    max-width: 820px;
}


.villa-callout__title {
    margin-bottom: .4rem;

    color:
        var(--villa-green-dark);
}


.villa-callout__text {
    margin-bottom: 0;

    color:
        var(--villa-text-soft);

    line-height: 1.6;
}


/* ==========================================================
   13. BOOTSTRAP ACCORDION
   ========================================================== */

.accordion-villa {
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius:
        var(--villa-radius);

    --bs-accordion-inner-border-radius:
        var(--villa-radius);

    --bs-accordion-btn-color:
        var(--villa-green-dark);

    --bs-accordion-btn-bg:
        rgba(255, 255, 255, .82);

    --bs-accordion-active-color:
        var(--villa-green-dark);

    --bs-accordion-active-bg:
        var(--villa-surface-soft);

    --bs-accordion-btn-focus-box-shadow:
        none;

    display: flex;

    flex-direction: column;

    gap: .8rem;
}


.accordion-villa
.accordion-item {
    overflow: hidden;

    border:
        1px solid
        var(--villa-border);

    border-radius:
        var(--villa-radius) !important;

    background:
        var(--villa-surface);

    box-shadow:
        var(--villa-shadow);
}


.accordion-villa
.accordion-button {
    min-height: 68px;

    padding:
        1rem
        1.35rem;

    font-size: 1.05rem;
    font-weight: 600;
}


.accordion-villa
.accordion-button:hover {
    background:
        var(--villa-surface-soft);
}


.accordion-villa
.accordion-button:focus-visible {
    outline:
        3px solid
        var(--villa-focus-color);

    outline-offset: -3px;
}


.accordion-villa
.accordion-body {
    padding:
        .8rem
        1.5rem
        1.5rem;

    line-height: 1.65;
}


/* Accordion motion */

.accordion-villa .accordion-collapse {
    transition:
        height .35s ease;
}

.accordion-villa .accordion-button::after {
    transition:
        transform .3s ease;
}


/* ==========================================================
   14. WIDE DISCLOSURE / DETAILS
   ========================================================== */

/*
 * Широкие раскрывающиеся карточки:
 * screening,
 * diagnostics,
 * большие составы услуг.
 *
 * Используем нативный details/summary.
 */

.villa-disclosure {
    overflow: hidden;

    border:
        1px solid
        var(--villa-border);

    border-radius:
        var(--villa-radius-lg);

    background:
        var(--villa-surface-solid);

    box-shadow:
        var(--villa-shadow);

    transition:
        box-shadow var(--villa-transition),
        border-color var(--villa-transition);
}


.villa-disclosure:hover,
.villa-disclosure[open] {
    border-color:
        rgba(var(--bs-villa-gr-rgb), .18);

    box-shadow:
        var(--villa-shadow-hover);
}


.villa-disclosure__summary {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 1.5rem;

    padding:
        1.35rem
        1.5rem;

    list-style: none;

    cursor: pointer;
}


.villa-disclosure__summary::-webkit-details-marker {
    display: none;
}


.villa-disclosure__title {
    margin-bottom: .3rem;

    color:
        var(--villa-green-dark);

    font-size: 1.25rem;
    font-weight: 600;
}


.villa-disclosure__short {
    margin-bottom: 0;

    color:
        var(--villa-muted);

    line-height: 1.55;
}


.villa-disclosure__action {
    display: inline-flex;

    align-items: center;

    gap: .65rem;

    padding:
        .55rem
        .85rem;

    color:
        var(--villa-green);

    border-radius:
        999px;

    background:
        var(--villa-surface-green);

    font-size: .88rem;
    font-weight: 500;
}


.villa-disclosure__chevron {
    width: 9px;
    height: 9px;

    border-right:
        2px solid currentColor;

    border-bottom:
        2px solid currentColor;

    transform:
        rotate(45deg);

    transition:
        transform var(--villa-transition);
}


.villa-disclosure[open]
.villa-disclosure__chevron {
    transform:
        rotate(225deg);
}


.villa-disclosure__body {
    padding:
        1.5rem;

    border-top:
        1px solid
        var(--villa-border);
}


/* ==========================================================
   15. LISTS
   ========================================================== */

/*
 * Фирменный список с зелёной полосой.
 * Обновлённый наследник list-border.
 */

.list-villa {
    margin-bottom: 0;
    padding-left: 0;

    list-style: none;
}


.list-villa > li {
    margin:
        .45rem
        0;

    padding:
        .35rem
        .8rem
        .35rem
        1rem;

    border-left:
        6px solid
        var(--villa-green-dark);

    line-height: 1.55;
}


/*
 * Медицинское предупреждение.
 *
 * Обычные bullets внутри,
 * красная линия обозначает весь блок.
 */

.villa-alert-list {
    padding:
        1.3rem
        1.5rem;

    border-left:
        4px solid
        var(--bs-danger);

    border-radius:
        0
        var(--villa-radius)
        var(--villa-radius)
        0;

    background:
        rgba(var(--bs-danger-rgb), .075);
}


.villa-alert-list ul {
    margin-bottom: 0;

    padding-left: 1.25rem;

    line-height: 1.65;
}


.villa-alert-list li + li {
    margin-top: .4rem;
}










/* ==========================================================
   DIAGNOSTIC DISCLOSURE BASE
   ========================================================== */

.diagnostic-item__summary {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
}

.diagnostic-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 84px;
    height: 84px;

    flex-shrink: 0;

    border-radius: 1.25rem;
    background: var(--villa-surface-green);
}

.diagnostic-item__icon img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.diagnostic-item__main {
    min-width: 0;
}

.diagnostic-item__summary .villa-disclosure__action {
    justify-self: end;
    align-self: center;
    white-space: nowrap;
}

@media (max-width: 767.98px) {

    .diagnostic-item__summary {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-areas:
            "icon title"
            "short short"
            "action action";

        gap: .85rem 1rem;
        padding: 1rem;
    }

    .diagnostic-item__icon {
        grid-area: icon;
        width: 64px;
        height: 64px;
        border-radius: 1rem;
    }

    .diagnostic-item__icon img {
        width: 34px;
        height: 34px;
    }

    .diagnostic-item__main {
        display: contents;
    }

    .diagnostic-item__main .villa-disclosure__title {
        grid-area: title;
        align-self: center;
        margin-bottom: 0;
        font-size: 1.1rem;
        line-height: 1.25;
    }

    .diagnostic-item__main .villa-disclosure__short {
        grid-area: short;
        margin: 0;
        font-size: .95rem;
        line-height: 1.5;
    }

    .diagnostic-item__summary .villa-disclosure__action {
        grid-area: action;
        justify-self: start;
        margin-top: .15rem;
    }
}


/* ==========================================================
   DIAGNOSTIC DISCLOSURE CONTENT
   ========================================================== */

.diagnostic-item__layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:2rem;
    align-items:start;
}

.diagnostic-item__content {
    min-width:0;
    line-height:1.65;
}

.diagnostic-item__content > *:first-child {
    margin-top:0;
}

.diagnostic-item__content > *:last-child {
    margin-bottom:0;
}

.diagnostic-item__content h4 {
    margin:1.5rem 0 .65rem;
    color:var(--villa-green-dark);
    font-size:1.05rem;
    font-weight:600;
}

.diagnostic-item__content h5 {
    margin:1.15rem 0 .5rem;
    color:var(--villa-text);
    font-size:.95rem;
    font-weight:600;
}

.diagnostic-item__content p {
    margin-bottom:1rem;
}

.diagnostic-item__content ul,
.diagnostic-item__content ol {
    margin-bottom:1rem;
    padding-left:1.25rem;
}

.diagnostic-item__content li + li {
    margin-top:.35rem;
}


/* ==========================================================
   PRICE SIDE
   ========================================================== */

.diagnostic-item__side {
    position:sticky;
    top:1rem;
}

.diagnostic-item__price-card {
    padding:1.25rem;

    border:1px solid var(--villa-border);
    border-radius:var(--villa-radius);

    background:var(--villa-surface-green);
    box-shadow:var(--villa-shadow);
}

.diagnostic-item__price-label {
    display:block;

    margin-bottom:.25rem;

    color:var(--villa-muted);

    font-size:.82rem;
    line-height:1.4;
}

.diagnostic-item__price-value {
    display:block;

    color:var(--villa-green-dark);

    font-size:1.5rem;
    font-weight:600;
    line-height:1.2;
}

.diagnostic-item__price-card .btn {
    margin-top:1rem;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:991.98px) {

    .diagnostic-item__layout {
        grid-template-columns:1fr;
        gap:1.5rem;
    }

    .diagnostic-item__side {
        position:static;
    }

}

@media (max-width:575.98px) {

    .diagnostic-item__price-card {
        padding:1rem;
    }

    .diagnostic-item__price-value {
        font-size:1.35rem;
    }

}










/* ==========================================================
   VILLA MODAL
   ========================================================== */

.modal-villa {
    overflow: hidden;

    border: 0;

    border-radius:
        var(--villa-radius-lg);

    box-shadow:
        0 18px 60px rgba(0, 0, 0, .14);
}

.modal-villa .modal-header {
    padding:
        1.25rem
        1.4rem;

    border-bottom:
        1px solid
        var(--villa-border);
}

.modal-villa .modal-body {
    padding:
        1.4rem
        1.5rem
        1.6rem;

    line-height: 1.65;
}

.modal-villa .modal-footer {
    padding:
        1rem
        1.4rem;

    border-top:
        1px solid
        var(--villa-border);
}


/* ==========================================================
   FACTS
   ========================================================== */

.villa-fact {
    height: 100%;

    padding: 1rem;

    border:
        1px solid
        var(--villa-border);

    border-radius:
        var(--villa-radius);

    background:
        var(--villa-surface-green);
}

.villa-fact__title {
    margin-bottom: .2rem;

    color:
        var(--villa-green-dark);

    font-size: .95rem;
    font-weight: 600;
}

.villa-fact__text {
    margin-bottom: 0;

    color:
        var(--villa-muted);

    font-size: .85rem;
    line-height: 1.45;
}









/* ==========================================================
   ACTION PANEL
   ========================================================== */

.villa-action-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    padding: 1.5rem 1.75rem;

    border: 1px solid var(--villa-border);
    border-radius: var(--villa-radius-lg);

    background: var(--villa-surface);
    box-shadow: var(--villa-shadow);
}

.villa-action-panel__content {
    max-width: 760px;
}

.villa-action-panel__title {
    margin-bottom: .4rem;
    color: var(--villa-green-dark);
}

.villa-action-panel__text {
    margin-bottom: 0;
    color: var(--villa-muted);
    line-height: 1.6;
}

.villa-action-panel__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .75rem;
}

.btn-villa-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;

    min-height: 48px;
    padding: .7rem 1rem;

    border: 1px solid var(--villa-border);
    border-radius: 0;

    background: rgba(255, 255, 255, .72);
    color: var(--villa-green-dark);

    font-weight: 500;
    text-decoration: none;

    box-shadow:
        1px 2px 8px rgba(var(--bs-villa-dg-rgb), .10);

    transition:
        background-color var(--villa-transition),
        border-color var(--villa-transition),
        box-shadow var(--villa-transition),
        transform var(--villa-transition);
}

.btn-villa-download i {
    color: var(--bs-danger);
    font-size: 1.05rem;
}

.btn-villa-download:hover {
    transform: translateY(-1px);

    border-color:
        rgba(var(--bs-villa-gr-rgb), .24);

    background:
        var(--villa-surface-green);

    color:
        var(--villa-green-dark);

    box-shadow:
        2px 4px 12px
        rgba(var(--bs-villa-dg-rgb), .16);

    text-decoration: none;
}

.btn-villa-download:active {
    transform: translateY(0);
}




/* ==========================================================
   UNI BUTTON
   ========================================================== */

.uni-button {
    display:inline-flex;
    align-items:center;
    gap:1rem;

    width:100%;
    min-height:64px;
    padding:1rem;

    line-height:1.3;
}

.uni-button__icon {
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    font-size:1.35rem;
}

.uni-button__content {
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    min-width:0;
}

.uni-button__label {
    margin-bottom:.3rem;

    color:rgba(255,255,255,.62);

    font-size:.78rem;
    line-height:1.1;

    text-transform:uppercase;
    letter-spacing:.04em;
}

.uni-button__text {
    font-size:1.25rem;
    line-height:1.2;
}





.uni-button__label {
    margin-bottom:5px;
    font-size:.8rem;
    letter-spacing:.5px;
}

.uni-button__icon {
    flex:0 0 auto;
}

.uni-button__content {
    min-width:0;
}

.uni-button--compact {
    width:auto;
    min-height:46px;
    padding:.65rem .9rem;
    gap:.65rem;
}

.uni-button--compact .uni-button__icon {
    font-size:1rem;
}

.uni-button--compact .uni-button__label {
    margin-bottom:.15rem;
    font-size:.67rem;
}

.uni-button--compact .uni-button__text {
    font-size:.95rem;
}

@media (max-width:575.98px) {
    .uni-button--compact {
        width:100%;
    }
}



.uni-button--outline {
    --bs-btn-color:var(--villa-green-dark);
    --bs-btn-bg:rgba(255,255,255,.76);
    --bs-btn-border-color:var(--villa-border);

    --bs-btn-hover-color:var(--villa-green-dark);
    --bs-btn-hover-bg:var(--villa-surface-green);
    --bs-btn-hover-border-color:rgba(var(--bs-villa-gr-rgb),.25);

    color:var(--villa-green-dark);
    background:rgba(255,255,255,.76);
    border-color:var(--villa-border);

    box-shadow:1px 2px 8px rgba(var(--bs-villa-dg-rgb),.10);
}

.uni-button--outline .uni-button__label {
    color:var(--villa-muted);
}

.uni-button--contact {
    width:auto;
    min-height:0;
    padding:.35rem .45rem;

    gap:.55rem;

    border:0;

    background:transparent;
    box-shadow:none;

    color:var(--villa-green-dark);

    text-align:left;
}

.uni-button--contact:hover {
    background:var(--villa-surface-green);
    box-shadow:none;

    color:var(--villa-green-dark);
}

.uni-button--contact .uni-button__icon {
    width:26px;

    color:var(--villa-green);

    font-size:.9rem;
}

.uni-button--contact .uni-button__label {
    margin-bottom:.1rem;

    color:var(--villa-muted);

    font-size:.62rem;
}

.uni-button--contact .uni-button__text {
    color:inherit;

    font-size:.92rem;
    line-height:1.25;

    overflow-wrap:anywhere;
}










/* ==========================================================
   16. GENERIC IMAGE
   ========================================================== */

.villa-image {
    display: block;

    width: 100%;
    height: auto;

    border-radius:
        var(--villa-radius);

    box-shadow:
        var(--villa-shadow);
}


/* ==========================================================
   17. RESPONSIVE
   ========================================================== */

@media (max-width: 991.98px) {

    .villa-hero {
        padding:
            1rem
            1.5rem
            3rem;
    }


    .villa-link-panel {
        grid-template-columns:
            minmax(0, 1fr)
            220px;
    }

}


@media (max-width: 767.98px) {

    .villa-callout {
        flex-direction: column;

        align-items: flex-start;

        gap: 1.25rem;
    }


    .villa-callout .btn {
        width: 100%;
    }


    .villa-disclosure__summary {
        grid-template-columns: 1fr;

        gap: .9rem;

        padding: 1.1rem;
    }


    .villa-disclosure__action {
        width: max-content;
    }

}


@media (max-width: 575.98px) {

    .villa-hero {
        padding:
            .5rem
            1rem
            2.5rem;
    }


    .villa-hero__media img {
        height: 275px;

        border-radius:
            var(--villa-radius);
    }


    .villa-panel {
        padding:
            1.35rem
            1.15rem;

        border-radius:
            var(--villa-radius);
    }


    /* Feature */

    .villa-feature {
        display: block;

        padding: 1.3rem;
    }


    .villa-feature__icon {
        width: 52px;
        height: 52px;

        margin:
            0 auto
            .85rem;
    }


    .villa-feature__title {
        font-size: 1.15rem;

        text-align: center;
    }


    .villa-feature__more {
        display: flex;

        justify-content: center;

        width: 100%;

        text-align: center;
    }


    /* Wide link */

    .villa-link-panel {
        display: flex;

        flex-direction: column;

        min-height: 0;

        border-radius:
            var(--villa-radius);
    }


    .villa-link-panel__media {
        order: 1;

        height: 190px;
    }


    .villa-link-panel__body {
        order: 2;

        padding:
            1.35rem
            1.25rem;
    }


    /* Product */

    .villa-product-card {
        border-radius:
            var(--villa-radius);
    }


    .villa-product-card__image {
        overflow: hidden;
        
        border-radius:
            var(--villa-radius)
            var(--villa-radius)
            0
            0;
        
        background: #f7f8f6;
    
        isolation: isolate;
    }


    .villa-product-card__cta {
        right: -.35rem;
        bottom: .7rem;
    }


    /* Accordion */

    .accordion-villa
    .accordion-button {
        min-height: 62px;

        padding:
            .9rem
            1rem;

        font-size: 1rem;
    }


    .accordion-villa
    .accordion-body {
        padding:
            .6rem
            1.1rem
            1.25rem;
    }

}


@media (max-width: 767.98px) {
    .villa-action-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    .villa-action-panel__actions {
        justify-content: stretch;
    }

    .villa-action-panel__actions .btn {
        flex: 1 1 100%;
        width: 100%;
    }
}


/* ==========================================================
   18. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    /*
     * Не используем плавный scroll, если пользователь
     * запросил уменьшение движения.
     */

    html {
        scroll-behavior: auto !important;
    }


    .btn-villa,
    .btn-outline-villa {
        transition:
            background-color 0s,
            border-color 0s,
            color 0s,
            box-shadow 0s !important;

        transform: none !important;
    }

    .btn-villa:hover,
    .btn-villa:active,
    .btn-outline-villa:hover,
    .btn-outline-villa:active {
        transform: none !important;
    }

    .villa-link-panel:hover {
        transform: none !important;
    }


    .btn-villa-download {
        transition: none !important;
        transform: none !important;
    }

    .btn-villa-download:hover,
    .btn-villa-download:active {
        transform: none !important;
    }

    /*
     * Карточки и интерактивные поверхности.
     */

    .btn-villa,
    .card-villa-hover,
    .villa-feature,
    .villa-link-panel,
    .villa-product-card,
    .villa-disclosure,
    .villa-disclosure__chevron,
    .accordion-villa .accordion-button::after {
        transition: none !important;
    }


    /*
     * Убираем вертикальные перемещения карточек.
     */

    .card-villa-hover:hover,
    a.villa-feature:hover,
    .villa-link-panel:hover {
        transform: none !important;
    }


    /*
     * Zoom изображений полностью отключаем.
     *
     * Но оставляем translateZ(0) scale(1.001),
     * а не transform:none — так clipping и сглаживание
     * изображения остаются такими же, как в обычном режиме.
     */

    .villa-img-zoom > img,
    .villa-img-zoom picture > img {
        transition: none !important;

        transform:
            translateZ(0)
            scale(1.001) !important;
    }


    .villa-img-zoom:hover > img,
    .villa-img-zoom:hover picture > img,

    .villa-product-card:hover
    .villa-img-zoom > img,

    .villa-product-card:hover
    .villa-img-zoom picture > img,

    .villa-link-panel:hover
    .villa-img-zoom > img,

    .villa-link-panel:hover
    .villa-img-zoom picture > img {
        transform:
            translateZ(0)
            scale(1.001) !important;
    }


    /*
     * Bootstrap accordion.
     *
     * При reduced motion раскрытие остаётся рабочим,
     * просто происходит без анимации.
     */

    .accordion-villa .accordion-collapse {
        transition: none !important;
    }

}


#mini-program-feedback {
    scroll-margin-top:6rem;
}