/*
 * Каталог на странице страны. Пишется руками, подключается после CSS вёрстки страны
 * (assets/blocks/p-kitay/styles.css) и опирается на её токены: --primary, --border,
 * --radius, --shadow, --muted. Все правила — внутри .dvb-inner, как и у вёрстки.
 *
 * Раскладка: фильтр слева (липкий), выдача справа. До 1024 px фильтр уезжает
 * в выезжающую панель с кнопкой «Показать N» внизу.
 */

/* -------------------------------------------------- живые секции вёрстки */

.dvb-inner .hero-badge { color: #fff; text-decoration: none; transition: background .18s; }
.dvb-inner .hero-badge:hover { color: #fff; background: rgb(11 28 48 / 96%); }

.dvb-inner .mini-car-card img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--surface-2); }
.dvb-inner .mini-car-link { color: inherit; }

.dvb-inner .brand-grid > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text); text-align: center; }
.dvb-inner .brand-grid > a small { font-size: 11px; font-weight: 400; color: var(--muted); }
.dvb-inner .brand-grid > a:hover { color: var(--primary); border-color: var(--primary); }

.dvb-inner .selector-layout .tab { display: inline-flex; align-items: center; cursor: pointer; }
.dvb-inner .selector-layout .tab:has(input:checked) { color: #fff; background: var(--primary); }
.dvb-inner .selector-layout .tab:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.dvb-inner .filter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dvb-inner .selector-aside .btn span { font-weight: 400; opacity: .85; }

.dvb-inner .calculator-note { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.dvb-inner .calculator-box .btn { margin-top: 18px; }
.dvb-inner .messengers a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 10px; color: #fff; font-size: 13px; }

.dvb-inner .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dvb-inner .breadcrumbs li + li::before { content: "›"; margin-right: 6px; color: var(--muted); }
.dvb-inner .breadcrumbs a { color: inherit; }

/* ------------------------------------------------------------- каталог */

.dvb-inner .catalog__head { display: block; }
/* У вёрстки #catalog .section-head > div — строка с чипами; у нас заголовок и примечание в столбик. */
.dvb-inner #catalog .catalog__head > div { display: block; }
.dvb-inner .catalog__note { max-width: 860px; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.dvb-inner .catalog__layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; }
.dvb-inner .catalog__results { min-width: 0; transition: opacity .15s; }
.dvb-inner .catalog__results[aria-busy="true"] { opacity: .55; }

/* Фильтр */
.dvb-inner .catalog-filter {
	position: sticky;
	top: 16px;
	max-height: calc(100vh - 32px);
	overflow: hidden auto;
	overscroll-behavior: contain;
	padding: 18px 18px 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
	scrollbar-width: thin;
}
.dvb-inner .catalog-filter__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dvb-inner .catalog-filter__head strong { font-size: 17px; }
.dvb-inner .catalog-filter__close { display: none; }
.dvb-inner .catalog-filter__group { margin: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--border); min-width: 0; }
.dvb-inner .catalog-filter__group:first-of-type { border-top: 0; padding-top: 6px; }
.dvb-inner .catalog-filter__group legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; font-size: 13px; font-weight: 700; }
.dvb-inner .catalog-filter__group legend + * { clear: left; }
.dvb-inner .catalog-filter select,
.dvb-inner .catalog-filter input:not([type="checkbox"], [type="radio"]) {
	display: block;
	width: 100%;
	min-height: 42px;
	padding: 9px 11px;
	border: 1px solid var(--border-strong);
	border-radius: 9px;
	background: #fff;
	font-size: 14px;
}
.dvb-inner .catalog-filter select + select { margin-top: 8px; }
.dvb-inner .catalog-filter select:disabled { color: var(--muted); background: var(--surface-2); }
.dvb-inner .catalog-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.dvb-inner .catalog-seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: #e7eef9; }
.dvb-inner .catalog-seg label { position: relative; flex: 1 1 auto; }
.dvb-inner .catalog-seg input { position: absolute; opacity: 0; pointer-events: none; }
.dvb-inner .catalog-seg span { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 8px; border-radius: 8px; font-size: 13px; color: #425675; cursor: pointer; text-align: center; white-space: nowrap; }
.dvb-inner .catalog-seg input:checked + span { color: #fff; background: var(--primary); }
.dvb-inner .catalog-seg input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 1px; }

.dvb-inner .catalog-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dvb-inner .catalog-preset { min-height: 32px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 16px; background: #fff; color: #435a76; font-size: 12px; }
.dvb-inner .catalog-preset.is-active { color: var(--primary); border-color: var(--primary); background: #eef5ff; }

.dvb-inner .catalog-check { display: flex; align-items: center; gap: 9px; min-height: 34px; font-size: 14px; cursor: pointer; }
.dvb-inner .catalog-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); flex: 0 0 auto; }
.dvb-inner .catalog-check span { flex: 1; min-width: 0; line-height: 1.3; }
.dvb-inner .catalog-check small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.dvb-inner .catalog-check.is-empty { opacity: .45; }
.dvb-inner .catalog-check--hint { margin-top: 8px; align-items: flex-start; }
.dvb-inner .catalog-check--hint input { margin-top: 2px; }
.dvb-inner .catalog-check em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }

.dvb-inner .catalog-filter__foot {
	position: sticky;
	bottom: 0;
	display: grid;
	gap: 6px;
	margin: 0 -18px;
	padding: 12px 18px 16px;
	border-top: 1px solid var(--border);
	background: rgb(255 255 255 / 96%);
}
.dvb-inner .catalog-filter__reset { justify-self: center; min-height: 36px; display: inline-flex; align-items: center; font-size: 13px; color: var(--primary); }

/* Панель над выдачей */
.dvb-inner .catalog-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dvb-inner .catalog-toolbar__filters { display: none; min-height: 44px; }
.dvb-inner .catalog-toolbar__filters .ui-icon { width: 20px; height: 20px; }
.dvb-inner .catalog-toolbar__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 11px; }
.dvb-inner .catalog-toolbar__count { margin-right: auto; font-size: 14px; color: var(--muted); }
.dvb-inner .catalog-toolbar__count strong { color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; }
.dvb-inner .catalog-toolbar__sort select { min-height: 42px; padding: 8px 30px 8px 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: #fff; font-size: 14px; }

.dvb-inner .catalog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.dvb-inner .catalog-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px 5px 12px; border-radius: 16px; background: #eef5ff; color: var(--primary); font-size: 13px; }
.dvb-inner .catalog-chips a span { font-size: 16px; line-height: 1; }
.dvb-inner .catalog-chips .catalog-chips__reset { background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* Карточка */
.dvb-inner .catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dvb-inner .car-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.dvb-inner .car-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
.dvb-inner .car-card__media img { width: 100%; height: 100%; object-fit: cover; }
.dvb-inner .car-card__badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 7px; background: rgb(255 255 255 / 94%); color: var(--text); font-size: 11px; font-weight: 700; }
.dvb-inner .car-card__badge--new { color: var(--success); }
.dvb-inner .car-card__badge--hp { top: auto; bottom: 10px; background: rgb(11 28 48 / 82%); color: #fff; font-weight: 400; }
.dvb-inner .car-card__photos { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 7px; background: rgb(11 28 48 / 70%); color: #fff; font-size: 11px; }
.dvb-inner .car-card__body { display: flex; flex: 1; flex-direction: column; padding: 14px 16px 16px; }
.dvb-inner .car-card__title { font-size: 17px; line-height: 1.25; }
.dvb-inner .car-card__sub { margin-top: 3px; font-size: 13px; color: var(--muted); }
.dvb-inner .car-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin-top: 12px; }
.dvb-inner .car-card__price strong { font-size: 21px; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dvb-inner .car-card__price span { font-size: 12px; color: var(--muted); }
.dvb-inner .car-card__cn { font-size: 12px; color: var(--muted); }
.dvb-inner .car-card__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.dvb-inner .car-card__specs div { min-width: 0; }
.dvb-inner .car-card__specs dt { font-size: 11px; color: var(--muted); }
.dvb-inner .car-card__specs dd { margin: 1px 0 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.dvb-inner .car-card__foot { margin-top: auto; padding-top: 14px; display: grid; gap: 8px; }
.dvb-inner .car-card__art { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Пагинация */
.dvb-inner .catalog-pages { display: grid; justify-items: center; gap: 14px; margin-top: 22px; }
.dvb-inner .catalog-pages__more { min-width: 240px; }
.dvb-inner .catalog-pages ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dvb-inner .catalog-pages a,
.dvb-inner .catalog-pages span[aria-current] { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 9px; font-size: 14px; font-variant-numeric: tabular-nums; }
.dvb-inner .catalog-pages a:hover { background: #eef5ff; }
.dvb-inner .catalog-pages span[aria-current] { color: #fff; background: var(--primary); font-weight: 700; }
.dvb-inner .catalog-pages__gap { display: grid; place-items: center; min-width: 24px; color: var(--muted); }

/* ------------------------------------------------------------ адаптив */

@media (max-width: 1279px) {
	.dvb-inner .catalog__layout { grid-template-columns: 260px minmax(0, 1fr); gap: 18px; }
	.dvb-inner .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
	.dvb-inner .catalog__layout { grid-template-columns: minmax(0, 1fr); }
	.dvb-inner .catalog-toolbar__filters { display: inline-flex; }
	.dvb-inner .catalog-filter {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 120;
		width: min(400px, 100%);
		max-height: none;
		border-radius: 0 var(--radius) var(--radius) 0;
		transform: translateX(-105%);
		transition: transform .25s ease;
		visibility: hidden;
	}
	.dvb-inner .catalog.is-filter-open .catalog-filter { transform: none; visibility: visible; }
	.dvb-inner .catalog.is-filter-open::before { content: ""; position: fixed; inset: 0; z-index: 110; background: rgb(12 24 41 / 45%); }
	.dvb-inner .catalog-filter__close { display: inline-flex; }
	.dvb-inner .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
	.dvb-inner .catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.dvb-inner .catalog-toolbar { flex-wrap: wrap; }
	.dvb-inner .catalog-toolbar__count { order: -1; width: 100%; }
	.dvb-inner .catalog-toolbar__sort { flex: 1; }
	.dvb-inner .catalog-toolbar__sort select { width: 100%; }
	.dvb-inner .catalog-filter { width: 100%; border-radius: 0; }
	.dvb-inner .catalog-filter select,
	.dvb-inner .catalog-filter input:not([type="checkbox"], [type="radio"]) { font-size: 16px; } /* iOS не зумит поле */
	.dvb-inner .filter-grid label:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	.dvb-inner .catalog-filter { transition: none; }
}

/* ------------------------------------------------ все марки и модели (перелинковка страны) */
.dvb-inner .catalog-index__cols { columns: 4 220px; column-gap: 28px; }
.dvb-inner .catalog-index__brand { break-inside: avoid; margin-bottom: 18px; }
.dvb-inner .catalog-index__name { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.dvb-inner .catalog-index__name a { color: var(--text); text-decoration: none; }
.dvb-inner .catalog-index__name a:hover { color: #1689ab; }
.dvb-inner .catalog-index small { font-size: 12px; font-weight: 400; color: var(--muted); }
.dvb-inner .catalog-index ul { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; }
.dvb-inner .catalog-index li a { color: #34495f; text-decoration: none; }
.dvb-inner .catalog-index li a:hover { color: #1689ab; text-decoration: underline; }