/* Тема dg2026 — база и «хром» страницы (шапка, меню, подвал, модалка, плашка).
 * Секции лендинга — в sections.css.
 *
 * Правило файла: ни одного литерального цвета, радиуса или шага сетки —
 * только переменные из tokens.css. Числа вроде 1px, 50%, 100% структурные.
 * Классы с префиксом dg- и не пересекаются ни с базовой темой, ни со starter.
 */

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

html {
    scroll-behavior: smooth;
    /* Шапка липкая, поэтому цель якоря иначе уезжает под неё.
     * Ниже 1024 шапка бургерная и состоит из ДВУХ строк — это 96 px, а токен
     * --dg-sticky-h-mob (48) задаёт высоту одной строки (.dg-header__main).
     * С ним секция заезжала под шапку на 28 px. Реальную высоту публикует
     * main.js в --dg-header-h; токен оставлен запасным вариантом, если JS
     * не отработал. На десктопе (≥1024) --dg-sticky-h верен и так. */
    scroll-padding-top: calc(var(--dg-header-h, var(--dg-sticky-h-mob)) + var(--dg-gap));
}
@media (min-width: 1024px) {
    html { scroll-padding-top: calc(var(--dg-sticky-h) + var(--dg-gap)); }
}

body.dg {
    margin: 0;
    background: var(--dg-bg-base);
    color: var(--dg-text-primary);
    font-family: var(--dg-font-text);
    font-size: var(--dg-fs-body);
    line-height: var(--dg-lh-text);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

/* Видимый фокус — обязателен, мышью не мешает */
:focus-visible {
    outline: 2px solid var(--dg-text-accent);
    outline-offset: 2px;
    border-radius: var(--dg-radius-field);
}

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

/* Плашка предпросмотра версии — видна только сотруднику */
.dg-preview {
    background: var(--dg-bg-accent);
    color: var(--dg-text-on-accent);
    text-align: center;
    padding: calc(var(--dg-gap) / 2.5) var(--dg-gutter);
    font-size: var(--dg-fs-small);
    font-weight: 700;
}

.dg-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- сетка --- */

.dg-wrap {
    width: min(var(--dg-container), 100% - var(--dg-gutter) * 2);
    margin-inline: auto;
}

.dg-wrap--text { max-width: var(--dg-container-text); }

.dg-section { padding-block: var(--dg-section-y); }
/* Узкая полоса (trust strip): в макете 189 px при 110 px у остальных секций */
.dg-section--tight { padding-block: calc(var(--dg-gap) * 2.4); }

/* Чередование фонов задаёт шаблон секции классом, а не порядком в DOM:
 * README §2 требует, чтобы две секции одного цвета не шли подряд, и при
 * вставке новой секции соседей перекрашивают осознанно. */
.dg-section--base { background: var(--dg-bg-base); }
.dg-section--surface { background: var(--dg-bg-surface); }
.dg-section--dark { background: var(--dg-bg-header); color: var(--dg-text-on-accent); }
.dg-section--accent { background: var(--dg-bg-accent); color: var(--dg-text-on-accent); }

/* --- типографика --- */

.dg-eyebrow {
    font-size: var(--dg-fs-eyebrow);
    letter-spacing: var(--dg-ls-eyebrow);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--dg-text-muted);
    margin: 0;
}
.dg-section--dark .dg-eyebrow { color: currentColor; opacity: .75; }
/* На оранжевом прозрачность не снижаем: белый на bg/accent даёт всего 3.56,
   а с opacity .75 падает до 2.4 — см. заметку о контрасте в CLAUDE.md */
.dg-section--accent .dg-eyebrow { color: currentColor; }

.dg-h1, .dg-h2 {
    font-family: var(--dg-font-display);
    letter-spacing: var(--dg-ls-display);
    margin: 0;
}
/* .dg-h1 на лендинге не используется (у героя свой .dg-hero__title),
   оставлен как часть шкалы для текстовых страниц. */
.dg-h1 { font-size: var(--dg-fs-h1); line-height: var(--dg-lh-h1); font-weight: 800; }
.dg-h2 { font-size: var(--dg-fs-h2); line-height: var(--dg-lh-h2); font-weight: 700; }

.dg-lead {
    font-size: var(--dg-fs-lead);
    color: var(--dg-text-secondary);
    margin: 0;
}
.dg-section--dark .dg-lead { color: currentColor; opacity: .85; }
.dg-section--accent .dg-lead { color: currentColor; }

.dg-price {
    font-family: var(--dg-font-display);
    font-weight: 800;
    letter-spacing: var(--dg-ls-display);
    font-size: var(--dg-fs-price);
    color: var(--dg-text-accent);
}
/* Цена в строке таблицы/карточки: тот же Unbounded, но в размер заголовка карточки */
.dg-price--sm {
    font-family: var(--dg-font-display);
    font-weight: 800;
    letter-spacing: var(--dg-ls-display);
    font-size: var(--dg-fs-card-title);
    color: var(--dg-text-accent);
    white-space: nowrap;
}

/* Заголовок секции: в макете колонка заголовка и лида ограничена ~820 px,
   поэтому «Не впевнені, що саме треба? Зберіть свій набір» ломается на две строки */
.dg-head { display: grid; gap: var(--dg-gap); margin-bottom: calc(var(--dg-gap) * 2); max-width: var(--dg-container-text); }
.dg-head .dg-lead { max-width: 60ch; }

/* Парные варианты десктоп/мобилка (в макете местами разный текст и структура).
 *
 * Правила ТОЛЬКО скрывают и никогда не восстанавливают display: иначе пришлось
 * бы угадывать исходное значение — у .dg-list это grid, у .dg-hero__media block,
 * у <span> inline. Раньше здесь стояло display:initial, что для div означает
 * inline и ломало раскладку.
 *
 * Класс продублирован намеренно: sections.css грузится позже, и одиночный
 * .dg-only-desk проигрывал по порядку правилам вроде .dg-list{display:grid} —
 * в результате на мобилке показывались оба варианта сразу. */
@media (max-width: 767.98px) {
    .dg-only-desk.dg-only-desk { display: none; }
}
@media (min-width: 768px) {
    .dg-only-mob.dg-only-mob { display: none; }
}

/* --- кнопки --- */

.dg-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: calc(var(--dg-gap) / 2);
    border: 1px solid transparent;
    border-radius: var(--dg-radius-pill);
    padding: calc(var(--dg-gap) * 0.8) calc(var(--dg-gap) * 1.6);
    font-weight: 700;
    font-size: var(--dg-fs-body);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dg-anim) ease, border-color var(--dg-anim) ease,
                color var(--dg-anim) ease;
}
.dg-btn--primary { background: var(--dg-bg-accent); color: var(--dg-text-on-accent); }
.dg-btn--primary:hover { background: var(--dg-text-accent); }
.dg-btn--ghost {
    background: transparent;
    border-color: var(--dg-border-default);
    color: var(--dg-text-primary);
}
.dg-btn--ghost:hover { border-color: var(--dg-text-accent); color: var(--dg-text-accent); }
.dg-section--dark .dg-btn--ghost,
.dg-hero .dg-btn--ghost,
.dg-section--accent .dg-btn--ghost { border-color: currentColor; color: currentColor; }
/* Белая кнопка на оранжевом (финальный CTA) */
.dg-btn--dark { background: var(--dg-bg-header); color: var(--dg-text-on-accent); }
.dg-btn--dark:hover { background: var(--dg-bg-header-deep); }
.dg-btn--inverse { background: var(--dg-bg-surface); color: var(--dg-text-accent-sm); }
.dg-btn--inverse:hover { background: var(--dg-bg-base); }
.dg-btn--block { width: 100%; }
.dg-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* --- меню услуг: мега-меню на десктопе (275:2) и шторка в бургере (279:3) --- */

.dg-nav__trigger { border: 0; background: none; cursor: pointer; font: inherit;
    color: inherit; padding: 0; }
.dg-nav__trigger[aria-expanded="true"] { color: var(--dg-bg-accent); opacity: 1; }

.dg-svcmenu { display: grid; gap: calc(var(--dg-gap) / 5); }
.dg-svcmenu__item { display: flex; align-items: center; justify-content: space-between;
    gap: var(--dg-gap); padding: calc(var(--dg-gap) / 1.6) calc(var(--dg-gap) / 1.25);
    border-radius: var(--dg-radius-card-xs); text-decoration: none;
    transition: background-color var(--dg-anim) ease; }
.dg-svcmenu__item:hover { background: var(--dg-bg-base); }
.dg-svcmenu__text { display: grid; gap: calc(var(--dg-gap) / 6); }
.dg-svcmenu__title { font-weight: 600; font-size: var(--dg-fs-lead); color: var(--dg-text-primary); }
.dg-svcmenu__sub { font-size: var(--dg-fs-small); font-weight: 500; color: var(--dg-text-muted); }
.dg-svcmenu__price { font-family: var(--dg-font-display); font-weight: 800;
    letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-body);
    color: var(--dg-bg-accent); white-space: nowrap; }
.dg-svcmenu__all { display: inline-block; margin-top: calc(var(--dg-gap) / 3);
    padding-inline: calc(var(--dg-gap) / 1.25); font-weight: 600;
    font-size: var(--dg-fs-small); color: var(--dg-text-muted); text-decoration: none; }
.dg-svcmenu__all:hover { color: var(--dg-text-accent-sm); }

.dg-promo { background: var(--dg-bg-accent); color: var(--dg-text-on-accent);
    border-radius: var(--dg-radius-card-sm); padding: var(--dg-card-pad-sm);
    display: grid; gap: calc(var(--dg-gap) / 1.6); align-content: start; }
.dg-promo__value { font-family: var(--dg-font-display); font-weight: 800;
    letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-h1); line-height: 1; }
.dg-promo__text { font-weight: 600; font-size: var(--dg-fs-lead); }
/* На мобилке промо ложится в строку: скидка слева, текст справа (279:41) */
.dg-promo--row { grid-template-columns: auto 1fr; align-items: center; gap: var(--dg-gap); }
.dg-promo--row .dg-promo__value { font-size: var(--dg-fs-h2); }
.dg-promo--row .dg-promo__text { font-size: var(--dg-fs-body); }

.dg-mega { display: none; }
@media (min-width: 1024px) {
    .dg-mega { display: block; position: absolute; left: 50%; transform: translateX(-50%);
        top: 100%; z-index: 60; width: min(944px, calc(100% - var(--dg-gutter) * 2)); }
    .dg-mega[hidden] { display: none; }
    .dg-mega__inner { display: grid; grid-template-columns: 1fr 300px; gap: calc(var(--dg-gap) * 1.4);
        background: var(--dg-bg-surface); border-radius: var(--dg-radius-card);
        padding: calc(var(--dg-gap) * 1.4); box-shadow: 0 24px 60px rgba(7, 47, 51, .28); }
    /* «Носик» под пунктом меню: середину пункта JS кладёт в --dg-mega-x */
    .dg-mega__caret { position: absolute; top: -9px; left: var(--dg-mega-x, 50%);
        transform: translateX(-50%); width: 18px; height: 10px;
        background: var(--dg-bg-surface); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
}

/* Затемнение страницы под открытым мега-меню (275:22) */
.dg-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(7, 47, 51, .45);
    border: 0; width: 100%; cursor: default; }
.dg-scrim[hidden] { display: none; }

.dg-menu__sheet { background: var(--dg-bg-surface); border-radius: var(--dg-radius-card);
    padding: calc(var(--dg-gap) * 1.1) calc(var(--dg-gap) / 1.25) calc(var(--dg-gap) / 1.6);
    display: grid; gap: calc(var(--dg-gap) / 2.5); margin-bottom: var(--dg-gap); }
.dg-menu__grabber { justify-self: center; width: 44px; height: 4px;
    border-radius: var(--dg-radius-pill); background: var(--dg-bg-muted);
    margin-top: calc(var(--dg-gap) / 3); }

/* --- чипы мессенджеров --- */

.dg-msg { display: inline-flex; align-items: center; gap: calc(var(--dg-gap) / 2.5); text-decoration: none; }
.dg-msg__chip {
    width: var(--dg-chip); height: var(--dg-chip); flex: 0 0 var(--dg-chip);
    border-radius: var(--dg-radius-pill);
    background: var(--dg-bg-surface);
    border: 1px solid var(--dg-border-default);
    display: grid; place-items: center;
}
.dg-msg__chip svg { width: 50%; height: 50%; display: block; }
/* Глиф красится градиентом бренда через маску: сам SVG монохромный */
.dg-msg__chip--telegram svg { fill: url(#dg-grad-telegram); }
.dg-msg__chip--messenger svg { fill: url(#dg-grad-messenger); }
.dg-msg__chip--viber svg { fill: url(#dg-grad-viber); }
.dg-msg__chip--instagram svg { fill: url(#dg-grad-instagram); }
.dg-msg__label { font-size: var(--dg-fs-small); }
.dg-msg--lg .dg-msg__chip { width: var(--dg-chip-lg); height: var(--dg-chip-lg); flex-basis: var(--dg-chip-lg); }

/* На тёмном фоне обводка чипа не нужна */
.dg-section--dark .dg-msg__chip,
.dg-header .dg-msg__chip,
.dg-footer .dg-msg__chip,
.dg-menu .dg-msg__chip { border-color: transparent; }

/* Заливной вариант (макет: верхняя полоса и схлопнутая шапка) — кружок
   в цвете бренда, глиф белый. В пилюле к нему добавляется подпись. */
.dg-msg--solid .dg-msg__chip svg { fill: var(--dg-text-on-accent); }
.dg-msg--solid .dg-msg__chip--telegram { background: var(--dg-grad-telegram); }
.dg-msg--solid .dg-msg__chip--messenger { background: var(--dg-grad-messenger); }
.dg-msg--solid .dg-msg__chip--viber { background: var(--dg-grad-viber); }
.dg-msg--solid .dg-msg__chip--instagram { background: var(--dg-grad-instagram); }
.dg-msg--pill {
    background: var(--dg-bg-surface); color: var(--dg-text-primary);
    border-radius: var(--dg-radius-pill);
    padding: calc(var(--dg-gap) / 4) calc(var(--dg-gap) / 1.6) calc(var(--dg-gap) / 4) calc(var(--dg-gap) / 4);
}
.dg-msg--pill .dg-msg__label { font-weight: 500; }

/* --- шапка ---
 * В макете шапка целиком на тёмном петроле: верхняя полоса (часы + мессенджеры)
 * ещё темнее, ряд с логотипом и меню — в цвет героя. После 120 px прокрутки
 * верхняя полоса схлопывается, а в ряду вместо переключателя языка
 * появляются четыре чипа (184:2). */

.dg-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--dg-bg-header);
    color: var(--dg-text-on-accent);
    transition: box-shadow var(--dg-anim) ease;
}
.dg-header__top {
    display: none;
    background: var(--dg-bg-header-deep);
    font-size: var(--dg-fs-small);
    color: var(--dg-text-on-accent);
}
.dg-header__top-inner {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 60px; gap: var(--dg-gap);
}
.dg-header__msgs { display: flex; align-items: center; gap: calc(var(--dg-gap) / 2); }
.dg-header__msgs-label { opacity: .8; margin-right: calc(var(--dg-gap) / 2); }

.dg-header__main {
    display: flex; align-items: center; gap: var(--dg-gap);
    min-height: var(--dg-sticky-h-mob);
}
.dg-logo { display: inline-flex; align-items: baseline; gap: calc(var(--dg-gap) / 2); text-decoration: none; }
.dg-logo__name {
    font-family: var(--dg-font-display); font-weight: 800;
    letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-card-title);
}
.dg-logo__city {
    font-size: var(--dg-fs-eyebrow); letter-spacing: var(--dg-ls-eyebrow);
    opacity: .7; text-transform: uppercase;
}
.dg-nav { display: none; gap: calc(var(--dg-gap) * 1.6); }
.dg-nav a { text-decoration: none; font-weight: 500; opacity: .9; white-space: nowrap; }
.dg-nav a:hover { opacity: 1; color: var(--dg-bg-accent); }
.dg-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--dg-gap); }
.dg-header__phone { font-weight: 700; text-decoration: none; white-space: nowrap; }
.dg-header__chips { display: none; }
.dg-header__top-phone { display: none; color: inherit; font-weight: 700; text-decoration: none; margin-left: var(--dg-gap); }

.dg-lang { display: inline-flex; background: var(--dg-overlay-strong); border-radius: var(--dg-radius-pill); padding: calc(var(--dg-gap) / 10); }
.dg-lang a {
    padding: calc(var(--dg-gap) / 4) calc(var(--dg-gap) / 1.6);
    border-radius: var(--dg-radius-pill);
    font-size: var(--dg-fs-eyebrow); font-weight: 700; text-decoration: none;
    letter-spacing: var(--dg-ls-eyebrow); opacity: .8;
}
.dg-lang a[aria-current="true"] { background: var(--dg-bg-surface); color: var(--dg-text-primary); opacity: 1; }

.dg-burger {
    background: none; border: 0; cursor: pointer; padding: 0;
    width: 24px; height: 24px; display: grid; align-content: center;
    gap: calc(var(--dg-gap) / 4);
}
.dg-burger span { display: block; height: 2px; background: currentColor; border-radius: var(--dg-radius-pill); }

/* Схлопывание после 120 px прокрутки за 200 мс (README §6) */
.dg-header__top { transition: max-height var(--dg-anim) ease, opacity var(--dg-anim) ease; max-height: 60px; opacity: 1; overflow: hidden; }
.dg-header.is-stuck .dg-header__top { max-height: 0; opacity: 0; }
.dg-header.is-stuck { box-shadow: 0 1px 0 var(--dg-overlay-line); }
.dg-header.is-hidden { display: none; }   /* при открытом меню */

/* Полоса «телефон + иконки» под шапкой — только мобилка; в ряду с логотипом
   на мобилке остаётся один бургер (147:2) */
.dg-header__msgs-mob {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--dg-gap); min-height: 48px; padding-bottom: calc(var(--dg-gap) / 2);
}
.dg-header__msgs-mob .dg-msg__label { display: none; }

@media (max-width: 1023.98px) {
    .dg-header__main .dg-lang,
    .dg-header__main .dg-header__phone,
    .dg-header__main .dg-btn { display: none; }
}
@media (min-width: 1024px) {
    .dg-header__top { display: block; }
    .dg-nav { display: flex; }
    .dg-burger { display: none; }
    .dg-header__main { min-height: var(--dg-sticky-h); }
    .dg-header__msgs-mob { display: none; }
    .dg-header.is-stuck .dg-header__chips { display: flex; align-items: center; gap: calc(var(--dg-gap) / 2.5); }
    .dg-header.is-stuck .dg-header__actions .dg-lang { display: none; }
}
/* Компактна шапка 1024–1279. Макет намальований лише на 1440: там логотип,
   п'ять пунктів, мова, телефон і кнопка займають рівно 1200 px. На ноутбучних
   ширинах цей ряд не влазить — пункти ламалися на два рядки, кнопка йшла за край.
   Тут: пункти в один рядок меншим кроком, телефон переїжджає у верхню полосу
   до годин роботи (у липкому стані його замінюють чипи месенджерів),
   підпис «Львів» у логотипа прибирається. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .dg-header__main { gap: calc(var(--dg-gap) * 0.8); }
    .dg-header__actions { gap: calc(var(--dg-gap) * 0.8); flex: none; }
    .dg-nav { gap: var(--dg-gap); font-size: var(--dg-fs-small); }
    .dg-logo__city,
    .dg-header__main .dg-header__phone { display: none; }
    .dg-header__top-phone { display: inline; }
    /* у верхній полосі чипи месенджерів лишаються без підписів, інакше
       години роботи й телефон ламаються на два рядки */
    .dg-header__top .dg-msg__label { display: none; }
    .dg-header__top-inner > span:first-child { white-space: nowrap; }
}

/* --- полноэкранное меню (158:2) --- */

.dg-menu {
    position: fixed; inset: 0; z-index: 60;
    background: var(--dg-bg-header);
    color: var(--dg-text-on-accent);
    display: flex; flex-direction: column;
    padding: var(--dg-gutter);
    overflow-y: auto;
}
.dg-menu[hidden] { display: none; }
/* Докрутив список внутри до конца, палец не должен утаскивать страницу под ним */
.dg-modal, .dg-menu { overscroll-behavior: contain; }

.dg-menu__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--dg-sticky-h-mob); margin-bottom: var(--dg-gap); }
.dg-menu__close { background: none; border: 0; font-size: var(--dg-fs-price); line-height: 1; cursor: pointer; color: currentColor; }
.dg-menu__links { display: grid; margin-bottom: calc(var(--dg-gap) * 2); }
.dg-menu__links a {
    display: flex; justify-content: space-between; align-items: center; gap: var(--dg-gap);
    text-decoration: none;
    font-family: var(--dg-font-display); font-weight: 700; letter-spacing: var(--dg-ls-display);
    font-size: var(--dg-fs-card-title);
    padding-block: calc(var(--dg-gap) * 0.8);
    border-bottom: 1px solid var(--dg-overlay-line);
}
.dg-menu__links a::after { content: "→"; opacity: .5; font-family: var(--dg-font-text); font-weight: 400; }
.dg-menu__foot { margin-top: auto; display: grid; gap: var(--dg-gap); justify-items: start; }
.dg-menu__foot .dg-header__phone { font-family: var(--dg-font-display); font-weight: 800; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-price); }
.dg-menu__msgs { display: flex; flex-wrap: wrap; gap: calc(var(--dg-gap) / 2); }
.dg-menu__msgs .dg-msg__label { display: none; }
.dg-menu__hours { font-size: var(--dg-fs-small); opacity: .75; }
.dg-menu__foot .dg-btn { justify-self: stretch; }

/* --- подвал --- */

.dg-footer {
    background: var(--dg-bg-header);
    color: var(--dg-text-on-accent);
    padding-block: calc(var(--dg-section-y) * 0.7);
    /* место под липкую плашку, чтобы она не перекрывала контакты (README §6) */
    padding-bottom: calc(var(--dg-bottombar-h) + var(--dg-gap) * 1.6);
}
.dg-footer a { text-decoration: none; }
.dg-footer a:hover { text-decoration: underline; }
.dg-footer__grid { display: grid; gap: calc(var(--dg-gap) * 1.6); }
.dg-footer__brand-name { font-family: var(--dg-font-display); font-weight: 800; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-card-title); }
.dg-footer__brand-text { opacity: .8; margin: calc(var(--dg-gap) / 1.6) 0 0; }
.dg-footer__col h3 { font-size: var(--dg-fs-eyebrow); letter-spacing: var(--dg-ls-eyebrow); text-transform: uppercase; opacity: .7; margin: 0 0 var(--dg-gap); font-weight: 600; }
.dg-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--dg-gap) / 1.6); }
/* Мессенджеры в подвале: фирменные кружки с подписями, переносятся по ширине колонки.
   Подчёркивание при наведении гасим — оно тянулось бы и на иконку. */
.dg-footer__msgs { display: flex; flex-wrap: wrap; gap: calc(var(--dg-gap) / 1.6) var(--dg-gap); }
.dg-footer__msgs a:hover { text-decoration: none; }
.dg-footer__msgs a:hover .dg-msg__label { text-decoration: underline; }
.dg-footer__bottom {
    margin-top: calc(var(--dg-gap) * 2);
    padding-top: var(--dg-gap);
    border-top: 1px solid var(--dg-overlay-line);
    display: flex; flex-wrap: wrap; gap: var(--dg-gap);
    justify-content: space-between; font-size: var(--dg-fs-small); opacity: .8;
}
/* На мобилке колонка контактов отделена линией от описания (147:2) */
@media (max-width: 767.98px) {
    .dg-footer__col { border-top: 1px solid var(--dg-overlay-line); padding-top: calc(var(--dg-gap) * 1.2); }
    /* Чип 26 px — мелковатая цель для пальца; тянем ссылку до 44 px по высоте.
       Видимый размер иконки не меняется, растёт только кликабельная область. */
    .dg-footer__msgs a { min-height: 44px; }
}
@media (min-width: 768px) {
    .dg-footer { padding-bottom: calc(var(--dg-section-y) * 0.7); }
    .dg-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

/* --- липкая плашка (мобилка, 151:66) --- */

.dg-bottombar {
    position: fixed; inset: auto 0 0 0; z-index: 55;
    background: var(--dg-bg-surface);
    border-top: 1px solid var(--dg-border-default);
    min-height: var(--dg-bottombar-h);
    display: flex; align-items: center; gap: var(--dg-gap);
    padding: calc(var(--dg-gap) / 1.6) var(--dg-gutter);
}
.dg-bottombar__price { font-family: var(--dg-font-display); font-weight: 800; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-card-title); color: var(--dg-text-accent); }
.dg-bottombar__note { font-size: var(--dg-fs-small); color: var(--dg-text-muted); }
.dg-bottombar .dg-btn { margin-left: auto; }
@media (min-width: 768px) { .dg-bottombar { display: none; } }

/* --- модалка заявки (159:90 / 159:119 / 159:149) --- */

.dg-modal {
    position: fixed; inset: 0; z-index: 70;
    background: var(--dg-scrim);
    display: flex; align-items: flex-end; justify-content: center;
}
.dg-modal[hidden] { display: none; }
.dg-modal__box {
    background: var(--dg-bg-surface);
    border-radius: var(--dg-radius-card) var(--dg-radius-card) 0 0;
    padding: var(--dg-card-pad);
    width: 100%; max-width: 560px; position: relative;
}
@media (min-width: 768px) {
    .dg-modal { align-items: center; }
    .dg-modal__box { border-radius: var(--dg-radius-card); }
}
.dg-modal__close {
    position: absolute; inset: var(--dg-gap) var(--dg-gap) auto auto;
    background: none; border: 0; cursor: pointer;
    font-size: var(--dg-fs-card-title); color: var(--dg-text-muted); line-height: 1;
}
.dg-modal__title { font-family: var(--dg-font-display); font-weight: 700; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-h2); line-height: var(--dg-lh-h2); margin: 0 0 calc(var(--dg-gap) / 2); padding-right: var(--dg-gap); }
.dg-modal__lead { color: var(--dg-text-muted); font-size: var(--dg-fs-small); margin: 0 0 var(--dg-gap); }
.dg-field { display: grid; gap: calc(var(--dg-gap) / 2.5); }
.dg-field__label { font-size: var(--dg-fs-eyebrow); letter-spacing: var(--dg-ls-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--dg-text-secondary); }
.dg-input {
    width: 100%;
    border: 1px solid var(--dg-border-field);
    border-radius: var(--dg-radius-field);
    padding: calc(var(--dg-gap) * 0.7) var(--dg-gap);
    font: inherit; font-size: var(--dg-fs-lead);
    background: var(--dg-bg-base); color: var(--dg-text-primary);
}
.dg-input:focus { outline: none; border-color: var(--dg-text-accent); }
.dg-form.is-error .dg-input { border-color: var(--dg-status-danger); }
.dg-form__error { color: var(--dg-status-danger); font-size: var(--dg-fs-small); }
.dg-form__error[hidden] { display: none; }
.dg-form__alt { text-align: center; font-size: var(--dg-fs-small); color: var(--dg-text-muted); margin: var(--dg-gap) 0 calc(var(--dg-gap) / 2); }
.dg-form__note { font-size: var(--dg-fs-small); color: var(--dg-text-muted); margin: var(--dg-gap) 0 0; text-align: center; }
.dg-form__success { display: grid; gap: var(--dg-gap); text-align: center; }
.dg-form__body[hidden] { display: none; }
.dg-form__success[hidden] { display: none; }
.dg-form__check {
    width: 56px; height: 56px; margin-inline: auto;
    border-radius: var(--dg-radius-pill);
    background: var(--dg-bg-muted); color: var(--dg-text-accent);
    display: grid; place-items: center; font-size: var(--dg-fs-card-title);
}
.dg-form__msgs { display: flex; flex-wrap: wrap; gap: calc(var(--dg-gap) / 2); justify-content: center; }
.dg-form__msgs .dg-msg__label { display: none; }