@charset "UTF-8";
.complects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: flex-start; }

.complect { display: flex; gap: 1.5rem; flex-direction: column; }

.complect__header { cursor: pointer; position: relative; font-weight: 200; font-size: 0.9rem; color: #3b3b3b; background: #d9b97e; padding: 2rem 1rem; border-radius: 0.5rem; }
.complect__header.active .complect__header-icon { color: #fff; border-color: #fff; }
.complect__header.active .complect__header-icon::before { content: 'скрыть'; }

.complect__body { display: none; border: 1px solid #d9b97e; border-radius: 0.5rem; background: #f7faff; padding: 1rem 0.8rem; font-weight: 200; font-size: 0.6rem; color: #3b3b3b; }
.complect__body strong { font-weight: 700; font-size: 0.9rem; }
.complect__body p { margin-bottom: 1em; }
.complect__body p:empty { display: none; }
.complect__body *:last-child { margin-bottom: 0; }

.complect__option { margin-bottom: 10px; }

.complect__option-header { display: flex; cursor: pointer; align-items: center; gap: 10px; font-weight: 700; font-size: 0.9rem; color: #3b3b3b; }
@media screen and (min-width: 992px) { .complect__option-header { padding-right: 11rem; } }
.complect__option-header::before { content: ''; flex: 0 0 0.55rem; height: 0.55rem; border-radius: 100%; background: #d9b97e; }

.complect__header-icon { position: absolute; display: flex; align-items: center; justify-content: center; font-family: var(--font-family); font-weight: 200; font-size: 0.9rem; text-align: center; color: #3b3b3b; border: 1px solid #3b3b3b; border-radius: 2rem; width: 10rem; height: 3.15rem; right: 1rem; top: 50%; margin-top: -1.55rem; }
.complect__header-icon::before { content: 'подробнее'; }

.complect__option-body { display: none; margin-left: 10px; padding-left: 0.55rem; font-weight: 200; font-size: 0.6rem; padding-top: 3px; }

.complect__price { font-weight: 700; margin-top: 0.75rem; }

.tile__plan-data { line-height: 2.38889; }
.tile__plan-data *:last-child { margin-bottom: 0; }

.single-plan__image { margin-bottom: 2rem; }

.page-slider img { aspect-ratio: 9/5; object-fit: cover; }
.page-slider .slick-dots { margin-top: 30px; list-style: none; display: flex; justify-content: center; align-items: center; margin-bottom: 0; font-size: 0; gap: 5px; }
.page-slider .slick-dots li button { width: 7px; display: block; font-size: 0; height: 7px; border-radius: 100%; background: #e0e0e0; transition: all 0.3s; }
.page-slider .slick-dots li.slick-active button { width: 14px; height: 14px; border: 2px solid #e0e0e0; background: #d9b97e; }

.breadcrumbs { margin-top: -2rem; margin-bottom: 1.5rem; }
.breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; font-family: var(--font-family); font-weight: 200; font-size: 0.8rem; line-height: 1.3; color: #3b3b3b; }
.breadcrumbs__item { display: flex; align-items: center; white-space: nowrap; }
.breadcrumbs__item + .breadcrumbs__item::before { content: ''; flex: 0 0 0.3rem; height: 0.3rem; margin: 0 0.6rem; border-radius: 100%; background: #d9b97e; }
.breadcrumbs__link { color: #3b3b3b; }
.breadcrumbs__link:hover { color: #d9b97e; }
.breadcrumbs__current { color: rgba(59, 59, 59, 0.5); }

.error-404 { padding: 3rem 0 5rem; text-align: center; }
.error-404__num { font-family: var(--second-family); font-weight: 400; font-size: 9rem; line-height: 1; letter-spacing: 0.04em; color: #d9b97e; margin-bottom: 1rem; }
.error-404__title { display: block; margin-bottom: 1rem; }
.error-404__desc { max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; }
.error-404__btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 767px) { .breadcrumbs { margin-top: -10px; margin-bottom: 15px; }
  .breadcrumbs__list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .breadcrumbs__list::-webkit-scrollbar { display: none; }
  .breadcrumbs__item { white-space: nowrap; flex-shrink: 0; }
  .breadcrumbs__item:last-child { padding-right: 1rem; }
  .breadcrumbs__list { font-size: 12px; }
  .error-404 { padding: 20px 0 40px; }
  .error-404__num { font-size: 100px; }
  .error-404__btns { gap: 15px; } }

@media (max-width: 992px) { .page-slider img { aspect-ratio: 9/5; }
  .complects { gap: 10px; }
  .complect__header { padding-top: 30px; padding-bottom: 30px; padding-right: 50px; }
  .complect__header.active .complect__header-icon { transform: rotate(180deg); }
  .complect__header-icon { font-size: 0; width: 27px; height: 27px; border: 0; background: url(../images/arrow-toggle.svg) no-repeat; background-size: contain; margin-top: -13.5px; }
  .complect__price { margin-top: 12px; } }
@media (max-width: 767px) { .page-slider img { aspect-ratio: 9/5; }
  .case-grid { display: flex; flex-direction: column; gap: 30px; }
  .case-grid__data { order: -3; }
  .complect__header { padding-top: 20px; padding-bottom: 20px; }
  .case-slider-wrap { width: 100%; order: -2; }
  .case-grid__plan { order: 0; }
  .complects { gap: 20px; order: 1; }
  .case-grid__btns { order: 2; }
  .case-grid__data { padding: 20px; }
  .complects { gap: 20px; grid-template-columns: 1fr; }
  .complect__body { padding-bottom: 10px; }
  .complect__price { margin-top: 10px; }
  .case-grid__btns { gap: 20px; }
  .single-plan__image { margin-bottom: 1rem; } }

.ardel-calc-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .ardel-calc-grid { grid-template-columns: 1fr; } }

.mortgage__more { margin-top: 2.5rem; text-align: center; }
@media (max-width: 767px) { .mortgage__more { margin-top: 25px; } }

.ardel-mcases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.2rem; }
.ardel-mcase { display: block; text-decoration: none; color: inherit; }
.ardel-mcase__img { width: 100%; height: auto; aspect-ratio: 9/5; object-fit: cover; border-radius: 10px; display: block; }
.ardel-mcase__title { display: block; margin-top: 0.5rem; font-size: 0.85rem; line-height: 1.35; color: #3b3b3b; }
.ardel-mcase:hover .ardel-mcase__title { color: #d9b97e; }
@media (max-width: 767px) { .ardel-mcases { grid-template-columns: repeat(2, 1fr); gap: 15px; } .ardel-mcase__title { font-size: 13px; } }
@media (max-width: 420px) { .ardel-mcases { grid-template-columns: 1fr; } }

/* ---- Страница ипотеки: программы, калькулятор, FAQ ---- */
/* Размеры шрифтов наследуются от контента — клиент просил сохранить пропорции */

.ardel-progs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.2rem 0 0; align-items: start; }
.ardel-prog { border: 1px solid #e6e2d8; border-radius: 0.6rem; background: #fbfaf7; overflow: hidden; }
.ardel-prog__head { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; background: #d9b97e; }
.ardel-prog__head::-webkit-details-marker { display: none; }
.ardel-prog__name { font-weight: 600; }
.ardel-prog__more { flex: 0 0 auto; border: 1px solid #3b3b3b; border-radius: 2rem; padding: 0.4em 1.1em; font-size: 0.75rem; line-height: 1.2; white-space: nowrap; }
.ardel-prog[open] .ardel-prog__more::before { content: 'свернуть'; }
.ardel-prog:not([open]) .ardel-prog__more::before { content: 'подробнее'; }
.ardel-prog__body { padding: 1.1rem 1.2rem 1.3rem; font-size: 0.8em; line-height: 1.5; }
.ardel-prog__body ul { margin: 0 0 0.9em 1.1em; }
.ardel-prog__body li { margin-bottom: 0.35em; }
.ardel-prog__lead { font-weight: 600; margin-bottom: 0.4em; }
.ardel-prog__body p:last-child { margin-bottom: 0; }

.ardel-calc { background: #f6f5f2; border-radius: 0.8rem; padding: 1.6rem; margin-top: 1.2rem; }
.ardel-calc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2.2rem; }
.ardel-calc__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ardel-calc__label { font-size: 0.8rem; color: #6b6b6b; }
.ardel-calc__val { font-size: 1rem; font-weight: 600; white-space: nowrap; }
.ardel-calc__range { width: 100%; margin: 0.5rem 0 0.2rem; accent-color: #d9b97e; }
.ardel-calc__scale { display: flex; justify-content: space-between; font-size: 0.65rem; color: #9a9a9a; }
.ardel-calc__footer { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; justify-content: space-between; align-items: flex-end; border-top: 1px solid #e2ded4; margin-top: 1.5rem; padding-top: 1.2rem; }
.ardel-calc__result-label, .ardel-calc__contact-label { display: block; font-size: 0.75rem; color: #6b6b6b; margin-bottom: 0.25rem; }
.ardel-calc__result-sum { font-size: 1.7rem; font-weight: 700; color: #b08d4f; }
.ardel-calc__tel { font-size: 1.3rem; font-weight: 600; color: #b08d4f; text-decoration: none; }
.ardel-calc__tel:hover { color: #d9b97e; }
.ardel-calc__note { font-size: 0.65rem; color: #9a9a9a; line-height: 1.4; margin: 1.1rem 0 0; }

.ardel-faq-list { margin-top: 1.2rem; }
.ardel-faq-item { border-bottom: 1px solid #e2ded4; }
.ardel-faq-q { list-style: none; cursor: pointer; position: relative; padding: 0.9em 2em 0.9em 0; font-weight: 600; font-size: 0.9em; }
.ardel-faq-q::-webkit-details-marker { display: none; }
.ardel-faq-q::after { content: '+'; position: absolute; right: 0.2em; top: 50%; transform: translateY(-50%); font-size: 1.3em; font-weight: 400; color: #b08d4f; }
.ardel-faq-item[open] .ardel-faq-q::after { content: '–'; }
.ardel-faq-a { padding: 0 0 1em; font-size: 0.85em; line-height: 1.55; }

@media (max-width: 767px) {
  .ardel-progs { grid-template-columns: 1fr; gap: 15px; }
  .ardel-calc { padding: 18px; }
  .ardel-calc__grid { grid-template-columns: 1fr; gap: 18px; }
  .ardel-calc__footer { gap: 18px; }
  .ardel-calc__result-sum { font-size: 26px; }
  .ardel-calc__tel { font-size: 20px; }
}

/* --- ardel-prog specs (29.07) --- */
.ardel-prog__specs{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;margin:0}
.ardel-prog__specs dt{font-weight:600;white-space:nowrap;opacity:.65;font-size:.9em}
.ardel-prog__specs dd{margin:0}
.ardel-prog__link{display:inline-block;margin-top:1rem;font-size:.9em;border-bottom:1px solid currentColor;text-decoration:none}
@media(max-width:600px){.ardel-prog__specs{grid-template-columns:1fr;gap:.15rem}.ardel-prog__specs dt{margin-top:.6rem}.ardel-prog__specs dt:first-child{margin-top:0}}

/* --- ритм заголовков в статьях (29.07) --- */
/* Было: у h2 margin-top 0, поэтому отступ сверху зависел от того,
   что идёт выше (0, 15, 18 или 24px), а снизу всегда 15px —
   заголовки висели посередине, а после блоков слипались вплотную.
   Стало: 48px сверху (тот же шаг, что между новыми блоками), 15px снизу. */
.single-post .content.page-content > h2{margin-top:48px}
.single-post .content.page-content > h2:first-child{margin-top:0}
@media(max-width:600px){.single-post .content.page-content > h2{margin-top:32px}}

/* --- единый шаг блоков на мобайле (29.07) --- */
/* На мобайле авторские заголовки идут через 32px, а новые блоки шли через 48px — шаг рвался. */

/* --- шаг блоков страницы ипотеки (29.07) --- */
/* Раньше эти отступы были инлайном в post_content и не поддавались медиазапросам. */
.ardel-progs-wrap,.ardel-calc-wrap,.ardel-mortgage-built,.ardel-faq,.ardel-mortgage-cta{margin:48px 0 0}

/* --- мобайльный шаг, должен быть ПОСЛЕДНИМ (29.07) --- */
@media(max-width:600px){.ardel-progs-wrap,.ardel-calc-wrap,.ardel-mortgage-built,.ardel-faq,.ardel-mortgage-cta{margin-top:32px}.single-post .content.page-content > h2{margin-top:32px}}

/* --- юридическая приписка (29.07) --- */
.ardel-legal{margin:48px 0 0;padding:1rem 1.25rem;border-left:3px solid rgba(0,0,0,.12);font-size:.8rem;line-height:1.5;opacity:.7}
.ardel-legal p{margin:0 0 .5rem}
.ardel-legal p:last-child{margin-bottom:0}

/* --- редактируемые поля калькулятора (29.07) --- */
/* Поле должно выглядеть как прежняя жирная цифра, пока в нём не печатают. */
.ardel-calc__valwrap{display:inline-flex;align-items:baseline;gap:.35em;justify-content:flex-end}
input.ardel-calc__val{width:auto;min-width:2ch;max-width:11ch;field-sizing:content;border:0;background:transparent;padding:.1em .2em;margin:0;border-radius:4px;font:inherit;font-weight:700;color:inherit;text-align:right;box-shadow:inset 0 -1px 0 rgba(0,0,0,.14);transition:box-shadow .15s,background-color .15s}
input.ardel-calc__val:hover{background:rgba(0,0,0,.03)}
input.ardel-calc__val:focus{outline:0;background:rgba(0,0,0,.05);box-shadow:inset 0 -2px 0 currentColor}
.ardel-calc__suffix{font-weight:700;white-space:nowrap}
@supports not (field-sizing: content){input.ardel-calc__val{width:9ch}}

/* --- компактная форма в статьях (29.07) --- */
/* Штатная форма темы рассчитана на широкий блок: поля 99px и на всю ширину.
   В тексте статьи это выглядит огромно (замечание клиента 29.07). Сжимаем только здесь. */
.single-post .wpcf7{max-width:560px;margin-left:auto;margin-right:auto}
.single-post .wpcf7 input[type=text],.single-post .wpcf7 input[type=tel]{height:54px;padding:0 24px;border-radius:27px;font-size:1rem}
.single-post .wpcf7 .SumoSelect,.single-post .wpcf7 .SumoSelect>.CaptionCont,.single-post .wpcf7 select{height:54px;min-height:54px}
.single-post .wpcf7 .SumoSelect>.CaptionCont{display:flex;align-items:center;padding:0 24px;border-radius:27px;margin:0}
.single-post .wpcf7 .SumoSelect>.CaptionCont>span{font-size:1rem}
.single-post .wpcf7 .wpcf7-form-control-wrap{display:block;margin-bottom:12px}
.single-post .wpcf7 input[type=submit]{height:54px;font-size:1rem}

/* --- размер h2 как у стандартных заголовков сайта (29.07) --- */
/* В теме стоит @media(min-width:767px){.content h2{font-size:3rem}} — это 54px,
   тогда как все заголовки сайта (.section__title) — 2.5rem, то есть 45px.
   Подзаголовки получались крупнее главного — замечание клиента 29.07.
   Скоуп только .single-post, чтобы не трогать остальные шаблоны. */
@media(min-width:767px){.single-post .content h2{font-size:2.5rem;line-height:1.25}}

/* --- мессенджеры (29.07) --- */
/* Значки — те же .socials__link, что в подвале; добавляем только два новых глифа. */
.socials__link_max{background-image:url(../images/ico__max.svg)}
.socials__link_wa{background-image:url(../images/ico__whatsapp.svg)}

/* Блок рядом с калькулятором */

/* Плавающая кнопка */
/* pointer-events сняты с контейнера: в свёрнутом виде он всё равно занимает
   высоту списка и иначе перехватывает клики по контенту под собой. */
.ardel-fab{position:fixed;right:20px;bottom:20px;z-index:9990;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.ardel-fab__list{flex-direction:column;gap:12px;display:flex}
.ardel-fab__toggle{pointer-events:auto}
.ardel-fab__item{opacity:0;transform:translateY(12px) scale(.8);pointer-events:none;transition:opacity .18s ease,transform .18s ease;width:48px;height:48px}
.ardel-fab[data-open=true] .ardel-fab__item{opacity:1;transform:none;pointer-events:auto}
.ardel-fab[data-open=true] .ardel-fab__item:nth-child(2){transition-delay:.04s}
.ardel-fab[data-open=true] .ardel-fab__item:nth-child(3){transition-delay:.08s}
.ardel-fab__toggle{width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;background:#d9b97e url(../images/ico__chat.svg) 50% 50%/48% auto no-repeat;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:background-color .15s,transform .15s}
.ardel-fab__toggle:hover{background-color:#3B3B3B}
.ardel-fab[data-open=true] .ardel-fab__toggle{background-color:#3B3B3B}
/* Поднимаемся, когда снизу висит кнопка установки PWA (она fixed, тот же угол). */
.ardel-fab.is-shifted{bottom:84px}
.ardel-fab.is-hidden{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
@media(max-width:600px){.ardel-fab{right:14px;bottom:14px}.ardel-fab__toggle{width:50px;height:50px}.ardel-fab__item{width:44px;height:44px}}

/* --- мелкие значки у телефона (29.07) --- */
.ardel-calc__contact-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}
.ardel-msg{display:inline-flex;align-items:center;gap:.5rem}
.ardel-msg__ico{width:30px;height:30px;background-size:52% auto}
@media(max-width:600px){.ardel-calc__contact-row{justify-content:flex-start}}

/* --- двухчастный H1: крупная строка + подзаголовок (30.07) --- */
/* Сверено с макетом в Figma (файл ua1nWMpPyISDKF2HTSAiMa, узлы 1397:9704 «Этапы
   строительства» и 1107:5833 «Медиа» — единый паттерн двухчастного заголовка):
   заголовок Tenor Sans 50/58, ls 2, #3B3B3B;
   подзаголовок Geologica 200, 25/31, без letter-spacing и без прозрачности,
   тот же цвет. Отношение кеглей ровно 0.5, а не 0.52. */
.section__title-sub{display:block;font-family:var(--font-family);font-weight:200;
font-size:.5em;line-height:1.24;letter-spacing:normal;text-transform:none;opacity:1;margin-top:.1em}
@media(max-width:767px){.section__title-sub{font-size:.62em}}

/* --- мобайльный шаг, должен идти ПОСЛЕДНИМ (29.07) --- */
@media(max-width:600px){.ardel-progs-wrap,.ardel-calc-wrap,.ardel-mortgage-built,.ardel-faq,.ardel-mortgage-cta{margin-top:32px}.single-post .content.page-content > h2{margin-top:32px}}

/* --- мобильный кегль двухчастного H1 (30.07) --- */
/* Клиент: на мобильном 2–3 строки допустимы, 4 — перебор (30.07.2026).
   Штатные 28px давали 3 строки основной части + 1 подзаголовка = 4.
   24px — максимум, при котором укладываемся в 3 строки и на 375px, и на 360px (замерено).
   Только для заголовков С подзаголовком — остальные не трогаем. */
@media(max-width:767px){.single-post h1.section__title:has(.section__title-sub){font-size:24px}}
@supports not (selector(:has(*))){@media(max-width:767px){.single-post h1.section__title{font-size:24px}}}