/* styles-core.css */
/* Royal Auto v2.1. Static prototype. No external font/CDN requests. */

:root {
  --bg: #f5f6f7;
  --bg-top: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f1f2;
  --ink: #101010;
  --muted: #686a6d;
  --line: #d9dadd;
  --line-dark: #2e2e2e;
  --accent: #d5c9b6;
  --accent-2: #ece6dd;
  --header: #111111;
  --radius: 22px;
  --shadow: 0 16px 46px rgba(17,17,17,.08);
  --max: 1240px;
  --font: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --brand: Georgia,"Times New Roman",serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  background: linear-gradient(180deg,var(--bg-top) 0%,#fafafa 36%,var(--bg) 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button,input,select,textarea {
  font: inherit;
}

button {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(var(--max),calc(100% - 36px));
  margin: 0 auto;
}

.section {
  padding: 78px 0;
}

.section.compact {
  padding: 48px 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6e6a63;
  margin-bottom: 12px;
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: #8f887f;
}

h1,h2,h3,h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
}

h1 {
  font-size: clamp(42px,5.4vw,72px);
}

h2 {
  font-size: clamp(31px,3.8vw,48px);
}

h3 {
  font-size: 22px;
}

p {
  line-height: 1.58;
}

.lead {
  font-size: 18px;
  color: var(--muted);
  max-width: 760px;
  margin: 14px 0 0;
}

.muted {
  color: var(--muted);
}

.kicker {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

/* Utility / state */

[hidden] {
  display: none !important;
}

body.menu-open {
  overflow: hidden;
}

.admin-subtitle {
  font-size: 11px;
  color: #aaa;
}

.admin-site-link {
  font-size: 12px;
  color: #ddd;
}

.admin-section-title {
  font-size: 24px;
  margin-bottom: 16px;
}

.admin-textarea-large {
  min-height: 220px !important;
}

.source-block {
  margin-top: 20px;
}

.contact-meta-row {
  margin-top: 24px;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-top: 28px;
}

.contact-card {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f7f7f6;
  display: grid;
  gap: 5px;
  color: #111;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.contact-card:hover {
  transform: translateY(0);
  border-color: #c8c8c6;
  background: #fff;
  box-shadow: 0 12px 28px rgba(17,17,17,.08);
}

.contact-card:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

.contact-card-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #777;
}

.contact-card strong {
  font-size: 17px;
  line-height: 1.25;
}

.contact-card > span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.article-hero-media {
  height: 420px;
  border-radius: 16px;
}

.story-list {
  display: grid;
  gap: 16px;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 12px 0;
  background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.72),rgba(255,255,255,0));
  backdrop-filter: blur(8px);
}

.header-shell {
  min-height: 74px;
  background: var(--header);
  border: 1px solid #2d2d2d;
  border-radius: 21px;
  color: #fff;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  box-shadow: 0 12px 30px rgba(17,17,17,.14);
  overflow: visible;
}

.menu-toggle {
  display: none;
  width: 62px;
  height: 72px;
  border: 0;
  border-right: 1px solid #333;
  background: transparent;
  cursor: pointer;
  font-size: 26px;
  color: #fff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px 0 18px;
  min-width: max-content;
}

.brand img {
  width: 60px;
  height: 54px;
  object-fit: contain;
}

.brand-name {
  font-family: var(--brand);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #eee8de;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.main-nav>a,.more-btn {
  border: 0;
  background: transparent;
  color: #f7f7f7;
  padding: 13px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.main-nav>a:hover,.more-btn:hover,.main-nav>a.active {
  background: #242424;
}

.more {
  position: relative;
}

.more-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 48px;
  width: 210px;
  background: #fff;
  color: #111;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--shadow);
}

.more.open .more-menu {
  display: grid;
}

.more-menu a {
  padding: 11px 12px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 13px;
}

.more-menu a:hover {
  background: #f1f1f1;
}

.header-cta {
  margin-right: 12px;
  padding: 14px 18px;
  border-radius: 13px;
  background: var(--accent);
  color: #111;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

/* Mobile drawer */

.mobile-nav {
  display: none;
  position: fixed;
  z-index: 120;
  inset: 0;
  background: rgba(0,0,0,.36);
  padding: 12px;
  cursor: pointer;
}

.mobile-nav.open {
  display: block;
}

.mobile-panel {
  width: min(380px,92vw);
  height: auto;
  max-height: calc(100dvh - 24px);
  background: #111;
  color: #fff;
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow);
  overflow: auto;
  overscroll-behavior: contain;
  cursor: auto;
}

.mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid #333;
}

.mobile-head .brand {
  padding: 0;
}

.mobile-close {
  border: 0;
  background: #262626;
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 20px;
  cursor: pointer;
}

.mobile-links {
  display: grid;
  gap: 4px;
  padding: 18px 0;
}

.mobile-links a {
  padding: 13px 12px;
  border-radius: 10px;
  font-weight: 700;
}

.mobile-links a:hover {
  background: #222;
}

/* Buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid #111;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: .18s ease;
}

.btn.primary {
  background: #111;
  color: #fff;
}

.btn.primary:hover {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(17,17,17,.16);
}

.btn.secondary {
  background: #fff;
  color: #111;
}

.btn.secondary:hover {
  background: #f0f0f0;
}

.btn.soft {
  background: var(--accent-2);
  border-color: #cfc3b0;
}

.btn.small {
  min-height: 40px;
  padding: 0 14px;
  font-size: 12px;
}

/* Homepage video background and hero live in home-fixed-video.css. */

/* Cards */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.section-head .lead {
  max-width: 620px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(17,17,17,.04);
}

.card-body {
  padding: 18px;
}

.card-media {
  height: 230px;
  background: #e5e5e5;
  overflow: hidden;
  position: relative;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.card-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.45;
}

.meta-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 13px;
}

.meta {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  background: #f1f1f1;
  border-radius: 999px;
  color: #555;
}

.price {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-top: 13px;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 800;
}

.card-link::after {
  content: "→";
}

.market-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow: auto;
  scrollbar-width: none;
}

.market-tabs::-webkit-scrollbar {
  display: none;
}

.market-tab {
  border: 1px solid #cfcfcf;
  background: #fff;
  padding: 11px 16px;
  border-radius: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.market-tab.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Trust */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 12px;
}

.trust-item {
  padding: 22px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  min-height: 180px;
}

.trust-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 22px;
}

.trust-item h3 {
  font-size: 17px;
}

.trust-item p {
  font-size: 13px;
  color: var(--muted);
  margin: 9px 0 0;
}

/* Process */

.process-panel {
  background: #111;
  color: #fff;
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  min-height: 520px;
}

.process-copy {
  padding: 46px;
}

.process-copy .lead {
  color: #bbb;
}

.process-list {
  display: grid;
  gap: 8px;
  margin-top: 26px;
}

.process-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid #2d2d2d;
}

.process-step:last-child {
  border-bottom: 0;
}

.process-step span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #111;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.process-step strong {
  display: block;
  font-size: 14px;
}

.process-step small {
  display: block;
  color: #aaa;
  margin-top: 3px;
  line-height: 1.4;
}

.process-image {
  min-height: 520px;
}

.process-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* FAQ */

.faq-list {
  display: grid;
  gap: 9px;
}

.faq-item {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  border: 0;
  background: #fff;
  padding: 17px 18px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.faq-q span:last-child {
  font-size: 20px;
  font-weight: 400;
}

.faq-a {
  display: none;
  padding: 0 18px 18px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
  max-width: 900px;
}

.faq-item.open .faq-a {
  display: block;
}

.faq-item.open .faq-q span:last-child {
  transform: rotate(45deg);
}

/* Team */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}

.team-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.team-photo {
  height: 250px;
  border-radius: 14px;
  background: linear-gradient(145deg,#efefef,#d9d9d9);
  display: grid;
  place-items: center;
  font-family: var(--brand);
  font-size: 52px;
  color: #999;
}

.team-card h3 {
  font-size: 18px;
  margin-top: 14px;
}

.team-card p {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 0;
}

/* CTA */

.cta-panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 28px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cta-form .full {
  grid-column: 1/-1;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 11px;
  font-weight: 800;
  color: #696969;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.field input,.field select,.field textarea {
  width: 100%;
  border: 1px solid #d0d0d0;
  background: #fff;
  border-radius: 11px;
  padding: 12px 13px;
  min-height: 46px;
  outline: none;
}

.field textarea {
  min-height: 108px;
  resize: vertical;
}

.field input:focus,.field select:focus,.field textarea:focus {
  border-color: #888;
}

/* Footer */

.footer {
  padding: 26px 0 18px;
}

.footer-shell {
  background: #111;
  color: #fff;
  border-radius: 24px;
  padding: 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3,1fr);
  gap: 26px;
}

.footer h4 {
  font-size: 13px;
  letter-spacing: .01em;
  margin-bottom: 12px;
}

.footer a,.footer p {
  display: block;
  color: #aaa;
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
}

.footer a:hover {
  color: #fff;
}

.footer .brand {
  padding: 0;
  margin-bottom: 12px;
}

.legal {
  border-top: 1px solid #2b2b2b;
  margin-top: 28px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: #777;
  font-size: 11px;
}

/* Inner pages */

.page-hero {
  padding: 28px 0 26px;
}

.page-hero-box {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 26px;
  padding: 38px;
  box-shadow: 0 10px 30px rgba(17,17,17,.04);
}

.page-hero-box h1 {
  font-size: clamp(38px,5vw,60px);
}

.breadcrumb {
  font-size: 12px;
  color: #777;
  margin-bottom: 14px;
}

.breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}

.article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px;
}

.article h2 {
  font-size: 28px;
  margin: 30px 0 10px;
}

.article h3 {
  font-size: 20px;
  margin: 24px 0 8px;
}

.article p {
  color: #4f5154;
}

.sidebar {
  display: grid;
  gap: 12px;
  align-content: start;
}

.side-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
}

.side-card h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

.side-card a {
  display: block;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid #eee;
}

.side-card a:last-child {
  border-bottom: 0;
}

/* Catalog */

.catalog-layout {
  display: grid;
  grid-template-columns: 300px minmax(0,1fr);
  gap: 18px;
  align-items: start;
}

.filters {
  position: sticky;
  top: 100px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  max-height: calc(100vh - 118px);
  overflow: auto;
}

.filter-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.filter-title h2 {
  font-size: 20px;
}

.filter-reset {
  border: 0;
  background: transparent;
  text-decoration: underline;
  color: #666;
  cursor: pointer;
  font-size: 12px;
}

.filter-group {
  border-top: 1px solid #eee;
  padding-top: 13px;
  margin-top: 13px;
}

.filter-group:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.filter-group>label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6d6d6d;
  margin-bottom: 7px;
}

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.filters select,.filters input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d3d3d3;
  border-radius: 9px;
  background: #fff;
  padding: 0 9px;
  font-size: 12px;
}

.advanced-toggle {
  width: 100%;
  min-height: 42px;
  border: 1px solid #bbb;
  border-radius: 10px;
  background: #f5f5f5;
  font-weight: 800;
  cursor: pointer;
  margin-top: 13px;
}

.advanced {
  display: none;
}

.advanced.open {
  display: block;
}

.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.result-title h2 {
  font-size: 25px;
}

.result-title p {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.sort-select {
  min-height: 42px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
  padding: 0 10px;
  font-size: 12px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.car-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}

.car-photo {
  height: 245px;
  position: relative;
  background: #e7e7e7;
  overflow: hidden;
}

.car-photo-track {
  height: 100%;
  display: flex;
  transition: transform .22s ease;
}

.car-photo-track img {
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
  object-fit: cover;
}

.car-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #111;
  background: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 21px;
}

.car-arrow.prev {
  left: 9px;
}

.car-arrow.next {
  right: 9px;
}

.photo-count {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17,17,17,.72);
  color: #fff;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
}

.car-card-body {
  padding: 16px;
}

.car-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.car-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.car-market {
  font-size: 10px;
  font-weight: 800;
  background: #f0f0f0;
  padding: 5px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.car-price {
  font-size: 20px;
  font-weight: 800;
  margin-top: 8px;
}

.car-price-desc {
  font-size: 11px;
  color: #777;
  margin-top: 3px;
}

.car-specs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  margin-top: 13px;
}

.spec {
  background: #f4f4f4;
  border-radius: 9px;
  padding: 8px;
}

.spec span {
  display: block;
  font-size: 9px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.spec strong {
  display: block;
  font-size: 11px;
  margin-top: 3px;
}

.car-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.car-actions .btn {
  flex: 1;
}

.empty-state {
  display: none;
  padding: 50px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.filter-count {
  font-weight: 800;
}

/* Car detail */

.car-detail {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
}

.gallery {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 12px;
}

.gallery-main {
  height: 520px;
  border-radius: 16px;
  overflow: hidden;
  background: #eee;
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 7px;
  margin-top: 8px;
}

.gallery-thumb {
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
}

.gallery-thumb.active {
  border-color: #111;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  align-self: start;
  position: sticky;
  top: 100px;
}

.detail-card h1 {
  font-size: 34px;
}

.detail-price {
  font-size: 30px;
  font-weight: 900;
  margin: 14px 0 2px;
}

.detail-desc {
  font-size: 12px;
  color: #777;
}

.detail-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
}

.detail-spec {
  border-bottom: 1px solid #eee;
  padding: 9px 0;
}

.detail-spec span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: #888;
}

.detail-spec strong {
  display: block;
  font-size: 13px;
  margin-top: 3px;
}

.source-link {
  word-break: break-all;
  font-size: 11px;
  color: #666;
  text-decoration: underline;
}

/* Orders / media */

.story-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
}

.story-media {
  min-height: 360px;
}

.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-copy {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-copy h3 {
  font-size: 26px;
}

.story-copy p {
  color: var(--muted);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}

.media-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.media-placeholder {
  height: 250px;
  background: linear-gradient(145deg,#e6e6e6,#d4d4d4);
  display: grid;
  place-items: center;
  font-size: 34px;
  color: #999;
}

.media-card .card-body {
  padding: 15px;
}

/* Client reviews */

.clients-hero-box .lead {
  max-width: 850px;
}

.reviews-source-card {
  display: grid;
  grid-template-columns: minmax(190px,.34fr) minmax(0,1fr);
  gap: 24px;
  align-items: center;
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f7f7f7;
}

.reviews-source-score {
  display: grid;
  gap: 4px;
  padding-right: 24px;
  border-right: 1px solid var(--line);
}

.reviews-source-score strong {
  font-size: clamp(42px,5vw,64px);
  line-height: .9;
  letter-spacing: -.05em;
}

.reviews-source-score span {
  font-size: 12px;
  color: var(--muted);
}

.reviews-source-copy p {
  max-width: 720px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.review-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(17,17,17,.04);
}

.review-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.review-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.review-person {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.review-person strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-person span {
  color: var(--muted);
  font-size: 11px;
}

.review-vehicle {
  margin-top: 18px;
  color: #5f5f5f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.review-summary {
  flex: 1;
  margin: 10px 0 18px;
  color: #35373a;
  font-size: 14px;
  line-height: 1.6;
}

.review-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid #ececec;
}

.review-manager {
  color: var(--muted);
  font-size: 11px;
}

.review-source-link {
  color: #363636;
  font-size: 11px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.reviews-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.reviews-more {
  min-width: 220px;
}

.reviews-inline-source {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 108px;
  height: 108px;
  gap: 3px;
  margin: 0 0 20px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.25;
  text-decoration: none;
}

.reviews-inline-source strong {
  color: inherit;
  font-size: 30px;
  line-height: 1;
}

.reviews-source-caption {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 850px) {
  .reviews-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .reviews-source-card {
    grid-template-columns: 1fr;
  }

  .reviews-source-score {
    padding-right: 0;
    padding-bottom: 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 580px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .review-card {
    min-height: 0;
  }

}

/* News */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}

.news-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.news-art {
  height: 190px;
  background: linear-gradient(135deg,#121212,#494949);
  position: relative;
}

.news-art::after {
  content: "Royal Auto";
  position: absolute;
  bottom: 15px;
  left: 16px;
  color: #ddd;
  font-family: var(--brand);
  font-size: 24px;
  letter-spacing: .05em;
}

.news-card .card-body {
  padding: 17px;
}

.news-date {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.news-card h3 {
  font-size: 18px;
  margin-top: 8px;
}

.news-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
}

/* Admin */

.admin-body {
  background: #f1f2f3;
}

.admin-wrap {
  width: min(1320px,calc(100% - 28px));
  margin: 18px auto;
}

.admin-top {
  background: #111;
  color: #fff;
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-top h1 {
  font-size: 21px;
}

.admin-tabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.admin-tab {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}

.admin-tab.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

.admin-panel {
  display: none;
}

.admin-panel.active {
  display: block;
}

.admin-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.admin-grid .wide {
  grid-column: 1/-1;
}

.admin-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.admin-row {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.admin-row strong {
  font-size: 13px;
}

.admin-row small {
  display: block;
  color: #777;
  margin-top: 3px;
}

.admin-actions {
  display: flex;
  gap: 6px;
}

.admin-actions button {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 11px;
  cursor: pointer;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: #111;
  color: #fff;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: .2s;
}

.toast.show {
  opacity: 1;
  transform: none;
}

/* Scroll top */

.scroll-top {
  position: fixed;
  right: 13px;
  bottom: 13px;
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow: 0 10px 24px rgba(17,17,17,.14);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: .18s;
}

.scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

@media (max-width:600px) {
  body:has(.ra-cookie-notice) .scroll-top {
    bottom: var(--ra-cookie-space, 232px);
  }
}

@media (max-width:1100px) {
  .main-nav>a,.more-btn {
    padding: 12px 8px;
    font-size: 12px;
  }

  .brand {
    padding-right: 10px;
  }

  .header-cta {
    padding: 13px 12px;
  }

  .trust-grid {
    grid-template-columns: repeat(3,1fr);
  }

  .card-grid,.news-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .catalog-layout {
    grid-template-columns: 260px 1fr;
  }

  .car-photo {
    height: 220px;
  }
}

@media (max-width:850px) {
  .container {
    width: min(100% - 20px,var(--max));
  }

  .section {
    padding: 56px 0;
  }

  .header-shell {
    grid-template-columns: auto 1fr auto;
    min-height: 64px;
  }

  .menu-toggle {
    display: block;
    height: 62px;
    width: 54px;
  }

  .brand {
    padding-left: 10px;
  }

  .brand img {
    width: 52px;
    height: 46px;
  }

  .brand-name {
    font-size: 20px;
  }

  .main-nav {
    display: none;
  }

  .header-cta {
    font-size: 11px;
    padding: 11px 12px;
  }


  .trust-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .process-panel {
    grid-template-columns: 1fr;
  }

  .process-image {
    min-height: 360px;
    order: -1;
  }

  .process-copy {
    padding: 30px;
  }

  .team-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .cta-panel {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .catalog-layout {
    grid-template-columns: 1fr;
  }

  .filters {
    position: relative;
    top: 0;
    max-height: none;
  }

  .catalog-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .car-detail {
    grid-template-columns: 1fr;
  }

  .detail-card {
    position: relative;
    top: 0;
  }

  .gallery-main {
    height: 430px;
  }

  .story-card {
    grid-template-columns: 1fr;
  }

  .story-media {
    min-height: 300px;
  }

  .media-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width:580px) {
  h1 {
    font-size: 38px;
  }

  h2 {
    font-size: 30px;
  }

  .lead {
    font-size: 16px;
  }

  .section-head {
    align-items: start;
    flex-direction: column;
  }

  .actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
  }

  .header-cta {
    display: none;
  }

  .brand-name {
    font-size: 18px;
  }


  .card-grid,.news-grid,.catalog-grid,.media-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-item {
    min-height: auto;
  }

  .team-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .team-photo {
    height: 180px;
  }

  .team-card {
    padding: 9px;
  }

  .team-card h3 {
    font-size: 15px;
  }

  .team-card p {
    font-size: 11px;
  }

  .cta-panel {
    padding: 22px;
  }

  .contact-cards {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 22px;
  }

  .contact-card {
    padding: 16px 17px;
  }

  .cta-form {
    grid-template-columns: 1fr;
  }

  .cta-form .full {
    grid-column: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-shell {
    padding: 24px;
  }

  .legal {
    display: grid;
  }

  .page-hero-box {
    padding: 25px 20px;
  }

  .page-hero-box h1 {
    font-size: 36px;
  }

  .article {
    padding: 22px 18px;
  }

  .catalog-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .sort-select {
    width: 100%;
  }

  .car-photo {
    height: 235px;
  }

  .car-specs {
    grid-template-columns: repeat(2,1fr);
  }

  .gallery-main {
    height: 320px;
  }

  .gallery-thumbs {
    grid-template-columns: repeat(4,1fr);
  }

  .gallery-thumb {
    height: 62px;
  }

  .detail-specs {
    grid-template-columns: 1fr 1fr;
  }

  .story-copy {
    padding: 22px;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-grid .wide {
    grid-column: auto;
  }
}

/* Reviews v2.6: photo-first ordering and local 2GIS review media */

.reviews-loading {
  min-height: 320px;
  opacity: .55;
}

.review-card {
  padding: 0;
  overflow: hidden;
}

.review-card-body {
  min-height: 300px;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px;
}

.review-card.has-photos {
  min-height: 520px;
}

.review-card.has-photos .review-card-body {
  min-height: 270px;
}

.review-media {
  position: relative;
  height: 250px;
  overflow: hidden;
  background: #e7e7e7;
  border-bottom: 1px solid var(--line);
}

.review-media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-photo-source {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(17,17,17,.72);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
}

.review-photo-arrow {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: rgba(17,17,17,.48);
  color: #fff;
  font-size: 21px;
  cursor: pointer;
  backdrop-filter: blur(7px);
}

.review-photo-arrow.prev {
  left: 9px;
}

.review-photo-arrow.next {
  right: 9px;
}

.review-photo-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(17,17,17,.72);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.review-pack-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.review-pack-stat {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #555;
  font-size: 11px;
  font-weight: 700;
}

.review-pack-stat strong {
  color: #111;
}

@media (max-width: 580px) {
  .review-card-body {
    min-height: 0;
  }

  .review-card.has-photos {
    min-height: 0;
  }

  .review-media {
    height: 235px;
  }
}


/* Reviews v2.7: live 2GIS data through /api/reviews */

.review-avatar-image {
  object-fit: cover;
  background: #ececec;
}

.review-rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.review-stars {
  color: #f3a000;
  font-size: 17px;
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
}

.review-likes {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.review-text-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.review-read-more {
  align-self: flex-start;
  margin: -8px 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #343434;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.review-media-image {
  cursor: zoom-in;
}

@media (max-width: 580px) {
  .review-rating-row {
    margin-top: 12px;
  }

  .review-stars {
    font-size: 16px;
  }

}

.car-discount { display:inline-flex; align-items:center; width:fit-content; margin:8px 0 2px; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:800; line-height:1.25; background:#eef8f0; border:1px solid #b9ddc1; color:#176b2c; }
.car-discount-rate { background:#eef5ff; border-color:#bfd4f6; color:#245ea8; }

.filter-check { display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:600; }
.filter-check input { width:18px; height:18px; margin:0; cursor:pointer; }

/* v1 hotfix: compact clickable discount filter alignment */
.filter-group .filter-check{display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start;gap:8px;margin:0;min-height:38px;line-height:1.2;cursor:pointer}
.filter-group .filter-check input[type="checkbox"]{flex:0 0 18px;width:18px;height:18px;margin:0;padding:0;vertical-align:middle;cursor:pointer}
.filter-group .filter-check span{display:inline-block;margin:0;line-height:18px;vertical-align:middle}

/* Hotfix 14: automatic catalog pagination */
.catalog-auto-load{margin:24px auto 0;text-align:center;color:#6d737b;font-weight:700;min-height:42px;padding:10px}.catalog-auto-load[hidden]{display:none}

/* Hotfix 15: compact closed filter panel; internal scrolling only after "Все параметры" is opened. */
@media (min-width:851px) {
  .filters:not(.advanced-open) {
    max-height: none;
    overflow: visible;
    padding: 12px 14px;
  }

  .filters:not(.advanced-open) .filter-title {
    margin-bottom: 8px;
  }

  .filters:not(.advanced-open) .filter-title h2 {
    font-size: 19px;
  }

  .filters:not(.advanced-open) .filter-group {
    padding-top: 8px;
    margin-top: 8px;
  }

  .filters:not(.advanced-open) .filter-group:first-of-type {
    padding-top: 0;
    margin-top: 0;
  }

  .filters:not(.advanced-open) .filter-group>label {
    margin-bottom: 4px;
  }

  .filters:not(.advanced-open) select,
  .filters:not(.advanced-open) input:not([type="checkbox"]) {
    min-height: 36px;
  }

  .filters:not(.advanced-open) .filter-group .filter-check {
    min-height: 32px;
  }

  .filters:not(.advanced-open) .advanced-toggle {
    min-height: 38px;
    margin-top: 8px;
  }

  .filters.advanced-open {
    max-height: calc(100vh - 118px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

@media (min-width:851px) and (max-height:760px) {
  .filters:not(.advanced-open) {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .filters:not(.advanced-open) .filter-group {
    padding-top: 6px;
    margin-top: 6px;
  }

  .filters:not(.advanced-open) select,
  .filters:not(.advanced-open) input:not([type="checkbox"]) {
    min-height: 34px;
  }

  .filters:not(.advanced-open) .advanced-toggle {
    min-height: 34px;
    margin-top: 6px;
  }
}

/* ================================================================
   HF18 FRONTEND PRODUCT PASS
   Homepage deals carousel, 8-stage process, transparent car pricing,
   breadcrumbs, similar cars and sticky mobile CTA.
   ================================================================ */

.carousel-control {
  width: 44px;
  height: 44px;
  border: 1px solid #c9c9cc;
  border-radius: 50%;
  background: #fff;
  color: #111;
  display: inline-grid;
  place-items: center;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, opacity .16s ease;
}

.carousel-control:hover:not(:disabled) {
  background: #111;
  border-color: #111;
  color: #fff;
}

.carousel-control:disabled {
  opacity: .28;
  cursor: default;
}

/* Homepage: 8 biggest discounts, 3 visible on desktop. */
.home-deals-head {
  align-items: center;
}

.home-deals-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.home-deals-arrows,
.similar-carousel-controls {
  display: flex;
  gap: 8px;
}

.home-deals-viewport,
.similar-cars-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
}

.home-deals-viewport::-webkit-scrollbar,
.similar-cars-viewport::-webkit-scrollbar {
  display: none;
}

.home-deals-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 32px) / 3);
  gap: 16px;
  align-items: stretch;
}

.home-deal-card {
  min-width: 0;
  scroll-snap-align: start;
  cursor: pointer;
}

.home-card-placeholder,
.similar-car-media.is-empty,
.gallery-main.is-empty {
  background:
    linear-gradient(135deg, #eceef0 0%, #e0e2e5 100%);
  color: #8a8d91;
}

.home-card-placeholder {
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 750;
}

.image-load-failed {
  opacity: 0;
}

.deal-kind {
  width: fit-content;
  margin-bottom: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f2f2f3;
  color: #55585b;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.deal-kind-seller {
  background: #eaf6ed;
  color: #196b2d;
}

.deal-kind-rate {
  background: #edf4fd;
  color: #245ea8;
}

.home-deals-status {
  min-height: 18px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
}

.home-deals-message {
  grid-column: 1 / -1;
  min-width: min(640px, 80vw);
  padding: 28px 0;
}

/* Homepage process: no photo, eight transparent stages. */
.process-section-head {
  align-items: center;
}

.process-steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.process-stage {
  position: relative;
  min-height: 210px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(17,17,17,.035);
}

.process-stage-num {
  display: inline-flex;
  min-width: 38px;
  height: 28px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}

.process-stage h3 {
  margin-top: 34px;
  font-size: 18px;
  line-height: 1.15;
}

.process-stage p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Dynamic breadcrumbs are real links, not decorative text. */
.breadcrumb-dynamic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.breadcrumb-dynamic > span[aria-hidden="true"] {
  color: #aaa;
}

.breadcrumb-dynamic [aria-current="page"] {
  color: #555;
  font-weight: 700;
}

/* Pricing on vehicle page. */
.car-risk-badges {
  margin-top: 14px;
}

.price-risk-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 9px 11px;
  border-radius: 12px;
  background: #e84b47;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  outline: none;
}

.price-risk-badge > b {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 11px;
  font-style: normal;
}

.price-risk-tooltip {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  left: 0;
  width: min(330px, calc(100vw - 64px));
  padding: 13px 14px;
  border-radius: 12px;
  background: #2c2f31;
  color: #fff;
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: .15s ease;
  pointer-events: none;
}

.price-risk-tooltip::before {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 100%;
  border: 7px solid transparent;
  border-bottom-color: #2c2f31;
}

.price-risk-badge:hover .price-risk-tooltip,
.price-risk-badge:focus .price-risk-tooltip,
.price-risk-badge:focus-within .price-risk-tooltip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.price-breakdown-host,
.price-history-host {
  margin-top: 14px;
}

.price-breakdown {
  overflow: hidden;
  border: 1px solid #dedfe1;
  border-radius: 14px;
  background: #fafafa;
}

.price-breakdown summary {
  list-style: none;
  min-height: 48px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.price-breakdown summary::-webkit-details-marker {
  display: none;
}

.price-breakdown summary b {
  color: #727579;
  font-size: 10px;
  font-weight: 750;
}

.price-breakdown[open] summary {
  border-bottom: 1px solid #e7e7e8;
}

.price-breakdown[open] summary b::before {
  content: "Скрыть";
  font-size: 10px;
}

.price-breakdown[open] summary b {
  font-size: 0;
}

.price-breakdown-rows {
  padding: 8px 13px 10px;
}

.price-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  padding: 8px 0;
  border-bottom: 1px solid #e8e8e9;
  font-size: 12px;
}

.price-breakdown-row:last-child {
  border-bottom: 0;
}

.price-breakdown-row > span {
  color: #5f6266;
}

.price-breakdown-row > span small {
  display: block;
  margin-top: 2px;
  color: #8a8d90;
  font-size: 9px;
}

.price-breakdown-row strong {
  white-space: nowrap;
  font-size: 12px;
}

.price-breakdown-row.total {
  margin-top: 3px;
  padding-top: 11px;
  border-top: 1px solid #cfd0d2;
  border-bottom: 0;
  font-weight: 900;
}

.price-breakdown-row.total > span,
.price-breakdown-row.total strong {
  color: #111;
  font-size: 13px;
}

.price-breakdown-note {
  margin: 0;
  padding: 0 13px 13px;
  color: #85888c;
  font-size: 9px;
  line-height: 1.45;
}

.price-history-card {
  padding: 13px;
  border: 1px solid #cfe2d3;
  border-radius: 14px;
  background: #f5fbf6;
}

.price-history-heading,
.price-history-comparison {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.price-history-heading span {
  color: #477050;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.price-history-heading strong {
  color: #176b2c;
  font-size: 17px;
}

.price-history-comparison {
  margin-top: 10px;
  font-size: 11px;
  color: #696c6f;
}

.price-history-comparison b {
  color: #111;
}

.price-history-reasons {
  margin-top: 9px;
  border-top: 1px solid #dcecdf;
  padding-top: 4px;
}

.price-history-reasons .price-breakdown-row {
  border-color: #e2efe5;
  padding: 6px 0;
  font-size: 11px;
}

.price-history-reasons p {
  margin: 6px 0 0;
  color: #667069;
  font-size: 10px;
}

.car-city-calculator {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.car-city-calculator label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #777;
}

.car-city-calculator select {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid #d0d1d3;
  border-radius: 10px;
  background: #fff;
}

.car-city-calculator strong {
  display: block;
  font-size: 12px;
}

.detail-cta-actions {
  margin-top: 18px;
}

.detail-cta-actions .car-primary-cta {
  width: 100%;
  justify-content: center;
}

.gallery-main.is-empty {
  position: relative;
}

.gallery-main.is-empty::after {
  content: "Фото недоступно";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8a8d91;
  font-size: 12px;
  font-weight: 750;
}

/* Similar cars: exact market/body and ±15% price / ±2 years candidates,
   ranked by price, year, power and brand/model closeness in car.js. */
.similar-cars-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 42px) / 4);
  gap: 14px;
}

.similar-car-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  scroll-snap-align: start;
}

.similar-car-media {
  height: 180px;
  display: block;
  overflow: hidden;
  background: #e8e9ea;
}

.similar-car-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.similar-car-media.is-empty {
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.similar-car-body {
  padding: 14px;
}

.similar-car-name {
  display: block;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.similar-car-body p {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 11px;
}

.similar-car-body > strong {
  display: block;
  font-size: 16px;
}

.similar-car-body .car-discount {
  margin-top: 9px;
}

.mobile-car-sticky {
  display: none;
}

@media (max-width:1100px) {
  .home-deals-track {
    grid-auto-columns: calc((100% - 16px) / 2);
  }

  .process-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .similar-cars-track {
    grid-auto-columns: calc((100% - 28px) / 3);
  }
}

@media (max-width:850px) {
  .home-deals-head-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .similar-cars-track {
    grid-auto-columns: calc((100% - 14px) / 2);
  }
}

@media (max-width:580px) {
  .home-deals-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .home-deals-head-actions .btn {
    width: auto;
    flex: 1;
  }

  .home-deals-track,
  .similar-cars-track {
    grid-auto-columns: 88%;
  }

  .process-steps-grid {
    grid-template-columns: 1fr;
  }

  .process-stage {
    min-height: auto;
    padding: 19px;
  }

  .process-stage h3 {
    margin-top: 24px;
  }

  .price-risk-tooltip {
    position: fixed;
    left: 20px;
    right: 20px;
    top: auto;
    bottom: 92px;
    width: auto;
  }

  .price-risk-tooltip::before {
    display: none;
  }

  .price-breakdown-row {
    gap: 10px;
  }

  .price-breakdown-row strong {
    white-space: normal;
    text-align: right;
  }

  .price-history-comparison {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .mobile-car-sticky:not([hidden]) {
    position: fixed;
    z-index: 95;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-top: 1px solid #d9dadd;
    background: rgba(255,255,255,.96);
    box-shadow: 0 -12px 34px rgba(17,17,17,.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mobile-car-sticky small {
    display: block;
    color: #777;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 750;
  }

  .mobile-car-sticky strong {
    display: block;
    margin-top: 2px;
    font-size: 15px;
  }

  .mobile-car-sticky .btn {
    width: auto;
    min-height: 44px;
    padding-inline: 16px;
  }

  .mobile-car-sticky:not([hidden]) + .footer {
    padding-bottom: 82px;
  }
}

.car-risk-badges:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.price-risk-badge.high-util {
  background: #d98b24;
}

.catalog-photo-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #eceef0 0%, #e0e2e5 100%);
  color: #8a8d91;
  font-size: 12px;
  font-weight: 750;
}


/* ================================================================
   HF18.1 POLISH
   Clickable similar cards and precisely centred carousel controls.
   ================================================================ */
.carousel-control {
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(17,17,17,.06);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.carousel-control-icon {
  width: 19px;
  height: 19px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.carousel-control:hover:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 9px 24px rgba(17,17,17,.13);
}

.carousel-control:active:not(:disabled) {
  transform: translateY(0) scale(.96);
}

.carousel-control:focus-visible {
  outline: 3px solid rgba(17,17,17,.14);
  outline-offset: 3px;
}

.home-deals-arrows,
.similar-carousel-controls {
  align-items: center;
}

.similar-carousel-controls {
  align-self: flex-end;
  margin-bottom: 3px;
}

.similar-car-card {
  cursor: pointer;
  outline: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}


.similar-car-card * {
  cursor: pointer;
}
.similar-car-card:hover,
.similar-car-card:focus-visible,
.similar-car-card:focus-within {
  transform: translateY(0);
  border-color: #c9cacc;
  box-shadow: 0 14px 34px rgba(17,17,17,.09);
}

.similar-car-media img {
  transition: transform .28s ease;
}

.similar-car-card:hover .similar-car-media img,
.similar-car-card:focus-visible .similar-car-media img,
.similar-car-card:focus-within .similar-car-media img {
  transform: scale(1.025);
}

.similar-car-name {
  color: inherit;
  text-decoration: none;
}

@media (max-width:580px) {
  .similar-carousel-controls {
    align-self: auto;
    margin-bottom: 0;
  }
}


/* HF18.1: unify image-carousel arrow buttons with the new SVG controls. */
.car-arrow {
  padding: 0;
  border-color: rgba(17,17,17,.22);
  background: rgba(255,255,255,.9);
  color: #111;
  box-shadow: 0 7px 20px rgba(17,17,17,.10);
  backdrop-filter: blur(8px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.car-arrow:hover {
  background: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 9px 24px rgba(17,17,17,.18);
}

.car-arrow:active {
  transform: translateY(-50%) scale(.94);
}

.car-arrow:focus-visible {
  outline: 3px solid rgba(255,255,255,.72);
  outline-offset: 2px;
}

.car-arrow-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* =========================================================
   HF20 — Royal Auto visual system
   Quiet, high-contrast, conversion-first. One design language
   for catalog, cards, inner pages and future sections.
   ========================================================= */
:root{
  --bg:#f1f0ed;
  --bg-top:#f7f6f3;
  --surface:#ffffff;
  --surface-2:#e9e7e2;
  --ink:#111111;
  --muted:#66635f;
  --line:#d8d5cf;
  --line-dark:#323232;
  --accent:#d8cbb8;
  --accent-2:#eee8df;
  --header:#111111;
  --radius:20px;
  --shadow:0 18px 48px rgba(17,17,17,.055);
  --max:1320px;
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}

body{
  background:var(--bg);
  font-family:var(--font);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
}

.container{width:min(var(--max),calc(100% - 48px))}
.section{padding:88px 0}
.section.compact{padding:62px 0}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.045em;
}
h1{font-size:clamp(44px,5.5vw,78px);line-height:.98}
h2{font-size:clamp(32px,4vw,54px);line-height:1}
h3{letter-spacing:-.035em}
.lead{font-size:17px;line-height:1.55;color:var(--muted)}
.eyebrow{color:#55514c;font-size:11px;letter-spacing:.13em;margin-bottom:14px}
.eyebrow::before{background:#77716a}

.site-header{padding:10px 0;background:linear-gradient(180deg,rgba(247,246,243,.95),rgba(247,246,243,.65),rgba(247,246,243,0));}
.header-shell{
  min-height:68px;
  border-radius:18px;
  border-color:#2a2a2a;
  box-shadow:0 12px 30px rgba(17,17,17,.11);
}
.brand{padding-left:16px;padding-right:18px}
.brand img{width:52px;height:48px}
.brand-name{font-size:24px;letter-spacing:.025em}
.main-nav>a,.more-btn{font-size:13px;padding:11px 11px;border-radius:9px}
.header-cta{margin-right:10px;min-height:42px;padding:0 16px;border-radius:10px;background:var(--accent);color:#111;font-weight:800}
.header-cta:hover{background:#e4d8c6;transform:translateY(0)}

.btn{
  min-height:46px;
  border-radius:11px;
  padding:0 18px;
  font-size:13px;
  letter-spacing:-.01em;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.btn.primary{background:#111;color:#fff;border-color:#111}
.btn.primary:hover{background:#292929;border-color:#292929;box-shadow:none;transform:translateY(0)}
.btn.secondary{background:transparent;border-color:#bdb9b2;color:#111}
.btn.secondary:hover{background:#fff;border-color:#9e9a94}

.section-head{margin-bottom:30px;gap:28px}
.section-head .lead{max-width:660px}

.card,
.faq-item,
.team-card,
.review-card,
.news-card,
.page-hero-box,
.article,
.side-card{
  border-color:var(--line);
  box-shadow:none;
}
.card{border-radius:20px;background:#fff}
.card-title{font-size:18px;font-weight:800}
.card-sub{color:#76716b}
.card-link{font-size:12px}
.price{font-size:22px;font-weight:800}
.page-hero{padding:26px 0 34px}
.page-hero-box{border-radius:22px;padding:42px;background:#fff}
.page-hero-box h1{font-size:clamp(40px,5vw,66px)}
.breadcrumb{color:#77716a}
.article{border-radius:20px}
.side-card{border-radius:16px}
.filters{border-color:var(--line);box-shadow:none;background:#fff}

.trust-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.trust-item{
  min-height:210px;
  border-radius:20px;
  padding:26px;
  border-color:var(--line);
  display:flex;
  flex-direction:column;
}
.trust-num{margin-bottom:34px}
.trust-item h3{font-size:19px}
.trust-item p{margin-top:auto;padding-top:18px;font-size:14px;line-height:1.5}

.faq-list{gap:8px}
.faq-item{border-radius:12px;background:#fff}
.faq-q{padding:18px 20px;background:#fff;font-size:15px}
.faq-a{padding:0 20px 20px}

.team-card{border-radius:18px}
.news-card{border-radius:18px;overflow:hidden}

.footer{background:#101010}
.footer-shell{border-radius:22px}

@media(max-width:900px){
  .container{width:min(var(--max),calc(100% - 28px))}
  .section{padding:68px 0}.section.compact{padding:50px 0}
  .trust-grid{grid-template-columns:1fr}
}
@media(max-width:580px){
  .container{width:min(var(--max),calc(100% - 20px))}
  .section{padding:54px 0}.section.compact{padding:42px 0}
  h2{font-size:clamp(30px,10vw,42px)}
  .lead{font-size:15px}
  .page-hero-box{padding:28px 22px}
}

/* =========================================================
   HF20.1 — desktop header polish
   Opaque floating bar, no glass blur, cleaner proportions.
   ========================================================= */
@media (min-width:851px){
  .header-shell{
    grid-template-columns:auto minmax(0,1fr) auto;
  }

  .brand{
    padding-left:16px;
    padding-right:20px;
  }

  .brand-name{
    font-size:29px;
    line-height:1;
    letter-spacing:.02em;
  }

  .main-nav{
    gap:7px;
  }

  .main-nav>a,
  .more-btn{
    padding:12px 16px;
    font-size:13px;
  }

  .header-cta{
    width:205px;
    min-width:205px;
    min-height:46px;
    margin-right:10px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:15px;
    line-height:1.1;
    letter-spacing:-.01em;
  }
}

.site-header{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.home-page .site-header{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.home-page .header-shell{
  background:#111;
  border-color:#2a2a2a;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

@media (min-width:851px) and (max-width:1180px){
  .brand-name{font-size:26px}
  .main-nav{gap:3px}
  .main-nav>a,.more-btn{padding-left:10px;padding-right:10px}
  .header-cta{width:178px;min-width:178px;font-size:14px}
}

/* ================================================================
   HF20.4 — continuous warm canvas + no-wrap section actions
   One uninterrupted page colour, matching the "Сильно подешевели" section.
   ================================================================ */
:root{
  --bg:#f7f6f3;
  --bg-top:#f7f6f3;
}

html,
body{
  background:#f7f6f3;
}

body{
  background-image:none;
}

.home-page,
.home-page main,
.home-page main > .section:not(.hero-video-section),
.home-page main > .section:not(.hero-video-section):nth-of-type(odd),
.home-page .home-deals-section,
.home-page .process-section{
  background:#f7f6f3!important;
}

/* Section action buttons must stay compact and on one line. */
.section-head > .btn,
.home-page .section-head > .btn{
  flex:0 0 auto;
  width:auto;
  min-width:max-content;
  white-space:nowrap;
}

@media (max-width:580px){
  .section-head > .btn,
  .home-page .section-head > .btn{
    min-width:0;
    white-space:nowrap;
  }
}

/* ================================================================
   HF20.5 — restore hero video after continuous-canvas pass
   The page canvas stays warm, but <main> itself must remain transparent so
   the absolute first-screen video layer is visible through the hero.
   ================================================================ */
.home-page main{
  background:transparent!important;
}

/* ================================================================
   HF20.6 — universal tactile feedback for buttons
   Keep every real button feeling clickable without overriding legacy
   transform-based positioning used by carousel/viewer controls.
   The individual CSS `translate` property composes with `transform`.
   ================================================================ */
:where(button, .btn, .header-cta, a[role="button"]){
  transition-duration:.16s;
  transition-timing-function:ease;
}

@media (hover:hover) and (pointer:fine){
  :where(button, .btn, .header-cta, a[role="button"]):not(:disabled):not([aria-disabled="true"]):hover{
    translate:0 -2px;
    filter:drop-shadow(0 8px 12px rgba(17,17,17,.14));
  }
}

:where(button, .btn, .header-cta, a[role="button"]):not(:disabled):not([aria-disabled="true"]):active{
  translate:0 0;
  filter:drop-shadow(0 3px 5px rgba(17,17,17,.10));
}

:where(button, .btn, .header-cta, a[role="button"]):disabled,
:where(button, .btn, .header-cta, a[role="button"])[aria-disabled="true"]{
  translate:none;
  filter:none;
}

@media (prefers-reduced-motion:reduce){
  :where(button, .btn, .header-cta, a[role="button"]){
    transition-duration:0s;
  }
}

/* ================================================================
   HF20.7 — header-nav parity + calmer circular controls
   All desktop nav items now feel as tactile as “Ещё”. Carousel/image
   arrows keep a dark glyph on a warm-grey hover instead of washing out.
   ================================================================ */
@media (hover:hover) and (pointer:fine){
  .main-nav > a,
  .more-btn{
    transition:background .16s ease,color .16s ease,translate .16s ease,filter .16s ease;
  }

  .main-nav > a:hover,
  .more-btn:hover{
    translate:0 -2px;
    filter:drop-shadow(0 7px 10px rgba(0,0,0,.16));
  }
}

.main-nav > a:active,
.more-btn:active{
  translate:0 0;
  filter:none;
}

/* Primary round carousel controls: do not turn into a white flare. */
.carousel-control:hover:not(:disabled){
  background:#ece9e3;
  border-color:#8f8a82;
  color:#111;
  transform:none;
  translate:0 -2px;
  filter:none;
  box-shadow:0 10px 22px rgba(17,17,17,.16);
}

.carousel-control:active:not(:disabled){
  background:#e2ded7;
  color:#111;
  transform:scale(.96);
  translate:0 0;
  filter:none;
  box-shadow:0 4px 10px rgba(17,17,17,.10);
}

/* Photo-card arrows use the same legible warm-grey feedback. */
.car-arrow:hover{
  background:rgba(236,233,227,.97);
  color:#111;
  border-color:#8f8a82;
  filter:none;
  box-shadow:0 9px 22px rgba(17,17,17,.18);
}

.car-arrow:active{
  background:rgba(226,222,215,.98);
  color:#111;
  transform:translateY(-50%) scale(.94);
  filter:none;
}

/* ================================================================
   HF20.9 — architectural textured canvas
   User-provided polished-concrete texture becomes the continuous public
   site background. Hero/process videos remain their own media surfaces.
   ================================================================ */
body:not(.admin-body){
  /* HF20.10: the stone texture must be visible, not bleached into flat beige. */
  background-color:#aeb1b1;
  background-image:
    linear-gradient(rgba(174,177,177,.42),rgba(174,177,177,.42)),
    url("assets/royalauto-concrete-texture.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* The texture is the wall/canvas itself. Structural page sections should not
   paint an opaque rectangle over it; content cards remain clean surfaces. */
body:not(.admin-body) main,
body.home-page,
.home-page main > .section:not(.hero-video-section),
.home-page main > .section:not(.hero-video-section):nth-of-type(odd),
.home-page .home-deals-section,
.home-page .process-section{
  background:transparent!important;
}

/* Keep a very light separator between long sections without recreating
   alternating solid bands. */
.home-page main > .section:not(.hero-video-section){
  border-top-color:rgba(17,17,17,.07);
}

/* Clean content surfaces float subtly above the stone texture. */
body:not(.admin-body) :is(.card,.page-hero-box,.article,.side-card,.faq-item,.team-card,.review-card,.news-card,.filters){
  box-shadow:0 12px 30px rgba(17,17,17,.055);
}

/* Fixed photographic backgrounds are expensive/janky on many phones. The
   same continuous texture remains, but scrolls normally there. */
@media (max-width:900px){
  body:not(.admin-body){
    background-attachment:scroll;
    background-size:auto 100vh;
    background-repeat:repeat-y;
  }
}


/* ================================================================
   HF20.10 — darker architectural canvas + detail gallery controls
   ================================================================ */
html{
  background:#aeb1b1;
}

.gallery-main{
  position:relative;
}

.gallery-main-arrow{
  position:absolute;
  top:50%;
  z-index:4;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid rgba(17,17,17,.16);
  border-radius:999px;
  background:rgba(242,242,239,.88);
  color:#111;
  display:grid;
  place-items:center;
  cursor:pointer;
  transform:translateY(-50%);
  translate:none!important;
  box-shadow:0 7px 18px rgba(17,17,17,.12);
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease;
}

.gallery-main-arrow.prev{left:16px;}
.gallery-main-arrow.next{right:16px;}

.gallery-main-arrow svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (hover:hover) and (pointer:fine){
  .gallery-main-arrow:hover{
    background:#d7d8d6;
    border-color:rgba(17,17,17,.34);
    box-shadow:0 10px 24px rgba(17,17,17,.18);
    transform:translateY(-50%) scale(1.04);
  }
}

.gallery-main-arrow:active{
  background:#c8cac8;
  transform:translateY(-50%) scale(.96);
  box-shadow:0 4px 11px rgba(17,17,17,.13);
}

.gallery-main.is-empty .gallery-main-arrow{
  display:none;
}

@media (max-width:700px){
  .gallery-main-arrow{width:40px;height:40px;}
  .gallery-main-arrow.prev{left:10px;}
  .gallery-main-arrow.next{right:10px;}
}


/* ================================================================
   HF20.11 — calmer dark concrete canvas + fully inline desktop nav
   The new user-selected concrete is deliberately quieter than HF20.9/20.10.
   The homepage video remains its own first-screen surface.
   ================================================================ */
body:not(.admin-body){
  background-color:#696966;
  background-image:
    linear-gradient(rgba(157,153,145,.16),rgba(157,153,145,.16)),
    url("assets/royalauto-concrete-texture.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* Never let the global concrete canvas paint over the homepage media layer. */
.home-page .hero-video-section{
  background:transparent!important;
}

/* The sections below the first screen reveal the same body canvas. */
body.home-page,
.home-page main,
.home-page main > .section:not(.hero-video-section),
.home-page main > .section:not(.hero-video-section):nth-of-type(odd),
.home-page .home-deals-section,
.home-page .process-section{
  background-color:transparent!important;
  background-image:none!important;
}

/* Dark canvas needs slightly stronger floating white surfaces. */
body:not(.admin-body) :is(.card,.page-hero-box,.article,.side-card,.faq-item,.team-card,.review-card,.news-card,.filters){
  box-shadow:0 14px 34px rgba(0,0,0,.12);
}

/* Exposed catalogue toolbar copy remains readable against the dark concrete. */
.catalog-toolbar .result-title h2,
.catalog-toolbar .result-title p{
  color:#f5f2ec;
  text-shadow:0 1px 14px rgba(0,0,0,.32);
}

/* Desktop navigation: no dropdown and no dead air after the brand. */
@media (min-width:851px){
  .header-shell{
    grid-template-columns:auto minmax(0,1fr) auto;
  }
  .brand{
    padding-right:12px;
  }
  .main-nav{
    justify-content:flex-start;
    gap:2px;
    padding-left:2px;
    overflow:visible;
  }
  .main-nav > a{
    padding:12px 12px;
    font-size:12.5px;
  }
}

@media (min-width:851px) and (max-width:1370px){
  .brand-name{font-size:26px;}
  .brand{padding-left:12px;padding-right:8px;}
  .brand img{width:48px;height:46px;}
  .main-nav{gap:0;}
  .main-nav > a{padding:11px 8px;font-size:11.5px;}
  .header-cta{width:178px;min-width:178px;padding-inline:12px;font-size:13px;}
}

@media (max-width:900px){
  body:not(.admin-body){
    background-attachment:scroll;
    background-size:auto 100vh;
    background-repeat:repeat-y;
  }
}

/* ================================================================
   HF20.12 — repair pass after HF20.11
   Revert experimental image texture entirely. Keep a clean continuous canvas
   until a new background is explicitly approved. Homepage media is isolated.
   ================================================================ */
html,
body:not(.admin-body){
  background:#f7f6f3!important;
  background-image:none!important;
}
body:not(.admin-body){
  background-attachment:scroll!important;
}
body:not(.admin-body) main{
  background:transparent!important;
}
.home-page main > .section:not(.hero-video-section),
.home-page main > .section:not(.hero-video-section):nth-of-type(odd),
.home-page .home-deals-section,
.home-page .process-section{
  background:#f7f6f3!important;
  background-image:none!important;
}
.catalog-toolbar .result-title h2{
  color:#111!important;
  text-shadow:none!important;
}
.catalog-toolbar .result-title p{
  color:var(--muted)!important;
  text-shadow:none!important;
}

/* ================================================================
   HF20.13 — full-width desktop header + searchable brand/model filters
   ================================================================ */
@media (min-width:851px){
  .header-shell{
    grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:0;
  }
  .brand{
    padding-left:12px;
    padding-right:12px;
  }
  .main-nav{
    width:100%;
    min-width:0;
    padding:0 4px;
    gap:0;
    display:flex;
    align-items:center;
    justify-content:stretch;
  }
  .main-nav > a{
    flex:1 1 auto;
    min-width:0;
    padding:12px 6px;
    text-align:center;
  }
  .header-cta{
    width:auto;
    min-width:188px;
    min-height:46px;
    margin-left:6px;
    margin-right:8px;
    padding-inline:18px;
    align-self:center;
  }
}

@media (min-width:851px) and (max-width:1180px){
  .brand{padding-left:8px;padding-right:6px;gap:6px}
  .brand img{width:44px;height:44px}
  .brand-name{font-size:23px}
  .main-nav{padding-inline:0}
  .main-nav > a{padding-inline:4px;font-size:10.5px;letter-spacing:-.015em}
  .header-cta{min-width:158px;width:auto;padding-inline:10px;font-size:12px;margin-left:4px;margin-right:6px}
}

.searchable-select{
  position:relative;
  width:100%;
  z-index:1;
}
.searchable-select.open{
  z-index:40;
}
.filters .searchable-select > select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  padding:0!important;
  margin:-1px!important;
  border:0!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  opacity:0!important;
  pointer-events:none!important;
}
.filters .searchable-select-input{
  width:100%;
  min-height:42px;
  padding:0 38px 0 10px;
  border:1px solid #d3d3d3;
  border-radius:9px;
  background:#fff;
  color:#111;
  font-size:12px;
  outline:none;
  cursor:text;
  transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.filters .searchable-select-input:hover{
  border-color:#b8b8b8;
}
.filters .searchable-select-input:focus,
.searchable-select.open .searchable-select-input{
  border-color:#8f8f8f;
  box-shadow:0 0 0 3px rgba(17,17,17,.07);
}
.filters .searchable-select-input:disabled{
  background:#f5f5f5;
  color:#999;
  cursor:not-allowed;
}
.searchable-select-toggle{
  position:absolute;
  z-index:2;
  top:50%;
  right:5px;
  width:30px;
  height:30px;
  translate:0 -50%!important;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#555;
  display:grid;
  place-items:center;
  padding:0;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  box-shadow:none!important;
  filter:none!important;
  transition:background .14s ease, color .14s ease, rotate .14s ease;
}
.searchable-select-toggle:hover{
  translate:0 -50%!important;
  background:#f0f0f0;
  color:#111;
  box-shadow:none!important;
  filter:none!important;
}
.searchable-select.open .searchable-select-toggle{
  rotate:180deg;
}
.searchable-select-menu{
  display:none;
  position:absolute;
  z-index:60;
  left:0;
  right:0;
  top:calc(100% + 6px);
  max-height:260px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:6px;
  border:1px solid #cfcfcf;
  border-radius:11px;
  background:rgba(255,255,255,.98);
  box-shadow:0 14px 30px rgba(0,0,0,.14);
}
.searchable-select.open .searchable-select-menu{
  display:block;
}
.searchable-select-option{
  width:100%;
  min-height:34px;
  padding:8px 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#222;
  display:block;
  text-align:left;
  font-size:12px;
  font-weight:600;
  line-height:1.25;
  cursor:pointer;
  translate:none!important;
  box-shadow:none!important;
  filter:none!important;
}
.searchable-select-option:hover,
.searchable-select-option.active{
  background:#f0f0ef;
  translate:none!important;
  box-shadow:none!important;
  filter:none!important;
}
.searchable-select-option.selected{
  background:#111;
  color:#fff;
}
.searchable-select-option.selected:hover,
.searchable-select-option.selected.active{
  background:#242424;
}
.searchable-select-empty{
  padding:10px 9px;
  color:#858585;
  font-size:12px;
}

@media (min-width:851px){
  .filters:not(.advanced-open) .searchable-select-input{
    min-height:36px;
  }
}
@media (min-width:851px) and (max-height:760px){
  .filters:not(.advanced-open) .searchable-select-input{
    min-height:34px;
  }
}


/* HF20.14: clean home deal cards.
   The only promotional badge is the actual discount amount; the old
   generic "Цена снизилась" label is intentionally removed in home.js. */
.home-deal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.home-deal-footer .car-discount,
.home-deal-footer .card-link {
  margin-top: 0;
  margin-bottom: 0;
}
.home-deal-footer .car-discount {
  flex: 0 0 auto;
  max-width: 100%;
}
.home-deal-footer .card-link {
  flex: 0 1 auto;
  margin-left: auto;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .home-deal-footer {
    align-items: flex-start;
  }
  .home-deal-footer .card-link {
    margin-left: 0;
  }
}

/* HF20.15: electrified request-calculation presentation.
   CHE168 electrified listings intentionally have no automatic public price. */
.car-price-request,
.home-price-request,
.similar-price-request,
.ev-price-cta {
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
}

.car-price-request {
  min-height: 42px;
  margin-top: 10px;
  padding-inline: 16px;
}

.home-price-request {
  min-height: 42px;
  margin-top: 10px;
  padding-inline: 16px;
}

.request-calculation-price {
  margin-top: 16px;
  font-size: inherit;
}

.request-calculation-price .ev-price-cta {
  min-height: 48px;
  padding-inline: 20px;
}

.similar-price-request {
  min-height: 38px;
  margin-top: 8px;
  padding-inline: 12px;
  font-size: 11px;
}

@media (max-width: 700px) {
  .request-calculation-price .ev-price-cta,
  .car-price-request,
  .home-price-request {
    width: 100%;
  }
}


/* HF20.17_UNIFIED_CARD_LAYOUT */
.car-card-body{display:flex;flex-direction:column;height:100%}
.car-card .car-top{min-height:34px}
.car-card .car-price,.car-card .car-price-request{min-height:44px;margin-top:10px}
.car-card .car-price{display:flex;align-items:center}
.car-card .car-price-request{display:inline-flex;align-items:center;justify-content:center}
.car-card .car-price-desc{min-height:36px}
.car-card .car-actions{margin-top:auto;padding-top:14px}
.home-deal-card .card-body{display:flex;flex-direction:column;height:100%}
.home-deal-card .price,.home-deal-card .home-price-request{min-height:48px;margin-top:13px}
.home-deal-card .price{display:flex;align-items:center}
.home-deal-card .home-deal-footer{margin-top:auto;padding-top:12px}

.home-card-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:7px;margin-top:13px;min-height:58px}
.home-card-spec{min-width:0;padding:8px 9px;border-radius:10px;background:#f4f4f4;display:grid;gap:2px}
.home-card-spec span{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#858585}
.home-card-spec strong{font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.searchable-select-toggle{top:50%!important;right:9px!important;translate:none!important;transform:translateY(-50%)!important;rotate:0!important;font-size:0!important;transition:background .14s ease,color .14s ease!important}
.searchable-select-toggle:hover{translate:none!important;transform:translateY(-50%)!important;rotate:0!important}
.searchable-select-toggle::before{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transform-origin:50% 50%;transition:transform .16s ease}
.searchable-select.open .searchable-select-toggle{rotate:0!important}
.searchable-select.open .searchable-select-toggle::before{transform:rotate(225deg)}
.filters select:not([aria-hidden="true"]),.sort-select{appearance:none;-webkit-appearance:none;padding-right:42px!important;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:14px 14px}
@media(max-width:760px){.home-card-specs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* CSP-safe full-screen photo viewer. Keep these rules in the stylesheet: production CSP blocks inline <style>. */
html.ra-photo-viewer-open,
html.ra-photo-viewer-open body{overflow:hidden}
.ra-photo-viewer{position:fixed;inset:0;z-index:10000;background:rgba(10,10,11,.94);display:flex;align-items:center;justify-content:center;padding:34px 86px;box-sizing:border-box;backdrop-filter:blur(8px);isolation:isolate}
.ra-photo-viewer[hidden]{display:none}
.ra-photo-viewer-image{max-width:min(94vw,1600px);max-height:88vh;object-fit:contain;user-select:none;border-radius:12px;box-shadow:0 28px 80px rgba(0,0,0,.36)}
.ra-photo-viewer-close,.ra-photo-viewer-arrow{position:absolute;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(25,25,27,.62);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);box-shadow:0 8px 26px rgba(0,0,0,.22);transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease}
.ra-photo-viewer-close:hover,.ra-photo-viewer-arrow:hover{background:#fff;color:#111;border-color:#fff;transform:scale(1.05);box-shadow:0 10px 28px rgba(0,0,0,.28)}
.ra-photo-viewer-close:active,.ra-photo-viewer-arrow:active{transform:scale(.96)}
.ra-photo-viewer-close:focus-visible,.ra-photo-viewer-arrow:focus-visible{outline:3px solid rgba(255,255,255,.42);outline-offset:3px}
.ra-photo-viewer-close{right:24px;top:22px}
.ra-photo-viewer-arrow{top:50%;transform:translateY(-50%)}
.ra-photo-viewer-arrow:hover{transform:translateY(-50%) scale(1.05)}
.ra-photo-viewer-arrow:active{transform:translateY(-50%) scale(.96)}
.ra-photo-viewer-prev{left:24px}.ra-photo-viewer-next{right:24px}
.ra-photo-viewer-icon{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ra-photo-viewer-close .ra-photo-viewer-icon{width:20px;height:20px}
.ra-photo-viewer-count{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);color:#fff;background:rgba(25,25,27,.62);border:1px solid rgba(255,255,255,.16);padding:7px 12px;border-radius:999px;backdrop-filter:blur(10px);font:650 13px/1.2 system-ui,sans-serif}
[data-photo-viewer-target]{cursor:zoom-in!important}
@media(max-width:700px){.ra-photo-viewer{padding:12px 8px}.ra-photo-viewer-image{max-width:96vw;max-height:84vh;border-radius:8px}.ra-photo-viewer-close,.ra-photo-viewer-arrow{width:44px;height:44px}.ra-photo-viewer-prev{left:10px}.ra-photo-viewer-next{right:10px}.ra-photo-viewer-close{right:10px;top:10px}.ra-photo-viewer-count{bottom:12px}}

/* HF20.19_FILTER_CHEVRON_AND_SIMILAR_LINKS */
.searchable-select-toggle{
  z-index:80!important;
  top:50%!important;
  right:5px!important;
  width:34px!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  translate:none!important;
  rotate:0!important;
  transform:translateY(-50%)!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#5b5b5b!important;
}
.searchable-select-toggle:hover{
  transform:translateY(-50%)!important;
  background:#f0f0f0!important;
}
.searchable-select-toggle::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  display:block!important;
  width:8px!important;
  height:8px!important;
  border-right:1.6px solid currentColor!important;
  border-bottom:1.6px solid currentColor!important;
  transform:translate(-50%,-50%) rotate(45deg)!important;
  transform-origin:50% 50%!important;
  transition:transform .16s ease!important;
}
.searchable-select.open .searchable-select-toggle{
  z-index:80!important;
  transform:translateY(-50%)!important;
}
.searchable-select.open .searchable-select-toggle::before{
  transform:translate(-50%,-50%) rotate(225deg)!important;
}
.searchable-select-menu{z-index:60!important}
.sort-select{padding-right:48px!important;background-position:right 18px center!important}
.similar-car-card{position:relative}
.similar-car-card .similar-car-body{position:relative;z-index:auto}
.similar-car-card .similar-price-request{position:relative;z-index:5}
.similar-card-overlay{z-index:2}


/* HF20.20_STABLE_SEARCHABLE_CHEVRON */
.searchable-select-toggle{
  position:absolute!important;
  z-index:90!important;
  top:4px!important;
  right:4px!important;
  width:34px!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  translate:none!important;
  rotate:0!important;
  transform:none!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#5b5b5b!important;
}
.searchable-select-toggle:hover{
  top:4px!important;
  translate:none!important;
  rotate:0!important;
  transform:none!important;
  background:#f0f0f0!important;
}
.searchable-select-toggle::before,
.searchable-select.open .searchable-select-toggle::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  display:block!important;
  width:8px!important;
  height:8px!important;
  border-right:1.6px solid currentColor!important;
  border-bottom:1.6px solid currentColor!important;
  transform:translate(-50%,-50%) rotate(var(--searchable-chevron-angle,45deg))!important;
  transform-origin:50% 50%!important;
  transition:transform .18s ease!important;
}
.searchable-select.open .searchable-select-toggle{
  top:4px!important;
  right:4px!important;
  translate:none!important;
  rotate:0!important;
  transform:none!important;
}
.searchable-select-menu{z-index:60!important}

@media(min-width:851px){
  .filters:not(.advanced-open) .searchable-select-toggle,
  .filters:not(.advanced-open) .searchable-select-toggle:hover,
  .filters:not(.advanced-open) .searchable-select.open .searchable-select-toggle{
    top:1px!important;
  }
}
@media(min-width:851px) and (max-height:760px){
  .filters:not(.advanced-open) .searchable-select-toggle,
  .filters:not(.advanced-open) .searchable-select-toggle:hover,
  .filters:not(.advanced-open) .searchable-select.open .searchable-select-toggle{
    top:0!important;
  }
}


/* HF20.21_DISCOUNT_CARD_VISIBILITY */
.home-deal-card{display:flex;flex-direction:column}
.home-deal-card>.card-media{flex:0 0 auto}
.home-deal-card .card-body{height:auto!important;min-height:0;flex:1 1 auto}
.home-deal-card .home-deal-footer{margin-top:auto;padding-top:14px}
.home-deal-footer .car-discount{line-height:1.3}

/* site-polish-20260830.css */
/* RoyalAuto 2026-08-30: compact galleries, stable controls and four-card order carousel. */

/* Homepage completed orders: four real cards on wide screens. */
@media (min-width: 1181px) {
  .home-orders-section .home-deals-track {
    grid-auto-columns: calc((100% - 48px) / 4) !important;
  }
}
@media (min-width: 851px) and (max-width: 1180px) {
  .home-orders-section .home-deals-track {
    grid-auto-columns: calc((100% - 32px) / 3) !important;
  }
}
.home-orders-section .home-card-carousel {
  height: auto !important;
  aspect-ratio: 16 / 11;
  background: #0a0c10;
}
.home-orders-section .home-card-carousel .card-photo-link {
  overflow: hidden;
}
.home-orders-section .home-card-carousel .card-photo-link > img {
  max-width: none !important;
  max-height: none !important;
}

/* Keep order arrows and close controls geometrically centred. The global
   tactile button rule uses CSS translate, which must not move positioned UI. */
.order-photo-arrow,
.order-modal-close,
.order-photo-viewer-close,
.viewer-arrow {
  translate: none !important;
  filter: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.order-photo-arrow,
.viewer-arrow {
  transform: translateY(-50%) !important;
}
.order-photo-arrow:hover,
.viewer-arrow:hover {
  translate: none !important;
  transform: translateY(-50%) scale(1.04) !important;
  filter: none !important;
}
.order-photo-arrow:active,
.viewer-arrow:active {
  translate: none !important;
  transform: translateY(-50%) scale(.96) !important;
  filter: none !important;
}
.order-modal-close:hover,
.order-photo-viewer-close:hover {
  translate: none !important;
  transform: scale(1.04) !important;
  filter: none !important;
}
.order-modal-close:active,
.order-photo-viewer-close:active {
  translate: none !important;
  transform: scale(.96) !important;
  filter: none !important;
}

/* Catalog mini-cards borrow the completed-order visual language. */
@media (min-width: 1181px) {
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
.catalog-grid .car-card[data-ra-polished="true"] {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d8d4cc;
  border-radius: 22px;
  background: #f7f4ee;
  color: #171717;
  box-shadow: 0 14px 38px rgba(0,0,0,.08);
}
.catalog-grid .car-card[data-ra-polished="true"]:hover {
  border-color: #bbb4a8;
  box-shadow: 0 20px 54px rgba(0,0,0,.12);
}
.catalog-order-gallery {
  position: relative;
  height: auto !important;
  overflow: visible !important;
  background: #16191f !important;
}
.catalog-order-gallery-main {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #0a0c10;
}
.catalog-order-gallery-main .card-photo-link {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer !important;
}
.catalog-order-gallery-main .card-photo-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: pointer !important;
}
.catalog-order-gallery .car-arrow {
  z-index: 8 !important;
  width: 38px;
  height: 38px;
}
.catalog-order-thumbs {
  position: relative;
  z-index: 7;
  display: flex;
  gap: 7px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 9px 10px 8px;
  background: #16191f;
  scrollbar-width: thin;
  scrollbar-color: #8c9095 #2b2e34;
  overscroll-behavior-inline: contain;
}
.catalog-order-thumbs::-webkit-scrollbar { height: 6px; }
.catalog-order-thumbs::-webkit-scrollbar-track { background: #2b2e34; }
.catalog-order-thumbs::-webkit-scrollbar-thumb { background: #8c9095; border-radius: 99px; }
.catalog-order-thumb {
  position: relative;
  z-index: 8;
  flex: 0 0 54px;
  width: 54px;
  height: 42px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 9px;
  background: #111;
  opacity: .72;
  cursor: pointer;
  translate: none !important;
  transform: none !important;
  filter: none !important;
}
.catalog-order-thumb:hover,
.catalog-order-thumb.active {
  opacity: 1;
  border-color: #e5d8c3;
  translate: none !important;
  transform: none !important;
  filter: none !important;
}
.catalog-order-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.catalog-order-thumb-more {
  flex: 0 0 auto;
  align-self: center;
  padding: 0 4px;
  color: #c7c9cd;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.catalog-grid .car-card[data-ra-polished="true"] .car-card-body {
  min-height: 0;
  height: auto !important;
  padding: 17px 17px 18px;
  background: #f7f4ee;
}
.catalog-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #746d63;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.catalog-card-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  flex: 0 0 24px;
  background: #908779;
}
.catalog-card-title {
  min-height: 46px;
  color: #171717;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.catalog-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 0;
}
.catalog-card-chips span {
  max-width: 100%;
  padding: 6px 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8e3da;
  color: #252525;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-card-price-panel {
  margin-top: 14px;
  padding: 14px 15px;
  border-radius: 16px;
  background: #202329;
  color: #fff;
}
.catalog-card-price-panel span,
.catalog-card-price-panel small {
  display: block;
  color: #c8cbd0;
}
.catalog-card-price-panel span {
  margin-bottom: 5px;
  font-size: 11px;
}
.catalog-card-price-panel strong {
  display: block;
  color: #fff;
  font-size: 20px;
  line-height: 1.15;
}
.catalog-card-price-panel small {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.35;
}
.catalog-grid .car-card[data-ra-polished="true"] .car-discount {
  position: relative;
  z-index: 5;
  margin-top: 10px;
}
.catalog-card-actions {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}
.catalog-card-actions .btn {
  width: 100%;
  min-height: 42px;
}
.catalog-card-actions .catalog-open-car {
  color: #171717 !important;
  border-color: #6d675d !important;
  background: transparent !important;
}
.catalog-card-actions .catalog-open-car:hover {
  color: #fff !important;
  background: #171717 !important;
}

@media (max-width: 580px) {
  .catalog-card-title { min-height: 0; }
  .catalog-order-thumb { flex-basis: 48px; width: 48px; height: 38px; }
}

/* site-finish-20260831.css */
/* RoyalAuto final polish: price calculation accordions, standardized homepage cards and branded 404. */

.ra-price-details{
  display:grid;
  gap:10px;
  margin:0 0 18px;
}
.ra-price-details-section{
  overflow:hidden;
  border:1px solid #2c3036;
  border-radius:14px;
  background:#fff;
  color:#171717;
}
.ra-price-details-section>summary{
  list-style:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 18px;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:12px 14px;
  cursor:pointer;
  user-select:none;
  font-size:13px;
  font-weight:850;
}
.ra-price-details-section>summary::-webkit-details-marker{display:none}
.ra-price-details-section>summary::after{
  content:"+";
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  font-size:18px;
  line-height:1;
  font-weight:500;
}
.ra-price-details-section[open]>summary::after{content:"−"}
.ra-price-details-section>summary strong{
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
}
.ra-price-details-cost>summary{
  background:#202329;
  color:#fff;
}
.ra-price-details-cost>summary strong{color:#fff}
.ra-price-details-discount{
  border-color:#91c975;
}
.ra-price-details-discount>summary{
  background:#a7dc89;
  color:#111;
}
.ra-price-details-discount>summary strong{color:#111}
.ra-price-details-body{
  padding:4px 14px 8px;
  background:#f7f4ee;
}
.ra-price-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:42px;
  padding:9px 0;
  border-bottom:1px solid #d7d1c7;
}
.ra-price-row:last-child{border-bottom:0}
.ra-price-row>span{
  color:#5f5a52;
  font-size:12px;
  line-height:1.35;
}
.ra-price-row-value{
  display:grid;
  justify-items:end;
  gap:2px;
  text-align:right;
}
.ra-price-row-value strong{
  color:#171717;
  font-size:13px;
  line-height:1.25;
  white-space:nowrap;
}
.ra-price-row-value small{
  color:#78726a;
  font-size:10px;
  line-height:1.2;
}
.ra-price-row-total{
  margin-top:2px;
  border-top:2px solid #aaa399;
  border-bottom:0;
}
.ra-price-row-total>span,
.ra-price-row-total .ra-price-row-value strong{
  color:#111;
  font-weight:900;
}
.ra-price-details-empty{
  margin:0;
  padding:12px 0;
  color:#706b63;
  font-size:12px;
  line-height:1.45;
}

/* One card geometry for both homepage recommendation and completed-order carousels. */
.home-page .home-showcase-track{
  align-items:stretch!important;
}
.home-page .home-showcase-track>.vehicle-showcase-card{
  display:flex;
  flex-direction:column;
  align-self:stretch;
  height:auto;
}
.home-page .home-showcase-track>.vehicle-showcase-card>.catalog-v2-card-media{
  flex:0 0 auto;
}
.home-page .home-showcase-track>.vehicle-showcase-card>.catalog-v2-card-body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
}
.home-page .home-showcase-track>.vehicle-showcase-card .catalog-v2-price{
  min-height:104px;
}
.home-page .home-showcase-track>.vehicle-showcase-card .catalog-v2-open{
  margin-top:auto;
}
.home-page .home-orders-track>.home-order-card,
.home-page #homeCarsV2>.home-deal-card{
  border-radius:22px;
  border:1px solid #d8d4cc;
  background:#f7f4ee;
  box-shadow:0 14px 42px rgba(0,0,0,.10);
}

/* Branded real 404 page. Vercel serves 404.html with the original 404 status. */
.error-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#f3f1ec;
  color:#111;
}
.error-page .site-header{
  position:relative;
  padding:14px 0 0;
  background:transparent;
  backdrop-filter:none;
}
.error-header-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:78px;
  padding-right:18px;
  border:1px solid #2f2b26;
  border-radius:22px;
  background:#111;
  box-shadow:0 14px 34px rgba(17,17,17,.16);
}
.error-header-mark{
  color:#d5c9b6;
  font-size:12px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.error-main{
  flex:1 1 auto;
  display:grid;
  place-items:center;
  padding:70px 0 86px;
}
.error-card{
  width:min(900px,100%);
  margin:0 auto;
  padding:70px 32px 64px;
  text-align:center;
}
.error-code{
  display:inline-flex;
  margin-bottom:18px;
  color:#827766;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.error-card h1{
  max-width:840px;
  margin:0 auto;
  color:#111;
  font-size:clamp(36px,5.4vw,68px);
  line-height:1.03;
  letter-spacing:-.045em;
}
.error-card p{
  max-width:620px;
  margin:20px auto 0;
  color:#68635c;
  font-size:16px;
}
.error-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:34px;
}
.error-actions .btn{
  min-width:220px;
  min-height:56px;
  font-size:15px;
}
.error-footer{
  margin-top:auto;
  padding:0 0 18px;
}
.error-footer-shell{
  overflow:hidden;
  border:1px solid #2f2b26;
  border-radius:24px;
  background:#111;
  color:#fff;
  box-shadow:0 18px 42px rgba(17,17,17,.18);
}
.error-footer-top{
  display:grid;
  grid-template-columns:minmax(220px,1.1fr) minmax(0,2fr);
  gap:28px;
  padding:28px 30px;
  border-bottom:1px solid #34302b;
}
.error-footer-brand .brand{
  width:max-content;
  padding:0;
}
.error-footer-brand p{
  max-width:360px;
  margin:12px 0 0;
  color:#c6beb1;
  font-size:13px;
}
.error-footer-contacts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px;
}
.error-footer-contacts a{
  min-width:0;
  padding:10px 0;
  border-bottom:1px solid #2f2b27;
  color:#f1ece4;
  font-size:13px;
  font-weight:750;
}
.error-footer-contacts a span{
  display:block;
  margin-bottom:3px;
  color:#988d7c;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.error-footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 30px;
  color:#a99f90;
  font-size:11px;
}
.error-footer-bottom a{
  color:#d5c9b6;
  font-weight:850;
}

@media(max-width:720px){
  .ra-price-details-section>summary{grid-template-columns:minmax(0,1fr) auto 16px;padding:11px 12px}
  .ra-price-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .error-header-mark{display:none}
  .error-card{padding:52px 8px 50px}
  .error-actions{display:grid}
  .error-actions .btn{width:min(100%,320px);margin:0 auto}
  .error-footer-top{grid-template-columns:1fr;padding:24px 22px}
  .error-footer-contacts{grid-template-columns:1fr}
  .error-footer-bottom{align-items:flex-start;flex-direction:column;padding:15px 22px}
}


/* Canonical interaction model for header navigation on every public page. */
.main-nav>a,.header-cta{
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  will-change:transform;
}
.main-nav>a:hover,.header-cta:hover{
  transform:translateY(0);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
.main-nav>a:active,.header-cta:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}
.main-nav>a:focus-visible,.header-cta:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}

/* Homepage carousels keep native horizontal scrolling for touch, without a visible browser scrollbar. */
.home-page .home-deals-viewport,
.home-page .home-orders-viewport{
  scrollbar-width:none!important;
  -ms-overflow-style:none;
}
.home-page .home-deals-viewport::-webkit-scrollbar,
.home-page .home-orders-viewport::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
.home-page .home-orders-track>.home-order-card .catalog-v2-price{min-height:104px!important}
.home-page .home-orders-track>.home-order-card .catalog-v2-chips{flex-wrap:wrap!important}

/* Section navigation belongs only on the left/right edges of the vehicle viewport. */
.home-page .home-carousel-shell{position:relative;min-width:0}
.home-page .home-carousel-side-arrows{
  position:absolute;
  z-index:12;
  inset:0;
  display:block;
  pointer-events:none;
}
.home-page .home-carousel-side-arrows .carousel-control{
  position:absolute;
  top:50%;
  margin:0!important;
  pointer-events:auto;
  translate:none!important;
  transform:translateY(-50%)!important;
  box-shadow:0 10px 28px rgba(17,17,17,.16);
}
.home-page .home-carousel-side-arrows .carousel-control:first-child{left:-58px}
.home-page .home-carousel-side-arrows .carousel-control:last-child{right:-58px}
.home-page .home-carousel-side-arrows .carousel-control:hover:not(:disabled){
  translate:none!important;
  transform:translateY(-50%) scale(1.05)!important;
  box-shadow:0 14px 34px rgba(17,17,17,.22);
}
.home-page .home-carousel-side-arrows .carousel-control:active:not(:disabled){
  translate:none!important;
  transform:translateY(-50%) scale(.96)!important;
}

/* The complete catalog card opens the vehicle popup. */
.catalog-v2-card{cursor:pointer}

/* Optical centering for the popup close glyph inside the black circular button. */
.catalog-v2-modal-close{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  line-height:1!important;
  font-size:0!important;
  text-indent:0!important;
  translate:none!important;
}
.catalog-v2-modal-close::before{
  content:"×";
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:inherit;
  font-size:25px;
  font-weight:400;
  line-height:1;
}

/* FAQ dropdowns use the same interaction language as the catalog sorting control. */
.faq-section{
  position:relative;
  overflow:visible;
}

.faq-list.faq-list--unified{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:start;
  overflow:visible;
}

.faq-list.faq-list--unified .faq-item{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  align-items:stretch;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.faq-list--unified .faq-item.open{
  z-index:90;
}

.faq-list--unified .faq-q{
  display:flex;
  flex:0 0 auto;
  width:100%;
  min-height:64px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid #d0d0d0;
  border-radius:14px;
  background:#fff;
  color:#171717;
  box-shadow:0 4px 12px rgba(17,17,17,.04);
  cursor:pointer;
  font:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  text-align:left;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease;
}

.faq-list--unified .faq-q:hover,
.faq-list--unified .faq-q:focus-visible,
.faq-list--unified .faq-item.open .faq-q{
  transform:translateY(0);
  border-color:#111;
  background:#fff;
  box-shadow:0 12px 26px rgba(17,17,17,.14);
}

.faq-list--unified .faq-q:focus-visible{
  outline:2px solid #111;
  outline-offset:3px;
}

.faq-list--unified .faq-q:active{
  transform:translateY(0);
  box-shadow:0 6px 14px rgba(17,17,17,.1);
}

.faq-question-text{
  min-width:0;
}

.faq-chevron{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .18s ease;
}

.faq-list--unified .faq-item.open .faq-chevron{
  transform:rotate(180deg);
}

.faq-list--unified .faq-a{
  display:block;
  position:absolute;
  top:100%;
  inset-inline:0;
  z-index:80;
  margin-top:8px;
  max-width:none;
  max-height:min(70vh,560px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:8px;
  border:1px solid #d0d0d0;
  border-radius:14px;
  background:#fff;
  color:#55585c;
  box-shadow:0 18px 38px rgba(17,17,17,.16);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px) scale(.98);
  transform-origin:top center;
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
}

/* Closed answers must not extend the document below the footer. */
.faq-list--unified .faq-a[hidden]{
  display:none;
}

.faq-list--unified .faq-item.open .faq-a{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}

.faq-answer-content{
  padding:6px 8px 8px;
  border:0;
  font-size:14px;
  line-height:1.65;
}

.faq-answer-content p{
  margin:13px 0 0;
}

.faq-answer-content p:first-child{
  margin-top:0;
}

.faq-answer-content strong{
  color:#181818;
}

.faq-steps,
.faq-costs{
  margin:15px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.faq-steps{
  counter-reset:faq-step;
}

.faq-steps li,
.faq-costs li{
  position:relative;
  display:grid;
  gap:5px;
  padding:14px 15px;
  border:1px solid #e4e4e4;
  border-radius:13px;
  background:#f7f7f6;
}

.faq-steps li{
  padding-left:48px;
  counter-increment:faq-step;
}

.faq-steps li::before{
  content:counter(faq-step);
  position:absolute;
  left:14px;
  top:14px;
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#111;
  color:#fff;
  font-size:11px;
  font-weight:800;
}

.faq-steps span,
.faq-costs span,
.faq-markets span{
  display:block;
}

.faq-markets{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:15px;
}

.faq-markets>div{
  padding:14px;
  border:1px solid #e4e4e4;
  border-radius:13px;
  background:#f7f7f6;
}

.faq-markets strong{
  display:block;
  margin-bottom:6px;
  font-size:13px;
}

.faq-page{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

.faq-page>main{
  flex:1 0 auto;
  min-height:0;
}

.faq-page>.footer{
  margin-top:auto;
}

.faq-page .page-hero-box{
  background:linear-gradient(135deg,#fff 0%,#f6f3ee 100%);
}

.faq-page .faq-section{
  padding-top:24px;
}

@media(max-width:1360px){
  .home-page .home-carousel-side-arrows .carousel-control:first-child{left:10px}
  .home-page .home-carousel-side-arrows .carousel-control:last-child{right:10px}
}

@media(max-width:820px){
  .faq-list.faq-list--unified{grid-template-columns:1fr}
  .faq-markets{grid-template-columns:1fr}
}

@media(max-width:720px){
  .home-page .home-carousel-side-arrows .carousel-control{width:42px;height:42px}
  .faq-list--unified .faq-q{
    min-height:60px;
    padding:13px 14px;
    font-size:14px;
  }
  .faq-list--unified .faq-a{max-height:min(72vh,520px)}
}

@media(prefers-reduced-motion:reduce){
  .faq-list--unified .faq-q,
  .faq-chevron,
  .faq-list--unified .faq-a{
    transition:none;
  }
}

/* Keep the pointer target steady, including a 3px strip below action buttons.
   Positioned controls retain their own higher-specificity positioning rules. */
:where(button, .btn, .header-cta, .main-nav > a, a[role="button"]) {
  position: relative;
}
:where(button, .btn, .header-cta, .main-nav > a, a[role="button"]):not(:disabled):not([aria-disabled="true"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  pointer-events: auto;
}

/* Compensate for the 2px visual lift immediately, before its transition starts.
   Resting bottom + 3px == lifted bottom + 5px: the pointer cannot fall out. */
@media (hover: hover) and (pointer: fine) {
  :where(button, .btn, .header-cta, .main-nav > a, a[role="button"]):not(:disabled):not([aria-disabled="true"]):hover::after {
    bottom: -5px;
    height: 5px;
  }
}