/* SaveAuto74 — стили сайта. Утилитарный стиль крупных автомаркетплейсов: белый фон, чёрная шапка,
   системный шрифт (ничего не грузим), серые плитки, красный — запись, синий — звонок и ссылки. Mobile-first. */

:root {
    --ink: #000;
    --text: #222;
    --mute: #8a8c93;
    --line: rgba(17, 40, 75, .09);
    --tile: #f2f3f5;
    --tile-2: #e9ebef;
    --red: #d6102b;
    --red-dk: #b20c23;
    --blue: #1a76cb;
    --blue-dk: #155fa6;
    --soft: #fff9d6;
    --ok: #1f7a4d;
    --font: Arial, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 68px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 14px/1.55 var(--font); padding-bottom: 64px; }
h1, h2, h3, p, figure { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dk); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.w { max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.mute { color: var(--mute); }
.sec { padding-top: 32px; }
h2 { margin-bottom: 14px; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; font-weight: 700; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: #fff; color: var(--ink); }
.skip-link:focus { left: 8px; }

/* Шапка */
.top { position: sticky; top: 0; z-index: 40; background: #000; }
.top-row { display: flex; align-items: center; gap: 12px; height: 56px; }
.mark { color: #fff; font-weight: 700; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
.mark:hover { color: #fff; }
.mark span { color: #ff4157; }
.top-nav { display: none; gap: 22px; margin-left: 18px; }
.top-nav a { color: rgba(255, 255, 255, .78); }
.top-nav a:hover { color: #fff; }
.top-phone { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }
.top-phone span { display: none; }
.top-phone:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 24px; background: var(--red); color: #fff; font-weight: 700; white-space: nowrap; }
.pill:hover { background: var(--red-dk); color: #fff; }

/* Плитки разделов */
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 86px; gap: 8px; padding: 12px 0 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tiles::-webkit-scrollbar { display: none; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 86px; padding: 8px 6px; border-radius: 12px;
    background: var(--tile); color: var(--ink); font-size: 11.5px; line-height: 1.15; text-align: center; scroll-snap-align: start; }
.tile:hover { background: var(--tile-2); color: var(--ink); }
.tile svg { width: 30px; height: 30px; flex: 0 0 auto; }

/* Кнопки */
.big { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px;
    color: #fff; font: 700 15px var(--font); text-align: center; cursor: pointer; }
.big:hover { color: #fff; }
.big-red { background: var(--red); }
.big-red:hover { background: var(--red-dk); }
.big-blue { background: var(--blue); }
.big-blue:hover { background: var(--blue-dk); }
.big-line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.big-line:hover { color: var(--ink); background: var(--tile); }
.chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 0; border-radius: 24px; background: var(--tile); color: var(--ink); font: 700 14px var(--font); cursor: pointer; }
.chip:hover { background: var(--tile-2); color: var(--ink); }
.link-btn { padding: 0; border: 0; background: none; color: var(--blue); font: inherit; cursor: pointer; }
.link-btn:hover { color: var(--blue-dk); }

/* Первый экран */
.hero { display: grid; gap: 20px; padding-top: 18px; }
.hero h1 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.sub { margin-top: 6px; font-size: 17px; color: var(--text); }
.meta { margin-top: 6px; color: var(--mute); }
.lead { margin-top: 14px; color: var(--text); }
.lead p + p { margin-top: .5em; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; max-width: 420px; }

/* Поиск по ценам */
.search { padding: 16px; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(17, 40, 75, .06); }
.search-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.search-head h2 { margin-bottom: 10px; }
.search-head .mute { font-size: 12px; }
.field { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--tile); }
.field:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--blue) inset; }
.field svg { flex: 0 0 auto; color: var(--mute); }
.field input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 16px var(--font); color: var(--ink); outline: none; }
.hint { margin-top: 12px; font-size: 12px; color: var(--mute); }
.results { list-style: none; margin: 2px 0 0; padding: 0; }
.results .pr:last-child .pr-link { border-bottom: 0; }
.pr-link { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "svc price"; column-gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.pr-link:hover { color: var(--ink); }
.pr-link:hover .pr-name { color: var(--blue); }
.pr-name { grid-area: name; font-size: 15px; }
.pr-price { grid-area: price; align-self: center; font-weight: 700; font-size: 15px; white-space: nowrap; }
.pr-svc { grid-area: svc; font-size: 12px; color: var(--mute); }
.pr-empty, .pr-more { padding: 12px 0; color: var(--mute); }
.search-note { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: 13px; color: var(--text); }

.season { padding: 16px; border-radius: 16px; background: var(--soft); }
.season h2 { margin-bottom: 6px; }
.season p + p { margin-top: 6px; }

/* Услуги: группа — строка с линией сверху, без колонок разной высоты. На телефоне название над списком,
   от 760 — услуги в две колонки, от 1040 — название группы слева */
.groups { border-bottom: 1px solid var(--line); }
.group { display: grid; gap: 4px; padding: 14px 0 8px; border-top: 1px solid var(--line); }
.group-t { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.group-t svg { width: 26px; height: 26px; flex: 0 0 auto; }
.group-n { padding-left: 36px; font-size: 13px; color: var(--mute); }
.svc { list-style: none; display: grid; margin: 0 -12px; padding: 0; }
.svc a { display: grid; grid-template-columns: 1fr auto; align-content: start; column-gap: 12px; height: 100%; padding: 10px 12px; border-radius: 12px; color: var(--ink); }
.svc a:hover { background: var(--tile); color: var(--ink); }
.svc h3 { font-size: 15px; font-weight: 400; }
.svc a:hover h3 { color: var(--blue); }
.svc-n { padding-top: 1px; font-size: 13px; color: var(--mute); white-space: nowrap; }
.svc-t { grid-column: 1 / -1; margin-top: 2px; font-size: 12px; color: var(--mute); }
.after { margin-top: 16px; color: var(--mute); max-width: 72ch; }

/* Как проходит ремонт — лента карточек */
.how ol { list-style: none; counter-reset: s; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; margin: 0; padding: 0 0 6px; overflow-x: auto; scroll-snap-type: x mandatory; }
.how li { counter-increment: s; padding: 16px; border-radius: 16px; background: var(--tile); color: var(--text); scroll-snap-align: start; }
.how li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: #000; color: #fff; font-weight: 700; }
.how strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; }
.how .note { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--soft); color: var(--text); }

/* Марки и клиенты */
.brands > p { color: var(--text); max-width: 72ch; }
.brands ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; }
.brands li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 12px 6px 10px;
    border-radius: 12px; background: var(--tile); color: var(--text); font-size: 13px; line-height: 1.2; text-align: center; }
.brands li svg { width: 54px; height: 34px; color: var(--ink); }
.brands > .brands-note { margin-top: 10px; font-size: 12px; color: var(--mute); }
/* Отчёты о работах: карточки (главная, страницы услуг, лента /nashi_raboty) */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sec-head h2 { margin-bottom: 0; }
.sec-head a { white-space: nowrap; font-weight: 700; }
.sec-intro { margin: -6px 0 14px; color: var(--mute); max-width: 72ch; }
.wk-row { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.wk-row .wk { scroll-snap-align: start; }
.wk-grid { display: grid; gap: 16px; margin-top: 4px; }
.wk { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.wk[hidden] { display: none; }
.wk:target { box-shadow: 0 0 0 3px var(--blue); }
.wk-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tile); }
.wk-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-n { position: absolute; right: 8px; bottom: 8px; padding: 2px 9px; border-radius: 12px; background: rgba(0, 0, 0, .66); color: #fff; font-size: 12px; font-weight: 700; }
.wk-body { padding: 12px 14px 14px; }
.wk-meta { font-size: 12px; color: var(--mute); }
.wk-meta > * + *::before { content: " · "; color: var(--mute); }
.wk-meta-lg { margin-top: 6px; font-size: 14px; }
.wk-t { margin: 4px 0 6px; font-size: 16px; line-height: 1.25; font-weight: 700; }
.wk-t a { color: var(--ink); }
.wk-t a:hover { color: var(--blue); }
.wk-s { font-size: 13px; color: var(--text); }
.wk-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.wk-tags a { padding: 3px 9px; border-radius: 10px; background: var(--tile); color: var(--text); font-size: 12px; }
.wk-tags a:hover { background: var(--tile-2); color: var(--ink); }
.wk-filter { display: flex; gap: 8px; margin: 16px 0; overflow-x: auto; scrollbar-width: none; }
.wk-filter::-webkit-scrollbar { display: none; }
.wk-filter .chip { flex: 0 0 auto; }
.wk-filter .chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.wk-list[aria-busy="true"] .wk-grid { opacity: .45; transition: opacity .15s; }
.wk-prev { margin: 0 0 12px; font-weight: 700; }
.wk-prev[hidden] { display: none; }
.wk-more { margin-top: 20px; }
.wk-more .big { max-width: 420px; margin: 0 auto; }
.wk-more .big[aria-busy="true"] { cursor: progress; color: var(--mute); }
.cta { margin-top: 32px; padding: 20px; border-radius: 16px; background: var(--tile); }
.cta p { color: var(--text); max-width: 60ch; }
.cta .mute { margin-top: 10px; color: var(--mute); }

/* Страница отчёта: галерея и список работ */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.gal-i { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--tile); }
.gal-main { grid-column: 1 / -1; aspect-ratio: 4 / 3; border-radius: 16px; }
.gal-i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-text h2 { margin-top: 24px; }
.done { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.done li { position: relative; padding-left: 24px; color: var(--text); }
.done li::before { content: "✓"; position: absolute; left: 4px; color: var(--red); font-weight: 700; }

/* Просмотр фото на весь экран (<dialog>, js/site.js) */
.lb { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.lb::backdrop { background: rgba(0, 0, 0, .94); }
.lb img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 94vw; max-height: 84vh; border-radius: 8px; }
.lb-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; font-size: 13px; text-align: center; }
.lb-btn, .lb-x { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .16); color: #fff; font: 400 30px/1 var(--font); cursor: pointer; }
.lb-btn:hover, .lb-x:hover { background: rgba(255, 255, 255, .3); }
.lb-btn { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-x { top: 12px; right: 12px; }
.lb-btn[hidden] { display: none; }

/* Запись и контакты */
.contact-grid { display: grid; gap: 12px; }
.contact { padding: 18px; border-radius: 16px; background: var(--tile); align-self: start; }
.phone-xl { display: inline-block; font-weight: 700; font-size: clamp(26px, 4vw, 40px); color: var(--ink); letter-spacing: -.01em; }
.phone-xl:hover { color: var(--red); }
.contact-text { margin-top: 4px; color: var(--text); max-width: 72ch; }
.contact-hours { margin-top: 6px; font-weight: 700; }
.msg { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.msg .chip { background: #fff; }
.msg .chip-note { cursor: default; font-weight: 400; color: var(--text); }
.msg .chip-note:hover { background: #fff; }
.msg .chip:hover { background: var(--tile-2); }
.msg-note { margin-top: 10px; font-size: 12px; color: var(--mute); }

.where { display: grid; gap: 12px; margin-top: 14px; }
.addr-card { padding: 16px; border-radius: 16px; border: 1px solid var(--line); }
.addr-big { font-weight: 700; font-size: 18px; line-height: 1.3; }
.coords-title { margin-top: 10px; font-size: 13px; font-weight: 400; color: var(--mute); }
.coords { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.addr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.map { position: relative; min-height: 260px; display: grid; place-items: center; border-radius: 16px; overflow: hidden; background: #eceef1; cursor: pointer; }
.map iframe, .map-img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-img { object-fit: cover; }
.map-btn { position: relative; align-self: end; height: 44px; margin-bottom: 18px; padding: 0 18px; border: 0; border-radius: 24px; background: #000; color: #fff;
    font: 700 14px var(--font); cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.map:hover .map-btn { background: #222; }
.map-copy { position: absolute; right: 8px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .85); font-size: 11px; color: var(--text); }

/* Видео: ссылки из БД — карточками с кнопкой воспроизведения */
.video-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.video-list a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--tile); color: var(--ink); font-weight: 700; }
.video-list a:hover { background: var(--tile-2); color: var(--ink); }
.video-list a::before { content: ""; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--red) no-repeat 56% 50% / 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l13 8-13 8z' fill='%23fff'/%3E%3C/svg%3E"); }

/* Форма заявки */
.lead-form { display: grid; gap: 12px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); }
.lead-title { font-weight: 700; font-size: 18px; }
.lead-form label { display: grid; gap: 4px; font-size: 13px; color: var(--mute); }
.lead-form input, .lead-form textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--tile); font: 16px var(--font); color: var(--ink); }
.lead-form input:focus, .lead-form textarea:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px var(--blue) inset; }
.lead-form .check { grid-template-columns: 22px 1fr; align-items: start; gap: 8px; color: var(--text); }
.lead-form .check input { width: 18px; height: 18px; margin: 1px 0 0; padding: 0; }
.lead-form .req { color: var(--red); }
.form-status { min-height: 1.4em; font-weight: 700; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--red); }
.form-hint { font-size: 12px; color: var(--mute); }

/* Страница услуги */
.crumbs { padding-top: 12px; font-size: 13px; color: var(--mute); }
.crumbs a + span::before, .crumbs span + span::before, .crumbs a + a::before { content: " › "; color: var(--mute); }
.page-h1 { margin-top: 8px; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.12; font-weight: 700; }
main > .page-h1:first-child { margin-top: 24px; } /* 404: нет хлебных крошек над заголовком */
.intro { margin-top: 8px; color: var(--text); max-width: 72ch; }
.intro p + p { margin-top: .5em; }
/* Текст страницы услуги под прайсом: абзацы и списки старого сайта */
.svc-text { max-width: 72ch; color: var(--text); }
.svc-text p { margin-top: .7em; }
.svc-text h2 + p { margin-top: 0; }
.svc-text ul, .svc-text ol { margin: .5em 0 0; padding-left: 1.3em; }
.svc-text li { margin-top: .25em; }
.svc-text li::marker { color: var(--red); }
.svc-text h2 { margin-top: 1.4em; }
.svc-text > h2:first-child { margin-top: 0; }
.svc-text h3 { margin-top: 1.1em; font-size: 17px; line-height: 1.3; color: var(--ink); }
.svc-text h3 + p { margin-top: .3em; }
.svc-text strong { color: var(--ink); }
/* Таблицы в тексте: признак → причина, работа → цена. На телефоне — прокрутка по горизонтали внутри блока */
.svc-text .tbl { margin-top: .8em; overflow-x: auto; }
.svc-text table { width: 100%; border-collapse: collapse; font-size: 14px; }
.svc-text th, .svc-text td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.svc-text th { color: var(--mute); font-weight: 400; font-size: 13px; }
.svc-text td:last-child:not(:first-child) { white-space: nowrap; }
.svc-text .tbl-wide td:last-child { white-space: normal; }
/* Блок «Запчасти подберём и закажем» на странице услуги */
.parts-cta { display: grid; gap: 14px; padding: 18px; border-radius: 16px; background: var(--tile); }
.parts-cta h2 { margin-bottom: 6px; font-size: clamp(18px, 2vw, 22px); }
.parts-cta p { max-width: 62ch; color: var(--text); }
/* Статьи: «Полезно знать» на услуге, список раздела */
.art-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.art-list li { padding: 14px 16px; border-radius: 12px; background: var(--tile); }
.art-list a { font-weight: 700; font-size: 15px; }
.art-list p { margin-top: 4px; color: var(--text); font-size: 13px; }
.art-list-big h2 { margin: 0; font-size: 17px; line-height: 1.3; }
/* Запчасти: на телефоне карточка подбора — сразу под заголовком, на компьютере — справа */
.layout-cta-first .aside { order: -1; }
.card-text { margin: 4px 0 2px; color: var(--text); }
.lead-form-card { background: #fff; }
.layout { display: grid; gap: 20px; padding-top: 20px; }
.prices { padding: 16px; border-radius: 16px; border: 1px solid var(--line); }
.pl-sec { margin-top: 18px; }
.pl-sec h2 { margin-bottom: 4px; font-size: clamp(18px, 2vw, 22px); }
.pl { list-style: none; margin: 0; padding: 0; }
.pl li { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.pl li:last-child { border-bottom: 0; }
.pl li[hidden], .pl-sec[hidden] { display: none; }
.pl .p { font-weight: 700; white-space: nowrap; }
.pl-empty { padding: 12px 0; color: var(--mute); }
.aside { display: grid; gap: 12px; align-self: start; }
.card { padding: 16px; border-radius: 16px; background: var(--tile); }
.card .phone { display: block; margin: 2px 0 12px; color: var(--ink); font-weight: 700; font-size: 26px; }
.card .phone:hover { color: var(--red); }
.card .btns { display: grid; gap: 8px; }
.card .addr { margin-top: 12px; font-size: 13px; color: var(--mute); }
.note { padding: 12px 14px; border-radius: 12px; background: var(--soft); font-size: 13px; color: var(--text); }
.rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rel a { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 12px; background: var(--tile); color: var(--ink); font-size: 15px; }
.rel a:hover { background: var(--tile-2); color: var(--ink); }
.rel a::after { content: "›"; font-size: 22px; color: var(--mute); }

/* Подвал */
.foot { margin-top: 48px; padding: 32px 0 24px; background: var(--tile); font-size: 13px; color: var(--text); }
.foot a { color: var(--ink); }
.foot a:hover { color: var(--blue); }
.foot .mark { color: var(--ink); }
.foot .mark span { color: var(--red); }
.foot-grid { display: grid; gap: 24px; }
.foot-line { margin-top: 12px; }
.foot-phone { margin-top: 8px; }
.foot-phone a { font-weight: 700; font-size: 16px; }
.foot-msg { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 8px 0 0; padding: 0; }
.foot-msg a { color: var(--blue); }
.foot nav ul { list-style: none; margin: 6px 0 0; padding: 0; }
.foot nav li { padding: 3px 0; }
.foot-title { font-weight: 700; font-size: 14px; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; color: var(--mute); }
.foot-bottom a { color: var(--mute); }

/* Мобильная панель */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #fff;
    border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(17, 40, 75, .06); padding-bottom: env(safe-area-inset-bottom); }
.bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; color: var(--ink); font-size: 11.5px; }
.bar a:last-child { background: var(--red); color: #fff; }
.bar svg { width: 22px; height: 22px; }

/* Меню на телефоне (<dialog>, js/site.js): разделы, услуги по группам, контакты */
.menu { width: 100%; max-width: 480px; height: 100%; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; background: #fff; color: var(--ink);
    overflow-y: auto; overscroll-behavior: contain; }
.menu::backdrop { background: rgba(0, 0, 0, .5); }
.menu, .bar { -webkit-tap-highlight-color: rgba(0, 0, 0, .06); }
html:has(.menu[open]) { overflow: hidden; }
.menu-in { min-height: 100%; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.menu-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 56px; margin: 0 -16px; padding: 0 8px 0 16px; background: #000; }
.menu-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font: 28px/1 var(--font); cursor: pointer; }
.menu-main { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 16px; }
.menu-main a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--tile); color: var(--ink); font-weight: 700; font-size: 15px; }
.menu-title { margin: 22px 0 2px; font-weight: 700; font-size: 18px; }
.menu-group { border-bottom: 1px solid var(--line); }
.menu-group summary { display: flex; align-items: center; gap: 12px; min-height: 52px; font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; }
.menu-group summary::-webkit-details-marker { display: none; }
.menu-group summary::after { content: ""; width: 8px; height: 8px; margin: -4px 6px 0 auto; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); }
.menu-group[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.menu-group summary svg { width: 26px; height: 26px; flex: 0 0 auto; }
.menu-group ul { list-style: none; margin: 0; padding: 0 0 10px 38px; }
.menu-group li a { display: block; padding: 9px 0; color: var(--ink); font-size: 15px; }
.menu a[aria-current="page"] { color: var(--red); font-weight: 700; }
.menu-contact { margin-top: 22px; padding: 16px; border-radius: 16px; background: var(--tile); }
.menu-contact p { margin-top: 6px; }
.menu-contact .menu-btns { display: grid; gap: 8px; margin-top: 14px; }
.menu-btns .big-line { background: #fff; }

/* Cookie */
.cookie-note { position: fixed; left: 12px; right: 12px; bottom: 72px; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    max-width: 520px; padding: 14px 16px; border-radius: 16px; background: #000; color: #fff; font-size: 13px; box-shadow: 0 8px 28px rgba(0, 0, 0, .2); }
.cookie-note[hidden] { display: none; }
.cookie-note p { flex: 1 1 240px; }
.cookie-note a { color: #9ccaff; }

/* Админка и вход */
.content { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
.price { width: 100%; border-collapse: collapse; }
.price th, .price td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }

@media (min-width: 760px) {
    .w { padding-left: 24px; padding-right: 24px; }
    .tiles { grid-auto-flow: row; grid-template-columns: repeat(7, 1fr); grid-auto-columns: auto; padding-top: 16px; }
    .wk-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
    .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wk-filter { flex-wrap: wrap; overflow: visible; }
    .gal { grid-template-columns: repeat(4, 1fr); }
    .tile { height: 92px; font-size: 13px; }
    .svc { grid-template-columns: 1fr 1fr; column-gap: 8px; }
    .how ol { grid-auto-columns: calc((100% - 24px) / 3); }
    .works { grid-auto-columns: calc((100% - 24px) / 3); }
    .brands ul { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .brands li { min-height: 100px; font-size: 14px; }
    .brands li svg { width: 64px; height: 40px; }
    .where { grid-template-columns: 1fr 1.6fr; }
    .rel { grid-template-columns: repeat(3, 1fr); }
    .art-list:not(.art-list-big) { grid-template-columns: repeat(2, 1fr); }
    .parts-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 22px 24px; }
    .video-list { grid-template-columns: 1fr 1fr; }
    .foot-grid { grid-template-columns: 1fr 3fr; }
    .foot nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 1040px) {
    body { padding-bottom: 0; }
    .bar { display: none; }
    .cookie-note { bottom: 16px; left: 16px; right: auto; }
    .top-nav { display: flex; }
    .top-phone { width: auto; height: auto; background: none; border-radius: 0; font-weight: 700; font-size: 15px; }
    .top-phone svg { display: none; }
    .top-phone span { display: inline; }
    .top-phone:hover { background: none; }
    .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 24px; }
    .group { grid-template-columns: 260px minmax(0, 1fr); column-gap: 32px; padding: 12px 0; }
    .group-head { padding-top: 10px; }
    .after { margin-left: 292px; }
    .how ol { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; }
    .contact-grid.with-form { grid-template-columns: 1fr minmax(320px, 420px); }
    .layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
    .wk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gal { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 170px; }
    .gal-main { grid-column: 1; grid-row: span 2; aspect-ratio: auto; }
    .gal-i:not(.gal-main) { aspect-ratio: auto; }
    .gal-one { grid-template-columns: minmax(0, 760px); grid-auto-rows: auto; }
    .gal-one .gal-main { grid-row: auto; aspect-ratio: 4 / 3; }
    .aside { position: sticky; top: 76px; }
    .layout-cta-first .aside { order: 0; }
    .foot nav { grid-template-columns: repeat(5, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }