/*
Theme Name: Дулито
Theme URI: https://dulito.ru
Description: Дочерняя тема Astra для нового сайта dulito.ru. Главная собрана 1:1 из Figma. Услуги/цены — ACF + CPT.
Author: Дулито CEO
Template: astra
Version: 0.2.66
Text Domain: dulito
*/

/* ============================================================
   ШРИФТЫ — оригиналы из Figma (оба SIL OFL), локально.
   NT Somic — основной гротеск. Gogol — рукописный для «с доставкой».
   ============================================================ */
@font-face {
  font-family: 'Gogol';
  src: url('assets/fonts/Gogol.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NT Somic';
  src: url('assets/fonts/NTSomic-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NT Somic';
  src: url('assets/fonts/NTSomic-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NT Somic';
  src: url('assets/fonts/NTSomic-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NT Somic';
  src: url('assets/fonts/NTSomic-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   ДИЗАЙН-ТОКЕНЫ (из Figma fig-tokens.css)
   ============================================================ */
:root {
  /* базовая палитра */
  --colors-base-white: #ffffff;
  --colors-base-black: #000000;
  --colors-orange-050: #fff3ed;
  --colors-orange-400: #ff602c;
  --colors-orange-500: #fe4211;
  --colors-orange-600: #ef2807;
  --colors-indigo-050: #eef2ff;
  --colors-indigo-100: #e0e7ff;
  --colors-indigo-200: #c6d2ff;
  --colors-indigo-300: #a3b3ff;
  --colors-indigo-400: #7c86ff;
  --colors-indigo-500: #615fff;
  --colors-indigo-600: #4f39f6;
  --colors-indigo-700: #432dd7;
  --colors-indigo-800: #372aac;
  --colors-indigo-900: #312c85;
  --colors-indigo-950: #1e1a4d;
  --colors-neutral-050: #fafafa;
  --colors-neutral-100: #f4f4f5;
  --colors-neutral-200: #e4e4e7;
  --colors-neutral-300: #d4d4d8;
  --colors-neutral-400: #9f9fa9;
  --colors-neutral-500: #71717b;
  --colors-neutral-900: #18181b;
  --colors-neutral-950: #09090b;
  --colors-yellow-500: #fdc700;

  /* семантические */
  --background-primary: var(--colors-base-white);
  --background-secondary: var(--colors-neutral-100);
  --background-orange: var(--colors-orange-400);
  --background-tonal-indigo: var(--colors-indigo-050);
  --background-tonal-orange: var(--colors-orange-050);
  --control-primary-active: var(--colors-orange-400);
  --control-secondary-active: rgba(212, 212, 216, 0.30);
  --text-primary: var(--colors-neutral-950);
  --text-secondary: var(--colors-neutral-500);
  --text-tertiary: var(--colors-neutral-400);
  --text-white: var(--colors-base-white);
  --text-accent-1: var(--colors-orange-400);
  --text-accent-2: var(--colors-indigo-500);
  --icon-primary: var(--colors-neutral-950);
  --icon-secondary: var(--colors-neutral-500);
  --icon-orange: var(--colors-orange-400);
  --icon-rate: var(--colors-yellow-500);
  --icon-white: var(--colors-base-white);

  /* фирменный градиент карточек/hero */
  --gradient-card: linear-gradient(0deg, #c4b4ff 0%, #4f39f6 100%);

  --font-main: 'NT Somic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Gogol', 'Caveat', cursive;
  --container: 1180px;

  /* фирменный угол-капля: левый-верхний срезан */
  --radius-block: 0 20px 20px 20px;
  --radius-btn: 0 12px 12px 12px;
  --radius-form: 0 16px 16px 16px;
}

/* ============================================================
   СБРОС / БАЗА
   ============================================================ */
.dl * { box-sizing: border-box; }
/* Декор (dl-d 912px, фото hero) торчит за экран → мобильные браузеры растягивают
   layout-вьюпорт (страница «шире телефона», правый край уезжает). Подрезаем. */
html, body { overflow-x: clip; }
body, body.ast-separate-container { background: var(--background-primary); } /* перебиваем голубо-серый фон Astra (#f0f5fa) — не из палитры */

.dl [id] { scroll-margin-top: 24px; }   /* отступ при переходе по якорю */
.dl {
  font-family: var(--font-main);
  color: var(--text-primary);
  line-height: 1.3;
  background: var(--background-primary);
}
.dl img { max-width: 100%; display: block; }
/* honeypot — скрыто от людей, видно ботам (заполнят → отсев) */
.dl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dl a { text-decoration: none; color: inherit; }
/* Сброс Astra-margin у типографики. :where() = нулевая специфичность,
   чтобы наши классы (.dl-process__title и т.п.) могли задать margin-bottom без борьбы. */
.dl :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure) { margin: 0; padding: 0; }
/* Astra красит ЛЮБУЮ button :focus/:hover/:active в синий (--ast-global-color) и оставляет
   «прилипший» фон после клика. Глобально гасим: наши кнопки не наследуют Astra-фон/outline.
   Конкретный фон каждой кнопки задаёт её собственный класс (.dl-btn, .dl-tab, .dl-arrow…). */
.dl button:focus, .dl button:focus-visible, .dl button:active { outline: none; }
.dl button:not([class*="dl-btn"]):not(.dl-tab):not(.dl-arrow):focus,
.dl button:not([class*="dl-btn"]):not(.dl-tab):not(.dl-arrow):hover { background-color: inherit; }
/* SVG-иконки: перебиваем Astra svg{width:.65em; transform:...; fill:...} */
.dl .dl-ico {
  width: 24px; height: 24px;
  transform: none; margin: 0; top: auto;
  display: inline-block; flex: none; vertical-align: middle;
}
.dl-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* ============================================================
   КНОПКИ (DRY — один .dl-btn, варианты модификаторами)
   ============================================================ */
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  transition: background .15s ease, color .15s ease;
}
.dl a.dl-btn--primary,
.dl-btn--primary { background: var(--control-primary-active); color: var(--text-white); }
.dl-btn--primary:hover { background: var(--colors-orange-500); }
.dl-btn--secondary { background: var(--control-secondary-active); color: var(--icon-primary); }
.dl-btn--secondary:hover { background: var(--colors-neutral-200); }   /* кнопка только с иконкой 24px → 48×48 */
.dl-btn .dl-ico { width: 24px; height: 24px; flex: none; }

/* ============================================================
   ШАПКА
   ============================================================ */
/* ТОПБАР — Frame 96: фон white, border-bottom 1px #F4F4F5, padding 6px 10px */
.dl-topbar {
  background: var(--background-primary);
  border-bottom: 1px solid var(--colors-neutral-100);
  padding: 6px 10px;
}.dl-topbar .dl-container,
.dl-header .dl-container,
.dl-service__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}.dl-topbar__group,
.dl-header__actions,
/* Нав — Frame 83: gap 20px,
ссылки 16px/400/#09090B */
.dl-nav { display: flex; align-items: center; gap: 20px; }
/* единый стиль всего топбара: и ссылки, и кнопка-триггер города — один в один */
.dl-topbar a,
.dl .dl-topbar .dl-citypick__trigger {
  padding: 8px 0;
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  letter-spacing: normal !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
}
.dl-topbar a:hover,
.dl .dl-topbar .dl-citypick__trigger:hover { color: var(--text-primary) !important; }
/* город — тем же шрифтом, но со штриховым подчёркиванием (признак выбора) */
.dl .dl-topbar .dl-citypick__trigger {
  text-decoration: underline dotted !important;
  text-underline-offset: 3px !important;
}

/* ВЫБОР ГОРОДА — dropdown 4 колонки */
.dl-citypick { position: relative; }
.dl .dl-citypick__trigger {
  background: none; border: none; cursor: pointer; padding: 8px 0;
  font-family: var(--font-main); font-size: 14px; font-weight: 400; line-height: 18px;
  color: var(--text-secondary);
  text-decoration: underline dotted; text-underline-offset: 2px;
  box-shadow: none; outline: none;
}
/* перебиваем Astra button:hover/:focus (синий фон) на триггере */
.dl .dl-citypick__trigger:hover,
.dl .dl-citypick__trigger:focus {
  background: none; color: var(--text-primary); box-shadow: none; outline: none;
}
/* общий каркас дропдауна (города + услуги) — различия ниже у каждого */
.dl-citypick__menu,
.dl-servicepick__menu {
  position: absolute; left: 0; top: 100%; z-index: 100;
  padding: 24px;
  background: var(--background-primary);
  border: 1px solid var(--colors-neutral-200);
  border-radius: 0 16px 16px 16px;
  box-shadow: 0 12px 40px rgba(9,9,11,0.10);
  display: grid; gap: 24px;
}
.dl-citypick__menu { margin-top: 8px; grid-template-columns: repeat(4, minmax(160px, 1fr)); min-width: 720px; }
.dl-citypick__menu[hidden],
.dl-servicepick__menu[hidden] { display: none; }
/* общий заголовок колонки дропдауна */
.dl-citypick__head,
.dl .dl-servicepick__head {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.48px;
  color: var(--text-tertiary); margin-bottom: 12px;
}.dl-citypick__col ul,
.dl-servicepick__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* общий пункт дропдауна (кнопка города / ссылка услуги) */
.dl .dl-citypick__item,
.dl .dl-servicepick__item {
  padding: 8px 12px;            /* боковые отступы, чтобы текст не прилипал */
  display: block;
  border-radius: 0 8px 8px 8px;
  font-family: var(--font-main); font-size: 16px; font-weight: 400; line-height: 20px;
  color: var(--text-primary);
  transition: background .12s ease, color .12s ease;
}
.dl .dl-citypick__item {
  background: none; border: none; cursor: pointer;
  text-align: left; width: 100%;
  box-shadow: none; outline: none;
}
/* перебиваем Astra button:hover/:focus (синий) → оранжевый тонал */
.dl .dl-citypick__item:hover,
.dl .dl-citypick__item:focus,
.dl .dl-servicepick__item:hover {
  background: var(--background-tonal-orange);
  color: var(--text-accent-1);
}
.dl .dl-citypick__item.is-active {
  background: var(--background-orange);
  color: var(--text-white);
  font-weight: 600;
}

/* ШАПКА — Frame 161: padding 20px 10px, фон white */
.dl-header { background: var(--background-primary); padding: 20px 10px; }
.dl-header__left { display: flex; align-items: center; gap: 40px; }.dl-header__btns,
.dl-mobnav__bar-actions,
/* ============================================================
   ТАБЫ (переиспользуемый компонент) — Frame 60
   ============================================================ */
.dl-tabs { display: flex; align-items: center; gap: 8px; }
.dl-logo { flex: none; display: block; }
.dl-logo svg { width: 190px; height: 48px; display: block; }
.dl-nav > a { font-size: 16px; font-weight: 400; line-height: 20px; color: var(--text-primary); }
.dl-nav > a:hover { color: var(--text-accent-1); }

/* МЕНЮ УСЛУГ — dropdown (как города) */
.dl-servicepick { position: relative; }
.dl .dl-servicepick__trigger {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-main); font-size: 16px; font-weight: 400; line-height: 20px;
  color: var(--text-primary); box-shadow: none; outline: none;
}
.dl .dl-servicepick__trigger:hover,
.dl .dl-servicepick__trigger:focus,
.dl-servicepick.is-open .dl-servicepick__trigger { background: none; color: var(--text-accent-1); }
/* каркас/заголовок/пункт — в общих группах дропдауна (см. .dl-citypick__menu выше); тут только отличия */
.dl-servicepick__menu { margin-top: 16px; grid-template-columns: repeat(4, minmax(200px, 1fr)); min-width: 880px; }
.dl .dl-servicepick__head { display: block; }
.dl .dl-servicepick__head:hover { color: var(--text-accent-1); }
/* Телефон — Frame 84: padding 12px 0, gap 8px, текст 16px/500 */
.dl-header__phone {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0;
  font-size: 16px; font-weight: 500; line-height: 20px;
  color: var(--text-primary); white-space: nowrap;
}.dl-header__phone .dl-ico,
.dl-feature .dl-ico { width: 24px; height: 24px; color: var(--icon-primary); }
/* соц-кнопки в шапке (MAX, Telegram) — серая 48×48, фирменный угол */
.dl .dl-soc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-btn);
  background: var(--background-secondary); color: var(--icon-primary);
}
.dl .dl-soc-btn:hover { background: var(--colors-neutral-200); }
.dl .dl-soc-btn .dl-ico { width: 24px; height: 24px; }
/* подпись у соц-кнопки: видна там, где кнопка широкая (футер, мобильное меню);
   в десктопной шапке кнопка-квадрат — подпись скрыта */
.dl-soc-label { font-weight: 600; font-size: 16px; margin-left: 8px; }
.dl-header__btns .dl-soc-btn .dl-soc-label { display: none; }
.dl-header__btns .dl-soc-btn { width: 48px; }

/* ===== Бургер + мобильное меню — на десктопе скрыто ===== */
.dl-burger, .dl-mobcall { display: none; }
.dl .dl-burger {
  width: 48px; height: 48px; padding: 0; border: none; box-shadow: none;
  background: var(--background-secondary); border-radius: var(--radius-btn); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: none;
}
.dl .dl-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #09090b; }
.dl .dl-burger:hover { background: var(--background-secondary); }
/* кнопка «Звонок» в шапке на мобиле — компактнее */
.dl .dl-mobcall { padding: 12px 16px; flex: none; }

.dl-mobnav {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--background-primary);
  display: flex; flex-direction: column; gap: 24px;
  /* верхний отступ 8px: бар 48px ложится ровно на место шапки 64px — лого не прыгает */
  padding: 8px 16px 16px; overflow-y: auto;
  transform: translateX(100%); transition: transform .28s ease;
}
.dl-mobnav.is-open { transform: translateX(0); }
.dl-mobnav[hidden] { display: none; }
.dl-mobnav__bar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.dl-mobnav__bar .dl-logo { height: 36px; }
.dl-mobnav__bar .dl-logo svg { height: 36px; width: 140px; }
.dl-mobnav__close {
  width: 48px; height: 48px; border: 1px solid var(--colors-neutral-200);
  border-radius: var(--radius-btn); background: var(--background-primary);
  color: var(--icon-primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.dl-mobnav__close .dl-ico { width: 24px; height: 24px; }
.dl-mobnav__city {
  background: var(--background-secondary); border-radius: var(--radius-btn);
  padding: 16px; font-size: 16px; color: var(--text-secondary);
}
.dl-mobnav__nav { display: flex; flex-direction: column; }
.dl-mobnav__head {
  font-size: 22px; font-weight: 600; line-height: 26px; color: var(--text-primary);
  padding: 12px 0;
}
/* группа услуг по категории */
.dl-mobnav__group { padding: 8px 0 12px; border-bottom: 1px solid var(--colors-neutral-100); }
.dl-mobnav__cat {
  display: block; font-size: 14px; font-weight: 600; line-height: 18px;
  letter-spacing: 0.56px; text-transform: uppercase; color: var(--text-tertiary);
  padding: 8px 0;
}
.dl-mobnav__sub { display: block; font-size: 16px; line-height: 20px; color: var(--text-primary); padding: 10px 0; }
/* прочие пункты меню (О компании, Цены...) */
.dl-mobnav__nav > a:not(.dl-mobnav__head) {
  font-size: 20px; font-weight: 600; line-height: 24px; color: var(--text-primary); padding: 14px 0;
}
/* hover красим оранжевым ТОЛЬКО на устройствах с мышью —
   на тач-экранах :hover «прилипает» после касания, поэтому отключаем */
@media (hover: hover) {
  .dl .dl-mobnav__cat:hover,
  .dl .dl-mobnav__sub:hover,
  .dl .dl-mobnav__nav > a:hover { color: var(--text-accent-1); }
}
.dl-mobnav__phone { font-size: 24px; font-weight: 600; line-height: 28px; color: var(--text-primary); margin-top: 8px; }
.dl-mobnav__cb { width: 100%; justify-content: center; }
.dl-mobnav__soc { display: flex; gap: 8px; }
/* блокируем прокрутку body, когда меню открыто */
.dl-mobnav-lock, .dl-mobnav-lock body { overflow: hidden; }/* ============================================================
   HERO
   ============================================================ */
.dl-hero,
/* ============================================================
   СТРАНИЦА УСЛУГИ
   ============================================================ */
/* Hero услуги — полукруг с фото (Figma 454:1922) */
.dl-svhero {
  background: var(--gradient-card);
  border-radius: 0 0 40px 40px;
  overflow: hidden;
}
.dl-hero .dl-container {
  display: flex;
  justify-content: space-between;
  align-items: center;        /* Figma: колонка и карточка вертикально центрированы */
  height: 538px;
}.dl-hero__col,
.dl-svhero__col { width: 480px; flex: none; display: flex; flex-direction: column; gap: 32px; }
.dl-hero__title { color: var(--text-white); font-size: 56px; font-weight: 600; line-height: 60px; }
.dl-hero__title em {
  display: block;
  font-family: var(--font-accent);
  font-style: normal;
  font-size: 64px;
  line-height: 68px;
  font-weight: 400;
}
/* карточка с каплей-видео и декором — 580×458.
   Фон-рамку убрали: под фото мужчины был полупрозрачный белый прямоугольник,
   капле с прозрачным фоном он не нужен (иначе виден «остаток рамки»). */
.dl-hero__card {
  flex: none;
  width: 580px;
  height: 458px;
  position: relative;
  background: transparent;
  border-radius: var(--radius-block);
  overflow: visible;
}
@media (max-width: 1280px) {
  .dl-hero__card { width: auto; flex: 1; max-width: 580px; }
}
/* Фото парня: обёртка 723px, прижата к низу (bottom -40.74), центр по X.
   img внутри обрезан рамкой (как в Figma: h105.63% w127.31% сдвиг). */
/* Капля-маскот (видео с прозрачным фоном) — вписана целиком, стоит по центру, ногами к низу.
   В отличие от фото парня НЕ обрезаем (contain), иначе отрежутся ноги. */
.dl-hero__mascot {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: 2;            /* поверх декора */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.dl-hero__mascot .dl-hero__video,
.dl-hero__mascot img {
  width: auto;
  height: 115%;          /* маскот крупнее карточки на 15% */
  transform: translateY(50px);   /* и опущен чуть ниже */
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
}

/* декор: ПОД фото (звёзды видны по прозрачным краям, контур не лезет на парня) */
.dl-hero__decor .dl-d { position: absolute; }

/* ============================================================
   ЕДИНЫЙ ФОН HERO-СЕКЦИЙ (все страницы) — hero-bg.php.
   Внутри — hero-decor.php (композиция главной, координаты Figma в px,
   в системе карточки 580×458). Якорь ставит эту систему координат в ту же
   точку, где карточка на главной: центр секции + 300px вправо.
   ============================================================ */
.dl-hero, .dl-svhero, .dl-article__hero { position: relative; overflow: hidden; }
.dl-hero > .dl-container,
.dl-svhero > .dl-container,
.dl-article__hero > .dl-container,
.dl-article__hero > * { position: relative; z-index: 1; }
.dl-herobg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dl-herobg__anchor {
  position: absolute; left: 50%; top: 50%;
  width: 580px; height: 458px;
  transform: translate(-50%, -50%) translateX(300px);
}
.dl-herobg__anchor .dl-d { position: absolute; }
/* шапки статей/страниц: текст шире (до 930px), декор уводим правее, чтобы звёзды не ложились на текст */
@media (min-width: 901px) {
  .dl-article__hero .dl-herobg__anchor { transform: translate(-50%, -50%) translateX(520px); }
}
@media (max-width: 900px) {
  /* на мобиле — по центру и мельче */
  .dl-herobg__anchor { transform: translate(-50%, -50%) scale(.6); }
  /* короткие шапки внутренних страниц: текст ложится на декор — звёзды приглушаем,
     иначе белый текст на белой звезде нечитаем (главной не касается) */
  .dl-svhero .dl-d--star,
  .dl-article__hero .dl-d--star { opacity: 0.3; }
}

/* CTA-форма ввода телефона (DRY — переиспользуется в hero и финальном CTA) */
.dl-cta-form {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--background-primary);
  border-radius: var(--radius-form);
}
.dl-hero__col .dl-cta-form { width: 100%; }
.dl-cta-form input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 8px;
  font-family: var(--font-main);
  font-size: 16px;
  color: var(--text-primary);
  background: transparent;
  min-width: 0;
}
/* Astra вешает на инпуты box-shadow 0 1px 2px — на белой форме это серая полоска по нижнему краю */
.dl input[type="tel"],
.dl input[type="text"],
.dl input[type="email"] { box-shadow: none; }
.dl-cta-form input::placeholder { color: var(--text-tertiary); }
/* Согласие — Figma: основной indigo-100, «условиями» белый.
   Селекторы усилены (.dl ...) чтобы перебить Astra body{color:...} и a{color:...}. */
.dl .dl-consent { margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--colors-indigo-100); }
.dl .dl-consent a { color: var(--text-white); text-decoration: underline; }

/* ============================================================
   ТИПОГРАФИКА — текстовые стили из Figma (NT Somic)
   ============================================================ */.dl-h2-title,
.dl-svadv__title,
.dl-svsteps__title { font-size: 48px; font-weight: 600; line-height: 52px; color: var(--text-primary); }
.dl-h3-title { font-size: 40px; font-weight: 600; line-height: 44px; color: var(--text-primary); }
.dl-lead,
.dl-cta-card__note { font-size: 18px; font-weight: 400; line-height: 24px; color: var(--text-secondary); }

/* ============================================================
   БЛОК-СЕКЦИЯ — Frame 37: padding 48px 40px, контейнер 1260
   ============================================================ */
.dl-block { }
.dl-block .dl-container { max-width: 1260px; padding: 48px 40px 0; }/* ============================================================
   БЛОК УСЛУГИ
   ============================================================ */
.dl-services-head,
/* ============================================================
   БЛОК «ДО И ПОСЛЕ» — Frame 150 (переиспользуемый)
   ============================================================ */
.dl-ba__head,
/* ============================================================
   БЛОК ОТЗЫВЫ — Frame 153 (переиспользуемый)
   ============================================================ */
.dl-reviews__head,
/* ============================================================
   БЛОК КОМАНДА — Frame 154
   ============================================================ */
.dl-team__head,
/* ============================================================
   БЛОК БЛОГ — Frame 165 (переиспользуемый)
   ============================================================ */
.dl-blog__head,
.dl-video__head { margin-bottom: 24px; display: flex; flex-direction: column; gap: 16px; }
.dl-services-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.dl-cta-card { padding: 40px; border-radius: var(--radius-block); display: flex; flex-direction: column; }
.dl-cta-card--gradient { background: var(--gradient-card); color: var(--text-white); gap: 20px; }
.dl-cta-card--gradient .dl-h3-title { color: var(--text-white); }
.dl-cta-card__body { display: flex; flex-direction: column; gap: 24px; }.dl-cta-card__lead,
.dl-cta-promo__text,
.dl-svhero__text,
.dl-svsafe__promo-text,
.dl-svprice__min-text { font-size: 18px; line-height: 24px; color: var(--text-white); }
.dl-cta-card--gray { background: var(--background-secondary); gap: 12px; }
.dl-cta-card .dl-cta-card__phone { color: var(--text-accent-2); }
/* .dl-cta-card__note — в группе с .dl-lead */

/* ============================================================
   ФИЧИ (4 карточки) — Frame 35: pt48 px40. ОДИН класс .dl-feature
   ============================================================ */
.dl-features-section .dl-container { max-width: 1260px; padding: 48px 40px 0; }
.dl-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dl-feature {
  padding: 20px;
  background: var(--background-secondary);
  border-radius: var(--radius-block);
  display: flex;
  flex-direction: column;
  gap: 8px;
}.dl-feature__title,
/* Figma gap-12 */
.dl-why__name,
.dl-svprice__name,
.dl-svprice__extra-title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 20px;
  letter-spacing: 0.64px;
}.dl-feature__text, .dl-service__text, .dl-team__role, .dl-blog__date, .dl-why__text, .dl-footer__col a:not(.dl-footer__head) { color: var(--text-secondary); font-size: 16px; font-weight: 400; line-height: 20px; }

/* ============================================================
   УСЛУГИ (CPT service) — ОДИН класс .dl-service
   ============================================================ */
.dl-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.dl-service {
  background: var(--background-primary);
  border: 1px solid var(--colors-neutral-200);
  border-radius: var(--radius-block);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dl-service__img {
  height: 326px;
  background: var(--gradient-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* вырезанный предмет в карточке — целиком, с воздухом на градиенте (общий img-cover тут не подходит: обрезает) */
.dl-services .dl-service__img img {
  width: auto; height: auto;
  max-width: 78%; max-height: 82%;
  object-fit: contain;
}
/* 1-2 карточки (Ковры, Одежда): картинка с ЗАПЕЧЁННЫМ градиентом и маскотом —
   заполняет бокс целиком (cover), собственный фон карточки не виден */
.dl-services .dl-service .dl-service__img img {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover;
}/* .dl-service__img img / .dl-review__avatar img — в общей img-cover группе (см. .dl-ba__img img) */
.dl-service__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; justify-content: space-between; }.dl-service__info,
.dl-why__info,
.dl-footer__col,
.dl-popup__form,
.dl-svprice__info { display: flex; flex-direction: column; gap: 12px; }
.dl-service__title { color: var(--text-primary); font-size: 16px; font-weight: 600; line-height: 20px; text-transform: uppercase; }
.dl-service__price { color: var(--text-accent-2); font-size: 24px; font-weight: 600; line-height: 28px; }
.dl-service__arrow { width: 24px; height: 24px; color: var(--text-tertiary); }
.dl-tab {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--background-stroke-200, var(--colors-neutral-200));
  background: transparent;
  font-family: var(--font-main);
  font-size: 16px; font-weight: 500; line-height: 20px;
  color: var(--text-primary);
  cursor: pointer;
}
.dl-tab.is-active {
  background: var(--background-orange);
  border-color: var(--background-orange);
  color: var(--text-white);
  border-radius: 0 12px 12px 12px;   /* фирменный угол у активного */
}
/* Astra красит button :hover/:focus в синий — гасим у неактивных табов */
.dl .dl-tab:not(.is-active):hover,
.dl .dl-tab:not(.is-active):focus,
.dl .dl-tab:not(.is-active):active,
.dl .dl-tab:not(.is-active):focus-visible {
  background: transparent;
  border-color: var(--text-primary);
  color: var(--text-primary);
  outline: none;
}
/* активный таб не должен синеть от focus после клика */
.dl .dl-tab.is-active:hover, .dl .dl-tab.is-active:focus, .dl .dl-tab.is-active:focus-visible {
  background: var(--background-orange); border-color: var(--background-orange); color: var(--text-white); outline: none;
}
.dl-ba__panel[hidden] { display: none; }
.dl-ba__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.dl-ba__track::-webkit-scrollbar { display: none; }
.dl-ba__slide { flex: 0 0 580px; scroll-snap-align: start; background: var(--background-secondary); border-radius: var(--radius-block); padding: 40px; }
.dl-ba__pair { display: flex; gap: 8px; }
.dl-ba__img { position: relative; flex: 1; height: 350px; overflow: hidden; }.dl-ba__img img, .dl-video__frame img, .dl-team__photo img, .dl-blog__photo img, .dl-svadv__photo img, .dl-svsteps__slide-photo img, .dl-svcourier__photo img, .dl-service__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* «До» — левая картинка: радиус 0/20/20/20 */
.dl-ba__img--before { border-radius: 0 20px 20px 20px; }
/* «После» — правая: радиус 20/0/20/20 */
.dl-ba__img--after { border-radius: 20px 0 20px 20px; }
/* «До» badge слева: радиус 0/80/80/12 */
/* «После» badge справа: радиус 80/12/12/80 */

/* контролы карусели (переиспользуемые) */
.dl-carousel-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.dl-ba__lead { margin-top: 8px; }
.dl-btn-text { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.dl-btn-text .dl-ico { width: 24px; height: 24px; }
.dl-dots { display: flex; gap: 0; align-items: center; }
.dl-dots span { width: 8px; height: 8px; margin: 0 6px; border-radius: 50%; background: var(--colors-neutral-300); }
.dl-dots span.is-active { background: var(--background-orange); width: 20px; border-radius: 4px; }
.dl-arrows { display: flex; gap: 8px; }
.dl-arrow {
  width: 48px; height: 48px; border-radius: 800px;
  border: 1px solid var(--colors-neutral-200);
  background: var(--background-primary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--icon-primary);
}
/* Astra сбрасывает button color → задаём stroke явно на path */
.dl .dl-arrow,
.dl .dl-btn-text { color: var(--icon-primary); }
.dl .dl-arrow .dl-ico, .dl .dl-arrow .dl-ico path { stroke: var(--icon-primary); }
.dl-arrow .dl-ico { width: 24px; height: 24px; }
/* Astra красит button :hover/:focus/:active в синий — гасим у стрелок (фон белый всегда) */
.dl .dl-arrow:hover, .dl .dl-arrow:focus, .dl .dl-arrow:active,
.dl .dl-arrow:focus-visible {
  background: var(--background-primary);
  border-color: var(--colors-neutral-200);
  color: var(--icon-primary);
  outline: none;
}
.dl .dl-arrow:hover { border-color: var(--text-primary); }   /* hover — лёгкое подсвечивание рамкой */
.dl .dl-arrow:hover .dl-ico path { stroke: var(--icon-primary); }
.dl-review {
  background: var(--background-secondary);
  border-radius: 20px;            /* отзыв: все углы 20 (без среза) */
  padding: 40px;
  display: flex; flex-direction: column; gap: 16px;
  height: 380px;
}
.dl-stars { display: flex; gap: 2px; }
.dl-star { width: 16px; height: 16px; color: var(--colors-yellow-500); }/* ============================================================
   БЛОК ВИДЕО — Frame 164
   ============================================================ */
.dl-svcourier__left { display: flex; flex-direction: column; gap: 32px; }
.dl-svadv__head { display: flex; flex-direction: column; gap: 16px; } /* стандарт h2↔лид 16 */
/* шапка видео-блока — общий стиль заголовков (правило у .dl-blog__head выше) */
.dl-video__frame {
  position: relative; display: block; width: 100%;
  aspect-ratio: 328 / 185;
  border-radius: var(--radius-block);
  overflow: hidden;
}
.dl-video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; border-radius: 80px;
  background: var(--background-primary);
  display: flex; align-items: center; justify-content: center;
  color: var(--icon-orange);
  cursor: pointer; border: none;
}
.dl-video__play .dl-ico { width: 24px; height: 24px; }
.dl-video__player { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.dl-video__frame.is-playing { aspect-ratio: 16 / 9; }
.dl-team__track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dl-team__track::-webkit-scrollbar { display: none; }
.dl-team__card { flex: 0 0 388px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; }
.dl-team__photo { width: 100%; height: 350px; border-radius: var(--radius-block); overflow: hidden; }
.dl-team__info { display: flex; flex-direction: column; gap: 8px; }.dl-team__name,
.dl-blog__title { font-size: 18px; font-weight: 600; line-height: 24px; color: var(--text-primary); }

/* ============================================================
   БЛОК FAQ — Frame 145 (переиспользуемый)
   ============================================================ */
.dl-faq__grid { display: grid; grid-template-columns: 580px 1fr; gap: 60px; }
.dl-faq__left { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.dl-faq__left .dl-btn { align-self: flex-start; }
.dl-btn--text { color: var(--text-primary); }
.dl-faq__list { display: flex; flex-direction: column; }
.dl-faq__item { border-bottom: 1px solid var(--colors-neutral-100); padding: 20px 0; }
.dl-faq__item:first-child { padding-top: 0; }
.dl-faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 600; line-height: 24px; color: var(--text-primary);
}
.dl-faq__q::-webkit-details-marker { display: none; }
.dl-faq__chevron { width: 24px; height: 24px; flex: none; color: var(--icon-primary); transition: transform .2s; }
.dl-faq__item[open] .dl-faq__chevron { transform: rotate(180deg); }
.dl-faq__a { margin-top: 12px; font-size: 16px; font-weight: 400; line-height: 22px; color: var(--text-secondary); }
/* многострочный ответ: перенос строки = новый абзац с воздухом */
.dl-faq__a br { content: ""; display: block; margin-top: 10px; }
.dl-blog__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dl-blog__track::-webkit-scrollbar { display: none; }
.dl-blog__card { flex: 0 0 380px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; }
.dl-blog__photo { width: 100%; height: 220px; border-radius: var(--radius-block); overflow: hidden; }

/* ============================================================
   БЛОК ГЕОГРАФИЯ — Frame 111 (переиспользуемый)
   ============================================================ */
/* Figma: 2 колонки gap-20, заголовок СЛЕВА на белом, облако городов СПРАВА в оранжевом блоке */
.dl-geo__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start;
}.dl-geo__cities,
.dl-svadv__badges {
  display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start;
  background: var(--background-tonal-orange);
  border-radius: var(--radius-block);
  padding: 40px;
}
/* чип-«капля» (гео) и бейдж услуги — один стиль */
.dl-chip,
.dl-svadv__badge {
  padding: 10px;
  border-radius: 0 80px 80px 12px;   /* фирменная «капля» */
  background: var(--background-primary);
  font-size: 14px; font-weight: 600; line-height: 18px;
  text-transform: uppercase; letter-spacing: 0.56px;
  color: var(--text-primary); white-space: nowrap;
}
.dl-chip { cursor: pointer; }
.dl-chip.is-active,
.dl-svadv__badge.is-accent { background: var(--background-orange); color: var(--text-white); }

/* ============================================================
   БЛОК CTA-ПРОМО «Не откладывайте» — Frame 141 (переиспользуемый)
   ============================================================ */
.dl-cta-promo-section { padding: 48px 0 0; } /* низ 0 — стандартный зазор 48 даёт следующий блок */
.dl-cta-promo { background: var(--gradient-card); border-radius: var(--radius-block); overflow: hidden; padding: 64px 380px 64px 40px; position: relative; } /* справа место под маскота — текст левее */
/* маскот-оператор в правом нижнем углу панели */
.dl-cta-promo__mascot { position: absolute; right: 40px; bottom: 0; height: 90%; width: auto; pointer-events: none; }
@media (max-width: 1100px) { .dl-cta-promo .dl-cta-promo__mascot { display: none !important; } .dl-cta-promo { padding: 64px 40px; } }
.dl-cta-promo__inner { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }.dl-cta-promo__title,
.dl-article__title { color: var(--text-white); font-size: 48px; font-weight: 600; line-height: 52px; }
.dl-cta-promo__title em {
  display: block; font-family: var(--font-accent); font-style: normal;
  font-size: 64px; line-height: 68px; font-weight: 400; margin-top: 4px;   /* Figma Gogol 64/68 */
}
.dl-cta-promo__form,
.dl-svhero__form { width: 100%; max-width: 480px; }

/* ============================================================
   БЛОК ПРОЦЕСС (9 шагов) — Frame 161
   ============================================================ */
.dl-process__title { margin-bottom: 40px; position: relative; }/* Figma gap-40 */

/* ============================================================
   МИНИ-МАСКОТЫ («маргиналии») в блоке процесса — декоративный слой.
   Позиции подобраны зигзагом справа от текста, чтобы не лезть на строки.
   ============================================================ */
/* ---- «Листовка»: газетная вёрстка процесса ----
   3 колонки с тонкими линейками, двойная отбивка сверху, номера шагов. */
.dl-process__paper {
  border-top: 4px solid var(--text-primary);
  padding-top: 5px;
}
.dl-process__paper::before {
  content: ""; display: block; height: 1px;
  background: var(--text-primary);
  margin-bottom: 32px;
}
.dl-process__list {
  columns: 3;
  column-gap: 48px;
  column-rule: 1px solid var(--colors-neutral-200);
}
.dl-step { break-inside: avoid; margin-bottom: 28px; }
.dl-step__num {
  font-size: 13px; font-weight: 700; line-height: 16px;
  color: var(--text-accent-1); letter-spacing: 1px;
  margin-bottom: 6px;
}
.dl-step__num::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 26px; height: 1px; background: var(--colors-neutral-300); margin-left: 8px;
}
@media (max-width: 1024px) { .dl-process__list { columns: 2; } }
@media (max-width: 640px)  { .dl-step { margin-bottom: 22px; } .dl-step:last-child { margin-bottom: 0; } }

/* список контактов (был в общей группе с process__list) */
.dl-contacts__left { display: flex; flex-direction: column; gap: 20px; }
.dl-step__name { font-size: 18px; font-weight: 600; line-height: 24px; color: var(--text-primary); margin-bottom: 8px; }   /* Figma gap-8 */
.dl-step__text { font-size: 16px; font-weight: 400; line-height: 22px; color: var(--text-secondary); }

/* ============================================================
   БЛОК «ПОЧЕМУ ВЫБИРАЮТ НАС» — Frame 162 (переиспользуемый)
   ============================================================ */
.dl-why__title { margin-bottom: 40px; }   /* Figma gap-40 */
.dl-why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dl-why__card {
  background: var(--background-secondary);
  border-radius: var(--radius-block);
  padding: 40px;
  display: flex; flex-direction: column; gap: 24px;   /* Figma gap-24 номер↔инфо */
}
.dl-why__num,
.dl-svprice__amount { font-size: 40px; font-weight: 600; line-height: 44px; color: var(--text-accent-2); }

/* ============================================================
   БЛОК SEO-ТЕКСТ — Frame 163
   ============================================================ */
.dl-seo__title { margin-bottom: 40px; }   /* Figma gap-40 заголовок↔текст */
.dl-seo__p { font-size: 18px; font-weight: 400; line-height: 24px; color: var(--text-primary); margin-bottom: 20px; }   /* Figma: primary + gap-20 */
.dl-seo__p:last-child { margin-bottom: 0; }

/* ============================================================
   ПОДВАЛ — Frame 160 (глобальный)
   ============================================================ */
.dl-footer { background: var(--background-primary); }
.dl-footer .dl-container { max-width: 1260px; padding: 48px 40px; }
.dl-footer__logo { display: inline-block; margin-bottom: 40px; }
.dl-footer__logo svg { width: 144px; height: 36px; }
.dl-footer__cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 20px; padding-bottom: 40px; border-bottom: 1px solid var(--colors-neutral-100); }
.dl-footer__head { font-size: 16px; font-weight: 600; line-height: 20px; color: var(--text-primary); }
.dl-footer__col a:hover { color: var(--text-accent-1); }
.dl-footer__contact { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
.dl-footer__phone { font-size: 24px; font-weight: 600; line-height: 28px; color: var(--text-primary); }
/* «Вам перезвонить?» — на всю ширину колонки (Figma w-full), h48 */
.dl-footer__contact .dl-btn {
  width: 100%; height: 48px; padding: 12px;
  background: var(--control-secondary-active); color: var(--text-primary);
  font-size: 16px; font-weight: 600;
}
.dl-footer__social { display: flex; gap: 8px; height: 48px; }
.dl-footer__social a {
  flex: 1; height: 48px; border-radius: var(--radius-btn);
  background: var(--control-secondary-active); color: var(--icon-primary);
  display: flex; align-items: center; justify-content: center;
}
.dl-footer__social a:hover { background: var(--colors-neutral-200); }
.dl-footer__social .dl-ico { width: 24px; height: 24px; }
.dl-footer__bottom { display: flex; justify-content: space-between; padding-top: 24px; font-size: 12px; color: var(--text-secondary); }
.dl-footer__bottom a:hover { color: var(--text-primary); }

/* ============================================================
   ПОПАП ЗАЯВКИ
   ============================================================ */
.dl-popup { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dl-popup[hidden] { display: none; }
.dl-popup__overlay { position: absolute; inset: 0; background: rgba(9,9,11,0.55); backdrop-filter: blur(2px); }
.dl-popup__box {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: var(--background-primary);
  border-radius: 0 24px 24px 24px;
  padding: 40px;
  box-shadow: 0 24px 80px rgba(9,9,11,0.25);
}
.dl-popup__close {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px; border: none; cursor: pointer;
  background: var(--background-secondary); border-radius: 0 10px 10px 10px;
  display: flex; align-items: center; justify-content: center; color: var(--icon-secondary);
}
.dl-popup__close:hover { background: var(--colors-neutral-200); }
.dl-popup__title { font-size: 28px; font-weight: 600; line-height: 32px; color: var(--text-primary); margin-bottom: 8px; }
.dl-popup__sub { font-size: 16px; line-height: 20px; color: var(--text-secondary); margin-bottom: 24px; }
.dl-popup__input {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--colors-neutral-200); border-radius: 0 12px 12px 12px;
  font-family: var(--font-main); font-size: 16px; line-height: 20px; color: var(--text-primary);
  outline: none; transition: border-color .12s;
}
.dl-popup__input:focus { border-color: var(--colors-orange-400); }
.dl-popup__input::placeholder { color: var(--text-tertiary); }
.dl-popup__textarea { resize: vertical; min-height: 52px; font-family: var(--font-main); }
.dl-popup__agree { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 16px; color: var(--text-secondary); cursor: pointer; }
.dl-popup__agree input { margin-top: 2px; accent-color: var(--colors-orange-400); flex: none; }
.dl-popup__agree a { color: var(--text-accent-1); text-decoration: underline; }
.dl-popup__submit { width: 100%; padding: 14px; margin-top: 4px; }
.dl-popup__msg { padding: 12px 16px; border-radius: 0 12px 12px 12px; font-size: 14px; line-height: 18px; }
.dl-popup__msg.is-ok { background: #e9f7ec; color: #1a7f37; }
.dl-popup__msg.is-err { background: var(--background-tonal-orange); color: var(--colors-orange-600); }

/* сообщения инлайн-форм */
.dl-lead-inline__msg { margin-top: 12px; font-size: 14px; line-height: 18px; }
.dl-lead-inline__msg[hidden] { display: none; }
.dl-lead-inline__msg.is-ok { color: #fff; font-weight: 500; }
.dl-lead-inline__msg.is-err { color: #ffe1d6; }

/* ============================================================
   АДАПТИВ (черновой — уточним при сборке мобилки)
   ============================================================ */
@media (max-width: 1024px) {
  .dl-features { grid-template-columns: repeat(2, 1fr); }
  .dl-hero__col { width: 100%; }
}
@media (max-width: 1024px) {.dl-why__grid { grid-template-columns: 1fr; }
  .dl-geo__inner, .dl-services-cta { grid-template-columns: 1fr; }
  .dl-faq__grid { grid-template-columns: 1fr; gap: 24px; }
}
/* ============================================================
   МОБИЛЬНЫЙ АДАПТИВ ГЛАВНОЙ — по макету Figma «Главная - Мобильная» (360px, node 380:1803)
   Только CSS, HTML/PHP не трогаем. Брейкпоинт 640px.
   ============================================================ */
@media (max-width: 640px) {
  .dl-container { padding-left: 16px; padding-right: 16px; }
  .dl-nav, .dl-topbar { display: none; }

  /* ===== Контролы каруселей: точки не выталкивают стрелки за экран.
     Верхняя строка — «Смотреть все» + стрелки, ниже — точки по центру с переносом ===== */
  .dl-carousel-controls { flex-wrap: wrap; row-gap: 14px; }
  .dl-carousel-controls .dl-dots {
    order: 3; flex: 1 0 100%; justify-content: center;
    flex-wrap: wrap; row-gap: 8px;
  }

  /* ===== ШАПКА: фикс-высота, без скачков ===== */
  .dl-header { padding: 0; height: 64px; }
  .dl-header .dl-container { height: 64px; padding-top: 0; padding-bottom: 0; }
  .dl-header__left { gap: 0; }
  .dl-header__phone, .dl-header__btns { display: none; }
  /* лого фиксируем меньшим, чтобы не сжималось по-разному рядом с кнопками */
  .dl-logo svg { width: 140px; height: 36px; }
  .dl-header__actions { gap: 8px; flex: none; }
  .dl-burger { display: flex; }
  .dl-mobcall { display: inline-flex; white-space: nowrap; }

  /* секционные паддинги: на мобиле боковые 16px (десктоп 40px), верхний 40px */
  .dl-block .dl-container,
  .dl-features-section .dl-container { padding: 40px 16px 0; max-width: 100%; }

  /* --- Типографика заголовков (Figma mobile-токены H2 32/36, H3 24/28) --- */
  .dl-h2-title { font-size: 32px; line-height: 36px; }
  .dl-h3-title { font-size: 24px; line-height: 28px; }

  /* ===== HERO ===== */
  .dl-hero .dl-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto;
    padding-top: 40px;
    padding-bottom: 0;
    gap: 24px;
  }
  .dl-hero__col { width: 100%; gap: 24px; align-items: center; }
  .dl-hero__title { font-size: 36px; line-height: 40px; text-align: center; }
  .dl-hero__title em { font-size: 40px; line-height: 44px; }
  /* форма (инпут+кнопка) остаётся в ряд */
  .dl-hero__col .dl-cta-form { width: 100%; }
  /* карточка с каплей — под формой, во всю ширину, в край секции.
     Фон убран (капля-видео с прозрачным фоном, рамка от фото мужчины больше не нужна). */
  .dl-hero__card {
    width: 100%; max-width: 100%; flex: none;
    height: 360px; margin: 0 auto;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }
  /* капля на мобилке: вписана целиком, по центру, ногами к низу.
     transform: none обязателен — десктопный translateY(50px) обрезал ноги. */
  .dl-hero__mascot { height: 100%; }
  .dl-hero__mascot .dl-hero__video,
  .dl-hero__mascot img { height: 100%; width: auto; transform: none; }

  /* ===== ПРЕИМУЩЕСТВА (.dl-feature) ===== */
  .dl-features { grid-template-columns: 1fr; gap: 16px; }

  /* ===== УСЛУГИ (картинка+цена) ===== */
  .dl-services { grid-template-columns: 1fr; gap: 16px; }
  .dl-services-cta { grid-template-columns: 1fr; }

  /* ===== ПРОЦЕСС ===== */
  .dl-process__list { columns: 1; gap: 16px; }

  /* ===== ПОЧЕМУ НАС (карточки в колонку) ===== */
  .dl-why__grid { grid-template-columns: 1fr; gap: 16px; }

  /* ===== БЛОГ (карусель — карточка во всю ширину экрана) ===== */
  .dl-blog__head { gap: 12px; }
  .dl-blog__card { flex: 0 0 calc(100vw - 32px); max-width: calc(100vw - 32px); }
  .dl-blog__photo { height: 220px; }
  .dl-blog__title { font-size: 18px; line-height: 24px; }

  /* ===== ОТЗЫВЫ (виджет SmartWidgets — не трогаем сетку, только заголовок) ===== */
  /* .dl-reviews__widget — сторонний iframe, адаптируется сам */

  /* ===== FAQ (в одну колонку) ===== */
  .dl-faq__grid { grid-template-columns: 1fr; gap: 24px; }
  .dl-faq__left { gap: 16px; }
  .dl-faq__left .dl-btn { width: 100%; justify-content: center; }
  .dl-faq__q { font-size: 18px; line-height: 24px; }

  /* ===== ГЕО (в колонку, облако городов с меньшим паддингом) ===== */
  .dl-geo__inner { grid-template-columns: 1fr; gap: 24px; }
  .dl-geo__cities { padding: 24px; gap: 4px; }
  /* чипы-города в облаке (НЕ .dl-city-name — тот класс глобальный, для подмены города в текстах!) */
  .dl-geo .dl-chip { font-size: 12px; line-height: 16px; letter-spacing: 0.48px; padding: 10px; }

  /* ===== CTA-ПРОМО ===== */
  .dl-cta-promo-section { padding: 40px 0 0; }
  .dl-cta-promo__title { font-size: 32px; line-height: 36px; }
  .dl-cta-promo__title em { font-size: 36px; line-height: 40px; }

  /* ===== FOOTER (колонки в столбик, контакты первыми) ===== */
  .dl-footer .dl-container { display: flex; flex-direction: column; padding: 40px 16px; gap: 24px; }
  .dl-footer__logo { order: 3; }
  .dl-footer__cols {
    order: 1; display: flex; flex-direction: column; gap: 32px;
    padding-bottom: 0; border-bottom: 0;
  }
  .dl-footer__contact { order: -1; gap: 16px; }
  .dl-footer__phone { font-size: 24px; line-height: 28px; }
  .dl-footer__social { gap: 8px; }
  .dl-footer__col { gap: 12px; }
  .dl-footer__bottom { order: 4; flex-direction: column; gap: 8px; align-items: flex-start; }
}
.dl-svhero .dl-container { display: flex; justify-content: space-between; align-items: center; min-height: 538px; gap: 40px; }
/* заголовку даём шире колонки (запас до фото ~120px), иначе длинные слова рассыпаются по строке на слово */
.dl-svhero__title { color: var(--text-white); font-size: 56px; font-weight: 600; line-height: 60px; text-wrap: balance; width: 580px; max-width: none; }
.dl-svhero__title em { display: block; font-family: var(--font-accent); font-style: normal; font-size: 64px; line-height: 68px; font-weight: 400; white-space: nowrap; }
/* .dl-svhero__form — в группе с .dl-cta-promo__form */
/* Тематический маскот справа в шапке услуги (та же механика, что видео-капля на главной) */
.dl-svhero__mascot { flex: none; width: 480px; height: 458px; display: flex; align-items: center; justify-content: center; }
.dl-svhero__mascot img { height: 112%; width: auto; max-width: none; transform: translate(-70px, 0); }
/* точечные сдвиги отдельных маскотов (по просьбе владельца) */
.postid-60 .dl-svhero__mascot img { transform: translate(-45px, 0); } /* пуховик — правее базового, но не сильно */

/* «За N дней» + загрязнения (Figma 207:4) */
.dl-svadv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.dl-svadv__left { display: flex; flex-direction: column; gap: 40px; }
.dl-svadv__title .dl-accent { color: var(--text-accent-2); }
/* .dl-svadv__badge (+ .is-accent) — в группе с .dl-chip */
.dl-svadv__photo { border-radius: var(--radius-block); overflow: hidden; min-height: 400px; background: var(--background-secondary); }

/* «Безопасно для всех» + промо (Figma 207:41) */
.dl-svsafe__title { margin-bottom: 40px; }.dl-svsafe__chips,
.dl-svprice__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.dl-svsafe__chip {
  display: flex; align-items: center; gap: 16px; padding: 40px;
  background: var(--background-tonal-orange); border-radius: var(--radius-block);
}
.dl-svsafe__ico {
  flex: none; width: 48px; height: 48px; border-radius: 0 12px 12px 12px;
  background: var(--background-orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.dl-svsafe__ico .dl-ico { width: 24px; height: 24px; }
.dl-svsafe__chip-text { font-size: 14px; font-weight: 600; line-height: 18px; letter-spacing: 0.56px; text-transform: uppercase; color: var(--text-primary); }.dl-svsafe__promo,
.dl-svprice__min {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch;
  background: var(--gradient-card);   /* 180deg #4f39f6→#c4b4ff = тот же токен-градиент */
  border-radius: var(--radius-block); padding: 40px; color: #fff;
}
.dl-svsafe__promo-title { font-size: 40px; font-weight: 600; line-height: 44px; color: #fff; }.dl-svsafe__promo-right,
.dl-svprice__min-right { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
/* .dl-svsafe__promo-text / .dl-svprice__min-text — в общей группе белого 18/24 (см. .dl-cta-card__lead) */

/* Прайс «Одинаковая цена» (Figma 207:149) */
.dl-svprice__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.dl-svprice__card {
  background: var(--background-secondary); border-radius: var(--radius-block); padding: 40px;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 380px;
}
.dl-svprice__desc { font-size: 16px; line-height: 20px; color: var(--text-secondary); }
.dl-svprice__price { display: flex; align-items: baseline; gap: 8px; }
.dl-svprice__amount { white-space: nowrap; }   /* типографика — в группе с .dl-why__num */
.dl-svprice__unit { font-size: 16px; font-weight: 400; line-height: 20px; color: var(--text-secondary); white-space: nowrap; }
.dl-svprice__extra { background: var(--background-secondary); border-radius: var(--radius-block); padding: 40px; margin-bottom: 20px; }
.dl-svprice__extra-title { margin-bottom: 20px; }   /* типографика — в группе uppercase-лейблов (.dl-feature__title) */
.dl-svprice__extra-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.dl-svprice__extra-name { font-size: 16px; color: var(--text-secondary); white-space: nowrap; }
.dl-svprice__extra-line { flex: 1; border-bottom: 1px solid var(--colors-indigo-100, #e0e7ff); transform: translateY(-4px); }
.dl-svprice__extra-price { font-size: 16px; color: var(--text-accent-2); white-space: nowrap; }
.dl-svprice__min-title { color: #fff; }

/* «N шагов» — табы процесса (Figma 207:335) */
.dl-svsteps__head { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; align-items: start; }
/* .dl-svsteps__title — в общей группе H2 (см. .dl-h2-title) */
.dl-svsteps__tabs { display: flex; gap: 16px; align-items: center; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--colors-neutral-200); padding-bottom: 0; margin-bottom: 0; }
.dl-svsteps__tabs::-webkit-scrollbar { display: none; }
.dl-svsteps__tab {
  background: none; border: none; cursor: pointer; white-space: nowrap;
  padding: 16px 0; font-size: 16px; font-weight: 600; line-height: 20px;
  text-transform: uppercase; letter-spacing: 0.64px; color: var(--text-tertiary);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dl-svsteps__tab.is-active { color: var(--text-primary); border-bottom-color: var(--background-orange); }
/* Astra красит button :hover/:focus в синий/белый — гасим у табов шагов */
.dl .dl-svsteps__tab:hover, .dl .dl-svsteps__tab:focus, .dl .dl-svsteps__tab:active, .dl .dl-svsteps__tab:focus-visible {
  background: none; outline: none; color: var(--text-primary);
}
.dl .dl-svsteps__tab.is-active:hover, .dl .dl-svsteps__tab.is-active:focus { color: var(--text-primary); border-bottom-color: var(--background-orange); }
.dl-svsteps__panel { margin-top: 0; }
.dl-svsteps__slide { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: var(--background-secondary); border-radius: 0 0 20px 20px; padding: 40px; min-height: 420px; }
.dl-svsteps__slide[hidden] { display: none; }
.dl-svsteps__slide-text { position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.dl-svsteps__desc { font-size: 18px; line-height: 24px; color: var(--text-secondary); max-width: 540px; }
.dl-svsteps__desc + .dl-svsteps__desc { margin-top: 14px; }
.dl-svsteps__descs { flex: 1; }
.dl-svsteps__bignum { font-size: 48px; font-weight: 600; line-height: 52px; color: var(--colors-indigo-200, #c6d2ff); }
.dl-svsteps__slide-photo { border-radius: var(--radius-block); overflow: hidden; }

/* «Бесплатный курьер» (вместо дат) */
.dl-svcourier__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.dl-svcourier__head { display: flex; flex-direction: column; gap: 16px; }
.dl-svcourier__list { display: flex; flex-direction: column; gap: 16px; list-style: none; margin: 0; padding: 0; }
.dl-svcourier__item { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; line-height: 24px; color: var(--text-primary); }
.dl-svcourier__check { flex: none; width: 24px; height: 24px; color: var(--background-orange); margin-top: 0; }
.dl-svcourier__cta { align-self: flex-start; }
.dl-svcourier__photo { border-radius: var(--radius-block); overflow: hidden; height: 100%; min-height: 400px; }

@media (max-width: 1024px) {
  .dl-svhero .dl-container { flex-direction: column; align-items: stretch; }
  .dl-svhero__col { width: 100%; }
  .dl-svhero__mascot { width: 100%; height: auto; }
  .dl-svhero__mascot img { height: 320px; transform: none; }
  .dl-svadv__grid, .dl-svsafe__chips, .dl-svsafe__promo, .dl-svprice__cards, .dl-svprice__min,
  .dl-svsteps__head, .dl-svsteps__slide, .dl-svcourier__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   МОБИЛЬНЫЙ АДАПТИВ СТРАНИЦЫ УСЛУГИ — по макету Figma «Стирка ковров - Мобильная» (360px, node 148:2)
   ============================================================ */
@media (max-width: 640px) {
  /* ===== HERO ===== */
  .dl-svhero, .dl-hero, .dl-article__hero { border-radius: 0 0 24px 24px; }
  .dl-svhero__col { width: 100%; gap: 24px; align-items: center; }
  .dl-svhero__title { font-size: 36px; line-height: 40px; text-align: center; width: auto; max-width: 100%; }
  .dl-svhero .dl-container { min-height: 0; gap: 24px; padding-top: 40px; padding-bottom: 0; align-items: center; text-align: center; }
  .dl-svhero__title em { font-size: 44px; line-height: 48px; }
  .dl-svhero__text { font-size: 18px; line-height: 24px; text-align: center; }
  .dl-svhero__form { max-width: none; }

  /* ===== ПРЕИМУЩЕСТВА «За N дней» ===== */
  .dl-svadv__title { font-size: 32px; line-height: 36px; }
  .dl-svadv__head { gap: 16px; }
  .dl-svadv__left { gap: 16px; }
  .dl-svadv__badges { padding: 20px; }
  .dl-svadv__badge { font-size: 12px; line-height: 16px; letter-spacing: 0.48px; }
  .dl-svadv__photo { min-height: 0; aspect-ratio: 328 / 220; }

  /* ===== БЕЗОПАСНО (чипы 3 в ряд, вертикальные) ===== */
  .dl-svsafe__title { margin-bottom: 24px; }
  .dl-svsafe__chips { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
  .dl-svsafe__chip { flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; padding: 16px 8px; text-align: center; }
  .dl-svsafe__ico { width: 44px; height: 44px; }
  .dl-svsafe__chip-text { font-size: 14px; line-height: 16px; letter-spacing: 0.56px; }
  .dl-svsafe__promo { padding: 20px; gap: 24px; }
  .dl-svsafe__promo-title { font-size: 24px; line-height: 28px; }
  .dl-svsafe__promo-right { gap: 12px; }
  .dl-svsafe__promo-text { font-size: 16px; line-height: 20px; }

  /* ===== ПРАЙС ===== */
  .dl-svprice__head { gap: 16px; margin-bottom: 24px; }
  .dl-svprice__cards { gap: 16px; margin-bottom: 16px; }
  .dl-svprice__card { padding: 20px; min-height: 0; }
  .dl-svprice__price { margin-top: 24px; gap: 6px; }
  .dl-svprice__amount { font-size: 24px; line-height: 28px; }
  .dl-svprice__extra { padding: 20px; margin-bottom: 16px; }
  .dl-svprice__extra-title { margin-bottom: 24px; }
  .dl-svprice__min { padding: 20px; gap: 16px; }
  .dl-svprice__min-right { gap: 24px; }
  .dl-svprice__min-text { font-size: 16px; line-height: 20px; }

  /* ===== 6 ШАГОВ (табы + слайд текст сверху, фото снизу) ===== */
  .dl-svsteps__head { gap: 8px; margin-bottom: 24px; }
  .dl-svsteps__title { font-size: 32px; line-height: 36px; }
  .dl-svsteps__text { font-size: 16px; line-height: 20px; }
  .dl-svsteps__tabs { gap: 24px; }
  .dl-svsteps__tab { padding: 12px 0; }
  .dl-svsteps__slide { gap: 20px; padding: 20px; min-height: 0; border-radius: 0 0 16px 16px; }
  .dl-svsteps__slide-text { gap: 24px; }
  .dl-svsteps__desc { font-size: 16px; line-height: 24px; max-width: none; }
  .dl-svsteps__bignum { font-size: 40px; line-height: 44px; }
  .dl-svsteps__slide-photo { height: 220px; }

  /* ===== КУРЬЕР (пункты со разделителями, кнопка на всю ширину) ===== */
  .dl-svcourier__grid { gap: 24px; }
  .dl-svcourier__left { gap: 24px; }
  .dl-svcourier__head { gap: 12px; }
  .dl-svcourier__list { gap: 0; }
  .dl-svcourier__item { font-size: 16px; line-height: 24px; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--colors-neutral-200); align-items: center; }
  .dl-svcourier__item:last-child { border-bottom: none; }
  .dl-svcourier__cta { align-self: stretch; width: 100%; justify-content: center; }
  .dl-svcourier__photo { min-height: 0; height: 220px; }
}

/* ============================================================
   БЛОГ — статья (single.php) и список (home.php)
   ============================================================ */
/* Hero статьи: indigo-градиент как у hero услуги, скруглённый низ */
.dl-article__hero {
  background: var(--gradient-card);
  border-radius: 0 0 40px 40px;
  color: var(--text-white);
}
.dl-article__hero-inner { padding-top: 48px; padding-bottom: 48px; } /* единый стандарт 48; контейнер общий 1180 — заголовок в линию с лого */
.dl-article__hero-inner > * { max-width: 800px; }
.dl-article__crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 24px; }
.dl-article__crumbs a { color: rgba(255,255,255,.6); }
.dl-article__crumbs a:hover { color: #fff; }
.dl-article__crumb-sep { opacity: .5; }
.dl-article__date { display: block; font-size: 14px; color: rgba(255,255,255,.55); margin-bottom: 16px; }
.dl-article__lead { margin-top: 20px; font-size: 20px; line-height: 28px; color: rgba(255,255,255,.8); max-width: 640px; }

/* Обложка статьи — приподнята на градиент */
.dl-article__cover { margin: -48px 0 0; border-radius: var(--radius-block); overflow: hidden; box-shadow: 0 20px 60px rgba(31,17,71,.18); }
.dl-article__cover img { width: 100%; height: auto; display: block; }

/* Тело статьи — типографика the_content() из редактора WP */
.dl-article__body { max-width: 760px; margin: 0 auto; padding: 48px 0 0; font-size: 18px; line-height: 28px; color: var(--text-primary); }
.dl-article__body > *:first-child { margin-top: 0; }
.dl-article__body > *:last-child { margin-bottom: 0; }
/* page.php: контейнер секции уже даёт 48 сверху — второй паддинг не нужен */
.dl-page__body { padding-top: 0; }
.dl-article__body p { margin: 0 0 20px; }
.dl-article__body h2 { font-size: 32px; font-weight: 600; line-height: 38px; margin: 40px 0 16px; color: var(--text-primary); }
.dl-article__body h3 { font-size: 24px; font-weight: 600; line-height: 30px; margin: 32px 0 12px; color: var(--text-primary); }
.dl-article__body ul, .dl-article__body ol { margin: 0 0 20px; padding-left: 24px; }
.dl-article__body li { margin-bottom: 8px; }
.dl-article__body a { color: var(--text-accent-2); text-decoration: underline; }
.dl-article__body img { max-width: 100%; height: auto; border-radius: var(--radius-block); margin: 24px 0; }
.dl-article__body figure { margin: 24px 0; }
.dl-article__body figcaption { font-size: 14px; color: var(--text-secondary); margin-top: 8px; text-align: center; }
.dl-article__body blockquote {
  margin: 24px 0; padding: 16px 24px; border-left: 3px solid var(--background-orange);
  background: var(--background-secondary); border-radius: 0 12px 12px 0; font-size: 18px; color: var(--text-primary);
}
.dl-article__body blockquote p:last-child { margin-bottom: 0; }
/* Адаптивное видео (ВК/YouTube oEmbed → iframe) */
.dl-article__body iframe,
.dl-article__body .wp-block-embed__wrapper iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-block); margin: 24px 0; display: block; }
.dl-article__body .wp-block-embed { margin: 24px 0; }
/* Таблицы в теле статьи */
.dl-article__body table, .dl-article__body .wp-block-table table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 16px; }
.dl-article__body thead { background: var(--background-secondary); }
.dl-article__body th { padding: 12px 16px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--colors-neutral-200); }
.dl-article__body td { padding: 12px 16px; border-bottom: 1px solid var(--colors-neutral-100); }
.dl-article__body tbody tr:hover { background: var(--background-secondary); }
.dl-article__body .wp-block-table figcaption { text-align: center; }

/* Галерея (до/после и пр.) — сетка */
.dl-article__body .wp-block-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0; }
.dl-article__body .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.dl-article__body .wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-block); margin: 0; }
.dl-article__body .wp-block-gallery figure { margin: 0; }

/* Код */
.dl-article__body code { background: var(--background-secondary); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: .9em; }
.dl-article__body pre { background: var(--background-secondary); padding: 16px; border-radius: var(--radius-block); overflow-x: auto; margin: 24px 0; }
.dl-article__body pre code { background: none; padding: 0; }

/* Акценты текста */
.dl-article__body strong, .dl-article__body b { font-weight: 700; }
.dl-article__body em, .dl-article__body i { font-style: italic; }
.dl-article__body del { text-decoration: line-through; opacity: .6; }
.dl-article__body ins, .dl-article__body u { text-decoration: underline; }
.dl-article__body mark { background: var(--background-tonal-orange); padding: 0 4px; border-radius: 3px; }

/* Разделитель и списки определений */
.dl-article__body hr, .dl-article__body .wp-block-separator { border: none; height: 1px; background: var(--colors-neutral-200); margin: 32px 0; }
.dl-article__body dl { margin: 0 0 20px; }
.dl-article__body dt { font-weight: 600; margin-top: 12px; }
.dl-article__body dd { margin: 4px 0 0 24px; color: var(--text-secondary); }

/* Вертикальный клип ВК (9:16) — по галочке «вертикальный клип» в настройках статьи */
.dl-article__body--vk-vertical .dl-vk-video { display: flex; justify-content: center; }
.dl-article__body--vk-vertical .dl-vk-video iframe {
  aspect-ratio: 9 / 16; width: auto; max-width: 360px; height: min(80vh, 640px);
}

/* Заглушка карточки без фото — brand-градиент + бледный логотип */
.dl-blog__photo--empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-card);
}
.dl-blog__photo-logo { width: 96px; height: auto; opacity: .35; filter: brightness(0) invert(1); }

/* «Читайте также» */
.dl-article-more__title { margin-bottom: 24px; }.dl-article-more__grid,
.dl-bloglist__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Список блога */
.dl-bloglist__grid .dl-blog__card { flex: none; }
.dl-bloglist__pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.dl-bloglist__pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px;
  border-radius: var(--radius-btn); background: var(--background-secondary); color: var(--text-primary); font-weight: 500;
}
.dl-bloglist__pager .page-numbers.current { background: var(--background-orange); color: #fff; }
.dl-bloglist__pager a.page-numbers:hover { background: var(--colors-neutral-200); }

@media (max-width: 640px) {
  .dl-article__hero-inner { padding-top: 32px; padding-bottom: 32px; }
  .dl-article__title { font-size: 32px; line-height: 36px; }
  .dl-article__lead { font-size: 18px; line-height: 24px; }
  .dl-article__cover { margin-top: -24px; }
  .dl-article__body { padding-top: 32px; font-size: 17px; line-height: 26px; }
  .dl-page__body { padding-top: 0; } /* page.php: контейнер уже даёт 40 */
  .dl-article__body h2 { font-size: 26px; line-height: 30px; }
  .dl-article__body h3 { font-size: 22px; line-height: 26px; }
  .dl-article-more__grid, .dl-bloglist__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   СТРАНИЦА ЦЕНЫ — прайс-лист по категориям
   ============================================================ */
.dl-pricelist .dl-container { display: flex; flex-direction: column; gap: 40px; }
.dl-pricecat { }
.dl-pricecat__title {
  font-size: 28px; font-weight: 600; line-height: 32px; color: var(--text-primary);
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--colors-indigo-100);
}
.dl-pricetable { display: flex; flex-direction: column; }
.dl-pricerow {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 0; border-bottom: 1px solid var(--colors-neutral-200);
}
.dl-pricerow:last-child { border-bottom: none; }
.dl-pricerow__name { font-size: 17px; line-height: 24px; color: var(--text-primary); flex: 0 1 auto; }
.dl-pricerow__dots { flex: 1 1 auto; border-bottom: 1px dotted var(--colors-neutral-300); transform: translateY(-4px); min-width: 24px; }
.dl-pricerow__price { font-size: 17px; font-weight: 600; line-height: 24px; color: var(--colors-indigo-600); white-space: nowrap; flex: 0 0 auto; }

.dl-pricenote {
  background: var(--background-tonal-indigo); border-radius: var(--radius-block);
  padding: 28px 32px; margin-top: 8px;
}
.dl-pricenote__title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 0 0 16px; }
.dl-pricenote__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.dl-pricenote__list li { position: relative; padding-left: 26px; font-size: 16px; line-height: 23px; color: var(--colors-neutral-900); }
.dl-pricenote__list li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  border-radius: 0 4px 4px 4px; background: var(--colors-orange-400);
}

/* тёмная шапка для обычных страниц (как у статьи) — переиспользуем dl-article__hero */

@media (max-width: 640px) {
  .dl-pricelist .dl-container { gap: 32px; }
  .dl-pricecat__title { font-size: 22px; line-height: 26px; }
  .dl-pricerow { flex-wrap: wrap; gap: 2px 8px; padding: 10px 0; }
  .dl-pricerow__name { flex: 1 1 70%; font-size: 15px; line-height: 21px; }
  .dl-pricerow__dots { display: none; }
  .dl-pricerow__price { font-size: 15px; }
  .dl-pricenote { padding: 22px 18px; }
  .dl-pricenote__list li { font-size: 15px; line-height: 21px; }
}

/* ============================================================
   СТРАНИЦА КОНТАКТЫ
   ============================================================ */
.dl-contacts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 48px; align-items: start; }
.dl-contacts__card {
  background: var(--background-secondary); border-radius: var(--radius-block); padding: 28px 32px;
}
.dl-contacts__label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); margin-bottom: 12px; }
.dl-contacts__phone { display: inline-block; font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--colors-indigo-600); }
.dl-contacts__phone:hover { color: var(--colors-indigo-700); }
.dl-contacts__hint { margin-top: 10px; font-size: 15px; line-height: 21px; color: var(--text-secondary); }
.dl-contacts__messengers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dl-contacts__mess {
  padding: 9px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--colors-neutral-200);
  font-size: 15px; font-weight: 500; color: var(--text-primary);
}
.dl-contacts__mess:hover { border-color: var(--colors-indigo-400); color: var(--colors-indigo-600); }
.dl-contacts__schedule { font-size: 22px; font-weight: 600; color: var(--text-primary); }
.dl-contacts__req { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 24px; color: var(--text-primary); }
.dl-contacts__req a { color: var(--text-primary); text-decoration: underline; }
.dl-contacts__req a:hover { color: var(--icon-primary); }
.dl-contacts__form-card {
  background: var(--gradient-card); /* единый токен-градиент бренда, как у всех синих карточек */
  border-radius: var(--radius-block); padding: 36px 36px 40px; color: #fff; position: sticky; top: 88px;
}
.dl-contacts__form-title { font-size: 28px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.dl-contacts__form-sub { font-size: 16px; line-height: 23px; color: rgba(255,255,255,.8); margin: 6px 0 22px; } /* h2↔подпись = 16 */

@media (max-width: 860px) {
  .dl-contacts__grid { grid-template-columns: 1fr; }
  .dl-contacts__form-card { position: static; }
}
@media (max-width: 640px) {
  .dl-contacts__card { padding: 22px 18px; }
  .dl-contacts__phone { font-size: 28px; }
  .dl-contacts__form-card { padding: 26px 18px 30px; }
  .dl-contacts__form-title { font-size: 24px; }
}

/* ===== Контакты: карта приёмных пунктов и производства ===== */
.dl-ctmap__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.dl-ctmap__lead { margin-top: 8px; }
.dl-ctmap__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; }
.dl-ctmap__map { height: 560px; border-radius: var(--radius-block); overflow: hidden; border: 1px solid var(--colors-neutral-200); background: var(--colors-neutral-100); }
.dl-ctmap__panel { display: flex; flex-direction: column; gap: 14px; }
.dl-ctmap__info { border: 1px solid var(--colors-indigo-600); background: var(--colors-indigo-050); border-radius: var(--radius-block); padding: 24px; }
.dl-ctmap__tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  border-radius: 999px; padding: 5px 12px; background: var(--colors-indigo-100); color: var(--colors-indigo-700); }
.dl-ctmap__tag.is-ceh { background: var(--colors-orange-050); color: var(--colors-orange-500); }
.dl-ctmap__name { font-size: 24px; font-weight: 600; margin: 14px 0 6px; }
.dl-ctmap__addr { color: var(--text-secondary); font-size: 15px; line-height: 1.4; }
.dl-ctmap__row { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; }
.dl-ctmap__row svg { width: 16px; height: 16px; color: var(--colors-indigo-600); flex: none; }
.dl-ctmap__hint { margin-top: 12px; background: var(--background-primary); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.dl-ctmap__fallback { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); padding: 24px; text-align: center; }
@media (max-width: 900px) {
  .dl-ctmap__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .dl-ctmap__grid { grid-template-columns: 1fr; }
  .dl-ctmap__map { height: 360px; }
}



.dl-contacts__geo-title { font-size: 28px; line-height: 32px; margin-bottom: 16px; }

/* Кастомный дропдаун выбора точки (карта контактов) */
.dl-ctmap__dd { position: relative; }
.dl-ctmap__dd-btn { width: 100%; display: flex; align-items: center; gap: 10px; font: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--colors-neutral-200); border-radius: 14px; padding: 14px 16px; background: var(--background-primary); }
.dl-ctmap__dd-btn:hover { border-color: var(--colors-indigo-400); }
.dl-ctmap__dd-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.dl-ctmap__dd-addr { color: var(--text-secondary); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-ctmap__dd-chev { width: 16px; height: 16px; color: var(--colors-indigo-600); margin-left: auto; flex: none; }
.dl-ctmap__dd-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 200; background: var(--background-primary);
  border: 1px solid var(--colors-neutral-200); border-radius: 16px; box-shadow: 0 12px 40px rgba(9,9,11,.12); padding: 8px;
  max-height: min(560px, 70vh); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.dl-ctmap__dd-city { font-size: 12px; font-weight: 600; letter-spacing: .48px; text-transform: uppercase; color: var(--colors-orange-500); padding: 12px 12px 6px; }
.dl-ctmap__dd-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; font: inherit; cursor: pointer;
  border: 0; background: none; border-radius: 10px; padding: 9px 12px; }
.dl-ctmap__dd-item:hover { background: var(--colors-indigo-050); }
.dl-ctmap__dd-item.is-active { background: var(--colors-indigo-100); }
.dl-ctmap__dd-item .dl-ctmap__dd-addr { white-space: normal; }

/* ============================================================
   АРХИВ КАТЕГОРИИ УСЛУГ (/uslugi/<cat>/) — taxonomy-service_cat.php
   Плашки услуг с маскотами вместо дефолтного списка с датами.
   ============================================================ */
.dl-svcat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dl-svcat__card {
  display: flex; align-items: center; gap: 24px;
  background: var(--background-secondary);
  border-radius: var(--radius-block);
  padding: 24px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.dl-svcat__card:hover { background: var(--colors-neutral-200); transform: translateY(-2px); }
.dl-svcat__mascot { flex: none; width: 128px; height: 150px; display: flex; align-items: center; justify-content: center; }
.dl-svcat__mascot img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.dl-svcat__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.dl-svcat__title { font-size: 20px; line-height: 24px; font-weight: 600; color: var(--text-primary); }
.dl-svcat__text { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.dl-svcat__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; color: var(--icon-primary); }
.dl-svcat__more .dl-ico { width: 24px; height: 24px; }
@media (max-width: 900px) { .dl-svcat { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .dl-svcat__card { gap: 16px; padding: 20px; }
  .dl-svcat__mascot { width: 96px; height: 116px; }
}

/* Заглушка «готовим фото» — там, где живое фото этапа/курьера ещё не снято */
.dl-photo-stub {
  height: 100%; min-height: 320px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 32px; text-align: center;
  background: var(--background-secondary); color: var(--text-secondary);
  font-size: 14px; line-height: 20px;
}
.dl-photo-stub svg { width: 44px; height: 44px; opacity: 0.45; }
.dl-photo-stub span { max-width: 300px; }
@media (max-width: 640px) { .dl-photo-stub { min-height: 220px; padding: 20px; } }

/* ===== Мобильный аудит 06.09.2026 ===== */
/* Инлайн-форма: длинная кнопка («Узнать стоимость», «Перезвоните мне») ужимала поле до «Введите те…».
   Даём полю минимум 150px; если вместе не влезают — кнопка переносится под поле на всю ширину. */
.dl-cta-form { flex-wrap: wrap; }
.dl-cta-form input { flex: 1 1 150px; min-width: 150px; }
.dl-cta-form button, .dl-cta-form .dl-btn { flex: 1 0 auto; }
/* Страница 404 */
.dl-notfound { padding-top: 32px; }
.dl-notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.dl-notfound__phone a { color: var(--text-accent-2); font-weight: 600; white-space: nowrap; }
/* Мобильное меню: город — ссылка к блоку «Работаем в …», где можно выбрать другой */
.dl-mobnav__city { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none; }
.dl-mobnav__city-hint { font-size: 14px; color: var(--text-accent-2); white-space: nowrap; }
@media (max-width: 640px) {
  /* Главная: звёзды hero ложились на текст согласия под формой */
  .dl-hero .dl-d--star { opacity: 0.3; }
  /* «Безопасно для всей семьи»: слово ГИПОАЛЛЕРГЕННЫЕ не переносится и ломало сетку из 3 колонок —
     на телефоне карточки идут столбиком, иконка слева */
  .dl-svsafe__chips { grid-template-columns: 1fr; }
  .dl-svsafe__chip { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 14px 16px; overflow-wrap: anywhere; }
  /* Допуслуги: длинное название выталкивало цену за край карточки */
  .dl-svprice__extra-row { flex-wrap: wrap; }
  .dl-svprice__extra-name { white-space: normal; flex: 1 1 60%; }
  .dl-svprice__extra-line { min-width: 24px; }
  .dl-svprice__extra { padding: 24px 20px; }
}