/* ─────────────────────────────────────────────────────────
   ЯДРО ВИТРИНЫ. Словарь, из которого собираются все страницы:
   токены, сброс, типографика, кнопки, поля, карточка товара.

   Здесь не должно быть ничего, что относится к одной странице.
   Правило простое: если селектор встречается только на одной
   странице — ему место в её файле (catalog.css, part.css, home.css).

   Порядок подключения задан в templates/_base.html:
       core.css → chrome.css → файл страницы
   Поэтому страница может уточнять ядро, а ядро о страницах не знает.

   Оформление — в духе магазина-маркетплейса: светло-серая подложка,
   белые блоки, оранжевый акцент, мелкие скругления, почти без теней.
   Тёмный подвал. Заголовки секций — лёгкие, с одним словом жирным.
   ───────────────────────────────────────────────────────── */

/* ── Шрифт ─────────────────────────────────────────────────
   Montserrat — геометрический гротеск с кириллицей. Poppins, на который
   похож стиль, кириллицы не имеет: русский текст шёл бы запасным шрифтом
   вперемешку с латиницей.
   Файлы лежат у нас (static/fonts, лицензия OFL — Montserrat-OFL.txt):
   без запроса к чужому серверу. Один файл на набор символов; браузер
   качает только те, чьи символы есть на странице. Шрифт переменный —
   файл покрывает все начертания от 400 до 700. ₽ — в наборе latin-ext */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/montserrat-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/montserrat-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Палитра */
  --bg:        #E9EAED;   /* подложка страницы */
  --surface:   #FFFFFF;   /* блоки и карточки */
  --surface-2: #F5F5F5;   /* подложка внутри блока */
  --topbar:    #F2F2F4;   /* верхняя полоса шапки */
  --line:      #EDEDED;
  --line-2:    #DCDDE0;
  --line-3:    #E3E4E7;   /* разделители верхней полосы */
  --ink:       #333333;
  --muted:     #6E6E6E;
  --dim:       #8D8D8D;
  --accent:    #F54F0C;   /* оранжевый: действие, цена, активный пункт */
  --accent-dk: #DC470A;
  --accent-bg: #FEEDE6;
  --dark:      #444444;   /* вторая кнопка, бейджи */
  --dark-dk:   #222222;
  --foot:      #121B23;   /* подвал */
  --foot-text: #B3B3B3;
  --ok:        #1E8E5A;
  --warn:      #C7700A;
  --err:       #D2341F;

  /* Шрифты: один гротеск на всё, моно — только на коды (VIN, артикул) */
  --display: "Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:    "Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:    ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  --t-xs: 12px; --t-sm: 13.5px; --t-md: 15px;
  --t-lg: 18px; --t-xl: 24px;  --t-2xl: 32px; --t-3xl: 40px;

  --gap: 20px;
  --r:   4px;
  --r-pill: 30px;
  --shadow: 0 6px 22px rgba(0,0,0,.08);
}

/* ── Сброс ─────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:var(--t-md);line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* hidden должен прятать всегда. Без этого правило вида .x{display:flex}
   перебивает атрибут: так в шапке висел счётчик корзины «0» */
[hidden]{display:none!important}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Ничто не шире экрана: горизонтальная прокрутка на телефоне
   ломает всё — шапку обрезает, секции разъезжаются */
html,body{max-width:100%;overflow-x:clip}

/* ── Ширина страницы ───────────────────────────────────── */
.wrap{width:100%;max-width:min(1120px, 100%);margin:0 auto;padding:0 16px}

/* ── Типографика ───────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);font-weight:600;
  letter-spacing:-.01em;line-height:1.2;margin:0}
h1{font-size:var(--t-3xl);letter-spacing:-.02em}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-lg)}
.eyebrow{font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lead{font-size:var(--t-lg);color:var(--muted);max-width:56ch;line-height:1.55}
.hint{font-size:var(--t-sm);color:var(--muted)}
/* Подпись под заголовком или блоком: абзацный отступ браузера здесь
   всегда лишний, из-за него в разметке заводились правки на месте */
p.hint{margin:4px 0 0}

/* Заголовок секции: лёгкий, одно слово жирным — «Свежие <b>поступления</b>».
   Справа ссылка на всё, под строкой тонкая черта, а под самим
   заголовком — оранжевый отрезок: видно, к чему относится черта */
.sec-head{display:flex;align-items:flex-end;gap:16px;margin:0 0 22px;
  border-bottom:1px solid var(--line-2)}
.sec-head h2{font-weight:400;font-size:var(--t-xl);padding-bottom:12px;
  margin-bottom:-1px;border-bottom:2px solid var(--accent)}
.sec-head h2 b{font-weight:600}
.sec-head a{margin-left:auto;padding-bottom:12px;font-size:var(--t-sm);
  color:var(--muted);white-space:nowrap;transition:color .13s}
.sec-head a::after{content:" →"}
.sec-head a:hover{color:var(--accent)}

/* Хлебные крошки над карточкой детали и машины */
.crumbs{font-size:var(--t-sm);color:var(--muted);padding:18px 0 0}
.crumbs a:hover{color:var(--accent)}

/* ── Кнопки ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-size:14px;font-weight:600;line-height:1.2;
  padding:13px 24px;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk)}
.btn-primary:disabled{background:var(--line-2);color:var(--dim);cursor:not-allowed}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:var(--dark-dk)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:9px 16px;font-size:var(--t-sm)}

/* Ссылка, которая на самом деле кнопка: внутри текста абзаца */
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent);
  text-decoration:underline;cursor:pointer}

/* ── Поля ──────────────────────────────────────────────── */
.field{width:100%;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r);color:var(--ink);padding:13px 15px;
  font-family:var(--body);font-size:var(--t-md);outline:none;
  transition:border-color .13s,box-shadow .13s}
.field::placeholder{color:var(--dim)}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,79,12,.12)}
.field-code{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;
  font-size:var(--t-lg)}
label{display:block;font-size:var(--t-xs);font-weight:500;color:var(--muted);
  margin:0 0 6px;letter-spacing:.02em}

/* Моноширинный шрифт с разрядкой не влезает в 360 px */
@media(max-width:560px){
  .field-code{font-size:16px;letter-spacing:.06em}
}

/* ── Первый экран ──────────────────────────────────────── */
/* Белый блок на серой подложке, а не полоса во всю ширину: так под
   шапкой сразу видна подложка страницы, и шапка в самом верху с ней
   сливается. Края блока совпадают с колонкой контента ниже */
.hero{padding:26px 0 0}
.hero > .wrap{background:var(--surface);border-radius:var(--r);
  padding:40px 44px;max-width:min(1088px, calc(100% - 32px))}
@media(max-width:640px){.hero > .wrap{padding:26px 20px}}

.vinbar{display:flex;gap:10px;max-width:min(620px, 100%)}
.vinbar .field{flex:1;width:100%;min-width:0}
.vinbar .field.bad{border-color:var(--err)}
@media(max-width:560px){
  .vinbar{flex-direction:column}
  .vinbar .btn{width:100%}
}

/* ── Карточка товара ───────────────────────────────────── */
/* Одна и та же плитка в каталоге и в свежих поступлениях.
   Белая на сером, без рамки; при наведении — мягкая тень и оранжевое
   название. Не прыгает вверх: в плотной сетке это рябит */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));
  gap:var(--gap);grid-auto-rows:1fr}

.tag-card{height:100%;background:var(--surface);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:box-shadow .2s}
.tag-card:hover{box-shadow:var(--shadow)}
.tag-card:hover .name{color:var(--accent)}

/* Квадратный кадр через padding-top, а не aspect-ratio: приём старый,
   зато работает везде, а вертикальные снимки с телефона перестают
   вытягивать сетку */
.tag-card .shot{position:relative;height:0;padding-top:100%;overflow:hidden;
  background:var(--surface-2)}
.tag-card .shot img,
.tag-card .shot .none{position:absolute;inset:0;width:100%;height:100%}
.tag-card .shot img{object-fit:cover;transition:transform .35s ease}
.tag-card:hover .shot img{transform:scale(1.04)}
.tag-card .shot .none{display:flex;align-items:center;justify-content:center;
  color:var(--dim);font-size:var(--t-sm)}

/* Состояние — бейдж в углу снимка, как скидка на витрине магазина.
   «Класс A» читается без легенды, одна буква — нет */
.grade{position:absolute;left:10px;top:10px;z-index:3;
  font-size:11px;font-weight:600;line-height:1;letter-spacing:.02em;
  padding:6px 8px;border-radius:3px;background:var(--dark);color:#fff}
.grade::before{content:"Класс "}
.grade[data-g="A"]{background:var(--ok)}
.grade[data-g="C"],.grade[data-g="D"]{background:var(--warn)}

.tag-card .body{padding:14px 16px 16px;display:flex;flex-direction:column;
  gap:5px;flex:1}
.tag-card .sku{font-family:var(--mono);font-size:11px;color:var(--dim);
  letter-spacing:.04em}
.tag-card .name{font-size:var(--t-md);font-weight:500;line-height:1.35;
  transition:color .15s}
.tag-card .fit{font-size:var(--t-sm);color:var(--muted)}
.tag-card .price{margin-top:auto;padding-top:10px;font-size:var(--t-lg);
  font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.tag-card .price small{display:block;font-size:var(--t-xs);font-weight:400;
  color:var(--dim)}

/* ── Метки ─────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);
  padding:4px 10px;border-radius:3px;background:var(--surface-2);
  color:var(--muted);border:1px solid var(--line)}
.chip-ok{background:#E7F4ED;color:var(--ok);border-color:#C3E3D2}
.chip-warn{background:#FCF1E3;color:var(--warn);border-color:#F1DAB8}
.chip-accent{background:var(--accent-bg);color:var(--accent-dk);border-color:#FBD3C2}

/* ── Панели и состояния ────────────────────────────────── */
.panel{background:var(--surface);border-radius:var(--r);padding:22px 24px}
.notice{border-radius:var(--r);padding:15px 18px;font-size:var(--t-sm);line-height:1.55}
.notice h3{margin:0 0 4px;font-size:var(--t-md)}
/* Сообщение вторым блоком подряд — например предупреждение про
   комплектацию под разобранным VIN */
.notice + .notice,
.panel + .notice{margin-top:12px}
.notice-accent{background:var(--accent-bg);border:1px solid #FBD3C2}
.notice-warn{background:#FCF1E3;border:1px solid #F1DAB8;color:#7A4708}
.empty{background:var(--surface);border-radius:var(--r);
  padding:48px 28px;text-align:center}
.empty h3{margin-bottom:8px}
.empty p{margin:0;color:var(--muted);font-size:var(--t-sm)}
.empty p + p{margin-top:12px}
/* Пустая выдача занимает всю ширину сетки, а не одну ячейку */
.grid > .empty{grid-column:1/-1}

/* ── Узкий экран ───────────────────────────────────────── */
@media(max-width:640px){
  :root{--t-3xl:28px;--t-2xl:24px;--t-xl:20px;--gap:12px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
  .sec-head{margin-bottom:16px}
}