/* МАРТ — главная, прототип. Тёмная тема, острые углы, один акцент, инженерная сетка.
   Раскладка — 14 колонок по клетке сетки (1344 = 14 × 96): края панелей ложатся на линии сетки. */

@font-face { font-family: "Tilda Sans"; src: url("../fonts/TildaSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tilda Sans"; src: url("../fonts/TildaSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Tilda Sans"; src: url("../fonts/TildaSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Tilda Sans"; src: url("../fonts/TildaSans-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }
/* Bebas Neue Cyrillic — как в журнале. Лицензия Dharma Type не разрешает распространение:
   для боевого сайта нужна веб-лицензия или замена (см. отчёт). */
@font-face { font-family: "Bebas"; src: url("../fonts/BebasNeueCyrillic.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --bg: #0a0a0a;
  --ink: #f2f2f0;             /* основной текст: абзацы, легенды, таблицы */
  --muted: #8c8c89;           /* только совсем вторичное: подписи, единицы, «деталь 9 из 22» (контраст 6,1:1) */
  --rule: rgba(255, 255, 255, 0.14);
  --accent: #e8482d;          /* красно-оранжевый со страницы разреза в журнале */
  --major: 96px;              /* клетка десктопа; на планшете и телефоне js/grid.js считает --cell от ширины */
  --cell: var(--major);
  --cols: 14;
  --gx: max(16px, calc((100vw - 1344px) / 2));
  --grid: rgba(255, 255, 255, 0.055);   /* линии сетки и обводки панелей — один цвет */
  --pad: 24px;                /* внутренний отступ панели */
  --wrap: min(1344px, calc(100% - 32px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --display: "Bebas", "Tilda Sans", "Arial Narrow", sans-serif;
  --text: "Tilda Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-anchor: none; }  /* пересчёт высот панелей не должен сдвигать прокрутку */
body {
  margin: 0;
  background-color: var(--bg);
  /* Инженерная сетка: один уровень, клетка --major. Линия проходит по центру страницы,
     поэтому края контейнера (14 клеток) ложатся ровно на линии. */
  background-image:
    linear-gradient(to right, var(--grid) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: var(--gx) 0;
  color: var(--ink);
  font: 400 17px/1.5 var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.wrap { width: var(--wrap); margin-left: var(--gx); margin-right: 0; }
[hidden] { display: none !important; }

/* ── панели: сплошной чёрный под текстом и визуалом, обводка 1 px цвета сетки ── */
.panel { background: var(--bg); box-shadow: inset 0 0 0 1px var(--grid); padding: var(--pad); position: relative; }
.panel--flush { padding: 0; }
/* 14 колонок по клетке; промежутки между панелями — пустые колонки, в них видна сетка */
.g14 { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); align-items: start; }

/* ── типографика ── */
.eyebrow { font: 500 12px/1.2 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); display: flex; gap: 12px; align-items: center; }
.eyebrow b { color: var(--accent); font-weight: 500; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 0.88; letter-spacing: 0.005em; margin: 0; }
.lead { font-size: 19px; line-height: 1.45; color: var(--ink); margin: 0; max-width: 34em; }
.muted { color: var(--muted); }
.ph { display: inline-block; padding: 0 6px; border: 1px dashed rgba(232, 72, 45, 0.7); color: var(--ink); font: 500 0.9em/1.35 var(--text); letter-spacing: 0.02em; white-space: nowrap; }

/* ── кнопки и ссылки ── */
.btn {
  display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 26px;
  background: var(--accent); color: #fff; font: 700 19px/1 var(--text); letter-spacing: 0.06em; text-transform: uppercase;  /* белый на #E8482D = 3,9:1 — проходит как крупный текст (≥18,66 px жирный) */
  transition: transform 0.5s var(--ease), opacity 0.3s;
}
.btn svg { transition: transform 0.5s var(--ease); }
.btn:hover svg { transform: translateX(5px); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
.btn--sm { height: 44px; padding: 0 18px; font-size: 13px; gap: 10px; }
.link { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 0; position: relative; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(0.35); transition: transform 0.6s var(--ease); }
.link:hover::after { transform: scaleX(1); }
.link svg { transition: transform 0.5s var(--ease); }
.link:hover svg { transform: translateX(4px); }
.price { font: 500 15px/1 var(--text); letter-spacing: 0.04em; color: var(--ink); }
.price .ph { margin-left: 4px; }

/* ── шапка ── */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: 72px; background: var(--bg); box-shadow: 0 1px 0 var(--grid); }
.hdr .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo { display: block; }
.logo img { display: block; height: 24px; width: auto; }
.nav { display: flex; align-items: center; gap: 40px; font: 500 13px/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; }
.nav a:not(.cart) { color: var(--ink); opacity: 0.85; transition: opacity 0.3s; }
.nav a:not(.cart):hover { opacity: 1; }
.cart { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; box-shadow: inset 0 0 0 1px var(--rule); }
.cart b { font-weight: 700; color: var(--accent); }

/* ── секции ── */
section { position: relative; }
.sec { padding: var(--major) 0 calc(var(--major) * 2); }
/* колонка без схлопывания отступов: нужна, чтобы подгонка блоков к линиям сетки складывалась точно */
.sec > .wrap, .phrase > .wrap, .ftr > .wrap, .series, .mag { display: flex; flex-direction: column; }
.sec-head { margin-bottom: var(--major); }
.sec-head > .panel:not(.sect) { grid-column: 5 / span 10; }
.sec-head > .panel:not(.sect) .display { font-size: clamp(56px, 6.6vw, 96px); margin-bottom: 16px; }
/* заголовок раздела: панель 3 клетки × 1 клетка, номер и название крупно */
.sect { grid-column: 1 / span 3; height: var(--major); padding: 0 20px; display: flex; align-items: center; gap: 14px; margin: 0; overflow: hidden; }
.sect b { font: 400 56px/1 var(--display); color: var(--accent); flex: none; position: relative; top: 0.06em; }
.sect span { font: 400 44px/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; position: relative; top: 0.06em; }

/* ── появление при скролле (один раз) ── */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.rv.is-in { opacity: 1; transform: none; }

/* ═════════════ 1. ПЕРВЫЙ ЭКРАН ═════════════ */
.hero { padding: calc(var(--major) + 72px) 0 var(--major); }
.hero__text { grid-column: 1 / span 5; padding: 40px var(--pad); }
.hero__fig { grid-column: 7 / span 8; margin: 0; }
.hero .lead { margin-bottom: 40px; }
.hero__facts { display: flex; gap: 32px; margin-top: 48px; padding-top: 20px; box-shadow: 0 -1px 0 var(--grid); }
.hero__facts div { font: 500 12px/1.4 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.hero__facts b { display: block; font: 400 34px/1 var(--display); letter-spacing: 0.02em; margin-bottom: 6px; }
.hero__cap { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }

/* ═════════════ Компонент: разрез с выносками ═════════════ */
.cut { position: relative; user-select: none; -webkit-user-select: none; }
.cut__stage { position: relative; }
.cut__float { will-change: transform; }
.cut.is-alive .cut__breath { animation: breath 7s var(--ease) infinite alternate; }
@keyframes breath { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.cut__svg { display: block; width: 100%; height: auto; overflow: visible; }
.cut__art { transition: opacity 0.45s var(--ease); }
.cut.is-swapping .cut__art, .cut.is-swapping .cut__calls { opacity: 0; }
.cut__calls { transition: opacity 0.35s var(--ease); }
.lineart { color: var(--ink); }
.cut__scan { stroke: var(--accent); stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: 0; }
.cut__corner { stroke: var(--muted); stroke-width: 1px; vector-effect: non-scaling-stroke; fill: none; opacity: 0.7; }
.cut__dim line, .cut__dim path { stroke: var(--muted); stroke-width: 1px; vector-effect: non-scaling-stroke; fill: none; }
.cut__dim text { fill: var(--muted); font-family: var(--text); font-weight: 500; letter-spacing: 0.08em; }

.co { cursor: pointer; transition: opacity 0.35s var(--ease); }
.co__line { stroke: var(--accent); stroke-width: 1px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: 0% 50%; }
.co__dot { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.co__ldot { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.co__ring { fill: none; stroke: var(--accent); stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.co__num { fill: var(--accent); font-family: var(--text); font-weight: 500; text-anchor: middle; dominant-baseline: central; }
.co__hit { fill: transparent; }
.co__tag { opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); }
.co__tag rect { fill: var(--bg); stroke: var(--accent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.co__tag text { fill: var(--ink); font-family: var(--text); font-weight: 500; dominant-baseline: central; }
.cut.has-active .co { opacity: 0.22; }
.cut.has-active .co.is-active { opacity: 1; }
.co.is-active .co__tag { opacity: 1; }
.co.is-active .co__ring { opacity: 1; animation: ring 1.6s var(--ease) infinite; }
.co.is-active .co__num { fill: var(--ink); }
@keyframes ring { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }

.cut__readout { display: flex; align-items: baseline; gap: 16px; min-height: 40px; margin: 18px 0 18px; padding-bottom: 14px; box-shadow: 0 1px 0 var(--grid); }
.cut__readout b { font: 400 34px/1 var(--display); color: var(--accent); letter-spacing: 0.02em; min-width: 2ch; }
.cut__readout span { font: 500 19px/1.2 var(--text); }
.cut__readout i { font-style: normal; font: 500 12px/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-left: auto; }

.legend { margin: 0; padding: 0; list-style: none; columns: 3; column-gap: 24px; }
.legend li { break-inside: avoid; }
.legend button { display: flex; gap: 10px; width: 100%; text-align: left; padding: 5px 0; font: 400 14px/1.3 var(--text); color: var(--ink); transition: color 0.25s, transform 0.4s var(--ease); }
.legend button .n { color: var(--accent); min-width: 2.2ch; font-weight: 500; font-variant-numeric: tabular-nums; }
.legend button:hover, .legend button.is-active { transform: translateX(4px); }
.legend button.is-active { font-weight: 700; }
.legend button.is-active .n { color: var(--ink); }
.legend-title { font: 700 13px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.legend--4 { columns: 4; }

/* ═════════════ 2. СЕРИИ ═════════════ */
.series + .series { margin-top: calc(var(--major) * 2); }
/* шапка серии: правая колонка по высоте равна слову (от верха букв до базовой линии);
   нижняя обводка панели идёт по базовой линии слова — это единственный дивайдер */
.series__top { display: grid; grid-template-columns: auto 1fr; column-gap: 48px; align-items: stretch; padding: 40px var(--pad) 0; margin-bottom: var(--major); }
.series__top + .tabs { margin-top: 0; }
.series__word { font-size: clamp(88px, 12.5vw, 184px); line-height: 0.7; height: 0.7em; overflow: visible; }
.series__word > span { display: block; position: relative; top: var(--cap-shift, 0.1em); }
.series__meta { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding-bottom: 2px; }
.series__meta p { margin: 0; max-width: 44em; }
.series__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; }

.tabs { display: flex; gap: 0; margin-bottom: 0; overflow-x: auto; scrollbar-width: none; padding: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1 0 auto; padding: 18px 14px 16px; font: 500 14px/1 var(--text); letter-spacing: 0.04em; color: var(--ink); opacity: 0.6; white-space: nowrap; position: relative; transition: opacity 0.3s; }
.tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.5s var(--ease); }
.tabs button:hover { opacity: 1; }
.tabs button[aria-selected="true"] { opacity: 1; }
.tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.series__body { margin-top: var(--major); }

.wpn__stage { grid-column: 1 / span 9; }
.wpn__stage .cut { padding: 16px 0 8px; }
.wpn__stage .cut__stage { min-height: 440px; display: flex; align-items: center; }
.wpn__stage .cut__float { width: 100%; }
.wpn__side { grid-column: 11 / span 4; display: flex; flex-direction: column; gap: 20px; }
.wpn__title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.wpn__title h3 { font: 400 48px/0.9 var(--display); margin: 0; letter-spacing: 0.01em; }
.wpn__title span { font: 500 12px/1.4 var(--text); letter-spacing: 0.1em; text-transform: uppercase; text-align: right; }
.wpn__poster { transition: opacity 0.45s var(--ease); }
.wpn__poster.is-swapping { opacity: 0; }
.wpn__tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wpn__nocal { font: 500 12px/1.4 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.spec { margin: 0; display: grid; grid-template-columns: auto 1fr; box-shadow: 0 -1px 0 var(--grid); }
.spec dt, .spec dd { margin: 0; padding: 10px 0; box-shadow: 0 1px 0 var(--grid); font-size: 14px; }
.spec dt { font: 500 12px/1.6 var(--text); letter-spacing: 0.1em; text-transform: uppercase; padding-right: 24px; }
.spec dd { text-align: right; font-weight: 500; }
.frame, .frame__mat { position: relative; background: none; padding: 0; box-shadow: none; }
.frame img { width: 100%; }

/* Патрон в реальную величину */
.cal { --k: min(7px, calc((100vw - 150px) / 82)); display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px 40px; align-items: center; }
.cal[hidden] { display: none; }
.cal__fig { position: relative; margin: 0; padding: 40px 72px 52px 8px; overflow: hidden; }
.cal__img { position: relative; width: calc(var(--len) * var(--k)); }
.cal__img img { width: 100%; height: auto; }
.cal.is-real .cal__img { width: calc(var(--len) * 1mm); }
.cal__dim { position: absolute; color: var(--muted); font: 500 12px/1 var(--text); letter-spacing: 0.06em; white-space: nowrap; }
.cal__dim::before { content: ""; position: absolute; background: var(--muted); }
.cal__dim--total { left: 0; right: 0; bottom: -30px; height: 1px; background: var(--muted); }
.cal__dim--total::before, .cal__dim--case::before { left: 0; top: -5px; width: 1px; height: 11px; }
.cal__dim--total::after, .cal__dim--case::after { content: ""; position: absolute; right: 0; top: -5px; width: 1px; height: 11px; background: var(--muted); }
.cal__dim--case { left: 0; top: -22px; height: 1px; background: var(--muted); }
.cal__dim span { position: absolute; left: 50%; transform: translateX(-50%); background: var(--bg); padding: 0 8px; top: -6px; color: var(--ink); }
.cal__dim--diam { width: 1px; background: var(--muted); }
.cal__dim--diam::before { left: -5px; top: 0; width: 11px; height: 1px; }
.cal__dim--diam::after { content: ""; position: absolute; left: -5px; bottom: 0; width: 11px; height: 1px; background: var(--muted); }
.cal__dim--diam span { left: 14px; top: 50%; transform: translateY(-50%); padding: 0; background: none; }
.cal__info h4 { font: 400 44px/0.95 var(--display); margin: 0 0 16px; letter-spacing: 0.01em; }
.cal__info dl { margin: 0 0 16px; display: grid; grid-template-columns: 1fr auto; box-shadow: 0 -1px 0 var(--grid); }
.cal__info dt, .cal__info dd { margin: 0; padding: 8px 0; box-shadow: 0 1px 0 var(--grid); font-size: 14px; }
.cal__info dd { text-align: right; font-weight: 500; }
.cal__info p { margin: 0 0 16px; font-size: 14px; }
.cal__real { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.cal__real input { accent-color: var(--accent); margin-top: 3px; }
.cal__note { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.cal__btn[aria-expanded="true"] { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* Авто: проекции (один вид крупно), фото отдельно, звук мотора */
.car__main { grid-column: 1 / span 9; }
.car > aside { grid-column: 11 / span 4; }
.carv__views { display: flex; gap: 0; margin-bottom: 24px; }
.carv__views button { padding: 10px 16px; font: 500 12px/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); opacity: 0.7; box-shadow: inset 0 0 0 1px var(--grid); transition: opacity 0.3s, background-color 0.3s, color 0.3s; }
.carv__views button + button { margin-left: -1px; }
.carv__views button:hover { opacity: 1; }
.carv__views button[aria-selected="true"] { opacity: 1; color: var(--bg); background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.carv__stage { position: relative; width: 100%; aspect-ratio: 3.4; }
.carv__shake { position: absolute; inset: 0; transition: opacity 0.35s var(--ease); }
.carv.is-swapping .carv__shake { opacity: 0; }
.carv__view { position: absolute; inset: 0; margin: auto; height: 100%; width: auto; max-width: 100%; opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); pointer-events: none; }
.carv__view.is-on { opacity: 1; transform: none; }
.carv.is-running .carv__shake { animation: idle 0.11s steps(2, jump-none) infinite; }
@keyframes idle { 0% { transform: translate(0, 0); } 50% { transform: translate(0.8px, -0.6px); } 100% { transform: translate(-0.6px, 0.5px); } }
.lineart--car { color: #f2f2f0; }
.car__under { display: grid; grid-template-columns: 7fr 5fr; gap: 24px 40px; margin-top: 40px; align-items: start; }
.car__photo { margin: 0; }
.car__photo img { width: 100%; height: auto; }
.car__photo figcaption { margin-top: 12px; padding-top: 10px; box-shadow: 0 -1px 0 var(--grid); font: 500 12px/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.car__facts { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.car__facts .spec { width: 100%; }
.engine.is-on { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* ═════════════ 3. ВСЕ ПОСТЕРЫ (оглавление) ═════════════ */
.toc + .toc { margin-top: var(--major); }
.toc__head { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: baseline; padding-bottom: 16px; margin-bottom: 28px; box-shadow: 0 1px 0 var(--grid); }
.toc__head h3 { margin: 0; font: 400 40px/1 var(--display); letter-spacing: 0.02em; }
.toc__head h3 span { color: var(--muted); margin-left: 10px; }
.toc__head > span { font: 500 12px/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; }
.toc__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 24px; }
.toc__item { display: block; }
.toc__item img { width: 100%; transition: transform 0.6s var(--ease); }
.toc__item:hover img, .toc__item:focus-visible img { transform: translateY(-4px); }
/* подпись в одну строку: название · · · · номер */
.toc__cap { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; font-size: 14px; line-height: 1.3; }
.toc__cap b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc__cap i { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--muted); transform: translateY(-3px); }
.toc__cap span { color: var(--muted); font-variant-numeric: tabular-nums; }
.toc__price { display: block; margin-top: 6px; font-size: 13px; opacity: 0; transition: opacity 0.35s var(--ease); }
.toc__item:hover .toc__price, .toc__item:focus-visible .toc__price { opacity: 1; }
@media (hover: none) { .toc__price { opacity: 1; } }

/* ═════════════ 4. ФРАЗА ═════════════ */
.phrase { padding: var(--major) 0 calc(var(--major) * 2); }
.phrase__box { padding: 48px var(--pad) 56px; }
.phrase__text { font: 400 clamp(56px, 8.4vw, 136px)/0.92 var(--display); text-transform: uppercase; margin: 0; max-width: 13.5em; }
.phrase__text .w { display: inline-block; opacity: 0.14; transition: opacity 0.35s linear; }
.phrase__text .w.is-on { opacity: 1; }
.phrase__text .w.k { color: var(--accent); }
.phrase__note { margin-top: var(--major); }
.phrase__note > .panel:not(.sect) { grid-column: 5 / span 10; }
.phrase__note p { margin: 0; max-width: 44em; }

/* ═════════════ 5. ЖУРНАЛЫ ═════════════ */
.mag + .mag { margin-top: calc(var(--major) * 2); }
.mag__head { margin-bottom: var(--major); }
.mag__head > :first-child { grid-column: 1 / span 4; }
.mag__head > :last-child { grid-column: 6 / span 9; }
.mag__head h3 { font: 400 clamp(56px, 6.4vw, 96px)/0.86 var(--display); text-transform: uppercase; margin: 0; }
.mag__head h3 small { display: block; font: 500 14px/1 var(--text); letter-spacing: 0.14em; color: var(--accent); margin-bottom: 18px; }
.mag__buy { display: flex; flex-direction: column; gap: 24px; }
.mag__buy p { margin: 0; max-width: 36em; }
.mag__cta { display: flex; align-items: center; gap: 28px; }
.spread { display: grid; grid-template-columns: 1fr 1fr; position: relative; background: #000; }
.spread::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255, 255, 255, 0.16); }
.spread img { width: 100%; }
.spreads .s1 { grid-column: 1 / span 12; margin: 0; }
.spreads .s2 { grid-column: 3 / span 12; margin: var(--major) 0 0; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 20px 0 0; padding: 0; list-style: none; }
.steps li { font: 500 12px/1.4 var(--text); letter-spacing: 0.1em; text-transform: uppercase; padding-top: 12px; box-shadow: 0 -1px 0 var(--grid); }
.steps li b { display: block; color: var(--accent); font-weight: 500; margin-bottom: 4px; }
.mag1 > :first-child { grid-column: 1 / span 4; }
.mag1 > :last-child { grid-column: 6 / span 9; margin: 0; }
.mag1__side .cover { width: 100%; margin-bottom: 24px; }

/* ═════════════ 6. ПОДАРОК ═════════════ */
.gift > :first-child { grid-column: 1 / span 7; }
.gift > :last-child { grid-column: 9 / span 6; margin: 0; }
.gift h2 { font-size: clamp(56px, 6vw, 96px); margin: 0 0 32px; }
.gift h2 em { font-style: normal; color: var(--accent); }
.gift__img img { width: 100%; }
.gift__img figcaption { margin-top: 12px; font: 500 12px/1.4 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.svc { margin: 40px 0 40px; box-shadow: 0 -1px 0 var(--grid); }
.svc div { display: grid; grid-template-columns: 9.5em 1fr; gap: 24px; padding: 18px 0; box-shadow: 0 1px 0 var(--grid); }
.svc dt { font: 500 12px/1.7 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.svc dd { margin: 0; }
.svc dd b { font-weight: 700; }
.svc dd span { display: block; font-size: 15px; }

/* ═════════════ 7. ФУТЕР ═════════════ */
.ftr { padding: var(--major) 0; box-shadow: 0 -1px 0 var(--grid); }
.ftr__grid > :first-child { grid-column: 1 / span 4; }
.ftr__grid > :last-child { grid-column: 6 / span 9; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ftr__logo { margin: 0 0 28px; }
.ftr__logo img { display: block; width: clamp(160px, 16vw, 240px); height: auto; }
.ftr h4 { font: 500 12px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr ul a:hover { color: var(--accent); }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: var(--major); font-size: 13px; }

/* ═════════════ адаптив ═════════════ */
@media (max-width: 1100px) {
  .wpn__side { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .series__top { column-gap: 32px; }
  .ftr__grid > :last-child { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  :root { --wrap: calc(100% - 32px); --pad: 16px; }
  .hdr { height: 60px; }
  .nav { gap: 18px; font-size: 12px; letter-spacing: 0.06em; }
  .nav .nav__opt { display: none; }
  .cart { height: 36px; padding: 0 10px; }
  .sec { padding: 64px 0 96px; }
  .sec-head { margin-bottom: 48px; }
  .sect { width: 100%; }
  .sect b { font-size: 48px; }
  .hero { padding: 92px 0 64px; }
  .hero__text { padding: 24px var(--pad); }
  .lead { font-size: 17px; }
  .hero__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hero__facts div { font-size: 11px; letter-spacing: 0.06em; }
  .hero__cap .nav__opt { display: none; }

  .co.is-active .co__num, .co.is-active .co__ldot, .co.is-active .co__line { display: inline; }
  .co.is-active .co__tag { display: inline; }
  .legend, .legend--4 { columns: 2; column-gap: 16px; }
  .legend button { font-size: 13.5px; padding: 8px 0; }
  .cut__readout span { font-size: 17px; }
  .cut__readout i { display: none; }
  .series + .series { margin-top: 96px; }
  .series__top { grid-template-columns: 1fr; padding-top: 24px; row-gap: 20px; }
  .series__word { font-size: 96px; order: 2; }
  .series__meta { order: 1; padding-bottom: 0; gap: 16px; }
  .series__body { margin-top: 48px; }
  .wpn__stage .cut { padding: 20px 0 8px; }
  .wpn__stage .cut__stage { min-height: 0; }
  .wpn__side { grid-template-columns: 1fr; }
  .cal { grid-template-columns: 1fr; }
  .cal__fig { padding: 36px 56px 48px 0; }
  .car__under { grid-template-columns: 1fr; margin-top: 32px; }
  .carv__views button { padding: 10px 12px; }
  .toc__head h3 { font-size: 32px; }
  .toc__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; scrollbar-width: none; }
  .toc__list::-webkit-scrollbar { display: none; }
  .toc__list li { flex: 0 0 46%; scroll-snap-align: start; }
  .toc__list--l li { flex-basis: 80%; }
  .phrase { padding: 64px 0 96px; }
  .phrase__box { padding: 28px var(--pad) 32px; }
  .phrase__text { font-size: 54px; }
  .phrase__note { margin-top: 48px; }
  .spreads .s2 { margin-top: 16px; }
  .spreads .spread { grid-template-columns: 1fr; }
  .spreads .spread::after { display: none; }
  .spreads .spread img + img { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .mag + .mag { margin-top: 96px; }
  .mag__head { margin-bottom: 48px; }
  .mag__cta { width: 100%; justify-content: space-between; }
  .svc div { grid-template-columns: 1fr; gap: 4px; }
  .ftr__grid > :last-child { grid-template-columns: 1fr; }
  .btn { height: 52px; padding: 0 20px; }
  .btn--sm { height: 44px; }
}

/* ═════════════ СЕТКА v3: блок подгоняется под сетку (размеры считает js/grid.js) ═════════════ */
.panel {
  background-color: var(--bg); background-clip: padding-box; box-shadow: none;
  /* обводку рисует сама сетка: прозрачная граница слева и сверху, справа и снизу линия лежит сразу за краем */
  border-left: 1px solid transparent; border-top: 1px solid transparent;
  padding: max(16px, calc(var(--cell) / 4));
}
.g, .g14 { display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); column-gap: 0; row-gap: var(--cell); align-items: stretch; }
.is-measuring .g, .is-measuring .g14 { align-items: start !important; }
.hdr { box-shadow: none; }
/* вертикальный ритм: внутри раздела блоки через клетку, разделы — через две */
.hero { padding: var(--cell) 0 0; min-height: 0; }
.sec, .phrase { padding: calc(var(--cell) * 2) 0 0; }
.ftr { padding: calc(var(--cell) * 2) 0 var(--cell); box-shadow: none; }
.sec-head, .series__top, .mag__head, .toc { margin: 0 0 var(--cell) !important; }
.series + .series, .mag + .mag { margin-top: calc(var(--cell) * 2); }
.series__top + .tabs, .tabs + .series__body { margin-top: 0; }
.series__body { margin-top: 0; }
.phrase__note, .ftr__bottom { margin-top: var(--cell); }
.toc + .toc { margin-top: 0; }
.toc:last-child { margin-bottom: 0 !important; }
.sec-head, .phrase__note { align-items: start; }
.sec-head:last-child { margin-bottom: 0 !important; }
/* заголовок раздела 3×1 (или 3×2, если название не влезает в строку) */
.sect { height: auto; min-height: var(--cell); padding-top: 0; padding-bottom: 0; }
.sect.is-2 span { line-height: 0.95; }
/* шапка серии: низ панели = базовая линия слова; верхний отступ ставит js/grid.js */
.series__top { padding-bottom: 0; }
/* вкладки: одна клетка высотой, линия выбора — по нижнему краю */
.tabs { padding: 0; align-items: stretch; }
.tabs button { display: flex; align-items: center; justify-content: center; padding: 0 14px; }
/* раскладка по колонкам: десктоп 14 */
.hero__text { grid-column: 1 / span 6; padding: max(16px, calc(var(--cell) / 4)); }  /* вплотную к схеме: одна общая линия */
.hero__fig { grid-column: 7 / span 8; }
.sect { grid-column: 1 / span 3; }
.sec-head > .panel:not(.sect), .phrase__note > .panel:not(.sect) { grid-column: 5 / span 10; }
.wpn__stage, .car__main { grid-column: 1 / span 9; grid-row: 1; }
.wpn > .cal { grid-column: 1 / span 9; grid-row: 2; margin: 0; }
.wpn__side, .car > aside { grid-column: 11 / span 4; grid-row: 1 / span 2; }
.wpn, .car { row-gap: 0; }
.mag__head > :first-child, .mag1 > :first-child { grid-column: 1 / span 4; }
.mag__head > :last-child, .mag1 > :last-child { grid-column: 6 / span 9; }
.spreads .s1 { grid-column: 1 / span 12; }
.spreads .s2 { grid-column: 3 / span 12; margin: 0; }
.gift > :first-child { grid-column: 1 / span 7; }
.gift > :last-child { grid-column: 9 / span 6; }
.ftr__grid > :first-child { grid-column: 1 / span 4; }
.ftr__grid > :last-child { grid-column: 6 / span 9; }
/* планшет: 8 колонок */
:root[data-cols="8"] .hero__text, :root[data-cols="8"] .hero__fig,
:root[data-cols="8"] .wpn__stage, :root[data-cols="8"] .wpn > .cal, :root[data-cols="8"] .wpn__side,
:root[data-cols="8"] .car__main, :root[data-cols="8"] .car > aside,
:root[data-cols="8"] .spreads .s1, :root[data-cols="8"] .spreads .s2,
:root[data-cols="8"] .gift > *, :root[data-cols="8"] .ftr__grid > * { grid-column: 1 / -1; grid-row: auto; }
:root[data-cols="8"] .sect { grid-column: 1 / span 3; }
:root[data-cols="8"] .sec-head > .panel:not(.sect), :root[data-cols="8"] .phrase__note > .panel:not(.sect) { grid-column: 4 / span 5; }
:root[data-cols="8"] .mag__head > :first-child, :root[data-cols="8"] .mag1 > :first-child { grid-column: 1 / span 3; }
:root[data-cols="8"] .mag__head > :last-child, :root[data-cols="8"] .mag1 > :last-child { grid-column: 4 / span 5; }
:root[data-cols="8"] .wpn__side, :root[data-cols="8"] .car > aside { margin-top: var(--cell); display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-content: start; }
:root[data-cols="8"] .wpn__title, :root[data-cols="8"] .wpn__tools, :root[data-cols="8"] .series__row { grid-column: 2; }
:root[data-cols="8"] .wpn__poster { grid-column: 1; grid-row: 1 / span 4; }
:root[data-cols="8"] .spreads .s2 { margin-top: 0; }
/* телефон: 4 колонки, всё во всю ширину */
:root[data-cols="4"] .g > *, :root[data-cols="4"] .g14 > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
:root[data-cols="4"] .wpn__side, :root[data-cols="4"] .car > aside { margin-top: var(--cell); }
:root[data-cols="4"] .sect { width: auto; }
:root[data-cols="4"] .sec-head > .panel:not(.sect) { margin-top: 0; }
:root[data-cols="4"] .sec-head, :root[data-cols="4"] .phrase__note { row-gap: 0; }
/* на узких экранах: колонки внутри панелей проще */
:root[data-cols="8"] .legend--4 { columns: 3; }
:root[data-cols="8"] .cal, :root[data-cols="4"] .cal { grid-template-columns: 1fr; }
:root[data-cols="8"] .series__top { grid-template-columns: 1fr; row-gap: 20px; }
:root[data-cols="8"] .series__word { order: 2; }
:root[data-cols="8"] .series__meta { order: 1; padding-bottom: 0; gap: 16px; }
:root[data-cols="8"] .ftr__grid > :last-child { grid-template-columns: repeat(3, 1fr); }
:root[data-cols="4"] .sec-head > .panel:not(.sect) .display { font-size: 44px; }
/* первый экран: одна колонка, панели вплотную */
.hero__grid { row-gap: 0; }
.hero__grid > .panel { grid-column: 1 / -1 !important; grid-row: auto !important; }
.hero__title { font-size: 100px; margin: 20px 0 0; white-space: nowrap; }
.hero__title > span { display: inline-block; width: max-content; }
.hero__title.l2 .w3, .hero__title.l3 .w2, .hero__title.l3 .w3 { display: block; }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__cap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.hero__about .lead { max-width: 46em; }
.hero__cta { display: flex; align-items: center; gap: 24px 64px; flex-wrap: wrap; }
.hero__cta .hero__facts { margin: 0; padding: 0; box-shadow: none; display: flex; gap: 48px; }
:root[data-cols="4"] .hero__cta { flex-direction: column; align-items: flex-start; }
:root[data-cols="4"] .hero__cta .hero__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
/* картинки не выходят за панель */
.panel img { max-width: 100%; }

/* ═════════════ КРУГ 5 ═════════════ */
/* обводка панелей — белая, 1 px; лежит на линиях сетки и перекрывает тусклую линию */
.panel { border-left: 1px solid #fff; border-top: 1px solid #fff; box-shadow: 1px 1px 0 0 #fff; }

/* заголовок раздела: номер отдельной клеткой + название + подзаголовок, всё в одну клетку высотой */
.shead { margin: 0 0 var(--cell); align-items: stretch; row-gap: 0; }
.shead > .panel { margin: 0; display: flex; align-items: center; min-height: var(--cell); padding-top: 0; padding-bottom: 0; }
.shead__no { grid-column: 1 / span 1; justify-content: center; font: 400 calc(var(--cell) * 0.56)/1 var(--display); color: var(--accent); }
.shead__title span { position: relative; top: 0.05em; }
.shead__no { padding-top: 0.08em !important; }
.shead__title { grid-column: 2 / span 3; font: 400 clamp(36px, calc(var(--cell) * 0.5), 52px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; }
.shead__title span { display: block; }
.shead__sub { grid-column: 5 / -1; font-size: 19px; line-height: 1.35; }
:root[data-cols="8"] .shead__sub { grid-column: 5 / -1; font-size: 17px; }
:root[data-cols="4"] .shead__no { grid-column: 1 / span 1 !important; }
:root[data-cols="4"] .shead__title { grid-column: 2 / span 3 !important; }
:root[data-cols="4"] .shead__sub { grid-column: 1 / -1 !important; font-size: 16px; padding-top: 12px; padding-bottom: 12px; }
.phrase__box + .shead { margin-top: var(--cell); margin-bottom: var(--cell); }
.shead + .phrase__note { margin-top: 0; }
.phrase__note > .panel { grid-column: 1 / span 10 !important; }
:root[data-cols="8"] .phrase__note > .panel, :root[data-cols="4"] .phrase__note > .panel { grid-column: 1 / -1 !important; }

/* вкладки моделей — явные кнопки: своя ячейка с обводкой, hover, активная залита акцентом */
.tabs { padding: 0 max(16px, calc(var(--cell) / 4)); gap: 8px; align-items: center; }
.tabs button {
  flex: 1 0 auto; height: 44px; padding: 0 14px; opacity: 1; color: #fff; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); transition: box-shadow 0.25s, background-color 0.25s;
}
.tabs button::after { display: none; }
.tabs button:hover { box-shadow: inset 0 0 0 1px #fff; background-color: rgba(255, 255, 255, 0.06); }
.tabs button[aria-selected="true"] { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: #fff; }
:root[data-cols="4"] .tabs { flex-wrap: nowrap; }

/* оружие и авто: левый и правый блок вплотную, одна общая линия; постер крупнее */
.wpn__stage, .car__main { grid-column: 1 / span 9 !important; }
.wpn__side, .car > aside { grid-column: 10 / span 5 !important; grid-row: 1 !important; margin-top: 0 !important; }
:root[data-cols="8"] .wpn__stage, :root[data-cols="8"] .car__main, :root[data-cols="8"] .wpn__side, :root[data-cols="8"] .car > aside,
:root[data-cols="4"] .wpn__stage, :root[data-cols="4"] .car__main, :root[data-cols="4"] .wpn__side, :root[data-cols="4"] .car > aside { grid-column: 1 / -1 !important; grid-row: auto !important; }
.wpn, .car { row-gap: 0 !important; }
:root[data-cols="8"] .wpn__side, :root[data-cols="8"] .car > aside { display: flex; flex-direction: column; }
.wpn__side { gap: 24px; }
.buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.buy .btn { height: 52px; padding: 0 22px; gap: 12px; }
.btn.is-added { background: #fff; color: var(--bg); }
/* патрон в правой колонке, сразу в реальную величину */
.wpn__side .cal { display: block; margin: 0; padding: 20px 0 0; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25); background: none; border: 0; }
.cal__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 4px; font-size: 14px; }
.cal__head b { font: 400 30px/1 var(--display); letter-spacing: 0.01em; }
.cal__head span { color: var(--muted); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.wpn__side .cal__fig { padding: 36px 64px 44px 0; }
.wpn__side .cal__note { color: var(--muted); font-size: 12px; margin: 0; }
.wpn__nocal { margin: 0; padding-top: 20px; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25); }
/* название машины — одна строка, подзаголовок под ним */
.car__title h3 { font: 400 48px/0.95 var(--display); margin: 0; letter-spacing: 0.01em; }
.car__title p { margin: 8px 0 0; font: 500 12px/1.4 var(--text); letter-spacing: 0.12em; text-transform: uppercase; }
.car__side { gap: 24px; }

/* все постеры: круглая кнопка корзины на каждой карточке (исключение из острых углов — по просьбе владельца) */
.toc__card { position: relative; }
.toc__add {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50% !important;
  display: grid; place-items: center; background: var(--bg); color: #fff; box-shadow: 0 0 0 1px #fff; cursor: pointer;
  transition: background-color 0.25s, transform 0.4s var(--ease);
}
.toc__add:hover { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); transform: scale(1.06); }
.toc__add .i-ok { display: none; }
.toc__add.is-in { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.toc__add.is-in .i-cart { display: none; }
.toc__add.is-in .i-ok { display: block; }

/* журналы: листаемый разворот */
.mags { align-items: stretch; row-gap: 0; }
.mags__book { grid-column: 1 / span 10; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.mags__info { grid-column: 11 / span 4; display: flex; flex-direction: column; gap: 20px; }
:root[data-cols="8"] .mags__book, :root[data-cols="8"] .mags__info, :root[data-cols="4"] .mags__book, :root[data-cols="4"] .mags__info { grid-column: 1 / -1 !important; }
.mags__info h3 { font: 400 40px/0.95 var(--display); margin: 0 0 12px; text-transform: uppercase; }
.mags__info p { margin: 0 0 8px; font-size: 15px; }
.mags__hint { color: var(--muted); font-size: 12px; margin-top: auto !important; }
.mags__switch { display: flex; gap: 8px; }
.mags__switch button { flex: 1; height: 44px; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); font: 500 14px/1 var(--text); cursor: pointer; transition: box-shadow 0.25s, background-color 0.25s; }
.mags__switch button:hover { box-shadow: inset 0 0 0 1px #fff; }
.mags__switch button[aria-selected="true"] { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mags__nav { display: flex; align-items: center; justify-content: center; gap: 24px; }
.mags__arrow { width: 52px; height: 44px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); cursor: pointer; transition: box-shadow 0.25s, background-color 0.25s; }
.mags__arrow:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #fff; background: rgba(255, 255, 255, 0.06); }
.mags__arrow:disabled { opacity: 0.3; cursor: default; }
.mags__count { font: 500 13px/1 var(--text); letter-spacing: 0.1em; min-width: 5em; text-align: center; color: var(--muted); }
.book { width: 100%; display: flex; justify-content: center; outline: none; }
.book__spread { position: relative; display: flex; perspective: 2200px; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.book__page { flex: 1; position: relative; overflow: hidden; background: #000; }
.book__page img, .book__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book__page.is-empty { background: transparent; }
.book.is-single .book__page--l { display: none; }
/* сгиб: лёгкая тень у корешка */
.book:not(.is-single) .book__page--l:not(.is-empty)::after, .book:not(.is-single) .book__page--r:not(.is-empty)::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none;
}
.book:not(.is-single) .book__page--l::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.45), transparent); }
.book:not(.is-single) .book__page--r::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.45), transparent); }
.book__leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; z-index: 3; will-change: transform; }
.book__leaf--r { left: 50%; transform-origin: 0% 50%; }
.book__leaf--l { left: 0; transform-origin: 100% 50%; }
.book__leaf--full { left: 0; width: 100%; transform-origin: 0% 50%; }
.book__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #000; }
.book__face--back { transform: rotateY(180deg); }
.book__shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }

/* мелочи */
.btn { cursor: pointer; }

/* ═════════════ КРУГ 6 ═════════════ */
.hdr { box-shadow: 0 1px 0 var(--grid); }

/* первый экран: нижняя панель — описание и кнопка слева, плитка цифр 2×2 справа */
.hero__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; }
.hero__about { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero__about .lead { margin: 0; }
.hero__tiles { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.hero__tiles div { padding: 14px 20px; }
.hero__tiles div:nth-child(even) { box-shadow: inset 1px 0 0 rgba(255,255,255,.25); }
.hero__tiles div:nth-child(3) { box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.hero__tiles div:nth-child(4) { box-shadow: inset 1px 0 0 rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.25); }
.hero__tiles dt { font: 400 44px/1 var(--display); letter-spacing: 0.02em; }
.hero__tiles dd { margin: 6px 0 0; font: 500 12px/1.35 var(--text); letter-spacing: 0.1em; text-transform: uppercase; }
:root[data-cols="4"] .hero__bottom { grid-template-columns: 1fr; }
:root[data-cols="4"] .hero__tiles div:nth-child(odd) { padding-left: 0; }

/* шапки серий: слово по центру панели по вертикали */
.series__top { align-items: center; padding: max(16px, calc(var(--cell) / 4)) !important; }
.series__meta { justify-content: center; gap: 14px; padding-bottom: 0; }

/* оружие: схема сразу над легендой, без воздуха */
.wpn__stage .cut__stage { min-height: 0 !important; display: block; }
.wpn__stage .cut { padding: 0; }
.cut__readout { margin: 6px 0 12px; padding-bottom: 10px; }
.legend button { padding: 4px 0; }
.hero__fig .cut { margin-top: 4px; }
/* правая колонка: название, постер, патрон, цена; кнопка прижата к низу */
.wpn__side { display: flex !important; flex-direction: column; gap: 18px; }
.wpn__side > .buy { margin-top: auto; flex-direction: column; align-items: stretch; gap: 12px; }
.wpn__side > .buy .btn { justify-content: center; }
.wpn__side .cal { padding-top: 16px; }
.wpn__side .cal__fig { padding: 30px 60px 40px 0; }
.cal.is-real .cal__img { width: calc(var(--len) * var(--pxmm, 1mm)); }
.cal__status { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.cal__fit { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; cursor: pointer; }
.cal__fit:hover { color: var(--accent); }
.is-calibrated .cal__state { color: #fff; }
/* авто: таблица под фото в левом блоке; справа название, постер, цена, кнопка внизу */
.car__under { margin-top: 20px; align-items: center; }
.car__main .spec--cols { margin-top: 20px; grid-template-columns: auto 1fr auto 1fr; column-gap: 24px; }
.car__main .spec--cols dd { text-align: left; }
:root[data-cols="4"] .car__main .spec--cols { grid-template-columns: auto 1fr; }
:root[data-cols="4"] .car__main .spec--cols dd { text-align: right; }
.carv__views { margin-bottom: 12px; }

/* 04: подзаголовок в той же плашке, что и заголовок */
.shead__title--wide { grid-column: 2 / span 9 !important; gap: 24px; align-items: baseline !important; padding-top: 0; }
.shead__title--wide { align-items: center !important; }
.shead__title--wide small { font: 400 19px/1.3 var(--text); text-transform: none; letter-spacing: 0; color: var(--ink); white-space: normal; }
:root[data-cols="8"] .shead__title--wide { grid-column: 2 / -1 !important; }
:root[data-cols="4"] .shead__title--wide { grid-column: 2 / -1 !important; flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 4px; padding-top: 10px; padding-bottom: 10px; }
:root[data-cols="4"] .shead__title--wide small { font-size: 14px; }
/* блок с фразой: обводка цвета сетки, не белая */
.phrase__box { border-left-color: var(--grid); border-top-color: var(--grid); box-shadow: 1px 1px 0 0 var(--grid); }

/* журналы: одна страница крупно */
.mags__book { gap: 14px; }

/* подарок: постер и тубус */
.gift__img figcaption { margin-top: 14px; }

/* футер — одна панель с внутренними дивайдерами */
.ftr__panel { display: grid; grid-template-columns: 4fr 9fr; gap: 0 48px; padding: 0 !important; }
.ftr__brand, .ftr__cols, .ftr__tech { padding: max(16px, calc(var(--cell) / 4)); }
.ftr__brand p { margin: 0; }
.ftr__brand .ftr__logo { margin-bottom: 16px; }
.ftr__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; box-shadow: inset 1px 0 0 rgba(255,255,255,.25); }
.ftr__tech { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; color: var(--muted); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.ftr__tech .ph { color: #fff; }
:root[data-cols="8"] .ftr__panel, :root[data-cols="4"] .ftr__panel { grid-template-columns: 1fr; }
:root[data-cols="8"] .ftr__cols, :root[data-cols="4"] .ftr__cols { box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
:root[data-cols="4"] .ftr__cols { grid-template-columns: 1fr; }

/* калибровка патрона: панель поверх страницы */
.calib { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 16px; }
.calib[hidden] { display: none; }
.calib__panel { background: var(--bg); box-shadow: 0 0 0 1px #fff; padding: 24px; width: min(720px, 100%); max-height: 100%; overflow: auto; }
.calib__panel h3 { font: 400 36px/1 var(--display); margin: 0 0 8px; text-transform: uppercase; }
.calib__panel p { margin: 0 0 12px; }
.calib__stage { padding: 16px 0; overflow: hidden; }
.calib__card { position: relative; box-shadow: inset 0 0 0 2px var(--accent); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.calib__grip { position: absolute; right: -10px; bottom: -10px; width: 22px; height: 22px; background: var(--accent); border-radius: 50% !important; cursor: nwse-resize; touch-action: none; }
.calib__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; font-size: 14px; }
.calib__range { flex: 1; min-width: 160px; accent-color: var(--accent); }
.calib__diag { width: 110px; height: 40px; padding: 0 10px; background: var(--bg); color: #fff; border: 1px solid rgba(255,255,255,.4); font: inherit; }
.calib__val { color: var(--muted); font-size: 13px; }
.calib__alt { margin: 8px 0 16px; font-size: 14px; }
.calib__alt summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.calib__hint { color: var(--muted); font-size: 12px; }
.calib__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.calib__btn { height: 44px; padding: 0 18px; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); cursor: pointer; font: 500 14px/1 var(--text); }
.calib__btn:hover { box-shadow: inset 0 0 0 1px #fff; }

/* ── балансировка высот (круг 6): пустого места внизу панели меньше клетки ── */
/* схема оружия: высота зоны — по текущей модели, без резерва под самую высокую (РГД-5).
   Порядок в левом блоке: схема у верхнего края → сразу строка «Наведите…» → легенда.
   Если правая колонка выше, свободное место остаётся только внизу, после легенды. */
:root:not([data-cols="4"]) .wpn__stage { display: flex; flex-direction: column; justify-content: flex-start; }
:root:not([data-cols="4"]) .wpn__stage .cut__stage { height: auto; min-height: 0 !important; display: block !important; }
/* число колонок легенды подбирает js/main.js (MART.fitHooks) замером; без перехода, иначе при
   «уменьшении движения» (transition-duration на всех элементах) замер видит старое значение */
#wpn-legend { transition: none !important; }
#wpn-legend[style*="--lg-pad"] button { padding-top: var(--lg-pad); padding-bottom: var(--lg-pad); }
.wpn__stage .cut__float { width: 100%; }
/* правая колонка оружия компактнее: цена и кнопка в одной строке внизу */
.wpn__side { gap: 14px !important; }
.wpn__side > .buy { flex-direction: row !important; align-items: center !important; justify-content: space-between; }
.wpn__side .cal { padding-top: 12px; }
.wpn__side .cal__fig { padding: 28px 60px 36px 0; }
.cal__note { margin: 0; }
.cal__status { margin-top: 4px; }
/* авто: таблица одной колонкой под фото */
.car__main .spec--cols { grid-template-columns: auto 1fr !important; }
.car__main .spec--cols dd { text-align: right !important; }
.car__side > .buy { margin-top: auto; }
/* журналы: что внутри */
.mags__toc { margin: 4px 0 0; padding: 0; list-style: none; box-shadow: 0 -1px 0 rgba(255,255,255,.25); }
.mags__toc li { padding: 8px 0; font-size: 14px; box-shadow: 0 1px 0 rgba(255,255,255,.12); display: flex; gap: 12px; }
.mags__toc b { color: var(--accent); font-weight: 500; min-width: 1.6em; }
.mags__info > .buy { margin-top: auto; }
.mags__hint { margin-top: 0 !important; }
/* подарок: постер крупно, тубус — плашкой поверх угла */
/* постер и тубус рядом: тубус стоит справа в полный рост, чуть заходит на угол постера */
.gift__pair { display: block; position: relative; }
.gift__pair > img:first-child { display: block; width: 80%; }
.gift__img .gift__tube { position: absolute; right: 2%; bottom: 0; height: 82%; width: auto; }


/* у РГД-5 вместо патрона подпись — того же места, что патрон, чтобы колонка не пустела */
.wpn__side .wpn__nocal { min-height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font: 400 30px/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }

/* авто: сцена проекций и фото — постоянной высоты для всех моделей, чтобы левый блок не прыгал */
.carv__stage { aspect-ratio: 3.3 !important; }
.car__photo img { height: 132px; width: 100%; object-fit: contain; object-position: left center; }

/* ═════════════ КАРТОЧКА ПОСТЕРА ═════════════ */
.card-top { padding: var(--cell) 0 0; }
.card-top .g { row-gap: 0; }
.crumbs { grid-column: 1 / -1; display: flex; align-items: center; padding-top: 0 !important; padding-bottom: 0 !important; min-height: calc(var(--cell) / 2); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font: 500 12px/1.4 var(--text); letter-spacing: 0.1em; text-transform: uppercase; }
.crumbs li + li::before { content: "/"; color: var(--muted); margin: 0 10px; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--muted); }
.gallery { grid-column: 1 / span 9; grid-row: 2; display: flex; flex-direction: column; gap: 14px; }
.gallery__main { margin: 0; }
.gallery__main img { width: 100%; aspect-ratio: 2000 / 1422; object-fit: contain; background: #000; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery__thumbs button { display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; color: var(--muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.gallery__thumbs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.25); transition: box-shadow .25s; }
.gallery__thumbs button:hover img { box-shadow: 0 0 0 1px #fff; }
.gallery__thumbs button.is-on { color: #fff; }
.gallery__thumbs button.is-on img { box-shadow: 0 0 0 2px var(--accent); }
.buybox { grid-column: 10 / span 5; grid-row: 2; display: flex; flex-direction: column; gap: 14px; }
.buybox__h1 { font-size: clamp(64px, 6vw, 96px); margin: 0; }
.buybox__sub { margin: 0; font: 500 12px/1.5 var(--text); letter-spacing: 0.12em; text-transform: uppercase; }
.buybox__price { font: 400 40px/1 var(--display); }
.buybox__price .ph { font-size: 22px; }
.buybox__btn { justify-content: center; }
.buybox__ship { margin: 0; font-size: 14px; color: var(--muted); }
.buybox__sku { margin: -4px 0 0; font: 500 12px/1.4 var(--text); letter-spacing: 0.04em; color: var(--muted); }   /* артикул — мельком */
.buybox__desc { margin: 0; font-size: 15px; }
.buybox__print { margin-top: 2px; }
.buybox__main, .buybox__more { display: flex; flex-direction: column; gap: 14px; }
:root[data-cols="8"] .gallery, :root[data-cols="8"] .buybox { grid-column: 1 / -1 !important; grid-row: auto !important; }
:root[data-cols="8"] .buybox { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; align-items: start; }
:root[data-cols="8"] .gallery { order: 2; }
:root[data-cols="8"] .crumbs { order: 0; }
:root[data-cols="4"] .gallery, :root[data-cols="4"] .buybox { grid-column: 1 / -1 !important; grid-row: auto !important; }
:root[data-cols="4"] .buybox { order: 1; }
:root[data-cols="4"] .gallery { order: 2; }
:root[data-cols="4"] .crumbs { order: 0; }
.card-cut { grid-column: 1 / -1; margin: 0; }
.card-pair { row-gap: 0; }
.card-cal { grid-column: 1 / span 6; }
.card-ttx { grid-column: 7 / span 8; }
.card-cal .cal { display: block; margin: 0; padding: 0; box-shadow: none; }
.card-cal .cal__fig { padding: 34px 64px 42px 0; }
.card-h3 { font: 400 30px/1 var(--display); text-transform: uppercase; margin: 0 0 14px; letter-spacing: 0.01em; }
.spec--ttx { grid-template-columns: auto 1fr; }
.spec--cols4 { grid-template-columns: auto 1fr auto 1fr; column-gap: 24px; }
.spec--ttx dt, .spec--ttx dd { padding: 6px 0; font-size: 13px; }
.card-ttx .card-h3, .card-cal .card-h3 { margin-bottom: 10px; }
.spec--cols4 dd { text-align: left; }
:root[data-cols="4"] .spec--cols4 { grid-template-columns: auto 1fr; }
:root[data-cols="4"] .spec--cols4 dd { text-align: right; }
.buybox__svc dd { text-align: right; }
:root[data-cols="8"] .card-cal, :root[data-cols="8"] .card-ttx, :root[data-cols="4"] .card-cal, :root[data-cols="4"] .card-ttx { grid-column: 1 / -1 !important; }
.facts { grid-column: 1 / -1; list-style: none; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; }
.facts li { display: flex; gap: 18px; }
.facts li > b { font: 400 44px/0.9 var(--display); color: var(--accent); min-width: 1.4em; }
.facts h3 { margin: 0 0 6px; font: 700 15px/1.3 var(--text); text-transform: uppercase; letter-spacing: 0.06em; }
.facts p { margin: 0; font-size: 15px; line-height: 1.5; }
:root[data-cols="4"] .facts { grid-template-columns: 1fr; }
.page-card .mags__book { grid-column: 1 / span 9; }
.page-card .mags__info { grid-column: 10 / span 5; }
.toc__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.page-card .toc { grid-column: 1 / -1; }
.wpn__title h3 a:hover { color: var(--accent); }

/* карточка: круг 2 */
.page-card .sec { padding-top: var(--cell); }
.page-card .ftr { padding-top: var(--cell); }
:root[data-cols="14"] .buybox, :root[data-cols="14"] .buybox__main, :root[data-cols="14"] .buybox__more { gap: 10px; }
:root[data-cols="14"] .buybox .spec dt, :root[data-cols="14"] .buybox .spec dd { padding: 8px 0; }
.gallery__thumbs { grid-template-columns: repeat(6, 1fr); gap: 10px; }
:root[data-cols="4"] .gallery__thumbs { grid-template-columns: repeat(3, 1fr); }
.gallery__main { position: relative; }
.gph { display: flex; align-items: center; justify-content: center; text-align: center; aspect-ratio: 16 / 10; font-style: normal; font-size: 11px; color: var(--muted); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,.04) 10px 11px); }
.gph--big { aspect-ratio: 2000 / 1422; flex-direction: column; gap: 8px; }
.gph--big b { font: 400 34px/1 var(--display); color: #fff; text-transform: uppercase; max-width: 80%; }
.gph--big span { font-size: 13px; }
.gallery__thumbs button.is-on .gph { box-shadow: inset 0 0 0 2px var(--accent); }
/* 10 фактов: тонкие дивайдеры между фактами — горизонтальные между рядами, вертикальная между колонками */
.facts { gap: 0 !important; }
.facts li { padding: 20px 0; box-shadow: inset 0 -1px 0 rgba(255,255,255,.25); }
.facts li:nth-child(odd) { padding-right: 32px; }
.facts li:nth-child(even) { padding-left: 32px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.25), inset 1px 0 0 rgba(255,255,255,.25); }
.facts li:nth-child(-n+2) { padding-top: 0; }
.facts li:nth-last-child(-n+2) { box-shadow: none; padding-bottom: 0; }
.facts li:nth-child(10) { box-shadow: inset 1px 0 0 rgba(255,255,255,.25); }
:root[data-cols="4"] .facts li, :root[data-cols="4"] .facts li:nth-child(n) { padding: 16px 0; box-shadow: inset 0 -1px 0 rgba(255,255,255,.25); }
:root[data-cols="4"] .facts li:first-child { padding-top: 0; }
:root[data-cols="4"] .facts li:last-child { box-shadow: none; padding-bottom: 0; }

/* ═════════════ КРУГ 9: ритм карточек товара ═════════════ */
/* только карточки (body.page-card): внутри раздела заголовок и содержимое вплотную, между разделами — одна клетка.
   На главной остаётся прежний ритм: заголовок и блоки через клетку, разделы через две. */
.page-card .shead { margin: 0 !important; }
.page-card .sec { padding-top: var(--cell) !important; padding-bottom: 0 !important; }
.page-card .ftr { padding-top: var(--cell) !important; }
.page-card .toc { margin: 0 !important; }
.page-card .g, .page-card .g14 { row-gap: 0; }
.page-card .mags, .page-card .card-pair, .page-card .card-top .g { row-gap: 0 !important; }

/* ═════════════ карточки: галерея 3:4, превью слева вертикально ═════════════ */
.gallery { grid-column: 1 / span 7 !important; display: grid !important; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-content: start; }
.buybox { grid-column: 8 / span 7 !important; }
.gallery__main { grid-column: 2; grid-row: 1; aspect-ratio: 3 / 4; background: #000; }
.gallery__main img, .gallery__main .gph { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #000; }
.gallery__thumbs { grid-column: 1; grid-row: 1; display: flex !important; flex-direction: column; gap: 8px; }
.gallery__thumbs button { position: relative; display: block; width: 76px; }
.gallery__thumbs img, .gallery__thumbs .gph { width: 76px; aspect-ratio: 3 / 4; object-fit: contain; background: #000; display: flex; }
.gallery__thumbs .gph { font-size: 9px; }
.gallery__thumbs span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; background: rgba(10,10,10,.82); font-size: 9px; letter-spacing: .06em; color: #fff; text-align: center; }
.gph--big { aspect-ratio: 3 / 4 !important; }
:root[data-cols="8"] .gallery { grid-column: 1 / span 5 !important; }
:root[data-cols="8"] .buybox { grid-column: 1 / -1 !important; }
:root[data-cols="4"] .gallery { grid-template-columns: 1fr; }
:root[data-cols="4"] .gallery__main { grid-column: 1; grid-row: 1; }
:root[data-cols="4"] .gallery__thumbs { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; }
:root[data-cols="4"] .gallery__thumbs button, :root[data-cols="4"] .gallery__thumbs img, :root[data-cols="4"] .gallery__thumbs .gph { width: calc((100vw - 2 * 17px - 2 * 22px - 2 * 8px) / 3); }
:root[data-cols="14"] .buybox:not(.buybox--mag) .buybox__desc { font-size: 14px; line-height: 1.45; }
.buybox__h1[data-fit] { white-space: nowrap; }
.card-text p { margin: 0; font-size: 17px; line-height: 1.55; max-width: 60em; }
.card-text { grid-column: 1 / -1; }
.card-views { grid-column: 1 / -1; }
.card-views__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end; margin-top: 20px; }
:root[data-cols="4"] .card-views__foot { grid-template-columns: 1fr; }
.card-views .carv__stage { max-height: 420px; }
.card-ttx--car { grid-column: 10 / span 5 !important; }
.card-engine { margin-top: 16px; }
.card-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
:root[data-cols="8"] .card-views, :root[data-cols="4"] .card-views, :root[data-cols="8"] .card-ttx--car, :root[data-cols="4"] .card-ttx--car { grid-column: 1 / -1 !important; }
.card-nocal { min-height: 180px; }
.toc__list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.other-mag { grid-column: 1 / span 9; display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; }
.other-mag img { width: 100%; }
.other-mag__text { display: flex; flex-direction: column; gap: 10px; }
.other-mag__text b { font: 400 40px/1 var(--display); text-transform: uppercase; }
.other-mag:hover b { color: var(--accent); }
:root[data-cols="8"] .other-mag, :root[data-cols="4"] .other-mag { grid-column: 1 / -1; }
:root[data-cols="4"] .other-mag { grid-template-columns: 1fr; }
:root[data-cols="4"] .toc__list--5 { display: flex !important; }

/* ═════════════ магазин: цены из API, наличие, подтверждение корзины ═════════════ */
.price-test { display: inline-block; margin-left: 8px; padding: 1px 6px; font: 500 10px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); vertical-align: middle; }
.price-test[hidden] { display: none; }
.buybox__price .price-test { font-size: 11px; }
.btn.is-off, .btn:disabled { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); cursor: not-allowed; }
.cart-toast { position: fixed; z-index: 90; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; max-width: calc(100vw - 32px); padding: 14px 18px; background: var(--bg); box-shadow: 0 0 0 1px #fff; font-size: 14px;
  transition: opacity .3s var(--ease), transform .5s var(--ease); }
.cart-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cart-toast b { color: var(--accent); font-weight: 700; }
.cart-toast a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ═════════════ выноски крупнее и заметнее (всегда видны, на телефоне тоже) ═════════════ */
.co__line { stroke-width: var(--co-stroke, 1.5px) !important; }
.co__num { font-weight: 700 !important; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bg); stroke-linejoin: round; letter-spacing: 0; }
.co__dot { stroke: var(--bg); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.cut.has-active .co { opacity: .45 !important; }
.cut.has-active.is-auto .co { opacity: 1 !important; }
.cut.has-active .co.is-active { opacity: 1 !important; }
.co.is-active .co__num { fill: #fff !important; }
.co.is-active .co__dot, .co.is-active .co__ldot { fill: #fff; }
.co.is-active .co__line { stroke: #fff; }
:root[data-cols="4"] .co__num, :root[data-cols="4"] .co__ldot, :root[data-cols="4"] .co__line { display: inline !important; }

/* подпись детали: всегда поверх остального, на непрозрачной подложке */
.co__tag rect { fill: #0a0a0a !important; fill-opacity: 1; }
.co__tag.is-over rect { stroke-width: 2px; }

/* ═════════════ галерея карточек: миниатюры без подписей ═════════════ */
/* под миниатюрами текста нет; в заглушке остаётся, какой кадр нужен, — пока кадров нет */
.gallery__thumbs .gph { flex-direction: column; gap: 4px; padding: 4px; line-height: 1.2; color: #fff; }
.gallery__thumbs .gph small { font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ═════════════ галерея: кадр в своей рамке, миниатюры всегда рядом ═════════════ */
/* Рамка — 1 px цвета сетки по краю самого кадра 3:4 (не по панели) с тонким отступом внутри: тёмный край кадра
   не сливается с фоном. Миниатюры — колонкой слева, как на Ozon: так основной кадр крупнее, чем с рядом снизу.
   Высота кадра ограничена окном: кадр и миниатюры целиком в первом экране (окно − шапка − крошки − отступ панели). */
.gallery { container-type: inline-size; grid-template-columns: 64px max-content !important; justify-content: start; align-items: start; gap: 12px !important;
  --gal-h: min(calc(100svh - 2 * var(--cell) - var(--pad) - 16px), calc((100cqw - 76px) * 4 / 3)); }
.gallery__main { height: var(--gal-h); width: auto; aspect-ratio: 3 / 4; padding: 0; box-sizing: border-box; background: transparent !important; border: 1px solid var(--grid); box-shadow: none; overflow: hidden; }
.gallery__main img, .gallery__main .gph { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; background: transparent; }
.gallery__main .gph[hidden] { display: none; }
.gallery__main .gph { display: flex; box-shadow: none; }
.gallery__thumbs { max-height: var(--gal-h); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; gap: 8px !important; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs button { width: 64px; flex: 0 0 auto; }
.gallery__thumbs img, .gallery__thumbs .gph { width: 64px !important; aspect-ratio: 3 / 4; padding: 3px; object-fit: contain; background: transparent; box-shadow: inset 0 0 0 1px var(--grid) !important; }
.gallery__thumbs button:hover img, .gallery__thumbs button:hover .gph { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5) !important; }
.gallery__thumbs button.is-on img, .gallery__thumbs button.is-on .gph { box-shadow: inset 0 0 0 2px var(--accent) !important; }
.gallery__thumbs .gph { padding: 4px; font-size: 8px; }
.gallery__thumbs .gph small { font-size: 7px; }
/* телефон: кадр на всю ширину, под ним один ряд миниатюр с горизонтальной прокруткой */
:root[data-cols="4"] .gallery { grid-template-columns: minmax(0, 1fr) !important; }
:root[data-cols="4"] .gallery__main { width: 100%; height: auto; }
:root[data-cols="4"] .gallery__thumbs { flex-direction: row !important; flex-wrap: nowrap !important; max-height: none; overflow-x: auto; overflow-y: hidden; }
:root[data-cols="4"] .gallery__thumbs button, :root[data-cols="4"] .gallery__thumbs img, :root[data-cols="4"] .gallery__thumbs .gph { width: 64px !important; }

/* ═════════════ карточка авто: вкладка «Фото» в области проекций ═════════════ */
.carv__photo { width: 100%; height: 100%; max-width: 100%; object-fit: contain; }

/* ═════════════ меню: текущий раздел ═════════════ */
.nav a[aria-current] { color: var(--accent) !important; opacity: 1 !important; }
/* телефон: «Постеры · Журналы · Магазин» + корзина в одну строку («Отзывы» и «О бренде» скрыты) */
@media (max-width: 720px) {
  .nav { gap: 12px; font-size: 11px; letter-spacing: 0.04em; }
  .logo img { height: 21px; }
}
@media (max-width: 360px) { .nav { gap: 9px; font-size: 10px; letter-spacing: 0.02em; } .logo img { height: 18px; } }

/* ═════════════ каталог /catalog ═════════════ */
/* ритм как у карточек (body.page-card): заголовок, фильтр и ряды вплотную, разделы через клетку */
.page-catalog [data-group][hidden], .page-reviews [data-group][hidden] { display: none !important; }
.cat-tabs button[aria-pressed="true"] { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: #fff; }
.cat-tabs button[aria-pressed="true"]:hover { background: var(--accent); }
.page-catalog .toc__head h2 { margin: 0; font: 400 40px/1 var(--display); letter-spacing: 0.02em; }
.page-catalog .toc__head h2 span { color: var(--muted); margin-left: 10px; }
.page-catalog .toc__price { opacity: 1; }
.page-catalog .toc__list { align-items: end; }
.toc__card--j2 { grid-column: span 2; }
/* журналы в магазине: объёмные обложки одной высоты (ширина по пропорциям — flex-grow из build_cards.py) */
.page-catalog .toc__list--m { display: flex !important; gap: 24px; max-width: 60%; align-items: flex-start; }
.page-catalog .toc__list--m li { flex-basis: 0; flex-shrink: 1; min-width: 0; }
.page-catalog .toc__list--m img { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
:root[data-cols="8"] .page-catalog .toc__list--m { max-width: 80%; }
:root[data-cols="4"] .page-catalog .toc__head h2 { font-size: 32px; }
:root[data-cols="4"] .page-catalog .toc__list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible; gap: 28px 12px; padding-bottom: 0; }
/* телефон: журналы друг под другом, обложки одной высоты, ширина по пропорциям */
:root[data-cols="4"] .page-catalog .toc__list--m { display: flex !important; flex-direction: column; max-width: none; gap: 28px; }
:root[data-cols="4"] .page-catalog .toc__list--m li { flex: none !important; width: 100%; }
:root[data-cols="4"] .page-catalog .toc__list--m .toc__item img { height: 220px; width: auto; max-width: 100%; }
:root[data-cols="4"] .page-catalog .toc__card--j2 { grid-column: span 1; }
:root[data-cols="4"] .page-catalog .toc__cap { font-size: 13px; }
:root[data-cols="4"] .cat-tabs { padding: 0 12px; gap: 6px; }
:root[data-cols="4"] .cat-tabs button { padding: 0 10px; flex: 1 1 auto; }
:root[data-cols="4"] .page-catalog .toc__add { top: 6px; right: 6px; width: 34px; height: 34px; }
:root[data-cols="4"] .page-catalog .toc__add svg { width: 15px; height: 15px; }

/* ═════════════ отзывы (главная, /reviews, карточки) ═════════════ */
/* панели вплотную одним блоком; по два в ряд разной ширины. Имя — выдуманные буквы по форме настоящего, размытые (настоящего имени в HTML нет) */
.revs { row-gap: 0 !important; }
.rev { display: flex; flex-direction: column; gap: 16px; }
.rev--s6 { grid-column: span 6; } .rev--s7 { grid-column: span 7; } .rev--s8 { grid-column: span 8; }
:root[data-cols="8"] .rev { grid-column: span 4 !important; }
.rev--full, :root[data-cols="8"] .rev--full { grid-column: 1 / -1 !important; }
.rev__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.rev__src { padding: 5px 9px; font: 500 11px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.rev__stars { color: var(--accent); font-size: 16px; letter-spacing: 3px; }
.rev__stars i { font-style: normal; color: rgba(255,255,255,.18); }
.rev__text { flex: 1; }
.rev__text p { margin: 0; font-size: 18px; line-height: 1.5; }
.rev__text p + p { margin-top: .6em; }
.rev__photo { width: 120px; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: inset 0 0 0 1px var(--grid); }
.rev__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--muted); }
.rev__name { display: inline-block; color: #fff; filter: blur(5px); user-select: none; -webkit-user-select: none; pointer-events: none; }
.rev__prod { margin-left: auto; display: inline; color: #fff; }
.rev__prod svg { display: inline; vertical-align: middle; position: relative; top: -1px; }
.rev__prod:hover { color: var(--accent); }
.rev-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.rev-more:only-child, .rev-more > :only-child.btn, .rev-more > :only-child.link { margin-left: auto; }
.rev-more.rev-sumrow { margin-left: 0; }
.rev-sum { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 32px; font-size: 17px; }
/* оценка без текста — компактная карточка в той же сетке на две колонки: тег, звёзды, дата справа / размытое имя, товар справа */
.rev-t { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 6px 16px; padding-top: 16px; padding-bottom: 16px; }   /* вместе с содержимым — не выше одной клетки */
.rev-t--s7 { grid-column: span 7; }
.rev-t .rev__top, .rev-t .rev__meta { display: contents; }
.rev-t .rev__src { order: 1; } .rev-t .rev__stars { order: 2; }
.rev-t time { order: 3; margin-left: auto; font-size: 13px; color: var(--muted); }
.rev-t::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
.rev-t .rev__name { order: 5; font-size: 13px; }
.rev-t .rev__prod { order: 6; margin: 0 0 0 auto; font-size: 13px; text-align: right; }
:root[data-cols="8"] .revs > .rev-t { grid-column: span 4 !important; }
:root[data-cols="4"] .revs > .rev-t { grid-column: 1 / -1 !important; }
/* телефон: короткий тег, чтобы карточка оставалась в одну клетку */
:root[data-cols="4"] .rev-t { gap: 4px 10px; padding: 10px 16px; }
:root[data-cols="4"] .rev-t .rev__src { font-size: 0; letter-spacing: 0; }
:root[data-cols="4"] .rev-t .rev__src::before { content: attr(data-short); font-size: 11px; letter-spacing: .1em; }
:root[data-cols="4"] .rev-t .rev__stars { font-size: 13px; letter-spacing: 1px; }
.rev-note { margin: 0; padding: 6px 10px; font: 500 12px/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
:root[data-cols="4"] .rev__text p { font-size: 16px; }
:root[data-cols="4"] .rev__prod { margin-left: 0; }

/* ═════════════ патрон: подписи размерных линий не обрезаются ═════════════ */
/* фигура не клипует: длинный патрон в реальную величину на узком экране прокручивается по горизонтали */
.cal__fig { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin; }
.cal__dim.is-out span { left: 0; transform: none; padding: 0; background: none; }
.cal__dim--case.is-out span { top: -22px; }
.cal__dim--total.is-out span { top: 9px; }
.cal__fig.has-out-case .cal__img { margin-top: 20px; }
.cal__fig.has-out-total .cal__img { margin-bottom: 18px; }
.cal__head { flex-wrap: wrap; row-gap: 4px; }
.cal__head > * { min-width: 0; }
.cal__head span { white-space: normal; }

/* ═════════════ главная, блок «Авто»: мотор в строке проекций, фото крупно ═════════════ */
.carv__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.carv__bar .carv__views { margin-bottom: 0 !important; }
.car__under { display: block !important; margin-top: 12px !important; }
.car__photo figcaption { display: none; }      /* фото крупное и само себя объясняет; подпись съедала высоту */
.car__main .spec--cols { margin-top: 16px !important; }
.car__photo img { height: auto !important; width: 100% !important; object-fit: contain; }
:root[data-cols="4"] .carv__bar { margin-bottom: 12px; }

/* ═════════════ меньше движения ═════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .cut.is-alive .cut__breath { animation: none; }
  .carv.is-running .carv__shake { animation: none; }
  .co.is-active .co__ring { animation: none; opacity: 0; }
  .phrase__text .w { opacity: 1; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}