/* cat.css — стили страниц-категорий Фазы 5 (build_pages.py). Скоупим под .cat-page, чтобы НЕ задеть Tilda-хедер/футер. Переиспользуем .av-grid/.av-card/.seo-art из arenda.css. Токены — из car.css. */ .cat-page main{background:#fff} /* ───── МОБАЙЛ: герой категории — авто на ВСЮ ШИРИНУ, контент опущен, скруглённый низ-карточки (по ТЗ) ───── Фон-картинка (композиция авто) живёт на .tn-atom элемента 1775553130982000001 — таргетим её. #d8d8dc = студийный цвет фона композиции (заливка верх/низ при background-size:100% auto, без боковых полей). ★ КАК TILDA МАСШТАБИРУЕТ ГЕРОЙ (ключ к этим правилам): контент-группы артборда зумятся (zoom, НЕ transform) на коэф. `viewport / design-ширина` (design = 375 для 376–479, и 320 для ≤375), а высота САМОГО артборда НЕ зумится. Поэтому: позиции групп задаём КОНСТАНТАМИ-px (zoom их сам масштабирует), а высоту артборда — в `vw` (чтобы шла за зумленным контентом, иначе на широких телефонах кнопка вылезает за артборд и обрезается). Группы ОПУЩЕНЫ через top (НЕ transform — анимация бегущей строки на внутр.треке, transform её ломает): крошки → отступ → бегущая строка → отступ → авто на всю ширину → ~52px → H1+подзаголовок → кнопка. СКРУГЛЕНИЕ НИЗА: даём border-radius самому .t396__artboard (у него overflow:hidden) — он обрезает фон по скруглённой форме (надёжно, артборд в предсказуемом не-зум контексте); фон-элемент просто заведомо высокий. */ /* ── Композиция ставится ПО АВТО, а не по константе (18.09.2026) ─────────────── Было background-position:center 94% — одинаково для всех страниц. Но кадрирование у композиций РАЗНОЕ: media/geo/…/hero-m.webp — авто занимает 0,38…0,61 высоты кадра, media/hero/{город}/{класс}-m.webp — 0,58…1,00. При одной константе низ авто вставал то на Y≈405 (дыра ~107px до H1 на /uae/), то на Y≈660 — и H1 ложился ПОВЕРХ машины (/turkey/istanbul/commercial/, скриншот заказчицы 18.09.2026). Низ авто измерен для каждого кадра (inc/hero-box.php, генерится gen_hero_box.py) и приезжает в --cb; кадр сдвигается так, чтобы низ авто всегда стоял на (--htext − 64px). min(0px,…) — страховка: кадр не опускается ниже верха фрейма, иначе сверху полоса заливки. Фолбэк --cb:.64 = прежняя картинка (для страниц без замера). */ .cat-page #rec2127307841{--hbox:760px;--htext:512px;--himg:var(--himg-s,calc(var(--hbox) * 1.17));--hcar:calc(var(--htext) - 64px);} @media(min-width:480px) and (max-width:639px){ .cat-page #rec2127307841{--hbox:650px;--htext:405px;--himg:var(--himg-m,calc(var(--hbox) * 1.17));} } @media(max-width:479px){ .cat-page #rec2127307841 .t396__artboard{border-radius:0 0 50px 50px!important;} /* ⚠️ ФОН-ЭЛЕМЕНТ ЗАВЕДОМО ВЫШЕ КАРТОЧКИ, А НЕ РОВНО --hbox (18.09.2026). У него СВОЁ скругление 0 0 50px 50px, и когда он кончался ВНУТРИ артборда (760 ед. × zoom = 811 px при карточке 875 px), кадр обрывался, а ниже шла заливка другого тона со вторым скруглением — заказчица увидела это как «двойной фон» на /turkey/istanbul/. Лишнее режет overflow:hidden артборда по его же скруглению. Кадр привязан к ВЕРХУ элемента (background-position), поэтому высота на положение авто не влияет. */ .cat-page #rec2127307841 .tn-elem[data-elem-id="1775553130982000001"], .cat-page #rec2127307841 .tn-elem[data-elem-id="1775553130982000001"] .tn-atom{height:1000px!important;} .cat-page #rec2127307841 .tn-elem[data-elem-id="1775553130982000001"] .tn-atom{ background-color:var(--hfb,var(--hf,#d8d8dc))!important;background-size:auto var(--himg)!important; background-position:center min(0px,calc(var(--hcar) - var(--cb,.64) * var(--himg)))!important; background-repeat:no-repeat!important;} .cat-page #rec2127307841 .t396__group[class*="1775522018499000002"]{top:133px!important;} /* бегущая строка (зазор крошки→строка ~½) */ .cat-page #rec2127307841 .tn-elem[data-elem-id="1775550822244000001"]{top:136px!important;}/* её линия */ .cat-page #rec2127307841 .t396__group[class*="1775521225523000003"]{top:512px!important;} /* H1+подзаголовок (зазор кольцо→H1 ≈52px) */ .cat-page #rec2127307841 .t396__group[class*="1775834532983000001"]{top:673px!important;} /* кнопка */ .cat-page #rec2127307841 .t396__group[class*="1775522904882000002"]{top:673px!important;} /* кнопка (hover-копия) */ } /* ⚠️ КНОПКА НАЕЗЖАЛА НА ПОСЛЕДНЮЮ СТРОКУ ПОДЗАГОЛОВКА (замечание заказчицы 08.09.2026 п. 5, скриншот /universaly/ при 400 px). H1+подзаголовок и кнопка стоят КОНСТАНТАМИ (512 и 673), а длина подзаголовка у 59 категорий разная. Замер 08.09.2026 по всем 59 категориям: ширина 320 — 30 страниц с зазором < 8 px, минимум −43 px ширина 360 — 30 страниц, минимум −48 px ширины 375/400/430/479 — по 8 страниц, минимум −13…−16 px Её слова: «смело можно кнопку опустить чтобы отступ равноценный был, как раз место позволяет». Опускаем кнопку на ХУДШИЙ случай полосы (в единицах артборда, их масштабирует zoom) и на столько же поднимаем высоту артборда в vw, иначе кнопка вылезет за скруглённый низ карточки. ДЕЙСТВУЮЩИЕ ЧИСЛА (замер 08.09→09.09.2026; правки ниже по файлу, здесь — только их смысл): ≤374 (база 320): кнопка 673 → 785, высота артборда 228vw → 264vw 375–479 (база 375): кнопка 673 → 753, высота артборда 200vw → 216vw ⚠️ ЧИСЛА ЗДЕСЬ — ИЗМЕРЕННЫЕ, И ИХ ДВОЕ НА ПОЛОСУ. Первая редакция комментария осталась с парой 728/697 и 246vw/208vw после того, как числа переставили по замеру: комментарий врал, а приёмка сверяла ЛИТЕРАЛЫ из него и падала на исправном сайте (09.09.2026). ⚠️ ЧЕМ СТЕРЕЖЁТСЯ. Зазор «последняя строка подзаголовка → кнопка» и запас под кнопкой внутри артборда меряет pipeline/check_hero_button.py (замер 09.09.2026 по всем категориям и семи веткам). check_overlaps.py тут НЕ помощник: он считает только пересечения и зазор не видит — прежний комментарий ссылался на него по памяти. Соотношение «высота·база/100 ≥ top + 47» проверяет pipeline/acceptance.py счётом, а не сверкой литералов. */ /* ⚠️ ГРАНИЦА ПОЛОС — 374/375, А НЕ 375/376. Tilda переключает базу артборда РОВНО на 375: при 374 zoom = 374/320 = 1.169, при 375 zoom = 1 (база 375). Старые правила отдавали ширине 375 числа полосы 320 — при zoom 1 кнопка вставала на 728, а артборд считался как 246vw = 922 px: 158 px пустой серой полосы под кнопкой ровно на одной ширине (замер 08.09.2026, check_empty_space.py). Такова же была и исходная граница 228vw/200vw. */ @media(max-width:374px){ .cat-page #rec2127307841 .t396__group[class*="1775834532983000001"]{top:785px!important;} .cat-page #rec2127307841 .t396__group[class*="1775522904882000002"]{top:785px!important;} } @media(min-width:375px) and (max-width:479px){ .cat-page #rec2127307841 .t396__group[class*="1775834532983000001"]{top:753px!important;} .cat-page #rec2127307841 .t396__group[class*="1775522904882000002"]{top:753px!important;} } /* высота артборда в vw = под зум контента: 375–479 (design 375); ≤374 (design 320) ⚠️ --habpx (px) — ЗАМЕРЕННАЯ ВЫСОТА ПО КОНТЕНТУ, её ставит arenda.js сразу под кнопкой. Числа в vw рассчитаны на самый длинный подзаголовок, и на короткой странице (/thailand/) под кнопкой оставалось ~170 px пустой серой карточки (замечание заказчицы 18.09.2026). ⛔ Почему ПЕРЕМЕННАЯ, а не inline height из JS: Tilda после своей инициализации пишет artboard.style.height САМА и стирает наш inline (проверено — в DOM оставалось её 810.92px, а высоту определял этот vw-литерал). Кастомное свойство она не трогает, а правило с !important здесь всё равно сильнее её нестрогого inline. */ @media(min-width:375px) and (max-width:479px){ .cat-page #rec2127307841 .t396__artboard{height:var(--habpx,216vw)!important;} } @media(max-width:374px){ .cat-page #rec2127307841 .t396__artboard{height:var(--habpx,264vw)!important;} } /* 480–639px: Tilda-артборд тут ТЯНЕТСЯ непрерывно (832→1040) — авто на всю ширину + заливка + скругление низа. */ @media(min-width:480px) and (max-width:639px){ .cat-page #rec2127307841 .t396__artboard{border-radius:0 0 50px 50px!important;} /* та же страховка, что и в полосе ≤479: фон-элемент обязан быть ВЫШЕ карточки, иначе его собственное скругление рисует вторую плашку внутри первой (18.09.2026) */ .cat-page #rec2127307841 .tn-elem[data-elem-id="1775553130982000001"], .cat-page #rec2127307841 .tn-elem[data-elem-id="1775553130982000001"] .tn-atom{height:1000px!important;} .cat-page #rec2127307841 .tn-elem[data-elem-id="1775553130982000001"] .tn-atom{ background-color:var(--hfb,var(--hf,#d8d8dc))!important;background-size:auto var(--himg)!important; background-position:center min(0px,calc(var(--hcar) - var(--cb,.64) * var(--himg)))!important; background-repeat:no-repeat!important;} } /* ⚠️ КРОШКИ НА ПЛАШКАХ (замечание заказчицы 08.09.2026 п. 5, скриншот /pochasovaya/). Было написано «480–639 и 640–959 контент НЕ двигаем, зазор и так большой». ЗАМЕР 08.09.2026 показал обратное: между низом шапки и верхом бегущей строки там 24–42 px, а крошки стоят КОНСТАНТОЙ top:108 (16 px строка) — и ложатся прямо на плашку «24/7 delivery to your door». Замер по ширинам (крошки 108..124): 480 плашка 109 · 540 → 122 · 639 → 145 · 640 → 95 · 768 → 114 · 840 → 125 · 959 → 142 то есть пересечение на 480–560 и на 640–830. При 320–479 дефекта нет: там бегущая строка уже опущена до 133 px правилом выше — ровно тем же приёмом, что и здесь. ⚠️ ПОЧЕМУ НЕ ДВИГАЕМ КРОШКИ, А ДВИГАЕМ ПЛАШКУ. Щель 24 px физически меньше строки с полями: куда крошки ни поставь, отступ сверху или снизу будет 3–4 px, а «100vw» на десктопе с обычной полосой прокрутки шире раскладки на ~15 px и съедает даже это. Место есть ниже — как и сказала заказчица про кнопку: «смело можно опустить, как раз место позволяет». ⚠️ ЧИСЛА — В ЕДИНИЦАХ АРТБОРДА, ИХ МАСШТАБИРУЕТ ZOOM (замер: zoom = ширина/375 на 480–639 и ширина/640 на 640–959). Нужно, чтобы верх плашки был ≥ 132 px на САМОЙ УЗКОЙ ширине полосы: 480–639: 132 / (480/375) = 103,1 → 104 (при 480 плашка встаёт на 133, при 639 — на 177) 640–959: 132 / (640/640) = 132 → 133 (при 640 — 133, при 959 — 199) Линия бегущей строки сохраняет СВОЙ сдвиг относительно группы (+3 на 480–639, −7 на 640–959). */ @media(min-width:480px) and (max-width:639px){ .cat-page #rec2127307841 .t396__group[class*="1775522018499000002"]{top:104px!important;} .cat-page #rec2127307841 .tn-elem[data-elem-id="1775550822244000001"]{top:107px!important;} } @media(min-width:640px) and (max-width:959px){ .cat-page #rec2127307841 .t396__group[class*="1775522018499000002"]{top:133px!important;} .cat-page #rec2127307841 .tn-elem[data-elem-id="1775550822244000001"]{top:126px!important;} } /* Мобилка (≤639): СЕКЦИЯ героя = серая студийная карточка целиком. Заливку/скругление/клип вешаем на сам РЕКОРД #rec2127307841 (а НЕ только на фон-элемент Tilda) — Tilda-JS на полной загрузке пересчитывает свои .tn-elem по data-полям и может сдвинуть фон так, что верх (зона крошек) останется БЕЗ заливки (белая полоса). Фон на рекорде это исключает: серый гарантированно от верха до низа. + скруглённый низ + отступ до след.блока. */ @media(max-width:639px){ .cat-page #rec2127307841{background:var(--hfb,var(--hf,#d8d8dc))!important;border-radius:0 0 50px 50px!important; position:relative!important;margin-bottom:24px!important;} /* ::before заливает серым ВВЕРХ от карточки (bottom:100%) — перекрывает «белую полосу» в зоне крошек, где бы Tilda ни поставила верх hero (у заказчицы артборд valign=center/scale двигает контент → сверху белело). Тянется до 200px вверх (под хедер); хедер-пилюля непрозрачна, лишний серый под ней не виден. */ .cat-page #rec2127307841::before{content:""!important;position:absolute!important;left:0!important;right:0!important; bottom:100%!important;height:200px!important;background:var(--hf,#d8d8dc)!important;} } /* ★ВАЖНО: шрифт Inter Tight + CSS-переменные задаются ЛОКАЛЬНО на .av-fleet в arenda.css. Наши обёртки (.cat-fleet/.cat-content и т.д.) вне .av-fleet → без этого блока контент рендерится СЕРИФОМ (Times) и .av-card-переменные не резолвятся. Объявляем шрифт+токены на наших контейнерах. */ .cat-content,.cat-fleet,.seo-faq,.cat-links{ font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; -webkit-font-smoothing:antialiased; --ac:#cefe46;--ink:#202020;--dark:#1d1d1d;--plate:#f0f2f3;--plate2:#e7ebec;--muted:#8b8f93;--white:#fff; } .cat-content *,.cat-fleet *,.seo-faq *,.cat-links *{box-sizing:border-box} /* перебить глобальный Tilda-цвет ссылок (#ff8562 оранжевый) внутри нашего контента */ .cat-content a,.cat-fleet a,.cat-links a{color:inherit!important} .av-card__name a{color:var(--ink)!important;text-decoration:none} .cat-content{max-width:1240px;margin:0 auto;padding:96px clamp(16px,4vw,40px) 0} @media(max-width:760px){.cat-content{padding-top:78px}} /* хлебные крошки. МОБАЙЛ (≤959): НАЛОЖЕНЫ на фон героя (абсолютно), видимы в зазоре между хедером и бейджами-преимуществами — не отдельной полоской и не спрятаны под хедер. ДЕСКТОП (≥960): абсолютно в нижне-левой пустой зоне героя. */ .cat-bcwrap{font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; --muted:#8b8f93;--ink:#202020} .cat-bcwrap .cat-bc{margin-bottom:0} .cat-bcwrap--desk{display:none} @media(max-width:959px){ .cat-bcwrap--mob{position:absolute;inset-inline-start:clamp(16px,4vw,40px);inset-inline-end:clamp(16px,4vw,40px); z-index:7;max-width:none;margin:0;padding:0} /* ⚠️ КРОШКИ НА МОБИЛЬНОМ — СТРОГО В ОДНУ СТРОКУ. Замер 09.09.2026 (check_overlaps.py, 320/375/400/480): на /fr/phang-nga-bay/ французская крошка «Location de voiture pour un voyage dans la baie de Phang Nga» переносилась на ВТОРУЮ строку и ложилась на чипы бегущей строки — 6 столкновений до 3435 px². Крошки лежат абсолютно, в зазоре между шапкой и бегущей строкой высотой в ОДНУ строку: второй строке там места нет физически, и она обязана быть обрезана многоточием, а не наезжать. Перевод длиннее исходника — это норма, поэтому правило по ширине, а не по конкретному языку. */ .cat-bcwrap--mob .cat-bc{margin:0;font-size:13px;flex-wrap:nowrap;overflow:hidden} .cat-bcwrap--mob .cat-bc>*{flex:0 0 auto} .cat-bcwrap--mob .cat-bc span[aria-current]{flex:0 1 auto;min-width:0;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} } @media(max-width:479px){ .cat-bcwrap--mob{top:95px} } /* телефоны: герой высокий, бегущая строка опущена до ~160 */ @media(min-width:480px) and (max-width:959px){ .cat-bcwrap--mob{top:108px} } /* крупные/планшет: хедер выше */ @media(min-width:960px){ .cat-bcwrap--mob{display:none} .cat-bcwrap--desk{display:block;position:absolute;z-index:6;inset-inline-start:clamp(16px,5vw,90px);bottom:42px} } .cat-bc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:22px} .cat-bc a{color:var(--muted)!important;text-decoration:none;transition:color .15s} .cat-bc a:hover{color:var(--ink)!important} .cat-bc span[aria-current]{color:var(--ink);font-weight:600} .cat-bc>span{opacity:.5} /* герой категории */ .cat-hero{margin-bottom:30px} .cat-eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:#1d1d1d;background:#cefe46;border-radius:100px;padding:6px 14px;margin-bottom:16px} .cat-h1{font-size:clamp(30px,4.6vw,52px);line-height:1.05;font-weight:800;color:var(--ink);margin:0 0 14px;letter-spacing:-.02em} .cat-lead{font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:#42474b;max-width:880px;margin:0} /* заголовки секций */ .cat-h2{font-size:clamp(24px,3vw,34px);line-height:1.1;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em} /* каталог категории — переиспользуем .av-grid/.av-card из arenda.css */ .cat-fleet{max-width:1240px;margin:8px auto 0;padding:18px 0 10px} .cat-fleet .av-grid{margin-top:18px} /* SEO-статья и FAQ идут полной шириной — у .seo-art свои стили в arenda.css. FAQ — нативный аккордеон в фирменном стиле. */ .seo-faq{max-width:1240px;margin:10px auto 0;padding:20px clamp(16px,4vw,40px) 40px} .seo-faq__list{display:flex;flex-direction:column;gap:12px;margin-top:18px} .seo-faq__item{background:var(--plate);border-radius:18px;padding:4px 22px;transition:background .15s} .seo-faq__item[open]{background:var(--plate2)} /* ⚠️ RTL (tr2-rtl, 15.09.2026). Шеврон стоит логически (inset-inline-end), а место под него было ФИЗИЧЕСКИМ (padding-right:30px): на /ar/ шеврон уезжал влево, туда, где паддинга нет, и ложился на первые буквы вопроса — замер «до» на 390: /ar/turkey/ 4 из 8, /ar/turkey/economy/ 4 из 8, /ar/uae/sports/ 2, /ar/turkey/istanbul/ 1. А рамка border-inline-end в RTL становилась ЛЕВОЙ, и «∨» после поворота на 45° превращался в «<». Место — логическое (padding-inline-end), рамка — физическая right: знак вертикальный, отражать нечего, в LTR вычисленные значения те же (padding-right 30, left 0, border-right 2px). */ .seo-faq__q{font-size:17px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;padding:18px 0;padding-inline-end:30px;position:relative} .seo-faq__q::-webkit-details-marker{display:none} .seo-faq__q::after{content:"";position:absolute;inset-inline-end:2px;top:50%;width:11px;height:11px; border-right:2px solid #1d1d1d;border-bottom:2px solid #1d1d1d;transform:translateY(-65%) rotate(45deg);transition:transform .2s} .seo-faq__item[open] .seo-faq__q::after{transform:translateY(-35%) rotate(225deg)} .seo-faq__a{padding:0 0 18px;color:#42474b;font-size:16px;line-height:1.55} .seo-faq__a p{margin:0} /* SEO-перелинковка категорий внизу */ .cat-links{max-width:1240px;margin:0 auto;padding:10px clamp(16px,4vw,40px) 60px} .cat-links__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:18px} .cat-links__col h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 10px} .cat-links__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .cat-links__col a{color:#5a5f64;text-decoration:none;font-size:14px;transition:color .15s} .cat-links__col a:hover{color:#1d1d1d} .cat-links__col li.is-sub a{padding-inline-start:12px;font-size:13px;color:#8b8f93} .cat-links a.is-cur{color:#1d1d1d;font-weight:700} .cat-links__col h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 10px} /* ⚠️ ДЕСКТОП: КНОПКА ГЕРОЯ ЛЕЖАЛА НА ПОСЛЕДНИХ СТРОКАХ ЛИДА (замечание заказчицы 09.09.2026, п. 5б и п. 2). На мобильных кнопку опустили ещё 08.09, а десктоп никто не мерил: там H1, подзаголовок и обе группы кнопки подняты ОДНИМ правилом arenda.css `@media(min-width:961px){ … transform:translateY(-170px) }`, поэтому длина подзаголовка двигает текст ВНИЗ, а кнопка стоит на месте. ЗАМЕР 09.09.2026 — 59 категорий × 7 веток × 3 ширины (1200/1366/1920), 1239 замеров, pipeline/check_hero_button.py, зазор «нижняя строка лида → верх кнопки» в единицах артборда (Tilda зумит содержимое на ширина/1200, поэтому числа одни на все десктопные ширины). ДО правки: ветка худший зазор страниц с наездом en −1,0 2 / 59 th +12,0 0 / 59 ru −34,3 15 / 59 zh +45,0 0 / 59 de −29,0 9 / 59 fr −34,3 11 / 59 ko +32,0 0 / 59 37 / 413 адресов на каждой ширине Опускаем ТОЛЬКО кнопку (H1 и лид остаются на донорских местах) на столько, чтобы худший зазор стал ≥ 10 единиц: при самой узкой десктопной ширине 961 зум 0,80 — это ≥ 8 px на экране, порог проверки. ⚠️ СДВИГ ПОДБИРАЛСЯ ЗАМЕРОМ ЛИДА, А НЕ АРИФМЕТИКОЙ ПО ПЕРВОМУ ПРОГОНУ. Попытка сосчитать «нужный сдвиг = 10 − прежний зазор» ошиблась на fr: пока кнопка лежала НА тексте, нижние строки лида оказывались под ней и в замер зазора не попадали — после сдвига «худшая» строка сменилась. Отдельный зонд (нижняя строка H1+лида против верха кнопки, 413 адресов, 1200 px) дал честные минимумы при действующих сдвигах: en 11 (dy 12) · th 24 (12) · ru 12 (46) · zh 57 (12) · de 11 (40) · ko 44 (12) fr −2 (46) → fr поднят до 58 Итоговые сдвиги: fr +58, ru +46, de +40, остальные +12. Наибольший зазор после правки: en 89, ko 70, zh 57, th 90, de 117, ru 122, fr 136 единиц. ⚠️ ПОЧЕМУ НЕ ОДНО ЧИСЛО НА ВСЕХ. Худшему случаю (ru/fr) нужен +46; тем же сдвигом на английском корне зазор в самом длинном случае вырос бы до 124 единиц вместо 90 — лишний воздух на самой посещаемой ветке. Язык известен в момент отрисовки (html[lang]), поэтому сдвиг задаётся переменной. ⚠️ ПОЧЕМУ В cat.css, А НЕ В arenda.css. Запись #rec2127307841 есть И НА ГЛАВНОЙ (проверено запросом 09.09.2026: главная — 1 вхождение, категория — 1, карточка авто — 0). На главной лид короткий, худший зазор 59 px на всех семи ветках и трёх ширинах — двигать там нечего, а правка в общем файле сдвинула бы кнопку и на ней. Правило скоупим под .cat-page — это же правило урока Дубая: правка карточки авто в общем arenda.css дала 154 наложения. ⚠️ TRANSFORM ЗАМЕНЯЕТ, А НЕ ДОБАВЛЯЕТСЯ. Вторым правилом «ещё translateY» подъём −170px был бы стёрт и кнопка ускакала бы вниз на 170 px. Поэтому пишем ПОЛНОЕ значение с calc(), а не добавку, и берём селектор строго специфичнее донорского (.cat-page + #rec…). ⚠️ ПОЛОСА 480–960 БЫЛА СЛЕПЫМ ПЯТНОМ. Мобильный набор ширин кончался на 479, десктопный начинался с 1200 — и наезд кнопки на лид в промежутке никто не мерил. Замер 09.09.2026 (413 адресов на каждой ширине, зазор «нижняя строка H1+лида → верх кнопки» в единицах артборда полосы): 480–639 (база 375, артборд 176,0vw, запас под кнопкой 39,8 ед.): en −1,6 · th +13,3 · ru −46,9 · zh +39,1 · de −32,0 · fr −57,8 · ko +24,2 640–959 (база 640, артборд 107,0vw, запас 57 ед.): en −1,0 · th +12,0 · ru −34,0 · zh +45,0 · de −29,0 · fr −48,0 · ko +32,0 В этих полосах у кнопки СВОЕГО transform нет (подъём −170px донор включает только с 961), поэтому сдвиг пишем целиком, без вычитания. ⚠️ РОВНО 960 — ОТДЕЛЬНАЯ СТРОКА. У Tilda граница десктопа на 960: артборд там уже фиксированный 675 css px, а донорский подъём −170px включается только с 961. Правило «≥961» эту одну ширину пропускало, а правило «640–959» её не покрывало. ⚠️ АРТБОРД РАСТЁТ ВМЕСТЕ С КНОПКОЙ. Запас под кнопкой в полосе 480–639 всего 39,8 ед.; сдвиг ru/de/fr больше него, и кнопку срезал бы скруглённый низ карточки. Высоту артборда поднимаем на ту же величину — тем же приёмом, что и на мобильных (там 264vw/216vw). Переменные БЕЗРАЗМЕРНЫЕ: их надо умножать и на 1px (сдвиг в единицах артборда), и на vw (высота артборда, которая в этих полосах задана в vw) — с длиной так нельзя. */ html{--hbtn:12;--hbtn480:12;--habH:0;--habH480:0} html[lang="de"]{--hbtn:40;--hbtn480:42;--habH:0;--habH480:12} html[lang="ru"]{--hbtn:46;--hbtn480:58;--habH:0;--habH480:28} html[lang="fr"]{--hbtn:58;--hbtn480:68;--habH:10;--habH480:38} @media(min-width:480px) and (max-width:639px){ .cat-page #rec2127307841 .tn-group__21273078411775834532983000001, .cat-page #rec2127307841 .tn-group__21273078411775522904882000002{ transform:translateY(calc(var(--hbtn480,12) * 1px))!important; } .cat-page #rec2127307841 .t396__artboard{ height:var(--habpx,calc((176 + var(--habH480,0) / 3.75) * 1vw))!important; } } @media(min-width:640px) and (max-width:959px){ .cat-page #rec2127307841 .tn-group__21273078411775834532983000001, .cat-page #rec2127307841 .tn-group__21273078411775522904882000002{ transform:translateY(calc(var(--hbtn,12) * 1px))!important; } .cat-page #rec2127307841 .t396__artboard{ height:calc((107 + var(--habH,0) / 6.4) * 1vw)!important; } } /* ⚠️ РОВНО 960: ПОДНИМАЕМ ВЕСЬ ТЕКСТ, КАК НА 961. Первая правка сдвигала здесь только кнопку (подъёма −170px у донора на этой ширине нет) — и кнопка упёрлась в ДЕСКТОПНЫЕ КРОШКИ: с 960 включается .cat-bcwrap--desk, прижатая к низу героя (bottom:42px), а артборд тут уже короткий, фиксированные 675 css px. Замер 09.09.2026: /fr/phang-nga-bay/ при 960 зазор −6, и ограничивала не строка лида, а крошка «Location de voiture». Место между лидом и крошками на этой ширине есть только с донорским подъёмом, поэтому повторяем для .cat-page ровно то, что донор включает с 961: H1 и лид на −170, кнопка на −170 + сдвиг. Главную не трогаем — правило скоупено под .cat-page, а граница 960/961 у донора остаётся как есть. */ @media(min-width:960px) and (max-width:960px){ .cat-page #rec2127307841 .tn-elem[data-elem-id="1775521225523000004"], .cat-page #rec2127307841 .tn-elem[data-elem-id="1775521225524000006"]{ transform:translateY(-170px)!important; } .cat-page #rec2127307841 .tn-group__21273078411775834532983000001, .cat-page #rec2127307841 .tn-group__21273078411775522904882000002{ transform:translateY(calc(-170px + var(--hbtn,12) * 1px))!important; } } @media screen and (min-width:961px){ .cat-page #rec2127307841 .tn-group__21273078411775834532983000001, .cat-page #rec2127307841 .tn-group__21273078411775522904882000002{ transform:translateY(calc(-170px + var(--hbtn,12) * 1px))!important; } }