/* ===== общие мелочи v4: категории, листание, поделиться, подсказка push ===== */
.cat > span:last-child { margin-top: auto; position: relative; }
.cat b { margin-top: 0; display: block; }
.cat.is-empty { opacity: .62; }
.pager-info { margin: 10px 0 0; text-align: center; color: var(--ink-3); font-size: var(--fs-xs); }
.subcats { margin-bottom: 16px; }
.item-ppm { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: -4px; }
.item.is-sold .item-media img { filter: grayscale(.8); opacity: .7; }
.item-photo-price { font-family: var(--f-head); font-weight: 800; letter-spacing: -.02em; font-size: 15px; }
.item-auto .item-media::after { opacity: 1; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.share-lbl { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--fs-sm); font-weight: 600; }
.share-list { display: flex; flex-wrap: wrap; gap: 6px; }
.share-net { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); font: 800 13px/1 var(--f-head); color: var(--ink-2); transition: all var(--t) var(--ease); }
.share-net .ic { width: 16px; height: 16px; }
.share-net:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.share-x:hover { background: #0f1419; } .share-fb:hover { background: #1877f2; } .share-tg:hover { background: #229ed9; }
.share-wa:hover { background: #25d366; } .share-vb:hover { background: #7360f2; } .share-li:hover { background: #0a66c2; } .share-mail:hover { background: var(--ink); }
.share-pop { position: relative; }
.share-pop > summary { list-style: none; }
.share-pop > summary::-webkit-details-marker { display: none; }
.share-pop[open] .share-list { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; padding: 10px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-3); justify-content: center; }
#pushPrompt { align-items: flex-start; }
#pushPrompt b { display: block; }
.push-prompt-btns { margin-top: 10px; }
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
.hero-art [data-float] { transform-box: fill-box; }
.dash-out { margin-top: 8px; }
.dash-out .btn { justify-content: flex-start; color: var(--ink-3); }
.hero-insights { padding-bottom: clamp(24px, 4vw, 48px); }
.hero-insights .chips { margin-top: 4px; }
.hero-insights .chip { --sv: var(--sv1); }
.hero-insights .chip .ic { color: var(--svb); }
.hero-insights .chip.on .ic { color: inherit; }
.ins-stamp { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; }
.pulse { display: grid; gap: clamp(20px, 3vw, 40px); padding: clamp(22px, 3.4vw, 44px); border-radius: var(--r-xl); align-items: center; }
@media (min-width: 960px) { .pulse { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.pulse h2 { font-size: var(--fs-3xl); margin-bottom: 20px; }
.pulse-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.pulse-stats > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pulse-stats b { font: 800 clamp(1.3rem, 1rem + 1vw, 1.8rem)/1 var(--f-head); letter-spacing: -.03em; }
.pulse-stats span { color: var(--ink-3); font-size: var(--fs-xs); }
@media (max-width: 560px) { .pulse-stats { grid-template-columns: 1fr 1fr; } }
.an-funnel-note { margin-top: 14px; }
.an-item { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.an-item .dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, var(--sv1), var(--sv2)); }
.an-table td small { display: block; }
.an-spark { width: 120px; height: 32px; display: block; }
.an-table .table { min-width: 760px; }
@media (max-width: 760px) { .an-table .table { min-width: 0; } .an-spark { width: 100px; } }
.kpi-foot .delta + span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* SplitText оборачивает слова в div: градиентный текст <em> должен доехать до них */
h1 em *, h2 em *, .display em * { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-dark h1 em *, .hero-dark .display em * { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; }
.split-line { padding-bottom: .08em; margin-bottom: -.08em; }
/* блок «какие вопросы закрывает страница» (seometa_block) */
.seoq { margin: clamp(32px, 5vw, 64px) 0 0; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--glass-2); }
.seoq-h { font: 700 var(--fs-sm)/1.2 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.seoq-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.seoq-list li { font-size: var(--fs-xs); color: var(--ink-2); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.seoq-n { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--ink-4); }
@media (max-width: 560px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 14px; }
  .kpi-ic { width: 28px; height: 28px; border-radius: 9px; }
  .kpi-foot { flex-wrap: wrap; }
  .stats { gap: 14px 20px; }
  .stat + .stat { padding-left: 20px; }
}
@media (max-width: 900px) { .hero-stage canvas.is-live { opacity: .55; } }

/* =====================================================================
   Сетка узких экранов (до 320 px). Главная причина горизонтальной
   прокрутки в CSS-сетках и флексах одна: у дочернего элемента
   min-width по умолчанию auto, и его САМОЕ ШИРОКОЕ содержимое (поле
   ввода, длинное слово, таблица) раздвигает колонку, а с ней и страницу.
   Ниже — общий предохранитель: детям раскладок разрешено сжиматься.
   ===================================================================== */
:where(body *:not(svg, svg *)) { min-width: 0; }
input, select, textarea, button, img, svg, video, iframe, table { max-width: 100%; }
.wrap > *, main > * { max-width: 100%; }
/* длинные слова, ссылки и коды не должны выпирать за карточку */
h1, h2, h3, h4, p, li, dd, dt, td, th, .item-title, .row-main b, .row-main small,
.kpi-value, .purchase-price, .detail-title, .chip, .tag, .badge { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
@media (max-width: 380px) {
  /* на самых узких экранах перенос важнее «красивой» неразрывности */
  .item-meta, .detail-meta, .kpi-foot, .chart-legend { flex-wrap: wrap; }
  .item-meta .nowrap, .detail-meta .nowrap { white-space: normal; }
}
/* подписи кнопок, фишек и значков на узком экране переносятся, а не вытекают из рамки:
   неразрывная украинская подпись «Увійдіть, щоб поставити запитання» шире 320-пиксельной
   колонки, и с white-space: nowrap её текст раздвигал всю страницу */
@media (max-width: 560px) {
  .btn { white-space: normal; height: auto; min-height: var(--bh); padding-block: 8px; line-height: 1.25; }
  .btn-icon { padding-block: 0; }
  .chip { white-space: normal; height: auto; min-height: 36px; padding-block: 6px; line-height: 1.25; }
  .tag, .badge, .status, .status-pill, .spec, .seller-badges .sb { white-space: normal; height: auto; min-height: 24px; padding-block: 4px; line-height: 1.2; }
  .insight { flex-wrap: wrap; }
  .insight > .btn, .insight > a.btn { flex: 1 1 100%; }
  .segmented > a, .segmented > button, .segmented > label { white-space: nowrap; }
}
/* Ленты с горизонтальной прокруткой: их пункты НЕ сжимаются. Общий min-width: 0 выше
   разрешил флекс-детям ужиматься, и пункты полосы категорий наложились друг на друга
   («ЕлекМоро…») вместо того, чтобы уйти в прокрутку ленты. */
.catbar-scroll > *, .topbar-svcs > *, .chips-scroll > *, .tabs > *, .segmented > *, .dash-menu > *,
.gallery-thumbs > *, .rail-track > *, .subcats > *, .pal-scope > *, .share-list > *,
:where([class*="-scroll"]) > * { flex-shrink: 0; }
@media (max-width: 1024px) { .dash-menu > * { flex-shrink: 0; } }
@media (max-width: 420px) {
  .hero-chips .hint, .hero-chips > span:first-child:not(.chip) { flex-basis: 100%; }
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .stat + .stat { padding-left: 0; border-left: 0; }
}
/* Последний предохранитель от горизонтальной прокрутки: clip (не hidden) на корне не
   создаёт контейнер прокрутки, поэтому sticky-шапка и липкие колонки продолжают работать.
   Причины переполнения всё равно устраняются по месту — respond.js снимает этот
   предохранитель на время замера и показывает всё, что он бы спрятал. */
html, body { overflow-x: clip; }
/* пункты переключателя не сжимаются меньше своей подписи — лишнее уходит в прокрутку ленты */
.segmented > a, .segmented > button, .segmented > label { min-width: max-content; }
/* показатели в две колонки на 320 px: значок уступает место подписи, подвал переносится */
@media (max-width: 380px) {
  .kpi-ic { display: none; }
  .kpi-foot .delta + span { white-space: normal; overflow: visible; }
  .kpi-label { overflow-wrap: anywhere; }
}
/* длинные украинские слова в плитках («колекціонування») переносятся по слогам */
.cat b, .kpi-label, .stat span, .fact b, .fact span { overflow-wrap: anywhere; hyphens: auto; }
/* воронка на узком экране: подпись и число сверху, полоса — во всю ширину под ними */
@media (max-width: 420px) {
  .funnel-step { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .funnel-step .funnel-bar { grid-column: 1 / -1; order: 3; height: 12px; }
}
/* док на 320 px: подписи в одну строку, с многоточием, а не переносом «My / account» */
@media (max-width: 360px) {
  .dock > a, .dock > button { font-size: 9.5px; padding: 0 2px; }
  .dock > a > span:last-child, .dock > button > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* рекламный блок — чужая разметка: она не должна раздвигать нашу страницу */
/* ---------- рекламные места Adgora ----------
   Разметку вставляет чужой place.js, поэтому здесь только рамка и поведение.
   Главное правило: НЕЗАПОЛНЕННОЕ место не занимает ни высоты, ни отступов.
   Пока <ins> пуст, блок убран целиком; заполнится — :has пересчитается сам и
   блок появится. Без этого каждая страница несла по 18 px сверху и снизу на
   каждое место, а на странице их до трёх. */
.adgora-slot { max-width: 728px !important; overflow: hidden; } /* place.js sets inline max-width:970px; margin:18px auto is already inline so it re-centers once narrower */
/* ВАЖНОЕ ИСКЛЮЧЕНИЕ — верхнее место. place.js сам закладывает под него высоту
   (min-height: min(90px, 12.4vw) у <ins>), и это не украшение: объявление приходит
   на медленной сети к 4-5-й секунде, и без резерва содержимое страницы прыгает вниз
   на 100 px уже после того, как человек начал читать. Замер 18.09.2026 (Pixel 7,
   CPU x4, 1.6 Мбит/с): три прогона подряд, сдвиг div.wrap.pg на 100 px, CLS 0,107.
   Пряча пустое место, прежняя правка отменяла этот резерв — то есть лечила пустоту
   ценой прыжка. Верхнее место (первый ребёнок main) резерв сохраняет; остальные,
   которые ниже сгиба, по-прежнему схлопываются и пустоты не создают. */
.adgora-slot:not(:has(ins:not(:empty))):not(main > .adgora-slot:first-child) { display: none !important; }
main > .adgora-slot:first-child { margin-top: 0 !important; }
/* Подпись сети — теми же красками, что подписи сайта, а не своим серым. */
.adgora-slot .adgora-label { color: var(--ink-4, #857f93) !important; font-family: var(--f-text) !important; }
.adgora-slot ins { border-radius: var(--r-md); overflow: hidden; }