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

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

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

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

/* ── Шрифт ─────────────────────────────────────────────────
   Montserrat — геометрический гротеск с кириллицей. Poppins, на который
   похож стиль, кириллицы не имеет: русский текст шёл бы запасным шрифтом
   вперемешку с латиницей.
   Файлы лежат у нас (static/fonts, лицензия OFL — Montserrat-OFL.txt):
   без запроса к чужому серверу. Один файл на набор символов; браузер
   качает только те, чьи символы есть на странице. Шрифт переменный —
   файл покрывает все начертания от 400 до 700 */
@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}

/* Знак рубля лежит в наборе latin-ext: 70 КБ скачивалось ради одного
   символа на каждой странице с ценами. Вырезали его в отдельный файл
   (3,6 КБ, ось насыщенности сохранена). Объявлен последним — по
   правилам CSS для U+20BD берётся именно он, а latin-ext подключается
   только если на странице действительно есть его буквы */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/montserrat-rub.woff2") format("woff2");
  unicode-range:U+20BD}

: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;

  /* Зазор между колонками и плитками. 30 — как у образца: там колонки
     ряда разведены полями по 15 с каждой стороны */
  --gap: 30px;
  /* Скругления. Два размера на всё: 4 px — поля, блоки, поиск;
     «пилюля» — действия (кнопки, метки-переключатели). Третий,
     мелкий, только для бейджей поверх снимка */
  --r:   4px;
  --r-xs: 3px;
  --r-pill: 30px;
  /* Колонка контента. 1320 внешних при поле 15 — внутри ровно 1290,
     столько же, сколько у образца: по 320 на плитку товара */
  --wrap: 1320px;
  --wrap-pad: 15px;
  --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(var(--wrap), 100%);margin:0 auto;
  padding:0 var(--wrap-pad)}

/* ── Типографика ───────────────────────────────────────── */
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)}

/* ── Кнопки ────────────────────────────────────────────── */
/* Кнопка — это действие: «в корзину», «отправить», «подобрать».
   Форма у всех одна — «пилюля». Поле ввода и поиск — не действие,
   у них скругление --r: так по одному взгляду видно, куда нажимать,
   а куда писать. Единственное исключение — кнопка внутри строки
   поиска: она приклеена к полю и повторяет его угол (см. .sbar) */
.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 28px;border-radius:var(--r-pill);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 20px;font-size:var(--t-sm)}

/* ── Строка поиска ─────────────────────────────────────── */
/* Одна на всю витрину: шапка, каталог, подбор по VIN. Слитная
   группа «выбор + поле + кнопка» — как в магазинных шаблонах:
   скругление только по внешним углам, внутренние рамки стыкуются.
   Раньше поиск в шапке был «таблеткой» с круглой кнопкой, а на
   странице каталога — прямоугольным: два разных поиска в одном
   магазине. Теперь размер задаётся одной переменной --sbar-h. */
.sbar{display:flex;align-items:stretch;min-width:0;--sbar-h:46px}
.sbar > *{height:var(--sbar-h);border-radius:0;flex:0 0 auto}
/* Соседние рамки накладываются, а не удваиваются */
.sbar > * + *{margin-left:-1px}
.sbar > :first-child{border-top-left-radius:var(--r);border-bottom-left-radius:var(--r)}
.sbar > :last-child{border-top-right-radius:var(--r);border-bottom-right-radius:var(--r)}
.sbar .field{flex:1 1 auto;min-width:0;padding:0 20px}
/* Подсветка фокуса не должна уходить под соседа */
.sbar .field:focus{position:relative;z-index:1}
.sbar .btn{padding:0 16px;font-weight:500;border-color:transparent}
/* Системный крестик очистки у type=search в стиль не попадает */
.sbar input::-webkit-search-cancel-button{-webkit-appearance:none}
@media(max-width:560px){
  .sbar{--sbar-h:44px}
  .sbar .btn{padding:0 16px}
  .sbar .btn span{display:none}
}

/* Ссылка, которая на самом деле кнопка: внутри текста абзаца */
.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)}
/* Ошибка у поля — из static/js/validate.js: рамка и подпись под полем */
.field.is-bad,.field.is-bad:focus{border-color:var(--err);
  box-shadow:0 0 0 3px rgba(210,52,31,.12)}
.fld-err{margin:6px 0 0;color:var(--err);font-size:var(--t-sm);line-height:1.35}
.fld-err[hidden]{display:none}
.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(calc(var(--wrap) - var(--wrap-pad) * 2),
                calc(100% - var(--wrap-pad) * 2))}
@media(max-width:640px){.hero > .wrap{padding:26px 20px}}

.vinbar{max-width:min(620px, 100%);--sbar-h:52px}
.vinbar .field.bad{border-color:var(--err);position:relative;z-index:1}
@media(max-width:560px){.vinbar{--sbar-h:46px}}

/* ── Карточка товара ───────────────────────────────────── */
/* Одна и та же плитка в каталоге и в свежих поступлениях.
   Белая на сером, без рамки; при наведении — мягкая тень и оранжевое
   название. Не прыгает вверх: в плотной сетке это рябит */
/* Плитка ~320 px, как в образце: в колонке 1290 это четыре в ряд,
   рядом с фильтрами (960) — три. Нижняя граница 280, а не 296: на
   экране 1280 выдача равна 920, и при 296 третья плитка не влезала
   в ряд по четырём пикселям — вместо трёх оставалось две */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,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;
  text-align:center;transition:box-shadow .2s}
.tag-card:hover{box-shadow:var(--shadow)}
.tag-card:hover .name{color:var(--accent)}
/* Ссылка на деталь и кнопка «в корзину» — соседи, а не вложены друг
   в друга: кнопка внутри ссылки — недопустимая разметка, и нажатие
   на неё всё равно уводило бы на страницу детали */
.tag-link{display:flex;flex-direction:column;flex:1;min-height:0;color:inherit}

/* Квадратный кадр через 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:var(--r-xs);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 12px;display:flex;flex-direction:column;
  align-items:center;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:16px;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)}

/* «В корзину» прямо из плитки — как в магазинных шаблонах. Деталь
   штучная, поэтому после добавления кнопка ведёт в корзину, а не
   добавляет второй раз (обработчик — static/js/chrome.js) */
.buy-card{margin:0 16px 16px;width:calc(100% - 32px)}
.buy-card[data-added]{border-color:var(--accent);color:var(--accent)}
.buy-card:disabled{color:var(--dim);border-color:var(--line-2);cursor:default}

/* ── Метки ─────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);
  padding:4px 10px;border-radius:var(--r-xs);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}
.notice-ok{background:#E8F6EE;border:1px solid #BFE5CF;color:#185C36}
.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}
.grid > [hidden]{display:none}

/* Витринный ряд («Свежие поступления»): карточек меньше, чем колонок,
   бывает только когда их мало на складе — тогда auto-fit растягивает
   их на всю ширину, а не оставляет пустые места справа. Сколько
   показать, решает fillRows() в static/js/chrome.js */
.grid.grid-fill{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

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