:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #111318;
  --ink2: #4b5160;
  --muted: #8a909c;
  --line: #e4e6eb;
  --accent: #ff5a1f;
  --logo: url(img/logo-dark.png?v=2);
  --accent-ink: #ffffff;
  --good: #12a150;
  --warn: #d98a00;
  --bad: #d93025;
  --wa: #25d366;
  --tg: #229ed9;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .06);
}
/* тёмная тема: по настройке устройства, если посетитель сам не выбрал светлую, или по кнопке ☀️/🌙 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --logo: url(img/logo-light.png?v=2);
    --bg: #0f1115;
    --card: #181b22;
    --ink: #f1f2f5;
    --ink2: #b9bec9;
    --muted: #7d8492;
    --line: #2a2e38;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --logo: url(img/logo-light.png?v=2);
  --bg: #0f1115;
  --card: #181b22;
  --ink: #f1f2f5;
  --ink2: #b9bec9;
  --muted: #7d8492;
  --line: #2a2e38;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }

/* шапка */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 106px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; line-height: 1.15; }
/* логотип Elite Moto Energy: чёрный — для светлой темы, белый — для тёмной (переменная --logo в темах ниже) */
.logo__img { flex: none; height: 92px; aspect-ratio: 900 / 488; background: var(--logo) center / contain no-repeat; }
.logo__text { display: flex; flex-direction: column; gap: 3px; max-width: 340px; }
.logo__text b { font-size: 20px; font-weight: 800; }
.logo__text small { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.top__contacts { display: flex; flex-direction: column; gap: 5px; max-width: 270px; }
.top__cbtns { display: flex; gap: 8px; }
.top__cbtns .cbtn { flex: 1; }
/* подсказка про Telegram-бота под WhatsApp/Telegram в шапке; на планшете там только значки — подсказка в их всплывающей подсказке */
.chint { margin: 0; font-size: 11px; line-height: 1.3; color: var(--muted); }
@media (max-width: 1100px) { .top__contacts .chint { display: none; } }
.chint--fab { max-width: 220px; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12px; color: var(--ink); }
.top__right { display: flex; align-items: center; gap: 8px; }
.top__tools { display: flex; align-items: center; gap: 6px; }
.tool { height: 40px; min-width: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.tool:hover { border-color: var(--muted); }
.tool svg { width: 20px; height: 20px; }
@media (max-width: 500px) { .logo__text { display: none; } .top__right, .top__tools { gap: 6px; } }
@media (max-width: 640px) { .top__in { min-height: 64px; } .logo__img { height: 54px; } .logo__text { display: none; } }

/* кнопки связи */
.cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; border: 0; cursor: pointer; text-decoration: none; font-weight: 700; color: #fff; white-space: nowrap; }
.cbtn svg { width: 20px; height: 20px; flex: none; }
.cbtn--wa { background: var(--wa); }
.cbtn--tg { background: var(--tg); }
.cbtn--lg { height: 50px; font-size: 16px; flex: 1; }
.cbtn:hover { filter: brightness(1.06); }
@media (max-width: 640px) { .top__contacts .cbtn span { display: none; } .top__contacts .cbtn { width: 40px; padding: 0; } }

.fab { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; flex-direction: column; gap: 10px; }
.fab .cbtn { width: 54px; height: 54px; border-radius: 50%; padding: 0; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.fab .cbtn span { display: none; }
.fab .cbtn svg { width: 28px; height: 28px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 40px); opacity: 0; transition: .25s; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 10px; z-index: 40; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* герой */
.hero { padding-top: 28px; padding-bottom: 8px; }
.hero h1 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 38px); line-height: 1.1; letter-spacing: -.02em; }
.hero p { margin: 0; color: var(--ink2); max-width: 720px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero__facts .chip b { white-space: nowrap; }   /* «1 $ = 455.63 ₸» не разрывать: на телефоне ₸ уезжал на новую строку */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink2); }
.chip b { color: var(--ink); }

/* фильтры */
.filters { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 18px 0; box-shadow: var(--shadow); display: grid; gap: 10px; grid-template-columns: repeat(6, 1fr); }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.filters input, .filters select { height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); min-width: 0; width: 100%; }
.filters .span2 { grid-column: span 2; }
.filters .row2 { display: flex; gap: 6px; }
.filters__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.linkbtn { background: none; border: 0; color: var(--accent); font-weight: 700; cursor: pointer; padding: 0; }
@media (max-width: 1000px) { .filters { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .filters { grid-template-columns: 1fr 1fr; } .filters .span2, .filters .wide-m { grid-column: 1 / -1; } }
.fold { display: none; }
@media (max-width: 600px) {
  .fold { display: block; grid-column: 1 / -1; }
  .filters.collapsed > label:not(.always) { display: none; }
}

/* сетка карточек */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(16,24,40,.12); }
.card__img { position: relative; aspect-ratio: 4 / 3; background: var(--line); }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__img.noimg img { display: none; }
.card__img.noimg::after { content: attr(data-noimg); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; }
.badge { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 800; background: rgba(0,0,0,.72); color: #fff; }
.badge--r { left: auto; right: 10px; background: var(--accent); }
.badge--nog { background: rgba(0,0,0,.5); font-weight: 600; }
.nograde { font-style: italic; }
.card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__title { font-weight: 800; font-size: 16px; line-height: 1.25; }
.card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink2); }
.card__price { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.price-main { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.price-sub { font-size: 12px; color: var(--muted); }
/* прогноз цены: цвет полоски — уверенность (много продаж — зелёная, мало — жёлтая) */
.fc { margin-top: 6px; font-size: 13px; color: var(--ink2); padding-left: 8px; border-left: 3px solid var(--line); }
.fc b { color: var(--ink); }
.fc--high { border-left-color: var(--good); }
.fc--mid { border-left-color: var(--accent); }
.fc--low { border-left-color: var(--warn); }
/* нет стартовой цены — прогноз становится главной цифрой */
.fc--big { font-size: 14px; }
.fc--big b { display: block; font-size: 19px; font-weight: 800; }
.fcbox--main .fcbox__sum { font-size: 30px; }
.fcbox { margin-top: 14px; padding: 10px 12px; border-left: 4px solid var(--line); background: var(--bg); border-radius: 0 var(--radius) var(--radius) 0; }
.fcbox__sum { font-size: 20px; font-weight: 800; }
.fcbox__why { margin-top: 6px; font-size: 13px; color: var(--ink2); }
.fcbox__note { margin-top: 4px; font-size: 12px; color: var(--muted); }
.price-none { font-weight: 700; color: var(--ink2); }
.timer { font-size: 12px; font-weight: 700; color: var(--accent); }

.more { display: flex; justify-content: center; margin: 24px 0 40px; }
.btn { height: 46px; padding: 0 22px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); font-weight: 700; cursor: pointer; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.empty { text-align: center; padding: 60px 16px; color: var(--muted); }

/* оценки */
.g { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 7px; font-weight: 800; font-size: 13px; color: #fff; background: var(--muted); }
.g--hi { background: var(--good); } .g--mid { background: var(--warn); } .g--lo { background: var(--bad); }

/* страница лота */
.topline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.jpclock { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--bad); font-weight: 600; }
.jpclock__ic { font-size: 28px; line-height: 1; }
.jpclock b { font-weight: 800; }
.topline .jpclock { flex: 1; min-width: 0; margin: 8px 0; }
.hero .jpclock { margin-top: 10px; }
@media (max-width: 640px) { .topline .jpclock { flex-basis: 100%; margin-top: -4px; } }
.back { display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 10px; text-decoration: none; font-weight: 700; color: var(--ink2); }
.lot { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .lot { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.panel + .panel { margin-top: 16px; }
.panel h2 { margin: 0 0 12px; font-size: 18px; }
.gallery__main { position: relative; aspect-ratio: 4 / 3; background: #000; border-radius: var(--radius); overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.gallery__main img.lowres { filter: blur(3px); }
.gallery__none { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa0ab; font-weight: 700; }   /* у лота нет фото — подпись, как в каталоге, а не пустой чёрный прямоугольник */
.gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 22px; cursor: pointer; }
.gallery__nav--l { left: 10px; } .gallery__nav--r { right: 10px; }
.gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; }
.gallery__thumbs img { width: 84px; height: 63px; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: .6; flex: none; border: 2px solid transparent; }
.gallery__thumbs img.on { opacity: 1; border-color: var(--accent); }
.lot h1 { margin: 0 0 4px; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 14px 0; }
.kv div { background: var(--card); padding: 9px 12px; }
.kv span { display: block; font-size: 12px; color: var(--muted); }
.kv b { font-size: 15px; }
.bigprice { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.contacts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.countdown { display: inline-flex; gap: 8px; align-items: center; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 800; }

.warnline { color: var(--bad); font-weight: 700; }
.legend { font-size: 12px; color: var(--muted); margin-top: 12px; }
.sheetimg { width: 100%; border-radius: 10px; border: 1px solid var(--line); margin-top: 12px; background: #fff; cursor: zoom-in; }

.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-tiles > div { padding: 12px; border-radius: 10px; background: var(--bg); }
.stat-tiles > div > span { display: block; font-size: 12px; color: var(--muted); }
.stat-tiles b { display: block; font-size: 18px; }
.stat-tiles b + b { margin-top: 6px; }
@media (max-width: 500px) { .stat-tiles { grid-template-columns: 1fr; } }
.stat-tiles .price-sub { padding: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.tbl th, .tbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.tbl th { font-size: 12px; color: var(--muted); font-weight: 600; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl tr.sim td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tblwrap { overflow-x: auto; }

.order { margin: 30px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.order h2 { margin: 0 0 6px; font-size: 24px; }
.order form { display: grid; gap: 10px; }
.order input, .order textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font: inherit; color: inherit; }
@media (max-width: 800px) { .order { grid-template-columns: 1fr; } }
/* «Следить в Telegram»: кнопка на странице лота, полоска над каталогом при выбранной модели, строка в «Не нашли подходящий?» */
.watch { margin-top: 14px; }
.watch__btn { background: var(--tg); border-color: var(--tg); color: #fff; justify-content: center; text-align: center; height: auto; min-height: 46px; padding: 8px 18px; line-height: 1.25; }
.watch .watch__btn { display: flex; width: 100%; }
.watch__sub { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.wstrip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--tg); border-radius: var(--radius); background: color-mix(in srgb, var(--tg) 10%, var(--card)); font-weight: 600; }

.foot { border-top: 1px solid var(--line); padding: 24px 0 90px; font-size: 13px; color: var(--ink2); }
.foot p { margin: 4px 0; }

.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.9); display: grid; place-items: center; padding: 16px; cursor: zoom-out; }
.lightbox img { max-height: 100%; max-width: 100%; }

/* видео, фото по узлам, осмотр BDS */
.badge--v { top: auto; bottom: 10px; background: rgba(0,0,0,.72); }
.videos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .videos { grid-template-columns: 1fr; } }
.vid { position: relative; }
.vid video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; }
/* видео качается с сервера аукциона — полоска и счётчик секунд поверх плеера */
.vid-load { position: absolute; left: 8px; right: 8px; top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.72); color: #fff; font-size: 12.5px; line-height: 1.35; pointer-events: none; overflow: hidden; }
.vid-load i { position: absolute; left: 0; bottom: 0; height: 3px; width: 35%; background: var(--accent); animation: vidbar 1.3s ease-in-out infinite; }
@keyframes vidbar { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.comment { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--bg); }
.comment p { margin: 6px 0 0; }
.comment details { margin-top: 6px; font-size: 13px; color: var(--muted); }
.comment summary { cursor: pointer; }

/* кнопка «Найти» */
.filters__go { display: flex; align-items: flex-end; }
.btn--search { width: 100%; height: 40px; font-size: 15px; }
#grid { scroll-margin-top: 76px; }
@media (max-width: 600px) { .filters__go { grid-column: 1 / -1; } .btn--search { height: 46px; } }

/* просмотр фото на весь экран */
.lightbox { cursor: default; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.lb-nav:hover { background: rgba(255,255,255,.3); }
.lb-nav--l { left: 16px; } .lb-nav--r { right: 16px; }
.lb-close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 20px; cursor: pointer; }
.lb-count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 700; background: rgba(0,0,0,.5); padding: 4px 12px; border-radius: 999px; }
@media (max-width: 600px) { .lb-nav { width: 44px; height: 44px; font-size: 26px; } .lb-nav--l { left: 6px; } .lb-nav--r { right: 6px; } }
.lightbox img { max-height: calc(100vh - 32px); max-width: calc(100vw - 32px); object-fit: contain; }
.lightbox { overflow: hidden; }
.lightbox img { transition: transform .08s ease-out; transform-origin: center center; user-select: none; }
.lb-hint { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: 13px; pointer-events: none; }
@media (max-width: 600px) { .lb-hint { display: none; } }
.lb-nav, .lb-close, .lb-count { z-index: 2; }
/* стрелки и кнопки просмотра — всегда хорошо видны, даже на светлом фото */
.lb-nav, .lb-close { background: #111; color: #fff; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.lb-nav:hover, .lb-close:hover { background: #000; }
.lb-hint, .lb-count { background: rgba(0,0,0,.75); color: #fff; padding: 4px 12px; border-radius: 999px; z-index: 2; }
/* фото целиком, по бокам чёрные поля */
.lightbox { padding: 0; background: #000; }
.lightbox img { width: 100vw; height: 100vh; max-width: none; max-height: none; object-fit: contain; }
/* кнопка «наверх» */
.fab .cbtn--up { background: var(--ink); color: var(--bg); display: none; }
.fab .cbtn--up.show { display: inline-flex; }
/* копирование названия с карточки */
.card__title { display: flex; align-items: flex-start; gap: 6px; }
.copybtn { flex: none; margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink2); cursor: pointer; }
.copybtn:hover { color: var(--accent); border-color: var(--accent); }
.copybtn svg { width: 16px; height: 16px; }

/* ---------- плавное появление фото: пока грузится — мерцающая заглушка ---------- */
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.card__img, .scard__img { background: linear-gradient(90deg, var(--line) 25%, color-mix(in srgb, var(--line) 55%, var(--card)) 50%, var(--line) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.card__img.noimg { animation: none; background: var(--line); }
.card__img img, .scard__img img { opacity: 0; transition: opacity .35s; }
.card__img img.ok, .scard__img img.ok { opacity: 1; }

/* ---------- кнопка «В наличии» в шапке ---------- */
.tool--stock { text-decoration: none; gap: 6px; border-color: color-mix(in srgb, var(--good) 45%, var(--line)); color: var(--good); }
.tool--stock b { background: var(--good); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; display: inline-grid; place-items: center; }
.tool--stock.on { background: var(--good); color: #fff; border-color: var(--good); }
.tool--stock.on b { background: #fff; color: var(--good); }

/* ---------- одна кнопка «написать» справа внизу ---------- */
.fab { align-items: flex-end; }
.fab .cbtn--chat { background: var(--accent); color: #fff; }
.fab .cbtn--chat .x { display: none; font-size: 22px; line-height: 1; }
.fab.open .cbtn--chat svg { display: none; }
.fab.open .cbtn--chat .x { display: inline; }
.fab__menu { display: none; flex-direction: column; gap: 10px; }
.fab.open .fab__menu { display: flex; animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }
.fab .cbtn--up { width: 44px; height: 44px; }
.fab .cbtn--up svg { width: 22px; height: 22px; }

/* ---------- мотоциклы в наличии ---------- */
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin: 18px 0 30px; }
.scard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.scard:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(16,24,40,.16); }
.scard__img { position: relative; aspect-ratio: 1; }
.scard__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.scard__track::-webkit-scrollbar { display: none; }
.scard__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.scard__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 22px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.scard__nav--l { left: 8px; } .scard__nav--r { right: 8px; }
.scard:hover .scard__nav { opacity: 1; }
@media (hover: none) { .scard__nav { display: none; } }
.sbadge { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: var(--good); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.sbadge--reserved { background: var(--warn); }
.sbadge--transit { background: var(--tg); }
/* миниатюры под главным фото карточки: видно, что фото несколько */
.scard__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px 4px 0; }
.scard__thumbs img, .scard__thumbs .tmore { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: .65; outline: 2px solid transparent; outline-offset: -2px; transition: opacity .15s; display: block; }
.scard__thumbs img.on, .scard__thumbs img:hover { opacity: 1; outline-color: var(--accent); }
.scard__thumbs .tmore { position: relative; overflow: hidden; opacity: 1; }
.scard__thumbs .tmore img { position: absolute; inset: 0; height: 100%; opacity: 1; border-radius: 0; outline: 0; }
.scard__thumbs .tmore b { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-size: 15px; }
.sbadge--sold { background: #555; }
.scard--sold .scard__img img { filter: grayscale(.8); }
.scard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.scard__title { font-weight: 800; font-size: 18px; line-height: 1.25; }
.scard__desc { font-size: 13.5px; line-height: 1.5; color: var(--ink2); padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.scard__price { margin-top: auto; padding-top: 8px; }
.scard__price .price-main { font-size: 22px; }
.city { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--accent); }
.city svg { width: 15px; height: 15px; }
.cities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip--btn { cursor: pointer; }
.chip--btn svg { width: 14px; height: 14px; }
.chip--btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.stock-empty { text-align: center; padding: 40px 20px; margin: 18px 0 30px; }
.stock-empty__icon { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.stock-empty__icon svg { width: 32px; height: 32px; }
.stock-empty h2 { margin: 0 0 6px; font-size: 22px; }
.btnlink { display: inline-flex; align-items: center; text-decoration: none; }
.desc { line-height: 1.6; }
.gallery__count { position: absolute; right: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; }
/* полоса «Уже в наличии» над каталогом */

/* ---------- телефон ---------- */
@media (max-width: 640px) {
  /* телефон: WhatsApp и Telegram — сразу в шапке (она липкая — видны всегда), под кнопками инструментов; круглой кнопки «написать» внизу нет */
  .top__right { flex-direction: column; align-items: stretch; gap: 6px; }
  .top__contacts { max-width: none; }
  .top__contacts .chint { display: none; }
  .top__in { padding-top: 6px; padding-bottom: 6px; }
  .fab .cbtn--chat, .fab__menu { display: none !important; }
  .tool--stock { padding: 0 9px; }
}
@media (max-width: 600px) {
  .hero { padding-top: 18px; }
  .hero p { font-size: 14px; }
  /* каталог в 2 колонки */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { border-radius: 12px; }
  .card:hover { transform: none; }
  .card__body { padding: 8px 10px 10px; gap: 4px; }
  .card__title { font-size: 14px; }
  .card__meta { font-size: 11.5px; gap: 2px 8px; }
  .card .card__meta span:last-child { flex-basis: 100%; }
  .hero__facts .chip { font-size: 12px; }
  .gallery__thumbs { scrollbar-width: none; }
  .gallery__thumbs::-webkit-scrollbar { display: none; }
  .copybtn { width: 26px; height: 26px; }
  .copybtn svg { width: 14px; height: 14px; }
  .badge { top: 6px; left: 6px; padding: 2px 6px; font-size: 11px; }
  .badge--r { left: auto; right: 6px; }
  .badge--v { top: auto; bottom: 6px; }
  .timer { font-size: 11px; }
  .card__price { padding-top: 6px; }
  .price-main { font-size: 16px; }
  .card .price-sub { font-size: 11px; }
  .fc { font-size: 11.5px; padding-left: 6px; }
  .fc--big b { font-size: 16px; }
  /* фото лота — во всю ширину экрана */
  .gallery__main { margin: 0 -16px; border-radius: 0; }
  .gallery__nav { width: 36px; height: 36px; font-size: 20px; }
  .bigprice { font-size: 26px; }
  .panel { padding: 14px; }
  .sgrid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .scard__price .price-main { font-size: 20px; }
  .fab { right: 12px; bottom: 12px; }
  .fab .cbtn { width: 48px; height: 48px; }
  .fab .cbtn svg { width: 24px; height: 24px; }
  .fab .cbtn--up { width: 40px; height: 40px; }
}
/* страница мотоцикла в наличии: на телефоне сначала фото, потом цена и кнопки, потом описание */
.lot--stock { grid-template-areas: "gal info" "desc info"; }
.lot--stock > .g-gal { grid-area: gal; } .lot--stock > .g-info { grid-area: info; } .lot--stock > .g-desc { grid-area: desc; }
@media (max-width: 900px) { .lot--stock { grid-template-areas: "gal" "info" "desc"; } }
.kv > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* заголовок «Мотоциклы с аукционов Японии» уже стоит в шапке рядом с логотипом — на главной его не повторяем
   (для поисковиков остаётся; на телефоне текста в шапке нет — там заголовок виден) */
@media (min-width: 641px) { .hero__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* второй, крупный логотип справа от текста на главной — только на широком экране (на телефоне хватает логотипа в шапке) */
.hero__logo { display: none; }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: 1fr auto; column-gap: 32px; align-items: center; }
  .hero > :not(.hero__logo) { grid-column: 1; }
  .hero__logo { display: block; grid-column: 2; grid-row: 1 / span 3; height: 150px; aspect-ratio: 900 / 488; background: var(--logo) center / contain no-repeat; }
}

/* статистика продаж: кнопка, карточки проданных, история мотоцикла на торгах (26.10.2026) */
.salesbtn { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 12px; text-decoration: none; color: var(--ink); height: 44px; }
.salesbtn:hover { border-color: var(--accent); color: var(--accent); }
.salegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.salegrid .card__body { padding: 8px 10px 10px; gap: 4px; }
.salegrid .card__meta { font-size: 12px; gap: 2px 8px; }
.salegrid .price-main { font-size: 16px; }
.salegrid .badge { top: 6px; left: 6px; font-size: 11px; padding: 3px 6px; }
.salegrid .badge--r { left: auto; right: 6px; }
.sale { box-shadow: none; }
.sale .card__img img { cursor: zoom-in; }
.sale--sim { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card__past { font-size: 12.5px; font-weight: 700; color: var(--warn); }
.st { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.st--sold { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.st--unsold { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.st--off { background: var(--bg); color: var(--muted); }
.tbl.hist td { vertical-align: middle; }
/* телефон: в строке истории не хватает места на 4 столбца — цена переносится целиком на свою строку под датой и статусом */
@media (max-width: 500px) {
  .tbl.hist, .tbl.hist tbody { display: block; }
  .tbl.hist tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .tbl.hist td { padding: 0; border: 0; }
  .tbl.hist td.r { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; text-align: left; }
  .tbl.hist td.r > * { white-space: nowrap; }
}
.sales__h { margin: 0 0 6px; font-size: 24px; }
.sales__f { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sales__f label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.sales__f select { height: 40px; min-width: 110px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }
@media (max-width: 600px) {
  .sales__h { font-size: 20px; }
  .sales__f label { flex: 1 1 40%; }
  .sales__f label:last-child { flex-basis: 100%; }
  .sales__f select { min-width: 0; width: 100%; }
}
/* калькулятор «под ключ» (js/calc.js) */
:root { --cb-bike: var(--accent); --cb-japan: #6d5dfc; --cb-delivery: #1a9fd9; --cb-service: #12a150; }
.calcbtn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 14px; height: 48px; font-size: 15px; }
.calcbtn[aria-expanded="true"] { filter: brightness(.92); }
.tool--calc { text-decoration: none; gap: 6px; color: var(--ink); }
.tool--calc .ic { font-size: 17px; line-height: 1; }
.tool--calc.on { border-color: var(--accent); color: var(--accent); }
@media (max-width: 600px) { .tool--calc .tx { display: none; } .tool--calc { padding: 0 8px; } }
.calcp__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.calcp__h h2 { margin-bottom: 8px; }
.calcp__h .linkbtn { text-decoration: none; font-size: 14px; }
.calcpage h1 { margin: 0 0 6px; font-size: 26px; }
.calcpage > .muted { margin: 0 0 16px; }
.calc__in { display: grid; gap: 12px; max-width: 560px; }
.calc__f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.calc__f input[name=yen], .calc__f select { height: 48px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 18px; font-weight: 700; }
.calc__f select { font-size: 15px; }
.calc__f input[name=yen]:focus, .calc__f select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.calc__f input[type=range] { width: 100%; accent-color: var(--accent); margin: 4px 0 0; }
.calc__f small { font-size: 12px; }
.calc__empty { margin: 16px 0 0; padding: 16px; border-radius: 12px; background: var(--bg); color: var(--muted); text-align: center; }
.calc__total { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color: #fff; }
.calc__total span { display: block; font-size: 13px; opacity: .9; }
.calc__total b { display: block; font-size: 32px; line-height: 1.15; letter-spacing: -.5px; }
.calc__total small { font-size: 14px; opacity: .9; }
.calc__bar { display: flex; height: 12px; margin-top: 14px; border-radius: 99px; overflow: hidden; background: var(--bg); gap: 2px; }
.calc__bar i { display: block; height: 100%; transition: width .25s; }
.calc__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--ink2); }
.calc__legend span { display: inline-flex; align-items: center; gap: 5px; }
.calc__legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cb--bike { background: var(--cb-bike); } .cb--japan { background: var(--cb-japan); } .cb--delivery { background: var(--cb-delivery); }
.cb--service { background: var(--cb-service); }
.calc__grid { display: grid; gap: 12px; margin-top: 14px; }
.calc__card { border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; }
.calc__card h3 { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 4px; font-size: 14px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink2); }
.calc__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.calc__card h3 + .calc__row { border-top: 0; }
.calc__row b { display: block; font-size: 15px; }
.calc__row small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.calc__row .r { text-align: right; white-space: nowrap; }
.calc__notes { margin-top: 12px; font-size: 13px; color: var(--ink2); }
.calc__notes p { margin: 6px 0; }
.calc__send { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 700; }
.calc__send .contacts { margin-top: 8px; }
@media (max-width: 600px) {
  .calc__in { grid-template-columns: 1fr; }
  .calc__total b { font-size: 27px; }
  .calcpage h1 { font-size: 21px; }
}
#calcp { scroll-margin-top: 100px; }
#calcp .calc__in { grid-template-columns: 1fr; }
.tool--stock, .tool--calc { white-space: nowrap; }
@media (max-width: 500px) { .top__right, .top__tools { gap: 4px; } .top__tools .tool { padding: 0 7px; min-width: 36px; } }
@media (max-width: 380px) { .logo__img { height: 44px; } .tool--stock span { font-size: 13px; } }
/* габариты мотоцикла: помещается ли поперёк контейнера (js/calc.js) */
.calc__dims:empty { display: none; }
.dims { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--muted); background: var(--bg); font-size: 14px; }
.dims b { display: block; font-size: 15px; }
.dims small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.dims small a { color: inherit; }
.dims p { margin: 8px 0 4px; font-weight: 700; }
.dims--ok { border-left-color: var(--good); } .dims--ok p { color: var(--good); }
.dims--near { border-left-color: var(--warn); } .dims--near p { color: var(--warn); }
.dims--big { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--bg)); } .dims--big p { color: var(--bad); }
.dimswarn { margin: 12px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.dimswarn--big { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.dimswarn--near { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.calc__totnote { display: block; margin-top: 4px; font-weight: 700; }
.calc__final { border: 2px solid var(--accent); }
.calc__final .calc__row:first-child { border-top: 0; }
.calc__sum b { font-size: 17px; }
.calc__sum .r b { font-size: 20px; color: var(--accent); }
/* оценки аукциона плитками по узлам; нажатие — замечания по узлу (js/lot.js) */
.insp__all { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 6px; white-space: nowrap; }
/* оценки по узлам: полоска узлов → блок узла (оценка, лента фото, замечания) */
.inav { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; margin-bottom: 4px; }
.inav button { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.inav button:hover { border-color: var(--accent); }
.inav i, .isec__h i { font-style: normal; font-size: 11px; color: var(--muted); }
.inav .g { min-width: 22px; height: 20px; font-size: 12px; }
.inav__w { color: var(--bad); }
.isec { padding: 14px 0 4px; border-top: 1px solid var(--line); scroll-margin-top: 120px; }
.isec:first-of-type { border-top: 0; }
.isec__h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font-size: 16px; color: var(--accent); }
.istrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.istrip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; cursor: zoom-in; background: var(--line); }
.ilist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; font-size: 14px; }
.ilist li { break-inside: avoid; padding: 3px 0; }
.ilist li:has(> b) { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 8px; }
.ilist b { font-weight: 700; }
.ilist__none { margin: 0; font-size: 14px; }
@media (max-width: 640px) {
  .isec { scroll-margin-top: 80px; }
  .inav { flex-wrap: nowrap; overflow-x: auto; margin-right: -14px; padding-right: 14px; scrollbar-width: none; }
  /* телефон: фото узла — лента, листается пальцем вбок */
  .istrip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; margin-right: -14px; padding-right: 14px; }
  .istrip img { flex: 0 0 72%; scroll-snap-align: start; }
  .ilist { columns: 1; }
}
/* телефон: фото → видео → цена и расчёт → история → оценки → почём уходили → описание и лист → фото по узлам */
@media (max-width: 900px) {
  .lot { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .lot > div { display: contents; }
  .lot .panel { margin-top: 0 !important; }
  .lot > div > * { min-width: 0; }   /* иначе лента миниатюр растягивает страницу вширь */
  .o-gal { order: 1; } .o-vid { order: 2; } .o-main { order: 3; }
  .o-insp { order: 6; } .o-stats { order: 7; } .o-sheet { order: 8; }
}
.histbox { padding: 12px 14px; border-radius: 12px; background: var(--bg); margin-top: 4px; }
.histbox h3 { margin: 0 0 6px; font-size: 15px; }
#lastbtn .caret { margin-left: 6px; transition: transform .2s; }
#lastbtn[aria-expanded="true"] .caret { transform: rotate(180deg); }
#lastsales .salegrid { margin-top: 12px; }
/* расчёт стоимости раскрывается прямо под кнопкой */
.calcin { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.calcbtn .caret { margin-left: 4px; transition: transform .2s; }
.calcbtn[aria-expanded="true"] .caret { transform: rotate(180deg); }
/* «отправить этот мотоцикл» над названием (js/util.js shareButtons) */
.share { display: flex; gap: 8px; margin-bottom: 12px; }
.share .cbtn { flex: 1; justify-content: center; }
.share .share__copy { flex: 0 0 46px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.share .cbtn { min-width: 0; }
.share .cbtn span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .share .cbtn { padding: 0 10px; font-size: 13px; gap: 6px; } }
.lb-cap { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; pointer-events: none; }
.lb-cap { z-index: 2; }
/* избранное: сердечко на карточке, у названия лота и в шапке (js/fav.js) */
.fav { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; flex: none; }
.fav svg { width: 20px; height: 20px; fill: none; }
.fav:hover { color: var(--bad); }
.fav.on { color: var(--bad); }
.fav.on svg, .tool--fav.has svg { fill: currentColor; }
.fav--card { position: absolute; right: 8px; bottom: 8px; border: 0; background: rgba(255,255,255,.92); color: #444; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.fav--card.on { color: var(--bad); }
.lot__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tool--fav { text-decoration: none; gap: 5px; color: var(--ink2); }
.tool--fav svg { fill: none; }
.tool--fav b[hidden] { display: none; }   /* иначе display у b перебивает hidden — пустой красный кружок при пустом избранном */
.tool--fav.has { color: var(--bad); }
.tool--fav.on { border-color: var(--bad); }
.tool--fav b { background: var(--bad); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; display: inline-grid; place-items: center; }
.card__gone { position: absolute; inset: auto 0 0 0; padding: 6px 54px 6px 10px; background: rgba(0,0,0,.72); color: #fff; font-size: 13px; font-weight: 800; }
.card--gone .card__img img { filter: grayscale(.8); }
.favh { margin: 6px 0 4px; }
@media (max-width: 600px) { .fav--card { width: 32px; height: 32px; right: 6px; bottom: 6px; } .fav--card svg { width: 17px; height: 17px; } .tool--fav { padding: 0 8px; } }
/* планшет и небольшой ноутбук: шапка (логотип с подписью, 5 кнопок, WhatsApp и Telegram) не влезает в одну строку —
   у WhatsApp/Telegram оставляем значки, подпись логотипа мельче; ещё уже — без подписи и без слова «Калькулятор» */
@media (min-width: 641px) and (max-width: 1100px) {
  .top__contacts .cbtn span { display: none; }
  .top__contacts .cbtn { width: 40px; padding: 0; }
  .logo__text { max-width: 230px; }
  .logo__text b { font-size: 17px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .logo__text { display: none; }
  .tool--calc .tx { display: none; }
  .tool--calc { padding: 0 8px; }
}
/* узкий телефон (до 500 px, в т. ч. большие iPhone 428–430): в шапке 5 кнопок (калькулятор, избранное, в наличии, тема, язык) — ужимаем, чтобы влезли без прокрутки вбок */
@media (max-width: 500px) {
  .top__in { gap: 8px; }
  .top__in { padding: 0 10px; }
  .logo__img { height: 36px; }
  .top__tools { gap: 4px; }
  .tool--stock { padding: 0 6px; font-size: 12px; }
  .tool { height: 36px; min-width: 34px; padding: 0 7px; font-size: 13px; }
  select.tool { padding: 0 2px; font-size: 12px; }
  .tool--fav { position: relative; padding: 0 7px; }
  .tool--fav b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; }
}
/* телефоны 360 px (многие Android): ещё чуть плотнее, иначе выбор языка уходит за край экрана */
@media (max-width: 380px) {
  .top__in { gap: 6px; padding: 0 8px; }
  .logo__img { height: 32px; }
  .top__tools { gap: 3px; }
  .tool--stock { padding: 0 5px; }
}
/* самые узкие телефоны (320 px): кнопку темы прячем — тема и так берётся из настройки телефона */
@media (max-width: 359px) { #theme { display: none; } }
/* телефон: подписи «WhatsApp» и «Telegram» в шапке видны (правила выше прячут их на планшете) */
@media (max-width: 640px) {
  .top__contacts .cbtn { width: auto; height: 36px; padding: 0 10px; font-size: 14px; }
  .top__contacts .cbtn span { display: inline; }
  .top__contacts .cbtn svg { width: 18px; height: 18px; }
}

/* выбор модели: кнопка в фильтрах + окно со строкой поиска (на компьютере — по центру сверху, на телефоне — весь экран) */
.mpick { height: 40px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); text-align: left; font: inherit; font-size: 14px; font-weight: 400; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; position: relative;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.mp { position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.45); display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; }
.mp__box { background: var(--card); color: var(--ink); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.35); width: 100%; max-width: 460px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.mp__head { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.mp__q { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 16px; }
.mp__x { width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 18px; cursor: pointer; flex: none; }
.mp__list { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mp__i { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; width: 100%; text-align: left; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.mp__i:hover, .mp__i:focus-visible { background: var(--bg); }
.mp__i.on { font-weight: 700; color: var(--accent); }
.mp__n { color: var(--muted); font-size: 13px; }
.mp__b { color: var(--muted); font-size: 12px; margin-left: auto; }
.mp__none { padding: 16px; color: var(--muted); }
body.mp-open { overflow: hidden; }
@media (max-width: 600px) {
  .mp { padding: 0; background: var(--card); }
  .mp__box { max-width: none; max-height: none; height: 100%; border-radius: 0; box-shadow: none; }
}