/* ProfiDom — стили темы. Токены из theme.json (var(--wp--preset--*)).
Дизайн подогнан под оригинал profi-dom.kz (Tilda): тёмно-синий + беж-золото + крем.
Код держим лёгким: без внешних зависимостей, только CSS. */
/* ── Палитра и токены Tilda ─────────────────────────────────────────────── */
:root {
--pd-navy: #214357; /* заголовки, тёмные секции */
--pd-navy-2: #2d485b; /* подписи, заголовки карточек */
--pd-gold: #cfa384; /* акцент, кнопки */
--pd-gold-dk: #b98d66; /* hover кнопок */
--pd-cream: #f8f0eb; /* светлые секции */
--pd-cream-2: #fcf8f5; /* плашки на креме */
--pd-text: #535353;
--pd-border: #dadada;
--pd-fs-h2: 38px; /* заголовки секций zero-блоков Tilda: 38 → 34 (≤1199) → 28 (≤479) */
--pd-font-h: 'Hauora', 'TildaSans', Arial, sans-serif;
--pd-font-t: 'TildaSans', Arial, sans-serif;
}
@media (max-width: 1199px) { :root { --pd-fs-h2: 34px; } }
@media (max-width: 479px) { :root { --pd-fs-h2: 28px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--pd-font-t);
font-size: 16px;
color: var(--pd-text);
background: #fff;
line-height: 1.55;
/* как на живом сайте: там сглаживание включено глобально, без него буквы выходят плотнее оригинала */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--pd-font-h);
color: var(--pd-navy);
line-height: 1.25;
font-weight: 500;
}
/* Теги заголовков приводятся к Tilda на выводе (inc/headings.php). Элемент, оформленный в теме как hN, но получивший другой тег
(div, p или заголовок другого уровня), несёт класс pd-as-hN — вид тега hN: свойства из правил выше, из global styles WP и из
стилей браузера. Стоит до правил компонентов: класс компонента (.pd-sec-h, .pd-lp__t…) перекрывает его так же, как перекрывал тег. */
.pd-as-h1, .pd-as-h2, .pd-as-h3, .pd-as-h4, .pd-as-h5, .pd-as-h6 { display: block; margin-inline: 0; font-family: var(--pd-font-h); color: var(--pd-navy); line-height: 1.25; font-weight: 500; }
.pd-as-h1 { font-size: var(--wp--preset--font-size--xx-large); margin-block: .67em; }
.pd-as-h2 { font-size: var(--wp--preset--font-size--x-large); margin-block: .83em; }
.pd-as-h3 { font-size: 1.17em; margin-block: 1em; }
.pd-as-h4 { font-size: 1em; margin-block: 1.33em; }
.pd-as-h5 { font-size: .83em; margin-block: 1.67em; }
.pd-as-h6 { font-size: .67em; margin-block: 2.33em; }
/* якорь на запись Tilda (#rec123) в начале секции: места не занимает, служит целью прокрутки для кнопок и пунктов шапки */
.pd-anc { position: absolute; width: 0; height: 0; overflow: hidden; }
/* абзац, ставший заголовком (на Tilda это h2/h3): вид абзаца */
.pd-as-p { margin-block: 1em; font: inherit; color: inherit; }
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
/* как в Tilda (tilda-grid): верхний/нижний индекс меньшим кеглем, без влияния на межстрочный */
sup { line-height: 0; font-size: smaller; vertical-align: super; }
sub { line-height: 0; font-size: smaller; vertical-align: sub; }
a { color: var(--pd-gold-dk); }
a:hover { color: var(--pd-navy); }
.skip-link { position: absolute; left: -9999px; top: 0; background: #000; color: #fff; padding: .5rem 1rem; z-index: 1000; }
.skip-link:focus { left: 0; }
/* ══ ZERO-РАСКЛАДКА ШАПКИ И ПОДВАЛА (2026-09-17) ══════════════════════════════════════
Координаты и стили элементов zero-блоков Tilda на 5 ширинах лежат в custom properties фрагментов
inc/chrome/*.html (генерирует _migration/chrome/chrome_build.py): --tN/--lN/--wN/--hN/--dN, --fsN/--lhN/…,
N: 0 — ≥1200, 1 — 960–1199, 2 — 640–959, 3 — 480–639, 4 — <480. Незаданная ширина наследует предыдущую. */
.pd-z{position:relative;box-sizing:border-box;margin:0 auto;width:1200px;height:var(--zh0)}
.pd-zn{display:contents}
.pd-ze{position:absolute;box-sizing:border-box;margin:0;padding:0;text-decoration:none;white-space:normal;word-break:normal;font-family:var(--ff,'TildaSans',Arial,sans-serif);border-radius:var(--br,0)}
.pd-ze--btn{align-items:center;justify-content:center;overflow:hidden}
.pd-ze--btn>span{flex:1 1 0;min-width:0}
.pd-ze--img img{display:block;width:100%;height:auto}
a.pd-ze{transition:color .2s ease-in-out}
a.pd-ze:hover{color:var(--hc,var(--c0,#000000))}
.pd-ze--txt a{color:inherit;text-decoration:none}
.pd-ze{top:var(--t0);left:var(--l0);width:var(--w0,auto);height:var(--h0,auto);font-size:var(--fs0,16px);line-height:var(--lh0,1.55);text-align:var(--ta0,left);opacity:var(--op0,1);color:var(--c0,#000000);font-weight:var(--fw0,400);text-transform:var(--tt0,none);letter-spacing:var(--ls0,normal);background-color:var(--bg0,transparent);display:var(--d0,block)}
.pd-ze--btn{display:var(--d0,flex)}
@media (max-width:1199px){.pd-z{width:960px;height:var(--zh1,var(--zh0))}.pd-ze{top:var(--t1,var(--t0));left:var(--l1,var(--l0));width:var(--w1,var(--w0,auto));height:var(--h1,var(--h0,auto));font-size:var(--fs1,var(--fs0,16px));line-height:var(--lh1,var(--lh0,1.55));text-align:var(--ta1,var(--ta0,left));opacity:var(--op1,var(--op0,1));color:var(--c1,var(--c0,#000000));font-weight:var(--fw1,var(--fw0,400));text-transform:var(--tt1,var(--tt0,none));letter-spacing:var(--ls1,var(--ls0,normal));background-color:var(--bg1,var(--bg0,transparent));display:var(--d1,var(--d0,block))}.pd-ze--btn{display:var(--d1,var(--d0,flex))}}
@media (max-width:959px){.pd-z{width:640px;height:var(--zh2,var(--zh1,var(--zh0)))}.pd-ze{top:var(--t2,var(--t1,var(--t0)));left:var(--l2,var(--l1,var(--l0)));width:var(--w2,var(--w1,var(--w0,auto)));height:var(--h2,var(--h1,var(--h0,auto)));font-size:var(--fs2,var(--fs1,var(--fs0,16px)));line-height:var(--lh2,var(--lh1,var(--lh0,1.55)));text-align:var(--ta2,var(--ta1,var(--ta0,left)));opacity:var(--op2,var(--op1,var(--op0,1)));color:var(--c2,var(--c1,var(--c0,#000000)));font-weight:var(--fw2,var(--fw1,var(--fw0,400)));text-transform:var(--tt2,var(--tt1,var(--tt0,none)));letter-spacing:var(--ls2,var(--ls1,var(--ls0,normal)));background-color:var(--bg2,var(--bg1,var(--bg0,transparent)));display:var(--d2,var(--d1,var(--d0,block)))}.pd-ze--btn{display:var(--d2,var(--d1,var(--d0,flex)))}}
@media (max-width:639px){.pd-z{width:480px;height:var(--zh3,var(--zh2,var(--zh1,var(--zh0))))}.pd-ze{top:var(--t3,var(--t2,var(--t1,var(--t0))));left:var(--l3,var(--l2,var(--l1,var(--l0))));width:var(--w3,var(--w2,var(--w1,var(--w0,auto))));height:var(--h3,var(--h2,var(--h1,var(--h0,auto))));font-size:var(--fs3,var(--fs2,var(--fs1,var(--fs0,16px))));line-height:var(--lh3,var(--lh2,var(--lh1,var(--lh0,1.55))));text-align:var(--ta3,var(--ta2,var(--ta1,var(--ta0,left))));opacity:var(--op3,var(--op2,var(--op1,var(--op0,1))));color:var(--c3,var(--c2,var(--c1,var(--c0,#000000))));font-weight:var(--fw3,var(--fw2,var(--fw1,var(--fw0,400))));text-transform:var(--tt3,var(--tt2,var(--tt1,var(--tt0,none))));letter-spacing:var(--ls3,var(--ls2,var(--ls1,var(--ls0,normal))));background-color:var(--bg3,var(--bg2,var(--bg1,var(--bg0,transparent))));display:var(--d3,var(--d2,var(--d1,var(--d0,block))))}.pd-ze--btn{display:var(--d3,var(--d2,var(--d1,var(--d0,flex))))}}
@media (max-width:479px){.pd-z{width:320px;height:var(--zh4,var(--zh3,var(--zh2,var(--zh1,var(--zh0)))))}.pd-ze{top:var(--t4,var(--t3,var(--t2,var(--t1,var(--t0)))));left:var(--l4,var(--l3,var(--l2,var(--l1,var(--l0)))));width:var(--w4,var(--w3,var(--w2,var(--w1,var(--w0,auto)))));height:var(--h4,var(--h3,var(--h2,var(--h1,var(--h0,auto)))));font-size:var(--fs4,var(--fs3,var(--fs2,var(--fs1,var(--fs0,16px)))));line-height:var(--lh4,var(--lh3,var(--lh2,var(--lh1,var(--lh0,1.55)))));text-align:var(--ta4,var(--ta3,var(--ta2,var(--ta1,var(--ta0,left)))));opacity:var(--op4,var(--op3,var(--op2,var(--op1,var(--op0,1)))));color:var(--c4,var(--c3,var(--c2,var(--c1,var(--c0,#000000)))));font-weight:var(--fw4,var(--fw3,var(--fw2,var(--fw1,var(--fw0,400)))));text-transform:var(--tt4,var(--tt3,var(--tt2,var(--tt1,var(--tt0,none)))));letter-spacing:var(--ls4,var(--ls3,var(--ls2,var(--ls1,var(--ls0,normal)))));background-color:var(--bg4,var(--bg3,var(--bg2,var(--bg1,var(--bg0,transparent)))));display:var(--d4,var(--d3,var(--d2,var(--d1,var(--d0,block)))))}.pd-ze--btn{display:var(--d4,var(--d3,var(--d2,var(--d1,var(--d0,flex)))))}}
/* ── Шапка, подвал, кнопка меню (как на Tilda: шапка не липнет, кнопка меню фиксирована) ── */
.pd-site-header { position: relative; background: #214357; color: #fff; }
/* Выпадающий список пункта шапки «Материалы» / «Прокат» — как t794 на Tilda: белая плашка 190px под пунктом, по центру, со стрелкой */
.pd-hdrop { position: absolute; z-index: 60; display: block; opacity: 0; box-sizing: border-box; width: 190px; padding: 18px 20px; background: #fff; border-radius: 3px; box-shadow: 0 0 7px 0 rgba(0,0,0,.2); text-align: left; transition: opacity .2s cubic-bezier(.895,.03,.685,.22); }
.pd-hdrop[hidden] { display: none; }
.pd-hdrop.is-open { opacity: 1; }
.pd-hdrop::before { content: ""; position: absolute; top: -20px; right: 50%; transform: translateX(50%); border: 10px solid transparent; border-bottom-color: #fff; }
.pd-hdrop__list { list-style: none; margin: 0; padding: 0; }
.pd-hdrop__list li { margin: 0 0 12px; }
.pd-hdrop__list li:last-child { margin-bottom: 0; }
.pd-hdrop__list a { display: block; font: 500 14px/1.35 var(--pd-font-h); color: #222; text-decoration: none; }
.pd-site-footer { background: #f8f0eb; }
/* t450: квадрат 48×48 #2d485b справа сверху, три полоски 22×14 */
.pd-burger { position: fixed; top: 15px; right: 15px; z-index: 190; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0; background: #2d485b; cursor: pointer; }
.pd-burger span { position: absolute; left: 13px; width: 22px; height: 2px; background: #fff; }
.pd-burger span:nth-child(1) { top: 17px; }
.pd-burger span:nth-child(2) { top: 23px; }
.pd-burger span:nth-child(3) { top: 29px; }
/* Кнопки CTA */
.wp-element-button, .wp-block-button__link {
display: inline-block; padding: .7rem 1.4rem; border-radius: 6px;
background: var(--pd-gold); color: #fff; text-decoration: none;
font-weight: 700; border: 0; cursor: pointer; line-height: 1.2;
font-family: var(--wp--preset--font-family--heading, 'Hauora', sans-serif);
transition: background .15s, transform .05s;
}
.wp-element-button:hover, .wp-block-button__link:hover { background: var(--pd-gold-dk); color: #fff; }
.wp-element-button:active { transform: translateY(1px); }
/* ── Off-canvas меню (полное меню сайта) ──────────────────────────────── */
/* overflow: hidden — панель спрятана за правым краем, без обрезки она расширяет документ (горизонтальная прокрутка страницы) */
.pd-drawer { position: fixed; inset: 0; z-index: 200; overflow: hidden; visibility: hidden; }
.pd-drawer.is-open { visibility: visible; }
.pd-drawer__overlay { position: absolute; inset: 0; background: rgba(20,35,46,.55); opacity: 0; transition: opacity .25s ease; }
.pd-drawer.is-open .pd-drawer__overlay { opacity: 1; }
.pd-drawer__panel {
position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92vw);
background: var(--pd-cream); color: var(--pd-navy); overflow-y: auto;
transform: translateX(100%); transition: transform .28s ease; padding: 3.25rem 1.75rem 2rem;
box-shadow: -12px 0 40px rgba(0,0,0,.25); -webkit-overflow-scrolling: touch;
}
.pd-drawer.is-open .pd-drawer__panel { transform: none; }
.pd-drawer__close {
position: absolute; top: .6rem; right: .8rem; width: 40px; height: 40px; border: 0; background: transparent;
font-size: 2rem; line-height: 1; color: var(--pd-navy); cursor: pointer;
}
.pd-drawer__close:hover { color: var(--pd-gold-dk); }
.pd-drawer__menu { list-style: none; margin: 0; padding: 0; }
/* на Tilda боковое меню — два блока: от 480px и уже (подписи и порядок пунктов у них разные) */
.pd-drawer__menu--m { display: none; }
@media (max-width: 479px) { .pd-drawer__menu--d { display: none; } .pd-drawer__menu--m { display: block; } }
.pd-drawer__item { border-bottom: 1px solid rgba(33,67,87,.08); }
.pd-drawer__link {
display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%;
padding: .72rem 0; background: transparent; border: 0; cursor: pointer; text-align: left;
font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif);
font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
color: var(--pd-navy); text-decoration: none;
}
.pd-drawer__link:hover { color: var(--pd-gold-dk); }
.pd-drawer__item.is-lead .pd-drawer__link { color: var(--pd-gold-dk); }
.pd-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; flex: none; margin-right: .2rem; }
.has-sub.is-open .pd-caret { transform: rotate(-135deg); }
.pd-submenu { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.has-sub.is-open .pd-submenu { max-height: 1400px; }
.pd-submenu li a {
display: block; padding: .5rem 0 .5rem 1rem; font-size: .8rem; color: #4a6373; text-decoration: none;
text-transform: none; letter-spacing: 0; font-weight: 500;
}
.pd-submenu li a:hover { color: var(--pd-gold-dk); }
.pd-submenu li:last-child a { padding-bottom: .8rem; }
.pd-drawer__divider { height: 1px; background: repeating-linear-gradient(90deg, rgba(33,67,87,.3) 0 6px, transparent 6px 12px); margin: 1rem 0; }
.pd-drawer__foot { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.pd-drawer__wa { width: 42px; height: 42px; border-radius: 50%; background: var(--pd-navy); color: #fff; display: grid; place-items: center; }
.pd-drawer__wa svg { width: 22px; height: 22px; }
.pd-drawer__wa:hover { background: var(--pd-gold); }
.pd-drawer__cta { align-self: stretch; text-align: center; background: var(--pd-gold); color: #fff; text-transform: uppercase; font-weight: 700; letter-spacing: .02em; padding: .95rem 1.5rem; border-radius: 4px; text-decoration: none; font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); font-size: .85rem; }
.pd-drawer__cta:hover { background: var(--pd-gold-dk); color: #fff; }
body.pd-noscroll { overflow: hidden; }
/* ── Сетка — как контейнер Tilda: 1200 с полями 20 (контент 1160) → 960/10 (940) при ≤1200 → 640/20 при ≤960 ── */
.container, .pd-tcol { box-sizing: border-box; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (max-width: 1200px) { .container, .pd-tcol { max-width: 960px; padding-inline: 10px; } }
@media (max-width: 960px) { .container, .pd-tcol { max-width: 640px; padding-inline: 20px; } }
/* Секции всегда во всю ширину (мы убрали constrained-layout Gutenberg) */
.pd-front > .wp-block-group.alignfull { max-width: none; }
/* отступы детей не выпадают за секцию (иначе нижний margin CTA уходит за фон секции) */
.pd-front > .wp-block-group.alignfull > .container { display: flow-root; }
/* flow-layout Gutenberg добавляет детям .container margin-top: 24px — отступы задают сами секции */
.pd-front :where(.container.is-layout-flow) > * { margin-block-start: 0; }
/* ── Заголовки секций — как zero-заголовки Tilda: Hauora 38/1.25 w500, КАПС; ширина на десктопе — из Tilda (--tw) ── */
.pd-front .wp-block-heading.has-x-large-font-size, .pd-sec-h, .pd-adv__title, .pd-steps2-title, .pd-buildings__title, .pd-article__title, .pd-banner__title {
font-family: var(--pd-font-h); font-size: var(--pd-fs-h2); font-weight: 500; line-height: 1.25;
letter-spacing: normal; text-transform: uppercase; margin: 0;
}
.pd-sec-h { text-align: var(--hta, center); margin-inline: var(--hml, auto); color: var(--hc, var(--pd-navy)); }
@media (min-width: 1200px) { .pd-sec-h { line-height: 48px; } } /* 38×1.25 — Tilda округляет межстрочный до px */
@media (min-width: 1200px) {
.pd-front .wp-block-heading.has-x-large-font-size, .pd-sec-h, .pd-adv__title, .pd-steps2-title, .pd-buildings__title, .pd-article__title, .pd-banner__title, .pd-sec-sub, .pd-quiz-sub { max-width: var(--tw, none); }
}
/* Подзаголовок секции — TildaSans 20/1.55 золотом */
.pd-sec-sub, .pd-quiz-sub { font-family: var(--pd-font-t); font-size: 20px; line-height: var(--slh, 1.55); font-weight: 400; color: var(--sc, var(--pd-gold)); text-align: var(--sta, var(--hta, center)); margin: 20px var(--hml, auto) 0; }
/* Отступы заголовка секции — из zero-заголовка Tilda: конвертер ставит на секцию --hpt (верх), --hsub (заголовок → подзаголовок),
--hmb (низ текста → низ zero-блока, т.е. до содержимого) */
.pd-sec-h { margin-bottom: var(--hmb, 31px); }
/* часть заголовка секции, размеченная h1 на Tilda (остальное — обычный текст): на вид — тот же заголовок */
.pd-sec-h__h1 { display: inline; margin: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.pd-sec-h:has(+ .pd-sec-sub) { margin-bottom: 0; }
.pd-sec-h + .pd-sec-sub { margin-top: var(--hsub, 20px); margin-bottom: var(--hmb, 30px); }
/* ── Кнопки Tilda: TildaSans 16/1.55 w400, КАПС, без скругления; 327×69 в CTA, hover #b98d66 ── */
.pd-btn, .pd-price-cta__btn, .pd-catalog-cta__btn, .pd-banner__btn {
display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
min-height: 69px; width: 327px; max-width: 100%; padding: 0 20px;
background: var(--pd-gold); color: #fff; border: 0; border-radius: 0; cursor: pointer;
font-family: var(--pd-font-t); font-size: 16px; font-weight: 400; line-height: 1.55; letter-spacing: normal;
text-transform: uppercase; text-decoration: none; text-align: center; transition: background-color .2s ease-in-out;
}
.pd-btn:hover, .pd-price-cta__btn:hover, .pd-catalog-cta__btn:hover, .pd-banner__btn:hover { background-color: #b98d66; color: #fff; }
/* Строка CTA как zero Tilda: кнопка по центру колонки, «Перезвоним в течение 3 минут» справа от неё (зазор 15, ширина 118 → 2 строки, сверху 13) */
.pd-price-cta, .pd-lcta-inline { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 15px; align-items: start; }
.pd-price-cta > a, .pd-lcta-inline .pd-btn { grid-row: 1; grid-column: 2; }
.pd-price-cta__note, .pd-lcta-inline > span { grid-row: 1; grid-column: 3; justify-self: start; width: var(--nw, 118px); margin-top: 13px; font-family: var(--pd-font-t); font-size: 16px; line-height: 1.3; color: var(--pd-navy-2); }
.pd-price-cta--left { grid-template-columns: auto 1fr; }
.pd-price-cta--left > a { grid-column: 1; }
.pd-price-cta--left .pd-price-cta__note { grid-column: 2; }
/* ── Герой v3 (по макету: фото сверху, заголовок с ценой, CTA+описание, иконки) ── */
.pd-hero3 { padding-bottom: 1rem; } /* ширину/боковые отступы даёт общий .container */
.pd-hero3-photo img { width: 100%; height: clamp(300px, 30vw, 440px); object-fit: cover; border-radius: 6px; display: block; }
.pd-hero3-headline { display: flex; align-items: flex-end; gap: 1.25rem; flex-wrap: wrap; margin: 2rem 0 1.75rem; }
.pd-hero3-title {
color: #fff !important; margin: 0; text-transform: uppercase; font-weight: 800;
font-size: clamp(1.4rem, .7rem + 1.9vw, 2.5rem); line-height: 1.14; letter-spacing: .01em; max-width: 40ch;
}
.pd-hero3-title sup { font-size: .6em; }
.pd-hero3-note { font-style: italic; color: rgba(255,255,255,.72); font-size: .95rem; white-space: nowrap; padding-bottom: .4rem; }
.pd-hero3-ctarow { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; margin-bottom: 2.5rem; }
.pd-hero3-cta {
background: var(--pd-gold); color: #fff; text-transform: uppercase; font-weight: 700;
padding: 1.15rem 2.25rem; border-radius: 4px; text-decoration: none; letter-spacing: .02em;
font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); white-space: normal; text-align: center;
}
.pd-hero3-cta:hover { background: var(--pd-gold-dk); color: #fff; }
.pd-hero3-desc { margin: 0; color: rgba(255,255,255,.86); font-size: 1.02rem; max-width: 56ch; }
.pd-hero3-usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.pd-hero3-usp { display: flex; align-items: flex-start; gap: .85rem; }
.pd-hero3-usp .pd-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; color: var(--pd-gold); }
/* круг рисуем только под свои SVG-иконки: у картинок Tilda обводка уже внутри файла */
.pd-hero3-usp .pd-ic svg { box-sizing: border-box; width: 100%; height: 100%; padding: 10px; border-radius: 50%; border: 1.5px solid rgba(207,163,132,.6); }
.pd-hero3-usp span:last-child { font-size: .92rem; color: rgba(255,255,255,.85); line-height: 1.4; align-self: center; }
.pd-hero3-usp b { color: #fff; }
@media (max-width: 900px) {
.pd-hero3-ctarow { grid-template-columns: 1fr; gap: 1.25rem; }
.pd-hero3-usps { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.pd-hero3-title { max-width: none; }
}
@media (max-width: 520px) { .pd-hero3-usps { grid-template-columns: 1fr; } }
/* ── Карточки-теги (материалы / виды зданий) ──────────────────────────── */
.pd-tags { gap: .7rem !important; margin-top: .5rem; }
.pd-tags p { margin: 0; }
.pd-tags a {
display: inline-flex; align-items: center; gap: .4rem;
padding: .7rem 1.25rem; background: #fff;
border: 1px solid var(--pd-border); border-radius: 10px;
text-decoration: none; color: var(--pd-navy); font-weight: 600; font-size: .98rem;
box-shadow: 0 2px 8px rgba(33,67,87,.05);
transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.pd-tags a:hover { background: var(--pd-gold); color: #fff; border-color: transparent; transform: translateY(-2px); }
/* ── Карточки материалов (сетка с фото) ───────────────────────────────── */
.pd-mat-cards {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; margin-top: .5rem;
}
.pd-mat-card {
display: block; background: transparent; border: 0; border-radius: 0;
text-decoration: none; color: var(--pd-navy);
}
.pd-mat-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; border-radius: 4px; }
.pd-mat-card__t {
display: block; padding: .75rem 0 0; text-align: left; font-weight: 600;
font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pd-gold-dk);
font-family: var(--wp--preset--font-family--heading, 'Hauora', sans-serif);
}
.pd-mat-card:hover .pd-mat-card__t { color: var(--pd-navy); }
@media (max-width: 820px) { .pd-mat-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .pd-mat-cards { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
/* ══ СЕКЦИИ (.area--*) — фон, цвет текста, вертикальные отступы ═══════════
Правишь одну секцию — правишь ЕЁ .area--* и всё. */
/* тёмные (navy) секции */
.area--hero, .area--services, .area--quiz, .area--catalog-cta, .area--buildings, .area--steps, .area--contacts { background: var(--pd-navy); }
/* белый текст на тёмных (buildings — исключение: внутри светлая карточка со своими цветами) */
.area--hero, .area--services, .area--quiz, .area--catalog-cta, .area--steps, .area--contacts { color: #fff; }
.area--services .wp-block-heading, .area--steps .wp-block-heading, .area--contacts .wp-block-heading { color: #fff; }
/* кремовые (surface) секции */
.area--materials, .area--price, .area--advantages, .area--catalog, .area--banner, .area--reviews, .area--article, .area--faq { background: var(--pd-cream); }
/* вертикальные отступы (были инлайн-стилями Gutenberg) */
.area--hero { padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70); }
.area--catalog-cta { padding-block: var(--wp--preset--spacing--70); text-align: center; }
.area--banner { padding-block: var(--wp--preset--spacing--60); }
.area--materials, .area--price, .area--services, .area--advantages, .area--quiz, .area--catalog, .area--buildings, .area--reviews, .area--steps, .area--article, .area--faq, .area--contacts { padding-block: var(--wp--preset--spacing--80); }
/* ── Заголовок внутренних страниц (H1 + подзаголовок) ─────────────────── */
.area--page-title { background: var(--pd-cream); padding-block: var(--wp--preset--spacing--70); }
.area--page-title .wp-block-heading { text-align: center; margin-bottom: .5rem; }
.pd-page-lead { text-align: center; color: var(--pd-gold-dk); font-size: 1.1rem; margin: 0 auto; max-width: 46ch; }
/* ── Общая кнопка ─────────────────────────────────────────────────────── */
.pd-eyebrow { color: var(--pd-gold-dk); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .85rem; }
/* ── Страница «О нас» ─────────────────────────────────────────────────── */
.area--about-hero, .area--about-adv, .area--team, .area--rep { background: var(--pd-cream); padding-block: var(--wp--preset--spacing--80); }
.area--stats, .area--testimonial, .area--cta { background: var(--pd-navy); color: #fff; padding-block: var(--wp--preset--spacing--80); }
.pd-abhero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.pd-abhero__title { text-transform: uppercase; font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); color: var(--pd-navy); margin: .5rem 0 1.25rem; line-height: 1.15; }
.pd-abhero__text p { margin: 0 0 1rem; }
.pd-abhero__media img { width: 100%; border-radius: 8px; display: block; }
.pd-quote { margin: 2.5rem 0 0; padding: 1.75rem 2rem; border-left: 4px solid var(--pd-gold); background: #fff; border-radius: 0 8px 8px 0; }
.pd-quote p { font-style: italic; font-size: 1.1rem; color: var(--pd-navy); margin: 0 0 1rem; }
.pd-quote footer b { display: block; color: var(--pd-navy); }
.pd-quote footer span { color: var(--pd-text); font-size: .9rem; }
@media (max-width: 820px) { .pd-abhero { grid-template-columns: 1fr; } }
.pd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.pd-stat { text-align: center; }
.pd-stat__n { display: block; font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); font-size: clamp(2rem, 1rem + 2.5vw, 3rem); font-weight: 800; color: var(--pd-gold); line-height: 1; }
.pd-stat__u { display: block; color: #fff; text-transform: uppercase; font-size: .85rem; letter-spacing: .03em; margin: .4rem 0 .6rem; }
.pd-stat__d { display: block; color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.4; }
@media (max-width: 820px) { .pd-stats { grid-template-columns: 1fr 1fr; } }
.pd-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1.5rem; }
.pd-feat__img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 8px; margin-bottom: 1rem; display: block; }
.pd-feat p { margin: 0; font-weight: 600; color: var(--pd-navy); }
@media (max-width: 820px) { .pd-feats { grid-template-columns: 1fr; } }
.pd-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1.5rem; }
.pd-team__card { text-align: center; }
.pd-team__img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; margin-bottom: 1rem; display: block; }
.pd-team__name { display: block; color: var(--pd-navy); }
.pd-team__role { display: block; color: var(--pd-gold-dk); font-size: .9rem; margin-top: .25rem; }
@media (max-width: 820px) { .pd-team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pd-team { grid-template-columns: 1fr; } }
.pd-testi { display: flex; gap: 2rem; align-items: center; max-width: 860px; margin: 0 auto; }
.pd-testi__ava { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: none; }
.pd-testi blockquote { margin: 0; }
.pd-testi blockquote p { font-style: italic; font-size: 1.15rem; color: #fff; margin: 0 0 1rem; }
.pd-testi footer b { color: #fff; display: block; }
.pd-testi footer span { color: rgba(255,255,255,.7); font-size: .9rem; }
.pd-testi__note { max-width: 860px; margin: 2rem auto 0; text-align: center; color: rgba(255,255,255,.8); }
@media (max-width: 640px) { .pd-testi { flex-direction: column; text-align: center; } }
.pd-rep { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.pd-rep__card { background: #fff; border: 1px solid var(--pd-border); border-radius: 12px; padding: 1.75rem 1rem; text-align: center; }
.pd-rep__logo { height: 34px; width: auto; margin: 0 auto 1rem; display: block; }
.pd-rep__score { display: block; font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); font-size: 2rem; font-weight: 800; color: var(--pd-navy); }
.pd-rep__of { color: var(--pd-text); font-size: .85rem; }
@media (max-width: 820px) { .pd-rep { grid-template-columns: 1fr 1fr; } }
.pd-cta2 { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.pd-cta2 :is(h2:not([class*="pd-as-"]), .pd-as-h2) { color: #fff; text-transform: uppercase; margin: 0 0 .5rem; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
.pd-cta2 p { color: rgba(255,255,255,.75); margin: 0; }
.pd-cta2 .pd-btn { flex: none; }
/* ── Страница «Проектирование» ────────────────────────────────────────── */
.pd-article :is(h3:not([class*="pd-as-"]), .pd-as-h3) { color: var(--pd-navy); text-transform: uppercase; font-size: 1.1rem; margin: 1.75rem 0 .75rem; }
/* ── Каталог WooCommerce (страница «Проекты» /catalog) ────────────────── */
.pd-shop-wrap { padding-block: var(--wp--preset--spacing--80); }
.pd-shop .woocommerce-products-header__title, .pd-shop h1.page-title { text-align: center; text-transform: uppercase; font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem); color: var(--pd-navy); margin: 0 0 1.5rem; }
.pd-shop .woocommerce-products-header__desc { text-align: center; color: var(--pd-gold-dk); max-width: 46ch; margin: 0 auto 2rem; }
.pd-shop .woocommerce-notices-wrapper:empty { display: none; }
.pd-shop .woocommerce-result-count { color: var(--pd-text); font-size: .9rem; margin: 0 0 1.5rem; }
.pd-shop .woocommerce-ordering { margin-bottom: 1.5rem; }
.pd-shop .woocommerce-ordering select { padding: .55rem .9rem; border: 1px solid var(--pd-border); border-radius: 4px; background: #fff; color: var(--pd-navy); }
.pd-shop .woocommerce-pagination ul { display: flex; gap: .5rem; justify-content: center; list-style: none; padding: 0; margin: 2.5rem 0 0; flex-wrap: wrap; }
.pd-shop .woocommerce-pagination a, .pd-shop .woocommerce-pagination span { display: inline-flex; min-width: 40px; height: 40px; padding: 0 .5rem; align-items: center; justify-content: center; border: 1px solid var(--pd-border); border-radius: 4px; text-decoration: none; color: var(--pd-navy); background: #fff; }
.pd-shop .woocommerce-pagination .current { background: var(--pd-gold); color: #fff; border-color: var(--pd-gold); }
/* ── Колонка сетки Tilda t-col_12: 1160 (≥1201), 940 (≤1200), до 600 (≤960) ── */
.pd-tcol { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 1200px) { .pd-tcol { max-width: 960px; padding: 0 10px; } }
@media (max-width: 960px) { .pd-tcol { max-width: 640px; padding: 0 20px; } }
/* ── Лента блога — как t050 + t404 на Tilda ────────────────────────────── */
.area--blog-title { background: #f8f0eb; padding: 75px 0 30px; }
.pd-blog-h1 { margin: 0; font: 500 38px/1.17 'Hauora', 'TildaSans', Arial, sans-serif; color: #214357; text-transform: uppercase; }
@media (max-width: 899px) { .pd-blog-h1 { font-size: 78px; } }
@media (max-width: 640px) { .pd-blog-h1 { font-size: 36px; } }
@media (max-width: 480px) { .pd-blog-h1 { font-size: 30px; } }
.area--blog { background: #f8f0eb; padding: 90px 0; }
.pd-blog-grid { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: repeat(3, 360px); column-gap: 40px; }
.pd-bcard { display: block; margin-bottom: 40px; text-decoration: none; color: #214357; }
.pd-bcard__img { display: block; position: relative; padding-top: 65%; background: #eadfce; }
.pd-bcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-bcard__text { display: block; margin: 16px 0 28px; }
.pd-bcard__title { display: block; margin-bottom: 12px; font: 500 26px/1.23 'Hauora', 'TildaSans', Arial, sans-serif; color: #214357; }
.pd-bcard__descr { display: block; font: 400 16px/1.55 'Hauora', 'TildaSans', Arial, sans-serif; color: #777; }
@media (max-width: 1200px) {
.pd-blog-grid { max-width: 960px; padding: 0 10px; grid-template-columns: repeat(3, 300px); column-gap: 20px; }
.pd-bcard { margin-bottom: 20px; }
.pd-bcard__title { font-size: 24px; }
.pd-bcard__descr { font-size: 14px; }
}
@media (max-width: 960px) {
.pd-blog-grid { max-width: 640px; padding: 0; grid-template-columns: 1fr; column-gap: 0; }
.pd-bcard { display: flow-root; padding: 0 20px; margin-bottom: 50px; }
.pd-bcard__img { float: left; width: 50%; padding-top: calc(50% * .65); margin-right: 20px; }
.pd-bcard__text { display: table; width: calc(50% - 20px); margin: 0; }
}
@media (max-width: 640px) {
.pd-bcard { display: block; }
.pd-bcard__img { float: none; width: 100%; padding-top: 65%; margin-right: 0; }
.pd-bcard__text { display: block; width: 100%; margin-top: 16px; }
.pd-bcard__title { font-size: 22px; }
.pd-bcard__descr { font-size: 12px; line-height: 1.45; }
}
/* статья */
.area--page-title .pd-single-date { display: block; text-align: center; margin-top: .5rem; color: var(--pd-gold-dk); }
.pd-single { max-width: 800px; margin-inline: auto; }
.pd-single-thumb { margin: 0 0 1.75rem; }
.pd-single-thumb img { width: 100%; border-radius: 10px; display: block; }
.pd-single p { margin: 0 0 1.1rem; line-height: 1.7; }
.pd-single-cta { text-align: center; margin-top: 2.5rem; }
/* ── Услуги (5.png): тёмная секция, номера, золотые линии-разделители ──── */
.area--services .wp-block-heading { color: var(--pd-gold); margin-bottom: 2.25rem; text-transform: uppercase; }
.pd-services3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.pd-svc { padding: 1.9rem 2rem; border-right: 1px solid rgba(207,163,132,.3); border-bottom: 1px solid rgba(207,163,132,.3); }
.pd-svc:nth-child(3n) { border-right: 0; padding-right: 0; }
.pd-svc:nth-child(3n+1) { padding-left: 0; }
.pd-svc:nth-child(-n+3) { padding-top: 0; }
.pd-svc:nth-last-child(-n+3) { border-bottom: 0; padding-bottom: 0; }
.pd-svc__n { display: block; color: var(--pd-gold); font-size: 1rem; margin-bottom: .7rem; font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); }
.pd-svc__t { color: #fff; text-transform: uppercase; font-size: 1.02rem; margin: 0 0 .7rem; font-weight: 700; }
.pd-svc__t a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pd-svc__t a:hover { color: var(--pd-gold); }
.pd-svc p { color: rgba(255,255,255,.72); font-size: .92rem; margin: 0; line-height: 1.5; }
@media (max-width: 820px) {
.pd-services3 { grid-template-columns: 1fr 1fr; }
.pd-svc { padding: 1.5rem !important; border-right: 1px solid rgba(207,163,132,.3); }
.pd-svc:nth-child(2n) { border-right: 0; padding-right: 0; }
.pd-svc:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 560px) { .pd-services3 { grid-template-columns: 1fr; } .pd-svc { border-right: 0 !important; padding-inline: 0 !important; } }
/* ── Почему мы №1 (6.png): 2 колонки — слева заголовок+CTA, справа список ─ */
.pd-adv { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 3.5rem; align-items: start; }
.pd-adv__left { position: sticky; top: 96px; align-self: start; }
.pd-adv__title { text-transform: uppercase; font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); margin: 0 0 1rem; color: var(--pd-navy); line-height: 1.15; }
.pd-adv__sub { color: var(--pd-gold-dk); margin: 0 0 2rem; font-size: 1.1rem; }
.pd-adv__list { background: #fff; border: 1px solid var(--pd-border); border-radius: 4px; padding: .5rem 2rem; }
.pd-adv__item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--pd-border); }
.pd-adv__item:last-child { border-bottom: 0; }
.pd-adv__n { color: var(--pd-gold); font-weight: 700; font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); }
.pd-adv__item :is(h3:not([class*="pd-as-"]), .pd-as-h3) { text-transform: uppercase; font-size: .98rem; margin: 0 0 .4rem; color: var(--pd-navy); }
.pd-adv__item p { margin: 0; font-size: .92rem; color: var(--pd-text); line-height: 1.5; }
@media (max-width: 820px) { .pd-adv { grid-template-columns: 1fr; gap: 1.75rem; } .pd-adv__list { padding: .5rem 1.25rem; } }
/* ── Таблицы цен — как t431 Tilda: шапка Hauora 16/500 на золоте, ячейки TildaSans 16/1.55, поля 20, строки #fff/#fbfbfb;
ширина колонки Tilda (760/960/1160) — --tbl-w, выравнивание t-align_center — .is-center, строки 27px у металла — .is-compact ── */
.pd-price-scroll { max-width: var(--tbl-w, 1160px); margin-inline: var(--tbl-ml, auto) auto; overflow-x: auto; }
.pd-price-table { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; background: none; table-layout: auto; }
.pd-price-table.is-fixed { table-layout: fixed; } /* t431 без ширин колонок — у Tilda колонки равные */
.pd-price-table th { background: var(--pd-gold); color: #fff; font: 500 16px/1.55 var(--pd-font-h); text-transform: none; letter-spacing: normal;
padding: 20px; border: 0; border-bottom: 1px solid var(--pd-border); vertical-align: top; text-align: left; }
.pd-price-table td { font: 400 16px/1.55 var(--pd-font-t); color: var(--pd-text); padding: 20px; border: 0; border-bottom: 1px solid #fbfbfb; vertical-align: top; text-align: left; }
.pd-price-table tbody tr:nth-child(odd) { background: #fff; }
.pd-price-table tbody tr:nth-child(even) { background: #fbfbfb; }
.pd-price-table.is-center th, .pd-price-table.is-center td { text-align: center; }
.pd-price-table.is-compact td { line-height: 1; padding-top: 5px; padding-bottom: 5px; }
.pd-price-table b, .pd-price-table strong { font-weight: 700; }
/* табы t395: 760×47, неактивный белый, активный navy */
.pd-price-tabs { display: flex; max-width: 760px; margin: 0 auto 30px; }
.pd-price-tab { flex: 1; height: 47px; padding: 0 10px; border: 0; background: #fff; color: var(--pd-text); cursor: pointer;
font: 500 14px/1.35 var(--pd-font-h); text-transform: uppercase; transition: color .2s, background-color .2s; }
.pd-price-tab.is-active { background: var(--pd-navy); color: #fff; font-weight: 600; }
.pd-price-tab:not(.is-active):hover { color: var(--pd-navy); }
.pd-price-panel { display: none; }
.pd-price-panel.is-active { display: block; }
/* секция цен: заголовок zero 206 (текст с 80, до таблицы 31), таблица t431 pb 30, zero CTA 149 (кнопка сверху, 80 под ней) */
.area--price { background: var(--pd-cream); padding: var(--hpt, 80px) 0 var(--tpb, 30px); }
.area--price .pd-price-cta { margin: var(--cta-mt, 30px) 0 var(--cta-mb, 50px); }
/* вкладки t395 над zero-записями (/navesy): поля записи вкладок — --zt-pt/--zt-pb, панели — целые секции */
.area--price.is-ztabs { padding-bottom: var(--zt-pb, 30px); }
.is-ztabs .pd-price-tabs { margin: var(--zt-pt, 0px) auto 0; }
.pd-price-note { display: flex; align-items: center; gap: 8px; max-width: 580px; margin: 20px 0 0; padding: 8px 16px 8px 8px; background: #fff; font-size: 16px; line-height: 1.3; color: var(--pd-text); }
.pd-price-note__ic { width: 36px; height: 36px; flex: none; }
.pd-price-note a { color: var(--pd-gold); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 620px) { .pd-price-tabs { flex-direction: column; } .pd-price-table th, .pd-price-table td { padding: 12px; } }
/* кнопка с примечанием справа (сетка 1fr auto 1fr) на узком экране не помещается — ставим в колонку по центру */
@media (max-width: 620px) {
.pd-price-cta, .pd-lcta-inline { grid-template-columns: 1fr; row-gap: 10px; justify-items: center; }
.pd-price-cta > a, .pd-price-cta--left > a, .pd-lcta-inline .pd-btn { grid-column: 1; }
.pd-price-cta .pd-price-cta__note, .pd-price-cta--left .pd-price-cta__note, .pd-lcta-inline > span { grid-column: 1; grid-row: auto; width: auto; margin-top: 0; text-align: center; }
}
/* ── Каталог проектов (Woo) — по макету 8.png ─────────────────────────── */
/* Тёмная полоса «Смотреть полный каталог» */
/* ── Баннер «Индивидуальный проект» (9.png) ───────────────────────────── */
.pd-banner { display: grid; grid-template-columns: 1fr 1fr; }
.pd-banner__media { background: linear-gradient(135deg, #2b4a5e, #17303f); background-size: cover; background-position: center; min-height: 480px; }
.pd-banner__panel { background: var(--pd-navy); color: #fff; padding: 3.5rem; display: flex; flex-direction: column; justify-content: center; }
.pd-banner__title { color: #fff; text-transform: uppercase; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem); margin: 0 0 1rem; line-height: 1.2; }
.pd-banner__sub { color: var(--pd-gold); margin: 0 0 2rem; font-size: 1rem; }
.pd-banner__policy { font-size: .82rem; color: rgba(255,255,255,.7); margin: 1.25rem 0 2rem; }
.pd-banner__policy a { color: var(--pd-gold); }
.pd-banner__phone { display: flex; align-items: center; gap: 1rem; }
.pd-banner__phone-ic { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--pd-navy); display: grid; place-items: center; flex: none; }
.pd-banner__phone-ic svg { width: 22px; height: 22px; }
.pd-banner__phone span { color: #fff; line-height: 1.4; }
.pd-banner__phone b { font-size: 1.15rem; }
.pd-banner__phone a { color: #fff; text-decoration: none; }
.pd-banner__phone a:hover b { color: var(--pd-gold); }
@media (max-width: 820px) { .pd-banner { grid-template-columns: 1fr; } .pd-banner__media { min-height: 240px; } .pd-banner__panel { padding: 2rem; } }
/* ── Виды зданий (10.png): тёмная секция + светлая карточка ────────────── */
.pd-buildings { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: stretch; background: var(--pd-cream); border-radius: 6px; padding: 3rem; }
.pd-buildings__title { text-transform: uppercase; font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); color: var(--pd-navy); margin: 0 0 1.75rem; line-height: 1.15; }
.pd-buildings__list { column-count: 2; column-gap: 2rem; list-style: none; padding: 0; margin: 0; }
.pd-buildings__list li { break-inside: avoid; position: relative; padding: .45rem 0 .45rem 1.1rem; font-size: .98rem; }
.pd-buildings__list li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 6px; height: 6px; border-radius: 50%; background: var(--pd-gold); }
.pd-buildings__list a { color: var(--pd-navy); text-decoration: none; }
.pd-buildings__list a:hover { color: var(--pd-gold-dk); }
.pd-buildings__media { columns: 2; column-gap: 1rem; }
.pd-b-tile { display: block; width: 100%; margin-bottom: 1rem; border-radius: 4px; background: linear-gradient(160deg, #2b4a5e, #17303f); break-inside: avoid; }
/* высоты плиток-заглушек (были инлайн min-height; заменятся реальными фото) */
.pd-b-tile:nth-child(1) { min-height: 200px; }
.pd-b-tile:nth-child(2) { min-height: 150px; }
.pd-b-tile:nth-child(3) { min-height: 180px; }
.pd-b-tile:nth-child(4) { min-height: 240px; }
.pd-b-tile:nth-child(5) { min-height: 160px; }
.pd-b-tile:nth-child(6) { min-height: 210px; }
/* Фото справа — две ленты во всю высоту блока, едут навстречу друг другу (класс ставит app.js). */
.pd-buildings__media.is-marquee { position: relative; overflow: hidden; columns: auto; min-height: 420px; --pd-b-gap: 1rem; }
.pd-buildings__media.is-marquee .pd-b-col { position: absolute; top: 0; bottom: 0; width: calc(50% - var(--pd-b-gap) / 2); overflow: hidden; }
.pd-buildings__media.is-marquee .pd-b-col:first-child { left: 0; }
.pd-buildings__media.is-marquee .pd-b-col:last-child { right: 0; }
.pd-buildings__media.is-marquee .pd-b-tile { min-height: 0; margin-bottom: var(--pd-b-gap); }
.pd-b-strip { animation: pd-b-up 40s linear infinite; will-change: transform; }
.pd-b-col--down .pd-b-strip { animation-name: pd-b-down; }
.pd-buildings__media.is-marquee:hover .pd-b-strip { animation-play-state: paused; }
@keyframes pd-b-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes pd-b-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .pd-b-strip { animation: none; } }
@media (max-width: 820px) {
.pd-buildings { grid-template-columns: 1fr; }
.pd-buildings__list { column-count: 1; }
.pd-buildings__media { columns: 3; }
/* на узких экранах — обычная сетка без анимации */
.pd-buildings__media.is-marquee { position: static; overflow: visible; min-height: 0; columns: 2; column-gap: var(--pd-b-gap); }
.pd-buildings__media.is-marquee .pd-b-col, .pd-buildings__media.is-marquee .pd-b-strip { display: contents; }
.pd-buildings__media.is-marquee .pd-b-tile[aria-hidden="true"] { display: none; }
.pd-b-strip { animation: none; }
}
/* ── Этапы работ (11.png): горизонтальный слайдер фото+подпись ─────────── */
.pd-steps2 { max-width: none; margin-inline: auto; padding-inline: 0; }
/* Заголовок и трек — одинаковый левый край (край контента, без доп. 22px-отступа),
галерея прокручивается на всю ширину браузера вправо. */
.pd-steps2-head { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; padding-inline: max(22px, calc((100% - var(--pd-wide)) / 2)); }
.pd-steps2-track { padding-inline: max(22px, calc((100% - var(--pd-wide)) / 2)); }
.pd-steps2-title { color: #fff; text-transform: uppercase; font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); margin: 0; line-height: 1.15; max-width: 13em; }
.pd-steps2-line { width: 90px; height: 2px; background: var(--pd-gold); flex: none; }
.pd-steps2-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 1.25rem; }
.pd-steps2-track::-webkit-scrollbar { height: 6px; }
.pd-steps2-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 3px; }
.pd-steps2-track::-webkit-scrollbar-track { background: rgba(255,255,255,.12); border-radius: 3px; }
.pd-step-slide { flex: 0 0 clamp(260px, 30%, 360px); scroll-snap-align: start; }
.pd-steps2-track, .pd-kinds { cursor: grab; }
.pd-steps2-track.is-drag, .pd-kinds.is-drag { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.pd-steps2-track.is-drag img, .pd-kinds.is-drag img, .pd-steps2-track.is-drag a, .pd-kinds.is-drag a { pointer-events: none; }
.pd-step-slide img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 4px; display: block; }
.pd-step-slide__cap { display: block; margin-top: 1rem; color: #fff; text-align: center; font-size: .95rem; line-height: 1.4; }
/* ── SEO-статья «Дома под ключ» (12.png) ──────────────────────────────── */
.pd-article__title { text-transform: uppercase; font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.5rem); color: var(--pd-navy); margin: 0 0 1.75rem; line-height: 1.15; }
.pd-article__sub { text-transform: uppercase; color: var(--pd-gold-dk); font-size: 1.02rem; font-weight: 700; margin: 2.25rem 0 1rem; letter-spacing: .02em; }
.pd-article p { margin: 0 0 1.1rem; line-height: 1.7; color: var(--pd-text); }
/* ── FAQ — как t668 Tilda: плашки 1160 без скругления через 10px, круг-иконка 40, вариант страницы — из профиля
(--zt верх заголовка, --zh высота zero-блока заголовка, --faq-pt/--faq-pb отступы записи t668) ── */
.area--faq { background: var(--pd-cream); padding: var(--hpt, 80px) 0 var(--faq-pb, 75px); }
@media (max-width: 1199px) { .area--faq { padding-top: 60px; } }
.pd-faq2-wrap { display: grid; gap: 10px; padding-top: var(--faq-pt, 15px); }
.pd-faq2 { background: #fff; border-radius: 0; }
.pd-faq2 summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 25px 60px 25px 30px;
font-family: var(--pd-font-h); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--pd-navy); text-transform: uppercase; letter-spacing: normal; }
.pd-faq--b700 .pd-faq2 summary { font-weight: 700; }
.pd-faq--c2 .pd-faq2 summary { color: var(--pd-navy-2); }
.pd-faq2 summary::-webkit-details-marker { display: none; }
.pd-faq2-ic { position: absolute; right: 30px; top: 50%; width: 40px; height: 40px; border-radius: 50%; background: var(--pd-cream); transform: translateY(-50%); transition: background-color .2s ease-in-out; }
.pd-faq2-ic::before, .pd-faq2-ic::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--pd-gold); transform: translate(-50%, -50%); transition: transform .3s ease-in-out, background-color .2s ease-in-out; }
.pd-faq2-ic::before { width: 22px; height: 1px; }
.pd-faq2-ic::after { width: 1px; height: 22px; }
.pd-faq2 summary:hover .pd-faq2-ic { background: var(--pd-gold-dk); }
.pd-faq2 summary:hover .pd-faq2-ic::before, .pd-faq2 summary:hover .pd-faq2-ic::after { background: #fff; }
.pd-faq2[open] .pd-faq2-ic::before, .pd-faq2[open] .pd-faq2-ic::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pd-faq2-a { padding: 0 30px 20px; }
.pd-faq2-t, .pd-faq2-a p, .pd-faq2-a li { margin: 0; font-family: var(--pd-font-t); font-size: 16px; line-height: 1.55; color: var(--pd-text); }
.pd-faq2-a ul, .pd-faq2-a ol { margin: 0; padding-left: 20px; }
@media (max-width: 640px) {
.pd-faq2 summary { padding: 20px 60px 20px 20px; }
.pd-faq2-ic { right: 8px; }
.pd-faq2-a { padding: 0 20px 20px; }
}
/* Кнопки-контур на тёмном */
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 2px solid #fff; color: #fff; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--pd-navy); }
/* ══ Квиз — как t835 Tilda (замеры всех шагов на 1280) ═════════════════════════════════════════
Секция: zero-заголовок (--hpt/--hsub/--hmb) + коробка 960 (поля 35/45/50) + низ --q-pb (150; у светлых 120).
Цвета записи — custom properties от конвертера: --q-bg фон секции, --q-box коробка, --q-tc заголовок шага,
--q-oc варианты, --q-ind рамка индикатора, --q-bk-* «Назад», --q-nx-* «Далее». */
.area--quiz { background: var(--q-bg, var(--pd-navy)); padding: var(--hpt, 80px) 0 var(--q-pb, 150px); }
.pd-quiz2 { position: relative; max-width: 960px; margin: 0 auto; padding: 35px 45px 50px; background: var(--q-box, var(--pd-cream)); color: var(--q-oc, #535353); }
.pd-quiz2-progress { position: absolute; left: 0; right: 0; top: -5px; height: 5px; background: #cbcbcb; }
.pd-quiz2.is-final .pd-quiz2-progress { top: 66px; }
.pd-quiz2-progress span { display: block; width: 0; height: 100%; background: var(--pd-gold); transition: width .3s ease; }
.pd-q2-step { display: none; }
.pd-q2-step.is-active { display: block; }
.pd-q2-title { margin: 0; padding: 0 10px 20px 0; font: 400 20px/30px var(--pd-font-h); text-transform: uppercase; color: var(--q-tc, #535353); }
.pd-q2-lead { margin: -35px -45px 35px; padding: 35px 45px 0; font: 400 24px/1.5 var(--pd-font-t); color: var(--q-tc, #535353); }
/* варианты-картинки как t-img-select: колонка 204 (4:3 — 159.6), промежуток 18, ряды 22; рамка 1px снаружи колонки
(картинка 206×206 / 161.6×121.7), подпись 15/16.5 шириной колонки */
.pd-q2-cards { display: grid; grid-template-columns: repeat(4, 204px); column-gap: 18px; row-gap: 22px; margin-top: 7px; }
.pd-q2-cards--43 { grid-template-columns: repeat(5, 159.6px); }
.pd-q2-card { display: block; cursor: pointer; }
.pd-q2-card input { position: absolute; opacity: 0; pointer-events: none; }
.pd-q2-card__img { position: relative; display: block; box-sizing: content-box; width: 100%; aspect-ratio: 1; border: 1px solid rgba(83,83,83,.1); border-radius: 4px; background: #eadfce; }
.pd-q2-cards--43 .pd-q2-card__img { aspect-ratio: 4 / 3; }
.pd-q2-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.pd-q2-card__img::after { content: ""; position: absolute; top: -7px; left: -7px; width: 28px; height: 28px; border-radius: 50%; opacity: 0; transform: scale(.5); transition: all .2s ease-in;
background: var(--q-ind, #214357) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") 50% / 50% no-repeat; }
.pd-q2-card input:checked ~ .pd-q2-card__img::after { opacity: 1; transform: scale(1); }
.pd-q2-card__t { display: block; margin-top: 10px; font: 400 15px/1.1 var(--pd-font-t); color: var(--q-oc, #535353); }
/* радио и чекбоксы: пункт 20 (индикатор), шаг 35; в колонках (rd-width50/33) — сетка 427.5/280 с зазором 15;
чекбоксы в колонках — шаг 50; отступ до первого пункта 5 (колонки 20), у чекбоксов +10 */
.pd-q2-radios { display: grid; grid-template-columns: 1fr; row-gap: 15px; margin-top: 5px; }
.pd-q2-radios.is-cb { margin-top: 15px; }
.pd-q2-radios--2, .pd-q2-radios--3, .pd-q2-radios--4 { column-gap: 15px; margin-top: 20px; }
.pd-q2-radios--2 { grid-template-columns: repeat(2, 1fr); }
.pd-q2-radios--3 { grid-template-columns: repeat(3, 280px); }
.pd-q2-radios--4 { grid-template-columns: repeat(4, 1fr); }
.pd-q2-radios--2.is-cb, .pd-q2-radios--3.is-cb, .pd-q2-radios--4.is-cb { row-gap: 30px; margin-top: 30px; padding-bottom: 10px; }
.pd-q2-radio { display: flex; align-items: flex-start; gap: 10px; min-height: 20px; padding-top: 1px; cursor: pointer; font: 400 15px/1.2 var(--pd-font-t); color: var(--q-oc, #535353); }
.pd-q2-radio input[type=radio], .pd-q2-radio input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.pd-q2-radio__mark { position: relative; flex: none; box-sizing: border-box; width: 20px; height: 20px; margin-top: -1px; border: 2px solid var(--q-ind, #214357); border-radius: 50%; opacity: .6; transition: all .2s; }
.pd-q2-radio__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--q-ind, #214357); opacity: 0; transform: translate(-50%, -50%); transition: all .2s; }
.pd-q2-radio input:checked ~ .pd-q2-radio__mark, .pd-q2-radio input:checked ~ .pd-q2-radio__mark::after { opacity: 1; }
.is-cb .pd-q2-radio__mark { border-radius: 0; }
.is-cb .pd-q2-radio__mark::after { width: 8px; height: 3px; border-radius: 0; background: none; border: solid var(--q-ind, #214357); border-width: 0 0 2px 2px; transform: translate(-50%, -70%) rotate(-45deg); }
.pd-q2-own { display: none; width: 100%; margin-top: 8px; padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font: inherit; color: inherit; outline: 0; }
.pd-q2-radio--own:has(input:checked) .pd-q2-own { display: block; }
.pd-q2-radio__t { min-width: 0; }
/* телефон: белое поле 60, слева флаг и код */
.pd-q2-tel { display: flex; align-items: center; height: 60px; background: #fff; }
.pd-q2-tel__cc { display: flex; align-items: center; gap: 6px; padding: 0 12px 0 20px; }
.pd-q2-tel__flag { width: 21px; height: 14px; background: #00afca url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 14'%3E%3Ccircle cx='10.5' cy='6' r='3' fill='%23fec50c'/%3E%3Cpath d='M6 10.5h9' stroke='%23fec50c'/%3E%3C/svg%3E") center / cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.pd-q2-tel__caret { width: 0; height: 0; border: 4px solid transparent; border-top: 5px solid #9b9b9b; border-bottom: 0; }
.pd-q2-tel__code { font: 400 16px/1 var(--pd-font-t); color: #535353; }
.pd-q2-phone { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 20px 0 5px; border: 0; background: transparent; font: 400 16px/1 var(--pd-font-t); color: #535353; outline: 0; }
.pd-q2-phone::placeholder { color: #b5b5b5; }
.pd-q2-err { margin: 10px 0 0; font: 400 14px/1.3 var(--pd-font-t); color: #f95d51; }
/* кнопки: 45, поля 30, Hauora 14/600; «Назад» — контур, на первом шаге неактивна (opacity .6) */
.pd-q2-nav { display: flex; justify-content: space-between; margin-top: 80px; }
.pd-q2-back, .pd-q2-next { height: 45px; padding: 0 30px; border-radius: 0; cursor: pointer; font: 600 14px/1.4 var(--pd-font-h); transition: background-color .2s ease-in-out, opacity .3s; }
.pd-q2-back { border: 2px solid var(--q-bk-bd, #cfa384); background: var(--q-bk-bg, #f8f0eb); color: var(--q-bk-c, #cfa384); }
.pd-q2-next { margin-left: auto; border: 0; background: var(--q-nx-bg, #cfa384); color: var(--q-nx-c, #fff); }
.pd-q2-back[disabled], .pd-q2-next[disabled] { opacity: .6; pointer-events: none; }
@media (hover: hover) {
.pd-q2-back:hover { background-color: var(--q-nx-hov, #b98d66); }
.pd-q2-next:hover { background-color: var(--q-nx-hov, #b98d66); }
}
.pd-q2-done { padding: 30px 0; text-align: center; font: 400 20px/1.5 var(--pd-font-t); color: var(--q-tc, #535353); }
.pd-q2-done b { display: block; font-weight: 400; }
.pd-q2-done span { display: block; margin-top: 8px; font-size: 16px; }
@media (max-width: 1199px) { .pd-q2-cards { grid-template-columns: repeat(4, 1fr); } .pd-q2-cards--43 { grid-template-columns: repeat(5, 1fr); } .pd-q2-radios--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) { .area--quiz { padding-bottom: 90px; } .pd-quiz2 { padding: 20px 20px 55px; } .pd-quiz2.is-final .pd-quiz2-progress { top: 51px; } .pd-q2-lead { margin: -20px -20px 20px; padding: 20px 20px 0; } }
@media (max-width: 640px) {
.pd-q2-cards, .pd-q2-cards--43 { grid-template-columns: repeat(2, 1fr); column-gap: 18px; }
.pd-q2-radios--2, .pd-q2-radios--3, .pd-q2-radios--4 { grid-template-columns: 1fr; }
.pd-q2-title { font-size: 18px; line-height: 1.4; }
.pd-q2-nav { margin-top: 40px; gap: 10px; }
.pd-q2-back, .pd-q2-next { padding: 0 16px; }
}
/* ── (старый) Интерактивный квиз ──────────────────────────────────────── */
@keyframes pdFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pdShake { 0%,100%{transform:none} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
/* ── Контакты + карта (14.png) ────────────────────────────────────────── */
.pd-cb2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.pd-cb2__left { display: grid; gap: 1.5rem; align-content: center; }
.pd-cb2__c span { color: rgba(255,255,255,.7); font-size: .95rem; display: block; margin-bottom: .35rem; }
.pd-cb2__big { color: var(--pd-gold); font-size: 1.7rem; font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); text-decoration: none; display: inline-block; }
.pd-cb2__addr { text-transform: uppercase; }
.pd-cb2__btns { display: flex; gap: 1rem; margin-top: .5rem; flex-wrap: wrap; }
.pd-cb2__btn { background: var(--pd-gold); color: #fff; text-transform: uppercase; padding: 1.1rem 2.25rem; border-radius: 3px; text-decoration: none; font-weight: 700; font-size: .85rem; font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); letter-spacing: .02em; }
.pd-cb2__btn:hover { background: var(--pd-gold-dk); color: #fff; }
.pd-cb2__btn--outline { background: transparent; border: 1px solid rgba(255,255,255,.4); }
.pd-cb2__btn--outline:hover { background: rgba(255,255,255,.1); }
.pd-cb2__map { min-height: 380px; border-radius: 4px; overflow: hidden; background: #1c3548; }
.pd-cb2__map iframe { width: 100%; height: 100%; border: 0; display: block; min-height: 380px; }
@media (max-width: 820px) { .pd-cb2 { grid-template-columns: 1fr; } }
/* ── Попап заявки ─────────────────────────────────────────────────────── */
.pd-modal { position: fixed; inset: 0; z-index: 10002; display: grid; place-items: center; }
.pd-modal[hidden] { display: none; }
.pd-modal__overlay { position: absolute; inset: 0; background: rgba(20,35,46,.6); opacity: 0; transition: opacity .25s; }
.pd-modal.is-open .pd-modal__overlay { opacity: 1; }
.pd-modal__box { position: relative; z-index: 2; width: min(460px, 92vw); background: var(--pd-navy); color: #fff; border-radius: 8px; padding: 2.5rem; transform: translateY(20px) scale(.98); opacity: 0; transition: transform .25s, opacity .25s; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.pd-modal.is-open .pd-modal__box { transform: none; opacity: 1; }
.pd-modal__close { position: absolute; top: .6rem; right: .9rem; background: transparent; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.pd-modal__close:hover { color: var(--pd-gold); }
/* Ссылки-списки без подчёркивания */
.wp-block-column .wp-block-list a { text-decoration: none; }
/* project-catalog teaser (проектирование) */
.pd-pcat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.pd-pcat__card { background: #fff; border: 1px solid var(--pd-border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.pd-pcat__card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.10); transform: translateY(-3px); }
.pd-pcat__card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.pd-pcat__b { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.pd-pcat__t { font-weight: 700; color: var(--pd-navy); line-height: 1.3; }
.pd-pcat__price { font-weight: 800; color: var(--pd-navy); }
.pd-pcat__price .amount, .pd-pcat__price bdi { color: var(--pd-navy); }
.pd-pcat__btn { margin-top: auto; align-self: flex-start; }
.pd-btn--sm { padding: .55rem 1rem; font-size: .8rem; }
.pd-pcat-cta { text-align: center; margin-top: 1.75rem; }
@media (max-width: 900px) { .pd-pcat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pd-pcat { grid-template-columns: 1fr; } }
/* contacts — 3 blocks */
.pd-cb-block + .pd-cb-block { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.14); }
.pd-cb-h { margin: 0 0 1.25rem; color: #fff; }
/* rep section — dark (white brand logos need dark bg), matches original */
.area--rep { background: var(--pd-navy); color: #fff; }
.area--rep .wp-block-heading, .area--rep .pd-sec-sub { color: #fff; }
.pd-rep__card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.pd-rep__score { color: #fff; }
.pd-rep__of { color: rgba(255,255,255,.7); }
/* ── Бар консультации на Контактах (pd-consult) ── */
.pd-consult {background:#fff;border:1px solid var(--pd-border,#e7ddd4);border-radius:14px;padding:18px 22px;margin:0 0 26px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.pd-consult__lead {display:flex;align-items:center;gap:14px;flex:1 1 260px;min-width:240px}
.pd-consult__ic {flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--pd-navy,#1e3a4c);display:flex;align-items:center;justify-content:center}
.pd-consult__ic svg {width:24px;height:24px;color:var(--pd-gold,#c99a6a)}
.pd-consult__txt {display:flex;flex-direction:column;line-height:1.3}
.pd-consult__txt b {font-size:1.02rem;color:var(--pd-navy,#1e3a4c);text-transform:uppercase;letter-spacing:.02em}
.pd-consult__txt span {color:var(--pd-text,#5b5045);font-size:.9rem}
.pd-consult__btns {display:flex;flex-wrap:wrap;gap:10px 26px;flex:2 1 420px}
.pd-consult__b {display:flex;align-items:center;gap:10px;color:var(--pd-navy,#1e3a4c);font-size:.9rem;font-weight:600;text-decoration:none}
.pd-consult__b i {flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--pd-navy,#1e3a4c);display:flex;align-items:center;justify-content:center}
.pd-consult__b i svg {width:19px;height:19px;color:#fff}
.pd-consult__b:hover {color:var(--pd-gold-dk,#a97b4d)}
.pd-consult__legal {display:flex;flex-wrap:wrap;gap:10px;flex:1 1 100%}
.pd-consult__legal a {background:var(--pd-gold,#c99a6a);color:#fff;text-decoration:none;font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:11px 18px;border-radius:6px}
.pd-consult__legal a:last-child {background:transparent;color:var(--pd-navy,#1e3a4c);border:1px solid var(--pd-border,#e7ddd4)}
.pd-consult__legal a:hover {opacity:.9}
@media(max-width:720px){.pd-consult__btns {flex-direction:column;align-items:flex-start;gap:12px}}
/* ── О нас: регалии команды, подписи репутации, история ── */
.pd-team__cred {display:block;font-size:.74rem;line-height:1.35;color:var(--pd-text,#6b6155);margin-top:6px}
.pd-team__exp {display:inline-block;margin-top:8px;font-size:.72rem;font-weight:700;color:var(--pd-gold-dk,#a97b4d);text-transform:uppercase;letter-spacing:.03em}
.area--team .pd-team__card {text-align:center}
.pd-rep__link {display:block;margin-top:8px;font-size:.76rem;color:var(--pd-gold,#c99a6a);font-weight:600}
.area--history {background:var(--pd-cream,#f7efe8)}
.pd-history {display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:40px;align-items:start}
.pd-history__h {margin:0 0 20px;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--pd-navy,#1e3a4c);text-transform:uppercase;line-height:1.15}
.pd-history__l .pd-btn {margin-bottom:10px}
.pd-history__note {display:block;font-size:.82rem;color:var(--pd-text,#6b6155)}
.pd-history__r p {margin:0;font-size:1rem;line-height:1.7;color:var(--pd-text,#5b5045)}
@media(max-width:820px){.pd-history {grid-template-columns:1fr;gap:22px}}
/* ── Юридические страницы (оферта/политика) ── */
.area--legal {background:#fff}
.pd-legal {max-width:900px;margin-inline:auto;color:var(--pd-text,#3f3a34);font-size:.96rem;line-height:1.75}
.pd-legal :is(h2:not([class*="pd-as-"]), .pd-as-h2) {margin:2.4em 0 .7em;font-size:1.3rem;color:var(--pd-navy,#1e3a4c);line-height:1.3;text-transform:uppercase;letter-spacing:.01em}
.pd-legal :is(h2:not([class*="pd-as-"]), .pd-as-h2):first-child {margin-top:0}
.pd-legal :is(h3:not([class*="pd-as-"]), .pd-as-h3) {margin:1.6em 0 .5em;font-size:1.05rem;color:var(--pd-navy,#1e3a4c)}
.pd-legal p {margin:0 0 .9em}
.pd-legal ul, .pd-legal ol {margin:0 0 1em 1.3em;padding:0}
.pd-legal li {margin:.35em 0}
.pd-legal strong {color:var(--pd-navy,#1e3a4c)}
/* ═══ Лендинги материалов/типов (pd-l*) ═══ */
/* фоны секций лендинга */
.area--ldef, .area--ladv, .area--lworks, .area--lgal {background:var(--pd-cream,#f7efe8)}
.area--lseo {background:#fff}
.area--hero.area--hero {padding:0}
/* ОПРЕДЕЛЕНИЕ */
.pd-ldef {display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pd-ldef p {margin:0;font-size:1rem;line-height:1.7;color:var(--pd-text,#4a443c)}
@media(max-width:760px){.pd-ldef {grid-template-columns:1fr}}
/* ПРЕИМУЩЕСТВА 6 */
.pd-ladv {display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pd-ladv__card {background:#fff;border:1px solid var(--pd-border,#e7ddd4);border-radius:14px;padding:22px}
.pd-ladv__ic {display:inline-flex;width:46px;height:46px;border-radius:10px;background:var(--pd-navy,#1e3a4c);align-items:center;justify-content:center;margin-bottom:12px}
.pd-ladv__ic svg {width:24px;height:24px;color:var(--pd-gold,#c99a6a)}
.pd-ladv__card b {display:block;color:var(--pd-navy,#1e3a4c);font-size:1.02rem;margin-bottom:6px}
.pd-ladv__card span {color:var(--pd-text,#6b6155);font-size:.9rem;line-height:1.5}
@media(max-width:860px){.pd-ladv {grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pd-ladv {grid-template-columns:1fr}}
/* inline CTA */
/* врезка «нужна консультация?» под таблицей цен (на Tilda — у бескаркасных ангаров) */
.pd-lcta-note {margin-top:26px;text-align:center}
.pd-lcta-note b {display:block;font-family:var(--wp--preset--font-family--heading,'Hauora',sans-serif);font-size:1.1rem;color:var(--pd-navy,#1e3a4c);margin-bottom:.3rem}
.pd-lcta-note p {margin:0;color:var(--pd-text,#6b6155);font-size:.95rem}
.pd-lcta-note a {color:var(--pd-gold,#cfa384);text-decoration:none;font-weight:700}
.pd-lcta-note a:hover {text-decoration:underline}
/* ПЕРЕЧЕНЬ РАБОТ */
.pd-lworks {display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pd-lworks__col {background:#fff;border:1px solid var(--pd-border,#e7ddd4);border-radius:14px;overflow:hidden}
.pd-lworks__head {background:var(--pd-navy,#1e3a4c);color:#fff;padding:16px 20px}
.pd-lworks__head b {display:block;text-transform:uppercase;font-size:1.05rem}
.pd-lworks__head span {font-size:.82rem;color:var(--pd-gold,#c99a6a)}
.pd-lworks__col ul {margin:0;padding:16px 20px 20px 20px;list-style:none}
.pd-lworks__col li {position:relative;padding-left:26px;margin:9px 0;font-size:.9rem;line-height:1.45;color:var(--pd-text,#4a443c)}
.pd-lworks__col li::before {content:"";position:absolute;left:0;top:5px;width:15px;height:9px;border-left:2px solid var(--pd-gold,#c99a6a);border-bottom:2px solid var(--pd-gold,#c99a6a);transform:rotate(-45deg)}
/* число колонок по числу карточек (как на Tilda: 3 в ряд, много — 4) */
.pd-lworks:has(> .pd-lworks__col:nth-child(3)) {grid-template-columns:repeat(3,1fr)}
.pd-lworks:has(> .pd-lworks__col:nth-child(7)) {grid-template-columns:repeat(4,1fr)}
.pd-lworks__img {display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
/* «Преимущества:» / «Характеристики:» внутри карточки — подписи, а не пункты списка */
.pd-lworks__col li.pd-lworks__sub {padding-left:0;margin:1.1rem 0 .2rem;font-weight:700;color:var(--pd-navy,#1e3a4c);font-size:.95rem}
.pd-lworks__col li.pd-lworks__sub::before {display:none}
.pd-lworks__col li.pd-lworks__sub:first-child {margin-top:0}
.pd-lworks__col li.pd-lworks__desc {padding-left:0;margin:0 0 .9rem;color:var(--pd-text,#6b6155)}
.pd-lworks__col li.pd-lworks__desc::before {display:none}
/* карточка-текст: списки внутри .pd-lworks__text оформляем как в карточке-списке */
.pd-lworks__text ul {margin:.2rem 0 .6rem;padding:0;list-style:none}
.pd-lworks__text li {position:relative;padding-left:26px;margin:9px 0;font-size:.9rem;line-height:1.45;color:var(--pd-text,#4a443c)}
.pd-lworks__text li::before {content:"";position:absolute;left:0;top:5px;width:15px;height:9px;border-left:2px solid var(--pd-gold,#c99a6a);border-bottom:2px solid var(--pd-gold,#c99a6a);transform:rotate(-45deg)}
.pd-lworks__text p.pd-lworks__sub {margin:1.1rem 0 .2rem;font-weight:700;color:var(--pd-navy,#1e3a4c);font-size:.95rem}
@media(max-width:980px){
.pd-lworks:has(> .pd-lworks__col:nth-child(3)), .pd-lworks:has(> .pd-lworks__col:nth-child(7)) {grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
.pd-lworks, .pd-lworks:has(> .pd-lworks__col:nth-child(3)), .pd-lworks:has(> .pd-lworks__col:nth-child(7)) {grid-template-columns:1fr}
}
/* ── SEO-текст — как записи t120 Tilda (плюс таблицы t431 и ряды фото из zero-блоков внутри) ──
запись: заголовок 18/1.17 w600 золото (поля 4/14), текст 16/1.55 (поле сверху 15, снизу 3), запись pb 30 */
.area--lseo { background: var(--pd-cream); padding: var(--hpt, 80px) 0 0; }
.area--lseo .pd-sec-h--left { text-align: left; margin-inline: 0; }
.pd-lseo { max-width: 1160px; display: flow-root; font: 400 16px/1.55 var(--pd-font-t); color: var(--pd-text); }
.pd-lseo__rec--w960 { max-width: 960px; }
.pd-lseo__rec { padding-bottom: 30px; }
.pd-lseo__rec > :is(h3:not([class*="pd-as-"]), .pd-as-h3) { margin: 0; padding: 4px 0 14px; font: 600 18px/var(--tlh, 1.17) var(--pd-font-h); color: var(--pd-gold); text-transform: uppercase; letter-spacing: normal; }
/* заголовки внутри описания t120 Tilda не оформляет — остаются браузерными (1.17em, жирный, тот же цвет) */
.pd-lseo__d :is(h2:not([class*="pd-as-"]), .pd-as-h2), .pd-lseo__d :is(h3:not([class*="pd-as-"]), .pd-as-h3), .pd-lseo__d :is(h4:not([class*="pd-as-"]), .pd-as-h4) { font-family: var(--pd-font-t); font-weight: 700; line-height: 1.55; color: inherit; text-transform: none; letter-spacing: normal; padding: 0; }
.pd-lseo__d :is(h2:not([class*="pd-as-"]), .pd-as-h2) { font-size: 1.5em; }
.pd-lseo__d :is(h3:not([class*="pd-as-"]), .pd-as-h3) { font-size: 1.17em; }
.pd-lseo__d :is(h4:not([class*="pd-as-"]), .pd-as-h4) { font-size: 1em; }
.pd-lseo__d :is(h2:not([class*="pd-as-"]), .pd-as-h2), .pd-lseo__d :is(h3:not([class*="pd-as-"]), .pd-as-h3), .pd-lseo__d :is(h4:not([class*="pd-as-"]), .pd-as-h4) { margin: 0; } /* отступы дают
в тексте, как на Tilda */
/* таблицы внутри текста t120 — как у Tilda: фиксированная раскладка, рамка 1px #dcdcdc, поля 2/5, вертикально по центру */
.pd-lseo__d table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0; }
.pd-lseo__d td, .pd-lseo__d th { border: 1px solid #dcdcdc; padding: 2px 5px; vertical-align: middle; text-align: left; font-weight: 400; }
.pd-lseo__d th { font-weight: 700; }
.pd-lseo__d table p { margin: 0; }
.pd-lseo__rec.is-tt-none :is(h3:not([class*="pd-as-"]), .pd-as-h3) { text-transform: none; }
.pd-lseo__d { margin-top: -6px; padding: var(--dpt, 15px) 0 3px; font-size: var(--dfs, 16px); line-height: var(--dlh, 1.55); font-weight: var(--dfw, 400); }
.pd-lseo__rec > :is(h3:not([class*="pd-as-"]), .pd-as-h3) + .pd-lseo__d { margin-top: -6px; }
.pd-lseo__d p { margin: 0; } /* абзацы в описании t120 у Tilda без отступов */
.pd-lseo__d ul, .pd-lseo__d ol { margin: 0 0 10px; padding-left: 20px; }
.pd-lseo__d li { margin: 0; }
.pd-lseo__d strong, .pd-lseo__d b, .pd-lseo__rec > :is(h3:not([class*="pd-as-"]), .pd-as-h3) strong { font-weight: 700; }
.pd-lseo__d a { color: var(--pd-gold); }
.pd-lseo .pd-price-scroll { margin-inline: 0; }
/* таблица, нарисованная в zero-блоке: геометрия ячеек из Tilda (--ml/--mt/--w/--lh), строки --rh/--rbg; zero pb 30 */
.pd-lseo__rec--ztbl { padding-bottom: 30px; }
.pd-ztable-wrap { margin-inline: 0; }
.pd-ztable { width: var(--zt-w); table-layout: fixed; border-collapse: collapse; border-spacing: 0; }
.pd-ztable tr { background: var(--rbg, #fff); }
.pd-ztable th, .pd-ztable td { height: var(--rh); padding: 0; border: 0; vertical-align: top; text-align: left; font-size: 16px; }
.pd-ztable th { font-family: var(--pd-font-h); font-weight: 500; color: #fff; }
.pd-ztable td { font-family: var(--pd-font-t); font-weight: 400; color: var(--pd-text); }
.pd-ztable span { display: block; width: var(--w); margin: var(--mt) 0 0 var(--ml); line-height: var(--lh); text-align: var(--ta, left); }
.pd-lseo__imgs { display: flex; gap: 30px; padding-bottom: 30px; }
.pd-lseo__imgs figure { flex: 0 0 280px; margin: 0; }
.pd-lseo__imgs img { width: 280px; height: 280px; object-fit: cover; background: #d4d4d4; }
.pd-lseo__imgs figcaption { margin: 15px 0 0; font: 400 16px/1.55 var(--pd-font-t); color: var(--pd-text); text-align: center; }
/* галереи внутри SEO-текста: внутренний отступ сверху 20 (у t660/t155) + pt/pb записи (--gpt/--gpb) */
.pd-lseo__gal { display: grid; gap: 20px; padding: calc(20px + var(--gpt, 0px)) 0 var(--gpb, 30px); }
.pd-lseo__gal img { width: 100%; height: 100%; object-fit: cover; }
/* t660: крупная 766.3 слева + две 373.6 справа, зазоры 20; сверху 20, снизу 20 + pb 30 */
.pd-lseo__gal--660 { grid-template-columns: 766.3px 373.6px; grid-template-rows: 373.6px 373.6px; padding-bottom: calc(20px + var(--gpb, 30px)); }
.pd-lseo__gal--660 img:first-child { grid-row: 1 / 3; }
.pd-lseo__gal--169, .pd-lseo__gal--155 { grid-template-columns: 560px 560px; grid-template-rows: 320px 320px; column-gap: 40px; }
.pd-lseo__gal--169 img:first-child, .pd-lseo__gal--155 img:first-child { grid-row: 1 / 3; }
/* SEO-текст HTML-блоком t123 (фасады, сварка): стили .pd-block Tilda; у записи нет полей — отступ даёт margin h2 (46) */
.area--lseo.is-html { padding: 0; }
.pd-lseo--html { max-width: 1160px; margin: 0 auto; }
.pd-lseo--html :is(h2:not([class*="pd-as-"]), .pd-as-h2) { margin: 46px 0 20px; font: 500 38px/1.25 var(--pd-font-h); color: var(--pd-navy); text-transform: uppercase; }
.pd-lseo--html :is(h3:not([class*="pd-as-"]), .pd-as-h3) { margin: 30px 0 10px; font: 600 18px/1.3 var(--pd-font-h); color: var(--pd-gold); text-transform: uppercase; letter-spacing: .3px; }
.pd-lseo--html p { margin: 0 0 16px; font: 400 16px/24.8px var(--pd-font-t); color: var(--pd-text); }
.pd-lseo--html ul { margin: 0 0 16px; padding-left: 22px; }
.pd-lseo--html li { margin: 0 0 8px; font: 400 16px/24.8px var(--pd-font-t); color: var(--pd-text); }
.pd-lseo--html strong { color: var(--pd-navy); font-weight: 600; }
.pd-lseo--html a { color: var(--pd-gold); }
.pd-lseo--html table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; }
.pd-lseo--html th { background: var(--pd-gold); color: #fff; font: 500 16px var(--pd-font-h); text-transform: uppercase; padding: 14px 16px; text-align: left; }
.pd-lseo--html td { font-size: 16px; line-height: normal; color: var(--pd-text); padding: 12px 16px; text-align: left; border-bottom: 1px solid #ececec; }
.pd-lseo--html table { font-family: var(--pd-font-t); }
.pd-lseo__author { margin-top: 42px; background: #fcf8f3; border-left: 4px solid var(--pd-gold); border-radius: 10px; padding: 24px 28px; }
.pd-lseo__author :is(h2:not([class*="pd-as-"]), .pd-as-h2) { margin-top: 0; }
.pd-lseo--html .pd-lseo__author-name { margin: 0 0 10px; font: 600 20px var(--pd-font-h); color: var(--pd-navy); }
@media (max-width: 960px) {
.pd-lseo__imgs { flex-wrap: wrap; gap: 20px; }
.pd-lseo__imgs figure { flex: 1 1 calc(50% - 10px); }
.pd-lseo__imgs img { width: 100%; height: auto; aspect-ratio: 1; }
.pd-lseo__gal--660, .pd-lseo__gal--169, .pd-lseo__gal--155 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; column-gap: 20px; }
.pd-lseo__gal img:first-child { grid-row: auto; grid-column: 1 / 3; }
.pd-lseo--html :is(h2:not([class*="pd-as-"]), .pd-as-h2) { font-size: var(--pd-fs-h2); }
}
@media (max-width: 640px) {
.pd-lseo--html { padding-inline: 0; }
.pd-lseo--html :is(h2:not([class*="pd-as-"]), .pd-as-h2) { font-size: 24px; margin: 32px 0 14px; }
.pd-lseo--html :is(h3:not([class*="pd-as-"]), .pd-as-h3) { font-size: 16px; }
.pd-lseo--html table { display: block; overflow-x: auto; }
.pd-lseo--html th, .pd-lseo--html td { padding: 10px 12px; font-size: 15px; }
.pd-lseo__author { padding: 18px 16px; }
}
/* галерея */
.pd-lgal {display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.pd-lgal {grid-template-columns:repeat(2,1fr)}}
/* реальные фото галереи лендингов */
.pd-lgal--photos {display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pd-lgal__img {width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
@media(max-width:860px){.pd-lgal--photos {grid-template-columns:1fr 1fr}}
/* ═══ КАТАЛОГ WOO (2026-09-15): карточка списка как t-store Tilda — фото 4:3, название, описание, цена, кнопка ═══ */
.pd-shop ul.products, .pd-prod-related ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.75rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.pd-shop ul.products::before, .pd-shop ul.products::after { display: none; content: none; }
.pd-shop ul.products li.product, .pd-prod-related li.product { width: auto; margin: 0; padding: 0; float: none; text-align: center; }
.pd-card { display: flex; flex-direction: column; align-items: center; height: 100%; text-decoration: none; color: inherit; }
.pd-card__img { display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; background: #eadfce; margin-bottom: 1rem; }
.pd-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.pd-card:hover .pd-card__img img { transform: scale(1.04); }
.pd-card__t { display: block; font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); font-size: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--pd-gold); line-height: 1.3; margin: 0 0 .5rem; }
.pd-card:hover .pd-card__t { color: var(--pd-gold-dk); }
.pd-card__d { display: block; font-size: .9rem; color: var(--pd-text); line-height: 1.5; margin: 0 0 .6rem; }
.pd-card__p { display: block; color: var(--pd-navy); font-weight: 600; font-size: 1rem; margin: 0 0 1rem; }
.pd-card__p .amount, .pd-card__p bdi { color: inherit; }
.pd-card__btn { margin-top: auto; display: inline-block; background: var(--pd-gold); color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; padding: .8rem 1.6rem; border-radius: 2px; font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); font-weight: 600; transition: background .15s; }
.pd-card:hover .pd-card__btn { background: var(--pd-gold-dk); }
.pd-shop .pd-page-lead { margin-bottom: 2.5rem; }
.pd-shop .woocommerce-pagination { width: 100%; }
@media (max-width: 900px) { .pd-shop ul.products, .pd-prod-related ul.products { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } }
@media (max-width: 420px) { .pd-shop ul.products, .pd-prod-related ul.products { gap: 1.75rem .75rem; } .pd-card__btn { padding: .7rem 1rem; font-size: .72rem; } .pd-card__t { font-size: .85rem; } .pd-card__d { font-size: .82rem; } }
/* ═══ КАРТОЧКА ТОВАРА (parts/product.php, 2026-09-15): галерея слева, инфо справа, как попап t-store Tilda ═══ */
.pd-shop--single .pd-shop-wrap { padding-block: 2.5rem 4.5rem; }
.pd-prod { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: start; }
.pd-prod__gallery { position: sticky; top: 92px; }
.pd-prod__main { position: relative; border-radius: 6px; overflow: hidden; background: #fff; }
.pd-prod__img { display: block; aspect-ratio: 4/3; cursor: zoom-in; }
.pd-prod__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-prod__img--empty { cursor: default; }
.pd-prod__img--empty img { object-fit: contain; padding: 15%; }
.pd-prod__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: var(--pd-navy); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: background .15s; padding: 0; }
.pd-prod__nav:hover { background: #fff; }
.pd-prod__nav--prev { left: 12px; }
.pd-prod__nav--next { right: 12px; }
.pd-prod__nav::before { content: ""; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: -3px; }
.pd-prod__nav--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.pd-prod__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin-top: .6rem; }
.pd-prod__thumb { padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; cursor: pointer; aspect-ratio: 4/3; opacity: .7; transition: opacity .15s, border-color .15s; }
.pd-prod__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-prod__thumb:hover, .pd-prod__thumb.is-active { opacity: 1; border-color: var(--pd-gold); }
.pd-prod__title { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem); text-transform: uppercase; color: var(--pd-gold-dk); letter-spacing: .02em; line-height: 1.2; margin: 0 0 .75rem; font-weight: 600; }
.pd-prod__price { font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); font-size: 1.6rem; font-weight: 700; color: var(--pd-navy); margin: 0 0 1.25rem; }
.pd-prod__price .amount, .pd-prod__price bdi { color: inherit; }
.pd-prod__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 0 0 1.75rem; }
.pd-prod__cta .pd-btn { padding: 1rem 2.25rem; font-size: .9rem; }
.pd-prod__tel { color: var(--pd-navy); font-weight: 700; font-size: 1.1rem; text-decoration: none; white-space: nowrap; }
.pd-prod__tel:hover { color: var(--pd-gold-dk); }
.pd-prod__text { color: var(--pd-text); font-size: .98rem; line-height: 1.7; }
.pd-prod__text p { margin: 0 0 1rem; }
.pd-prod__text p:last-child { margin-bottom: 0; }
.pd-prod__text strong { color: var(--pd-navy); }
.pd-prod__text em { font-size: .92rem; }
.pd-prod__chars { margin: 1.75rem 0 0; padding: 0; border-top: 1px solid var(--pd-border); }
.pd-prod__char { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--pd-border); font-size: .95rem; margin: 0; }
.pd-prod__char dt { color: var(--pd-text); margin: 0; }
.pd-prod__char dd { color: var(--pd-navy); font-weight: 600; margin: 0; text-align: right; }
.pd-prod-related { margin-top: 4.5rem; }
.pd-prod-related .pd-sec-h { margin-bottom: 2.25rem; }
@media (max-width: 900px) {
.pd-prod { grid-template-columns: 1fr; gap: 1.75rem; }
.pd-prod__gallery { position: static; }
.pd-prod__thumbs { grid-template-columns: repeat(5, 1fr); }
.pd-prod-related { margin-top: 3rem; }
}
@media (max-width: 480px) {
.pd-prod__thumbs { grid-template-columns: repeat(4, 1fr); }
.pd-prod__cta .pd-btn { width: 100%; text-align: center; }
.pd-prod__char { grid-template-columns: 1fr; gap: .15rem; }
.pd-prod__char dd { text-align: left; }
}
/* Лайтбокс галереи товара */
.pd-lb { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; }
.pd-lb[hidden] { display: none; }
.pd-lb__overlay { position: absolute; inset: 0; background: rgba(10,20,28,.92); }
.pd-lb__img { position: relative; z-index: 2; max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.pd-lb__close { position: absolute; z-index: 3; top: 10px; right: 14px; width: 48px; height: 48px; border: 0; background: transparent; color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer; padding: 0; }
.pd-lb__nav { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.pd-lb__nav[hidden] { display: none; }
.pd-lb__nav:hover { background: rgba(255,255,255,.28); }
.pd-lb__nav--prev { left: 16px; }
.pd-lb__nav--next { right: 16px; }
.pd-lb__nav::before { content: ""; width: 12px; height: 12px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: -4px; }
.pd-lb__nav--prev::before { transform: rotate(-135deg); margin-left: 4px; }
/* ═══ RECHECK-ФИКСЫ (2026-08-31): невидимые заголовки на navy + плейсхолдеры фото ═══ */
/* Базовое правило h1..h6{color:navy} (стр.26) перебивало наследуемый #fff в тёмных
секциях лендинга → заголовок героя и каталог-CTA были navy-на-navy (невидимы). */
/* страховка для любых заголовков внутри тёмных area-секций лендингов */
.area--hero :is(h1,h2,h3,.pd-as-h1,.pd-as-h2,.pd-as-h3):not(.pd-as-p), .area--catalog-cta :is(h1,h2,h3,.pd-as-h1,.pd-as-h2,.pd-as-h3):not(.pd-as-p), .area--steps :is(h1,h2,h3,.pd-as-h1,.pd-as-h2,.pd-as-h3):not(.pd-as-p) { color: #fff; }
/* ═══ ОТСТУПЫ ЛЕНДИНГОВ (2026-08-31): секции лендинга имели padding-block:0 → сжато. ═══
Оригинал Tilda ~80-89px вертикали. Даём такой же «воздух» как в faq/cta (spacing-80). */
.area--ldef, .area--ladv, .area--lworks, .area--lgal, .area--reviews, .area--pcatalog {
padding-block: clamp(4rem, 6.5vw, 5.5rem);
}
.area--catalog-cta { padding-block: clamp(4rem, 6.5vw, 5.5rem); }
/* больше воздуха под заголовками секций и вокруг элементов */
.pd-ladv { gap: 24px; }
.pd-ladv__card { padding: 26px 24px; }
.pd-lworks { gap: 26px; }
/* перечень работ / определение — чуть крупнее внутренние отступы */
.pd-ldef { gap: 2.4rem; }
/* юр.страницы (оферта/политика) — были без вертикального паддинга */
.area--legal { padding-block: clamp(3rem, 5vw, 4.5rem); }
/* ═══ ОБЩИЕ СЕКЦИИ (2026-09-11): крошки, форма, WhatsApp, контакты страницы, отзывы, теги ═══ */
/* Хлебные крошки — как t758 на Tilda: строка 16/19.2px, отступ после ссылки и «»» по 10px (на ≤480 — 12px и 5px);
фон, отступы и цвета страницы приходят custom properties из inc/chrome/map.php (--cr-*) */
.pd-crumbs { background: var(--cr-bg, #f8f0eb); padding: var(--cr-pt, 15px) 0 var(--cr-pb, 15px); font-family: 'TildaSans', Arial, sans-serif; line-height: normal; }
.pd-crumbs__in { max-width: 1160px; margin: 0 auto; }
.pd-crumbs ol { list-style: none; margin: 0; padding: 0; }
.pd-crumbs li { display: inline-block; margin: 0; font-size: 16px; white-space: nowrap; color: var(--cr-a, #535353); }
.pd-crumbs li > a, .pd-crumbs li > span { float: left; min-height: 19.2px; line-height: 19.2px; font-weight: 400; }
.pd-crumbs li > a { padding-right: 10px; color: var(--cr-a, #535353); text-decoration: none; white-space: initial; transition: color .3s ease-in-out; }
.pd-crumbs li > a:hover { color: var(--cr-hov, #cfa384); }
.pd-crumbs .pd-crumbs__sep { padding-right: 10px; height: 19.2px; color: var(--cr-sep, #cfa384); }
.pd-crumbs [aria-current] { color: var(--cr-cur, #214357); white-space: initial; }
@media (max-width: 1200px) { .pd-crumbs__in { max-width: 940px; } }
@media (max-width: 960px) { .pd-crumbs__in { max-width: 640px; padding: 0 20px; box-sizing: border-box; } }
@media (max-width: 480px) { .pd-crumbs li { font-size: 12px; } .pd-crumbs li > a, .pd-crumbs .pd-crumbs__sep { padding-right: 5px; } }
/* Форма заявки (модалка + контактный блок) */
.pd-lead__title { color: #fff; text-transform: uppercase; margin: 0 0 .5rem; font-size: 1.5rem; }
.pd-lead__sub { color: rgba(255,255,255,.7); margin: 0 0 1.25rem; }
.pd-lead__form { display: flex; flex-direction: column; gap: .9rem; }
.pd-lead__form input { padding: .95rem 1.1rem; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); border-radius: 3px; color: #fff; font-size: 1rem; }
.pd-lead__form input::placeholder { color: rgba(255,255,255,.55); }
.pd-lead__form button { background: var(--pd-gold); color: #fff; border: 0; padding: 1rem; border-radius: 3px; cursor: pointer; text-transform: uppercase; font-weight: 700; font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); }
.pd-lead__form button:hover { background: var(--pd-gold-dk); }
.pd-lead__form button:disabled { opacity: .6; cursor: default; }
.pd-lead__err { color: #ffb3a7; font-size: .9rem; margin: 0; }
.pd-lead__done { color: var(--pd-gold); font-size: 1.1rem; padding: 1rem 0; margin: 0; }
.pd-lead__policy { font-size: .8rem; color: rgba(255,255,255,.6); margin: 1rem 0 0; }
.pd-lead__policy a { color: var(--pd-gold); }
.pd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
/* Контактный блок страницы: слева контакты, справа форма */
.pd-cb2--form { align-items: start; }
/* контактный блок без формы: в ленте блога на Tilda только контакты и две кнопки */
.pd-cb2--solo { grid-template-columns: 1fr; }
.pd-cb2--solo .pd-cb2__left { max-width: 760px; }
.pd-cb2__form { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 2rem; }
@media (max-width: 820px) { .pd-cb2__form { padding: 1.25rem; } }
/* Плавающая кнопка — как t898 на Tilda: круг 60px #edb195 с иконкой, right 65 / bottom 50; по нажатию выезжает WhatsApp */
.pd-wa-float { position: fixed; right: 65px; bottom: 50px; z-index: 1000; width: 60px; height: 60px; pointer-events: none; }
.pd-wa-float:has(.pd-wa-float__input:checked) { z-index: 10000; }
.pd-wa-float__input { display: none; }
.pd-wa-float__btn { position: relative; z-index: 2; display: block; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: #edb195; box-shadow: 0 0 20px 0 rgba(0,0,0,.3); cursor: pointer; pointer-events: all; transition: all .2s ease-in-out; }
.pd-wa-float__btn:hover { box-shadow: 0 0 20px 0 rgba(0,0,0,.4); }
.pd-wa-float__img { position: absolute; inset: 0; background: url(../img/tilda/wa-float.svg) center / cover no-repeat; transition: all .2s linear; }
.pd-wa-float__close { position: absolute; inset: 0; margin: auto; opacity: 0; visibility: hidden; transform: scale(.1); transition: all .3s ease-in-out; }
.pd-wa-float__input:checked + .pd-wa-float__btn { background: #fff; }
.pd-wa-float__input:checked + .pd-wa-float__btn .pd-wa-float__img { opacity: 0; visibility: hidden; }
.pd-wa-float__input:checked + .pd-wa-float__btn .pd-wa-float__close { opacity: 1; visibility: visible; transform: scale(1); }
.pd-wa-float__link { position: absolute; inset: 0; margin: auto; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 20px 0 rgba(0,0,0,.3); opacity: 0; visibility: hidden; pointer-events: all; transition: all .2s ease-in-out; }
.pd-wa-float__link svg { display: block; }
.pd-wa-float__input:checked ~ .pd-wa-float__link { opacity: 1; visibility: visible; transform: translate(0, -135%); }
.pd-wa-float__tip { position: absolute; right: 80px; top: 50%; transform: translateY(-50%); padding: 9px 13px; border-radius: 3px; background: #292929; color: #fff; font: 500 15px/1.35 'Hauora', Arial, sans-serif; white-space: nowrap; opacity: 0; transition: all .1s linear; }
.pd-wa-float__tip::after { content: ''; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); border: 10px solid transparent; border-left-color: #292929; }
.pd-wa-float__link:hover .pd-wa-float__tip { opacity: .85; }
/* Отзывы: карточки репутации со ссылками + реальный отзыв */
.area--reviews .pd-rep { margin-top: .5rem; }
.pd-rep__card { text-decoration: none; display: block; transition: transform .15s, box-shadow .15s; }
a.pd-rep__card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(33,67,87,.12); }
.pd-testi2 { max-width: 820px; margin: 2.5rem auto 0; padding: 1.75rem 2rem; background: #fff; border-left: 4px solid var(--pd-gold); border-radius: 0 8px 8px 0; }
.pd-testi2 p { font-style: italic; font-size: 1.1rem; color: var(--pd-navy); margin: 0 0 1rem; }
.pd-testi2 footer b { display: block; color: var(--pd-navy); }
.pd-testi2 footer span { color: var(--pd-text); font-size: .9rem; }
/* «А также мы делаем» */
.area--related { background: #fff; padding-block: clamp(3rem, 5vw, 4.5rem); }
.pd-tags--center { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
/* Дата обновления статьи */
.pd-single-date { display: block; text-align: center; margin: .5rem 0 0; color: var(--pd-gold-dk); }
.pd-single-upd { margin-left: 1rem; color: var(--pd-text); font-size: .9rem; }
/* Лендинг: секции, которые строит конвертер */
.pd-ldef--img { grid-template-columns: 1fr 1fr; align-items: center; }
.pd-ldef__img { margin: 0; }
.pd-ldef__img img { width: 100%; border-radius: 10px; }
.pd-ltabs { display: grid; gap: 1rem; }
.pd-ltabs .pd-faq2-a ul, .pd-ltabs .pd-faq2-a ol { margin: 0 0 .75rem 1.2rem; padding: 0; }
.pd-ltabs .pd-faq2-a li { margin: .3rem 0; }
.pd-lgen { max-width: 900px; margin-inline: auto; }
.pd-lgen p { margin: 0 0 1rem; line-height: 1.7; }
.pd-lgen__imgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.pd-lgen__imgs img { width: 100%; border-radius: 8px; }
.area--lgen { background: #fff; padding-block: clamp(3rem, 5vw, 4.5rem); }
.area--ltabs { background: var(--pd-cream); padding-block: clamp(4rem, 6.5vw, 5.5rem); }
.pd-lworks__head span { display: block; }
/* Секции из конвертера: цена в заголовке героя, иконки карточек, группы строк таблиц, шаги, примечания */
.pd-hero3-price { display: block; color: var(--wp--preset--color--highlight, #ffd76a); font-size: .85em; margin-top: .35rem; }
.pd-ladv__icimg { width: 28px; height: 28px; object-fit: contain; }
.pd-price-table .pd-tr-group th { background: var(--pd-cream); color: var(--pd-navy); font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .02em; }
.pd-lworks__note { margin: 0; padding: 0 20px 18px; font-size: .84rem; color: var(--pd-text); }
.area--steps2 .pd-adv__item :is(h3:not([class*="pd-as-"]), .pd-as-h3) { text-transform: none; font-size: 1.02rem; }
.pd-hero3-cards { margin-top: 2rem; }
.pd-hero3-cards .pd-ladv { margin-top: 1rem; }
.pd-hero3-cards .pd-ladv__card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.pd-hero3-cards .pd-ladv__card b { color: var(--pd-gold); }
.pd-hero3-cards .pd-ladv__card span { color: rgba(255,255,255,.85); }
.pd-hero3-sub { color: var(--pd-gold); text-transform: uppercase; font-weight: 700; margin: 0 0 .5rem; }
.area--related .pd-mat-cards { margin-top: 1rem; }
.pd-mat-card__ph { display: block; aspect-ratio: 16/10; border-radius: 4px; background: #eadfce url(../img/placeholder.svg) center/cover no-repeat; }
/* Карточки репутации внутри светлой секции отзывов; статы на светлом фоне */
.area--reviews .pd-rep__card { background: #fff; border-color: var(--pd-border); }
.area--reviews .pd-rep__score, .area--reviews .pd-rep__of { color: var(--pd-navy); }
.area--reviews .pd-rep__logo { filter: none; }
.pd-stats--light { margin: 0 0 2rem; }
.pd-stats--light .pd-stat__n { color: var(--pd-gold-dk); }
.pd-stats--light .pd-stat__d { color: var(--pd-text); }
/* ═══ КОНВЕРТЕР, доп. секции (2026-09-11): фото-колонки, пары «подпись/значение», список в индив-баннере,
секция с формой заявки, иконки USP из Tilda, карточки-ссылки, плитки без ссылок, колонки/статы в герое ═══ */
.pd-pcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: .5rem; }
.pd-pcol { background: var(--pd-cream); border-radius: 10px; overflow: hidden; }
.pd-pcol img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.pd-pcol p { margin: 0; padding: .55rem 1rem; color: var(--pd-text); font-size: .95rem; border-top: 1px solid var(--pd-border); }
.pd-pcol p:first-of-type { border-top: 0; padding-top: .9rem; }
.pd-pcol p:last-child { padding-bottom: 1rem; }
.pd-pcol b { color: var(--pd-navy); }
.pd-pairs { min-width: 0; max-width: 820px; margin-inline: auto; }
.pd-pairs th { width: 55%; }
.pd-banner__list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .55rem; }
.pd-banner__list li { position: relative; padding-left: 1.4rem; color: var(--pd-gold); font-size: 1rem; }
.pd-banner__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--pd-gold); }
.area--lform { background: var(--pd-navy); color: #fff; padding-block: clamp(4rem, 6.5vw, 5.5rem); }
.area--lform .pd-lead { max-width: 640px; margin-inline: auto; text-align: center; }
.area--lform .pd-lead__form { max-width: 440px; margin-inline: auto; }
.pd-hero3-usp .pd-ic__img { width: 100%; height: 100%; object-fit: contain; }
a.pd-ladv__card { text-decoration: none; color: inherit; display: block; }
a.pd-ladv__card:hover b { color: var(--pd-gold-dk); }
.pd-tags span { display: inline-flex; align-items: center; padding: .7rem 1.25rem; background: #fff; border: 1px solid var(--pd-border); border-radius: 10px; color: var(--pd-navy); font-weight: 600; font-size: .98rem; }
div.pd-mat-card { cursor: default; }
.pd-sec-sub--light { color: rgba(255,255,255,.75); }
.pd-hero3-cards .pd-lworks--hero { grid-template-columns: repeat(3, 1fr); margin-top: 1.25rem; }
@media (max-width: 860px) { .pd-hero3-cards .pd-lworks--hero { grid-template-columns: 1fr; } }
.pd-hero3-cards .pd-stats--light { margin: 2rem 0 0; }
.pd-hero3-cards .pd-stats--light .pd-stat__n { color: var(--pd-gold); }
.pd-hero3-cards .pd-stats--light .pd-stat__d { color: rgba(255,255,255,.8); }
.pd-lworks__col--text .pd-lworks__text { padding: 16px 20px 20px; }
.pd-lworks__col--text .pd-lworks__text p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.55; color: var(--pd-text); }
.pd-lworks__col--text .pd-lworks__text p:last-child { margin-bottom: 0; }
/* ═══ ПЕРЕПРОВЕРКА 2026-09-15: секции 1:1 с Tilda (этапы на лендингах, USP/команда проектирования, виды беседок, портфолио с подписями) ═══ */
.area--steps { padding-block: clamp(4rem, 6.5vw, 5.5rem); }
.pd-team--experts { grid-template-columns: repeat(3, 1fr); }
.pd-team__card--link { text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--pd-border); border-radius: 12px; padding: 0 0 1.5rem; overflow: hidden; display: flex; flex-direction: column; align-items: center; transition: transform .15s, box-shadow .15s; }
.pd-team__card--link .pd-team__img { width: 100%; }
.pd-team__card--link .pd-team__img img { border-radius: 0; margin-bottom: 1.1rem; }
.pd-team__card--link .pd-team__name, .pd-team__card--link .pd-team__role, .pd-team__card--link .pd-team__cred, .pd-team__card--link .pd-team__exp { padding-inline: 1.25rem; }
.pd-team__card--link .pd-team__cred { margin-top: .6rem; }
.pd-team__more { margin-top: 1.1rem; }
a.pd-team__card--link:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(33,67,87,.12); }
a.pd-team__card--link:hover .pd-team__name { color: var(--pd-gold-dk); }
.area--kinds { background: var(--pd-cream); padding-block: clamp(4rem, 6.5vw, 5.5rem); }
.pd-kinds { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x proximity; padding: .25rem .25rem 1.25rem; -webkit-overflow-scrolling: touch; }
.pd-kinds::-webkit-scrollbar { height: 6px; }
.pd-kinds::-webkit-scrollbar-thumb { background: rgba(33,67,87,.25); border-radius: 3px; }
.pd-kind { flex: 0 0 clamp(260px, 30%, 360px); scroll-snap-align: start; background: #fff; border: 1px solid var(--pd-border); border-radius: 14px; padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; }
.pd-kind__t { display: block; text-transform: uppercase; color: var(--pd-navy); font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); font-size: 1rem; letter-spacing: .02em; margin: 0 0 .9rem; }
.pd-kind__img { display: block; margin: 0 0 1rem; border-radius: 8px; overflow: hidden; aspect-ratio: 5/3; }
.pd-kind__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-kind__d { margin: 0 0 .9rem; color: var(--pd-text); font-size: .92rem; line-height: 1.5; }
.pd-kind__adv { display: block; font-weight: 600; color: var(--pd-navy); font-size: .9rem; margin: auto 0 .35rem; padding-left: 1.4rem; position: relative; }
.pd-kind__adv::before { content: ""; position: absolute; left: 0; top: .2em; width: 14px; height: 14px; border-radius: 50%; background: #35a36a; }
.pd-kind__adv::after { content: ""; position: absolute; left: 5px; top: .45em; width: 4px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.pd-kind__list { margin: 0; padding: 0 0 0 1.4rem; list-style: none; }
.pd-kind__list li { position: relative; font-size: .9rem; color: var(--pd-text); padding: .15rem 0 .15rem .9rem; }
.pd-kind__list li::before { content: ""; position: absolute; left: 0; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--pd-gold); }
.pd-lgal--caps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pd-lgal__fig { margin: 0; }
.pd-lgal__fig figcaption { margin-top: .6rem; color: var(--pd-navy); font-size: .92rem; line-height: 1.4; }
@media (max-width: 900px) { .pd-lgal--caps { grid-template-columns: repeat(2, 1fr); } .pd-team--experts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pd-lgal--caps { grid-template-columns: 1fr; } .pd-team--experts { grid-template-columns: 1fr; } }
/* SEO-текст под каталогом /catalog (t120-блоки Tilda) */
.pd-shop-text .area--lseo { background: var(--pd-cream); }
.pd-shop-text .pd-sec-h--left { text-align: left; }
.pd-shop-text .pd-lseo :is(h3:not([class*="pd-as-"]), .pd-as-h3) { color: var(--pd-gold); font-size: 18px; text-transform: uppercase; margin: 1.8em 0 .5em; }
.pd-shop .pd-page-note { text-align: center; color: var(--pd-text); font-size: .85rem; margin: -1.75rem 0 2.25rem; }
.pd-shop-text .area--contacts { padding-block: var(--wp--preset--spacing--80); }
/* Абзацы после карточек преимуществ (беседки: «Из чего делаем…») — обычный текст, а не подзаголовок */
.pd-ladv ~ .pd-sec-sub { margin: 1.5rem auto 0; text-align: left; max-width: 900px; color: var(--pd-text); }
.pd-ladv ~ .pd-sec-sub + .pd-sec-sub { margin-top: .6rem; }
/* Заголовки на тёмных секциях (отзывы/статистика/CTA) — белые, иначе navy-на-navy невидимы */
.area--testimonial .wp-block-heading, .area--stats .wp-block-heading, .area--cta .wp-block-heading, .area--contacts .wp-block-heading { color: #fff; }
/* ── Боковое меню: пункты без ссылки и разделитель (меню Астаны, как на Tilda) ── */
.pd-drawer__link--text { cursor: default; color: #4a6373; }
.pd-drawer__sep { height: 1px; margin: .6rem 0; background: repeating-linear-gradient(90deg, rgba(33,67,87,.3) 0 6px, transparent 6px 12px); }
.pd-submenu__text { display: block; padding: .5rem 0 .5rem 1rem; font-size: .8rem; color: #8a99a4; }
.pd-submenu li:last-child .pd-submenu__text { padding-bottom: .8rem; }
/* ── Фильтры каталога (как t-store filters на Tilda: заголовки-раскрывашки, поиск, сортировка) ── */
.pd-cf { margin: 0 0 2.5rem; color: var(--pd-text); }
.pd-cf__row { display: flex; align-items: center; gap: .75rem 1.5rem; flex-wrap: wrap; }
.pd-cf__groups { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.5rem; flex: 1 1 auto; min-width: 0; }
.pd-cf__item { position: relative; }
.pd-cf__title {
list-style: none; cursor: pointer; user-select: none; position: relative; padding-right: 15px; white-space: nowrap;
font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); font-weight: 800; font-size: .74rem;
text-transform: uppercase; letter-spacing: .02em; color: #535353; transition: opacity .1s;
}
.pd-cf__title::-webkit-details-marker { display: none; }
.pd-cf__title::after { content: ""; position: absolute; right: 2px; top: 50%; width: 5px; height: 5px; border-right: 1px solid #535353; border-bottom: 1px solid #535353; transform: translateY(-70%) rotate(45deg); }
.pd-cf__title:hover, .pd-cf__item[open] > .pd-cf__title { opacity: .55; }
.pd-cf__item.is-set > .pd-cf__title { color: var(--pd-gold-dk); }
.pd-cf__item.is-set > .pd-cf__title::after { border-color: var(--pd-gold-dk); }
.pd-cf__panel { position: absolute; left: -10px; top: 100%; z-index: 30; margin-top: 8px; min-width: 220px; background: #fff; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.2); padding: 12px 10px; }
.pd-cf__list { max-height: 320px; overflow: auto; overscroll-behavior: contain; }
.pd-cf__opt { position: relative; display: flex; align-items: center; gap: .6rem; padding: .3rem .25rem; cursor: pointer; font-size: .9rem; color: #222; white-space: nowrap; }
.pd-cf__opt.is-hidden { display: none; }
.pd-cf__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pd-cf__box { width: 18px; height: 18px; border: 2px solid #535353; opacity: .6; position: relative; flex: none; transition: opacity .2s, border-color .2s; }
.pd-cf__box--r { border-radius: 50%; }
.pd-cf__opt:hover .pd-cf__box, .pd-cf__opt input:checked ~ .pd-cf__box { opacity: 1; }
.pd-cf__opt input:checked ~ .pd-cf__box { border-color: var(--pd-gold-dk); }
.pd-cf__opt input:checked ~ .pd-cf__box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; border: solid var(--pd-gold-dk); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pd-cf__opt input:checked ~ .pd-cf__box--r::after { left: 3px; top: 3px; width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--pd-gold-dk); transform: none; }
.pd-cf__opt input:focus-visible ~ .pd-cf__box { outline: 2px solid var(--pd-gold); outline-offset: 2px; }
.pd-cf__expand { display: block; margin: .6rem .25rem 0; padding: 0; border: 0; border-bottom: 1px dashed currentColor; background: none; cursor: pointer; font: inherit; font-size: .85rem; line-height: 1.2; color: #535353; }
.pd-cf__apply { display: block; margin: .8rem .25rem 0; padding: .45rem 1rem; border: 0; border-radius: 3px; background: var(--pd-gold); color: #fff; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.pd-cf__apply:hover { background: var(--pd-gold-dk); }
.pd-cf__apply[hidden], .pd-cf__expand[hidden] { display: none; }
.pd-cf__tools { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.pd-cf__search { position: relative; display: inline-flex; }
.pd-cf__search input { width: 170px; padding: .38rem 2rem .38rem .7rem; border: 1px solid #ddd; border-radius: 3px; background: #f8f8f8; color: #222; font: inherit; font-size: .9rem; -webkit-appearance: none; appearance: none; }
.pd-cf__search input::placeholder { color: #aaa; }
.pd-cf__search input:focus { outline: none; border-color: var(--pd-gold); }
.pd-cf__search button { position: absolute; right: 2px; top: 0; bottom: 0; width: 28px; border: 0; background: transparent; cursor: pointer; color: #535353; display: grid; place-items: center; padding: 0; }
.pd-cf__sort select {
-webkit-appearance: none; appearance: none; max-width: 240px; padding: .38rem 1.9rem .38rem .7rem; border: 1px solid #ddd; border-radius: 3px; cursor: pointer;
background: #f8f8f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23222'/%3E%3C/svg%3E") no-repeat right .65rem center;
color: #222; font: inherit; font-size: .9rem;
}
.pd-cf__sort select:focus { outline: none; border-color: var(--pd-gold); }
.pd-cf__chosen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin-top: 1.1rem; }
.pd-cf__found { font-size: .85rem; color: #535353; margin-right: .3rem; }
.pd-cf__chip { display: inline-flex; align-items: center; gap: .45rem; max-width: 260px; padding: .15rem .7rem .2rem .6rem; border-radius: 30px; background: rgba(130,130,130,.2); color: #222; font-size: .85rem; line-height: 1.4; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .1s; }
.pd-cf__chip::before { content: "✕"; font-size: .6rem; }
.pd-cf__chip:hover { opacity: .6; color: #222; }
.pd-cf__reset { border-bottom: 1px dashed currentColor; color: #535353; font-size: .85rem; line-height: 1.2; text-decoration: none; }
.pd-cf__reset:hover { opacity: .6; }
.pd-cf__mob, .pd-cf__mob-search { display: none; }
.pd-cf__empty { text-align: center; color: #535353; padding: 2rem 0 3rem; margin: 0; }
.pd-shop .pd-page-note + .pd-cf { margin-top: -.5rem; }
@media (max-width: 960px) {
.pd-cf__row { gap: .75rem; }
.pd-cf__mob { display: inline-flex; align-items: center; gap: .55rem; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--wp--preset--font-family--heading,'Hauora',sans-serif); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; color: #535353; line-height: 24px; }
.pd-cf__mob[aria-expanded="true"] { opacity: .5; }
.pd-cf__mob-search { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; color: #535353; }
.pd-cf.is-search .pd-cf__mob-search { opacity: .5; }
.pd-cf__tools { display: contents; }
.pd-cf__search { display: none; flex: 0 0 100%; order: 3; }
.pd-cf.is-search .pd-cf__search { display: flex; }
.pd-cf__search input { width: 100%; font-size: 16px; }
.pd-cf__groups { display: none; flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 0; order: 4; border-top: 1px solid rgba(0,0,0,.2); }
.pd-cf.is-open .pd-cf__groups { display: flex; }
.pd-cf__item { border-bottom: 1px solid rgba(0,0,0,.2); padding: .7rem 0; }
.pd-cf__title { font-size: .78rem; white-space: normal; padding-right: 18px; }
.pd-cf__title::after { right: 4px; }
.pd-cf__panel { position: static; min-width: 0; margin: .6rem 0 0; padding: 0; background: transparent; box-shadow: none; }
.pd-cf__opt { white-space: normal; }
.pd-cf__sort { display: none; flex: 0 0 100%; order: 5; padding: .7rem 0 0; }
.pd-cf.is-open .pd-cf__sort { display: block; }
.pd-cf__sort select { width: 100%; max-width: none; font-size: 16px; }
.pd-cf__chosen { margin-top: .9rem; }
}
/* ══ «Список на белой панели» — «Почему мы №1», «Как мы работаем» (zero Tilda: липкая левая колонка + белая панель 609) ══
Вертикаль и ширины пунктов — custom properties от конвертера (ручные координаты Tilda); ниже 1200 — обычный поток. */
.area--advantages.is-lp { background: var(--lp-bg, var(--pd-cream)); padding: var(--lp-pt, 70px) 0 var(--lp-pb, 70px); }
.pd-lp { display: flex; align-items: flex-start; gap: var(--lp-gap, 63px); }
.pd-lp__side { position: sticky; top: var(--lp-pt, 70px); flex: 0 0 var(--lp-sw, 487px); margin-top: var(--lp-ht, 0px); }
.pd-lp__h { margin: 0; font: 500 38px/48px var(--pd-font-h); letter-spacing: normal; text-transform: uppercase; color: var(--pd-navy); }
.pd-lp__sub { margin: var(--lp-subm, 21px) 0 0; font: 400 20px/1.55 var(--pd-font-t); color: var(--pd-gold); }
.pd-lp__side .pd-price-cta { margin-top: var(--lp-ctam, 30px); }
.pd-lp__side .pd-price-cta__note { color: var(--pd-navy); }
.pd-lp__list { flex: 0 0 var(--lp-pw, 609px); box-sizing: border-box; margin: var(--lp-pt2, 0px) 0 0; padding: 0 0 0 var(--lp-pp, 40px); list-style: none; background: #fff; }
.pd-lp__item { position: relative; display: grid; grid-template-columns: var(--nc, 35px) 1fr; align-items: start; margin: 0; padding: var(--ip, 16px) 0 calc(var(--sm, 20px) + 1px); }
.pd-lp__item.is-last { padding-bottom: var(--sm, 40px); }
.pd-lp__n { grid-row: 1 / 3; font: 500 16px/21px var(--pd-font-h); letter-spacing: .5px; color: var(--pd-gold); }
.pd-lp__t { grid-column: 2; margin: 0; font: 500 16px/21px var(--pd-font-h); letter-spacing: .5px; text-transform: uppercase; color: var(--pd-navy); }
.pd-lp__d { grid-column: 2; max-width: var(--dw, 494px); margin: var(--tm, 10px) 0 0 var(--dl, 0px); font: 400 16px/21px var(--pd-font-t); color: var(--pd-text); }
.pd-lp__item:not(.is-last)::after { content: ""; position: absolute; left: 0; bottom: 0; width: calc(var(--s2l, 35px) + var(--s2w, 494px)); height: 1px;
background: linear-gradient(#dadada, #dadada) 0 0 / var(--s1w, 18px) 1px no-repeat, linear-gradient(#dadada, #dadada) var(--s2l, 35px) 0 / var(--s2w, 494px) 1px no-repeat; }
@media (max-width: 1199px) {
.area--advantages.is-lp { padding: 60px 0; }
.pd-lp { flex-direction: column; gap: 30px; }
.pd-lp__side { position: static; flex: none; margin: 0; }
.pd-lp__list { flex: none; width: 100%; margin: 0; padding: 10px 30px 30px; }
.pd-lp__item { padding: 16px 0 17px; }
.pd-lp__item.is-last { padding-bottom: 0; }
.pd-lp__d { max-width: none; margin: 8px 0 0; }
.pd-lp__item:not(.is-last)::after { width: 100%; background: #dadada; }
}
@media (max-width: 640px) {
.pd-lp__h { font-size: var(--pd-fs-h2); }
.pd-lp__list { padding: 5px 20px 20px; }
.pd-lp__side .pd-price-cta { grid-template-columns: 1fr; row-gap: 10px; }
.pd-lp__side .pd-price-cta__note { grid-row: 2; grid-column: 1; margin: 0; width: auto; }
}
/* ══ Первый экран — zero Tilda: фото 1160×H, H1 строками (шаг 50), примечание в строке, кнопка 402×68 + описание, USP ══
Все размеры — custom properties от конвертера: --ph фото, --hg/--hfs/--hlh/--hls заголовок, --nl/--nt примечание,
--bt/--bw/--bh кнопка, --dg/--dt/--dw/--dlh описание, --ut/--ic USP, у пункта --ml/--tg/--tw/--tt, --pb низ. */
.area--hero.is-z { background: var(--hero-bg, var(--pd-navy)); padding: 0 0 var(--pb, 60px); color: #fff; }
.pd-hero__photo { height: var(--ph, 493px); overflow: hidden; background: #2d485b; }
.pd-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pho, 50% 50%); }
.pd-hero__h { margin: var(--hg, 30px) 0 0; font: 400 var(--hfs, 38px)/var(--hlh, 50px) var(--pd-font-h); letter-spacing: var(--hls, .2px); text-transform: uppercase; color: #fff; }
.pd-hero__note { position: relative; top: var(--nt, 24px); display: inline-block; vertical-align: top; margin-left: var(--nl, 15px); font: 200 16px/21px var(--pd-font-t); letter-spacing: .5px; text-transform: none; white-space: nowrap; color: #fff; }
.pd-hero__note em { font-style: italic; }
.pd-hero__row { display: flex; align-items: flex-start; height: var(--bh, 68px); margin-top: var(--bt, 40px); }
.pd-hero__btn { display: flex; flex: 0 0 var(--bw, 402px); align-items: center; justify-content: center; height: var(--bh, 68px); padding: 0 20px; box-sizing: border-box;
background: var(--pd-gold); color: #fff; font: 500 16px/1.35 var(--pd-font-t); text-align: center; text-transform: uppercase; text-decoration: none; transition: background-color .2s ease-in-out; }
.pd-hero__btn:hover { background: #b98d66; color: #fff; }
.pd-hero__desc { flex: 0 1 var(--dw, 600px); max-width: var(--dw, 600px); margin: var(--dt, 0px) 0 0 var(--dg, 30px); font: 300 20px/var(--dlh, 1.3) var(--pd-font-t); color: #fff; }
.pd-hero__usps { display: flex; align-items: flex-start; margin: var(--ut, 41px) 0 0; padding: 0; list-style: none; }
.pd-hero__usps li { display: flex; flex: none; align-items: flex-start; margin: 0 0 0 var(--ml, 0px); }
.pd-hero__ic { flex: none; width: var(--ic, 40px); height: var(--ic, 40px); object-fit: contain; }
.pd-hero__ut { width: var(--tw, 200px); margin: var(--tt, 0px) 0 0 var(--tg, 15px); font: 400 16px/1.25 var(--pd-font-t); color: #fff; }
.pd-hero__ut strong, .pd-hero__ut b { font-weight: 700; }
@media (max-width: 1199px) {
.area--hero.is-z { padding-bottom: 50px; }
.pd-hero__photo { height: min(var(--ph, 493px), 45vw); }
.pd-hero__h { margin-top: 30px; font-size: min(var(--hfs, 38px), 34px); line-height: 1.3; }
.pd-hero__note { position: static; display: block; margin: 8px 0 0; white-space: normal; }
.pd-hero__row { flex-wrap: wrap; height: auto; margin-top: 30px; gap: 20px; }
.pd-hero__desc { flex: 1 1 100%; max-width: none; margin: 0; order: -1; }
.pd-hero__usps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 30px; margin-top: 40px; }
.pd-hero__usps li { margin: 0; }
.pd-hero__ut { width: auto; margin-top: 0; }
}
@media (max-width: 640px) {
.pd-hero__photo { height: 56vw; margin: 0 -20px; }
.pd-hero__h { font-size: 24px; }
.pd-hero__h br { display: none; }
.pd-hero__btn { flex: 1 1 100%; }
.pd-hero__desc { font-size: 18px; }
.pd-hero__usps { grid-template-columns: 1fr; }
}
.pd-hero__s { margin-left: var(--sl, 0px); }
@media (max-width: 1199px) { .pd-hero__s { margin-left: 0; } }
/* H1 — только та строка заголовка, что размечена h1 на Tilda (остальные строки — обычный текст, обёртка — div).
На вид строка остаётся частью общего заголовка: всё наследует от .pd-hero__h. */
.pd-hero__h h1.pd-hero__s { display: inline; margin: 0 0 0 var(--sl, 0px); padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
@media (max-width: 1199px) { .pd-hero__h h1.pd-hero__s { margin-left: 0; } }
/* ══ Сетка карточек (zero Tilda: карточки одного размера, внутри — иконка/номер/заголовок/текст/фото) ══
Сетка рядами .pd-cg__row (--grmt), у карточки --cw/--ch размер и --cml/--cmt сдвиг от соседа (ручные позиции Tilda).
Внутри карточки — строки .zr (--zrmt) из элементов (--zml/--zmt/--zw/--zh) в координатах Tilda; ниже 1200 — обычный поток. */
.area--ladv.is-cg { background: var(--cg-bg, var(--pd-navy)); padding: var(--hpt, 80px) 0 var(--cg-pb, 80px); }
.pd-cg { margin-top: var(--gmt, 40px); }
.pd-cg__row { display: flex; align-items: flex-start; margin-top: var(--grmt, 0px); }
@media (min-width: 1200px) {
.pd-cg.is-scroll, .pd-cg-sc { margin-right: calc(50% - 50vw); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.pd-cg.is-scroll::-webkit-scrollbar, .pd-cg-sc::-webkit-scrollbar { display: none; }
.pd-cg.is-scroll .pd-cg__row { width: max-content; padding-right: 40px; }
/* сетка с фото слева: у Tilda листается весь артборд целиком, вместе с фото */
.pd-cg-sc > .pd-cg-row { width: max-content; padding-right: 40px; }
}
.pd-cg-row { display: flex; align-items: flex-start; margin: var(--gmt, 40px) 0 0 var(--pml, 0px); }
.pd-cg-row .pd-cg { flex: 1; margin-top: 0; }
.pd-cg-photo { flex: 0 0 var(--pw, 580px); height: var(--ph, 580px); margin-top: var(--pmt, 0px); overflow: hidden; }
.pd-cg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-cg__card { flex: 0 0 var(--cw, 367px); min-height: var(--ch, 222px); box-sizing: border-box; margin: var(--cmt, 0px) 0 0 var(--cml, 0px); overflow: hidden; background: var(--cbg, #f8f0eb); border-radius: var(--cr, 0px); }
.pd-cg__card.is-photo { overflow: visible; }
.zt-a, .zt a { color: inherit; text-decoration: none; }
a.zi img { transition: opacity .2s; }
a.zi:hover img { opacity: .9; }
.area--ladv.is-cg .pd-price-cta { margin-top: var(--cta-mt, 40px); }
.zr { display: flex; align-items: flex-start; margin-top: var(--zrmt, 0px); }
.zt { margin: 0; font-family: var(--pd-font-t); font-size: var(--zfs, 16px); line-height: var(--zlh, 21px); font-weight: var(--zfw, 400); color: var(--zc, #535353);
letter-spacing: var(--zls, normal); text-transform: var(--ztt, none); text-align: var(--zta, left); }
.zt--h { font-family: var(--pd-font-h); }
.zt strong, .zt b { font-weight: 700; }
.zt p, .zt ul, .pd-lp__d p { margin: 0; }
.zt ul, .zt ol { padding-left: 20px; } /* списки в тексте zero — отступ как у Tilda */
.zi { display: block; overflow: hidden; height: var(--zh, auto); background: var(--zbg, transparent); border-radius: var(--zr, 0px); }
.zi img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--zop, 50% 50%); }
.zi--contain img { object-fit: contain; }
.zs { display: block; box-sizing: border-box; height: var(--zh, 1px); background: var(--zbg, transparent); border: var(--zbd, 0); border-radius: var(--zr, 0px); }
.zb { min-height: 0; height: var(--zbh, 69px); font-size: var(--zbfs, 16px); font-weight: var(--zbfw, 400); line-height: var(--zblh, 24.8px); text-transform: var(--zbtt, none);
color: var(--zbc, #fff); background-color: var(--zbbg, var(--pd-gold)); border: var(--zbbd, 0); border-radius: var(--zbr, 0px); }
.zb:hover { color: var(--zbc, #fff); background-color: var(--zbhov, #b98d66); }
span.zb { cursor: default; } /* кнопка без ссылки (на Tilda — плашка: стрелка, подпись) */
.zr > * { position: relative; z-index: var(--zz, auto); flex: none; width: var(--zw, auto); margin: var(--zmt, 0px) 0 0 var(--zml, 0px); }
.zl { display: flex; align-items: center; justify-content: var(--zjc, flex-start); height: var(--zh, auto); white-space: nowrap; text-decoration: none; } /* кнопка-текст Tilda: одна строка по центру высоты */
a.zl:hover { opacity: .85; }
@media (max-width: 1199px) {
.area--ladv.is-cg { padding: 60px 0; }
.pd-cg, .pd-cg-row { margin: 40px 0 0; }
.pd-cg { display: flex; flex-direction: column; gap: 20px; }
.pd-cg__row { flex-wrap: wrap; gap: 20px; margin: 0; }
.pd-cg-row { flex-direction: column; gap: 20px; }
.pd-cg-photo { flex: none; width: 100%; height: auto; aspect-ratio: 1; margin: 0; }
.pd-cg__card { flex: 1 1 calc(50% - 10px); min-height: 0; margin: 0; padding: 24px; }
.pd-cg__card.is-photo { padding: 0; }
.pd-cg__card.is-photo .zi { width: 100%; height: auto; aspect-ratio: 275 / 170; }
.zr { flex-wrap: wrap; margin-top: 12px; }
.zr:first-child { margin-top: 0; }
.zr > * { width: auto; max-width: 100%; margin: 0; }
.zr > * + * { margin-left: 12px; }
.zr > .zt:only-child { flex: 1 1 100%; }
/* мобильный поток zero: элементы не шире колонки, картинки в своих пропорциях, подложки скрыты */
.pd-cg__row, .pd-cg__card, .zr, .zr > * { min-width: 0; }
.zi { height: auto; aspect-ratio: var(--zar, auto); }
.zr > .zi { width: var(--zw, auto); } /* иконки и фото — не шире своего размера Tilda */
.pd-cg__card.is-photo .zr > .zi { width: 100%; }
.zi img { max-width: 100%; }
.zs--bg { display: none; }
}
@media (max-width: 640px) { .pd-cg__card { flex-basis: 100%; } }
/* ══ Баннер «Разработайте индивидуальный проект» (zero Tilda: панель 1159×H, фото слева, колонка текста) ══ */
.area--banner.is-bn { background: var(--bn-sec, var(--pd-cream)); padding: var(--bn-pt, 80px) 0 var(--bn-pb, 80px); }
.pd-bn { display: flex; min-height: var(--bn-h, 526px); background: var(--bn-bg, var(--pd-navy)); }
.pd-bn__photo { flex: 0 0 var(--bn-pw, 539px); overflow: hidden; }
.pd-bn__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-bn__col { flex: 1; min-width: 0; }
/* форма телефона (zero-форма Tilda): поле 472.5×55, зазор 25, кнопка 472×55 */
.zf { display: grid; grid-template-columns: 472.5px; row-gap: 25px; margin: 0; }
.zf__tel { display: flex; align-items: center; height: 55px; background: #fff; }
.zf__tel input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 20px 0 5px; border: 0; background: transparent; font: 400 16px/1 var(--pd-font-t); color: #535353; outline: 0; }
.zf__tel input::placeholder { color: #b5b5b5; }
.zf__btn { width: 472px; height: 55px; border: 0; border-radius: 0; background: var(--pd-gold); color: #fff; cursor: pointer; font: 600 16px/1.2 var(--pd-font-h); text-transform: uppercase; transition: background-color .2s ease-in-out; }
.zf__btn:hover { background: #b98d66; }
.zf__err { margin: -15px 0 0; font: 400 14px/1.3 var(--pd-font-t); color: #f95d51; }
.zf__done { margin: 0; font: 400 18px/1.4 var(--pd-font-t); color: #fff; }
@media (max-width: 1199px) {
.area--banner.is-bn { padding: 60px 0; }
.pd-bn { flex-direction: column; min-height: 0; }
.pd-bn__photo { flex: none; height: 300px; }
.pd-bn__col { padding: 30px 24px 36px; }
.zf { grid-template-columns: minmax(0, 472px); }
.zf__btn { width: 100%; }
}
/* ══ Контактный блок (zero Tilda 489/439: подписи 16/1.55 белые, телефон и адрес Hauora 28/35 w500 золото, кнопки 251×64/65, карта справа от середины окна) ══
Вертикаль — --cb-* из профиля страницы (zero-координаты Tilda). */
.area--contacts.pd-contact-block { position: relative; overflow: hidden; background: var(--pd-navy); padding: 0; }
.pd-cb3__left { display: flex; flex-direction: column; align-items: flex-start; width: 560px; padding: var(--cb-pt, 50px) 0 var(--cb-pb, 49px); }
.pd-cb3__label, .pd-cb3__hours { display: block; font: 400 16px/25px var(--pd-font-t); color: #fff; }
.pd-cb3__big { display: block; margin-top: var(--cb-pv, 15.2px); max-width: var(--cb-aw, 449px); font: 500 28px/1.25 var(--pd-font-h); text-transform: uppercase; color: var(--pd-gold); text-decoration: none; }
.pd-cb3__phone { max-width: none; white-space: nowrap; }
a.pd-cb3__big:hover { color: #b98d66; }
.pd-cb3__label--addr { margin-top: var(--cb-al, 50px); }
.pd-cb3__addr { margin-top: var(--cb-av, 15.2px); min-height: var(--cb-avh, 70px); }
.pd-cb3__hours { margin-top: var(--cb-hr, 15px); max-width: 386px; }
.pd-cb3__btns { display: flex; align-items: flex-start; gap: 20px; margin: var(--cb-bt, 50.2px) 0 0 -1px; }
.pd-cb3__btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 251px; height: 64px; padding: 0 10px; border: 0; background: var(--pd-gold);
color: #fff; font: 400 16px/1.4 var(--pd-font-t); text-transform: uppercase; text-decoration: none; transition: background-color .2s, color .2s; }
.pd-cb3__btn:hover { background: #b98d66; color: #fff; }
.pd-cb3__btn--outline { height: 65px; border: 1px solid var(--pd-gold); background: transparent; color: var(--pd-gold); }
.pd-cb3__btn--outline:hover { background: transparent; color: #fff; }
.pd-cb3__map { position: absolute; top: 0; bottom: 0; left: 50%; width: 971px; }
.pd-cb3__map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 1199px) {
.pd-cb3__left { width: auto; padding: 50px 0; }
.pd-cb3__map { position: static; width: auto; height: 360px; margin: 0 -10px; }
.pd-cb3__addr { min-height: 0; }
}
@media (max-width: 640px) {
.pd-cb3__big { font-size: 22px; }
.pd-cb3__btns { flex-direction: column; gap: 12px; width: 100%; margin-left: 0; }
.pd-cb3__btn { width: 100%; }
.pd-cb3__map { margin: 0 -20px; }
}
/* строки H1 первого экрана разбиты как у Tilda (
), элементы стоят вручную и могут выходить за колонку — не переносим */
@media (min-width: 1200px) { .pd-hero__h { white-space: nowrap; } }
/* ══ Уникальные zero-секции — полосы записей (фон записи на всю ширину), внутри строки .zr ══ */
.area--zf { position: relative; overflow: hidden; padding: 0; background: transparent; }
.pd-zs { position: relative; display: flow-root; padding: var(--zspt, 0px) 0 var(--zspb, 0px); }
.pd-zs::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; background: var(--zsbg, transparent); }
.area--zf > .container { position: relative; z-index: 0; }
/* декор полосы (повёрнутые/выходящие за артборд картинки Tilda): на всю ширину окна, обрезан по высоте полосы */
.pd-zs__decor { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); overflow: hidden; pointer-events: none; }
.pd-zs__d { position: absolute; z-index: var(--zz, auto); left: calc(50% + var(--dl)); top: var(--dt); width: var(--dw); height: var(--dh); max-width: none; opacity: var(--do, 1); transform: rotate(var(--dr, 0deg)); }
/* полоса-лента: у Tilda артборд записи с «overflow: custom» шире сетки 1200 и листается по горизонтали
(этапы работ, ряды фото). Держим ту же раскладку в координатах Tilda и на мобильных — свайпом. */
.pd-zs.is-scroll { min-height: var(--zsh, 0px); }
.pd-zs__sc, .pd-hsc { margin-right: calc(50% - 50vw); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; }
.pd-zs__sc::-webkit-scrollbar, .pd-hsc::-webkit-scrollbar { display: none; }
.pd-zs__sc > .zr { width: max-content; flex-wrap: nowrap; padding-right: 40px; }
.pd-hsc > .pd-lseo__imgs2 { width: max-content; padding-right: 40px; }
.pd-zs__sc.is-drag, .pd-hsc.is-drag, .pd-cg-sc.is-drag { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.pd-zs__sc.is-drag img, .pd-zs__sc.is-drag a, .pd-hsc.is-drag img, .pd-hsc.is-drag a, .pd-cg-sc.is-drag img, .pd-cg-sc.is-drag a { pointer-events: none; }
/* ряд фото в SEO-тексте ниже 1200 перестраивается в сетку 2 колонки — прокрутка там не нужна */
@media (max-width: 1199px) {
.pd-zs__sc > .zr { margin-top: var(--zrmt, 0px); }
.pd-zs__sc > .zr > * { width: var(--zw, auto); max-width: none; margin: var(--zmt, 0px) 0 0 var(--zml, 0px); }
.pd-zs__sc .zi { height: var(--zh, auto); aspect-ratio: auto; }
}
@media (max-width: 1199px) { .pd-zs { padding: 40px 0; } .pd-zs__decor { display: none; } }
/* бесконечная анимация элементов zero (Tilda «шаг за шагом»): линейное смещение/поворот туда-обратно,
амплитуда и длительность — в переменных элемента (--amx/--amy/--aro/--adur); на мобильных Tilda её не проигрывает */
@keyframes pd-zanim { to { translate: var(--amx, 0px) var(--amy, 0px); rotate: var(--aro, 0deg); } }
@media (min-width: 1200px) {
.pd-zs [style*="--az:"] { animation: pd-zanim var(--adur, 10s) linear infinite var(--adir, alternate); will-change: translate; }
}
@media (prefers-reduced-motion: reduce) { .pd-zs [style*="--az:"] { animation: none; } }
/* ══ Попап товара (как t-store Tilda): карточка витрины открывается поверх страницы ══
Замеры живого /catalog (1280): оверлей rgba(0,0,0,.2), блок 1240 на фоне страницы с полем 40/20,
слева квадрат фото 560 (cover) со стрелками 30 в белых кругах, справа колонка 560: название,
через 18 цена, через 20 кнопка 45, через 30 описание, через 20 характеристики. */
/* Окно товара у каждой витрины Tilda своё (настройки блока t786): затемнение, фон, кегль названия и цены, цвета, наличие кнопки.
Значения приходят переменными --pp-* из [pd_catalog vars], app.js переносит их с витрины на окно. */
.pd-pp { position: fixed; inset: 0; z-index: 9990; overflow-y: auto; background: var(--pp-ov, rgba(0, 0, 0, .2)); }
.pd-pp[hidden] { display: none; }
/* крестик заметнее, чем у Tilda: там он 23×23 без фона в правом верхнем углу и его закрывает кнопка меню —
по просьбе заказчика кнопка закрытия видна всегда (белый круг, закреплён в углу окна), меню при этом прячем */
.pd-pp__close { position: fixed; z-index: 2; top: 15px; right: 15px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 100px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); cursor: pointer; line-height: 0; }
.pd-pp__close svg { width: 19px; height: 19px; }
.pd-pp__close:hover { background: var(--pd-cream); }
html.pd-pp-open .pd-burger { display: none; }
.pd-pp__box { position: relative; max-width: 1240px; margin: 65px auto 130px; padding: 40px 20px; background: var(--pp-bg, var(--pd-cream)); }
.pd-pp.is-loading .pd-pp__box { min-height: 320px; }
.pd-pp__prod { display: flex; align-items: flex-start; gap: 40px; padding: 0 20px; }
.pd-pp__sl { position: relative; flex: none; width: 560px; aspect-ratio: var(--pp-ar, 1); overflow: hidden; }
.pd-pp__slides { height: 100%; }
.pd-pp__ph { display: none; width: 100%; height: 100%; object-fit: cover; }
.pd-pp__ph.is-active { display: block; }
.pd-pp__arr { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 0; border-radius: 100px; background: #fff; cursor: pointer; }
.pd-pp__arr[hidden] { display: none; }
.pd-pp__arr--prev { left: 30px; }
.pd-pp__arr--next { right: 30px; }
.pd-pp__info { flex: none; width: 560px; color: var(--pp-dc, #535353); }
.pd-pp__name { margin: 0; font-family: var(--pd-font-h); font-size: var(--pp-tfs, 16px); line-height: 1.35; font-weight: 500; color: var(--pd-gold); text-transform: uppercase; }
.pd-pp__sku { margin: 4px 0 0; font-family: var(--pd-font-h); font-size: 14px; line-height: 21.7px; color: #777; }
/* у Tilda строка цены на 0.9 выше кегля (блок с line-height: normal вокруг inline-block цены и валюты) */
.pd-pp__price { margin: 18px 0 0; font-family: var(--pd-font-h); font-size: var(--pp-pfs, 16px); line-height: var(--pp-plh, 22.48px); font-weight: 500; color: var(--pp-pc, var(--pd-navy)); }
/* опции товара (металлопрокат) — как в попапе Tilda: подпись и список 150×28, стрелка-треугольник справа */
.pd-pp__opt { margin: 10px 0; }
.pd-pp__ot { width: fit-content; padding-bottom: 3px; font: 400 14px/21.7px var(--pd-font-h); color: #535353; }
.pd-pp__os { position: relative; display: table; min-width: 150px; }
.pd-pp__os::after { content: " "; position: absolute; top: 50%; right: 10px; width: 0; height: 0; transform: translateY(-50%); border-style: solid; border-width: 6px 5px 0; border-color: #000 transparent transparent; pointer-events: none; }
.pd-pp__os select { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; margin: 0; padding: 2px 30px 2px 10px; overflow-x: hidden; border: 1px solid #ddd; border-radius: 5px; background: #f8f8f8; color: #000; font: 400 14px/21.7px var(--pd-font-h); cursor: pointer; }
.pd-pp__cta { display: var(--pp-cta, flex); margin: 20px 0 0; }
.pd-pp__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 12.7px 30px; background: var(--pd-gold); color: #fff; font-size: 14px; line-height: 19.6px; font-weight: 500; text-transform: uppercase; text-decoration: none; transition: background-color .2s ease-in-out; }
.pd-pp__btn:hover { background: var(--pd-gold-dk); color: #fff; }
.pd-pp__text { margin-top: 30px; font-size: 16px; line-height: 24.8px; }
.pd-pp__text p { margin: 0; }
.pd-pp__chars { margin-top: 20px; font-size: 16px; line-height: 24.8px; }
.pd-pp__chars p { margin: 0; }
.pd-pp__ph { cursor: zoom-in; }
.pd-pp__zoom { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; padding: 15px; background: rgba(0, 0, 0, .8); cursor: zoom-out; }
.pd-pp__zoom[hidden] { display: none; }
.pd-pp__zoom img { max-width: 100%; max-height: calc(100vh - 30px); width: auto; height: auto; object-fit: contain; }
/* до 980 Tilda кладёт фото и описание в колонку (на 768 блок 640 с полем 30), ниже 640 — во всю ширину */
@media (max-width: 979px) {
.pd-pp__box { max-width: min(640px, calc(100% - 128px)); padding: 30px; }
.pd-pp__prod { display: block; padding: 0; }
.pd-pp__sl { width: auto; }
.pd-pp__info { width: auto; padding-top: 25px; }
}
@media (max-width: 639px) {
.pd-pp__close { top: 5px; right: 10px; width: 40px; height: 40px; }
.pd-pp__close svg { width: 17px; height: 17px; }
.pd-pp__box { max-width: none; margin: 50px 0 0; padding: 0 20px 60px; }
.pd-pp__info { padding-top: 30px; }
.pd-pp__btn { width: 100%; min-height: 50px; padding: 15.2px 20px; }
}
/* ══ Витрина t-store Tilda (t786) на лендингах ══
Замеры живого /kirpich (1280): сетка 4×285 с зазором 20 в контейнере 1200; поля записи — --cat-pt/--cat-pb;
строка фильтров 27.7 + 40 до карточек; фото 4:3, название через 20, описание через 8, цена через 12 (строка 26.8),
кнопка 45 прижата к низу карточки (+8 снизу), между рядами --cat-rg (vindent), «Загрузить ещё» через 50.
Типографика карточки — из настроек витрины (конвертер ставит --cat-* по t_store_init и стилям записи). */
.area--pcatalog { background: var(--cat-bg, var(--pd-cream)); padding: var(--hpt, 80px) 0 var(--cat-pb, 45px); }
.area--pcatalog > .container { max-width: var(--cat-cont, 1200px); padding-inline: var(--cat-pad, 0px); }
.pd-tstore { padding-top: var(--cat-pt, 15px); }
.pd-tstore__grid { display: grid; grid-template-columns: repeat(var(--cat-cols, 4), var(--cat-cw, 285px)); column-gap: 20px; row-gap: var(--cat-rg, 40px); justify-content: start; }
.pd-tcard { display: flex; flex-direction: column; text-align: center; padding-bottom: 8px; }
.pd-tcard[hidden] { display: none; }
.pd-tcard__img { position: relative; display: block; width: 100%; aspect-ratio: var(--cat-ar, 1.3333); overflow: hidden; }
.pd-tcard__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-tcard__img .pd-tcard__img2 { opacity: 0; transition: opacity .1s linear; }
.pd-tcard:hover .pd-tcard__img2 { opacity: 1; }
.is-contain .pd-tcard__img img { object-fit: contain; } /* «исходные пропорции» Tilda: фото по центру рамки */
.pd-tcard__t { display: block; margin-top: 20px; font: var(--cat-tfw, 500) var(--cat-tfs, 20px)/var(--cat-tlh, 27px) var(--pd-font-h); text-transform: uppercase; color: var(--cat-tc, var(--pd-gold)); text-decoration: none; }
.pd-tcard__t:hover { color: var(--cat-tc, var(--pd-gold)); }
.pd-tcard__d { margin-top: 8px; font: 400 var(--cat-dfs, 16px)/1.55 var(--pd-font-t); color: var(--cat-dc, var(--pd-text)); }
.pd-tcard__p { box-sizing: border-box; height: var(--cat-pwh, 26.8px); margin-top: 12px; padding-top: var(--cat-ppt, 1.9px); white-space: nowrap;
font: var(--cat-pfw, 500) var(--cat-pfs, 18px)/var(--cat-plh, 24.3px) var(--pd-font-h); color: var(--cat-pc, var(--pd-navy)); }
.pd-tcard__pc { margin-left: 5px; }
.pd-tcard__btn { display: inline-flex; align-items: center; justify-content: center; align-self: center; box-sizing: border-box; height: 45px; margin-top: auto; padding: 0 30px;
background: var(--cat-bbg, var(--pd-gold)); border-radius: var(--cat-brad, 0); color: #fff; text-decoration: none;
font: 500 14px/19.6px var(--pd-font-t); text-transform: uppercase; transition: background-color .2s ease-in-out; }
.pd-tcard > .pd-tcard__btn { margin-bottom: 0; }
.pd-tcard > :nth-last-child(2) { margin-bottom: 20px; }
.pd-tcard__btn:hover { background: #b98d66; color: #fff; }
.pd-tstore__more-wrap { text-align: center; }
.pd-tstore__more-wrap[hidden], .pd-cf__empty[hidden], .pd-cf__chosen[hidden] { display: none; }
.pd-tstore__more { display: inline-flex; align-items: center; box-sizing: border-box; height: 45px; margin: 50px 0 0; padding: 0 30px; border: 0; background: var(--cat-bbg, var(--pd-gold)); border-radius: var(--cat-brad, 0);
color: #fff; cursor: pointer; font: 500 14px/19.6px var(--pd-font-t); text-transform: uppercase; }
.pd-tstore__more:hover { background: #b98d66; color: #fff; }
a.pd-tstore__more { text-decoration: none; }
.pd-tstore__more.is-loading { opacity: .6; pointer-events: none; }
.pd-tstore .pd-cf__empty { padding: 20px 0 0; }
/* пустая витрина, как на Tilda: рамка золотом на всю сетку, текст по центру */
.pd-tstore__empty { display: table; box-sizing: border-box; width: 100%; height: var(--cat-eh, 360px); padding: 40px 40px 50px; border: 1px solid var(--pd-gold); color: var(--pd-gold); text-align: center; font-family: var(--pd-font-h); }
.pd-tstore__empty span { display: table-cell; vertical-align: middle; }
.pd-tstore__empty[hidden] { display: none; }
/* строка фильтров витрины — как t-store__filter */
@media (min-width: 961px) {
.pd-tstore .pd-cf { margin: 0 0 40px; color: #535353; }
.pd-tstore .pd-cf__row { flex-wrap: nowrap; gap: 0; min-height: 27.7px; }
.pd-tstore .pd-cf__groups { gap: 0; flex-wrap: nowrap; }
.pd-tstore .pd-cf__item { margin: 0 20px 4px 0; }
.pd-tstore .pd-cf__title { padding-right: 14px; font: var(--cat-ffw, 700) 14px/21.7px var(--pd-font-h); letter-spacing: normal; color: #535353; }
.pd-tstore .pd-cf__title::after { top: 6.35px; right: 1px; width: 5px; height: 5px; box-sizing: content-box; border: 1px solid transparent; border-right-color: #535353; border-bottom-color: #535353; transform: rotate(45deg); }
.pd-tstore .pd-cf__tools { gap: 20px; }
.pd-tstore .pd-cf__search input { box-sizing: border-box; width: 150px; height: 27.2px; padding: 0 30px 0 10px; border-color: #ddd; background: #f8f8f8; font: 400 14px/25.2px var(--pd-font-h); color: #000; }
.pd-tstore .pd-cf__search button { right: 0; width: 29px; padding: 0 8px 0 7px; box-sizing: border-box; }
.pd-tstore .pd-cf__search button svg { width: 13px; height: 13px; }
.pd-tstore .pd-cf__sort select { box-sizing: border-box; width: 200px; max-width: none; height: 27.7px; padding: 2px 30px 2px 10px; color: #000; font: 400 14px/21.7px var(--pd-font-h);
background: #f8f8f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23000'/%3E%3C/svg%3E") no-repeat right 10px top 10.85px; }
}
@media (max-width: 1199px) {
.area--pcatalog { padding: 60px 0; }
.area--pcatalog > .container { max-width: 960px; padding-inline: 10px; }
.pd-tstore { padding-top: 40px; }
.pd-tstore__grid { grid-template-columns: repeat(3, 1fr); column-gap: 20px; }
}
@media (max-width: 960px) { .area--pcatalog > .container { max-width: 640px; padding-inline: 20px; } .pd-tstore__grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } .pd-tcard__t { font-size: 16px; line-height: 1.35; } .pd-tstore .pd-cf { margin-bottom: 24px; } }
/* ══ Текстовые попапы t390 (.pd-pop): как у Tilda — фон rgba(83,83,83,.4), окно 560 по центру, поля 40/45,
заголовок Hauora 32/1.17 #2d485b, текст TildaSans 16/1.3, крестик 23px золотом в правом верхнем углу окна браузера ══ */
.pd-pop { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; box-sizing: border-box; padding: 65px 20px; overflow-y: auto; background: rgba(83, 83, 83, .4); }
.pd-pop[hidden] { display: none; }
.pd-pop__box { position: relative; box-sizing: border-box; width: 100%; max-width: var(--pop-w, 560px); margin: auto; padding: 40px 45px; background: #fff; text-align: left; }
.pd-pop__close { position: fixed; top: 10px; right: 10px; z-index: 1; width: 43px; height: 43px; padding: 10px; border: 0; background: none; cursor: pointer; line-height: 0; }
.pd-pop__t { margin: 0; font: 500 32px/1.17 var(--pd-font-h); color: #2d485b; }
.pd-pop__d { margin-top: 17px; font: 400 16px/1.3 var(--pd-font-t); color: var(--pd-text); }
.pd-pop__d ul, .pd-pop__d ol { margin: 0 0 10px; padding-left: 20px; }
.pd-pop__d li { margin: 0; }
.pd-pop__d strong, .pd-pop__d b { font-weight: 700; }
html.pd-noscroll { overflow: hidden; }
@media (max-width: 639px) { .pd-pop__box { padding: 30px 20px; } .pd-pop__t { font-size: 24px; } }
/* ══ Галереи лендингов ══
Лента t1148 (.pd-rib): фото 500×500 (ниже 960 — 350), зазор 20, первый кадр по краю контейнера 1160, прокрутка вбок,
стрелки 40×40 #2d485b по краям окна (40px), по центру высоты; hover — золото.
Слайдер t604 (.pd-sl): окно 860 по центру, кадр 760×460, соседние кадры видны по краям, стрелки 30px золотом на границах окна,
точки 8px (белые, активная — золото) под кадром. Отступы — поля записи Tilda (--gpt/--gpb). */
.area--lgal.is-rib, .area--lgal.is-sl { padding: var(--hpt, 80px) 0 var(--gpb, 75px); overflow: hidden; }
.pd-rib { position: relative; margin: 0 calc(50% - 50vw); padding-top: var(--gpt, 0px); }
.pd-rib__track { display: flex; gap: var(--rib-gap, 20px); padding: 0 max(20px, calc(50vw - 580px)); overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.pd-rib__track::-webkit-scrollbar { display: none; }
.pd-rib__track:focus-visible { outline: 2px solid var(--pd-gold); outline-offset: -2px; }
.pd-rib__item { flex: 0 0 var(--rib-h, 500px); }
.pd-rib__item img { display: block; width: 100%; height: var(--rib-h, 500px); object-fit: cover; user-select: none; }
.pd-rib__cap { margin-top: 13px; font: 500 16px/21.6px var(--pd-font-h); color: var(--pd-navy); } /* подпись t1148__title */
.pd-rib__descr { margin-top: 5px; font: 400 14px/1.55 var(--pd-font-t); color: var(--pd-text); }
.pd-rib__btn { position: absolute; top: calc(50% + var(--gpt, 0px) / 2); z-index: 2; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50px; background: #2d485b; cursor: pointer; transition: background-color .2s ease-in-out; }
.pd-rib__btn svg { display: block; width: 40px; height: 40px; }
.pd-rib__btn--prev { left: 40px; }
.pd-rib__btn--next { right: 40px; }
.pd-rib__btn--next svg { transform: rotate(180deg); }
.pd-rib__btn:hover { background: var(--pd-gold); }
.pd-rib__btn[disabled] { opacity: .5; cursor: default; }
@media (max-width: 959px) { .pd-rib__btn { display: none; } .pd-rib__cap { font-size: 14px; line-height: 18.9px; } }
@media (max-width: 639px) { .pd-rib__item { flex-basis: var(--rib-mh, 350px); } .pd-rib__item img { height: var(--rib-mh, 350px); } .pd-rib__cap { font-size: 12px; line-height: 16.2px; } }
.pd-sl { padding: var(--gpt, 15px) 0 16px; } /* padding, не margin: не схлопывается с отступом заголовка */
.pd-sl__view { position: relative; width: 860px; max-width: 100%; margin: 0 auto; }
.pd-sl__track { display: flex; transform: translateX(calc(-100% * var(--sl-i, 1))); transition: transform .3s ease-in-out; }
.pd-sl__track.is-jump { transition: none; }
.pd-sl__item { flex: 0 0 100%; box-sizing: border-box; padding: 0 50px; }
.pd-sl__img { height: 460px; overflow: hidden; }
.pd-sl__img img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.pd-sl__arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 0; border-radius: 100px; background: var(--pd-gold); cursor: pointer; transition: background-color .2s ease-in-out; }
.pd-sl__arrow svg { display: block; width: 7px; height: 13px; }
.pd-sl__arrow--prev { left: -15px; }
.pd-sl__arrow--next { right: -15px; }
.pd-sl__arrow:hover { background: #b98d66; }
.pd-sl__dots { display: flex; justify-content: center; padding-top: 16px; }
.pd-sl__dot { width: 18px; height: 28px; padding: 10px 5px; border: 0; background: none; cursor: pointer; }
.pd-sl__dot span { display: block; width: 8px; height: 8px; border-radius: 100px; background: #fff; transition: background-color .2s ease-in-out; }
.pd-sl__dot.is-active span, .pd-sl__dot:hover span { background: var(--pd-gold); }
@media (max-width: 959px) {
.pd-sl__view { width: auto; margin: 0 -20px; }
.pd-sl__item { padding: 0 20px; }
.pd-sl__img { height: auto; aspect-ratio: 760 / 460; }
.pd-sl__arrow--prev { left: 5px; }
.pd-sl__arrow--next { right: 5px; }
}
/* ══ T050 «заголовок + описание» (/oferta): Hauora 500 КАПС 30/1.17 #214357, описание через 20px — Hauora 14/1.45 #5f5f5f ══ */
.pd-t050 { padding: var(--t5-pt, 45px) 0 var(--t5-pb, 30px); }
.pd-t050__t { font: 500 var(--t5-fs, 30px)/1.17 var(--pd-font-h); text-transform: uppercase; color: var(--pd-navy); }
.pd-t050.is-tt-none .pd-t050__t { text-transform: none; }
.pd-t050__d { padding-top: var(--t5-dpt, 20px); font: 400 var(--t5-dfs, 26px)/1.45 var(--pd-font-h); color: #5f5f5f; }
@media (max-width: 479px) { .pd-t050__t { font-size: 24px; } }
/* ══ Статья блога, перенесённая с Tilda (.pdb, T123) — стили статьи Tilda 1:1 ══ */
.area--pdb { background: var(--pd-cream); }
.pdb { box-sizing: content-box; max-width: 1160px; margin: 0 auto; padding: 45px 0; }
.area--pdb .pdb h1 { font-family: var(--pd-font-h); font-size: 38px; font-weight: 500; color: #214357; text-transform: uppercase; line-height: 1.2; letter-spacing: normal; margin: 0 0 10px; text-align: left; }
.area--pdb .pdb__meta { font-family: var(--pd-font-h); font-size: 18px; font-weight: 500; color: #5f5f5f; margin: 0 0 30px; }
.area--pdb .pdb h2 { font-family: var(--pd-font-h); font-size: 24px; font-weight: 600; color: #214357; text-transform: uppercase; line-height: 1.3; letter-spacing: normal; margin: 36px 0 14px; text-align: left; }
.area--pdb .pdb h3 { font-family: var(--pd-font-h); font-size: 18px; font-weight: 600; color: #cfa384; text-transform: uppercase; letter-spacing: .3px; line-height: 1.3; margin: 26px 0 10px; }
.area--pdb .pdb p { font-family: var(--pd-font-t); font-size: 16px; font-weight: 400; color: #535353; line-height: 24.8px; margin: 0 0 16px; }
.area--pdb .pdb ul { margin: 0 0 16px; padding-left: 22px; }
.area--pdb .pdb li { font-family: var(--pd-font-t); font-size: 16px; color: #535353; line-height: 24.8px; margin: 0 0 8px; }
.area--pdb .pdb strong { color: #214357; font-weight: 600; }
.area--pdb .pdb a { color: #cfa384; }
.area--pdb .pdb img { display: block; max-width: 100%; height: auto; border-radius: 14px; margin: 20px 0; }
.area--pdb .pdb table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-family: var(--pd-font-t); }
.area--pdb .pdb th { background: #cfa384; color: #fff; font-family: var(--pd-font-h); font-size: 16px; font-weight: 500; text-transform: uppercase; padding: 14px 16px; text-align: left; }
.area--pdb .pdb td { font-size: 16px; color: #535353; padding: 12px 16px; text-align: left; border-bottom: 1px solid #ececec; }
.area--pdb .pdb__author { margin-top: 42px; background: #fcf8f3; border-left: 4px solid #cfa384; border-radius: 10px; padding: 24px 28px; }
.area--pdb .pdb__author h2 { margin-top: 0; }
.area--pdb .pdb__author-name { font-family: var(--pd-font-h); font-size: 20px; font-weight: 600; color: #214357; margin: 0 0 10px; }
@media (max-width: 1199px) { .pdb { padding-inline: 20px; } }
@media (max-width: 639px) { .area--pdb .pdb h1 { font-size: 28px; } .area--pdb .pdb h2 { font-size: 20px; } .area--pdb .pdb table { display: block; overflow-x: auto; } }
/* T107 / T083 — картинка записи Tilda (ширина по колонкам: 12 → 1160, 8 → 760) */
.pd-timg { margin: 0; padding: var(--ti-pt, 0px) 0 var(--ti-pb, 0px); }
.pd-timg img { display: block; width: var(--ti-w, 1160px); max-width: 100%; height: auto; }
.pd-timg.is-center img { margin: 0 auto; }
.pd-t050__t { margin: 0; }
/* ══ Ряд фото с подписями в SEO-тексте (zero Tilda): размеры и отступы из координат, подпись над/под фото ══ */
.pd-lseo__imgs2 { display: flex; align-items: flex-start; padding: var(--ipt, 0px) 0 var(--ipb, 0px); }
.pd-lseo__imgs2 figure { display: flex; flex-direction: column; flex: none; width: var(--fw); margin: var(--fmt, 0px) 0 0 var(--fml, 0px); }
.pd-lseo__imgs2 img { display: block; width: var(--fw); height: var(--fh); max-width: none; object-fit: cover; object-position: var(--zop, 50% 50%); }
.pd-lseo__imgs2 figcaption { width: var(--cw, auto); margin: var(--cg, 15px) 0 0 var(--cml, 0px); }
.pd-lseo__imgs2 figure.is-cap-top figcaption { order: -1; margin: 0 0 var(--cg, 15px) var(--cml, 0px); }
@media (max-width: 1199px) {
/* ряды фото: как в мобильных артбордах Tilda — квадраты 193 (640) / 205 (320) с зазором 15, ряд-лента листается */
.pd-lseo__imgs2 { display: flex; flex-wrap: wrap; gap: 15px; padding: 20px 0; }
.pd-hsc > .pd-lseo__imgs2 { flex-wrap: nowrap; width: max-content; padding-right: 40px; }
.pd-lseo__imgs2 figure { width: var(--mfw, 193px); margin: 0; }
.pd-lseo__imgs2 img { width: var(--mfw, 193px); height: var(--mfw, 193px); max-width: none; aspect-ratio: auto; }
.pd-lseo__imgs2 figcaption, .pd-lseo__imgs2 figure.is-cap-top figcaption { width: auto; margin: 8px 0 0; }
.pd-lseo__imgs2 figure.is-cap-top figcaption { margin: 0 0 8px; }
}
/* ══ Мобильная подгонка под мобильные артборды Tilda (320/480/640), 23.09 ══
Раскладка своя, но заметные отличия убраны: ленты карточек и пунктов «Почему мы», кегли (38→34→28, 31→28→22, 20→18),
порядок «кнопка → описание» на первом экране, пропорции фото, таблица цен шире экрана (как t431 у Tilda). */
@media (max-width: 1199px) {
/* первый экран: фото в колонке (Tilda 640: 620×302), кнопка перед описанием, USP через 30 */
.pd-hero__photo { height: auto; aspect-ratio: 620 / 302; margin: 0; }
.pd-hero__h { font-size: var(--hfst, min(var(--hfs, 38px), 34px)); line-height: var(--hlht, 1.3); }
.pd-hero__note { line-height: 19px; }
.pd-tcard__t { font-size: 16px; line-height: 21.6px; }
.pd-tstore .pd-cf__mob { font-size: 12.48px; }
.pd-hero__row { row-gap: 30px; }
.pd-hero__desc { order: 0; font: 300 20px/24px var(--pd-font-t); }
.pd-hero__usps { margin-top: 30px; }
/* «Почему мы №1»: пункты — лентой на белой полосе (Tilda: пункт 257, зазор 35, поле полосы 24/25) */
.pd-lp__h { font-size: 34px; line-height: 43px; }
.pd-lp__sub { margin-top: 20px; font-size: 20px; line-height: 31px; }
.pd-lp__side .pd-price-cta { margin-top: 30px; }
.pd-lp__list { display: flex; flex-wrap: nowrap; gap: 35px; align-self: stretch; width: auto; min-width: 0; margin: 0 calc(50% - 50vw) 0 0; padding: 24px 25px;
overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; }
.pd-lp__list::-webkit-scrollbar { display: none; }
.pd-lp__item, .pd-lp__item.is-last { flex: 0 0 257px; grid-template-columns: 35px 1fr; align-content: start; padding: 0; } /* высота пункта — по самому высокому, строки не растягивать */
.pd-lp__item:not(.is-last)::after { display: none; }
.pd-lp__d { max-width: none; margin: 10px 0 0; }
/* секции с мобильными потоками (.has-zv): поля дают сами полосы артбордов */
.area--ladv.is-cg.has-zv, .area--banner.is-bn.has-zv, .area--hero.is-z.has-zv { padding: 0; }
/* zero-тексты: кегли Tilda на 640 (38→34, 31→28); точные значения из мобильных артбордов — --zfst/--zlht */
.zt { font-size: var(--zfst, var(--zfs, 16px)); line-height: var(--zlht, var(--zlh, 21px)); }
.zt[style*="--zfs:38px"] { font-size: var(--zfst, 34px); line-height: var(--zlht, 43px); }
.zt[style*="--zfs:31px"] { font-size: var(--zfst, 28px); line-height: var(--zlht, 35px); }
.zh-t { display: none; } /* элемент скрыт у Tilda на планшетных артбордах */
}
@media (max-width: 640px) {
.pd-hero__h br { display: none; }
.pd-hero__s::after { content: " "; } /* без
строки заголовка склеивались («АЛМАТЫИ ОБЛАСТИ») */
}
@media (max-width: 479px) {
.pd-hero__photo { aspect-ratio: 319 / 182; }
.pd-hero__h { font-size: var(--hfsm, 22px); line-height: var(--hlhm, 29px); }
.pd-tstore .pd-cf__mob { font-size: 14px; }
.pd-q2-title { font-size: 20px; line-height: 30px; }
.pd-q2-card__t { font-size: 14px; }
.pd-lseo__imgs2 { --mfw: 205px; }
.pd-hero__desc { font-size: 18px; line-height: 22px; }
.pd-lp__h { font-size: 28px; line-height: 35px; }
.pd-lp__sub { margin-top: 15px; font-size: 18px; line-height: 23px; }
.pd-lp__side .pd-price-cta { margin-top: 31px; }
/* таблица цен: колонки не уже 150 px — как у Tilda таблица шире экрана и листается по горизонтали */
.pd-price-table.is-fixed { table-layout: auto; width: max-content; min-width: 100%; }
.pd-price-table th, .pd-price-table td { min-width: 150px; box-sizing: border-box; }
/* подзаголовки секций: 18/23 (Tilda 320), у квиза/цен/каталога — по центру */
.pd-sec-sub, .pd-quiz-sub { font-size: 18px; line-height: 23px; }
.area--quiz .pd-sec-sub, .area--price .pd-sec-sub, .area--catalog .pd-sec-sub, .area--pcatalog .pd-sec-sub { text-align: center; }
/* SEO-текст: межстрочный 1.45, как у t128 на 320 */
.pd-lseo, .pd-lseo--html p, .pd-lseo--html li { line-height: 23.2px; }
/* zero-тексты: кегли Tilda на 320 (38→28, 31→22, 20→18); точные значения из мобильных артбордов — --zfsm/--zlhm */
.zt { font-size: var(--zfsm, var(--zfst, var(--zfs, 16px))); line-height: var(--zlhm, var(--zlht, var(--zlh, 21px))); }
.zt[style*="--zfs:38px"] { font-size: var(--zfsm, 28px); line-height: var(--zlhm, 35px); }
.zt[style*="--zfs:31px"] { font-size: var(--zfsm, 22px); line-height: var(--zlhm, 28px); }
.zt[style*="--zfs:20px"] { font-size: var(--zfsm, 18px); line-height: var(--zlhm, 23px); }
.zh-m { display: none; } /* элемент скрыт у Tilda на артборде 320 */
}
/* ══ Три потока zero-секций: десктоп (.pd-zv--d, артборд 1200), планшет (.pd-zv--t, артборд 640, ≤1199) и телефон (.pd-zv--m, артборд 320, ≤479).
Мобильные потоки собраны из мобильных артбордов Tilda: порядок, видимость, кегли, ширины и зазоры — свои, поэтому
общие сбросы мобильного потока (см. выше) к ним не применяются; ряд центрируется по ширине сетки Tilda. ══ */
.pd-zv--t, .pd-zv--m { display: none; }
@media (max-width: 1199px) {
.pd-zv--d { display: none; }
.pd-zv--t { display: block; }
.pd-zv--t .pd-zs, .pd-zv--m .pd-zs { padding: var(--zspt, 0px) 0 var(--zspb, 0px); }
.pd-zv--t .pd-zs:not(.is-scroll), .pd-zv--m .pd-zs:not(.is-scroll) { overflow-x: clip; }
.pd-zv--t .pd-zs__decor, .pd-zv--m .pd-zs__decor { display: block; }
.pd-zv--t .zr, .pd-zv--m .zr { flex-wrap: nowrap; max-width: 640px; margin: var(--zrmt, 0px) auto 0; }
/* Ряду планшетного потока нужны все 640px артборда Tilda: боковые поля контейнера оставляли 600,
и элементы шире (заголовки, длинные абзацы) переносились на лишнюю строку, сдвигая страницу вниз. */
.container:has(> .pd-zv--t) { padding-inline: 0; }
.pd-zv--t .pd-zs__sc > .zr, .pd-zv--m .pd-zs__sc > .zr { max-width: none; margin-inline: 0; }
.pd-zv--t .zr > *, .pd-zv--m .zr > * { width: var(--zw, auto); max-width: 100%; margin: var(--zmt, 0px) 0 0 var(--zml, 0px); }
.pd-zv--t .pd-zs__sc .zr > *, .pd-zv--m .pd-zs__sc .zr > * { max-width: none; } /* в ленте элементы не ужимаем — лента листается */
.pd-zv--t .zt, .pd-zv--m .zt { font-size: var(--zfs, 16px); line-height: var(--zlh, 21px); }
.pd-zv--t .zi, .pd-zv--m .zi { height: var(--zh, auto); aspect-ratio: var(--zar, auto); }
.pd-zv--t .zs--bg, .pd-zv--m .zs--bg { display: block; }
}
@media (max-width: 479px) {
.pd-zv--t { display: none; }
.pd-zv--m { display: block; }
.pd-zv--m .zr { max-width: 320px; }
.pd-zv--m .pd-zs__sc > .zr { max-width: none; }
}
/* SEO-статья (t128-текст Tilda) на планшете: текст на всю ширину контейнера 728 и заголовки 38 px, как у Tilda на 640 */
@media (min-width: 480px) and (max-width: 960px) {
.area--lseo.is-html > .container { max-width: none; }
.pd-lseo--html :is(h2:not([class*="pd-as-"]), .pd-as-h2) { font-size: 38px; }
}
/* Витрина t786 с «horizontalScrollHint» у Tilda на планшете/телефоне — лента карточек в одну строку (640: 329×, зазор 40; 320: 168×, зазор 20) */
@media (max-width: 959px) {
.area--pcatalog[style*="--cat-mslider:1"] .pd-tstore__grid { display: flex; gap: var(--cat-mgap, 40px); margin-right: calc(50% - 50vw); padding-right: 40px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; }
.area--pcatalog[style*="--cat-mslider:1"] .pd-tstore__grid::-webkit-scrollbar { display: none; }
.area--pcatalog[style*="--cat-mslider:1"] .pd-tcard { flex: 0 0 var(--cat-mcw, 329px); }
.area--pcatalog[style*="--cat-mslider:1"] .pd-tcard[hidden] { display: flex; } /* в ленте показываем все карточки */
.area--pcatalog[style*="--cat-mslider:1"] .pd-tstore__more-wrap { display: none; }
}
@media (max-width: 479px) { .area--pcatalog[style*="--cat-mslider:1"] .pd-tstore__grid { --cat-mcw: 168px; --cat-mgap: 20px; } }
/* ══ Перепроверка 30.09.2026 (десктоп + адаптив) ══ */
/* Горизонтальная прокрутка: у Tilda всё, что шире окна, обрезает #allrecords (overflow-x: hidden). В копии обёртка формы
баннера (960 px, как элемент Tilda) и полосы «на всю ширину» (100vw шире области содержимого на ширину полосы прокрутки)
давали горизонтальную прокрутку в настольных браузерах. clip не создаёт своей прокрутки и не ломает position: sticky. */
.pd-main, .pd-site-footer { overflow-x: clip; }
/* линии-сетка, которые Tilda растягивает анимацией из точки 1×1 (слой декора zero-секции) */
.pd-zs__ln { display: block; background: var(--zbg, #cfa384); }
/* форма zero с несколькими полями (имя + телефон) и своей подписью кнопки: в ряд или столбцом — по настройкам Tilda */
.zf--x { display: flex; grid-template-columns: none; row-gap: 0; }
.zf--x.zf--row { flex-flow: row wrap; align-items: flex-start; }
.zf--x.zf--col { flex-direction: column; }
.zf__in { display: flex; }
.zf--x .zf__in, .zf--x .zf__tel { box-sizing: border-box; height: var(--zfh, 65px); background: #fff; }
.zf--x.zf--row .zf__in, .zf--x.zf--row .zf__tel { flex: 1 1 0; min-width: 0; margin-right: var(--zfg, 25px); }
.zf--x.zf--col .zf__in, .zf--x.zf--col .zf__tel { margin-bottom: var(--zfgb, 20px); }
.zf__in input { flex: 1; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0 20px; border: 0; background: transparent; font: 400 16px/1 var(--pd-font-t); color: var(--zfc, #535353); outline: 0; }
.zf__in input::placeholder { color: #b5b5b5; }
.zf--x .zf__tel input, .zf--x .pd-q2-tel__code { color: var(--zfc, #535353); }
.zf--x .zf__btn { flex: none; width: var(--zfbw, 100%); height: var(--zfbh, 65px); padding: 0 15px; font: var(--zfbfw, 600) var(--zfbfs, 16px)/1.2 var(--zfbff, var(--pd-font-h)); }
.zf--x .zf__err { flex: 0 0 100%; margin: 6px 0 0; }
/* кнопка zero заголовочной гарнитурой (вкладки цен на планшете, подписи-плашки карточек) — у Tilda задано у самой кнопки */
.zb[style*="--zbff"] { font-family: var(--zbff); }
/* виджет отзывов под витриной в теле страницы (портфолио проектирования): у Tilda он на 45 px ниже, низ секции на месте */
.pd-tstore-rev--sc { margin: 45px 0 -45px; }
/* фильтры витрины: цвет подписей — из настроек блока Tilda (--cat-fc: на тёмной витрине белые; раньше переменная не применялась),
жирность кнопки «Фильтры» — та же, что у подписей (--cat-ffw, по умолчанию 700) */
.pd-tstore .pd-cf__title { color: var(--cat-fc, #535353); }
.pd-tstore .pd-cf__title::after { border-right-color: var(--cat-fc, #535353); border-bottom-color: var(--cat-fc, #535353); }
.pd-tstore .pd-cf__mob { color: var(--cat-fc, #535353); font-weight: var(--cat-ffw, 700); }
.pd-tstore .pd-cf__found, .pd-tstore .pd-cf__reset, .pd-tstore .pd-cf__mob-search { color: var(--cat-fc, #535353); }
/* вопрос FAQ, оформленный на Tilda иначе, чем остальные в блоке: жирный / обычный */
.pd-faq2 > summary.is-b { font-weight: 700; }
.pd-faq--b700 .pd-faq2 > summary.is-n { font-weight: 600; }
/* калькулятор кредита (/doma-v-kredit): блок Tilda со своими стилями — полоса на всю ширину окна, как на оригинале */
.is-jscalc .area-js-calc { margin-inline: calc(50% - 50vw); }
.is-jscalc .area-js-calc a { text-decoration: none; }
/* SEO-текст (t120): ссылки без подчёркивания, в таблицах длинные слова переносятся (quill-таблица Tilda: overflow-wrap: break-word) */
.pd-lseo__d a { text-decoration: none; }
.pd-lseo__d td, .pd-lseo__d th { overflow-wrap: break-word; }
/* сетка товаров: колонка не шире своей доли (длинное слово в названии переносится, как у Tilda: word-break: break-word) */
.pd-tcard { min-width: 0; }
.pd-tcard__t { overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 1199px) {
/* Обёртка формы в потоке держит ширину элемента Tilda (у формы баннера она шире артборда: 1095 на 640) — от неё отсчитаны
отступы соседей по ряду; при ужатии до 100% тексты под формой («Нажимая на кнопку…», «Или позвоните по номеру») уезжали
за левый край. Лишнее обрезает полоса (overflow-x: clip). Размеры поля и кнопки — из артборда этой ширины. */
.pd-zv--t .zr > .zf-wrap, .pd-zv--m .zr > .zf-wrap { max-width: none; }
.pd-zv--t .zf:not(.zf--x), .pd-zv--m .zf:not(.zf--x) { grid-template-columns: var(--zfw, minmax(0, 472px)); row-gap: var(--zfgb, 25px); }
.pd-zv--t .zf:not(.zf--x) .zf__tel, .pd-zv--m .zf:not(.zf--x) .zf__tel { height: var(--zfh, 55px); }
.pd-zv--t .zf:not(.zf--x) .zf__btn, .pd-zv--m .zf:not(.zf--x) .zf__btn { width: var(--zfw, 100%); height: var(--zfbh, 55px); }
/* Полоса zero в планшетном/телефонном потоке — на всю ширину окна: фон (::before) обрезался по ширине контейнера 640,
и у тёмных секций по бокам оставались светлые поля (видно на 768–1199). Содержимое остаётся по центру. */
.pd-zv--t .pd-zs:not(.is-scroll), .pd-zv--m .pd-zs:not(.is-scroll) { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
}
@media (max-width: 1199px) {
/* название товара на планшете и телефоне — того же кегля, что на десктопе (Tilda его не уменьшает: 20/27 или заданный у витрины) */
.pd-tcard__t { font-size: var(--cat-tfs, 20px); line-height: var(--cat-tlh, 27px); }
/* «Фильтры» над витриной: у Tilda 14/800 на планшете и 12/700 на телефоне (23.09 кегли были перепутаны местами) */
.pd-tstore .pd-cf__mob { font-size: 14px; }
/* блок контактов: телефон и адрес на планшете и телефоне 24/30 (у Tilda артборды 640 и 320), на десктопе 28/35 */
.pd-cb3__big { font-size: 24px; }
}
@media (max-width: 960px) {
/* витрина ниже 960: у Tilda сетка в 2 колонки на всю ширину окна с полями 20 и зазором 10 (а не контейнер 640), кнопка с полями 25 */
.pd-tstore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
.area--pcatalog:not([style*="--cat-mslider:1"]) .pd-tstore__grid { width: calc(100vw - 40px); margin-left: calc((100% - 100vw + 40px) / 2); }
.pd-tcard__btn { padding: 0 25px; }
}
/* таблица цен с «прокруткой на мобильных» (t431__mobilescroll): ниже 960 держит ширину 960, ниже 640 — 640, колонки в тех же долях */
@media (max-width: 960px) { .pd-price-table.is-mscroll { width: 100%; min-width: 960px; } }
@media (max-width: 640px) { .pd-price-table.is-mscroll { min-width: 640px; } }
@media (max-width: 479px) {
.pd-price-table.is-mscroll.is-fixed { table-layout: fixed; width: 100%; }
.pd-price-table.is-mscroll th, .pd-price-table.is-mscroll td { min-width: 0; }
.pd-tstore .pd-cf__mob { font-size: 12px; }
/* таблица цен и кнопка формы баннера на телефоне: межстрочный 1.45 и кегль 14, как у Tilda на артборде 320 */
.pd-price-table th, .pd-price-table td { line-height: 1.45; }
.zf:not(.zf--x) .zf__btn { font-size: 14px; }
/* кнопка карточки на телефоне — во всю ширину карточки, высота по тексту (поля 15.2/20, как у Tilda) */
.pd-tcard__btn { align-self: stretch; height: auto; min-height: 50px; padding: 15.2px 20px; }
}
/* хлебные крошки на телефоне — того же кегля 16, что на десктопе (у Tilda они переносятся на вторую строку, а не уменьшаются) */
@media (max-width: 480px) { .pd-crumbs li { font-size: 16px; } }
@media (max-width: 479px) {
/* варианты ответа квиза на телефоне — 14 (на десктопе 15) */
.pd-q2-radio { font-size: 14px; }
/* лента (артборд 320 по центру окна): содержимое начинается с того же отступа, что у Tilda, и листается от края до края */
.pd-zv--m .pd-zs__sc { padding-left: max(0px, calc((100% - 320px) / 2)); }
/* описание t120 на телефоне: межстрочный 1.45, как у Tilda (у записи со своим значением — оно) */
.pd-lseo__rec:not([style*="--dlh"]) .pd-lseo__d { line-height: 1.45; }
}
/* ── Перепроверка 30.09, часть 2: остатки сверки оформления и наполнения ── */
/* баннер: фото не растягивает карточку (квадратный исходник после загрузки добавлял 13 px к высоте — фасадные страницы) */
.pd-bn__photo { position: relative; }
.pd-bn__photo img { position: absolute; inset: 0; }
/* кнопки zero и первого экрана — без боковых полей, как у Tilda (подпись по центру кнопки во всю её ширину): с полями 20 px
длинные подписи («РАССЧИТАТЬ СТОИМОСТЬ ТРУБЫ НЕРЖАВЕЮЩЕЙ», «ТРУБЫ СТАЛЬНЫЕ БЕСШОВНЫЕ») переносились на вторую строку */
.zb, .pd-hero__btn { padding-inline: 0; }
/* подпись кнопки слева/справа, если так задано у элемента Tilda (кнопки-заголовки карточек) */
.zb { justify-content: var(--zbjc, center); }
.zb[style*="--zbjc:flex-start"] { text-align: left; }
.zb[style*="--zbjc:flex-end"] { text-align: right; }
/* полоса «кнопка + подпись», выровненная у Tilda по центру как группа: кнопка смещена от центра сетки */
@media (min-width: 1200px) { .pd-price-cta { position: relative; left: var(--cta-dx, 0px); } }
@media (min-width: 640px) and (max-width: 1199px) { .pd-price-cta { position: relative; left: var(--cta-dxt, 0px); } }
/* обычная таблица в SEO-тексте (не «quill») — как её рисует браузер у Tilda: без рамок, по ширине содержимого */
.pd-lseo__d table.is-plain { width: auto; table-layout: auto; border-collapse: separate; border-spacing: 2px; }
.pd-lseo__d table.is-plain td, .pd-lseo__d table.is-plain th { border: 0; padding: 0; }
/* телефон в тексте SEO-блока (политика конфиденциальности) — цветом текста, как на Tilda */
.pd-lseo__d a[href^="tel:"] { color: inherit; }
/* заголовок самого блока FAQ (статьи блога: «Популярные вопросы» — поле блока t668, не zero-заголовок) */
.area--faq.pd-faq--bt { padding-top: var(--faq-pt, 15px); }
.pd-faq--bt .pd-sec-h { max-width: none; margin: 0 0 var(--bt-mb, 80px); font-size: 38px; line-height: 1.23; text-align: left; }
.pd-faq--bt .pd-faq2-wrap { padding-top: 0; }
@media (max-width: 1199px) {
/* кегль заголовка секции на планшете, если у Tilda он не 34 */
.pd-sec-h { font-size: var(--hft, var(--pd-fs-h2)); }
/* одиночный текст в потоках планшета и телефона — шириной как на Tilda (правило общего потока растягивало его на весь ряд,
и заголовки переносились иначе) */
.pd-zv--t .zr > .zt:only-child, .pd-zv--m .zr > .zt:only-child { flex: none; }
/* фигуры-подложки шире артборда (полоса во всю ширину, нарисованная фигурой) не ужимаем: следующий элемент ряда привязан
к её правому краю отрицательным отступом, и при ужатии весь ряд уезжал за левый край экрана (/monolit на планшете) */
.pd-zv--t .zr > .zs, .pd-zv--m .zr > .zs { max-width: none; }
/* T050 в потоках: колонка 640 с полями 20, как у Tilda (текст стоял вплотную к краю экрана) */
.pd-zs > .pd-t050 { box-sizing: border-box; max-width: 640px; margin-inline: auto; padding-inline: 20px; }
.pd-tstore__empty { font-size: 14px; }
.area--faq.pd-faq--bt { padding-top: var(--faq-pt, 15px); }
/* подзаголовок квиза на планшете — по центру, как у Tilda (на десктопе его центрирует ширина блока --tw) */
.area--quiz .pd-sec-sub, .area--quiz .pd-quiz-sub { text-align: center; }
}
@media (max-width: 960px) { .pd-faq--bt .pd-sec-h { margin-bottom: var(--bt-mbm, 45px); } }
/* лента товаров (t786 «в одну строку») на планшете и телефоне — от левого края окна, как у Tilda: карточка 48 % окна
(на телефоне 50 %) с внутренними полями 20 (10) px, первая — с отступом 15 px; раньше лента начиналась от колонки 640
и вторая карточка обрезалась правым краем */
@media (max-width: 959px) {
.area--pcatalog[style*="--cat-mslider:1"] .pd-tstore__grid { --cat-mcw: calc(48vw - 40px); margin-inline: calc(50% - 50vw); padding-inline: 35px 40px; }
}
@media (max-width: 479px) {
.area--pcatalog[style*="--cat-mslider:1"] .pd-tstore__grid { --cat-mcw: calc(50vw - 20px); --cat-mgap: 20px; padding-inline: 25px 20px; }
}
/* строка фильтров обычной витрины ниже 960 — во всю ширину окна с полями 20, как сетка карточек */
@media (max-width: 960px) {
.area--pcatalog:not([style*="--cat-mslider:1"]) .pd-tstore > .pd-cf { width: calc(100vw - 40px); margin-left: calc((100% - 100vw + 40px) / 2); }
}
/* у ленты товаров во всю ширину окна (фасадные и сварочные работы: t786 без контейнера) строка фильтров — с полями 30 px */
@media (max-width: 959px) {
.area--pcatalog[style*="--cat-mslider:1"]:not([style*="--cat-cont:"]) .pd-tstore > .pd-cf { width: calc(100vw - 60px); margin-left: calc((100% - 100vw + 60px) / 2); }
}
@media (max-width: 640px) { .pd-faq--bt .pd-sec-h { font-size: 30px; } }
@media (max-width: 479px) {
.pd-sec-h { font-size: var(--hfm, var(--pd-fs-h2)); }
.pd-t050__t { font-size: 30px; }
}
/* Заголовок и подзаголовок секции на планшете и телефоне — шириной, с отступом и выравниванием элемента Tilda в артборде
640 / 320 (переменные --hwt, --hlt, --htat и --hwm, --hlm, --htam; у подзаголовка — те же с буквой s): от ширины зависят переносы строк.
Сетка артборда стоит по центру окна, колонка темы — 600 (на телефоне окно минус 40), отсюда (100% − 640) / 2.
Между 480 и 639 px у Tilda свой артборд (480) — там остаётся ширина колонки.
--hlst / --hlsm — межбуквенный интервал заголовка в этих артбордах (каталоги металлопроката: −0.5 px). */
@media (min-width: 640px) and (max-width: 1199px) {
[style*="--hwt:"] .pd-sec-h, .pd-sec-h[style*="--hwt:"] { width: var(--hwt); max-width: none; margin-left: calc((100% - 640px) / 2 + var(--hlt, 0px)); margin-right: 0; text-align: var(--htat, var(--hta, center)); letter-spacing: var(--hlst, normal); }
[style*="--swt:"] :is(.pd-sec-sub, .pd-quiz-sub), :is(.pd-sec-sub, .pd-quiz-sub)[style*="--swt:"] { width: var(--swt); max-width: none; margin-left: calc((100% - 640px) / 2 + var(--slt, 0px)); margin-right: 0; text-align: var(--stat, var(--sta, var(--hta, center))); }
}
@media (max-width: 479px) {
[style*="--hwm:"] .pd-sec-h, .pd-sec-h[style*="--hwm:"] { width: var(--hwm); max-width: none; margin-left: calc((100% - 320px) / 2 + var(--hlm, 0px)); margin-right: 0; text-align: var(--htam, var(--hta, center)); letter-spacing: var(--hlsm, normal); }
[style*="--swm:"] :is(.pd-sec-sub, .pd-quiz-sub), :is(.pd-sec-sub, .pd-quiz-sub)[style*="--swm:"] { width: var(--swm); max-width: none; margin-left: calc((100% - 320px) / 2 + var(--slm, 0px)); margin-right: 0; text-align: var(--stam, var(--sta, var(--hta, center))); }
}
/* Таблица цен t431 ниже 960 — по правилам Tilda. Без «прокрутки на мобильных»: ячейки с полями 10 px по бокам и без минимальной
ширины (колонки по содержимому; не помещается — листается). С прокруткой: поля 20 px, ширина таблицы 960 (ниже 640 — 640).
Прежнее «колонки не уже 150 px» делало таблицы металлопроката на планшете на 120 px шире, на телефоне — в полтора раза. */
@media (max-width: 960px) {
.pd-price-table:not(.is-mscroll) th, .pd-price-table:not(.is-mscroll) td { min-width: 0; padding-inline: 10px; }
}
@media (max-width: 620px) {
.pd-price-table:not(.is-mscroll) th, .pd-price-table:not(.is-mscroll):not(.is-compact) td { padding-block: 20px; }
.pd-price-table.is-mscroll th, .pd-price-table.is-mscroll td { padding: 20px; }
.pd-price-table.is-mscroll.is-compact td { padding-block: 5px; }
}
/* Ряд фото в SEO-тексте на планшете и телефоне — поток из артборда Tilda (.pd-zv--t/--m внутри .pd-lseo): артборд 640 шире
колонки 600 на поля контейнера. Лента фото t1148 на планшете начинается от левого края колонки, как у Tilda (была от края окна). */
@media (min-width: 480px) and (max-width: 1199px) { .pd-lseo > .pd-zv--t { margin-inline: -20px; } }
@media (min-width: 980px) and (max-width: 1199px) { .pd-rib__track { padding-inline: calc(50vw - 460px); } }
@media (min-width: 640px) and (max-width: 979px) { .pd-rib__track { padding-inline: calc(50vw - 300px); } }
/* Полоса «кнопка + подпись» под таблицей цен на планшете и телефоне — как мобильная запись Tilda (у всех 165 страниц она
одинакова: артборд 640 — кнопка 327 по центру, подпись под ней в одну строку через 10 px, после подписи 61 px;
артборд 320 — кнопка 259, после подписи 41 px). Было: на планшете подпись справа в две строки, на телефоне кнопка
во всю ширину и подпись слева. */
@media (max-width: 1199px) {
.area--price .pd-price-cta:not(.pd-price-cta--left) { grid-template-columns: 1fr; row-gap: 10px; justify-items: center; margin-bottom: 61px; }
.area--price .pd-price-cta:not(.pd-price-cta--left) > a { grid-column: 1; }
.area--price .pd-price-cta:not(.pd-price-cta--left) .pd-price-cta__note { grid-column: 1; grid-row: auto; justify-self: center; width: auto; margin-top: 0; text-align: center; }
}
@media (max-width: 479px) {
.area--price .pd-price-cta:not(.pd-price-cta--left) { margin-bottom: 41px; }
.area--price .pd-price-cta:not(.pd-price-cta--left) .pd-price-cta__btn { width: 259px; }
}
/* Перепроверка 30.09, вечер. Одиночный текст потока шире сетки артборда (заголовок 336 px при сетке 320, сдвинут на −8):
раньше ужимался до ширины ряда и переносился на строку больше, чем у Tilda («Что входит в полный проект дома», 17 страниц). */
@media (max-width: 1199px) {
.pd-zv--t .zr > .zt:only-child, .pd-zv--m .zr > .zt:only-child { max-width: calc(100% - 2 * min(0px, var(--zml, 0px))); }
}
/* /catalog на телефоне: у Tilda «Проекты домов» (h1) и «и зданий» — два элемента, строка под строкой */
@media (max-width: 479px) { .pd-sec-h__h1 { display: block; } }
/* виджет отзывов под витриной на планшете и телефоне — во всю ширину окна, как в секции отзывов: у Tilda он вне контейнера 640
(был на 168 px уже на планшете и на 40 px — на телефоне) */
@media (max-width: 1199px) { .pd-tstore-rev { margin-inline: calc(50% - 50vw); } }
/* Zero-таблица в SEO-тексте на планшете и телефоне — из мобильного артборда Tilda (.pd-zv--t/--m: таблица 915 px, колонки уже,
подписи переносятся); лента доходит до правого края окна, на телефоне начинается от сетки 320, как у Tilda */
@media (max-width: 1199px) { .pd-lseo__rec--ztbl .pd-ztable-wrap { margin-right: calc((100% - 100vw) / 2); } }
@media (max-width: 479px) { .pd-lseo__rec--ztbl .pd-ztable-wrap { margin-left: -20px; padding-left: calc((100vw - 320px) / 2 + 20px); } }
/* Квиз, варианты с фото на планшете: у Tilda сетка вариантов 510 px в панели 600 (карточка 114 при 4 в ряд, 87,6 при 5),
колонки равные — длинное слово выходит за свою колонку; у нас сетка была 560, а колонки растягивались по тексту,
и последняя уходила за край панели (сварочные работы) */
@media (min-width: 641px) and (max-width: 1199px) { .pd-q2-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pd-q2-cards--43 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* панель квиза на планшете — поля 35 / 45 / 55, как у Tilda (форма 510 в панели 600): заголовки вопросов, варианты и кнопки
стояли на 25 px левее и переносились иначе */
@media (min-width: 641px) and (max-width: 959px) {
.pd-quiz2 { padding: 35px 45px 55px; }
.pd-q2-lead { margin: -35px -45px 20px; padding: 35px 45px 0; }
}
/* Текстовый элемент Tilda — display:table: при слове длиннее заданной ширины он растёт до слова («МЕТАЛЛОКОНСТРУКЦИЙ» 28 px = 340
при ширине 320), и остальной текст переносится по этой ширине. У нас блок оставался 320 px, и «ПОПУЛЯРНЫЕ ВОПРОСЫ» шло в две строки. */
@media (max-width: 1199px) {
[style*="--hwt:"] .pd-sec-h, .pd-sec-h[style*="--hwt:"], [style*="--hwm:"] .pd-sec-h, .pd-sec-h[style*="--hwm:"],
.pd-zv--t .zr > .zt:only-child, .pd-zv--m .zr > .zt:only-child { min-width: min-content; }
}
/* Лента «Почему мы №1» на планшете и телефоне — по мобильным артбордам Tilda: полоса начинается от края артборда
(640 / 320 по центру окна, а не от колонки с полями 20), ширина пункта (номер 35 + текст) и зазор до следующего —
свои у каждого пункта (--iwt/--igt, --iwm/--igm; обычно 263 + 30). Было: полоса на 20 px правее, текст 222. */
@media (max-width: 1199px) {
.pd-lp__list { gap: 0; margin-left: calc((100% - 640px) / 2); }
.pd-lp__item, .pd-lp__item.is-last { flex-basis: var(--iwt, 263px); margin-right: var(--igt, 30px); }
}
@media (max-width: 479px) {
.pd-lp__list { margin-left: calc((100% - 320px) / 2); }
.pd-lp__item, .pd-lp__item.is-last { flex-basis: var(--iwm, 261px); margin-right: var(--igm, 30px); }
}
/* Первый экран: элемент заголовка, который у Tilda сам переносится на две строки по своей ширине (h1 905 px:
«СТРОИТЕЛЬСТВО АДМИНИСТРАТИВНЫХ ЗДАНИЙ / В АЛМАТЫ»), — блок этой ширины; следующая строка («И ОБЛАСТИ ОТ …») стоит
на его последней строке. Раньше весь элемент шёл одной строкой, а продолжение — ниже со сдвигом (6 страниц). */
@media (min-width: 1200px) {
.pd-hero__h h1.pd-hero__s.pd-hero__s--w, .pd-hero__h .pd-hero__s.pd-hero__s--w { display: block; width: var(--sw); white-space: normal; }
.pd-hero__up { display: block; margin-top: calc(-1 * var(--up, 0px)); }
}
/* описание первого экрана — шириной элемента Tilda, даже если ряд на несколько px шире сетки (/angary/kz: 734 px при 728
свободных — описание ужималось и шло в три строки вместо двух) */
@media (min-width: 1200px) { .pd-hero__desc { flex-shrink: 0; } }
/* Подпись под кнопкой таблицы цен на планшете и телефоне: у Tilda это блок 216 px по центру с текстом от левого края.
Обычная подпись («Перезвоним в течение 3 минут») заполняет его целиком, короткая («Ответим за 15 минут», беседки — у них
задана своя ширина --nw) стояла у нас по центру, на 36 px правее. */
@media (max-width: 1199px) {
.area--price .pd-price-cta:not(.pd-price-cta--left) .pd-price-cta__note[style*="--nw:"] { min-width: 216px; text-align: left; }
}
/* Текстовая кнопка zero в планшетном и телефонном потоках переносится по ширине элемента, как у Tilda («Позвонить по / телефону»
в 97 px на /contacts): одной строкой она наезжала на соседнюю */
@media (max-width: 1199px) { .pd-zv--t .zl, .pd-zv--m .zl { white-space: normal; } }
/* Контактный блок на планшете и телефоне (--cb-mob, из мобильных артбордов Tilda — профиль страницы и /contacts): карта стоит
НАД телефоном и адресом (была под ними), телефон и адрес 24 px, свои интервалы, ширина адреса и кнопок.
mt — карта от верха блока, mh — её высота, mg — зазор до панели, pt/pb — поля панели, pv/al/av/hr/bt — интервалы.
На /contacts (--cb-mix) карта и зазор — на светлом фоне, тёмная панель начинается под ними. */
@media (max-width: 1199px) {
.area--contacts.pd-contact-block[style*="--cb-mix:1"] { background: linear-gradient(to bottom, #f8f0eb calc(var(--cb-mtt, 0px) + var(--cb-mht, 359px) + var(--cb-mgt, 11px)), var(--pd-navy) 0); }
[style*="--cb-mob:1"] .pd-cb3 { display: flex; flex-direction: column; }
[style*="--cb-mob:1"] .pd-cb3__map { order: -1; height: var(--cb-mht, 359px); margin-top: var(--cb-mtt, 40px); margin-bottom: var(--cb-mgt, 0px); }
[style*="--cb-mob:1"] .pd-cb3__left { padding: var(--cb-ptt, 30px) 0 var(--cb-pbt, 40px); }
[style*="--cb-mob:1"] .pd-cb3__big { margin-top: var(--cb-pvt, 10px); max-width: var(--cb-awt, 463px); font-size: 24px; }
[style*="--cb-mob:1"] .pd-cb3__phone { max-width: none; }
[style*="--cb-mob:1"] .pd-cb3__label--addr { margin-top: var(--cb-alt, 25px); }
[style*="--cb-mob:1"] .pd-cb3__addr { margin-top: var(--cb-avt, 10px); }
[style*="--cb-mob:1"] .pd-cb3__hours { margin-top: var(--cb-hrt, 10px); }
[style*="--cb-mob:1"] .pd-cb3__btns { margin-top: var(--cb-btt, 30px); }
[style*="--cb-mob:1"] .pd-cb3__btn { width: var(--cb-bwt, 235px); }
}
@media (max-width: 479px) {
.area--contacts.pd-contact-block[style*="--cb-mix:1"] { background: linear-gradient(to bottom, #f8f0eb calc(var(--cb-mtm, 0px) + var(--cb-mhm, 279px) + var(--cb-mgm, 13px)), var(--pd-navy) 0); }
[style*="--cb-mob:1"] .pd-cb3__map { width: 300px; height: var(--cb-mhm, 279px); margin: var(--cb-mtm, 40px) auto var(--cb-mgm, 0px); }
[style*="--cb-mob:1"] .pd-cb3__left { padding: var(--cb-ptm, 30px) 0 var(--cb-pbm, 40px); }
[style*="--cb-mob:1"] .pd-cb3__big { margin-top: var(--cb-pvm, 10px); max-width: var(--cb-awm, 299px); font-size: 24px; }
[style*="--cb-mob:1"] .pd-cb3__label--addr { margin-top: var(--cb-alm, 25px); }
[style*="--cb-mob:1"] .pd-cb3__addr { margin-top: var(--cb-avm, 10px); }
[style*="--cb-mob:1"] .pd-cb3__hours { margin-top: var(--cb-hrm, 40px); max-width: 321px; }
[style*="--cb-mob:1"] .pd-cb3__btns { margin-top: var(--cb-btm, 30px); gap: 20px; }
[style*="--cb-mob:1"] .pd-cb3__btn { width: var(--cb-bwm, 265px); }
/* FAQ: текст вопроса 265 px, как у Tilda (поля 20, справа 50; было 255 — «КАКОВЫ СРОКИ СТРОИТЕЛЬСТВА» не помещалось
в строку, вопрос шёл в четыре строки вместо двух) */
.pd-faq2 summary { padding-right: 50px; }
/* панель квиза на телефоне — во всю ширину окна, как у Tilda (форма 335 px; была 295 — варианты с фото 138 px вместо 158
и на строку-две длиннее) */
.pd-quiz2 { margin-inline: -20px; }
}