@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;700&family=PT+Mono&display=swap');

:root {
  --paper: #f4f0e7;
  --ink: #20272a;
  --green: #26463a;
  --red: #c84732;
  --signal: #e5bd3b;
  --wood: #b58a5b;
  --mist: #d9dfda;
  --line: rgba(32, 39, 42, 0.32);
  --line-soft: rgba(32, 39, 42, 0.16);
  --font-heading: "Golos Text", Arial, sans-serif;
  --font-body: "Golos Text", Arial, sans-serif;
  --font-mono: "PT Mono", "SFMono-Regular", Consolas, monospace;
  --font-utility: var(--font-mono);
  --sans: var(--font-body);
  --mono: var(--font-utility);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Token contract 31.08.2026 — five sizes for the whole catalogue.
     14px at 680px = 180mm is the 10.5pt print floor: never go under it. */
  --t-display: 34px;
  --t-price: 32px;
  --t-lead: 15px;
  --t-body: 14px;
  --t-micro: 11px;
  --lh-display: 0.98;
  --lh-lead: 1.35;
  --lh-body: 1.5;
  --lh-micro: 1.2;
  --ls-display: -0.02em;
  --ls-micro: 0.09em;
  --page-pad-x: 28px;
  --page-pad-t: 22px;
  --page-pad-b: 24px;

  --type-cover-title: clamp(48px, 6.7vw, 58px);
  --type-category-title: clamp(34px, 4.6vw, 40px);
  --type-model-title: clamp(30px, 4.2vw, 36px);
  --type-title-long: clamp(28px, 3.9vw, 32px);
  --type-lead: clamp(12px, 0.94vw, 13px);
  --type-body: clamp(11px, 0.82vw, 12px);
  --type-secondary: clamp(10px, 0.72vw, 11px);
  --type-label: var(--t-micro);
  --type-price: clamp(28px, 3.2vw, 34px);
  --type-compact-price: clamp(10.5px, 0.82vw, 12px);
  --type-support-title: clamp(17px, 1.75vw, 19px);
  --type-button: clamp(10px, 0.88vw, 12px);
  --type-mobile-title: 32px;
  --type-mobile-title-long: 28px;
  --type-mobile-support-title: 20px;
  --type-mobile-body: 17px;
  --type-mobile-secondary: 15px;
  --type-mobile-label: 12px;
  --type-mobile-price: 36px;
  --leading-display: 0.98;
  --leading-title: 1.02;
  --leading-body: 1.45;
  --leading-list: 1.32;
  --leading-offer: 1.32;
  --leading-secondary: 1.38;
  --leading-label: 1.2;
  --leading-support: 1.12;
  --tracking-display: -0.025em;
  --tracking-tight: -0.02em;
  --tracking-utility: 0.035em;

  --page-gutter: clamp(16px, 4.5vw, 32px);
  --page-padding-top: clamp(24px, 4.5vw, 32px);
  --page-padding-bottom: clamp(16px, 3.6vw, 24px);
  --rail-width: clamp(20px, 3.6vw, 24px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  background: var(--mist);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
a { color: inherit; touch-action: manipulation; }
a:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.skip-link {
  position: fixed;
  z-index: 20;
  top: 10px;
  left: 10px;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  color: var(--paper);
  background: var(--green);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-3);
  clip-path: none;
}

.catalog {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-4) 0;
  min-width: 0;
}
.catalog-page {
  position: relative;
  width: min(calc(100% - var(--space-6)), 680px);
  min-width: 0;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 18px 40px rgba(32, 39, 42, 0.12);
  isolation: isolate;
}
.page-inner {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  padding: var(--page-pad-t) var(--page-pad-x) var(--page-pad-b);
}
.page-rail {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--rail-width);
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--space-5);
  color: var(--paper);
  background: var(--red);
  font-family: var(--font-utility);
  font-size: var(--type-label);
  font-weight: 400;
  letter-spacing: var(--tracking-utility);
  writing-mode: vertical-rl;
  text-transform: uppercase;
}
.page-rail--model { background: var(--red); }
.page-topline,
.model-nav__heading,
.conditions-heading,
.selector-intro,
.category-intro,
.model-heading,
.materials-heading,
.custom-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.page-topline {
  flex: 0 0 auto;
  align-items: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-label);
  line-height: 1;
  letter-spacing: var(--tracking-utility);
}
.brand-name { font-weight: 700; }
.page-number { color: var(--green); font-family: var(--font-utility); font-weight: 400; }
.eyebrow,
.cover-kicker,
.section-label,
.model-nav__heading,
.mini-photo__mark {
  color: var(--green);
  font-family: var(--font-utility);
  font-size: var(--type-label);
  font-weight: 400;
  letter-spacing: var(--tracking-utility);
  text-transform: uppercase;
}
.contact-panel__title {
  color: var(--green);
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 700;
  line-height: var(--leading-label);
  text-transform: uppercase;
}
.section-label { margin: 0; }
.cover-title,
.page-title {
  font-family: var(--font-heading);
  margin: 0;
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  text-wrap: balance;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
  text-transform: uppercase;
}
.page-title { margin-top: var(--space-2); font-size: var(--type-category-title); }
.cover-title { font-size: var(--type-cover-title); }
.page-title.title--long { font-size: var(--type-title-long); }
.page-family .model-heading .page-title { font-size: var(--type-model-title); }
.page-family .model-heading .page-title.title--long { font-size: var(--type-title-long); }
.cover-lede { max-width: 42ch; margin: var(--space-3) 0 0; font-size: var(--type-lead); line-height: var(--leading-secondary); }

.photo-slot {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  overflow: hidden;
  margin: 0;
  color: var(--paper);
  background: var(--wood);
}
.photo-slot--4x3 { aspect-ratio: 4 / 3; }
.photo-slot__media { position: absolute; inset: 0; }
.photo-slot__media { overflow: hidden; }
.photo-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.trust-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--ink);
}
.trust-line strong { color: var(--red); font-size: var(--type-support-title); letter-spacing: var(--tracking-tight); }
.trust-line span { color: var(--green); font-size: var(--type-secondary); }
.trust-line b { color: var(--red); }
.cover-facts { border-bottom: 1px solid var(--line); }
.fact-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--type-body);
}
.fact-row:last-child { border-bottom: 0; }
.fact-row strong { color: var(--green); font-weight: 700; }
.page-cover .cover-kicker { margin-top: var(--space-4); }
/* A 4:3 frame that cannot be squashed has to be sized by width; 260px is the
   largest that still leaves the cover its lower half. */
.cover-photo { width: 470px; margin-top: var(--space-4); margin-left: auto; }
.page-cover .page-inner { justify-content: space-between; }
.cover-custom {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(190px, 0.9fr);
  gap: var(--space-4);
  align-items: end;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 2px solid var(--red);
}
.cover-custom__copy { min-width: 0; }
.cover-custom__copy p:not(.section-label) { margin: var(--space-2) 0 0; font-size: var(--type-secondary); line-height: var(--leading-secondary); }
.not-found-label { display: inline-flex; padding: var(--space-1) var(--space-2); color: var(--ink); background: var(--signal); font-size: var(--type-label); line-height: var(--leading-label); }

.contact-panel { display: grid; min-width: 0; gap: var(--space-2); }
.contact-panel__title { margin: 0; }
.messenger-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); min-width: 0; }
.messenger-button {
  display: flex;
  min-width: 0;
  min-height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--paper);
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.messenger-button:hover,
.action:hover { transform: translateY(-2px); }
/* Twenty pages of green/black/blue chips read as noise; the mark alone is
   enough to recognise the channel. */
.messenger-button--whatsapp,
.messenger-button--telegram,
.messenger-button--max { color: var(--ink); background: var(--paper); border-color: var(--line); }
.messenger-button:focus-visible,
.action:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.messenger-button__logo { display: inline-flex; width: 19px; height: 19px; align-items: center; justify-content: center; flex: 0 0 auto; }
.messenger-button__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.messenger-button--max .messenger-button__logo { width: 19px; height: 19px; }
.messenger-button--max .messenger-button__logo img { object-fit: contain; }
.messenger-button__label { max-width: 100%; }
.phone-action {
  width: 100%;
  justify-content: space-between;
  color: var(--paper);
  background: var(--red);
  border-color: var(--red);
}
.phone-action:hover { color: var(--paper); background: var(--green); border-color: var(--green); }
.phone-action__label { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-2); }
.phone-action__icon { width: 14px; height: 14px; flex: 0 0 auto; }
.phone-action__number { font-size: var(--type-secondary); font-weight: 400; white-space: nowrap; }
.action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: var(--type-button);
  font-weight: 700;
  line-height: 1.05;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.selector-intro,
.conditions-heading,
.materials-heading,
.custom-heading { margin-top: var(--space-5); }
.selector-intro > p,
.conditions-heading > p,
.materials-heading > p,
.custom-heading > p { max-width: 30ch; margin: 0 0 var(--space-1); color: var(--green); font-size: var(--type-lead); }
.scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-5); }
.scenario { min-width: 0; min-height: 255px; padding: var(--space-3); border-top: 3px solid var(--ink); }
.scenario--storage { color: var(--paper); background: var(--green); border-color: var(--green); }
.scenario--living { background: var(--wood); border-color: var(--red); }
.scenario--house { background: #dfe5de; border-color: var(--red); }
.scenario__number { font-family: var(--font-utility); font-size: var(--type-label); font-weight: 400; opacity: 0.72; }
.scenario h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--type-support-title); letter-spacing: var(--tracking-tight); line-height: var(--leading-display); }
.scenario p { min-height: 70px; margin: 0 0 var(--space-3); font-size: var(--type-secondary); line-height: var(--leading-secondary); }
.scenario a { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--space-1); align-items: center; min-height: 36px; padding: var(--space-2) 0; border-top: 1px solid currentColor; font-size: var(--type-secondary); text-decoration: none; }
.scenario a span { font-weight: 400; }
.scenario a b { font-size: var(--type-support-title); font-weight: 400; }
.selector-footer { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: auto; padding-top: var(--space-3); border-top: 2px solid var(--red); }
.selector-footer p:not(.section-label) { margin: var(--space-1) 0 0; color: var(--green); font-size: var(--type-secondary); }

.conditions-price { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--space-5); align-items: center; margin-top: var(--space-5); padding: var(--space-4); color: var(--paper); background: var(--red); }
.conditions-price__big { font-family: var(--font-heading); font-size: var(--type-price); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: 0; line-height: 1; }
.conditions-price p { margin: var(--space-1) 0 0; font-size: var(--type-secondary); }
.conditions-price .section-label { color: var(--paper); }
.conditions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--space-4); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.condition-card { padding: var(--space-3) var(--space-2); border-right: 1px solid var(--line-soft); }
.condition-card:last-child { border-right: 0; }
.condition-card > span { display: block; color: var(--red); font-family: var(--font-utility); font-size: var(--type-label); font-weight: 400; }
.condition-card strong { display: block; margin-top: var(--space-2); font-size: var(--type-body); line-height: var(--leading-title); }
.condition-card p { margin: var(--space-2) 0 0; color: var(--green); font-size: var(--type-secondary); }
.conditions-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.conditions-facts > div { padding-top: var(--space-2); border-top: 2px solid var(--green); }
.conditions-facts h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--type-support-title); letter-spacing: var(--tracking-tight); line-height: 1; }
.conditions-facts h3.price-note { letter-spacing: 0; }
.price-note {
  color: var(--ink);
  font-family: var(--font-heading);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
}
.conditions-facts p:not(.section-label) { margin: 0; color: var(--green); font-size: var(--type-secondary); }
.conditions-note { margin-top: auto; padding-top: var(--space-3); border-top: 2px solid var(--red); }
.conditions-note p:not(.section-label) { margin: var(--space-1) 0 0; color: var(--green); font-size: var(--type-secondary); }

.category-intro { margin-top: var(--space-4); }
.intro-note,
.model-use { margin: 0 0 var(--space-1); color: var(--green); font-size: var(--type-lead); line-height: var(--leading-secondary); }
.category-proof { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(120px, 0.8fr); gap: var(--space-4); margin-top: var(--space-3); }
.category-photo { width: 100%; }
.proof-notes { display: grid; align-content: start; gap: var(--space-2); }
.proof-note { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line-soft); }
.proof-note p { margin: 0; font-size: var(--type-secondary); line-height: var(--leading-secondary); }
.proof-mark { display: inline-flex; width: 21px; height: 21px; align-items: center; justify-content: center; color: var(--paper); background: var(--green); font-family: var(--font-utility); font-size: var(--type-label); font-weight: 400; }
.category-base { margin-top: var(--space-3); }
.category-base .plain-list { columns: 2; column-gap: var(--space-5); }
.plain-list { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.plain-list li { break-inside: avoid; padding: var(--space-1) 0 var(--space-1) var(--space-3); border-bottom: 1px solid var(--line-soft); font-size: var(--type-body); line-height: var(--leading-secondary); }
.plain-list li::before { content: "—"; margin-left: calc(-1 * var(--space-3)); color: var(--red); }
.model-nav { margin-top: var(--space-3); }
.model-nav__heading { align-items: center; padding-bottom: var(--space-2); border-bottom: 1px solid var(--ink); }
.model-row { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--space-2); align-items: center; min-height: 36px; padding: var(--space-1) 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; }
.model-row:hover { color: var(--red); }
.model-row--active { color: var(--red); }
.model-code { font-family: var(--font-utility); font-weight: 400; }
.model-row__body { display: flex; min-width: 0; align-items: baseline; gap: var(--space-2); }
.model-row__body strong { font-size: var(--type-body); }
.model-row__body small { color: var(--green); font-size: var(--type-secondary); }
.model-row__arrow { font-size: var(--type-support-title); font-weight: 400; }
.custom-calc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(170px, 0.8fr); gap: var(--space-4); align-items: end; margin-top: auto; padding-top: var(--space-2); border-top: 2px solid var(--red); }
.custom-calc h3 { margin: var(--space-1) 0; font-size: var(--type-support-title); letter-spacing: var(--tracking-tight); line-height: var(--leading-display); }
.custom-calc p:not(.section-label) { margin: 0; font-size: var(--type-secondary); line-height: var(--leading-secondary); }
.custom-calc__actions { min-width: 0; }

.model-heading { margin-top: var(--space-4); }
.model-photo,
.family-photo { width: 100%; margin-top: var(--space-3); background: var(--mist); }
.model-photo .photo-image,
.family-photo .photo-image,
.cover-photo .photo-image,
.category-photo .photo-image,
.material-photo .photo-image {
  object-fit: contain;
  object-position: center center;
}
.model-offer { display: grid; grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.28fr); gap: var(--space-4); margin-top: var(--space-3); }
.price-rail { display: grid; align-content: start; gap: 0; color: var(--paper); background: var(--red); }
.price-entry { display: grid; gap: var(--space-1); padding: var(--space-3); border-bottom: 1px solid rgba(244, 240, 231, 0.45); }
.price-entry:last-child { border-bottom: 0; }
.price-entry span { font-family: var(--font-utility); font-size: var(--type-label); font-weight: 400; line-height: var(--leading-label); }
.price-entry strong { font-family: var(--font-heading); font-size: var(--type-price); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: 0; line-height: 1; white-space: nowrap; }
.price-entry--secondary strong { font-size: var(--type-price); }
.offer-copy h3,
.model-cta h3 { margin: var(--space-1) 0; font-size: var(--type-support-title); letter-spacing: var(--tracking-tight); line-height: var(--leading-support); }
.offer-copy p:not(.section-label) { margin: 0; font-size: var(--type-body); line-height: var(--leading-offer); }
.included-note { margin-top: var(--space-3) !important; padding-top: var(--space-2); border-top: 1px solid var(--line-soft); color: var(--green); font-size: var(--type-body) !important; line-height: var(--leading-offer) !important; }
.model-detail-grid,
.family-lower { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(120px, 0.88fr); gap: var(--space-4); margin-top: var(--space-3); }
.model-list { margin-top: var(--space-2); }
.model-list li { padding: var(--space-1) 0 var(--space-1) var(--space-3); font-size: var(--type-body); line-height: var(--leading-list); }
.base-spec > p:not(.section-label) { margin: var(--space-2) 0 0; color: var(--green); font-size: var(--type-secondary); line-height: var(--leading-secondary); }
.base-spec__note { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-3); color: var(--green); font-size: var(--type-secondary); line-height: var(--leading-secondary); }
.proof-icon { width: 25px; height: 25px; flex: 0 0 auto; padding: var(--space-1); color: var(--green); border: 1px solid var(--green); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.model-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; min-width: 0; margin-top: auto; padding-top: var(--space-3); border-top: 2px solid var(--red); }
.model-cta__step,
.model-cta__contact { min-width: 0; }
.model-cta__contact { align-content: start; }
.model-cta h3 { color: var(--ink); }
.model-cta p:not(.section-label) { margin: 0; color: var(--green); font-size: var(--type-secondary); line-height: var(--leading-secondary); }
.model-cta .price-note { font-weight: 700; }
.contact-panel--compact .messenger-button,
.contact-panel--compact .phone-action { min-height: 48px; }

/* Family pages keep the older two-column hero until their own stage. */
.page-family .page-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-rows: auto auto auto auto minmax(min-content, 1fr) auto;
  align-content: stretch;
  column-gap: var(--space-4);
}
.page-family .page-topline,
.page-family .model-heading,
.page-family .family-lower,
.page-family .model-cta { grid-column: 1 / -1; }
.page-family .model-heading { grid-row: 2; }
.page-family .family-photo {
  grid-column: 1;
  grid-row: 3 / span 2;
  align-self: start;
  width: 100%;
  margin-top: var(--space-3);
}
.page-family .family-lower { grid-row: 5; align-self: start; }
.page-family .model-cta { grid-row: 6; }
.page-family .family-intro {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.page-family .size-section {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: var(--space-3);
}
.page-family .family-photo { grid-row: 3; }
.page-family .family-photo { min-height: clamp(200px, 34vw, 244px); }
.page-family .family-lower { margin-top: var(--space-3); }

.family-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-3); }
.family-intro p:not(.section-label) { margin: var(--space-1) 0 0; color: var(--green); font-size: var(--type-secondary); line-height: var(--leading-secondary); }
.size-section { margin-top: var(--space-3); }
.size-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.size-card { display: grid; grid-column: span 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px minmax(42px, 1fr) auto; gap: var(--space-1); min-width: 0; height: 100%; align-content: stretch; padding: var(--space-2); border-top: 2px solid var(--green); background: #e5e9e2; }
.size-visual { position: relative; display: flex; min-height: 0; height: 52px; align-items: center; justify-content: center; padding: 0; border-bottom: 1px solid var(--line-soft); }
.size-sticker--front-master {
  display: block;
  width: calc(52px * var(--size-scale, 1));
  height: auto;
  max-height: 48px;
  object-fit: contain;
  object-position: center bottom;
  border: 0;
  box-shadow: none;
  max-width: 100%;
  transform: none;
}
.size-card__copy { display: grid; gap: var(--space-1); min-width: 0; }
.size-card__copy strong { color: var(--ink); font-size: clamp(14px, 1.05vw, 16px); font-weight: 700; line-height: 1.1; }
.size-card__copy small { color: var(--green); font-size: var(--type-body); line-height: var(--leading-secondary); }
.size-price { align-self: end; color: var(--red); font-family: var(--font-heading); font-size: clamp(14px, 1.05vw, 16px); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; line-height: 1.1; white-space: nowrap; }
.size-note { margin: var(--space-2) 0 0; color: var(--green); font-size: var(--type-secondary); line-height: var(--leading-secondary); }
.family-lower { margin-top: var(--space-3); }
.page-family .size-card:nth-child(5):nth-last-child(3) { grid-column: 2 / span 2; }

@media (min-width: 601px) {
  .page-family .size-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .page-family .model-differences .model-list {
    columns: 2;
    column-gap: var(--space-4);
  }
  .page-family .model-differences .model-list li { break-inside: avoid; }
}
.model-list--tight li { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.page-family .model-cta { margin-top: auto; }

/* The category page needs its last, actionable block inside the printed sheet. */
@media (min-width: 601px) {
  .page-category .category-proof { margin-top: var(--space-3); }
  .page-category .category-base { margin-top: var(--space-2); }
  .page-category .plain-list li { padding-top: var(--space-1); padding-bottom: var(--space-1); }
  .page-category .model-row { min-height: 36px; padding-top: var(--space-1); padding-bottom: var(--space-1); }
  .page-category .custom-calc { padding-top: var(--space-2); }
}

.materials-heading > p { max-width: 35ch; }
.material-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-4); }
.material-card { min-width: 0; }
.material-photo { width: 100%; }
.material-card > p { margin: var(--space-2) 0 0; color: var(--green); font-size: var(--type-secondary); line-height: var(--leading-secondary); }
.material-card > p strong { color: var(--ink); }
.process-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-5); margin-top: auto; padding-top: var(--space-3); border-top: 2px solid var(--red); }
.process-list { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; counter-reset: process; }
.process-list li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-2); color: var(--green); font-size: var(--type-body); line-height: var(--leading-body); }
.process-list li::before { counter-increment: process; content: counter(process, decimal-leading-zero); color: var(--red); font-family: var(--font-utility); font-weight: 400; }
.process-grid section > p:not(.section-label) { margin: var(--space-2) 0 0; color: var(--green); font-size: var(--type-body); line-height: var(--leading-body); }
.process-note { padding-top: var(--space-2); border-top: 1px solid var(--line-soft); }

.custom-path { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(190px, 0.85fr); gap: var(--space-5); align-items: start; margin-top: var(--space-5); }
.custom-path__copy { min-width: 0; }
.custom-path h3 { margin: var(--space-2) 0; font-size: var(--type-category-title); letter-spacing: var(--tracking-display); line-height: var(--leading-display); }
.custom-path__copy > p:not(.section-label) { margin: 0; color: var(--green); font-size: var(--type-body); line-height: var(--leading-body); }
.prompt-box { margin-top: var(--space-4); padding: var(--space-3); color: var(--paper); background: var(--green); }
.prompt-box span { font-family: var(--font-utility); font-size: var(--type-label); font-weight: 400; }
.prompt-box p { margin: var(--space-2) 0 0; font-size: var(--type-body); line-height: var(--leading-body); }
.custom-path__actions { min-width: 0; padding: var(--space-3); border-top: 3px solid var(--red); background: #e1e7e1; }
.custom-path__actions .messenger-button { min-height: 58px; }
.custom-path__actions .messenger-button__logo { width: 27px; height: 27px; }
.custom-path__actions .messenger-button--max .messenger-button__logo { width: 27px; height: 27px; }
.custom-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: auto; padding-top: var(--space-3); border-top: 2px solid var(--red); }
.custom-bottom p:not(.section-label) { margin: var(--space-2) 0 0; color: var(--green); font-size: var(--type-secondary); line-height: var(--leading-secondary); }

/* Лили — прозрачная композиционная метка: тот же атласный силуэт, без собственной подложки. */
.lili-image {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.condition-fact--payment {
  position: relative;
  min-height: 82px;
  padding-right: var(--space-6);
}
.lili-image--conditions {
  position: absolute;
  right: -2px;
  bottom: -2px;
  height: clamp(69px, 9.3vw, 82px);
}
.page-custom .custom-path,
.page-custom .custom-bottom { position: relative; z-index: 1; }
.lili-final-anchor { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.lili-image--final { height: clamp(84px, 11vw, 96px); }

@media screen and (max-width: 700px) {
  :root {
    --type-cover-title: var(--type-mobile-title);
    --type-category-title: var(--type-mobile-title);
    --type-model-title: var(--type-mobile-title);
    --type-title-long: var(--type-mobile-title-long);
    --type-lead: var(--type-mobile-body);
    --type-body: var(--type-mobile-body);
    --type-secondary: var(--type-mobile-secondary);
    --type-label: var(--type-mobile-label);
    --type-price: var(--type-mobile-price);
    --type-compact-price: var(--type-mobile-secondary);
    --type-support-title: var(--type-mobile-support-title);
    --type-button: var(--type-mobile-label);
  }
  /* Every ordinary model follows the same phone reading order: photo, facts, price, composition, contact. */
  .page-family .page-inner { display: flex; flex-direction: column; }
  .page-inner { padding-right: var(--page-gutter); }
  /* Полоса-корешок на телефоне скрыта. Пробовали вернуть 31.08.2026 дважды:
     абсолютной полоской сбоку — вылезала зелёным столбом в Safari; полосой
     в потоке сверху — работала, но владелец снял её как лишнюю нагрузку
     на экран. Раздел на телефоне виден по заголовку полосы. */
  .page-rail { display: none; }
  .page-family .page-title { text-transform: none; }
  .conditions-heading,
  .selector-intro,
  .category-intro,
  .materials-heading,
  .custom-heading { display: block; }
  .conditions-heading > p,
  .selector-intro > p,
  .category-intro > p,
  .materials-heading > p,
  .custom-heading > p { margin-top: var(--space-3); }
  .conditions-heading > *,
  .selector-intro > *,
  .category-intro > *,
  .materials-heading > *,
  .custom-heading > * { min-width: 0; }
  .page-topline { gap: var(--space-2); }
  .category-proof,
  .model-offer,
  .model-detail-grid,
  .family-lower,
  .custom-path,
  .conditions-price { grid-template-columns: 1fr; }
  .category-proof { gap: var(--space-3); }
  .proof-notes { grid-template-columns: 1fr 1fr; }
  .model-offer { gap: var(--space-3); }
  .model-cta,
  .custom-calc { grid-template-columns: 1fr; gap: var(--space-3); }
  .model-cta { margin-top: var(--space-3); }
  .cover-custom { grid-template-columns: 1fr; gap: var(--space-3); }
  .cover-photo { width: 100%; }
  .scenario-grid { grid-template-columns: 1fr; gap: var(--space-2); overflow: visible; }
  .scenario { min-height: 0; padding: var(--space-3); }
  .scenario h3 { margin-top: var(--space-3); }
  .scenario p { min-height: 0; }
  .scenario a { min-height: 48px; }
  .selector-footer,
  .conditions-grid,
  .conditions-facts,
  .family-intro,
  .page-family .family-intro,
  .process-grid,
  .custom-bottom { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .conditions-grid { grid-template-columns: 1fr 1fr; }
  .conditions-facts { grid-template-columns: 1fr 1fr; }
  .material-grid { grid-template-columns: 1fr 1fr; }
  .size-grid,
  .page-family .size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-family .size-grid { grid-auto-rows: 1fr; gap: var(--space-3); }
  .page-family .size-card,
  .page-family .size-card:nth-child(5):nth-last-child(3) {
    grid-column: auto;
    grid-template-rows: 64px minmax(54px, 1fr) auto;
    min-height: 180px;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .page-family .size-card:nth-child(7):last-child { grid-column: 1 / -1; }
  .page-family .size-visual { height: 64px; }
  .page-family .size-sticker--front-master { width: calc(66px * var(--size-scale, 1)); max-height: 60px; }
  .page-family .size-card__copy { gap: var(--space-1); }
  .page-family .size-card__copy strong { font-size: 19px; }
  .page-family .size-card__copy small { font-size: var(--type-mobile-secondary); line-height: var(--leading-secondary); }
  .page-family .size-price { font-size: 20px; }
  .category-base .plain-list { columns: 1; }
  .model-row__body { display: grid; gap: var(--space-1); }
  .custom-path__actions { order: -1; }
  .page-family .family-photo { width: 100%; margin-top: var(--space-3); }
  .page-family .family-intro,
  .page-family .size-section,
  .page-family .family-lower,
  .page-family .model-cta { grid-column: auto; grid-row: auto; }
  .page-family .family-intro { display: grid; grid-template-columns: 1fr 1fr; }
  .page-family .size-section { margin-top: var(--space-3); }
  .page-family .model-heading { display: block; }
  .page-family .model-heading .page-title { font-size: var(--type-mobile-title); line-height: var(--leading-title); }
  .page-family .model-heading .page-title.title--long { font-size: var(--type-mobile-title-long); }
  .page-family .model-use { font-size: var(--type-mobile-body); line-height: var(--leading-body); }
  .page-family .model-cta p:not(.section-label),
  .page-family .family-intro p:not(.section-label),
  .page-family .base-spec > p:not(.section-label) { font-size: var(--type-mobile-body); line-height: var(--leading-body); }
  .page-family .model-list li { padding-top: var(--space-2); padding-bottom: var(--space-2); font-size: var(--type-mobile-body); line-height: var(--leading-body); }
  .page-family .base-spec__note { font-size: var(--type-mobile-secondary); line-height: var(--leading-secondary); }
  .page-family .section-label,
  .page-family .contact-panel__title { font-size: var(--type-mobile-label); }
  .page-family .messenger-button { font-size: var(--type-mobile-label); }
  .condition-fact--payment { min-height: 78px; padding-right: var(--space-6); }
  .lili-image--conditions { right: 0; bottom: -3px; height: 64px; }
  .lili-final-anchor { margin-top: var(--space-2); }
  .lili-image--final { height: 76px; }
}

@media screen and (max-width: 700px) {
  /* On a phone the printed 3:4 sheet becomes a readable scrollable sheet instead of clipping its lower CTA. */
  .catalog-page {
    height: auto;
    min-height: calc((100vw - var(--space-6)) * 1.333333);
    aspect-ratio: auto;
    overflow: visible;
  }
  .catalog-page .page-inner {
    height: auto;
    min-height: calc((100vw - var(--space-6)) * 1.333333);
  }
}

/* 🔴 Граница «это телефон» — 700px, а не 390px.
   До 31.08.2026 здесь стояло max-width: 390px, то есть ширина iPhone 12/13/14.
   Любой телефон шире 390 — все айфоны с 2022 года, половина андроидов, и главное
   встроенные окна Авито, WhatsApp и Telegram, где идёт 85% трафика — в это
   правило не попадал и получал компьютерный макет, сжатый в телефон:
   колонка уезжала вправо на 10px, блоки оставались в две колонки по 17 знаков
   в строке. Замер по ширинам 320…700px подряд: до правки дефекты на 17 полосах
   из 20 начиная с 391px, после — ноль на всех ширинах.
   Под конкретное устройство не подгонять: границу держать заведомо шире
   любого телефона. ------------------------------------------------------- */
@media screen and (max-width: 700px) {
  .page-inner { padding-left: var(--space-4); padding-right: var(--space-4); }
  .page-title { font-size: var(--type-mobile-title); }
  .cover-title { font-size: var(--type-cover-title); }
  .scenario { min-height: 0; }
  .proof-notes { grid-template-columns: 1fr; }
  .model-offer { grid-template-columns: 1fr; }
  .selector-footer,
  .conditions-facts,
  .process-grid,
  .custom-bottom { grid-template-columns: 1fr; }
  .condition-fact--payment { min-height: 72px; padding-right: var(--space-6); }
  .lili-image--conditions { height: 58px; }
  .lili-image--final { height: 68px; }
}

@media (max-width: 240px) {
  :root {
    --type-cover-title: 28px;
    --type-mobile-title: 18px;
    --type-mobile-title-long: 17px;
    --type-mobile-support-title: 18px;
    --type-mobile-price: 28px;
  }
  .catalog-page { width: 100%; }
  .page-inner { padding-left: var(--space-3); padding-right: var(--space-3); }
  .trust-line,
  .cover-custom,
  .conditions-price,
  .conditions-grid,
  .conditions-facts,
  .family-intro,
  .page-family .family-intro,
  .selector-footer,
  .process-grid,
  .custom-bottom { grid-template-columns: 1fr; }
  .trust-line { display: grid; }
  .conditions-price > *,
  .conditions-heading > *,
  .fact-row > *,
  .model-row > *,
  .scenario a > *,
  .page-inner > *,
  .model-facts > div > *,
  .model-detail-grid > *,
  .model-offer > *,
  .base-spec__note > span { min-width: 0; max-width: 100%; }
  .conditions-price__big { font-size: var(--type-mobile-title-long); }
  .not-found-label { max-width: 100%; white-space: normal; }
  .page-title { font-size: var(--type-mobile-title); }
  .page-title.title--long { font-size: var(--type-mobile-title-long); }
  .cover-title { font-size: var(--type-cover-title); }
  .page-title br { display: block; }
  .fact-row { align-items: flex-start; }
  .fact-row strong { text-align: right; }
  .scenario a { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .messenger-actions { grid-template-columns: 1fr; }
  .phone-action { flex-wrap: wrap; }
  .phone-action__number { white-space: nowrap; }
  .model-list li,
  .model-facts strong,
  .base-spec__note > span { hyphens: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOUNDATION — token contract 31.08.2026.
   Shared components every page of the catalogue builds on: .page-topline,
   .page-title, .page-lead, .photo-frame, .price-block, .contact-strip.
   Five type sizes, two weights, two families. Nothing smaller than 14px for
   reading text: at 680px = 180mm that is the 10.5pt print floor.
   ═════════════════════════════════════════════════════════════════════════ */

/* Line breaking, catalogue-wide. A headline that breaks 9/1 and a paragraph
   with one word alone on the last line are the two things that make set type
   look accidental; balance and pretty fix both without touching the copy. */
h1, h2, h3, h4, h5, h6,
.cover-title, .page-title, .price-block__sum {
  text-wrap: balance;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}
p, li, dd, dt, figcaption, .page-lead {
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: normal;
}
.model-fact strong, .size-card__copy small { hyphens: auto; }
.spec-row dd { hyphens: manual; }

/* One frame for every photograph in the catalogue. The sources are all exactly
   4:3, so a 4:3 frame plus `contain` fills it edge to edge: no crop of the
   building (the owner's rule) and no coloured mat around it. */
.photo-frame {
  position: relative;
  flex: none;
  display: block;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
}
.photo-frame > .photo-slot__media { position: absolute; inset: 0; overflow: hidden; }
.photo-frame .photo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.page-lead {
  margin: var(--space-2) 0 0;
  color: var(--green);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
}

/* The price reads as an estimate a manager can repeat, not as a poster:
   one sum in red, and — where a pile foundation exists — the surcharge and
   the total spelled out underneath so nobody has to do the arithmetic. */
.price-block { display: flex; min-width: 0; flex-direction: column; }
.price-block__main {
  padding: 14px 16px 16px;
  color: var(--paper);
  background: var(--red);
}
.price-block__label {
  display: block;
  margin-bottom: 7px;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
.price-block__sum {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--t-price);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--ls-display);
  line-height: 1;
}
.price-block__sub {
  display: block;
  margin-top: 8px;
  color: var(--paper);
  font-size: var(--t-body);
  line-height: 1.35;
}
.price-block__calc {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 2px solid var(--ink);
}
.price-block__calc-title {
  margin: 0 0 7px;
  color: rgba(32, 39, 42, 0.62);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
.price-block__row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: var(--t-body);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  line-height: 1.3;
}
.price-block__row--total {
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.price-block__plus { color: var(--red); font-weight: 700; white-space: nowrap; }

/* Quiet contact line: seventeen pages carry the four channels without the
   coloured chips that made the sheet blink. */
.contact-strip {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink);
}
.contact-strip p { margin: 0; }
.contact-strip__ask { color: var(--green); font-size: var(--t-body); line-height: 1.35; }
.contact-strip__links { font-size: var(--t-body); font-weight: 700; white-space: nowrap; }
.contact-strip__links a { text-decoration: none; white-space: nowrap; }
.contact-strip__links a:hover { color: var(--red); }
.contact-strip__dot { margin: 0 var(--space-2); color: var(--line); font-weight: 400; }
/* Владелец: номер в тихой строке терялся. Крупнее и жирнее, но строку в
   панель не превращаем — это только для печати/десктопа; кнопки на
   телефоне заведены отдельно, в мобильном блоке в конце файла. */
.contact-strip__phone,
.contact-strip__links > a:not(.contact-strip__ico) {
  font-size: 1.15em;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODEL SHEET — nine pages, one skeleton.
   Bands sit at the same height on every sheet, so flipping from Д-1 to Д-5
   keeps the photo, the price and the first ledger rule in register. That
   register is what lets a buyer compare two models instead of re-reading them.
   ═════════════════════════════════════════════════════════════════════════ */
.page-model .page-inner {
  display: grid;
  /* Fixed bands, not auto ones: a one-line title must not lift the photo,
     or two sheets stop lining up when you flip between them. */
  grid-template-columns: 384px minmax(0, 1fr);
  grid-template-rows: auto 95px 288px 66px minmax(0, 1fr) 52px;
  align-content: stretch;
  column-gap: var(--space-4);
  row-gap: 10px;
}
.page-model .page-topline { grid-column: 1 / -1; grid-row: 1; }
.page-model .model-heading {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 4px;
  margin: 0;
}
.page-model .page-lead { margin: 0; }
.page-model .model-photo { grid-column: 1; grid-row: 3; align-self: start; width: 100%; }
.page-model .price-block { grid-column: 2; grid-row: 3; align-self: center; }
.page-model .model-facts { grid-column: 1 / -1; grid-row: 4; align-content: start; }
.page-model .spec-sheet { grid-column: 1 / -1; grid-row: 5; min-height: 0; }
.page-model .contact-strip { grid-column: 1 / -1; grid-row: 6; }

.page-model .page-title,
.page-model .page-title.title--long {
  margin-top: 0;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* Four numbers a buyer checks first, on one strip, before the full ledger. */
.model-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.model-fact {
  align-content: start;
  min-width: 0;
  padding: 6px var(--space-3) 7px;
  border-right: 1px solid var(--line-soft);
}
.model-fact:first-child { padding-left: 0; }
.model-fact:last-child { padding-right: 0; border-right: 0; }
.model-fact span {
  display: block;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
.model-fact strong {
  display: block;
  margin-top: 3px;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.25;
}

/* The ledger stretches to the contact rule, so no sheet ends in white paper
   and the label column starts at the same x on all nine pages. */
.spec-sheet { display: flex; flex-direction: column; }
.spec-sheet .section-label { flex: 0 0 auto; }
.spec-rows {
  display: grid;
  flex: 1 1 auto;
  grid-auto-rows: min-content;
  align-content: space-between;
  min-height: 0;
  margin: var(--space-2) 0 0;
}
.spec-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
}
.spec-row:first-child { border-top: 1px solid var(--ink); }
.spec-row:last-child { border-bottom: 1px solid var(--ink); }
.spec-row dt {
  color: var(--green);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
}
.spec-row dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 700;
  line-height: var(--lh-body);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

@media screen and (max-width: 700px) {
  /* On a phone the sheet unrolls: photo, price, four numbers, ledger, contact. */
  .page-model .page-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .page-model .price-block { align-self: stretch; }
  .model-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-fact { padding: var(--space-3) var(--space-2); }
  .model-fact:first-child { padding-left: var(--space-2); }
  .model-fact:nth-child(2n) { border-right: 0; }
  .model-fact:nth-child(-n + 2) { border-bottom: 1px solid var(--line-soft); }
  .model-fact span { font-size: var(--type-mobile-label); }
  .model-fact strong { font-size: var(--type-mobile-body); }
  .spec-row { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); padding: var(--space-2) 0; }
  .spec-row dt,
  .spec-row dd { font-size: var(--type-mobile-body); line-height: var(--leading-body); }
  .contact-strip__links { display: flex; flex-wrap: wrap; align-items: baseline; }
  .page-model .page-lead { font-size: var(--type-mobile-body); }
  .price-block__sum { font-size: var(--type-mobile-price); }
  .price-block__sub,
  .price-block__row { font-size: var(--type-mobile-secondary); }
  .contact-strip { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .contact-strip__links { white-space: normal; }
  .contact-strip__ask,
  .contact-strip__links { font-size: var(--type-mobile-secondary); }
}

@media screen and (max-width: 560px) {
  /* A label column on a phone leaves the value a 150px ribbon and the text
     shatters. Below this width the row stacks: label above, value full measure. */
  .spec-row {
    display: block;
    padding: var(--space-3) 0;
  }
  .spec-row dt {
    display: block;
    margin-bottom: 2px;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: var(--type-mobile-label);
    font-weight: 400;
    line-height: var(--lh-micro);
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;
  }
  .spec-row dd { display: block; font-size: var(--type-mobile-body); line-height: var(--leading-body); }
}

@media print {
  @page { size: 180mm 240mm; margin: 0; }
  /* Без этого браузер при печати выбрасывает все заливки и плашки в белое:
     красный ценовой блок и подложки просто исчезают. Playwright это делает
     сам через print_background, но владелец может печатать из браузера. */
  html, body, * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  :root {
    --page-gutter: 24px;
    --page-padding-top: 24px;
    --page-padding-bottom: var(--space-4);
    --rail-width: 20px;
    --type-cover-title: 50px;
    --type-category-title: 35px;
    --type-model-title: 31px;
    --type-title-long: 28px;
    --type-lead: 12px;
    --type-body: 11px;
    --type-secondary: 10px;
    --type-label: var(--t-micro);
    --type-price: 30px;
    --type-compact-price: 11px;
    --type-support-title: 18px;
  }
  html { background: white; }
  body { background: white; font-size: var(--type-body); line-height: var(--leading-body); }
  .skip-link { display: none; }
  .catalog { display: block; padding: 0; }
  .catalog-page {
    width: 180mm;
    height: 240mm;
    aspect-ratio: auto;
    margin: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .catalog-page:last-child { break-after: auto; page-break-after: auto; }
  a { text-decoration: none; }
  .page-category .category-photo {
    height: 200px;
    aspect-ratio: auto;
  }
  .page-category .custom-calc .contact-panel,
  .page-family .model-cta .contact-panel { gap: var(--space-1); }
  .page-category .custom-calc .messenger-actions,
  .page-family .model-cta .messenger-actions { gap: var(--space-1); }
  .page-category .custom-calc .messenger-button,
  .page-family .model-cta .messenger-button {
    min-height: 32px;
    gap: 2px;
    padding: 2px var(--space-1);
  }
  .page-category .custom-calc .messenger-button__logo,
  .page-family .model-cta .messenger-button__logo { width: 14px; height: 12px; }
  .page-category .custom-calc .messenger-button--max .messenger-button__logo,
  .page-family .model-cta .messenger-button--max .messenger-button__logo { width: 12px; height: 12px; }
  .page-category .custom-calc .phone-action,
  .page-family .model-cta .phone-action { min-height: 32px; padding: var(--space-1) var(--space-2); }
  .page-category .page-title { font-size: var(--type-category-title); }
  .page-family .model-use { font-size: var(--type-lead); line-height: var(--leading-secondary); }
  .page-family .model-heading .page-title { font-size: var(--type-model-title); }
  .page-family .model-heading .page-title.title--long { font-size: var(--type-title-long); }
  .page-family .offer-copy h3,
  .page-family .model-cta h3 { font-size: var(--type-support-title); line-height: var(--leading-support); }
  .page-family .model-cta { padding-top: var(--space-1); }
  .page-family .offer-copy p:not(.section-label),
  .page-family .included-note { font-size: var(--type-body) !important; line-height: var(--leading-offer) !important; }
  .page-family .model-list li {
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }
  .page-family .base-spec > p:not(.section-label) { font-size: var(--type-body); line-height: var(--leading-body); }
  .page-family .family-intro p:not(.section-label) { font-size: var(--type-body); line-height: var(--leading-body); }
  .page-family .model-cta h3 { font-size: var(--type-support-title); line-height: var(--leading-support); }
  .page-family .model-cta p:not(.section-label) { font-size: var(--type-body); line-height: var(--leading-body); }
  .page-family .model-cta p.price-note { line-height: var(--leading-label); }
  .page-family .size-grid { grid-auto-rows: 1fr; gap: var(--space-1); }
  .page-family .size-card {
    grid-template-rows: 44px minmax(44px, 1fr) auto;
    min-height: 124px;
    gap: 4px;
    padding: 6px;
  }
  .page-family .size-visual { height: 44px; }
  .page-family .size-sticker--front-master { width: calc(44px * var(--size-scale, 1)); max-height: 40px; }
  .page-family .size-card__copy strong { font-size: 15px; }
  .page-family .size-card__copy small { font-size: 14px; line-height: 1.25; }
  .page-family .size-price { font-size: 15px; }
  .page-family .family-photo {
    width: 90%;
    min-height: 0;
  }
  .page-family:has(.size-card:nth-child(7)) .family-photo {
    width: 72%;
    min-height: 0;
  }
  .page-family:has(.size-card:nth-child(7)) .size-card {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    gap: 3px 5px;
    padding: 4px;
  }
  .page-family:has(.size-card:nth-child(7)) .size-visual {
    grid-column: 1;
    grid-row: 1 / -1;
    height: auto;
    border-right: 1px solid var(--line-soft);
    border-bottom: 0;
  }
  .page-family:has(.size-card:nth-child(7)) .size-sticker--front-master {
    width: 28px;
    max-height: 24px;
  }
  .page-family:has(.size-card:nth-child(7)) .size-card__copy {
    grid-column: 2;
    grid-row: 1;
  }
  .page-family:has(.size-card:nth-child(7)) .size-price {
    grid-column: 2;
    grid-row: 2;
  }
  .page-family:has(.size-card:nth-child(7)) .family-lower {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: var(--space-2);
  }
  .page-family:has(.size-card:nth-child(7)) .model-cta {
    grid-template-columns: minmax(0, 1.7fr) minmax(200px, 0.7fr);
    gap: var(--space-2);
    padding-top: var(--space-1);
  }
  .page-family .family-lower {
    min-height: 0;
  }
  .page-family .base-spec__note { font-size: var(--type-secondary); line-height: var(--leading-secondary); }
  /* The model sheet keeps its screen metrics in print: the sheet IS 680x907. */
  .page-model .page-inner { row-gap: var(--space-3); }
  .page-category .category-photo { height: auto; aspect-ratio: 4 / 3; }
  .lili-image--conditions { height: 20mm; }
  .lili-image--final { height: 24mm; }
}

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


/* ===== stage-editorial ===== */
/* =========================================================================
   Редакционные полосы каталога: 01 обложка, 02 выбор, 03 цена,
   19 материалы, 20 финал.  Пишется против outputs/catalog-token-contract.md.
   Все селекторы начинаются с .page-cover / .page-selector / .page-conditions /
   .page-materials / .page-custom — фрагмент склеивается с чужими без конфликта.
   ========================================================================= */

/* --- Контрактная шкала. Объявляется на самих полосах: значение, заданное на
   элементе, всегда сильнее унаследованного из :root, поэтому фрагмент не
   зависит от того, успел ли фундамент завести те же имена. -------------- */
.page-cover,
.page-selector,
.page-conditions,
.page-materials,
.page-custom {
  --t-display: 34px;
  --t-price: 32px;
  --t-lead: 15px;
  --t-body: 14px;
  --t-micro: 11px;

  /* мост к именам, на которые уже опираются общие компоненты каталога */
  --type-category-title: var(--t-display);
  --type-title-long: var(--t-display);
  --type-model-title: var(--t-display);
  --type-price: var(--t-price);
  --type-lead: var(--t-lead);
  --type-body: var(--t-body);
  --type-secondary: var(--t-body);
  --type-label: var(--t-micro);
  --type-button: var(--t-body);
  --type-compact-price: var(--t-body);
  --type-support-title: 19px;
  --leading-body: 1.5;
  --leading-secondary: 1.45;
  --leading-label: 1.2;
  --tracking-utility: 0.09em;

  font-size: var(--t-body);
  line-height: 1.5;
}

.page-cover .page-inner,
.page-selector .page-inner,
.page-conditions .page-inner,
.page-materials .page-inner,
.page-custom .page-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  font-size: var(--t-body);
  line-height: 1.5;
}

/* Топлайн и вертикальная полоса: контрактные 11px вместо девятки. */
.page-cover .page-topline,
.page-selector .page-topline,
.page-conditions .page-topline,
.page-materials .page-topline,
.page-custom .page-topline {
  margin: 0;
  padding-bottom: 8px;
  font-size: var(--t-micro);
  line-height: 1.2;
}
.page-cover .brand-name,
.page-selector .brand-name,
.page-conditions .brand-name,
.page-materials .brand-name,
.page-custom .brand-name { font-weight: 700; }
.page-cover .page-rail span,
.page-selector .page-rail span,
.page-conditions .page-rail span,
.page-materials .page-rail span,
.page-custom .page-rail span { font-size: var(--t-micro); }

/* Абзацы: перенос по-русски, без разрывов слов. */
.page-cover p,
.page-selector p,
.page-conditions p,
.page-materials p,
.page-custom p,
.page-materials li,
.page-selector a { text-wrap: pretty; overflow-wrap: normal; word-break: normal; }
.page-cover .messenger-button__label,
.page-conditions .messenger-button__label,
.page-custom .messenger-button__label { overflow-wrap: normal; }

/* Заголовочная полоса: H1 слева, единственная строка лида справа. */
.page-selector .selector-intro,
.page-conditions .conditions-heading,
.page-materials .materials-heading,
.page-custom .custom-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 24px;
  align-items: end;
  margin: 0;
}
.page-selector .selector-intro > p,
.page-conditions .conditions-heading > p,
.page-materials .materials-heading > p,
.page-custom .custom-heading > p {
  max-width: none;
  margin: 0;
  font-size: var(--t-lead);
  line-height: 1.35;
}
.page-selector .page-title,
.page-conditions .page-title,
.page-materials .page-title,
.page-custom .page-title { margin-top: 6px; font-size: var(--t-display); }

/* Контактная панель: полная остаётся на 01, 03 и 20. Цветные заливки убраны —
   на печати они бликуют; фирменный цвет уходит в волосяную рамку. У MAX
   логотип белый, поэтому его плашка остаётся тёмной: перекрашивать чужой
   знак нельзя. */
.page-cover .contact-panel__title,
.page-conditions .contact-panel__title,
.page-custom .contact-panel__title { font-size: var(--t-micro); font-weight: 700; }
.page-cover .messenger-button,
.page-conditions .messenger-button,
.page-custom .messenger-button { font-weight: 700; }
.page-cover .messenger-button--whatsapp,
.page-conditions .messenger-button--whatsapp,
.page-custom .messenger-button--whatsapp { background: var(--paper); }
.page-cover .messenger-button--telegram,
.page-conditions .messenger-button--telegram,
.page-custom .messenger-button--telegram { background: var(--paper); }
.page-cover .action,
.page-conditions .action,
.page-custom .action { font-size: var(--t-body); font-weight: 700; }
.page-cover .phone-action__number,
.page-conditions .phone-action__number,
.page-custom .phone-action__number { font-size: var(--t-body); }

/* ------------------------------------------------------------------ 01 */
/* Обложка продаёт фотографией: кадр во всю полосу набора, под ним факты
   и связь. Левая пустая колонка прежнего макета убрана. */
.page-cover .page-inner { gap: 6px; }
.page-cover .cover-masthead { display: grid; gap: 6px; }
.page-cover .cover-kicker { margin: 0; font-size: var(--t-micro); }
.page-cover .cover-title { font-size: 42px; line-height: 0.95; }
.page-cover .cover-lede {
  max-width: none;
  margin: 2px 0 0;
  color: var(--green);
  font-size: var(--t-lead);
  line-height: 1.35;
}
.page-cover .cover-photo {
  width: var(--cover-photo-w, 100%);
  margin: 0 auto;
  background: var(--paper);
}

/* Один пояс вместо двух: порядок оплаты и три включённых в цену пункта
   стоят рядом, строка порядка работ идёт под ними во всю полосу. */
.page-cover .cover-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--red);
  border-bottom: 1px solid var(--ink);
}
.page-cover .fact-row {
  display: block;
  padding: 6px 14px 7px 14px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 0;
}
.page-cover .fact-row:first-child { padding-left: 0; }
.page-cover .fact-row:nth-child(3) { border-right: 0; padding-right: 0; }
.page-cover .cover-facts__flow {
  grid-column: 1 / -1;
  margin: 0;
  padding: 5px 0 6px;
  border-top: 1px solid var(--line-soft);
  color: var(--green);
  font-size: var(--t-body);
  line-height: 1.4;
}
.page-cover .cover-facts__flow strong {
  color: var(--red);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.page-cover .fact-row span {
  display: block;
  color: var(--green);
  font-family: var(--font-utility);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}
.page-cover .fact-row strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.page-cover .cover-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 22px;
  align-items: start;
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
.page-cover .cover-custom__copy p:not(.section-label) {
  margin: 7px 0 0;
  color: var(--green);
  font-size: var(--t-body);
  line-height: 1.45;
}
.page-cover .not-found-label { padding: 4px 8px; font-size: var(--t-micro); }
.page-cover .contact-panel { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.page-cover .messenger-actions { gap: 6px; }
.page-cover .messenger-button { min-height: 33px; }
.page-cover .phone-action { min-height: 33px; }

/* ------------------------------------------------------------------ 02 */
/* Три сценария растянуты на всю полосу: у каждого свой кадр раздела,
   ссылки на модели прижаты к низу карточки и набраны основным кеглем. */
.page-selector .scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}
.page-selector .scenario {
  display: flex;
  min-width: 0;
  /* Высота стретчем от grid не переживает пагинацию настоящего PDF
     (Chromium page.pdf()): внутренний flex-grow (.scenario__body →
     .scenario__links) не считает такую высоту «определённой» и не
     растягивается, из-за чего список моделей не прижимается к низу,
     карточки заканчиваются на разной высоте, а нижняя не уверены
     в размере наезжает на текст. На экране (обычный emulate print)
     это не видно — только в собранном PDF. Явная высота лечит оба
     симптома разом; число — фактический стретч-результат этого листа. */
  height: 600px;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  border-top-width: 3px;
}
.page-selector .scenario__photo { width: 100%; flex: 0 0 auto; }
.page-selector .scenario__photo .photo-image { object-fit: contain; }
.page-selector .scenario__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  padding: 12px 13px 13px;
}
.page-selector .scenario__number {
  font-family: var(--font-utility);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  opacity: 0.75;
}
.page-selector .scenario h3 {
  margin: 9px 0 7px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.page-selector .scenario p {
  min-height: 0;
  margin: 0 0 12px;
  font-size: var(--t-body);
  line-height: 1.4;
  hyphens: none;
}
.page-selector .scenario__links {
  display: grid;
  /* Раньше строки росли через flex-grow + align-content:end, но в
     настоящем PDF (Chromium page.pdf()) это не просто не тянется —
     grid зажимает список ниже суммы 46px-минимумов строк, и верхняя
     строка (например, Д-1) пропадает из готового PDF целиком, а не
     просто съезжает. На экране не видно. Поэтому список — своего
     естественного размера, без сжатия, а к низу карточки его тянет
     margin-top:auto; если тянуть нечем (в самой длинной карточке
     "Дачный дом") — список просто останется на своём месте, а не
     потеряет строку. */
  grid-auto-rows: minmax(46px, auto);
  margin-top: auto;
}
.page-selector .scenario a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 14px;
  gap: 4px;
  align-items: center;
  min-height: 0;
  padding: 9px 0;
  border-top: 1px solid currentColor;
  font-size: var(--t-body);
  line-height: 1.3;
  hyphens: auto;
}
.page-selector .scenario a span { font-family: var(--font-body); font-weight: 700; }
.page-selector .scenario a b {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.3;
}
.page-selector .selector-footer {
  margin: 0;
  padding-top: 12px;
  gap: 28px;
}
.page-selector .selector-footer p:not(.section-label) {
  margin: 6px 0 0;
  font-size: var(--t-body);
  line-height: 1.45;
}

/* ------------------------------------------------------------------ 03 */
/* Условия разложены на весь лист; снизу — полная контактная панель,
   Лили стоит в своей ячейке и больше не лежит на тексте. */
.page-conditions .page-inner { gap: 11px; }
.page-conditions .conditions-price {
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin: 0;
  padding: 12px 18px;
}
.page-conditions .conditions-price__big {
  font-size: var(--t-price);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.page-conditions .conditions-price p:not(.section-label) {
  margin: 6px 0 0;
  font-size: var(--t-body);
  line-height: 1.45;
}
.page-conditions .conditions-grid { margin: 0; }
.page-conditions .condition-card { padding: 11px 16px 12px 16px; }
.page-conditions .condition-card:first-child { padding-left: 0; }
.page-conditions .condition-card > span { font-size: var(--t-micro); letter-spacing: 0.09em; }
.page-conditions .condition-card strong {
  min-height: 37px;
  margin-top: 7px;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.3;
}
.page-conditions .condition-card p { margin-top: 7px; font-size: var(--t-body); line-height: 1.4; }
.page-conditions .conditions-facts { gap: 18px; margin: 0; }
.page-conditions .conditions-facts > div { padding-top: 9px; }
.page-conditions .conditions-facts h3 {
  margin: 6px 0 5px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.page-conditions .conditions-facts p:not(.section-label) {
  font-size: var(--t-body);
  line-height: 1.45;
}
.page-conditions .condition-fact--payment { position: static; min-height: 0; padding-right: 0; }
.page-conditions .conditions-note { margin: 0; padding-top: 10px; }
.page-conditions .conditions-note p:not(.section-label) {
  margin-top: 6px;
  font-size: var(--t-body);
  line-height: 1.45;
}
.page-conditions .conditions-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 24px;
  align-items: center;
  padding-top: 11px;
  border-top: 2px solid var(--red);
}
.page-conditions .conditions-contact__copy {
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 0;
}
.page-conditions .conditions-contact__copy p:not(.section-label) {
  margin: 6px 0 0;
  color: var(--green);
  font-size: var(--t-body);
  line-height: 1.45;
}
.page-conditions .lili-image--conditions {
  position: static;
  flex: 0 0 auto;
  width: auto;
  height: 94px;
  aspect-ratio: 192 / 208;
}
.page-conditions .contact-panel { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.page-conditions .messenger-actions { gap: 6px; }
.page-conditions .messenger-button { min-height: 40px; }
.page-conditions .phone-action { min-height: 38px; }

/* ------------------------------------------------------------------ 19 */
/* Страница доказательства: четыре кадра сеткой 2×2 вместо узкой ленты. */
.page-materials .page-inner { gap: 12px; }
.page-materials .material-grid {
  display: grid;
  grid-template-columns: repeat(2, var(--mat-photo-w, 258px));
  justify-content: space-between;
  gap: 10px 24px;
  margin: 0;
}
.page-materials .material-photo { width: 100%; background: var(--paper); }
.page-materials .material-card > p {
  margin: 6px 0 0;
  font-size: var(--t-body);
  line-height: 1.35;
}
.page-materials .process-grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: 28px;
  margin: 0;
  /* 4px вместо 10: неразрывные пробелы добавили строк, лист перестал сходиться.
     Место берём из отступов, кегль не трогаем — пол 14px. */
  padding-top: 2px;
}
.page-materials .process-list { gap: 2px; margin-top: 2px; }
.page-materials .process-list li {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 6px;
  font-size: var(--t-body);
  line-height: 1.45;
}
.page-materials .process-grid section > p:not(.section-label) {
  margin-top: 4px;
  font-size: var(--t-body);
  line-height: 1.45;
}
.page-materials .process-note { margin-top: 7px; padding-top: 7px; }

/* ------------------------------------------------------------------ 20 */
/* Финал: крупный кадр сборки, полная контактная панель, Лили в своей
   ячейке рядом с призывом. Белого низа не остаётся. */
.page-custom .custom-path {
  grid-template-columns: minmax(0, var(--custom-photo-w, 400px)) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  min-height: 0;
  margin: 0;
}
.page-custom .custom-path__visual {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.page-custom .custom-path__lead { min-width: 0; }
.page-custom .custom-path__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}
.page-custom .custom-path__copy > p:last-of-type { margin-bottom: 0; }
.page-custom .custom-photo { width: 100%; background: var(--paper); }
.page-custom .custom-photo__caption {
  margin: 9px 0 0;
  color: var(--green);
  font-size: var(--t-body);
  line-height: 1.4;
}
.page-custom .custom-photo__caption strong { color: var(--ink); font-weight: 700; }
.page-custom .custom-path h3 {
  margin: 8px 0 0;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.page-custom .custom-path__copy > p:not(.section-label) {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.45;
}
.page-custom .prompt-box { margin: 2px 0 0; padding: 13px 15px; }
.page-custom .prompt-box span {
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.page-custom .prompt-box p { margin-top: 7px; font-size: var(--t-body); line-height: 1.45; }
.page-custom .custom-final {
  padding-top: 13px;
  border-top: 2px solid var(--red);
}
/* Лили закрывает низ левой колонки — раньше она висела в пустоте. */
.page-custom .lili-image--final {
  align-self: flex-end;
  width: auto;
  height: 104px;
  margin-top: auto;
  aspect-ratio: 192 / 208;
}
.page-custom .custom-final .contact-panel { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.page-custom .custom-final .messenger-actions { gap: 8px; }
.page-custom .custom-final .messenger-button { min-height: 66px; }
.page-custom .custom-final .messenger-button__logo { width: 24px; height: 24px; }
.page-custom .custom-final .phone-action { min-height: 60px; }
.page-custom .custom-bottom { margin: 0; padding-top: 13px; gap: 28px; }
.page-custom .custom-bottom p:not(.section-label) {
  margin: 6px 0 0;
  font-size: var(--t-body);
  line-height: 1.45;
}

@media print {
  .page-cover { --cover-photo-w: 100%; }
  .page-materials { --mat-photo-w: 258px; }
  .page-custom { --custom-photo-w: 400px; }
}


/* ===== stage-category ===== */
/* ============================================================================
   Категорийные страницы каталога — 04 «Домики», 10 «Бытовки», 15 «Хозблоки».
   Собрано против outputs/catalog-token-contract.md.

   Каждый селектор начинается с .page-category: правила не выходят за свои три
   страницы и не спорят с фрагментами других агентов. Свои токены не заводим —
   контрактные объявлены на .page-category и оттуда наследуются вниз, поэтому
   общие компоненты (.page-topline, .page-title, .page-rail) садятся на ту же
   шкалу без правки их собственных правил.

   🔴 В styles.css был снят print-блок
        .page-category .category-photo { height: 200px; aspect-ratio: auto; }
      Это и есть источник коричневых полос: рамка становилась 355×200 (1,78),
      файл 4:3 (1,33), object-fit: contain вписывал картинку и оставлял по
      бокам подложку цвета --wood. Лечится пропорцией рамки, не обрезкой.
   ========================================================================== */

.page-category {
  /* Контрактная шкала. Пять размеров, ниже 14px основной текст не опускаем. */
  --t-display: 34px;
  --t-lead: 15px;
  --t-body: 14px;
  --t-micro: 11px;

  --page-pad-x: 28px;
  --page-pad-t: 22px;
  --page-pad-b: 24px;

  /* Ширина полосы набора 624px = 680 − 28 − 28. */
  --band-photo: 304px;   /* 4:3 → 228px: это и есть высота полосы фото */
  --band-gap: 24px;      /* 304 + 24 + 296 = 624 */
  --spec-label: 148px;   /* ярлык таблицы; значению остаётся 458px ≈ 65 знаков */

  /* Легаси-токены каталога переводим на контрактные значения. */
  --type-category-title: var(--t-display);
  --type-title-long: var(--t-display);
  --type-lead: var(--t-lead);
  --type-body: var(--t-body);
  --type-secondary: var(--t-body);
  --type-label: var(--t-micro);
  --type-support-title: var(--t-body);
  --tracking-utility: 0.09em;
}

/* --- Полоса набора и порядок полос ---------------------------------------- */

.page-category .page-inner {
  display: flex;
  flex-direction: column;
  padding: var(--page-pad-t) var(--page-pad-x) var(--page-pad-b);
}

.page-category .page-rail {
  padding-top: var(--page-pad-t);
  font-weight: 400;
}

.page-category .page-topline {
  flex: 0 0 auto;
  align-items: baseline;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-utility);
  font-size: var(--t-micro);
  line-height: 1.2;
  letter-spacing: 0.09em;
}

.page-category .page-topline .brand-name { font-weight: 400; }
.page-category .page-topline .page-number { color: var(--green); }

/* --- Полоса 1: заголовок и одна строка лида -------------------------------- */

.page-category .category-head {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  height: 132px;          /* три строки 34px + лид — по самому длинному заголовку */
  margin-top: 12px;
}

.page-category .page-title {
  margin: 0;
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
  hyphens: none;
}

.page-category .page-lead {
  max-width: 62ch;
  margin: 10px 0 0;
  /* Лид прижат к низу полосы: на всех трёх листах он стоит на одной высоте,
     прямо над фото, и заголовок растёт вверх, а не толкает фото вниз. */
  color: var(--green);
  font-size: var(--t-lead);
  line-height: 1.35;
  text-wrap: pretty;
}

/* --- Полоса 2: фото 4:3 и индекс моделей рядом ----------------------------- */

.page-category .category-band {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: var(--band-photo) minmax(0, 1fr);
  gap: var(--band-gap);
  height: calc(var(--band-photo) * 3 / 4);
  margin-top: 16px;
}

/* 🔴 Рамка ровно 4:3, как и все 30 исходников. Картинка вписывается впритык:
      полей по бокам не остаётся, и строение при этом не обрезано. */
.page-category .photo-frame {
  aspect-ratio: 4 / 3;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}

.page-category .photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --- Индекс моделей: главный навигационный элемент категории --------------- */

.page-category .model-index {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.page-category .model-index__title,
.page-category .spec-block__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ink);
  color: var(--green);
  font-family: var(--font-utility);
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.page-category .model-index__rows {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.page-category .model-index__row {
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 0 10px;
  padding: 1px 0;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  text-decoration: none;
}

.page-category .model-index__row:last-child { border-bottom: 0; }

.page-category .model-index__head {
  grid-area: 1 / 1;
  min-width: 0;
  font-size: var(--t-body);
  line-height: 1.3;
  text-wrap: pretty;
}

.page-category .model-index__name { font-weight: 700; }

.page-category .model-index__code {
  color: var(--red);
  font-family: var(--font-utility);
  font-weight: 400;
}

.page-category .model-index__note {
  grid-area: 2 / 1;
  min-width: 0;
  color: var(--green);
  font-size: var(--t-body);
  line-height: 1.2;
  text-wrap: pretty;
}

.page-category .model-index__arrow {
  grid-area: 1 / 2;
  color: var(--red);
  font-family: var(--font-utility);
  font-size: var(--t-body);
}

/* --- Полоса 3: базовая комплектация, ярлык → значение ----------------------
   Тот же приём, что на страницах моделей: слева микро-ярлык, справа значение
   основным кеглем, строки разделены волосяной линией. Таблица тянется до
   контактной строки, поэтому низа-пустышки на листе не остаётся.            */

.page-category .spec-block {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  margin-top: 24px;
}

.page-category .spec-table {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin: 0;
}

.page-category .spec-row {
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: var(--spec-label) minmax(0, 1fr);
  align-items: baseline;
  gap: 0 18px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-category .spec-row:last-child { border-bottom: 0; }

.page-category .spec-row dt {
  color: var(--green);
  font-family: var(--font-utility);
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.page-category .spec-row dd {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.5;
  text-wrap: pretty;
  hyphens: manual;
}

/* --- Полоса 4: тихая контактная строка ------------------------------------
   Вместо трёх цветных плашек и красной кнопки — одна строка на бумаге.
   Полная панель по контракту остаётся только на стр. 01, 03 и 20.          */

.page-category .contact-strip {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  height: 52px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.page-category .contact-strip p { margin: 0; }

.page-category .contact-strip__call {
  font-size: var(--t-body);
  line-height: 1.35;
  text-wrap: pretty;
}

.page-category .contact-strip__ways {
  font-size: var(--t-body);
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.page-category .contact-strip__msg { display: block; }

.page-category .contact-strip__ways a { text-decoration: none; }
.page-category .contact-strip__ways .contact-strip__phone { font-weight: 700; }
.page-category .contact-strip__ways .sep { color: var(--line); }

/* --- Экран: ниже 700px базовый CSS отпускает пропорцию листа,
       там же и мы разворачиваем полосы в один столбец. ------------------------- */

@media screen and (max-width: 700px) {
  .page-category .page-inner { padding: var(--space-5) var(--space-4); }
  .page-category .category-band {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .page-category .category-head { height: auto; }
  .page-category .model-index__rows { flex: 0 0 auto; }
  .page-category .model-index__row { padding: 8px 0; }
  .page-category .spec-block { flex: 0 0 auto; }
  .page-category .spec-row { flex: 0 0 auto; padding: 8px 0; }
  .page-category .contact-strip {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .page-category .contact-strip__ways { text-align: left; white-space: normal; }
}


/* ===== stage-family ===== */
/* ============================================================
   СТРАНИЦЫ СЕМЕЙСТВ — .page-family (стр. 11 Б-1, 12 Б-2, 16 Х-1)
   Одна модель, несколько размеров, у каждого своя цена.
   Все селекторы начинаются с .page-family.

   Общие компоненты берём у фундамента и не переопределяем:
   .page-topline, .page-title, .page-lead, .photo-frame, .contact-strip,
   .spec-row, .section-label и микро-кегль через --type-label.
   ============================================================ */

.page-family {
  /* Единственный собственный токен. Сумма в размерной сетке, где сумм
     несколько: контрактный --t-price 32px рассчитан на ОДНУ сумму на лист
     и четырьмя-семью суммами не набирается. Согласован со штабом 31.08. */
  --t-price-tier: 22px;
  /* Фото одинаковое на всех трёх листах: при перелистывании полоса не прыгает.
     Ширину задаёт самый плотный лист — Х-1 с семью размерами. */
  --fam-photo: 198px;
}

/* ---------- сетка листа: поля и полоса набора от фундамента ---------- */

.page-family .page-inner {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  column-gap: 0;
}

/* ---------- заголовок ---------- */

.page-family .family-head {
  flex: 0 0 auto;
  display: block;
  margin-top: 13px;
}

.page-family .family-kicker {
  margin: 0 0 6px;
  color: var(--red);
}

.page-family .page-title {
  margin: 0;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  hyphens: none;
}

.page-family .page-lead {
  margin-top: 7px;
  text-wrap: pretty;
}

/* ---------- фото + «кому подойдёт / что даёт» ---------- */

.page-family .family-brief {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: var(--fam-photo) minmax(0, 1fr);
  column-gap: 24px;
  margin-top: 15px;
}

.page-family .family-brief__text {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}

.page-family .brief-item p:not(.section-label) {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.45;
  text-wrap: pretty;
}

/* ---------- размерная сетка: главный блок страницы ---------- */

.page-family .family-sizes {
  /* не ужимать молча: если не влезло — пусть приёмка ловит вылет, а не наложение */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 12px;
}

.page-family .size-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 16px;
  margin: 0 0 4px;
}

.page-family .size-caption .section-label {
  margin: 0;
}

.page-family .size-caption__note {
  text-align: right;
}

/* строки делят остаток листа поровну: на четырёх размерах они дышат,
   на семи садятся на минимум 27px — приём один, плотность разная */
.page-family .size-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid var(--ink);
}

.page-family .size-row {
  flex: 1 1 auto;
  display: grid;
  align-items: center;
  min-height: 27px;
  border-bottom: 1px solid var(--line-soft);
}

.page-family .size-row:last-child {
  border-bottom-color: var(--ink);
}

/* размер и цена — самое крупное в строке */
.page-family .size-row__dim,
.page-family .size-row__sum {
  font-family: var(--font-heading);
  font-size: var(--t-price-tier);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  line-height: 1.1;
  white-space: nowrap;
}

.page-family .size-row__dim {
  color: var(--ink);
  letter-spacing: -0.01em;
}

.page-family .size-row__sum {
  color: var(--red);
  letter-spacing: var(--ls-display);
  text-align: right;
}

.page-family .size-row__use {
  min-width: 0;
  color: var(--green);
  font-size: var(--t-body);
  line-height: 1.25;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: pretty;
}

.page-family .size-note {
  margin: 7px 0 0;
  color: var(--green);
  font-size: var(--t-body);
  line-height: 1.35;
  text-wrap: pretty;
}

/* ---------- комплектация: та же таблица, что на страницах моделей,
             но в две колонки — на листе семейства строк больше ---------- */

.page-family .spec-sheet {
  flex: 0 0 auto;
  margin-top: 10px;
}

.page-family .spec-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  align-content: start;
  margin: 3px 0 0;
}

.page-family .spec-row {
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 0 10px;
  padding: 2px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 0 none;
}

.page-family .spec-row--wide {
  grid-column: 1 / -1;
}

.page-family .spec-row dt,
.page-family .spec-row dd {
  line-height: 1.28;
  hyphens: none;
}

/* ---------- тихая контактная строка (компонент фундамента) ---------- */

.page-family .contact-strip {
  flex: 0 0 auto;
  margin-top: 10px;
}

.page-family .contact-strip__ask {
  text-wrap: pretty;
}

/* ============================================================
   ТЕЛЕФОН. Каталог смотрят в мессенджере с телефона, и полоса набора
   там ~300px: колоночные раскладки печати рассыпаются, поэтому ниже
   700px лист разворачивается в ленту. В печати всё остаётся как было.
   ============================================================ */

@media screen and (max-width: 700px) {
  .page-family .family-brief {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }
  .page-family .photo-frame {
    max-width: 420px;
  }
  .page-family .brief-item p:not(.section-label),
  .page-family .size-row__use,
  .page-family .size-note,
  .page-family .contact-strip__ask {
    font-size: var(--type-mobile-body);
    line-height: var(--leading-body);
  }
  .page-family .size-caption {
    display: block;
  }
  .page-family .size-caption__note {
    margin-top: 2px;
    text-align: left;
  }
  /* строка размера: размер и цена всегда на одной линии, назначение под ними.
     Сам шаблон колонок задаёт файл варианта — там же, где печатный. */
  .page-family .size-row {
    align-items: baseline;
    row-gap: 3px;
    padding: 12px 0;
  }
  .page-family .size-row__dim,
  .page-family .size-row__sum {
    font-size: 24px;
  }
  .page-family .page-title {
    font-size: var(--type-mobile-title);
    line-height: var(--leading-title);
  }
  .page-family .contact-strip {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 10px;
  }
  /* между каналами перенос разрешён, внутри номера — нет */
  .page-family .contact-strip__links {
    white-space: normal;
    font-size: var(--type-mobile-body);
  }
  .page-family .contact-strip__links a {
    white-space: nowrap;
  }
}

@media screen and (max-width: 560px) {
  /* Ярлык колонкой съедает 40% ширины, значение сыплется клочьями.
     Ниже этого перелома строка стакается — как на страницах моделей. */
  .page-family .spec-rows {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-family .spec-row {
    display: block;
    padding: var(--space-3) 0;
  }
  .page-family .spec-row dt {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-mono);
    font-size: var(--type-mobile-label);
    line-height: var(--lh-micro);
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;
  }
  .page-family .spec-row dd {
    display: block;
    font-size: var(--type-mobile-body);
    line-height: var(--leading-body);
  }
}

/* ---------- ВАРИАНТ 2: одна схема сравнения ----------
   Габаритные контуры всех размеров вложены друг в друга от общего угла,
   в едином масштабе. Это сравнение габаритов, не планировка:
   ни стен, ни комнат, ни дверей — только контур и засечки в метрах. */

.page-family .family-sizes--plan .size-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  column-gap: 22px;
  align-items: stretch;
  min-height: 0;
}

.page-family .size-figure {
  align-self: start;
  margin: 0;
  padding-top: 2px;
}

.page-family .family-sizes--plan .size-list {
  min-height: 0;
}

.page-family .size-plan {
  display: block;
  overflow: visible;
}

.page-family .size-plan__box {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.75;
}

.page-family .size-plan__origin {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.8;
}

.page-family .size-plan__tick {
  fill: var(--green);
  font-family: var(--font-utility);
  font-size: 11px;
}

.page-family .size-figure figcaption {
  margin-top: 6px;
  color: var(--green);
  font-family: var(--font-utility);
  font-size: var(--t-micro);
  line-height: 1.25;
  letter-spacing: 0.06em;
}

.page-family .family-sizes--plan .size-row {
  grid-template-columns: 78px minmax(0, 1fr) 114px;
  column-gap: 12px;
}

@media screen and (max-width: 700px) {
  /* Схема встаёт над списком: в ленте нет места на колонку слева. */
  .page-family .family-sizes--plan .size-body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }
  .page-family .size-figure {
    max-width: 260px;
  }
  .page-family .family-sizes--plan .size-figure figcaption {
    font-size: var(--type-mobile-label);
  }
  .page-family .family-sizes--plan .size-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
  }
  /* порядок в разметке — размер, назначение, цена; на телефоне цену
     поднимаем к размеру явно, иначе автораскладка уводит её на третью строку */
  .page-family .family-sizes--plan .size-row__dim { grid-area: 1 / 1; }
  .page-family .family-sizes--plan .size-row__sum { grid-area: 1 / 2; }
  .page-family .family-sizes--plan .size-row__use { grid-area: 2 / 1 / 3 / 3; }
}


/* ===== иконки мессенджеров в контактной строке =====
   Владелец: «иконка узнаётся мгновенно, текстовая подпись — нет».
   Фон бумажный с волосяной рамкой — блики шли от цветных заливок,
   а не от самих знаков; знак остаётся в фирменном цвете. */
.contact-strip__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 8px;
  border: 1px solid var(--line-soft);
  background: var(--paper);
  vertical-align: middle;
}
.contact-strip__ico img { width: 18px; height: 18px; object-fit: contain; }
.contact-strip__ico--max img { object-fit: contain; }


/* ═══════════════════════════════════════════════════════════════════════════
   СИСТЕМА АКЦЕНТОВ — 31.08.2026
   Владелец: «всё только жирное и нежирное, никаких плашек — текст сливается».
   Так и было: два средства различения на двадцать полос — насыщенность
   шрифта и одна волосяная линейка. Здесь вводится ранг: три толщины линеек,
   разведённый акцент под тем, что продаёт, кант вместо рамки и один ярлык
   на лист. Акцент один — --red. Новых цветов нет, только его плотности.

   ЛИНЕЙКИ, три толщины:
     2,5px  --red        под шапкой раздела — одна на полосу
     1px    --line       между смысловыми блоками
     0,5px  --line-soft  внутри таблицы характеристик
   ═════════════════════════════════════════════════════════════════════════ */

/* --- 1. Между смысловыми блоками: 1px, не сплошной --ink ----------------- */
.page-topline { border-bottom: 1px solid var(--line); }
.model-facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-strip { border-top: 1px solid var(--line); }
.page-category .model-index__title,
.page-category .spec-block__title { border-bottom: 1px solid var(--line); }
.spec-row:first-child { border-top: 1px solid var(--line); }
.spec-row:last-child { border-bottom: 1px solid var(--line); }

/* --- 2. Внутри таблицы: 0,5px. Раньше строки ведомости весили столько же,
       сколько её рамка, и восемь строк читались как восемь разделов. ------ */
.spec-row { border-bottom: 1px solid var(--line-soft); }
.page-category .spec-row,
.page-family .spec-row { border-bottom: 1px solid var(--line-soft); }
.model-fact { border-right: 1px solid var(--line-soft); }
.page-category .model-index__row { border-bottom: 1px solid var(--line-soft); }
.condition-card { border-right: 1px solid var(--line-soft); }

/* --- 3. Красная линейка под шапкой раздела: одна на полосу --------------- */
.page-model .model-heading,
.page-family .model-heading {
  padding-bottom: 8px;
  border-bottom: 3px solid var(--red);
}
/* Вход в полосу к одной высоте: раньше заголовок в один ряд прижимался
   к низу полосы и начинался на 91px, в два ряда — на 58px. На развороте
   глаз каждый раз искал его заново. */
.page-model .model-heading { justify-content: flex-start; }
.page-category .category-head {
  justify-content: flex-start;
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--red);
}
.page-selector .selector-intro,
.page-conditions .conditions-heading,
.page-materials .materials-heading,
.page-custom .custom-heading {
  padding-bottom: 10px;
  border-bottom: 3px solid var(--red);
}
.page-cover .cover-facts { border-top-width: 3px; }

/* --- 4. Подложка-тинт под тем, что входит в цену, и чек-лист в два знака.
       В ведомости ровно два состояния: входит в цену — и считается
       отдельно. Третьего нет, поэтому и знаков два. ---------------------- */
.spec-row--included,
.spec-row--extra { position: relative; }
.spec-row--included {
  background: rgba(200, 71, 50, 0.09);
  box-shadow: -22px 0 0 rgba(200, 71, 50, 0.09), 10px 0 0 rgba(200, 71, 50, 0.09);
}
.spec-row--included::before,
.spec-row--extra::before {
  position: absolute;
  top: 2px;
  left: -19px;
  width: 13px;
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.spec-row--included::before { content: "✓"; color: var(--red); }
.spec-row--extra::before { content: "–"; color: rgba(32, 39, 42, 0.70); }

/* --- 5. Довод модели: кант слева вместо рамки по периметру.
       Рамка утяжеляет полосу, кант держит вертикальный ритм. Строка стоит
       на месте ярлыка ведомости и не занимает своего ряда — на модельной
       полосе свободной высоты нет. Формулировки дословно из эталона
       work/_backup-catalog-2026-08-31/index.html. ------------------------ */
.spec-sheet__head {
  /* Та же сетка, что у .spec-row: красная линейка встаёт на ось колонки
     значений и не гуляет по листу от длины текста. */
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  margin: 0 0 6px;
}
.spec-sheet__head .section-label { flex: 0 0 auto; }
.model-benefit {
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  padding: 4px 0 5px 11px;
  border-left: 5px solid var(--red);
  background: rgba(200, 71, 50, 0.09);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
}

/* --- 6. Кант у блоков «важно / условия»: заливка + 5px слева ------------- */
.page-conditions .conditions-note {
  margin: 0;
  padding: 8px 0 8px 13px;
  border-top: 0;
  border-left: 5px solid var(--red);
  background: rgba(200, 71, 50, 0.09);
}
.page-cover .cover-facts__flow {
  margin-left: -14px;
  padding: 6px 0 7px 9px;
  border-top: 0;
  border-left: 5px solid var(--red);
  background: rgba(200, 71, 50, 0.09);
}
.page-materials .process-note {
  margin-top: 8px;
  padding: 6px 0 6px 11px;
  border-top: 0;
  border-left: 5px solid var(--red);
  background: rgba(200, 71, 50, 0.09);
}

/* --- 7. Полоса-навигатор вдоль корешка: свой оттенок акцента на раздел,
       номер вывороткой. На двадцати полосах это заменяет оглавление:
       по торцу видно, где домики, где бытовки, где хозблоки. ------------- */
.page-rail {
  align-items: center;
  justify-content: space-between;
  padding: 22px 0 13px;
}
.page-rail--service { background: var(--green); }
.page-rail--houses { background: var(--red); }
.page-rail--sheds { background: rgba(200, 71, 50, 0.80); }
.page-rail--storage { background: rgba(200, 71, 50, 0.56); }
.page-rail__num {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  writing-mode: horizontal-tb;
}

/* --- 8. Угловой ярлык — строго один на лист, и только на товарных полосах.
       Факт берётся из тех, что уже стоят на 01 и 03. -------------------- */
.page-topline { padding-bottom: 5px; }
.page-flag {
  margin-left: auto;
  margin-right: 14px;
  padding: 3px 8px;
  color: var(--paper);
  background: var(--red);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- 9. Подпись общего кадра раздела: это иллюстрация раздела,
       а не конкретная модель. ------------------------------------------- */
.page-category .band-caption {
  margin: 6px 0 0;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
.page-category .spec-block { margin-top: 14px; }

/* --- 10. Ярлык над кадром материала: без него вторая подпись говорила
        «для домиков — B/BC», а слова «вагонка» на полосе не было. ------- */
.page-materials .material-label {
  margin: 0 0 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

/* --- 11. Размерная схема: самый большой габарит читается пятном ---------- */
.page-family .size-plan__box {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 1;
}
.page-family .size-plan__box--max {
  fill: rgba(200, 71, 50, 0.10);
  stroke: var(--red);
  stroke-width: 1.4;
}

/* --- 12. Знаки мессенджеров: рамка волосяная, как в тихой строке.
        MAX на стр. 20 обрезался по правому краю и показывал «MA» —
        приводим к пузырьку, как на остальных полосах. ------------------- */
.messenger-button--whatsapp,
.messenger-button--telegram,
.messenger-button--max { border-color: var(--line-soft); }
.page-custom .custom-final .messenger-button--max .messenger-button__logo {
  width: 24px;
  height: 24px;
}
.custom-bottom .contact-strip__msg { display: inline-flex; gap: 6px; margin-top: 4px; }
.custom-bottom .contact-strip__ico { margin-left: 0; }

/* --- 13. Стр. 02: нижний край ссылок в трёх карточках на одной высоте ---- */
.page-selector .scenario__links {
  grid-auto-rows: minmax(46px, auto);
  align-content: end;
}

/* Плашки не должны разрезаться при печати. */
@media print {
  .spec-row,
  .model-benefit,
  .page-conditions .conditions-note,
  .page-materials .process-note,
  .page-cover .cover-facts__flow,
  .material-card,
  .condition-card { break-inside: avoid; }
}

/* --- 14. Плата за новые элементы: полосы 03 и 19 были заполнены впритык,
        поэтому ярлыки и канты оплачиваются отступами, а не кеглем. ------- */
.page-conditions .page-inner { gap: 9px; }
.page-conditions .conditions-heading { padding-bottom: 6px; }
.page-conditions .conditions-note { padding: 5px 0 5px 13px; }
.page-conditions .conditions-contact { padding-top: 8px; }
.page-materials .materials-heading { padding-bottom: 7px; }
.page-materials .material-grid { gap: 10px 24px; }
.page-materials .material-card > p { margin: 5px 0 0; line-height: 1.35; }
.page-materials .process-note { margin-top: 6px; padding: 5px 0 5px 11px; }

/* Ярлык материала стоит НА кадре, в его верхнем углу: на полосе 19 свободной
   высоты нет, а ярлык нужен — без него вторая подпись говорит «для домиков —
   B/BC», и слова «вагонка» на полосе не встречается вовсе. Плашка бумажная,
   не акцентная: это подпись к кадру, а не ярлык-акцент. */
.page-materials .material-card { position: relative; }
.page-materials .material-label {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  margin: 0;
  padding: 4px 9px 4px 8px;
  border-bottom: 0;
  background: var(--paper);
}
.page-materials .page-inner { gap: 9px; }
.page-materials .materials-heading { grid-template-columns: minmax(0, 1fr) 206px; padding-bottom: 5px; }
.page-materials .material-grid { gap: 6px 24px; }
.page-materials .process-note { margin-top: 4px; padding: 4px 0 4px 11px; }

/* --- 15. Плата за довод модели на девяти листах.
        Ведомость и до этой правки налезала на контактную строку на Д-2 и Д-3
        (замер: последняя строка на 27px ниже начала строки связи) — вместе
        с доводом оплачиваем и этот старый долг. Кегль не трогаем: пол 14px
        держится, место берём из отступов строк и межполосного шага. ------ */
.spec-sheet__head { margin: 0 0 2px; }
.model-benefit { padding: 1px 0 2px 10px; line-height: 1.3; }
.page-model .spec-rows { margin-top: 3px; }
/* Шаг строки один на все девять листов — иначе, листая Д-1 → Д-5,
   ведомости перестают совпадать по высоте. */
.page-model .spec-row { padding: 1px 0; }
@media print {
  .page-model .page-inner { row-gap: 10px; }
}

/* Контактная строка на листах моделей (Д-1…Д-5, Б-1…Б-4, Х-1…Х-3) в
   печати: каталог уходит клиенту PDF-ом, он тапает по ссылкам пальцем
   в телефоне — по иконке 26px без рамки не попасть. Компактная версия
   кнопок с 01/03/20: та же рамка var(--line-soft) и красная кнопка
   звонка, что и у .messenger-button/.phone-action (см. «12. Знаки
   мессенджеров» выше), но ниже — курс на высоту строки в сетке
   .page-model .page-inner (52px), а не на кегль или карточку. Точки-
   разделители убираем тем же приёмом, что уже принят на телефоне. */
@media print {
  .page-model .contact-strip__dot,
  .page-family .contact-strip__dot,
  .page-category .contact-strip__dot { display: none; }
  .page-model .contact-strip__links,
  .page-family .contact-strip__links {
    display: flex;
    gap: 8px;
  }
  .page-model .contact-strip__links > a:not(.contact-strip__ico),
  .page-family .contact-strip__links > a:not(.contact-strip__ico) {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    color: var(--paper);
    background: var(--red);
    border: 1px solid var(--red);
    white-space: nowrap;
  }
  .page-model .contact-strip__ico,
  .page-family .contact-strip__ico,
  .page-category .contact-strip__ico {
    width: 40px;
    height: 32px;
    margin-left: 0;
    border-color: var(--line-soft);
  }
  .page-model .contact-strip__ico img,
  .page-family .contact-strip__ico img,
  .page-category .contact-strip__ico img { width: 20px; height: 20px; }
  /* На полосах 04, 10, 15 номер лежит в .contact-strip__ways, а не в
     .contact-strip__links, поэтому в фикс выше он не попал и остался голой
     строкой высотой 11px — самой мелкой целью во всём PDF. Даём ту же
     красную кнопку, что у модельных полос. */
  .page-category .contact-strip__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    color: var(--paper);
    background: var(--red);
    border: 1px solid var(--red);
    white-space: nowrap;
  }
}

/* --- 16. Красная линейка обязана прилегать к тексту, а не висеть под ним.
        Полосы модели и раздела держат заголовочный ряд фиксированной высоты
        (чтобы вход в полосу не гулял), поэтому линейку вешаем на последнюю
        строку шапки, а не на низ ряда. ----------------------------------- */
.page-model .model-heading,
.page-category .category-head { padding-bottom: 0; border-bottom: 0; }
.page-model .model-heading .page-lead,
.page-category .category-head .page-lead {
  padding-bottom: 7px;
  border-bottom: 3px solid var(--red);
}

/* --- 17. Линейка раздела идёт во всю полосу набора, а не по мере текста.
        И семейные полосы (11, 12, 16) держат её на своей шапке. ---------- */
.page-category .category-head .page-lead { width: 100%; max-width: none; }
.page-family .family-head {
  padding-bottom: 7px;
  border-bottom: 3px solid var(--red);
}
.page-family .family-head .page-lead { margin-bottom: 0; }

/* --- 18. Правило Шанель: снять лишнее украшение.
        До правки на листе жило пять весов линеек — 1px --ink, 1px --line,
        1px --line-soft, 2px красная и 3px. Красная тяжёлая линейка теперь
        значит «здесь начинается раздел» и стоит одна на полосу; все прочие
        двухпиксельные разделители опускаются в ранг «между блоками». ----- */
.page-conditions .conditions-contact,
.page-materials .process-grid,
.page-custom .custom-bottom,
.page-custom .custom-path__actions,
.page-selector .selector-footer,
.page-family .model-cta,
.page-category .custom-calc { border-top: 1px solid var(--line); }
.conditions-facts > div { border-top: 1px solid var(--line); }

/* --- 19. Потолок цветного на листе — 15%. Полоса 03 держит утверждённую
        красную плашку цены и полную панель связи и была за потолком ещё до
        этой правки; поэтому здесь кант остаётся, а подложку снимаем:
        на перегруженный лист цвет не добавляют. -------------------------- */
.page-conditions .conditions-note { background: none; }

/* --- 20. Мелочи по итогам просмотра листов ------------------------------- */
/* Заголовок раздела упирался в линейку шапки — 4px воздуха. */
.page-category .category-head { padding-top: 4px; }
/* В ленте на телефоне ярлык ведомости и довод встают друг под друга. */
@media screen and (max-width: 700px) {
  .spec-sheet__head { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; }
  .model-benefit { max-width: none; }
}

/* ============================================================================
   МОБИЛЬНАЯ ПРАВКА — 31.08.2026. Каталог смотрят в мессенджере с телефона.
   Разделы .page-cover/.page-conditions/.page-materials/.page-custom задают
   свою сетку с ФИКСИРОВАННОЙ шириной боковой колонки (236 / 292 / 258×2 /
   400px), без разницы для экрана и печати — эта колонка не гасится ни одним
   мобильным медиазапросом выше, потому что .page-xxx .yyy специфичнее
   generic-правила. На ленте 320—430px такая колонка не помещается: либо тянет
   за собой горизонтальный скролл всего документа (страница 19 держит
   scrollWidth документа 572—600px — .catalog-page на телефоне намеренно
   overflow:visible, чтобы вертикальный контент не резался, и то же самое
   отпускает горизонтальный оverflow), либо заезжает на соседний блок
   (страницы 01, 03, 20). Верх и печать не трогаем — только screen, поэтому
   @media print этот блок не видит вообще. ================================ */

@media screen and (max-width: 700px) {
  /* Заголовочная полоса разделов (02, 03, 19, 20): title слева, лид жёсткой
     236px-колонкой справа. На телефоне лид уже стоял под заголовком (правило
     из общего мобильного блока выше), пока эта более специфичная сетка не
     вернула фиксированную колонку. Возвращаем как было. */
  .page-selector .selector-intro,
  .page-conditions .conditions-heading,
  .page-materials .materials-heading,
  .page-custom .custom-heading {
    display: block;
  }
  .page-selector .selector-intro > p,
  .page-conditions .conditions-heading > p,
  .page-materials .materials-heading > p,
  .page-custom .custom-heading > p {
    max-width: none;
    margin-top: 8px;
  }

  /* Стр. 01: плашка «Не нашли готовую модель?» и панель связи стояли в два
     столбца (1fr / 292px) — на ленте вторая колонка наезжала на первую. */
  .page-cover .cover-custom {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  /* Три факта («Сборка», «Фундамент», «Доставка») были тремя жёсткими
     столбцами — на 360px это «ВКЛЮЧЕНА»/«ВКЛЮЧЕНЫ» встык. Разворачиваем в
     список, как база .fact-row уже делает везде, кроме обложки. */
  .page-cover .cover-facts { grid-template-columns: minmax(0, 1fr); }
  .page-cover .fact-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .page-cover .fact-row:last-child { border-bottom: 0; }
  .page-cover .fact-row strong { margin-top: 0; }
  /* Панель связи была сжата под 292px-колонку (кнопки высотой 33px) — на
     полной ширине ленты возвращаем нормальную цель нажатия. */
  .page-cover .messenger-button,
  .page-cover .phone-action { min-height: 48px; }

  /* Стр. 02: три сценария держались в repeat(3, 1fr) — по ~90px на карточку,
     слова ломались посреди («Хранени-е», «переплачива-ть»). Generic-правило
     .scenario-grid{1fr} выше по файлу уже стакало их в столбец, но эта более
     специфичная сетка страницы возвращала три колонки. */
  .page-selector .scenario-grid { grid-template-columns: minmax(0, 1fr); }

  /* Стр. 03: та же болезнь дважды на одном листе. «По модели» держит жёсткую
     212px-колонку у самой шапки — на ленте это и был второй, менее заметный
     источник горизонтального скролла документа (после материалов на стр. 19). */
  .page-conditions .conditions-price {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  /* Лили и текст наезжали на панель связи — тот же раскол 1fr/292px. */
  .page-conditions .conditions-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .page-conditions .messenger-button,
  .page-conditions .phone-action { min-height: 48px; }

  /* Стр. 19: две колонки по 258px держат ширину всего документа — это и есть
     источник горизонтального скролла. Плюс ярлык материала стоит НА фото
     абсолютом (нужно, чтобы влезть в притык на печати) — на ленте переносим
     его над кадром обычной строкой, а не поверх снимка. */
  .page-materials .material-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .page-materials .material-label {
    position: static;
    margin: 0 0 6px;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--line);
    background: none;
  }
  /* Низ той же полосы: «как проходит заказ» и «до выезда бригады» держались
     в 1.16fr/0.84fr — на 360px это два узких столбца по 2-3 слова в строке. */
  .page-materials .process-grid { grid-template-columns: minmax(0, 1fr); }

  /* Стр. 20: фото-колонка фиксирована в 400px — на ленте правая колонка
     (пример первого сообщения) обрезалась по краю листа. */
  .page-custom .custom-path {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* ------------------------------------------------------------------------
     Тихая контактная строка (.contact-strip) внизу карточек моделей и
     разделов. Владелец пробовал попасть пальцем: «тяжело попасть, и в
     номер, и отдельно в мессенджер, постоянно не туда тыкаешь» — раньше на
     01/03/20 были отдельные прямоугольные кнопки, здесь на телефоне была
     строка текста с точками-разделителями и иконками 14px. Ниже — только
     экран ≤700px, и только тут кнопки крупные (48px), как на 01/03/20.
     31.08: печать перестала быть тихой тоже — каталог уходит клиенту PDF-ом,
     тапают по нему пальцем в телефоне, а не с экрана ≤700px. Компактная
     версия тех же кнопок для печати — ниже по файлу, в @media print рядом
     с .page-model .spec-row (комментарий «контактная строка на листах
     моделей»). Десктопный превью (не печать, не телефон) один остался
     тихим — там же 1440px+, палец не участвует. --------------------------- */

  /* База — .page-model и .page-family (Д-1…Д-5, Б-1…Б-4, Х-1…Х-3). */
  .contact-strip__dot { display: none; }
  .contact-strip__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .contact-strip__links > a:not(.contact-strip__ico) {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 16px;
    color: var(--paper);
    background: var(--red);
    border: 1px solid var(--red);
    font-size: 16px;
    white-space: normal;
  }
  .contact-strip__links > .contact-strip__ico {
    flex: 1 1 0;
    width: auto;
    height: auto;
    min-width: 48px;
    min-height: 48px;
    margin-left: 0;
  }
  .contact-strip__links > .contact-strip__ico img { width: 22px; height: 22px; }

  /* Разделы 04/10/15 — своя разметка (.contact-strip__phone / .sep /
     .contact-strip__msg), тот же приём. */
  .page-category .contact-strip__ways {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .page-category .contact-strip__ways .sep { display: none; }
  .page-category .contact-strip__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 16px;
    color: var(--paper);
    background: var(--red);
    border: 1px solid var(--red);
    font-size: 16px;
  }
  .page-category .contact-strip__msg {
    display: flex;
    gap: 8px;
  }
  .page-category .contact-strip__msg .contact-strip__ico {
    flex: 1 1 0;
    width: auto;
    height: auto;
    min-width: 48px;
    min-height: 48px;
    margin-left: 0;
  }
  .page-category .contact-strip__msg .contact-strip__ico img { width: 22px; height: 22px; }
}

/* --- Стр. 20, финальная сборка (правки владельца 31.08): -------------------
   контакты не дублируются, Лили не сидит на красной линейке, фото крупнее. */
.page-custom { --custom-photo-w: 400px; }
.page-custom .custom-final { margin-top: auto; }
.page-custom .custom-final__ask {
  margin: 0 0 10px;
  color: var(--green);
  font-size: var(--t-body, var(--type-secondary));
  line-height: 1.45;
}
.page-custom .custom-final__ask strong { color: var(--ink); font-weight: 700; }
.page-custom .lili-image--final { height: 156px; margin-bottom: 18px; }
.page-custom .custom-photo__caption { margin-bottom: 6px; }

/* --- Телефон: замечания владельца по живой ссылке, 31.08.2026 -------------
   Правило одно на все устройства: одна колонка с постоянным полем, и НИ ОДНО
   украшение не вылезает за это поле. Ширины проверки — 360 / 393 / 430. */
.page-number { white-space: nowrap; }

@media screen and (max-width: 700px) {
  /* Полоса-корешок на телефоне намеренно скрыта: абсолютно позиционированное
     украшение по-разному ведёт себя в Safari и Chrome и вылезало столбом.
     Раздел на телефоне и так виден по заголовку страницы. */

  /* 2. «В цену входят»: вылет заливки был сделан тенью по размеру печатного
        листа и на телефоне торчал за карточку. Держим внутри поля. */
  .spec-row--included { box-shadow: none; }
  .spec-row--included,
  .spec-row--extra {
    margin-left: -10px;
    margin-right: -10px;
    padding-right: 10px;
  }
  /* 3. Галочка и минус стояли СНАРУЖИ колонки и жались к краю. На телефоне
        абсолютное позиционирование не держится — ставим знак прямо перед
        текстом строки, тогда наезжать не на что. */
  .spec-row--included::before,
  .spec-row--extra::before { content: none; }
  .spec-row--included dt::before { content: "✓ "; color: var(--red); font-weight: 700; }
  .spec-row--extra dt::before { content: "– "; color: rgba(32, 39, 42, 0.70); font-weight: 700; }
  .spec-row--included,
  .spec-row--extra { padding-left: 10px; }

  /* Кегль основного текста на телефоне — 16px: ниже этого iOS сам
     подрывает вёрстку зумом при тапе (правило readable-font-size). */
  .page-model .contact-strip__ask,
  .page-family .contact-strip__ask,
  .page-category .contact-strip__ask { font-size: 16px; }

  /* 4. Карточки стр. 02: жёсткая высота 600px — это лечение печати,
        на телефоне она рвала текст и оставляла провал. */
  .page-selector .scenario { height: auto; min-height: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ТЕЛЕФОН — украшения по колонке. 31.08.2026.
   Закон: одна колонка с постоянным полем, и ни одно украшение — заливка, кант,
   значок, полоса — не считается от печатного листа. Всё ниже — места, где
   печатная правка пережила переезд на телефон и её видно глазами.
   ═════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 700px) {
  /* Розовая плашка обложки уходила на 14px влево из колонки. Две её сестры
     (.conditions-note на 03 и .process-note на 19) стоят на колонке — ставим
     третью так же. */
  .page-cover .cover-facts__flow { margin-left: 0; padding-left: 13px; }

  /* Заливка «в цену входят» торчала на 10px влево и вправо: остаток от вылета
     краской по размеру печатного поля. Держим ровно по колонке. */
  .spec-row--included,
  .spec-row--extra { margin-left: 0; margin-right: 0; }

  /* Печатная плотность строки ведомости (padding 1px, чтобы 17 листов совпали
     по высоте) стоит вне медиазапроса и перебивала мобильный отступ. На
     телефоне высота не дефицит — возвращаем воздух. */
  .page-model .spec-row { padding: var(--space-2) 0; }

  /* Полосы 04, 10, 15: у .page-category своя ведомость с приоритетом выше
     мобильной, поэтому она оставалась в две колонки (23 знака в строке)
     и кеглем 14px против 17px на соседних полосах. Листая 04 → 05, текст
     менялся в размере. Сводим к общему набору. */
  .page-category .spec-row { display: block; padding: var(--space-2) 0; }
  .page-category .spec-row dt {
    margin-bottom: 2px;
    font-size: var(--type-mobile-label);
  }
  .page-category .spec-row dd {
    font-size: var(--type-mobile-body);
    line-height: var(--leading-body);
  }

  /* Шапка полосы: на узком экране три её части не помещались в строку и номер
     «05 / 20» выдавливало за колонку (замер: вылет 51px на 320px). Переносим
     строкой, номер держим справа. */
  .page-topline { flex-wrap: wrap; row-gap: var(--space-1); }
  .page-topline .page-number { margin-left: auto; }

  /* Карточки условий на 03 складываются сами, когда колонка становится уже
     150px. Без второго брейкпоинта: ширину телефона мы не знаем. */
  .conditions-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .condition-card { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .condition-card:last-child { border-bottom: 0; }

  /* Лили сидела печатного размера на обеих полосах: 94px на 03 и 156px на 20
     против мобильных 58 и 76. Правила .page-conditions/.page-custom стоят вне
     медиазапроса и по приоритету перебивали мобильные — тот же класс протечки
     печати, что и всё выше. Крупная собака на 20-й давала полполосы пустоты. */
  .page-conditions .lili-image--conditions { height: 58px; }
  .page-custom .lili-image--final { height: 76px; margin-bottom: 0; }

  /* Зазор между кнопками связи был 6px при норме 8px (§2 touch-spacing):
     на обложке и стр. 03 палец легче промахивался мимо мессенджера.
     На стр. 20 уже стояло 8px — сводим к одному значению. */
  .page-cover .contact-panel,
  .page-cover .messenger-actions,
  .page-conditions .contact-panel,
  .page-conditions .messenger-actions { gap: var(--space-2); }

  /* Длинное слово в заголовке («комплектации», «небольшого») на узком экране
     не влезало и выдавливало полосу вбок. break-word срабатывает только когда
     иначе слово не помещается — на 360px и шире ни один перенос не меняется. */
  .page-title,
  .cover-title,
  .conditions-price__big { min-width: 0; overflow-wrap: break-word; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   АКЦЕНТЫ ВЕДОМОСТИ — 31.08.2026, по слову владельца.
   Было: значение набрано жирным во всех строках. Восемь подряд жирных строк —
   не выделение, а шум: выделено всё, значит не выделено ничего. Заодно жир
   съедал настоящие акценты — цену, доплату за сваи, довод модели: они тонули
   среди одинаково жирных строк, и владелец назвал это «будто жёлтая газета».
   Первая попытка (просто снять жир) его не устроила: «заголовки теряются» —
   верно, без жирного в ведомости не остаётся ни одной точки опоры.
   Стало: якорь — ЗАГОЛОВОК ПОЛЯ, содержание — значение. Глаз скользит по
   заголовкам, находит нужное поле и читает значение спокойным текстом.

   🔴 Почему заголовок набран Golos, а не PT Mono, как остальные ярлыки:
   у PT Mono нет жирного начертания (Google Fonts отдаёт только 400), а
   подделку веса запрещает font-synthesis: none в самом верху файла. Сделать
   моноширинный ярлык жирным физически нечем. Golos 700 — второй утверждённый
   шрифт и утверждённое начертание; моноширинная фактура остаётся на номерах
   полос, эйбрау и подписи цены.

   Порядок акцентов на полосе после правки, сверху вниз: фото · цена красной
   плашкой · название модели · довод розовой плашкой · кнопка звонка ·
   заголовки полей · значения. Семь ступеней, у каждой одна работа.
   ═════════════════════════════════════════════════════════════════════════ */
.spec-row dt,
.page-category .spec-row dt,
.model-fact > span {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.spec-row dd,
.page-category .spec-row dd,
.model-fact > strong { font-weight: 400; }

@media screen and (max-width: 700px) {
  /* Вылет, найденный владельцем глазами на iPhone: у первой карточки условий
     левый отступ 0, у остальных 16px — правило писалось под печать, где все
     четыре стоят одним рядом. На телефоне рядов два, и третья карточка
     съезжала вправо на 16px относительно первой. Замер: текст карточки 1
     на x=32, карточки 3 на x=48. Уравниваем, колонки разводим зазором. */
  .page-conditions .condition-card,
  .page-conditions .condition-card:first-child {
    padding-left: 0;
    padding-right: var(--space-3);
  }
  .conditions-grid { column-gap: var(--space-4); }
}