/* ==========================================================================
   Авторская вёрстка отдельных страниц.

   У страниц «О компании», «Контакты», «Навесы и козырьки» и статьи про
   кондиционер вёрстка была написана вручную и жила в инлайновом <style>
   внутри post_content. Классы там свои (about-*, c-*, ks-*), под общий
   набор nk-* они не подпадали — поэтому при переходе на тему эти страницы
   остались без правил и «поехали».

   Правила извлечены из исходного контента, цвета переведены на токены
   дизайн-системы, тёплые тени — на нейтральные. Подключается только на тех
   страницах, где нужно (см. inc/assets.php).

   Долгосрочно эти четыре страницы стоит пересобрать на компонентах mm-*,
   тогда файл уйдёт целиком.
   ========================================================================== */
/* ---- kondiczioner-na-zasteklennom-balkone ---- */
.ks-art{--ks-y:var(--mm-brand);--ks-dark:var(--mm-brand-deep);--ks-ink:var(--mm-ink);--ks-mut:var(--mm-ink-muted);--ks-head:var(--mm-ink); --ks-line:var(--mm-line-soft);--ks-card:0 5px 25px rgba(15,23,42,.04); color:var(--ks-ink);max-width:900px;margin:0 auto}
.ks-art *{box-sizing:border-box}
/* lead + meta */ .ks-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:600; letter-spacing:.3px;color:var(--ks-mut);margin:0 0 22px;text-transform:uppercase}
.ks-meta .ks-dot{width:5px;height:5px;border-radius:50%;background:var(--ks-y)}
.ks-lead{font-size:19px;line-height:29px;font-weight:500;color:var(--ks-ink);max-width:860px;margin:0 0 30px}
.ks-lead strong{font-weight:700}
/* answer block */ .ks-answer{position:relative;background:var(--mm-brand-tint);border-left:3px solid var(--ks-y); padding:20px 24px 20px 26px;border-radius:8px;font-size:16px;line-height:25px;color:var(--ks-ink); max-width:860px;margin:0 0 44px}
.ks-answer .ks-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1px; text-transform:uppercase;color:var(--mm-brand-strong);margin:0 0 8px}
.ks-answer p{margin:0}
/* layout grid: content + sticky TOC */ .ks-grid{display:block}
.ks-main{min-width:0}
/* table of contents card */ .ks-toc{background:#fff;border-radius:14px;padding:24px 28px;margin:0 0 8px; box-shadow:var(--ks-card);border:1px solid var(--mm-line)}
.ks-toc .ks-toc-h{display:block;font-size:12px;font-weight:800;text-transform:uppercase; letter-spacing:1px;color:var(--ks-mut);margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--ks-line)}
.ks-toc ol{list-style:none;margin:0;padding:0;counter-reset:ks-toc;columns:2;column-gap:36px}
.ks-toc li{break-inside:avoid}
.ks-toc li{counter-increment:ks-toc;margin:0}
.ks-toc a{display:flex;gap:11px;align-items:baseline;text-decoration:none;color:var(--mm-ink-soft); font-size:14px;line-height:19px;font-weight:500;padding:7px 8px;border-radius:8px; transition:background .15s ease,color .15s ease}
.ks-toc a::before{content:counter(ks-toc,decimal-leading-zero);font-size:11px;font-weight:700; color:var(--mm-ink-muted);flex:0 0 auto;transition:color .15s ease;font-variant-numeric:tabular-nums}
.ks-toc a:hover{background:var(--mm-brand-tint);color:var(--ks-head)}
.ks-toc a:hover::before{color:var(--mm-brand)}
/* headings */ .ks-kicker{display:block;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase; color:var(--mm-brand);margin:0 0 6px}
.ks-h2{font-size:28px;line-height:35px;font-weight:800;color:var(--ks-head);margin:0 0 14px; letter-spacing:-.3px;scroll-margin-top:24px}
.ks-sec{margin:0 0 48px;padding-top:6px}
.ks-sec + .ks-sec{border-top:1px solid var(--ks-line);padding-top:46px}
.ks-h3{font-size:19px;line-height:26px;font-weight:700;color:var(--ks-head);margin:28px 0 10px}
/* body text */ .ks-art p{font-size:16px;line-height:26px;color:var(--ks-ink);margin:0 0 16px;max-width:none}
.ks-art .ks-main ul{margin:0 0 18px;padding:0;max-width:none;list-style:none}
.ks-art .ks-main ul li{position:relative;font-size:16px;line-height:25px; color:var(--ks-ink);padding:6px 0 6px 28px}
.ks-art .ks-main ul li::before{content:"";position:absolute;left:4px;top:13px; width:7px;height:7px;border-radius:2px;background:var(--ks-y);transform:rotate(45deg)}
.ks-art .ks-toc ol li{padding:0}
.ks-art strong{font-weight:700}
/* numbers band */ .ks-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 46px}
.ks-numbers > div{background:#fff;border-radius:14px;padding:26px 20px;text-align:center; box-shadow:var(--ks-card);border:1px solid var(--mm-line)}
.ks-numbers .num{font-size:34px;line-height:1;font-weight:800;color:var(--ks-head); display:inline-block;border-bottom:4px solid var(--ks-y);padding-bottom:7px;margin-bottom:12px; letter-spacing:-.5px}
.ks-numbers .label{display:block;font-size:13px;line-height:18px;font-weight:600;color:var(--ks-mut)}
/* dark intro hero */ .ks-hero{background:var(--ks-dark);color:#fff;border-radius:22px;padding:44px 48px;margin:0 0 48px; position:relative;overflow:hidden}
.ks-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px; border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.16),transparent 68%);pointer-events:none}
.ks-hero .ks-kicker{color:var(--ks-y);position:relative}
.ks-hero h2{color:#fff;font-size:27px;line-height:35px;font-weight:800;margin:0 0 14px; max-width:640px;letter-spacing:-.3px;position:relative}
.ks-hero h2 span{color:var(--ks-y)}
.ks-hero p{color:var(--mm-line);font-size:16px;line-height:26px;margin:0;max-width:660px;position:relative}
/* key callouts */ .ks-key{position:relative;background:var(--mm-brand-tint);border-left:3px solid var(--ks-y); padding:16px 22px;border-radius:8px;font-size:15px;line-height:24px;color:var(--ks-ink); margin:0 0 20px;max-width:none}
.ks-key.ks-warn{background:#fff;box-shadow:var(--ks-card);border-left:4px solid var(--ks-y)}
.ks-key b,.ks-key strong{font-weight:700}
.ks-key .ks-inline-link{display:inline-block;margin-top:6px}
/* comparison table */ .ks-table-wrap{margin:0 0 24px;max-width:860px;overflow-x:auto}
.ks-table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden; box-shadow:var(--ks-card);font-size:15px}
.ks-table th,.ks-table td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--ks-line); vertical-align:top;line-height:22px}
.ks-table thead th{background:var(--mm-brand-deep);color:#fff;font-size:12px;font-weight:700; text-transform:uppercase;letter-spacing:.5px;border-bottom:0}
.ks-table thead th:first-child{color:var(--ks-y)}
.ks-table td:first-child{font-weight:700;color:var(--ks-head)}
.ks-table .ks-plus{color:var(--mm-success);font-weight:700}
.ks-table .ks-minus{color:var(--mm-warning);font-weight:700}
.ks-table tbody tr:last-child td{border-bottom:0}
.ks-table tbody tr:nth-child(even) td{background:var(--mm-brand-tint)}
/* FAQ */ .ks-faq{margin:6px 0 0;max-width:860px}
.ks-faq details{background:#fff;border-radius:12px;padding:0 24px;margin-bottom:10px; box-shadow:var(--ks-card);border:1px solid var(--mm-line);transition:border-color .15s ease}
.ks-faq details[open]{border-color:var(--ks-y)}
.ks-faq summary{font-size:16px;font-weight:700;color:var(--ks-head);cursor:pointer;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0}
.ks-faq summary::-webkit-details-marker{display:none}
.ks-faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--mm-brand);font-weight:400; flex:0 0 auto;transition:transform .2s ease}
.ks-faq details[open] summary::after{content:"−";color:var(--ks-head)}
.ks-faq details > div{padding:0 0 20px;font-size:15px;line-height:24px;color:var(--mm-ink-soft); border-top:1px solid var(--ks-line);padding-top:16px}
.ks-faq details > div a{color:var(--mm-brand-strong);text-decoration:none;font-weight:600}
.ks-faq details > div a:hover{text-decoration:underline}
/* inline service link */ .ks-inline-link{color:var(--mm-brand-strong);font-weight:600;text-decoration:none;border-bottom:2px solid var(--mm-brand)}
.ks-inline-link:hover{background:var(--mm-brand-tint)}
/* CTA */ .ks-cta{background:var(--ks-dark);border-radius:22px;padding:46px 48px;color:#fff; margin:8px 0 0;position:relative;overflow:hidden}
.ks-cta::after{content:"";position:absolute;left:-80px;bottom:-80px;width:260px;height:260px; border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.14),transparent 70%);pointer-events:none}
.ks-cta .ks-kicker{color:var(--ks-y);position:relative}
.ks-cta h2{color:#fff;font-size:27px;line-height:34px;font-weight:800;margin:0 0 12px; max-width:620px;letter-spacing:-.3px;position:relative}
.ks-cta h2 span{color:var(--ks-y)}
.ks-cta p{color:var(--mm-line);font-size:16px;line-height:25px;margin:0 0 26px;max-width:600px;position:relative}
.ks-cta-buttons{display:flex;flex-wrap:wrap;gap:12px;position:relative}
/* ===== adaptive ===== */ @media (max-width:1120px){ .ks-grid{grid-template-columns:1fr;gap:0} .ks-toc{position:static;margin:0 0 40px;order:-1} .ks-toc ol{columns:2;column-gap:28px} .ks-toc li{break-inside:avoid} .ks-numbers{grid-template-columns:repeat(2,1fr)} }
@media (max-width:800px){ .ks-lead{font-size:17px;line-height:26px} .ks-toc ol{columns:1} .ks-numbers{grid-template-columns:1fr 1fr;gap:12px} .ks-numbers .num{font-size:27px} .ks-h2{font-size:23px;line-height:29px} .ks-hero{padding:30px 24px}.ks-hero h2{font-size:22px;line-height:29px} .ks-cta{padding:32px 24px}.ks-cta h2{font-size:22px;line-height:29px} .ks-cta-buttons{flex-direction:column} .ks-cta-buttons a{width:100%;justify-content:center} /* table -> cards */ .ks-table,.ks-table thead,.ks-table tbody,.ks-table tr,.ks-table th,.ks-table td{display:block} .ks-table{box-shadow:none;background:transparent;border-radius:0} .ks-table thead{display:none} .ks-table tbody tr{background:#fff;border-radius:14px;padding:18px 20px;margin-bottom:14px; box-shadow:var(--ks-card);border:1px solid var(--mm-line)} .ks-table tbody tr:nth-child(even) td{background:transparent} .ks-table td{border-bottom:1px solid var(--ks-line);padding:10px 0} .ks-table td:last-child{border-bottom:0;padding-bottom:0} .ks-table td:first-child{font-size:17px;padding-top:0} .ks-table td:not(:first-child)::before{content:attr(data-label);display:block; font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ks-mut); margin-bottom:3px} }

/* ---- kontakty ---- */
/* ============================================================ НОВАЯ СТРУКТУРА СТРАНИЦЫ КОНТАКТОВ ============================================================ */ /* Общие настройки типографики для страницы */ .contact-page-wrapper { font-family: inherit; color: var(--mm-ink); padding-bottom: 40px; }
.contact-lead { font-size: 18px; line-height: 28px; font-weight: 500; color: var(--mm-ink-soft); max-width: 860px; margin-bottom: 40px; }
/* Базовая карточка */ .c-card { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); height: 100%; display: flex; flex-direction: column; }
.c-card h2 { font-size: 22px; font-weight: 700; margin: 0 0 20px 0; border-bottom: none; padding-bottom: 0; }
/* Подсказка (желтый блок) */ .c-hint { font-size: 14px; line-height: 20px; color: var(--mm-ink); font-weight: 500; margin-bottom: 20px; padding: 14px 18px; background: var(--mm-brand-tint); border-left: 4px solid var(--mm-brand); border-radius: 8px; }
/* Сетка 1: Быстрая связь (Телефоны + Мессенджеры) */ .c-grid-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
/* Элементы контактов (строки с иконками) */ .c-contact-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 16px; background: var(--mm-bg); border-radius: 12px; text-decoration: none; transition: background 0.2s, transform 0.2s; }
a.c-contact-row:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30,132,248,0.1); }
.c-contact-row:last-child { margin-bottom: 0; }
.c-contact-row svg, .c-contact-row img { flex: 0 0 32px; width: 32px; height: 32px; }
.c-contact-info b { display: block; font-size: 13px; color: var(--mm-ink-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.c-contact-info span { display: block; font-size: 18px; font-weight: 700; color: var(--mm-ink); overflow-wrap: anywhere; }
a.c-contact-row .c-contact-info span { color: var(--mm-brand); }
/* Блок мессенджеров */ .c-messengers-wrap { display: flex; gap: 12px; flex-wrap: wrap; }
.c-messenger-btn { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--mm-bg); border-radius: 12px; font-weight: 600; color: var(--mm-ink); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; flex: 1 1 calc(33.333% - 12px); min-width: 140px; justify-content: center; }
.c-messenger-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.c-messenger-btn img { width: 24px; height: 24px; }
/* Сетка 2: Адрес, График и Карта */ .c-grid-location { display: grid; grid-template-columns: 350px 1fr; gap: 24px; margin-bottom: 24px; }
.c-loc-info-item { margin-bottom: 24px; }
.c-loc-info-item:last-child { margin-bottom: 0; }
.c-loc-info-item b { display: block; font-size: 14px; color: var(--mm-ink-muted); text-transform: uppercase; margin-bottom: 8px; }
.c-loc-info-item p { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; color: var(--mm-ink); }
.c-map { width: 100%; height: 100%; min-height: 300px; border-radius: 12px; overflow: hidden; background: var(--mm-line-soft); }
.c-map iframe { width: 100%; height: 100%; display: block; border: none; }
/* Блок "Как добраться" - полноширинный */ .c-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.c-route-item { display: flex; flex-direction: column; gap: 16px; }
/* НОВОЕ: Контейнер для иконки и заголовка в один ряд */ .c-route-header { display: flex; align-items: center; gap: 16px; }
.c-route-icon { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--mm-bg); border-radius: 12px; }
.c-route-item h3 { font-size: 18px; font-weight: 700; margin: 0; line-height: 1.3; }
.c-route-item p { font-size: 15px; line-height: 24px; color: var(--mm-ink-soft); margin: 0 0 12px 0; }
.c-route-item p strong { color: var(--mm-ink); }
.c-route-item p:last-child { margin-bottom: 0; }
/* Фотографии офиса */ .c-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.c-gallery figure { margin: 0; border-radius: 12px; overflow: hidden; }
.c-gallery img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform 0.3s; }
.c-gallery figure:hover img { transform: scale(1.03); }
.c-gallery figcaption { background: var(--mm-bg); padding: 16px; font-size: 14px; font-weight: 600; text-align: center; }
/* Сетка 3: Соцсети и Реквизиты */ .c-grid-bottom { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin-bottom: 40px; margin-top: 24px; }
.c-legal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.c-legal-item b { display: block; font-size: 12px; color: var(--mm-ink-muted); text-transform: uppercase; margin-bottom: 4px; }
.c-legal-item span { display: block; font-size: 15px; font-weight: 600; color: var(--mm-ink); }
/* CTA Баннер */ .c-cta-band { background: var(--mm-brand-deep); border-radius: 20px; padding: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; box-shadow: 0 10px 30px rgba(41, 40, 40, 0.15); }
.c-cta-text h3 { color: #fff; font-size: 24px; line-height: 32px; font-weight: 700; margin: 0 0 8px 0; }
.c-cta-text h3 span { color: var(--mm-brand); }
.c-cta-text p { color: #ccc; font-size: 16px; margin: 0; }
/* Адаптив */ @media (max-width: 1024px) { .c-grid-top { grid-template-columns: 1fr; } .c-grid-location { grid-template-columns: 1fr; } .c-map { height: 350px; } .c-grid-bottom { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .c-routes { grid-template-columns: 1fr; gap: 24px; } .c-route-item { padding-bottom: 24px; border-bottom: 1px solid #EFEFEF; } .c-route-item:last-child { padding-bottom: 0; border-bottom: none; } .c-gallery { grid-template-columns: 1fr; } .c-gallery img { height: 200px; } .c-legal-grid { grid-template-columns: 1fr; } .c-cta-band { flex-direction: column; text-align: center; padding: 30px 20px; } .c-cta-band .button-lv2 { width: 100%; justify-content: center; } }

/* ---- navesy-i-kozyrki ---- */
/* Адаптив */ @media (max-width:1120px){ .nk-numbers{grid-template-columns:repeat(2,1fr)} .nk-process{grid-template-columns:repeat(3,1fr)} .nk-materials{grid-template-columns:1fr} }
@media (max-width:800px){ .nk-hero{padding:32px 28px} .nk-hero h2{font-size:24px;line-height:30px} .nk-numbers{grid-template-columns:1fr 1fr;gap:10px} .nk-numbers .num{font-size:36px} .nk-h2{font-size:22px;line-height:28px} .nk-types{grid-template-columns:1fr} .nk-process{grid-template-columns:1fr} /* Таблица «vs крыша» — превращается в стек */ .nk-vs{padding:20px 18px} .nk-vs table, .nk-vs thead, .nk-vs tbody, .nk-vs tr, .nk-vs th, .nk-vs td{display:block;padding:0} .nk-vs thead{display:none} .nk-vs tr{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--mm-line-soft)} .nk-vs tr:last-child{border-bottom:0} .nk-vs td:first-child{font-size:16px;margin-bottom:8px} .nk-vs td:nth-child(2)::before{content:'Крыша: ';font-weight:700;color:var(--mm-ink-muted);font-size:12px;text-transform:uppercase} .nk-vs td:nth-child(3)::before{content:'Навес/козырёк: ';font-weight:700;color:var(--mm-ink-muted);font-size:12px;text-transform:uppercase} .nk-vs td{padding:4px 0;font-size:14px;line-height:20px} /* Гарантия таблица — стек карточек */ .nk-warranty{display:block;background:transparent;box-shadow:none} .nk-warranty thead{display:none} .nk-warranty tbody{display:block} .nk-warranty tr{ display:block;background:#fff;border-radius:12px;padding:18px 22px; margin-bottom:12px;box-shadow:0 4px 12px rgba(15,23,42,.05); } .nk-warranty td{display:block;padding:0;border:0;font-size:14px;line-height:20px} .nk-warranty td:first-child{font-weight:700;font-size:16px;color:var(--mm-ink);margin-bottom:8px} .nk-warranty td.term{ display:inline-block;background:var(--mm-brand);color:var(--mm-ink);padding:4px 12px; border-radius:6px;font-size:14px;font-weight:700;margin-bottom:8px; } .nk-warranty td:last-child{color:var(--mm-ink-muted)} .nk-cta{padding:32px 24px} .nk-cta h2{font-size:22px;line-height:28px} .nk-cta-buttons{flex-direction:column;gap:10px} .nk-cta-buttons a{width:100%;justify-content:center} }
@media (max-width:800px){ .nk-trust{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:40px} .nk-trust > div{flex-direction:column;text-align:center;gap:8px;padding:16px 12px} .nk-trust .nk-trust-txt{font-size:12px;line-height:16px} .nk-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;box-sizing:border-box;width:100%;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--mm-line-soft);box-shadow:0 -6px 24px rgba(15,23,42,.12)} .nk-sticky a{box-sizing:border-box;flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:10px;text-decoration:none;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;line-height:1;white-space:nowrap;-webkit-tap-highlight-color:transparent} .nk-sticky .nk-sticky-call{background:var(--mm-brand);color:var(--mm-ink)} .nk-sticky .nk-sticky-tg{background:var(--mm-brand-deep);color:#fff} .nk-sticky .nk-sticky-ico{font-size:17px;line-height:1} body{padding-bottom:calc(72px + env(safe-area-inset-bottom))} }

/* ---- o-nas ---- */
/* Лид-абзац */ .about-lead{ font-size:18px;line-height:26px;font-weight:500;color:var(--mm-ink); max-width:780px;margin-bottom:48px; }
/* HERO-блок */ .about-hero{ background:var(--mm-brand-deep);border-radius:22px;padding:48px 56px; margin-bottom:60px;color:#fff; }
.about-hero h2{ color:#fff;font-size:34px;line-height:42px;font-weight:700;margin-bottom:16px; }
.about-hero h2 span{color:var(--mm-brand)}
.about-hero p{color:var(--mm-ink-muted);font-size:18px;line-height:26px;max-width:680px;margin:0}
/* 4 числа */ .about-numbers{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:80px; }
.about-numbers > div{ background:#fff;border-radius:12px;padding:28px 24px;text-align:center; box-shadow:0 5px 25px rgba(15,23,42,.04); }
.about-numbers .num{ font-size:56px;line-height:1;font-weight:700;color:var(--mm-ink);margin-bottom:12px; display:inline-block;border-bottom:4px solid var(--mm-brand);padding-bottom:8px; }
.about-numbers .label{font-size:15px;line-height:20px;font-weight:600;color:var(--mm-ink-muted)}
/* Секционный H2 */ .about-h2{ text-align:center;font-size:32px;line-height:40px;font-weight:700;color:var(--mm-ink); margin-bottom:14px;margin-top:0; }
.about-h2-sub{ text-align:center;font-size:16px;line-height:22px;color:var(--mm-ink-muted); margin-bottom:40px;max-width:680px;margin-left:auto;margin-right:auto; }
/* 4 принципа */ .about-principles{ display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:80px; }
.about-principles > div{ background:#fff;border-radius:12px;padding:32px 28px; box-shadow:0 5px 25px rgba(15,23,42,.04); }
.about-principles .num{ display:inline-block;background:var(--mm-brand);color:var(--mm-ink);border-radius:50%; width:42px;height:42px;line-height:42px;text-align:center; font-size:18px;font-weight:700;margin-bottom:16px; }
.about-principles h3{ font-size:20px;line-height:26px;font-weight:700;color:var(--mm-ink);margin-bottom:10px; }
.about-principles p{ font-size:15px;line-height:22px;color:var(--mm-ink);margin:0; }
/* Делаем / не делаем */ .about-do-dont{ display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:80px; }
.about-do-dont > div{ background:#fff;border-radius:12px;padding:32px 28px; box-shadow:0 5px 25px rgba(15,23,42,.04); }
.about-do-dont h3{ font-size:22px;line-height:28px;font-weight:700;color:var(--mm-ink); margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--mm-line-soft); }
.about-do-dont ul{list-style:none;padding:0;margin:0}
.about-do-dont li{ position:relative;padding:8px 0 8px 32px;font-size:15px;line-height:22px; border-bottom:1px solid var(--mm-brand-tint); }
.about-do-dont li:last-child{border-bottom:0}
.about-do-dont li::before{ position:absolute;left:0;top:8px;width:22px;height:22px; border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700; }
.about-do ul li::before{content:'✓';background:var(--mm-success-soft);color:var(--mm-success)}
.about-dont ul li::before{content:'✕';background:#FCE6E6;color:var(--mm-danger)}
.about-do-dont .footnote{ margin-top:18px;padding-top:14px;border-top:1px solid var(--mm-brand-tint); font-size:13px;line-height:18px;color:var(--mm-ink-muted);font-style:italic; }
/* Команда */ .about-team{ display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:48px; }
.about-team-card{ background:#fff;border-radius:12px;overflow:hidden; box-shadow:0 5px 25px rgba(15,23,42,.04);text-align:center; }
.about-team-card .photo{ width:100%;aspect-ratio:1/1;background:var(--mm-line) center top/cover no-repeat; display:flex;align-items:center;justify-content:center; color:var(--mm-ink-muted);font-size:14px; }
.about-team-card .meta{padding:20px 18px 24px}
.about-team-card h3{ font-size:18px;line-height:24px;font-weight:700;color:var(--mm-ink);margin-bottom:4px; }
.about-team-card .role{ font-size:13px;line-height:18px;font-weight:600;text-transform:uppercase; letter-spacing:.4px;color:var(--mm-ink-muted);margin-bottom:10px; }
.about-team-card .descr{ font-size:14px;line-height:20px;color:var(--mm-ink);margin:0; }
.about-team-note{ background:var(--mm-brand-tint);border-left:3px solid var(--mm-brand);border-radius:6px; padding:18px 24px;margin-bottom:80px; font-size:15px;line-height:22px;color:var(--mm-ink); }
.about-team-note strong{color:var(--mm-ink)}
/* Процесс */ .about-process{ display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:80px; }
.about-process > div{ background:#fff;border-radius:12px;padding:24px 18px; box-shadow:0 5px 25px rgba(15,23,42,.04);position:relative; }
.about-process .step-num{ position:absolute;top:-14px;left:18px;background:var(--mm-brand);color:var(--mm-ink); width:32px;height:32px;border-radius:50%;text-align:center;line-height:32px; font-weight:700;font-size:16px; }
.about-process h3{ font-size:17px;line-height:22px;font-weight:700;color:var(--mm-ink); margin:14px 0 8px; }
.about-process p{font-size:14px;line-height:19px;color:var(--mm-ink);margin:0 0 8px}
.about-process .time{ font-size:12px;line-height:16px;color:var(--mm-ink-muted);font-weight:600; background:var(--mm-brand-tint);display:inline-block;padding:4px 10px;border-radius:6px; }
/* Гарантия таблица */ .about-warranty{ width:100%;border-collapse:collapse;background:#fff;border-radius:12px; overflow:hidden;box-shadow:0 5px 25px rgba(15,23,42,.04);margin-bottom:30px; }
.about-warranty caption{ caption-side:top;text-align:left;padding:24px 28px 8px; font-weight:700;font-size:18px;color:var(--mm-ink); }
.about-warranty th, .about-warranty td{padding:16px 28px;text-align:left;border-bottom:1px solid var(--mm-line-soft);font-size:15px}
.about-warranty thead th{ background:var(--mm-brand-tint);font-weight:700;color:var(--mm-ink);font-size:13px; text-transform:uppercase;letter-spacing:.4px; }
.about-warranty .term{font-weight:700;color:var(--mm-ink);font-size:18px;white-space:nowrap}
.about-warranty tbody tr:last-child td{border-bottom:0}
.about-warranty-footnote{ background:var(--mm-brand-tint);border-left:3px solid var(--mm-brand);padding:16px 22px; border-radius:6px;font-size:14px;line-height:20px;color:var(--mm-ink);margin-bottom:80px; }
/* Бренды */ .about-brands{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:80px; }
.about-brands > div{ background:#fff;border-radius:12px;padding:28px 26px; box-shadow:0 5px 25px rgba(15,23,42,.04); }
.about-brands h3{ font-size:18px;line-height:24px;font-weight:700;color:var(--mm-ink); margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--mm-brand); display:inline-block; }
.about-brands ul{list-style:none;padding:0;margin:0}
.about-brands li{ padding:6px 0;font-size:15px;line-height:20px;color:var(--mm-ink); }
.about-brands li strong{color:var(--mm-ink)}
.about-brands .note{ margin-top:14px;font-size:13px;line-height:18px;color:var(--mm-ink-muted);font-style:italic; }
/* Офис фото */ .about-office-photos{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;margin-bottom:60px; }
.about-office-photos figure{ margin:0;background:#fff;border-radius:12px;overflow:hidden; box-shadow:0 4px 20px rgba(15,23,42,0.06); }
.about-office-photos img{width:100%;height:240px;object-fit:cover;display:block}
.about-office-photos figcaption{ padding:14px 18px;font-size:14px;line-height:18px;font-weight:600;color:var(--mm-ink); }
/* Юридика */ .about-legal{ background:#fff;border-radius:12px;padding:32px 36px; box-shadow:0 5px 25px rgba(15,23,42,.04);margin-bottom:60px; }
.about-legal dl{display:grid;grid-template-columns:200px 1fr;gap:12px 24px;margin:0}
.about-legal dt{ font-size:13px;line-height:18px;font-weight:700;text-transform:uppercase; letter-spacing:.4px;color:var(--mm-ink-muted); }
.about-legal dd{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--mm-ink)}
.about-legal .doc-btn{ margin-top:24px;display:inline-flex;align-items:center;gap:10px; }
/* CTA финальный */ .about-cta{ background:var(--mm-brand-deep);border-radius:22px;padding:48px 56px;color:#fff; text-align:center;margin-top:30px; }
.about-cta h2{ color:#fff;font-size:30px;line-height:38px;font-weight:700;margin-bottom:12px; }
.about-cta h2 span{color:var(--mm-brand)}
.about-cta p{ color:var(--mm-ink-muted);font-size:17px;line-height:24px;margin-bottom:28px;max-width:560px; margin-left:auto;margin-right:auto; }
.about-cta-buttons{ display:flex;flex-wrap:wrap;gap:12px;justify-content:center; }
.about-cta-buttons a{display:inline-flex;align-items:center;gap:8px}
/* Адаптив */ @media (max-width:1120px){ .about-numbers{grid-template-columns:repeat(2,1fr)} .about-team{grid-template-columns:repeat(2,1fr)} .about-brands{grid-template-columns:repeat(2,1fr)} .about-process{grid-template-columns:repeat(3,1fr)} .about-office-photos{grid-template-columns:repeat(2,1fr)} }
@media (max-width:800px){ .about-hero{padding:32px 28px} .about-hero h2{font-size:26px;line-height:32px} .about-numbers{grid-template-columns:1fr 1fr} .about-numbers .num{font-size:42px} .about-h2{font-size:24px;line-height:30px} .about-principles{grid-template-columns:1fr} .about-do-dont{grid-template-columns:1fr} .about-team{grid-template-columns:1fr} .about-process{grid-template-columns:1fr} .about-brands{grid-template-columns:1fr} .about-office-photos{grid-template-columns:1fr} .about-office-photos img{height:200px} .about-legal{padding:24px 22px} .about-legal dl{grid-template-columns:1fr;gap:6px} .about-legal dt{margin-top:14px} .about-cta{padding:32px 24px} .about-cta h2{font-size:22px;line-height:28px} /* === Таблица гарантий → стек карточек на мобильном === */ .about-warranty{ display:block;background:transparent;box-shadow:none; border-radius:0;padding:0;margin-bottom:20px; } .about-warranty caption{padding:0 0 16px;font-size:16px} .about-warranty thead{display:none} .about-warranty tbody{display:block} .about-warranty tr{ display:block;background:#fff;border-radius:12px; padding:18px 22px;margin-bottom:12px; box-shadow:0 4px 12px rgba(15,23,42,.05); } .about-warranty td{ display:block;padding:0;border:0;font-size:14px;line-height:20px; } .about-warranty td:first-child{ font-weight:700;font-size:16px;color:var(--mm-ink);margin-bottom:8px; } .about-warranty td.term{ display:inline-block;background:var(--mm-brand);color:var(--mm-ink); padding:4px 12px;border-radius:6px;font-size:14px; font-weight:700;white-space:nowrap;margin-bottom:8px; } .about-warranty td:last-child{color:var(--mm-ink-muted)} /* CTA-кнопки на мобильном — каждая на всю ширину */ .about-cta-buttons{flex-direction:column;gap:10px} .about-cta-buttons a{width:100%;justify-content:center} /* Защита от любых горизонтальных переполнений */ .about-hero, .about-cta, .about-warranty-footnote, .about-team-note{max-width:100%;box-sizing:border-box} }
/* Очень узкие экраны (≤360px) — числа поменьше, отступы плотнее */ @media (max-width:380px){ .about-numbers{grid-template-columns:1fr 1fr;gap:10px} .about-numbers > div{padding:20px 14px} .about-numbers .num{font-size:36px} .about-numbers .label{font-size:13px;line-height:18px} .about-principles > div, .about-do-dont > div, .about-brands > div{padding:24px 20px} .about-warranty tr{padding:16px 18px} }
.contract-modal{border:none;border-radius:14px;padding:0;max-width:440px;width:92%;max-height:calc(100vh - 40px);box-shadow:0 25px 60px rgba(0,0,0,.25);background:#fff;color:var(--mm-ink);position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);margin:0}
.contract-modal::backdrop{background:rgba(20,20,20,.55)}
.contract-form{padding:28px 26px 24px;position:relative}
.contract-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:28px;line-height:1;color:var(--mm-ink-muted);cursor:pointer;padding:4px 8px;z-index:2}
.contract-close:hover{color:var(--mm-ink)}
.contract-form h3{font-size:22px;line-height:28px;font-weight:700;margin:0 0 8px;color:var(--mm-ink)}
.contract-form-hint{font-size:14px;line-height:20px;color:var(--mm-ink-soft);margin:0 0 20px}
.contract-field{display:block;margin-bottom:14px}
.contract-label{display:block;font-size:13px;font-weight:600;color:var(--mm-ink);margin-bottom:6px}
.contract-label em{font-style:normal;color:var(--mm-ink-muted);font-weight:400}
.contract-label .req{color:var(--mm-danger);font-weight:700}
.contract-field input[type="text"],.contract-field input[type="tel"]{width:100%;box-sizing:border-box;padding:11px 14px;border:1px solid var(--mm-line);border-radius:8px;font-size:15px;font-family:inherit;color:var(--mm-ink)}
.contract-field input:focus{outline:none;border-color:var(--mm-brand);box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.contract-field input:invalid:not(:placeholder-shown){border-color:var(--mm-danger)}
.contract-error{display:none;color:var(--mm-danger);font-size:12px;margin-top:4px}
.contract-field input:invalid:not(:placeholder-shown) ~ .contract-error{display:block}
.contract-field-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--mm-ink-soft);line-height:18px;cursor:pointer}
.contract-field-row input{margin-top:2px;flex-shrink:0}
.contract-submit{width:100%;padding:13px;font-size:15px;font-weight:700;margin-top:6px;cursor:pointer}
.contract-success{padding:24px 12px 8px;text-align:center}
.contract-success-icon{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:var(--mm-success);color:#fff;font-size:42px;line-height:72px;font-weight:700;text-align:center;box-shadow:0 6px 20px rgba(44,138,62,0.25)}
.contract-success-title{font-size:22px;line-height:28px;font-weight:700;color:var(--mm-ink);margin-bottom:10px}
.contract-success-text{font-size:15px;line-height:22px;color:var(--mm-ink-soft);margin-bottom:22px;max-width:340px;margin-left:auto;margin-right:auto}
.contract-success-close{display:inline-block;min-width:140px;padding:11px 22px;font-size:14px;font-weight:700;cursor:pointer}
.contract-fail{margin-top:14px;padding:12px 14px;border-radius:8px;background:#FEE2E2;border-left:3px solid var(--mm-danger);font-size:14px;line-height:20px}
.contract-fail a{color:var(--mm-brand-strong);text-decoration:none;font-weight:600}
.contract-modal [hidden]{display:none!important}
@media(max-width:480px){.contract-form{padding:22px 18px 18px}.contract-form h3{font-size:18px;line-height:24px}.contract-success-icon{width:60px;height:60px;line-height:60px;font-size:36px}.contract-success-title{font-size:19px}}





/* ---- Каталог услуг и навесы ----
   Эти две страницы верстались не инлайновым <style>, а «Дополнительными
   стилями» Кастомайзера (wp_posts.ID=441, custom_css). Такой CSS привязан
   к слагу старой темы и с новой темой не грузится — отсюда голые h2/h3,
   ссылки-абзацы синим и таблицы без выравнивания.
   Взяты только правила компонентов: глобальные селекторы (:root, body,
   section, h1–h6, .container, .btn) отброшены — они бы переопределили
   дизайн-систему. Цвета переведены на токены.                            */
.section-subtitle { font-size: 1.1rem; color: var(--mm-ink-muted); text-align: center; max-width: 800px; margin: 1rem auto 3rem auto; }
/* ========================================================================== БАЗОВЫЕ КОМПОНЕНТЫ (КНОПКИ, КАРТОЧКИ, СЕТКИ) ========================================================================== */ .btn { display: inline-block; padding: 14px 35px; font-size: 1.1rem; font-weight: 500; text-decoration: none; border-radius: 8px; border: 2px solid; transition: all 0.3s ease; cursor: pointer; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.flex-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.flex-grid > .card { flex: 0 1 300px; /* Уменьшенная базовая ширина */ }
.card { background-color: var(--white-color); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--text-color); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1); }
.card:hover h3 { text-decoration: underline; }
.card img { width: 100%; height: auto; display: block; }
.card .card-content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
.card .card-content h3 { margin-top: 0; margin-bottom: 0.5rem; color: var(--primary-color); }
.card .card-content p { flex-grow: 1; margin-bottom: 1.5rem; }
.card .card-link { display: flex; align-items: center; font-weight: bold; color: var(--primary-color); margin-top: auto; }
.card .card-link .material-symbols-outlined { margin-left: 8px; transition: transform 0.3s ease; }
.card:hover .card-link .material-symbols-outlined { transform: translateX(5px); }
/* ========================================================================== СТИЛИ ДЛЯ КОНКРЕТНЫХ БЛОКОВ ========================================================================== */ /* --- 0. Интро-блок --- */ .intro-block { text-align: center; padding: 40px 20px; }
/* --- 1. Блок "Наши преимущества" --- */ .advantages-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: center; background-color: var(--bg-light-gray); padding: 30px; border-radius: 12px; }
.advantages-wrapper h3 { font-size: 1.5rem; margin: 0; padding-right: 20px; text-align: left; }
.advantage-item-compact { display: flex; align-items: center; gap: 15px; text-align: left; }
.advantage-item-compact .material-symbols-outlined { font-size: 2.5rem; }
.icon-primary { color: var(--primary-color); }
.icon-green { color: var(--green-color); }
.icon-yellow { color: var(--yellow-color); }
/* --- 3. Блок "Цены" (Адаптивная таблица) --- */ #prices .table-footnote { max-width: 800px; margin: 1.5rem auto 0 auto; text-align: center; color: #777; font-style: italic; }
/* --- Стили для десктопа (широкие экраны) --- */ .adaptive-table { width: 100%; max-width: 1000px; margin: 0 auto; border-collapse: collapse; border: 1px solid var(--border-color); box-shadow: 0 5px 15px rgba(0,0,0,0.07); border-radius: 12px; overflow: hidden; /* Важно для скругления углов */ }
.adaptive-table th, .adaptive-table td { padding: 16px 20px; text-align: left; }
.adaptive-table thead { background-color: var(--primary-color); color: var(--white-color); }
.adaptive-table tbody tr { border-bottom: 1px solid var(--border-color); }
.adaptive-table tbody tr:last-of-type { border-bottom: none; }
.adaptive-table tbody tr:nth-of-type(even) { background-color: var(--bg-light-gray); }
.adaptive-table tbody tr:hover { background-color: #ecf0f1; }
/* --- 4. Блок "Что входит в стоимость" (Универсальная версия) --- */ .included-list-wrapper { max-width: 800px; margin: 0 auto; background-color: var(--white-color); padding: 30px 40px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.07); }
.included-list-wrapper h3 { text-align: center; color: var(--primary-color); margin-top: 0; margin-bottom: 1.5rem; }
/* ✨ КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Используем CSS Columns вместо Grid */ .included-list { list-style: none; padding: 0; margin: 0; /* Создаем 2 колонки */ column-count: 2; /* Расстояние между колонками */ column-gap: 2.5rem; }
.included-list li { display: flex; align-items: flex-start; line-height: 1.6; margin-bottom: 1rem; /* Отступ между пунктами по вертикали */ /* Предотвращаем разрыв пункта между колонками */ break-inside: avoid; }
.included-list .material-symbols-outlined { margin-right: 10px; color: var(--green-color); margin-top: 4px; flex-shrink: 0; /* Запрещаем иконке сжиматься */ }
.included-list li strong { margin-right: 0.5em; display: inline-block; }
/* --- 5. Блок "Сравнение Теплое vs Холодное" --- */ .comparison-column { background: var(--white-color); padding: 30px; border-radius: 12px; border: 1px solid var(--border-color); }
.comparison-column h3 { text-align: center; font-size: 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
.comparison-column ul { list-style: none; padding: 0; }
.comparison-column ul li { display: flex; align-items: flex-start; margin-bottom: 1rem; }
.comparison-column ul .material-symbols-outlined { margin-right: 15px; color: var(--green-color); }
/* --- 6. Портфолио (Слайдер) --- */ .portfolio-slider-container { position: relative; max-width: 1100px; margin: 0 auto; }
.portfolio-slider { overflow: hidden; border-radius: 12px; }
.slider-track { display: flex; transition: transform 0.5s ease-in-out; }
.slide { min-width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; background-color: var(--white-color); box-shadow: 0 5px 25px rgba(0,0,0,0.1); }
.slide-image img { width: 100%; height: auto; object-fit: cover; display: block; }
.slide-details { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.slide-details h4 { margin-top: 0; font-size: 1.5rem; color: var(--primary-color); }
.slide-details ul { list-style: none; padding: 0; margin: 1rem 0 2rem 0; }
.slide-details ul li { margin-bottom: 0.5rem; color: var(--mm-ink-soft); }
.slide-details ul li strong { color: var(--heading-color); }
.slider-nav { display: flex; justify-content: space-between; align-items: center; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.slider-btn { pointer-events: all; background-color: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: background-color 0.3s, transform 0.3s; }
.slider-btn:hover { background-color: var(--white-color); transform: scale(1.1); }
.slider-btn.prev { margin-left: -25px; }
.slider-btn.next { margin-right: -25px; }
.slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 2rem; }
.slider-dots .dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; cursor: pointer; transition: background-color 0.3s; }
.slider-dots .dot.active { background-color: var(--primary-color); }
/* --- 7. Блок "Бренды" --- */ .brands-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; }
.brands-logos img { height: 50px; width: auto; filter: grayscale(100%); transition: filter 0.3s ease; }
.brands-logos img:hover { filter: grayscale(0%); }
/* --- 8. Блок "Наша команда" --- */ .team-member { text-align: center; }
.team-member img { width: 100%; height: auto; border-radius: 12px; margin-bottom: 1rem; }
.team-member h4 { margin-bottom: 0.2rem; }
.team-member p { color: var(--mm-ink-muted); font-style: italic; margin-top: 0; }
/* --- 9. Блок "Отзывы" --- */ .testimonial-card { background: var(--white-color); padding: 30px; border-radius: 12px; border: 1px solid var(--border-color); position: relative; }
.testimonial-card::before { content: '“'; font-size: 5rem; color: var(--primary-color); opacity: 0.1; position: absolute; top: 10px; left: 20px; line-height: 1; }
.testimonial-card p { font-style: italic; }
.testimonial-author { font-weight: bold; text-align: right; }
/* --- 10. Блок Калькулятор-CTA --- */ .cta-calculator { background: var(--bg-dark-charcoal); color: var(--white-color); padding: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 40px; }
.cta-calculator .icon-side .material-symbols-outlined { font-size: 6rem; color: var(--accent-color); }
.cta-calculator .text-side { text-align: left; }
.cta-calculator .text-side h2 { color: var(--white-color); text-align: left; margin: 0 0 1rem 0; font-size: 2.5rem; }
.cta-calculator .text-side p { color: var(--white-color); opacity: 1; margin: 0 0 1.5rem 0; font-size: 1.1rem; }
/* ✨ ЭТОТ КОД НУЖНО ДОБАВИТЬ: Стилизует кнопку внутри .cta-calculator */ .cta-calculator .btn { background-color: var(--accent-color); /* Желтый фон */ color: var(--button-text-color); /* Черный текст */ border-color: var(--accent-color); /* Желтая обводка */ }
.cta-calculator .btn:hover { background-color: var(--white-color); /* При наведении фон белый */ color: var(--primary-color); /* Текст становится графитовым */ border-color: var(--white-color); }
/* --- 11. FAQ --- */ .faq-accordion { max-width: 800px; margin: 0 auto; }
.faq-item { border: none; border-left: 5px solid var(--border-color); border-radius: 8px; margin-bottom: 15px; background-color: var(--white-color); box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: all 0.3s ease; }
.faq-item[open] { box-shadow: 0 6px 20px rgba(44, 62, 80, 0.15); border-left-color: var(--primary-color); }
.faq-item summary { font-size: 1.2rem; font-weight: 600; color: var(--heading-color); padding: 20px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 2rem; font-weight: 300; color: var(--primary-color); transition: transform 0.3s ease; }
.faq-item[open] summary::after { content: '−'; transform: rotate(180deg); }
.faq-answer { padding: 0px 25px 25px 25px; color: var(--mm-ink-soft); line-height: 1.8; }
.faq-answer p { margin: 0; border-top: 1px solid var(--border-color); padding-top: 20px; }
/* --- 12. Финальный CTA --- */ .final-cta { text-align: center; }
.final-cta h2 { font-size: 2.5rem; }
/* ✨ ЭТОТ КОД НУЖНО ДОБАВИТЬ/ЗАМЕНИТЬ: Стилизует кнопку и ее наведение */ .final-cta .btn { background-color: var(--accent-color); /* Изначально кнопка желтая */ color: var(--button-text-color); /* с черным текстом */ border-color: var(--primary-color); /* и графитовой обводкой */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.final-cta .btn:hover { background-color: var(--primary-color); /* При наведении становится графитовой */ border-color: var(--primary-color); color: var(--white-color); /* с белым текстом */ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); }
.wpcf7-response-output { color: white; }

/* ---- Мобильный адаптив легаси-каталога («Услуги», «Навесы») ----
   Исходные «Дополнительные стили» Кастомайзера не содержали мобильных правил:
   десктопные сетки (repeat(4,1fr), repeat(3,1fr)), широкая таблица прайса и
   стрелки слайдера с отрицательными margin давали контент шире экрана и
   горизонтальный скролл. Схлопываем сетки и убираем выносы. */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advantages-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .grid-2,
  .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .advantages-wrapper { grid-template-columns: minmax(0, 1fr); padding: 22px; text-align: left; }
  .advantages-wrapper h3 { padding-right: 0; margin-bottom: 6px; }
  .slide { grid-template-columns: minmax(0, 1fr); }
  .slide-details { padding: 24px; }
  .included-list { column-count: 1; }
  .cta-calculator { flex-direction: column; text-align: center; padding: 32px 20px; gap: 20px; }
  .cta-calculator .text-side,
  .cta-calculator .text-side h2 { text-align: center; }
  .cta-calculator .text-side h2 { font-size: 1.6rem; }
  .final-cta h2 { font-size: 1.8rem; }
  /* Стрелки слайдера больше не выносим за край (было margin −25px). */
  .slider-btn.prev { margin-left: 6px; }
  .slider-btn.next { margin-right: 6px; }
  .slider-btn { width: 40px; height: 40px; }
  /* Прайс-таблица без обёртки — превращаем в горизонтальный скроллер внутри себя,
     чтобы широкий прайс не распирал страницу. */
  .adaptive-table { display: block; overflow-x: auto; max-width: 100%; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}



/* ==========================================================================
   Правки по итогам визуального ревью. Идут последними, поэтому перебивают
   правила, извлечённые из старой темы и Кастомайзера.
   ========================================================================== */

/* Двойная иконка в аккордеоне: своя стрелка есть и у темы, и у .faq-item
   из Кастомайзера — рисовались крестик и шеврон внахлёст. */
.faq-item > .mm-faq__q::after { display: none; }

/* Полноширинная плашка вылезала за контейнер страницы */
.entry-content .final-cta,
.entry-content .cta-calculator {
  max-width: 100%;
  border-radius: var(--mm-radius-xl);
}

/* Левый край не собирался: заголовки стояли на одной линии, сетка карточек —
   на другой, а вводные абзацы были отцентрованы. */
.entry-content .flex-grid,
.entry-content .grid-2,
.entry-content .grid-3 { margin-inline: 0; padding-inline: 0; }
.entry-content .section-subtitle { text-align: left; margin-inline: 0; max-width: 68ch; }

/* Карточка «Не делаем» растягивалась до высоты соседней, оставляя внизу
   треть пустоты. */
.entry-content .grid-2,
.entry-content .comparison-column { align-items: start; }

/* Чипы сроков висели на разной высоте — прижимаем к низу карточки */
.entry-content .team-member,
.entry-content .advantage-item-compact { display: flex; flex-direction: column; }
.entry-content .advantage-item-compact > :last-child { margin-top: auto; }


/* Почта рвалась посреди слова («…@g / mail.com») */
.entry-content a[href^="mailto"],
.mm-footer a[href^="mailto"] { overflow-wrap: anywhere; word-break: normal; }

/* Второй телефон был серым вместе с иконкой и выглядел отключённым */
.entry-content a[href^="tel"] { color: var(--mm-brand); font-weight: 700; }
.entry-content a[href^="tel"] svg,
.entry-content a[href^="tel"] .material-symbols-outlined { color: var(--mm-brand); opacity: 1; }

/* Место под карту не должно быть просто серым прямоугольником: если виджет
   не загрузился, видна фирменная подложка с сеткой стоек, а не «дырка». */
.entry-content .c-map,
.entry-content .map,
.mm-map {
  background-color: var(--mm-brand-tint);
  background-image: url("../img/pattern-glazing.svg");
  background-size: 160px 160px;
  border-radius: var(--mm-radius-lg);
  min-height: 260px;
  overflow: hidden;
}
.entry-content iframe { display: block; width: 100%; min-height: 260px; border: 0; border-radius: var(--mm-radius-lg); }

/* Фильтр из одного чипа «Все работы» ничего не фильтрует — прячем.
   Появятся категории — правило перестанет срабатывать само. */
.photo-block-tabs:has(> :only-child) { display: none; }

/* Старый растровый баннер акции дублирует карточку «−5% Скидка пенсионерам»
   и сделан в другой стилистике. Прячем, но не удаляем из базы:
   вернуть — снять это правило. */
.page-akcii .entry-content img { display: none; }


/* Карточка «Не делаем» растягивалась до высоты соседней: под последним
   пунктом оставалась треть карточки пустоты. Списки разной длины — это
   нормально, выравнивать их по высоте не нужно. */
.entry-content .about-do-dont { align-items: start; }


/* ==========================================================================
   Каталог услуг (/uslugi/): подъём легаси-вёрстки до дизайн-системы портала.

   Блоки .card / .adaptive-table / .cta-calculator / .final-cta пришли из
   «Дополнительных стилей» старой темы и опирались на переменные жёлтого скина
   (--primary-color, --accent-color, --bg-dark-charcoal…). В mm-balkony этих
   переменных нет — поэтому шапки таблиц уезжали в прозрачность, кнопки теряли
   фон, а заголовки были не брендового цвета. Здесь легаси-имена сведены к
   токенам портала: одно объявление чинит все авторские блоки разом.
   ========================================================================== */
:root {
  --primary-color:     var(--mm-brand);
  --accent-color:      var(--mm-accent);
  --white-color:       #fff;
  --text-color:        var(--mm-ink-soft);
  --border-color:      var(--mm-line);
  --bg-light-gray:     var(--mm-brand-tint);
  --bg-dark-charcoal:  var(--mm-brand-deep);
  --button-text-color: #fff;
}

/* --- Сетка карточек: грид вместо центрированного флекса ---------------------
   Было justify-content:center — последний ряд из 1–2 карточек «висел» по
   центру сиротой. Грид с auto-fill держит карточки одной ширины и ровняет их
   по левому краю; неполный ряд просто не заполняет правые колонки. */
.flex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 18px;
  justify-content: start;
}
.flex-grid > .card { flex: initial; }

/* --- Заголовки категорий: единый размер + брендовый акцент ------------------
   Категории свёрстаны вперемешку h2/h3 — размеры прыгали. Любой заголовок
   прямо перед сеткой карточек приводим к одному виду и вешаем полоску-акцент. */
.entry-content h2:has(+ .flex-grid),
.entry-content h3:has(+ .flex-grid) {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: var(--mm-lh-snug);
  color: var(--mm-ink);
  margin: var(--mm-space-4) 0 var(--mm-space-2);
  padding-left: 14px;
  position: relative;
}
.entry-content h2:has(+ .flex-grid)::before,
.entry-content h3:has(+ .flex-grid)::before {
  content: "";
  position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px;
  border-radius: 4px;
  background: var(--mm-gradient-brand);
}

/* --- Карточка услуги: белая, с акцентной кромкой и стрелкой ------------------ */
.flex-grid > .card {
  position: relative;
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-sm);
  overflow: hidden;
  transition: transform .22s var(--mm-ease),
              box-shadow .22s var(--mm-ease),
              border-color .22s var(--mm-ease);
}
/* Верхняя градиентная кромка «выезжает» по наведению */
.flex-grid > .card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--mm-gradient-line);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--mm-ease);
}
.flex-grid > .card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mm-shadow-lg);
  border-color: var(--mm-brand-soft);
}
.flex-grid > .card:hover::before { transform: scaleX(1); }
.flex-grid > .card:hover h3 { text-decoration: none; }

.flex-grid > .card .card-content { padding: 22px 22px 20px; gap: 8px; }
.flex-grid > .card .card-content h3 {
  color: var(--mm-ink);
  font-size: var(--mm-fs-lg);
  font-weight: 700;
  line-height: var(--mm-lh-snug);
  margin: 0;
  transition: color .2s var(--mm-ease);
}
.flex-grid > .card:hover .card-content h3 { color: var(--mm-brand); }
.flex-grid > .card .card-content p {
  color: var(--mm-ink-muted);
  font-size: var(--mm-fs-sm);
  line-height: 1.55;
  margin: 0;
}
/* «Подробнее →» — есть всегда, цвет темнеет по наведению */
.flex-grid > .card .card-content::after {
  content: "Подробнее \00A0→";
  display: inline-flex; align-items: center;
  margin-top: 14px;
  color: var(--mm-brand);
  font-weight: 700;
  font-size: var(--mm-fs-sm);
}
.flex-grid > .card:hover .card-content::after { color: var(--mm-brand-strong); }

/* --- Таблицы сравнения: скруглённая шапка, дышащие ячейки ------------------- */
.entry-content .adaptive-table { box-shadow: var(--mm-shadow); border-color: var(--mm-line); }
.entry-content .adaptive-table thead { background: var(--mm-gradient-brand); }
.entry-content .adaptive-table thead th { color: #fff; font-weight: 700; }
.entry-content .adaptive-table tbody tr:hover { background: var(--mm-brand-tint); }
/* Строки распирало из-за полей внутренних <p>, а va:middle разбрасывал
   значения по высоте. Ровняем по верху, поля абзацев убираем. */
.entry-content .adaptive-table th,
.entry-content .adaptive-table td { vertical-align: top; padding: 14px 20px; }
.entry-content .adaptive-table td p { margin: 0; }
/* В ячейках зашиты ведущие <br><br><br> — старый приём «центровки» текста.
   Они распирали строки до 160px и сбивали значения по высоте. Гасим. */
.entry-content .adaptive-table td br { display: none; }
.entry-content .adaptive-table tbody td:first-child { font-weight: 600; color: var(--mm-ink); }

/* --- CTA-калькулятор: тёмно-синяя плашка, кнопка — акцент бренда ------------ */
.entry-content .cta-calculator { box-shadow: var(--mm-shadow-lg); }
.entry-content .cta-calculator .btn {
  background: #fff;
  color: var(--mm-brand-strong);
  border-color: #fff;
  font-weight: 700;
}
.entry-content .cta-calculator .btn:hover {
  background: var(--mm-accent);
  color: #fff;
  border-color: var(--mm-accent);
}

/* --- Правки по итогам дизайн-ревью /uslugi/ -------------------------------- */

/* Слайдер «Примеры работ»: фото занимало ровно половину, справа — пустая
   панель с двухстрочным заголовком. Отдаём фото больше места, панель уже,
   картинка заполняет ячейку по высоте. */
.entry-content .slide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.entry-content .slide-image { overflow: hidden; }
.entry-content .slide-image img { width: 100%; height: 100%; object-fit: cover; }

/* Полоса «Почему более 1000…»: колонки центрировались по вертикали, из-за
   чего заголовки разной длины «плясали» по базовой линии. Ровняем по верху. */
.entry-content .advantages-wrapper { align-items: start; }

/* --- Таблицы сравнения на мобилке: из горизонтального скроллера — в карточки.
   Раньше таблица превращалась в узкий скроллер и показывала лишь обрезанный
   первый столбец: сравнить два варианта было нельзя. Теперь каждая строка —
   отдельная карточка: параметр-заголовок, под ним оба значения со своими
   подписями-колонками (берём из data-label). */
@media (max-width: 680px) {
  .entry-content .adaptive-table,
  .entry-content .adaptive-table tbody,
  .entry-content .adaptive-table tr,
  .entry-content .adaptive-table td {
    display: block;
    width: auto;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
  }
  .entry-content .adaptive-table { box-shadow: none; border: 0; }
  .entry-content .adaptive-table thead { position: absolute; left: -9999px; } /* общий заголовок не нужен */
  .entry-content .adaptive-table tbody tr {
    margin: 0 0 14px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    overflow: hidden;
    box-shadow: var(--mm-shadow-sm);
    background: #fff;
  }
  .entry-content .adaptive-table tbody tr:hover { background: #fff; }
  /* Первая ячейка строки — заголовок карточки (название параметра) */
  .entry-content .adaptive-table tbody td:first-child {
    background: var(--mm-gradient-brand);
    color: #fff;
    font-weight: 700;
    padding: 12px 16px;
  }
  /* Остальные ячейки — значение с подписью-колонкой над ним */
  .entry-content .adaptive-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--mm-line-soft);
  }
  .entry-content .adaptive-table tbody td:last-child { border-bottom: 0; }
  .entry-content .adaptive-table tbody td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--mm-brand);
    margin-bottom: 2px;
  }
}

/* Промо-плашка «Новая услуга: кондиционер» вставлена сниппетом прямо в <body>
   без контейнера: тянулась во всю ширину экрана, текст не попадал на сетку
   страницы, а на мобилке вылезал левый край. Не трогая контент (общая БД),
   ограничиваем блок шириной контейнера по его инлайн-стилю и центрируем. */
body > div[style*="border-left:4px solid #2563EB"] {
  box-sizing: border-box;
  max-width: var(--mm-container);
  margin: 32px auto !important;
}
@media (max-width: 1328px) {
  body > div[style*="border-left:4px solid #2563EB"] {
    margin-left: var(--mm-gutter) !important;
    margin-right: var(--mm-gutter) !important;
  }
}