/* KupiHub — страница объявления, карточки в ленте, экран приветствия */

/* ---------- Карточка в ленте: короче — фото 4:3, плашки поверх фото ---------- */
.card{border-radius:18px}
.card .tile{aspect-ratio:4/3.3}
.cb{padding:8px 11px 10px;display:flex;flex-direction:column;gap:0}
.cb b{font-size:16.5px;letter-spacing:-.01em;line-height:1.25}
.cb p{margin:1px 0 0;font-size:14px;line-height:1.25;height:auto;max-height:2.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--tx)}
.cb .at{margin:2px 0 0}
.cb small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbd{position:absolute;left:8px;bottom:8px;right:8px;display:flex;flex-wrap:nowrap;overflow:hidden;gap:4px;pointer-events:none}
.cbd span{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tile .cbd span{background:rgba(255,255,255,.88);color:#1559d6}
.tile .cbd .bad{background:rgba(255,255,255,.88);color:#d13438}
.tile .cbd .trg2{background:rgba(255,255,255,.88);color:#1f8a57}
.tile .cbd .dl2{background:rgba(255,255,255,.88);color:#a35f00}
.cbd span,.ibd span{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:color-mix(in srgb,var(--b) 12%,transparent);color:var(--b);font-size:11px;font-weight:600;white-space:nowrap}
.cbd .ok,.ibd .ok,.cbd .nw,.ibd .nw{background:color-mix(in srgb,var(--b) 12%,transparent);color:var(--b)}
.cbd .bad,.ibd .bad{background:rgba(229,72,77,.12);color:#d13438}
.cbd .trg2,.ibd .trg2{background:rgba(48,164,108,.15);color:#1f8a57}
.cbd .dl2,.ibd .dl2{background:rgba(245,165,36,.16);color:#a35f00}

/* ---------- Страница объявления ---------- */
@media(max-width:719px){
  /* окно почти на весь экран телефона */
  .sheet.full{height:calc(100% - env(safe-area-inset-top,0px) - 6px);max-height:none;border-radius:22px 22px 0 0}
  .sheet.full .gw .sl{aspect-ratio:4/3.3}
}
.ipad{padding-top:14px}
.it{margin:0;padding:0;background:none;-webkit-text-fill-color:currentColor;width:auto;font-size:22px;line-height:1.22;font-weight:700;letter-spacing:-.015em;word-break:break-word}
.isub{margin-top:4px;color:var(--tx2);font-size:14.5px}
.ipr{margin-top:8px;font-size:28px;font-weight:800;letter-spacing:-.02em}
.ibd{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.ibd span{height:26px;padding:0 11px;font-size:13px}
.ipad .meta{margin-top:2px}
/* главные характеристики плитками */
.iks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.iks div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:11px 10px 10px;border-radius:16px;background:var(--fld)}
.iks svg{width:20px;height:20px;color:var(--b);margin-bottom:4px}
.iks b{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iks small{color:var(--tx2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* описание и характеристики: главное видно, остальное — «Подробнее» */
.ds{margin:0;white-space:pre-line;line-height:1.45}
.xp:not(.open) .ds{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.xp:not(.open) .xh{display:none}
.xpb{margin-top:8px;font-weight:600}
.xpb.wide{width:100%;height:44px;margin-top:10px;font-size:15px}
.ilist{border-radius:16px;background:var(--fld);padding:2px 14px}
.ilist div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.ilist div:last-child,.xp:not(.open) .ilist div:nth-child(5){border-bottom:0}
.ilist span{color:var(--tx2)}
.ilist b{font-weight:600;text-align:right}

.tile .vbadge.sm~.cbd{left:44px}
/* карточки шире: меньше поля по краям и между карточками */
@media(max-width:719px){.grid{padding:0 8px;gap:8px}.strip{grid-auto-columns:minmax(150px,47%);gap:8px;padding:0 8px 8px}.card{border-radius:16px}}
/* связь с продавцом — на странице, без нижней панели */
.icta{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.icta .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border-radius:16px;font-size:16.5px;font-weight:700;text-decoration:none}
.icta .btn svg{width:20px;height:20px}
.icta .btn.sec{background:var(--card);color:var(--tx)}
.icta .icall{color:var(--b)!important}
.icta .icr{display:flex;gap:10px}
.icta .icr .btn{flex:1}
.isold{padding:12px 14px;border-radius:14px;background:rgba(48,164,108,.12);color:#1f8a57;font-weight:700;text-align:center}
.sheet.full .ib2{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
/* подача объявления: те же переключатели, что в фильтре */
.wgl{display:block;width:auto;margin-top:16px}
.wseg{margin:8px 0 0}
.wbd{margin-top:8px}
#wz .chip.o{border-radius:12px;background:var(--fld);border-color:transparent;box-shadow:none;font-size:15px;padding:9px 14px}
#wz .chip.o.on{background:var(--grad);color:#fff}

/* ---------- Главная: категории — два ряда карточек с прокруткой вбок (размеры как у больших площадок) ---------- */
:root{--ctl-bg:linear-gradient(135deg,#fdfeff 0%,#eef3fa 60%,#e5edf8 100%);--ctl-bd:rgba(255,255,255,.95);--ctl-tx:#101b33;--ctl-sh:0 8px 18px -12px rgba(25,60,130,.35),0 1px 2px rgba(25,60,130,.06);--ctl-glow:drop-shadow(0 3px 4px rgba(0,0,0,.12))}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--ctl-bg:linear-gradient(135deg,#1d2c4b 0%,#16233d 100%);--ctl-bd:rgba(110,168,255,.22);--ctl-tx:#eef3ff;--ctl-sh:0 10px 22px -14px rgba(0,0,0,.8);--ctl-glow:drop-shadow(0 0 8px rgba(160,200,255,.18))}}
:root[data-theme=dark]{--ctl-bg:linear-gradient(135deg,#1d2c4b 0%,#16233d 100%);--ctl-bd:rgba(110,168,255,.22);--ctl-tx:#eef3ff;--ctl-sh:0 10px 22px -14px rgba(0,0,0,.8);--ctl-glow:drop-shadow(0 0 8px rgba(160,200,255,.18))}
.ctg{display:flex;flex-direction:column;gap:8px;overflow-x:auto;padding:14px 16px 4px;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding:16px}
.ctg::-webkit-scrollbar{display:none}
.ctr{display:flex;gap:8px}
.ctl{position:relative;flex:none;display:block;height:74px;padding:0;border:1px solid var(--ctl-bd);border-radius:16px;background:var(--ctl-bg);box-shadow:var(--ctl-sh);color:var(--ctl-tx);text-align:left;overflow:hidden;font:inherit;cursor:pointer;transition:transform .15s}
.ctl:active{transform:scale(.96)}
.ctl span{position:absolute;z-index:1;left:11px;top:9px;right:8px;font-size:14px;font-weight:500;line-height:1.18}
.ctl img{position:absolute;right:0;bottom:0;max-height:50px;max-width:66%;object-fit:contain;object-position:right bottom;pointer-events:none;filter:var(--ctl-glow)}
.ctl.w1{width:84px}.ctl.w2{width:108px}.ctl.w3{width:132px}.ctl.w4{width:118px}
.ctl .cdots{position:absolute;right:10px;bottom:9px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--b);color:#fff;font-style:normal;font-size:11px;letter-spacing:1px}
@media(min-width:720px){.ctg{padding:16px 20px 4px}.ctl{height:92px}.ctl span{font-size:15px;left:14px;top:12px}.ctl img{max-height:62px}.ctl.w1{width:104px}.ctl.w2{width:132px}.ctl.w3{width:160px}.ctl.w4{width:144px}}
.lst.cats .cim{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--ctl-bg);border:1px solid var(--ctl-bd);font-size:28px}
.lst.cats .cim img{max-width:42px;max-height:40px;object-fit:contain}

/* ---------- Рекламный баннер: пропорции как у широкого баннера (≈2.65 : 1) ---------- */
@media(max-width:719px){
  .adbig{margin:16px 16px 0;min-height:0;aspect-ratio:2.65/1;padding:14px 18px;border-radius:18px}
  .adbig .adbt b{font-size:18px;line-height:1.15}
  .adbig .adbt p{margin-top:3px;font-size:13px}
  .adbig .adcta{margin-top:8px;padding:6px 12px;border-radius:10px;font-size:13px}
  .adbig small{top:8px;right:12px}
  .adbig .ae2{font-size:84px;right:18px;bottom:10px}
  .adb{margin:16px 16px 0;min-height:0;aspect-ratio:2.65/1;border-radius:18px}
}
/* переключатель вкладок в «Избранном» (4 вкладки) помещается на узком экране */
@media(max-width:719px){.seg button{flex:auto;padding:7px 4px;font-size:13.5px;white-space:nowrap}}

/* метка на карте при подаче */
.mpk{height:240px;margin-top:8px;border-radius:16px;overflow:hidden;background:var(--fld);position:relative;z-index:0}
.mpb{display:flex;align-items:center;gap:12px;margin-top:10px}
.mpb .btn{height:40px;padding:0 16px;font-size:14.5px}
.mpk .leaflet-control-attribution{font-size:10px}

/* ---------- Плитки категорий по макету: стрелка, фото из макета, светлая и тёмная темы ---------- */
:root{--ctl-arr:#1a63dc}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--ctl-bg:#15273e;--ctl-bd:#405572;--ctl-tx:#f2f6ff;--ctl-sh:0 10px 22px -16px rgba(0,0,0,.9);--ctl-arr:#3d8bff;--ctl-glow:none}}
:root[data-theme=dark]{--ctl-bg:#15273e;--ctl-bd:#405572;--ctl-tx:#f2f6ff;--ctl-sh:0 10px 22px -16px rgba(0,0,0,.9);--ctl-arr:#3d8bff;--ctl-glow:none}
.ctl .carr{position:absolute;z-index:1;left:11px;bottom:9px;width:18px;height:18px;color:var(--ctl-arr)}
.ctl img.clt,.ctl img.cdk{max-height:62px;max-width:62%;filter:none}
.ctl img.clt{mix-blend-mode:multiply}
.ctl img.cdk{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ctl img.clt,:root:not([data-theme=light]) .cim img.clt{display:none}:root:not([data-theme=light]) .ctl img.cdk,:root:not([data-theme=light]) .cim img.cdk{display:block}}
:root[data-theme=dark] .ctl img.clt,:root[data-theme=dark] .cim img.clt{display:none}
:root[data-theme=dark] .ctl img.cdk,:root[data-theme=dark] .cim img.cdk{display:block}
.lst.cats .cim{overflow:hidden}
.lst.cats .cim img.clt{mix-blend-mode:multiply}
.lst.cats .cim img.cdk{display:none}
@media(min-width:720px){.ctl img.clt,.ctl img.cdk{max-height:78px}.ctl .carr{left:14px;bottom:12px}}
/* место под стрелку и фото: плитки чуть шире, фото не заходит на название */
.ctl.w1{width:96px}.ctl.w2{width:122px}.ctl.w3{width:146px}.ctl.w4{width:132px}
.ctl img.clt,.ctl img.cdk{max-height:52px;max-width:54%}
@media(min-width:720px){.ctl.w1{width:116px}.ctl.w2{width:146px}.ctl.w3{width:176px}.ctl.w4{width:158px}.ctl img.clt,.ctl img.cdk{max-height:64px}}
/* прокрутка категорий пальцем: плитка не «нажимается» при свайпе, нет выделения и меню долгого нажатия */
.ctg{touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.ctl{touch-action:pan-x pan-y;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:none}
.ctl:active{transform:none}
.ctl.prs{transform:scale(.96);transition:transform .12s}
/* логотип KupiHub: «Hub» светлее в тёмной теме */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .klh{fill:#4c9bff}}
:root[data-theme=dark] .klh{fill:#4c9bff}
/* фото в карточке листаются: дорожка из фото сдвигается свайпом */
.cgal{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cgt{display:flex;width:100%;height:100%;will-change:transform}
.cgt img{position:static;flex:none;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.tile .cdots{position:absolute;left:0;right:0;top:8px;display:flex;justify-content:center;gap:4px;pointer-events:none}
.tile .cdots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.35)}
.tile .cdots i.on{background:#fff;width:14px;border-radius:3px}
/* «Расположение» на странице объявления */
.locb{margin:8px 0 0}
.locq{display:flex;align-items:flex-start;gap:6px;margin:0 0 8px;font-size:15px}
.locq svg{width:18px;height:18px;flex:none;color:var(--b);margin-top:1px}
.admap{height:200px;border-radius:16px;overflow:hidden;background:var(--fld);position:relative;z-index:0}
.admap .leaflet-control-attribution{font-size:10px}
.locl{display:flex;gap:8px;margin-top:10px}
.locl .btn{flex:1;height:44px;display:flex;align-items:center;justify-content:center;font-size:15px;text-decoration:none}
/* профиль продавца */
.spf{width:calc(100% - 32px);margin:10px 16px 0;height:44px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px}
.spf svg{width:19px;height:19px}
.spcv{height:110px;margin:0 16px;border-radius:18px;background-size:cover;background-position:center}
.sinfo.spc{margin-top:-34px;position:relative}
.sinfo.spc .av{border:3px solid var(--card);box-shadow:var(--sh)}
.spab{display:flex;flex-wrap:wrap;gap:6px 12px;margin:10px 16px 0;color:var(--tx2);font-size:13.5px}
.spab span{display:inline-flex;align-items:center;gap:4px}.spab svg{width:15px;height:15px}
.spab .on{color:#1f8a57}.spab .ok{color:var(--b)}
.spbio{margin:10px 16px 0;white-space:pre-line;line-height:1.45;font-size:15px}
.sinfo.spc{align-items:flex-start}.sinfo.spc .rt{padding-top:38px}
@media(hover:none){.card:active{transform:none}}
/* нижнее меню ниже, ближе к краю экрана: на iPhone отступ под «полоску» меньше системного запаса */
@media(max-width:719px){.tb{padding:6px 8px max(6px,calc(env(safe-area-inset-bottom,0px) - 16px))}.tb button.add{margin-top:-10px}}
/* профиль продавца — на весь экран, прокручивается целиком */
.sheet.pagefs{top:0;bottom:auto;height:100dvh;max-height:none;border-radius:0}
.sheet.pagefs .grab{display:none}
.sheet.pagefs .ch{position:sticky;top:0;z-index:5;background:var(--bg);padding-top:calc(10px + env(safe-area-inset-top,0px))}
@media(min-width:720px){.sheet.pagefs{max-width:760px}}
.sinfo.spc small{white-space:normal;overflow:visible;text-overflow:clip;display:block}
/* профиль продавца в стиле своего профиля */
.spml .cvr{margin-top:12px}
.spml .acvf{margin-top:6px}
.spml .spsn{font-size:14px}.spml .spsn.on{color:#1f8a57}
.spml .sptp{font-size:13px}
.spml .pfb .acts{margin-top:14px;padding:0}
.spml .pfb .acts .btn{width:100%}
.spml .pfb .stat small{font-size:12px}