/* Shared vehicle cards on the homepage and in both catalogues. */
.car-card{container-type:inline-size;display:flex;flex-direction:column;min-width:0;background:#fff}
.car-media{position:relative;min-width:0;overflow:hidden;border-radius:10px;background:var(--surface)}
.car-photo{display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.car-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.car-country-flag{position:absolute;top:12px;left:12px;width:28px;height:28px;object-fit:contain;background:#fff;border-radius:50%;border:1px solid #000;pointer-events:none}
.photo-count{position:absolute;bottom:12px;right:12px;display:flex;align-items:center;gap:6px;background:oklch(20% .015 255 / .8);color:#fff;padding:4px 7px;border-radius:5px;pointer-events:none;font-size:11px;line-height:1.5}
:is(.i-page #main,.t-recommended) .photo-count svg{width:14px;height:14px}
.car-copy{min-width:0;padding-top:18px}
:is(.i-page #main,.t-recommended) .car-copy :is(h2,h3){font-size:25px;line-height:1.2;font-weight:700;letter-spacing:-.03em;text-wrap:initial;overflow-wrap:anywhere}
:is(.i-page #main,.t-recommended) .car-copy :is(h2,h3) a:hover{color:var(--blue)}
.car-subtitle{display:flex;align-items:baseline;gap:10px;margin-top:6px;min-width:0;max-width:100%}
.car-subtitle:empty{display:none}
:is(.i-page #main,.t-recommended) .variant{min-width:0;font-size:13px;line-height:1.55;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.i-page #main,.t-recommended) .car-origin{flex-shrink:0;font-size:12px;line-height:1.55;color:var(--muted)}
.variant+.car-origin::before{content:'·';margin-right:8px}
:is(.i-page #main,.t-recommended) .car-specs{display:flex;flex-wrap:wrap;list-style:none;padding:0;gap:10px 18px;margin-top:16px;font-size:13px;line-height:1.5;color:var(--ink)}
.car-specs li{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}
.car-specs li>span{overflow-wrap:anywhere}
:is(.i-page #main,.t-recommended) .car-specs svg{width:17px;height:17px;stroke-width:1.5;color:var(--muted)}
.car-price{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;margin-top:auto;padding-top:20px}
.price-estimate{min-width:0;display:flex;flex-direction:column}
.price-estimate>span{order:1;display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:5px}
.price-estimate>strong{display:block;font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums}
.price-estimate>small{order:2;display:block;color:var(--muted);font-size:11px;line-height:1.5}
:is(.i-page #main,.t-recommended) .car-open{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:46px;min-width:46px;flex-shrink:0;padding:12px 16px;border-radius:8px;background:var(--blue);color:#fff;font-size:13px;font-weight:700;line-height:1.5;transition:background .18s ease-out}
:is(.i-page #main,.t-recommended) .car-open svg{width:21px;height:21px}
:is(.i-page #main,.t-recommended) .car-open:hover{background:var(--blue-hover)}
@container(max-width:420px){
 :is(.i-page #main,.t-recommended) .car-copy :is(h2,h3){font-size:23px}
 .price-estimate>strong{font-size:27px}
 .car-open>span{display:none}
 :is(.i-page #main,.t-recommended) .car-open{padding:12px}
}
@container(max-width:320px){
 :is(.i-page #main,.t-recommended) .car-copy :is(h2,h3){font-size:22px}
 .price-estimate>strong{font-size:24px}
 :is(.i-page #main,.t-recommended) .car-specs{gap:9px 14px;font-size:12px}
 :is(.i-page #main,.t-recommended) .car-origin{display:none}
}
@container(max-width:280px){
 .car-price{flex-wrap:wrap}
 .price-estimate>strong{font-size:22px;white-space:normal;overflow-wrap:anywhere}
 :is(.i-page #main,.t-recommended) .car-open{margin-left:auto}
}

.car-card a{text-decoration:none;color:inherit}
.car-card :is(h2,h3,p,ul){margin:0}
.car-card svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.car-card button{font:inherit;cursor:pointer;touch-action:manipulation}
.car-card .car-photo-nav{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:6px;background:rgb(255 255 255 / .94);color:var(--ink);opacity:0;transition:opacity .18s ease-out,background .18s ease-out}
.car-card .car-photo-nav svg{width:20px;height:20px}
.car-card .car-photo-nav.is-prev{left:8px}
.car-card .car-photo-nav.is-next{right:8px}
.car-card .car-photo-nav.is-prev svg{transform:rotate(180deg)}
.car-card .car-media:hover .car-photo-nav,.car-card .car-media:focus-within .car-photo-nav{opacity:1}
.car-card .car-photo-nav:hover{background:#fff}
.car-card .photo-count svg{width:14px;height:14px}
.car-card .no-photo{height:100%;display:grid;place-items:center;padding:20px;font-size:13px;color:var(--muted)}
.car-card .car-photo img.is-broken{visibility:hidden}
.car-card .car-photo:has(img.is-broken)::before{content:'Фото временно недоступно';position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--muted)}
.car-card :focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media(hover:none){.car-card .car-photo-nav{opacity:1}}
@media(prefers-reduced-motion:reduce){.car-card .car-photo-nav,.car-card .car-open{transition:none}}
/* An unavailable total must remain legible in the narrow homepage rail. */
:is(.i-page #main,.t-recommended) .price-estimate[data-price-kind=incomplete]>strong{font-size:clamp(20px,6cqi,26px);white-space:normal}