/* Kupihub — фильтры в карточках и выбор автомобиля (марка, модель, поколение) */
.sheet.flt{background:color-mix(in srgb,var(--b) 5%,var(--bg))}
.fpad{padding:14px 16px 8px}
.fpad .fh{padding:0 4px 10px}
.fcd{background:var(--card);border-radius:20px;box-shadow:var(--sh);padding:14px 16px 16px;margin-bottom:12px}
.fct{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.fct b{font-size:16px;letter-spacing:-.01em}
.fct small{color:var(--tx2);font-size:13px}
.fcd>.gl:first-child,.fcd>.fct+.gl,.fcd>.fct+.fr label.f,.fcd>.fct+label.f{margin-top:0}
.fcd .gl{display:block;width:auto;margin-right:0;margin-top:14px}
.fcd .wrap{padding:0}
.fcd .chip{background:var(--fld);border-color:transparent;box-shadow:none;border-radius:12px;font-size:14px;padding:8px 13px}
.fcd .chip.on{background:var(--grad);color:#fff}
.fcd .row.sw{padding:12px 0;margin:0;border-bottom:1px solid var(--line);background:none;box-shadow:none}
.fcd .row.sw:last-of-type{border-bottom:0}
/* Все / С пробегом / Новые */
.fseg{display:flex;padding:4px;margin-bottom:12px;border-radius:16px;background:var(--card);box-shadow:var(--sh)}
.fseg button{flex:1;border:0;background:none;border-radius:12px;padding:10px 4px;font-size:14px;font-weight:600;color:var(--tx2);transition:background .2s,color .2s}
.fseg button.on{background:var(--grad);color:#fff;box-shadow:0 6px 14px -6px rgba(26,99,220,.6)}
/* быстрые диапазоны цены */
.fq{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fq button{border:0;border-radius:999px;padding:6px 11px;background:var(--fld);color:var(--tx2);font-size:13px;font-weight:500}
.fq button.on{background:color-mix(in srgb,var(--b) 16%,transparent);color:var(--b);font-weight:600}
/* кузов — плитки с силуэтами */
.fbd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fbd button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;border:1.5px solid transparent;border-radius:14px;background:var(--fld);padding:8px 2px 7px;font-size:12px;font-weight:500;color:var(--tx2);transition:background .2s,border-color .2s}
.fbd button svg{width:54px;height:26px;color:color-mix(in srgb,var(--tx2) 85%,transparent)}
.fbd button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbd button.on{background:var(--card);border-color:var(--b);color:var(--b);font-weight:600;box-shadow:0 6px 14px -8px rgba(26,99,220,.55)}
.fbd button.on svg{color:var(--b)}
.fbd button.z{opacity:.5}
/* цвета */
.fsw{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.fsw button{width:34px;height:34px;border-radius:50%;border:0;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.fsw button.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--b)}

/* ---------- Блок «Какой автомобиль ищете» ---------- */
.cpb{border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--b) 6%,var(--card)),color-mix(in srgb,var(--b) 13%,var(--card)));margin-bottom:8px}
.cpr{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer}
.cpr+.cpr{border-top:1px solid color-mix(in srgb,var(--b) 14%,transparent)}
.cpr.err{box-shadow:inset 0 0 0 2px #e5484d;border-radius:14px}
.cpk{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--card);color:var(--b);font-weight:800;font-size:12px;box-shadow:0 1px 3px rgba(20,70,160,.14)}
.cpt{flex:1;min-width:0;display:flex;flex-direction:column}
.cpt small{color:var(--tx2);font-size:12px}
.cpt b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpt b.nil{color:var(--tx2);font-weight:500}
.cpx{flex:none;width:24px;height:24px;border:0;border-radius:50%;background:color-mix(in srgb,var(--b) 14%,transparent);color:var(--b);font-size:11px;font-weight:700;padding:0}
.cpadd{display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--b);font-weight:600;font-size:14px;padding:6px 2px 0}
.cpadd i{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;border:1.5px dashed var(--b);font-style:normal}

/* логотипы марок: всегда на белой подложке, чтобы тёмные логотипы были видны */
.clg{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(20,70,160,.14),inset 0 0 0 1px rgba(20,70,160,.06);overflow:hidden}
.clg img{width:80%;height:80%;object-fit:contain;display:block}
.clg.mono{color:#fff;font-weight:800;font-size:13px;letter-spacing:-.02em;box-shadow:none}
.clg.sm{width:28px;height:28px;border-radius:9px;font-size:10px}
.clg.lg{width:52px;height:52px;border-radius:16px;font-size:15px}

/* ---------- Окно выбора ---------- */
.cpbar{flex:none;padding:6px 16px 6px}
.cpsr{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:14px;background:var(--fld);color:var(--tx2);margin-top:6px}
.cpsr svg{width:18px;height:18px;flex:none}
.cpsr input{margin:0;height:100%;background:none;padding:0;box-shadow:none!important}
.cptabs{display:flex;gap:6px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}
.cptabs::-webkit-scrollbar{display:none}
.cptabs button{flex:none;border:0;border-radius:999px;padding:6px 12px;background:var(--fld);color:var(--tx2);font-size:13px;font-weight:600}
.cptabs button.on{background:var(--tx);color:var(--bg)}
.cps{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;font-size:12.5px;color:var(--tx2)}
.cps::-webkit-scrollbar{display:none}
.cps b{flex:none;padding:4px 10px;border-radius:999px;background:var(--fld);font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cps b.on{background:color-mix(in srgb,var(--b) 15%,transparent);color:var(--b)}
.cps b.ok{background:var(--grad);color:#fff}
.cps i{font-style:normal}
.cpsel{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px}
.cpsel button{display:flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:6px 8px 6px 12px;background:color-mix(in srgb,var(--b) 14%,transparent);color:var(--b);font-weight:600;font-size:13px}
.cpsel i{font-style:normal;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--b) 18%,transparent);font-size:9px}
.cpml{position:relative}
.cph{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px 8px}
.cph b{font-size:15px}
.cph small{color:var(--tx2);font-size:12.5px}
.cptl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 30px 0 16px}
.cptile{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;border:0;border-radius:16px;background:var(--fld);padding:10px 4px 9px;color:var(--tx)}
.cptile b{max-width:100%;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cptile small{font-size:10.5px;color:var(--tx2)}
.cptile.on{background:var(--card);box-shadow:0 0 0 2px var(--b),0 8px 18px -10px rgba(26,99,220,.6)}
.cptile.on::after{content:"✓";position:absolute;top:6px;right:6px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--b);color:#fff;font-size:11px;font-weight:800}
.cplist{padding:0 16px}
.cplist.rail{padding-right:34px}
.cpl{padding:14px 0 4px;font-size:13px;font-weight:800;color:var(--b)}
.cpi{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.cpi .cpt b{font-size:15px}
.cpn{flex:none;font-size:12.5px;font-weight:600;color:var(--tx2);background:var(--fld);padding:3px 8px;border-radius:999px}
.cpc{flex:none;width:22px;height:22px;border-radius:7px;border:1.8px solid color-mix(in srgb,var(--tx2) 55%,transparent);position:relative}
.cpc.on{background:var(--b);border-color:var(--b)}
.cpc.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800}
.cpg{flex:none;border:0;border-radius:999px;padding:5px 10px;background:color-mix(in srgb,var(--b) 12%,transparent);color:var(--b);font-size:12px;font-weight:600}
.cprail{position:absolute;right:2px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;padding:4px 0;border-radius:10px;background:color-mix(in srgb,var(--bg) 80%,transparent)}
.cprail button{border:0;background:none;padding:0 5px;font-size:10px;line-height:12.5px;font-weight:700;color:var(--b)}
.cpman{margin:16px;padding:14px;border-radius:16px;background:var(--fld)}
.cpman b{font-size:14px}
.cpfoot{flex:none}
/* поколения */
.cpgh{display:flex;align-items:center;gap:12px;padding:10px 16px 0}
.cpgh b{display:block;font-size:19px;letter-spacing:-.01em}
.cpgh small{color:var(--tx2);font-size:13px}
.cpy{position:relative;height:46px;margin:14px 20px 6px}
.cpy s{position:absolute;left:0;right:0;top:30px;height:2px;background:var(--line)}
.cpy i{position:absolute;height:10px;border-radius:6px;background:color-mix(in srgb,var(--b) 22%,transparent)}
.cpy i.on{background:var(--grad)}
.cpy em{position:absolute;top:35px;font-style:normal;font-size:10.5px;color:var(--tx2);transform:translateX(-50%)}
.cpy em:first-of-type{transform:none}
.cpy em:last-of-type{transform:translateX(-100%)}
.cpgs{display:flex;flex-direction:column;gap:10px;padding:6px 16px 0}
.cpgn{display:flex;align-items:stretch;border-radius:18px;background:var(--fld);overflow:hidden;border:2px solid transparent;cursor:pointer}
.cpgn.on{background:var(--card);border-color:var(--b);box-shadow:0 10px 22px -14px rgba(26,99,220,.7)}
.cpgn .pic{position:relative;flex:none;width:108px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(150deg,color-mix(in srgb,var(--b) 10%,var(--card)),color-mix(in srgb,var(--b) 26%,var(--card)))}
.cpgn.on .pic{background:var(--grad)}
.cpgn .pic svg{position:relative;z-index:1;width:88px;height:40px;margin-top:16px;color:color-mix(in srgb,var(--b) 55%,var(--tx2))}
.cpgn.on .pic svg{color:#fff}
.cpgn .pic em{position:absolute;left:8px;top:5px;right:6px;font-style:normal;font-weight:800;font-size:22px;letter-spacing:-.03em;color:color-mix(in srgb,var(--b) 30%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpgn.on .pic em{color:rgba(255,255,255,.7)}
.cpgn .tx{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:12px 12px}
.cpgn .tx b{font-size:16px}
.cpgn .tx b span{font-weight:500;color:var(--tx2);font-size:13px}
.cpgn .tx small{color:var(--tx2);font-size:13px}
.cpgn .tx .cpn{align-self:flex-start;margin-top:3px;background:var(--card)}
.cpgn.on .tx .cpn{background:color-mix(in srgb,var(--b) 14%,transparent);color:var(--b)}
.cpgn .cpc{align-self:center;margin-right:14px;border-radius:50%}
@media(min-width:768px){.cptl{grid-template-columns:repeat(6,1fr)}.fbd{grid-template-columns:repeat(5,1fr)}}
/* админ: свой логотип марки */
.cplu{display:flex;align-items:center;gap:10px;padding:2px 0 8px;font-size:13px;color:var(--tx2)}
.cplu span:not(.clg){flex:1}
.cplu .lnk{font-size:14px;cursor:pointer}