/* ================================================================
   KITONE 360° — Storefront v4.1 (Slice A: shell)
   Header / Hero / Persistent Search / Secondary actions / Mobile.
   Изоляция UI-перекрытий: подключается ПОСЛЕ остальных client CSS,
   переопределяет только shell-визуал. Бизнес-JS не трогает.
   ================================================================ */

/* ===== Header (v4.1) — desktop: одна строка ===== */
.sf-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #E2E8F0;
}
.sf-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.sf-logo-emblem { height: 36px; width: auto; display: inline-block; }
.sf-logo-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #0F172A;
  white-space: nowrap;
}
.sf-logo-360 {
  font-size: 12px;
  font-weight: 700;
  color: #2563EB;
  background: #EFF6FF;
  border-radius: 8px;
  padding: 2px 8px;
}
.sf-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  flex: 1;
  min-width: 0;
}
.sf-nav-link {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.sf-nav-link:hover { background: #F1F5F9; color: #0F172A; }
.sf-nav-link.is-soon { color: #94A3B8; cursor: default; }
.sf-nav-link.is-soon:hover { background: none; color: #94A3B8; }

.sf-hdr-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sf-cart {
  padding: 8px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.sf-cart:hover { border-color: #94A3B8; background: #F8FAFC; }
.sf-cart .cart-count { font-weight: 700; color: #2563EB; }
.sf-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  color: #334155;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.sf-menu-btn:hover { background: #F8FAFC; }

/* ===== Mobile menu drawer ===== */
.sf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.sf-overlay.show { opacity: 1; pointer-events: auto; }
.sf-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: min(300px, 85vw);
  height: 100%;
  background: #fff;
  z-index: 95;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
}
.sf-menu.open { transform: translateX(0); }
.sf-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #E2E8F0;
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
}
.sf-menu-close {
  width: 34px;
  height: 34px;
  border: none;
  background: #F1F5F9;
  border-radius: 8px;
  font-size: 16px;
  color: #334155;
  cursor: pointer;
}
.sf-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 4px;
}
.sf-menu-link {
  display: block;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: #0F172A;
  padding: 14px 16px;
  border-radius: 10px;
  transition: background 0.15s;
}
.sf-menu-link:hover { background: #F1F5F9; }
.sf-menu-link.is-soon { color: #94A3B8; cursor: default; }
.sf-menu-link.is-soon:hover { background: none; }

/* ===== Hero (v4.1) ===== */
.sf-hero { padding: 44px 0 4px; text-align: center; }
/* Hero виден только на старте; при поиске/результате/ошибке/VIN скрывается,
   persistent search остаётся на странице. */
body.is-loading .sf-hero,
body.has-result .sf-hero,
body.has-error .sf-hero,
body.has-vin .sf-hero { display: none; }
.sf-hero .hero-name {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: #0F172A;
}
.sf-hero .hero-sub {
  font-size: 17px;
  font-weight: 500;
  color: #64748B;
  margin-top: 8px;
}

/* ===== Persistent Search (v4.1) ===== */
.sf-search { padding: 24px 0 4px; }
.sf-search-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sf-search-row:focus-within { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.sf-search-row .search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 500;
  color: #0F172A;
  background: transparent;
  padding: 8px 12px;
  border-radius: 10px;
}
.sf-search-row .search-input::placeholder { color: #94A3B8; font-weight: 400; }
.sf-search-row .search-button {
  padding: 12px 24px;
  background: #2563EB;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.sf-search-row .search-button:hover { background: #1D4ED8; }
.sf-search-row .search-button:disabled { background: #93C5FD; cursor: not-allowed; }

/* ===== Secondary actions (под поиском) — вторичный вид ===== */
.sf-services { margin-top: 28px; }
/* Иконки service-card: единый спокойный цвет (не зависят от системного шрифта) */
.service-icon { color: #2563EB; display: inline-flex; }
.service-card.is-soon .service-icon { color: #94A3B8; }

/* ================================================================
   Slice B — Results / Loading / Empty / Error (клиентский вид v4.1)
   ================================================================ */

/* ---- Loading: skeleton (без внутренней кухни) ---- */
.sf-loading { max-width: 560px; margin: 40px auto; text-align: center; }
.sf-loading-title { font-size: 20px; font-weight: 700; color: #0F172A; margin-bottom: 6px; }
.sf-loading-sub { font-size: 14px; color: #64748B; margin-bottom: 24px; }
.sf-skeleton { display: flex; flex-direction: column; gap: 12px; }
.sf-sk-card {
  height: 76px;
  border-radius: 12px;
  background: linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 50%, #EEF2F7 75%);
  background-size: 200% 100%;
  animation: sf-shimmer 1.3s infinite linear;
}
@keyframes sf-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Error (v4.1, без технических деталей) ---- */
.sf-error { max-width: 420px; margin: 60px auto; text-align: center; }
.sf-error-title { font-size: 22px; font-weight: 700; color: #0F172A; margin-bottom: 8px; }
.sf-error-sub { font-size: 14px; color: #64748B; margin-bottom: 20px; }
.sf-error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sf-error-btn { padding: 10px 22px; background: #2563EB; color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.sf-error-btn:hover { background: #1D4ED8; }
.sf-error-btn-ghost { background: #fff; color: #2563EB; border: 1px solid #BFDBFE; }
.sf-error-btn-ghost:hover { background: #EFF6FF; border-color: #93C5FD; }

/* ---- Empty state (клиентское) ---- */
.results-empty { text-align: center; padding: 48px 20px; }
.results-empty-title { font-size: 20px; font-weight: 700; color: #0F172A; margin-bottom: 6px; }
.results-empty-sub { font-size: 14px; color: #64748B; margin-bottom: 20px; }
.results-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sf-empty-btn { padding: 10px 22px; background: #2563EB; color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.sf-empty-btn:hover { background: #1D4ED8; }
.sf-empty-btn-ghost { background: #fff; color: #2563EB; border: 1px solid #BFDBFE; }
.sf-empty-btn-ghost:hover { background: #EFF6FF; border-color: #93C5FD; }

/* Заголовки групп — компактно */
.gh2 { font-size: 13px; font-weight: 700; color: #475569; margin: 18px 0 10px; }

/* ---- Results: клиентская карточка (v4.1, компактная 3-зона) ----
   Desktop: [название+мета] | [статус+срок] | [цена+CTA] в одну строку.
   Естественная высота контента (≈ 100-140px), без fixed/min-height. */
.oc {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "main side buy";
  gap: 0 24px;
  align-items: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.oc:hover { border-color: #2563EB; box-shadow: 0 2px 10px rgba(37, 99, 235, 0.08); }

/* Левая зона: название + компактная строка «Бренд · тип · артикул» */
.oc-main { grid-area: main; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oc-name { font-size: 15px; font-weight: 600; color: #0F172A; line-height: 1.3; }
.oc-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #64748B;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oc-bn { font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.3px; }
.oc-badge { font-weight: 600; color: #1D4ED8; background: #EFF6FF; border-radius: 4px; padding: 1px 6px; flex: none; }
.oc-art { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #64748B; }

/* Средняя зона: условия получения */
.oc-side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.oc-sn {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.oc-sn.st-in { color: #15803D; background: #F0FDF4; }
.oc-sn.st-izh { color: #0F766E; background: #F0FDFA; }
.oc-sn.st-dlv { color: #1D4ED8; background: #EFF6FF; }
.oc-term { font-size: 12px; color: #64748B; white-space: nowrap; }

/* Правая зона: цена + CTA */
.oc-buy { grid-area: buy; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.oc-price { font-size: 22px; font-weight: 800; color: #0F172A; white-space: nowrap; }
.oc-add {
  /* Явно перекрываем старые стили suppliers-stage5 (.oc-add 32x32 белая иконка):
     кнопка должна быть полноценной «В корзину» с текстом, а не голым значком. */
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; height: auto;
  padding: 9px 16px; background: #2563EB; color: #fff;
  border: none; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.oc-add:hover { background: #1D4ED8; }

/* ---- Filters: спокойный клиентский вид ---- */
#offers-tools label.fc { font-size: 13px; color: #475569; border-color: #E2E8F0; }
.seg span { font-size: 13px; color: #475569; }
.seg span.o { background: #2563EB; border-color: #2563EB; color: #fff; }

/* ===== Mobile (390px) ===== */
@media (max-width: 820px) {
  .sf-hdr { padding: 12px 0; gap: 8px; }
  .sf-logo-emblem { height: 30px; }
  .sf-logo-name { font-size: 17px; }
  .sf-logo-360 { font-size: 11px; }
  .sf-nav { display: none; }            /* навигация уходит в drawer */
  .sf-menu-btn { display: flex; }       /* ☰ виден */
  .sf-cart { padding: 7px 10px; font-size: 13px; }

  .sf-hero { padding: 28px 0 2px; }
  .sf-hero .hero-name { font-size: 26px; }
  .sf-hero .hero-sub { font-size: 15px; margin-top: 6px; }

  .sf-search { padding: 16px 0 2px; }
  /* Mobile: поле полной ширины, кнопка ниже полной ширины */
  .sf-search-row { flex-direction: column; gap: 8px; padding: 8px; }
  .sf-search-row .search-input { padding: 10px 12px; font-size: 16px; width: 100%; }
  .sf-search-row .search-button { width: 100%; padding: 14px 12px; font-size: 15px; }

  /* Results: компактная клиентская карточка (390px) — в столбик */
  .oc { padding: 12px 14px; gap: 8px 0; grid-template-columns: 1fr; grid-template-areas: "main" "side" "buy"; }
  .oc-name { font-size: 14px; }
  .oc-meta { font-size: 11px; gap: 6px; }
  .oc-side { flex-direction: row; align-items: center; gap: 8px; }
  .oc-term { font-size: 11px; }
  .oc-buy { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .oc-price { font-size: 19px; }
  .oc-add { padding: 9px 14px; font-size: 13px; }
  .oc-sn { font-size: 11px; padding: 2px 8px; }
  .gh2 { font-size: 12px; }
  .sf-loading-title { font-size: 18px; }
}

/* ================================================================
   Slice B.1 — visual polish (broken glyphs 0, чистые фильтры,
   нейтральный summary, самостоятельный Empty, result header v4.1)
   ================================================================ */

/* ---- SVG-иконки: выравнивание по строке (не зависят от шрифта) ---- */
.sf-cart svg, .kc-head svg, .kc-checkout-head svg, .kc-checkout svg,
.kc-checkout-send svg, .kc-close svg, .sf-menu-close svg, .vin-back svg,
.vin-return-btn svg, .vin-car-icon svg, .sf-to-cta svg, .oc-add svg,
.vin-item-arrow svg { display: inline-block; vertical-align: middle; flex: none; }
.sf-cart { display: inline-flex; align-items: center; gap: 6px; }
.kc-checkout, .kc-checkout-send, .kc-checkout-head span,
.kc-head span, .vin-back, .vin-return-btn, .sf-to-cta { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Кнопка поиска: спиннер при поиске ---- */
.search-button.is-searching { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.search-button.is-searching::before {
  content: ''; width: 14px; height: 14px; flex: none;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%;
  animation: sf-spin 0.8s linear infinite;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* ---- Верхняя карточка результата (v4.1): «Результаты по запросу …» ---- */
.product-card {
  display: block; background: transparent; border: none; box-shadow: none;
  padding: 8px 0 2px; margin: 0;
}
.product-card .card-photo { display: none; }
.product-card .card-info { padding: 0; }
.product-card .card-title { font-size: 17px; font-weight: 700; color: #0F172A; }
.product-card .card-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.product-card .card-badge { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; }

/* ---- Фиолетовый summary «Аналоги от … ₽»: дублирует карточки ниже → скрыт ---- */
.recommendation { display: none !important; }

/* ---- Заголовки групп: нейтрально (без ▼) ---- */
.gh2 { font-size: 13px; font-weight: 700; color: #475569; margin: 18px 0 10px; letter-spacing: 0.2px; }

/* ---- Фильтры: чистые клиентские pills (без checkbox-квадратов и эмодзи) ---- */
.suppliers-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#offers-tools label.fc {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  border: 1px solid #E2E8F0; border-radius: 999px; cursor: pointer;
  background: #fff; font-size: 13px; color: #475569; white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
#offers-tools label.fc input { appearance: none; -webkit-appearance: none; width: 0; height: 0; margin: 0; border: none; }
#offers-tools label.fc:has(input:checked) { background: #2563EB; border-color: #2563EB; color: #fff; }
.seg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg span {
  padding: 6px 14px; border: 1px solid #E2E8F0; border-radius: 999px; cursor: pointer;
  background: #fff; font-size: 13px; color: #475569; white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.seg span.o { background: #2563EB; border-color: #2563EB; color: #fff; }

/* ---- Empty State: самостоятельное состояние (без summary/filters/controls) ---- */
.state-result:has(.results-empty) .product-card,
.state-result:has(.results-empty) .recommendation,
.state-result:has(.results-empty) .suppliers-block,
.state-result:has(.results-empty) .sf-to-cta,
.sf-to-cta.is-soon { color: #94A3B8; cursor: default; }
.state-result:has(.results-empty) .ka { display: none !important; }
.state-result:has(.results-empty) .offers-block { margin-top: 8px; }
.results-empty { padding: 72px 20px; }
.results-empty-title { font-size: 22px; }

/* ---- Mobile: pills с горизонтальным скроллом без переполнения страницы ---- */
@media (max-width: 820px) {
  .suppliers-tools, .seg { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .suppliers-tools::-webkit-scrollbar, .seg::-webkit-scrollbar { display: none; }
  .suppliers-tools { margin-right: -4px; }
  #offers-tools label.fc, .seg span { flex: none; }
}

/* ---- service-cta: CSS-chevron вместо → (без зависимости от шрифта) ---- */
.service-cta { display: inline-flex; align-items: center; }
.service-cta::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin-left: 7px;
}

/* ================================================================
   THEME v1 — KITONE BLUE/NAVY (визуальное выравнивание 31.08)
   Светлый холодный фон · белые карточки · глубокий navy-текст ·
   ярко-синий accent/CTA · мягкие голубые декоры · крупная типографика ·
   тёмно-синий footer/trust. Только презентация: JS/API/сортировка не трогаются.
   ================================================================ */
:root{
  --kit-bg:#F4F7FB;            /* очень светлый холодный серо-голубой фон */
  --kit-bg-soft:#EEF3FA;       /* чуть глубже для декора */
  --kit-card:#FFFFFF;          /* белые карточки */
  --kit-card-soft:#F8FAFD;
  --kit-navy:#0B1F3F;          /* глубокий navy — primary text */
  --kit-navy-2:#1E3A5F;        /* тёмный slate-blue */
  --kit-slate:#5B6B84;         /* спокойный slate-blue secondary */
  --kit-slate-2:#8A99B3;       /* более слабый мета-текст */
  --kit-blue:#2563EB;          /* яркий современный синий accent/CTA */
  --kit-blue-dark:#1D4ED8;
  --kit-blue-soft:#EAF1FD;     /* мягкий голубой декор/бейджи */
  --kit-blue-line:#BFD4F8;
  --kit-border:#E3EAF4;        /* мягкий холодный border */
  --kit-warn:#B45309;          /* warning (только «требует подтверждения») */
  --kit-warn-bg:#FEF3E2;
  --kit-shadow:0 1px 2px rgba(11,31,63,.05), 0 8px 24px rgba(11,31,63,.06);
}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ background:var(--kit-bg); color:var(--kit-navy); }

/* ===== Header: больше воздуха, активный nav-синий, аккуратная корзина ===== */
.sf-hdr{ padding:20px 0 16px; border-bottom:1px solid var(--kit-border); }
.sf-logo-name{ color:var(--kit-navy); }
.sf-logo-360{ color:var(--kit-blue); background:var(--kit-blue-soft); }
.sf-nav-link{ color:var(--kit-slate); font-weight:500; }
.sf-nav-link:hover{ background:var(--kit-bg-soft); color:var(--kit-navy); }
.sf-nav-link.is-active,
a.sf-nav-link[aria-current="page"]{ color:var(--kit-blue); background:var(--kit-blue-soft); font-weight:600; }
.sf-nav-link.is-soon{ color:var(--kit-slate-2); }
.sf-cart{ border:1px solid var(--kit-blue-line); background:var(--kit-card); color:var(--kit-navy-2); border-radius:10px; box-shadow:0 1px 2px rgba(11,31,63,.04); }
.sf-cart:hover{ border-color:var(--kit-blue); background:var(--kit-blue-soft); color:var(--kit-blue-dark); }
.sf-cart .cart-count{ color:var(--kit-blue); background:var(--kit-blue-soft); border-radius:999px; padding:1px 7px; font-size:12px; }

/* ===== Hero: крупнее + мягкий automotive-декор (без картинок/assets) ===== */
.sf-hero{ position:relative; padding:56px 0 8px; }
.sf-hero::before,.sf-hero::after{
  content:''; position:absolute; border-radius:50%; pointer-events:none; z-index:0;
}
.sf-hero::before{ width:420px; height:420px; left:50%; top:-140px; transform:translateX(-52%); background:radial-gradient(circle, rgba(37,99,235,.10) 0%, rgba(37,99,235,0) 65%); }
.sf-hero::after{ width:300px; height:300px; left:50%; top:-40px; transform:translateX(58%); background:radial-gradient(circle, rgba(147,197,253,.16) 0%, rgba(147,197,253,0) 70%); }
.sf-hero .hero-name{ position:relative; z-index:1; font-size:44px; letter-spacing:-1.1px; color:var(--kit-navy); }
.sf-hero .hero-sub{ position:relative; z-index:1; font-size:18px; color:var(--kit-slate); margin-top:10px; }

/* ===== Search: белое поле, мягкий синий focus, синяя кнопка ===== */
.sf-search-row{ background:var(--kit-card); border:1px solid var(--kit-border); border-radius:16px; box-shadow:var(--kit-shadow); }
.sf-search-row:focus-within{ border-color:var(--kit-blue); box-shadow:0 0 0 4px rgba(37,99,235,.14); }
.sf-search-row .search-input{ color:var(--kit-navy); }
.sf-search-row .search-button{ background:var(--kit-blue); border-radius:12px; font-weight:600; }
.sf-search-row .search-button:hover{ background:var(--kit-blue-dark); }

/* ===== Secondary cards: единый стиль ===== */
.kit-services{ gap:16px; }
.service-card{ background:var(--kit-card); border:1px solid var(--kit-border); border-radius:14px; box-shadow:0 1px 2px rgba(11,31,63,.04); }
.service-card:hover{ border-color:var(--kit-blue); box-shadow:0 10px 28px rgba(37,99,235,.12); }
.service-card .service-title{ color:var(--kit-navy); font-size:18px; }
.service-card .service-desc{ color:var(--kit-slate); }
.service-card .service-cta{ color:var(--kit-blue); }
.service-card.is-soon{ cursor:default; }
.service-card.is-soon:hover{ border-color:var(--kit-border); box-shadow:none; transform:none; }
.service-card.is-soon .service-title{ color:var(--kit-slate); }
.service-card.is-soon .service-desc{ color:var(--kit-slate-2); }
.service-card.is-soon .service-cta{ color:var(--kit-slate-2); }

/* ===== Result cards: тот же язык, компактность сохранена (≤125px) ===== */
.oc{ background:var(--kit-card); border:1px solid var(--kit-border); border-radius:14px; box-shadow:0 1px 2px rgba(11,31,63,.04); padding:14px 16px; gap:0 24px; }
.oc:hover{ border-color:var(--kit-blue); box-shadow:0 6px 20px rgba(37,99,235,.10); }
.oc-name{ color:var(--kit-navy); font-size:15px; font-weight:650; }
.oc-meta{ color:var(--kit-slate-2); }
.oc-bn{ color:var(--kit-navy-2); }
.oc-badge{ color:var(--kit-blue-dark); background:var(--kit-blue-soft); }
.oc-art{ color:var(--kit-slate-2); }
.oc-price{ color:var(--kit-navy); font-size:22px; font-weight:800; letter-spacing:-0.4px; }
.oc-add{ background:var(--kit-blue); border-radius:10px; box-shadow:0 1px 2px rgba(37,99,235,.2); }
.oc-add:hover{ background:var(--kit-blue-dark); }

/* ===== Badges: единая спокойная система blue / neutral / warning ===== */
.oc-sn{ font-size:12px; font-weight:600; border-radius:999px; padding:3px 10px; }
.oc-sn.st-in{ color:var(--kit-blue-dark); background:var(--kit-blue-soft); }        /* В наличии у нас — blue */
.oc-sn.st-izh{ color:var(--kit-blue-dark); background:var(--kit-blue-soft); }      /* В наличии в Ижевске — blue */
.oc-sn.st-dlv{ color:var(--kit-slate); background:#EDF1F7; }                       /* С доставкой — neutral */
.oc-sn.st-warn{ color:var(--kit-warn); background:var(--kit-warn-bg); }            /* Требует подтверждения — warning */
.oc-term{ color:var(--kit-slate-2); }

/* ===== Filters: компактные pills ===== */
#offers-tools label.fc, .seg span{ background:var(--kit-card); border:1px solid var(--kit-border); color:var(--kit-slate); border-radius:999px; }
#offers-tools label.fc:has(input:checked), .seg span.o{ background:var(--kit-blue); border-color:var(--kit-blue); color:#fff; }

/* ===== Заголовки групп / product header ===== */
.product-card .card-title{ color:var(--kit-navy); font-size:18px; font-weight:700; }
.gh2{ color:var(--kit-navy-2); }

/* ===== Empty / Error / Loading: спокойный светлый фон, navy title, blue action ===== */
.sf-loading-title,.sf-error-title,.results-empty-title{ color:var(--kit-navy); }
.sf-loading-sub,.sf-error-sub,.results-empty-sub{ color:var(--kit-slate); }
.sf-error-btn,.sf-empty-btn{ background:var(--kit-blue); }
.sf-error-btn:hover,.sf-empty-btn:hover{ background:var(--kit-blue-dark); }
.sf-error-btn-ghost,.sf-empty-btn-ghost{ background:var(--kit-card); color:var(--kit-blue); border-color:var(--kit-blue-line); }
.sf-error-btn-ghost:hover,.sf-empty-btn-ghost:hover{ background:var(--kit-blue-soft); border-color:var(--kit-blue-line); }

/* ===== Footer / Trust: глубокий navy ===== */
.kit-ftr{ margin-top:56px; background:linear-gradient(180deg, #0D2344 0%, #0B1F3F 100%); color:#C7D3E6; border-radius:20px; padding:40px 40px 24px; }
.kit-ftr-inner{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start; }
.kit-ftr-brand{ max-width:340px; }
.kit-ftr-logo{ font-size:22px; font-weight:800; color:#fff; letter-spacing:-0.4px; }
.kit-ftr-360{ color:#60A5FA; }
.kit-ftr-about{ margin-top:10px; font-size:14px; line-height:1.55; color:#9FB2CC; }
.kit-ftr-adv{ display:flex; gap:14px 28px; flex-wrap:wrap; }
.kit-adv-item{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#E6EDF7; }
.kit-adv-item svg{ color:#60A5FA; }
.kit-adv-item.is-soon{ color:#7E90AC; }
.kit-adv-item.is-soon svg{ color:#5B6B84; }
.kit-ftr-copy{ margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#7E90AC; text-align:center; }
/* KITONE-PLATFORM-1B: юридическое название и контакты из tenant-конфига (рендерятся только если заданы) */
.kit-ftr-legal{ display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:center; margin-top:10px; font-size:12px; color:#93A6C0; }
.kit-ftr-legal a{ color:#93A6C0; text-decoration:underline; }
.kit-ftr-legal a:hover{ color:#E2E8F0; }

/* ===== Mobile: та же тема, без горизонтального переполнения ===== */
@media (max-width:1024px){
  .sf-hero::before{ width:280px; height:280px; top:-100px; transform:translateX(-55%); }
  .sf-hero::after{ width:200px; height:200px; top:-20px; transform:translateX(70%); }
}
@media (max-width:480px){
  .sf-hero::after{ display:none; }
  .sf-hero::before{ width:220px; height:220px; top:-60px; transform:translateX(-52%); }
}
@media (max-width:820px){
  .sf-hero{ padding:40px 0 6px; }
  .sf-hero .hero-name{ font-size:30px; }
  .sf-hero .hero-sub{ font-size:16px; }
  .sf-hdr{ padding:14px 0 12px; }
  .oc{ padding:12px 14px; }
  .kit-ftr{ padding:32px 20px 20px; border-radius:16px; }
  .kit-ftr-inner{ flex-direction:column; gap:24px; }
  .kit-ftr-adv{ gap:12px 20px; }
}

/* ================================================================
   MASTER VISUAL REFERENCE v1 (Phase 6.4) — авторитетный слой.
   Композиция по референсу: hero 2-колонки (текст+поиск | автомобиль),
   преимущества, 3 крупные карточки, navy trust-секция.
   Только презентация: JS/API/сортировка/freshness/корзина не трогаются.
   ================================================================ */
:root{
  --kit-bg:#F4F7FB;
  --kit-bg-soft:#EAF1FD;
  --kit-card:#FFFFFF;
  --kit-navy:#0B1F3F;
  --kit-navy-2:#1E3A5F;
  --kit-slate:#5B6B84;
  --kit-slate-2:#8A99B3;
  --kit-blue:#2563EB;
  --kit-blue-dark:#1D4ED8;
  --kit-blue-soft:#EAF1FD;
  --kit-blue-line:#BFD4F8;
  --kit-border:#E3EAF4;
  --kit-warn:#B45309;
  --kit-warn-bg:#FEF3E2;
  --kit-shadow:0 1px 2px rgba(11,31,63,.05), 0 10px 28px rgba(11,31,63,.07);
  --kit-radius:20px;
}

/* ===== HERO: 2-колоночный, левый текст + правый авто-визуал ===== */
.sf-hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
  max-width:1240px;
  margin:0 auto;
  padding:clamp(36px,5vw,72px) 0 20px;
  text-align:left;
}
.sf-hero .hero-name{
  font-size:clamp(34px,4vw,58px);
  font-weight:800;
  letter-spacing:-1.4px;
  line-height:1.05;
  color:var(--kit-navy);
  max-width:560px;
  margin:0;
}
.sf-hero .hero-sub{
  font-size:clamp(17px,1.5vw,21px);
  font-weight:500;
  color:var(--kit-slate);
  margin:16px 0 0;
  max-width:520px;
}
.hero-copy{ position:relative; z-index:1; }

/* Авто-визуал справа: автомобиль + мягкие голубые круги (декор) */
.hero-visual{
  position:relative;
  z-index:0;
  aspect-ratio:560/300;
  max-width:620px;
  width:100%;
  justify-self:end;
}
.hero-visual .hero-car{ position:relative; z-index:2; width:100%; height:auto; display:block; }
.hero-deco{ position:absolute; border-radius:50%; pointer-events:none; }
.hero-deco-1{ width:60%; aspect-ratio:1/1; right:-4%; top:-18%; background:radial-gradient(circle, rgba(37,99,235,.14) 0%, rgba(37,99,235,0) 68%); }
.hero-deco-2{ width:46%; aspect-ratio:1/1; left:-8%; bottom:-14%; background:radial-gradient(circle, rgba(147,197,253,.20) 0%, rgba(147,197,253,0) 70%); }

/* ===== SEARCH: крупный, иконка слева, синяя кнопка справа ===== */
.sf-search{ padding:4px 0 0; }
.sf-search-row{
  max-width:640px;
  margin:0 auto;
  padding:7px;
  border-radius:18px;
  box-shadow:var(--kit-shadow);
  background:var(--kit-card);
  border:1px solid var(--kit-border);
  align-items:center;
}
.sf-search-ic{ color:var(--kit-slate-2); margin:0 6px 0 12px; flex:0 0 auto; }
.sf-search-row .search-input{ padding:12px 10px; font-size:16px; font-weight:500; }
.sf-search-row .search-button{ padding:14px 30px; font-size:15px; border-radius:13px; }
.sf-search-row:focus-within{ border-color:var(--kit-blue); box-shadow:0 0 0 4px rgba(37,99,235,.14), var(--kit-shadow); }

/* На старте поиск встаёт под заголовок hero (левая колонка) */
body:not(.is-loading):not(.has-result):not(.has-error):not(.has-vin) .sf-search{ padding:6px 0 0; }
body:not(.is-loading):not(.has-result):not(.has-error):not(.has-vin) .sf-search-row{ margin-left:0; margin-right:auto; }

/* ===== Преимущества под поиском (3 горизонтально на desktop) ===== */
.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:14px 40px;
  max-width:1240px;
  margin:26px auto 0;
  padding:0 0 4px;
}
.ht-item{ display:flex; align-items:flex-start; gap:12px; }
.ht-item svg{ color:var(--kit-blue); margin-top:2px; flex:0 0 auto; }
.ht-txt{ display:flex; flex-direction:column; }
.ht-t{ font-size:15px; font-weight:700; color:var(--kit-navy); }
.ht-d{ font-size:13px; color:var(--kit-slate); margin-top:2px; }

/* ===== Service cards: 3 крупные карточки ===== */
.kit-services{
  max-width:1240px;
  margin:36px auto 0;
  gap:20px;
}
.service-card{
  position:relative;
  overflow:hidden;
  padding:30px 26px;
  border-radius:var(--kit-radius);
  border:1px solid var(--kit-border);
  background:var(--kit-card);
  box-shadow:0 1px 2px rgba(11,31,63,.04);
  gap:8px;
  min-height:220px;
}
.service-card:hover{ border-color:var(--kit-blue); box-shadow:0 14px 36px rgba(37,99,235,.14); transform:translateY(-3px); }
.service-icon{ color:var(--kit-blue); margin-bottom:6px; }
.service-icon svg{ width:34px; height:34px; }
.service-card .service-title{ font-size:clamp(19px,1.6vw,23px); font-weight:800; color:var(--kit-navy); letter-spacing:-0.3px; }
.service-card .service-desc{ font-size:15px; color:var(--kit-slate); margin-top:2px; }
.service-card .service-cta{ margin-top:auto; padding-top:14px; font-size:14px; font-weight:700; color:var(--kit-blue); }
.service-deco{ position:absolute; top:16px; right:16px; opacity:.85; pointer-events:none; }
.service-deco svg{ width:110px; height:auto; display:block; }
.service-card.is-soon:hover{ border-color:var(--kit-border); box-shadow:none; transform:none; }
.service-card.is-soon .service-title{ color:var(--kit-slate); }
.service-card.is-soon .service-desc{ color:var(--kit-slate-2); }
.service-card.is-soon .service-cta{ color:var(--kit-slate-2); }
.service-card.is-soon .service-deco{ opacity:.5; }

/* ===== NAVY TRUST SECTION: выразительный нижний блок ===== */
.kit-ftr{
  margin-top:52px;
  padding:52px 48px 28px;
  border-radius:24px;
  background:linear-gradient(180deg, #0E2750 0%, #0B1F3F 100%);
  color:#C7D3E6;
  position:relative;
  overflow:hidden;
}
.kit-ftr::before{ content:''; position:absolute; width:420px; height:420px; border-radius:50%; right:-120px; top:-180px; background:radial-gradient(circle, rgba(37,99,235,.22) 0%, rgba(37,99,235,0) 68%); pointer-events:none; }
.kit-ftr::after{ content:''; position:absolute; width:300px; height:300px; border-radius:50%; left:-80px; bottom:-140px; background:radial-gradient(circle, rgba(147,197,253,.14) 0%, rgba(147,197,253,0) 70%); pointer-events:none; }
.kit-ftr-inner{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:44px; align-items:start; }
.kit-ftr-brand{ max-width:420px; }
.kit-ftr-logo{ font-size:26px; font-weight:800; color:#fff; letter-spacing:-0.5px; }
.kit-ftr-360{ color:#60A5FA; }
.kit-ftr-about{ margin-top:14px; font-size:15px; line-height:1.6; color:#9FB2CC; max-width:380px; }
.kit-ftr-adv{ display:grid; grid-template-columns:1fr 1fr; gap:18px 32px; justify-items:start; }
.kit-adv-col{ display:flex; flex-direction:column; gap:18px; }
.kit-adv-item{ display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color:#E6EDF7; white-space:nowrap; }
.kit-adv-item svg{ color:#60A5FA; flex:0 0 auto; }
.kit-adv-item.is-soon{ color:#7E90AC; }
.kit-adv-item.is-soon svg{ color:#5B6B84; }
.kit-ftr-copy{ position:relative; z-index:1; margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.09); font-size:12px; color:#7E90AC; text-align:center; }

/* ===== Desktop grid width: широкая сетка сохранена ===== */
@media (max-width:1920px){ .sf-hero,.hero-trust,.kit-services{ max-width:1240px; } }

/* ===== Tablet ===== */
@media (max-width:1024px){
  .sf-hero{ grid-template-columns:1fr 0.9fr; gap:28px; padding:40px 0 16px; }
  .hero-visual{ max-width:460px; }
  .kit-ftr-inner{ grid-template-columns:1fr; gap:32px; }
  .kit-ftr-adv{ justify-items:start; }
}

/* ===== Mobile ===== */
@media (max-width:820px){
  .sf-hero{ grid-template-columns:1fr; gap:20px; padding:30px 0 6px; text-align:left; }
  .sf-hero .hero-name{ font-size:clamp(28px,8vw,34px); letter-spacing:-0.8px; }
  .sf-hero .hero-sub{ font-size:16px; margin-top:12px; }
  .hero-visual{ max-width:340px; justify-self:start; margin-top:6px; }
  body:not(.is-loading):not(.has-result):not(.has-error):not(.has-vin) .sf-search-row{ margin-left:0; margin-right:0; }
  .hero-trust{ flex-direction:column; gap:14px; margin-top:22px; }
  .kit-services{ flex-direction:column; margin-top:26px; gap:14px; }
  .service-card{ min-height:0; padding:24px 22px; }
  .service-deco{ display:none; }
  .kit-ftr{ padding:36px 24px 22px; border-radius:20px; margin-top:36px; }
  .kit-ftr-adv{ grid-template-columns:1fr; gap:14px; }
  .kit-adv-col{ gap:14px; }
}
@media (max-width:480px){
  .hero-visual{ max-width:280px; }
}

/* ================================================================
   CART MASTER (Slice C) — корзина в MASTER DESIGN.
   Только клиентская корзина; checkout/backend/API не тронуты.
   ================================================================ */
body.stage3-ui .kc-overlay{ background:rgba(11,31,63,.45); backdrop-filter:blur(2px); }
body.stage3-ui .kc-panel{ width:430px; max-width:94vw; background:var(--kit-card); box-shadow:-6px 0 34px rgba(11,31,63,.18); }
body.stage3-ui .kc-head{ padding:18px 20px; border-bottom:1px solid var(--kit-border); font-size:17px; font-weight:800; color:var(--kit-navy); }
body.stage3-ui .kc-head svg{ color:var(--kit-blue); vertical-align:-3px; margin-right:6px; }
body.stage3-ui .kc-close{ color:var(--kit-slate); border-radius:10px; padding:6px; display:inline-flex; align-items:center; justify-content:center; }
body.stage3-ui .kc-close:hover{ background:var(--kit-blue-soft); color:var(--kit-blue-dark); }
body.stage3-ui .kc-body{ padding:10px 16px 16px; }

/* Empty cart */
body.stage3-ui .kc-empty{ text-align:center; padding:56px 24px; color:var(--kit-slate); font-size:15px; }
body.stage3-ui .kc-empty-title{ font-size:20px; font-weight:800; color:var(--kit-navy); }
body.stage3-ui .kc-empty-sub{ font-size:14px; color:var(--kit-slate); margin:8px auto 22px; max-width:270px; line-height:1.5; }
body.stage3-ui .kc-empty-cta{ padding:12px 24px; border:none; border-radius:12px; background:var(--kit-blue); color:#fff; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 4px 14px rgba(37,99,235,.25); }
body.stage3-ui .kc-empty-cta:hover{ background:var(--kit-blue-dark); }

/* Items */
body.stage3-ui .kc-item{ display:flex; align-items:flex-start; gap:14px; padding:14px 4px; border-bottom:1px solid var(--kit-border); }
body.stage3-ui .kc-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
body.stage3-ui .kc-name{ font-size:15px; font-weight:700; color:var(--kit-navy); line-height:1.35; word-break:break-word; }
body.stage3-ui .kc-sub{ font-size:13px; color:var(--kit-slate); margin-top:2px; word-break:break-word; }
body.stage3-ui .kc-status{ align-self:flex-start; margin-top:8px; font-size:12px; font-weight:600; color:var(--kit-blue-dark); background:var(--kit-blue-soft); border-radius:999px; padding:3px 10px; }
body.stage3-ui .kc-dlv{ font-size:12px; color:var(--kit-slate); margin-top:6px; }
body.stage3-ui .kc-stale{ align-self:flex-start; margin-top:8px; font-size:12px; font-weight:600; color:var(--kit-warn); background:var(--kit-warn-bg); border-radius:999px; padding:3px 10px; }
body.stage3-ui .kc-stale-date{ font-size:12px; color:var(--kit-slate-2); margin-top:4px; }
body.stage3-ui .kc-side{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex:0 0 auto; }
body.stage3-ui .kc-price{ font-size:14px; font-weight:700; color:var(--kit-navy); white-space:nowrap; }
body.stage3-ui .kc-qty{ display:flex; align-items:center; gap:6px; }
body.stage3-ui .kc-qbtn{ width:40px; height:40px; border:1px solid var(--kit-border); border-radius:11px; background:var(--kit-card); color:var(--kit-navy); font-size:18px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
body.stage3-ui .kc-qbtn:hover:not(:disabled){ border-color:var(--kit-blue); color:var(--kit-blue); background:var(--kit-blue-soft); }
body.stage3-ui .kc-qbtn:disabled{ opacity:.4; cursor:not-allowed; }
body.stage3-ui .kc-qv{ min-width:26px; text-align:center; font-size:15px; font-weight:700; color:var(--kit-navy); }
body.stage3-ui .kc-sum{ font-size:15px; font-weight:800; color:var(--kit-navy); white-space:nowrap; }
body.stage3-ui .kc-del{ width:34px; height:34px; border:none; background:none; color:var(--kit-slate-2); border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
body.stage3-ui .kc-del:hover{ color:var(--kit-warn); background:var(--kit-warn-bg); }
body.stage3-ui .kc-del:disabled{ opacity:.4; cursor:not-allowed; }
body.stage3-ui .kc-item.is-busy{ opacity:.55; pointer-events:none; }

/* Foot: итог + действия */
body.stage3-ui .kc-foot{ padding:16px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--kit-border); }
body.stage3-ui .kc-total{ font-size:18px; font-weight:800; color:var(--kit-navy); text-align:right; margin-bottom:12px; }
body.stage3-ui .kc-clear{ width:100%; padding:12px; border:1px solid var(--kit-border); border-radius:12px; background:var(--kit-card); color:var(--kit-slate); font-size:13px; font-weight:600; cursor:pointer; }
body.stage3-ui .kc-clear:hover:not(:disabled){ background:var(--kit-bg-soft); color:var(--kit-warn); border-color:var(--kit-warn); }
body.stage3-ui .kc-clear:disabled{ opacity:.5; cursor:not-allowed; }
body.stage3-ui .kc-checkout{ width:100%; margin-top:10px; padding:15px; border:none; border-radius:13px; background:var(--kit-blue); color:#fff; font-size:15px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 6px 18px rgba(37,99,235,.28); }
body.stage3-ui .kc-checkout:hover:not(:disabled){ background:var(--kit-blue-dark); }
body.stage3-ui .kc-checkout:disabled{ opacity:.5; cursor:not-allowed; }

/* Toast — navy master */
body.stage3-ui .kc-toast{ background:var(--kit-navy); border-radius:12px; }
body.stage3-ui .kc-toast.is-error{ background:#B91C1C; }

/* ─── Mobile: bottom-sheet (390 и ниже) ──────────────────── */
@media (max-width:640px){
  body.stage3-ui .kc-panel{
    top:auto; bottom:0; left:0; right:0;
    width:100%; max-width:100vw; height:88vh;
    border-radius:22px 22px 0 0;
    box-shadow:0 -10px 44px rgba(11,31,63,.22);
    transform:translateY(100%);
  }
  body.stage3-ui .kc-panel.open{ transform:translateY(0); }
  body.stage3-ui .kc-head{ padding:16px 18px 14px; }
  body.stage3-ui .kc-qbtn{ width:42px; height:42px; }
  body.stage3-ui .kc-item{ padding:12px 2px; }
}

/* ================================================================
   CHECKOUT REQUEST (Slice D) — заявка клиента в MASTER DESIGN.
   Checkout-логика/контракт не менялись; только UI + wording.
   ================================================================ */
body.stage3-ui .kc-checkout-panel{ width:430px; max-width:94vw; background:var(--kit-card); box-shadow:-6px 0 34px rgba(11,31,63,.18); }
body.stage3-ui .kc-checkout-head{ padding:18px 20px; border-bottom:1px solid var(--kit-border); font-size:17px; font-weight:800; color:var(--kit-navy); }
body.stage3-ui .kc-checkout-head svg{ color:var(--kit-blue); vertical-align:-3px; margin-right:6px; }
body.stage3-ui .kc-checkout-body{ padding:12px 20px 18px; max-height:calc(100vh - 220px); overflow-y:auto; }
body.stage3-ui .kc-checkout-total{ font-size:17px; font-weight:800; color:var(--kit-navy); text-align:right; margin:6px 0 16px; }
body.stage3-ui .kc-co-item{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--kit-border); font-size:13px; }
body.stage3-ui .co-art{ color:var(--kit-navy); font-weight:600; }
body.stage3-ui .co-sup{ color:var(--kit-slate); margin-top:2px; }
body.stage3-ui .co-stale{ color:var(--kit-warn); font-size:12px; margin-top:3px; }
body.stage3-ui .co-sum{ color:var(--kit-navy); font-weight:700; white-space:nowrap; }

/* Поля формы */
body.stage3-ui .kc-checkout-fields{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
body.stage3-ui .kc-field{ display:flex; flex-direction:column; gap:6px; }
body.stage3-ui .kc-field > span{ font-size:13px; font-weight:600; color:var(--kit-navy); }
body.stage3-ui .kc-field em{ color:var(--kit-blue); font-style:normal; }
body.stage3-ui .kc-field input{ padding:14px 14px; border:1px solid var(--kit-border); border-radius:12px; font-size:15px; color:var(--kit-navy); background:var(--kit-card); outline:none; transition:border-color .15s, box-shadow .15s; min-height:48px; }
body.stage3-ui .kc-field input:focus{ border-color:var(--kit-blue); box-shadow:0 0 0 3px rgba(37,99,235,.14); }
body.stage3-ui .kc-field input::placeholder{ color:var(--kit-slate-2); }
body.stage3-ui .kc-field-error{ font-size:12px; color:var(--kit-warn); font-weight:600; }
body.stage3-ui .kc-checkout-error{ margin-top:12px; padding:11px 14px; background:var(--kit-warn-bg); color:var(--kit-warn); border-radius:10px; font-size:13px; font-weight:600; }
body.stage3-ui .kc-checkout-foot{ padding:16px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--kit-border); }
body.stage3-ui .kc-checkout-send{ width:100%; padding:15px; border:none; border-radius:13px; background:var(--kit-blue); color:#fff; font-size:15px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 6px 18px rgba(37,99,235,.28); }
body.stage3-ui .kc-checkout-send:hover:not(:disabled){ background:var(--kit-blue-dark); }
body.stage3-ui .kc-checkout-send:disabled{ opacity:.6; cursor:progress; }

/* Success-экран */
body.stage3-ui .kc-success-panel{ text-align:center; }
body.stage3-ui .kc-success-body{ display:flex; flex-direction:column; align-items:center; padding:48px 24px 28px; }
body.stage3-ui .kc-success-icon{ width:92px; height:92px; border-radius:50%; background:var(--kit-blue-soft); color:var(--kit-blue); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
body.stage3-ui .kc-success-title{ font-size:22px; font-weight:800; color:var(--kit-navy); }
body.stage3-ui .kc-success-sub{ font-size:15px; color:var(--kit-slate); line-height:1.5; margin-top:10px; max-width:300px; }
body.stage3-ui .kc-success-hint{ font-size:13px; color:var(--kit-slate-2); margin-top:16px; }

/* Mobile: bottom-sheet для checkout/success */
@media (max-width:640px){
  body.stage3-ui .kc-checkout-panel{
    top:auto; bottom:0; left:0; right:0;
    width:100%; max-width:100vw; height:92vh;
    border-radius:22px 22px 0 0;
    box-shadow:0 -10px 44px rgba(11,31,63,.22);
    transform:translateY(100%);
  }
  body.stage3-ui .kc-checkout-panel.open{ transform:translateY(0); }
  body.stage3-ui .kc-checkout-body{ max-height:none; }
  body.stage3-ui .kc-field input{ min-height:48px; font-size:16px; }
}

/* ================================================================
   KITONE 360° — UI-FIELDS-1 (единый стиль полей/форм/пустых состояний)
   Финальный блок: подключается последним, унифицирует поля, focus/error/
   disabled-состояния, пустые состояния корзины и VIN, форму заявки.
   ================================================================ */
:root{
  --kit-f-h:52px;          /* desktop: высота полей */
  --kit-f-r:14px;          /* единый радиус полей */
  --kit-f-bw:1px;
  --kit-f-border:#C9D4E3;  /* единая толщина/цвет границы полей */
  --kit-f-pad:0 14px;
  --kit-f-fs:16px;
  --kit-ph:#8A97A8;        /* единый цвет placeholder (читаемый) */
  --kit-focus-bd:#2563EB;
  --kit-focus-ring:0 0 0 3px rgba(37,99,235,.22);
  --kit-err:#DC2626;
  --kit-err-ring:0 0 0 3px rgba(220,38,38,.12);
}
/* нестандартная чёрная браузерная рамка — убираем везде, где есть focus-ring */
.sf-search-row .search-input:focus,
body.stage3-ui .kc-field input:focus,
body.stage3-ui .kc-empty-cta:focus{ outline:none; }

/* ── ГЛАВНЫЙ ПОИСК: единый компонент input+кнопка ─────────── */
.sf-search-row{ height:56px; padding:2px; border-radius:16px; align-items:stretch; }
.sf-search-row .search-input{ border:none; background:transparent; flex:1 1 auto;
  height:auto; min-width:0; padding:0 8px 0 10px; font-size:16px; font-weight:500; color:var(--kit-navy,#0F172A); }
.sf-search-row .search-input::placeholder{ color:var(--kit-ph); font-weight:400; }
.sf-search-row .search-button{ height:52px; align-self:center; border-radius:14px;
  padding:0 26px; font-size:15px; font-weight:600; flex:0 0 auto; }
.sf-search-ic{ margin:0 2px 0 12px; }
.sf-search-row.kit-err{ border-color:var(--kit-err); box-shadow:var(--kit-err-ring); }
.kit-search-err{ display:none; color:var(--kit-err); font-size:13.5px; font-weight:500;
  margin:8px 2px 0; }
.kit-search-err.on{ display:block; }
/* подсказка-пример под полем в режиме VIN */
.kit-vin-hint{ display:none; color:var(--kit-ph); font-size:13px; margin:8px 2px 0; }
body.has-vin .kit-vin-hint{ display:block; }

/* ── ПОЛЯ ФОРМЫ ЗАЯВКИ (карзина/чек-аут) ─────────────────── */
body.stage3-ui .kc-field input{ height:var(--kit-f-h); min-height:var(--kit-f-h);
  border:var(--kit-f-bw) solid var(--kit-f-border); border-radius:var(--kit-f-r);
  padding:var(--kit-f-pad); font-size:16px; color:var(--kit-navy,#0F172A); background:#fff; }
body.stage3-ui .kc-field input::placeholder{ color:var(--kit-ph); }
body.stage3-ui .kc-field input:focus{ outline:none; border-color:var(--kit-focus-bd);
  box-shadow:var(--kit-focus-ring); }
body.stage3-ui .kc-field input:disabled{ background:#F1F5F9; color:#64748B; cursor:not-allowed; }
body.stage3-ui .kc-field{ font-size:14px; font-weight:600; color:var(--kit-navy,#0F172A); }
body.stage3-ui .kc-field em{ color:var(--kit-err); font-style:normal; }
body.stage3-ui .kc-field-error{ color:var(--kit-err); font-size:12.5px; font-weight:500; }
/* нижние кнопки чек-аута и корзины — единые ширина/высота/радиус */
body.stage3-ui .kc-checkout-send{ height:var(--kit-f-h); border-radius:var(--kit-f-r); font-size:15px; }
body.stage3-ui .kc-clear, body.stage3-ui .kc-checkout{ height:var(--kit-f-h);
  border-radius:var(--kit-f-r); font-size:15px; font-weight:600; }
/* disabled-кнопки: читаемые, но явно неактивные */
body.stage3-ui .kc-checkout:disabled, body.stage3-ui .kc-clear:disabled,
body.stage3-ui .kc-checkout-send:disabled{ opacity:.55; cursor:not-allowed; filter:saturate(.4); }

/* ── КОРЗИНА: пустое состояние компактнее ────────────────── */
body.stage3-ui .kc-empty{ padding:28px 20px; gap:6px; }
body.stage3-ui .kc-empty-title{ font-size:18px; margin:0; }
body.stage3-ui .kc-empty-sub{ margin:0; font-size:14px; }

/* ── ВКЛАДКИ VIN: единый вид; активная синяя; disabled «Скоро» ── */
.vin-cat-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.vin-cat-tab{ font-size:13.5px; font-weight:600; color:#475569; background:#F1F5F9;
  border:1px solid #E2E8F0; border-radius:999px; padding:8px 16px; cursor:pointer; transition:all .15s; }
.vin-cat-tab:hover{ background:#EFF6FF; color:#1D4ED8; border-color:#BFDBFE; }
.vin-cat-tab.active{ background:var(--kit-blue,#2563EB); color:#fff; border-color:var(--kit-blue,#2563EB); }
.vin-cat-tab.disabled{ opacity:.6; cursor:not-allowed; background:#F1F5F9; color:#94A3B8;
  border-color:#E2E8F0; pointer-events:none; }
.vin-cat-tab .tab-soon{ font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:#94A3B8; margin-left:6px; }

/* ── VIN: компактное пустое состояние (до ввода VIN) ─────── */
.vin-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:34px 20px; gap:6px; color:var(--kit-ph,#8A97A8); }
.vin-empty .vin-empty-ic{ color:var(--kit-blue,#2563EB); opacity:.7; margin-bottom:2px; }
.vin-empty .vin-empty-title{ font-size:17px; font-weight:700; color:var(--kit-navy,#0F172A); }
.vin-empty .vin-empty-sub{ font-size:14px; max-width:340px; line-height:1.45; }

/* ── VIN: «Не знаете VIN?» — компактная инфо-карточка (не поле) ── */
.vin-manual{ display:inline-flex; align-items:center; gap:10px; width:auto;
  margin-top:14px; padding:12px 16px; background:#F8FAFC; border:1px solid #E2E8F0;
  border-radius:14px; font-size:13.5px; color:#64748B; text-align:left; }
.vin-manual-soon{ color:#94A3B8; font-weight:600; white-space:nowrap; }

/* ── МОБИЛЬНЫЕ (<=640): поле не меньше 48; поиск вертикально ── */
@media (max-width:640px){
  :root{ --kit-f-h:50px; }
  .sf-search-row{ height:auto; padding:8px; flex-direction:column; gap:8px; border-radius:16px; }
  .sf-search-row .search-input{ height:48px; min-height:48px; padding:0 12px; border:1px solid var(--kit-f-border);
    border-radius:14px; background:#fff; font-size:16px; width:100%; }
  .sf-search-row .search-input:focus{ border-color:var(--kit-focus-bd); box-shadow:var(--kit-focus-ring); }
  .sf-search-row .search-button{ width:100%; height:48px; padding:0; font-size:16px; }
  .sf-search-ic{ display:none; }
  body.stage3-ui .kc-field input{ font-size:16px; }
  body.stage3-ui .kc-checkout-send{ font-size:16px; }
}
@media (max-width:390px){
  .sf-search-row{ border-radius:14px; }
}

/* ══ UI-FIELDS-1.1: начальное состояние экрана «Каталог VIN» ══
   До ввода/декода VIN не показываем: пустую карточку авто, crumb
   «Результаты поиска» и «Вернуться к поиску». Остаётся одно компактное
   пустое состояние (.vin-empty) + вкладки + карточка «Ручной выбор».
   После успешного декода (body без .vin-no-car) всё возвращается штатно. */
.vin-car[hidden]{ display:none !important; }          /* native hidden ломался display:flex */
body.has-vin.vin-no-car .breadcrumbs{ display:none !important; }
body.has-vin.vin-no-car .vin-back{ display:none !important; }
body.has-vin.vin-no-car .vin-cat-tabs{ margin-bottom:6px; }
.vin-empty{ padding:26px 16px 30px; }                  /* компактнее, меньше вертикальных пустот */

/* ══ UI-FIELDS-1.2: поиск в общей desktop-колонке с заголовком/карточками ══
   На широких desktop (>1240 контента) .sf-search растягивался на всю ширину
   .app, а его row был прижат к левому краю страницы — левее заголовка hero
   и карточек (которые живут в центрированной колонке 1240). Привязываем
   поисковый блок к той же колонке-сетке, что контент под ним.
   Главная (старт): колонка 1240 (как .sf-hero/.hero-trust/.kit-services);
   row слева колонки -> левый край совпадает с заголовком и карточками.
   Каталог VIN: колонка каталога 900 (как .vin-wrap); row слева колонки.
   Размеры поля/кнопки/focus/error и логика поиска не меняются. */
body:not(.is-loading):not(.has-result):not(.has-error):not(.has-vin) .sf-search{
  max-width:1240px; margin-left:auto; margin-right:auto;
}
body.has-vin .sf-search{
  max-width:900px; margin-left:auto; margin-right:auto;
}
body.has-vin .sf-search-row{ margin-left:0; margin-right:auto; }

/* KITONE-PLATFORM-1C.2.2A: отметка предварительного наличия (файловый партнёр,
   требующий подтверждения). Нейтральный информационный вид — не ошибка. */
.oc-avail {
  font-size: 12px; line-height: 1.3; color: #475569;
  background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 6px;
  padding: 2px 6px; white-space: normal; max-width: 100%;
}
.oc-avail-term { font-size: 11px; line-height: 1.3; color: #64748B; white-space: normal; max-width: 100%; }
@media (max-width: 480px) {
  .oc-avail { font-size: 11px; }
  .oc-avail-term { font-size: 10px; }
}