/* Auto-generated from assets/css/src/*.css — do not edit directly. */
/* Build date: 2026-04-20T18:36:39Z */

/* === 01-tokens.css === */
/* ============================================================
   Дизайн-токены — CSS Custom Properties.
   Единый источник правды для палитры, шрифтов, отступов,
   радиусов, теней, анимаций.
   ============================================================ */

:root {
    /* — Палитра — */
    --dsm-bg:         #efeeeb;
    --dsm-bg-dark:    #181818;
    --dsm-surface:    #ffffff;
    --dsm-ink:        #181818;
    --dsm-ink-soft:   #353535;
    --dsm-muted:      #585858;
    --dsm-subtle:     #8a8a8a;
    --dsm-line:       #e3e1dc;
    --dsm-line-soft:  #efeeeb;
    --dsm-accent:     #624ab7;
    --dsm-accent-700: #4d3a99;
    --dsm-success:    #2fa468;
    --dsm-danger:     #c0392b;
    --dsm-warning:    #f0b400;
    --dsm-star:       #f0b400;
    --dsm-focus:      #2015ff;

    /* Состояния кнопок */
    --dsm-btn-bg:          var(--dsm-ink);
    --dsm-btn-fg:          var(--dsm-bg);
    --dsm-btn-bg-hover:    var(--dsm-accent);
    --dsm-btn-fg-hover:    #ffffff;
    --dsm-btn-outline-fg:  var(--dsm-ink);
    --dsm-btn-outline-bd:  var(--dsm-ink);

    /* — Типографика — */
    --dsm-font-body:   'TildaSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --dsm-font-head:   var(--dsm-font-body);
    --dsm-font-mono:   ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    --dsm-fs-xs:   12px;
    --dsm-fs-sm:   14px;
    --dsm-fs-md:   16px;
    --dsm-fs-lg:   20px;
    --dsm-fs-xl:   24px;
    --dsm-fs-2xl:  32px;
    --dsm-fs-3xl:  44px;
    --dsm-fs-4xl:  56px;
    --dsm-fs-hero: 72px;

    --dsm-lh-tight: 1.1;
    --dsm-lh-head:  1.2;
    --dsm-lh-body:  1.55;
    --dsm-lh-loose: 1.7;

    --dsm-fw-regular:  400;
    --dsm-fw-medium:   500;
    --dsm-fw-semibold: 600;
    --dsm-fw-bold:     700;

    --dsm-ls-tight:  -0.01em;
    --dsm-ls-normal: 0;
    --dsm-ls-wide:   0.05em;

    /* — Spacing (база 4 px) — */
    --dsm-sp-1:  4px;
    --dsm-sp-2:  8px;
    --dsm-sp-3:  12px;
    --dsm-sp-4:  16px;
    --dsm-sp-5:  20px;
    --dsm-sp-6:  24px;
    --dsm-sp-8:  32px;
    --dsm-sp-10: 40px;
    --dsm-sp-12: 48px;
    --dsm-sp-14: 56px;
    --dsm-sp-16: 64px;
    --dsm-sp-20: 80px;
    --dsm-sp-24: 96px;
    --dsm-sp-28: 112px;
    --dsm-sp-32: 128px;

    /* — Radii — */
    --dsm-r-xs: 3px;
    --dsm-r-sm: 5px;
    --dsm-r-md: 8px;
    --dsm-r-lg: 14px;
    --dsm-r-xl: 22px;
    --dsm-r-full: 999px;

    /* — Shadows — */
    --dsm-shadow-xs: 0 1px 2px rgba(20,40,80,0.04);
    --dsm-shadow-sm: 0 2px 10px rgba(20,40,80,0.05);
    --dsm-shadow-md: 0 6px 20px rgba(20,40,80,0.08);
    --dsm-shadow-lg: 0 14px 40px rgba(20,40,80,0.12);

    /* — Анимации — */
    --dsm-dur-fast: 120ms;
    --dsm-dur-base: 180ms;
    --dsm-dur-slow: 280ms;
    --dsm-ease:     cubic-bezier(0.4, 0, 0.2, 1);

    /* — Контейнеры — */
    --dsm-container:       1200px;
    --dsm-container-narrow: 720px;
    --dsm-container-wide:  1440px;
    --dsm-gutter:          20px;

    /* — Z-index — */
    --dsm-z-base:    1;
    --dsm-z-sticky: 100;
    --dsm-z-drawer: 900;
    --dsm-z-modal:  1000;
    --dsm-z-toast:  1100;

    /* — Focus ring — */
    --dsm-focus-ring: 0 0 0 3px rgba(96, 74, 183, 0.35);
}

/* Mobile типографика чуть мельче — чтобы крупные hero-заголовки не обрезались. */
@media (max-width: 640px) {
    :root {
        --dsm-fs-2xl:  24px;
        --dsm-fs-3xl:  32px;
        --dsm-fs-4xl:  40px;
        --dsm-fs-hero: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dsm-dur-fast: 0.01ms;
        --dsm-dur-base: 0.01ms;
        --dsm-dur-slow: 0.01ms;
    }
}

/* === 02-fonts.css === */
/* ============================================================
   Шрифты — TildaSans (self-host, OFL).
   Лицензия: assets/fonts/LICENSE.txt + OFL.txt.
   Используем 4 веса: 400/500/600/700.
   font-display: swap — текст виден сразу со системным шрифтом,
   потом плавно подменяется (лучше для LCP).
   ============================================================ */

@font-face {
    font-family: 'TildaSans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/TildaSans-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'TildaSans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/TildaSans-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'TildaSans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/TildaSans-Semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'TildaSans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/TildaSans-Bold.woff2') format('woff2');
}

/* === 03-base.css === */
/* ============================================================
   Base — reset + сенсибл-дефолты + типографика.
   Основа: modern-normalize-идея, но руками, чтобы не тянуть лишнее.
   ============================================================ */

/* Box model */
*, *::before, *::after { box-sizing: border-box; }

/* Корень */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
    scroll-behavior: smooth;
    overflow-x: clip;
}
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--dsm-font-body);
    font-size: var(--dsm-fs-md);
    line-height: var(--dsm-lh-body);
    color: var(--dsm-ink);
    background: var(--dsm-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }

/* Убираем margin у ритмичных элементов */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre { margin: 0; }
ul, ol { margin: 0; padding: 0; }

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--dsm-font-head);
    font-weight: var(--dsm-fw-bold);
    line-height: var(--dsm-lh-head);
    letter-spacing: var(--dsm-ls-tight);
    color: var(--dsm-ink);
    text-wrap: balance;
}
h1 { font-size: var(--dsm-fs-4xl); }
h2 { font-size: var(--dsm-fs-3xl); }
h3 { font-size: var(--dsm-fs-2xl); }
h4 { font-size: var(--dsm-fs-xl); }
h5 { font-size: var(--dsm-fs-lg); }
h6 { font-size: var(--dsm-fs-md); }

/* Text */
p { text-wrap: pretty; }
small { font-size: var(--dsm-fs-sm); }
strong, b { font-weight: var(--dsm-fw-bold); }
em, i { font-style: italic; }

/* Ссылки */
a {
    color: var(--dsm-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--dsm-dur-base) var(--dsm-ease);
}
a:hover { color: var(--dsm-accent); }

/* Списки */
ul, ol { padding-left: 20px; }
nav ul, .dsm-reset-list { list-style: none; padding: 0; }

/* Медиа */
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    max-width: 100%;
}
img, video { height: auto; }

/* Форма */
input, button, textarea, select {
    font: inherit;
    color: inherit;
}
button { cursor: pointer; }

/* Таблицы */
table { border-collapse: collapse; border-spacing: 0; }

/* HR */
hr {
    border: 0;
    border-top: 1px solid var(--dsm-line);
    margin: var(--dsm-sp-10) 0;
}

/* Focus ring глобально */
:focus-visible {
    outline: none;
    box-shadow: var(--dsm-focus-ring);
    border-radius: var(--dsm-r-sm);
}

/* Selection */
::selection { background: var(--dsm-accent); color: #fff; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === 04-layout.css === */
/* ============================================================
   Layout — контейнер, сетка, утилиты.
   ============================================================ */

.dsm-container {
    width: 100%;
    max-width: calc(var(--dsm-container) + var(--dsm-gutter) * 2);
    margin: 0 auto;
    padding-left: var(--dsm-gutter);
    padding-right: var(--dsm-gutter);
}
.dsm-container--narrow { max-width: calc(var(--dsm-container-narrow) + var(--dsm-gutter) * 2); }
.dsm-container--wide   { max-width: calc(var(--dsm-container-wide)  + var(--dsm-gutter) * 2); }

.dsm-section {
    padding-block: var(--dsm-sp-16);
}
@media (max-width: 640px) {
    .dsm-section { padding-block: var(--dsm-sp-10); }
}
.dsm-section--dark {
    background: var(--dsm-bg-dark);
    color: var(--dsm-bg);
}
.dsm-section--dark h1,
.dsm-section--dark h2,
.dsm-section--dark h3,
.dsm-section--dark h4 { color: var(--dsm-bg); }

.dsm-section__head {
    text-align: center;
    margin-bottom: var(--dsm-sp-10);
}
.dsm-section__title {
    font-size: var(--dsm-fs-3xl);
    font-weight: var(--dsm-fw-bold);
    text-transform: uppercase;
    margin: 0 0 var(--dsm-sp-3);
}
.dsm-section__title em {
    font-style: italic;
    font-weight: var(--dsm-fw-medium);
}
.dsm-section__desc {
    max-width: 720px;
    margin: 0 auto;
    color: var(--dsm-muted);
    font-size: var(--dsm-fs-md);
}

.dsm-main { display: block; min-height: 60vh; }

/* Утилиты */
.dsm-sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.dsm-skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    padding: 10px 14px;
    background: var(--dsm-ink);
    color: var(--dsm-bg);
    text-decoration: none;
    border-radius: var(--dsm-r-sm);
    z-index: var(--dsm-z-toast);
    transition: top var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-skip-link:focus { top: 8px; }

/* === 05-buttons.css === */
/* ============================================================
   Buttons — базовые варианты.
   .dsm-btn          — база
   .dsm-btn--primary — чёрная заливка
   .dsm-btn--outline — обводка
   .dsm-btn--ghost   — прозрачная
   .dsm-btn--lg      — крупный размер
   .dsm-btn--block   — full-width
   ============================================================ */

.dsm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dsm-sp-2);
    padding: 12px 22px;
    font-family: inherit;
    font-size: var(--dsm-fs-sm);
    font-weight: var(--dsm-fw-medium);
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--dsm-r-sm);
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--dsm-dur-base) var(--dsm-ease),
        color var(--dsm-dur-base) var(--dsm-ease),
        border-color var(--dsm-dur-base) var(--dsm-ease),
        transform var(--dsm-dur-fast) var(--dsm-ease);
    -webkit-tap-highlight-color: transparent;
}
.dsm-btn:active { transform: translateY(1px); }
.dsm-btn[disabled],
.dsm-btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

/* Primary — тёмная заливка */
.dsm-btn--primary {
    background: var(--dsm-btn-bg);
    color: var(--dsm-btn-fg);
}
.dsm-btn--primary:hover {
    background: var(--dsm-btn-bg-hover);
    color: var(--dsm-btn-fg-hover);
}

/* Outline */
.dsm-btn--outline {
    background: transparent;
    color: var(--dsm-btn-outline-fg);
    border-color: var(--dsm-btn-outline-bd);
}
.dsm-btn--outline:hover {
    background: var(--dsm-accent);
    color: #fff;
    border-color: var(--dsm-accent);
}

/* Ghost — без обводки и фона */
.dsm-btn--ghost {
    background: transparent;
    color: var(--dsm-ink);
    border-color: transparent;
}
.dsm-btn--ghost:hover { color: var(--dsm-accent); }

/* На тёмном фоне */
.dsm-section--dark .dsm-btn--outline {
    color: var(--dsm-bg);
    border-color: var(--dsm-bg);
}
.dsm-section--dark .dsm-btn--outline:hover {
    background: var(--dsm-bg);
    color: var(--dsm-ink);
}

/* Sizes */
.dsm-btn--sm { padding: 8px 14px; font-size: var(--dsm-fs-xs); }
.dsm-btn--lg { padding: 16px 32px; font-size: var(--dsm-fs-md); }
.dsm-btn--block { display: flex; width: 100%; }

/* Иконка в кнопке */
.dsm-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* Группа кнопок */
.dsm-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dsm-sp-3);
}

/* === 06-forms.css === */
/* ============================================================
   Formы — input, select, textarea, checkbox, radio.
   ============================================================ */

.dsm-form {
    display: grid;
    gap: var(--dsm-sp-5);
}
.dsm-field {
    display: flex;
    flex-direction: column;
    gap: var(--dsm-sp-2);
}
.dsm-field__label {
    font-size: var(--dsm-fs-sm);
    font-weight: var(--dsm-fw-medium);
    color: var(--dsm-ink);
}
.dsm-field__hint {
    font-size: var(--dsm-fs-xs);
    color: var(--dsm-muted);
}
.dsm-field__error {
    font-size: var(--dsm-fs-xs);
    color: var(--dsm-danger);
}

.dsm-input,
.dsm-select,
.dsm-textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: var(--dsm-fs-md);
    line-height: 1.4;
    color: var(--dsm-ink);
    background: var(--dsm-surface);
    border: 1px solid var(--dsm-line);
    border-radius: var(--dsm-r-sm);
    transition: border-color var(--dsm-dur-fast) var(--dsm-ease),
                background var(--dsm-dur-fast) var(--dsm-ease);
}
.dsm-input:focus,
.dsm-select:focus,
.dsm-textarea:focus {
    outline: none;
    border-color: var(--dsm-accent);
    box-shadow: var(--dsm-focus-ring);
}
.dsm-input::placeholder,
.dsm-textarea::placeholder {
    color: var(--dsm-subtle);
}
.dsm-input[aria-invalid="true"],
.dsm-select[aria-invalid="true"],
.dsm-textarea[aria-invalid="true"] {
    border-color: var(--dsm-danger);
}
.dsm-textarea { min-height: 140px; resize: vertical; }

/* Number — убираем спиннеры */
.dsm-input[type="number"] { -moz-appearance: textfield; }
.dsm-input[type="number"]::-webkit-outer-spin-button,
.dsm-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* Checkbox/radio */
.dsm-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--dsm-sp-2);
    font-size: var(--dsm-fs-sm);
    cursor: pointer;
    user-select: none;
}
.dsm-check input[type="checkbox"],
.dsm-check input[type="radio"] {
    width: 18px; height: 18px;
    accent-color: var(--dsm-accent);
    margin-top: 2px;
    flex: 0 0 18px;
}

/* Honeypot — скрыт */
.dsm-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
}

/* === 10-header.css === */
/* ============================================================
   Header — десктоп + mobile + drawer через <dialog>.
   ============================================================ */

.dsm-header {
    position: sticky;
    top: 0;
    z-index: var(--dsm-z-sticky);
    background: var(--dsm-bg);
    border-bottom: 1px solid transparent;
    transition: background var(--dsm-dur-base) var(--dsm-ease),
                box-shadow var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-header.is-scrolled {
    background: rgba(239, 238, 235, 0.95);
    backdrop-filter: saturate(180%) blur(10px);
    box-shadow: var(--dsm-shadow-sm);
}
.dsm-header__inner {
    display: flex;
    align-items: center;
    gap: var(--dsm-sp-5);
    padding-block: var(--dsm-sp-4);
}

/* Лого */
.dsm-logo { flex: 0 0 auto; display: block; }
.dsm-logo:hover { transform: translateY(-1px); }
.dsm-logo__svg { width: 92px; height: 48px; }
.dsm-logo__img { width: 100px; height: auto; display: block; }

/* Переключатель городов */
.dsm-cities {
    display: flex;
    gap: var(--dsm-sp-2);
    align-items: center;
    font-size: var(--dsm-fs-xs);
    font-weight: var(--dsm-fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--dsm-ls-wide);
    color: var(--dsm-muted);
}
.dsm-cities__item { cursor: default; }
.dsm-cities__item.is-active { color: var(--dsm-ink); font-weight: var(--dsm-fw-bold); }
.dsm-cities__sep { color: var(--dsm-line); }

/* Меню */
.dsm-menu { margin-inline: auto; }
.dsm-menu__list {
    display: flex;
    gap: var(--dsm-sp-6);
    list-style: none;
    padding: 0;
    margin: 0;
}
.dsm-menu__item { position: relative; }
.dsm-menu__link {
    display: inline-block;
    padding: var(--dsm-sp-2) 0;
    font-size: var(--dsm-fs-xs);
    font-weight: var(--dsm-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--dsm-ls-wide);
    color: var(--dsm-ink);
    text-decoration: none;
    transition: color var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-menu__link:hover { color: var(--dsm-accent); }
.dsm-menu__item.is-active > .dsm-menu__link {
    color: var(--dsm-accent);
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* Dropdown «Каталог» */
.dsm-menu__caret {
    margin-left: 4px;
    transition: transform var(--dsm-dur-base) var(--dsm-ease);
    vertical-align: middle;
}
.dsm-menu__item--has-children:hover .dsm-menu__caret,
.dsm-menu__item--has-children:focus-within .dsm-menu__caret { transform: rotate(180deg); }

.dsm-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 520px;
    padding: var(--dsm-sp-5) var(--dsm-sp-6);
    background: var(--dsm-bg);
    border: 1px solid var(--dsm-line);
    border-radius: var(--dsm-r-md);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dsm-dur-base) var(--dsm-ease),
                transform var(--dsm-dur-base) var(--dsm-ease),
                visibility 0s linear var(--dsm-dur-base);
    z-index: var(--dsm-z-dropdown, 100);
}
.dsm-menu__item--has-children:hover > .dsm-submenu,
.dsm-menu__item--has-children:focus-within > .dsm-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}
/* Невидимый мостик от пункта до подменю — чтобы hover не обрывался */
.dsm-menu__item--has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 16px;
}

.dsm-submenu__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dsm-sp-2) var(--dsm-sp-6);
    list-style: none;
    padding: 0;
    margin: 0;
}
.dsm-submenu__link {
    display: block;
    padding: var(--dsm-sp-2) 0;
    font-size: var(--dsm-fs-sm);
    font-weight: var(--dsm-fw-medium);
    color: var(--dsm-ink);
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    transition: color var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-submenu__link:hover { color: var(--dsm-accent); }

/* Контакты справа */
.dsm-header__contacts {
    display: flex;
    align-items: center;
    gap: var(--dsm-sp-4);
    flex: 0 0 auto;
}
.dsm-phone {
    font-size: var(--dsm-fs-sm);
    font-weight: var(--dsm-fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    color: var(--dsm-ink);
}
.dsm-phone:hover { color: var(--dsm-accent); }

.dsm-header__cta { flex: 0 0 auto; }

/* Соц-иконки */
.dsm-social {
    display: flex;
    gap: var(--dsm-sp-2);
    list-style: none;
    padding: 0;
    margin: 0;
}
.dsm-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    color: var(--dsm-ink);
    background: transparent;
    border-radius: 50%;
    transition: background var(--dsm-dur-base) var(--dsm-ease),
                color var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-social__link:hover {
    background: var(--dsm-ink);
    color: var(--dsm-bg);
}
.dsm-social__link--max {
    background: var(--dsm-accent);
    color: #fff;
}
.dsm-social__link--max:hover { background: var(--dsm-accent-700); color: #fff; }
.dsm-social__link svg { width: 20px; height: 20px; }

/* Mobile actions */
.dsm-header__mobile-actions {
    display: flex;
    gap: var(--dsm-sp-2);
    margin-left: auto;
}
.dsm-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: transparent;
    color: var(--dsm-ink);
    border: 1px solid var(--dsm-line);
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dsm-dur-base) var(--dsm-ease),
                color var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-iconbtn:hover { background: var(--dsm-ink); color: var(--dsm-bg); }
.dsm-iconbtn--square { border-radius: var(--dsm-r-sm); }

/* Responsive */
@media (max-width: 960px) {
    .dsm-header__inner { gap: var(--dsm-sp-3); }
    .dsm-menu__list { gap: var(--dsm-sp-4); }
}
@media (max-width: 640px) {
    .dsm-header__inner { padding-block: var(--dsm-sp-3); }
    .dsm-logo__svg { width: 76px; height: 40px; }
    .dsm-logo__img { width: 82px; }
    .dsm-header__inner > .dsm-cities { display: none; }
}

/* В drawer-меню блок городов показывается всегда, внизу. */
.dsm-cities--drawer {
    display: flex;
    justify-content: center;
    padding: var(--dsm-sp-3) var(--dsm-sp-5);
    margin: 0;
    font-size: var(--dsm-fs-sm);
    border-top: 1px solid var(--dsm-line);
}
/* На десктопе drawer скрыт, а в шапке cities уже есть — в drawer повторять незачем. */
@media (min-width: 641px) {
    .dsm-cities--drawer { display: none; }
}

/* ============================================================
   Drawer (<dialog>) — mobile-меню.
   ============================================================ */
.dsm-drawer {
    padding: 0;
    border: 0;
    margin: 0;
    width: min(380px, 92vw);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    background: var(--dsm-bg);
    color: var(--dsm-ink);
    margin-left: auto;
    margin-right: 0;
    box-shadow: -4px 0 40px rgba(0,0,0,0.2);
    animation: dsm-drawer-in var(--dsm-dur-slow) var(--dsm-ease);
}
.dsm-drawer::backdrop {
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
}
@keyframes dsm-drawer-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0);   }
}

.dsm-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dsm-sp-4) var(--dsm-sp-5);
    border-bottom: 1px solid var(--dsm-line);
}
.dsm-drawer__title {
    font-weight: var(--dsm-fw-bold);
    font-size: var(--dsm-fs-md);
    text-transform: uppercase;
    letter-spacing: var(--dsm-ls-wide);
}

.dsm-drawer__nav { padding: var(--dsm-sp-4) 0; }
.dsm-drawer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dsm-drawer__list .dsm-menu__link {
    display: block;
    padding: var(--dsm-sp-4) var(--dsm-sp-5);
    font-size: var(--dsm-fs-md);
    border-bottom: 1px solid var(--dsm-line-soft);
}

/* Drawer: аккордеон */
.dsm-drawer__group { border-bottom: 1px solid var(--dsm-line-soft); }
.dsm-drawer__group > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0;
}
.dsm-drawer__group > summary::-webkit-details-marker { display: none; }
.dsm-drawer__group > summary .dsm-menu__caret { transition: transform var(--dsm-dur-base) var(--dsm-ease); }
.dsm-drawer__group[open] > summary .dsm-menu__caret { transform: rotate(180deg); }
.dsm-drawer__sublist {
    list-style: none;
    padding: 0 var(--dsm-sp-5) var(--dsm-sp-3);
    margin: 0;
    background: var(--dsm-surface);
}
.dsm-drawer__sublink {
    display: block;
    padding: var(--dsm-sp-3) var(--dsm-sp-2);
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-ink);
    text-decoration: none;
}
.dsm-drawer__sublink:hover { color: var(--dsm-accent); }

.dsm-drawer__contacts {
    margin-top: auto;
    padding: var(--dsm-sp-5);
    border-top: 1px solid var(--dsm-line);
    display: flex;
    flex-direction: column;
    gap: var(--dsm-sp-4);
}
.dsm-drawer__contacts .dsm-phone {
    font-size: var(--dsm-fs-lg);
    font-weight: var(--dsm-fw-bold);
}

/* === 11-footer.css === */
/* ============================================================
   Footer — тёмный подвал с 3 колонками.
   ============================================================ */

.dsm-footer {
    margin-top: var(--dsm-sp-20);
    padding: var(--dsm-sp-16) 0 var(--dsm-sp-8);
    background: var(--dsm-bg-dark);
    color: var(--dsm-bg);
}
.dsm-footer a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-footer a:hover { color: var(--dsm-accent); }

.dsm-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    gap: var(--dsm-sp-10);
}
@media (max-width: 860px) {
    .dsm-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--dsm-sp-8); }
    .dsm-footer__col--contacts { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
    .dsm-footer__grid { grid-template-columns: 1fr; }
}

.dsm-footer__title {
    font-family: var(--dsm-font-head);
    font-size: var(--dsm-fs-md);
    font-weight: var(--dsm-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--dsm-ls-wide);
    margin: 0 0 var(--dsm-sp-5);
    color: var(--dsm-bg);
}
.dsm-footer__title em {
    font-style: italic;
    font-weight: var(--dsm-fw-medium);
}

.dsm-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dsm-sp-3);
}
.dsm-footer__list .dsm-menu__link {
    font-size: var(--dsm-fs-sm);
    color: inherit;
    text-decoration: none;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--dsm-fw-regular);
}
.dsm-footer__list .dsm-menu__link:hover { color: var(--dsm-accent); }

.dsm-footer__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--dsm-sp-3);
    font-style: normal;
    margin-bottom: var(--dsm-sp-6);
}
.dsm-footer__contact {
    font-size: var(--dsm-fs-sm);
    font-weight: var(--dsm-fw-medium);
    color: inherit;
    text-decoration: none;
}
.dsm-footer__contact[href^="tel:"] {
    font-size: var(--dsm-fs-lg);
    font-weight: var(--dsm-fw-bold);
}
.dsm-footer__contact--addr {
    color: rgba(255, 255, 255, 0.75);
    font-weight: var(--dsm-fw-regular);
    line-height: 1.45;
}

.dsm-footer__cta {
    align-self: flex-start;
}

.dsm-footer__bottom {
    margin-top: var(--dsm-sp-10);
    padding-top: var(--dsm-sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dsm-sp-5);
    flex-wrap: wrap;
    font-size: var(--dsm-fs-xs);
    color: rgba(239, 238, 235, 0.6);
}
.dsm-footer__copy { margin: 0; max-width: 50ch; }
.dsm-footer__legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--dsm-sp-4);
    flex-wrap: wrap;
}
.dsm-footer__legal a {
    font-size: var(--dsm-fs-xs);
    color: inherit;
    text-decoration: none;
}
.dsm-footer__legal a:hover { color: var(--dsm-bg); }

/* === 12-breadcrumbs.css === */
/* ============================================================
   Breadcrumbs — хлебные крошки.
   ============================================================ */

.dsm-breadcrumbs {
    padding: var(--dsm-sp-4) 0;
    font-size: var(--dsm-fs-xs);
    color: var(--dsm-muted);
}
.dsm-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dsm-sp-2);
    list-style: none;
    padding: 0;
    margin: 0;
}
.dsm-breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: var(--dsm-sp-2);
}
.dsm-breadcrumbs__item::after {
    content: '/';
    color: var(--dsm-subtle);
    margin-left: var(--dsm-sp-2);
}
.dsm-breadcrumbs__item:last-child::after { display: none; }

.dsm-breadcrumbs__link {
    color: var(--dsm-muted);
    text-decoration: none;
    transition: color var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-breadcrumbs__link:hover { color: var(--dsm-accent); }

.dsm-breadcrumbs__current {
    color: var(--dsm-ink);
    font-weight: var(--dsm-fw-semibold);
}

/* --- Выпадашка со списком соседних разделов ------------------------ */

.dsm-breadcrumbs__item--has-submenu {
    position: relative;
}

.dsm-breadcrumbs__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    margin-left: -2px;
    background: transparent;
    border: 0;
    color: var(--dsm-muted);
    cursor: pointer;
    line-height: 0;
    border-radius: 4px;
    transition: color var(--dsm-dur-base) var(--dsm-ease),
                transform var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-breadcrumbs__toggle:hover,
.dsm-breadcrumbs__toggle:focus-visible {
    color: var(--dsm-accent);
    outline: none;
}
.dsm-breadcrumbs__toggle[aria-expanded="true"] {
    transform: rotate(180deg);
}

.dsm-breadcrumbs__submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 220px;
    max-width: 320px;
    padding: var(--dsm-sp-2) 0;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--dsm-line, rgba(0,0,0,.08));
    border-radius: var(--dsm-radius, 8px);
    box-shadow: 0 12px 32px -12px rgba(0, 11, 48, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dsm-dur-base) var(--dsm-ease),
                transform var(--dsm-dur-base) var(--dsm-ease),
                visibility 0s linear var(--dsm-dur-base);
}
.dsm-breadcrumbs__item--has-submenu:hover .dsm-breadcrumbs__submenu,
.dsm-breadcrumbs__item--has-submenu:focus-within .dsm-breadcrumbs__submenu,
.dsm-breadcrumbs__item--has-submenu.is-open .dsm-breadcrumbs__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.dsm-breadcrumbs__submenu-item {
    margin: 0;
}
.dsm-breadcrumbs__submenu-link {
    display: block;
    padding: var(--dsm-sp-2) var(--dsm-sp-4);
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--dsm-dur-base) var(--dsm-ease),
                color var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-breadcrumbs__submenu-link:hover,
.dsm-breadcrumbs__submenu-link:focus-visible {
    background: var(--dsm-bg-soft, #f5f4f0);
    color: var(--dsm-accent);
    outline: none;
}

/* === 20-hero.css === */
/* ============================================================
   Hero — первый экран главной.
   Верх: коллаж во всю ширину. Низ: H1 слева, описание + CTA справа.
   ============================================================ */

.dsm-hero {
    padding-top: var(--dsm-sp-8);
    padding-bottom: var(--dsm-sp-10);
}
.dsm-hero__wrap {
    display: flex;
    flex-direction: column;
    gap: var(--dsm-sp-8);
}

.dsm-hero__gallery { position: relative; }
.dsm-hero__img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1920 / 620;
    object-fit: cover;
    border-radius: var(--dsm-r-md);
    background: var(--dsm-surface);
}
.dsm-hero__placeholder {
    aspect-ratio: 1920 / 620;
    background: var(--dsm-surface);
    border-radius: var(--dsm-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dsm-subtle);
    font-size: var(--dsm-fs-lg);
}

.dsm-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--dsm-sp-10);
    align-items: end;
}
.dsm-hero__title {
    font-size: clamp(28px, 3.3vw, 44px);
    font-weight: var(--dsm-fw-bold);
    line-height: 1.1;
    letter-spacing: var(--dsm-ls-tight);
    text-transform: uppercase;
    margin: 0;
}
.dsm-hero__title-soft {
    font-weight: var(--dsm-fw-medium);
    color: var(--dsm-muted);
}
.dsm-hero__subtitle {
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: var(--dsm-fw-medium);
    color: var(--dsm-muted);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
    margin: var(--dsm-sp-3) 0 0;
    max-width: 52ch;
}
.dsm-hero__aside {
    display: flex;
    flex-direction: column;
    gap: var(--dsm-sp-6);
}
.dsm-hero__desc {
    font-size: var(--dsm-fs-md);
    color: var(--dsm-ink-soft);
    margin: 0;
    max-width: 52ch;
}
.dsm-hero__cta { flex-wrap: wrap; }

@media (max-width: 900px) {
    .dsm-hero__body {
        grid-template-columns: 1fr;
        gap: var(--dsm-sp-6);
        align-items: start;
    }
}

/* === 21-ticker.css === */
/* ============================================================
   Ticker — бегущая строка преимуществ.
   Без JS: две копии списка в дорожке + keyframes translateX.
   ============================================================ */

.dsm-ticker {
    background: var(--dsm-bg-dark);
    color: var(--dsm-bg);
    overflow: hidden;
    padding: var(--dsm-sp-4) 0;
    position: relative;
}
.dsm-ticker__track {
    display: flex;
    width: max-content;
    animation: dsm-ticker-slide 40s linear infinite;
}
.dsm-ticker__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--dsm-sp-6);
    padding-right: var(--dsm-sp-6);
    white-space: nowrap;
}
.dsm-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: var(--dsm-sp-3);
    font-size: var(--dsm-fs-sm);
    font-weight: var(--dsm-fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--dsm-ls-wide);
}
.dsm-ticker__dot { color: var(--dsm-accent); }

@keyframes dsm-ticker-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .dsm-ticker__track { animation: none; }
}

/* === 22-advantages.css === */
/* ============================================================
   Advantages — 4 иконки с текстом (4 колонки desktop, 2×2 tablet, 1 mobile).
   ============================================================ */

.dsm-advantages__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--dsm-sp-8);
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 860px) { .dsm-advantages__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .dsm-advantages__list { grid-template-columns: 1fr; } }

.dsm-advantages__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--dsm-sp-3);
}
.dsm-advantages__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px; height: 72px;
    color: var(--dsm-ink);
}
.dsm-advantages__icon svg { width: 48px; height: 48px; }

.dsm-advantages__title {
    font-size: var(--dsm-fs-md);
    font-weight: var(--dsm-fw-bold);
    margin: 0;
}
.dsm-advantages__desc {
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-muted);
    margin: 0;
}

/* ============================================================
   Certificates
   ============================================================ */

.dsm-certificates__lede {
    font-size: var(--dsm-fs-lg);
    font-weight: var(--dsm-fw-medium);
    text-align: center;
    margin: 0 0 var(--dsm-sp-8);
    color: var(--dsm-ink);
}
.dsm-certificates__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--dsm-sp-5);
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 720px) { .dsm-certificates__grid { grid-template-columns: 1fr 1fr; } }

.dsm-certificates__item {
    background: #fff;
    border-radius: var(--dsm-r-md);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow: var(--dsm-shadow-sm);
}
.dsm-certificates__link {
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--dsm-sp-3);
    background: #fff;
    transition: transform var(--dsm-dur-base) var(--dsm-ease),
                box-shadow var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-certificates__link:hover,
.dsm-certificates__link:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--dsm-shadow-md);
}
.dsm-certificates__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
}
.dsm-certificates__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dsm-sp-3);
    list-style: none;
    padding: 0;
    margin: 0;
}
.dsm-certificates__badges li {
    padding: var(--dsm-sp-3) var(--dsm-sp-5);
    background: var(--dsm-surface);
    border: 1px solid var(--dsm-line);
    border-radius: var(--dsm-r-full);
    font-size: var(--dsm-fs-sm);
    font-weight: var(--dsm-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--dsm-ls-wide);
}

/* === 23-categories.css === */
/* ============================================================
   Categories — плитки «Наш ассортимент» на тёмном фоне.
   ============================================================ */

.dsm-categories__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--dsm-sp-5);
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 960px) { .dsm-categories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dsm-categories__grid { grid-template-columns: 1fr 1fr; gap: var(--dsm-sp-3); } }

.dsm-cat-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--dsm-r-md);
    background: var(--dsm-surface);
    color: var(--dsm-ink);
    text-decoration: none;
    transition: transform var(--dsm-dur-base) var(--dsm-ease),
                box-shadow var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--dsm-shadow-md);
    color: var(--dsm-ink);
}
.dsm-cat-card__imgwrap {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--dsm-line-soft);
}
.dsm-cat-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dsm-dur-slow) var(--dsm-ease);
}
.dsm-cat-card:hover .dsm-cat-card__img { transform: scale(1.04); }
.dsm-cat-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--dsm-sp-2);
    padding: var(--dsm-sp-4) var(--dsm-sp-4);
    text-align: center;
    flex: 1 1 auto;
}
.dsm-cat-card__title {
    display: block;
    font-size: var(--dsm-fs-sm);
    font-weight: var(--dsm-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--dsm-ls-wide);
}
.dsm-cat-card__tagline {
    display: block;
    font-size: var(--dsm-fs-xs);
    font-weight: var(--dsm-fw-regular);
    color: var(--dsm-ink-soft);
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
}

/* === 24-why-us.css === */
/* ============================================================
   Why-us — «Почему выбирают нас?»: 5 пунктов.
   ============================================================ */

.dsm-why-us__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dsm-sp-8) var(--dsm-sp-10);
    counter-reset: whyus;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 720px) {
    .dsm-why-us__list { grid-template-columns: 1fr; gap: var(--dsm-sp-6); }
}

.dsm-why-us__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--dsm-sp-5);
    align-items: start;
}
.dsm-why-us__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background: var(--dsm-bg-dark);
    color: var(--dsm-bg);
    border-radius: 50%;
    font-weight: var(--dsm-fw-bold);
    font-size: var(--dsm-fs-sm);
    flex: 0 0 48px;
}
.dsm-why-us__title {
    font-size: var(--dsm-fs-lg);
    font-weight: var(--dsm-fw-bold);
    margin: 0 0 var(--dsm-sp-2);
    line-height: 1.25;
}
.dsm-why-us__desc {
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-muted);
    margin: 0;
    line-height: 1.55;
}

/* === 25-projects.css === */
/* ============================================================
   Projects — карточки реализованных проектов.
   ============================================================ */

.dsm-projects__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--dsm-sp-5);
    margin-bottom: var(--dsm-sp-8);
}
@media (max-width: 960px) { .dsm-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .dsm-projects__grid { grid-template-columns: 1fr; } }

.dsm-project-card {
    display: flex;
    flex-direction: column;
}
.dsm-project-card__link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    border-radius: var(--dsm-r-md);
    overflow: hidden;
    background: var(--dsm-surface);
    box-shadow: var(--dsm-shadow-sm);
    transition: transform var(--dsm-dur-base) var(--dsm-ease),
                box-shadow var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-project-card__link:hover {
    transform: translateY(-4px);
    box-shadow: var(--dsm-shadow-md);
}
.dsm-project-card__imgwrap {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--dsm-line-soft);
    overflow: hidden;
}
.dsm-project-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.dsm-project-card__body {
    display: block;
    padding: var(--dsm-sp-4) var(--dsm-sp-5);
}
.dsm-project-card__type {
    display: inline-block;
    font-size: var(--dsm-fs-xs);
    color: var(--dsm-muted);
    text-transform: uppercase;
    letter-spacing: var(--dsm-ls-wide);
    margin-bottom: var(--dsm-sp-2);
}
.dsm-project-card__title {
    font-size: var(--dsm-fs-md);
    font-weight: var(--dsm-fw-bold);
    margin: 0;
    line-height: 1.3;
}

.dsm-projects__actions {
    display: flex;
    justify-content: center;
}
.dsm-projects__empty {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--dsm-sp-10) var(--dsm-sp-6);
    background: var(--dsm-surface);
    border-radius: var(--dsm-r-lg);
    text-align: center;
    box-shadow: var(--dsm-shadow-sm);
}
.dsm-projects__empty p {
    font-size: var(--dsm-fs-md);
    color: var(--dsm-ink-soft);
    margin: 0 0 var(--dsm-sp-6);
}

/* === 26-order-steps.css === */
/* ============================================================
   Order-steps — «Оформление заказа».
   Сетка: 3 колонки desktop, 2 tablet, 1 mobile.
   Каждый шаг — чёткий номер + заголовок + описание в одном боксе.
   ============================================================ */

.dsm-order-steps__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dsm-sp-6);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--dsm-sp-8);
}
@media (max-width: 860px) { .dsm-order-steps__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .dsm-order-steps__list { grid-template-columns: 1fr; } }

.dsm-order-steps__item {
    display: flex;
    flex-direction: column;
    padding: var(--dsm-sp-6);
    background: var(--dsm-surface);
    border-radius: var(--dsm-r-md);
    border: 1px solid var(--dsm-line);
    min-height: 100%;
}
.dsm-order-steps__num {
    font-size: var(--dsm-fs-lg);
    font-weight: var(--dsm-fw-bold);
    color: var(--dsm-accent);
    margin-bottom: var(--dsm-sp-3);
    letter-spacing: var(--dsm-ls-wide);
    font-style: italic;
}
.dsm-order-steps__title {
    font-size: var(--dsm-fs-lg);
    font-weight: var(--dsm-fw-bold);
    text-transform: uppercase;
    margin: 0 0 var(--dsm-sp-3);
    line-height: 1.25;
}
.dsm-order-steps__desc {
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-ink-soft);
    margin: 0;
    line-height: 1.55;
}

.dsm-order-steps__actions {
    display: flex;
    justify-content: center;
}

/* === 27-faq.css === */
/* ============================================================
   FAQ — аккордеон на <details>/<summary>.
   ============================================================ */

.dsm-faq__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--dsm-sp-3);
    max-width: 960px;
    margin-inline: auto;
}
.dsm-faq__item {
    background: rgba(255,255,255,0.04);
    border-radius: var(--dsm-r-md);
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
}
.dsm-faq__details { padding: 0; }
.dsm-faq__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dsm-sp-5);
    padding: var(--dsm-sp-5) var(--dsm-sp-6);
    cursor: pointer;
    list-style: none;
    font-weight: var(--dsm-fw-semibold);
    color: var(--dsm-bg);
    transition: background var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-faq__summary::-webkit-details-marker { display: none; }
.dsm-faq__summary:hover { background: rgba(255,255,255,0.06); }

.dsm-faq__q {
    font-size: var(--dsm-fs-md);
    line-height: 1.35;
    text-align: left;
}
.dsm-faq__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    font-size: var(--dsm-fs-lg);
    font-weight: var(--dsm-fw-regular);
    flex: 0 0 32px;
    transition: transform var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-faq__details[open] .dsm-faq__toggle {
    transform: rotate(45deg);
}

.dsm-faq__a {
    padding: 0 var(--dsm-sp-6) var(--dsm-sp-5);
    color: rgba(239,238,235,0.85);
    font-size: var(--dsm-fs-sm);
    line-height: 1.6;
}

/* === 28-cta.css === */
/* ============================================================
   CTA-форма и попап — «Получить расчёт проекта».
   Форма теперь живёт только в <dialog id="dsm-cta-popup">.
   ============================================================ */

.dsm-cta-form__title {
    font-size: var(--dsm-fs-2xl);
    font-weight: var(--dsm-fw-bold);
    margin: 0 0 var(--dsm-sp-3);
    line-height: 1.2;
}
.dsm-cta-form__lede {
    color: var(--dsm-muted);
    margin: 0 0 var(--dsm-sp-6);
    font-size: var(--dsm-fs-sm);
}

.dsm-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dsm-sp-4);
}
@media (max-width: 520px) { .dsm-form__row { grid-template-columns: 1fr; } }

.dsm-form__status {
    min-height: 1.2em;
    font-size: var(--dsm-fs-sm);
    margin-top: var(--dsm-sp-2);
}
.dsm-form__status.is-success { color: var(--dsm-success); }
.dsm-form__status.is-error   { color: var(--dsm-danger); }

.dsm-form.is-submitting {
    opacity: 0.6;
    pointer-events: none;
}

/* ============================================================
   <dialog> popup — CTA модалка.
   ============================================================ */

.dsm-popup {
    padding: 0;
    border: 0;
    margin: auto;
    width: min(560px, 92vw);
    max-height: 92vh;
    background: var(--dsm-surface);
    color: var(--dsm-ink);
    border-radius: var(--dsm-r-lg);
    box-shadow: var(--dsm-shadow-lg);
    overflow: hidden;
}
.dsm-popup::backdrop {
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(4px);
}
.dsm-popup[open] {
    animation: dsm-popup-in var(--dsm-dur-slow) var(--dsm-ease);
}
@keyframes dsm-popup-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.dsm-popup__inner {
    position: relative;
    padding: var(--dsm-sp-10) var(--dsm-sp-8);
    max-height: 92vh;
    overflow-y: auto;
}
@media (max-width: 520px) {
    .dsm-popup__inner { padding: var(--dsm-sp-8) var(--dsm-sp-5); }
}

.dsm-popup__close {
    position: absolute;
    top: var(--dsm-sp-3);
    right: var(--dsm-sp-3);
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--dsm-ink);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-popup__close:hover { background: var(--dsm-line); }

/* --- Поле загрузки файла в CTA-форме ------------------------------ */

.dsm-field--file .dsm-field__hint {
    color: var(--dsm-muted);
    font-weight: var(--dsm-fw-regular);
    font-size: var(--dsm-fs-xs);
    margin-left: var(--dsm-sp-1);
}

.dsm-file {
    display: flex;
    align-items: center;
    gap: var(--dsm-sp-3);
    padding: var(--dsm-sp-2);
    border: 1px dashed var(--dsm-line, rgba(0, 0, 0, .2));
    border-radius: var(--dsm-radius, 8px);
    background: var(--dsm-bg-soft, #f5f4f0);
    cursor: pointer;
    transition: border-color var(--dsm-dur-base) var(--dsm-ease),
                background var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-file:hover,
.dsm-file:focus-within {
    border-color: var(--dsm-accent);
    background: #fff;
}
.dsm-file__input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    pointer-events: none;
}
.dsm-file__btn {
    flex-shrink: 0;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--dsm-line, rgba(0,0,0,.12));
    border-radius: var(--dsm-radius-sm, 6px);
    font-size: var(--dsm-fs-sm);
    font-weight: var(--dsm-fw-semibold);
    color: var(--dsm-ink);
    white-space: nowrap;
}
.dsm-file__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsm-file__input:not(:placeholder-shown) + .dsm-file__btn + .dsm-file__name,
.dsm-file:has(.dsm-file__input:valid:not([value=""])) .dsm-file__name {
    color: var(--dsm-ink);
}
.dsm-file__clear {
    flex-shrink: 0;
    width: 26px; height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dsm-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dsm-dur-base) var(--dsm-ease),
                color var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-file__clear:hover {
    background: var(--dsm-line, rgba(0,0,0,.08));
    color: var(--dsm-ink);
}
.dsm-popup__close svg { width: 22px; height: 22px; }

/* === 30-cat.css === */
/* ============================================================
   Категория — заголовок, пилюли, фильтр, сетка товаров.
   ============================================================ */

.dsm-cat { padding: var(--dsm-sp-6) 0 var(--dsm-sp-16); }

.dsm-cat__head { margin: var(--dsm-sp-5) 0 var(--dsm-sp-6); }
.dsm-cat__title {
    font-size: var(--dsm-fs-4xl);
    font-weight: var(--dsm-fw-bold);
    text-transform: uppercase;
    margin: 0 0 var(--dsm-sp-4);
    line-height: 1.1;
}
.dsm-cat__desc { color: var(--dsm-muted); max-width: 72ch; }

/* Пилюли категорий */
.dsm-cat-pills__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dsm-sp-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--dsm-sp-6);
}
.dsm-cat-pills__link {
    display: inline-block;
    padding: 8px 16px;
    font-size: var(--dsm-fs-xs);
    font-weight: var(--dsm-fw-semibold);
    color: var(--dsm-ink);
    background: transparent;
    border: 1px solid var(--dsm-ink);
    border-radius: var(--dsm-r-full);
    text-decoration: none;
    transition: background var(--dsm-dur-base) var(--dsm-ease),
                color var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-cat-pills__link:hover {
    background: var(--dsm-ink);
    color: var(--dsm-bg);
}
.dsm-cat-pills__link.is-active {
    background: var(--dsm-ink);
    color: var(--dsm-bg);
}

/* Фильтр */
.dsm-cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dsm-sp-5);
    align-items: flex-end;
    padding: var(--dsm-sp-5);
    margin-bottom: var(--dsm-sp-8);
    background: var(--dsm-surface);
    border-radius: var(--dsm-r-md);
    box-shadow: var(--dsm-shadow-sm);
}
.dsm-cat-filter__group {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.dsm-cat-filter__legend {
    font-size: var(--dsm-fs-xs);
    font-weight: var(--dsm-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--dsm-ls-wide);
    color: var(--dsm-muted);
    margin-bottom: var(--dsm-sp-2);
}
.dsm-cat-filter__range {
    display: flex;
    gap: var(--dsm-sp-2);
    align-items: center;
}
.dsm-cat-filter__input { padding: 8px 12px; font-size: var(--dsm-fs-sm); }
.dsm-cat-filter__input--sm { width: 64px; padding: 6px 8px; text-align: center; }
.dsm-cat-filter__dash { color: var(--dsm-subtle); }

.dsm-cat-filter__dims {
    display: flex;
    gap: var(--dsm-sp-3);
}
.dsm-cat-filter__dim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.dsm-cat-filter__dim span {
    font-size: 11px;
    color: var(--dsm-muted);
}
.dsm-cat-filter__select { padding: 8px 28px 8px 12px; font-size: var(--dsm-fs-sm); }

.dsm-cat-filter__actions {
    display: flex;
    gap: var(--dsm-sp-3);
    align-items: center;
    margin-left: auto;
}
.dsm-cat-filter__reset {
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-muted);
    text-decoration: none;
    padding: 8px 4px;
}
.dsm-cat-filter__reset:hover { color: var(--dsm-accent); text-decoration: underline; }

@media (max-width: 640px) {
    .dsm-cat-filter { padding: var(--dsm-sp-4); gap: var(--dsm-sp-3); }
    .dsm-cat-filter__actions { width: 100%; justify-content: space-between; margin-left: 0; }
    .dsm-cat-filter__group--sort { width: 100%; }
    .dsm-cat-filter__select { width: 100%; }
}

/* SEO-описание внизу страницы категории */
.dsm-cat-bottom {
    margin-top: var(--dsm-sp-12);
    padding-top: var(--dsm-sp-8);
    border-top: 1px solid var(--dsm-line);
}
.dsm-cat-bottom__title {
    font-size: var(--dsm-fs-2xl);
    font-weight: var(--dsm-fw-bold);
    margin: 0 0 var(--dsm-sp-4);
}
.dsm-cat-bottom__body {
    max-width: 80ch;
    color: var(--dsm-ink-soft);
    font-size: var(--dsm-fs-md);
    line-height: 1.6;
}
.dsm-cat-bottom__body p { margin: 0 0 var(--dsm-sp-3); }
.dsm-cat-bottom__body ul,
.dsm-cat-bottom__body ol { padding-left: 1.2em; margin: 0 0 var(--dsm-sp-3); }

/* FAQ */
.dsm-cat-faq {
    margin-top: var(--dsm-sp-10);
    padding-top: var(--dsm-sp-8);
    border-top: 1px solid var(--dsm-line);
}
.dsm-cat-faq__title {
    font-size: var(--dsm-fs-2xl);
    font-weight: var(--dsm-fw-bold);
    margin: 0 0 var(--dsm-sp-5);
}
.dsm-cat-faq__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 80ch;
}
.dsm-cat-faq__item {
    border-top: 1px solid var(--dsm-line);
}
.dsm-cat-faq__item:last-child { border-bottom: 1px solid var(--dsm-line); }
.dsm-cat-faq__item details { padding: var(--dsm-sp-4) 0; }
.dsm-cat-faq__q {
    font-size: var(--dsm-fs-lg);
    font-weight: var(--dsm-fw-semibold);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: var(--dsm-sp-8);
}
.dsm-cat-faq__q::-webkit-details-marker { display: none; }
.dsm-cat-faq__q::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    line-height: 1;
    color: var(--dsm-muted);
    transition: transform var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-cat-faq__item details[open] .dsm-cat-faq__q::after {
    content: '−';
}
.dsm-cat-faq__a {
    margin-top: var(--dsm-sp-3);
    color: var(--dsm-ink-soft);
    line-height: 1.6;
}
.dsm-cat-faq__a p { margin: 0 0 var(--dsm-sp-3); }
.dsm-cat-faq__a p:last-child { margin-bottom: 0; }

/* === 31-product-card.css === */
/* ============================================================
   Product card — карточка в сетке категории и «Похожие».
   ============================================================ */

.dsm-products__title {
    font-size: var(--dsm-fs-2xl);
    font-weight: var(--dsm-fw-bold);
    text-transform: uppercase;
    margin: var(--dsm-sp-12) 0 var(--dsm-sp-6);
}

.dsm-products__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--dsm-sp-8) var(--dsm-sp-5);
}
@media (max-width: 980px) { .dsm-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .dsm-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dsm-sp-6) var(--dsm-sp-3); } }

.dsm-product-card {
    display: flex;
    flex-direction: column;
    gap: var(--dsm-sp-2);
}
.dsm-product-card__imgwrap {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--dsm-surface);
    border-radius: var(--dsm-r-md);
    margin-bottom: var(--dsm-sp-2);
}
.dsm-product-card__img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform var(--dsm-dur-slow) var(--dsm-ease);
}
.dsm-product-card__img--empty {
    display: block; width: 100%; height: 100%;
    background: var(--dsm-line-soft);
}
.dsm-product-card:hover .dsm-product-card__img { transform: scale(1.03); }

.dsm-product-card__body {
    display: block;
    color: inherit;
    text-decoration: none;
}
.dsm-product-card__title {
    font-size: var(--dsm-fs-sm);
    font-weight: var(--dsm-fw-bold);
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 var(--dsm-sp-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dsm-product-card__sku,
.dsm-product-card__dims {
    font-size: var(--dsm-fs-xs);
    color: var(--dsm-muted);
    margin-bottom: var(--dsm-sp-1);
}
.dsm-product-card__price {
    font-size: var(--dsm-fs-md);
    font-weight: var(--dsm-fw-bold);
    margin-top: var(--dsm-sp-1);
}

.dsm-product-card__btns {
    display: flex;
    gap: var(--dsm-sp-2);
    margin-top: auto;
    padding-top: var(--dsm-sp-3);
}
.dsm-product-card__btns .dsm-btn {
    flex: 1 1 0;
    padding: 9px 8px;
    font-size: var(--dsm-fs-xs);
}
@media (max-width: 480px) {
    .dsm-product-card__btns { flex-direction: column; }
    .dsm-product-card__btns .dsm-btn { font-size: var(--dsm-fs-sm); padding: 10px 14px; }
}

/* Empty cat */
.dsm-empty {
    max-width: 720px;
    margin: var(--dsm-sp-8) auto;
    padding: var(--dsm-sp-10) var(--dsm-sp-6);
    background: var(--dsm-surface);
    border-radius: var(--dsm-r-lg);
    text-align: center;
    box-shadow: var(--dsm-shadow-sm);
}
.dsm-empty--cat { max-width: 760px; }
.dsm-empty__title {
    font-size: var(--dsm-fs-xl);
    font-weight: var(--dsm-fw-bold);
    margin: 0 0 var(--dsm-sp-3);
}
.dsm-empty__text { color: var(--dsm-muted); margin: 0 0 var(--dsm-sp-6); }
.dsm-empty__actions {
    display: flex; gap: var(--dsm-sp-3); justify-content: center; flex-wrap: wrap;
}
.dsm-empty__also {
    margin-top: var(--dsm-sp-8);
    padding-top: var(--dsm-sp-6);
    border-top: 1px solid var(--dsm-line);
    display: flex;
    gap: var(--dsm-sp-2) var(--dsm-sp-3);
    justify-content: center;
    flex-wrap: wrap;
    align-items: baseline;
}
.dsm-empty__also-label { font-size: var(--dsm-fs-sm); color: var(--dsm-muted); }
.dsm-empty__also-link {
    font-size: var(--dsm-fs-xs);
    color: var(--dsm-ink);
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid var(--dsm-ink);
    border-radius: var(--dsm-r-full);
    transition: background var(--dsm-dur-base) var(--dsm-ease), color var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-empty__also-link:hover { background: var(--dsm-ink); color: var(--dsm-bg); }

/* === 32-product-single.css === */
/* ============================================================
   Single-product — страница товара.
   ============================================================ */

.dsm-product { padding: var(--dsm-sp-6) 0 var(--dsm-sp-16); }
.dsm-product__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--dsm-sp-12);
    margin-bottom: var(--dsm-sp-14);
}
@media (max-width: 900px) {
    .dsm-product__hero { grid-template-columns: 1fr; gap: var(--dsm-sp-6); }
    .dsm-product__gallery { max-width: 560px; margin-inline: auto; width: 100%; }
}

.dsm-product__photo {
    aspect-ratio: 4 / 3;
    background: var(--dsm-surface);
    border-radius: var(--dsm-r-md);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    margin: 0;
}
.dsm-product__main-img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.dsm-product__photo--empty {
    color: var(--dsm-subtle);
    aspect-ratio: 4 / 3;
}

.dsm-product__thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--dsm-sp-2);
    margin-top: var(--dsm-sp-3);
}
.dsm-product__thumb {
    padding: 0;
    background: var(--dsm-surface);
    border: 1px solid var(--dsm-line);
    border-radius: var(--dsm-r-sm);
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
    transition: border-color var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-product__thumb:hover,
.dsm-product__thumb.is-active { border-color: var(--dsm-accent); }
.dsm-product__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Info */
.dsm-product__title {
    font-size: var(--dsm-fs-3xl);
    font-weight: var(--dsm-fw-bold);
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0 0 var(--dsm-sp-4);
}
.dsm-product__sku {
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-muted);
    margin-bottom: var(--dsm-sp-4);
}
.dsm-product__price {
    font-size: var(--dsm-fs-2xl);
    font-weight: var(--dsm-fw-bold);
    margin-bottom: var(--dsm-sp-5);
}
.dsm-product__dims {
    display: inline-flex;
    gap: var(--dsm-sp-2);
    padding: 10px 14px;
    background: var(--dsm-surface);
    border-radius: var(--dsm-r-full);
    font-size: var(--dsm-fs-sm);
    margin-bottom: var(--dsm-sp-5);
}
.dsm-product__dims-label { color: var(--dsm-muted); }
.dsm-product__descr {
    font-size: var(--dsm-fs-md);
    color: var(--dsm-ink-soft);
    line-height: 1.6;
    margin-bottom: var(--dsm-sp-6);
}
.dsm-product__actions { margin-bottom: var(--dsm-sp-8); }

.dsm-product__trust {
    list-style: none;
    padding: var(--dsm-sp-6) 0 0;
    margin: 0;
    border-top: 1px solid var(--dsm-line);
    display: grid;
    gap: var(--dsm-sp-3);
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-ink-soft);
}
.dsm-product__trust li {
    display: flex; align-items: center; gap: var(--dsm-sp-3);
}
.dsm-product__trust-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: var(--dsm-ink);
    color: var(--dsm-bg);
    border-radius: 50%;
    font-size: var(--dsm-fs-xs);
    font-weight: var(--dsm-fw-semibold);
    flex: 0 0 22px;
}

/* === 40-page.css === */
/* ============================================================
   Page — общий шаблон страниц (oferta, politika, блог-пост и т. п.).
   ============================================================ */

.dsm-page { padding: var(--dsm-sp-6) 0 var(--dsm-sp-10); }
.dsm-page__head { margin: var(--dsm-sp-5) 0 var(--dsm-sp-8); }
.dsm-page__title {
    font-size: var(--dsm-fs-4xl);
    font-weight: var(--dsm-fw-bold);
    text-transform: uppercase;
    margin: 0 0 var(--dsm-sp-4);
    line-height: 1.1;
}
.dsm-page__lede {
    font-size: var(--dsm-fs-md);
    color: var(--dsm-muted);
    max-width: 72ch;
    margin: 0;
}
.dsm-page__content h2,
.dsm-page__content h3 { margin-top: var(--dsm-sp-8); margin-bottom: var(--dsm-sp-3); }
.dsm-page__content p { margin-bottom: var(--dsm-sp-4); }
.dsm-page__content ul,
.dsm-page__content ol { margin-bottom: var(--dsm-sp-4); padding-left: var(--dsm-sp-6); }
.dsm-page__content a { color: var(--dsm-accent); }

/* === 41-contacts.css === */
/* ============================================================
   Kontakty — контакты + карта.
   ============================================================ */

.dsm-contacts__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--dsm-sp-10);
    align-items: start;
}
@media (max-width: 900px) { .dsm-contacts__grid { grid-template-columns: 1fr; } }

.dsm-contacts__subtitle {
    font-size: var(--dsm-fs-xl);
    font-weight: var(--dsm-fw-bold);
    margin: 0 0 var(--dsm-sp-3);
    text-transform: uppercase;
}
.dsm-contacts__subtitle + .dsm-contacts__subtitle { margin-top: var(--dsm-sp-8); }
.dsm-contacts__lede { color: var(--dsm-muted); margin-bottom: var(--dsm-sp-6); }
.dsm-contacts__list {
    display: flex;
    flex-direction: column;
    gap: var(--dsm-sp-3);
    margin: 0 0 var(--dsm-sp-8);
    font-style: normal;
}
.dsm-contacts__item {
    font-size: var(--dsm-fs-md);
    color: var(--dsm-ink);
    text-decoration: none;
    font-weight: var(--dsm-fw-medium);
}
.dsm-contacts__item:hover { color: var(--dsm-accent); }
.dsm-contacts__item--phone {
    font-size: var(--dsm-fs-2xl);
    font-weight: var(--dsm-fw-bold);
}
.dsm-contacts__address {
    font-size: var(--dsm-fs-md);
    color: var(--dsm-ink-soft);
    margin: 0 0 var(--dsm-sp-2);
}
.dsm-contacts__hours {
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-muted);
    margin: 0 0 var(--dsm-sp-6);
}

.dsm-contacts__map iframe {
    width: 100%;
    border: 0;
    border-radius: var(--dsm-r-md);
    display: block;
    background: var(--dsm-line-soft);
}

/* === 42-delivery.css === */
/* ============================================================
   Dostavka — доставка и оплата, карточки условий.
   ============================================================ */

.dsm-delivery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dsm-sp-5);
}
@media (max-width: 900px) { .dsm-delivery__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dsm-delivery__grid { grid-template-columns: 1fr; } }

.dsm-delivery__card {
    background: var(--dsm-surface);
    border-radius: var(--dsm-r-md);
    padding: var(--dsm-sp-6);
    box-shadow: var(--dsm-shadow-sm);
}
.dsm-delivery__card--wide { grid-column: 1 / -1; }

.dsm-delivery__subtitle {
    font-size: var(--dsm-fs-lg);
    font-weight: var(--dsm-fw-bold);
    text-transform: uppercase;
    margin: 0 0 var(--dsm-sp-3);
}
.dsm-delivery__card p { color: var(--dsm-ink-soft); margin: 0 0 var(--dsm-sp-3); }
.dsm-delivery__card p:last-child { margin-bottom: 0; }
.dsm-delivery__hint { color: var(--dsm-muted); font-size: var(--dsm-fs-sm); }

.dsm-delivery__list {
    list-style: none;
    padding: 0; margin: var(--dsm-sp-3) 0 0;
    display: grid;
    gap: var(--dsm-sp-2);
}
.dsm-delivery__list li {
    padding-left: 22px;
    position: relative;
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-ink-soft);
}
.dsm-delivery__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--dsm-accent);
    font-weight: var(--dsm-fw-bold);
}

.dsm-delivery__discounts {
    margin: var(--dsm-sp-3) 0 0;
    display: grid;
    gap: var(--dsm-sp-2);
}
.dsm-delivery__discounts div {
    display: flex;
    align-items: baseline;
    gap: var(--dsm-sp-2);
    font-size: var(--dsm-fs-sm);
}
.dsm-delivery__discounts dt {
    font-weight: var(--dsm-fw-semibold);
    min-width: 130px;
}
.dsm-delivery__discounts dd { margin: 0; color: var(--dsm-muted); }

/* === 43-reviews.css === */
/* ============================================================
   Reviews — карточки отзывов.
   ============================================================ */

.dsm-reviews {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dsm-sp-5);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--dsm-sp-10);
}
@media (max-width: 720px) { .dsm-reviews { grid-template-columns: 1fr; } }

.dsm-review {
    background: var(--dsm-surface);
    border-radius: var(--dsm-r-md);
    padding: var(--dsm-sp-6);
    box-shadow: var(--dsm-shadow-sm);
}
.dsm-review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--dsm-sp-2) var(--dsm-sp-3);
    margin-bottom: var(--dsm-sp-3);
}
.dsm-review__author { font-weight: var(--dsm-fw-bold); font-size: var(--dsm-fs-md); }
.dsm-review__org    { color: var(--dsm-muted); font-size: var(--dsm-fs-sm); }
.dsm-review__stars  {
    margin-left: auto;
    color: var(--dsm-star);
    letter-spacing: 2px;
    font-size: var(--dsm-fs-md);
}
.dsm-review__body { font-size: var(--dsm-fs-sm); line-height: 1.6; color: var(--dsm-ink-soft); }
.dsm-review__body p { margin: 0 0 var(--dsm-sp-2); }
.dsm-review__body p:last-child { margin: 0; }

/* === 44-blog.css === */
/* ============================================================
   Blog — архив и single-post.
   ============================================================ */

.dsm-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dsm-sp-6);
    margin: var(--dsm-sp-8) 0;
}
@media (max-width: 900px) { .dsm-blog__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dsm-blog__grid { grid-template-columns: 1fr; } }

.dsm-blog-card {
    background: var(--dsm-surface);
    border-radius: var(--dsm-r-md);
    overflow: hidden;
    box-shadow: var(--dsm-shadow-sm);
    display: flex;
    flex-direction: column;
}
.dsm-blog-card__thumb {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--dsm-line-soft);
}
.dsm-blog-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dsm-dur-slow) var(--dsm-ease);
}
.dsm-blog-card:hover .dsm-blog-card__img { transform: scale(1.04); }

.dsm-blog-card__body {
    padding: var(--dsm-sp-4) var(--dsm-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--dsm-sp-2);
    flex: 1 1 auto;
}
.dsm-blog-card__date {
    font-size: var(--dsm-fs-xs);
    color: var(--dsm-muted);
    text-transform: uppercase;
    letter-spacing: var(--dsm-ls-wide);
}
.dsm-blog-card__title {
    font-size: var(--dsm-fs-md);
    font-weight: var(--dsm-fw-bold);
    line-height: 1.3;
    margin: 0;
}
.dsm-blog-card__title a { color: inherit; text-decoration: none; }
.dsm-blog-card__title a:hover { color: var(--dsm-accent); }
.dsm-blog-card__excerpt {
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-muted);
    margin: 0;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px; height: 36px;
    padding: 0 var(--dsm-sp-3);
    margin: 0 2px;
    font-size: var(--dsm-fs-sm);
    background: var(--dsm-surface);
    color: var(--dsm-ink);
    border-radius: var(--dsm-r-sm);
    text-decoration: none;
    border: 1px solid var(--dsm-line);
}
.page-numbers.current {
    background: var(--dsm-ink);
    color: var(--dsm-bg);
    border-color: var(--dsm-ink);
}
.page-numbers:hover { border-color: var(--dsm-accent); color: var(--dsm-accent); }

/* Single post */
.dsm-post-single__head { margin: var(--dsm-sp-5) 0 var(--dsm-sp-6); }
.dsm-post-single__title {
    font-size: var(--dsm-fs-3xl);
    font-weight: var(--dsm-fw-bold);
    line-height: 1.15;
    margin: 0 0 var(--dsm-sp-3);
}
.dsm-post-single__meta {
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-muted);
}
.dsm-post-single__hero {
    margin: 0 0 var(--dsm-sp-8);
    border-radius: var(--dsm-r-md);
    overflow: hidden;
}
.dsm-post-single__img { width: 100%; height: auto; display: block; }
.dsm-post-single__content p,
.dsm-post-single__content ul,
.dsm-post-single__content ol,
.dsm-post-single__content blockquote { margin-bottom: var(--dsm-sp-4); }
.dsm-post-single__content img { border-radius: var(--dsm-r-md); margin: var(--dsm-sp-4) 0; }

/* === 45-project-single.css === */
/* ============================================================
   Single-project — страница проекта.
   ============================================================ */

.dsm-project-single { padding: var(--dsm-sp-6) 0 var(--dsm-sp-16); }
.dsm-project-single__head { margin: var(--dsm-sp-5) 0 var(--dsm-sp-6); }
.dsm-project-single__type {
    display: inline-block;
    font-size: var(--dsm-fs-xs);
    font-weight: var(--dsm-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--dsm-ls-wide);
    color: var(--dsm-accent);
    margin-bottom: var(--dsm-sp-3);
}
.dsm-project-single__title {
    font-size: var(--dsm-fs-4xl);
    font-weight: var(--dsm-fw-bold);
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0;
}
.dsm-project-single__hero {
    margin: 0 0 var(--dsm-sp-8);
    border-radius: var(--dsm-r-md);
    overflow: hidden;
}
.dsm-project-single__img { width: 100%; height: auto; display: block; }
.dsm-project-single__body {
    max-width: 72ch;
    font-size: var(--dsm-fs-md);
    line-height: 1.7;
}
.dsm-project-single__body p,
.dsm-project-single__body ul,
.dsm-project-single__body ol { margin-bottom: var(--dsm-sp-4); }
.dsm-project-single__related { margin-top: var(--dsm-sp-14); }

/* 404 */
.dsm-404 { padding: var(--dsm-sp-16) 0; text-align: center; }
.dsm-404__wrap { max-width: 720px; }
.dsm-404__code {
    font-size: 120px;
    font-weight: var(--dsm-fw-bold);
    line-height: 1;
    color: var(--dsm-accent);
    margin: 0 0 var(--dsm-sp-4);
    letter-spacing: -0.03em;
}
.dsm-404__title { font-size: var(--dsm-fs-2xl); margin-bottom: var(--dsm-sp-4); }
.dsm-404__text { color: var(--dsm-muted); margin-bottom: var(--dsm-sp-8); }
.dsm-404__actions {
    display: flex;
    gap: var(--dsm-sp-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--dsm-sp-12);
}
.dsm-404__cats { margin-top: var(--dsm-sp-10); padding-top: var(--dsm-sp-8); border-top: 1px solid var(--dsm-line); }
.dsm-404__cats-title { font-size: var(--dsm-fs-md); margin-bottom: var(--dsm-sp-4); }
.dsm-404__cats-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--dsm-sp-2);
    list-style: none;
    padding: 0;
}
.dsm-404__cats-list a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--dsm-ink);
    border-radius: var(--dsm-r-full);
    font-size: var(--dsm-fs-sm);
    color: var(--dsm-ink);
    text-decoration: none;
}
.dsm-404__cats-list a:hover { background: var(--dsm-ink); color: var(--dsm-bg); }

/* Галерея проекта — сетка 3×N с lightbox */
.dsm-project-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dsm-sp-3);
    margin-top: var(--dsm-sp-6);
}
@media (max-width: 720px) { .dsm-project-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .dsm-project-gallery { grid-template-columns: 1fr; } }

.dsm-project-gallery__item {
    display: block;
    overflow: hidden;
    border-radius: var(--dsm-r-md);
    background: var(--dsm-surface);
    aspect-ratio: 4 / 3;
    transition: transform var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-project-gallery__item:hover { transform: translateY(-2px); }
.dsm-project-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dsm-dur-slow) var(--dsm-ease);
}
.dsm-project-gallery__item:hover img { transform: scale(1.04); }

/* === 46-rekvizity.css === */
/* ============================================================
   Rekvizity — страница с реквизитами компании.
   ============================================================ */

.dsm-rekvizity__download-wrap {
    margin-top: var(--dsm-sp-4);
}
.dsm-rekvizity__download {
    display: inline-flex;
    align-items: center;
    gap: var(--dsm-sp-2);
}

.dsm-rekvizity__card {
    background: #fff;
    border: 1px solid var(--dsm-line, rgba(0,0,0,.08));
    border-radius: var(--dsm-radius-lg, 12px);
    overflow: hidden;
    box-shadow: 0 4px 16px -8px rgba(0, 11, 48, .08);
}
.dsm-rekvizity__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dsm-fs-sm);
}
.dsm-rekvizity__table tr + tr {
    border-top: 1px solid var(--dsm-line, rgba(0,0,0,.08));
}
.dsm-rekvizity__table th,
.dsm-rekvizity__table td {
    padding: var(--dsm-sp-3) var(--dsm-sp-4);
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}
.dsm-rekvizity__table th {
    width: 38%;
    color: var(--dsm-muted);
    font-weight: var(--dsm-fw-regular);
    background: var(--dsm-bg-soft, #f5f4f0);
}
.dsm-rekvizity__table td {
    color: var(--dsm-ink);
    font-weight: var(--dsm-fw-semibold);
    word-break: break-word;
}

.dsm-rekvizity__extra {
    margin-top: var(--dsm-sp-6);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .dsm-rekvizity__table th,
    .dsm-rekvizity__table td {
        display: block;
        width: 100%;
        padding: var(--dsm-sp-2) var(--dsm-sp-3);
    }
    .dsm-rekvizity__table th {
        padding-bottom: 0;
        background: transparent;
        font-size: var(--dsm-fs-xs);
    }
    .dsm-rekvizity__table tr + tr {
        border-top: 1px solid var(--dsm-line, rgba(0,0,0,.08));
    }
}

/* === 50-lightbox.css === */
/* ============================================================
   Lightbox — полноэкранная модалка для изображений.
   ============================================================ */

.dsm-lightbox {
    /* сбрасываем нативный <dialog> */
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    max-width: none;
    max-height: none;
    width: 100vw;
    height: 100vh;
    color: #fff;
}
.dsm-lightbox::backdrop {
    background: rgba(8, 8, 16, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.dsm-lightbox[open] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    gap: var(--dsm-sp-3);
    padding: var(--dsm-sp-6);
}

html.is-lightbox-open,
html.is-lightbox-open body { overflow: hidden; }

.dsm-lightbox__stage {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dsm-sp-3);
    width: 100%;
    height: 100%;
    min-height: 0;
}
.dsm-lightbox__img {
    max-width: min(92vw, 1100px);
    max-height: 82vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: var(--dsm-r-sm);
    background: #fff;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.55);
    animation: dsm-lightbox-in 180ms ease-out;
}
@keyframes dsm-lightbox-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.dsm-lightbox__caption {
    font-size: var(--dsm-fs-sm);
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: var(--dsm-ls-wide);
    text-transform: uppercase;
}
.dsm-lightbox__caption:empty { display: none; }

/* Кнопки навигации */
.dsm-lightbox__nav {
    grid-row: 1;
    appearance: none;
    border: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: var(--dsm-r-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--dsm-dur-base) var(--dsm-ease),
                transform var(--dsm-dur-base) var(--dsm-ease);
}
.dsm-lightbox__nav:hover,
.dsm-lightbox__nav:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
    outline: none;
}
.dsm-lightbox__nav--prev { grid-column: 1; }
.dsm-lightbox__nav--next { grid-column: 3; }
.dsm-lightbox__nav[hidden] { display: none; }

/* Close */
.dsm-lightbox__close {
    position: absolute;
    top: var(--dsm-sp-4);
    right: var(--dsm-sp-4);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: var(--dsm-r-full);
    z-index: 2;
}
.dsm-lightbox__close:hover,
.dsm-lightbox__close:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Счётчик */
.dsm-lightbox__counter {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--dsm-fs-xs);
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: var(--dsm-ls-wide);
}

/* Мобилки — навигация под фото, кнопка close в углу */
@media (max-width: 720px) {
    .dsm-lightbox[open] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto auto;
        padding: var(--dsm-sp-4);
    }
    .dsm-lightbox__stage   { grid-column: 1 / -1; grid-row: 1; }
    .dsm-lightbox__nav     { grid-row: 2; width: 48px; height: 48px; }
    .dsm-lightbox__nav--prev { grid-column: 1; justify-self: start; }
    .dsm-lightbox__nav--next { grid-column: 2; justify-self: end; }
    .dsm-lightbox__counter { grid-column: 1 / -1; grid-row: 3; }
    .dsm-lightbox__img { max-height: 74vh; max-width: 100%; }
}

/* === 99-utilities.css === */
/* ============================================================
   Утилитарные классы (минимум — BEM > utility-first в этом проекте).
   ============================================================ */

.dsm-text-center { text-align: center; }
.dsm-text-muted  { color: var(--dsm-muted); }

.dsm-mt-0  { margin-top: 0 !important; }
.dsm-mt-4  { margin-top: var(--dsm-sp-4); }
.dsm-mt-8  { margin-top: var(--dsm-sp-8); }
.dsm-mb-4  { margin-bottom: var(--dsm-sp-4); }
.dsm-mb-8  { margin-bottom: var(--dsm-sp-8); }

.dsm-hidden { display: none !important; }
@media (max-width: 640px) { .dsm-hide-on-mobile { display: none !important; } }
@media (min-width: 641px) { .dsm-hide-on-desktop { display: none !important; } }

/* ============================================================
   Touch-таргеты: на мобильном все кликабельные «мелочи» — минимум 44×44.
   См. WCAG 2.5.5 Target Size (Enhanced) и Apple HIG.
   ============================================================ */
@media (hover: none), (max-width: 768px) {
    .dsm-social__link {
        width: 44px;
        height: 44px;
    }
    .dsm-faq__toggle {
        min-width: 44px;
        min-height: 44px;
    }
    .dsm-drawer__summary,
    .dsm-drawer__sublink {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .dsm-menu__caret {
        width: 18px;
        height: 18px;
    }
    .dsm-cities__item {
        padding: 6px 10px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}