/* ============ Quiz Widget — общий рендер (сайт + предпросмотр билдера) ============
   ПЕРЕНЕСЁН ИЗ NDBH как есть (media/assets/css/quiz_widget.css).
   Здесь заданы РАЗМЕРЫ полотна квиза: ширина карточки, её минимальная высота,
   сетка с колонкой консультанта, поля и отступы. Без этого файла виджет
   растекается по ширине и схлопывается по высоте — тексты налезают друг на друга.
   Единственная правка против оригинала — путь к шрифтам (у нас они лежат
   в /quiz-builder/fonts/). Всё остальное трогать нельзя: тем же файлом
   пользуется и публичная страница квиза. ============ */
@font-face{ font-family:'font1'; src:url('/quiz-builder/fonts/font1.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'font2'; src:url('/quiz-builder/fonts/font2.woff2') format('woff2'); font-display:swap; }
.wq{ --wq-acc:#4700ad; --wq-card:#fff; --wq-field-bg:#fff; --wq-field-text:#1a1a1a; --wq-text:#1a1a1a; --wq-muted:#6f6790; --wq-line:#ece7f7; --wq-soft:#f7f5fc;
  font-family:var(--wq-font, 'font2', -apple-system, Segoe UI, Roboto, Arial, sans-serif); color:var(--wq-text); box-sizing:border-box; }
.wq *{ box-sizing:border-box; }
/* шрифт виджета не должен перебиваться глобальными h1/p/button сайта — форсируем наследование */
.wq h1,.wq h2,.wq h3,.wq h4,.wq h5,.wq p,.wq span,.wq div,.wq button,.wq input,.wq textarea,.wq select,.wq a,.wq label,.wq li{ font-family:inherit; }
.wq[data-theme="dark"]{ --wq-card:#2b2842; --wq-field-bg:#221f38; --wq-field-text:#fff; --wq-text:#fff; --wq-muted:#a99fc9; --wq-line:#403b5e; --wq-soft:#353150; }
.wq[dir="rtl"]{ direction:rtl; text-align:right; }

.wq-hd{ text-align:center; margin:0 auto 30px; max-width:760px; }
.wq-hd h1{ font-size:38px; line-height:1.15; font-weight:800; margin:0 0 12px; color:var(--wq-text); }
.wq-hd p{ font-size:17px; line-height:1.55; color:var(--wq-muted); margin:0; }
.wq-badge{ display:inline-block; background:color-mix(in srgb,var(--wq-acc) 12%,transparent); color:var(--wq-acc);
  font-size:13px; font-weight:700; padding:8px 16px; border-radius:100px; margin-bottom:16px; }

.wq-widget{ display:grid; grid-template-columns:1fr 330px; gap:22px; align-items:start; max-width:1200px; margin:0 auto; }
.wq-widget.nocons{ grid-template-columns:1fr; max-width:920px; }

.wq-card{ background:var(--wq-card); border-radius:var(--wq-radius,22px); box-shadow:var(--wq-shadow,0 14px 46px rgba(20,0,60,.10));
  padding:var(--wq-pad,30px 36px 26px); min-height:650px; display:flex; flex-direction:column; }
.wq-cat{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--wq-muted); font-weight:700;
  padding-bottom:16px; border-bottom:1px solid var(--wq-line); margin-bottom:24px; }
.wq-cat svg{ width:18px; height:18px; }
.wq-body{ flex:1; animation:wqin .3s ease; }
/* Страницу уже показал сервер — второй раз содержимое не «появляется».
   Пометку ставит сам виджет, когда перерисовывает готовую страницу. */
.wq-noin .wq-body{ animation:none; }
@keyframes wqin{ from{opacity:0; transform:translateY(10px);} to{opacity:1;} }
.wq-title{ font-size:28px; line-height:1.25; font-weight:800; margin:0 0 6px; color:var(--wq-text); }
.wq-flag{ display:inline-block; font-size:12px; font-weight:700; color:var(--wq-muted); background:var(--wq-soft); padding:4px 10px; border-radius:20px; margin:0 0 14px; }
.wq-sub{ font-size:15px; color:var(--wq-muted); margin:0 0 22px; }

/* ---- LIST (radio rows) ---- */
.wq-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wq-list.one{ grid-template-columns:1fr; }
.wq-opt{ display:flex; align-items:center; gap:14px; padding:16px 18px; border:2px solid var(--wq-line);
  border-radius:var(--wq-radius,12px); cursor:pointer; transition:all .15s; background:var(--wq-field-bg,#fff); color:var(--wq-field-text,#1a1a1a); }
.wq-opt:hover{ border-color:var(--wq-acc); }
.wq-opt.sel{ border-color:var(--wq-acc); background:color-mix(in srgb,var(--wq-acc) 7%,transparent); }
.wq-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--wq-line); flex-shrink:0; position:relative; }
.wq-opt.sel .wq-radio{ border-color:var(--wq-acc); }
.wq-opt.sel .wq-radio::after{ content:''; position:absolute; inset:4px; border-radius:50%; background:var(--wq-acc); }
.wq-check-box{ border-radius:50%; }
.wq-opt.sel .wq-check-box::after{ border-radius:50%; inset:4px; }
.wq-oi{ display:flex; align-items:center; color:var(--wq-icon,var(--wq-acc)); flex-shrink:0; }
.wq-oi svg{ width:24px; height:24px; }
.wq-oi img{ width:26px; height:26px; object-fit:contain; }
.wq-ol{ font-size:16px; font-weight:600; }

/* ---- CARDS (text tiles) ---- */
.wq-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.wq-cards.c2{ grid-template-columns:repeat(2,1fr); }
.wq-tile{ border:2px solid var(--wq-line); border-radius:var(--wq-radius,16px); padding:22px 16px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px; transition:all .15s; min-height:120px; justify-content:center; }
.wq-tile:hover{ border-color:var(--wq-acc); transform:translateY(-3px); }
.wq-tile.sel{ border-color:var(--wq-acc); background:color-mix(in srgb,var(--wq-acc) 7%,transparent); }
.wq-tile .wq-oi svg{ width:38px; height:38px; }
.wq-tile .wq-ol{ font-size:16px; font-weight:700; }

/* ---- CARDS WITH IMAGE ---- */
.wq-cards-img{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.wq-imgtile{ border:2px solid var(--wq-line); border-radius:var(--wq-radius,16px); overflow:hidden; cursor:pointer; transition:all .15s; position:relative; }
.wq-imgtile:hover{ border-color:var(--wq-acc); }
.wq-imgtile.sel{ border-color:var(--wq-acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--wq-acc) 30%,transparent); }
.wq-imgtile .ph{ width:100%; aspect-ratio:4/3; background:var(--wq-soft) center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:var(--wq-muted); font-size:13px; }
.wq-imgtile .cap{ padding:12px 14px; font-size:15px; font-weight:700; }
.wq-imgtile .tick{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid var(--wq-line); display:flex; align-items:center; justify-content:center; }
.wq-imgtile.sel .tick{ background:var(--wq-acc); border-color:var(--wq-acc); color:#fff; }

/* ---- LIST + SIDE IMAGE ---- */
.wq-listimg{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.wq-listimg .wq-list{ grid-template-columns:1fr; }
.wq-listimg .side{ aspect-ratio:4/3; border-radius:var(--wq-radius,16px); background:var(--wq-soft) center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:var(--wq-muted); font-size:13px; }

/* ---- INPUTS / DROPDOWN / DATETIME ---- */
.wq-input,.wq-dd,.wq-dt input{ width:100%; padding:16px 18px; border:2px solid var(--wq-line); border-radius:var(--wq-radius,12px);
  font-size:16px; color:var(--wq-field-text,#1a1a1a); background:var(--wq-field-bg,#fff); outline:none; font-family:inherit; }
.wq-input:focus,.wq-dd:focus,.wq-dt input:focus{ border-color:var(--wq-acc); }
.wq-input.err{ border-color:#e23b6d; }
.wq-dt{ display:flex; gap:14px; }
.wq-form{ display:flex; flex-direction:column; gap:12px; max-width:520px; }

/* ---- SLIDER / RANGE ---- */
.wq-slwrap{ padding:16px 4px 6px; }
.wq-slval{ display:flex; justify-content:flex-start; margin-bottom:16px; }
.wq-slval .box{ background:var(--wq-soft); border-radius:10px; padding:12px 20px; font-size:22px; font-weight:800; min-width:90px; text-align:center; }
/* единица измерения — рядом со значением, а не отдельной подписью у края */
.wq-unit{ font-style:normal; color:var(--wq-muted); white-space:nowrap; }
.wq-slval .box .wq-unit{ font-size:15px; font-weight:700; margin-left:6px; }
.wq .wq-if > .wq-unit{ font-size:15px; font-weight:700; padding:0 16px; flex:0 0 auto; }
.wq-range{ -webkit-appearance:none; width:100%; height:6px; border-radius:6px; background:var(--wq-line); outline:none; }
.wq-range::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--wq-acc); cursor:pointer; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.wq-range::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--wq-acc); cursor:pointer; border:3px solid #fff; }
.wq-ends{ display:flex; justify-content:space-between; font-size:13px; color:var(--wq-muted); margin-top:8px; }
/* диапазон: ОДНА дорожка + ДВА кружка (кастом, drag мышью/пальцем) */
.wq-dual{ position:relative; height:28px; margin:40px 12px 6px; }
.wq-dual-track{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:6px; border-radius:6px; background:var(--wq-line); }
.wq-dual-fill{ position:absolute; top:0; bottom:0; border-radius:6px; background:var(--wq-acc); }
.wq-dual-h{ position:absolute; top:50%; left:0; width:24px; height:24px; transform:translate(-50%,-50%); border-radius:50%; background:var(--wq-acc); border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:grab; touch-action:none; z-index:2; }
.wq-dual-h:active{ cursor:grabbing; }
.wq-dbub{ position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); background:var(--wq-soft); color:var(--wq-text); font-weight:800; font-size:15px; padding:4px 10px; border-radius:8px; white-space:nowrap; pointer-events:none; }

/* ---- footer bar ---- */
.wq-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:26px; padding-top:20px; border-top:1px solid var(--wq-line); }
.wq-prog{ font-size:14px; color:var(--wq-muted); font-weight:700; }
.wq-fr{ display:flex; align-items:center; gap:16px; }
.wq-hint{ font-size:13px; color:var(--wq-muted); }
.wq-next{ display:inline-flex; align-items:center; gap:8px; background:var(--wq-btn,var(--wq-acc)); color:var(--wq-btn-text,#fff); border:none; cursor:pointer;
  padding:14px 30px; border-radius:var(--wq-btn-radius,100px); font-family:inherit; font-size:16px; font-weight:700; transition:.15s; }
.wq-next:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.wq-next:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.wq-back{ background:none; border:none; color:var(--wq-muted); cursor:pointer; font-size:14px; font-weight:600; }

/* ---- стартовый экран (обложка) ---- */
.wq-cover{ display:grid; grid-template-columns:var(--wq-cover-cols,1fr 1fr); gap:0; max-width:1200px; margin:0 auto; border-radius:var(--wq-radius,24px); overflow:hidden; box-shadow:var(--wq-shadow,0 14px 46px rgba(20,0,60,.10)); background:var(--wq-card); min-height:650px; }
.wq-cover.pos-right .wq-cover-img{ order:2; }
.wq-cover-img{ background:center/cover no-repeat var(--wq-soft); min-height:280px; }
.wq-cover-body{ padding:52px 46px; display:flex; flex-direction:column; justify-content:center; }
.wq-cover-body h1{ font-size:36px; line-height:1.15; font-weight:800; margin:0 0 16px; color:var(--wq-text); }
.wq-cover-body p{ font-size:17px; line-height:1.6; color:var(--wq-muted); margin:0 0 30px; }
.wq-cover-btn{ position:relative; overflow:hidden; align-self:flex-start; background:var(--wq-btn,var(--wq-acc)); color:var(--wq-btn-text,#fff); border:none; padding:16px 40px; border-radius:var(--wq-btn-radius,100px); font-size:18px; font-weight:700; cursor:pointer; font-family:inherit; transition:.15s; }
.wq-cover-btn:hover{ filter:brightness(1.1); transform:translateY(-2px); }
.wq-cover-btn::after{ content:''; position:absolute; top:-60%; left:-75%; width:48%; height:220%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 35%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.12) 65%, rgba(255,255,255,0) 100%);
  transform:rotate(22deg); filter:blur(1px); animation:wqshine 4s cubic-bezier(.45,0,.2,1) infinite; pointer-events:none; }
@keyframes wqshine{ 0%,12%{ left:-75%; } 62%,100%{ left:150%; } }
@container (max-width:800px){ .wq-cover{ grid-template-columns:1fr; } .wq-cover.pos-right .wq-cover-img{ order:0; } .wq-cover-img{ min-height:180px; } .wq-cover-body{ padding:30px 22px; } .wq-cover-body h1{ font-size:26px; } }
@media (max-width:800px){ .wq-cover{ grid-template-columns:1fr; } }
/* обложка на весь экран (full-bleed до краёв вьюпорта, во всю высоту) */
.wq-cover-full{ min-height:100vh; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0; }
.wq-cover-full .wq-cover-body{ padding:6vw 7vw; }

/* ---- widget as panel (когда задан фон/тёмная тема) ---- */
.wq-panel{ padding:32px 26px; border-radius:24px; }
@media (max-width:600px){ .wq-panel{ padding:16px 12px; border-radius:16px; } }

/* ---- progress bar top ---- */
.wq-pbar{ height:8px; background:var(--wq-line); border-radius:8px; overflow:hidden; margin-bottom:18px; }
.wq-pbar i{ display:block; height:100%; background:var(--wq-progress,var(--wq-acc)); border-radius:8px; transition:width .35s; }
.wq-pbar.anim i{ background-image:linear-gradient(45deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%, transparent); background-size:22px 22px; animation:wqstripes 1s linear infinite; }
@keyframes wqstripes{ from{background-position:0 0;} to{background-position:22px 0;} }
/* прогресс-бар в футере (между «1/5» и «Enter») */
.wq-pbar-foot{ flex:1; margin:0 18px; }
@media (max-width:600px){ .wq-pbar-foot{ margin:0 10px; } }

/* ---- consultant ---- */
.wq-cons{ background:var(--wq-card); border-radius:var(--wq-radius,20px); box-shadow:var(--wq-shadow,0 14px 46px rgba(20,0,60,.10)); padding:22px; position:sticky; top:16px; }
/* выровнять верх правой колонки с содержимым левой карточки (в обычном режиме; full-height переопределяет своим отступом) */
.wq-widget > .wq-cons, .wq-widget > .wq-rightcol{ margin-top:26px; }
.wq-cons-h{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.wq-av{ width:54px; height:54px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.wq-avf{ width:54px; height:54px; border-radius:50%; background:var(--wq-acc); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; flex-shrink:0; }
.wq-cn{ font-weight:700; font-size:16px; } .wq-cr{ font-size:13px; color:var(--wq-muted); }
.wq-tip{ position:relative; background:var(--wq-soft); border-radius:14px; padding:16px 18px; font-size:14px; line-height:1.6; color:var(--wq-muted); font-style:italic; }

/* ---- result ---- */
.wq-price{ text-align:center; margin:6px 0; }
.wq-price .num{ font-size:64px; font-weight:800; color:var(--wq-acc); line-height:1; }
.wq-price .per{ font-size:20px; color:var(--wq-muted); font-weight:600; }
.wq-inc-t{ font-size:15px; font-weight:700; margin:22px 0 12px; }
.wq-inc{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.wq-inc li{ display:flex; align-items:center; gap:9px; font-size:15px; color:var(--wq-text); }
.wq-inc li::before{ content:'✓'; color:#22b07d; font-weight:800; }
.wq-summary{ background:var(--wq-soft); border-radius:12px; padding:14px 18px; margin:18px 0; }
.wq-srow{ display:flex; justify-content:space-between; font-size:14px; color:var(--wq-muted); padding:5px 0; }
.wq-srow span:last-child{ font-weight:700; color:var(--wq-text); }
.wq-cta{ display:flex; align-items:center; justify-content:center; width:100%; margin-top:20px; padding:17px; border:none;
  border-radius:var(--wq-radius,12px); background:var(--wq-btn,var(--wq-acc)); color:var(--wq-btn-text,#fff); font-family:inherit; font-size:18px; font-weight:700; cursor:pointer; }
.wq-cta:hover{ filter:brightness(1.1); }

/* ---- benefits under widget ---- */
.wq-bens{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1200px; margin:32px auto 0; }
.wq-ben{ display:flex; align-items:center; gap:16px; }
.wq-ben .ic{ width:56px; height:56px; border-radius:var(--wq-icon-radius,50%); background:var(--wq-icon-bg,color-mix(in srgb,var(--wq-acc) 10%,transparent)); color:var(--wq-icon,var(--wq-acc)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wq-ben .ic svg{ width:28px; height:28px; } .wq-ben .ic img{ width:30px; height:30px; }
.wq-ben .tx{ font-size:15px; line-height:1.45; color:var(--wq-text); }

/* ---- responsive (container-queries: реагирует на ширину контейнера) ---- */
@container (max-width:900px){
  .wq-widget,.wq-widget.nocons{ grid-template-columns:1fr; }
  .wq-cons{ position:static; }
  .wq-cards,.wq-cards-img{ grid-template-columns:1fr 1fr; }
  .wq-listimg{ grid-template-columns:1fr; } .wq-listimg .side{ order:-1; }
}
@container (max-width:600px){
  .wq-hd h1{ font-size:26px; } .wq-hd p{ font-size:14px; }
  .wq-card{ padding:22px 18px; min-height:auto; border-radius:16px; }
  .wq-title{ font-size:21px; }
  .wq-list{ grid-template-columns:1fr; }
  .wq-cards,.wq-cards-img{ grid-template-columns:1fr; }
  .wq-inc{ grid-template-columns:1fr; }
  .wq-bens{ grid-template-columns:1fr; gap:14px; }
  .wq-hint{ display:none; }
  .wq-price .num{ font-size:48px; }
}
/* запасной вариант для реального маленького экрана (если контейнер не задан) */
@media (max-width:600px){
  .wq-list,.wq-cards,.wq-cards-img,.wq-inc,.wq-bens{ grid-template-columns:1fr; }
  .wq-widget,.wq-widget.nocons{ grid-template-columns:1fr; }
}

/* ==== Поля контактов: иконки (flex) + телефон — авторитетно в CSS-файле,
   чтобы вид не зависел от состояния кэша quiz_widget.js (перебивает старый JS-инжект) ==== */
.wq .wq-if{ display:flex!important; align-items:center!important; background:var(--wq-field-bg,#fff); border:2px solid var(--wq-line); border-radius:var(--wq-radius,12px); }
.wq .wq-if:focus-within{ border-color:var(--wq-acc); }
.wq .wq-if > svg{ position:static!important; flex:0 0 auto!important; width:20px; height:20px; margin:0 2px 0 16px!important; left:auto!important; top:auto!important; transform:none!important; color:var(--wq-field-text,#1a1a1a); opacity:.5; pointer-events:none; }
.wq .wq-if > .wq-input{ border:none!important; background:none!important; padding-left:12px!important; flex:1; min-width:0; color:var(--wq-field-text,#1a1a1a)!important; }
.wq[dir=rtl] .wq-if > svg{ margin:0 16px 0 2px!important; }
.wq[dir=rtl] .wq-if > .wq-input{ padding-left:18px!important; padding-right:12px!important; }
/* телефон — фон и текст как у полей (не следует за цветом фона/карточки) */
.wq .wq-phone{ background:var(--wq-field-bg,#fff)!important; }
.wq .wq-phone-menu,.wq .wq-phone-search,.wq .wq-phone-opt{ background:var(--wq-field-bg,#fff); color:var(--wq-field-text,#1a1a1a)!important; }
.wq .wq-phone-search{ background:var(--wq-field-bg,#fff)!important; }
.wq .wq-phone-num,.wq .wq-phone-cc,.wq .wq-phone-code,.wq .wq-phone-car{ color:var(--wq-field-text,#1a1a1a)!important; }
.wq .wq-phone-num{ background:none!important; }
/* варианты ответа — своя поверхность (не следуют за цветом карточки/фона) */
.wq .wq-opt{ background:var(--wq-field-bg,#fff)!important; }
.wq .wq-opt .wq-ol{ color:var(--wq-opt-color,var(--wq-field-text,#1a1a1a))!important; }
.wq .wq-opt.sel{ background:color-mix(in srgb,var(--wq-acc) 8%,var(--wq-field-bg,#fff))!important; }

/* ==== Поле контактов: свой значок, обязательность и вложенный файл ==== */
/* Звёздочка обязательного поля: в подсказке внутри поля её не видно, когда
   человек уже начал печатать. */
.wq-if{ position:relative; }
.wq-req{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#e5484d; font-size:16px; line-height:1; pointer-events:none; }
.wq[dir=rtl] .wq-req{ right:auto; left:14px; }
/* Площадка для файла в анкете: рамка краснеет, если файл не подошёл. */
.wq-form .wq-drop{ background:var(--wq-field-bg,#fff); }
.wq-form .wq-drop.err{ border-color:#e5484d; border-style:solid; }
/* Название поля с файлом — над площадкой, а не посреди неё. */
.wq-cfield{ display:flex; flex-direction:column; gap:6px; }
.wq-cflabel{ font-size:14px; font-weight:600; color:var(--wq-text); }
.wq-req-i{ color:#e5484d; }
/* Выбор страны — свой список с картинками флагов (системный <select>
   не умеет их показывать: во многих системах нет шрифта с флагами). */
.wq-cpick{ position:relative; }
.wq-cpick .wq-cpick-btn{ width:100%; justify-content:flex-start; gap:10px; padding:16px 18px; }
.wq-cpick .wq-cpick-name{ flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wq-cpick.err{ border-color:#e5484d; }
.wq[dir=rtl] .wq-cpick .wq-cpick-name{ text-align:right; }

/* ==== Своё содержимое шага: текст и медиа на любом шаге ==== */
.wq-stepbody{ font-size:15px; line-height:1.6; color:var(--wq-text); margin:0 0 18px; }
.wq-stepbody b,.wq-stepbody strong{ font-weight:700; }
.wq-stepmedia{ margin:0 0 20px; }
.wq-stepmedia.bottom{ margin:22px 0 0; }
.wq-stepimg{ display:block; width:100%; border-radius:var(--wq-radius,14px); }
/* Свой текст шага: заголовки, списки, картинки — как их расставил владелец. */
.wq-stepbody h2,.wq-stepbody h3,.wq-stepbody h4{ margin:18px 0 8px; line-height:1.25; font-weight:800; color:var(--wq-text); }
.wq-stepbody h2{ font-size:22px; } .wq-stepbody h3{ font-size:18px; } .wq-stepbody h4{ font-size:16px; }
.wq-stepbody p{ margin:0 0 10px; }
.wq-stepbody ul,.wq-stepbody ol{ margin:0 0 12px; padding-left:22px; }
.wq-stepbody li{ margin:3px 0; }
.wq-stepbody a{ color:var(--wq-acc); text-decoration:underline; }
.wq-stepbody img,.wq-stepbody video{ max-width:100%; height:auto; border-radius:var(--wq-radius,14px); display:block; margin:12px 0; }
.wq-stepbody blockquote{ margin:12px 0; padding:8px 14px; border-left:3px solid var(--wq-acc); color:var(--wq-muted); }

/* ==== Секции страницы ==================================================
   Каждая секция — самостоятельный кусок: свой фон, отступы, ширина.
   «wide» растягивает секцию на всю карточку (поля карточки компенсируем
   отрицательным margin), «narrow» сужает колонку текста до читаемой. */
.wq-pblocks{ margin-top:6px; }
.wq-pb{ position:relative; margin:0 0 18px; overflow:hidden; }
.wq-pb.wide{ margin-left:calc(-1 * var(--wq-pad-x, 36px)); margin-right:calc(-1 * var(--wq-pad-x, 36px)); border-radius:0; }
.wq-pb-in{ position:relative; z-index:1; }
.wq-pb.narrow .wq-pb-in{ max-width:660px; margin:0 auto; }
.wq-pb.shadow{ box-shadow:var(--wq-shadow, 0 14px 46px rgba(20,0,60,.10)); }
.wq-pb-over{ position:absolute; inset:0; background:#000; z-index:0; }
.wq-pb.rise{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.wq-pb.rise.seen{ opacity:1; transform:none; }
.wq-pb::after{ content:''; display:block; clear:both; }

.wq-pb-text{ font-size:15px; line-height:1.6; color:var(--wq-text); }
.wq-pb-line{ height:1px; background:var(--wq-line); }
.wq-pb-img img{ display:block; width:100%; height:auto; border-radius:var(--wq-radius,14px); }
.wq-pb-img figcaption{ font-size:13px; color:var(--wq-muted); margin-top:6px; }
.wq-pb-img.at-left{ float:left; margin:0 18px 12px 0; max-width:50%; }
.wq-pb-img.at-right{ float:right; margin:0 0 12px 18px; max-width:50%; }
.wq-pb-img.at-center{ margin-left:auto; margin-right:auto; }
.wq-pb-video{ border-radius:var(--wq-radius,14px); overflow:hidden; }

/* галерея и слайдер */
.wq-pb-gal{ display:grid; gap:10px; }
.wq-pb-gal.cols-2{ grid-template-columns:repeat(2,1fr); }
.wq-pb-gal.cols-3{ grid-template-columns:repeat(3,1fr); }
.wq-pb-gal.cols-4{ grid-template-columns:repeat(4,1fr); }
.wq-pb-gal .wq-pb-cell img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--wq-radius,12px); display:block; }
.wq-pb-sl{ position:relative; overflow:hidden; border-radius:var(--wq-radius,14px); }
.wq-pb-track{ display:flex; transition:transform .35s ease; }
.wq-pb-sl .wq-pb-cell{ flex:0 0 100%; }
.wq-pb-sl .wq-pb-cell img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.wq-pb-prev,.wq-pb-next{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px;
  border:none; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:22px; line-height:1; cursor:pointer; z-index:2; }
.wq-pb-prev{ left:10px; } .wq-pb-next{ right:10px; }
.wq-pb-prev:hover,.wq-pb-next:hover{ background:rgba(0,0,0,.65); }
.wq-pb-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:6px; z-index:2; }
.wq-pb-dots span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; }
.wq-pb-dots span.on{ background:#fff; }

/* две колонки */
.wq-pb-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; }
.wq-pb-cols.r-text{ grid-template-columns:1.6fr 1fr; }
.wq-pb-cols.r-media{ grid-template-columns:1fr 1.6fr; }
.wq-pb-cols.swap .wq-pb-col.media{ order:-1; }
.wq-pb-cols .wq-pb-col{ font-size:15px; line-height:1.6; color:var(--wq-text); min-width:0; }
.wq-pb-cols img{ width:100%; height:auto; display:block; border-radius:var(--wq-radius,14px); }

/* кнопка-призыв */
.wq-pb-btnrow{ display:flex; }
.wq-pb-btnrow.at-center{ justify-content:center; }
.wq-pb-btnrow.at-right{ justify-content:flex-end; }
.wq-pb-btn{ display:inline-block; padding:15px 30px; border-radius:var(--wq-btn-radius,var(--wq-radius,12px));
  background:var(--wq-btn,var(--wq-acc)); color:var(--wq-btn-text,#fff); font-weight:700; font-size:16px; text-decoration:none; }
.wq-pb-btn.outline{ background:transparent; color:var(--wq-btn,var(--wq-acc)); border:2px solid var(--wq-btn,var(--wq-acc)); }

/* плитки: три вида — карточкой, без рамки, с заливкой */
.wq-pb-tiles{ display:grid; gap:14px; }
.wq-pb-tiles.cols-1{ grid-template-columns:1fr; }
.wq-pb-tiles.cols-2{ grid-template-columns:repeat(2,1fr); }
.wq-pb-tiles.cols-3{ grid-template-columns:repeat(3,1fr); }
.wq-pb-tiles.cols-4{ grid-template-columns:repeat(4,1fr); }
.wq-pb-tiles.at-center{ text-align:center; }
.wq-pb-tiles.at-center .ic{ margin-left:auto; margin-right:auto; }
.wq-pb-tile{ background:var(--wq-card); border:2px solid var(--wq-line); border-radius:var(--wq-radius,16px); padding:20px 18px; }
.wq-pb-tiles.s-plain .wq-pb-tile{ background:none; border:none; padding:0; }
.wq-pb-tiles.s-fill .wq-pb-tile{ border:none; background:color-mix(in srgb, var(--wq-acc) 8%, transparent); }
.wq-pb-tile .ic{ display:block; color:var(--wq-icon,var(--wq-acc)); margin-bottom:10px; }
.wq-pb-tile .ic svg{ width:100%; height:100%; display:block; }
.wq-pb-tile b{ display:block; font-size:16px; margin-bottom:6px; color:var(--wq-text); }
.wq-pb-tile span{ font-size:14px; line-height:1.5; color:var(--wq-muted); }

/* цифры: рядом, колонками, простыми или карточками */
.wq-pb-nums{ display:grid; gap:22px; }
.wq-pb-nums.cols-1{ grid-template-columns:1fr; }
.wq-pb-nums.cols-2{ grid-template-columns:repeat(2,1fr); }
.wq-pb-nums.cols-3{ grid-template-columns:repeat(3,1fr); }
.wq-pb-nums.cols-4{ grid-template-columns:repeat(4,1fr); }
.wq-pb-nums.at-center{ text-align:center; }
.wq-pb-nums.s-card .wq-pb-num{ background:var(--wq-card); border:2px solid var(--wq-line);
  border-radius:var(--wq-radius,16px); padding:18px; }
.wq-pb-num b{ display:block; font-weight:800; color:var(--wq-acc); line-height:1.05; }
.wq-pb-num b i{ font-style:normal; font-size:.6em; opacity:.75; }
.wq-pb-num span{ display:block; margin-top:4px; font-size:14px; color:var(--wq-muted); }

/* отзывы: звёзды, дата, должность; сеткой или слайдером */
.wq-pb-revs{ display:grid; gap:16px; align-items:stretch; }
.wq-pb-revs.cols-1{ grid-template-columns:1fr; }
.wq-pb-revs.cols-2{ grid-template-columns:repeat(2,1fr); }
.wq-pb-revs.cols-3{ grid-template-columns:repeat(3,1fr); }
.wq-pb-revs.cols-4{ grid-template-columns:repeat(4,1fr); }

/* Карточка отзыва: кавычка, оценка, текст, а внизу — кто и когда.
   Подпись прижата к низу, поэтому карточки в ряду выглядят ровными
   независимо от длины текста. */
.wq-pb-rev{ position:relative; margin:0; background:var(--wq-card);
  border:1.5px solid var(--wq-line); border-radius:var(--wq-radius,16px);
  padding:22px 22px 18px; display:flex; flex-direction:column; gap:12px; height:100%;
  box-shadow:0 2px 10px rgba(20,0,60,.05); }
.wq-pb-rev::before{ content:'”'; position:absolute; top:2px; right:18px;
  font-size:60px; line-height:1; color:var(--wq-acc); opacity:.14; font-family:Georgia, serif; }
.wq-pb-rev .stars{ display:flex; gap:3px; font-size:15px; color:var(--wq-line); line-height:1; }
.wq-pb-rev .stars .on{ color:#f5a623; }
.wq-pb-rev blockquote{ margin:0; font-size:15px; line-height:1.6; color:var(--wq-text); flex:1; }
.wq-pb-rev .who{ display:flex; align-items:center; gap:12px;
  border-top:1px solid var(--wq-line); padding-top:14px; margin-top:2px; }
/* ⚠️ Размер жёстко: общее правило картинок секции растягивало аватар
   на всю ширину, и вместо кружка выходил широкий прямоугольник. */
.wq-pb-rev .who img{ width:46px!important; height:46px!important; flex:0 0 46px;
  border-radius:50%!important; object-fit:cover; display:block; margin:0!important; }
.wq-pb-rev figcaption{ font-size:14px; font-weight:700; color:var(--wq-text); line-height:1.3; }
.wq-pb-rev figcaption time{ display:block; font-weight:400; color:var(--wq-muted); font-size:12.5px; margin-top:2px; }
.wq-pb-sl.revs .wq-pb-cell{ padding:0 2px; }

/* вопрос-ответ */
.wq-pb-faq details{ border-bottom:1px solid var(--wq-line); padding:12px 0; }
.wq-pb-faq summary{ cursor:pointer; font-weight:700; font-size:15px; color:var(--wq-text); list-style:none; }
.wq-pb-faq summary::-webkit-details-marker{ display:none; }
.wq-pb-faq summary::after{ content:'+'; float:right; color:var(--wq-acc); font-size:20px; line-height:1; }
.wq-pb-faq details[open] summary::after{ content:'–'; }
.wq-pb-faq details > div{ padding-top:8px; font-size:14px; line-height:1.6; color:var(--wq-muted); }

/* ==== Контакты: пять видов ==== */
.wq-pb-cts{ display:flex; flex-wrap:wrap; gap:10px; }
.wq-pb-cts.at-center{ justify-content:center; }
.wq-pb-cts.at-right{ justify-content:flex-end; }
.wq-pb-ct{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--wq-text); }
.wq-pb-ct .ic{ display:block; flex:0 0 auto; color:var(--wq-icon,var(--wq-acc)); }
.wq-pb-ct .ic svg{ width:100%; height:100%; display:block; }
.wq-pb-ct .tx{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.wq-pb-ct .tx b{ font-weight:600; font-size:15px; }
.wq-pb-ct .tx span{ font-size:13px; color:var(--wq-muted); }

/* 1. Кнопками — по умолчанию. */
.wq-pb-cts.p-pills .wq-pb-ct{ padding:12px 18px; border-radius:100px;
  border:1.5px solid var(--wq-line); background:var(--wq-card); }
.wq-pb-cts.p-pills .wq-pb-ct:hover{ border-color:var(--wq-acc); }

/* 2. Списком — строка на строке, значок слева. */
.wq-pb-cts.p-list{ flex-direction:column; gap:14px; align-items:flex-start; }
.wq-pb-cts.p-list.at-center{ align-items:center; }
.wq-pb-cts.p-list .wq-pb-ct{ gap:14px; }
.wq-pb-cts.p-list .ic{ width:22px!important; height:22px!important; }

/* 3. Карточками — значок сверху, подпись и значение под ним. */
.wq-pb-cts.p-cards{ display:grid; gap:14px; }
.wq-pb-cts.p-cards.cols-1{ grid-template-columns:1fr; }
.wq-pb-cts.p-cards.cols-2{ grid-template-columns:repeat(2,1fr); }
.wq-pb-cts.p-cards.cols-3{ grid-template-columns:repeat(3,1fr); }
.wq-pb-cts.p-cards.cols-4{ grid-template-columns:repeat(4,1fr); }
.wq-pb-cts.p-cards .wq-pb-ct{ flex-direction:column; align-items:flex-start; gap:10px;
  padding:20px; border:1.5px solid var(--wq-line); border-radius:var(--wq-radius,16px); background:var(--wq-card); }
.wq-pb-cts.p-cards.at-center .wq-pb-ct{ align-items:center; text-align:center; }
.wq-pb-cts.p-cards .ic{ width:30px!important; height:30px!important; }

/* 4. Полосой — всё в один ряд на подложке, как в подвале сайта. */
.wq-pb-cts.p-bar{ background:color-mix(in srgb, var(--wq-acc) 8%, transparent);
  border-radius:var(--wq-radius,16px); padding:16px 20px; gap:26px; align-items:center; }
.wq-pb-cts.p-bar .tx b{ font-size:15px; }

/* 5. Только значки — кружки для мессенджеров и соцсетей. */
.wq-pb-cts.p-icons .wq-pb-ct{ width:52px; height:52px; border-radius:50%; justify-content:center;
  border:1.5px solid var(--wq-line); background:var(--wq-card); }
.wq-pb-cts.p-icons .tx{ display:none; }
.wq-pb-cts.p-icons .wq-pb-ct:hover{ border-color:var(--wq-acc); background:color-mix(in srgb, var(--wq-acc) 8%, transparent); }

/* карта и таблица */
.wq-pb-map{ border-radius:var(--wq-radius,14px); overflow:hidden; }
.wq-pb-map iframe{ width:100%; height:340px; border:0; display:block; }
/* Таблица: колонки одной ширины, читаемая шапка, видимые строки.
   ⚠️ Раньше ширина колонок скакала по содержимому, а всё кроме первой
   колонки прижималось вправо — выходил текст враскоряку, а не таблица. */
.wq-pb-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:15px;
  table-layout:fixed; border:1.5px solid var(--wq-line); border-radius:var(--wq-radius,14px); overflow:hidden; }
.wq-pb-table th,.wq-pb-table td{ padding:14px 16px; text-align:left; color:var(--wq-text);
  vertical-align:top; word-break:break-word; }
.wq-pb-table thead th{ background:var(--wq-soft); font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:.4px; color:var(--wq-muted); }
.wq-pb-table tbody tr + tr td,.wq-pb-table tbody tr:first-child td{ border-top:1px solid var(--wq-line); }
.wq-pb-table tbody td:first-child{ font-weight:600; }
.wq-pb-table tfoot td{ border-top:2px solid var(--wq-line); font-weight:800; background:var(--wq-soft); }
/* Числа в последней колонке — вправо, если владелец включил. */
.wq-pb-table.num th:last-child,.wq-pb-table.num td:last-child{ text-align:right; white-space:nowrap; }
/* Виды */
.wq-pb-table.t-plain{ border:none; border-radius:0; }
.wq-pb-table.t-plain thead th{ background:none; border-bottom:2px solid var(--wq-line); }
.wq-pb-table.t-zebra tbody tr:nth-child(odd) td{ background:var(--wq-soft); }
.wq-pb-table.t-grid th,.wq-pb-table.t-grid td{ border-right:1px solid var(--wq-line); }
.wq-pb-table.t-grid th:last-child,.wq-pb-table.t-grid td:last-child{ border-right:none; }
.wq-pb-table.t-card{ box-shadow:0 2px 12px rgba(20,0,60,.06); }
@media (max-width:600px){ .wq-pb-table{ font-size:13px; } .wq-pb-table th,.wq-pb-table td{ padding:10px 10px; } }

@media (max-width: 720px){
  .wq-pb-cols,.wq-pb-tiles.cols-3,.wq-pb-tiles.cols-4,.wq-pb-gal.cols-3,.wq-pb-gal.cols-4{ grid-template-columns:1fr 1fr; }
  .wq-pb-cols{ grid-template-columns:1fr; }
}
/* Форма внутри секции страницы: та же форма, что на шаге «Контакты». */
.wq-pb-form .wq-form{ max-width:520px; }
.wq-pb-send{ margin-top:14px; padding:15px 30px; border:none; border-radius:var(--wq-btn-radius,var(--wq-radius,12px));
  background:var(--wq-btn,var(--wq-acc)); color:var(--wq-btn-text,#fff); font-weight:700; font-size:16px; cursor:pointer; font-family:inherit; }
.wq-pb-send:disabled{ opacity:.6; cursor:default; }
.wq-pb-done{ margin-top:12px; font-size:15px; color:var(--wq-text); }
/* Подписи под снимками галереи и просмотр во весь экран. */
.wq-pb-cell{ margin:0; cursor:zoom-in; }
.wq-pb-cell figcaption{ font-size:12.5px; color:var(--wq-muted); margin-top:6px; }
.wq-lb{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.88); padding:40px 60px; }
.wq-lb.on{ display:flex; }
.wq-lb figure{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:12px; }
.wq-lb img{ max-width:100%; max-height:82vh; object-fit:contain; border-radius:10px; display:block; }
.wq-lb figcaption{ color:#fff; font-size:15px; text-align:center; }
.wq-lb button{ position:absolute; border:none; background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
  width:46px; height:46px; border-radius:50%; font-size:26px; line-height:1; }
.wq-lb button:hover{ background:rgba(255,255,255,.24); }
.wq-lb-x{ top:18px; right:18px; font-size:20px; }
.wq-lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.wq-lb-next{ right:18px; top:50%; transform:translateY(-50%); }
@media (max-width:600px){ .wq-lb{ padding:16px; } .wq-lb button{ width:38px; height:38px; } }

/* ==== Готовые виды секций =============================================
   Своего кода владелец не пишет, поэтому вид выбирается из заготовок.
   Каждая заготовка — законченное оформление, а не «рамка потолще». */

/* ---- Отзывы ---- */
/* 1. Карточка с кавычкой (по умолчанию) — правила выше. */

/* 2. Облако: текст в «пузыре» с хвостиком, автор под ним. */
.wq-pb-revs.p-bubble .wq-pb-rev{ background:none; border:none; box-shadow:none; padding:0; gap:0; }
.wq-pb-revs.p-bubble .wq-pb-rev::before{ display:none; }
.wq-pb-revs.p-bubble blockquote{ position:relative; background:var(--wq-soft); border-radius:18px;
  padding:18px 20px; font-size:15px; }
.wq-pb-revs.p-bubble blockquote::after{ content:''; position:absolute; left:26px; bottom:-9px;
  border:10px solid transparent; border-top-color:var(--wq-soft); border-bottom:0; }
.wq-pb-revs.p-bubble .stars{ order:3; margin-top:12px; }
.wq-pb-revs.p-bubble .who{ order:2; border:none; padding-top:16px; }

/* 3. Строгий: без рамки, линия слева, крупная цитата. */
.wq-pb-revs.p-minimal .wq-pb-rev{ background:none; border:none; box-shadow:none;
  border-left:3px solid var(--wq-acc); border-radius:0; padding:6px 0 6px 20px; }
.wq-pb-revs.p-minimal .wq-pb-rev::before{ display:none; }
.wq-pb-revs.p-minimal blockquote{ font-size:17px; line-height:1.55; font-weight:500; }
.wq-pb-revs.p-minimal .who{ border:none; padding-top:12px; }
.wq-pb-revs.p-minimal .who img{ width:38px!important; height:38px!important; flex-basis:38px; }

/* 4. С фото сверху: снимок по центру, под ним цитата и звёзды. */
.wq-pb-revs.p-photo .wq-pb-rev{ text-align:center; align-items:center; padding-top:26px; }
.wq-pb-revs.p-photo .wq-pb-rev::before{ display:none; }
.wq-pb-revs.p-photo .who{ order:-1; flex-direction:column; gap:6px; border:none; padding:0; }
.wq-pb-revs.p-photo .who img{ width:72px!important; height:72px!important; flex-basis:72px;
  box-shadow:0 4px 14px rgba(20,0,60,.18); }
.wq-pb-revs.p-photo .stars{ justify-content:center; }
.wq-pb-revs.p-photo blockquote{ font-size:15px; }

/* ---- Плитки ---- */
.wq-pb-tile .no{ display:none; }
.wq-pb-tiles.p-plain .wq-pb-tile{ background:none; border:none; padding:0; }
.wq-pb-tiles.p-fill .wq-pb-tile{ border:none; background:color-mix(in srgb, var(--wq-acc) 8%, transparent); }
/* Нумерованные: крупный номер вместо значка — «этапы работы». */
.wq-pb-tiles.p-steps .wq-pb-tile{ background:none; border:none; padding:0 0 0 56px; position:relative; }
.wq-pb-tiles.p-steps .ic{ display:none; }
.wq-pb-tiles.p-steps .no{ display:grid; place-items:center; position:absolute; left:0; top:0;
  width:40px; height:40px; border-radius:50%; background:var(--wq-acc); color:var(--wq-btn-text,#fff);
  font-weight:800; font-size:16px; }
/* Со значком в кружке — «преимущества». */
.wq-pb-tiles.p-round .wq-pb-tile{ background:none; border:none; padding:0; text-align:center; }
.wq-pb-tiles.p-round .ic{ display:grid; place-items:center; margin:0 auto 12px;
  width:64px!important; height:64px!important; border-radius:50%;
  background:color-mix(in srgb, var(--wq-acc) 12%, transparent); }
.wq-pb-tiles.p-round .ic svg{ width:60%; height:60%; }

/* ---- Цифры ---- */
.wq-pb-nums.p-card .wq-pb-num{ background:var(--wq-card); border:1.5px solid var(--wq-line);
  border-radius:var(--wq-radius,16px); padding:20px; }
/* Разделённые чертой — как в шапке сайта. */
.wq-pb-nums.p-split{ gap:0; }
.wq-pb-nums.p-split .wq-pb-num{ padding:6px 22px; border-left:1px solid var(--wq-line); }
.wq-pb-nums.p-split .wq-pb-num:first-child{ border-left:none; padding-left:0; }
/* Полосой с заливкой. */
.wq-pb-nums.p-band{ background:color-mix(in srgb, var(--wq-acc) 8%, transparent);
  border-radius:var(--wq-radius,16px); padding:22px; }

/* ---- Галерея ---- */
/* Мозаика: первый снимок крупный, остальные вокруг. */
.wq-pb-gal.p-mosaic{ grid-template-columns:repeat(4,1fr); grid-auto-rows:120px; }
.wq-pb-gal.p-mosaic .wq-pb-cell{ grid-column:span 1; grid-row:span 1; }
.wq-pb-gal.p-mosaic .wq-pb-cell:first-child{ grid-column:span 2; grid-row:span 2; }
.wq-pb-gal.p-mosaic .wq-pb-cell img{ height:100%; aspect-ratio:auto; }
/* Круглые снимки — «наша команда». */
.wq-pb-gal.p-round .wq-pb-cell img{ aspect-ratio:1/1; border-radius:50%; }
.wq-pb-gal.p-round{ text-align:center; }

/* ==== Слайдер: подпись поверх, пропорции, проявление ==== */
.wq-pb-sl .wq-pb-cell figcaption{ margin-top:8px; }
/* Подпись поверх снимка — на затемнении, чтобы читалась на любом фоне. */
.wq-pb-sl.cap-over .wq-pb-cell{ position:relative; }
.wq-pb-sl.cap-over .wq-pb-cell figcaption{ position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:34px 20px 18px; color:#fff; font-size:15px; line-height:1.4;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.72)); }
.wq-pb-sl.r-169 .wq-pb-cell img{ aspect-ratio:16/9; }
.wq-pb-sl.r-43  .wq-pb-cell img{ aspect-ratio:4/3; }
.wq-pb-sl.r-11  .wq-pb-cell img{ aspect-ratio:1/1; }
.wq-pb-sl.r-free .wq-pb-cell img{ aspect-ratio:auto; height:auto; }
/* Проявление вместо сдвига: лента не едет, снимки перекрывают друг друга. */
.wq-pb-sl.fade .wq-pb-track{ display:block; transform:none!important; position:relative; }
.wq-pb-sl.fade .wq-pb-cell{ position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.wq-pb-sl.fade .wq-pb-cell.on{ position:relative; opacity:1; }
.wq-pb-prev:disabled,.wq-pb-next:disabled{ opacity:.25; cursor:default; }

/* ==== Формы: четыре вида ==============================================
   Одна и та же колонка полей на весь макет выглядела бедно и занимала
   пол-экрана. Вид выбирается, как и у остальных секций. */
.wq-pb-form.at-center{ margin-left:auto; margin-right:auto; }
.wq-pb-form.w-narrow{ max-width:420px; }
.wq-pb-form.w-mid{ max-width:640px; }
.wq-pb-form.w-full{ max-width:none; }
.wq-pb-form .wq-form{ max-width:none; }
.wq-pb-fhead h3{ margin:0 0 6px; font-size:22px; font-weight:800; color:var(--wq-text); }
.wq-pb-ftext{ font-size:15px; line-height:1.55; color:var(--wq-muted); margin-bottom:16px; }
.wq-pb-send.wide{ width:100%; }

/* 1. Столбиком — как было, поля друг под другом. */

/* 2. Строкой: имя, телефон и кнопка в один ряд — «полоска заявки». */
.wq-pb-form.p-inline .wq-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.wq-pb-form.p-inline .wq-pb-send{ margin-top:10px; }
@media (min-width:860px){
  .wq-pb-form.p-inline{ display:flex; align-items:flex-end; gap:10px; }
  .wq-pb-form.p-inline .wq-form{ flex:1; }
  .wq-pb-form.p-inline .wq-pb-send{ margin:0; white-space:nowrap; }
}

/* 3. Карточкой: подложка, рамка, тень — форма выделена на странице. */
.wq-pb-form.p-card{ background:var(--wq-card); border:1.5px solid var(--wq-line);
  border-radius:var(--wq-radius,18px); padding:26px; box-shadow:0 6px 24px rgba(20,0,60,.07); }

/* 4. Пополам: слева заголовок и текст, справа поля. */
@media (min-width:820px){
  .wq-pb-form.p-split{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
  .wq-pb-form.p-split .wq-pb-fhead{ margin:0; }
  .wq-pb-form.p-split .wq-form{ grid-column:2; grid-row:1; }
  .wq-pb-form.p-split .wq-pb-send{ grid-column:2; }
}
/* Название поля над строкой ввода — когда у поля задана своя подсказка. */
.wq-flabel{ display:block; font-size:13px; font-weight:600; color:var(--wq-muted); margin:2px 0 -4px; }
.wq-flabel b{ color:#e5484d; font-weight:600; }

/* Подсказка внутри поля: своим цветом, а не «как повезёт».
   ⚠️ Без этого правила она наследовала цвет текста и на светлом поле
   оказывалась почти белой — человек видел пустое поле без подсказки. */
/* ⚠️ Цвет считаем ОТ ЦВЕТА ТЕКСТА САМОГО ПОЛЯ, а не от темы: у поля свои
   цвета (--wq-field-*), и подсказка, взятая из общей палитры, оказывалась
   белой на белом. Так она всегда контрастна содержимому поля. */
.wq input::placeholder,
.wq textarea::placeholder,
.wq .wq-input::placeholder,
.wq .wq-phone-num::placeholder,
.wq .wq-phone-search::placeholder{
  color: color-mix(in srgb, var(--wq-field-text, #1a1a1a) 55%, transparent);
  opacity: 1;
}

/* ==== Телефон: как перестраиваются секции ==============================
   ⚠️ Проверять надо кнопкой «Телефон» в предпросмотре. Всё, что задано в
   пикселях (значки, числа, колонки), на узком экране должно ужиматься —
   иначе страница разъезжается и текст лезет за край. */

/* Размер значка и числа: выбор владельца, но не больше доли экрана. */
.wq-pb-tile .ic{ width:var(--i,30px); height:var(--i,30px); }
.wq-pb-ct .ic{ width:var(--i,20px); height:var(--i,20px); }
.wq-pb-num b{ font-size:var(--n,34px); }

/* ==== Лендинг и сайт: это страница, а не шаг опроса ==== */
/* Название страницы — подпись для меню, а не заголовок на ней. Заголовок
   человек ставит секцией и сам решает, какой он и где. */
.wq-page .wq-stepwrap > .wq-title{ display:none; }
/* Карточка по содержимому: у квиза высота держит вопросы одного размера,
   а страница из двух абзацев растягивалась пустотой на весь экран. */
.wq-page .wq-card{ min-height:auto; }

/* ==== Меню сайта: страницы, связанные между собой ==== */
.wq-nav{ max-width:1240px; margin:0 auto 14px; padding:0 20px; }
.wq-nav-in{ display:flex; flex-wrap:wrap; gap:4px; align-items:center;
  background:var(--wq-card); border-radius:var(--wq-radius,16px); padding:8px 10px;
  box-shadow:var(--wq-shadow,0 8px 26px rgba(20,0,60,.08)); }
.wq-nav-l{ padding:9px 14px; border-radius:calc(var(--wq-radius,16px) - 6px); text-decoration:none;
  color:var(--wq-text); font-size:15px; font-weight:600; line-height:1.2; transition:background .15s,color .15s; }
.wq-nav-l:hover{ background:color-mix(in srgb, var(--wq-acc) 10%, transparent); }
/* Где мы сейчас — видно без догадок. Раздел подсвечен и когда открыта
   любая его внутренняя страница. */
.wq-nav-l.on{ background:var(--wq-acc); color:var(--wq-btn-text,#fff); }

/* Раздел со страницами внутри. */
.wq-nav-g{ position:relative; display:inline-flex; }
.wq-nav-g > .wq-nav-l{ display:inline-flex; align-items:center; gap:7px; }
.wq-nav-ch{ width:0; height:0; border:4px solid transparent; border-top-color:currentColor;
  margin-top:2px; transition:transform .15s; }
.wq-nav-sub{ position:absolute; left:0; top:100%; margin-top:6px; z-index:20;
  display:none; flex-direction:column; min-width:190px; padding:6px;
  background:var(--wq-card); border-radius:var(--wq-radius,14px);
  box-shadow:0 14px 40px rgba(20,0,60,.16); }
/* Мостик через зазор.
   ⚠️ Между пунктом и списком 6px пустоты. Курсор, идущий вниз, попадал в неё,
   наведение терялось, и список захлопывался прямо перед нажатием. Полоса
   прозрачная и лежит поверх зазора: видно всё то же, но мышь идёт по меню. */
.wq-nav-sub::before{ content:''; position:absolute; left:0; right:0; top:-8px; height:8px; }
.wq-nav-sub .wq-nav-l{ font-weight:500; font-size:14.5px; }
/* На компьютере раскрывается наведением, на телефоне — нажатием по стрелке. */
.wq-nav-g:hover .wq-nav-sub, .wq-nav-g.open .wq-nav-sub{ display:flex; }
.wq-nav-g.open .wq-nav-ch{ transform:rotate(180deg); }

/* ⚠️ Без этого ЛЮБОЙ широкий кусок (таблица, длинная ссылка, снимок)
   распирал всю карточку: она лежит в сетке, а элемент сетки по умолчанию
   не сжимается меньше своего содержимого — карточка становилась шире
   экрана, и правый край текста просто срезало. */
.wq-card,.wq-body,.wq-stepwrap,.wq-stepbody,.wq-pblocks,.wq-pb,.wq-pb-in,.wq-pb-text{ min-width:0; }
.wq-pb-text{ overflow-wrap:anywhere; }

/* Таблица шире экрана листается вбок, а не ломает страницу. */
.wq-pb-tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.wq-pb-tw .wq-pb-table{ min-width:420px; }

@media (max-width:760px){
  /* Секции «во всю ширину» считают поля от мобильных отступов карточки. */
  .wq-pb.wide{ margin-left:-18px; margin-right:-18px; }

  .wq-pb-tiles.cols-3,.wq-pb-tiles.cols-4{ grid-template-columns:repeat(2,1fr); }
  .wq-pb-nums.cols-3,.wq-pb-nums.cols-4{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .wq-pb-revs.cols-2,.wq-pb-revs.cols-3,.wq-pb-revs.cols-4{ grid-template-columns:1fr; }
  .wq-pb-cts.p-cards.cols-3,.wq-pb-cts.p-cards.cols-4{ grid-template-columns:repeat(2,1fr); }
  .wq-pb-cts.p-bar{ gap:14px; padding:14px 16px; }

  /* Картинка с обтеканием на узком экране только мешает — ставим в ряд. */
  .wq-pb-img.at-left,.wq-pb-img.at-right{ float:none; max-width:100%; margin:0 0 14px; }

  /* Две колонки: картинка сверху, текст под ней. Классы вида «текст шире»
     заданы точнее базового правила, поэтому перечисляем их поимённо —
     иначе колонки остаются рядом и текст сдавливается до трёх букв. */
  .wq-pb-cols,.wq-pb-cols.r-text,.wq-pb-cols.r-media{ grid-template-columns:1fr; gap:16px; }
  .wq-pb-cols .wq-pb-col.media{ order:-1; }

  .wq-pb-num b{ font-size:min(var(--n,34px), 11vw); }
  .wq-pb-tile .ic{ width:min(var(--i,30px), 13vw); height:min(var(--i,30px), 13vw); }
  .wq-pb-tiles.p-round .ic{ width:52px!important; height:52px!important; }
}

@media (max-width:520px){
  .wq-pb-tiles.cols-2,.wq-pb-tiles.cols-3,.wq-pb-tiles.cols-4{ grid-template-columns:1fr; }
  .wq-pb-nums.cols-2,.wq-pb-nums.cols-3,.wq-pb-nums.cols-4{ grid-template-columns:repeat(2,1fr); }
  .wq-pb-nums.p-split .wq-pb-num{ border-left:none; padding:6px 0; }
  .wq-pb-gal.cols-2,.wq-pb-gal.cols-3,.wq-pb-gal.cols-4{ grid-template-columns:repeat(2,1fr); }
  /* Мозаика на телефоне становится обычной сеткой: крупный снимок съедал экран. */
  .wq-pb-gal.p-mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .wq-pb-gal.p-mosaic .wq-pb-cell:first-child{ grid-column:span 2; grid-row:span 1; }
  /* Высота у мозаики задана рядами сетки; на телефоне рядов нет, и снимок
     без этого разворачивался в свой настоящий размер и накрывал подписи. */
  .wq-pb-gal.p-mosaic .wq-pb-cell img{ aspect-ratio:4/3; height:auto; }

  .wq-pb-cts.p-cards.cols-2,.wq-pb-cts.p-cards.cols-3,.wq-pb-cts.p-cards.cols-4{ grid-template-columns:1fr; }
  .wq-pb-cts.p-bar{ flex-direction:column; align-items:flex-start; gap:12px; }
  .wq-pb-cts.p-icons .wq-pb-ct{ width:46px; height:46px; }

  /* Слайдер: стрелки мельче и не налезают на снимок, подпись компактнее. */
  .wq-pb-prev,.wq-pb-next{ width:32px; height:32px; font-size:19px; }
  .wq-pb-prev{ left:6px; } .wq-pb-next{ right:6px; }
  .wq-pb-sl.cap-over .wq-pb-cell figcaption{ padding:22px 12px 12px; font-size:13px; }

  .wq-pb-rev{ padding:18px; }
  .wq-pb-revs.p-photo .who img{ width:56px!important; height:56px!important; flex-basis:56px; }

  /* Меню сайта на телефоне: без полей по бокам и с прокруткой в строку —
     пять страниц в столбик занимали бы весь первый экран. */
  .wq-nav{ padding:0; margin-bottom:10px; }
  .wq-nav-in{ flex-wrap:wrap; border-radius:0; padding:6px 8px; }
  .wq-nav-l{ white-space:nowrap; font-size:14px; padding:8px 12px; }
  /* ⚠️ Выпадающий список на телефоне не годится: он висит поверх и его
     нечем закрыть пальцем. Раздел раскрывается вниз, со сдвигом — как
     обычная гармошка. Наведения на телефоне нет, поэтому только по нажатию. */
  .wq-nav-g{ display:block; width:100%; }
  .wq-nav-g > .wq-nav-l{ justify-content:space-between; width:100%; }
  .wq-nav-g:hover .wq-nav-sub{ display:none; }
  .wq-nav-g.open .wq-nav-sub{ display:flex; position:static; min-width:0;
    margin:2px 0 2px 14px; padding:0; box-shadow:none; background:none; }
  /* На телефоне список раскрывается нажатием и стоит в потоке — мостик через
     зазор там не нужен и только занимал бы место. */
  .wq-nav-sub::before{ display:none; }

  /* Карточка на телефоне — во весь экран: скруглений и полей по бокам нет,
     иначе от 390px под текст остаётся чуть больше трёхсот. */
  .wq-card{ padding:18px 14px; border-radius:0; box-shadow:none; }
  .wq-pb.wide{ margin-left:-14px; margin-right:-14px; }

  /* ⚠️ Таблица на телефоне разворачивается в карточки «заголовок — значение».
     Четыре колонки в прокрутке вбок — это не чтение, а угадывание: половина
     цифр за краем, и непонятно, где срок, а где цена. Подпись берётся из
     шапки, её кладёт в ячейку сам виджет (data-th). */
  .wq-pb-tw{ overflow-x:visible; }
  .wq-pb-tw .wq-pb-table{ min-width:0; border:none; box-shadow:none; background:none; }
  .wq-pb-table,.wq-pb-table tbody,.wq-pb-table tfoot,.wq-pb-table tr,.wq-pb-table td{
    display:block; width:auto; min-width:0; }
  .wq-pb-table thead{ display:none; }
  .wq-pb-table tr{ border:1.5px solid var(--wq-line); border-radius:14px; padding:4px 14px;
    margin-bottom:10px; background:var(--wq-card); }
  .wq-pb-table td{ display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    padding:10px 0!important; border:none; border-bottom:1px solid var(--wq-line);
    text-align:left!important; font-size:14px; }
  .wq-pb-table tr td:last-child{ border-bottom:none; }
  /* Линии от настольного вида: в карточках они рисовали лишнюю черту сразу
     под верхним краем и полосу справа. Гасим теми же селекторами, иначе
     они точнее и перебивают правило выше. */
  .wq-pb-table tbody tr + tr td,.wq-pb-table tbody tr:first-child td{ border-top:none; }
  .wq-pb-table.t-grid th,.wq-pb-table.t-grid td{ border-right:none; }
  .wq-pb-table.t-zebra tbody tr:nth-child(odd) td{ background:none; }
  .wq-pb-table.t-zebra tbody tr:nth-child(odd){ background:var(--wq-soft); }
  .wq-pb-table tfoot td{ border-top:none; background:none; }
  .wq-pb-table tfoot tr{ background:var(--wq-soft); }
  .wq-pb-table td[data-th]::before{ content:attr(data-th); color:var(--wq-muted);
    font-weight:600; font-size:13px; flex:0 0 42%; }
  .wq-pb-table.num td{ text-align:left; }

  .wq-pb-btn{ display:block; text-align:center; }
  .wq-pb-form.p-card{ padding:18px; }
  .wq-pb-map{ height:min(var(--mh,340px), 58vw)!important; }
  .wq-pb-map iframe{ height:100%; }
  .wq-pb-fhead h3{ font-size:19px; }
}


/* ⚠️ То же самое, но по ширине КОНТЕЙНЕРА.
   В конструкторе кнопка «Телефон» сужает полотно, а экран остаётся
   широким — обычные @media там не срабатывают, и мобильный вид нельзя
   было ни увидеть, ни проверить. На публичной странице контейнера нет,
   поэтому работают правила выше. */
@container (max-width:760px){
  /* Секции «во всю ширину» считают поля от мобильных отступов карточки. */
  .wq-pb.wide{ margin-left:-18px; margin-right:-18px; }

  .wq-pb-tiles.cols-3,.wq-pb-tiles.cols-4{ grid-template-columns:repeat(2,1fr); }
  .wq-pb-nums.cols-3,.wq-pb-nums.cols-4{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .wq-pb-revs.cols-2,.wq-pb-revs.cols-3,.wq-pb-revs.cols-4{ grid-template-columns:1fr; }
  .wq-pb-cts.p-cards.cols-3,.wq-pb-cts.p-cards.cols-4{ grid-template-columns:repeat(2,1fr); }
  .wq-pb-cts.p-bar{ gap:14px; padding:14px 16px; }

  /* Картинка с обтеканием на узком экране только мешает — ставим в ряд. */
  .wq-pb-img.at-left,.wq-pb-img.at-right{ float:none; max-width:100%; margin:0 0 14px; }

  /* Две колонки: картинка сверху, текст под ней. Классы вида «текст шире»
     заданы точнее базового правила, поэтому перечисляем их поимённо —
     иначе колонки остаются рядом и текст сдавливается до трёх букв. */
  .wq-pb-cols,.wq-pb-cols.r-text,.wq-pb-cols.r-media{ grid-template-columns:1fr; gap:16px; }
  .wq-pb-cols .wq-pb-col.media{ order:-1; }

  .wq-pb-num b{ font-size:min(var(--n,34px), 11cqw); }
  .wq-pb-tile .ic{ width:min(var(--i,30px), 13cqw); height:min(var(--i,30px), 13cqw); }
  .wq-pb-tiles.p-round .ic{ width:52px!important; height:52px!important; }
}

@container (max-width:520px){
  .wq-pb-tiles.cols-2,.wq-pb-tiles.cols-3,.wq-pb-tiles.cols-4{ grid-template-columns:1fr; }
  .wq-pb-nums.cols-2,.wq-pb-nums.cols-3,.wq-pb-nums.cols-4{ grid-template-columns:repeat(2,1fr); }
  .wq-pb-nums.p-split .wq-pb-num{ border-left:none; padding:6px 0; }
  .wq-pb-gal.cols-2,.wq-pb-gal.cols-3,.wq-pb-gal.cols-4{ grid-template-columns:repeat(2,1fr); }
  /* Мозаика на телефоне становится обычной сеткой: крупный снимок съедал экран. */
  .wq-pb-gal.p-mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .wq-pb-gal.p-mosaic .wq-pb-cell:first-child{ grid-column:span 2; grid-row:span 1; }
  /* Высота у мозаики задана рядами сетки; на телефоне рядов нет, и снимок
     без этого разворачивался в свой настоящий размер и накрывал подписи. */
  .wq-pb-gal.p-mosaic .wq-pb-cell img{ aspect-ratio:4/3; height:auto; }

  .wq-pb-cts.p-cards.cols-2,.wq-pb-cts.p-cards.cols-3,.wq-pb-cts.p-cards.cols-4{ grid-template-columns:1fr; }
  .wq-pb-cts.p-bar{ flex-direction:column; align-items:flex-start; gap:12px; }
  .wq-pb-cts.p-icons .wq-pb-ct{ width:46px; height:46px; }

  /* Слайдер: стрелки мельче и не налезают на снимок, подпись компактнее. */
  .wq-pb-prev,.wq-pb-next{ width:32px; height:32px; font-size:19px; }
  .wq-pb-prev{ left:6px; } .wq-pb-next{ right:6px; }
  .wq-pb-sl.cap-over .wq-pb-cell figcaption{ padding:22px 12px 12px; font-size:13px; }

  .wq-pb-rev{ padding:18px; }
  .wq-pb-revs.p-photo .who img{ width:56px!important; height:56px!important; flex-basis:56px; }

  /* Меню сайта на телефоне: без полей по бокам и с прокруткой в строку —
     пять страниц в столбик занимали бы весь первый экран. */
  .wq-nav{ padding:0; margin-bottom:10px; }
  .wq-nav-in{ flex-wrap:wrap; border-radius:0; padding:6px 8px; }
  .wq-nav-l{ white-space:nowrap; font-size:14px; padding:8px 12px; }
  /* ⚠️ Выпадающий список на телефоне не годится: он висит поверх и его
     нечем закрыть пальцем. Раздел раскрывается вниз, со сдвигом — как
     обычная гармошка. Наведения на телефоне нет, поэтому только по нажатию. */
  .wq-nav-g{ display:block; width:100%; }
  .wq-nav-g > .wq-nav-l{ justify-content:space-between; width:100%; }
  .wq-nav-g:hover .wq-nav-sub{ display:none; }
  .wq-nav-g.open .wq-nav-sub{ display:flex; position:static; min-width:0;
    margin:2px 0 2px 14px; padding:0; box-shadow:none; background:none; }
  /* На телефоне список раскрывается нажатием и стоит в потоке — мостик через
     зазор там не нужен и только занимал бы место. */
  .wq-nav-sub::before{ display:none; }

  /* Карточка на телефоне — во весь экран: скруглений и полей по бокам нет,
     иначе от 390px под текст остаётся чуть больше трёхсот. */
  .wq-card{ padding:18px 14px; border-radius:0; box-shadow:none; }
  .wq-pb.wide{ margin-left:-14px; margin-right:-14px; }

  /* ⚠️ Таблица на телефоне разворачивается в карточки «заголовок — значение».
     Четыре колонки в прокрутке вбок — это не чтение, а угадывание: половина
     цифр за краем, и непонятно, где срок, а где цена. Подпись берётся из
     шапки, её кладёт в ячейку сам виджет (data-th). */
  .wq-pb-tw{ overflow-x:visible; }
  .wq-pb-tw .wq-pb-table{ min-width:0; border:none; box-shadow:none; background:none; }
  .wq-pb-table,.wq-pb-table tbody,.wq-pb-table tfoot,.wq-pb-table tr,.wq-pb-table td{
    display:block; width:auto; min-width:0; }
  .wq-pb-table thead{ display:none; }
  .wq-pb-table tr{ border:1.5px solid var(--wq-line); border-radius:14px; padding:4px 14px;
    margin-bottom:10px; background:var(--wq-card); }
  .wq-pb-table td{ display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    padding:10px 0!important; border:none; border-bottom:1px solid var(--wq-line);
    text-align:left!important; font-size:14px; }
  .wq-pb-table tr td:last-child{ border-bottom:none; }
  /* Линии от настольного вида: в карточках они рисовали лишнюю черту сразу
     под верхним краем и полосу справа. Гасим теми же селекторами, иначе
     они точнее и перебивают правило выше. */
  .wq-pb-table tbody tr + tr td,.wq-pb-table tbody tr:first-child td{ border-top:none; }
  .wq-pb-table.t-grid th,.wq-pb-table.t-grid td{ border-right:none; }
  .wq-pb-table.t-zebra tbody tr:nth-child(odd) td{ background:none; }
  .wq-pb-table.t-zebra tbody tr:nth-child(odd){ background:var(--wq-soft); }
  .wq-pb-table tfoot td{ border-top:none; background:none; }
  .wq-pb-table tfoot tr{ background:var(--wq-soft); }
  .wq-pb-table td[data-th]::before{ content:attr(data-th); color:var(--wq-muted);
    font-weight:600; font-size:13px; flex:0 0 42%; }
  .wq-pb-table.num td{ text-align:left; }

  .wq-pb-btn{ display:block; text-align:center; }
  .wq-pb-form.p-card{ padding:18px; }
  .wq-pb-map{ height:min(var(--mh,340px), 58cqw)!important; }
  .wq-pb-map iframe{ height:100%; }
  .wq-pb-fhead h3{ font-size:19px; }
}

/* ── Шапка и подвал сайта ──────────────────────────────────────────────
   ⚠️ Только у сайта и лендинга. У квиза их нет намеренно: он живёт вставкой
   на чужой странице, и своя шапка там спорила бы с чужой. */
/* ⚠️ Шапка прижата к самому верху: поля страницы (.wq-panel) выбираются
   отрицательным отступом. Без этого она висела карточкой посреди фона, с
   заметным зазором сверху — так шапки не делают. */
.wq-site-hd{ width:100%; margin:-32px -26px 14px; width:auto; }
.wq-site-hd.stick{ position:sticky; top:0; z-index:30; }
.wq-site-hd-in{ display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px 26px; border-radius:24px 24px 0 0;
  background:var(--wq-card); box-shadow:var(--wq-shadow,0 4px 14px rgba(20,0,60,.07)); }

/* Меню внутри шапки — как на обычном сайте. Своя полоса под шапкой читалась
   пришитой сбоку. */
.wq-nav.in-hd{ margin:0; flex:1; min-width:0; }
.wq-nav.in-hd .wq-nav-in{ background:none; box-shadow:none; padding:0; }

/* Выбор языка */
.wq-site-lg{ position:relative; display:inline-flex; }
.wq-site-lg-btn{ display:inline-flex; align-items:center; gap:7px; letter-spacing:.03em; cursor:pointer;
  border:1px solid var(--wq-line); background:none; color:var(--wq-text);
  padding:7px 12px; border-radius:10px; font:inherit; font-size:13.5px; font-weight:600; }
.wq-site-lg-btn:hover{ border-color:var(--wq-acc); }
.wq-site-lg-ch{ width:0; height:0; border:4px solid transparent; border-top-color:currentColor;
  margin-top:2px; transition:transform .15s; }
.wq-site-lg.open .wq-site-lg-ch{ transform:rotate(180deg); }
.wq-site-lg-list{ position:absolute; right:0; top:100%; margin-top:6px; z-index:40;
  display:none; flex-direction:column; min-width:170px; padding:6px;
  background:var(--wq-card); border-radius:var(--wq-radius,14px);
  box-shadow:0 14px 40px rgba(20,0,60,.16); }
/* Мостик через зазор — тот же приём, что и у меню: без него курсор теряет
   наведение на пустоте между кнопкой и списком. */
.wq-site-lg-list::before{ content:''; position:absolute; left:0; right:0; top:-8px; height:8px; }
.wq-site-lg:hover .wq-site-lg-list, .wq-site-lg.open .wq-site-lg-list{ display:flex; }
.wq-site-lg-i{ display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:9px;
  font-size:13.5px; font-weight:600; color:var(--wq-text); text-decoration:none; white-space:nowrap; }
/* Флаг — прямоугольником со скруглением, как в выборе страны у телефона:
   круглый флаг обрезает половину полос и перестаёт узнаваться. */
.wq-site-lg-fl{ width:20px; height:14px; border-radius:3px; object-fit:cover; display:block; }
.wq-site-lg-list{ min-width:120px; }
.wq-site-lg-i:hover{ background:color-mix(in srgb, var(--wq-acc) 10%, transparent); }
.wq-site-lg-i.on{ background:var(--wq-acc); color:var(--wq-btn-text,#fff); }
.wq-site-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.wq-site-logo{ height:34px; width:auto; display:block; }
.wq-site-name{ font-weight:700; font-size:16px; color:var(--wq-text); white-space:nowrap; }
.wq-site-tools{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; flex-wrap:wrap; }
.wq-site-tel{ font-weight:700; font-size:15px; color:var(--wq-text); text-decoration:none; white-space:nowrap; }
.wq-site-tel:hover{ color:var(--wq-acc); }
.wq-site-cta{ background:var(--wq-btn,var(--wq-acc)); color:var(--wq-btn-text,#fff);
  padding:9px 16px; border-radius:calc(var(--wq-btn-radius,14px) - 2px);
  font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.wq-site-langs{ display:flex; gap:2px; }
.wq-site-lang{ padding:5px 8px; border-radius:8px; font-size:12px; font-weight:700;
  color:var(--wq-muted); text-decoration:none; letter-spacing:.04em; }
.wq-site-lang:hover{ background:color-mix(in srgb, var(--wq-acc) 10%, transparent); }
.wq-site-lang.on{ background:var(--wq-acc); color:var(--wq-btn-text,#fff); }

.wq-site-ft{ width:100%; margin-top:18px; }
.wq-site-ft-in{ display:flex; gap:24px; flex-wrap:wrap;
  padding:18px 18px 14px; border-radius:var(--wq-radius,16px);
  background:var(--wq-card); color:var(--wq-muted); font-size:14px; line-height:1.6; }
.wq-site-ft-col{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wq-site-ft-col a{ color:var(--wq-text); text-decoration:none; }
.wq-site-ft-col a:hover{ color:var(--wq-acc); }
.wq-site-ft-name{ font-weight:700; color:var(--wq-text); }
/* Реквизиты — мельче остального: они нужны, но читать их никто не идёт. */
.wq-site-ft-req{ font-size:12.5px; opacity:.85; }
.wq-site-ft-soc{ flex-direction:row; gap:10px; margin-inline-start:auto; align-items:center; }
.wq-site-ft-l{ display:inline-flex; width:22px; height:22px; color:var(--wq-muted); }
.wq-site-ft-l:hover{ color:var(--wq-acc); }
.wq-site-ft-l svg{ width:100%; height:100%; }
.wq-site-ft-note{ padding:8px 18px 0; font-size:12px; color:var(--wq-muted); opacity:.8; }

@media (max-width:760px){
  /* На телефоне название и телефон должны остаться рядом, а кнопка уходит
     под них: втроём они не помещаются и ломают строку пополам. */
  .wq-site-hd{ margin:-16px -12px 10px; }
  .wq-site-hd-in{ padding:9px 12px; gap:10px; border-radius:16px 16px 0 0; }
  .wq-nav.in-hd{ order:3; flex-basis:100%; }
  .wq-site-cta{ width:100%; text-align:center; }
  .wq-site-ft-in{ flex-direction:column; gap:12px; }
  .wq-site-ft-soc{ margin-inline-start:0; }
}

/* ── Стили шапки ──────────────────────────────────────────────────────
   ⚠️ У каждого стиля СВОЙ строй, а не своя раскраска. Четыре вариации одного
   расположения — это выбор оттенка, а не стиля: сайты всё равно выходят на
   одно лицо. Здесь меняется порядок частей и вложенность. */

/* Классическая — задана выше (.wq-site-hd-in). */

/* Двухуровневая: тонкая полоса с контактами, под ней логотип и меню. */
.wq-site-hd.s-twolevel .wq-site-hd-top{ display:flex; justify-content:flex-end;
  padding:7px 26px; background:color-mix(in srgb, var(--wq-acc) 8%, var(--wq-card));
  border-radius:24px 24px 0 0; font-size:13.5px; }
.wq-site-hd.s-twolevel .wq-site-hd-top .wq-site-cta{ padding:5px 12px; font-size:13px; }
.wq-site-hd.s-twolevel .wq-site-hd-in{ border-radius:0; }

/* Разделённая: меню прижато к правому краю, кнопка за ним. */
.wq-site-hd.s-split .wq-site-hd-in.split .wq-nav.in-hd{ flex:none; margin-inline-start:auto; }
.wq-site-hd.s-split .wq-site-tools{ margin-inline-start:14px; }

/* По центру: логотип, инструменты, меню — столбиком. */
.wq-site-hd.s-center .wq-site-hd-in.center{ flex-direction:column; gap:10px; text-align:center;
  padding:18px 26px; border-radius:0 0 24px 24px; }
.wq-site-hd.s-center .wq-site-tools{ margin-inline-start:0; justify-content:center; }
.wq-site-hd.s-center .wq-nav.in-hd{ flex:none; }
.wq-site-hd.s-center .wq-nav.in-hd .wq-nav-in{ justify-content:center; }

/* Витрина: крупный логотип, меню вторым уровнем. */
.wq-site-hd.s-shop .wq-site-hd-in.shop{ padding:16px 26px; border-radius:24px 24px 0 0; }
.wq-site-hd.s-shop .wq-site-logo{ height:46px; }
.wq-site-hd.s-shop .wq-site-name{ font-size:19px; }
.wq-site-hd.s-shop .wq-site-tel{ font-size:17px; }
.wq-site-hd.s-shop .wq-site-hd-nav{ padding:0 26px 10px; background:var(--wq-card);
  border-radius:0 0 24px 24px; border-top:1px solid var(--wq-line); }
.wq-site-hd.s-shop .wq-site-hd-nav .wq-nav.in-hd{ padding-top:8px; }

/* Компактная: меню скрыто всегда, открывается кнопкой. */
.wq-site-hd.s-compact .wq-nav.in-hd{ display:none; }
.wq-site-hd.s-compact.nav-open .wq-nav.in-hd{ display:block; flex-basis:100%; order:9; }
.wq-site-hd.s-compact.nav-open .wq-nav-in{ flex-direction:column; align-items:stretch; gap:2px; }
.wq-site-bg.always{ display:flex; }

/* Без подложки — общий признак, работает поверх любого стиля. */
.wq-site-hd.bare .wq-site-hd-in{ background:none; box-shadow:none; }

/* ── Виды подвала ──────────────────────────────────────────────────── */

/* Широкая тёмная полоса во всю ширину — как у большинства сайтов услуг. */
.wq-site-ft.p-line{ margin:18px -26px -32px; }
.wq-site-ft.p-line .wq-site-ft-in{ border-radius:0; background:#1c1a26; color:rgba(255,255,255,.62);
  padding:26px; }
.wq-site-ft.p-line .wq-site-ft-col a,
.wq-site-ft.p-line .wq-site-ft-name{ color:#fff; }
.wq-site-ft.p-line .wq-site-ft-l{ color:rgba(255,255,255,.62); }
.wq-site-ft.p-line .wq-site-ft-note{ background:#1c1a26; color:rgba(255,255,255,.42);
  padding:0 26px 18px; margin:0; }

/* Одна строка по центру: для лендинга, где подвал не должен тянуть на себя. */
.wq-site-ft.p-slim .wq-site-ft-in{ justify-content:center; text-align:center; gap:10px;
  background:none; padding:14px 0 0; border-top:1px solid var(--wq-line); border-radius:0; }
.wq-site-ft.p-slim .wq-site-ft-col{ align-items:center; }
.wq-site-ft.p-slim .wq-site-ft-soc{ margin-inline-start:0; }
.wq-site-ft.p-slim .wq-site-ft-note{ text-align:center; padding:6px 0 0; }

@media (max-width:760px){
  /* На телефоне все стили сжимаются одинаково: разница строя там не
     помещается, а поля важнее украшений. */
  .wq-site-hd .wq-site-hd-in,
  .wq-site-hd .wq-site-hd-top,
  .wq-site-hd .wq-site-hd-nav{ padding-inline:12px; }
  .wq-site-hd.s-shop .wq-site-logo{ height:34px; }
  .wq-site-ft.p-line{ margin:14px -12px -16px; }
  .wq-site-ft.p-line .wq-site-ft-in{ padding:18px 14px; }
  .wq-site-ft.p-line .wq-site-ft-note{ padding:0 14px 14px; }
}

/* ── Ширина страницы ───────────────────────────────────────────────────
   ⚠️ Одной ширины мало. Лендинг читается лучше узкой колонкой, а сайту
   компании с галереями, таблицами и картой в 920 пикселях тесно: снимки
   ужимаются вдвое, таблица переносится там, где могла бы не переноситься.
   Ширина задаётся у страницы целиком, чтобы шапка, содержимое и подвал
   стояли по одной линии, а не разъезжались. */
.wq-page.wq-w-narrow .wq-widget,
.wq-page.wq-w-narrow .wq-widget.nocons,
.wq-page.wq-w-narrow .wq-site-hd-in,
.wq-page.wq-w-narrow .wq-site-ft-in,
.wq-page.wq-w-narrow .wq-nav-in{ max-width:920px; margin-inline:auto; }

.wq-page.wq-w-normal .wq-widget,
.wq-page.wq-w-normal .wq-widget.nocons,
.wq-page.wq-w-normal .wq-site-hd-in,
.wq-page.wq-w-normal .wq-site-ft-in,
.wq-page.wq-w-normal .wq-nav-in{ max-width:1200px; margin-inline:auto; }

/* Во всю ширину — но с полями по краям: текст, упирающийся в край экрана,
   на большом мониторе не читается. */
.wq-page.wq-w-wide .wq-widget,
.wq-page.wq-w-wide .wq-widget.nocons,
.wq-page.wq-w-wide .wq-site-hd-in,
.wq-page.wq-w-wide .wq-site-ft-in,
.wq-page.wq-w-wide .wq-nav-in{ max-width:none; }
.wq-page.wq-w-wide.wq-panel{ padding-inline:clamp(16px, 4vw, 64px); }

/* Своя ширина, заданная числом. */
.wq-page.wq-w-own .wq-widget,
.wq-page.wq-w-own .wq-widget.nocons,
.wq-page.wq-w-own .wq-site-hd-in,
.wq-page.wq-w-own .wq-site-ft-in,
.wq-page.wq-w-own .wq-nav-in{ max-width:var(--wq-page-w,920px); margin-inline:auto; }

/* ── Бургер на телефоне ────────────────────────────────────────────────
   ⚠️ На узком экране пункты меню не помещаются в строку: при пяти-шести
   страницах шапка превращалась в кашу из переносов. На компьютере кнопка
   не нужна — меню и так на виду. */
.wq-site-bg{ display:none; width:38px; height:38px; padding:9px 8px; cursor:pointer;
  border:1px solid var(--wq-line); border-radius:10px; background:none;
  flex-direction:column; justify-content:space-between; }
.wq-site-bg span{ display:block; height:2px; border-radius:2px; background:var(--wq-text); }

@media (max-width:760px){
  .wq-site-bg{ display:flex; }
  /* Меню прячется целиком и разворачивается столбиком под шапкой. */
  .wq-site-hd .wq-nav.in-hd{ display:none; }
  .wq-site-hd.nav-open .wq-nav.in-hd{ display:block; order:9; flex-basis:100%; }
  .wq-site-hd.nav-open .wq-nav.in-hd .wq-nav-in{ flex-direction:column; align-items:stretch; gap:2px; }
  .wq-site-hd.nav-open .wq-nav.in-hd .wq-nav-l{ display:flex; justify-content:space-between; }
  /* Кнопка-призыв на телефоне занимала всю строку и отжимала бургер вниз. */
  .wq-site-cta{ width:auto; }
}

/* Крылья: меню слева, логотип по центру, контакты справа. */
.wq-site-hd.s-wings .wq-site-hd-in.wings{ display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:14px; padding:14px 26px; }
/* Колонки заданы номерами, а не порядком в разметке: без телефона или без меню
   логотип иначе съезжает с середины и стиль перестаёт отличаться от обычного. */
.wq-site-hd.s-wings .wq-nav.in-hd{ grid-column:1; flex:none; min-width:0; }
.wq-site-hd.s-wings .wq-site-brand{ grid-column:2; justify-content:center; }
.wq-site-hd.s-wings .wq-site-tools{ grid-column:3; justify-content:flex-end; margin-inline-start:0; }
.wq-site-hd.s-wings .wq-site-logo{ height:40px; }

@media (max-width:760px){
  /* На телефоне трёх колонок не хватает по ширине: логотип возвращается влево,
     меню разворачивается кнопкой под шапкой. */
  .wq-site-hd.s-wings .wq-site-hd-in.wings{ display:flex; padding:9px 12px; }
  .wq-site-hd.s-wings .wq-site-brand{ order:1; justify-content:flex-start; }
  .wq-site-hd.s-wings .wq-site-tools{ order:2; margin-inline-start:auto; }
  .wq-site-hd.s-wings .wq-nav.in-hd{ order:9; }
  .wq-site-hd.s-wings .wq-site-logo{ height:32px; }
}

/* Баннер: кнопка-призыв отдельной строкой во всю ширину. */
.wq-site-hd.s-banner .wq-site-hd-in.banner{ row-gap:12px; padding:12px 26px 14px; }
/* Инструменты перестают быть отдельной коробкой — иначе кнопку из них не
   вытащить вниз, перенос работает только между соседями по одной строке. */
.wq-site-hd.s-banner .wq-site-tools{ display:contents; }
/* Отступ, который раньше давал margin у инструментов. Когда меню есть, оно
   растягивается само и до этого отступа дело не доходит; когда меню выключили —
   отступ прижимает язык и телефон к правому краю. */
.wq-site-hd.s-banner .wq-site-hd-in.banner > .wq-site-brand{ margin-inline-end:auto; }
.wq-site-hd.s-banner .wq-site-cta{ order:9; flex-basis:100%; width:100%; text-align:center;
  padding:13px 18px; font-size:15.5px; }

@media (max-width:760px){
  .wq-site-hd.s-banner .wq-site-hd-in.banner{ padding:9px 12px 11px; }
  /* Общее правило возвращает кнопке ширину по содержимому — баннеру это ломает
     весь смысл, поэтому здесь ширина остаётся полной. */
  .wq-site-hd.s-banner .wq-site-cta{ width:100%; padding:12px 16px; }
}

/* Остров: карточка с отступом от краёв, фон страницы виден вокруг неё. */
/* Базовая шапка отрицательным отступом съедает поля страницы и прилипает к
   краям. Острову поля нужны — возвращаем их. */
.wq-site-hd.s-island{ margin:-16px 0 18px; }
.wq-site-hd.s-island .wq-site-hd-in.island{ padding:12px 18px;
  border-radius:var(--wq-radius,18px);
  box-shadow:var(--wq-shadow,0 8px 26px rgba(20,0,60,.10)); }
/* Липкая шапка тоже не должна упираться в край экрана: остров, приросший к
   верхней кромке, перестаёт читаться островом. */
.wq-site-hd.s-island.stick{ top:12px; }

@media (max-width:760px){
  .wq-site-hd.s-island{ margin:0 0 12px; }
  .wq-site-hd.s-island .wq-site-hd-in.island{ padding:9px 12px; border-radius:16px; }
  .wq-site-hd.s-island.stick{ top:8px; }
}

/* Капсула: узкая шапка по содержимому, по центру страницы. */
.wq-site-hd.s-pill{ margin:-16px 0 18px; }
/* max-width:100% ставится специально: ограничение ширины страницы (.wq-w-*)
   капсуле не нужно — она и так не шире своего содержимого, а вот вылезти за
   край экрана на узком мониторе может. */
.wq-site-hd.s-pill .wq-site-hd-in.pill{ width:fit-content; max-width:100%; margin-inline:auto;
  justify-content:center; gap:12px; padding:8px 10px 8px 18px; border-radius:999px; }
.wq-site-hd.s-pill .wq-nav.in-hd{ flex:none; }
.wq-site-hd.s-pill .wq-site-tools{ margin-inline-start:0; }
.wq-site-hd.s-pill .wq-site-logo{ height:28px; }
.wq-site-hd.s-pill .wq-site-name{ font-size:15px; }
/* Скруглением кнопка повторяет форму капсулы: прямоугольник внутри овала
   читается как чужая деталь. */
.wq-site-hd.s-pill .wq-site-cta{ border-radius:999px; padding:8px 16px; }
.wq-site-hd.s-pill .wq-site-lg-btn{ border-radius:999px; }
.wq-site-hd.s-pill.stick{ top:12px; }

@media (max-width:760px){
  /* На телефоне капсула занимает всю строку: сжатая по содержимому, она
     оставляет по бокам пустоту, в которую всё равно нечего положить. */
  .wq-site-hd.s-pill{ margin:0 0 12px; }
  .wq-site-hd.s-pill .wq-site-hd-in.pill{ width:auto; justify-content:flex-start;
    padding:8px 12px; border-radius:22px; }
  .wq-site-hd.s-pill .wq-site-tools{ margin-inline-start:auto; }
  .wq-site-hd.s-pill.stick{ top:8px; }
}

/* Лента: логотип наверху, меню и контакты на акцентной полосе. */
.wq-site-hd.s-ribbon .wq-site-hd-in.ribbon{ padding:14px 26px; }
.wq-site-hd.s-ribbon .wq-site-logo{ height:42px; }
.wq-site-hd.s-ribbon .wq-site-name{ font-size:19px; }
.wq-site-hd.s-ribbon .wq-site-hd-band{ background:var(--wq-acc);
  color:var(--wq-btn-text,#fff); border-radius:0 0 24px 24px; }
/* Полоса — только цвет и скругление, отступы живут на внутренней обёртке:
   иначе содержимое ленты не попадает в общую сетку ширины. */
.wq-site-hd.s-ribbon .wq-site-hd-in.band-row{ background:none; box-shadow:none;
  border-radius:0; padding:8px 26px; gap:14px; }
.wq-site-hd.s-ribbon .wq-site-hd-in.band-row .wq-nav.in-hd{ flex:1; }
/* Всё, что лежит НА ленте, красится её цветом текста. Тёмные буквы на
   акцентном фоне не читаются. */
.wq-site-hd.s-ribbon .band-row .wq-nav-l,
.wq-site-hd.s-ribbon .band-row .wq-site-tel,
.wq-site-hd.s-ribbon .band-row .wq-site-lg-btn{ color:inherit; }
.wq-site-hd.s-ribbon .band-row .wq-site-lg-btn{ border-color:color-mix(in srgb, currentColor 45%, transparent); }
.wq-site-hd.s-ribbon .band-row .wq-nav-l:hover{ background:color-mix(in srgb, currentColor 18%, transparent); }
/* Текущий пункт обычно заливается акцентом — на акцентной ленте он бы исчез. */
.wq-site-hd.s-ribbon .band-row > .wq-nav.in-hd .wq-nav-l.on{
  background:color-mix(in srgb, currentColor 26%, transparent); color:inherit; }
/* Кнопка на ленте — наоборот, светлая с акцентным текстом: акцент на акценте
   не виден вовсе. */
.wq-site-hd.s-ribbon .band-row .wq-site-cta{ background:var(--wq-card); color:var(--wq-acc); }
/* Выпадающие списки (страницы раздела, языки) лежат на КАРТОЧКЕ, а не на ленте.
   Белые буквы, унаследованные от полосы, там сливаются с фоном. */
.wq-site-hd.s-ribbon .wq-nav-sub .wq-nav-l,
.wq-site-hd.s-ribbon .wq-site-lg-i{ color:var(--wq-text); }
.wq-site-hd.s-ribbon .wq-nav-sub .wq-nav-l.on,
.wq-site-hd.s-ribbon .wq-site-lg-i.on{ background:var(--wq-acc); color:var(--wq-btn-text,#fff); }

@media (max-width:760px){
  .wq-site-hd.s-ribbon .wq-site-hd-in.ribbon{ padding:9px 12px; }
  .wq-site-hd.s-ribbon .wq-site-logo{ height:32px; }
  .wq-site-hd.s-ribbon .wq-site-hd-band{ border-radius:0 0 16px 16px; }
  /* Меню раскрывается столбиком прямо в ленте — там же, где стоит бургер по
     смыслу, и не перепрыгивает через логотип. */
  .wq-site-hd.s-ribbon .wq-site-hd-in.band-row{ padding:8px 12px; }
}

/* Башня: логотип слева, справа два этажа — контакты и меню. */
.wq-site-hd.s-tower .wq-site-hd-in.tower{ align-items:center; gap:20px; padding:14px 26px; }
.wq-site-hd.s-tower .wq-site-logo{ height:46px; }
.wq-site-hd.s-tower .wq-site-name{ font-size:18px; }
.wq-site-hd.s-tower .wq-site-hd-side{ display:flex; flex-direction:column; align-items:flex-end;
  gap:8px; flex:1; min-width:0; margin-inline-start:auto; }
.wq-site-hd.s-tower .wq-site-hd-side .wq-site-tools{ margin-inline-start:0; }
.wq-site-hd.s-tower .wq-site-hd-side .wq-nav.in-hd{ flex:none; width:100%; }
.wq-site-hd.s-tower .wq-site-hd-side .wq-nav-in{ justify-content:flex-end; }
/* Контакты этажом выше — мельче меню: иначе два ряда одного веса спорят между
   собой и глазу не за что зацепиться. */
.wq-site-hd.s-tower .wq-site-hd-side .wq-site-tel{ font-size:16px; }

@media (max-width:760px){
  /* Двух этажей на телефоне не выходит: контакты и бургер встают в строку с
     логотипом, меню разворачивается под ними. */
  .wq-site-hd.s-tower .wq-site-hd-in.tower{ gap:10px; padding:9px 12px; }
  .wq-site-hd.s-tower .wq-site-logo{ height:32px; }
  .wq-site-hd.s-tower .wq-site-hd-side{ flex-direction:row; flex-wrap:wrap;
    align-items:center; justify-content:flex-end; gap:10px; }
}

/* Меню сверху: служебная полоса разделов, под ней логотип и кнопка. */
/* Колонка нужна, чтобы на телефоне полосу можно было опустить под шапку
   порядком — там раскрытое меню должно быть под кнопкой, а не над логотипом. */
.wq-site-hd.s-topnav{ display:flex; flex-direction:column; }
.wq-site-hd.s-topnav .wq-site-hd-top{ display:flex; padding:5px 26px;
  background:var(--wq-soft); border-radius:24px 24px 0 0;
  border-bottom:1px solid var(--wq-line); }
.wq-site-hd.s-topnav .wq-site-hd-top .wq-nav-l{ padding:6px 12px; font-size:14px; }
.wq-site-hd.s-topnav .wq-site-hd-in{ border-radius:0 0 24px 24px; padding:16px 26px; }
/* Меню выключили — шапка осталась одна и скругляется со всех сторон. */
.wq-site-hd.s-topnav .wq-site-hd-in:first-child{ border-radius:24px; }
.wq-site-hd.s-topnav .wq-site-logo{ height:46px; }
.wq-site-hd.s-topnav .wq-site-name{ font-size:20px; }
.wq-site-hd.s-topnav .wq-site-cta{ padding:11px 20px; font-size:15px; }

@media (max-width:760px){
  .wq-site-hd.s-topnav .wq-site-hd-top{ order:2; padding:0 12px; border-bottom:none; }
  .wq-site-hd.s-topnav .wq-site-hd-in{ order:1; padding:9px 12px; border-radius:16px 16px 0 0; }
  .wq-site-hd.s-topnav .wq-site-hd-in:first-child{ border-radius:16px; }
  .wq-site-hd.s-topnav .wq-site-logo{ height:34px; }
  .wq-site-hd.s-topnav .wq-site-name{ font-size:16px; }
  /* Полоса пустая, пока меню свёрнуто: серая рамка без содержимого читалась
     поломкой. Появляется вместе с раскрытым меню. */
  .wq-site-hd.s-topnav .wq-site-hd-top{ background:none; }
  .wq-site-hd.s-topnav.nav-open .wq-site-hd-top{ background:var(--wq-soft);
    padding:6px 12px; border-radius:0 0 16px 16px; }
}

/* Полоса: тонкая строка во всю ширину, под липкую шапку. */
/* Подложка висит на самой шапке, а не на внутренней строке: строка ограничена
   шириной страницы, и цвет обрывался бы посреди экрана. */
.wq-site-hd.s-strip{ background:var(--wq-card);
  box-shadow:var(--wq-shadow,0 4px 14px rgba(20,0,60,.07)); }
.wq-site-hd.s-strip .wq-site-hd-in.strip{ background:none; box-shadow:none;
  border-radius:0; padding:6px 26px; gap:12px; }
.wq-site-hd.s-strip .wq-site-logo{ height:26px; }
.wq-site-hd.s-strip .wq-site-name{ font-size:14.5px; }
/* Меню держится середины: слева логотип, справа контакты — полоса читается
   слева направо тремя зонами. */
.wq-site-hd.s-strip .wq-nav.in-hd .wq-nav-in{ justify-content:center; }
.wq-site-hd.s-strip .wq-nav-l{ padding:6px 10px; font-size:14px; }
.wq-site-hd.s-strip .wq-site-tel{ font-size:14px; }
.wq-site-hd.s-strip .wq-site-cta{ padding:6px 13px; font-size:13.5px; }
.wq-site-hd.s-strip .wq-site-lg-btn{ padding:4px 9px; font-size:12.5px; }
.wq-site-hd.s-strip .wq-site-bg{ width:32px; height:32px; padding:8px 7px; }

@media (max-width:760px){
  .wq-site-hd.s-strip .wq-site-hd-in.strip{ padding:6px 12px; }
  /* На телефоне середина не нужна: меню всё равно раскрывается столбиком. */
  .wq-site-hd.s-strip.nav-open .wq-nav.in-hd .wq-nav-in{ justify-content:flex-start; }
}

/* Без подложки — у полосы фон лежит на самой шапке. */
.wq-site-hd.bare.s-strip{ background:none; box-shadow:none; }
/* У шапки с меню сверху и у ленты подложка на второй полосе. */
.wq-site-hd.bare.s-topnav .wq-site-hd-top{ background:none; }
.wq-site-hd.bare.s-ribbon .wq-site-hd-band{ background:none; color:var(--wq-text); }
.wq-site-hd.bare.s-ribbon .band-row .wq-site-cta{ background:var(--wq-btn,var(--wq-acc));
  color:var(--wq-btn-text,#fff); }

/* ── Четыре колонки ──────────────────────────────────────────────────── */
.wq-site-ft.p-cols .wq-site-ft-in{ display:grid; align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px 30px;
  padding:26px 24px 14px; }
.wq-site-ft.p-cols .wq-site-ft-name{ font-size:16px; margin-bottom:4px; }
/* Значки — вверху своей колонки, а не по центру: иначе они висят на уровне
   пустоты, когда соседняя колонка длиннее. */
.wq-site-ft.p-cols .wq-site-ft-soc{ align-self:start; margin-inline-start:0; }

@media (max-width:760px){
  /* Четыре колонки по 170 пикселей на телефон не встают, а сжимать их до
     двух — получаются обрывки строк. Столбиком. */
  .wq-site-ft.p-cols .wq-site-ft-in{ grid-template-columns:1fr; gap:14px;
    padding:18px 14px 12px; }
  .wq-site-ft.p-cols .wq-site-ft-bot{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ── Тёмный большой ──────────────────────────────────────────────────── */
/* Отрицательные поля — чтобы плита шла от края до края, а не карточкой
   внутри страницы: так же сделана p-line. */
.wq-site-ft.p-mega{ margin:26px -26px -32px; }
.wq-site-ft.p-mega .wq-site-ft-in{ display:grid; align-items:start; border-radius:0;
  grid-template-columns:1.5fr repeat(auto-fit,minmax(150px,1fr)); gap:26px 40px;
  padding:44px 26px 16px; background:#16151d; color:rgba(255,255,255,.6); }
.wq-site-ft.p-mega .wq-site-ft-lead{ gap:10px; }
.wq-site-ft.p-mega .wq-site-ft-name{ color:#fff; font-size:22px; letter-spacing:-.01em; }
.wq-site-ft.p-mega .wq-site-ft-col a,
.wq-site-ft.p-mega .wq-nav.in-ft .wq-nav-l{ color:rgba(255,255,255,.82); }
.wq-site-ft.p-mega .wq-site-ft-col a:hover,
.wq-site-ft.p-mega .wq-nav.in-ft .wq-nav-l:hover{ color:#fff; }
/* Телефон крупнее прочего: на тёмном он и есть главное действие. */
.wq-site-ft.p-mega .wq-site-ft-tel{ font-size:19px; font-weight:700; color:#fff; }
.wq-site-ft.p-mega .wq-site-ft-l{ color:rgba(255,255,255,.6); }
.wq-site-ft.p-mega .wq-site-ft-l:hover{ color:#fff; }
.wq-site-ft.p-mega .wq-site-ft-bot{ margin-top:8px; padding-top:14px;
  border-top-color:rgba(255,255,255,.12); color:rgba(255,255,255,.45); }
/* Приписка живёт вне .in, поэтому фон ей нужен свой — иначе под тёмной
   плитой окажется светлый хвост. */
.wq-site-ft.p-mega .wq-site-ft-note{ background:#16151d; color:rgba(255,255,255,.42);
  padding:0 26px 20px; margin:0; }

@media (max-width:760px){
  .wq-site-ft.p-mega{ margin:14px -12px -16px; }
  .wq-site-ft.p-mega .wq-site-ft-in{ grid-template-columns:1fr; gap:16px; padding:26px 14px 12px; }
  .wq-site-ft.p-mega .wq-site-ft-name{ font-size:19px; }
  .wq-site-ft.p-mega .wq-site-ft-note{ padding:0 14px 16px; }
}

/* ── Светлый по центру ───────────────────────────────────────────────── */
.wq-site-ft.p-center .wq-site-ft-in{ flex-direction:column; align-items:center;
  text-align:center; gap:12px; padding:30px 20px 18px;
  background:color-mix(in srgb, var(--wq-acc) 5%, var(--wq-card)); }
.wq-site-ft.p-center .wq-site-ft-col{ align-items:center; }
.wq-site-ft.p-center .wq-site-ft-logo{ height:44px; margin-bottom:4px; }
.wq-site-ft.p-center .wq-site-ft-name{ font-size:20px; letter-spacing:-.01em; }
/* Телефон и почта — в строку: столбиком по центру они выглядят как список
   из двух пунктов, а это просто два способа связаться. */
.wq-site-ft.p-center .wq-site-ft-row{ flex-direction:row; flex-wrap:wrap;
  justify-content:center; gap:6px 22px; }
.wq-site-ft.p-center .wq-site-ft-soc{ margin-inline-start:0; }
.wq-site-ft.p-center .wq-site-ft-bot{ flex-direction:column; gap:4px;
  justify-content:center; text-align:center; }
.wq-site-ft.p-center .wq-site-ft-note{ text-align:center; }

@media (max-width:760px){
  .wq-site-ft.p-center .wq-site-ft-in{ padding:22px 14px 14px; gap:10px; }
  .wq-site-ft.p-center .wq-site-ft-logo{ height:36px; }
  /* Телефон с почтой в одну строку на узком экране рвутся посередине —
     пусть уж честно встанут друг под другом. */
  .wq-site-ft.p-center .wq-site-ft-row{ flex-direction:column; gap:4px; }
}

/* ── Полоска с копирайтом ────────────────────────────────────────────── */
.wq-site-ft.p-strip .wq-site-ft-in{ flex-direction:row; align-items:center; flex-wrap:wrap;
  gap:6px 16px; padding:12px 2px 0; background:none; border-radius:0;
  border-top:1px solid var(--wq-line); font-size:12.5px; }
.wq-site-ft.p-strip .wq-site-ft-req{ opacity:.7; }
.wq-site-ft.p-strip .wq-site-ft-soc{ margin-inline-start:auto; }
/* Значки мельче: в строке в 12 пикселей стандартные 22 выглядят нашлёпкой. */
.wq-site-ft.p-strip .wq-site-ft-l{ width:18px; height:18px; }
.wq-site-ft.p-strip .wq-site-ft-note{ padding:4px 2px 0; }

@media (max-width:760px){
  /* Общее правило и так ставит столбик, но здесь оно перебито строкой —
     возвращаем явно. */
  .wq-site-ft.p-strip .wq-site-ft-in{ flex-direction:column; align-items:flex-start; gap:4px; }
  .wq-site-ft.p-strip .wq-site-ft-soc{ margin-inline-start:0; margin-top:4px; }
}

/* ── Призыв с кнопкой ────────────────────────────────────────────────── */
.wq-site-ft.p-cta .wq-site-ft-in{ flex-wrap:wrap; align-items:center; gap:16px 30px;
  padding:32px 26px 12px;
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--wq-acc) 13%, var(--wq-card)), var(--wq-card)); }
/* Надпись забирает всё свободное место, но не ужимается ниже 260 —
   на промежуточной ширине кнопка иначе съезжает под неё раньше времени. */
.wq-site-ft.p-cta .wq-site-ft-call{ flex:1 1 260px; min-width:0; gap:6px; }
.wq-site-ft.p-cta .wq-site-ft-name{ font-size:26px; line-height:1.25; letter-spacing:-.02em; }
.wq-site-ft.p-cta .wq-site-ft-act{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.wq-site-ft.p-cta .wq-site-ft-btn{ padding:14px 28px; font-size:16px; }
.wq-site-ft.p-cta .wq-site-ft-act a:not(.wq-site-ft-btn){ color:var(--wq-text); text-decoration:none; }
.wq-site-ft.p-cta .wq-site-ft-act a:not(.wq-site-ft-btn):hover{ color:var(--wq-acc); }
.wq-site-ft.p-cta .wq-site-ft-bot{ margin-top:18px; }

@media (max-width:760px){
  .wq-site-ft.p-cta .wq-site-ft-in{ padding:22px 14px 10px; gap:14px; }
  .wq-site-ft.p-cta .wq-site-ft-name{ font-size:20px; }
  /* Кнопка во всю ширину: пальцем в узкую кнопку у края экрана не попасть. */
  .wq-site-ft.p-cta .wq-site-ft-act{ width:100%; }
  .wq-site-ft.p-cta .wq-site-ft-btn{ flex:1 1 100%; text-align:center; }
  .wq-site-ft.p-cta .wq-site-ft-bot{ flex-direction:column; align-items:flex-start; gap:6px; }
}

/* ── С картой ────────────────────────────────────────────────────────── */
.wq-site-ft.p-map .wq-site-ft-in{ display:grid; grid-template-columns:1.1fr 1fr;
  gap:0; padding:0; overflow:hidden; align-items:stretch; }
/* Карты нет — колонка одна, иначе половина подвала остаётся пустой. */
.wq-site-ft.p-map .wq-site-ft-in.nomap{ grid-template-columns:1fr; }
.wq-site-ft.p-map .wq-site-ft-side{ padding:24px 22px; gap:7px; justify-content:center; }
.wq-site-ft.p-map .wq-site-ft-name{ font-size:16px; }
.wq-site-ft.p-map .wq-site-ft-tel{ font-size:18px; font-weight:700; }

/* Схема — двумя сетками полос: горизонтальные и вертикальные «улицы».
   Никаких картинок: лишний файл на каждой странице ради фона не нужен. */
.wq-site-ft-map{ position:relative; display:block; min-height:200px; text-decoration:none;
  background-color:var(--wq-soft);
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 26px, var(--wq-line) 26px 28px),
    repeating-linear-gradient(90deg, transparent 0 34px, var(--wq-line) 34px 36px); }
.wq-site-ft-map::before{ content:''; position:absolute; inset:0;
  background:linear-gradient(112deg, transparent 44%,
    color-mix(in srgb, var(--wq-acc) 22%, transparent) 44% 50%, transparent 50%); }
/* Метка — капля: круг с отогнутым низом, как в любых картах. */
.wq-site-ft-pin{ position:absolute; left:50%; top:50%; width:18px; height:18px;
  margin:-30px 0 0 -9px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--wq-acc); box-shadow:0 8px 16px rgba(0,0,0,.22); }
.wq-site-ft-pin::after{ content:''; position:absolute; left:6px; top:6px;
  width:6px; height:6px; border-radius:50%; background:var(--wq-card); }
/* Адрес — плашкой поверх схемы: под ней он выглядел бы подписью к картинке,
   а это подпись к месту. */
.wq-site-ft-mapt{ position:absolute; left:12px; right:12px; bottom:12px;
  padding:8px 12px; border-radius:10px; background:var(--wq-card); color:var(--wq-text);
  font-size:13px; line-height:1.4; box-shadow:var(--wq-shadow,0 8px 24px rgba(20,0,60,.12)); }
.wq-site-ft-map:hover .wq-site-ft-mapt{ color:var(--wq-acc); }
/* Внутренние поля у .in нулевые (карта идёт от края), поэтому нижней строке
   поля нужны свои. */
.wq-site-ft.p-map .wq-site-ft-bot{ margin-top:0; padding:12px 22px 14px; }

@media (max-width:760px){
  .wq-site-ft.p-map .wq-site-ft-in{ grid-template-columns:1fr; }
  /* Карта сверху и ниже ростом: на телефоне она съедала весь первый экран
     подвала, и до телефона приходилось крутить. */
  .wq-site-ft-map{ min-height:150px; }
  .wq-site-ft.p-map .wq-site-ft-side{ padding:16px 14px; }
  .wq-site-ft.p-map .wq-site-ft-bot{ padding:10px 14px 12px; }
}

/* ── Список услуг ────────────────────────────────────────────────────── */
.wq-site-ft.p-list .wq-site-ft-in{ display:grid; grid-template-columns:1fr 1.3fr;
  gap:20px 34px; padding:26px 24px 14px; align-items:start; }
/* Меню в одну страницу не пришло — правой колонки нет, левая занимает всё. */
.wq-site-ft.p-list .wq-site-ft-in.nolist{ grid-template-columns:1fr; }
.wq-site-ft.p-list .wq-site-ft-about{ gap:7px; }
.wq-site-ft.p-list .wq-site-ft-name{ font-size:16px; }
/* Ссылки в колонки: два десятка страниц одним столбцом растягивают подвал
   на пол-экрана. */
.wq-site-ft.p-list .wq-site-ft-nav .wq-nav-in{ display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0 22px; align-items:start; }
/* Разделы со вложенными страницами занимают всю строку сетки: их подпункты
   иначе вылезают в соседнюю колонку и читаются как отдельный раздел. */
.wq-site-ft.p-list .wq-site-ft-nav .wq-nav-g{ grid-column:1/-1; }

@media (max-width:760px){
  .wq-site-ft.p-list .wq-site-ft-in{ grid-template-columns:1fr; gap:14px; padding:18px 14px 12px; }
  .wq-site-ft.p-list .wq-site-ft-nav .wq-nav-in{ grid-template-columns:1fr 1fr; gap:0 12px; }
  .wq-site-ft.p-list .wq-site-ft-bot{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ── О нас и контакты ────────────────────────────────────────────────── */
.wq-site-ft.p-two .wq-site-ft-in{ display:grid; grid-template-columns:1.4fr 1fr;
  gap:22px 40px; padding:26px 24px 14px; align-items:start; }
.wq-site-ft.p-two .wq-site-ft-in.solo{ grid-template-columns:1fr; }
.wq-site-ft.p-two .wq-site-ft-about{ gap:8px; }
.wq-site-ft.p-two .wq-site-ft-name{ font-size:18px; letter-spacing:-.01em; }
.wq-site-ft.p-two .wq-site-ft-adr{ max-width:44ch; }
/* Черта — у правой колонки, а не отдельным узлом: так она пропадает вместе
   с колонкой сама, без отдельной проверки. */
.wq-site-ft.p-two .wq-site-ft-side{ gap:8px; padding-inline-start:32px;
  border-inline-start:1px solid var(--wq-line); }
.wq-site-ft.p-two .wq-site-ft-in.solo .wq-site-ft-side{ padding-inline-start:0;
  border-inline-start:0; }
.wq-site-ft.p-two .wq-site-ft-tel{ font-size:18px; font-weight:700; }

@media (max-width:760px){
  .wq-site-ft.p-two .wq-site-ft-in{ grid-template-columns:1fr; gap:14px;
    padding:18px 14px 12px; }
  /* Вертикальная черта в столбике превращается в палку слева от контактов —
     меняем её на горизонтальную. */
  .wq-site-ft.p-two .wq-site-ft-side{ padding-inline-start:0; border-inline-start:0;
    padding-top:12px; border-top:1px solid var(--wq-line); }
}

/* ── Общее для новых видов подвала ───────────────────────────────────── */

/* Нижняя строка: копирайт слева, реквизиты справа. Работает и в сетке
   (растягивается на все колонки), и в строке (переносится целиком). */
.wq-site-ft-bot{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:6px 18px; width:100%; grid-column:1/-1;
  order:9; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--wq-line); font-size:12.5px; }
.wq-site-ft-cp{ white-space:nowrap; }
.wq-site-ft-logo{ height:38px; width:auto; display:block; }
.wq-site-ft-adr{ line-height:1.5; }

/* Значки внутри чужой колонки не должны уезжать вправо: общий отступ auto
   рассчитан на строку, а в столбике он прижимает их к краю. */
.wq-site-ft-col > .wq-site-ft-soc{ margin-inline-start:0; }

/* Меню в подвале — картой сайта: вложенные страницы видны сразу. Выпадающий
   список внизу страницы разворачивать некуда — он уходит за край экрана. */
.wq-nav.in-ft{ margin:0; padding:0; max-width:none; }
.wq-nav.in-ft .wq-nav-in{ flex-direction:column; align-items:flex-start;
  gap:0; padding:0; background:none; box-shadow:none; }
.wq-nav.in-ft .wq-nav-l{ padding:3px 0; font-size:14px; font-weight:500;
  color:inherit; background:none; }
.wq-nav.in-ft .wq-nav-l:hover{ color:var(--wq-acc); background:none; }
.wq-nav.in-ft .wq-nav-l.on{ background:none; color:var(--wq-acc); }
.wq-nav.in-ft .wq-nav-ch{ display:none; }
.wq-nav.in-ft .wq-nav-g{ display:flex; flex-direction:column; width:100%; }
.wq-nav.in-ft .wq-nav-sub{ position:static; display:flex; flex-direction:column;
  margin:0; padding:0 0 0 12px; min-width:0; border:0; background:none; box-shadow:none; }
.wq-nav.in-ft .wq-nav-sub::before{ display:none; }
.wq-nav.in-ft .wq-nav-sub .wq-nav-l{ font-size:13.5px; opacity:.78; }


/* ── Приписка подвала ──────────────────────────────────────────────────
   ⚠️ Она лежит отдельным узлом ПОД подвалом — так проще не нарисовать её
   дважды в восьми видах. Но поля у неё были свои (18px против 24–26px у
   самого подвала), и строка висела сдвинутой влево, будто её забыли
   выровнять. Приводим к полям того вида, под которым она стоит. */
.wq-site-ft.p-cols   .wq-site-ft-note{ padding:0 24px 14px; }
.wq-site-ft.p-two    .wq-site-ft-note{ padding:0 24px 14px; }
.wq-site-ft.p-list   .wq-site-ft-note{ padding:0 24px 14px; }
.wq-site-ft.p-map    .wq-site-ft-note{ padding:0 24px 14px; }
.wq-site-ft.p-strip  .wq-site-ft-note{ padding:0 4px 10px; }

/* У видов по центру приписка тоже по центру: слева она выглядит обрывком. */
.wq-site-ft.p-center .wq-site-ft-note,
.wq-site-ft.p-cta    .wq-site-ft-note{ padding:0 24px 16px; text-align:center; }

/* На тёмной плите приписка живёт на той же подложке, иначе повисает на
   светлом фоне страницы отдельной строкой. */
.wq-site-ft.p-mega .wq-site-ft-note{ margin:0; padding:0 26px 18px;
  background:inherit; color:rgba(255,255,255,.42); }

@media (max-width:760px){
  .wq-site-ft .wq-site-ft-note{ padding-inline:14px; }
}

/* ── Отступы страницы сайта ────────────────────────────────────────────
   ⚠️ У сайта и лендинга полей вокруг нет по умолчанию: шапка начинается от
   верхнего края, подвал упирается в низ. Поля достались от квиза, который
   живёт карточкой посреди экрана; на сайте из-за них страница выглядела
   вставленной в рамку. Свои значения владелец задаёт в «Оформлении» —
   они приезжают переменными. */
.wq-full.wq-top:has(.wq-page){ padding:var(--wq-pad-top,0) 0 var(--wq-pad-bottom,0); }
.wq-page .wq-site-hd{ margin-bottom:var(--wq-gap-hd,14px); margin-top:var(--wq-gap-hd-top,0); }
.wq-page .wq-site-ft{ margin-top:var(--wq-gap-ft,18px); }
.wq-page .wq-site-hd-in{ padding-block:var(--wq-hd-pad,12px); }
.wq-page .wq-site-ft-in{ padding-block:var(--wq-ft-pad,18px); }

/* ── У сайта полей вокруг нет ──────────────────────────────────────────
   ⚠️ `.wq-panel` — поля и скругление КАРТОЧКИ КВИЗА: он плавает посреди
   экрана, и рамка вокруг ему нужна. Сайт — сам страница: шапка обязана
   упираться в верхний край, подвал в нижний, а секция во всю ширину должна
   быть во всю ширину, а не «во всю ширину минус 26 пикселей».

   Нужен отступ — он задаётся настройками шапки, подвала и секций. Ставить
   его тайно в стилях страницы нельзя: убрать его владелец не может ничем. */
.wq-page.wq-panel{ padding:0; border-radius:0; }

/* Шапка больше не гасит поля страницы отрицательным отступом: гасить нечего.
   Прежние -32/-26 остались бы вылетом за край. */
.wq-page .wq-site-hd{ margin-inline:0; }
.wq-page .wq-site-hd-in{ border-radius:0; }
.wq-page .wq-site-ft.p-line{ margin-inline:0; }

/* Содержимое к самому краю не прижимаем: строка, упирающаяся в край экрана,
   не читается. Поля боковые, они не спорят с «нет отступов сверху и снизу». */
.wq-page .wq-widget,
.wq-page .wq-site-hd-in,
.wq-page .wq-site-ft-in,
.wq-page .wq-nav-in{ padding-inline:clamp(12px, 3vw, 26px); }

@media (max-width:760px){
  .wq-page .wq-widget,
  .wq-page .wq-site-hd-in,
  .wq-page .wq-site-ft-in,
  .wq-page .wq-nav-in{ padding-inline:12px; }
}

/* ── Форма на странице живёт своей жизнью ──────────────────────────────
   ⚠️ Промежуток между полями формы брался из настройки КВИЗА «отступ между
   вариантами» (--wq-opt-gap). У сайта она стоит нулём — и поля формы слипались
   в сплошную полосу, хотя к вариантам квиза форма отношения не имеет.

   Это ровно тот случай, когда одна настройка тайно управляет чужой частью.
   У секции-формы теперь свой отступ; хочет владелец другой — задаст его у
   самой секции, а не через настройки квиза. */
.wq-pb-form .wq-form{ gap:var(--wq-form-gap,12px) !important; }
.wq-pb-form .wq-consent{ margin-top:var(--wq-form-gap,12px); }

/* С поиском: поле между меню и контактами. */
.wq-site-hd.s-search .wq-site-hd-in.seek{ gap:14px; }
/* Меню перестаёт растягиваться: место в строке нужно полю. Пока меню тянуло
   строку на себя, поле схлопывалось до трёх букв — вписать в него было нечего. */
.wq-site-hd.s-search .wq-nav.in-hd{ flex:none; }
.wq-site-hd.s-search .wq-site-seek{ display:flex; align-items:center; gap:8px;
  flex:1 1 160px; min-width:0; max-width:320px; margin-inline-start:auto;
  padding:6px 14px; border:1px solid var(--wq-line); border-radius:999px;
  background:var(--wq-field-bg,var(--wq-card)); }
.wq-site-hd.s-search .wq-site-seek:focus-within{ border-color:var(--wq-acc); }
/* Двух «прижать вправо» в одной строке не бывает: авто-отступ достаётся
   первому, и инструменты вставали бы вплотную к полю. Правый край держит поле,
   инструменты идут за ним обычным порядком. */
.wq-site-hd.s-search .wq-site-tools{ margin-inline-start:0; }
.wq-site-hd.s-search .wq-site-seek-ic{ display:inline-flex; width:17px; height:17px;
  flex:none; color:var(--wq-muted); }
.wq-site-hd.s-search .wq-site-seek-ic svg{ width:100%; height:100%; }
.wq-site-hd.s-search .wq-site-seek-i{ flex:1; min-width:0; border:none; background:none;
  outline:none; font:inherit; font-size:14px; color:var(--wq-field-text,var(--wq-text)); }
/* Крестик очистки у type=search каждый браузер рисует по-своему и мимо нашей
   типографики. Поле короткое — чистится выделением. */
.wq-site-hd.s-search .wq-site-seek-i::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }

@media (max-width:760px){
  /* Логотип, поле и бургер в одну строку на телефоне не встают: поле ужимается
     до бесполезного. Оно занимает свою строку под ними — целиком.
     order:8 держит его НАД раскрытым меню (у меню order:9): сначала поиск,
     потом список страниц — так человек и читает. */
  .wq-site-hd.s-search .wq-site-seek{ order:8; flex-basis:100%; max-width:none;
    margin-inline-start:0; padding:7px 14px; }
  .wq-site-hd.s-search .wq-site-hd-in.seek{ gap:10px; }
}

/* Стеклянная: полупрозрачная подложка с размытием. */
/* Липкость включается сама, тумблер тут ни при чём: не липкая «стеклянная»
   шапка уезжает вверх на первом же движении колеса — просвечивать нечему,
   и весь стиль сводится к чуть бледной полосе. */
.wq-site-hd.s-glass{ position:sticky; top:0; z-index:30; }
.wq-site-hd.s-glass .wq-site-hd-in.glass{
  background:color-mix(in srgb, var(--wq-card) 70%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  /* Тень заменена волосяной чертой: у прозрачной подложки тень выдаёт «плиту,
     висящую над страницей», а стекло должно лежать на содержимом. */
  box-shadow:none;
  border-bottom:1px solid color-mix(in srgb, var(--wq-text) 10%, transparent);
  border-radius:0; }
/* Всплывающие списки (языки, страницы раздела) размывать нельзя: под ними
   текст, а не картинка, и стекло на стекле превращается в кашу. */
.wq-site-hd.s-glass .wq-site-lg-list,
.wq-site-hd.s-glass .wq-nav-sub{ background:var(--wq-card); }

/**
 * Размытия нет — браузер старый или экономит батарею.
 * Полупрозрачная подложка БЕЗ размытия поверх фотографии делает название
 * нечитаемым. Возвращаем плотный фон: лучше обычная шапка, чем красивая и
 * нечитаемая.
 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .wq-site-hd.s-glass .wq-site-hd-in.glass{ background:var(--wq-card); }
}

/* Без подложки — стекло тоже снимается, иначе тумблер ничего не меняет. */
.wq-site-hd.bare.s-glass .wq-site-hd-in.glass{ background:none; border-bottom:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; }

@media (max-width:760px){
  /* Размытие на телефоне считает GPU при каждом кадре прокрутки — на дешёвых
     аппаратах это заметно рывками. Радиус вдвое меньше, подложка плотнее:
     читаемость та же, работы вдвое меньше. */
  .wq-site-hd.s-glass .wq-site-hd-in.glass{
    background:color-mix(in srgb, var(--wq-card) 82%, transparent);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
}

/* С объявлением: цветная полоса над шапкой. */
.wq-site-hd.s-announce{ display:flex; flex-direction:column; }
.wq-site-hd.s-announce .wq-site-hd-note{ background:var(--wq-acc);
  color:var(--wq-btn-text,#fff); border-radius:24px 24px 0 0;
  font-size:13px; font-weight:600; line-height:1.4; }
/* Полоса — только цвет и скругление; отступы живут на внутренней обёртке,
   иначе текст выпадает из общей сетки ширины. */
.wq-site-hd.s-announce .wq-site-hd-in.note-row{ background:none; box-shadow:none;
  border-radius:0; padding:7px 26px; gap:8px; justify-content:center; text-align:center; }
.wq-site-hd.s-announce .wq-site-note-l{ color:inherit; text-decoration:underline;
  text-underline-offset:3px; }
.wq-site-hd.s-announce .wq-site-note-l:hover{ text-decoration:none; }
/* Верхние скругления забрала полоса — строка под ней остаётся прямой, иначе
   между ними вылезают два белых уголка. */
.wq-site-hd.s-announce .wq-site-hd-note + .wq-site-hd-in{ border-radius:0; }
/* Липкая шапка тащит полосу за собой. Так и задумано: объявление важнее пары
   потерянных пикселей высоты — поэтому строка объявления и сделана тонкой. */

/* Без подложки полоса остаётся цветной: она не «оформление шапки», а
   содержимое — как раз то, ради чего стиль выбирают. */
.wq-site-hd.bare.s-announce .wq-site-hd-note{ border-radius:0; }

@media (max-width:760px){
  .wq-site-hd.s-announce .wq-site-hd-note{ border-radius:16px 16px 0 0; font-size:12.5px; }
  /* Длинная новость на узком экране переносится в две-три строки — обрезать её
     многоточием нельзя: обрежется как раз то число или срок, ради которого всё
     и написано. */
  .wq-site-hd.s-announce .wq-site-hd-in.note-row{ padding:6px 12px; flex-wrap:wrap; }
}

/* Со значками соцсетей: ряд значков между телефоном и кнопкой. */
/* Порядок задан номерами, а не разметкой: язык и телефон остаются на своих
   местах (order:0), значки встают за телефоном, кнопка — последней. */
.wq-site-hd.s-social .wq-site-soc{ display:inline-flex; align-items:center; gap:11px;
  order:1; }
.wq-site-hd.s-social .wq-site-cta{ order:2; }
.wq-site-hd.s-social .wq-site-bg{ order:3; }
/* Разделитель перед рядом значков: без него телефон и значки слипаются в одно
   пятно и телефон перестаёт читаться главным. */
.wq-site-hd.s-social .wq-site-soc::before{ content:''; width:1px; height:18px;
  background:var(--wq-line); margin-inline-end:2px; }
.wq-site-soc-l{ display:inline-flex; width:19px; height:19px; color:var(--wq-muted); }
.wq-site-soc-l:hover{ color:var(--wq-acc); }
.wq-site-soc-l svg{ width:100%; height:100%; }

@media (max-width:760px){
  /* Значки крупнее, а не мельче: на телефоне в них ЦЕЛЯТСЯ пальцем, и 19
     пикселей — промах через раз. Расстояние между ними тоже больше — иначе
     вместо инстаграма открывается телеграм. */
  .wq-site-soc-l{ width:22px; height:22px; }
  .wq-site-hd.s-social .wq-site-soc{ gap:16px; }
  /* Пять-шесть значков в строку с телефоном не влезают: инструменты
     переносятся по месту (у них flex-wrap), ряд уходит на строку ниже целиком
     и держится правого края — под кнопкой, а не посреди пустоты. */
  .wq-site-hd.s-social .wq-site-soc{ flex-basis:100%; justify-content:flex-end; }
  .wq-site-hd.s-social .wq-site-soc::before{ display:none; }
}

/* Две кнопки: очерченная и заливная в одном ряду. */
.wq-site-hd.s-duo .wq-site-tools{ gap:8px; }
/* Второстепенная встаёт ПЕРЕД главной номером, а не порядком в разметке.
   Читают слева направо, и главное действие обязано стоять последним — иначе
   взгляд упирается в «Прайс» и до «Записаться» не доходит. */
.wq-site-hd.s-duo .wq-site-cta-alt{ order:1; }
.wq-site-hd.s-duo .wq-site-cta{ order:2; }
.wq-site-hd.s-duo .wq-site-bg{ order:3; }
.wq-site-cta-alt{ display:inline-block; background:none; color:var(--wq-acc);
  border:1px solid color-mix(in srgb, var(--wq-acc) 40%, transparent);
  padding:8px 15px; border-radius:calc(var(--wq-btn-radius,14px) - 2px);
  font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.wq-site-cta-alt:hover{ border-color:var(--wq-acc);
  background:color-mix(in srgb, var(--wq-acc) 8%, transparent); }

@media (max-width:760px){
  /* Общее правило растягивает кнопку-призыв на всю строку. Для двух кнопок это
     два этажа подряд и половина экрана под шапку: делим одну строку пополам.
     Базис 40% с ростом — обе переносятся вместе и занимают строку поровну. */
  .wq-site-hd.s-duo .wq-site-cta,
  .wq-site-hd.s-duo .wq-site-cta-alt{ flex:1 1 40%; width:auto; min-width:0;
    text-align:center; padding:10px 12px; }
}

/* С кромкой: цветная черта у левого края шапки. */
.wq-site-hd.s-edge .wq-site-hd-in.edge{ position:relative;
  /* Скругления нет намеренно: круглый верхний угол срезал бы черту клином, и
     вместо кромки получался бы обломок. */
  border-radius:0;
  padding-inline-start:32px;
  border-bottom:1px solid var(--wq-line); }
/* inset-inline-start, а не left: на арабском шапка зеркалится целиком, и черта
   обязана уйти к правому краю вместе со всем остальным. */
.wq-site-hd.s-edge .wq-site-hd-in.edge::before{ content:''; position:absolute;
  inset-block:0; inset-inline-start:0; width:5px; background:var(--wq-acc); }

/* Без подложки остаётся только черта — ради неё стиль и берут. */
.wq-site-hd.bare.s-edge .wq-site-hd-in.edge{ border-bottom:none; }

@media (max-width:760px){
  /* На узком экране 5 пикселей отъедают заметную долю строки, а отступ в 32
     сдвигает логотип к середине. Черта тоньше, отступ обычный. */
  .wq-site-hd.s-edge .wq-site-hd-in.edge{ padding-inline-start:18px; }
  .wq-site-hd.s-edge .wq-site-hd-in.edge::before{ width:4px; }
}

/* С подчёркиванием: текущий пункт помечен чертой, а не заливкой. */
/**
 * ⚠️ Правила бьют ТОЧЕЧНО по верхнему ряду меню (прямые потомки .wq-nav-in и
 * названия разделов). Внутри всплывающего списка страниц черта снизу читается
 * разделителем между строками, а не меткой «вы здесь» — там заливка остаётся.
 */
.wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-l,
.wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l{
  position:relative; border-radius:0; padding:11px 12px; }
.wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-l::after,
.wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l::after{
  content:''; position:absolute; inset-inline:8px; bottom:3px; height:2px;
  border-radius:2px; background:transparent; transition:background .15s; }
/* Заливку и белый текст снимаем — иначе метка была бы двойной. */
.wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-l.on,
.wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l.on{
  background:none; color:var(--wq-acc); }
.wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-l.on::after,
.wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l.on::after{
  background:var(--wq-acc); }
/* Наведение — та же черта, но бледная: подсветка фоном вернула бы таблетки,
   от которых стиль и уходит. */
.wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-l:hover,
.wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l:hover{
  background:none; }
.wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-l:hover::after,
.wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l:hover::after{
  background:color-mix(in srgb, var(--wq-acc) 35%, transparent); }

@media (max-width:760px){
  /* Раскрытое меню — столбик строк во всю ширину. Черта под каждой строкой
     превращается в линейку таблицы, и «вы здесь» пропадает. Метка переезжает
     влево и становится вертикальной — как закладка у края списка. */
  .wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-l::after,
  .wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l::after{
    inset-inline:auto; inset-inline-start:0; inset-block:5px; width:3px; height:auto; }
  .wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-l,
  .wq-site-hd.s-underline .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l{
    padding:9px 12px; }
}

/* Сжимается при прокрутке: высокая наверху, тонкая ниже. */
/* Липкость включается сама: шапка, которая уезжает вверх, сжиматься может
   сколько угодно — этого никто не увидит. */
.wq-site-hd.s-shrink{ position:sticky; top:0; z-index:30; }
.wq-site-hd.s-shrink .wq-site-hd-in.shrink{ padding:20px 26px; border-radius:0;
  transition:padding .18s ease, box-shadow .18s ease; }
.wq-site-hd.s-shrink .wq-site-logo{ height:44px; transition:height .18s ease; }
.wq-site-hd.s-shrink .wq-site-name{ font-size:18px; transition:font-size .18s ease; }
.wq-site-hd.s-shrink .wq-site-cta{ padding:11px 20px; font-size:15px;
  transition:padding .18s ease, font-size .18s ease; }

/* Сжатое состояние. Разница по высоте небольшая (около 30 пикселей) и идёт
   плавно: страница под липкой шапкой подтягивается на эту же величину, и
   резкий скачок читался бы дёрганьем текста, а не движением шапки. */
.wq-site-hd.s-shrink.shrunk .wq-site-hd-in.shrink{ padding:6px 26px;
  box-shadow:0 6px 18px rgba(20,0,60,.10); }
.wq-site-hd.s-shrink.shrunk .wq-site-logo{ height:26px; }
.wq-site-hd.s-shrink.shrunk .wq-site-name{ font-size:15px; }
.wq-site-hd.s-shrink.shrunk .wq-site-cta{ padding:7px 14px; font-size:13.5px; }

/* Без подложки тень не появляется и в сжатом виде: тумблер выключает её
   насовсем, а не «до первой прокрутки». */
.wq-site-hd.bare.s-shrink.shrunk .wq-site-hd-in.shrink{ box-shadow:none; }

/* Человек попросил систему убрать движение — движения нет. Размеры при этом
   меняются, шапка так же сжимается, просто без плавного перехода. */
@media (prefers-reduced-motion: reduce){
  .wq-site-hd.s-shrink .wq-site-hd-in.shrink,
  .wq-site-hd.s-shrink .wq-site-logo,
  .wq-site-hd.s-shrink .wq-site-name,
  .wq-site-hd.s-shrink .wq-site-cta{ transition:none; }
}

@media (max-width:760px){
  /* Высокая шапка на телефоне съедает треть экрана ещё до первой прокрутки,
     поэтому и «высокое», и «сжатое» состояние здесь мельче. */
  .wq-site-hd.s-shrink .wq-site-hd-in.shrink{ padding:12px 12px; }
  .wq-site-hd.s-shrink .wq-site-logo{ height:34px; }
  .wq-site-hd.s-shrink .wq-site-name{ font-size:16px; }
  .wq-site-hd.s-shrink.shrunk .wq-site-hd-in.shrink{ padding:5px 12px; }
  .wq-site-hd.s-shrink.shrunk .wq-site-logo{ height:24px; }
  /* Кнопка-призыв на телефоне занимает всю строку — при сжатии она остаётся
     такой же широкой, но становится ниже: убирать её нельзя, это главное
     действие страницы. */
  .wq-site-hd.s-shrink.shrunk .wq-site-cta{ padding:8px 12px; }
}


/* Подпись под номером: часы работы, «звонок бесплатный» и подобное.
   Класс общий: её показывают два стиля, и разводить два одинаковых
   набора правил незачем. */
.wq-site-note{ font-size:12.5px; color:var(--wq-muted); white-space:nowrap; }

/* Инструменты раскладываются СЕТКОЙ с явными номерами колонок, а не потоком.
   ⚠️ На flex подпись держится под номером только пока в шапке есть и язык, и
   кнопка: убрали одно — она переезжает под кнопку или уходит на третью строку.
   А весь стиль держится ровно на паре «номер + строчка под ним».
   Колонка: 1 — язык, 2 — номер и подпись, 3 — кнопка, 4 — бургер.
   column-gap нулевой намеренно: пустая колонка (языка нет) иначе оставляла бы
   после себя зазор. Отступы висят на самих частях. */
.wq-site-hd.s-hotline .wq-site-tools.call,
.wq-site-hd.s-phonelead .wq-site-tools.call{
  display:grid; grid-template-columns:auto auto auto auto;
  align-items:center; row-gap:1px; column-gap:0; margin-inline-start:auto; }

.wq-site-hd.s-hotline .wq-site-tools.call .wq-site-lg,
.wq-site-hd.s-phonelead .wq-site-tools.call .wq-site-lg{
  grid-column:1; grid-row:1 / span 2; margin-inline-end:14px; }

.wq-site-hd.s-hotline .wq-site-tools.call .wq-site-tel,
.wq-site-hd.s-phonelead .wq-site-tools.call .wq-site-tel{ grid-column:2; grid-row:1; }

.wq-site-hd.s-hotline .wq-site-tools.call .wq-site-note,
.wq-site-hd.s-phonelead .wq-site-tools.call .wq-site-note{ grid-column:2; grid-row:2; }

.wq-site-hd.s-hotline .wq-site-tools.call .wq-site-cta,
.wq-site-hd.s-phonelead .wq-site-tools.call .wq-site-cta{
  grid-column:3; grid-row:1 / span 2; margin-inline-start:16px; }

.wq-site-hd.s-hotline .wq-site-tools.call .wq-site-bg,
.wq-site-hd.s-phonelead .wq-site-tools.call .wq-site-bg{
  grid-column:4; grid-row:1 / span 2; margin-inline-start:10px; }

/* Боковая: логотип и меню столбиком у левого края. */
.wq-site-hd.s-side .wq-site-hd-in.side{ flex-direction:column; align-items:stretch;
  gap:16px; min-height:100vh; padding:22px 20px; border-radius:0;
  box-shadow:none; border-inline-end:1px solid var(--wq-line); }
/* Название под логотипом, а не рядом: в колонке шириной 232 пикселя строка
   «значок + слово» переносится по слогам. */
.wq-site-hd.s-side .wq-site-brand{ flex-direction:column; align-items:flex-start; gap:8px; }
.wq-site-hd.s-side .wq-site-logo{ height:44px; }
.wq-site-hd.s-side .wq-site-name{ font-size:17px; white-space:normal; }
.wq-site-hd.s-side .wq-nav.in-hd .wq-nav-in{ flex-direction:column; align-items:stretch; gap:2px; }
.wq-site-hd.s-side .wq-nav.in-hd .wq-nav-l{ display:block; }
/* Список раздела уезжает ВБОК, а не вниз: вниз он перекрывает соседние пункты
   узкой колонки, а справа места сколько угодно. */
.wq-site-hd.s-side .wq-nav-g{ display:block; }
.wq-site-hd.s-side .wq-nav-sub{ left:100%; top:0; margin:0 0 0 6px; }
.wq-site-hd.s-side .wq-nav-sub::before{ left:-8px; right:auto; top:0; bottom:0;
  width:8px; height:auto; }
/* Телефон и кнопка — у нижнего края колонки: это последнее действие, к нему
   приходят после меню, а не до него. */
.wq-site-hd.s-side .wq-site-tools.col{ flex-direction:column; align-items:stretch;
  gap:10px; margin-inline-start:0; margin-top:auto; }
.wq-site-hd.s-side .wq-site-cta{ text-align:center; }
.wq-site-hd.s-side .wq-site-lg-list{ left:0; right:auto; }
/* На большом экране бургера нет — пустая обёртка только съедала бы отступ. */
.wq-site-hd.s-side .wq-site-tools.bar{ display:none; }

/* ── Строй всей страницы под боковую колонку ────────────────────────────
   Шапка занимает левую полосу, всё остальное — правую. Действует только при
   .has-side: прочие стили шапки этих правил не видят вовсе. */
.wq-page.has-side{ display:grid; grid-template-columns:var(--wq-side-w,232px) 1fr;
  align-items:start; }
/* Правило по «*», а не по списку классов: страница собирается из секций, и
   список пришлось бы дописывать при появлении каждой новой. */
.wq-page.has-side > *{ grid-column:2; min-width:0; }
.wq-page.has-side > .wq-site-hd{ grid-column:1; grid-row:1 / -1;
  align-self:stretch; margin:0; }
/* Ограничение ширины страницы (.wq-w-*) центрирует внутреннюю строку шапки —
   колонке это не нужно: она и есть край экрана. */
.wq-page.has-side > .wq-site-hd .wq-site-hd-in{ max-width:none; margin-inline:0; }
/* Липкую колонку держим ровно в высоту экрана и прокручиваем внутри: без
   этого длинное меню обрезается нижней кромкой. */
.wq-page.has-side > .wq-site-hd.stick{ position:sticky; top:0; height:100vh; }
.wq-page.has-side > .wq-site-hd.stick .wq-site-hd-in.side{ height:100%;
  min-height:0; overflow:auto; }

@media (max-width:760px){
  /* Колонка на телефоне — это половина экрана под меню. Распрямляем в обычную
     строку с бургером; страница возвращается к простому потоку. */
  .wq-page.has-side{ display:block; }
  .wq-page.has-side > .wq-site-hd.stick{ height:auto; }
  .wq-site-hd.s-side .wq-site-hd-in.side{ flex-direction:row; flex-wrap:wrap;
    align-items:center; gap:10px; min-height:0; padding:9px 12px;
    border-inline-end:none; border-bottom:1px solid var(--wq-line); }
  .wq-site-hd.s-side .wq-site-brand{ flex-direction:row; align-items:center; }
  .wq-site-hd.s-side .wq-site-logo{ height:32px; }
  .wq-site-hd.s-side .wq-site-tools.bar{ display:flex; margin-inline-start:auto; }
  .wq-site-hd.s-side .wq-site-tools.col{ flex-direction:row; margin-top:0; }
  .wq-site-hd.s-side .wq-nav.in-hd{ flex:none; }
  /* Список раздела вбок на 390 пикселях уходит за край экрана — возвращаем
     его под пункт, как в общем мобильном правиле. */
  .wq-site-hd.s-side .wq-nav-sub{ left:0; margin:2px 0 2px 14px; }
}

/* Контакты блоком: номер заметно крупнее меню и названия. */
.wq-site-hd.s-hotline .wq-site-hd-in.hotline{ padding:12px 26px; gap:18px; }
.wq-site-hd.s-hotline .wq-site-tel{ font-size:22px; font-weight:800;
  letter-spacing:-.02em; line-height:1.15; }
/* Название рядом с таким номером спорит с ним за внимание — приглушаем.
   Логотип не трогаем: узнают компанию по нему, а не по надписи. */
.wq-site-hd.s-hotline .wq-site-name{ font-size:15px; color:var(--wq-muted); }
/* Кнопка выше обычной: рядом с блоком в две строки стандартная выглядит
   недомерком, приклеенным к номеру. */
.wq-site-hd.s-hotline .wq-site-cta{ padding:12px 18px; font-size:15px; }

@media (max-width:760px){
  /* Сетка из четырёх колонок на 390 пикселях не встаёт: номер, кнопка и
     бургер в одной строке дают перенос посреди номера. Возвращаем поток. */
  .wq-site-hd.s-hotline .wq-site-tools.call{ display:flex; flex-wrap:wrap;
    align-items:center; gap:8px 10px; }
  .wq-site-hd.s-hotline .wq-site-tel{ font-size:18px; }
  .wq-site-hd.s-hotline .wq-site-note{ flex-basis:100%; white-space:normal; }
  .wq-site-hd.s-hotline .wq-site-cta{ padding:10px 14px; font-size:14px; }
}

/* В рамке: тонкая обводка вместо тени. */
.wq-site-hd.s-outline .wq-site-hd-in.outline{ box-shadow:none;
  border:1px solid var(--wq-line); border-radius:24px 24px 0 0; padding:12px 26px; }
/* Кнопка тоже пером, а не заливкой: сплошной прямоугольник рядом с волосяной
   линией перевешивает всю шапку, и рамку перестаёт быть видно. Цвет
   возвращается при наведении — так понятно, что это кнопка, а не рамка. */
.wq-site-hd.s-outline .wq-site-cta{ background:none; color:var(--wq-acc);
  border:1px solid var(--wq-acc); padding:8px 15px; }
.wq-site-hd.s-outline .wq-site-cta:hover{ background:var(--wq-acc);
  color:var(--wq-btn-text,#fff); }
/* Текущий пункт — обводкой по тому же правилу. Внутренняя тень, а не border:
   от рамки пункт подпрыгнул бы на пиксель, и строка меню поехала бы. */
.wq-site-hd.s-outline .wq-nav.in-hd > .wq-nav-in > .wq-nav-l.on,
.wq-site-hd.s-outline .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l.on{
  background:none; color:var(--wq-acc); box-shadow:inset 0 0 0 1px var(--wq-acc); }
/* Выпадающий список остаётся с заливкой: он лежит НАД содержимым страницы, и
   сквозь рамку без фона просвечивал бы текст. */
.wq-site-hd.s-outline .wq-nav-sub{ border:1px solid var(--wq-line);
  box-shadow:0 8px 22px rgba(20,0,60,.08); }

/* Без подложки рамка и есть вся шапка — фон гасим, линию оставляем. */
.wq-site-hd.bare.s-outline .wq-site-hd-in.outline{ background:none; }

@media (max-width:760px){
  .wq-site-hd.s-outline .wq-site-hd-in.outline{ border-radius:16px 16px 0 0; }
  /* На телефоне карточка идёт от края до края: боковые куски рамки
     оказываются двумя палками у самой кромки экрана. Оставляем нижнюю —
     работу тени делает как раз она. */
  .wq-site-hd.s-outline .wq-site-hd-in.outline{ border-width:0 0 1px; border-radius:0; }
}

/* Плашка: цветной прямоугольник под логотипом, во всю высоту шапки.
   ⚠️ Отступ слева гасим у всей строки: плашка с полем перед ней висит маркой
   посреди белого и читается кнопкой, а не углом вывески. */
.wq-site-hd.s-plate .wq-site-hd-in.plate{ align-items:stretch; gap:0;
  padding:0 26px 0 0; }
.wq-site-hd.s-plate .wq-site-brand{ align-items:center; gap:10px;
  padding:14px 22px; margin-inline-end:22px;
  background:var(--wq-acc); color:var(--wq-btn-text,#fff);
  border-radius:24px 0 22px 0; }
/* Скругление разное по углам намеренно: верхний левый повторяет угол шапки,
   нижний правый срезан — так плашка выглядит частью полосы, а не наклейкой. */
.wq-site-hd.s-plate .wq-site-name{ color:inherit; font-size:17px; }
.wq-site-hd.s-plate .wq-site-logo{ height:36px; }
/* Остальное по-прежнему стоит по средней линии: растянутые по высоте меню и
   кнопка вслед за плашкой выглядели бы вторым цветным блоком. */
.wq-site-hd.s-plate .wq-nav.in-hd,
.wq-site-hd.s-plate .wq-site-tools{ align-self:center; }

/* Без подложки плашка остаётся единственным цветным пятном — так и задумано,
   гасить её вместе с фоном шапки нельзя, иначе от стиля ничего не останется. */
.wq-site-hd.bare.s-plate .wq-site-brand{ background:var(--wq-acc); }

@media (max-width:760px){
  .wq-site-hd.s-plate .wq-site-hd-in.plate{ padding:0 12px 0 0; }
  .wq-site-hd.s-plate .wq-site-brand{ padding:9px 14px; margin-inline-end:12px;
    border-radius:0 0 16px 0; }
  .wq-site-hd.s-plate .wq-site-logo{ height:28px; }
  .wq-site-hd.s-plate .wq-site-name{ font-size:15px; }
  /* Раскрытое меню уходит под плашку целой строкой — иначе первый пункт
     прилипает к цветному углу и теряется на границе. */
  .wq-site-hd.s-plate.nav-open .wq-nav.in-hd{ padding:6px 0 4px; }
}

/* Асимметричная: всё слева вплотную, кнопка у правого края. */
.wq-site-hd.s-offset .wq-site-hd-in.offset{ gap:10px; padding:12px 26px; }
.wq-site-hd.s-offset .wq-site-brand{ margin-inline-end:16px; }
/* Меню не растягивается на свободное место: растянутое, оно съедает ту самую
   пустоту, ради которой стиль и нужен, и шапка становится обычной. */
.wq-site-hd.s-offset .wq-nav.in-hd{ flex:none; }
/* Инструменты перестают быть отдельной коробкой — тем же приёмом, что в
   баннере. Без этого телефон и язык не отделить от кнопки: они переезжают
   вправо все вместе. */
.wq-site-hd.s-offset .wq-site-tools{ display:contents; }
/* Вправо уходит ровно одна часть. Порядок правил важен: бургер получает
   отступ первым — на случай, когда кнопки нет вовсе; когда кнопка есть,
   вправо уезжает она, а бургер идёт за ней вплотную. */
.wq-site-hd.s-offset .wq-site-bg{ margin-inline-start:auto; }
.wq-site-hd.s-offset .wq-site-cta{ margin-inline-start:auto; padding:11px 22px; }
.wq-site-hd.s-offset .wq-site-cta ~ .wq-site-bg{ margin-inline-start:10px; }

@media (max-width:760px){
  /* На телефоне пустоты справа нет и быть не может — там просто логотип,
     кнопка и бургер. Разницу строя видно только на большом экране. */
  .wq-site-hd.s-offset .wq-site-hd-in.offset{ padding:9px 12px; }
  .wq-site-hd.s-offset .wq-site-brand{ margin-inline-end:0; }
  .wq-site-hd.s-offset .wq-site-cta{ padding:9px 14px; }
}

/* Меню в две строки: разделы сверху, страницы раздела под ними. */
.wq-site-hd.s-subnav .wq-site-hd-in.subnav{ padding:10px 26px; align-items:center; }
/* Раздел перестаёт быть отдельной коробкой — его ссылка и список становятся
   соседями в строке меню. Только так список можно опустить на вторую строку:
   перенос работает между соседями, а не сквозь обёртку. */
.wq-site-hd.s-subnav .wq-nav-g{ display:contents; }
/* Стрелка ни к чему: раскрывать нечего, список и так на виду. */
.wq-site-hd.s-subnav .wq-nav-ch{ display:none; }
.wq-site-hd.s-subnav .wq-nav-sub{ position:static; display:none; margin:0; padding:0;
  min-width:0; background:none; box-shadow:none; }
.wq-site-hd.s-subnav .wq-nav-sub::before{ display:none; }
/* ⚠️ Наведение больше НЕ открывает список. Раскрытие вторым рядом меняет
   высоту шапки — под курсором она прыгала бы на каждом движении мыши, а
   вместе с ней дёргалась вся страница. */
.wq-site-hd.s-subnav .wq-nav-g:hover > .wq-nav-sub{ display:none; }
/* Видна вторая строка только у того раздела, в котором сейчас находимся:
   иначе под шапкой висит вся карта сайта. Признак берём по открытой странице
   внутри раздела — своей пометки у раздела нет. */
.wq-site-hd.s-subnav .wq-nav-in > .wq-nav-g:has(.wq-nav-l.on) > .wq-nav-sub{
  display:flex; flex-basis:100%; order:9; flex-direction:row; flex-wrap:wrap;
  gap:2px; margin-top:5px; padding-top:6px; border-top:1px solid var(--wq-line); }
/* Нижний ряд мельче верхнего: два ряда одного веса спорят, и по ним не
   понять, что главное, а что вложено. */
.wq-site-hd.s-subnav .wq-nav-sub .wq-nav-l{ font-size:13.5px; padding:5px 10px;
  color:var(--wq-muted); }
.wq-site-hd.s-subnav .wq-nav-sub .wq-nav-l.on{ color:var(--wq-acc); background:none;
  font-weight:700; }

@media (max-width:760px){
  .wq-site-hd.s-subnav .wq-site-hd-in.subnav{ padding:9px 12px; }
  /* На телефоне меню и так раскрывается столбиком по кнопке — вторая строка
     теряет смысл. Возвращаем разделам их обычное поведение, иначе страницы
     раздела не открыть: стрелка была спрятана. */
  .wq-site-hd.s-subnav .wq-nav-g{ display:flex; flex-direction:column; }
  .wq-site-hd.s-subnav .wq-nav-ch{ display:inline-block; }
  .wq-site-hd.s-subnav .wq-nav-in > .wq-nav-g:has(.wq-nav-l.on) > .wq-nav-sub{
    display:none; }
  .wq-site-hd.s-subnav .wq-nav-g.open > .wq-nav-sub{ display:flex;
    flex-direction:column; margin-inline-start:14px; padding-top:0; border-top:none; }
}

/* Крупное меню: пункты набраны почти заголовками. */
.wq-site-hd.s-bignav .wq-site-hd-in.bignav{ padding:22px 26px; gap:22px; }
.wq-site-hd.s-bignav .wq-site-logo{ height:40px; }
.wq-site-hd.s-bignav .wq-site-name{ font-size:19px; }
.wq-site-hd.s-bignav .wq-nav.in-hd .wq-nav-in{ gap:26px; justify-content:center; }
/* Заливку при наведении убираем: у букв такого размера она превращается в
   плашку во всю строку и перебивает и логотип, и кнопку. Остаётся цвет. */
.wq-site-hd.s-bignav .wq-nav.in-hd > .wq-nav-in > .wq-nav-l,
.wq-site-hd.s-bignav .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l{
  font-size:19px; font-weight:600; letter-spacing:-.01em; padding:6px 2px;
  border-radius:0; }
.wq-site-hd.s-bignav .wq-nav.in-hd > .wq-nav-in > .wq-nav-l:hover,
.wq-site-hd.s-bignav .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l:hover{
  background:none; color:var(--wq-acc); }
.wq-site-hd.s-bignav .wq-nav.in-hd > .wq-nav-in > .wq-nav-l.on,
.wq-site-hd.s-bignav .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l.on{
  background:none; color:var(--wq-acc); }
/* Список раздела остаётся обычного размера: девятнадцатым кеглем он
   превращается в простыню на пол-экрана. */
.wq-site-hd.s-bignav .wq-nav-sub .wq-nav-l{ font-size:14.5px; font-weight:500;
  padding:7px 12px; }
.wq-site-hd.s-bignav .wq-site-tel{ font-size:16px; }
.wq-site-hd.s-bignav .wq-site-cta{ padding:11px 20px; font-size:15px; }

@media (max-width:760px){
  /* Девятнадцатый кегль на 390 пикселях даёт по одному пункту в строке.
     На телефоне меню всё равно раскрывается столбиком — возвращаем обычный
     размер, крупные буквы там ничего не добавляют. */
  .wq-site-hd.s-bignav .wq-site-hd-in.bignav{ padding:12px 12px; gap:10px; }
  .wq-site-hd.s-bignav .wq-nav.in-hd > .wq-nav-in > .wq-nav-l,
  .wq-site-hd.s-bignav .wq-nav.in-hd > .wq-nav-in > .wq-nav-g > .wq-nav-l{
    font-size:16px; padding:9px 0; }
  .wq-site-hd.s-bignav .wq-nav.in-hd .wq-nav-in{ gap:2px; }
  .wq-site-hd.s-bignav .wq-site-logo{ height:32px; }
  .wq-site-hd.s-bignav .wq-site-name{ font-size:16px; }
}

/* Телефон главным: номер крупнее названия, меню — вторым уровнем. */
.wq-site-hd.s-phonelead .wq-site-hd-in.phonelead{ padding:14px 26px;
  border-radius:24px 24px 0 0; }
/* ⚠️ Номер должен быть заметно крупнее названия — на 2–3 пункта разницы
   не видно, и шапка снова читается обычной. */
.wq-site-hd.s-phonelead .wq-site-tel{ font-size:26px; font-weight:800;
  letter-spacing:-.02em; line-height:1.1; }
.wq-site-hd.s-phonelead .wq-site-tel:hover{ color:var(--wq-acc); }
/* Логотип и название уступают номеру: они отвечают на «чей это сайт», а не
   на «что сделать». */
.wq-site-hd.s-phonelead .wq-site-logo{ height:28px; }
.wq-site-hd.s-phonelead .wq-site-name{ font-size:15px; font-weight:600;
  color:var(--wq-muted); }
/* Вторая полоса с меню — как у витрины: отдельной строкой под шапкой, по той
   же линии, что и содержимое страницы. */
.wq-site-hd.s-phonelead .wq-site-hd-nav{ background:var(--wq-card);
  border-top:1px solid var(--wq-line); border-radius:0 0 24px 24px;
  padding:0 26px 8px; }
.wq-site-hd.s-phonelead .wq-site-hd-nav .wq-nav.in-hd{ padding-top:8px; }

/* Без подложки полоса меню тоже без фона — иначе под прозрачной шапкой
   висит белая ленточка. */
.wq-site-hd.bare.s-phonelead .wq-site-hd-nav{ background:none; }

@media (max-width:760px){
  .wq-site-hd.s-phonelead .wq-site-hd-in.phonelead{ padding:10px 12px;
    border-radius:0; }
  /* 26 пунктов на 390 пикселях не оставляют места ни логотипу, ни бургеру —
     номер режется переносом посреди цифр. */
  .wq-site-hd.s-phonelead .wq-site-tel{ font-size:19px; }
  .wq-site-hd.s-phonelead .wq-site-tools.call{ display:flex; flex-wrap:wrap;
    align-items:center; gap:6px 10px; justify-content:flex-end; }
  .wq-site-hd.s-phonelead .wq-site-note{ flex-basis:100%; text-align:end;
    white-space:normal; }
  /* Меню на телефоне раскрывается бургером в первой строке — отдельная
     полоса под ней остаётся пустой рамкой. */
  .wq-site-hd.s-phonelead .wq-site-hd-nav{ padding:0 12px; border-top:none;
    border-radius:0; }
  .wq-site-hd.s-phonelead.nav-open .wq-site-hd-nav{ padding-bottom:8px;
    border-top:1px solid var(--wq-line); }
}


/* ── С режимом работы ────────────────────────────────────────────────── */
.wq-site-ft.p-hours .wq-site-ft-in{ display:grid; align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px 30px;
  padding:26px 24px 14px; }
.wq-site-ft.p-hours .wq-site-ft-name{ font-size:16px; margin-bottom:2px; }
.wq-site-ft.p-hours .wq-site-ft-tel{ font-size:18px; font-weight:700; }
.wq-site-ft.p-hours .wq-site-ft-soc{ margin-inline-start:0; margin-top:4px; }
/* Часы на подложке и с цветной чертой: тем же серым в третьей колонке они
   читались бы как продолжение адреса. pre-line — режим пишут в несколько
   строк, «Пн–Пт … / Сб …», и переносы надо сохранить. */
.wq-site-ft.p-hours .wq-site-ft-hrs{ padding:14px 16px; border-radius:12px;
  white-space:pre-line; line-height:1.55; color:var(--wq-text);
  background:color-mix(in srgb, var(--wq-acc) 8%, var(--wq-soft));
  border-inline-start:3px solid var(--wq-acc); }
/* Нижнюю приписку гасим — её текст уже стоит плашкой выше. */
.wq-site-ft.p-hours > .wq-site-ft-note{ display:none; }

@media (max-width:760px){
  .wq-site-ft.p-hours .wq-site-ft-in{ grid-template-columns:1fr; gap:14px;
    padding:18px 14px 12px; }
  .wq-site-ft.p-hours .wq-site-ft-bot{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ── Крупный телефон ─────────────────────────────────────────────────── */
.wq-site-ft.p-phone .wq-site-ft-in{ flex-direction:column; align-items:center;
  text-align:center; gap:10px; padding:32px 20px 14px;
  background:color-mix(in srgb, var(--wq-acc) 6%, var(--wq-card)); }
/* Размер от ширины экрана: на телефоне 44px уезжают за край и номер
   переносится посередине, на мониторе 26px теряются в пустоте. */
.wq-site-ft.p-phone .wq-site-ft-big a{ display:inline-block; font-size:clamp(26px,5.2vw,44px);
  font-weight:800; line-height:1.1; letter-spacing:-.02em; color:var(--wq-text);
  text-decoration:none; overflow-wrap:anywhere; }
.wq-site-ft.p-phone .wq-site-ft-big a:hover{ color:var(--wq-acc); }
/* Название, второй контакт и адрес — одной строкой: столбиком они растягивают
   подвал и начинают спорить с номером за внимание. */
.wq-site-ft.p-phone .wq-site-ft-row{ flex-direction:row; flex-wrap:wrap;
  justify-content:center; gap:4px 20px; }
.wq-site-ft.p-phone .wq-site-ft-col{ align-items:center; }
.wq-site-ft.p-phone .wq-site-ft-soc{ margin-inline-start:0; }
.wq-site-ft.p-phone .wq-site-ft-bot{ justify-content:center; text-align:center; }
.wq-site-ft.p-phone .wq-site-ft-note{ text-align:center; padding:0 24px 16px; }

@media (max-width:760px){
  .wq-site-ft.p-phone .wq-site-ft-in{ padding:22px 14px 12px; }
  /* Строка рвётся посреди адреса — честнее поставить куски друг под друга. */
  .wq-site-ft.p-phone .wq-site-ft-row{ flex-direction:column; gap:4px; }
  .wq-site-ft.p-phone .wq-site-ft-bot{ flex-direction:column; gap:4px; }
}

/* ── Светлый с чертой ────────────────────────────────────────────────── */
/* Подложки нет намеренно: подвал держится чертой, а не карточкой — на светлом
   сайте лишний прямоугольник внизу читается как ещё одна секция. */
.wq-site-ft.p-framed .wq-site-ft-in{ display:grid; align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px 34px;
  padding:24px 4px 12px; background:none; border-radius:0;
  border-top:3px solid var(--wq-acc); }
.wq-site-ft.p-framed .wq-site-ft-name{ font-size:16px; margin-bottom:2px; }
.wq-site-ft.p-framed .wq-site-ft-tel{ font-weight:700; }
.wq-site-ft.p-framed .wq-site-ft-soc{ margin-inline-start:0; align-self:start; margin-top:4px; }
.wq-site-ft.p-framed .wq-site-ft-note{ padding:0 4px 12px; }

@media (max-width:760px){
  .wq-site-ft.p-framed .wq-site-ft-in{ grid-template-columns:1fr; gap:14px;
    padding:18px 2px 10px; border-top-width:2px; }
  .wq-site-ft.p-framed .wq-site-ft-bot{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ── Логотип и колонки ───────────────────────────────────────────────── */
.wq-site-ft.p-brand .wq-site-ft-in{ display:grid; align-items:start;
  grid-template-columns:minmax(170px,260px) repeat(auto-fit,minmax(150px,1fr));
  gap:20px 40px; padding:26px 24px 14px; }
/* Ни логотипа, ни названия — первой колонки нет, и держать под неё место
   незачем: контакты уехали бы к середине от пустого края. */
.wq-site-ft.p-brand .wq-site-ft-in.nolead{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.wq-site-ft.p-brand .wq-site-ft-lead{ gap:8px; }
.wq-site-ft.p-brand .wq-site-ft-logo{ height:52px; }
.wq-site-ft.p-brand .wq-site-ft-name{ font-size:17px; letter-spacing:-.01em; }
.wq-site-ft.p-brand .wq-site-ft-tel{ font-size:17px; font-weight:700; }
.wq-site-ft.p-brand .wq-site-ft-soc{ margin-inline-start:0; margin-top:4px; }
.wq-site-ft.p-brand .wq-site-ft-note{ padding:0 24px 14px; }

@media (max-width:760px){
  .wq-site-ft.p-brand .wq-site-ft-in{ grid-template-columns:1fr; gap:14px;
    padding:18px 14px 12px; }
  /* Логотип в 52 пикселя на узком экране съедает первый экран подвала. */
  .wq-site-ft.p-brand .wq-site-ft-logo{ height:40px; }
  .wq-site-ft.p-brand .wq-site-ft-bot{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ── Тёмный в две полосы ─────────────────────────────────────────────── */
/* Отрицательные поля — плита идёт от края до края, а не карточкой внутри
   страницы: так же сделаны p-mega и p-line. */
.wq-site-ft.p-bands{ margin:26px -26px -32px; }
.wq-site-ft.p-bands .wq-site-ft-in{ display:grid; align-items:start; border-radius:0;
  grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr)); gap:24px 40px;
  padding:38px 26px 0; background:#191823; color:rgba(255,255,255,.6); }
.wq-site-ft.p-bands .wq-site-ft-lead{ gap:8px; }
.wq-site-ft.p-bands .wq-site-ft-logo{ height:42px; }
.wq-site-ft.p-bands .wq-site-ft-name{ color:#fff; font-size:19px; letter-spacing:-.01em; }
.wq-site-ft.p-bands .wq-site-ft-col a,
.wq-site-ft.p-bands .wq-nav.in-ft .wq-nav-l{ color:rgba(255,255,255,.82); }
.wq-site-ft.p-bands .wq-site-ft-col a:hover,
.wq-site-ft.p-bands .wq-nav.in-ft .wq-nav-l:hover{ color:#fff; }
.wq-site-ft.p-bands .wq-site-ft-tel{ font-size:18px; font-weight:700; color:#fff; }
.wq-site-ft.p-bands .wq-site-ft-l{ color:rgba(255,255,255,.6); }
.wq-site-ft.p-bands .wq-site-ft-l:hover{ color:#fff; }
/* Вторая полоса. Отрицательные поля — чтобы дойти до краёв плиты, а не
   остановиться на её внутреннем отступе; черта сверху не нужна, полосы и так
   разного цвета, а вместе с чертой получалась бы двойная граница. */
.wq-site-ft.p-bands .wq-site-ft-bot{ margin:26px -26px 0; padding:14px 26px;
  border-top:0; background:#0f0e15; color:rgba(255,255,255,.45); }
/* Приписка стоит ПОД нижней полосой — цвет тот же, иначе тёмный подвал
   обрывается светлым хвостом в цвет страницы. */
.wq-site-ft.p-bands .wq-site-ft-note{ margin:0; padding:0 26px 16px;
  background:#0f0e15; color:rgba(255,255,255,.4); }

@media (max-width:760px){
  .wq-site-ft.p-bands{ margin:14px -12px -16px; }
  .wq-site-ft.p-bands .wq-site-ft-in{ grid-template-columns:1fr; gap:16px; padding:24px 14px 0; }
  .wq-site-ft.p-bands .wq-site-ft-bot{ margin:20px -14px 0; padding:12px 14px;
    flex-direction:column; align-items:flex-start; gap:4px; }
  .wq-site-ft.p-bands .wq-site-ft-note{ padding:0 14px 14px; }
}

/* ── Плитки контактов ────────────────────────────────────────────────── */
.wq-site-ft.p-tiles .wq-site-ft-in{ flex-direction:column; gap:14px; padding:24px 24px 14px; }
.wq-site-ft.p-tiles .wq-site-ft-name{ font-size:17px; }
.wq-site-ft.p-tiles .wq-site-ft-tiles{ display:grid; width:100%; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.wq-site-ft.p-tiles .wq-site-ft-tile{ display:flex; align-items:center; min-height:64px;
  padding:14px 16px; border-radius:14px; background:var(--wq-soft);
  border:1px solid var(--wq-line); }
/* Ссылка занимает плитку целиком: нажатие мимо текста, но по плитке — промах,
   за который человек винит сайт, а не свой палец. */
.wq-site-ft.p-tiles .wq-site-ft-tile > a{ display:block; width:100%; font-weight:600;
  color:var(--wq-text); text-decoration:none; overflow-wrap:anywhere; }
.wq-site-ft.p-tiles .wq-site-ft-tile > a:hover{ color:var(--wq-acc); }
/* Адрес мельче: он длиннее прочего и в плитке того же размера ломает ряд. */
.wq-site-ft.p-tiles .wq-site-ft-tile .wq-site-ft-adr{ font-size:13.5px; }
.wq-site-ft.p-tiles .wq-site-ft-tile .wq-site-ft-soc{ width:100%; margin-inline-start:0;
  justify-content:center; }
.wq-site-ft.p-tiles .wq-site-ft-note{ padding:0 24px 14px; }

@media (max-width:760px){
  .wq-site-ft.p-tiles .wq-site-ft-in{ padding:18px 14px 12px; }
  /* В один столбец: две плитки по 180 на узком экране сжимаются до обрезанной
     почты, а почта с многоточием бесполезна. */
  .wq-site-ft.p-tiles .wq-site-ft-tiles{ grid-template-columns:1fr; gap:8px; }
  .wq-site-ft.p-tiles .wq-site-ft-tile{ min-height:0; padding:12px 14px; }
  .wq-site-ft.p-tiles .wq-site-ft-bot{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ── Меню в строку ───────────────────────────────────────────────────── */
.wq-site-ft.p-navrow .wq-site-ft-in{ flex-direction:column; align-items:center;
  text-align:center; gap:12px; padding:24px 20px 12px; }
/* Меню строкой с переносом: восемь страниц в одну линию не встают. */
.wq-site-ft.p-navrow .wq-nav.in-ft .wq-nav-in{ flex-direction:row; flex-wrap:wrap;
  justify-content:center; gap:4px 24px; }
.wq-site-ft.p-navrow .wq-nav.in-ft .wq-nav-l{ font-weight:600; }
/* Общее правило подвала растягивает раздел с подпунктами на всю ширину —
   в строке он рвал бы её на части. */
.wq-site-ft.p-navrow .wq-nav.in-ft .wq-nav-g{ width:auto; }
/* Вложенные страницы в строке читались бы как самостоятельные разделы. */
.wq-site-ft.p-navrow .wq-nav.in-ft .wq-nav-sub{ display:none; }
.wq-site-ft.p-navrow .wq-site-ft-soc{ margin-inline-start:0; gap:14px;
  flex-wrap:wrap; justify-content:center; }
.wq-site-ft.p-navrow .wq-site-ft-l{ width:24px; height:24px; }
.wq-site-ft.p-navrow .wq-site-ft-col{ align-items:center; }
.wq-site-ft.p-navrow .wq-site-ft-row{ flex-direction:row; flex-wrap:wrap;
  justify-content:center; gap:4px 20px; }
.wq-site-ft.p-navrow .wq-site-ft-bot{ justify-content:center; text-align:center; gap:4px 16px; }
.wq-site-ft.p-navrow .wq-site-ft-note{ text-align:center; padding:0 24px 14px; }

@media (max-width:760px){
  .wq-site-ft.p-navrow .wq-site-ft-in{ padding:18px 14px 10px; gap:10px; }
  .wq-site-ft.p-navrow .wq-nav.in-ft .wq-nav-in{ gap:2px 16px; }
  .wq-site-ft.p-navrow .wq-site-ft-row{ flex-direction:column; gap:4px; }
  .wq-site-ft.p-navrow .wq-site-ft-bot{ flex-direction:column; gap:4px; }
}

/* ── Крупное название ────────────────────────────────────────────────── */
.wq-site-ft.p-bigname .wq-site-ft-in{ flex-direction:column; align-items:flex-start;
  gap:10px; padding:34px 24px 12px; }
.wq-site-ft.p-bigname .wq-site-ft-hero{ width:100%; }
/* Размер от ширины экрана: длинное название вроде «Производственная компания
   Северный камень» на 54 пикселях уезжает за край. */
.wq-site-ft.p-bigname .wq-site-ft-name{ font-size:clamp(28px,6.2vw,54px); font-weight:800;
  line-height:1.05; letter-spacing:-.03em; overflow-wrap:anywhere; }
.wq-site-ft.p-bigname .wq-site-ft-logo{ height:64px; }
/* Контакты нарочно мелкие: рядом с вывеской обычный текст читается как второй
   заголовок и спорит с ней. */
.wq-site-ft.p-bigname .wq-site-ft-row{ flex-direction:row; flex-wrap:wrap;
  gap:2px 22px; font-size:13.5px; }
.wq-site-ft.p-bigname .wq-site-ft-soc{ margin-inline-start:0; }
.wq-site-ft.p-bigname .wq-site-ft-note{ padding:0 24px 14px; }

@media (max-width:760px){
  .wq-site-ft.p-bigname .wq-site-ft-in{ padding:24px 14px 10px; }
  .wq-site-ft.p-bigname .wq-site-ft-logo{ height:44px; }
  .wq-site-ft.p-bigname .wq-site-ft-row{ flex-direction:column; gap:3px; }
  .wq-site-ft.p-bigname .wq-site-ft-bot{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ── С разделителями ─────────────────────────────────────────────────── */
/* align-items:stretch — черта должна идти во всю высоту ряда, иначе у короткой
   колонки она обрывается на середине и выглядит недорисованной. */
.wq-site-ft.p-ruled .wq-site-ft-in{ display:grid; align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0;
  padding:26px 0 14px; }
.wq-site-ft.p-ruled .wq-site-ft-col{ padding:2px 24px; gap:4px; }
/* Черта у соседа слева: у первой колонки её нет, у пропавшей — тоже. */
.wq-site-ft.p-ruled .wq-site-ft-col + .wq-site-ft-col{
  border-inline-start:1px solid var(--wq-line); }
.wq-site-ft.p-ruled .wq-site-ft-name{ font-size:16px; margin-bottom:2px; }
.wq-site-ft.p-ruled .wq-site-ft-tel{ font-weight:700; }
.wq-site-ft.p-ruled .wq-site-ft-soc{ margin-inline-start:0; align-self:start; }
/* Внутренние поля у .in нулевые (черты идут во всю высоту), поэтому нижней
   строке поля нужны свои. */
.wq-site-ft.p-ruled .wq-site-ft-bot{ margin:14px 24px 0; padding-top:12px; }
.wq-site-ft.p-ruled .wq-site-ft-note{ padding:0 24px 14px; }

@media (max-width:760px){
  .wq-site-ft.p-ruled .wq-site-ft-in{ grid-template-columns:1fr; padding:18px 0 12px; }
  .wq-site-ft.p-ruled .wq-site-ft-col{ padding:12px 14px; }
  /* Вертикальная черта в столбике превращается в палку слева от текста —
     поперёк она делит то же самое, но читается как разделитель. */
  .wq-site-ft.p-ruled .wq-site-ft-col + .wq-site-ft-col{ border-inline-start:0;
    border-top:1px solid var(--wq-line); }
  .wq-site-ft.p-ruled .wq-site-ft-bot{ margin:14px 14px 0; flex-direction:column;
    align-items:flex-start; gap:4px; }
}

/* ── В одну строку ───────────────────────────────────────────────────── */
.wq-site-ft.p-oneline .wq-site-ft-in{ flex-direction:row; align-items:center;
  flex-wrap:wrap; gap:2px 14px; padding:14px 2px 0; background:none; border-radius:0;
  border-top:1px solid var(--wq-line); font-size:13.5px; }
/* Ссылки лежат прямо в .in, поэтому общее правило .wq-site-ft-col a до них
   не достаёт — цвет и подчёркивание задаём здесь, иначе получим синие
   подчёркнутые ссылки браузера. */
.wq-site-ft.p-oneline .wq-site-ft-in > a{ color:var(--wq-text); text-decoration:none; }
.wq-site-ft.p-oneline .wq-site-ft-in > a:hover{ color:var(--wq-acc); }
.wq-site-ft.p-oneline .wq-site-ft-name{ font-size:14px; }
/* Точка — знак препинания, а не слово: переводить нечего, и на шести языках
   она одинакова. */
.wq-site-ft.p-oneline .wq-site-ft-in > *:not(:first-child):not(.wq-site-ft-bot)::before{
  content:'·'; margin-inline-end:14px; color:var(--wq-line); }
.wq-site-ft.p-oneline .wq-site-ft-soc{ margin-inline-start:auto; gap:10px; }
/* Значки прижаты к правому краю — точка перед ними повисла бы посреди пустоты. */
.wq-site-ft.p-oneline .wq-site-ft-soc::before{ display:none; }
.wq-site-ft.p-oneline .wq-site-ft-l{ width:18px; height:18px; }
.wq-site-ft.p-oneline .wq-site-ft-bot{ margin-top:8px; padding-top:8px; font-size:12px; }
.wq-site-ft.p-oneline .wq-site-ft-note{ padding:4px 2px 0; }

@media (max-width:760px){
  /* Столбиком: четыре куска через точку на 360 пикселях всё равно
     переносятся, но уже как попало — то по два, то по одному. */
  .wq-site-ft.p-oneline .wq-site-ft-in{ flex-direction:column; align-items:flex-start; gap:4px; }
  .wq-site-ft.p-oneline .wq-site-ft-in > *:not(:first-child):not(.wq-site-ft-bot)::before{
    display:none; }
  .wq-site-ft.p-oneline .wq-site-ft-soc{ margin-inline-start:0; margin-top:4px; }
  .wq-site-ft.p-oneline .wq-site-ft-bot{ flex-direction:column; align-items:flex-start; gap:3px; }
}

/* ── Мы на связи ─────────────────────────────────────────────────────── */
.wq-site-ft.p-connect .wq-site-ft-in{ flex-direction:column; align-items:center;
  text-align:center; gap:12px; padding:30px 20px 12px;
  background:color-mix(in srgb, var(--wq-acc) 5%, var(--wq-card)); }
.wq-site-ft.p-connect .wq-site-ft-col{ align-items:center; }
.wq-site-ft.p-connect .wq-site-ft-soc{ margin-inline-start:0; gap:14px;
  flex-wrap:wrap; justify-content:center; }
/* Значок кнопкой: у 22 пикселей площадь нажатия меньше подушечки пальца, а
   здесь это главное действие подвала, а не украшение в углу. */
.wq-site-ft.p-connect .wq-site-ft-l{ width:46px; height:46px; padding:11px; border-radius:14px;
  color:var(--wq-acc); background:color-mix(in srgb, var(--wq-acc) 10%, var(--wq-card));
  transition:background .15s, color .15s; }
.wq-site-ft.p-connect .wq-site-ft-l:hover{ color:var(--wq-btn-text,#fff); background:var(--wq-acc); }
.wq-site-ft.p-connect .wq-site-ft-row{ flex-direction:row; flex-wrap:wrap;
  justify-content:center; gap:4px 20px; font-weight:600; }
/* Значков нет — их место забирает телефон, иначе подвал начинается с пустоты. */
.wq-site-ft.p-connect .wq-site-ft-in.noicons .wq-site-ft-tel{ font-size:24px; font-weight:800;
  letter-spacing:-.01em; }
.wq-site-ft.p-connect .wq-site-ft-adr{ font-size:13.5px; }
.wq-site-ft.p-connect .wq-site-ft-bot{ justify-content:center; text-align:center; }
.wq-site-ft.p-connect .wq-site-ft-note{ text-align:center; padding:0 24px 14px; }

@media (max-width:760px){
  .wq-site-ft.p-connect .wq-site-ft-in{ padding:22px 14px 10px; gap:10px; }
  /* Чуть мельче, но всё ещё кнопка: пять значков по 46 на 360 пикселях
     переносятся на вторую строку и разваливают ряд. */
  .wq-site-ft.p-connect .wq-site-ft-l{ width:42px; height:42px; padding:10px; }
  .wq-site-ft.p-connect .wq-site-ft-row{ flex-direction:column; gap:4px; }
  .wq-site-ft.p-connect .wq-site-ft-bot{ flex-direction:column; gap:4px; }
}


/* ── Цветная заливка ─────────────────────────────────────────────────── */
.wq-site-ft.p-paint .wq-site-ft-in{ display:grid; align-items:start;
  grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr)); gap:24px 36px;
  padding:38px 24px 16px; border-radius:0;
  background:var(--wq-acc);
  color:color-mix(in srgb, var(--wq-btn-text,#fff) 74%, transparent); }
.wq-site-ft.p-paint .wq-site-ft-lead{ gap:9px; }
.wq-site-ft.p-paint .wq-site-ft-logo{ height:34px; }
/* Всё, что читают, — в полный цвет надписи; остальное приглушено прозрачностью,
   а не другим оттенком: подмешивать белый нельзя, акцент бывает светлым. */
.wq-site-ft.p-paint .wq-site-ft-name,
.wq-site-ft.p-paint .wq-site-ft-col a,
.wq-site-ft.p-paint .wq-nav.in-ft .wq-nav-l{ color:var(--wq-btn-text,#fff); }
.wq-site-ft.p-paint .wq-site-ft-name{ font-size:20px; letter-spacing:-.01em; }
.wq-site-ft.p-paint .wq-site-ft-tel{ font-size:19px; font-weight:700; }
/* Наведение на цветном фоне не может уводить в акцент — ссылка исчезла бы
   в подложке. Гасим прозрачностью. */
.wq-site-ft.p-paint .wq-site-ft-col a:hover,
.wq-site-ft.p-paint .wq-nav.in-ft .wq-nav-l:hover{ color:var(--wq-btn-text,#fff);
  opacity:.72; }
.wq-site-ft.p-paint .wq-site-ft-l{
  color:color-mix(in srgb, var(--wq-btn-text,#fff) 70%, transparent); }
.wq-site-ft.p-paint .wq-site-ft-l:hover{ color:var(--wq-btn-text,#fff); }
.wq-site-ft.p-paint .wq-site-ft-bot{
  border-top-color:color-mix(in srgb, var(--wq-btn-text,#fff) 24%, transparent);
  color:color-mix(in srgb, var(--wq-btn-text,#fff) 58%, transparent); }
/* Приписка живёт вне .in — фон ей нужен свой, иначе под цветной плитой
   окажется светлый хвост. Поля те же, что у .in на странице сайта. */
.wq-site-ft.p-paint .wq-site-ft-note{ margin:0;
  padding:0 clamp(12px, 3vw, 26px) 20px; background:var(--wq-acc);
  color:color-mix(in srgb, var(--wq-btn-text,#fff) 55%, transparent); }

@media (max-width:760px){
  .wq-site-ft.p-paint .wq-site-ft-in{ grid-template-columns:1fr; gap:16px;
    padding:26px 14px 12px; }
  .wq-site-ft.p-paint .wq-site-ft-name{ font-size:18px; }
  .wq-site-ft.p-paint .wq-site-ft-bot{ flex-direction:column;
    align-items:flex-start; gap:4px; }
}

/* ── Приподнятая плита ───────────────────────────────────────────────── */
/* Поля и воздух — на самом подвале. На .in их вешать нельзя: там уже стоит
   margin-inline:auto из правил ширины страницы, и плита уехала бы влево. */
.wq-site-ft.p-raised{ width:auto; margin-inline:clamp(12px, 3vw, 26px);
  padding-bottom:24px; }
.wq-site-ft.p-raised .wq-site-ft-in{ display:grid; align-items:start;
  grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr)); gap:20px 34px;
  padding:28px 26px 16px; border-radius:26px;
  background:var(--wq-card); box-shadow:var(--wq-shadow,0 14px 46px rgba(20,0,60,.10)); }
.wq-site-ft.p-raised .wq-site-ft-lead{ gap:8px; }
.wq-site-ft.p-raised .wq-site-ft-logo{ height:34px; }
.wq-site-ft.p-raised .wq-site-ft-name{ font-size:18px; letter-spacing:-.01em; }
.wq-site-ft.p-raised .wq-site-ft-tel{ font-size:18px; font-weight:700; }
/* Значки в нижней строке — не колонка: сбрасываем отступ auto, иначе они
   прижмутся к правому краю и реквизиты уедут под них. */
.wq-site-ft.p-raised .wq-site-ft-bot .wq-site-ft-soc{ margin-inline:0; }
.wq-site-ft.p-raised .wq-site-ft-l{ width:20px; height:20px; }
/* Приписка встаёт под плитой, по центру: слева под скруглением она читается
   как обрывок строки. */
.wq-site-ft.p-raised .wq-site-ft-note{ padding:10px 26px 0; text-align:center; }

@media (max-width:760px){
  .wq-site-ft.p-raised{ margin-inline:12px; padding-bottom:16px; }
  .wq-site-ft.p-raised .wq-site-ft-in{ grid-template-columns:1fr; gap:14px;
    padding:20px 16px 12px; border-radius:20px; }
  .wq-site-ft.p-raised .wq-site-ft-bot{ flex-direction:column;
    align-items:flex-start; gap:8px; }
  .wq-site-ft.p-raised .wq-site-ft-note{ padding:8px 16px 0; }
}

/* ── Крупные значки ──────────────────────────────────────────────────── */
.wq-site-ft.p-icons .wq-site-ft-in{ flex-direction:column; align-items:center;
  text-align:center; gap:14px; padding:30px 20px 14px;
  background:color-mix(in srgb, var(--wq-acc) 4%, var(--wq-card)); }
/* Ряд значков: общий margin-inline-start:auto рассчитан на строку с текстом,
   тут он сдвинул бы ряд к правому краю. */
.wq-site-ft.p-icons .wq-site-ft-soc{ margin-inline:auto; gap:14px; }
.wq-site-ft.p-icons .wq-site-ft-l{ width:44px; height:44px; padding:11px;
  border-radius:50%; color:var(--wq-acc);
  background:color-mix(in srgb, var(--wq-acc) 10%, transparent);
  transition:background .15s, color .15s; }
.wq-site-ft.p-icons .wq-site-ft-l:hover{ background:var(--wq-acc);
  color:var(--wq-btn-text,#fff); }
/* Всё остальное — одной мелкой строкой: это подпись под значками, а не
   второй по важности блок. */
.wq-site-ft.p-icons .wq-site-ft-row{ flex-direction:row; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:4px 20px; font-size:13px; }
.wq-site-ft.p-icons .wq-site-ft-name{ font-size:13px; }
.wq-site-ft.p-icons .wq-site-ft-tel{ font-weight:700; }
.wq-site-ft.p-icons .wq-site-ft-bot{ justify-content:center; gap:4px 16px;
  margin-top:10px; }
.wq-site-ft.p-icons .wq-site-ft-note{ padding:0 24px 16px; text-align:center; }

@media (max-width:760px){
  .wq-site-ft.p-icons .wq-site-ft-in{ padding:22px 14px 12px; gap:12px; }
  /* Значки мельче, но остаются пальцевого размера: ниже 38 в них не попасть. */
  .wq-site-ft.p-icons .wq-site-ft-l{ width:38px; height:38px; padding:9px; }
  /* Название, телефон и адрес в одну строку на узком экране рвутся посреди
     слова — пусть встанут друг под другом. */
  .wq-site-ft.p-icons .wq-site-ft-row{ flex-direction:column; gap:3px; }
  .wq-site-ft.p-icons .wq-site-ft-bot{ flex-direction:column; gap:3px; }
}

/* ── Со скосом ───────────────────────────────────────────────────────── */
.wq-site-ft.p-slant .wq-site-ft-in{ display:grid; align-items:start;
  grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr)); gap:20px 34px;
  padding:56px 24px 14px; border-radius:0;
  clip-path:polygon(0 26px, 100% 0, 100% 100%, 0 100%);
  background:color-mix(in srgb, var(--wq-acc) 12%, var(--wq-card)); }
.wq-site-ft.p-slant .wq-site-ft-lead{ gap:9px; }
.wq-site-ft.p-slant .wq-site-ft-name{ font-size:18px; letter-spacing:-.01em; }
.wq-site-ft.p-slant .wq-site-ft-tel{ font-size:18px; font-weight:700; }
.wq-site-ft.p-slant .wq-site-ft-bot{
  border-top-color:color-mix(in srgb, var(--wq-text) 12%, transparent); }
/* Приписка вне .in — держим ту же подложку, иначе под скошенной плитой
   повиснет светлая строка на фоне страницы. */
.wq-site-ft.p-slant .wq-site-ft-note{ margin:0;
  padding:0 clamp(12px, 3vw, 26px) 16px;
  background:color-mix(in srgb, var(--wq-acc) 12%, var(--wq-card)); }

@media (max-width:760px){
  /* Скос в 26 пикселей на узком экране съедает четверть высоты подвала —
     уменьшаем и его, и верхнее поле. */
  .wq-site-ft.p-slant .wq-site-ft-in{ grid-template-columns:1fr; gap:14px;
    padding:34px 14px 12px; clip-path:polygon(0 14px, 100% 0, 100% 100%, 0 100%); }
  .wq-site-ft.p-slant .wq-site-ft-bot{ flex-direction:column;
    align-items:flex-start; gap:4px; }
}

/* ── Как добраться ───────────────────────────────────────────────────── */
.wq-site-ft.p-route .wq-site-ft-in{ display:grid; grid-template-columns:1.6fr 1fr;
  gap:18px 36px; padding:28px 24px 14px; align-items:start; }
/* Адреса нет — колонка одна: половина подвала под пустое место не отдаётся. */
.wq-site-ft.p-route .wq-site-ft-in.noadr{ grid-template-columns:1fr; }
.wq-site-ft.p-route .wq-site-ft-way{ gap:10px; }
/* Название тут подпись, а не заголовок: заголовок — адрес. */
.wq-site-ft.p-route .wq-site-ft-name{ font-size:14px; font-weight:600; opacity:.8; }

.wq-site-ft-go{ position:relative; display:block; padding-inline-start:30px;
  font-size:21px; line-height:1.35; font-weight:700; letter-spacing:-.01em;
  color:var(--wq-text); text-decoration:none; }
/* Метка-капля: круг с отогнутым низом, как в любых картах. Отдельной картинки
   ради 16 пикселей не заводим. */
.wq-site-ft-go::before{ content:''; position:absolute; inset-inline-start:0;
  top:.32em; width:16px; height:16px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); background:var(--wq-acc); }
.wq-site-ft-go::after{ content:''; position:absolute; inset-inline-start:5px;
  top:calc(.32em + 5px); width:6px; height:6px; border-radius:50%;
  background:var(--wq-card); }
.wq-site-ft-go:hover{ color:var(--wq-acc); }

.wq-site-ft.p-route .wq-site-ft-side{ gap:8px; padding-inline-start:34px;
  border-inline-start:1px solid var(--wq-line); }
/* Колонка одна — черта у пустого края читается как обрезанный блок. */
.wq-site-ft.p-route .wq-site-ft-in.noadr .wq-site-ft-side{ padding-inline-start:0;
  border-inline-start:0; }
.wq-site-ft.p-route .wq-site-ft-tel{ font-size:18px; font-weight:700; }
/* Приписка в этом виде — не мелочь, а объяснение дороги: даём ей размер
   обычного текста и ширину строки, которую можно читать. */
.wq-site-ft.p-route .wq-site-ft-note{ padding:0 24px 16px; font-size:13.5px;
  max-width:64ch; opacity:1; }

@media (max-width:760px){
  .wq-site-ft.p-route .wq-site-ft-in{ grid-template-columns:1fr; gap:14px;
    padding:20px 14px 12px; }
  .wq-site-ft.p-route .wq-site-ft-go{ font-size:18px; }
  /* Вертикальная черта в столбике превращается в палку слева от телефона. */
  .wq-site-ft.p-route .wq-site-ft-side{ padding-inline-start:0; border-inline-start:0;
    padding-top:12px; border-top:1px solid var(--wq-line); }
  .wq-site-ft.p-route .wq-site-ft-bot{ flex-direction:column;
    align-items:flex-start; gap:4px; }
}

/* ── Разделы с заголовками ───────────────────────────────────────────── */
.wq-site-ft.p-heads .wq-site-ft-in{ display:grid; grid-template-columns:1fr 2.4fr;
  gap:22px 40px; padding:28px 24px 14px; align-items:start; }
/* Меню в одну страницу не пришло — правой половины нет. */
.wq-site-ft.p-heads .wq-site-ft-in.nolist{ grid-template-columns:1fr; }
.wq-site-ft.p-heads .wq-site-ft-about{ gap:7px; }
.wq-site-ft.p-heads .wq-site-ft-name{ font-size:15px; margin-bottom:2px; }
/* Разделы — колонками. Страницы без вложенных остаются обычными ссылками и
   встают в общий поток: выдумывать им заголовок не из чего. */
.wq-site-ft.p-heads .wq-nav.in-ft .wq-nav-in{ display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:16px 24px;
  align-items:start; }
.wq-site-ft.p-heads .wq-nav.in-ft .wq-nav-g > .wq-nav-l{ font-weight:700;
  font-size:13px; letter-spacing:.03em; color:var(--wq-text); padding-bottom:6px; }
/* Заглавных букв в заголовке НЕТ намеренно: в грузинском и арабском регистра
   нет вовсе, а по-русски text-transform превращает подпись в крик. Отличаем
   насыщенностью и разрядкой. */
.wq-site-ft.p-heads .wq-nav.in-ft .wq-nav-sub{ padding-inline-start:0; }
.wq-site-ft.p-heads .wq-nav.in-ft .wq-nav-sub .wq-nav-l{ font-size:13.5px; opacity:.85; }

@media (max-width:760px){
  .wq-site-ft.p-heads .wq-site-ft-in{ grid-template-columns:1fr; gap:16px;
    padding:20px 14px 12px; }
  /* Четыре раздела в ряд на телефон не встают, один столбик растягивает
     подвал на пол-экрана — два. */
  .wq-site-ft.p-heads .wq-nav.in-ft .wq-nav-in{ grid-template-columns:1fr 1fr;
    gap:12px 14px; }
  .wq-site-ft.p-heads .wq-site-ft-bot{ flex-direction:column;
    align-items:flex-start; gap:4px; }
}

/* ── Только имя и год ────────────────────────────────────────────────── */
.wq-site-ft.p-tiny .wq-site-ft-in{ flex-direction:column; align-items:center;
  text-align:center; gap:6px; padding:16px 0 0; background:none; border-radius:0;
  border-top:1px solid var(--wq-line); }
.wq-site-ft.p-tiny .wq-site-ft-lead .wq-site-ft-cp{ font-size:15px; font-weight:700;
  color:var(--wq-text); white-space:normal; }
/* Длинное название компании в nowrap выезжало за экран телефона — здесь
   переносить его можно, строка всё равно одна. */
.wq-site-ft.p-tiny .wq-site-ft-bot{ justify-content:center; gap:3px 14px;
  margin-top:2px; padding-top:0; border-top:0; font-size:11.5px; opacity:.72; }
.wq-site-ft.p-tiny .wq-site-ft-req{ font-size:11.5px; }
.wq-site-ft.p-tiny .wq-site-ft-bot .wq-site-ft-soc{ margin-inline:0; gap:8px; }
.wq-site-ft.p-tiny .wq-site-ft-l{ width:15px; height:15px; }
.wq-site-ft.p-tiny .wq-site-ft-note{ padding:6px 0 0; text-align:center;
  font-size:11.5px; }

@media (max-width:760px){
  .wq-site-ft.p-tiny .wq-site-ft-in{ padding:14px 0 0; }
  /* Мелкая строка остаётся строкой и на телефоне: столбиком из четырёх
     обрывков она занимает больше места, чем весь остальной подвал. */
  .wq-site-ft.p-tiny .wq-site-ft-bot{ flex-direction:row; flex-wrap:wrap;
    justify-content:center; gap:2px 12px; }
}

/* ── В рамке ─────────────────────────────────────────────────────────── */
.wq-site-ft.p-outline{ width:auto; margin-inline:clamp(12px, 3vw, 26px);
  border:1px solid var(--wq-line); border-radius:var(--wq-radius,16px);
  overflow:hidden; }
.wq-site-ft.p-outline .wq-site-ft-in{ display:grid; align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px 34px;
  padding:26px 24px 14px; background:none; border-radius:0; }
.wq-site-ft.p-outline .wq-site-ft-lead{ gap:8px; }
.wq-site-ft.p-outline .wq-site-ft-logo{ height:32px; }
.wq-site-ft.p-outline .wq-site-ft-name{ font-size:17px; letter-spacing:-.01em; }
.wq-site-ft.p-outline .wq-site-ft-side{ gap:8px; }
.wq-site-ft.p-outline .wq-site-ft-tel{ font-size:18px; font-weight:700; }
/* Приписка внутри рамки — поля те же, что у .in, иначе строка висит сдвинутой. */
.wq-site-ft.p-outline .wq-site-ft-note{ padding:0 24px 14px; }

@media (max-width:760px){
  .wq-site-ft.p-outline{ margin-inline:12px; border-radius:14px; }
  .wq-site-ft.p-outline .wq-site-ft-in{ grid-template-columns:1fr; gap:14px;
    padding:18px 16px 12px; }
  .wq-site-ft.p-outline .wq-site-ft-note{ padding:0 16px 12px; }
  .wq-site-ft.p-outline .wq-site-ft-bot{ flex-direction:column;
    align-items:flex-start; gap:4px; }
}

/* ── Контакты на подложке ────────────────────────────────────────────── */
/* Поля нулевые — подложка правой колонки обязана доходить до края плиты.
   Свои поля из-за этого нужны и колонкам, и нижней строке (как у p-map). */
.wq-site-ft.p-aside .wq-site-ft-in{ display:grid; grid-template-columns:1.7fr 1fr;
  gap:0; padding:0; overflow:hidden; align-items:stretch; }
.wq-site-ft.p-aside .wq-site-ft-in.solo{ grid-template-columns:1fr; }
.wq-site-ft.p-aside .wq-site-ft-about{ padding:26px 24px; gap:9px; }
.wq-site-ft.p-aside .wq-site-ft-name{ font-size:18px; letter-spacing:-.01em; }
.wq-site-ft.p-aside .wq-site-ft-side{ padding:26px 22px; gap:10px;
  justify-content:center;
  background:color-mix(in srgb, var(--wq-acc) 12%, var(--wq-card)); }
.wq-site-ft.p-aside .wq-site-ft-tel{ font-size:19px; font-weight:700; }
.wq-site-ft.p-aside .wq-site-ft-bot{ margin-top:0; padding:12px 24px 14px; }
.wq-site-ft.p-aside .wq-site-ft-note{ padding:0 24px 14px; }

@media (max-width:760px){
  .wq-site-ft.p-aside .wq-site-ft-in{ grid-template-columns:1fr; }
  .wq-site-ft.p-aside .wq-site-ft-about{ padding:18px 14px; }
  /* Подложка на телефоне из колонки становится полосой во всю ширину —
     так связаться остаётся выделенным действием, а не узкой лентой у края. */
  .wq-site-ft.p-aside .wq-site-ft-side{ padding:16px 14px; }
  .wq-site-ft.p-aside .wq-site-ft-bot{ padding:10px 14px 12px; }
  .wq-site-ft.p-aside .wq-site-ft-note{ padding:0 14px 12px; }
}

/* ── Визитка ─────────────────────────────────────────────────────────── */
.wq-site-ft.p-card{ padding-bottom:20px; }
/* Ширину задаём здесь, ниже правил «Ширины страницы»: вес у селекторов
   одинаковый, решает порядок в файле. Карточка обязана остаться узкой при
   любой ширине страницы — в этом весь вид. */
.wq-site-ft.p-card .wq-site-ft-in{ flex-direction:column; align-items:center;
  text-align:center; gap:10px; max-width:420px; margin-inline:auto;
  padding:26px 24px 16px; border-radius:20px;
  border:1px solid var(--wq-line); background:var(--wq-card);
  box-shadow:var(--wq-shadow,0 14px 46px rgba(20,0,60,.10)); }
.wq-site-ft.p-card .wq-site-ft-col{ align-items:center; }
.wq-site-ft.p-card .wq-site-ft-logo{ height:40px; margin-bottom:2px; }
.wq-site-ft.p-card .wq-site-ft-name{ font-size:18px; letter-spacing:-.01em; }
/* Телефон и почта в строку: столбиком по центру они читаются как список из
   двух пунктов, а это два способа связаться. */
.wq-site-ft.p-card .wq-site-ft-row{ flex-direction:row; flex-wrap:wrap;
  justify-content:center; gap:4px 18px; }
.wq-site-ft.p-card .wq-site-ft-tel{ font-size:17px; font-weight:700; }
.wq-site-ft.p-card .wq-site-ft-adr{ font-size:13px; max-width:34ch; }
.wq-site-ft.p-card .wq-site-ft-soc{ margin-inline:0; }
.wq-site-ft.p-card .wq-site-ft-bot{ flex-direction:column; justify-content:center;
  text-align:center; gap:3px; margin-top:10px; }
.wq-site-ft.p-card .wq-site-ft-note{ padding:8px 24px 0; text-align:center; }

@media (max-width:760px){
  .wq-site-ft.p-card{ padding-bottom:14px; }
  .wq-site-ft.p-card .wq-site-ft-in{ max-width:none; margin-inline:12px;
    padding:20px 16px 14px; gap:8px; }
  /* Телефон с почтой в одну строку на узком экране рвутся посередине. */
  .wq-site-ft.p-card .wq-site-ft-row{ flex-direction:column; gap:3px; }
}

/* ── Полоса значков сверху ───────────────────────────────────────────── */
.wq-site-ft.p-socbar .wq-site-ft-in{ display:grid; align-items:start;
  grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr)); gap:20px 34px;
  padding:22px 24px 14px; }
/* Полоса поверх колонок: order:-1 ставит её первой независимо от того, какие
   колонки собрались, grid-column растягивает на всю сетку. */
.wq-site-ft.p-socbar .wq-site-ft-soc{ grid-column:1/-1; order:-1;
  justify-content:center; gap:14px; margin-inline:0; margin-bottom:4px;
  padding-bottom:18px; border-bottom:1px solid var(--wq-line); }
.wq-site-ft.p-socbar .wq-site-ft-l{ width:38px; height:38px; padding:8px;
  border-radius:50%; color:var(--wq-acc);
  background:color-mix(in srgb, var(--wq-acc) 10%, transparent);
  transition:background .15s, color .15s; }
.wq-site-ft.p-socbar .wq-site-ft-l:hover{ background:var(--wq-acc);
  color:var(--wq-btn-text,#fff); }
.wq-site-ft.p-socbar .wq-site-ft-lead{ gap:8px; }
.wq-site-ft.p-socbar .wq-site-ft-logo{ height:32px; }
.wq-site-ft.p-socbar .wq-site-ft-name{ font-size:17px; letter-spacing:-.01em; }
.wq-site-ft.p-socbar .wq-site-ft-tel{ font-size:18px; font-weight:700; }
.wq-site-ft.p-socbar .wq-site-ft-note{ padding:0 24px 14px; }

@media (max-width:760px){
  .wq-site-ft.p-socbar .wq-site-ft-in{ grid-template-columns:1fr; gap:14px;
    padding:16px 14px 12px; }
  .wq-site-ft.p-socbar .wq-site-ft-soc{ gap:10px; padding-bottom:14px; }
  .wq-site-ft.p-socbar .wq-site-ft-l{ width:34px; height:34px; padding:7px; }
  .wq-site-ft.p-socbar .wq-site-ft-note{ padding:0 14px 12px; }
  .wq-site-ft.p-socbar .wq-site-ft-bot{ flex-direction:column;
    align-items:flex-start; gap:4px; }
}


/* ── Секция-коробка ─────────────────────────────────────────────────────
   Внутрь кладут блоки: заголовок, картинку, кнопку, форму — что угодно и в
   любом порядке. Доля ширины у блока в процентах, поэтому два блока по 50
   встают в ряд сами собой, без «колонок» отдельной настройкой. */
.wq-box{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px; }
.wq-box.at-center{ justify-content:center; }
.wq-box.at-right{ justify-content:flex-end; }
/* ⚠️ Блок по умолчанию занимает строку целиком: иначе два коротких текста
   слипались бы в ряд сами собой, и владелец не понимал бы, откуда колонки. */
.wq-bx{ flex:1 1 100%; min-width:0; }
/* На телефоне ряд разворачивается в столбец: две колонки по 50% дают полосы
   в полтора слова. */
@media (max-width:700px){
  .wq-bx{ flex-basis:100% !important; max-width:100% !important; }
}

/* ==== Обложка: три строя — снимок сбоку, снимок фоном, текст по центру ====
   Первый экран страницы. Виды различаются расположением частей, а не
   раскраской: в одном снимок держит половину ряда, во втором лежит под
   текстом на всю ширину, в третьем снимка нет вовсе. */
.wq-pb-hero{ display:block; }
.wq-pb-hero .tx{ min-width:0; }
.wq-pb-hero h2{ margin:0 0 12px; font-size:38px; line-height:1.12; font-weight:800; color:var(--wq-text); }
.wq-pb-hero p{ margin:0; font-size:17px; line-height:1.55; color:var(--wq-muted); }
.wq-pb-hero .act{ margin-top:22px; }
.wq-pb-hero .pic img{ display:block; width:100%; height:auto; border-radius:var(--wq-radius,18px); }

/* Кнопка обложки — своя, чтобы не переопределять .wq-pb-btn. */
.wq-pb-hero-btn{ display:inline-block; padding:15px 32px; border-radius:var(--wq-btn-radius,var(--wq-radius,12px));
  background:var(--wq-btn,var(--wq-acc)); color:var(--wq-btn-text,#fff);
  font-weight:700; font-size:16px; text-decoration:none; }
.wq-pb-hero-btn.outline{ background:transparent; color:var(--wq-btn,var(--wq-acc));
  border:2px solid var(--wq-btn,var(--wq-acc)); }
.wq-pb-hero-btn.wide{ display:block; text-align:center; }

/* 1. Снимок сбоку: текст и снимок делят ряд. «Справа» меняет их местами —
      снимок уезжает влево, текст вправо. */
.wq-pb-hero.p-side{ display:grid; grid-template-columns:1.05fr 1fr; gap:38px; align-items:center; }
.wq-pb-hero.p-side.at-right .pic{ order:-1; }
.wq-pb-hero.p-side.at-center{ text-align:center; }

/* 2. Снимок фоном во всю ширину: текст лежит поверх, прижат к низу.
      ⚠️ Затемнение обязательно — на светлом снимке заголовок иначе пропадает.
      Белый цвет тут не «своя краска», а тот же приём, что у подписи
      слайдера поверх снимка. */
.wq-pb-hero.p-full{ position:relative; display:flex; align-items:flex-end; min-height:440px;
  padding:44px 40px; border-radius:var(--wq-radius,18px); overflow:hidden; }
.wq-pb-hero.p-full .pic{ position:absolute; inset:0; }
.wq-pb-hero.p-full .pic img{ width:100%; height:100%; object-fit:cover; border-radius:0; }
.wq-pb-hero.p-full .veil{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.72)); }
.wq-pb-hero.p-full .tx{ position:relative; max-width:720px; }
.wq-pb-hero.p-full h2{ font-size:44px; color:#fff; }
.wq-pb-hero.p-full p{ color:#fff; opacity:.9; }
.wq-pb-hero.p-full.at-center{ align-items:center; justify-content:center; text-align:center; }
.wq-pb-hero.p-full.at-right{ justify-content:flex-end; text-align:right; }

/* 3. Текст по центру, без снимка: узкая колонка посередине. */
.wq-pb-hero.p-center{ max-width:760px; margin:0 auto; padding:20px 0; text-align:center; }
.wq-pb-hero.p-center h2{ font-size:42px; }
.wq-pb-hero.p-center p{ max-width:600px; margin:0 auto; font-size:18px; }
.wq-pb-hero.p-center.at-left{ text-align:left; margin-left:0; }
.wq-pb-hero.p-center.at-left p{ margin-left:0; }

@media (max-width:700px){
  /* Ряд разворачивается в столбик: сначала текст, снимок под ним. */
  .wq-pb-hero.p-side{ grid-template-columns:1fr; gap:22px; }
  .wq-pb-hero.p-side.at-right .pic{ order:0; }
  .wq-pb-hero h2,.wq-pb-hero.p-full h2,.wq-pb-hero.p-center h2{ font-size:28px; }
  .wq-pb-hero p,.wq-pb-hero.p-center p{ font-size:16px; }
  .wq-pb-hero .act{ margin-top:16px; }
  .wq-pb-hero-btn{ display:block; text-align:center; }
  .wq-pb-hero.p-full{ min-height:340px; padding:26px 20px; }
}

/* То же по ширине контейнера — для предпросмотра «Телефон» в конструкторе. */
@container (max-width:700px){
  .wq-pb-hero.p-side{ grid-template-columns:1fr; gap:22px; }
  .wq-pb-hero.p-side.at-right .pic{ order:0; }
  .wq-pb-hero h2,.wq-pb-hero.p-full h2,.wq-pb-hero.p-center h2{ font-size:28px; }
  .wq-pb-hero p,.wq-pb-hero.p-center p{ font-size:16px; }
  .wq-pb-hero .act{ margin-top:16px; }
  .wq-pb-hero-btn{ display:block; text-align:center; }
  .wq-pb-hero.p-full{ min-height:340px; padding:26px 20px; }
}
/* ==== Преимущества: три строя — значок сверху, значок слева, крупный номер ====
   Строй меняется целиком: в первом виде выгоды стоят в ряд и значок над
   текстом, во втором — столбиком, значок слева в кружке и черта между
   строками, в третьем значка нет совсем, его место занимает крупный номер. */
.wq-pb-ben{ display:grid; gap:18px; margin:0; padding:0; list-style:none; }
.wq-pb-ben.cols-1{ grid-template-columns:1fr; }
.wq-pb-ben.cols-2{ grid-template-columns:repeat(2,1fr); }
.wq-pb-ben.cols-3{ grid-template-columns:repeat(3,1fr); }
.wq-pb-ben.cols-4{ grid-template-columns:repeat(4,1fr); }
.wq-pb-benit{ display:flex; min-width:0; }
.wq-pb-ben .tx{ display:block; min-width:0; }
.wq-pb-ben .tx b{ display:block; font-size:17px; font-weight:700; color:var(--wq-text); margin-bottom:6px; }
.wq-pb-ben .tx > span{ display:block; font-size:14.5px; line-height:1.55; color:var(--wq-muted); }
.wq-pb-ben .ic{ flex:0 0 auto; width:var(--i,34px); height:var(--i,34px); color:var(--wq-icon,var(--wq-acc)); }
.wq-pb-ben .ic svg{ width:100%; height:100%; display:block; }

/* 1. Значок над текстом, выгоды стоят в ряд. */
.wq-pb-ben.p-row .wq-pb-benit{ flex-direction:column; gap:14px; }
.wq-pb-ben.p-row.at-center .wq-pb-benit{ align-items:center; text-align:center; }
.wq-pb-ben.p-row.at-right .wq-pb-benit{ align-items:flex-end; text-align:right; }

/* 2. Значок слева, строка под строкой, между ними черта.
      ⚠️ Это вид «столбиком»: число в ряд тут не применяем нарочно — две
      колонки строк с чертами превращаются в сетку и вид перестаёт
      отличаться от первого. */
.wq-pb-ben.p-list{ grid-template-columns:1fr; gap:0; }
.wq-pb-ben.p-list .wq-pb-benit{ flex-direction:row; align-items:flex-start; gap:16px;
  padding:18px 0; border-top:1px solid var(--wq-line); }
.wq-pb-ben.p-list .wq-pb-benit:first-child{ border-top:none; padding-top:2px; }
.wq-pb-ben.p-list .ic{ display:grid; place-items:center; width:52px!important; height:52px!important;
  border-radius:50%; background:color-mix(in srgb, var(--wq-acc) 10%, transparent); }
.wq-pb-ben.p-list .ic svg{ width:var(--i,34px); height:var(--i,34px); }

/* 3. Крупный номер вместо значка: цифра слева, текст справа. */
.wq-pb-ben.p-num{ gap:24px 28px; }
.wq-pb-ben.p-num .wq-pb-benit{ flex-direction:row; align-items:flex-start; gap:16px; }
.wq-pb-ben.p-num .no{ flex:0 0 auto; font-size:var(--n,40px); font-weight:800; line-height:.95;
  color:var(--wq-acc); font-variant-numeric:tabular-nums; }
.wq-pb-ben.p-num .tx{ padding-top:4px; }

@media (max-width:700px){
  /* Ряд разворачивается в столбик. */
  .wq-pb-ben.cols-2,.wq-pb-ben.cols-3,.wq-pb-ben.cols-4{ grid-template-columns:1fr; }
  .wq-pb-ben{ gap:16px; }
  .wq-pb-ben.p-row .wq-pb-benit{ gap:10px; }
  .wq-pb-ben .ic{ width:min(var(--i,34px), 44px); height:min(var(--i,34px), 44px); }
  .wq-pb-ben.p-list .ic{ width:44px!important; height:44px!important; }
  .wq-pb-ben.p-num .no{ font-size:min(var(--n,40px), 34px); }
}

@container (max-width:700px){
  .wq-pb-ben.cols-2,.wq-pb-ben.cols-3,.wq-pb-ben.cols-4{ grid-template-columns:1fr; }
  .wq-pb-ben{ gap:16px; }
  .wq-pb-ben.p-row .wq-pb-benit{ gap:10px; }
  .wq-pb-ben .ic{ width:min(var(--i,34px), 13cqw); height:min(var(--i,34px), 13cqw); }
  .wq-pb-ben.p-list .ic{ width:44px!important; height:44px!important; }
  .wq-pb-ben.p-num .no{ font-size:min(var(--n,40px), 11cqw); }
}
/* ==== Цитата: три строя — крупная кавычка, портрет слева, полоса слева ====
   Первый вид ставит части в колонку и открывает её знаком кавычки, второй
   разбивает ряд надвое портретом, третий не украшает ничем: полоса слева,
   а имя и должность идут строкой через тире. */
.wq-pb-quote{ margin:0; display:flex; gap:24px; align-items:flex-start; }
.wq-pb-quote .bd{ flex:1; min-width:0; }
.wq-pb-quote blockquote{ margin:0; font-size:21px; line-height:1.5; font-weight:500; color:var(--wq-text); }
.wq-pb-quote figcaption{ margin-top:16px; font-size:14px; line-height:1.35; color:var(--wq-text); }
.wq-pb-quote figcaption b{ display:block; font-weight:700; }
.wq-pb-quote figcaption span{ display:block; margin-top:2px; color:var(--wq-muted); }
/* ⚠️ Размер портрета жёстко: общее правило картинок секции растягивает
   снимок на всю ширину — на месте кружка выходил широкий прямоугольник.
   Та же беда уже была у аватара в отзывах. */
.wq-pb-quote .face{ display:block; width:96px!important; height:96px!important; flex:0 0 96px;
  border-radius:50%!important; object-fit:cover; margin:0!important; }

/* 1. Крупная кавычка над словами, всё в колонку. */
.wq-pb-quote.p-mark{ flex-direction:column; gap:0; }
.wq-pb-quote.p-mark .mk{ display:block; font-family:Georgia, serif; font-size:76px; line-height:.7;
  color:var(--wq-acc); opacity:.25; margin-bottom:10px; }
.wq-pb-quote.p-mark blockquote{ font-size:24px; }
.wq-pb-quote.p-mark.at-center{ text-align:center; }
.wq-pb-quote.p-mark.at-right{ text-align:right; }

/* 2. Портрет слева, слова справа — на мягкой подложке. */
.wq-pb-quote.p-photo{ align-items:center; background:var(--wq-soft);
  border-radius:var(--wq-radius,18px); padding:26px 28px; }
.wq-pb-quote.p-photo.at-right .face{ order:2; }

/* 3. Полоса слева, без украшений: имя и должность — одной строкой. */
.wq-pb-quote.p-bar{ border-left:3px solid var(--wq-acc); border-radius:0; padding:4px 0 4px 22px; }
.wq-pb-quote.p-bar blockquote{ font-size:19px; }
.wq-pb-quote.p-bar figcaption{ margin-top:12px; font-size:13.5px; color:var(--wq-muted); }
.wq-pb-quote.p-bar figcaption b{ display:inline; color:var(--wq-text); }
.wq-pb-quote.p-bar figcaption span{ display:inline; margin:0; }
.wq-pb-quote.p-bar figcaption span::before{ content:' — '; }

@media (max-width:700px){
  /* Ряд с портретом разворачивается в столбик: снимок сверху, слова под ним. */
  .wq-pb-quote.p-photo{ flex-direction:column; align-items:flex-start; gap:16px; padding:20px; }
  .wq-pb-quote.p-photo.at-right .face{ order:0; }
  .wq-pb-quote .face{ width:72px!important; height:72px!important; flex-basis:72px; }
  .wq-pb-quote blockquote,
  .wq-pb-quote.p-mark blockquote,
  .wq-pb-quote.p-bar blockquote{ font-size:18px; }
  .wq-pb-quote.p-mark .mk{ font-size:54px; }
  .wq-pb-quote.p-bar{ padding-left:16px; }
}

@container (max-width:700px){
  .wq-pb-quote.p-photo{ flex-direction:column; align-items:flex-start; gap:16px; padding:20px; }
  .wq-pb-quote.p-photo.at-right .face{ order:0; }
  .wq-pb-quote .face{ width:72px!important; height:72px!important; flex-basis:72px; }
  .wq-pb-quote blockquote,
  .wq-pb-quote.p-mark blockquote,
  .wq-pb-quote.p-bar blockquote{ font-size:18px; }
  .wq-pb-quote.p-mark .mk{ font-size:54px; }
  .wq-pb-quote.p-bar{ padding-left:16px; }
}
/* ==== Тарифы: три строя ================================================
   Одно и то же предложение показывается карточками в ряд, строками для
   сравнения или одним широким тарифом. Различаются РАСПОЛОЖЕНИЕМ частей:
   где стоит цена, где перечень и где кнопка — а не толщиной рамки. */
.wq-pb-price{ display:grid; gap:16px; }
.wq-pb-price.cols-1{ grid-template-columns:1fr; }
.wq-pb-price.cols-2{ grid-template-columns:repeat(2,1fr); }
.wq-pb-price.cols-3{ grid-template-columns:repeat(3,1fr); }
.wq-pb-price.cols-4{ grid-template-columns:repeat(4,1fr); }
.wq-pb-price.at-center{ text-align:center; }

.wq-pb-plan{ position:relative; min-width:0; display:flex; flex-direction:column; gap:14px; }
.wq-pb-plan .nm{ display:block; font-size:17px; font-weight:800; color:var(--wq-text); line-height:1.25; }
.wq-pb-plan .pr{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin-top:8px; }
.wq-pb-plan .pr b{ font-size:34px; font-weight:800; line-height:1.05; color:var(--wq-acc); }
.wq-pb-plan .pr i{ font-style:normal; font-size:14px; font-weight:600; color:var(--wq-muted); }
/* Перечень «что входит»: галочка рисуется рамкой, без картинок и значков —
   она должна быть у любого владельца, даже если значки он не выбирал. */
.wq-pb-plan .fs{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.wq-pb-plan .fs li{ position:relative; padding-left:24px; font-size:14.5px;
  line-height:1.5; color:var(--wq-muted); overflow-wrap:anywhere; }
.wq-pb-plan .fs li::before{ content:''; position:absolute; left:3px; top:.42em;
  width:9px; height:5px; border-left:2px solid var(--wq-acc); border-bottom:2px solid var(--wq-acc);
  transform:rotate(-45deg); }
.wq-pb-plan .go{ display:inline-block; text-align:center; text-decoration:none;
  font-weight:700; font-size:15px; padding:13px 24px; line-height:1.2;
  border-radius:var(--wq-btn-radius,var(--wq-radius,12px));
  border:2px solid var(--wq-acc); color:var(--wq-acc); background:transparent; }
.wq-pb-plan.hot .go{ background:var(--wq-acc); color:var(--wq-btn-text,#fff); }

/* 1. Карточками: тарифы стоят рядом, части идут сверху вниз —
      название, цена, перечень, кнопка внизу. Кнопки в ряду на одной
      высоте, поэтому перечень тянется, а не кнопка. */
.wq-pb-price.p-price_cards .wq-pb-plan{ background:var(--wq-card);
  border:1.5px solid var(--wq-line); border-radius:var(--wq-radius,18px); padding:24px 22px; }
.wq-pb-price.p-price_cards .fs{ flex:1; align-content:start; }
.wq-pb-price.p-price_cards .ac{ margin-top:auto; }
.wq-pb-price.p-price_cards .go{ display:block; }
.wq-pb-price.p-price_cards .wq-pb-plan.hot{ border-color:var(--wq-acc);
  box-shadow:0 10px 30px rgba(20,0,60,.12); }

/* 2. Сравнением: тариф — СТРОКА. Слева название и цена, посередине перечень
      в несколько столбцов, справа кнопка. Так пять тарифов читаются сверху
      вниз одним взглядом, без прокрутки вбок. */
.wq-pb-price.p-price_rows{ grid-template-columns:1fr; gap:0; background:var(--wq-card);
  border:1.5px solid var(--wq-line); border-radius:var(--wq-radius,18px); overflow:hidden; }
.wq-pb-price.p-price_rows .wq-pb-plan{ display:grid; align-items:center; gap:20px;
  grid-template-columns:minmax(150px,1fr) 2fr auto; padding:20px 22px;
  border-top:1px solid var(--wq-line); }
.wq-pb-price.p-price_rows .wq-pb-plan:first-child{ border-top:none; }
.wq-pb-price.p-price_rows .wq-pb-plan.hot{ background:color-mix(in srgb, var(--wq-acc) 7%, transparent); }
.wq-pb-price.p-price_rows .hd{ min-width:0; }
.wq-pb-price.p-price_rows .pr{ margin-top:4px; }
.wq-pb-price.p-price_rows .pr b{ font-size:24px; }
.wq-pb-price.p-price_rows .fs{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:7px 18px; }
.wq-pb-price.p-price_rows .fs li{ font-size:14px; }
.wq-pb-price.p-price_rows .ac{ justify-self:end; }
.wq-pb-price.p-price_rows .go{ padding:11px 20px; white-space:nowrap; }

/* 3. Один тариф: широкая полоса. Слева название, цена и кнопка, справа
      перечень в две колонки — предложение одно, и место под него есть. */
.wq-pb-price.p-price_one{ grid-template-columns:1fr; }
.wq-pb-price.p-price_one .wq-pb-plan{ display:grid; gap:10px 30px;
  grid-template-columns:minmax(220px,.85fr) 1.15fr; grid-template-rows:auto auto;
  align-items:start; background:var(--wq-card); border:2px solid var(--wq-acc);
  border-radius:var(--wq-radius,20px); padding:30px 28px; }
.wq-pb-price.p-price_one .hd{ grid-column:1; grid-row:1; }
.wq-pb-price.p-price_one .ac{ grid-column:1; grid-row:2; align-self:end; }
.wq-pb-price.p-price_one .pr b{ font-size:42px; }
.wq-pb-price.p-price_one .pr i{ font-size:15px; }
/* Перечень раскладывается на две колонки потоком: строк может быть и три,
   и пятнадцать — сетка на фиксированное число рядов тут бы сломалась. */
.wq-pb-price.p-price_one .fs{ display:block; grid-column:2; grid-row:1 / span 2;
  columns:2; column-gap:26px; }
.wq-pb-price.p-price_one .fs li{ break-inside:avoid; margin:0 0 9px; }
.wq-pb-price.p-price_one .go{ background:var(--wq-acc); color:var(--wq-btn-text,#fff); }

@media (max-width:700px){
  /* Ряд тарифов — в столбик; строка сравнения разворачивается сверху вниз;
     широкий тариф теряет вторую колонку. */
  .wq-pb-price.cols-2,.wq-pb-price.cols-3,.wq-pb-price.cols-4{ grid-template-columns:1fr; }
  .wq-pb-price.p-price_rows .wq-pb-plan{ grid-template-columns:1fr; gap:12px; align-items:start; }
  .wq-pb-price.p-price_rows .ac{ justify-self:stretch; }
  .wq-pb-price.p-price_one .wq-pb-plan{ grid-template-columns:1fr; gap:16px; padding:22px 18px; }
  .wq-pb-price.p-price_one .hd,
  .wq-pb-price.p-price_one .fs,
  .wq-pb-price.p-price_one .ac{ grid-column:1; grid-row:auto; }
  .wq-pb-price.p-price_one .fs{ columns:1; }
  .wq-pb-price.p-price_one .pr b{ font-size:32px; }
  .wq-pb-plan .go{ display:block; }
}

@container (max-width:700px){
  .wq-pb-price.cols-2,.wq-pb-price.cols-3,.wq-pb-price.cols-4{ grid-template-columns:1fr; }
  .wq-pb-price.p-price_rows .wq-pb-plan{ grid-template-columns:1fr; gap:12px; align-items:start; }
  .wq-pb-price.p-price_rows .ac{ justify-self:stretch; }
  .wq-pb-price.p-price_one .wq-pb-plan{ grid-template-columns:1fr; gap:16px; padding:22px 18px; }
  .wq-pb-price.p-price_one .hd,
  .wq-pb-price.p-price_one .fs,
  .wq-pb-price.p-price_one .ac{ grid-column:1; grid-row:auto; }
  .wq-pb-price.p-price_one .fs{ columns:1; }
  .wq-pb-price.p-price_one .pr b{ font-size:32px; }
  .wq-pb-plan .go{ display:block; }
}
/* ==== Шаги работы: три строя ===========================================
   Дорожкой поперёк, лентой сверху вниз или карточками. Меняется не окраска,
   а сам порядок: где номер, куда смотрит связь между этапами и что тянет
   взгляд — стрелка, черта или крупная цифра. */
.wq-pb-steps{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.wq-pb-steps.cols-1{ grid-template-columns:1fr; }
.wq-pb-steps.cols-2{ grid-template-columns:repeat(2,1fr); }
.wq-pb-steps.cols-3{ grid-template-columns:repeat(3,1fr); }
.wq-pb-steps.cols-4{ grid-template-columns:repeat(4,1fr); }

.wq-pb-step{ position:relative; min-width:0; }
.wq-pb-step .no{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--wq-acc); color:var(--wq-btn-text,#fff); font-weight:800; font-size:16px; line-height:1; }
.wq-pb-step .ic{ display:block; width:var(--i,26px); height:var(--i,26px); color:var(--wq-icon,var(--wq-acc)); }
.wq-pb-step .ic svg{ width:100%; height:100%; display:block; }
.wq-pb-step .tx{ display:block; min-width:0; }
.wq-pb-step .tx b{ display:block; font-size:16px; font-weight:700; color:var(--wq-text); margin-bottom:5px; }
.wq-pb-step .tx > span{ display:block; font-size:14px; line-height:1.55; color:var(--wq-muted); }

/* 1. Дорожка: этапы идут поперёк, между ними стрелка. Номер — веха под
      значком, подпись под номером. */
.wq-pb-steps.p-steps_road{ gap:28px; align-items:start; }
.wq-pb-steps.p-steps_road .wq-pb-step{ display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:10px; }
.wq-pb-steps.p-steps_road .ic{ order:-1; }
/* Стрелка живёт в промежутке между этапами, поэтому её ширина завязана на
   `gap`: 28px промежуток, 14px уголок — отступ ровно посередине. */
.wq-pb-steps.p-steps_road .wq-pb-step + .wq-pb-step::before{ content:''; position:absolute;
  left:-21px; top:19px; width:13px; height:13px;
  border-top:2px solid var(--wq-line); border-right:2px solid var(--wq-line);
  transform:rotate(45deg); }
.wq-pb-steps.p-steps_road .tx b{ margin-bottom:4px; }

/* 2. Лента: этапы сверху вниз, слева черта соединяет кружки. Такой вид
      держит длинные пояснения — ширина строки не режется на колонки. */
.wq-pb-steps.p-steps_line{ grid-template-columns:1fr; gap:0; }
.wq-pb-steps.p-steps_line .wq-pb-step{ display:grid; grid-template-columns:42px 1fr;
  gap:4px 18px; padding-bottom:26px; }
.wq-pb-steps.p-steps_line .wq-pb-step:last-child{ padding-bottom:0; }
/* Черта тянется от кружка до следующего; у последнего этапа её нет — иначе
   лента обрывается в пустоту. */
.wq-pb-steps.p-steps_line .wq-pb-step::before{ content:''; position:absolute;
  left:20px; top:50px; bottom:-6px; width:2px; background:var(--wq-line); }
.wq-pb-steps.p-steps_line .wq-pb-step:last-child::before{ display:none; }
.wq-pb-steps.p-steps_line .no{ grid-column:1; grid-row:1 / span 2; }
.wq-pb-steps.p-steps_line .ic{ grid-column:2; grid-row:1; margin-bottom:8px; }
.wq-pb-steps.p-steps_line .tx{ grid-column:2; padding-top:4px; }

/* 3. Карточками: крупный номер в углу — как в оглавлении. Значок сверху,
      подпись слева, всё на подложке. */
.wq-pb-steps.p-steps_cards{ gap:16px; }
.wq-pb-steps.p-steps_cards .wq-pb-step{ background:var(--wq-card); border:1.5px solid var(--wq-line);
  border-radius:var(--wq-radius,18px); padding:24px 22px 22px; overflow:hidden; }
.wq-pb-steps.p-steps_cards .no{ position:absolute; top:6px; right:16px;
  width:auto; height:auto; background:none; border-radius:0; color:var(--wq-acc);
  opacity:.2; font-size:56px; font-weight:800; line-height:1; }
.wq-pb-steps.p-steps_cards .ic{ margin-bottom:14px; }
.wq-pb-steps.p-steps_cards .tx b{ font-size:17px; }

@media (max-width:700px){
  /* Дорожка становится столбиком, а стрелка разворачивается вниз — иначе
     она указывала бы в край экрана. */
  .wq-pb-steps.cols-2,.wq-pb-steps.cols-3,.wq-pb-steps.cols-4{ grid-template-columns:1fr; }
  .wq-pb-steps.p-steps_road{ gap:30px; }
  .wq-pb-steps.p-steps_road .wq-pb-step + .wq-pb-step::before{ left:50%; top:-22px;
    transform:translateX(-50%) rotate(135deg); }
  .wq-pb-steps.p-steps_cards .no{ font-size:44px; }
  .wq-pb-step .ic{ width:min(var(--i,26px), 13vw); height:min(var(--i,26px), 13vw); }
}

@container (max-width:700px){
  .wq-pb-steps.cols-2,.wq-pb-steps.cols-3,.wq-pb-steps.cols-4{ grid-template-columns:1fr; }
  .wq-pb-steps.p-steps_road{ gap:30px; }
  .wq-pb-steps.p-steps_road .wq-pb-step + .wq-pb-step::before{ left:50%; top:-22px;
    transform:translateX(-50%) rotate(135deg); }
  .wq-pb-steps.p-steps_cards .no{ font-size:44px; }
  .wq-pb-step .ic{ width:min(var(--i,26px), 13cqw); height:min(var(--i,26px), 13cqw); }
}
/* ==== Команда: три строя ===============================================
   Кружками в ряд («о нас» на лендинге), карточками с портретом во всю
   ширину («наши мастера») и списком строк («двадцать человек, а не четыре»).
   Различие в форме и месте снимка, а не в цвете подписи. */
.wq-pb-team{ display:grid; gap:20px; }
.wq-pb-team.cols-1{ grid-template-columns:1fr; }
.wq-pb-team.cols-2{ grid-template-columns:repeat(2,1fr); }
.wq-pb-team.cols-3{ grid-template-columns:repeat(3,1fr); }
.wq-pb-team.cols-4{ grid-template-columns:repeat(4,1fr); }
.wq-pb-team.at-center{ text-align:center; }

.wq-pb-mate{ display:block; min-width:0; text-decoration:none; color:inherit; }
.wq-pb-mate .pic{ display:block; overflow:hidden; background:var(--wq-soft); flex:0 0 auto; }
/* ⚠️ Размер снимка задаём жёстко: общее правило картинок секции растягивает
   картинку на всю ширину, и вместо кружка выходил овал во весь блок —
   ровно та же беда, что была у аватара в отзывах. */
.wq-pb-mate .pic img{ display:block; width:100%!important; height:100%!important;
  object-fit:cover; margin:0!important; border-radius:0; }
.wq-pb-mate .tx{ display:block; min-width:0; }
.wq-pb-mate .tx b{ display:block; font-size:16px; font-weight:700; color:var(--wq-text); line-height:1.3; }
.wq-pb-mate .rl{ display:block; margin-top:3px; font-size:13.5px; font-weight:600; color:var(--wq-acc); }
.wq-pb-mate .ab{ display:block; margin-top:8px; font-size:14px; line-height:1.55; color:var(--wq-muted); }

/* 1. Кружками: портреты в ряд, подпись по центру под снимком. */
.wq-pb-team.p-team_round .wq-pb-mate{ display:flex; flex-direction:column;
  align-items:center; text-align:center; }
.wq-pb-team.p-team_round .pic{ width:132px; height:132px; border-radius:50%; margin-bottom:14px;
  border:3px solid color-mix(in srgb, var(--wq-acc) 22%, transparent); }
.wq-pb-team.p-team_round .ab{ max-width:300px; }

/* 2. Карточками: прямоугольный портрет во всю ширину карточки, подписи под
      ним на подложке. Снимок здесь главный — под него отдана вся верхушка. */
.wq-pb-team.p-team_cards{ gap:16px; }
.wq-pb-team.p-team_cards .wq-pb-mate{ display:flex; flex-direction:column; height:100%;
  background:var(--wq-card); border:1.5px solid var(--wq-line);
  border-radius:var(--wq-radius,18px); overflow:hidden; }
.wq-pb-team.p-team_cards .pic{ width:100%; aspect-ratio:3/4; }
.wq-pb-team.p-team_cards .tx{ padding:16px 18px 18px; }

/* 3. Списком: строка на человека — маленький снимок слева, справа имя,
      должность и пара слов. Так на экран помещается вся команда. */
.wq-pb-team.p-team_list{ grid-template-columns:1fr; gap:0; }
.wq-pb-team.p-team_list .wq-pb-mate{ display:grid; grid-template-columns:auto 1fr;
  align-items:center; gap:16px; padding:16px 0; border-top:1px solid var(--wq-line); }
.wq-pb-team.p-team_list .wq-pb-mate:first-child{ border-top:none; padding-top:0; }
.wq-pb-team.p-team_list .pic{ width:64px; height:64px; border-radius:var(--wq-radius,14px); }
.wq-pb-team.p-team_list .ab{ margin-top:4px; }
.wq-pb-team.p-team_list.at-center{ text-align:left; }

@media (max-width:700px){
  /* Ряд лиц — в столбик; портрет в карточке становится пошире, чтобы
     человек не занимал полтора экрана. */
  .wq-pb-team.cols-2,.wq-pb-team.cols-3,.wq-pb-team.cols-4{ grid-template-columns:1fr; }
  .wq-pb-team.p-team_round .pic{ width:104px; height:104px; }
  .wq-pb-team.p-team_cards .pic{ aspect-ratio:4/3; }
  .wq-pb-team.p-team_list .pic{ width:52px; height:52px; }
  .wq-pb-team.p-team_list .wq-pb-mate{ gap:12px; }
}

@container (max-width:700px){
  .wq-pb-team.cols-2,.wq-pb-team.cols-3,.wq-pb-team.cols-4{ grid-template-columns:1fr; }
  .wq-pb-team.p-team_round .pic{ width:104px; height:104px; }
  .wq-pb-team.p-team_cards .pic{ aspect-ratio:4/3; }
  .wq-pb-team.p-team_list .pic{ width:52px; height:52px; }
  .wq-pb-team.p-team_list .wq-pb-mate{ gap:12px; }
}
/* ==== Партнёры: сеткой, лентой, плитками ==============================
   Три разных строя, а не три раскраски: ровные клетки в несколько рядов,
   один едущий ряд и крупные карточки с названием под знаком. */
.wq-pb-part{ display:grid; gap:14px; align-items:center; --wq-part-h:46px; }
.wq-pb-part.cols-2{ grid-template-columns:repeat(2,1fr); }
.wq-pb-part.cols-3{ grid-template-columns:repeat(3,1fr); }
.wq-pb-part.cols-4{ grid-template-columns:repeat(4,1fr); }
.wq-pb-part.cols-5{ grid-template-columns:repeat(5,1fr); }
.wq-pb-part.cols-6{ grid-template-columns:repeat(6,1fr); }
.wq-pb-part.at-center{ justify-items:center; }
.wq-pb-part.at-right{ justify-items:end; }

.wq-pb-part-i{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; min-width:0; text-decoration:none; color:var(--wq-text); }
.wq-pb-part-i img{ display:block; width:auto; max-width:100%;
  height:var(--wq-part-h,46px); object-fit:contain; }
/* Название партнёра. Подпись под знаком нужна не всякому виду. */
.wq-pb-part-i .nm{ font-size:13px; line-height:1.3; color:var(--wq-muted); text-align:center; }
/* Знака нет — название встаёт вместо него и видно всегда. */
.wq-pb-part-nm{ font-size:16px; font-weight:700; color:var(--wq-text); text-align:center; }

/* 1. Сеткой: ровные клетки на мягкой подложке, только знаки. */
.wq-pb-part.p-part_grid .wq-pb-part-i{ padding:16px 12px; border-radius:var(--wq-radius,14px);
  background:var(--wq-soft); width:100%; box-sizing:border-box; }
.wq-pb-part.p-part_grid .nm{ display:none; }

/* 2. Лентой: один ряд, едет сам, останавливается под курсором.
   Полоса повторена дважды и сдвигается на свою ширину — конец сходится
   с началом. Края растворяются, чтобы знаки не обрубались рамкой. */
.wq-pb-part.p-part_line{ display:flex; overflow:hidden; gap:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.wq-pb-part-run{ display:flex; align-items:center; gap:46px; padding-right:46px;
  flex:0 0 auto; animation:wq-part-run 28s linear infinite; }
.wq-pb-part.p-part_line .wq-pb-part-i{ flex:0 0 auto; }
.wq-pb-part.p-part_line .nm{ display:none; }
.wq-pb-part.p-part_line:hover .wq-pb-part-run{ animation-play-state:paused; }
@keyframes wq-part-run{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
/* Кому движение мешает — ряд стоит и листается пальцем. */
@media (prefers-reduced-motion:reduce){
  .wq-pb-part-run{ animation:none; }
  .wq-pb-part.p-part_line{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* 3. Плитками: карточка с рамкой, крупный знак и название под ним. */
.wq-pb-part.p-part_tiles{ gap:16px; }
.wq-pb-part.p-part_tiles .wq-pb-part-i{ gap:14px; padding:28px 18px; width:100%; box-sizing:border-box;
  background:var(--wq-card); border:1.5px solid var(--wq-line); border-radius:var(--wq-radius,16px);
  transition:border-color .15s; }
.wq-pb-part.p-part_tiles .wq-pb-part-i img{ height:calc(var(--wq-part-h,46px) * 1.7); }
.wq-pb-part.p-part_tiles .nm{ font-size:15px; font-weight:700; color:var(--wq-text); }
.wq-pb-part.p-part_tiles a.wq-pb-part-i:hover{ border-color:var(--wq-acc); }

@media (max-width:700px){
  /* Ряды разворачиваются: сетка — по два знака, плитки — столбиком. */
  .wq-pb-part.cols-3,.wq-pb-part.cols-4,
  .wq-pb-part.cols-5,.wq-pb-part.cols-6{ grid-template-columns:repeat(2,1fr); }
  .wq-pb-part.p-part_tiles.cols-2,.wq-pb-part.p-part_tiles.cols-3,
  .wq-pb-part.p-part_tiles.cols-4,.wq-pb-part.p-part_tiles.cols-5,
  .wq-pb-part.p-part_tiles.cols-6{ grid-template-columns:1fr; }
  .wq-pb-part{ --wq-part-h:38px; }
  .wq-pb-part-run{ gap:30px; padding-right:30px; }
}
/* ==== Акция со сроком: полосой, карточкой с часами сбоку, крупными часами
   Разметка одна, а строй у видов разный: ряд во всю ширину, карточка с
   часами сбоку за чертой и столбик с крупным циферблатом по центру. */
.wq-pb-promo{ display:flex; align-items:center; flex-wrap:wrap; gap:22px; }
.wq-pb-promo.at-center{ justify-content:center; text-align:center; }
.wq-pb-promo.at-right{ justify-content:flex-end; }
.wq-pb-promo-tx{ flex:1 1 240px; min-width:0; }
.wq-pb-promo-tx .tt{ font-size:22px; font-weight:800; line-height:1.25; color:var(--wq-text); }
.wq-pb-promo-tx .tt p{ margin:0; }
.wq-pb-promo-tx .sb{ display:block; margin-top:6px; font-size:15px; line-height:1.5; color:var(--wq-muted); }

/* Часы. До оживления показывают нули, поэтому ширина ячейки не пляшет. */
.wq-pb-promo-t{ display:flex; align-items:stretch; gap:16px; flex:0 0 auto; }
.wq-pb-promo-t .u{ position:relative; display:flex; align-items:center; justify-content:center;
  min-width:58px; padding:12px 10px; box-sizing:border-box;
  background:var(--wq-card); border:1.5px solid var(--wq-line); border-radius:var(--wq-radius,12px); }
.wq-pb-promo-t .u b{ font-size:26px; font-weight:800; line-height:1; color:var(--wq-text);
  font-variant-numeric:tabular-nums; }
/* Двоеточие между ячейками — вместо подписей: слова пришлось бы переводить,
   а поля для них у секции нет. Часы читаются на любом языке. */
.wq-pb-promo-t .u + .u::before{ content:':'; position:absolute; left:-11px; top:50%;
  transform:translateY(-50%); font-size:20px; font-weight:800; color:var(--wq-muted); }

.wq-pb-promo-a{ flex:0 0 auto; }
.wq-pb-promo-b{ display:inline-block; padding:15px 30px; font-size:16px; font-weight:700;
  text-decoration:none; white-space:nowrap; border-radius:var(--wq-btn-radius,var(--wq-radius,12px));
  background:var(--wq-btn,var(--wq-acc)); color:var(--wq-btn-text,#fff); }

/* 1. Полосой: всё в один ряд на подложке — узкая лента над содержимым. */
.wq-pb-promo.p-promo_bar{ background:color-mix(in srgb, var(--wq-acc) 10%, transparent);
  border-radius:var(--wq-radius,18px); padding:18px 22px; gap:18px; }
.wq-pb-promo.p-promo_bar .wq-pb-promo-tx .tt{ font-size:19px; }
.wq-pb-promo.p-promo_bar .wq-pb-promo-t .u{ min-width:48px; padding:8px; }
.wq-pb-promo.p-promo_bar .wq-pb-promo-t .u b{ font-size:20px; }
.wq-pb-promo.p-promo_bar .wq-pb-promo-b{ padding:12px 24px; }

/* 2. Карточкой: слева текст и кнопка, справа часы столбиком за чертой. */
.wq-pb-promo.p-promo_card{ flex-wrap:nowrap; align-items:stretch; gap:28px; padding:26px;
  background:var(--wq-card); border:1.5px solid var(--wq-line);
  border-radius:var(--wq-radius,20px); box-shadow:0 6px 24px rgba(20,0,60,.07); }
.wq-pb-promo.p-promo_card .wq-pb-promo-tx{ display:flex; flex-direction:column; justify-content:center;
  flex:1 1 auto; order:1; }
.wq-pb-promo.p-promo_card .wq-pb-promo-a{ order:2; align-self:center; }
.wq-pb-promo.p-promo_card .wq-pb-promo-t{ order:3; flex-direction:column; justify-content:center;
  gap:10px; padding-left:28px; border-left:1px solid var(--wq-line); }
.wq-pb-promo.p-promo_card .wq-pb-promo-t .u{ min-width:84px; background:var(--wq-soft); border:none; }
.wq-pb-promo.p-promo_card .wq-pb-promo-t .u + .u::before{ content:none; }

/* 3. Крупными часами: столбик по центру, циферблат — главное на экране. */
.wq-pb-promo.p-promo_big{ flex-direction:column; align-items:center; text-align:center; gap:20px; }
.wq-pb-promo.p-promo_big .wq-pb-promo-tx{ flex:0 0 auto; }
.wq-pb-promo.p-promo_big .wq-pb-promo-tx .tt{ font-size:28px; }
.wq-pb-promo.p-promo_big .wq-pb-promo-t{ gap:14px; }
.wq-pb-promo.p-promo_big .wq-pb-promo-t .u{ min-width:96px; padding:20px 14px;
  background:var(--wq-soft); border:none; }
.wq-pb-promo.p-promo_big .wq-pb-promo-t .u b{ font-size:clamp(30px, 7vw, 52px); }
.wq-pb-promo.p-promo_big .wq-pb-promo-t .u + .u::before{ content:none; }

@media (max-width:700px){
  /* Ряд разворачивается в столбец: текст, часы, кнопка во всю ширину. */
  .wq-pb-promo{ flex-direction:column; align-items:stretch; gap:16px; text-align:center; }
  .wq-pb-promo.p-promo_card{ flex-wrap:wrap; padding:20px; gap:16px; }
  .wq-pb-promo.p-promo_card .wq-pb-promo-t{ order:2; flex-direction:row; justify-content:center;
    padding:16px 0 0; border-left:none; border-top:1px solid var(--wq-line); }
  .wq-pb-promo.p-promo_card .wq-pb-promo-a{ order:3; align-self:stretch; }
  .wq-pb-promo-t{ justify-content:center; flex-wrap:wrap; gap:12px; }
  .wq-pb-promo-t .u{ flex:1 1 0; min-width:0; }
  .wq-pb-promo-t .u + .u::before{ content:none; }
  .wq-pb-promo-b{ display:block; text-align:center; }
  .wq-pb-promo.p-promo_big .wq-pb-promo-t .u{ min-width:0; padding:14px 8px; }
}
/* ==== Каталог товаров: карточками, списком, витриной =================
   Строй у видов разный: снимок сверху в сетке, снимок слева в строке и
   крупная витрина по два в ряд с ценой в отдельном подвале. */
.wq-pb-cat{ display:grid; gap:16px; }
.wq-pb-cat.cols-1{ grid-template-columns:1fr; }
.wq-pb-cat.cols-2{ grid-template-columns:repeat(2,1fr); }
.wq-pb-cat.cols-3{ grid-template-columns:repeat(3,1fr); }
.wq-pb-cat.cols-4{ grid-template-columns:repeat(4,1fr); }
.wq-pb-cat.at-center{ text-align:center; }
.wq-pb-cat.at-right{ text-align:right; }

.wq-pb-cat-i{ display:flex; flex-direction:column; gap:12px; min-width:0; height:100%;
  box-sizing:border-box; padding:14px; background:var(--wq-card);
  border:1.5px solid var(--wq-line); border-radius:var(--wq-radius,16px); }
.wq-pb-cat-i .pic{ display:block; width:100%; }
.wq-pb-cat-i .pic img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--wq-radius,12px); }
.wq-pb-cat-i .pic.empty{ aspect-ratio:4/3; background:var(--wq-soft); border-radius:var(--wq-radius,12px); }
.wq-pb-cat-i .tx{ display:block; min-width:0; }
.wq-pb-cat-i .tx b{ display:block; font-size:16px; font-weight:700; line-height:1.3; color:var(--wq-text); }
.wq-pb-cat-i .ds{ display:block; margin-top:6px; font-size:14px; line-height:1.5; color:var(--wq-muted); }
/* Подвал карточки: цена и кнопка. Прижат к низу — карточки в ряду ровные
   независимо от длины описания. */
.wq-pb-cat-i .bt{ display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; margin-top:auto; }
.wq-pb-cat-i .pr{ display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; }
.wq-pb-cat-i .pr b{ font-size:19px; font-weight:800; color:var(--wq-text); }
.wq-pb-cat-i .pr i{ font-style:normal; font-size:.72em; color:var(--wq-muted); }
.wq-pb-cat-i .buy{ display:inline-block; padding:11px 18px; font-size:15px; font-weight:700;
  text-decoration:none; white-space:nowrap; border-radius:var(--wq-btn-radius,var(--wq-radius,12px));
  background:var(--wq-btn,var(--wq-acc)); color:var(--wq-btn-text,#fff); }
.wq-pb-cat-i .buy.wide{ flex:1 0 100%; text-align:center; }

/* 1. Карточки сеткой — строй задан правилами выше. */

/* 2. Списком: строка на всю ширину, снимок слева, цена и кнопка справа. */
.wq-pb-cat.p-cat_row{ gap:12px; }
.wq-pb-cat.p-cat_row .wq-pb-cat-i{ flex-direction:row; align-items:center; gap:18px;
  height:auto; padding:14px 18px; }
.wq-pb-cat.p-cat_row .pic{ flex:0 0 150px; width:150px; }
.wq-pb-cat.p-cat_row .pic img,.wq-pb-cat.p-cat_row .pic.empty{ aspect-ratio:1/1; }
.wq-pb-cat.p-cat_row .tx{ flex:1 1 auto; }
.wq-pb-cat.p-cat_row .bt{ flex:0 0 auto; flex-direction:column; align-items:flex-end;
  gap:10px; margin:0; }
.wq-pb-cat.p-cat_row .buy.wide{ flex:0 0 auto; }

/* 3. Витрина: по два в ряд, снимок во всю карточку, цена в подвале. */
.wq-pb-cat.p-cat_show{ gap:24px; }
.wq-pb-cat.p-cat_show .wq-pb-cat-i{ gap:0; padding:0; overflow:hidden; }
.wq-pb-cat.p-cat_show .pic img,.wq-pb-cat.p-cat_show .pic.empty{ aspect-ratio:16/10; border-radius:0; }
.wq-pb-cat.p-cat_show .tx{ padding:22px 24px 10px; }
.wq-pb-cat.p-cat_show .tx b{ font-size:20px; }
.wq-pb-cat.p-cat_show .ds{ font-size:15px; }
.wq-pb-cat.p-cat_show .bt{ padding:16px 24px 20px; border-top:1px solid var(--wq-line);
  background:var(--wq-soft); }
.wq-pb-cat.p-cat_show .pr b{ font-size:23px; }

@media (max-width:700px){
  /* Сетка и витрина — в один столбец, строка разворачивается: снимок
     сверху, под ним название, цена и кнопка во всю ширину. */
  .wq-pb-cat.cols-2,.wq-pb-cat.cols-3,.wq-pb-cat.cols-4{ grid-template-columns:1fr; }
  .wq-pb-cat.p-cat_row .wq-pb-cat-i{ flex-direction:column; align-items:stretch; gap:12px; padding:14px; }
  .wq-pb-cat.p-cat_row .pic{ flex:0 0 auto; width:100%; }
  .wq-pb-cat.p-cat_row .pic img,.wq-pb-cat.p-cat_row .pic.empty{ aspect-ratio:4/3; }
  .wq-pb-cat.p-cat_row .bt{ flex-direction:row; align-items:center; justify-content:space-between; }
  .wq-pb-cat-i .buy{ text-align:center; }
}

/* Пустое место секции — ТОЛЬКО в конструкторе (см. previewMode в виджете).
   На живом сайте незаполненная секция не рисуется вовсе. */
.wq-pb-hint{ min-height:64px; border:1.5px dashed var(--wq-line); border-radius:10px; opacity:.7; }

/* Выключенная секция В КОНСТРУКТОРЕ — свёрнутая полоска: видно, что она есть
   и её можно вернуть. На живом сайте её нет вовсе (см. previewMode). */
.wq-pb-offed{ min-height:12px; height:12px; padding:0 !important; margin:0 0 6px !important;
  border:1px dashed var(--wq-line); border-radius:6px;
  background:repeating-linear-gradient(45deg, transparent, transparent 5px,
    rgba(148,163,184,.16) 5px, rgba(148,163,184,.16) 10px); opacity:.8; }
.wq-pb-offed .wq-pb-in{ min-height:0 !important; height:12px; padding:0 !important; }