/* Каталог «Дачные решения» — один набор на весь каталог.
   Палитра и шрифты утверждены владельцем (ПЕРЕДАЧА.md «Что утверждено»): новых цветов и шрифтов нет.
   Одна сетка, один набор компонентов: .tile .btn .tabs .price .cta .caption .photo. */
/* шрифты Golos Text и PT Mono подключаются тегами <link> в <head> страниц (site_parts.FONTS): @import держал отрисовку до загрузки шрифта */
/* Шрифты — свои файлы в assets/fonts (25.10.2026, слово владельца: без запросов к Google, IP посетителя за рубеж не уходит). Те же Golos Text (переменный, 400–700) и PT Mono; подмножества и unicode-range — как отдавал Google, вид не меняется. */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/golos-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-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: "PT Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/ptmono-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/ptmono-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; }

:root {
  /* цвет */
  --paper: #f4f0e7; --ink: #20272a; --green: #26463a; --red: #c84732; --signal: #e5bd3b; --wood: #b58a5b;
  --ink-70: rgba(32, 39, 42, .72); --ink-50: rgba(32, 39, 42, .5);
  --line: rgba(32, 39, 42, .16); --line-strong: rgba(32, 39, 42, .32);
  --surface: rgba(255, 255, 255, .55);          /* плашка на бумаге: тот же цвет, светлее */
  --on-ink: #f4f0e7;                              /* текст на графите = бумага */
  /* шрифт */
  --font: "Golos Text", "Helvetica Neue", Arial, sans-serif;
  --mono: "PT Mono", Menlo, monospace;
  --t-display: clamp(32px, 2.2vw + 18px, 46px);
  --t-h2: clamp(24px, 1.2vw + 14px, 32px);
  --t-lead: 17px; --t-body: 15px; --t-small: 14px; --t-micro: 12px;
  --t-price: clamp(30px, 1.4vw + 18px, 40px);
  /* ритм: 4/8/12/16/24/32/48/64 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  /* сетка */
  --container: 1200px; --gutter: 24px; --pad-x: 24px;
  /* скругления: вложенный = внешний − отступ (16 − 6 = 10) */
  --r: 16px; --r-sm: 10px; --r-pill: 999px;
  --inset: 6px;
  /* отклик */
  --dur: 160ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --target: 44px;
}
@media (max-width: 599px) { :root { --gutter: 12px; --pad-x: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-body)/1.5 var(--font); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; hyphens: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- сетка --- */
.container { width: min(100% - var(--pad-x) * 2, var(--container)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.section { padding-block: var(--s-8); }
@media (max-width: 599px) { .section { padding-block: var(--s-8); } }

/* --- шапка --- */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; border-bottom: 1px solid var(--line); }
.top__brand { font: 700 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.top__meta { font: 400 var(--t-micro)/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-70); }
.top__back { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); text-decoration: none; font-weight: 700; }
.top__back svg { width: 18px; height: 18px; }

/* --- микроярлык и подписи --- */
.kicker { font: 400 var(--t-micro)/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-70); }
.kicker--on-ink { color: rgba(244, 240, 231, .7); }
.lead { font-size: var(--t-lead); line-height: 1.4; color: var(--ink-70); }
.caption { display: grid; gap: var(--s-2); }
.caption__title { font-size: var(--t-h2); }
.caption__text { font-size: var(--t-lead); line-height: 1.45; color: var(--ink-70); }

/* --- фото: одна рамка на весь каталог --- */
.photo { position: relative; overflow: hidden; border-radius: var(--r); background: rgba(32, 39, 42, .06); }
.photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); pointer-events: none; }
.photo--3x2 { aspect-ratio: 3 / 2; } .photo--3x2 img { width: 100%; height: 100%; object-fit: cover; }
.photo--4x3 { aspect-ratio: 4 / 3; } .photo--4x3 img { width: 100%; height: 100%; object-fit: contain; } /* строение не обрезаем */
.photo--plan { background: #fff; }
.photo--zoom { display: block; color: inherit; }
.photo__zoom { position: absolute; right: var(--s-3); bottom: var(--s-3); background: var(--paper); z-index: 1; }
.photo--zoom:hover .photo__zoom, .photo--zoom:focus-visible .photo__zoom { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* --- плитка раздела --- */
.tile { position: relative; display: flex; flex-direction: column; gap: 0; border-radius: var(--r); background: var(--surface); text-decoration: none; color: inherit; overflow: hidden; border: 1px solid var(--line); transition-property: box-shadow, transform, border-color; transition-duration: var(--dur); transition-timing-function: var(--ease); }
.tile:hover { border-color: var(--line-strong); }
.tile:active { transform: scale(.995); }
.tile .photo { border-radius: 0; flex: none; }
.tile .photo::after { border-radius: 0; box-shadow: inset 0 -1px 0 var(--line); }
.tile__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--s-1); padding: var(--s-4); }
.tile__body > .tile__meta { flex: 1 0 auto; }   /* 25.10.2026: плитка и тело — flex-колонка, подпись растёт, кнопка внизу вровень с соседями (iPhone: у «Свой размер» — <button> — сетка внутри кнопки не тянулась) */
.tile__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-3); min-height: var(--target); }
.tile__title { font-size: 22px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.tile__meta { color: var(--ink-70); font-size: var(--t-small); line-height: 1.35; text-wrap: pretty; }
.tile__price { display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-size: var(--t-small); font-weight: 700; font-variant-numeric: tabular-nums; }
.tile__arrow { width: var(--target); height: var(--target); display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); transition-property: background-color, color, border-color; transition-duration: var(--dur); }
.tile__arrow svg { width: 20px; height: 20px; }
.tile:hover .tile__arrow { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
/* «Свой размер» — такая же плитка, как соседние (цвет, рамка, скругление, тёмная плашка внизу); красным не выделяется (владелец 25.10.2026 ~16:20: «обособленная какая-то»). Класс tile--accent оставлен как метка плитки-кнопки. */

/* --- кнопки --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-6); border-radius: var(--r-sm); border: 1px solid transparent; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; white-space: nowrap; transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: var(--dur); transition-timing-function: var(--ease); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: #b33d2a; }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: #0f1517; }
.btn--ghost { background: transparent; border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface); }
.btn--block { width: 100%; }
.btn svg { width: 20px; height: 20px; flex: none; }
/* мессенджеры: одинаковые квадраты 48, без подписей (слово владельца) */
.msgr { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 48px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); transition-property: background-color, border-color, transform; transition-duration: var(--dur); }
.msgr img { width: 26px; height: 26px; }
.msgr:hover { background: #fff; border-color: var(--ink); }
.msgr:active { transform: scale(.96); }
.msgr-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* --- вкладки: сегмент, один вид везде --- */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-sm); background: rgba(32, 39, 42, .08); }
@media (max-width: 599px) { .tabs--many { display: flex; overflow-x: auto; scrollbar-width: none; } .tabs--many::-webkit-scrollbar { display: none; } .tabs--many .tabs__tab { flex: 1 0 auto; } }
.tabs__tab { min-height: 36px; padding: 0 var(--s-3); white-space: nowrap; text-align: center; border: 0; border-radius: calc(var(--r-sm) - var(--s-1)); background: transparent; font-weight: 700; font-size: var(--t-small); cursor: pointer; color: var(--ink-70); transition-property: background-color, color; transition-duration: var(--dur); }
.tabs__tab:hover { color: var(--ink); }
@media (max-width: 599px) { .tabs__tab { min-height: var(--target); } }
.tabs__tab[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }
.tabs__tab[aria-selected="true"]:hover { color: var(--on-ink); }

/* --- цена: утверждённый красный блок, главное действие внутри --- */
.price { display: grid; gap: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.price__main { padding: var(--s-6); background: var(--green); color: #fff; }
.price__label { display: block; font: 400 var(--t-micro)/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.price__sum { display: block; margin-top: var(--s-2); font-size: var(--t-price); line-height: 1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price__sub { display: block; margin-top: var(--s-2); font-size: var(--t-small); color: rgba(255, 255, 255, .88); }
.price__rows { padding: var(--s-4) var(--s-6) 0; display: grid; gap: var(--s-2); }
.price__rows-title { font-weight: 700; }
.price__row { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.price__row--total { padding-top: var(--s-2); border-top: 1px solid var(--line); font-weight: 700; font-size: var(--t-body); }
.price__row--extra { color: var(--ink-70); }
.price__action { padding: var(--s-6) var(--s-6) var(--s-2); display: grid; gap: var(--s-2); }
.price__action-note { font-size: var(--t-small); color: var(--ink-70); }
.price__contacts { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.price__phone { margin-left: auto; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; min-height: 48px; display: inline-flex; align-items: center; gap: var(--s-2); }
.price__phone svg { width: 18px; height: 18px; }
.price__phone--solo { margin-left: 0; width: 100%; justify-content: center; min-height: var(--target); }

/* --- призыв: один блок на галерею, «Свой размер» и подвал --- */
.cta { display: grid; gap: var(--s-3); }
.cta__title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.cta__text { color: var(--ink-70); }
.cta__actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.cta__phone { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-3); border-radius: var(--r-sm); text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.cta__phone svg { width: 18px; height: 18px; }
.cta__phone:hover { background: var(--surface); }

/* --- таблица характеристик --- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.fact span, .fact strong { white-space: nowrap; }
.fact { padding: var(--s-3) var(--s-4); display: grid; gap: var(--s-1); border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; }
.fact span { font: 400 var(--t-micro)/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-70); }
.fact strong { font-size: var(--t-body); line-height: 1.3; }
.spec { margin: 0; display: grid; }
.spec > div { display: grid; grid-template-columns: 180px 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.spec > div:last-child { border-bottom: 1px solid var(--line); }
.spec dt { color: var(--ink-70); }
.spec dd { margin: 0; }
.spec .spec--in dt, .spec .spec--in dd { color: var(--green); font-weight: 700; }
@media (max-width: 599px) { .facts, .model .facts { grid-template-columns: 1fr; } .fact, .model .fact { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); border-left: 0; border-top: 1px solid var(--line); } .fact:first-child { border-top: 0; } .spec > div { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ===== Экран 1: обложка ===== */
.hero { padding-block: var(--s-8) var(--s-6); }
.hero__head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: end; margin-bottom: var(--s-8); }
.hero__title { font-size: var(--t-display); }
.hero__lead { font-size: var(--t-lead); line-height: 1.4; color: var(--ink-70); }
.hero__steps { display: flex; flex-wrap: nowrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: var(--t-small); color: var(--ink-70); }   /* шаги: на широком — одна строка, на телефоне и в PDF — ровный столбик */
.hero__steps span { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199px) { .hero__steps { flex-direction: column; } }
.hero__steps b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 700 var(--t-micro)/1 var(--mono); }
.nav-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-8); margin-top: var(--s-6); font-size: var(--t-small); color: var(--ink-70); }
.hero__facts b { color: var(--ink); }
@media (max-width: 1023px) { .nav-tiles { grid-template-columns: repeat(2, 1fr); } .hero__head { grid-template-columns: 1fr; } }
.tile__count { display: block; }
button.tile { width: 100%; height: 100%; padding: 0; font: inherit; text-align: left; cursor: pointer; }
@media (max-width: 599px) { .hero { padding-block: var(--s-6) var(--s-8); } .nav-tiles { grid-template-columns: 1fr 1fr; } .tile__title { font-size: 18px; } .tile__body { padding: var(--s-3); } .tile__arrow { display: none; } .tile__foot { min-height: 0; margin-top: var(--s-2); } .top__brand { white-space: nowrap; } .hero__steps { flex-direction: column; gap: var(--s-2); } .hero__facts { flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); } }
.contact-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); flex-wrap: wrap; padding: var(--s-4) var(--s-6); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.contact-line__label { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.contact-line .cta__actions { gap: var(--s-2); }
@media (max-width: 599px) { .contact-line { padding: var(--s-4); } .contact-line .cta__actions { width: 100%; flex-wrap: nowrap; } .contact-line .msgr { flex: 1 1 0; width: auto; } .contact-line .cta__phone { flex: 1.6 1 0; justify-content: center; padding: 0; white-space: nowrap; } }

/* ===== Экран 2: галерея ===== */
.works-head { display: grid; gap: var(--s-6); margin-bottom: var(--s-6); }
.works-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.work { display: grid; grid-template-rows: auto 1fr; gap: var(--s-2); }
.work .photo { width: 100%; aspect-ratio: 3 / 2; }
.work__btn { padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r); text-align: left; width: 100%; }
.work__btn .photo { display: block; transition-property: transform; transition-duration: var(--dur); }   /* <span>: без block плашка №N в Safari iOS уходила под фото */
.work__btn:hover .photo { transform: translateY(-2px); }
.work__cap { display: grid; gap: 2px; align-content: start; }
.work__cap .kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work__cap b { font-size: var(--t-small); line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: wrap; }
@media (max-width: 1023px) { .works-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .works-grid { grid-template-columns: 1fr 1fr; } }

/* просмотр: фото во всю высоту окна, подпись и призыв — одной панелью рядом */
.viewer { position: fixed; inset: 0; z-index: 100; display: none; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--on-ink); }
.viewer::backdrop { background: var(--ink); }
.viewer[open] { display: grid; grid-template-columns: 1fr 400px; }
.viewer__stage { position: relative; overflow: hidden; min-height: 0; touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.viewer__stage:active { cursor: grabbing; }
.viewer__track { position: absolute; inset: 0; will-change: transform; }
.viewer__slide { position: absolute; top: 0; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: var(--s-6); }
.viewer__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--r-sm); object-fit: contain; transform-origin: 0 0; -webkit-user-drag: none; pointer-events: none; }
.viewer__panel:focus { outline: none; }
.viewer__panel { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; background: var(--paper); color: var(--ink); }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.viewer__count { font: 400 13px/1 var(--mono); letter-spacing: .09em; color: var(--ink-70); font-variant-numeric: tabular-nums; }
.viewer__nav { display: flex; gap: var(--s-2); }
.icon-btn { width: var(--target); height: var(--target); display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; transition-property: background-color, color, border-color; transition-duration: var(--dur); }
.icon-btn:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.viewer__body { padding: var(--s-6) var(--s-4); overflow: auto; display: grid; align-content: start; gap: var(--s-6); }
.viewer__body .caption__title { font-size: 26px; }
.viewer__foot { padding: var(--s-4); border-top: 1px solid var(--line); display: grid; gap: var(--s-3); }
.viewer__foot .cta__actions { flex-wrap: nowrap; }
.viewer__foot .msgr { width: 48px; }
.viewer__foot .cta__phone { padding-inline: var(--s-2); white-space: nowrap; }
@media (max-width: 599px) { .viewer__foot .msgr { flex: 1 1 0; width: auto; min-width: 0; } .viewer__foot .cta__phone { flex: 1.7 1 0; margin-left: 0; justify-content: center; padding: 0; } }
@media (max-width: 899px) {
  .viewer[open] { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow: auto; }
  .viewer__stage { aspect-ratio: 3 / 2; background: var(--ink); }
  .viewer__slide { padding: 0; }
  .viewer__slide img { width: 100%; height: 100%; border-radius: 0; }
  .viewer__panel { grid-template-rows: auto 1fr auto; }
  .viewer__body { padding: var(--s-4); gap: var(--s-4); }
  .viewer__body .caption__title { font-size: 22px; }
}

/* ===== Экран 3: модель ===== */
.model-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.model-head .chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font: 400 var(--t-micro)/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.chip--green { border-color: var(--green); color: var(--green); }
.model-title { font-size: clamp(28px, 1.2vw + 17px, 34px); }
@media (min-width: 1024px) { .model-title { white-space: nowrap; } }
.model { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: stretch; }
.model__side { display: grid; grid-template-rows: auto 1fr; gap: var(--gutter); align-content: start; }
.model .facts { grid-template-columns: 1fr 1fr; }
.model .fact:nth-child(3) { border-left: 0; }
.model .fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
.plan-card { display: grid; gap: var(--s-2); padding: 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: var(--r); }
.plan-card__cap { font-size: var(--t-small); color: var(--ink-70); }
.plan-card .photo { transition-property: transform; transition-duration: var(--dur); }
.plan-card:hover .photo { transform: translateY(-2px); }
.thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }
.thumbs__item { width: 96px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); }
.thumbs__item .photo { border-radius: var(--r-sm); }
.thumbs__item.is-active .photo::after { box-shadow: inset 0 0 0 2px var(--ink); }
.choose__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) var(--s-2); }
.choose__title { font-weight: 700; }
.choose__opt { display: grid; grid-template-columns: 28px 1fr 20px; align-items: center; gap: var(--s-3); min-height: 48px; padding: var(--s-2) var(--s-3); border-radius: calc(var(--r-sm) - var(--s-1)); text-decoration: none; transition-property: background-color; transition-duration: var(--dur); }
.choose__opt:hover { background: var(--surface); }
.choose__opt img, .choose__ico { width: 28px; height: 28px; }
.choose__opt > span { display: grid; font-weight: 700; }
.choose__opt small { font-weight: 400; font-size: var(--t-small); color: var(--ink-70); }
.choose__opt > svg:last-child { width: 20px; height: 20px; color: var(--ink-50); }
/* 25.10.2026 (проверяющий, п.6): под фото на 1440 была пустота 300–590 px. Левая колонка — фото и «Общий размер / Веранда / Крыша / Гарантия» вместе, при прокрутке она едет за ценой (sticky, одно решение для всех моделей); до 1200 px порядок прежний: фото, цена, характеристики */
.model__left { display: grid; gap: var(--s-3); align-content: start; align-self: start; }
@media (min-width: 1200px) { .model__left { position: sticky; top: 84px; } }
.model__media { display: grid; grid-template-rows: auto 1fr; gap: var(--s-3); align-content: start; }
.model__views { position: relative; }
.model__view[hidden] { display: none; }
.model__specs { margin-top: var(--s-8); display: grid; gap: var(--s-6); }
.model__specs-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); align-items: baseline; }
.model__specs-head h2 { font-size: var(--t-h2); }
.model__benefit { color: var(--green); font-weight: 700; }
.lead .model__benefit { display: block; margin-top: var(--s-1); }
@media (max-width: 1199px) { .model { grid-template-columns: 1fr; } .model__left { display: contents; } .model__left > .facts { order: 3; } .model__side { order: 2; } }
@media (max-width: 599px) { .model .facts { grid-template-columns: 1fr; } .model .fact:nth-child(n + 2) { border-top: 1px solid var(--line); } }
@media (max-width: 899px) { .model__specs { margin-top: var(--s-6); } }

/* --- низ --- */
.foot { margin-top: 0; padding-block: var(--s-6); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: var(--t-small); color: var(--ink-70); }

/* ===== Списки моделей, размеры, условия ===== */
.nav-tiles--models .tile__meta { display: grid; gap: 2px; }
.nav-tiles--models .tile__count { color: var(--ink-70); }
.section-tight { padding-top: var(--s-8); }
.linkrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px; margin-top: var(--s-6); padding: 0 var(--s-4) 0 var(--s-6); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); text-decoration: none; font-size: 18px; font-weight: 700; letter-spacing: -.01em; transition-property: background-color, border-color; transition-duration: var(--dur); }
.linkrow:hover { background: #fff; border-color: var(--line-strong); }
.linkrow svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 599px) { .linkrow { padding-left: var(--s-4); font-size: 16px; } }
.custom { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.custom__title { font-size: var(--t-h2); }
.custom__example { padding-left: var(--s-4); border-left: 3px solid var(--signal); color: var(--ink-70); }
/* размеры и цены (семейства Б-1, Б-2) */
.sizes { list-style: none; margin: 0; padding: 0; display: grid; }
.sizes__row { display: grid; grid-template-columns: minmax(84px, auto) 1fr auto; align-items: baseline; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sizes__row:first-child { border-top: 0; }
.sizes__dim { font-weight: 700; } .sizes__dim small { margin-left: var(--s-2); font: 400 var(--t-small)/1 var(--font); color: var(--green); white-space: nowrap; }
.sizes__use { color: var(--ink-70); font-size: var(--t-small); line-height: 1.3; }
.sizes__sum { font-size: var(--t-body); white-space: nowrap; }
@media (max-width: 599px) { .sizes__row { grid-template-columns: 1fr auto; } .sizes__use { grid-column: 1; grid-row: 2; margin-top: -4px; } .sizes__sum { grid-row: 1 / span 2; grid-column: 2; align-self: center; } }
.model__brief { display: grid; gap: var(--s-2); margin-top: var(--s-6); color: var(--ink-70); }
.model__note { margin-top: var(--s-3); color: var(--ink-70); font-size: var(--t-small); }
/* условия */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--gutter); align-items: start; }
.info { display: grid; gap: var(--s-4); align-content: start; }
.info-col { display: grid; gap: var(--s-8); align-content: start; }
.info h2 { font-size: var(--t-h2); }
.info__note { color: var(--ink-70); font-size: var(--t-small); }
.info__ask { margin-bottom: var(--s-4); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%; background: var(--green); box-shadow: inset 0 0 0 4px var(--green), inset 0 0 0 16px var(--green); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.ticks li::after { content: ""; position: absolute; left: 5px; top: calc(.3em + 4px); width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.qa { margin: 0; display: grid; gap: var(--s-1); }
.qa dt { font-weight: 700; margin-top: var(--s-3); } .qa dt:first-child { margin-top: 0; }
.qa dd { margin: 0; color: var(--ink-70); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: var(--s-3); }
.steps li { counter-increment: s; position: relative; padding-left: 40px; min-height: 28px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 700 12px/28px var(--mono); text-align: center; }
.mats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.mats li { display: grid; gap: 2px; align-content: start; } .mats .photo { margin-bottom: var(--s-2); } .mats span { color: var(--ink-70); font-size: var(--t-small); line-height: 1.3; }
.info-page > .info { margin-top: var(--s-8); }
@media (max-width: 1023px) { .info-grid { grid-template-columns: 1fr; gap: var(--s-8); } .mats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .mats { gap: var(--s-3); } }
.info__fig { margin: var(--s-8) 0 0; display: grid; gap: var(--s-2); max-width: 560px; } .info__fig figcaption { color: var(--ink-70); font-size: var(--t-small); }
@media (max-width: 599px) { .contact-line .msgr { min-width: 44px; } }
/* планировка с подписью (Д-2: обе планировки сразу) */
.plan { margin: 0; display: grid; gap: var(--s-2); }
.plan figcaption { font-size: var(--t-small); color: var(--ink-70); }
.plan figcaption b { color: var(--ink); }
.model__view .plan + .plan, .model__view .photo + .plan { margin-top: var(--s-4); }
/* связь на странице модели вместо кнопки «Хочу такой дом» (слово владельца 24.10.2026 ~17:10): тот же .contact-line без рамки, он внутри карточки цены; строка не переносится на любой ширине */
.contact-line.contact-line--flat { padding: 0; border: 0; border-radius: 0; background: none; }
.contact-line--stack { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--s-3); }
.contact-line--stack .cta__actions { width: 100%; flex-wrap: nowrap; }
.contact-line--stack .msgr { flex: 1 1 0; width: auto; min-width: 44px; }
.contact-line--stack .cta__phone { flex: 1.6 1 0; justify-content: center; padding: 0; white-space: nowrap; }
/* номер фото «Наших работ» на плитке: клиент называет его, менеджер находит дом */
.line { display: block; }   /* строка значения, заданная вёрсткой (высота Б-2 по размерам) */
.work__num { position: absolute; left: var(--s-2); top: var(--s-2); z-index: 1; padding: 3px 8px; border-radius: var(--r-pill); background: rgba(32, 39, 42, .8); color: var(--on-ink); font: 400 var(--t-micro)/1.2 var(--mono); letter-spacing: .06em; font-variant-numeric: tabular-nums; pointer-events: none; }
/* подсказка после копирования текста для MAX */
.copy-toast { position: fixed; left: 50%; bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); z-index: 300; transform: translateX(-50%); display: flex; align-items: center; gap: var(--s-3); width: max-content; max-width: calc(100vw - var(--s-4) * 2); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink); font-size: var(--t-small); }
.copy-toast__btn { flex: none; min-height: var(--target); padding: 0 var(--s-3); border: 1px solid rgba(244, 240, 231, .5); border-radius: var(--r-sm); background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 599px) { .work__cap b { font-size: 13px; } }
.model__views > .plan { margin-top: var(--s-4); }

/* ===== Пакет «мобильная версия» (24.10.2026 вечер): шапка, первый экран, окно связи, разделы работ, просмотр фото ===== */
.skip { position: absolute; left: var(--s-2); top: -64px; z-index: 300; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: var(--s-2); }
/* шапка: кто мы, разделы, связь; одна на все страницы */
.site { border-bottom: 1px solid var(--line); background: var(--paper); }
.site__in { display: flex; align-items: center; gap: var(--s-4); min-height: 64px; }
.site__brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--target); font: 700 14px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.site__mark { width: 30px; height: 30px; flex: none; }
.site__nav { order: 2; flex: 1; display: flex; justify-content: center; gap: var(--s-1); }
.site__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); padding: 0 14px; border-radius: var(--r-pill); font-weight: 700; font-size: 15px; text-decoration: none; color: var(--ink-70); transition-property: background-color, color; transition-duration: var(--dur); }
.site__nav a:hover { background: var(--surface); color: var(--ink); }
.site__nav a[aria-current="page"] { background: var(--ink); color: var(--on-ink); }
.site__contact { order: 3; min-height: var(--target); padding: 0 var(--s-4); font-size: 15px; }
.site__ico { width: 20px; height: 20px; flex: none; }
@media (max-width: 799px) {
  .site__in { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-top: var(--s-2); }
  .site__brand { margin-right: auto; }
  .site__contact { order: 2; }
  .site__nav { order: 3; flex: 0 0 100%; justify-content: space-between; gap: 0; overflow-x: auto; scrollbar-width: none; padding-block: var(--s-1) var(--s-2); }
  .site__nav::-webkit-scrollbar { display: none; }
  .site__nav a { flex: 1 1 auto; padding: 0 var(--s-2); font-size: 14px; }
}
.subbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 52px; }
div.container:has(> .subbar) + main.section { padding-top: var(--s-3); }
.works-sec > .subbar, #w-hub > .subbar { margin-top: 0; }
/* подвал: разделы и связь, чтобы с любого места страницы было куда пойти */
.foot { align-items: center; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.foot__nav a { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--s-2); text-decoration: none; font-weight: 700; color: var(--ink); }
.foot__nav a:hover { text-decoration: underline; }
.foot__contact { min-height: var(--target); padding: 0 var(--s-4); }
@media (max-width: 599px) { .foot { flex-direction: column; align-items: stretch; } .foot__nav { margin-inline: calc(var(--s-2) * -1); } .foot__contact { width: 100%; } }
/* главная: живой первый экран — фото дома целиком, акцент сигнальным цветом */
.hero { padding-block: var(--s-6) var(--s-6); }
.hero__grid { display: grid; grid-template-columns: 5fr 7fr; grid-template-areas: "head visual" "steps visual"; gap: var(--s-6) var(--s-8); align-items: center; margin-bottom: var(--s-8); }
.hero__grid .hero__head { grid-area: head; display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin: 0; align-items: start; }
.hero__grid .hero__title { font-size: clamp(36px, 3.2vw + 14px, 54px); margin-top: 0 !important; }
.hero__grid .hero__lead { font-size: 18px; }
.hero__grid .hero__steps { grid-area: steps; margin: 0; flex-wrap: wrap; align-self: start; }
.hero__visual { grid-area: visual; position: relative; display: block; isolation: isolate; text-decoration: none; color: inherit; border-radius: var(--r); }
.hero__visual::before { content: ""; position: absolute; z-index: -1; inset: 10px -10px -10px 10px; border-radius: var(--r); background: var(--signal); }
.hero__visual .photo { display: block; aspect-ratio: 3 / 2; }
.hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.hero__tag { position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 1; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-weight: 700; font-size: var(--t-small); transition-property: background-color; transition-duration: var(--dur); }
.hero__tag svg { width: 16px; height: 16px; }
.hero__visual:hover .hero__tag { background: var(--red); }
@media (max-width: 1023px) { .hero__grid { grid-template-columns: 1fr; grid-template-areas: "head" "visual" "steps"; gap: var(--s-4); margin-bottom: var(--s-6); } .hero__visual { margin-right: 10px; } }
@media (max-width: 599px) { .hero { padding-block: var(--s-4) var(--s-6); } .hero__grid .hero__lead { font-size: var(--t-lead); } .hero__grid .hero__steps { flex-direction: row; gap: var(--s-1) var(--s-4); } .hero__tag { min-height: 36px; padding: 0 var(--s-3); } }
/* окно «Как удобнее связаться?»: на ПК по центру, на телефоне нижняя шторка; одно на все страницы (contact.js) */
.choose { padding: 0; border: 0; width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; overflow: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink); border-radius: var(--r); box-shadow: 0 24px 64px rgba(32, 39, 42, .35); }
.choose:not([open]) { display: none; }
.choose[open] { display: grid; gap: var(--s-1); padding: var(--s-2) var(--s-2) var(--s-3); animation: choose-in 200ms var(--ease); }
.choose::backdrop { background: rgba(32, 39, 42, .55); }
.choose__grab { display: none; }
html.choose-open { overflow: hidden; }
@keyframes choose-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@media (max-width: 699px) {
  .choose { width: 100%; margin: auto 0 0; border-radius: var(--r) var(--r) 0 0; max-height: calc(100dvh - 24px); }
  .choose[open] { padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); animation: sheet-in 260ms var(--ease); }
  .choose__grab { display: block; width: 40px; height: 4px; margin: 6px auto 2px; border-radius: 2px; background: var(--line-strong); touch-action: none; }
  .choose__head { touch-action: none; }
}
@media (prefers-reduced-motion: reduce) { .choose[open] { animation: none; } }
/* «Наши работы»: плитки разделов, внутри раздела его фото */
@media (min-width: 1024px) { .nav-tiles--works { grid-template-columns: repeat(3, 1fr); } }
.works-page { padding-top: 0; }
.works-sec .works-head, #w-hub .works-head { margin-top: var(--s-2); }
.works-title { font-size: var(--t-display); }
.works-title:focus, #h-hub:focus { outline: none; }
.works-sec .linkrow { margin-top: var(--s-8); }
.work__btn { display: block; color: inherit; text-decoration: none; }
.work__cap b { min-height: 2.6em; }
.work__cap .kicker { margin-top: 2px; }
/* фото, которое открывается крупно: значок «увеличить» и курсор */
a.photo--zoom { cursor: zoom-in; }
/* просмотр фото (PhotoSwipe): тёмный фон каталога, подпись и «Хочу такой дом» внизу */
.pswp.pswp { --pswp-bg: #151b1d; --pswp-placeholder-bg: #20272a; font-family: var(--font); }
.pswp__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); padding: var(--s-8) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(21, 27, 29, .9), rgba(21, 27, 29, 0)); color: var(--on-ink); pointer-events: none; }
.pswp__caption[hidden] { display: none; }
.pswp__caption > * { pointer-events: auto; }
.pswp__cap-text { display: grid; gap: 2px; min-width: 0; }
.pswp__cap-text b { font-size: 16px; line-height: 1.3; }
.pswp__cap-text span { font: 400 var(--t-micro)/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; opacity: .8; }
.pswp__want { flex: none; }
.pswp .copy-toast { z-index: 50; }
.pswp--one-slide .pswp__counter { display: none; }   /* «1 / 1» при одном фото не нужен */
@media (max-width: 599px) { .pswp__want { padding: 0 var(--s-4); font-size: 15px; } }

/* замечания тестировщика 24.10.2026: 360 px, цель нажатия, мелкий шрифт */
@media (max-width: 1199px) { .model { grid-template-columns: minmax(0, 1fr); } }
.model > *, .model__side > * { min-width: 0; }
.tabs__tab { min-height: var(--target); }
@media (max-width: 379px) {
  .price__main { padding: var(--s-4); } .price__rows { padding: var(--s-4) var(--s-4) 0; } .price__action { padding: var(--s-4) var(--s-4) var(--s-2); }
  .contact-line--stack .cta__actions { gap: 6px; } .contact-line--stack .msgr { min-width: 44px; } .contact-line--stack .cta__phone { font-size: 14px; }
}
@media (max-width: 599px) { .fact strong { white-space: normal; text-align: right; } }

/* подпись плитки: город переносится на вторую строку, а не режется многоточием */
@media (max-width: 599px) { .work__cap .kicker { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; text-wrap: wrap; } }
/* блок цены на 320–430: мессенджеры по 48 px, телефон забирает остаток и не выходит за рамку; на 320–379 телефон — отдельной строкой под мессенджерами */
@media (max-width: 430px) {
  .contact-line--stack .msgr { flex: 0 0 48px; }
  .contact-line--stack .cta__phone { flex: 1 1 0; min-width: 0; font-size: 14px; }
  .contact-line--stack .cta__phone svg { display: none; }
}
@media (max-width: 379px) {
  .contact-line--stack .cta__actions { flex-wrap: wrap; }
  .contact-line--stack .msgr { flex: 1 1 0; }
  .contact-line--stack .cta__phone { flex: 1 1 100%; font-size: 15px; }
}
.price { grid-template-columns: minmax(0, 1fr); }   /* дорожка не растёт от узкого содержимого: карточка не выходит за рамку */

/* ===== Упаковка, 25.10.2026: связь на каждой странице, строка «другой размер», черновики новых моделей ===== */
/* компьютер — липкая шапка (кнопка «Написать» всегда на виду), номер в шапке от 1200; панели связи внизу экрана нет (25.10.2026) */
.site__tel { display: none; }
@media (min-width: 800px) { html { scroll-padding-top: 76px; } .site { position: sticky; top: 0; z-index: 50; } }
@media (min-width: 1200px) { .site__tel { order: 3; display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--s-2); border-radius: var(--r-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; } .site__tel:hover { background: var(--surface); } }
.price__action-note a, .price__action-note button { font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; min-height: 24px; }
/* плашка на плитке и «старая» цена (work/data/catalog_flags.json; итог остаётся ценой калькулятора) */
.tile__badge { position: absolute; left: var(--s-2); top: var(--s-2); z-index: 1; padding: 3px 8px; border-radius: var(--r-pill); background: rgba(32, 39, 42, .8); color: var(--on-ink); font: 400 var(--t-micro)/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.was { font-weight: 400; text-decoration: line-through; font-variant-numeric: tabular-nums; }
.tile__foot { flex-wrap: wrap; }
.tile__foot .was { flex: 0 0 100%; color: var(--ink-70); font-size: var(--t-small); line-height: 1.2; }
.price__main .was { display: block; margin-top: var(--s-2); color: rgba(255, 255, 255, .75); font-size: var(--t-lead); line-height: 1; }
.price__main .was + .price__sum { margin-top: var(--s-1); }
.nav-tiles--models + .model__specs-head, .model-head + .model__specs-head { margin-top: 0; }
.model__specs-head + .nav-tiles { margin-top: var(--s-4); }
.nav-tiles + .model__specs-head { margin-top: var(--s-8); }
.sizes-switch { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
/* допы на странице модели: список пунктов с галочками внутри .price__rows (addons.js, 25.10.2026) */
.addon { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; transition-property: background-color, box-shadow, border-color; transition-duration: 150ms; touch-action: manipulation; }
.addon:hover { border-color: var(--ink-70); }
.addon:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.addon input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 0; border: 2px solid var(--ink-70); border-radius: 6px; background: var(--paper); cursor: pointer; }
.addon input:checked { background: var(--ink); border-color: var(--ink); }
.addon input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--on-ink); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.addon__text { display: grid; gap: 2px; min-width: 0; }
.addon__name { font-weight: 700; font-size: var(--t-body); line-height: 1.25; }
.addon__meta { font-size: var(--t-small); line-height: 1.3; color: var(--ink-70); font-variant-numeric: tabular-nums; }
.addon__price { font-weight: 700; color: var(--ink); }
/* ===== «Чаще всего выбирают» (25.10.2026, слово владельца ~13:00: «плашки пустые, сливается, нет акцентов, это ТОП») =====
   Блок на графите (тот же --ink, что у логотипа), карточки светлые, плашка и цена — --signal (жёлтый из логотипа). Новых цветов нет. */
.top-block { margin: var(--s-4) calc(var(--pad-x) * -1) 0; padding: var(--s-6) var(--pad-x) var(--s-8); background: var(--ink); color: var(--on-ink); }
.top-block__head { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.top-block__kicker { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--signal); color: var(--ink); font: 700 var(--t-micro)/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; }
.top-block__kicker::before { content: "★"; font-size: 11px; }
.top-block__head h2 { font-size: var(--t-h2); color: var(--on-ink); }
.top-block__head p { margin: 0; max-width: 46ch; color: rgba(244, 240, 231, .78); font-size: var(--t-body); line-height: 1.4; }
.top-block .nav-tiles { margin-top: 0; }
.top-block .tile { color: var(--ink); background: var(--paper); border-color: transparent; }
.top-block .tile:hover { border-color: var(--signal); }
.top-block .tile__price { background: var(--signal); color: var(--ink); font-size: 15px; padding: 5px 12px; }
.top-block .tile__arrow { border-color: var(--line-strong); }
.top-block__more { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); margin-top: var(--s-4); color: var(--on-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.top-block__more svg { width: 18px; height: 18px; }
@media (min-width: 600px) { .top-block { margin-inline: 0; padding: var(--s-8); border-radius: calc(var(--r) + 4px); } }
/* плашка «Хит продаж» / «Семейный выбор» — везде одна: жёлтая, графитовый текст (контраст ≈10:1), не серое стекло */
.tile__badge { padding: 4px 10px 4px 8px; background: var(--signal); color: var(--ink); font: 700 var(--t-micro)/1.2 var(--font); letter-spacing: .01em; text-transform: none; }
.tile__badge::before { content: "★"; margin-right: 4px; font-size: 11px; }   /* пробел — полем, а не символом: в inline-flex хвостовой пробел схлопывался (проверяющий 25.10, п.10) */
.model-head .tile__badge, .tile__badge--inline { position: static; display: inline-flex; align-items: center; min-height: 22px; margin-bottom: var(--s-2); }
/* скидка на плитке: «старая» цена + красная метка с процентом */
.tile__deal { flex: 0 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--s-2); }
.tile__deal .was { flex: 0 0 auto; color: var(--ink-70); font-size: var(--t-small); line-height: 1.2; }
.tile__foot .tile__deal .was { flex: 0 0 auto; }
.tile__save { padding: 2px 8px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-size: 13px; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* скидка на странице модели: зачёркнутая цена + «Выгода N ₽» над итогом */
.price__deal { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); }
.price__main .price__deal .was { display: inline; margin: 0; color: rgba(255, 255, 255, .85); font-size: 20px; line-height: 1.2; }
.price__save { padding: 3px 10px; border-radius: var(--r-pill); background: var(--signal); color: var(--ink); font-size: var(--t-small); line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; }
.price__main .price__deal + .price__sum { margin-top: var(--s-2); }
/* значок увеличения: небольшой, не перекрывает дом (на фото материалов его нет) */
.photo__zoom { width: 32px; height: 32px; right: var(--s-2); bottom: var(--s-2); }
.photo__zoom svg { width: 16px; height: 16px; }
/* переносы: короткие предлоги склеены неразрывным пробелом (final_pass.py); абзацы — pretty, заголовки — balance */
p, li, dd, figcaption, .tile__meta { text-wrap: pretty; }
.price__send { width: 100%; margin-top: var(--s-3); min-height: var(--target); }
.price__send[hidden] { display: none; }
.price__send-note { display: block; margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-70); }
.price__action-note a, .price__action-note button { display: inline-block; padding-block: 10px; margin-block: -10px; }   /* область нажатия ≥44 при строке 24 */
.top-block + .model__specs-head { margin-top: var(--s-8); }
.photo--cover img { object-fit: cover; }
.nav-tiles--models .tile__meta { align-content: start; }
.contact-line, .cta__actions { min-width: 0; max-width: 100%; } .cta__phone { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 359px) { .site__nav a { padding: 0 8px; font-size: 14px; } }   /* 320: меню без бокового скролла */
@media (max-width: 359px) { .contact-line .cta__actions { flex-wrap: wrap; } .contact-line .cta__phone { flex: 1 1 100%; } }

/* ---- 25.10.2026 ~13:45, замечания владельца по снимкам houses-390 и model-d13-390 ---- */
/* плашка — над названием, не на фото: дом в кадре ничем не закрыт; одинаково на плитках и на странице модели */
.tile__head { display: grid; justify-items: start; align-content: start; gap: 6px; }
.tile__head .tile__badge { position: static; display: inline-flex; align-items: center; min-height: 22px; margin: 0; }
/* резерв под плашку — только в ряду, где плашка есть (проверяющий 25.10, п.5): nf4 — ряды по 4 (от 1024 px), nf2 — ряды по 2 (до 1024 px и в PDF); классы ставит flags.align_flags */
@media (min-width: 1024px) { .tile--nf4 .tile__title { margin-top: 28px; } }
@media (max-width: 1023px) { .tile--nf2 .tile__title { margin-top: 28px; } }
/* цена плитки: у всех плиток один порядок — (строка скидки) → цена; строка скидки на всю ширину, края разведены; на телефоне цена — плашка во всю ширину по центру */
.tile__foot { row-gap: var(--s-2); }
.tile__deal { justify-content: space-between; width: 100%; }
@media (max-width: 599px) {
  .tile__foot .tile__price { flex: 1 1 auto; text-align: center; padding: 4px 10px; }
}
/* связь: три мессенджера ровной сеткой, телефон — отдельной строкой-кнопкой на всю ширину; номер не выходит за карточку на любой ширине */
.contact-line--stack .cta__actions, .pg .pdf-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; flex-wrap: nowrap; }
@media (max-width: 599px) { .contact-line .cta__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; flex-wrap: nowrap; } }
.contact-line--stack .cta__actions .msgr, .pg .pdf-actions .msgr { width: auto; min-width: 0; flex: none; }
@media (max-width: 599px) { .contact-line .cta__actions .msgr { width: auto; min-width: 0; flex: none; } }
.contact-line--stack .cta__actions a.cta__phone, .pg .pdf-actions a.cta__phone { grid-column: 1 / -1; justify-content: center; flex: none; min-height: 48px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; white-space: nowrap; }
.contact-line--stack .cta__actions a.cta__phone svg, .pg .pdf-actions a.cta__phone svg { display: inline-block; }
@media (max-width: 599px) { .contact-line .cta__actions a.cta__phone { grid-column: 1 / -1; justify-content: center; flex: none; min-height: 48px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; white-space: nowrap; } .contact-line .cta__actions a.cta__phone svg { display: inline-block; } }
/* «нужен другой размер» — явное действие: подпись и кнопка */
.price__custom { display: grid; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.price__custom p { margin: 0; font-size: var(--t-small); color: var(--ink-70); }
.price__custom .btn { width: 100%; min-height: 48px; }
/* помещения чипами вместо строки с площадями */
.rooms { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.rooms li { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font-size: 14px; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--ink-70); white-space: nowrap; }
.rooms b { color: var(--ink); font-weight: 700; }
.pdf-addons small { color: var(--ink-70); font-weight: 400; } .pdf-addons dd { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .pdf-addnote { margin: 6px 0 0; font-size: 13px; color: var(--ink-70); }
.pdf-addons { display: grid; gap: 6px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pdf-addons .price__rows-title { margin: 0 0 2px; font-weight: 700; }
.pdf-addons .price__row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: 14px; } .pdf-addons .price__row span:last-child { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.model-head .tile__badge { justify-self: start; width: fit-content; }

/* 25.10.2026, SEO: одна строка про регион под комплектацией модели */
.model__region { margin: var(--s-4) 0 0; color: var(--ink-70); font-size: var(--t-small); }

/* ===== 25.10.2026 ~16:40, замечания владельца с iPhone: числа и цены ===== */
/* Правило одно на весь каталог: значение (цена, размер) — в своём столбце или на своей строке, прижато влево, не рвётся (неразрывные пробелы в числе, цифры одной ширины); «·» и «+» не остаются в начале строки. */
.addon__meta { display: grid; gap: 2px; }
.addon__price { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price__row, .pdf-addons .price__row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; justify-content: normal; align-items: baseline; }
.price__row > :last-child, .pdf-addons .price__row span:last-child { white-space: nowrap; text-align: left; font-variant-numeric: tabular-nums; }
.sizes__row { grid-template-columns: minmax(7rem, auto) 7.5rem 1fr; }
.sizes__dim { grid-column: 1; grid-row: 1; } .sizes__sum { grid-column: 2; grid-row: 1; text-align: left; } .sizes__use { grid-column: 3; grid-row: 1; margin-top: 0; }
@media (max-width: 599px) {
  .sizes__row { grid-template-columns: minmax(6.5rem, auto) 1fr; }
  .sizes__sum { grid-column: 2; grid-row: 1; align-self: baseline; } .sizes__use { grid-column: 1 / -1; grid-row: 2; margin-top: -4px; }
  .fact, .model .fact { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); justify-content: start; align-items: baseline; }
  .fact strong { text-align: left; }
}
h1, h2, .model-title, .tile__title { text-wrap: balance; }

/* 20261025-legal: плашка cookie, юридические страницы, ссылка в подвале */
.foot__legal { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--s-2); font-size: 13px; line-height: 1.3; color: var(--ink-70); text-decoration: underline; text-underline-offset: 3px; }
.foot__legal:hover { color: var(--ink); }
.cc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: min(100% - var(--s-4) * 2, 860px); margin: 0 auto var(--s-3); margin-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); padding: var(--s-3) var(--s-4); background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: 0 0 0 1px rgba(32, 39, 42, .04); }
.cc__text { margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--t-small); line-height: 1.4; text-wrap: pretty; }
.cc__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cc__btn { flex: none; min-height: 48px; min-width: 104px; padding: 0 var(--s-6); border: 1.5px solid var(--ink); border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition-property: background-color, transform; transition-duration: var(--dur); transition-timing-function: var(--ease); }
.cc__btn:hover { background: #000; }
.cc__btn:active { transform: scale(.98); }
@media (max-width: 479px) { .cc { gap: var(--s-3); padding: var(--s-3); } .cc__text { font-size: 13px; } .cc__btn { min-width: 96px; padding: 0 var(--s-4); } }
@media print { .cc { display: none; } }
.legal__date { margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-70); }
.legal__body { max-width: 760px; margin-top: var(--s-6); display: grid; gap: var(--s-8); }
.legal__sec { display: grid; gap: var(--s-3); }
.legal__sec h2 { font-size: var(--t-h2); }
.legal__sec p { margin: 0; line-height: 1.5; }
.legal__list { margin: 0; padding-left: 1.25em; display: grid; gap: var(--s-2); line-height: 1.5; }
.legal__card { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.legal__dl { margin: 0; display: grid; gap: var(--s-3); }
.legal__dl > div { display: grid; grid-template-columns: 9.5em 1fr; gap: var(--s-1) var(--s-4); }
.legal__dl dt { font-weight: 700; }
.legal__dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.legal code { font-family: var(--mono); font-size: .92em; }
.legal a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 599px) { .legal__dl > div { grid-template-columns: 1fr; } }

.model-gallery { min-width: 0; }
.model-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r); }
.model-gallery__track::-webkit-scrollbar { display: none; }
.model-gallery__track > a { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.model-gallery__track img { object-fit: contain; }
.model-gallery__controls { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding-top: var(--s-2); font-variant-numeric: tabular-nums; }
.model-gallery__controls button { width: 44px; height: 44px; color: var(--ink); border: 1px solid var(--line); background: var(--paper); cursor: pointer; }
.photo--plan { aspect-ratio: auto; }
.photo--plan img { height: auto; object-fit: contain; }
.plan-public-label { margin-top: var(--s-2); color: var(--ink-70); font-size: var(--t-small); }

/* Store wordmark: existing Golos, optical tracking, clear hierarchy. */
.site__brand { font-family: var(--font); font-size: 21px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; text-transform: none; }
@media (max-width: 599px) { .site__brand { font-size: 19px; } }