/* Сайт ANTEKSMART v6: тёмный зал корпусов. Токены - NAPRAVLENIE.md §3. Основа - принятый макет maket/maket.css (31.10), ниже - блоки сайта */
:root {
  color-scheme: dark;
  --bg: #080808; --s1: #101011; --s2: #18181A; --ink: #EEEAE3; --muted: #A9A49B; --accent: #F07010; --gold: #E8A808;
  --m: clamp(20px, 3.75vw, 96px);                 /* поле страницы: 96 на 2560, 54 на 1440, 20 на телефоне */
  --t-small: clamp(13px, 0.62vw, 16px);
  --t-body: clamp(17px, 0.78vw, 20px);
  --t-lead: clamp(20px, 1.05vw, 27px);
  --t-head: clamp(28px, 1.6vw, 42px);
  --t-disp: clamp(34px, 3.25vw, 86px);
  --head-font: 'Unbounded', sans-serif; --text-font: 'Onest', sans-serif;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; } /* hidden сильнее display из классов (товар «не найден») */
body { overflow-x: clip; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.55 var(--text-font); -webkit-font-smoothing: antialiased; }
html { scroll-padding-top: 60px; } /* переход по якорю не прячет заголовок под липкой подполосой товара (60 px), на всех страницах одинаково (e7-k3 п. 3) */
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* шапка: логотип, 5 разделов, поиск, «Моя машина» */
.sh { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 64px); height: clamp(64px, 3.1vw, 84px); padding: 0 var(--m); position: relative; z-index: 3; }
.sh__logo { flex: none; } /* логотип не сжимается при смене корпуса - место отдаёт плашка */
.sh__logo img { height: clamp(26px, 1.35vw, 36px); width: auto; }
.sh nav { display: flex; gap: clamp(18px, 1.6vw, 44px); font-size: var(--t-small); }
.sh nav a { text-decoration: none; color: var(--muted); padding: 10px 0; }
.sh nav a[aria-current] { color: var(--ink); }
.sh nav a:hover { color: var(--ink); }
.sh__prav { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.sh__poisk { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--ink); cursor: pointer; }
.mashina { display: flex; align-items: center; gap: 12px; background: var(--s2); padding: 0 18px; height: 44px; font-size: var(--t-small); text-decoration: none; }
.mashina b { font-weight: 500; white-space: nowrap; } .mashina i { font-style: normal; }
.gody-t, .mg { font-style: normal; } /* годы выбранного корпуса: поле «Годы», плашка, нижняя полоса */
.mashina span { color: var(--muted); }
.sh__menu { display: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 32px; background: var(--accent); color: #120800;
  font: 600 var(--t-body)/1 var(--text-font); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s, background-color .15s; }
.btn:hover { background: #FF8226; }
.btn:active { transform: translateY(1px); }
.ssylka { color: var(--muted); font-size: var(--t-small); text-underline-offset: 4px; }
.ssylka:hover { color: var(--ink); }

/* корпус на нашем эллипсе (владелец 31.10 13:0x: «чтобы эллипс после смены видеорегистратора никуда не уезжал ... должно как на 90 скрине»).
   Эллипс ПРИБИТ к кадру: центр --x, ширина --ew, своя пропорция 1674/543, яркая точка чуть ниже основания (translate 34 %).
   Двигается и масштабируется только корпус: середина его низа (--fx из v5/korpus.js) - в центре эллипса, корпус целиком в кадре
   (слева до --x + --l: --l - запас за левым краем кадра до текста + 40 px; справа до (100cqw - --x)/(1 - fx); не выше кадра). Кадр - контейнер постоянного размера. */
.kadr { position: relative; container-type: size; }
.kadr .svet { position: absolute; left: var(--x, 50cqw); bottom: 0; width: var(--ew, 104cqw); max-width: none; height: auto; translate: -50% 34%; pointer-events: none; }
.kadr .korpus { position: absolute; left: var(--x, 50cqw); bottom: 0; translate: calc(var(--fx, .5) * -100%) 0; width: auto; height: auto; max-height: 100cqh;
  max-width: min(calc((var(--x, 50cqw) + var(--l, 0px)) / var(--fx, .5)), calc((100cqw - var(--x, 50cqw)) / (1 - var(--fx, .5)))); transition: opacity .35s, transform .35s; }
.kadr.karta .svet { display: none; }

/* ГЛАВНАЯ, экран 1 */
.g1 { overflow-x: clip; position: relative; min-height: calc(100svh - clamp(64px, 3.1vw, 84px)); padding: 0 var(--m) clamp(24px, 2vw, 56px);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 1.25vw, 32px); grid-template-rows: auto 1fr auto; }
.g1__txt { grid-column: 1 / 8; grid-row: 1 / 3; padding-top: clamp(32px, 4.4vw, 120px); display: flex; flex-direction: column; }
h1 { font: 600 var(--t-disp)/1.02 var(--head-font); letter-spacing: -0.02em; }
.lead { margin-top: clamp(20px, 1.4vw, 36px); font-size: var(--t-lead); line-height: 1.45; max-width: 30ch; }
.moya { margin-top: auto; padding-top: clamp(28px, 2.6vw, 64px); }
.moya__h { font: 500 var(--t-small)/1 var(--text-font); color: var(--muted); margin-bottom: 14px; }
.moya__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 8px; max-width: 920px; } /* модели до 22 знаков («Land Cruiser Prado 150») - поле модели шире */
@media (min-width: 1000px) { .moya__row, .moya__otvet { max-width: min(920px, 46vw); } } /* только десктоп: на средних ширинах корпусу место слева, дуге - зазор до формы */
.pole { display: flex; flex-direction: column; justify-content: center; gap: 2px; background: var(--s2); padding: 0 20px; height: clamp(64px, 3.2vw, 84px); position: relative; }
.pole span { font-size: var(--t-small); color: var(--muted); }
.pole select { appearance: none; background: none; border: 0; color: var(--ink); font: 500 var(--t-body)/1.2 var(--text-font); padding-right: 24px; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.pole::after { content: ''; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); }
.moya__otvet { margin-top: clamp(18px, 1.3vw, 30px); font-size: var(--t-lead); }
.moya__otvet b { font: 600 1em var(--head-font); }
.kod i { font-style: normal; color: var(--accent); }
.moya__deystvie { margin-top: clamp(16px, 1.1vw, 28px); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.g1__scena { grid-column: 8 / 13; grid-row: 1 / 3; align-self: end; height: min(58svh, 46vw); margin-bottom: clamp(56px, 4.4vw, 120px);
  --x: 35.3cqw; --ew: 110.9cqw;
  --l: clamp(0px, min(9vw - 48px, 30vw - 320px), 190px); } /* место слева от кадра до текста/формы + 40 px (mesto-sleva.py 31.10, поля и ответ 46vw: 1100 - 19, 1280 - 71, 1440 - 85, 1920 - 127, 2560 - 190) */ /* место и размер эллипса - как у TOY10 на снимке владельца 90 (кадр был 94 % справа, fx .312, 118cqw) */

/* ряд корпусов модели: ваш освещён, остальные чуть тише - форма крышки читается, их сравнивают */
.ryad { grid-column: 1 / 13; grid-row: 3; margin-top: clamp(32px, 3vw, 72px); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(16px, 1.25vw, 32px); align-items: end;
  background: var(--s1); padding: clamp(18px, 1.3vw, 32px) clamp(18px, 1.5vw, 40px); }
.ryad__h { font: 500 var(--t-body)/1.35 var(--text-font); }
.ryad__h span { display: block; color: var(--muted); font-size: var(--t-small); font-weight: 400; margin-top: 6px; }
.ryad ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ryad li :is(button, a) { width: 100%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; text-align: left; background: none; border: 0; color: var(--ink); padding: 10px; cursor: pointer; font: inherit; }
.ryad li img { height: clamp(64px, 4.4vw, 120px); width: clamp(88px, 6vw, 160px); object-fit: contain; filter: brightness(.82) saturate(.9); transition: filter .35s; }
.ryad .k { font: 600 var(--t-small)/1.2 var(--head-font); color: var(--muted); white-space: nowrap; }
.ryad .g { font-size: var(--t-small); color: var(--muted); line-height: 1.35; }
.ryad li :is(button, a) { position: relative; }
.ryad li[aria-current] :is(button, a) { background: var(--s2); }
.ryad li[aria-current] :is(button, a)::after, .mini button[aria-current]::after, .podpolosa nav a[aria-current]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); } /* метка выбранного - полоса снизу */
.ryad li[aria-current] img, .ryad li :is(button, a):hover img { filter: none; }
.ryad li[aria-current] .k { color: var(--ink); }

/* ТОВАР */
.podpolosa { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: clamp(20px, 2vw, 56px); height: 60px; padding: 0 var(--m); background: var(--s1); font-size: var(--t-small); }
.podpolosa .kod { font: 600 var(--t-small)/1 var(--head-font); }
.podpolosa nav { display: flex; gap: clamp(16px, 1.6vw, 40px); }
.podpolosa nav a { text-decoration: none; color: var(--muted); padding: 18px 0; }
.podpolosa nav a { position: relative; } .podpolosa nav a[aria-current] { color: var(--ink); }
.podpolosa .btn { margin-left: auto; min-height: 44px; padding: 0 24px; font-size: var(--t-small); visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
.podpolosa.s-knopkoy .btn { visibility: visible; opacity: 1; } /* одна главная кнопка на экране: в подполосе - когда основная ушла из вида */
.t1 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 1.25vw, 32px); padding: clamp(24px, 1.9vw, 48px) var(--m) clamp(40px, 3vw, 80px); min-height: calc(100svh - 60px - clamp(64px, 3.1vw, 84px)); }
.t1__media { grid-column: 1 / 8; display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.t1__scena { background: var(--s1); display: grid; place-items: center; padding: 5% 0 11%; overflow: hidden; container-type: inline-size; }
.t1__scena .kadr { width: 90%; height: 49.5cqw; --x: 50cqw; --ew: 104cqw; } /* высота от ширины панели: TOY10 на всю ширину, высоким корпусам хватает */
.mini { display: flex; gap: 8px; }
.mini button { background: var(--s1); border: 0; padding: 0; width: clamp(72px, 5vw, 128px); aspect-ratio: 3 / 4; cursor: pointer; overflow: hidden; opacity: .55; transition: opacity .2s; }
.mini button { position: relative; } .mini button[aria-current], .mini button:hover { opacity: 1; }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini .chist img { object-fit: contain; padding: 14%; }
.t1__info { grid-column: 8 / 13; padding-left: clamp(0px, 2vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.kroshki { font-size: var(--t-small); color: var(--muted); }
.kroshki a { text-decoration: none; }
.t1__info h1 { margin-top: clamp(16px, 1.2vw, 32px); font-weight: 700; }
.t1__mash { text-wrap: balance; margin-top: 14px; font-size: var(--t-lead); line-height: 1.4; }
.podhodit { margin-top: clamp(24px, 1.8vw, 44px); background: var(--s2); padding: 18px 22px; display: flex; align-items: center; gap: 16px; }
.podhodit svg { flex: none; }
.podhodit p { line-height: 1.35; }
.podhodit .ssylka { margin-left: auto; white-space: nowrap; }
.varianty { margin-top: clamp(24px, 1.8vw, 44px); }
.varianty p { font-size: var(--t-small); color: var(--muted); margin-bottom: 10px; }
.varianty div { display: flex; gap: 8px; flex-wrap: wrap; }
.var { min-height: 56px; padding: 0 24px; background: var(--s2); color: var(--ink); border: 0; font: 500 var(--t-body)/1 var(--text-font); cursor: pointer; }
.var[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.t1__info .btn { margin-top: clamp(28px, 2vw, 48px); width: 100%; min-height: 64px; }
.dostavka { margin-top: 16px; display: flex; gap: 28px; font-size: var(--t-small); color: var(--muted); flex-wrap: wrap; }
.svoystva { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 var(--m) 64px; }
.svoystva div { background: var(--s1); padding: 22px 24px; }
.svoystva div > span { display: block; font-size: var(--t-small); color: var(--muted); }
.svoystva b { display: block; margin-top: 6px; font: 500 var(--t-body)/1.3 var(--head-font); }
.svoystva .zoloto { color: var(--gold); }
.niz-tel { display: none; }

/* телефон - своя раскладка; с шага 4 и планшет до 1000 px */
@media (max-width: 1000px) {
  .sh { gap: 12px; } .sh nav, .sh__poisk { display: none; }
  .sh__prav { gap: 4px; }
  .mashina { padding: 0 10px; height: 40px; gap: 8px; min-width: 0; } .mashina span, .mashina i { display: none; } /* в одну строку: «RAV4, с 2025» */
  .mashina b { overflow: hidden; text-overflow: ellipsis; } /* запас на длинные модели */
  .sh__menu { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: var(--ink); }
  .g1 { display: flex; flex-direction: column; padding-bottom: 96px; }
  .g1__txt { display: contents; }
  .g1 h1 { order: 1; padding-top: 20px; } .lead { order: 2; } .g1__scena { order: 3; } .moya { order: 4; } .ryad { order: 5; }
  h1 { font-size: 30px; line-height: 1.08; }
  .lead { font-size: 17px; margin-top: 12px; }
  .g1__scena { width: 100%; height: 46vw; margin: 12px 0 64px; --x: 50cqw; --ew: 108cqw; } /* эллипс по центру экрана, целиком; под сценой место для его нижней трети */
  .moya { padding-top: 0; }
  .moya { width: 100%; } .moya__row { grid-template-columns: minmax(0, 1fr); } /* поля столбиком: марка и модель на всю ширину */ .pole { min-width: 0; padding: 0 14px; } .pole::after { right: 14px; } .pole select { width: 100%; padding-right: 20px; } /* «2018–2021» целиком до 320 */
  .moya__deystvie .btn { display: none; }
  .ryad { grid-template-columns: 1fr; margin: 24px calc(-1 * var(--m)) 0; }
  .ryad ul { grid-template-columns: 1fr 1fr; gap: 4px; } /* 2 x 2: крышки крупнее, код не рвётся */
  .ryad li img { width: 100%; height: 76px; }
  .ryad .k { white-space: nowrap; }
  .ryad li :is(button, a) { grid-template-columns: 1fr; gap: 6px; padding: 8px 4px; text-align: center; justify-items: center; }
  .ryad .g { display: block; max-height: 1.35em; overflow: hidden; } /* только годы - первая строка */
  .niz-tel { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; gap: 12px; align-items: center; background: var(--s1); padding: 10px var(--m) calc(10px + env(safe-area-inset-bottom)); }
  .niz-tel p { font-size: 14px; line-height: 1.25; } .niz-tel p span { display: block; color: var(--muted); }
  .niz-tel i { font-style: normal; } .niz-tel p span { white-space: nowrap; } /* код корпуса и «RAV4, годы» не рвутся */
  .niz-tel p { min-width: 0; } .niz-tel .btn { margin-left: auto; min-height: 48px; padding: 0 18px; font-size: 14px; white-space: nowrap; flex: none; }
  .podpolosa nav, .podpolosa .btn { display: none; }
  .t1 { display: flex; flex-direction: column; padding-top: 0; }
  .t1__media { margin: 0 calc(-1 * var(--m)); }
  .t1__scena { padding-bottom: 14%; }
  .mini { padding: 0 var(--m); } .mini button { width: 64px; }
  .t1__info { padding: 20px 0 0; }
  .t1__info h1 { font-size: 34px; margin-top: 10px; }
  .t1__mash { font-size: 17px; }
  .podhodit { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 8px; align-items: start; padding: 16px 18px; } /* галочка + текст, ссылка под текстом */
  .podhodit .ssylka { grid-column: 2; margin-left: 0; }
  .t1__info .btn { display: none; }
  .var { padding: 0 12px; font-size: 16px; white-space: nowrap; flex: 1 1 auto; } /* «Одна камера» и «Две камеры, DUAL» в одну строку до 360 */
  .svoystva { grid-template-columns: 1fr 1fr; padding-bottom: 110px; }
}
@media (max-width: 385px) { .mashina svg { display: none; } }
@media (max-width: 430px) { .niz-tel i { display: none; } } /* без марки, как в плашке шапки (e7-k1 п. 5) */
.niz-tel p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .niz-tel p span { overflow: hidden; text-overflow: ellipsis; } /* как в шапке: без «Toyota» */
@media (max-width: 345px) { .sh__logo img { height: 24px; } .mashina .mg { display: none; }
  .niz-tel p { font-size: 13px; } .niz-tel .btn { padding: 0 14px; font-size: 14px; } } /* 320: в плашке «RAV4», годы - в нижней полосе */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ===================== САЙТ (шаг 4): общее для страниц ===================== */
:root { --gap: clamp(16px, 1.25vw, 32px); --razdel: clamp(112px, 8.6vw, 220px); }
.setka { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.razdel { padding: var(--razdel) var(--m) 0; }
.razdel h2 { font: 600 var(--t-head)/1.12 var(--head-font); letter-spacing: -0.01em; text-wrap: balance; }
.razdel__lead { margin-top: clamp(16px, 1.1vw, 28px); font-size: var(--t-lead); line-height: 1.45; max-width: 34ch; }

/* меню телефона и окно поиска из шапки - то, что всплывает, единственное с тенью */
.sh__nav-tel { display: none; }
.poisk-okno { position: fixed; inset: 0; z-index: 20; background: rgb(8 8 8 / .94); padding: clamp(64px, 3.1vw, 84px) var(--m) 0; }
.poisk-okno[hidden] { display: none; }
.poisk-okno .poisk-pole { max-width: 1100px; margin: 0 auto; }
.poisk-okno__zakryt { position: absolute; top: 10px; right: var(--m); width: 44px; height: 44px; background: none; border: 0; color: var(--ink); cursor: pointer; }

/* поле поиска (каталог на главной, окно поиска) */
.poisk-pole { position: relative; }
.poisk-pole input { width: 100%; height: clamp(60px, 3.2vw, 84px); background: var(--s2); border: 0; border-radius: 0; color: var(--ink); font: 500 var(--t-body)/1 var(--text-font); padding: 0 20px 0 58px; }
.poisk-pole input::placeholder { color: var(--muted); }
.poisk-pole > svg { position: absolute; left: 20px; top: clamp(30px, 1.6vw, 42px); translate: 0 -50%; color: var(--muted); pointer-events: none; }
.poisk-pole ul { position: absolute; z-index: 6; left: 0; right: 0; top: 100%; list-style: none; padding: 6px 0; background: var(--s2); box-shadow: 0 18px 48px rgb(0 0 0 / .6); max-height: 60vh; overflow: auto; } /* taste-skill-ignore: всплывающий список поиска - настоящий оверлей */
.poisk-pole ul[hidden] { display: none; }
.poisk-pole li a { display: block; padding: 12px 20px; text-decoration: none; line-height: 1.35; }
.poisk-pole li a b { font: 600 var(--t-small)/1.2 var(--head-font); }
.poisk-pole li a span { display: block; color: var(--muted); font-size: var(--t-small); }
.poisk-pole li a:hover, .poisk-pole li a:focus-visible { background: #232326; outline-offset: -2px; }
.poisk-pole li.empty { padding: 12px 20px; color: var(--muted); font-size: var(--t-small); }

/* ряд корпусов модели: от 1 до 7 (Mercedes-Benz GLC) - больше 4 листается вбок */
.ryad ul.mnogo { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 4.3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } /* видно край пятого - листается */
/* эллипс прибит и между моделями: высота ряда и ответа не зависит от длины подписей (владелец 31.10 13:0x) */
@media (min-width: 1001px) {
  .ryad li :is(button, a) { height: calc(max(clamp(64px, 4.4vw, 120px), var(--t-small) * 1.35 * 5) + 20px); overflow: hidden; }
  .ryad li :is(button, a) > span { font-size: var(--t-small); line-height: 1.35; } /* строка с кодом - высотой подписи, не текста кнопки */
  .ryad .g { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .ryad { position: relative; }
  .ryad__dalee { position: absolute; right: 0; top: 0; bottom: 0; width: 56px; display: grid; place-items: center; background: var(--s2); border: 0; color: var(--ink); cursor: pointer; }
  .ryad__dalee:hover { background: #232326; }
  .ryad__dalee[hidden] { display: none; }
  .moya__otvet { min-height: calc(2em * 1.55); }
}
@media (min-width: 1001px) and (max-width: 1500px) { .pole { padding: 0 14px; } .pole::after { right: 14px; } .pole select { padding-right: 20px; } } /* 1280: «Mercedes-Benz» и «2018–2021» целиком */
.ryad ul.mnogo li { scroll-snap-align: start; }
.ryad__h b { font-weight: inherit; }
.niz-tel { transition: translate .3s; } .niz-tel.ushla { translate: 0 110%; }
.moya select:disabled { cursor: default; opacity: 1; }
.pole:has(select:disabled)::after { display: none; }

/* заголовок первого экрана: строки поднимаются из-под своей базовой линии (подпись направления, motion.md «Masked line reveal») */
.st { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.st > span { display: block; animation: st-vverh .9s cubic-bezier(.16, 1, .3, 1) both; }
.st + .st > span { animation-delay: .11s; }
.g1 .lead, .g1 .moya { animation: vsplyt .6s cubic-bezier(.16, 1, .3, 1) .45s both; }
@keyframes st-vverh { from { translate: 0 105%; } }
@keyframes vsplyt { from { opacity: 0; translate: 0 20px; } }
/* появление частей раздела: заголовок, текст, картинка по очереди; без скрипта всё видно (класс js ставит obshchee.js) */
.js [data-v] { opacity: 0; translate: 0 24px; transition: opacity .7s cubic-bezier(.16, 1, .3, 1), translate .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-v].vid { opacity: 1; translate: 0 0; }

/* ===== ГЛАВНАЯ: каталог по маркам - строки одним кеглем, марка слева, модели с 33 %, число корпусов справа ===== */
.marki__verh { align-items: end; }
.marki__verh h2 { grid-column: 1 / 7; }
.marki__verh .poisk-pole { grid-column: 8 / 13; }
.marki__niz { margin-top: clamp(40px, 3vw, 80px); align-items: start; }
.marki__vitr { grid-column: 9 / 13; position: sticky; top: 16vh; margin: 0; }
.marki__vitr .kadr { height: clamp(220px, 17vw, 440px); --x: 50cqw; --ew: 100cqw; }
.marki__vitr .korpus { transition: opacity .25s; }
.marki__vitr figcaption { margin-top: clamp(56px, 4vw, 104px); font-size: var(--t-body); color: var(--muted); }
.marki__vitr figcaption b { display: block; font: 600 var(--t-lead)/1.2 var(--head-font); color: var(--ink); margin-bottom: 6px; }
.marki__spisok { grid-column: 1 / 9; }
.marki__vse { display: none; }
.marki__tab { list-style: none; padding: 0; font-size: var(--t-lead); line-height: 1.5; }
/* строка марки: марка и число - каталог марки, каждая модель - каталог с этой моделью; модели все, переносом (владелец 31.10 16:3x) */
.marki__tab li { display: grid; grid-template-columns: 30% minmax(0, 1fr) auto; column-gap: var(--gap); align-items: baseline; padding: .32em 0; }
.marki__tab a { text-decoration: none; color: var(--ink); transition: color .2s; }
.marki__tab .mod { color: var(--muted); font-size: var(--t-body); line-height: 1.6; }
.marki__tab .mod a { color: var(--muted); text-underline-offset: 4px; white-space: nowrap; } /* модель не рвётся, перенос - между моделями */
.marki__tab .n { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.marki__tab a:hover, .marki__tab a:focus-visible { color: var(--ink); text-decoration: underline; }
.marki__tab .b:hover, .marki__tab .b:focus-visible { color: var(--accent); text-decoration: none; }

/* ===== ГЛАВНАЯ: как не ошибиться с поколением - два корпуса одной модели рядом, каждый на своём эллипсе ===== */
.sravn { align-items: center; }
.sravn__para { grid-column: 1 / 9; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); } /* minmax: на 320 TOY7 вылезал на 8 px (e7-k345 п. 1) */
.sravn__para figure { margin: 0; }
.sravn .kadr { height: clamp(200px, 15vw, 400px); --x: 50cqw; --ew: 100cqw; margin-bottom: clamp(40px, 3vw, 80px); }
.sravn figcaption { font-size: var(--t-body); line-height: 1.4; }
.sravn figcaption b { display: block; font: 600 var(--t-body)/1.3 var(--head-font); margin-bottom: 4px; }
.sravn figcaption span { color: var(--muted); }
.sravn__txt { grid-column: 9 / 13; grid-row: 1; align-self: end; }
.sravn ol { grid-column: 9 / 13; grid-row: 2; align-self: start; margin-top: clamp(24px, 1.8vw, 44px); padding-left: 1.3em; display: grid; gap: 14px; font-size: var(--t-body); }
.sravn ol li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ===== ГЛАВНАЯ: что внутри - имена свойств колонками одним кеглем, справа карточка вашего корпуса ===== */
.vnutri { align-items: start; }
.vnutri h2 { grid-column: 1 / 8; grid-row: 1; }
.vnutri__sv { grid-column: 1 / 8; grid-row: 2; margin-top: clamp(40px, 3.4vw, 88px); display: grid; gap: clamp(24px, 2vw, 52px); }
.vnutri__sv dt { font-size: var(--t-body); color: var(--muted); }
.vnutri__sv dd { margin: 6px 0 0; font: 500 var(--t-head)/1.15 var(--head-font); letter-spacing: -0.01em; }
.vnutri__sv .zoloto { color: var(--gold); }
.vnutri__kam { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.vnutri__kam .var { font-size: var(--t-body); }
.vnutri__kam span { font: 400 var(--t-body)/1.3 var(--text-font); color: var(--muted); }
.vnutri__karta { grid-column: 9 / 13; grid-row: 1 / 3; margin: 0; }
.vnutri__karta img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: opacity .3s; }
.vnutri__karta figcaption { margin-top: 12px; font-size: var(--t-small); color: var(--muted); }

/* ===== ГЛАВНАЯ: установка, доставка, вопросы - практическое простым текстом в две колонки ===== */
.prakt { row-gap: 40px; }
.prakt__l { grid-column: 1 / 6; }
.prakt__p { grid-column: 7 / 13; }
.prakt dl { margin-top: clamp(28px, 2vw, 48px); display: grid; gap: 22px; }
.prakt dt { font-size: var(--t-small); color: var(--muted); }
.prakt dd { margin: 4px 0 0; font-size: var(--t-lead); line-height: 1.4; }
.prakt h3 { font: 600 var(--t-head)/1.12 var(--head-font); letter-spacing: -0.01em; }
.vopros { margin-top: clamp(28px, 2vw, 48px); display: grid; gap: 6px; }
.vopros details { background: var(--s1); }
.vopros summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font: 500 var(--t-lead)/1.35 var(--text-font); position: relative; }
.vopros summary::-webkit-details-marker { display: none; }
.vopros summary::after { content: ''; position: absolute; right: 26px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .25s; }
.vopros details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.vopros summary:hover { color: #fff; }
.vopros details p { padding: 0 24px 22px; color: var(--muted); max-width: 60ch; }
.vopros details p a { color: var(--ink); text-underline-offset: 4px; }

/* ===== ГЛАВНАЯ: заявка - код вашего корпуса крупным набором ===== */
.zayavka { padding-bottom: 0; }
.zayavka__verh { align-items: center; }
.zayavka__l { grid-column: 1 / 8; }
.zayavka__kadr { grid-column: 8 / 13; height: clamp(200px, 14vw, 380px); --x: 50cqw; --ew: 100cqw; }
.zayavka__kod { font: 600 clamp(44px, 7.2vw, 184px)/1 var(--head-font); letter-spacing: -0.03em; margin-top: clamp(24px, 2vw, 56px); white-space: nowrap; }
.zayavka__kod i { font-style: normal; color: var(--accent); }
.zayavka__mash { margin-top: 18px; font-size: var(--t-lead); color: var(--muted); }
.zayavka form { margin-top: clamp(40px, 3vw, 80px); display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 8px; align-items: stretch; }
.zayavka .pole input { background: none; border: 0; color: var(--ink); font: 500 var(--t-body)/1.2 var(--text-font); width: 100%; padding: 0; }
.zayavka .pole::after { display: none; }
.zayavka .btn { min-height: 100%; padding: 0 40px; }
.zayavka__otvet { margin-top: 24px; font-size: var(--t-lead); }
.zayavka__otvet[hidden] { display: none; }
.zayavka__osh { margin-top: 12px; font-size: var(--t-small); color: #FF9A5C; }
.zayavka__osh:empty { display: none; }

/* ===== ПОДВАЛ: колонки сверху, имя во всю ширину снизу ===== */
.podval { margin-top: var(--razdel); padding: clamp(40px, 3vw, 72px) var(--m) clamp(20px, 1.4vw, 32px); background: var(--s1); display: grid; row-gap: clamp(80px, 12vh, 200px); }
.podval__kol { font-size: var(--t-small); line-height: 1.5; }
.podval__kol > div { grid-column: span 3; }
.podval__kol p { color: var(--ink); margin-bottom: 10px; font-weight: 500; }
.podval__kol ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.podval__kol a { color: var(--muted); text-decoration: none; }
.podval__kol a:hover { color: var(--ink); }
.podval__imya { display: block; width: 100%; height: auto; }
.podval__imya text { font: 700 100px var(--head-font); fill: var(--ink); }
.podval__pravo { margin-top: 18px; font-size: var(--t-small); color: var(--muted); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .marki__verh h2, .marki__verh .poisk-pole { grid-column: 1 / 13; }
  .marki__verh .poisk-pole { margin-top: 28px; }
  .sravn__para, .sravn__txt, .sravn ol, .vnutri h2, .vnutri__sv, .vnutri__karta, .prakt__l, .prakt__p { grid-column: 1 / 13; grid-row: auto; }
  .sravn__txt { order: -1; margin-bottom: 40px; }
  .vnutri__karta { max-width: 520px; }
  .prakt__p { margin-top: 56px; }
  .marki__spisok { grid-column: 1 / 13; } .marki__vitr { display: none; }
  .zayavka__verh { display: flex; flex-direction: column; align-items: stretch; }
  .zayavka__kadr { width: 100%; height: 40vw; max-height: 300px; margin: 32px 0 24px; }
  .ryad .g { max-height: none; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* годы и отличие корпуса - у GLC три «2015–2019» (e7, dd) */
  .ryad ul, .ryad ul.mnogo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; } /* 5-7 корпусов - те же 2 колонки (e7-k1 п. 1) */
  .ryad__dalee { display: none; }
  .zayavka form { grid-template-columns: 1fr 1fr; } .zayavka .btn { grid-column: 1 / 3; min-height: 64px; }
  .podval__kol > div { grid-column: span 6; margin-bottom: 32px; }
}
@media (max-width: 1000px) {
  .sh__nav-tel { display: block; position: fixed; inset: 64px 0 0; z-index: 19; background: var(--bg); padding: 24px var(--m); }
  .sh__nav-tel[hidden] { display: none; }
  .sh__nav-tel a { display: block; padding: 14px 0; font: 500 20px/1.3 var(--text-font); text-decoration: none; }
  :root { --razdel: 96px; }
}
@media (min-width: 701px) and (max-width: 1000px) { h1 { font-size: 48px; } .g1__scena { max-height: 440px; }
  .moya__row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .moya__row .pole:first-child { grid-column: 1 / 3; } } /* планшет: модель и годы в ряд */
@media (max-width: 700px) {
  :root { --t-small: 14px; --t-body: 17px; --t-lead: 20px; --t-head: 26px; }
  .razdel h2, .prakt h3 { font-size: 26px; }
  .marki__tab { font-size: 20px; }
  .marki__tab li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 9px 0; }
  .marki__tab .b, .marki__tab .n { padding: 6px 0; }
  .marki__tab .mod { grid-column: 1 / 3; grid-row: 2; font-size: 17px; line-height: 1.5; }
  .marki__tab .mod a { display: inline-block; padding: 7px 0; } /* модель нажимается пальцем: строка 40+ px */
  .marki__tab .n { font-size: 17px; align-self: center; }
  .marki__tab.svernut li:nth-child(n+13) { display: none; } /* на телефоне 12 популярных, остальные по кнопке */
  .marki__vse { display: block; width: 100%; margin-top: 16px; min-height: 56px; background: var(--s2); border: 0; color: var(--ink); font: 500 17px/1 var(--text-font); cursor: pointer; }
  .sravn__para { column-gap: 8px; }
  .sravn .kadr { height: 34vw; margin-bottom: 36px; }
  .sravn figcaption { font-size: 17px; } .sravn figcaption b { font-size: 14px; }
  .vnutri__sv dd { font-size: 20px; }
  .vnutri__karta { margin-top: 48px; }
  .vopros summary { font-size: 17px; padding: 16px 48px 16px 18px; } .vopros details p { padding: 0 18px 18px; }
  .zayavka__verh { align-items: center; }
.zayavka__l { grid-column: 1 / 8; }
.zayavka__kadr { grid-column: 8 / 13; height: clamp(200px, 14vw, 380px); --x: 50cqw; --ew: 100cqw; }
.zayavka__kod { font-size: 13vw; }
  .zayavka form { grid-template-columns: 1fr; } .zayavka .btn { grid-column: auto; }
  .podval { padding-bottom: 110px; }
  .podval__kol > div { grid-column: span 6; }
}
@media (prefers-reduced-motion: reduce) { .st > span, .g1 .lead, .g1 .moya { animation: none; } .js [data-v] { opacity: 1; translate: none; transition: none; } }

/* ===================== КАТАЛОГ (кусок 2) ===================== */
.kat { padding: clamp(32px, 3vw, 80px) var(--m) 0; }
.kat__verh { align-items: end; row-gap: 28px; }
.kat__zag { grid-column: 1 / 8; }
.kat__verh .poisk-pole { grid-column: 8 / 13; }
.kat h1 { font: 600 var(--t-disp)/1.02 var(--head-font); letter-spacing: -0.02em; }
.kat__itog { margin-top: 8px; font-size: var(--t-lead); color: var(--muted); }
.kat__opis { margin-top: clamp(14px, 1vw, 24px); font-size: var(--t-lead); max-width: 36ch; }
.kat__itog { color: var(--muted); }
/* фильтры: марка и модель полями, как «Моя машина» на главной (39 марок кнопками - 4 ряда, на телефоне лента у края) */
.kat__filtr { margin-top: clamp(32px, 2.4vw, 64px); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 340px) minmax(0, 1fr); gap: 8px; align-items: center; }
.kat__moya { margin-left: clamp(16px, 1.6vw, 40px); display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; font-size: var(--t-body); }
.kat__moya b { font-weight: 500; }
.kat__moya .var { min-height: 48px; font-size: var(--t-small); }
.kat__moya .var[hidden] { display: none; }
/* плитка: корпус в темноте на своём эллипсе (рамки нет, как на главной); наведение - карточка Артура того же корпуса */
.plitki { list-style: none; padding: 0; margin-top: clamp(40px, 3vw, 80px); display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 16vw, 440px), 1fr)); gap: clamp(40px, 3vw, 80px) var(--gap); }
.plitka { display: block; text-decoration: none; color: var(--ink); }
.plitka__ramka { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 8px; }
.plitka .kadr { width: 88%; height: 54%; --x: 50cqw; --ew: 100cqw; }
.plitka .korpus { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.plitka__karta { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bg); opacity: 0; transition: opacity .3s; pointer-events: none; }
@media (hover: hover) {
  .plitka:hover .plitka__karta.gotova { opacity: 1; }
  .plitka:hover .korpus { transform: translateY(-6px); }
}
.plitka .kod { display: block; font: 600 var(--t-body)/1.2 var(--head-font); }
.plitka .kod i { font-style: normal; color: var(--accent); }
.plitka__mash { display: block; margin-top: 8px; font-size: var(--t-body); line-height: 1.4; overflow-wrap: break-word; }
.plitka__pr { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--muted); line-height: 1.4; }
.plitka:focus-visible { outline-offset: 6px; }
.kat__esche { display: block; margin: clamp(48px, 3.4vw, 88px) auto 0; min-height: 56px; padding: 0 36px; background: var(--s2); color: var(--ink); border: 0; font: 500 var(--t-body)/1 var(--text-font); cursor: pointer; }
.kat__esche:hover { background: #222225; }
.kat__esche[hidden] { display: none; }

@media (max-width: 1000px) {
  .kat__zag, .kat__verh .poisk-pole { grid-column: 1 / 13; }
  .kat__filtr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .kat__moya { grid-column: 1 / -1; margin: 16px 0 0; }
}
@media (max-width: 700px) {
  .kat h1 { font-size: 30px; }
  .kat__filtr { grid-template-columns: minmax(0, 1fr); }
  .plitki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .plitka .kod { font-size: 14px; }
  .plitka__mash { font-size: 17px; line-height: 1.35; } .plitka__pr { display: none; }
  .kat { padding-bottom: 96px; }
}

/* ===================== ТОВАР (кусок 3) - основа в блоке «ТОВАР» макета выше ===================== */
.ryad li a { text-decoration: none; color: var(--ink); }
.podhodit .ne, .podhodit.net .da { display: none; }
.podhodit.net .ne { display: block; }
.podhodit p a { color: var(--ink); text-underline-offset: 4px; }
.podhodit p a:hover { color: var(--accent); }
.podpolosa .kod i, .t1__info h1 i { font-style: normal; color: var(--accent); }
.t-podhodit { row-gap: clamp(48px, 3.4vw, 88px); align-items: start; }
.t-podhodit__l { grid-column: 1 / 7; }
.t-podhodit__p { grid-column: 8 / 13; display: grid; gap: 22px; margin: 0; }
.t-podhodit__p dt { font-size: var(--t-small); color: var(--muted); }
.t-podhodit__p dd { margin: 4px 0 0; font-size: var(--t-lead); line-height: 1.4; }
.t-podhodit__spisok { list-style: none; padding: 0; margin-top: clamp(24px, 1.8vw, 44px); display: grid; gap: 10px; font-size: var(--t-lead); line-height: 1.35; }
.t-podhodit__isp { margin-top: 18px; color: var(--muted); font-size: var(--t-body); }
.t-rodnya { grid-column: 1 / 13; margin-top: 0; }
.ne-nayden { min-height: 60vh; }
.ne-nayden h1 { font: 600 var(--t-disp)/1.02 var(--head-font); letter-spacing: -0.02em; }
.ne-nayden__ssylki { margin-top: 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
@media (max-width: 1000px) {
  .t-podhodit__l, .t-podhodit__p { grid-column: 1 / 13; }
  .t1__media { grid-column: 1 / -1; }
}

/* ===================== КАК ПОДОБРАТЬ, ДОСТАВКА (кусок 4) ===================== */
/* шапка страницы как у каталога: заголовок слева, справа шаги */
.str { padding: clamp(32px, 3vw, 80px) var(--m) 0; }
.str__verh { align-items: end; row-gap: 28px; }
.str__zag { grid-column: 1 / 8; }
.str h1 { font: 600 var(--t-disp)/1.02 var(--head-font); letter-spacing: -0.02em; text-wrap: balance; }
.str__opis { margin-top: clamp(14px, 1vw, 24px); font-size: var(--t-lead); line-height: 1.45; max-width: 36ch; }
.str__shagi { grid-column: 9 / 13; padding-left: 1.3em; display: grid; gap: 12px; font-size: var(--t-body); }
.str__shagi li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
:is(.str__shagi, .kak-zakazat__shagi) a { color: var(--ink); text-underline-offset: 4px; }
:is(.str__shagi, .kak-zakazat__shagi) a:hover { color: var(--accent); }
/* подбор: поля как в каталоге, итог справа; все корпуса модели плитками, ваш - полоса под подписью */
.podbor__itog { margin-left: clamp(16px, 1.6vw, 40px); font-size: var(--t-lead); }
.podbor__plitki .plitka { padding-bottom: 14px; border-bottom: 3px solid transparent; }
.podbor__plitki li[aria-current] .plitka { border-bottom-color: var(--accent); }
/* чем отличаются: пары 2 x 2, в паре два корпуса одной модели рядом - каждый на своём эллипсе (как «Как не ошибиться» на главной) */
.otlichiya .setka > h2, .otlichiya__lead { grid-column: 1 / 9; }
.otlichiya__lead { max-width: 44ch; }
.otlichiya__setka { margin-top: clamp(48px, 3.4vw, 88px); row-gap: clamp(64px, 4.4vw, 112px); }
.para { grid-column: span 6; }
.para h3 { font: 600 var(--t-lead)/1.2 var(--head-font); }
.para__mash { margin-top: 6px; font-size: var(--t-body); color: var(--muted); }
.para__dva { margin-top: clamp(24px, 1.8vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); }
.para__dva a { display: block; color: var(--ink); text-decoration: none; }
.para__dva .kadr { display: block; height: clamp(150px, 10vw, 270px); --x: 50cqw; --ew: 100cqw; margin-bottom: clamp(36px, 2.6vw, 68px); }
.para__dva .kod { display: block; font: 600 var(--t-body)/1.2 var(--head-font); white-space: nowrap; }
.para__g { display: block; margin-top: 6px; font-size: var(--t-body); }
.para__pr { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--muted); line-height: 1.4; }
@media (hover: hover) { .para__dva a:hover .korpus { transform: translateY(-6px); } }
/* установка: подтверждённое Артуром слева, справа карточка DUAL вашего корпуса (на ней кабель и вторая камера) */
.ustanovka { align-items: start; }
.ustanovka__l { grid-column: 1 / 7; }
.ustanovka dl { margin-top: clamp(40px, 3.4vw, 88px); display: grid; gap: clamp(24px, 2vw, 48px); }
.ustanovka dt { font-size: var(--t-small); color: var(--muted); }
.ustanovka dd { margin: 6px 0 0; font: 500 var(--t-lead)/1.4 var(--text-font); max-width: 32ch; }
.ustanovka__karta { grid-column: 8 / 13; margin: 0; }
.ustanovka__karta img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.ustanovka__karta figcaption { margin-top: 12px; font-size: var(--t-small); color: var(--muted); }
/* доставка: три факта в ряд плашками (как свойства товара), шаги заказа - три колонки */
.dostavka-s__fakty { margin-top: clamp(48px, 4vw, 104px); list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dostavka-s__fakty li { background: var(--s1); padding: clamp(24px, 1.8vw, 44px); font: 500 var(--t-head)/1.15 var(--head-font); letter-spacing: -0.01em; text-wrap: balance; }
.kak-zakazat h2 { grid-column: 1 / 13; }
.kak-zakazat__shagi { grid-column: 1 / 13; margin-top: clamp(40px, 3vw, 80px); list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); counter-reset: sh; }
.kak-zakazat__shagi li { counter-increment: sh; }
.kak-zakazat__shagi li::before { content: counter(sh); display: block; margin-bottom: clamp(12px, 1vw, 24px); font: 600 var(--t-head)/1 var(--head-font); color: var(--muted); } /* порядок шагов настоящий - номер крупно, без линеек */
.kak-zakazat__shagi b { display: block; font: 600 var(--t-lead)/1.25 var(--head-font); }
.kak-zakazat__shagi span { display: block; margin-top: 10px; color: var(--muted); max-width: 34ch; }
@media (max-width: 1000px) {
  .str__zag, .str__shagi, .otlichiya .setka > h2, .otlichiya__lead, .para, .ustanovka__l, .ustanovka__karta { grid-column: 1 / 13; }
  .podbor__itog { grid-column: 1 / -1; margin: 16px 0 0; }
  .ustanovka__karta { max-width: 520px; margin-top: 56px; }
  .dostavka-s__fakty { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .str h1 { font-size: 30px; }
  .podbor__plitki .plitka__pr { display: block; } /* в подборе отличие корпуса - главное, на телефоне не прячем */
  .para__dva { column-gap: 12px; }
  .para__dva .kadr { height: 30vw; margin-bottom: 28px; }
  .para__dva .kod { font-size: 14px; }
  .dostavka-s__fakty li { font-size: 22px; }
  .kak-zakazat__shagi { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .str { padding-bottom: 0; }
}

/* ===================== ПОЛЕ ВЫБОРА (владелец 31.10 «меню белое»): свой тёмный список поверх select, select - значение и события ===================== */
.pole select option { background: var(--s2); color: var(--ink); } /* без скрипта родной список тоже тёмный */
.pole.vybor select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.vybor__knopka { all: unset; display: block; font: 500 var(--t-body)/1.2 var(--text-font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 24px; cursor: pointer; }
.vybor__knopka::before { content: ''; position: absolute; inset: 0; } /* нажимается всё поле, не только текст */
.vybor__knopka:disabled { cursor: default; }
.pole.vybor:hover:not(:has(.vybor__knopka:disabled)) { background: #1F1F22; }
.pole.otkryt::after { transform: translateY(-30%) rotate(225deg); }
.pole::after { transition: transform .2s; }
.vybor__spisok { position: absolute; z-index: 8; left: 0; top: calc(100% + 4px); min-width: 100%; width: max-content; max-width: min(440px, calc(100vw - 2 * var(--m)));
  max-height: min(440px, 56vh); overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 6px 0; background: var(--s2);
  box-shadow: 0 18px 48px rgb(0 0 0 / .6); outline: none; scrollbar-width: thin; scrollbar-color: #3A3A3E transparent; } /* taste-skill-ignore: всплывающий список - настоящий оверлей, как список поиска */
.vybor__spisok li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 12px 20px 12px 17px; border-left: 3px solid transparent;
  font: 500 var(--t-body)/1.3 var(--text-font); color: var(--ink); cursor: pointer; white-space: nowrap; }
.vybor__spisok li span { color: var(--muted); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.vybor__spisok li.akt { background: #26262A; }
.vybor__spisok li[aria-selected="true"] { border-left-color: var(--accent); }
@media (max-width: 700px) { .vybor__spisok { max-width: none; width: 100%; } .vybor__spisok li { padding-top: 14px; padding-bottom: 14px; } }
/* открытый список - над рядом корпусов и плитками ниже (у формы на главной своя стопка из-за анимации появления) */
.pole.otkryt { z-index: 9; }
:is(.moya, .kat__filtr):has(.pole.otkryt) { position: relative; z-index: 9; }

/* фокус поля - один признак на всё поле (владелец 31.10 «два прямоугольника оранжевых ... очень не красиво»): линия 2 px снизу и чуть светлее фон;
   у input, select и кнопки списка внутри своей рамки нет. С клавиатуры виден: поле подсвечено целиком */
.pole :is(input, select, .vybor__knopka):focus-visible, .poisk-pole input:focus-visible { outline: none; }
.pole, .poisk-pole input { border-bottom: 2px solid transparent; }
.pole:has(:is(input, .vybor__knopka, .vybor__spisok):focus-visible), .pole:has(input:focus), .poisk-pole input:focus { border-bottom-color: var(--accent); background-color: #1F1F22; }
/* поиск (владелец 31.10 «при поиске справа какой то хаос одни слова проходят через серое меню поиска»): у поля своя стопка слоёв (анимация появления),
   блоки ниже рисовались поверх списка - открытое поле поднимаем над страницей; окно поиска из шапки - сплошной фон */
.poisk-pole:focus-within, .poisk-pole:has(ul:not([hidden])) { z-index: 15; }
.poisk-okno { background: var(--bg); }
.sh__nav-poisk { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; background: none; border: 0; color: var(--muted); font: 500 20px/1.3 var(--text-font); cursor: pointer; text-align: left; }

/* карточка в галерее товара - крупно (владелец 31.10 16:2x «на телефоне некрасиво картинка показывается» - была 37 % ширины посреди панели):
   компьютер - во всю высоту панели, телефон - во всю ширину минус поля, высота по пропорции карточки 3:4; смена корпус/карточка - плавной сменой высоты.
   Корпус на эллипсе - как был (размеры кадра в режиме корпуса не менялись) */
.t1__scena { transition: padding .35s cubic-bezier(.16, 1, .3, 1); }
.t1__scena .kadr { transition: height .35s cubic-bezier(.16, 1, .3, 1), width .35s cubic-bezier(.16, 1, .3, 1); }
.t1__scena:has(.kadr.karta) { padding: clamp(12px, 1.2vw, 32px); }
.t1__scena .kadr.karta { width: 100%; height: 100%; }
@media (max-width: 1000px) {
  .t1__scena:has(.kadr.karta) { padding: var(--m); }
  .t1__scena .kadr.karta { height: min(calc(100cqw * 4 / 3), 82svh); } /* cqw - ширина панели без полей */
}
@media (prefers-reduced-motion: reduce) { .t1__scena, .t1__scena .kadr { transition: none; } }