/* Каталог №13 · страницы 20–29.
   Исходные схемы, фотографии и графические предупреждения — в assets/artwork-*.svg.
   Названия, цены, артикулы и таблицы — редактируемый HTML.
   --u соответствует одной точке исходного листа 841.92 × 595.32 pt.
   Никаких внешних шрифтов, библиотек, API или интернет-запросов. */
:root {
  color-scheme: light;
  --regular: Calibri, Carlito, Arial, sans-serif;
  --narrow: "Arial Narrow", "Liberation Sans Narrow", "Nimbus Sans Narrow", Arial, sans-serif;
  --japanese: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", serif;
  --red: #f00;
  --yellow: #ff0;
}
* { box-sizing: border-box; }
html { background: #fff; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: #000; background: #fff; font-family: var(--regular); }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1 { margin: 0; }
mark { background: var(--yellow); color: inherit; padding: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:focus-visible { outline: 3px solid #2358ac; outline-offset: 3px; }
.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; }
.catalog { width: 100%; max-width: 1263px; margin: 0 auto; container-type: inline-size; }
.sheet { --u: min(.118776606vw, 1.5px); position: relative; width: 100%; height: calc(595.32 * var(--u)); background: #fff; overflow: hidden; isolation: isolate; }
@supports (width: 1cqw) { .sheet { --u: calc(100cqw / 841.92); } }
.desktop-artwork { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; z-index: 0; pointer-events: none; }
.desktop-decoration { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.mobile-visual, .mobile-stamp { display: none; }
.source-cell { position: absolute; z-index: 2; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); min-height: calc(var(--h) * var(--u)); font-size: calc(var(--fs, 12) * var(--u)); line-height: 1.146; text-align: left; white-space: nowrap; padding: 0; border: 0; vertical-align: top; }
.parts-list { border: 0; padding: 0; border-collapse: collapse; font-family: var(--narrow); }
.parts-list .source-cell { font-weight: 400; }
.parts-list .price { font-weight: 700; }
.parts-list .reference-line { font-family: var(--narrow); font-weight: 400; }
.shipping { color: #ee0000; font-family: var(--regular); font-weight: 700; line-height: 1.27; text-align: center; }
.shipping-20 { line-height: 1.3; }

/* Точки открытия исходных изображений не закрывают текст и цены. */
.image-open { display: block; position: relative; padding: 0; margin: 0; width: 100%; border: 0; border-radius: 0; background: transparent; cursor: zoom-in; }
.image-open > img { width: 100%; height: auto; }
.image-corner { display: none; position: absolute; bottom: 5px; right: 5px; width: 26px; text-align: center; font: 20px/26px Arial, sans-serif; background: #ffffffdf; color: #222; border-radius: 2px; }
.desktop-image-hit { position: absolute; z-index: 1; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.desktop-image-hit .image-open { height: 100%; }
.desktop-image-hit .image-open > img { width: 100%; height: 100%; opacity: 0; object-fit: contain; }
@media (hover: hover) { .image-open:hover .image-corner, .image-open:focus-visible .image-corner { display: block; } }

/* Страница 24. Две исходные пятиколоночные таблицы. */
.valve-label { text-align: center; line-height: 1.2; }
.valve-label mark { font-weight: 700; }
.valve-tables { position: absolute; z-index: 2; left: calc(41.76 * var(--u)); top: calc(322.9 * var(--u)); width: calc(766.62 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.valve-table { border-collapse: collapse; table-layout: fixed; width: 100%; font: calc(11.04 * var(--u))/1.12 var(--regular); }
.valve-table th, .valve-table td { border: 1px solid #bfbfbf; font-weight: 400; height: calc(18.87 * var(--u)); padding: 0 calc(5.0 * var(--u)); text-align: left; vertical-align: middle; white-space: nowrap; }
.valve-table .ba-code { width: 11%; font-weight: 700; }
.valve-table .ba-oem { width: 13%; }
.valve-table .ba-japanese { width: 30%; font-family: var(--japanese); }
.valve-table .ba-russian { width: 33%; }
.valve-table .ba-price { width: 13%; font: 700 calc(12 * var(--u))/1.12 var(--narrow); text-align: center; padding: 0; }
.valve-table.left tbody tr:nth-child(even) { background: #f2f2f2; }
.valve-table.right { margin-left: -1px; width: calc(100% + 1px); background: #deeaf6; }
.valve-table .source-bold > * { font-weight: 700; }

/* Страница 26. Фотографии и указатели сохраняют положения исходного листа. */
.scooter-product figcaption { text-align: center; font-family: var(--regular); line-height: 1.22; }
.scooter-product .source-faint { color: #bfbfbf; }
.scooter-product .out-of-stock { color: #f00; font-size: 1.255em; line-height: 1.45; }

/* Просмотр технических схем. Он появляется только после нажатия. */
.image-dialog { position: fixed; inset: 0; width: min(1180px, calc(100vw - 24px)); height: min(960px, calc(100vh - 24px)); height: min(960px, calc(100dvh - 24px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid #aaa; border-radius: 0; background: #fff; color: #111; }
.image-dialog::backdrop { background: #000c; }
.image-dialog[open] { display: flex; flex-direction: column; }
.viewer-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 16px; border-bottom: 1px solid #ddd; }
#image-title { flex: 1; min-width: 0; font: 16px/1.3 var(--regular); }
#viewer-close { flex: 0 0 44px; height: 44px; border: 0; font: 32px/1 Arial, sans-serif; background: #f0f0f0; cursor: pointer; }
.viewer-controls { display: flex; justify-content: center; flex: 0 0 auto; gap: 8px; padding: 8px; border-bottom: 1px solid #ddd; }
.viewer-controls button { min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid #bbb; background: #fff; cursor: pointer; font: 16px/1.15 var(--regular); }
.viewer-controls button:disabled { opacity: .35; cursor: default; }
.viewer-viewport { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px; text-align: center; background: #f4f4f4; }
#viewer-image { display: block; margin: 0 auto; max-width: none; height: auto; background: #fff; }
.has-viewer { overflow: hidden; }

/* Телефон и узкий планшет: не уменьшенная фотография всей страницы,
   а перенос названий, читаемые цены и вертикальное расположение материалов. */
@media screen and (max-width: 800px) {
  .catalog { padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
  .sheet { --u: 1px; width: 100%; height: auto; padding: 16px 0 28px; overflow: visible; }
  .sheet + .sheet { margin-top: 24px; }
  .sheet.blank-page { display: none; }
  .desktop-artwork, .desktop-decoration, .desktop-only, .desktop-image-hit:not(.product-photo) { display: none; }
  .mobile-visual { display: block; width: 100%; }
  .image-open > img { width: 100%; }
  .source-cell { position: static; inset: auto; width: auto; min-height: 0; height: auto; font-size: 16px; line-height: 1.25; white-space: normal; }
  .parts-list { display: block; width: 100%; margin-top: 20px; }
  .parts-list tbody { display: block; width: 100%; }
  .parts-list tr { display: grid; width: 100%; grid-template-columns: 66px minmax(0,1fr) 74px; gap: 3px 7px; align-items: start; padding: 7px 0; break-inside: avoid; }
  .parts-list .code { grid-column: 1; grid-row: 1; white-space: nowrap; text-align: left; }
  .parts-list .part-name { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; }
  .parts-list .price { grid-column: 3; grid-row: 1; white-space: nowrap; text-align: right; }
  .parts-list .reference { grid-column: 2 / 4; grid-row: 2; font: 11px/1.3 var(--narrow); color: #333; }
  .parts-list .reference-line { display: inline; font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
  .reference-line + .reference-line::before { content: " "; }
  .shipping { margin: 24px 0; width: 100%; font-size: 18px; line-height: 1.45; white-space: normal; overflow-wrap: normal; }
  .shipping-20 br { display: none; }
  .shipping-24 { margin: 0 0 20px; }
  .mobile-stamp { display: block; width: 79%; max-width: 520px; margin: 6px auto 14px; height: auto; pointer-events: none; }
  .ap2-page .mobile-stamp { margin-top: -42px; position: relative; z-index: 1; }
  .ap2-collage { position: relative; padding-top: 30px; }
  .ap2-collage .ap2-regulator { position: absolute; width: 29%; top: 0; right: 0; }
  .apeks-logo { width: 100%; max-width: 530px; height: auto; margin: 10px auto 28px; }
  .valve-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
  .valve-photos .image-open { height: 150px; }
  .valve-photos .image-open img { width: 100%; height: 100%; object-fit: contain; }
  .valve-photos figcaption { margin-top: 12px; text-align: center; font-size: 18px; line-height: 1.4; }
  .valve-photos figcaption mark { font-weight: 700; }
  .valve-visual .mobile-stamp { width: 65%; margin: 20px auto; }
  .valve-tables { position: static; display: block; width: 100%; margin-top: 18px; }
  .valve-table, .valve-table.right { display: block; width: 100%; margin: 0; font-size: 16px; }
  .valve-table + .valve-table { margin-top: 20px; }
  .valve-table colgroup { display: none; }
  .valve-table tbody { display: block; width: 100%; }
  .valve-table tr { display: grid; grid-template-columns: 63px minmax(0,1fr) 74px; gap: 4px 7px; padding: 9px 7px; border: 1px solid #bfbfbf; border-bottom: 0; break-inside: avoid; }
  .valve-table tr:last-child { border-bottom: 1px solid #bfbfbf; }
  .valve-table th, .valve-table td { position: static; width: auto; height: auto; padding: 0; border: 0; white-space: normal; line-height: 1.25; }
  .valve-table .ba-code, .valve-table .ba-oem, .valve-table .ba-japanese, .valve-table .ba-russian, .valve-table .ba-price { width: auto; }
  .valve-table .ba-code { grid-column: 1; grid-row: 1; white-space: nowrap; }
  .valve-table .ba-oem { grid-column: 2; grid-row: 1; }
  .valve-table .ba-japanese { grid-column: 1 / 3; grid-row: 2; font-size: 13px; overflow-wrap: anywhere; }
  .valve-table .ba-russian { grid-column: 1 / 3; grid-row: 3; font-size: 16px; overflow-wrap: anywhere; }
  .valve-table .ba-price { grid-column: 3; grid-row: 1 / 4; font: 700 17px/1.2 var(--narrow); white-space: nowrap; text-align: right; align-self: center; }
  .scooter-products { display: grid; grid-template-columns: 1fr; gap: 36px; }
  .scooter-product { display: flex; flex-direction: column; align-items: center; min-width: 0; }
  .scooter-product .product-photo { position: static; display: block; width: min(100%, 290px); height: auto; }
  .product-photo .image-open { height: auto; }
  .product-photo .image-open > img { opacity: 1; width: 100%; height: 235px; object-fit: contain; }
  .scooter-product figcaption { position: relative; width: 100%; max-width: 540px; margin-top: 22px; padding: 15px 12px; border: 1px solid #afafaf; border-radius: 16px; background: linear-gradient(#d0d0d0,#bfbfbf); font-size: 18px; line-height: 1.4; text-align: center; }
  .scooter-product figcaption::before { content: ''; position: absolute; left: 22%; top: -17px; width: 28px; height: 20px; background: #d0d0d0; clip-path: polygon(0 100%,100% 100%,82% 0); }
  .scooter-product .out-of-stock { font-size: 22px; }
  .scooter-page .scooter-stamp { width: 70%; margin: 22px auto 0; }
  .drawing-page .mobile-stamp { width: 70%; margin: 20px auto; }
  .drawing-page .shipping { margin: 20px 0 0; }
  .image-dialog { width: calc(100vw - 12px); height: calc(100vh - 12px); height: calc(100dvh - 12px); }
  #image-title { font-size: 15px; }
  .viewer-toolbar { padding-left: 10px; }
  .viewer-controls { gap: 5px; }
  .viewer-controls button { padding: 8px; font-size: 15px; }
}
@media screen and (min-width: 560px) and (max-width: 800px) {
  .catalog { max-width: 680px; }
  .parts-list tr { grid-template-columns: 82px minmax(0,1fr) 90px; }
  .parts-list .source-cell { font-size: 18px; }
  .parts-list .reference-line { font-size: 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; }
  .catalog { width: 297mm; max-width: none; }
  .sheet { --u: calc(297mm / 841.92); width: 297mm; height: 210mm; margin: 0; padding: 0; break-after: page; page-break-after: always; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  .image-dialog, .image-corner, .mobile-visual, .mobile-stamp { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}