/* Блок page — корень документа (<html>): шрифты, дизайн-токены и базовые стили.
   Базовые правила обёрнуты в :where(), чтобы их перебивал любой класс блока. */
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/golos-text-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/golos-text-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Fira Sans Extra Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/fira-sans-extra-condensed-600-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Fira Sans Extra Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/fira-sans-extra-condensed-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.page {
    /* Фирменный красный со старого логотипа; белый текст на нём — 5,9:1. */
    --brand: #c32228;
    --brand-dark: #a81c22;
    /* Красный для иконок и акцентов на графите (4,3:1 к --graphite-deep). */
    --brand-light: #f2625c;
    /* Бледно-красная подложка: плашки ошибок, кружки маркеров в тексте. */
    --brand-tint: #fbe7e7;
    --ink: #2a2f33;
    /* Графит RAL 7016 — цвет современных дверей и окон: шапка, подвал, тёмные плашки. */
    --graphite: #383e42;
    --graphite-deep: #2b3033;
    --graphite-soft: #454c51;
    --muted: #5c656b;
    --line: #d8dcde;
    --field: #868f95;
    --bg: #fff;
    --bg-alt: #f0f2f2;
    --on-dark: #e9ecee;
    --on-dark-muted: #aeb5ba;
    /* Тёплый свет в открытой двери (блок doorway). */
    --light: #ffd9a0;
    --light-deep: #e8963f;

    --font-text: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Fira Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
    --radius: 3px;
    --gutter: 16px;
    --container: 1200px;
    --focus-ring: 0 0 0 3px rgba(195, 34, 40, .35);
    /* Рамка фокуса клавиатуры. На графите и красном красная рамка не видна (1,9:1 и 1:1),
       там блоки задают белую. */
    --focus: var(--brand);
    /* Высота липкой шапки (header) и нижней панели (call-bar) — на них отступают якоря
       при прокрутке, липкая колонка статьи и открытое меню. Значения — ниже по ширине
       экрана; на низких экранах шапка не липнет, там 0. */
    --header-h: 0px;
    --call-bar-h: 0px;

    color-scheme: light;
    background: var(--graphite-deep);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 16px);
    text-wrap: pretty; /* без одного короткого слова в последней строке; у заголовков — balance */
}

/* На телефоне снизу закреплена панель call-bar: элемент в фокусе
   прокручивается выше неё, а не под неё. */
@media (max-width: 719.98px) {
    .page {
        --call-bar-h: calc(65px + env(safe-area-inset-bottom, 0px));
        scroll-padding-bottom: calc(var(--call-bar-h) + 24px);
    }
}

@media (min-height: 500px) {
    .page {
        --header-h: 68px;
    }
}

@media (min-width: 720px) and (min-height: 500px) {
    .page {
        --header-h: 84px;
    }
}

/* С 960px под строкой шапки — строка разделов (nav). */
@media (min-width: 960px) and (min-height: 500px) {
    .page {
        --header-h: 136px;
    }
}

@media (min-width: 720px) {
    .page {
        --gutter: 24px;
    }
}

@media (min-width: 1100px) {
    .page {
        --gutter: 32px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .page {
        scroll-behavior: smooth;
    }
}

:where(.page) *,
:where(.page) *::before,
:where(.page) *::after {
    box-sizing: border-box;
}

:where(.page) a {
    color: inherit;
}

:where(.page) :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
}

:where(.page) :where(img, svg) {
    display: block;
    max-width: 100%;
}

:where(.page) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, address) {
    margin: 0;
}

:where(.page) :where(ul, ol) {
    padding: 0;
    list-style: none;
}

:where(.page) address {
    font-style: normal;
}

:where(.page) :where(button) {
    cursor: pointer;
}

:where(.page) :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}
.page__body {
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
    .page__body {
        font-size: 17px;
    }
}
.page__main {
    display: block;
    padding-bottom: 72px;
}

.page__main:focus {
    outline: none;
}
/* Ссылка «Перейти к содержимому» для клавиатуры: видна только в фокусе. */
.page__skip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.page__skip:focus {
    transform: none;
}
/* Колонка содержимого фиксированной ширины с полями по краям. */
.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--gutter);
    padding-left: var(--gutter);
}
/* Текст только для скринридеров и поисковиков: на экране не виден. */
.a11y-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* Заголовки — узкий гротеск Fira Sans Extra Condensed: плотный, «вывесочный». */
.heading {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: .005em;
    text-wrap: balance;
}
.heading_size_l {
    font-size: clamp(30px, 4.2vw, 42px);
}
.heading_size_m {
    /* Как H2 текста статьи: «Как заказать» и «Смотрите также» не мельче разделов. */
    font-size: clamp(26px, 3vw, 32px);
    line-height: 1.1;
}
.heading_size_xl {
    font-size: clamp(36px, 6vw, 60px);
}
/* Иконка Lucide (ISC, см. LICENSE.lucide) через CSS-маску: цвет — currentColor,
   глиф — модификатор icon_glyph_*. Размер задаёт контекст миксом с элементом. */
.icon {
    display: inline-block;
    flex: none;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--icon-glyph) center / contain no-repeat;
    mask: var(--icon-glyph) center / contain no-repeat;
}
.icon_glyph_app-window {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M10 4v4'/%3E%3Cpath d='M2 8h20'/%3E%3Cpath d='M6 4v4'/%3E%3C/svg%3E");
}
.icon_glyph_arrow-right {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}
.icon_glyph_badge-check {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.icon_glyph_bed-double {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20v-8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8'/%3E%3Cpath d='M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4'/%3E%3Cpath d='M12 4v6'/%3E%3Cpath d='M2 18h20'/%3E%3C/svg%3E");
}
.icon_glyph_blinds {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h18'/%3E%3Cpath d='M20 7H8'/%3E%3Cpath d='M20 11H8'/%3E%3Cpath d='M10 19h10'/%3E%3Cpath d='M8 15h12'/%3E%3Cpath d='M4 3v14'/%3E%3Ccircle cx='4' cy='19' r='2'/%3E%3C/svg%3E");
}
.icon_glyph_building {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01'/%3E%3Cpath d='M16 6h.01'/%3E%3Cpath d='M12 6h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3C/svg%3E");
}
.icon_glyph_calendar-check {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E");
}
.icon_glyph_circle-alert {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
}
.icon_glyph_circle-check {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.icon_glyph_clipboard-check {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}
.icon_glyph_columns-2 {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M12 3v18'/%3E%3C/svg%3E");
}
.icon_glyph_columns-3 {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E");
}
.icon_glyph_cooking-pot {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8'/%3E%3Cpath d='m4 8 16-4'/%3E%3Cpath d='m8.86 6.78-.45-1.81a2 2 0 0 1 1.45-2.43l1.94-.48a2 2 0 0 1 2.43 1.46l.45 1.8'/%3E%3C/svg%3E");
}
.icon_glyph_credit-card {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E");
}
.icon_glyph_door-closed {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14'/%3E%3Cpath d='M2 20h20'/%3E%3Cpath d='M14 12v.01'/%3E%3C/svg%3E");
}
.icon_glyph_door-open {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4h3a2 2 0 0 1 2 2v14'/%3E%3Cpath d='M2 20h3'/%3E%3Cpath d='M13 20h9'/%3E%3Cpath d='M10 12v.01'/%3E%3Cpath d='M13 4.562v16.157a1 1 0 0 1-1.242.97L5 20V5.562a2 2 0 0 1 1.515-1.94l4-1A2 2 0 0 1 13 4.561Z'/%3E%3C/svg%3E");
}
.icon_glyph_droplets {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z'/%3E%3Cpath d='M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97'/%3E%3C/svg%3E");
}
.icon_glyph_fence {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3 2 5v15c0 .6.4 1 1 1h2c.6 0 1-.4 1-1V5Z'/%3E%3Cpath d='M6 8h4'/%3E%3Cpath d='M6 18h4'/%3E%3Cpath d='m12 3-2 2v15c0 .6.4 1 1 1h2c.6 0 1-.4 1-1V5Z'/%3E%3Cpath d='M14 8h4'/%3E%3Cpath d='M14 18h4'/%3E%3Cpath d='m20 3-2 2v15c0 .6.4 1 1 1h2c.6 0 1-.4 1-1V5Z'/%3E%3C/svg%3E");
}
.icon_glyph_grid-3x3 {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E");
}
.icon_glyph_hammer {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9'/%3E%3Cpath d='m18 15 4-4'/%3E%3Cpath d='m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'/%3E%3C/svg%3E");
}
.icon_glyph_house {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
.icon_glyph_image {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E");
}
.icon_glyph_key-round {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z'/%3E%3Ccircle cx='16.5' cy='7.5' r='.5' fill='currentColor'/%3E%3C/svg%3E");
}
.icon_glyph_lamp-ceiling {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v5'/%3E%3Cpath d='M14.829 15.998a3 3 0 1 1-5.658 0'/%3E%3Cpath d='M20.92 14.606A1 1 0 0 1 20 16H4a1 1 0 0 1-.92-1.394l3-7A1 1 0 0 1 7 7h10a1 1 0 0 1 .92.606z'/%3E%3C/svg%3E");
}
.icon_glyph_lock {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.icon_glyph_mail {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}
.icon_glyph_map-pin {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.icon_glyph_menu {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3Cpath d='M4 6h16'/%3E%3C/svg%3E");
}
.icon_glyph_move-horizontal {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 8 4 4-4 4'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='m6 8-4 4 4 4'/%3E%3C/svg%3E");
}
.icon_glyph_package {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E");
}
.icon_glyph_palette {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='currentColor'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='currentColor'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='currentColor'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='currentColor'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3E%3C/svg%3E");
}
.icon_glyph_phone {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.icon_glyph_refresh-cw {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
}
.icon_glyph_route {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E");
}
.icon_glyph_rows-3 {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M21 9H3'/%3E%3Cpath d='M21 15H3'/%3E%3C/svg%3E");
}
.icon_glyph_ruler {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E");
}
.icon_glyph_satellite-dish {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10a7.31 7.31 0 0 0 10 10Z'/%3E%3Cpath d='m9 15 3-3'/%3E%3Cpath d='M17 13a6 6 0 0 0-6-6'/%3E%3Cpath d='M21 13A10 10 0 0 0 11 3'/%3E%3C/svg%3E");
}
.icon_glyph_scroll {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17V5a2 2 0 0 0-2-2H4'/%3E%3Cpath d='M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E");
}
.icon_glyph_search {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
.icon_glyph_shield {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}
.icon_glyph_sliders-horizontal {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='14' y1='4' y2='4'/%3E%3Cline x1='10' x2='3' y1='4' y2='4'/%3E%3Cline x1='21' x2='12' y1='12' y2='12'/%3E%3Cline x1='8' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='16' y1='20' y2='20'/%3E%3Cline x1='12' x2='3' y1='20' y2='20'/%3E%3Cline x1='14' x2='14' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='16' x2='16' y1='18' y2='22'/%3E%3C/svg%3E");
}
.icon_glyph_sofa {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M2 16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0z'/%3E%3Cpath d='M4 18v2'/%3E%3Cpath d='M20 18v2'/%3E%3Cpath d='M12 4v9'/%3E%3C/svg%3E");
}
.icon_glyph_sparkles {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3Cpath d='M4 17v2'/%3E%3Cpath d='M5 18H3'/%3E%3C/svg%3E");
}
.icon_glyph_star {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
}
.icon_glyph_store {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E");
}
.icon_glyph_sun {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E");
}
.icon_glyph_thermometer {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z'/%3E%3C/svg%3E");
}
.icon_glyph_truck {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
}
.icon_glyph_tv {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='15' x='2' y='7' rx='2' ry='2'/%3E%3Cpolyline points='17 2 12 7 7 2'/%3E%3C/svg%3E");
}
.icon_glyph_utensils {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E");
}
.icon_glyph_warehouse {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z'/%3E%3Cpath d='M6 18h12'/%3E%3Cpath d='M6 14h12'/%3E%3Crect width='12' height='12' x='6' y='10'/%3E%3C/svg%3E");
}
.icon_glyph_wrench {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}
.icon_glyph_x {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}
.icon_glyph_zap {
    --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E");
}
.link {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.link:hover {
    color: var(--brand-dark);
    text-decoration-thickness: 2px;
}
.link__icon {
    width: 18px;
    height: 18px;
    transition: transform .2s ease;
}

.link:hover .link__icon {
    transform: translateX(3px);
}
/* Ссылка-переход «Весь каталог →»: без подчёркивания, стрелка сдвигается при наведении. */
.link_arrow {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    text-decoration: none;
}

/* На телефоне ссылка не ниже 44px: её легко нажать пальцем. */
@media (max-width: 719.98px) {
    .link_arrow {
        min-height: 44px;
    }
}
.button {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: var(--bg-alt);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-wrap: balance;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.button:disabled {
    cursor: progress;
    opacity: .7;
}
.button__icon {
    width: 20px;
    height: 20px;
}
.button_size_l {
    min-height: 56px;
    padding: 0 28px;
    font-size: 17px;
}
.button_view_action {
    background: var(--brand);
    color: #fff;
}

.button_view_action:hover {
    background: var(--brand-dark);
}
/* Прозрачная кнопка на тёмном фоне. */
.button_view_ghost {
    border-color: rgba(233, 236, 238, .45);
    background: transparent;
    color: #fff;
}

.button_view_ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
}
.button_view_outline {
    border-color: var(--ink);
    background: transparent;
    color: var(--ink);
}

.button_view_outline:hover {
    background: var(--ink);
    color: #fff;
}
.button_width_full {
    width: 100%;
}
.input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--field);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.input::placeholder {
    color: #7b858b;
}

.input:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: var(--focus-ring);
}
/* Подпись и поле ввода. */
.field {
    display: grid;
    gap: 6px;
}
.field__hint {
    margin-left: 6px;
    color: var(--muted);
    font-weight: 400;
}
.field__label {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
/* Текст статей из seed.json: разметка в основном без классов, поэтому стили по тегам внутри блока. */
.text {
    display: flow-root; /* обтекаемые картинки не выходят за блок */
    max-width: 72ch;
    overflow-wrap: break-word;
}

.text > * + * {
    margin-top: 1em;
}

/* Текст может начинаться с подзаголовка — отступ сверху задаёт место, куда текст вставлен. */
.text > :first-child {
    margin-top: 0;
}

.text h2,
.text h3 {
    margin-top: 1.6em;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
}

/* Раздел начинается под фото в начале текста, а не узкой колонкой рядом с ним. */
.text h2 {
    clear: both;
    font-size: clamp(26px, 3vw, 32px);
}

/* H3 (вопросы FAQ, подразделы) на телефоне заметно мельче H2 — иначе вопросы
   выглядят как новые разделы. */
.text h3 {
    font-size: clamp(20px, 1.5vw + 14px, 24px);
}

.text h2 + *,
.text h3 + * {
    margin-top: .5em;
}

/* Списки без класса — обычные списки статьи; списки с классом (features) — свои блоки. */
.text ul:not([class]),
.text ol:not([class]) {
    padding-left: 0;
}

.text ul:not([class]) > li,
.text ol:not([class]) > li {
    position: relative;
    padding-left: 32px;
}

.text ul:not([class]) > li + li,
.text ol:not([class]) > li + li {
    margin-top: .5em;
}

/* Маркеры — значки в кружке по центру первой строки: галочка у списка, номер у перечня.
   Галочка нарисована бордерами, чтобы не дублировать глиф Lucide в стилях текста. */
.text ul:not([class]) > li::before,
.text ol:not([class]) > li::before {
    content: "";
    position: absolute;
    top: .2em;
    top: calc(.5lh - 11px);
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-tint);
}

.text ul:not([class]) > li::after {
    content: "";
    position: absolute;
    top: .2em;
    top: calc(.5lh - 11px);
    left: 8px;
    width: 6px;
    height: 11px;
    margin-top: 4px;
    border: solid var(--brand);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.text ol:not([class]) {
    counter-reset: text-ol;
}

.text ol:not([class]) > li {
    counter-increment: text-ol;
}

.text ol:not([class]) > li::before {
    content: counter(text-ol);
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* Таблицы сравнения: ширину колонок задаёт содержимое, отступы только справа —
   так таблица из четырёх колонок помещается в 328px на телефоне. */
.text table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.4;
}

/* Длинные слова («Экструдированный») переносятся по слогам, а не рвутся на любой
   букве («Алюминиев-ый»): break-word текста в ячейке сжимает колонку до обломков
   слов. Если слогов не хватает, таблица прокручивается в своей обёртке. */
.text th,
.text td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: normal;
    hyphens: auto;
}

.text th:last-child,
.text td:last-child {
    padding-right: 0;
}

/* Подписи колонок короткие — переносятся только между словами («Ширина / проёма»). */
.text th {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    hyphens: manual;
}

.text a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.text a:hover {
    color: var(--brand-dark);
}

.text strong {
    font-weight: 600;
}

/* Вступление страниц услуг целиком в <strong>: семь строк полужирного тяжело читать,
   поэтому — среднее начертание и цвет основного текста. */
.text > p:first-child > strong:last-child {
    color: var(--ink);
    font-weight: 500;
}

/* :where — чтобы элемент text__side-img перебивал эти правила без повышения веса.
   Ширина — из атрибута width, высота — по пропорциям из width и height: место под
   картинку известно до загрузки. Картинка уже колонки — по центру. */
.text :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 8px auto;
    border-radius: var(--radius);
    background: var(--bg-alt);
}
/* Фото товара в начале текста (класс ставит prepareHTML): на телефоне над вступлением,
   на широком экране справа от него — фото видно сразу под заголовком.
   Ширина — из размеров фото (--w, --h ставит prepareHTML): не шире колонки, не крупнее
   исходника (маленькие исходники при растягивании мылятся) и такая, чтобы высокое фото
   (профиль окна) не заняло весь первый экран. Без размеров — по max-height. */
.text__lead-img {
    display: block;
    width: min(100%, var(--w) * 1px, 260px * var(--w) / var(--h));
    max-height: 260px;
    margin: 0 auto 16px;
}

/* Под фото — поле до подзаголовка, который начинается под ним. */
@media (min-width: 720px) {
    .text__lead-img {
        float: right;
        width: min(45%, var(--w) * 1px, 360px * var(--w) / var(--h));
        max-height: 360px;
        margin: 6px 0 40px 32px;
    }
}
/* Узкая картинка текста (класс ставит prepareHTML): на телефоне отдельной строкой
   по центру, на широком экране справа — текст обтекает её, и рядом не остаётся
   пустой полосы. */
.text__side-img {
    display: block;
    margin-inline: auto;
}

@media (min-width: 720px) {
    .text__side-img {
        float: right;
        max-width: 40%;
        margin: 4px 0 40px 32px;
    }
}
/* Обёртка таблицы (её ставит prepareHTML): широкая таблица прокручивается внутри,
   страница — нет. */
.text__table {
    overflow-x: auto;
}
/* Высокое узкое фото (профиль окна) занимает меньше трети колонки: подзаголовки
   идут рядом с ним, а не под ним — иначе под коротким вступлением остаётся пустое
   поле во всю высоту фото. */
@media (min-width: 720px) {
    .text:has(.text__lead-img_tall) h2 {
        clear: none;
    }
}
/* Сообщение для посетителя: результат отправки формы. */
.notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-left: 4px solid currentColor;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.notice[hidden] {
    display: none;
}
.notice__icon {
    width: 22px;
    height: 22px;
    margin-top: -1px;
}
.notice__text {
    color: var(--ink);
}
.notice_kind_error {
    background: var(--brand-tint);
    color: var(--brand);
}
.notice_kind_success {
    background: #e3f3e8;
    color: #17703c;
}
/* Набор ссылок-плашек: подразделы, быстрые переходы. */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.chips__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.chips__link:hover {
    border-color: var(--brand);
    color: var(--brand);
}
/* Логотип: знак «открытая дверь» (SVG) и название «Ваши двери» текстом. Цвет — currentColor. */
.logo {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--brand);
    text-decoration: none;
}
.logo__mark {
    width: 27px;
    height: 44px;
}
.logo__text {
    display: grid;
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    line-height: .92;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.logo_tone_light {
    color: #fff;
}
/* Карточка товара: вся карточка — ссылка (растянутая ссылка заголовка). */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    transition: border-color .2s ease, transform .2s ease;
    /* Размер заголовка зависит от ширины самой карточки (card__title). */
    container-type: inline-size;
}

.card:hover {
    border-color: var(--graphite);
}

.card:focus-within {
    border-color: var(--brand);
}

/* На телефоне карточка компактная: миниатюра слева, текст справа. Иначе каждая
   карточка с фото 4:3 занимает почти экран, а список — несколько экранов. */
@media (max-width: 559px) {
    .card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        align-items: start;
    }
}
.card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 20px 20px 22px;
}

@media (max-width: 559px) {
    .card__body {
        gap: 4px;
        padding: 12px 14px 14px;
    }
}
.card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.card:hover .card__image {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .card__image {
        transition: none;
    }
}
.card__label {
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    text-wrap: balance; /* без одного слова на второй строке */
}
.card__link {
    color: var(--ink);
    text-decoration: none;
}

.card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card__link:focus-visible {
    outline: none;
}

/* Ссылка растянута на всю карточку, поэтому рамка фокуса — вокруг карточки. */
.card:has(.card__link:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.card:hover .card__link {
    color: var(--brand);
}
.card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-alt);
    color: var(--field);
}

/* Компактная карточка (см. card): квадратная миниатюра. */
@media (max-width: 559px) {
    .card__media {
        aspect-ratio: 1;
        margin: 12px 0 12px 12px;
        border-radius: var(--radius);
    }
}
.card__more-icon {
    width: 18px;
    height: 18px;
    transition: transform .2s ease;
}

.card:hover .card__more-icon {
    transform: translateX(3px);
}
.card__more {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    color: var(--brand);
    font-size: 15px;
    font-weight: 600;
}

/* В компактной карточке понятно и без надписи: нажимается вся карточка. */
@media (max-width: 559px) {
    .card__more {
        display: none;
    }
}
/* Значок раздела вместо фото (см. card__media_empty). */
.card__placeholder {
    width: 64px;
    height: 64px;
}

@media (max-width: 559px) {
    .card__placeholder {
        width: 44px;
        height: 44px;
    }
}
.card__text {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

/* Компактная карточка: анонс — не больше трёх строк. */
@media (max-width: 559px) {
    .card__text {
        display: -webkit-box;
        overflow: hidden;
        font-size: 14px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}
.card__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    text-wrap: balance;
}

/* На телефоне и в узкой карточке (три в ряд в колонке статьи) — мельче: иначе
   длинное слово («Металлопластиковые») не помещается в строку. */
@media (max-width: 559px) {
    .card__title {
        font-size: 20px;
    }
}

@container (max-width: 259.98px) {
    .card__title {
        font-size: 20px;
    }
}
/* Вертикальное фото (профиль окна, дверь) показывается целиком, а не случайной
   полосой из середины; маленькое (уже 240px) — в своём размере, не растянутым. */
.card__image_contain {
    padding: 8px;
    background: #fff;
    object-fit: scale-down;
}
/* Фото нет: фирменная подложка со значком раздела, а не серая дыра. */
.card__media_empty {
    background: var(--brand-tint);
    color: var(--brand);
}
/* Список карточек. Неполный последний ряд не растягивается — все карточки списка
   одного размера.
   --min — наименьшая ширина колонки: 240px, а в колонке уже 1032px (статья, раздел,
   планшет) — 200px, чтобы три карточки «Ещё в разделе» стояли в ряд, а не 2 + 1.
   --pair — для двух и четырёх карточек: в колонке уже 900px — по две в ряд, без
   одинокой карточки внизу и пустой третьей колонки.
   --triple — для пяти, шести и девяти: не больше трёх в ряд (3 + 2, 3 + 3),
   а не 4 + 1 и 4 + 2. */
.cards {
    --min: calc(200px + clamp(0px, (100% - 1032px) * 999, 40px));
    --pair: max(var(--min), min(50% - 12px, (900px - 100%) * 999));
    --triple: max(var(--min), 33.333% - 16px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min)), 1fr));
    gap: 24px;
}

.cards:has(> .cards__item:nth-child(2):last-child),
.cards:has(> .cards__item:nth-child(4):last-child) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pair)), 1fr));
}

.cards:has(> .cards__item:nth-child(5):last-child),
.cards:has(> .cards__item:nth-child(6):last-child),
.cards:has(> .cards__item:nth-child(9):last-child) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--triple)), 1fr));
}

@media (max-width: 559px) {
    .cards {
        gap: 12px;
    }
}
/* Ячейка растягивает карточку на всю высоту ряда. */
.cards__item {
    display: flex;
}
/* «О магазине» на главной: текст и производители рядом. */
.about {
    display: grid;
    gap: 40px;
}

@media (min-width: 1024px) {
    .about {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 72px;
        align-items: start;
    }
}
/* Колонка текста тянется на высоту карточки производителей, чтобы цифры
   встали внизу вровень с ней, а не оставляли пустоту под текстом. */
.about__main {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .about__main {
        align-self: stretch;
    }
}
.about__stat-label {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.4;
}
.about__stat-num {
    color: var(--brand);
    font-size: 40px;
}

@media (min-width: 1024px) {
    .about__stat-num {
        font-size: 52px;
    }
}
.about__stat-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
/* На телефоне подпись в строку с цифрой (или под ней, если не влезает), шире — под цифрой. */
.about__stat {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

@media (min-width: 560px) {
    .about__stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}
/* Цифры о магазине: на телефоне столбцом, шире — в ряд. Колонки по содержимому:
   длинное «производителей» берёт место у коротких «лет», а не переносится. */
.about__stats {
    display: grid;
    gap: 16px;
    margin: auto 0 0;
    padding: 32px 0 0;
    list-style: none;
}

@media (min-width: 560px) {
    .about__stats {
        grid-template-columns: repeat(3, auto);
        gap: 24px;
    }
}
.about__title {
    margin-bottom: 24px;
}
/* Страница каталога — раздел или товар: содержимое и боковая колонка с призывом
   заказать замер. На десктопе колонка справа на всю высоту и едет вместе с
   прокруткой, а «Ещё в разделе» и «Смотрите также» идут слева под содержимым —
   справа не остаётся пустоты. На телефоне призыв — между содержимым и ссылками. */
.article {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-bottom: 40px;
}

@media (min-width: 1024px) {
    .article {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 72px 64px;
        align-items: start;
        padding-bottom: 56px;
    }
}
@media (min-width: 1024px) {
    .article__aside {
        grid-row: span 2;
        grid-column: 2;
        margin-top: 16px;
    }
}

/* Колонка едет вместе с текстом под липкой шапкой — если экран достаточно высокий,
   чтобы она поместилась целиком. */
@media (min-width: 1024px) and (min-height: 700px) {
    .article__aside {
        position: sticky;
        top: calc(var(--header-h) + 24px);
    }
}
/* Ссылки после содержимого: «Ещё в разделе» и «Смотрите также». */
.article__more {
    display: grid;
    gap: 56px;
}

/* Правый край — как у текста над ними (.text, 72ch). */
@media (min-width: 1024px) {
    .article__more {
        grid-column: 1;
        gap: 72px;
        max-width: 72ch;
    }
}
/* Текст раздела под карточками товаров. */
.article__text {
    margin-top: 48px;
}

@media (min-width: 1024px) {
    .article__text {
        margin-top: 64px;
    }
}
/* Ширина — на две строки по смыслу («Установка откосов, подоконников / и отливов
   в Светлограде»): уже — balance рвёт фразу на три короткие строки. */
.article__title {
    max-width: 30ch;
    margin: 16px 0 28px;
}
/* Производители, с которыми работает магазин, — названиями, без чужих логотипов. */
.brands {
    padding: 28px;
    border-radius: var(--radius);
    background: var(--bg);
}
/* Названия производителей — просто текстом, без рамок: не путаются с кнопками. */
.brands__item {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .03em;
    text-transform: uppercase;
}
/* Ровными рядами по три: в потоке девять названий ложились 4 + 4 + 1, и последнее
   («GU») оставалось в строке одно. */
.brands__list {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 8px 28px;
}
.brands__note-icon {
    width: 22px;
    height: 22px;
    color: var(--brand);
}
.brands__note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-weight: 600;
    line-height: 1.45;
}
.brands__title {
    margin-bottom: 16px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.breadcrumbs {
    padding: 20px 0 8px;
    font-size: 14px;
    line-height: 1.4;
}
.breadcrumbs__current {
    color: var(--ink);
}
.breadcrumbs__item {
    display: inline;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "";
    display: inline-block;
    vertical-align: -3px;
    width: 16px;
    height: 16px;
    margin: 0 6px;
    background: var(--field);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* На телефоне текущая страница не выводится: она повторяет заголовок H1 сразу под
   крошками. Для скринридеров пункт остаётся. */
@media (max-width: 719px) {
    .breadcrumbs__item:last-child:not(:first-child) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* У раздела первого уровня на телефоне видна одна «Главная» — со стрелкой
   назад она читается как ссылка, а не как обрывок пути. */
@media (max-width: 719px) {
    .breadcrumbs__item:first-child:nth-last-child(2)::before {
        content: "";
        display: inline-block;
        vertical-align: -3px;
        width: 16px;
        height: 16px;
        margin-right: 4px;
        background: var(--field);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}
.breadcrumbs__link {
    padding: 6px 0;
    color: var(--muted);
    text-decoration: none;
}

/* На телефоне область нажатия 44px. Отступы строчного элемента строку не раздвигают:
   крошки остаются той же высоты. */
@media (max-width: 719px) {
    .breadcrumbs__link {
        padding: 14px 0;
    }
}

.breadcrumbs__link:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: .2em;
}
/* Пункты — строчные: длинный путь переносится по словам, а не целым пунктом
   со стрелкой в начале новой строки. Высокие строки — чтобы ссылки было легко нажать. */
.breadcrumbs__list {
    line-height: 2;
}
/* Кнопка «Меню» в шапке: на экранах уже 960px открывает и закрывает список
   разделов (блок nav). С 960px разделы видны строкой, и кнопка не нужна. */
.burger {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--ink);
}

.burger:hover {
    border-color: var(--ink);
}

@media (min-width: 960px) {
    .burger {
        display: none;
    }
}
.burger__icon {
    width: 24px;
    height: 24px;
}
/* Меню открыто: кнопка графитовая, как полоса разделов под ней. */
.burger_open,
.burger_open:hover {
    border-color: var(--graphite);
    background: var(--graphite);
    color: #fff;
}
/* Нижняя панель на телефоне: позвонить или заказать звонок в одно касание. */
.call-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--bg);
    box-shadow: 0 -8px 24px -12px rgba(43, 48, 51, .35);
    transition: transform .2s ease;
}

@media (min-width: 720px) {
    .call-bar {
        display: none;
    }
}
.call-bar__action {
    min-height: 48px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 15px;
}
/* Панель убирается, когда на экране форма звонка или подвал с телефонами. */
.call-bar_hidden {
    transform: translateY(110%);
}
/* Форма «Заказать звонок» внизу каждой страницы: красная полоса, форма на белой плашке. */
.callback {
    background: var(--brand);
    color: #fff;
}
/* Значок «показать другой код» справа от картинки. */
.callback__captcha-icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
}

.callback__captcha-refresh:hover .callback__captcha-icon {
    color: var(--brand);
}
.callback__captcha-img {
    width: 90px;
    height: 46px;
    object-fit: cover;
}
/* Картинка с кодом; нажатие показывает новый код. */
.callback__captcha-refresh {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 0;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--field);
    border-radius: var(--radius);
    background: #f6f6f6;
}

.callback__captcha-refresh:hover {
    border-color: var(--brand);
}
.callback__captcha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.callback__form {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 24px 20px;
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 24px 48px -24px rgba(43, 48, 51, .55);
}

@media (min-width: 560px) {
    .callback__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        padding: 32px;
    }
}
.callback__inner {
    display: grid;
    gap: 32px;
    padding-top: 56px;
    padding-bottom: 56px;
}

@media (min-width: 1024px) {
    .callback__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 64px;
        align-items: center;
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
.callback__or {
    margin-top: 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* Белая трубка на красном фоне — чуть приглушена, чтобы номер оставался главным. */
.callback__phone-icon {
    width: 24px;
    height: 24px;
    opacity: .85;
}
.callback__phone {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    min-height: 44px; /* цель для пальца — не меньше 44px */
    padding: 4px 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
}

.callback__phone:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .15em;
}
.callback__phones {
    display: grid;
    gap: 2px;
    margin-top: 6px;
    --focus: #fff; /* телефоны на красном; у формы на белой плашке рамка своя, красная */
}
.callback__status:empty {
    display: none;
}
.callback__text {
    max-width: 40ch;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
}
.callback__title {
    max-width: 21ch;
    color: #fff;
}
/* Поле-ловушка для ботов: человек его не видит и не заполняет. */
.callback__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* Элемент формы на всю ширину (на широком экране поля идут в две колонки). */
.callback__wide {
    grid-column: 1 / -1;
}
/* Каталог: разделы друг под другом, у каждого — сетка товаров. */
.catalog {
    display: grid;
    gap: 64px;
}

@media (min-width: 1024px) {
    .catalog {
        gap: 88px;
    }
}
/* При переходе по якорю из чипов заголовок раздела не прилипает к краю экрана. */
.catalog__group {
    scroll-margin-top: 16px;
}
/* Галочка с подписью (согласие в форме заявки). Блок — label вокруг галочки,
   поэтому нажимается вся строка, а не только квадратик. */
.checkbox {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
}
/* Обычная галочка браузера в фирменном цвете: её понимают экранные дикторы,
   а без отметки браузер не отправит форму (required). */
.checkbox__input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--brand);
    cursor: pointer;
}
.checkbox__text {
    font-size: 14px;
    line-height: 1.45;
}

/* Ссылка на текст документа внутри подписи. */
.checkbox__text a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: .2em;
}
/* Карточка контактов магазина: адрес, телефоны, почта. */
.contacts {
    display: grid;
    gap: 24px;
    padding: 20px;
    border-radius: var(--radius);
    background: var(--bg-alt);
}

@media (min-width: 720px) {
    .contacts {
        padding: 32px;
    }
}
/* Адрес — обычным цветом текста: красным выделены только действия. */
.contacts__address {
    padding: 11px 0; /* область нажатия 44px; у строчной ссылки строку не раздвигает */
    color: var(--ink);
}
.contacts__list {
    display: grid;
    gap: 20px;
    margin: 0;
}
/* Почта: область нажатия 44px. Отступы строчной ссылки строку не раздвигают. */
.contacts__mail {
    padding: 11px 0;
}
.contacts__phone-icon {
    width: 20px;
    height: 20px;
    color: var(--brand);
}
.contacts__phone {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-height: 44px; /* цель для пальца — не меньше 44px */
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}

.contacts__phone:hover {
    color: var(--brand);
}
/* Отступы сверху и снизу — чтобы в ссылку было легко попасть пальцем. */
.contacts__route {
    padding: 8px 0;
    font-size: 16px;
}
.contacts__term {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.contacts__value {
    margin: 0;
    font-size: 18px;
    line-height: 1.45;
}
/* Призыв к действию рядом с текстом товара. */
.cta {
    display: grid;
    gap: 16px;
    padding: 28px;
    border-radius: var(--radius);
    background: var(--graphite);
    color: var(--on-dark);
    --focus: #fff;
}
.cta__address-icon {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--brand-light);
}
.cta__address {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--on-dark-muted);
    font-size: 15px;
    line-height: 1.45;
    text-decoration: none;
}

/* См. cta__phones: до 1024px адрес есть в подвале и форме. */
@media (max-width: 1023.98px) {
    .cta__address {
        display: none;
    }
}

.cta__address:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.cta__phone-icon {
    width: 18px;
    height: 18px;
    color: var(--brand-light);
}
.cta__phone {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
}

.cta__phone:hover {
    color: var(--light);
}
.cta__phones {
    display: grid;
    gap: 2px;
    padding-top: 16px;
    border-top: 1px solid rgba(233, 236, 238, .15);
}

/* До 1024px колонка призыва стоит под статьёй, прямо над формой с теми же
   телефонами, — второй раз их не повторяем. */
@media (max-width: 1023.98px) {
    .cta__phones {
        display: none;
    }
}
.cta__text {
    font-size: 15px;
    line-height: 1.5;
}
.cta__title {
    color: #fff;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.05;
}
/* Разделы каталога на главной в виде дверей: при наведении створка приоткрывается,
   за ней — тёплый свет. Без анимации, если посетитель её отключил.
   Число разделов приходит из разметки (--doors): на широком экране двери стоят в один ряд,
   на среднем — в два, неполный ряд выравнивается по центру. */
.doorway {
    --cols: 2;
    --gap: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px var(--gap);
}

@media (min-width: 720px) {
    .doorway {
        --cols: 3;
        --gap: 24px;
        row-gap: 40px;
    }
}

/* Два ряда поровну: 6 дверей — 3 и 3, 7 — 4 и 3. */
@supports (width: round(up, 1px, 1px)) {
    @media (min-width: 720px) {
        .doorway {
            --cols: round(up, var(--doors, 6) / 2, 1);
        }
    }
}

@media (min-width: 1100px) {
    .doorway {
        --cols: min(var(--doors, 6), 8);
    }
}
/* Колонка minmax(0, 1fr): длинное слово в подписи («Металлопластиковые») не распирает
   дверь шире её места в ряду. */
.doorway__door {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    color: var(--ink);
    text-decoration: none;
}
.doorway__enter-icon {
    width: 20px;
    height: 20px;
}
/* Стрелка «войти» в проёме — видна, когда дверь открыта. */
.doorway__enter {
    position: absolute;
    top: 50%;
    right: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--brand);
}
/* Дверная коробка: графитовый наличник, внутри проём с тёплым светом. */
.doorway__frame {
    position: relative;
    display: block;
    aspect-ratio: 5 / 8;
    margin-bottom: 14px;
    border: 6px solid var(--graphite);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: radial-gradient(130% 90% at 70% 55%, var(--light) 0%, var(--light-deep) 55%, #8a4b1d 100%);
    box-shadow: 0 10px 0 -4px var(--line);
    perspective: 1100px;
}
.doorway__glyph {
    width: 44%;
    height: 44%;
}
/* Дверная ручка. */
.doorway__handle {
    position: absolute;
    top: 50%;
    right: 9%;
    width: 7px;
    height: 30px;
    margin-top: -15px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f4f5f6, #a3aaaf);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.doorway__item {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    min-width: 0;
}
/* Створка: фото раздела, петли слева. Чуть приоткрыта, чтобы было видно свет. */
.doorway__leaf {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: var(--graphite-soft);
    transform: rotateY(-7deg);
    transform-origin: left center;
    box-shadow: 6px 0 14px rgba(0, 0, 0, .25);
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease;
    will-change: transform;
}

.doorway__door:hover .doorway__leaf,
.doorway__door:focus-visible .doorway__leaf {
    transform: rotateY(-42deg);
    box-shadow: 16px 0 28px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
    .doorway__leaf {
        transition: none;
    }
}
.doorway__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.doorway__summary {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: break-word; /* перенос по слогам выглядит рвано в узкой колонке */
}
.doorway__title {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.1;
    overflow-wrap: break-word;
    transition: color .15s ease;
}

.doorway__door:hover .doorway__title {
    color: var(--brand);
}
/* Створка без фото (фурнитура): графит и крупная иконка. */
.doorway__leaf_plain {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--graphite-soft), var(--graphite));
    color: var(--on-dark-muted);
}
/* Короткие подтверждённые факты о магазине с иконками. */
.facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
}

@media (min-width: 1024px) {
    .facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }
}
.facts__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
}

@media (min-width: 560px) {
    .facts__badge {
        grid-row: span 2;
        width: 44px;
        height: 44px;
        margin-bottom: 0;
    }
}
.facts__icon {
    width: 22px;
    height: 22px;
}
/* На телефоне иконка над текстом, шире — слева от текста. */
.facts__item {
    display: grid;
    gap: 4px;
    align-content: start;
}

@media (min-width: 560px) {
    .facts__item {
        grid-template-columns: auto 1fr;
        gap: 2px 14px;
    }
}
.facts__text {
    color: var(--on-dark-muted);
    font-size: 14px;
    line-height: 1.4;
}

@media (min-width: 560px) {
    .facts__text {
        font-size: 15px;
        line-height: 1.45;
    }
}
.facts__title {
    color: #fff;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.1;
}

@media (min-width: 560px) {
    .facts__title {
        font-size: 22px;
    }
}
/* Перечень с иконками внутри текста статьи: что продаём, что решить при выборе.
   Разметка лежит в seed.json; на телефоне — столбцом, шире — в две колонки. */
.features {
    display: grid;
    gap: 12px;
    clear: both; /* под обтекаемым фото текста, а не сжатым рядом с ним */
}

@media (min-width: 560px) {
    .features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}
.features__badge {
    display: flex;
    grid-row: span 2;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--brand-tint);
    color: var(--brand);
}
.features__icon {
    width: 24px;
    height: 24px;
}
/* Иконка слева, справа заголовок и пояснение. */
.features__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
    align-content: start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* Нечётный последний пункт — на всю ширину, без пустой клетки рядом. */
@media (min-width: 560px) {
    .features__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}
.features__text {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}
.features__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
}
/* Карточки на всю ширину страницы: на десктопе четыре в ряд. */
@media (min-width: 1024px) {
    .features_cols_4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* Подвал: о магазине, каталог, страницы для покупателей, контакты. */
.footer {
    background: var(--graphite-deep);
    color: var(--on-dark-muted);
    font-size: 15px;
    --focus: #fff;
}

/* Запас под нижнюю панель call-bar на телефонах. Панель прячется, когда виден подвал,
   но без JS остаётся на месте — тогда она закрывает этот запас, а не копирайт.
   Запас внутри подвала, поэтому внизу страницы нет белой полосы. */
@media (max-width: 719.98px) {
    .footer {
        padding-bottom: 64px;
    }
}
/* О магазине — первым, на телефоне во всю ширину. */
@media (max-width: 1199.98px) {
    .footer__about {
        order: -2;
    }
}

@media (max-width: 719.98px) {
    .footer__about {
        grid-column: 1 / -1;
    }
}
.footer__bottom {
    border-top: 1px solid var(--graphite-soft);
}
/* Адрес, телефон, почта или отзывы в подвале. */
.footer__contact {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 5px 0;
    color: var(--on-dark);
    text-decoration: none;
}

/* На телефоне — не ниже 44px, как ссылки подвала. */
@media (max-width: 719.98px) {
    .footer__contact {
        padding: 10px 0;
    }
}

.footer__contact:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.footer__copy {
    padding-top: 10px;
    padding-bottom: 24px;
    font-size: 14px;
}
.footer__icon {
    flex: none;
    margin-top: .2em;
    color: var(--brand-light);
}
/* До 1200px — сетка в две колонки: о магазине и контакты сверху, каталог и услуги
   рядом (см. footer__about, footer__col_contacts). */
.footer__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    padding-top: 48px;
    padding-bottom: 40px;
}

/* Широкий экран: каталог и услуги — по ширине пунктов, без переносов; о магазине,
   «Покупателям» и контакты делят остальное. */
@media (min-width: 1200px) {
    .footer__inner {
        grid-template-columns: minmax(0, 1.2fr) auto auto minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 40px;
        padding-top: 72px;
    }
}
.footer__link {
    display: inline-block;
    padding: 5px 0;
    color: var(--on-dark);
    text-decoration: none;
}

/* На телефоне ссылка не ниже 44px (строка 24px + отступы): её легко нажать пальцем. */
@media (max-width: 719.98px) {
    .footer__link {
        padding: 10px 0;
    }
}

.footer__link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.footer__list {
    display: grid;
    gap: 2px;
}

/* На телефоне ссылки сами высокие (footer__link), зазор между ними не нужен. */
@media (max-width: 719.98px) {
    .footer__list {
        gap: 0;
    }
}
.footer__logo {
    margin-bottom: 16px;
}
/* Примечание об условиях: бесплатный замер и остальное согласуются с магазином. */
.footer__note {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 20px;
    font-size: 13px;
    line-height: 1.5;
}
.footer__text {
    max-width: 36ch;
    line-height: 1.55;
}
.footer__title {
    margin-bottom: 14px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}
/* Контакты на телефоне и планшете — сразу после «О магазине», а не после всех
   списков ссылок. */
@media (max-width: 1199.98px) {
    .footer__col_contacts {
        order: -1;
    }
}

@media (max-width: 719.98px) {
    .footer__col_contacts {
        grid-column: 1 / -1;
    }
}
/* «Покупателям» на телефоне — во всю ширину: колонка стоит одна в ряду, а длинная
   ссылка «„Ваши двери“ на карте Светлограда» в половине ширины рвётся на три строки. */
@media (max-width: 719.98px) {
    .footer__col_pages {
        grid-column: 1 / -1;
    }
}
/* Шапка: белая строка с логотипом, адресом и телефоном + графитовая навигация. */
.header {
    position: relative;
    z-index: 10;
    background: var(--bg);
    box-shadow: 0 8px 24px -12px rgba(43, 48, 51, .35);
}

/* Шапка прилипает к верху экрана: телефон, заявка и меню всегда под рукой. Её высота —
   токен --header-h в page.css. На низком экране (телефон боком) не липнет: заняла бы
   его слишком большую часть. */
@media (min-height: 500px) {
    .header {
        position: sticky;
        top: 0;
    }
}
.header__address-icon {
    width: 18px;
    height: 18px;
    color: var(--brand);
}
.header__address {
    display: none;
    gap: 8px;
    align-items: center;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
}

.header__address:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: .2em;
}

@media (min-width: 960px) {
    .header__address {
        display: flex;
        padding-left: 24px;
        border-left: 1px solid var(--line);
    }
}
/* На самых узких телефонах (от 360px) промежутки меньше, чтобы логотип, телефон
   и бургер поместились в одну строку. */
.header__bar {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 68px;
}

@media (min-width: 400px) {
    .header__bar {
        gap: 16px;
    }
}

@media (min-width: 720px) {
    .header__bar {
        gap: 24px;
        min-height: 84px;
    }
}
.header__contacts {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-left: auto;
}
/* На телефонах кнопку заменяет нижняя панель call-bar. */
.header__cta {
    display: none;
}

@media (min-width: 720px) {
    .header__cta {
        display: inline-flex;
    }
}
.header__logo {
    flex: none;
}
.header__phone-icon {
    width: 18px;
    height: 18px;
    color: var(--brand);
}
.header__phone {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.header__phone:hover {
    color: var(--brand);
}

@media (min-width: 400px) {
    .header__phone {
        gap: 8px;
        font-size: 17px;
    }
}

@media (min-width: 720px) {
    .header__phone {
        font-size: 19px;
    }
}
/* Первый экран главной: графит, справа — фактура ламелей, как у рольставней. */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--graphite-deep);
    color: var(--on-dark);
    --focus: #fff;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0 0 0 40%;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 24px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 45%);
    mask-image: linear-gradient(to right, transparent, #000 45%);
    pointer-events: none;
}
.hero__accent {
    color: var(--brand-light);
}
@media (max-width: 479.98px) {
    .hero__action {
        width: 100%;
    }
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}
.hero__eyebrow-icon {
    width: 18px;
    height: 18px;
    color: var(--brand-light);
}
.hero__eyebrow {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 44px; /* виден только на телефоне и планшете: цель для пальца */
    color: var(--on-dark-muted);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.hero__eyebrow:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .25em;
}

/* С 960px адрес уже есть в шапке, рядом второй раз он не нужен. */
@media (min-width: 960px) {
    .hero__eyebrow {
        display: none;
    }
}
/* Преимущества — строкой под первым экраном, во всю ширину. */
.hero__facts {
    padding-top: 28px;
    border-top: 1px solid rgba(233, 236, 238, .12);
}

@media (min-width: 1024px) {
    .hero__facts {
        grid-column: 1 / -1;
        padding-top: 36px;
    }
}
/* Фото товаров: большое слева, два поменьше справа — на любой ширине. */
.hero__gallery {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, 104px);
    gap: 8px;
}

@media (min-width: 560px) {
    .hero__gallery {
        grid-template-rows: repeat(2, 150px);
        gap: 12px;
    }
}

@media (min-width: 1024px) {
    .hero__gallery {
        grid-template-rows: repeat(2, 184px);
    }
}
.hero__inner {
    position: relative;
    display: grid;
    gap: 36px;
    padding-top: 40px;
    padding-bottom: 40px;
}

@media (min-width: 1024px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 56px 64px;
        align-items: center;
        padding-top: 72px;
        padding-bottom: 56px;
    }
}
.hero__lead {
    max-width: 46ch;
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.55;
}

@media (min-width: 1024px) {
    .hero__lead {
        font-size: 20px;
    }
}
.hero__photo {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    background: var(--graphite);
    object-fit: cover;
}
/* Официальный бейдж Яндекса с текущей оценкой магазина. */
.hero__rating {
    display: block;
    width: 150px;
    height: 50px;
    margin-top: 28px;
    border: 0;
}
.hero__title {
    max-width: 15ch;
    margin-top: 16px;
    color: #fff;
}

@media (min-width: 960px) {
    .hero__title {
        margin-top: 0;
    }
}
/* Дверь — главный кадр: на всю высоту, в кадре полотно двери. */
.hero__photo_main {
    grid-row: span 2;
    object-position: 42% 50%;
}
/* Начало внутренней страницы: заголовок H1, вводный текст, подразделы. */
.intro {
    display: grid;
    gap: 16px;
    padding: 16px 0 40px;
}

@media (min-width: 720px) {
    .intro {
        padding-bottom: 48px;
    }
}
.intro__chips {
    margin-top: 8px;
}

/* На телефоне плашки ровными двумя колонками, а не лесенкой разной длины
   (как section__chips). */
@media (max-width: 559.98px) {
    .intro__chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Длинное слово в узкой колонке переносится по слогам, а не вылезает. */
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 12 5 5;
    }
}
.intro__lead {
    max-width: 62ch;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
}

@media (min-width: 720px) {
    .intro__lead {
        font-size: 18px;
    }
}

@media (min-width: 1024px) {
    .intro__lead {
        font-size: 19px;
    }
}
.intro__title {
    max-width: 24ch;
}
/* Контакты и карта рядом (на телефоне — друг под другом). Карта по высоте
   карточки контактов: низ у них общий (см. location__map). */
.location {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 1024px) {
    .location {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
        gap: 32px;
    }
}
/* Ячейка карты: на широком экране растягивается до высоты карточки контактов,
   карта внутри заполняет её целиком. */
.location__map {
    min-width: 0;
}
/* Текст под контактами и картой — на всю ширину; абзацы — по ширине чтения. */
.location__text {
    grid-column: 1 / -1;
    max-width: none;
    margin-top: 24px;
}

.location__text > p {
    max-width: 72ch;
}

@media (min-width: 1024px) {
    .location__text {
        margin-top: 32px;
    }
}
/* Страница схемы проезда: на телефоне и планшете сначала карта, потом контакты. */
@media (max-width: 1023.98px) {
    .location_map-first .location__map {
        order: -1;
    }
}
/* Разделы каталога: с 960px — строка под шапкой, на экранах уже — список,
   который открывает кнопка burger в шапке. */
.nav {
    background: var(--graphite);
    color: var(--on-dark);
    --focus: #fff;
}

/* Открытое меню — в липкой шапке, поэтому длинный список прокручивается внутри,
   между строкой шапки и нижней панелью, а не уходит за край экрана. */
@media (max-width: 959.98px) {
    .nav {
        max-height: calc(100vh - var(--header-h) - var(--call-bar-h));
        max-height: calc(100dvh - var(--header-h) - var(--call-bar-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
.nav__item {
    flex: none;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.nav__item:first-child {
    border-top: 0;
}

@media (min-width: 960px) {
    .nav__item {
        border-top: 0;
    }

    /* Контакты — справа, отдельно от разделов каталога. */
    .nav__item:last-child {
        margin-left: auto;
    }
}
.nav__link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 9px;
    color: var(--on-dark);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: color .15s ease;
}

.nav__link::after {
    content: "";
    position: absolute;
    right: 9px;
    bottom: 0;
    left: 9px;
    height: 4px;
    background: var(--brand);
    transform: scaleX(0);
    transition: transform .2s ease;
}

/* Наведение — без заливки: текст светлеет, снизу выезжает полоса. У текущего
   раздела она красная (nav__link_current), у остальных — полупрозрачная белая. */
@media (hover: hover) {
    .nav__link:hover {
        color: #fff;
    }

    .nav__link:hover::after {
        background: rgba(255, 255, 255, .45);
        transform: none;
    }
}

.nav__link:focus-visible::after {
    transform: none;
}

/* В открытом меню на узких экранах ссылки идут списком по краю колонки,
   а текущий раздел отмечен красной полосой слева, в поле контейнера. */
@media (max-width: 959.98px) {
    .nav__link {
        padding: 0;
        font-size: 17px;
    }

    .nav__link::after {
        top: 12px;
        right: auto;
        bottom: 12px;
        left: calc(-1 * var(--gutter));
        width: 4px;
        height: auto;
        transform: scaleY(0);
    }
}

/* Текст первой и последней ссылок в строке выравнивается по краям колонки — как
   логотип и кнопка в шапке; у последней нет правого поля, полоса — под текстом. До 1280px строка плотнее: в ней все разделы каталога,
   «Услуги» и «Контакты». */
@media (min-width: 960px) {
    .nav__item:first-child .nav__link {
        margin-left: -9px;
    }

    .nav__item:last-child .nav__link {
        padding-right: 0;
    }

    .nav__item:last-child .nav__link::after {
        right: 0;
    }
}

@media (min-width: 1280px) {
    .nav__link {
        padding: 0 14px;
        font-size: 16px;
    }

    .nav__link::after {
        right: 14px;
        left: 14px;
    }

    .nav__item:first-child .nav__link {
        margin-left: -14px;
    }
}
.nav__list {
    display: grid;
    padding-bottom: 8px;
}

@media (min-width: 960px) {
    .nav__list {
        display: flex;
        gap: 4px;
        padding-bottom: 0;
    }
}
/* Поиск по сайту в открытом меню на узких экранах; на широких меню — строка
   разделов, и поиску в ней места нет. */
.nav__search {
    padding: 16px 0 8px;
}

@media (min-width: 960px) {
    .nav__search {
        display: none;
    }
}
/* Меню закрыто: на узких экранах список спрятан до нажатия на бургер.
   Без скрипта разделы доступны по ссылкам в подвале. */
@media (max-width: 959.98px) {
    .nav_collapsed {
        display: none;
    }
}
.nav__link_current {
    color: #fff;
}

.nav__link_current::after,
.nav__link_current:hover::after {
    background: var(--brand);
    transform: none;
}
/* Надпись «Ошибка 404» над заголовком. */
.notfound {
    color: var(--brand);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* Карта Яндекса с карточкой магазина (виджет по id организации); фон виден, пока она загружается. */
.org-map {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 0;
    border-radius: var(--radius);
    background: var(--bg-alt);
}

@media (min-width: 720px) {
    .org-map {
        min-height: 450px;
    }
}
/* Результаты поиска по сайту. */
.results {
    max-width: 720px;
}
/* Вопрос — отдельной строкой, кнопки телефонов — рядом под ним, а не одна
   в строке текста, другая под ней. */
.results__ask {
    flex-basis: 100%;
}
.results__count {
    color: var(--muted);
}
.results__empty {
    margin-bottom: 16px;
}
/* Пустая выдача: телефоны, чтобы спросить напрямую. */
.results__help {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-top: 24px;
    font-weight: 600;
}
.results__item {
    position: relative;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    transition: border-color .15s ease;
}

.results__item:hover {
    border-color: var(--brand);
}
/* Заголовок — ссылка цвета ссылок сайта: сразу видно, куда нажимать. */
.results__link {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
}

/* Нажимается вся карточка результата. */
.results__link::after {
    position: absolute;
    inset: 0;
    content: "";
}

.results__item:hover .results__link {
    color: var(--brand-dark);
    text-decoration-thickness: 2px;
}
.results__list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}
/* Слово запроса во фрагменте текста. */
.results__mark {
    padding: 0 2px;
    border-radius: 2px;
    background: var(--light);
    color: var(--ink);
}
.results__snippet {
    margin-top: 6px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
}
.results__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}
/* Отзывы на главной: пояснение, оценка, официальный виджет отзывов Яндекс Карт и
   просьба оставить отзыв. На мобильном всё идёт друг за другом, на десктопе виджет
   справа на всю высоту, а карточка «Оставить отзыв» прижата к низу левой колонки,
   чтобы под кнопкой не оставалось пустоты. */
.reviews {
    display: grid;
    gap: 28px;
}

@media (min-width: 1024px) {
    .reviews {
        grid-template-rows: auto 1fr;
        grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
        gap: 28px 64px;
    }
}
.reviews__ask-badge {
    display: flex;
    grid-row: span 3;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
}
.reviews__ask-icon {
    width: 22px;
    height: 22px;
}
.reviews__ask-link {
    justify-self: start;
    margin-top: 6px;
}
.reviews__ask-text {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.45;
}
.reviews__ask-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}
/* Карточка с просьбой оставить отзыв: на мобильном — под виджетом,
   на десктопе — внизу левой колонки. */
.reviews__ask {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 16px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}

@media (min-width: 1024px) {
    .reviews__ask {
        grid-row: 2;
        grid-column: 1;
        align-self: end;
    }
}
.reviews__main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}
.reviews__text {
    max-width: 34em;
    margin: 0;
    color: var(--muted);
}
.reviews__title {
    margin: 0;
}
/* Виджет выводит отзывы с прокруткой внутри; рамка — как у карточек сайта.
   Высота — чтобы были видны два-три отзыва, а колонки не расходились по высоте. */
.reviews__widget {
    display: block;
    width: 100%;
    height: 480px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}

@media (min-width: 1024px) {
    .reviews__widget {
        grid-row: 1 / span 2;
        grid-column: 2;
        height: 520px;
    }
}
/* Строка поиска по сайту. */
.search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    max-width: 720px;
}
/* На узком экране кнопка — квадрат с лупой (см. search__text). */
@media (max-width: 479px) {
    .search__button {
        padding: 0 12px;
    }
}
/* Подпись кнопки «Найти». На узком экране видна только лупа — место отдаём полю,
   а подпись остаётся для скринридеров. */
@media (max-width: 479px) {
    .search__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}
/* Смысловой раздел страницы с вертикальными отступами. */
.section {
    padding: 56px 0;
}

@media (min-width: 1024px) {
    .section {
        padding: 80px 0;
    }
}
@media (max-width: 479.98px) {
    .section__action {
        width: 100%;
    }
}
/* Кнопки действия в конце секции. */
.section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
}
/* Ссылки-плашки под карточками раздела (остальные услуги на главной). */
.section__chips {
    margin-top: 28px;
}

/* На телефоне плашки ровными двумя колонками, а не лесенкой разной длины. */
@media (max-width: 559.98px) {
    .section__chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Длинное слово в узкой колонке переносится по слогам, а не вылезает. */
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 12 5 5;
    }
}
.section__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 28px;
}

@media (min-width: 1024px) {
    .section__head {
        margin-bottom: 36px;
    }
}
.section__lead {
    max-width: 62ch;
    margin: -16px 0 24px;
    color: var(--muted);
}
/* Заголовок-ссылка группы в каталоге. */
.section__link {
    padding: 4px 0; /* область нажатия 44px; у строчной ссылки строку не раздвигает */
    color: inherit;
    text-decoration: none;
}

.section__link:hover {
    color: var(--brand);
}
.section__more {
    flex: none;
    min-height: 44px;
}
/* Заголовок не тянется на всю ширину, но «Ещё в разделе «Ворота и рольставни»»
   помещается в строку. */
.section__title {
    max-width: 36ch;
}
/* Раздел внутри страницы, где отступы уже задают соседи (каталог, «Ещё в разделе»). */
.section_flush {
    padding: 0;
}
.section_tone_alt {
    background: var(--bg-alt);
}
/* Второй заголовок в том же разделе (услуги монтажа под каталогом на главной). */
.section__head_sub {
    margin-top: 56px;
}

@media (min-width: 1024px) {
    .section__head_sub {
        margin-top: 72px;
    }
}
/* Смежные разделы каталога: окна ↔ жалюзи ↔ фурнитура. Отступ сверху задаёт
   страница (article__more). */
.see-also {
    min-width: 0;
}
.see-also__icon {
    position: absolute;
    top: 50%;
    right: 20px;
    color: var(--brand);
    translate: 0 -50%;
}
.see-also__link {
    position: relative;
    display: grid;
    gap: 4px;
    min-height: 44px;
    height: 100%;
    padding: 16px 52px 16px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease;
}

.see-also__link:hover {
    border-color: var(--brand);
}
.see-also__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Название раздела — шрифтом заголовков, как у карточек. */
.see-also__name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.see-also__link:hover .see-also__name {
    color: var(--brand);
}
.see-also__text {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
}
.see-also__title {
    margin-bottom: 20px;
}
/* Порядок заказа: четыре шага с крупными номерами. */
.steps {
    display: grid;
    gap: 24px;
}

@media (min-width: 720px) {
    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 24px;
    }
}

@media (min-width: 1024px) {
    .steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* Иконка шага — в правом верхнем углу, напротив номера. */
.steps__icon {
    position: absolute;
    top: 18px;
    right: 0;
    width: 28px;
    height: 28px;
    color: var(--muted);
}

@media (min-width: 720px) {
    .steps__icon {
        top: 26px;
        width: 32px;
        height: 32px;
    }
}
/* На телефоне номер слева от текста, чтобы четыре шага не занимали несколько экранов. */
.steps__item {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-content: start;
    gap: 4px 12px;
    padding-top: 16px;
    border-top: 3px solid var(--graphite);
}

.steps__item:first-child {
    border-top-color: var(--brand);
}

@media (min-width: 720px) {
    .steps__item {
        grid-template-columns: none;
        gap: 8px;
        padding-top: 20px;
    }
}
.steps__num {
    grid-row: span 2;
    color: var(--brand);
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
}

@media (min-width: 720px) {
    .steps__num {
        grid-row: auto;
        font-size: 52px;
    }
}
.steps__text {
    color: var(--muted);
}
.steps__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    text-wrap: balance;
}

/* На телефоне заголовок стоит рядом с номером — не заезжает под иконку. */
@media (max-width: 719px) {
    .steps__title {
        padding-right: 40px;
    }
}
/* Шаги в узкой колонке страницы каталога: не больше двух в ряд. */
@media (min-width: 1024px) {
    .steps_cols_2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* Карта из конструктора Яндекс Карт; фон виден, пока карта загружается. */
.ymap {
    height: 100%;
    min-height: 360px;
    overflow: hidden;
    isolation: isolate; /* слои карты не перекрывают липкую шапку */
    border-radius: var(--radius);
    background: var(--bg-alt);
}

@media (min-width: 720px) {
    .ymap {
        min-height: 450px;
    }
}