/* ============================================================
   Prmaket2 — DESKTOP TEST  (min-width:1024)
   Грузится ТОЛЬКО на типе ProjectsIndexPageDesktopTest
   (/makety-zhilyh-kompleksov-test/). Общий new_styles.css не
   затрагивается; в base.html — только пустые хуки блоков.

   Правки — поэлементно по плану владельца.
   ============================================================ */

/* Desktop-элементы шапки есть в DOM на всех ширинах копии — ниже
   десктопа прячем (там работает мобильная шапка + бургер). */
body.desktop-test .dt-tagline,
body.desktop-test .dt-contacts,
body.desktop-test .dt-nav-row,
body.desktop-test .dt-calc,
body.desktop-test .dt-calc__heading,
body.desktop-test .dt-ex,
body.desktop-test .dt-layouts,
body.desktop-test .dt-lighting,
body.desktop-test .dt-control { display: none; }

/* Десктоп-модалка контакта — скрыта до открытия (и всегда на мобиле). */
body.desktop-test .dt-modal { display: none; }

/* ============================================================
   ШАГ 1 — ШАПКА (desktop)
   Ряд 1 (12-кол сетка, 1360): логотип · описание · контакты · EN
   Ряд 2: горизонтальное меню на всю ширину плашки
   ============================================================ */
@media (min-width: 1024px) {

  /* --- Плашка: 2 ряда на 12-колоночной сетке, ширина 1360 --- */
  body.desktop-test .m-header {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
    row-gap: 10px;
    align-items: center;
    max-width: 1280px;
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
    /* Центрируем так же, как контент (margin:auto в области viewport−скроллбар),
       а НЕ через left:50% — иначе при классическом скроллбаре шапка съезжает
       относительно контента на ~половину скроллбара. */
    left: 0;
    right: 0;
    transform: none;
    margin-left: auto;
    margin-right: auto;
  }
  /* Шапка не исчезает: отменяем авто-скрытие при скролле (без translateX теперь) */
  body.desktop-test .m-header.hide { transform: none; }

  /* Высота 2-рядной шапки фиксированная (атомы больше не растут от колонки) */
  body.desktop-test { --dt-header-h: 108px; }
  /* Реальная высота fixed-шапки ~130px > --dt-header-h(108) → крошки уезжали под
     шапку и были невидимы на всех десктоп-страницах. +32px даёт клиренс под шапку
     с ~10px воздуха. Крошки восстановлены 2026-07-26. */
  body.desktop-test #breadcrumbs_container { margin-top: calc(var(--dt-header-h) + 32px); }

  /* Ряд 1 — раскладка по колонкам (сетка задаёт ГДЕ, не размер).
     Спаны: логотип 2 · описание 7 · контакты 2 · EN 1 = 12 */
  body.desktop-test .m-header__logo    { grid-column: 1 / span 2; padding: 0; }
  body.desktop-test .dt-tagline        { grid-column: 3 / span 7; display: block; }
  body.desktop-test .dt-contacts       { grid-column: 10 / span 2; display: flex; }
  body.desktop-test .m-header__actions { grid-column: 12 / span 1; padding: 0; justify-content: flex-end; }

  /* --- Фикс-размеры атомов: НЕ по ширине колонки, а по 8pt/тач-таргету --- */
  /* Логотип: фиксированная высота, левый край остаётся на линии сетки */
  body.desktop-test .m-header__logo img { height: 56px; width: auto; }
  /* Кнопка EN: тач-таргет 44, текст нормального размера (было ~60px от колонки) */
  body.desktop-test .m-header__btn--lang { width: 44px; height: 44px; }
  body.desktop-test .m-header__btn--lang .m-header__btn-face--en {
    width: 44px; height: 44px;   /* сам "face" тоже 44 (иначе торчит на ~100px) */
    font-size: 16px;
    border-radius: 10px;          /* как у других элементов */
  }
  /* Бургер на десктопе убираем */
  body.desktop-test .m-header__btn--menu { display: none; }

  /* --- Описание (tagline) --- */
  body.desktop-test .dt-tagline {
    font-size: 16px;
    line-height: 1.4;
    color: #444;
  }
  body.desktop-test .dt-tagline b { color: #222; }

  /* --- Контакты: телефон крупно, email под ним --- */
  body.desktop-test .dt-contacts {
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 2px;
  }
  body.desktop-test .dt-contacts__phone {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
    white-space: nowrap;
  }
  body.desktop-test .dt-contacts__email {
    font-size: 20px;               /* как у телефона */
    color: #8CC540;
    text-decoration: none;
    white-space: nowrap;
  }
  body.desktop-test .dt-contacts__phone:hover,
  body.desktop-test .dt-contacts__email:hover { text-decoration: underline; }

  /* --- Ряд 2: меню в колонках 2–11 (крайние исключены), на 12-сетке --- */
  body.desktop-test .dt-nav-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
    grid-column: 1 / -1;
    border-top: 1px solid #eee;
    padding-top: 8px;
  }
  /* nav занимает все колонки 1..12 (на всю ширину плашки) */
  body.desktop-test .m-main-nav { grid-column: 1 / -1; }
  /* Пункты — по ширине своего текста, равные промежутки между ними.
     space-between сам считает ширину каждого блока — px вручную не нужны.
     Первый прижат к линии кол.2, последний — к линии кол.11. */
  body.desktop-test .m-main-nav__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  body.desktop-test .m-main-nav__item { position: relative; }
  body.desktop-test .m-main-nav__link {
    display: inline-block;
    padding: 6px 0;
    color: #222;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  body.desktop-test .m-main-nav__link:hover { color: #8CC540; }

  /* Выпадающие подпункты */
  body.desktop-test .m-main-nav__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-radius: 10px;
    z-index: 1100;
  }
  body.desktop-test .m-main-nav__item--has-sub:hover .m-main-nav__dropdown { display: block; }
  body.desktop-test .m-main-nav__dropdown-link {
    display: block;
    padding: 8px 16px;
    color: #222;
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
  }
  body.desktop-test .m-main-nav__dropdown-link:hover { background: #f4f7ee; color: #8CC540; }

  /* ============================================================
     КОНТЕНТ под шапкой: контейнер 1280 (снята заглушка 1023).
     main остаётся блоком; полноширинные блоки = ширина контента (1224).
     Стат-строка (и позже форма) — своя 12-сетка внутри блока.
     ============================================================ */
  /* КОРЕНЬ заглушки — сам <body max-width:1023>. Он зажимал ВЕСЬ контент;
     #page/#content/main были бесполезны, пока body 1023. Снимаем на body. */
  body.desktop-test { max-width: 1280px !important; margin-left: auto; margin-right: auto; }
  /* !important — осознанно: разблокировка хардкод-заглушки #page/#content/main. */
  body.desktop-test #page    { max-width: 1280px !important; }
  body.desktop-test #content { max-width: 1280px !important; }
  body.desktop-test main     { max-width: 1280px !important; }

  /* Хлебные крошки: 1–12, влево */
  body.desktop-test #breadcrumbs_container { max-width: none; }

  /* Заголовок H1: 1–12, по центру */
  body.desktop-test .name_main { max-width: none; text-align: center; }

  /* Главная (root, без крошек): распорка `main > .name_main:first-child` ставит H1 на
     top136, а на листингах (крошки #breadcrumbs_container идут первыми) H1 на top149.
     Даём +13px, чтобы первый разворот главной совпал с листингами (Д10, 2026-07-26).
     `:first-child` срабатывает ТОЛЬКО на root — на листингах .name_main не первый
     ребёнок main, поэтому листинги не затрагиваются. */
  body.desktop-test main > .name_main:first-child {
    margin-top: calc(var(--grid-column-width) + 24px + 12px + 13px);
  }

  /* «Преимущества» (стат-строка): своя 12-сетка, лево 1–6 / право 7–12 */
  body.desktop-test .maket-description:has(.page-stat-line) {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
  }
  body.desktop-test .maket-description .page-stat-line:nth-child(1) { grid-column: 1 / span 6; text-align: left; }
  body.desktop-test .maket-description .page-stat-line:nth-child(2) { grid-column: 7 / span 6; text-align: right; }

  /* Фото (hero): 1–12, соотношение 16:9 (ширина:высота), картинка cover.
     Слайд делаем блоком и не растягиваем по высоте track (align-self:start),
     чтобы высоту задавал именно aspect-ratio, а не flex-stretch. */
  body.desktop-test .m-photo-slider { max-width: none; width: 100%; }
  body.desktop-test .m-photo-slider:not(.lighting-slider) .slider__slide {
    display: block;
    align-self: start;
    aspect-ratio: 16 / 9;
  }
  body.desktop-test .m-photo-slider .slider__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Логотипы «Нам доверяют»: 1–12, заголовок влево */
  body.desktop-test .clients-ribbon { max-width: none; }
  body.desktop-test .clients-ribbon__title { text-align: left; }

  /* Форма расчёта после логотипов: 12-сетка, элементы привязаны к колонкам.
     Старые action-buttons на десктопе прячем (в мокапе вместо них — форма). */
  body.desktop-test .action-buttons { display: none; }
  body.desktop-test .dt-calc {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
    row-gap: 16px;
    align-items: center;
    margin: 24px 0 32px;
  }
  /* Отдельный заголовок формы — как «Нам доверяют»/«Примеры работ» (DIN Pro 33/400) */
  body.desktop-test .dt-calc__heading {
    display: block;
    font-family: 'DIN Pro', sans-serif;
    font-weight: 400;
    font-size: 33px;
    color: #414142;
    margin: 24px 0 12px;
    text-align: left;
  }
  body.desktop-test .dt-calc__field--name  { grid-column: 1 / span 4; }
  body.desktop-test .dt-calc__field--phone { grid-column: 5 / span 4; }
  body.desktop-test .dt-calc__field {
    height: 48px;
    padding: 0 16px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
  }
  body.desktop-test .dt-calc__field:focus { outline: none; border-color: #8CC540; }
  body.desktop-test .dt-calc__submit {
    grid-column: 9 / span 4;
    height: 48px;
    background: #8CC540;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
  }
  body.desktop-test .dt-calc__submit:hover { background: #7ab330; }
  /* Согласие — под кнопкой (те же колонки 9–12) */
  body.desktop-test .dt-calc__consent {
    grid-column: 9 / span 4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.35;
    color: #666;
  }
  body.desktop-test .dt-calc__consent input { margin-top: 2px; flex: 0 0 auto; }

  /* ============================================================
     ШАГ 8 — «Примеры работ»: ДВА варианта стопкой (A/B) для показа
     клиенту. Исходный слайдер (.examples-section) на десктопе скрыт;
     на мобиле — наоборот (.dt-ex скрыт выше, вне @media).
     ============================================================ */
  body.desktop-test .examples-section { display: none; }
  body.desktop-test .dt-ex { display: block; max-width: none; margin: 40px 0; }

  /* Подпись варианта — служебная плашка (только для теста/показа) */
  body.desktop-test .dt-ex__label {
    display: inline-block;
    background: #414142;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
  }
  /* Заголовок секции — как остальные (DIN Pro 33/400/#414142) */
  body.desktop-test .dt-ex__title {
    font-family: 'DIN Pro', sans-serif;
    font-weight: 400;
    font-size: 33px;
    color: #414142;
    margin: 0 0 20px;
    text-align: left;
  }

  /* ---------- Вариант A: витрина с наведением ---------- */
  /* Герой: фото кол.1–7 · инфо кол.8–12 */
  body.desktop-test .dt-exa__hero {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
    align-items: stretch;
    margin-bottom: 20px;
  }
  body.desktop-test .dt-exa__stage {
    grid-column: 1 / span 7;
    /* align-self:start — НЕ растягивать по высоте строки. Слайды position:absolute,
       поэтому у stage нет контентной высоты; при align-items:stretch (родитель) высота
       бралась из строки, а в standards-mode некоторых движков (Safari/WebKit) строка
       схлопывалась по короткой инфо-панели → stage тянулся вниз, а ширина падала из
       aspect-ratio → крошечное фото. Со start высота детерминированно = ширина(7 кол)×52/76
       во всех движках. Хрупкость жила с 55f3b22 (сборка Варианта A), проявилась после
       перехода quirks→standards (7ccfe51). */
    align-self: start;
    position: relative;
    /* Пропорция большого фото: 4:3 (проба 2026-07-20). Ширина — по сетке (кол.1–7 = 704px),
       высота = ширина × 3/4. Рендишн img — fill-760x520 (~3:2), object-fit:cover слегка
       подрежет по бокам; если 4:3 останется — подогнать рендишн под 4:3. */
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #f2f2f2;
  }
  body.desktop-test .dt-exa__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
  }
  body.desktop-test .dt-exa__slide.is-active { opacity: 1; visibility: visible; }
  body.desktop-test .dt-exa__img { width: 100%; height: 100%; object-fit: cover; display: block; }

  body.desktop-test .dt-exa__info {
    grid-column: 8 / span 5;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Панели наложены — активная показывается; высоту держит самая длинная */
  body.desktop-test .dt-exa__panel {
    grid-row: 1;
    grid-column: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  body.desktop-test .dt-exa__info { display: grid; }
  body.desktop-test .dt-exa__panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
  /* Заголовок/подзаголовок — как в Варианте B (зелёный title, серый subtitle,
     те же размеры): по требованию владельца отображение элементов A = B. */
  body.desktop-test .dt-exa__name {
    display: block;
    font-size: 18px;
    color: #8CC540;
    text-decoration: none;
    line-height: 1.25;
  }
  body.desktop-test .dt-exa__name:hover { text-decoration: underline; }
  body.desktop-test .dt-exa__subtitle {
    margin: 6px 0 0;
    font-size: 15px;
    color: #666;
    line-height: 1.35;
  }
  body.desktop-test .dt-exa__desc {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body.desktop-test .dt-exa__cta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
  }
  body.desktop-test .dt-exa__cta-primary {
    height: 48px;
    padding: 0 24px;
    background: #8CC540;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
  }
  body.desktop-test .dt-exa__cta-primary:hover { background: #7ab330; }
  body.desktop-test .dt-exa__cta-secondary {
    font-size: 16px;
    color: #414142;
    text-decoration: none;
    white-space: nowrap;
  }
  body.desktop-test .dt-exa__cta-secondary:hover { color: #8CC540; }

  /* Ряд миниатюр: карточки как в Варианте B (та же рамка/размер/типографика),
     но кликабельны — меняют главный макет; активная подсвечена зелёным кольцом.
     ВСЕ миниатюры в ОДИН ряд без переноса (grid-auto-flow: column) — сколько бы
     примеров ни было (было repeat(4,1fr) → 5-я карточка уезжала во 2-й ряд). */
  body.desktop-test .dt-exa__thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    column-gap: var(--grid-gutter);
  }
  body.desktop-test .dt-exa__thumb {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }
  body.desktop-test .dt-exa__thumb-media { display: block; }
  body.desktop-test .dt-exa__thumb-img {
    width: 100%;
    aspect-ratio: 42 / 30;
    object-fit: cover;
    display: block;
  }
  body.desktop-test .dt-exa__thumb-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 16px 20px;
  }
  body.desktop-test .dt-exa__thumb-name { font-size: 18px; color: #8CC540; line-height: 1.25; }
  body.desktop-test .dt-exa__thumb-subtitle { font-size: 15px; color: #666; line-height: 1.35; }
  body.desktop-test .dt-exa__thumb:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.10);
    transform: translateY(-2px);
  }
  body.desktop-test .dt-exa__thumb.is-active {
    box-shadow: 0 0 0 2px #8CC540;
    border-color: #8CC540;
  }

  /* ---------- Вариант B: сетка карточек + CTA-карточка ---------- */
  body.desktop-test .dt-exb__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  body.desktop-test .dt-exb__all {
    font-size: 16px;
    color: #414142;
    text-decoration: none;
    white-space: nowrap;
  }
  body.desktop-test .dt-exb__all:hover { color: #8CC540; }
  body.desktop-test .dt-exb {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--grid-gutter);
  }
  body.desktop-test .dt-exb__card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }
  body.desktop-test .dt-exb__card:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.10);
    transform: translateY(-2px);
  }
  body.desktop-test .dt-exb__img {
    width: 100%;
    aspect-ratio: 42 / 30;
    object-fit: cover;
    display: block;
  }
  body.desktop-test .dt-exb__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 16px 20px;
  }
  body.desktop-test .dt-exb__name {
    font-size: 18px;
    color: #8CC540;
    line-height: 1.25;
  }
  body.desktop-test .dt-exb__subtitle {
    font-size: 15px;
    color: #666;
    line-height: 1.35;
  }
  /* CTA-карточка — пунктирная рамка, контент по центру */
  body.desktop-test .dt-exb__cta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 20px;
    border: 2px dashed #b7d98a;
    border-radius: 12px;
    text-align: center;
  }
  body.desktop-test .dt-exb__cta-icon { display: block; }
  body.desktop-test .dt-exb__cta-count {
    font-size: 20px;
    line-height: 1.3;
    color: #414142;
  }
  body.desktop-test .dt-exb__cta-count b { font-weight: 700; }
  body.desktop-test .dt-exb__cta-portfolio,
  body.desktop-test .dt-exb__cta-calc {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
  }
  body.desktop-test .dt-exb__cta-portfolio {
    background: #8CC540;
    color: #fff;
    border: none;
  }
  body.desktop-test .dt-exb__cta-portfolio:hover { background: #7ab330; }
  body.desktop-test .dt-exb__cta-calc {
    background: #fff;
    color: #8CC540;
    border: 1px solid #8CC540;
  }
  body.desktop-test .dt-exb__cta-calc:hover { background: #f4f7ee; }

  /* ============================================================
     ШАГ 9 — «Как планировка квартир…»: десктоп-блок .dt-layouts.
     Заголовок типа и описание — СЛЕВА (как все заголовки), фото —
     на все 12 колонок (полноширинный баннер). Оригинальный
     .layout-methods-section на десктопе скрыт; на мобиле — наоборот
     (.dt-layouts скрыт вне @media). JS-автопрокрутка — в extra_js.
     ============================================================ */
  body.desktop-test .layout-methods-section { display: none; }
  body.desktop-test .dt-layouts { display: block; max-width: none; margin: 40px 0; }

  body.desktop-test .dt-layouts__title {
    font-family: 'DIN Pro', sans-serif;
    font-weight: 400;
    font-size: 33px;
    color: #414142;
    margin: 0 0 12px;
    text-align: left;
  }
  body.desktop-test .dt-layouts__intro {
    max-width: 900px;
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    text-align: left;
  }
  /* Пилюли — горизонтальный ряд слева */
  body.desktop-test .dt-layouts__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin: 0 0 24px;
  }

  /* Активный тип; остальные скрыты */
  body.desktop-test .dt-layouts__panel { display: none; }
  body.desktop-test .dt-layouts__panel.is-active { display: block; }

  /* Заголовок типа и описание — слева, во всю ширину */
  body.desktop-test .dt-layouts__subtitle {
    margin: 0 0 8px;
    font-family: 'DIN Pro', sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #222;
    line-height: 1.25;
    text-align: left;
  }
  body.desktop-test .dt-layouts__desc {
    max-width: 900px;
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
    color: #555;
    text-align: left;
  }
  /* Фото — на все 12 колонок, полноширинный баннер 16:9 */
  body.desktop-test .dt-layouts__media { width: 100%; }
  body.desktop-test .dt-layouts__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 12px;
  }

  /* ============================================================
     ШАГ 10 — «Виды подсветки»: сетка кружков 2 в ряд × 3 ряда
     (выбор владельца 2026-07-15). Все 6 элементов. Оригинальный
     слайдер на десктопе скрыт; на мобиле — наоборот (.dt-lighting
     скрыт выше, вне @media). Кружок/заголовок переиспользуют базовые
     .lighting-slider__* (визуал: зелёная рамка, radius 50%, шрифт),
     dt-модификаторы — только раскладка/размер под сетку.
     ============================================================ */
  body.desktop-test .lighting-section--circles { display: none; }
  body.desktop-test .dt-lighting { display: block; max-width: none; margin: 40px 0; }

  /* Заголовок секции — как остальные (DIN Pro 33/400/#414142, слева) */
  body.desktop-test .dt-lighting__title {
    font-family: 'DIN Pro', sans-serif;
    font-weight: 400;
    font-size: 33px;
    color: #414142;
    margin: 0 0 12px;
    text-align: left;
  }
  body.desktop-test .dt-lighting__intro {
    max-width: 900px;
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    text-align: left;
  }

  /* Сетка кружков — 2 колонки на 12-сетке (каждый кружок = 6 грид-колонок, ~600px). */
  body.desktop-test .dt-lighting__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--grid-gutter);
    row-gap: 32px;
  }

  body.desktop-test .dt-lighting__item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Подпись над кружком: шрифт от базового .lighting-slider__title (24px),
     резервируем 2 строки, чтобы кружки в ряду были на одной линии. */
  body.desktop-test .dt-lighting__name {
    min-height: 60px;
    margin: 0 0 12px;
  }
  /* Кружок заполняет свою грид-ячейку (квадрат); визуал — от базового класса */
  body.desktop-test .dt-lighting__circle {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  /* ============================================================
     ШАГ 11 — «Способы управления подсветкой»: десктоп-блок .dt-control
     по образцу .dt-layouts. Чипы-типы слева; активная панель =
     заголовок + описание слева + фото на все 12 колонок (16:9 баннер).
     Автопереключение 10с (JS в extra_js, общий помощник с dt-layouts).
     Оригинальный .control-methods-section на десктопе скрыт; на мобиле
     наоборот (.dt-control скрыт выше, вне @media).
     ============================================================ */
  body.desktop-test .control-methods-section { display: none; }
  body.desktop-test .dt-control { display: block; max-width: none; margin: 40px 0; }

  body.desktop-test .dt-control__title {
    font-family: 'DIN Pro', sans-serif;
    font-weight: 400;
    font-size: 33px;
    color: #414142;
    margin: 0 0 24px;
    text-align: left;
  }
  /* Пилюли — горизонтальный ряд слева */
  body.desktop-test .dt-control__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin: 0 0 24px;
  }

  /* Активный тип; остальные скрыты */
  body.desktop-test .dt-control__panel { display: none; }
  body.desktop-test .dt-control__panel.is-active { display: block; }

  /* Заголовок типа и описание — слева, во всю ширину */
  body.desktop-test .dt-control__subtitle {
    margin: 0 0 8px;
    font-family: 'DIN Pro', sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #222;
    line-height: 1.25;
    text-align: left;
  }
  body.desktop-test .dt-control__desc {
    max-width: 900px;
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
    color: #555;
    text-align: left;
  }
  /* Фото — на все 12 колонок, полноширинный баннер 16:9 */
  body.desktop-test .dt-control__media { width: 100%; }
  body.desktop-test .dt-control__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 12px;
  }

  /* ============================================================
     ШАГ 12 — Портфолио (#portfolio-block): сетка 3 в ряд (фикс).
     База (new_styles, планшет+) даёт 2 колонки — переопределяем по
     id+класс (выше по специфичности).
     Начальный показ адаптивный: --initial-count читает residential-v3.js
     (initPortfolioShowMore). На десктопе 6 (2 полных ряда по 3);
     ниже 1024 переменная не задана → JS падает на data-initial-count=4.
     На проде переменной нет нигде → поведение как было.
     ============================================================ */
  body.desktop-test #portfolio-block { --initial-count: 6; --reveal-count: 6; }
  body.desktop-test #portfolio-block .similar-projects__gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ============================================================
     ШАГ 13 — ХВОСТ СТРАНИЦЫ (trust / delivery / reviews / футер)
     + замена CTA «Рассчитать стоимость» в портфолио на форму.
     Секции внутри <main> (padding 28) → max-width:none = 1224@108
     (как hero). Футер — сосед main; max-width:none = фон на всю
     ширину, а inner padding 28 уже даёт контент 108/1224.
     ============================================================ */

  /* CTA портфолио → скрыт, вместо него инжектится dt-calc форма (в extra_js) */
  body.desktop-test .similar-projects__cta { display: none; }

  /* Хвост-секции — на всю ширину контента (снимаем max-width var(--grid-content-width)) */
  body.desktop-test .trust-section,
  body.desktop-test .delivery-section,
  body.desktop-test .reviews-section { max-width: none; }

  /* trust: 4 плитки в ряд на 12-сетке */
  body.desktop-test .trust-section__grid { grid-template-columns: repeat(4, 1fr); }
  body.desktop-test .trust-feature { min-height: 0; padding: 24px 18px; gap: 12px; }

  /* delivery: текст во всю ширину, кегль как у dt-интро, ограничим строку */
  body.desktop-test .delivery-section__text { max-width: 900px; font-size: 16px; line-height: 1.5; }

  /* reviews: 3 в ряд (выбор владельца) */
  body.desktop-test .reviews-section__list { grid-template-columns: repeat(3, 1fr); }
  /* Адаптивная подгрузка отзывов (как у карточек): десктоп 3+3 (полный ряд),
     мобайл 2+2 (переменные не заданы → data-initial/reveal-count=2).
     Читает initReviewsSection в residential-v3.js. */
  body.desktop-test .reviews-section { --initial-count: 3; --reveal-count: 3; }

  /* Футер: фон на всю ширину, контент по сетке (inner padding 28 = 108/1224).
     Раскладка: 4 nav-группы (Каталог/Выставки/Компания/Сервис) + соцсети в ряд;
     реквизиты/подпись — во всю ширину ниже. */
  body.desktop-test .m-footer { max-width: none; }
  body.desktop-test .m-footer__inner {
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--grid-gutter);
    row-gap: 24px;
    padding-top: 32px;
    padding-bottom: 24px;
  }
  body.desktop-test .m-footer__nav-group:nth-child(1) { grid-column: 1; grid-row: 1; }
  body.desktop-test .m-footer__nav-group:nth-child(2) { grid-column: 2; grid-row: 1; }
  body.desktop-test .m-footer__nav-group:nth-child(3) { grid-column: 3; grid-row: 1; }
  body.desktop-test .m-footer__nav-group:nth-child(4) { grid-column: 4; grid-row: 1; }
  body.desktop-test .m-footer__socials { grid-column: 5; grid-row: 1; align-items: flex-start; padding-top: 0; }
  body.desktop-test .m-footer__legal  { grid-column: 1 / -1; grid-row: 2; }
  body.desktop-test .m-footer__madeby { grid-column: 1 / -1; grid-row: 3; }

  /* ============================================================
     ШАГ 14 — плавающая кнопка контакта: привязка к ДЕСКТОП-сетке.
     Была на планшетной (--grid-width 1023 → left 236.5; размер =
     планшетная колонка ~100px). Десктоп: left = левый край контента
     (108@1440, масштабируется с контейнером 1280), размер = десктоп-
     колонка 80px. Перерасчёт сетки естественно уменьшает 100→80.
     Кнопка создаётся floating-contact.js в body → цель body.desktop-test.
     ============================================================ */
  body.desktop-test .floating-contact-btn {
    left: calc(max(0px, 50% - 640px) + var(--grid-margin));
    width: 80px;
    height: 80px;
  }

  /* ============================================================
     ШАГ 15 — Десктоп-модалка контакта: переключатель 3 вариантов
     вверху + 3 раскладки (на основе мобильной модалки). Открывается
     по клику плавающей кнопки / data-open-contact-modal (перехват в
     extra_js). Форма — с обязательной галочкой 152-ФЗ + Политикой.
     ============================================================ */
  body.desktop-test.dt-modal-open { overflow: hidden; }
  body.desktop-test .dt-modal.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  body.desktop-test .dt-modal__overlay { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.55); }
  body.desktop-test .dt-modal__shell {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  }
  body.desktop-test .dt-modal__shell[data-variant="1"] { max-width: 460px; }
  body.desktop-test .dt-modal__shell[data-variant="2"] { max-width: 780px; }
  body.desktop-test .dt-modal__shell[data-variant="3"] { max-width: 880px; }

  /* Верхняя плашка с переключателем вариантов (служебная, для показа) */
  body.desktop-test .dt-modal__switch {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid #eee; background: #fafafa;
  }
  body.desktop-test .dt-modal__switch-tabs { display: flex; gap: 6px; }
  body.desktop-test .dt-modal__tab {
    border: 1px solid #d5d5d5; background: #fff; color: #555; font-family: inherit; font-size: 13px;
    padding: 6px 14px; border-radius: 999px; cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  body.desktop-test .dt-modal__tab:hover { border-color: #8CC540; }
  body.desktop-test .dt-modal__tab.is-active { background: #8CC540; border-color: #8CC540; color: #fff; }
  body.desktop-test .dt-modal__close {
    width: 36px; height: 36px; border: none; background: transparent; font-size: 26px; line-height: 1;
    color: #999; cursor: pointer; border-radius: 8px; flex: 0 0 auto;
  }
  body.desktop-test .dt-modal__close:hover { background: #eee; color: #333; }

  body.desktop-test .dt-modal__body { flex: 1; overflow-y: auto; }
  body.desktop-test .dt-modal__variant { display: none; padding: 28px; }
  body.desktop-test .dt-modal__variant.is-active { display: block; }
  body.desktop-test .dt-modal__variant[data-dtvariant-panel="3"] { padding: 0; }

  /* Общие элементы контента модалки */
  body.desktop-test .dtm-title {
    font-family: 'DIN Pro', sans-serif; font-weight: 400; font-size: 24px; color: #222;
    margin: 0 0 6px; text-align: left;
  }
  body.desktop-test .dtm-sub { font-size: 14px; color: #777; margin: 0 0 18px; }
  body.desktop-test .dtm-messengers { display: flex; gap: 12px; margin: 0 0 18px; }
  body.desktop-test .dtm-messengers--col { flex-direction: column; }
  body.desktop-test .dtm-msg {
    display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1;
    text-decoration: none; color: #414142; font-size: 13px; padding: 12px 6px;
    border: 1px solid #ececec; border-radius: 12px;
    transition: border-color .15s ease, background .15s ease;
  }
  body.desktop-test .dtm-messengers--col .dtm-msg { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 14px; }
  body.desktop-test .dtm-msg:hover { border-color: #8CC540; background: #f6faef; }
  body.desktop-test .dtm-msg__img { width: 40px; height: 40px; object-fit: contain; }
  body.desktop-test .dtm-form { display: flex; flex-direction: column; gap: 12px; }
  body.desktop-test .dtm-field {
    height: 46px; padding: 0 14px; border: 1px solid #ccc; border-radius: 10px;
    font-size: 15px; font-family: inherit; box-sizing: border-box; width: 100%;
  }
  body.desktop-test .dtm-field:focus { outline: none; border-color: #8CC540; }
  body.desktop-test .dtm-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.35; color: #666; }
  body.desktop-test .dtm-consent input { margin-top: 2px; flex: 0 0 auto; }
  body.desktop-test .dtm-consent a { color: #8CC540; }
  body.desktop-test .dtm-submit {
    height: 48px; background: #8CC540; color: #fff; border: none; border-radius: 10px;
    font-size: 16px; font-family: inherit; cursor: pointer; margin-top: 2px;
  }
  body.desktop-test .dtm-submit:hover { background: #7ab330; }
  body.desktop-test .dtm-contacts {
    display: flex; flex-direction: column; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #eee;
  }
  body.desktop-test .dtm-contact { font-size: 14px; color: #444; text-decoration: none; }
  body.desktop-test .dtm-contact b { color: #999; font-weight: 400; }
  body.desktop-test a.dtm-contact:hover { color: #8CC540; }

  /* Вариант 2 — две колонки: форма | мессенджеры+контакты */
  body.desktop-test .dtm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  body.desktop-test .dtm-aside { display: flex; flex-direction: column; gap: 16px; }
  body.desktop-test .dtm-aside .dtm-contacts { margin-top: 0; }

  /* Вариант 3 — сплит: брендовая панель | форма */
  body.desktop-test .dtm-split { display: grid; grid-template-columns: 5fr 6fr; align-items: stretch; }
  body.desktop-test .dtm-brand {
    background: linear-gradient(160deg, #8CC540, #6fae2e); color: #fff; padding: 32px 28px;
    display: flex; flex-direction: column; gap: 18px;
  }
  body.desktop-test .dtm-brand__title { font-family: 'DIN Pro', sans-serif; font-weight: 400; font-size: 26px; margin: 0; }
  body.desktop-test .dtm-brand__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
  body.desktop-test .dtm-brand__list li { padding-left: 26px; position: relative; }
  body.desktop-test .dtm-brand__list li::before { content: '\2713'; position: absolute; left: 0; font-weight: 700; }
  body.desktop-test .dtm-brand__contacts { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
  body.desktop-test .dtm-brand__contacts a { color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; }
  body.desktop-test .dtm-panel { padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; }
  body.desktop-test .dtm-panel .dtm-title { margin-bottom: 0; }
  /* Время работы в брендовой панели (Вариант 3) */
  body.desktop-test .dtm-brand__hours { color: rgba(255, 255, 255, 0.85); font-size: 14px; }

  /* Крестик закрытия — в углу шелла (строку-переключатель убрали, только Вариант 3).
     Абсолют поверх контента; лёгкая подложка для читаемости на светлой панели. */
  body.desktop-test .dt-modal__close--corner {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.85);
  }
  body.desktop-test .dt-modal__close--corner:hover { background: #fff; color: #333; }
}

/* ============================================================
   ШАГ 15 — Бейджи карточек на десктопе (2026-07-20)
   Карточки с бейджами есть и на листингах (#portfolio-block), и в
   «Похожих проектах» (#similar-projects-block) → общий десктоп-слой.
   (1) Ховер-разведение стопки (в покое бейджи наложены: right 12/24/36/48).
   (2) Десктоп-вид модалки #badges-modal: центрированный диалог вместо
       мобильного нижнего «шита». Клик по бейджу её уже открывает
       (badges-modal.js, без gating) — JS не трогаем, только стиль.
   ============================================================ */
@media (min-width: 1024px) {

  /* (1) Наведение на карточку раздвигает стопку бейджей вдоль верха фото. */
  body.desktop-test .similar-projects__item .similar-projects__image-wrap .similar-projects__tag {
    transition: right 0.22s ease;
  }
  body.desktop-test .similar-projects__image-wrap:hover .similar-projects__tag:nth-of-type(2) { right: 76px; }
  body.desktop-test .similar-projects__image-wrap:hover .similar-projects__tag:nth-of-type(3) { right: 140px; }
  body.desktop-test .similar-projects__image-wrap:hover .similar-projects__tag:nth-of-type(4) { right: 204px; }

  /* (2) Модалка бейджей — центрированный диалог (мобильный = нижний шит). */
  body.desktop-test .badges-modal { align-items: center; }
  body.desktop-test .badges-modal__content {
    max-width: 600px;
    border-radius: 16px;
    padding: 28px 32px 32px;
    transform: translateY(12px);
  }
  body.desktop-test .badges-modal--open .badges-modal__content { transform: translateY(0); }

}

/* ============================================================
   ШАГ 16 — Хлебные крошки: уравнять кегли на десктопе (2026-07-20)
   Баг (общий для листингов и ProjectPage): ссылки #breadcrumbs a попали
   в общую 21px-группу тела текста, а .current остался 13px → разнобой.
   Уравниваем на всём body.desktop-test (листинги + страница макета).
   ============================================================ */
@media (min-width: 1024px) {
  body.desktop-test #breadcrumbs a,
  body.desktop-test #breadcrumbs .current,
  body.desktop-test #breadcrumbs .divider { font-size: 13px; }
}

/* ============================================================
   ШАГ 17 — Карточки категорий на десктопе (2026-07-20; унифицировано 2026-07-26)
   Заголовок — в стиль секций эталонной ЖК-страницы (.examples-section__title
   = DIN Pro 33/400/#414142/слева/margin 0 0 20px, как .dt-ex__title);
   карточки — портфолио-вид, сетка 3-в-ряд, сразу видно 6 (--cc-initial).
   2026-07-26 (Д15): раздвоение через --services снято — правила висят на общем
   .category-cards, поэтому лендинг выставок выглядит так же, как главная.
   ============================================================ */
@media (min-width: 1024px) {
  body.desktop-test .category-cards {
    --cc-initial: 6;
  }
  body.desktop-test .category-cards .category-cards__gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  body.desktop-test .category-cards .examples-section__title {
    font-size: 33px;
    margin: 0 0 20px;
  }
}

/* ============================================================
   ШАГ 20 — Ховер-эффект карточек категорий (Д3, 2026-07-26)
   Раскатка одобренного демо с /soglasovanie/ (секция 5) в прод.
   Универсально для .category-card (главная + лендинг выставок).
   Только десктоп + устройства с мышью — мобайл не трогаем.
   При наведении: скрим/лого/счётчик уходят, фото scale(1.06) →
   под курсором чистое фото; зелёный заголовок остаётся.
   ============================================================ */
@media (min-width: 1024px) and (hover: hover) {
  .category-card .similar-projects__image-wrap img:not(.category-card__logo) {
    transition: transform 0.35s ease-out;
  }
  .category-card:hover .similar-projects__image-wrap img:not(.category-card__logo) {
    transform: scale(1.06);
  }
  .category-card .category-card__scrim,
  .category-card .category-card__logo,
  .category-card .category-card__count {
    transition: opacity 0.35s ease-out;
  }
  .category-card:hover .category-card__scrim,
  .category-card:hover .category-card__logo,
  .category-card:hover .category-card__count {
    opacity: 0;
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .category-card .similar-projects__image-wrap img:not(.category-card__logo),
  .category-card .category-card__scrim,
  .category-card .category-card__logo,
  .category-card .category-card__count {
    transition: none;
  }
}

/* ============================================================
   ШАГ 19 — «Производство макетов в собственной мастерской» на 12 колонок (2026-07-20)
   Блок = <section class="lighting-section"> (заголовок + интро + фото-слайдер).
   В §12 растянули delivery/reviews через max-width:none, а .lighting-section
   пропустили → блок оставался ~967px по центру, не на всю ширину. Растягиваем на
   доступные 1224 (12 колонок). Целимся в :not(.lighting-section--circles), чтобы
   не задеть реальный блок «Виды подсветки» (он скрыт на десктопе, рендерится .dt-lighting).
   .m-photo-slider уже max-width:none — с растянутым контейнером фото = баннер 16:9 1224×689.
   Заголовок → 33px, как у остальных десктоп-секций.
   ============================================================ */
@media (min-width: 1024px) {
  body.desktop-test .lighting-section:not(.lighting-section--circles) {
    max-width: none;
  }
  body.desktop-test .lighting-section:not(.lighting-section--circles) .lighting-section__title {
    max-width: none;
    font-size: 33px;
  }
  body.desktop-test .lighting-section:not(.lighting-section--circles) .lighting-section__intro {
    max-width: none;
  }
}