/* ============================================================================
   catalog-dir.css — списки марок (/catalog/) и моделей марки (/catalog/МАРКА/) нового вида: FEATURE_CAT_DIRECTORY и FEATURE_CAT_*.
   Разметку строит js/catalog-dir.js (корень .cd, данные window.CD из include/catalog/directory.php). Файл общий для desktop и mobile
   (правится в desktop и копируется). Тёмная тема — html[data-theme="dark"]. Ритм 8px, радиусы 18 / 14 / 10.
   ============================================================================ */
.cd {
    --cd-ink: #0b1220; --cd-text: #1d2433; --cd-sub: #5b6472; --cd-faint: #8b93a5; --cd-line: #e4e8ef; --cd-line-soft: #eef1f5;
    --cd-card: #fff; --cd-soft: #f4f6fa; --cd-soft-2: #eceff5; --cd-accent: #1e4fe0; --cd-accent-bg: rgba(30, 79, 224, .08);
    --cd-ok: #15803d; --cd-ok-bg: rgba(22, 163, 74, .1); --cd-sale: #c2410c; --cd-sale-bg: rgba(234, 88, 12, .1); --cd-hot: #ff2f52;
    --cd-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px -18px rgba(16, 24, 40, .22);
    --cd-shadow-lg: 0 24px 60px -24px rgba(16, 24, 40, .35);
    --cd-head: 'Unbounded', 'Manrope', sans-serif;
    --cd-top: var(--hdr-height, 78px);
    color: var(--cd-text); margin: 4px 0 56px;
}
html[data-theme="dark"] .cd {
    --cd-ink: #eef1f6; --cd-text: #dfe4ec; --cd-sub: #9aa4b2; --cd-faint: #6b7482; --cd-line: #262b36; --cd-line-soft: #1f2430;
    --cd-card: #151922; --cd-soft: #1b202a; --cd-soft-2: #222835; --cd-accent: #6f9bff; --cd-accent-bg: rgba(91, 140, 255, .15);
    --cd-ok: #4ade80; --cd-ok-bg: rgba(74, 222, 128, .12); --cd-sale: #fb923c; --cd-sale-bg: rgba(251, 146, 60, .14);
    --cd-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .7); --cd-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .8);
}
.cd *, .cd *::before, .cd *::after { box-sizing: border-box; }
.cd [hidden] { display: none !important; }
.cd button, .cd select, .cd input { font-family: inherit; }
.cd a { color: inherit; text-decoration: none; }
.cd section, .cd-group { text-transform: none; letter-spacing: normal; }
/* прежняя разметка — для поисковиков и без скриптов; «Недавние» остаются на месте */
.cd.cd-ready .cd-ssr > *:not(#mRecentNav) { display: none !important; }

.cd-head { margin-bottom: 18px; }
.cd-h1 { margin: 0 0 6px; font-family: var(--cd-head); font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--cd-ink); }
.cd-sub { margin: 0; color: var(--cd-sub); font-size: 14.5px; }
.cd-h2 { margin: 0 0 12px; font-family: var(--cd-head); font-size: 17px; font-weight: 700; color: var(--cd-ink); letter-spacing: -.01em; }

/* ----- панель: поиск, сортировка, вид ----- */
.cd-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.cd-search { position: relative; flex: 1 1 260px; min-width: 0; display: block; }
.cd-search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cd-faint); font-size: 14px; pointer-events: none; }
.cd-search input { width: 100%; height: 46px; padding: 0 40px 0 40px; border: 1px solid var(--cd-line); border-radius: 14px; background: var(--cd-card); color: var(--cd-ink); font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s; }
.cd-search input:focus { border-color: var(--cd-accent); box-shadow: 0 0 0 4px var(--cd-accent-bg); }
.cd-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--cd-soft); color: var(--cd-sub); cursor: pointer; }
.cd-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cd-sub); }
.cd-sort select { height: 46px; padding: 0 34px 0 14px; border: 1px solid var(--cd-line); border-radius: 14px; background: var(--cd-card); color: var(--cd-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.cd-view { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--cd-soft); }
.cd-view button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--cd-sub); cursor: pointer; }
.cd-view button.is-on { background: var(--cd-card); color: var(--cd-accent); box-shadow: 0 1px 4px rgba(16, 24, 40, .12); }

/* ----- чипы и переключатели ----- */
.cd-chips-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 16px; }
.cd-regions, .cd-fchips, .cd-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cd-regions::-webkit-scrollbar, .cd-fchips::-webkit-scrollbar, .cd-tabs::-webkit-scrollbar { display: none; }
.cd-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--cd-line); border-radius: 99px; background: var(--cd-card); color: var(--cd-text); font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.cd-chip em { font-style: normal; color: var(--cd-faint); font-weight: 700; font-size: 12px; }
.cd-chip:hover { border-color: var(--cd-accent); }
.cd-chip.is-on { background: var(--cd-accent); border-color: var(--cd-accent); color: #fff; }
.cd-chip.is-on em { color: rgba(255, 255, 255, .75); }
.cd-insale { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--cd-text); cursor: pointer; user-select: none; }
.cd-insale input { position: absolute; opacity: 0; pointer-events: none; }
.cd-sw { position: relative; width: 42px; height: 24px; border-radius: 99px; background: var(--cd-line); transition: background .18s; flex: 0 0 auto; }
.cd-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); transition: transform .18s; }
.cd-insale input:checked + .cd-sw { background: #22c55e; }
.cd-insale input:checked + .cd-sw::after { transform: translateX(18px); }
.cd-insale input:focus-visible + .cd-sw { box-shadow: 0 0 0 4px var(--cd-accent-bg); }

.cd-tabs { margin-bottom: 12px; padding: 4px; background: var(--cd-soft); border-radius: 14px; width: fit-content; max-width: 100%; }
.cd-tab { flex: 0 0 auto; border: 0; background: none; padding: 9px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--cd-sub); cursor: pointer; white-space: nowrap; }
.cd-tab em { font-style: normal; font-weight: 700; opacity: .7; font-size: 12px; margin-left: 2px; }
.cd-tab.is-on { background: var(--cd-card); color: var(--cd-ink); box-shadow: 0 1px 4px rgba(16, 24, 40, .12); }

.cd-filters { display: grid; gap: 10px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--cd-line); border-radius: 18px; background: var(--cd-card); }
.cd-frow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cd-flabel { flex: 0 0 104px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cd-faint); }
.cd-spec-filters { display: grid; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--cd-line); }
.cd-ftools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.cd-reset { margin-left: auto; border: 0; background: none; color: var(--cd-accent); font-size: 13px; font-weight: 700; cursor: pointer; }

/* ----- популярные ----- */
.cd-popular { margin-bottom: 22px; }
.cd-pop-row { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; }
.cd-pop-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

/* ----- алфавит ----- */
.cd-alpha { position: sticky; top: var(--cd-top); z-index: 5; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 0 10px; padding: 8px 6px; border-radius: 14px; background: color-mix(in srgb, var(--cd-card) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--cd-line); }
.cd-alpha::-webkit-scrollbar { display: none; }
.cd-alpha a { flex: 0 0 auto; min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-size: 13px; font-weight: 800; color: var(--cd-sub); }
.cd-alpha a:hover { background: var(--cd-accent-bg); color: var(--cd-accent); }
.cd-group { scroll-margin-top: calc(var(--cd-top) + 56px); }
.cd-letter { margin: 20px 0 10px; font-family: var(--cd-head); font-size: 20px; font-weight: 700; color: var(--cd-ink); }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

/* ----- марки ----- */
.cd-marks .cd-grid { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); }
.cd-mark { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 14px 16px; border: 1px solid var(--cd-line); border-radius: 18px; background: var(--cd-card); box-shadow: var(--cd-shadow); text-align: center; transition: transform .18s, border-color .18s, box-shadow .18s; }
.cd-mark:hover { transform: scale(1.02); border-color: var(--cd-accent); box-shadow: var(--cd-shadow-lg); }
.cd-logo { width: 72px; height: 72px; display: grid; place-items: center; flex: 0 0 auto; }
.cd-logo img { max-width: 72px; max-height: 72px; object-fit: contain; }
.cd-mono { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--h, 220) 70% 92%); color: hsl(var(--h, 220) 55% 32%); font-size: 20px; font-weight: 800; letter-spacing: .02em; font-style: normal; }
html[data-theme="dark"] .cd-mono, html[data-theme="dark"] .cd-ph-mono { background: hsl(var(--h, 220) 35% 22%); color: hsl(var(--h, 220) 70% 80%); }
.cd-noimg { width: 64px; height: 64px; display: grid; place-items: center; background: #c9ccd1; color: #8b8f96; font-size: 11px; border-radius: 6px; }
.cd-mt { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: center; }
.cd-mn { font-size: 15px; font-weight: 800; color: var(--cd-ink); letter-spacing: .01em; }
.cd-mi, .cd-ml { font-size: 12.5px; color: var(--cd-sub); }
.cd-ml { font-weight: 700; color: var(--cd-sale); }
.cd-ml[data-zero] { color: var(--cd-faint); font-weight: 600; }
.cd-mp { display: none; margin-top: 4px; padding: 5px 10px; border-radius: 10px; background: var(--cd-accent-bg); color: var(--cd-accent); font-size: 12px; font-weight: 700; line-height: 1.35; }
.cd-mp.is-on { display: block; }
.cd-mp u { text-decoration: none; color: var(--cd-ink); }
.cd-mark.is-compact { flex: 0 0 150px; padding: 14px 10px 12px; gap: 8px; border-radius: 16px; }
.cd-mark.is-compact .cd-logo { width: 52px; height: 52px; }
.cd-mark.is-compact .cd-logo img { max-width: 52px; max-height: 52px; }
.cd-mark.is-compact .cd-mono { width: 48px; height: 48px; font-size: 16px; }
.cd-marks.is-list .cd-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.cd-marks.is-list .cd-mark { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 10px 14px; border-radius: 14px; box-shadow: none; }
.cd-marks.is-list .cd-logo { width: 44px; height: 44px; }
.cd-marks.is-list .cd-logo img { max-width: 44px; max-height: 44px; }
.cd-marks.is-list .cd-mono, .cd-marks.is-list .cd-noimg { width: 42px; height: 42px; font-size: 14px; }
.cd-marks.is-list .cd-mt { align-items: flex-start; }

/* ----- карточки моделей ----- */
.cd-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--cd-line); border-radius: 18px; background: var(--cd-card); box-shadow: var(--cd-shadow); overflow: hidden; transition: transform .18s, border-color .18s, box-shadow .18s; }
.cd-card:hover { transform: scale(1.015); border-color: var(--cd-accent); box-shadow: var(--cd-shadow-lg); }
.cd-photo { position: relative; display: block; aspect-ratio: 300 / 215; background: var(--cd-soft); overflow: hidden; }
.cd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-ph-mono { position: absolute; inset: 0; display: grid; place-items: center; background: hsl(var(--h, 220) 70% 93%); color: hsl(var(--h, 220) 55% 36%); font-family: var(--cd-head); font-size: 38px; font-weight: 700; letter-spacing: .02em; }
.cd-badges { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.cd-badges i { font-style: normal; padding: 3px 9px; border-radius: 99px; background: rgba(11, 18, 32, .78); color: #fff; font-size: 11px; font-weight: 800; backdrop-filter: blur(4px); }
.cd-badges i.is-ev { background: #12a594; }
.cd-badges i.is-hy { background: #16a34a; }
.cd-badges i.is-4wd { background: #1e4fe0; }
.cd-badges i.is-7 { background: #7c3aed; }
.cd-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 14px; flex: 1; }
.cd-name { font-size: 16px; font-weight: 800; color: var(--cd-ink); line-height: 1.25; }
.cd-name:hover { color: var(--cd-accent); }
.cd-meta { font-size: 12.5px; color: var(--cd-sub); line-height: 1.4; }
.cd-spec { display: flex; flex-wrap: wrap; gap: 5px; }
.cd-spec span { padding: 3px 8px; border-radius: 8px; background: var(--cd-soft); color: var(--cd-text); font-size: 11.5px; font-weight: 700; line-height: 1.35; }
.cd-gens { display: flex; flex-wrap: wrap; gap: 5px; }
.cd-gens a { padding: 3px 9px; border-radius: 99px; background: var(--cd-soft); color: var(--cd-sub); font-size: 11.5px; font-weight: 700; }
.cd-gens a:hover { background: var(--cd-accent-bg); color: var(--cd-accent); }
.cd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 4px; }
.cd-mkts { display: inline-flex; gap: 8px; }
.cd-mkt { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--cd-sub); }
.cd-mkt img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.cd-sale { flex: 1 1 100%; padding: 4px 9px; border-radius: 8px; background: var(--cd-sale-bg); color: var(--cd-sale); font-size: 11.5px; font-weight: 700; }
.cd-sale b { font-weight: 800; }
.cd-sale.is-none { background: var(--cd-soft); color: var(--cd-faint); }
.cd-cmpchk { display: inline-flex; align-items: center; gap: 7px; padding-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--cd-sub); cursor: pointer; }
.cd-cmpchk input { width: 16px; height: 16px; accent-color: var(--cd-accent); }
.cd-simple { padding: 16px; gap: 6px; }
.cd-simple .cd-name { font-size: 15px; }
.cd-card.is-big .cd-name { font-size: 17px; }

/* ----- семейства ----- */
.cd-fam { grid-column: auto; border: 1px dashed var(--cd-line); border-radius: 18px; background: var(--cd-card); overflow: hidden; }
.cd-fam.is-open { grid-column: 1 / -1; border-style: solid; }
.cd-fam-h { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--cd-text); }
.cd-fam-ph { display: flex; flex: 0 0 auto; }
.cd-fam-ph img { width: 54px; height: 40px; object-fit: cover; border-radius: 8px; margin-left: -14px; border: 2px solid var(--cd-card); }
.cd-fam-ph img:first-child { margin-left: 0; }
.cd-fam-ph .cd-mono { width: 42px; height: 42px; font-size: 14px; }
.cd-fam-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cd-fam-t b { font-size: 16px; font-weight: 800; color: var(--cd-ink); }
.cd-fam-t small { font-size: 12.5px; color: var(--cd-sub); }
.cd-fam-h > i { color: var(--cd-faint); transition: transform .2s; }
.cd-fam.is-open .cd-fam-h > i { transform: rotate(180deg); }
.cd-fam-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; padding: 4px 16px 18px; }

/* ----- лидеры ----- */
.cd-leaders { margin-bottom: 20px; }
.cd-lead-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cd-lead { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--cd-card); border: 1px solid var(--cd-line); box-shadow: var(--cd-shadow); transition: transform .18s, border-color .18s; }
.cd-lead:hover { transform: scale(1.02); border-color: var(--cd-accent); }
.cd-lead > i { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; background: var(--cd-accent-bg); color: var(--cd-accent); font-size: 17px; }
.cd-lead span { display: flex; flex-direction: column; min-width: 0; }
.cd-lead small { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cd-faint); }
.cd-lead b { font-size: 15px; color: var(--cd-ink); }
.cd-lead em { font-style: normal; font-size: 12.5px; color: var(--cd-sub); }

/* ----- подсказка, пусто, кнопки ----- */
.cd-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 36px; padding: 24px 28px; border-radius: 22px; background: linear-gradient(135deg, var(--cd-accent-bg), var(--cd-soft)); border: 1px solid var(--cd-line); }
.cd-help p { margin: 0; color: var(--cd-sub); font-size: 14.5px; max-width: 460px; }
.cd-help-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 1px solid var(--cd-accent); border-radius: 14px; background: var(--cd-accent); color: #fff !important; font-size: 14px; font-weight: 700; cursor: pointer; }
.cd-btn:hover { filter: brightness(1.08); }
.cd-btn:disabled { opacity: .5; cursor: default; }
.cd-btn-2 { background: transparent; color: var(--cd-accent) !important; }
.cd-empty { padding: 44px 20px; text-align: center; border: 1px dashed var(--cd-line); border-radius: 18px; color: var(--cd-sub); }
.cd-empty b { display: block; margin-bottom: 4px; font-size: 17px; color: var(--cd-ink); }
.cd-empty p { margin: 0 0 14px; }
.cd-empty .cd-btn { margin: 0 4px; }

/* ----- сравнение ----- */
.cd-cmp { position: fixed; left: 0; right: 0; bottom: 14px; z-index: 1040; display: flex; justify-content: center; padding: 0 14px; pointer-events: none; }
.cd-cmp-in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 760px; padding: 12px 14px 12px 18px; border-radius: 18px; background: var(--cd-ink); color: var(--cd-card); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .5); pointer-events: auto; }
.cd-cmp-t { font-size: 13.5px; }
.cd-cmp-t b { font-weight: 800; }
.cd-cmp-in .cd-btn { height: 38px; padding: 0 16px; border-radius: 11px; }
.cd-cmp-in .cd-btn-2 { color: inherit !important; border-color: rgba(255, 255, 255, .35); }
.cd-modal { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 14, 22, .6); backdrop-filter: blur(3px); }
.cd-modal-in { position: relative; width: min(860px, 100%); max-height: 92vh; display: flex; flex-direction: column; padding: 22px 22px 16px; border-radius: 22px; background: var(--cd-card, #fff); color: var(--cd-text, #1d2433); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .cd-modal-in { background: #151922; color: #dfe4ec; }
.cd-modal-in h3 { margin: 0 40px 14px 0; font-family: 'Unbounded', 'Manrope', sans-serif; font-size: 18px; }
.cd-modal-x { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(128, 138, 160, .18); color: inherit; cursor: pointer; }
.cd-modal-scroll { overflow: auto; }
.cd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cd-table th, .cd-table td { padding: 10px 12px; border-bottom: 1px solid rgba(128, 138, 160, .22); text-align: left; vertical-align: top; }
.cd-table thead th { position: sticky; top: 0; background: inherit; }
.cd-table thead a { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: inherit; text-decoration: none; }
.cd-table thead img { width: 100%; max-width: 180px; border-radius: 10px; aspect-ratio: 300/215; object-fit: cover; }
.cd-table tbody th { width: 150px; font-weight: 700; color: #8b93a5; font-size: 12.5px; }
.cd-table td.is-best { color: #16a34a; font-weight: 800; }
.cd-note { margin: 10px 0 0; font-size: 12px; color: #8b93a5; }

.cd-card.is-nophoto .cd-photo { aspect-ratio: auto; height: 56px; }
.cd-card.is-nophoto .cd-ph-mono { font-size: 20px; background: hsl(var(--h, 220) 50% 95%); color: hsl(var(--h, 220) 35% 45%); justify-content: start; padding-left: 14px; }
.cd-ftoggle { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--cd-line); border-radius: 14px; background: var(--cd-card); color: var(--cd-ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.cd-ftoggle em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--cd-accent); color: #fff; font-size: 11.5px; }
@media (max-width: 1100px) { .cd-pop-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .cd { margin-top: 0; }
    .cd-h1 { font-size: 24px; }
    .cd-bar { gap: 8px; }
    .cd-sort span { display: none; }
    .cd-sort select, .cd-search input { height: 44px; }
    .cd-flabel { flex-basis: auto; }
    .cd-frow { flex-direction: column; align-items: flex-start; gap: 6px; }
    .cd-fchips { max-width: 100%; }
    .cd-filters { display: none; padding: 12px; border-radius: 16px; }
    .cd-filters.is-open { display: grid; }
    .cd-ftoggle { display: inline-flex; }
    .cd-tabs { width: 100%; }
    .cd-grid, .cd-fam-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cd-marks .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cd-marks.is-list .cd-grid { grid-template-columns: minmax(0, 1fr); }
    .cd-mark { padding: 16px 10px 12px; }
    .cd-pop-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cd-card { border-radius: 16px; }
    .cd-body { padding: 10px; gap: 6px; }
    .cd-name { font-size: 14.5px; }
    .cd-spec span, .cd-gens a { font-size: 11px; }
    .cd-sale { margin-left: 0; }
    .cd-badges { left: 6px; top: 6px; }
    .cd-badges i { padding: 2px 7px; font-size: 10px; }
    .cd-ph-mono { font-size: 28px; }
    .cd-help { padding: 18px; margin-top: 26px; }
    .cd-help-btns, .cd-help-btns .cd-btn { width: 100%; }
    .cd-cmp { bottom: calc(var(--m-nav-h, 0px) + var(--m-safe-b, 0px) + 10px); }
    .cd-modal { padding: 8px; align-items: flex-end; }
    .cd-modal-in { padding: 18px 14px 12px; border-radius: 20px 20px 0 0; }
    .cd-table thead img { max-width: 100px; }
    .cd-table th, .cd-table td { padding: 8px 8px; font-size: 12.5px; }
    .cd-table tbody th { width: 96px; }
    .cd-alpha { top: var(--cd-top); }
}
@media (prefers-reduced-motion: reduce) { .cd-mark, .cd-card, .cd-lead { transition: none; } }