/* Блок 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);

    color-scheme: light;
    background: var(--graphite-deep);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 16px;
}

@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(--brand);
    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 {
    font-size: clamp(24px, 3vw, 28px);
    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_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-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_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_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_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_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_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_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_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;
}
.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 {
    font-size: clamp(26px, 3vw, 32px);
}

.text h3 {
    font-size: 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;
}

.text th,
.text td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

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

.text th {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.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;
}

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

@media (min-width: 720px) {
    .text__lead-img {
        float: right;
        width: 45%;
        margin: 6px 0 16px 32px;
    }
}
/* Узкая картинка текста (класс ставит prepareHTML): на телефоне отдельной строкой,
   на широком экране справа — текст обтекает её, и рядом не остаётся пустой полосы. */
.text__side-img {
    display: block;
}

@media (min-width: 720px) {
    .text__side-img {
        float: right;
        max-width: 40%;
        margin: 4px 0 16px 32px;
    }
}
/* Сообщение для посетителя: результат отправки формы. */
.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:hover {
    border-color: var(--graphite);
}

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

/* Широкая ячейка (карточка одна в ряду): фото слева, текст справа — так фото
   не растягивается на всю ширину. Контейнер card задаёт ячейка списка cards. */
@container card (min-width: 520px) {
    .card {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
}
.card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 20px 20px 22px;
}
.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__media и не растягивает карточку. */
@container card (min-width: 520px) {
    .card__image {
        position: absolute;
        inset: 0;
    }
}
.card__label {
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}
.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: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): фото во всю высоту, без полосы снизу.
   Высоту задаёт текст, а не фото (оно в card__image выведено из потока). */
@container card (min-width: 520px) {
    .card__media {
        position: relative;
        min-height: 220px;
        aspect-ratio: auto;
    }
}
.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;
}
.card__placeholder {
    width: 56px;
    height: 56px;
}
.card__text {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}
.card__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
}
/* Список карточек товаров. Карточки тянутся и заполняют ряд целиком, поэтому
   пустых ячеек нет при любом числе карточек: неполный последний ряд просто шире. */
.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
/* Ячейка — от 240px, растягивается на свободное место. Она же контейнер карточки:
   по её ширине карточка выбирает раскладку (см. card). */
.cards__item {
    display: flex;
    flex: 1 1 240px;
    container: card / inline-size;
}
/* «О магазине» на главной: текст и производители рядом. */
.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__title {
    margin-bottom: 24px;
}
/* Страница каталога — раздел или товар: содержимое и боковая колонка с призывом
   заказать замер. На десктопе колонка справа на всю высоту и едет вместе с
   прокруткой, а «Ещё в разделе» и «Смотрите также» идут слева под содержимым —
   справа не остаётся пустоты. На телефоне призыв — между содержимым и ссылками. */
.article {
    display: grid;
    gap: 40px;
    padding-bottom: 72px;
}

@media (min-width: 1024px) {
    .article {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 72px 64px;
        align-items: start;
    }
}
@media (min-width: 1024px) {
    .article__aside {
        position: sticky;
        top: 24px;
        grid-row: span 2;
        grid-column: 2;
        margin-top: 16px;
    }
}
/* Ссылки после содержимого: «Ещё в разделе» и «Смотрите также». */
.article__more {
    display: grid;
    gap: 56px;
}

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

@media (min-width: 1024px) {
    .article__text {
        margin-top: 64px;
    }
}
.article__title {
    max-width: 22ch;
    margin: 16px 0 28px;
}
/* Производители, с которыми работает магазин, — названиями, без чужих логотипов. */
.brands {
    padding: 28px;
    border-radius: var(--radius);
    background: var(--bg);
}
.brands__item {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.brands__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.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-flex;
    align-items: center;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "";
    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;
}
.breadcrumbs__link {
    display: inline-block;
    padding: 6px 0;
    color: var(--muted);
    text-decoration: none;
}

.breadcrumbs__link:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: .2em;
}
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    align-items: center;
}
/* Кнопка «Меню» в шапке: на экранах уже 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: rgba(255, 255, 255, .96);
    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-img {
    width: 90px;
    height: 46px;
    object-fit: cover;
}
/* Картинка с кодом; нажатие показывает новый код. */
.callback__captcha-refresh {
    display: block;
    padding: 0;
    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;
    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;
}
.callback__status:empty {
    display: none;
}
.callback__text {
    max-width: 40ch;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
}
.callback__title {
    max-width: 16ch;
    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;
}
/* Карточка контактов магазина: адрес, телефоны, почта. */
.contacts {
    display: grid;
    gap: 24px;
    padding: 24px;
    border-radius: var(--radius);
    background: var(--bg-alt);
}

@media (min-width: 720px) {
    .contacts {
        padding: 32px;
    }
}
.contacts__icon {
    width: 18px;
    height: 18px;
    color: var(--brand);
}
.contacts__list {
    display: grid;
    gap: 20px;
    margin: 0;
}
.contacts__phone-icon {
    width: 20px;
    height: 20px;
    color: var(--brand);
}
.contacts__phone {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    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 {
    margin-top: 6px;
    font-size: 16px;
}
.contacts__term {
    display: flex;
    gap: 8px;
    align-items: center;
    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);
}
.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__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);
}
.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);
    }
}
.doorway__door {
    display: grid;
    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;
}
.doorway__title {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.1;
    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;
}

@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;
}

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

.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);
}
.footer__inner {
    display: grid;
    gap: 36px;
    padding-top: 56px;
    padding-bottom: 40px;
}

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

@media (min-width: 1024px) {
    .footer__inner {
        grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
        gap: 48px;
        padding-top: 72px;
    }
}
.footer__link {
    display: inline-block;
    padding: 5px 0;
    color: var(--on-dark);
    text-decoration: none;
}

.footer__link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.footer__list {
    display: grid;
    gap: 2px;
}
.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;
}
/* Шапка: белая строка с логотипом, адресом и телефоном + графитовая навигация. */
.header {
    position: relative;
    z-index: 10;
    background: var(--bg);
}
.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);
}

.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;
    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;
}
/* Преимущества — строкой под первым экраном, во всю ширину. */
.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;
}
/* Дверь — главный кадр: на всю высоту, в кадре полотно двери. */
.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;
}
.intro__lead {
    max-width: 62ch;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.55;
}

@media (min-width: 1024px) {
    .intro__lead {
        font-size: 19px;
    }
}
.intro__title {
    max-width: 20ch;
}
/* Контакты и карта рядом (на телефоне — друг под другом). */
.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;
        align-items: start;
    }
}
/* Текст под контактами и картой — на всю ширину; абзацы — по ширине чтения. */
.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;
    }
}
/* Разделы каталога: с 960px — строка под шапкой, на экранах уже — список,
   который открывает кнопка burger в шапке. */
.nav {
    background: var(--graphite);
    color: var(--on-dark);
}
.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 14px;
    color: var(--on-dark);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: color .15s ease;
}

.nav__link::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    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);
    }
}

/* Текст первой ссылки в строке выравнивается по краю колонки. */
@media (min-width: 960px) {
    .nav__item:first-child .nav__link {
        margin-left: -14px;
    }
}

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

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

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

@media (min-width: 960px) {
    .nav__list {
        display: flex;
        gap: 4px;
        padding-bottom: 0;
    }
}
/* Меню закрыто: на узких экранах список спрятан до нажатия на бургер.
   Без скрипта разделы доступны по ссылкам в подвале. */
@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: 360px;
    border: 0;
    border-radius: var(--radius);
    background: var(--bg-alt);
}

@media (min-width: 720px) {
    .org-map {
        height: 450px;
    }
}
/* Результаты поиска по сайту. */
.results {
    max-width: 820px;
}
.results__count {
    color: var(--muted);
}
.results__empty {
    margin-bottom: 16px;
}
.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(--ink);
    text-decoration: none;
}

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

.results__item:hover .results__link {
    color: var(--brand);
}
.results__list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}
.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__rating {
    display: block;
    width: 150px;
    height: 50px;
    border: 0;
}
.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: 640px;
}
/* Смысловой раздел страницы с вертикальными отступами. */
.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__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: flex-end;
    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 {
    color: inherit;
    text-decoration: none;
}

.section__link:hover {
    color: var(--brand);
}
.section__more {
    flex: none;
    min-height: 44px;
}
.section__title {
    max-width: 24ch;
}
/* Раздел внутри страницы, где отступы уже задают соседи (каталог, «Ещё в разделе»). */
.section_flush {
    padding: 0;
}
.section_tone_alt {
    background: var(--bg-alt);
}
/* Смежные разделы каталога: окна ↔ жалюзи ↔ фурнитура. Отступ сверху задаёт
   страница (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-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.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;
}

/* На телефоне заголовок стоит рядом с номером — не заезжает под иконку. */
@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 {
    min-height: 360px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-alt);
}

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