/* Каталог №13, страницы 1–7.
   Содержание и цвета из исходного PDF. Без нового дизайна и калькуляторов.
   --u — одна исходная PDF-точка; на ПК она масштабируется вместе с листом.
   В узком экране элементы переходят в обычный поток, текст не уменьшается. */
:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #000;
  --red: #f00;
  --yellow: #ff0;
  --green: #0f0;
  --cyan: #0ff;
  --regular: Calibri, Carlito, Arial, sans-serif;
  --narrow: "Arial Narrow", "Liberation Sans Narrow", "Nimbus Sans Narrow", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--regular); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
img { display: block; height: auto; max-width: 100%; }
figure, p, h1, h2 { margin: 0; }
mark { color: inherit; padding: 0; background: var(--yellow); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.yellow { background: var(--yellow); }
.green { background: var(--green); }
.cyan { background: var(--cyan); }
.red { color: var(--red); }
.catalog { width: 100%; max-width: 1263px; margin: 0 auto; container-type: inline-size; }
.sheet { --u: min(.118776606vw, 1.5px); width: 100%; height: calc(595.32 * var(--u)); position: relative; background: #fff; }
@supports (width: 1cqw) { .sheet { --u: calc(100cqw / 841.92); } }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
:focus-visible { outline: 3px solid #2459a7; outline-offset: 3px; }

/* 1. Графика обложки не перерисована. */
.cover-desktop { position: relative; width: 100%; }
.cover-desktop > img { width: 100%; }
.cover-mobile { display: none; }
.cover-link { position: absolute; display: block; border-radius: 2px; }
.cover-desktop .natalia { left: 54.5%; top: 14.7%; width: 24%; height: 3.4%; }
.cover-desktop .igor { left: 55.5%; top: 19.4%; width: 22%; height: 3.4%; }
.cover-link:focus-visible { outline-offset: 0; background: #ffffff33; }

/* Фотографии можно увеличить; значок не меняет печатный макет. */
.image-open { display: block; position: relative; border: 0; padding: 0; margin: 0; cursor: zoom-in; background: transparent; color: inherit; border-radius: 0; }
.image-open img { width: 100%; height: auto; }
.image-corner { display: none; position: absolute; right: 5px; bottom: 5px; font: 20px/24px Arial, sans-serif; background: #ffffffdc; width: 26px; text-align: center; border-radius: 2px; color: #222; }
@media (hover: hover) { .image-open:hover .image-corner, .image-open:focus-visible .image-corner { display: block; } }

/* 2. Фотография, пропорции, положение жёлтой полосы. */
.zero-photo { position: absolute; left: calc(21.3 * var(--u)); top: calc(36.691 * var(--u)); width: calc(807 * var(--u)); }
.zero-photo .image-open { width: 100%; }
.zero-stripe { pointer-events: none; position: absolute; left: 0; width: 100%; top: 91.97%; height: 1.63%; background: var(--yellow); }

/* 3. Три модели — как на исходном листе. */
.model h2 { position: absolute; font-family: var(--regular); font-weight: 700; font-size: calc(24 * var(--u)); line-height: 1; white-space: nowrap; top: calc(41.5 * var(--u)); }
.model .image-open { position: absolute; }
.ord h2 { left: calc(102.5 * var(--u)); }
.cdx h2 { left: calc(346.2 * var(--u)); }
.explorer h2 { left: calc(578.6 * var(--u)); }
.ord .image-open { left: calc(130.72 * var(--u)); top: calc(76.31 * var(--u)); width: calc(148.5 * var(--u)); }
.cdx .image-open { left: calc(343.88 * var(--u)); top: calc(81 * var(--u)); width: calc(147.4 * var(--u)); }
.explorer .image-open { left: calc(553.45 * var(--u)); top: calc(90.76 * var(--u)); width: calc(151.25 * var(--u)); }
.equipment-note { position: absolute; left: calc(21.4 * var(--u)); top: calc(442.4 * var(--u)); width: calc(807 * var(--u)); color: var(--red); font-weight: 700; font-size: calc(18 * var(--u)); line-height: calc(23.7 * var(--u)); }

/* 4. Цены, опции и доплаты — HTML, а не снимок страницы. */
.prices-page h2 { position: absolute; left: calc(21.3 * var(--u)); width: calc(807 * var(--u)); text-align: center; font-weight: 700; color: var(--red); line-height: 1; }
.prices-title { top: calc(18.2 * var(--u)); font-size: calc(20.04 * var(--u)); }
.options-title { top: calc(259.9 * var(--u)); font-size: calc(18 * var(--u)); }
.surcharge-title { top: calc(429.9 * var(--u)); font-size: calc(18 * var(--u)); }
.ruled { border-collapse: collapse; table-layout: fixed; font-weight: 700; }
.ruled td { border: 1px solid #666; }
.ruled .price { white-space: nowrap; font-family: var(--narrow); }
.base-prices { position: absolute; left: calc(21.3 * var(--u)); top: calc(48.5 * var(--u)); width: calc(807 * var(--u)); font-size: calc(14.04 * var(--u)); line-height: 1; }
.base-prices .name-col { width: 76.4%; }
.base-prices .price-col { width: 23.6%; }
.base-prices td { height: calc(17.55 * var(--u)); padding: 0 calc(5.7 * var(--u)); vertical-align: middle; }
.base-prices .spacer td { height: calc(17.55 * var(--u)); }
.base-prices .spacer.double td { height: calc(35.1 * var(--u)); }
.options-tables, .surcharge-tables { position: absolute; display: grid; grid-template-columns: 1fr 1fr; left: calc(21.3 * var(--u)); width: calc(807 * var(--u)); }
.options-tables { top: calc(288 * var(--u)); }
.surcharge-tables { top: calc(458.4 * var(--u)); }
.compact { width: 100%; font-size: calc(12 * var(--u)); line-height: 1; font-style: italic; }
.compact + .compact { margin-left: -1px; width: calc(100% + 1px); }
.compact .name-col { width: 63.2%; }
.compact .price-col { width: 36.8%; }
.compact.right-options .name-col { width: 66.8%; }
.compact.right-options .price-col { width: 33.2%; }
.compact td { height: calc(15.2 * var(--u)); padding: 0 calc(5.7 * var(--u)); vertical-align: middle; }
.compact .price { text-align: center; }
.surcharge-table .name-col, .surcharge-table .price-col { width: 50%; }
.surcharge-table:last-child td:first-child { text-align: center; }
.deviation { position: absolute; left: calc(21.3 * var(--u)); width: calc(807 * var(--u)); top: calc(521.6 * var(--u)); text-align: center; color: var(--red); font-size: calc(18 * var(--u)); font-weight: 700; line-height: 1.2; }
.deviation small { font-size: calc(12 * var(--u)); }
.deviation mark { white-space: nowrap; color: #000; font-family: var(--narrow); font-size: calc(20.04 * var(--u)); }

/* 5. Подписи и выделения соответствуют исходному листу. */
.zipper { position: absolute; left: calc(21.3 * var(--u)); display: flex; align-items: stretch; }
.zipper .image-open { flex-shrink: 0; align-self: flex-start; }
.zipper figcaption { display: flex; align-items: flex-end; white-space: nowrap; font: 700 calc(15.96 * var(--u))/1.12 var(--narrow); }
.zipper .full-height { display: flex; height: 100%; align-items: flex-end; }
.tube { top: calc(14.2 * var(--u)); height: calc(140 * var(--u)); }
.tube .image-open { width: calc(194.94 * var(--u)); }
.chest { top: calc(164.58 * var(--u)); height: calc(120.44 * var(--u)); }
.chest .image-open { width: calc(194.85 * var(--u)); }
.bdm { top: calc(294.4 * var(--u)); height: calc(132.9 * var(--u)); }
.bdm .image-open { width: calc(189.69 * var(--u)); }
.back-ykk { top: calc(436.724 * var(--u)); height: calc(115.1 * var(--u)); }
.back-ykk .image-open { width: calc(187.15 * var(--u)); }

/* 6. Размеры остаются таблицей; мобильная прокрутка находится внутри неё. */
.sizes-page > h2 { position: absolute; top: calc(14.2 * var(--u)); left: 0; width: 100%; color: var(--red); font: italic 700 calc(21.96 * var(--u))/1.15 var(--narrow); text-align: center; }
.scroll-hint { display: none; }
.size-scroll { position: absolute; left: calc(94.269 * var(--u)); top: calc(49.44 * var(--u)); width: calc(608.92 * var(--u)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.size-table { border-collapse: collapse; table-layout: auto; width: 100%; font: calc(9.15 * var(--u))/1.12 var(--narrow); text-align: center; }
.size-table th, .size-table td { padding: 0 calc(1 * var(--u)); border: 0; height: calc(10.8 * var(--u)); font-weight: 400; white-space: nowrap; }
.size-table .measure-numbers th { background: #d9d9d9; }
.size-table .measure-numbers th:first-child { background: #fff; }
.size-table .measure-names th { white-space: normal; vertical-align: top; height: calc(21.5 * var(--u)); }
.size-table tbody tr.source-standard { background: #d9d9d9; }
.size-table .arm-col { width: 17%; }
.size-table .foot-col { width: 10%; }
.diagram { position: absolute; left: calc(305.88 * var(--u)); top: calc(339.394 * var(--u)); width: calc(279.3 * var(--u)); }
.diagram .image-open { width: 100%; }
.sizes-page .deviation { top: calc(543.7 * var(--u)); }

/* 7. Полный текст исходной таблицы, в исходном порядке. */
.measurement-table { position: absolute; left: calc(53.275 * var(--u)); top: calc(14.2 * var(--u)); width: calc(744 * var(--u)); border-collapse: collapse; table-layout: fixed; text-align: center; font: calc(10.25 * var(--u))/1.1 var(--narrow); }
.measurement-table .number-col { width: 3.6%; }
.measurement-table .label-col { width: 27.65%; }
.measurement-table .method-col { width: 68.75%; }
.measurement-table th, .measurement-table td { border: 1px solid #b6b6b6; font-weight: 400; padding: 0 calc(1 * var(--u)); height: calc(12.64 * var(--u)); vertical-align: middle; }
.measurement-table thead th { background: #d9d9d9; }

/* Вспомогательный просмотр фотографии. Не добавляет функций магазина. */
.image-dialog { position: fixed; inset: 0; padding: 0; margin: auto; width: min(1100px, calc(100vw - 24px)); height: min(940px, calc(100dvh - 24px)); max-width: none; max-height: none; border: 1px solid #aaa; background: #fff; color: #000; }
.image-dialog:not([open]) { display: none; }
.image-dialog[open] { display: flex; flex-direction: column; }
.image-dialog::backdrop { background: #000b; }
.has-viewer { overflow: hidden; }
.viewer-bar { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-height: 52px; padding-left: 16px; border-bottom: 1px solid #ddd; font-size: 16px; }
#image-title { flex: 1; }
.viewer-close { border: 0; background: #fff; font: 32px Arial, sans-serif; min-width: 52px; min-height: 52px; cursor: pointer; }
.viewer-viewport { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.viewer-stage { padding: 16px; width: max-content; min-width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; }
#viewer-image { display: block; flex-shrink: 0; max-width: none; height: auto; }
.viewer-controls { flex-shrink: 0; display: flex; gap: 10px; align-items: center; justify-content: center; padding: 8px; border-top: 1px solid #ddd; }
.viewer-controls button { background: #fff; color: #111; border: 1px solid #aaa; min-width: 44px; min-height: 44px; cursor: pointer; padding: 6px 12px; font-size: 16px; }
.viewer-controls button:disabled { opacity: .4; cursor: default; }

/* Смартфон: те же блоки, в том же разделе, без уменьшения букв до PDF-масштаба. */
@media screen and (max-width: 760px) {
  .sheet { --u: 1px; height: auto; min-height: 0; padding: 18px 12px; margin-bottom: 30px; }
  .cover { padding: 8px; }
  .cover-desktop { display: none; }
  .cover-mobile { display: flex; align-items: center; flex-direction: column; gap: 12px; }
  .cover-contacts { position: relative; width: min(100%, 440px); }
  .cover-contacts > img { width: 100%; }
  .cover-contacts .natalia { left: 13%; top: 50%; width: 75%; height: 17%; }
  .cover-contacts .igor { left: 17%; top: 72%; width: 68%; height: 17%; }
  .cover-number { position: relative; width: 170px; }
  .cover-number img { width: 100%; }
  .cover-number span { position: absolute; top: 34%; left: 38%; color: var(--yellow); font: 700 32px/1 var(--regular); }
  .cover-bubble { width: min(100%, 390px); height: auto; }
  .cover-bubble.attention { width: min(100%, 430px); }
  .zero-photo { position: relative; top: auto; left: auto; width: 100%; }
  .models { display: grid; grid-template-columns: 1fr; gap: 30px; }
  .model h2 { position: static; text-align: center; font-size: 26px; line-height: 1.18; white-space: normal; }
  .model .image-open { position: relative; left: auto; top: auto; margin: 12px auto 0; width: auto; max-width: 100%; }
  .model .image-open img { width: auto; height: clamp(330px, 110vw, 450px); max-width: 100%; object-fit: contain; }
  .equipment-note { position: static; width: auto; margin-top: 25px; font-size: 18px; line-height: 1.4; }
  .prices-page h2 { position: static; width: auto; font-size: 22px; line-height: 1.2; margin: 0 0 16px; }
  .prices-page .options-title, .prices-page .surcharge-title { margin-top: 32px; }
  .base-prices { position: static; width: 100%; font-size: 16px; line-height: 1.25; }
  .base-prices .name-col { width: auto; }
  .base-prices .price-col { width: 85px; }
  .base-prices td { height: auto; padding: 8px 5px; }
  .base-prices .price { font-size: 18px; }
  .base-prices .spacer td, .base-prices .spacer.double td { height: 12px; padding: 0; }
  .options-tables, .surcharge-tables { position: static; width: 100%; display: grid; grid-template-columns: 1fr; }
  .compact { font-size: 16px; line-height: 1.25; }
  .compact td { height: auto; padding: 8px 5px; }
  .compact .name-col, .compact.right-options .name-col, .surcharge-table .name-col { width: auto; }
  .compact .price-col, .compact.right-options .price-col, .surcharge-table .price-col { width: 85px; }
  .compact + .compact { width: 100%; margin: -1px 0 0; }
  .compact .price { font-size: 18px; }
  .empty-option { display: none; }
  .surcharge-table:last-child td:first-child { text-align: left; }
  .deviation, .sizes-page .deviation { position: static; width: auto; margin-top: 28px; font-size: 18px; line-height: 1.4; }
  .deviation small { font-size: 14px; }
  .deviation mark { font-size: 23px; }
  .zippers-page { display: flex; flex-direction: column; gap: 28px; }
  .zipper { position: static; width: 100%; height: auto; display: flex; flex-direction: column; align-items: flex-start; }
  .zipper .image-open { width: min(100%, 340px); }
  .zipper figcaption { display: block; height: auto; white-space: normal; font-size: 20px; line-height: 1.3; margin-top: 7px; }
  .zipper .full-height { display: inline; height: auto; }
  .sizes-page > h2 { position: static; font-size: 27px; line-height: 1.2; margin-bottom: 14px; }
  .scroll-hint { display: block; text-align: center; color: #555; font: 14px/1.3 var(--regular); margin: 0 0 9px; }
  .size-scroll { position: relative; left: auto; top: auto; width: 100%; padding-bottom: 10px; }
  .size-table { width: 1060px; min-width: 1060px; font-size: 15px; line-height: 1.18; }
  .size-table th, .size-table td { height: 28px; padding: 3px 5px; }
  .size-table .measure-names th { height: 45px; }
  .size-table th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 #b9b9b9; }
  .size-table tbody tr.source-standard th:first-child { background: #d9d9d9; }
  .diagram { position: static; width: min(100%, 472px); margin: 20px auto 0; }
  .measurement-table { position: static; width: 100%; font-size: 16px; line-height: 1.25; }
  .measurement-table .number-col { width: 28px; }
  .measurement-table .label-col { width: 34%; }
  .measurement-table .method-col { width: auto; }
  .measurement-table th, .measurement-table td { height: auto; padding: 7px 4px; overflow-wrap: break-word; }
  .measurement-table thead th { font-size: 17px; }
  .image-dialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
@page { size: A4 landscape; margin: 0; }
@media print {
  html, body { width: 297mm; margin: 0; padding: 0; overflow: visible !important; }
  .catalog { width: 297mm; max-width: none; }
  .sheet { --u: calc(297mm / 841.92); height: 210mm; margin: 0; padding: 0; break-after: page; page-break-after: always; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  .cover-desktop { display: block; }
  .cover-mobile, .image-corner, .scroll-hint, .image-dialog { display: none !important; }
  .cover-link { display: none; }
  .size-scroll { overflow: visible; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}