.pd-top{padding:16px 0 0}
.pd-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--gray);min-width:0}
.crumbs a{color:var(--gray);white-space:nowrap}
.crumbs a:hover{color:var(--green-dark)}
.crumbs i{font-style:normal;opacity:.45}
.crumbs em{font-style:normal;color:var(--ink);white-space:nowrap}
/* ============================================================
КОНТАКТЫ (design-contacts.html)
Токены и компоненты – из дизайн-системы, новых цветов нет.
============================================================ */
/* --- шапка страницы (те же правила, что на «О нас» и «Доставке») --- */
.ab-top{padding:16px 0 4px}
.ab-top h1{max-width:26ch;text-wrap:balance}
@media(min-width:1000px){.ab-top h1{max-width:none;text-wrap:nowrap}}
.ab-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px;font-size:13.5px;color:var(--gray)}
.ab-facts b{color:var(--ink)}
.ab-lead{margin-top:14px;max-width:78ch;color:var(--gray);font-size:14.5px;line-height:1.65}
.ab-row{display:flex;gap:28px;align-items:center}
.ab-txt{flex:1 1 auto;min-width:0}
.ab-ill{flex:0 0 auto;width:190px;display:block}
@media(max-width:900px){.ab-ill{display:none}}
.ab-facts .st{color:var(--orange);letter-spacing:1px}
/* ============================================================
КОНТАКТЫ (design-contacts.html)
Токены и компоненты – из дизайн-системы, новых цветов нет.
Свой префикс .ct- : имена .cnt/.city/.chip/.row в системе уже заняты.
============================================================ */
/* --- способы связи --- */
.ct-ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.ct-way{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);
padding:20px 20px 18px}
.ct-way .ic{width:38px;height:38px;border-radius:50%;background:var(--green-light);color:var(--green-dark);
display:grid;place-items:center;margin-bottom:12px}
.ct-way .ic svg{width:19px;height:19px}
.ct-way h3{font-family:var(--head);font-size:16px;font-weight:800}
.ct-way .desc{margin-top:6px;font-size:13px;color:var(--gray);line-height:1.5}
.ct-way .grow{flex:1 1 auto}
.ct-tel{display:block;margin-top:12px;font-family:var(--head);font-size:20px;font-weight:800;color:var(--ink);
letter-spacing:-.01em;white-space:nowrap}
.ct-tel:hover{color:var(--green-dark)}
.ct-tel2{display:block;margin-top:6px;font-size:14px;font-weight:700;color:var(--ink)}
.ct-tel2:hover{color:var(--green-dark)}
.ct-free{display:block;margin-top:3px;font-size:12px;color:var(--gray)}
.ct-mail{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--green-dark);
text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.ct-mail:hover{color:var(--green)}
.ct-mail-city{display:block;margin-top:12px;font-size:11.5px;font-weight:800;letter-spacing:.04em;
text-transform:uppercase;color:var(--gray)}
.ct-chans{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.ct-chans a{display:inline-flex;align-items:center;gap:7px;background:var(--page);border-radius:var(--r-pill);
padding:8px 13px;font-size:12.5px;font-weight:700;color:var(--ink);transition:.18s}
.ct-chans a:hover{background:var(--green-light);color:var(--green-dark)}
.ct-chans svg{width:15px;height:15px;flex:0 0 auto}
.ct-way .btn{margin-top:14px;width:100%;justify-content:center}
/* «перезвоним за 10 минут» – обещание с боевого сайта, не выдумка макета */
.ct-fast{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:var(--cream);
color:var(--orange-text);font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
border-radius:var(--r-pill);padding:5px 11px}
/* --- салоны на карте --- */
.ct-tabs{display:inline-flex;gap:4px;background:#fff;border-radius:var(--r-pill);padding:4px;box-shadow:var(--sh-sm)}
.ct-tab{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);padding:9px 18px;
font-family:var(--head);font-size:14px;font-weight:700;color:var(--gray);transition:.18s var(--ease)}
.ct-tab:hover{color:var(--green-dark)}
.ct-tab.on{background:var(--green);color:#fff}
.ct-tab .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
.ct-tab.on .dot{opacity:1}
.ct-place{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,392px);gap:18px;align-items:stretch}
.ct-map{position:relative;min-width:0;border-radius:var(--r-lg);overflow:hidden;background:#e9edf1;
box-shadow:var(--sh-sm);min-height:340px}
.ct-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* карта грузится, только когда доедет до экрана: третья сторона не должна тянуться при открытии страницы */
.ct-map .ct-map-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--gray);font-size:13px}
.ct-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);
overflow:hidden}
.ct-ph{position:relative;background:#e9edf1}
/* height:auto – у ![]()
проставлены width/height, и презентационная высота перебивает aspect-ratio */
.ct-ph img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 30%}
.ct-ph .tag{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);color:var(--green-dark);
font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
border-radius:var(--r-pill);padding:5px 11px;box-shadow:var(--sh-sm)}
.ct-body{flex:1 1 auto;display:flex;flex-direction:column;padding:20px 24px 24px}
.ct-card h3{font-family:var(--head);font-size:20px;font-weight:800}
.ct-hours{display:inline-flex;align-items:center;gap:6px;margin-top:9px;background:var(--green-light);
color:var(--green-dark);font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:5px 11px}
.ct-hours .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.ct-card dl{margin-top:16px;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:9px 16px;font-size:13.5px}
.ct-card dt{color:var(--gray);white-space:nowrap}
.ct-card dd{min-width:0;word-break:break-word}
.ct-card dd a{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
.ct-card dd a:hover{color:var(--green)}
.ct-card dd small{display:block;margin-top:2px;font-size:12px;color:var(--gray)}
.ct-pickup{display:flex;gap:11px;margin-top:16px;background:var(--page);border-radius:var(--r);padding:13px 15px}
.ct-pickup svg{width:18px;height:18px;flex:0 0 auto;color:var(--green-dark);margin-top:1px}
.ct-pickup b{display:block;font-family:var(--head);font-size:13.5px}
.ct-pickup small{display:block;margin-top:3px;font-size:12.5px;color:var(--gray);line-height:1.5}
.ct-ext{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:16px}
.ct-ext a{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);padding:8px 14px;
font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:.18s}
.ct-ext a:hover{box-shadow:inset 0 0 0 1.5px var(--green);color:var(--green-dark)}
.ct-ext svg{width:14px;height:14px}
.ct-pane[hidden]{display:none}
/* --- куда писать по какому вопросу --- */
.ct-route{display:grid;gap:0;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden}
.ct-rrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px 24px;
padding:17px 24px;border-bottom:1px solid var(--line)}
.ct-rrow:last-child{border-bottom:none}
.ct-rrow b{font-family:var(--head);font-size:15px;font-weight:800}
.ct-rrow .q small{display:block;margin-top:3px;font-size:12.5px;color:var(--gray);line-height:1.5}
.ct-rrow .a{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--gray)}
.ct-rrow .a a{color:var(--green-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ct-rrow .a a:hover{color:var(--green)}
.ct-when{display:inline-flex;align-items:center;gap:6px;background:var(--page);color:var(--gray);
font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:var(--r-pill);
padding:4px 10px;white-space:nowrap}
/* --- форма --- */
.ct-form-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,352px);gap:24px 32px;align-items:start}
.ct-form{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:24px 26px 26px}
.ct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ct-grid label,.ct-full label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:700;color:var(--gray)}
.ct-full{margin-top:14px}
.ct-form textarea.field{height:112px;padding:12px 14px;line-height:1.55;resize:vertical;font-family:var(--body)}
/* панель тем раскрывается ВНИЗ: у калькулятора она открывается вверх (поле у нижнего края карточки),
здесь наоборот – под полем есть место, а над ним стоит ряд «Имя / Телефон» */
.ct-form .ipanel{top:calc(100% + 8px);bottom:auto;max-height:none}
.ct-form .ipicker input{cursor:pointer}
.ct-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px}
.ct-send .btn{flex:0 0 auto}
.ct-agree{flex:1 1 200px;min-width:0;font-size:12px;color:var(--gray);line-height:1.5}
.ct-agree a{color:var(--green-dark);text-decoration:underline;text-underline-offset:2px}
.ct-form .field.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(199,65,52,.12)}
.ct-form-note{background:var(--grad-green);position:relative;isolation:isolate;border-radius:var(--r-lg);padding:20px 22px}
.ct-form-note::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
background-image:var(--grain);background-size:220px 220px;opacity:.32;mix-blend-mode:multiply}
.ct-form-note b{display:block;font-family:var(--head);font-size:16px;color:var(--green-dark)}
.ct-form-note p{margin-top:8px;font-size:13.5px;color:var(--ink);line-height:1.6}
.ct-form-note p + p{margin-top:9px}
.ct-form-note a{color:var(--green-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* макетное «спасибо» – тот же приём, что в блоке подписки */
.ct-done{display:none;flex-direction:column;align-items:flex-start;gap:10px;padding:8px 0 4px}
.ct-form.is-done .ct-done{display:flex}
.ct-form.is-done form{display:none}
.ct-done .ok{width:44px;height:44px;border-radius:50%;background:var(--green-light);color:var(--green-dark);
display:grid;place-items:center}
.ct-done .ok svg{width:22px;height:22px}
.ct-done b{font-family:var(--head);font-size:17px}
.ct-done small{font-size:13.5px;color:var(--gray);line-height:1.55;max-width:52ch}
/* на сайте текст «спасибо» у каждой темы свой (поле «Темы обращения» в админке) – показывается один из них */
.ct-done-tx{font-size:13.5px;color:var(--gray);line-height:1.55;max-width:52ch}
.ct-done-tx[hidden]{display:none}
.ct-done-tx p + p{margin-top:6px}
.ct-done-tx a{color:var(--green-dark);font-weight:700}
/* --- реквизиты --- */
.ct-req{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden}
.ct-req summary{display:flex;align-items:center;gap:12px;padding:19px 24px;cursor:pointer;list-style:none}
.ct-req summary::-webkit-details-marker{display:none}
.ct-req summary b{flex:1 1 auto;font-family:var(--head);font-size:17px;font-weight:800}
.ct-req summary .hint{flex:0 0 auto;font-size:12.5px;color:var(--gray)}
.ct-req summary .car{flex:0 0 auto;width:20px;height:20px;color:var(--gray);transition:transform .22s var(--ease)}
.ct-req[open] summary .car{transform:rotate(180deg)}
.ct-req .in{padding:0 24px 22px}
.ct-req dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:9px 20px;font-size:13.5px;
padding-top:6px;border-top:1px solid var(--line)}
.ct-req dt{color:var(--gray);white-space:nowrap;padding-top:1px}
.ct-req dd{min-width:0;word-break:break-word;font-variant-numeric:tabular-nums}
.ct-req dd a{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
.ct-req-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.ct-copy{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);padding:9px 15px;
font-size:13px;font-weight:700;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:.18s}
.ct-copy:hover{box-shadow:inset 0 0 0 1.5px var(--green);color:var(--green-dark)}
.ct-copy.ok{background:var(--green-light);color:var(--green-dark);box-shadow:inset 0 0 0 1.5px var(--green-light)}
.ct-copy svg{width:15px;height:15px}
.ct-docs{display:flex;flex-wrap:wrap;gap:10px}
.ct-docs a{display:inline-flex;align-items:center;gap:8px;background:var(--page);border-radius:var(--r-pill);
padding:9px 15px;font-size:13px;font-weight:700;color:var(--ink);transition:.18s}
.ct-docs a:hover{background:var(--green-light);color:var(--green-dark)}
.ct-docs svg{width:15px;height:15px;color:var(--green-dark)}
/* --- адаптив --- */
@media(max-width:1080px){
.ct-ways{grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-place{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.ct-form-wrap{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:20px}
}
@media(max-width:900px){
.ct-place{grid-template-columns:1fr}
.ct-map{min-height:0;aspect-ratio:16/10}
.ct-form-wrap{grid-template-columns:1fr}
.ct-rrow{grid-template-columns:1fr;gap:8px}
}
@media(max-width:560px){
.ct-ways{grid-template-columns:1fr}
.ct-grid{grid-template-columns:1fr}
/* min-height + aspect-ratio на узком экране раздувают ширину: высота 260 при 4:3 требует 347px,
а колонка даёт 296 – плитка вылезала за экран. Высоту на телефоне задаёт только пропорция. */
.ct-map{min-height:0;aspect-ratio:1/1}
.ct-body{padding:18px 18px 22px}
.ct-form{padding:20px 18px 22px}
.ct-rrow{padding:15px 18px}
.ct-req summary{padding:17px 18px}
.ct-req .in{padding:0 18px 20px}
.ct-card dl,.ct-req dl{grid-template-columns:1fr;gap:2px 0}
.ct-card dt,.ct-req dt{margin-top:9px}
/* полоса вкладок шире экрана – даём ей прокрутиться, а не растянуть страницу */
.ct-tabs{display:flex;max-width:100%;overflow-x:auto}
.ct-tab{white-space:nowrap;padding:9px 14px}
}
/* объёмные иконки */
/* Иконка – один