/* 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}}