/* Общая шапка отделена от оформления страниц: CMS меняет только её содержимое. */
body > header.topbar {
  --header-bg: #0f1115;
  --header-text: #f5f7fa;
  --header-muted: #b1b7c2;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 30;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) 0 0;
  color: var(--header-text);
  background: var(--header-bg);
  border-bottom: 1px solid #333942;
  font: 16px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-theme="light"] body > header.topbar {
  --header-bg: #f5f7fa;
  --header-text: #171a20;
  --header-muted: #555e6d;
  border-color: #dce1e7;
}
.topbar > .wrap.nav {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1360px;
  height: 88px;
  margin: auto;
  padding: 0 max(40px, env(safe-area-inset-right, 0px)) 0 max(40px, env(safe-area-inset-left, 0px));
}
.topbar a { color: inherit; text-decoration: none; }
.topbar .brand {
  display: flex; align-items: center; gap: 12px;
  flex: none; color: var(--header-text); font-size: 16px;
  font-weight: 800; letter-spacing: -.02em;
}
.topbar .brand::before { display: none; }
.topbar .brand small { display: block; margin: 0; color: var(--header-muted); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.topbar .brand-mark { flex: none; width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: transparent; }
.topbar .brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.topbar .brand-mark svg { width: 24px; height: 24px; }
.topbar .brand-mark svg path, .topbar .brand-mark svg circle { fill: var(--header-bg); }
.topbar .navlinks { display: flex; gap: 18px; padding: 0; margin: 0; color: var(--header-muted); font-size: 13px; }
.topbar .navlinks a, .topbar .navlinks a:last-child { white-space: nowrap; padding: 0; background: none; color: inherit; }
.topbar .navlinks a:hover { color: #ff6a00; }
.topbar .nav-right { display: flex; align-items: center; gap: 16px; }
.topbar .phone { font-size: 16px; font-weight: 750; white-space: nowrap; }
.topbar .phone span { display: block; text-align: right; color: var(--header-muted); font-size: 11px; font-weight: 500; }
.topbar .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 18px; border: 0; border-radius: 5px; background: #c64e00; color: #fff; font-size: 14px; font-weight: 750; white-space: nowrap; }
.topbar .btn:hover { background: #ad4300; transform: none; }
.topbar .theme-toggle { margin: 0; flex-shrink: 0; }
.topbar a:focus-visible, .topbar button:focus-visible { outline: 3px solid #ff6a00; outline-offset: 4px; }
@media (max-width: 1279px) { .topbar .navlinks { display: none; } }
@media (max-width: 620px), (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  .topbar > .wrap.nav { height: 56px; gap: 10px; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  .topbar .brand { gap: 8px; font-size: 15px; }
  .topbar .brand-mark { display: grid; width: 40px; height: 40px; }
  .topbar .brand small, .topbar .phone { display: none; }
  .topbar .nav-right { gap: 8px; }
  .topbar .theme-toggle { flex-basis: 64px; width: 64px; height: 44px; --font-size: 13px; }
  .topbar .nav-right > .btn { min-height: 44px; padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 359px) {
  .topbar > .wrap.nav { padding-inline: 12px; gap: 6px; }
  .topbar .brand { gap: 5px; font-size: 14px; }
  .topbar .nav-right { gap: 4px; }
  .topbar .theme-toggle { flex-basis: 48px; width: 48px; --font-size: 10px; }
  .topbar .nav-right > .btn { padding-inline: 8px; }
}
.catalog-page :target, .service-detail :target, .privacy-page :target { scroll-margin-top: calc(88px + env(safe-area-inset-top, 0px)); }
@media (max-width: 620px) { .catalog-page :target, .service-detail :target, .privacy-page :target { scroll-margin-top: calc(56px + env(safe-area-inset-top, 0px)); } }

/* В переходах прежний декоративный request-book становится тихой стрелкой.
   Сохраняем aria-hidden и серверную разметку: правка работает без перезапуска
   и не меняет версии CMS-шаблонов. У раскрытия формы/ситуаций значок прежний. */
:where(.catalog-page, #popular-models) a .request-book {
  position: relative; display: block;
  flex: 0 0 20px; width: 20px; height: 20px; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: inherit; transform: none; transition: none;
}
:where(.catalog-page, #popular-models) a .request-book > span { display: none; }
:where(.catalog-page, #popular-models) a .request-book::before,
:where(.catalog-page, #popular-models) a .request-book::after {
  content: ""; position: absolute; top: 50%; right: 2px;
}
:where(.catalog-page, #popular-models) a .request-book::before {
  width: 16px; border-top: 1.5px solid currentColor; transform: translateY(-50%);
}
:where(.catalog-page, #popular-models) a .request-book::after {
  width: 8px; height: 8px; border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg);
}
:is(.catalog-page, #popular-models) .model-card-copy { display: flex; align-items: center; gap: 8px; }
:is(.catalog-page, #popular-models) .model-card-copy h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
:is(.catalog-page, #popular-models) .model-card-copy > span { display: flex; font-size: 0; color: var(--muted); }
:is(.catalog-page, #popular-models) .catalog-button { justify-content: space-between; }
.catalog-page .country-brands .request-book { margin-left: auto; }
.catalog-page .all-models-link { display: inline-flex; justify-content: flex-start; align-items: center; gap: 12px; }
.catalog-help { position: relative; padding-right: 64px; }
.catalog-help > .request-book { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { .request-book, .request-book span { transition: none; } }

.catalog-page .catalog-help { padding-right: 40px; }
.topbar .navlinks { flex-wrap: nowrap; }

/* Фото, название и стрелка — одна ссылка, а не несколько целей фокуса. */
:is(.catalog-page, #popular-models) .model-card > a:is(:hover, :focus-visible) h3 {
  text-decoration: underline; text-underline-offset: .2em;
}
:is(.catalog-page, #popular-models) .model-card > a:focus-visible {
  outline: 3px solid var(--ink); outline-offset: -3px;
}
:is(.catalog-page, #popular-models) .model-card-copy { flex-wrap: nowrap; }

/* Настоящие вопросы FAQ, в отличие от ссылки-плашки, раскрывают ответ. */
#faq .faq { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
#faq .faq details { padding: 0; }
#faq .faq summary {
  position: relative; display: block; list-style: none;
  padding: 20px 40px 20px 0; min-height: 64px;
}
#faq .faq summary::-webkit-details-marker { display: none; }
#faq .faq summary::before,
#faq .faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 16px; border-top: 1.5px solid currentColor;
  transform: translateY(-50%);
}
#faq .faq summary::after { transform: translateY(-50%) rotate(90deg); }
#faq .faq details[open] summary::after { display: none; }
#faq .faq summary:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
#faq .faq p { margin: 0; padding: 0 40px 24px 0; }

/* Button Hover, Katherine Kato (MIT): только главный CTA в hero.
   Псевдоэлементы сохраняют CMS-шаблон, подпись и обработчик раскрытия формы. */
.hero-actions .btn.btn-primary {
  position: relative; isolation: isolate; min-height: 56px; max-width: 100%;
  padding: 12px 20px 12px 68px; border: 0; border-radius: 28px;
  background: transparent; color: var(--text); box-shadow: none;
  text-align: left; line-height: 1.4; transform: none;
  transition: color .35s ease;
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}
.hero-actions .btn.btn-primary > span { display: none; }
.hero-actions .btn.btn-primary::before {
  content: ''; position: absolute; z-index: -1; inset: 0 auto 0 0;
  width: 56px; border-radius: 28px; background: var(--action);
  transition: width .45s cubic-bezier(.65,0,.076,1);
}
.hero-actions .btn.btn-primary::after {
  content: '→'; position: absolute; left: 18px; top: 50%;
  transform: translateY(-50%); font: 25px/1 Arial, sans-serif; color: #fff;
  transition: left .45s cubic-bezier(.65,0,.076,1);
}
@media (hover: hover) and (pointer: fine) {
  .hero-actions .btn.btn-primary:hover { color: #fff; }
  .hero-actions .btn.btn-primary:hover::before { width: 100%; }
  .hero-actions .btn.btn-primary:hover::after { left: 25px; }
}
.hero-actions .btn.btn-primary:focus-visible { color: #fff; outline: 3px solid var(--text); outline-offset: 4px; }
/* :active отвечает на удержание пальца; is-opening сохраняет отклик короткого
   тапа в существующие 500 мс раскрытия формы, без задержки клика и липкого hover. */
.hero-actions .btn.btn-primary:is(:active, .is-opening) { color: #fff; }
.hero-actions .btn.btn-primary:is(:focus-visible, :active, .is-opening)::before { width: 100%; }
.hero-actions .btn.btn-primary:is(:focus-visible, :active, .is-opening)::after { left: 25px; }
.hero-actions .btn.btn-primary:active::before { background: var(--action-hover); }
/* При горизонтальном жесте стрелка следует за рукой без CSS-задержки.
   Убираем текст на время движения, чтобы стрелка не проходила сквозь буквы. */
.hero-actions .btn.btn-primary.is-sliding { color: transparent; cursor: grabbing; transition: none; }
.hero-actions .btn.btn-primary.is-sliding::before { width: 100%; transition: none; }
.hero-actions .btn.btn-primary.is-sliding::after { left: calc(18px + var(--cta-slide, 0px)); transition: none; }
.hero-actions .btn.btn-primary.is-slide-complete.is-opening { color: transparent; }
.hero-actions .btn.btn-primary.is-slide-complete.is-opening::after { content: '✓'; left: calc(100% - 38px); }
@media (max-width: 620px) {
  .hero-actions .btn.btn-primary { justify-content: flex-start; font-size: 14px; min-height: 56px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-actions .btn.btn-primary, .hero-actions .btn.btn-primary::before,
  .hero-actions .btn.btn-primary::after { transition: none; }
}

/* Подпись относится только к главному CTA; телефон остаётся самостоятельным действием. */
.hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px 12px; }
.hero-actions > .btn-primary { grid-column: 1; grid-row: 1; justify-content: flex-start; }
.hero-actions > .hero-action-note { grid-column: 1; grid-row: 2; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.hero-actions > .btn-ghost { grid-column: 2; grid-row: 1; }
@media (max-width: 620px) {
  .hero-actions { grid-template-columns: minmax(0, 1fr); }
  .hero-actions > .btn-ghost { grid-column: 1; grid-row: 3; margin-top: 6px; }
}

/* Вторичное действие: SVG-маска наследует цвет темы и не меняет CMS-шаблон.
   Подпись ссылки остаётся её доступным именем; декоративный контур без текста. */
.hero-actions > .btn.btn-ghost {
  align-self: start; min-height: 48px; margin-top: 4px;
  padding: 11px 15px; gap: 9px; border-radius: 24px;
  background: transparent; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  color: var(--text); font-size: 14px; font-weight: 500; line-height: 24px;
  box-shadow: none; transform: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.hero-actions > .btn.btn-ghost::before {
  content: ''; flex: 0 0 18px; width: 18px; height: 18px;
  background: currentColor; opacity: .8;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.79a2 2 0 0 1-.45 2.11L8.09 9.89a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.33 1.83.56 2.79.69A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .hero-actions > .btn.btn-ghost:hover {
    border-color: color-mix(in srgb, var(--text) 32%, transparent);
    background: color-mix(in srgb, var(--text) 4%, transparent);
  }
}
.hero-actions > .btn.btn-ghost:focus-visible {
  outline: 2px solid var(--text); outline-offset: 4px;
}
@media (max-width: 620px) {
  .hero-actions > .btn.btn-ghost { justify-self: start; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-actions > .btn.btn-ghost { transition: none; }
}

/* Шахматный фон принадлежит #estimate; поля остаются над декоративным canvas. */
#estimate { position:relative; isolation:isolate; padding:16px; }
#estimate > #chess-wave { position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; pointer-events:none; z-index:-1; }
#estimate > .request-inner { position:relative; padding:20px; border-radius:4px; background:color-mix(in srgb,var(--panel) 96%,transparent); }
/* Заменяем прежнюю заливку и движение формы одной волной фона. */
#estimate.request-reveal, #estimate.request-reveal .request-inner { animation:none; }
#estimate::before { display:none; }
@media(max-width:620px) { #estimate { padding:9px; } #estimate > .request-inner { padding:16px 10px; } }

/* Проба фото: мягкий raise Giana; расширение акцента — мотив Button Hover Kato.
   Вся label выбирает файл; удаление остаётся отдельной кнопкой. */
#car-photos { width:min(920px,calc(100% - 24px)); }
#car-photos .photo-grid { gap:12px; }
#car-photos .photo-slot { padding:0; gap:0; border-radius:16px; background:var(--panel2); transition:transform .22s,box-shadow .22s,border-color .22s; }
#car-photos .photo-select { display:flex; flex-direction:column; align-items:stretch; gap:8px; border:0; border-radius:16px; padding:14px; text-align:left; }
#car-photos .photo-preview { position:relative; height:104px; background:transparent; overflow:visible; }
#car-photos .photo-placeholder { width:100%; height:100%; display:grid; place-items:center; }
#car-photos .photo-angle-icon { display:block; width:100%; height:104px; background:center / contain no-repeat; opacity:.78; }
#car-photos .photo-plus { position:absolute; bottom:2px; right:0; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-size:24px; line-height:1; }
#car-photos .photo-select b { min-height:40px; font-size:13px; line-height:1.45; }
#car-photos .photo-select-caption { color:var(--muted); font-size:12px; }
#car-photos .photo-preview img { height:104px; border-radius:10px; }
#car-photos .photo-remove { min-height:38px; margin:0 14px 8px; text-align:left; }
#car-photos .photo-slot:focus-within { border-color:var(--accent); }
#car-photos .photo-select:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
#car-photos #photos-done { position:relative; isolation:isolate; overflow:hidden; min-width:130px; background:var(--panel2); color:var(--text); border:1px solid var(--line); }
#car-photos #photos-done::before { content:''; position:absolute; z-index:-1; inset:0; background:var(--accent); transform:translateX(-95%); transition:transform .3s; }
#car-photos #photos-done:is(:hover,:focus-visible)::before { transform:translateX(0); }
#car-photos #photos-done:is(:hover,:focus-visible) { color:#fff; }
#car-photos #photos-done:active { transform:translateY(1px); }
@media(hover:hover) { #car-photos .photo-slot:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 8px 16px -12px var(--accent); } }
@media(max-width:620px) { #car-photos { padding:22px 14px; } #car-photos .photo-grid { gap:10px; } #car-photos .photo-select { padding:10px; } #car-photos .photo-preview { height:88px; } #car-photos .photo-angle-icon { height:88px; } #car-photos .photo-footer { align-items:stretch; flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { #car-photos .photo-slot,#car-photos #photos-done::before { transition:none; } #car-photos .photo-slot:hover { transform:none; } }
.model-photo-pair { display: block; }

/* Переключатель языка непосредственно справа от оценки, без переноса шапки. */
.topbar .language-switch { display:inline-flex; align-items:center; justify-content:center; flex:0 0 38px; min-height:44px; font-size:13px; font-weight:600; border:1px solid var(--line); border-radius:6px; color:var(--text); text-decoration:none; }
.topbar .language-switch:hover { border-color:var(--accent,#ff6a00); }
@media(max-width:620px) { .topbar .brand { gap:4px; } .topbar .brand-mark { width:30px; } .topbar .nav-right { gap:4px; } .topbar .theme-toggle { flex-basis:40px; width:40px; --font-size:9px; } .topbar .language-switch { flex-basis:32px; } .topbar .nav-right > .btn { padding-inline:7px; font-size:12px; } }
@media(max-width:359px) { .topbar .brand-mark { display:none; } .topbar > .wrap.nav { padding-inline:8px; gap:4px; } }