/**
 * Catalog page «Каталог автомобилей» (elements/car-catalog.php, assets/js/car-catalog.js + car-catalog-ui.js).
 *
 * The car page's dark «import dossier» language on an Encar-style search page: a 272px filter sidebar beside the
 * results (from 1024px; below it the same node is a drawer), a toolbar, the shared car card (assets/css/cz-car-card.css,
 * loaded first: the card, the list row and the 3 / 2 / 1 column table live there) and the result states.
 *
 * Rules of this file
 *   - px only (the site root is 10px), Oswald 600 and Rubik 400/600 only (the site's Rubik 500 is the italic file);
 *   - everything is scoped under .czc (BEM czc-*); the only selectors outside it are the legacy-shell guard, the
 *     Bricks wrapper margins, the page background behind the element, html.czc-lock (drawer scroll lock) and the
 *     UI v6 header below 1024 (#brx-header); every UI v6 header rule starts with [data-cz-ui="6"] body.cz-has-header;
 *   - nothing on .czc or its wrappers creates a containing block (no transform, filter, contain, container-type,
 *     will-change, perspective): the drawer is position:fixed inside them;
 *   - the price never sticks; only the filters do (owner's rule);
 *   - keyframes are czc-* (a cached page may still load this file next to the homepage's own keyframes).
 *
 * State hooks the scripts set (the CSS only reads them):
 *   .czc[data-state]                    loading | updating | results | empty | error (server: loading)
 *   .czc[data-busy] / .czc-main[data-busy] / .czc[data-state="updating"]
 *                                       results dim to .6 after 150 ms (they stay clickable)
 *   #catalog-loading.is-slow            the «Encar отвечает медленно…» notice (the block is visually hidden otherwise)
 *   .czc-side[data-open="true"]         the drawer is open (below 1024; .is-open works too). Never `hidden` on the
 *                                       aside: it slides, and while closed it is visibility:hidden (nothing inside
 *                                       is focusable or announced)
 *   #czc-backdrop                       once its `hidden` is removed it follows the open drawer (or its own
 *                                       data-open="true"): fades in, and out when the drawer closes
 *   #czc-sub, #czc-pill                 shown by removing `hidden` (slide / fade in by themselves); optional
 *                                       .is-closing for the exit, then `hidden` 160 / 100 ms later
 *   .czc-bar[data-stuck="true"]         the sticky phone bar is stuck (IntersectionObserver on #czc-sentinel)
 *   html.czc-lock                       page scroll locked while the drawer is open
 *   #reset-filters[hidden]              kept in place but invisible (visibility, so the header never shifts)
 *   #apply-filters[aria-busy="true"]    «Считаем…»; #apply-filters[data-count="0"] the ghost «Ничего не найдено»
 *
 * Markup the scripts render (styled here):
 *   #czc-chipbar > button (any class but .czc-textbtn) > span + svg x · > .czc-skel (unknown label) · .czc-textbtn reset
 *   drill-down: .czc-pick > .czc-pick__text (.czc-pick__cap, .czc-pick__val) + button.czc-pick__x; .czc-nav__head;
 *     .czc-seg > label > input[type=radio] + span; .czc-input--filter > svg + input.czc-input__field + .czc-iconbtn;
 *     ul.czc-nav__list > li > button.czc-nav__row > .czc-nav__name + [.czc-nav__years] + .czc-nav__count (three
 *     siblings; aria-current / aria-disabled); loading: ul.czc-nav__list--skel > li.czc-nav__row.czc-nav__row--skel;
 *     .czc-nav__empty; .czc-nav__error (or .filter-error) + button;
 *     drawer: ul.czc-nav__levels > li.czc-level-row > button.czc-level (.czc-level__cap, .czc-level__val, svg ›)
 *     + button.czc-pick__x.czc-level__x
 *   #catalog-pagination: p.czc-pages__range, button.czc-btn.czc-btn--ghost.czc-more, nav.czc-pager >
 *     a.pagination-btn[data-page] (.active + aria-current, .pagination-prev / .pagination-next, aria-disabled),
 *     span.pagination-dots, span.czc-pager__count («7 из 500», shown below 600 instead of the numbers),
 *     p (end / cap lines), .czc-more-error > p + .czc-btn--ghost
 */

/* ==========================================================================
   Outside the block: legacy shell, Bricks wrapper, page background
   ========================================================================== */

/* A page cached before the redesign (no data-czc) would show its old markup unstyled: hide it while car-catalog.js
   reloads it once with ?czcv=; the 4 s backstop reveals it if that never happens. */
.car-catalog-container:not([data-czc]) {
    visibility: hidden;
    animation: czc-reveal 0s linear 4s forwards;
}

@keyframes czc-reveal {
    to {
        visibility: visible;
    }
}

/* The page's Bricks settings give the element side margins of 50 / 30px: the block lays out its own 1200px container,
   so only those go. The 160px (100px below 992) header offset stays. Where they come from: the catalog page (post
   2054) in the Bricks builder, its Car Catalog element (#brxe-hoenku), Style > Layout > Margin, the left and right
   fields at the base breakpoint and at the 1200px one. Bricks writes them to post-2054.min.css as an id rule, hence
   !important here. Once those fields are cleared in the builder, this rule can go. */
.brxe-car-catalog {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

#brx-content:has(.czc) {
    background-color: var(--cz-page, #1a1a1a);
}

/* Drawer scroll lock. The gutter of the removed scrollbar stays reserved, so a desktop window 600-1023px wide with a
   classic scrollbar does not jump sideways behind the drawer (overlay scrollbars reserve nothing either way). */
html.czc-lock {
    scrollbar-gutter: stable;
}

html.czc-lock,
html.czc-lock body {
    overflow: hidden;
}

/* ==========================================================================
   Tokens (the --cz-* set comes from assets/css/cz-site.css)
   ========================================================================== */

.czc {
    --czc-gutter: 16px;
    --czc-side-w: 272px;
    --czc-col-gap: 24px;
    --czc-gap: 12px;
    --czc-field-line: var(--cz-field-line, #6b6b72);
    --czc-chip-line: var(--cz-chip-line, #6b6b72);
    --czc-red-tint: rgba(229, 21, 21, 0.16);
    --czc-photo-bg: var(--cz-photo-bg, #121214);
    --czc-pressed: var(--cz-pressed, #26262a);
    /* WordPress sets --wp-admin--admin-bar--height on html while its admin bar shows (32px; 46px at 782 and below) */
    --czc-admin-bar: var(--wp-admin--admin-bar--height, 0px);
    --czc-sticky-top: calc(24px + var(--czc-admin-bar));
    --czc-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --czc-ease-in: cubic-bezier(0.4, 0, 1, 1);

    /* Control heights: fine pointer here, coarse pointer and the drawer below */
    --czc-row-h: 40px;
    --czc-ctl: 40px;
    --czc-chip-h: 36px;
    --czc-preset-h: 32px;
    --czc-seg-h: 32px;
    --czc-filter-h: 40px;
    --czc-bchip-h: 32px;
    --czc-hit: 0px;
    --czc-inbtn: 40px;

    /* The page's sticky toolbar sits at the top of the window (the site header is not fixed), under the admin bar */
    --czc-bar-top: var(--czc-admin-bar);
}

/* At 600 and below the admin bar scrolls away with the page (WordPress makes it position:absolute there) */
@media (max-width: 600px) {
    .czc {
        --czc-bar-top: 0px;
    }
}

/* under v6 the catalog's edges line up with the header: the v6 side padding (16 / 24 / 32 px) in the 1440 px frame */
[data-cz-ui="6"] .czc {
    --czc-gutter: var(--cz-gutter-v6);
}

@media (min-width: 768px) {
    .czc {
        --czc-gutter: 15px;
        --czc-gap: 16px;
    }
}

@media (pointer: coarse) {
    .czc {
        --czc-row-h: 48px;
        --czc-ctl: 44px;
        --czc-chip-h: 44px;
        --czc-preset-h: 44px;
        --czc-seg-h: 44px;
        --czc-filter-h: 44px;
        --czc-bchip-h: 36px;
        --czc-hit: 4px;
        --czc-inbtn: 44px;
    }
}

/* ==========================================================================
   Base
   ========================================================================== */

.czc {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 16px 0 64px;
    background: var(--cz-page);
    color: var(--cz-text);
    color-scheme: dark;
    font-family: var(--cz-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
    .czc {
        padding: 24px 0 96px;
    }
}

.czc *,
.czc *::before,
.czc *::after {
    box-sizing: border-box;
}

/* `hidden` beats every display rule of this file */
.czc [hidden] {
    display: none !important;
}

.czc h1,
.czc h2,
.czc h3,
.czc p,
.czc ul,
.czc ol,
.czc li,
.czc fieldset,
.czc legend,
.czc form {
    margin: 0;
    padding: 0;
}

.czc ul,
.czc ol {
    list-style: none;
}

.czc li::before,
.czc li::marker {
    content: none;
}

.czc fieldset {
    min-width: 0;
    border: 0;
}

/* Bricks styles every label as a block with a 5px margin */
.czc label {
    display: block;
    margin: 0;
    color: inherit;
    font-weight: 400;
}

.czc button,
.czc input,
.czc select {
    margin: 0;
    font-family: var(--cz-font);
    font-size: inherit;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    -webkit-tap-highlight-color: transparent;
}

.czc button {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-weight: 400;
    cursor: pointer;
}

.czc a {
    color: inherit;
}

.czc .czc-ico {
    display: block;
    flex: none;
    stroke: currentColor;
    pointer-events: none;
}

/* Focus: a 2px brand-red ring at offset 2 (inside scrollers -2); fields ring with their own border. Only focus that is
   not :focus-visible loses the outline: a browser without :focus-visible (Safari before 15.4) drops both rules and
   keeps its own ring. */
.czc :focus:not(:focus-visible) {
    outline: none;
}

.czc :focus-visible {
    outline: 2px solid var(--cz-red);
    outline-offset: 2px;
}

/* Headings focused by script (results h2, drawer and sub-panel titles) are not controls: no ring. The error title is
   the exception: it takes the focus when a search fails (spec-design 5) and rings like a control (further down). */
.czc h2[tabindex="-1"]:focus,
.czc h3[tabindex="-1"]:not(.czc-error__title):focus {
    outline: none;
}

.czc .czc-sr,
.czc .czc-sort__radio,
.czc .czc-seg input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.czc .czc-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ==========================================================================
   Frame: container, heading, page grid
   ========================================================================== */

.czc .czc__inner {
    width: 100%;
    max-width: 1440px; /* 1200 px looked narrow on wide screens (owner, 2026-10-24); 4 card columns from 1440 px below */
    margin: 0 auto;
    padding: 0 var(--czc-gutter);
}

/* ---- Heading ---- */

.czc .czc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .czc .czc-head {
        margin-bottom: 24px;
    }
}

.czc .czc-head__title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: 26px;
    font-weight: var(--cz-display-weight, 600);
    line-height: 32px;
    letter-spacing: var(--cz-display-track, 0.01em);
    text-transform: var(--cz-display-case, uppercase);
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .czc .czc-head__title {
        font-size: 32px;
        line-height: 40px;
    }
}

.czc .czc-head__meta {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.czc .czc-head__total {
    margin: 0;
    color: var(--cz-text-2);
    font-size: 16px;
    line-height: 24px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 600 and up: h1, total and (below 1024) the view toggle on one row */
@media (min-width: 600px) {
    .czc .czc-head {
        flex-wrap: nowrap;
    }

    .czc .czc-head__meta {
        flex: 1 1 auto;
    }
}

/* ---- Page grid: sidebar + results from 1024 ---- */

.czc .czc-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@media (min-width: 1024px) {
    .czc .czc__inner {
        display: grid;
        grid-template-columns: var(--czc-side-w) minmax(0, 1fr);
        grid-template-areas:
            "head head"
            "side main";
        column-gap: var(--czc-col-gap);
        align-items: start;
    }

    .czc .czc-head {
        grid-area: head;
    }

    .czc .czc-side {
        grid-area: side;
    }

    .czc .czc-main {
        grid-area: main;
    }

    .czc[data-filters="off"] .czc__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "main";
    }
}

/* ==========================================================================
   Shared controls: buttons, text buttons, icon buttons, badge, skeleton
   ========================================================================== */

.czc .czc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--cz-r-md);
    background: transparent;
    color: var(--cz-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.1s ease;
}

.czc .czc-btn--ghost {
    border-color: var(--cz-line-strong);
}

.czc .czc-btn--primary {
    border-color: var(--cz-red);
    background: var(--cz-red);
    color: var(--cz-on-red, #fff);
}

.czc .czc-btn[aria-disabled="true"],
.czc .czc-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

@media (hover: hover) {
    .czc .czc-btn--ghost:hover {
        border-color: var(--cz-text-3);
        background: var(--cz-raised);
    }

    .czc .czc-btn--primary:hover {
        border-color: var(--cz-red-hover);
        background: var(--cz-red-hover);
    }
}

/* Text button («Сбросить всё», «Готово», «Повторить» in a line): an underlined label, red underline on hover */
.czc .czc-textbtn,
.czc .filter-error button {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 32px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--cz-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-decoration-line: underline;
    text-decoration-color: var(--cz-line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    white-space: nowrap;
    transition: text-decoration-color 0.12s ease;
}

/* Coarse pointer: an invisible 44px hit area around the 20px label */
.czc .czc-textbtn::after,
.czc .filter-error button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -4px;
    right: -4px;
    height: 44px;
    margin-top: -22px;
}

@media (hover: hover) {
    .czc .czc-textbtn:hover,
    .czc .filter-error button:hover {
        text-decoration-color: var(--cz-red);
    }
}

/* Icon button: a 44px circle */
.czc .czc-iconbtn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--cz-text-2);
    transition: background-color 0.12s ease, color 0.12s ease;
}

@media (hover: hover) {
    .czc .czc-iconbtn:hover {
        background: var(--cz-raised);
        color: var(--cz-text);
    }
}

.czc .czc-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--cz-red);
    color: var(--cz-on-red, #fff);
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    font-variant-numeric: tabular-nums;
}

/* Skeleton bars pulse together at 1.6 s (the card's czcard-pulse has the same rhythm) */
.czc .czc-skel {
    display: block;
    border-radius: 6px;
    background: var(--cz-raised);
    animation: czc-pulse 1.6s ease-in-out infinite;
}

@keyframes czc-pulse {
    50% {
        opacity: 0.55;
    }
}

.czc .czc-skel--total {
    display: inline-block;
    width: 140px;
    height: 20px;
    vertical-align: -3px;
}

/* ==========================================================================
   Fields: text inputs, selects, captions, helpers, errors
   ========================================================================== */

.czc .czc-input {
    position: relative;
    display: block;
}

.czc .czc-input__field,
.czc .czc-select {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 36px 0 12px;
    border: 1px solid var(--czc-field-line);
    border-radius: var(--cz-r-md);
    background-color: var(--cz-page);
    box-shadow: none;
    color: var(--cz-text);
    font-size: 16px; /* iOS zooms into anything smaller on focus */
    font-weight: 400;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.czc .czc-input__field::placeholder {
    color: var(--cz-text-3);
    opacity: 1;
}

.czc .czc-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a6ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    text-overflow: ellipsis;
    cursor: pointer;
}

.czc .czc-select option {
    background: var(--cz-surface);
    color: var(--cz-text);
}

.czc .czc-input__field:focus,
.czc .czc-select:focus {
    border-color: var(--cz-red);
    box-shadow: 0 0 0 1px var(--cz-red);
    outline: none;
}

.czc .czc-input__field[aria-invalid="true"] {
    border-color: var(--cz-danger-text);
}

.czc .czc-select:disabled {
    opacity: 0.5;
    cursor: default;
}

/* The «₽» suffix is narrow: 7-digit prices (3 000 000) fit the 115px column of the sidebar at 16px */
.czc .czc-range[id="czc-range-price"] .czc-input__field {
    padding-right: 26px;
    padding-left: 10px;
}

.czc .czc-input__unit {
    position: absolute;
    top: 50%;
    right: 12px;
    color: var(--cz-text-2);
    font-size: 14px;
    line-height: 20px;
    transform: translateY(-50%);
    pointer-events: none;
}

.czc .czc-range__cap,
.czc .czc-year__cap,
.czc .czc-search__label {
    display: block;
    margin: 0 0 4px;
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 18px;
}

.czc .czc-help {
    margin: 8px 0 0;
    color: var(--cz-text-3);
    font-size: 13px;
    line-height: 18px;
}

.czc .czc-field-error {
    margin: 6px 0 0;
    color: var(--cz-danger-text);
    font-size: 13px;
    line-height: 18px;
}

/* ==========================================================================
   Sidebar (#car-catalog-filters): 1024 and up it sits in the page grid; below it is the drawer (further down)
   ========================================================================== */

/* Grab strip of the filter bottom sheet (UI v6 R4): hidden until the sheet styles arrive */
.czc .czc-side__grab {
    display: none;
}

.czc .czc-side {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--cz-line);
    border-radius: var(--cz-r-lg);
    background: var(--cz-surface);
}

/* Skip link «К результатам поиска»: shows on focus over the header */
.czc .czc-skip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    padding: 10px 14px;
    border-radius: var(--cz-r-md);
    background: var(--cz-page);
    color: var(--cz-text);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    transform: translateY(-200%);
    opacity: 0;
}

.czc .czc-skip:focus {
    transform: none;
    opacity: 1;
}

.czc .czc-side__head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 56px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cz-line);
}

.czc .czc-side__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: 20px;
    font-weight: var(--cz-display-weight, 600);
    line-height: 24px;
    letter-spacing: var(--cz-display-track, 0.01em);
    text-transform: var(--cz-display-case, none);
}

/* Nothing to reset: the button keeps its place, so the header never shifts */
.czc .czc-side__head .czc-side__reset[hidden] {
    display: inline-flex !important;
    visibility: hidden;
}

.czc .czc-side__body {
    flex: 1 1 auto;
    min-height: 0;
}

/* Drawer-only parts */
.czc .czc-side__close,
.czc .czc-side__foot {
    display: none;
}

@media (min-width: 1024px) {
    .czc .czc-sub,
    .czc .czc-backdrop,
    .czc .czc-bar__filters,
    .czc .czc-side__close,
    .czc .czc-side__foot {
        display: none;
    }
}

/* Sticky filters (never the prices): only where the window is tall enough to hold a useful part of them */
@media (min-width: 1024px) and (min-height: 640px) {
    .czc .czc-side {
        position: sticky;
        top: var(--czc-sticky-top);
        align-self: start;
        max-height: calc(100vh - 48px - var(--czc-admin-bar));
    }

    .czc .czc-side__body {
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--cz-line-strong) transparent;
    }
}

/* UI v6 R6b: under the v6 site header (assets/css/cz-header.css: #brx-header overlay-sticky, --cz-hdr-sticky = its height on
   <html>), the sticky sidebar starts below it and fits the window beside it. Only with data-cz-ui="6" on <html> and the
   header element's body class: production (v6 off, the old header) never matches. */
@media (min-width: 1024px) {
    [data-cz-ui="6"] body.cz-has-header .czc {
        --czc-sticky-top: calc(24px + var(--czc-admin-bar) + var(--cz-hdr-sticky, 0px));
    }
}

@media (min-width: 1024px) and (min-height: 640px) {
    [data-cz-ui="6"] body.cz-has-header .czc .czc-side {
        max-height: calc(100vh - 48px - var(--czc-admin-bar) - var(--cz-hdr-sticky, 0px));
    }
}

/* Below 1024 the catalog bar is the sticky one: on the catalog page (body.cz-catalog-page, elements/car-catalog.php) the
   v6 header scrolls away with the page. Its z-index (cz-header.css) stays: the open drawer and its backdrop cover it. top: 0
   (R8): cz-header.css's sticky top is the admin bar's height above 600, which would shift a relative header down over the
   catalog (it starts 24 px below the header, cz-header.css). */
@media (max-width: 1023.98px) {
    [data-cz-ui="6"] body.cz-has-header.cz-catalog-page #brx-header {
        position: relative;
        top: 0;
        margin-bottom: 0;
    }
}

/* ---- Groups: separators, accordion ---- */

.czc .czc-side__body > * + * {
    border-top: 1px solid var(--cz-line);
}

.czc .czc-acc__head {
    margin: 0;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
}

.czc .czc-acc__btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    color: var(--cz-text);
    text-align: left;
}

.czc .czc-acc__btn:focus-visible {
    outline-offset: -2px;
}

.czc .czc-acc__label {
    flex: none;
    color: var(--cz-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    transition: color 0.12s ease;
}

.czc .czc-acc__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--cz-text-2);
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.czc .czc-acc__chev {
    flex: none;
    margin-left: auto;
    color: var(--cz-text-2);
    transition: transform 0.15s var(--czc-ease-out);
}

.czc .czc-acc__value:not(:empty) + .czc-acc__chev {
    margin-left: 0;
}

.czc .czc-acc__btn[aria-expanded="true"] .czc-acc__chev {
    transform: rotate(180deg);
}

@media (hover: hover) {
    .czc .czc-acc__btn:hover .czc-acc__label {
        color: var(--cz-text-max, #fff);
    }
}

.czc .czc-acc__panel {
    padding: 0 16px 16px;
    animation: czc-fade-in 0.12s ease-out;
}

@keyframes czc-fade-in {
    from {
        opacity: 0;
    }
}

/* ==========================================================================
   Make drill-down (#czc-nav): selected stack, the open level, rows with counts
   ========================================================================== */

.czc .czc-nav__stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 12px;
}

/* One chosen level: caption over the value, the remove button on the right */
.czc .czc-pick {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    column-gap: 4px;
    min-height: 52px;
    padding: 4px 4px 4px 12px;
    border-radius: var(--cz-r-md);
    background: var(--cz-raised);
}

.czc .czc-pick > :not(.czc-pick__x):not(.czc-pick__remove) {
    grid-column: 1;
    min-width: 0;
}

.czc .czc-pick__cap {
    display: block;
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 18px;
}

.czc .czc-pick__val,
.czc .czc-pick__value {
    display: block;
    overflow: hidden;
    color: var(--cz-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 44 × 44 hit area, 32px visual circle */
.czc .czc-pick__x,
.czc .czc-pick__remove {
    position: relative;
    display: flex;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--cz-text-2);
}

.czc .czc-pick__x::before,
.czc .czc-pick__remove::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background-color 0.12s ease;
}

.czc .czc-pick__x .czc-ico,
.czc .czc-pick__remove .czc-ico {
    position: relative;
    width: 16px;
    height: 16px;
}

.czc .czc-pick__x:focus-visible,
.czc .czc-pick__remove:focus-visible {
    outline-offset: -4px;
}

@media (hover: hover) {
    .czc .czc-pick__x:hover,
    .czc .czc-pick__remove:hover {
        color: var(--cz-text);
    }

    .czc .czc-pick__x:hover::before,
    .czc .czc-pick__remove:hover::before {
        background: var(--cz-line);
    }
}

/* The open level: label, segmented sort, list filter, list */
.czc .czc-nav__level {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.czc .czc-nav__head {
    margin: 0;
    color: var(--cz-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

/* Segmented radios «Популярные | По алфавиту» */
.czc .czc-seg {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 0;
    border-radius: var(--cz-r-sm);
    background: var(--cz-raised);
}

.czc .czc-seg label {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.czc .czc-seg label > span,
.czc .czc-seg button.czc-seg__opt {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--czc-seg-h);
    padding: 0 8px;
    overflow: hidden;
    border-radius: 6px;
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.czc .czc-seg input:checked + span,
.czc .czc-seg button.czc-seg__opt[aria-checked="true"],
.czc .czc-seg button.czc-seg__opt[aria-pressed="true"] {
    background: var(--cz-line-strong);
    color: var(--cz-text);
}

.czc .czc-seg input:focus-visible + span {
    outline: 2px solid var(--cz-red);
    outline-offset: -2px;
}

@media (hover: hover) {
    .czc .czc-seg label:hover > span,
    .czc .czc-seg button.czc-seg__opt:hover {
        color: var(--cz-text);
    }
}

/* List filter «Найти марку»: search icon inside on the left, clear button on the right */
.czc .czc-input--filter .czc-input__field,
.czc .czc-nav__filter .czc-input__field {
    height: var(--czc-filter-h);
    padding: 0 var(--czc-filter-h) 0 36px;
    border-radius: var(--cz-r-sm);
}

.czc .czc-input--filter > .czc-ico,
.czc .czc-nav__filter > .czc-ico {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    color: var(--cz-text-2);
}

/* The clear button covers the field's full height at its right end (44 × 44 on a coarse pointer and in the drawer,
   40 × 40 on a fine one); its hover square stays 4px smaller, inside the border (padding 2, content-box background) */
.czc .czc-input--filter .czc-iconbtn,
.czc .czc-nav__filter .czc-iconbtn {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--czc-filter-h);
    height: var(--czc-filter-h);
    padding: 2px;
    border-radius: var(--cz-r-sm);
    background-clip: content-box;
}

.czc .czc-input--filter .czc-iconbtn:focus-visible,
.czc .czc-nav__filter .czc-iconbtn:focus-visible {
    outline-offset: -2px;
}

.czc .czc-nav__empty {
    margin: 4px 0;
    color: var(--cz-text-2);
    font-size: 14px;
    line-height: 20px;
}

/* The list: its own scroller; rows reach 8px past the panel padding */
.czc .czc-nav__list {
    max-height: min(320px, 40vh);
    margin: 0 -8px;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--cz-line-strong) transparent;
}

.czc .czc-nav__list--skel {
    overflow: hidden;
}

.czc .czc-nav__list > li:not(.czc-nav__row) {
    display: block;
}

/* A row holds three siblings: name, years (generations only), count. The name truncates first, so the years and the
   count always stay whole; the count sits at the right end. */
.czc .czc-nav__row,
.czc .czc-nav__opt,
.czc .czc-nav__list button {
    display: flex;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    height: var(--czc-row-h);
    padding: 0 8px;
    border-radius: var(--cz-r-sm);
    color: var(--cz-text);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    transition: background-color 0.1s ease;
}

.czc .czc-nav__name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Generations: years right after the name («2016-2019», «с 2023»), 8px from it */
.czc .czc-nav__years {
    flex: none;
    margin-left: -4px;
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.czc .czc-nav__count {
    flex: none;
    margin-left: auto;
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.czc .czc-nav__list button:focus-visible,
.czc .czc-nav__opt:focus-visible {
    outline: 2px solid var(--cz-red);
    outline-offset: -2px;
}

.czc .czc-nav__list button:active,
.czc .czc-nav__opt:active,
.czc .czc-nav__row[aria-current="true"],
.czc .czc-nav__opt[aria-selected="true"] {
    background: var(--cz-line);
}

.czc .czc-nav__list button[aria-disabled="true"],
.czc .czc-nav__opt[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
}

@media (hover: hover) {
    .czc .czc-nav__list button:hover,
    .czc .czc-nav__opt:hover {
        background: var(--cz-raised);
    }

    .czc .czc-nav__list button:active,
    .czc .czc-nav__opt:active {
        background: var(--cz-line);
    }
}

/* Loading: six skeleton rows (name 55% × 14, count 36 × 12); the li itself is the row */
.czc .czc-nav__row--skel {
    flex: none;
    justify-content: space-between;
    cursor: default;
}

.czc .czc-skel--row-name {
    width: 55%;
    height: 14px;
}

.czc .czc-skel--row-count {
    flex: none;
    width: 36px;
    height: 12px;
}

/* The first list (makes, nothing chosen yet) holds the place its reply needs: the segmented sort and the list filter
   above the rows (drawn as placeholders) and the full list height, so the reply does not push the groups below.
   Deeper levels keep the six rows: their lists are often short. The drawer shows level rows instead of this list. */
@media (min-width: 1024px) {
    .czc .czc-nav__stack[hidden] + .czc-nav__level > .czc-nav__list--skel {
        display: flex;
        flex-direction: column;
        height: calc(var(--czc-seg-h) + 6px + 8px + var(--czc-filter-h) + 8px + min(320px, 40vh));
        max-height: none;
    }

    .czc .czc-nav__stack[hidden] + .czc-nav__level > .czc-nav__list--skel::before,
    .czc .czc-nav__stack[hidden] + .czc-nav__level > .czc-nav__list--skel::after {
        content: "";
        display: block;
        flex: none;
        margin: 0 8px 8px;
        border-radius: var(--cz-r-sm);
        animation: czc-pulse 1.6s ease-in-out infinite;
    }

    /* the segmented control: 3 + segment + 3 */
    .czc .czc-nav__stack[hidden] + .czc-nav__level > .czc-nav__list--skel::before {
        order: -2;
        height: calc(var(--czc-seg-h) + 6px);
        background: var(--cz-raised);
    }

    /* the list filter field */
    .czc .czc-nav__stack[hidden] + .czc-nav__level > .czc-nav__list--skel::after {
        order: -1;
        height: var(--czc-filter-h);
        border: 1px solid var(--cz-line-strong);
        background: var(--cz-page);
    }
}

/* State carriers: the selects stay hidden (their own `hidden`); .filter-error lands beside the make select */
.czc .czc-carriers:empty {
    display: none;
}

.czc .czc-side__body .czc-carriers {
    border-top: 0;
}

.czc .filter-error,
.czc .czc-nav__error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 8px 0 0;
    color: var(--cz-danger-text);
    font-size: 14px;
    line-height: 20px;
}

.czc .filter-error button {
    color: var(--cz-text);
}

/* ==========================================================================
   «Без ДТП» switch row
   ========================================================================== */

.czc .czc-switch-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 12px;
    min-height: 56px;
    padding: 8px 16px;
    cursor: pointer;
}

.czc .czc-switch-row__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.czc .czc-switch-row__label {
    color: var(--cz-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
}

.czc .czc-switch-row__help {
    color: var(--cz-text-3);
    font-size: 13px;
    line-height: 18px;
}

.czc .czc-switch-row__count {
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Visual 44 × 24 track inside a 44 × 44 hit area */
.czc .czc-switch {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
}

.czc .czc-switch::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 44px;
    height: 24px;
    border: 1px solid var(--czc-field-line);
    border-radius: 999px;
    background: var(--cz-line-strong);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.czc .czc-switch__thumb {
    position: absolute;
    top: 13px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cz-text-2);
    transition: transform 0.15s var(--czc-ease-out), background-color 0.15s ease;
}

.czc .czc-switch[aria-checked="true"]::before {
    border-color: var(--cz-red);
    background: var(--cz-red);
}

.czc .czc-switch[aria-checked="true"] .czc-switch__thumb {
    background: var(--cz-on-red, #fff);
    transform: translateX(20px);
}

.czc .czc-switch:focus-visible {
    outline: none;
}

.czc .czc-switch:focus-visible::before {
    outline: 2px solid var(--cz-red);
    outline-offset: 2px;
}

/* ==========================================================================
   Year, ranges, presets, number search
   ========================================================================== */

.czc .czc-year {
    display: flex;
    flex-direction: column;
}

.czc .czc-year__row + .czc-year__row {
    margin-top: 10px;
}

.czc .czc-year__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 8px;
}

.czc .czc-range__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.czc .czc-range__col {
    min-width: 0;
}

.czc .czc-range[id="czc-range-price"] .czc-input__unit {
    right: 10px;
}

/* Presets: single-select small chips («До 3 лет», «До 1 млн ₽» …) */
.czc .czc-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.czc .czc-preset {
    display: inline-flex;
    align-items: center;
    height: var(--czc-preset-h);
    padding: 0 12px;
    border: 1px solid var(--czc-chip-line);
    border-radius: 999px;
    color: var(--cz-text);
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
}

.czc .czc-preset[aria-pressed="true"] {
    border-color: var(--cz-red);
    background: var(--czc-red-tint);
    box-shadow: inset 0 0 0 1px var(--cz-red);
}

@media (hover: hover) {
    .czc .czc-preset:not([aria-pressed="true"]):hover {
        background: var(--cz-raised);
    }
}

/* Number search: clear and «Найти» inside the field on the right (40px; 44 on touch and in the drawer) */
.czc .czc-input--search .czc-input__field {
    padding-right: calc(2 * var(--czc-inbtn) + 4px);
}

.czc .czc-search__clear,
.czc .czc-search__submit {
    position: absolute;
    top: calc((44px - var(--czc-inbtn)) / 2);
    width: var(--czc-inbtn);
    height: var(--czc-inbtn);
    border-radius: var(--cz-r-sm);
}

.czc .czc-search__submit {
    right: calc((44px - var(--czc-inbtn)) / 2);
}

.czc .czc-search__clear {
    right: calc((44px - var(--czc-inbtn)) / 2 + var(--czc-inbtn));
}

.czc .czc-search__clear .czc-ico {
    width: 16px;
    height: 16px;
}

.czc .czc-search__submit:focus-visible,
.czc .czc-search__clear:focus-visible {
    outline-offset: -2px;
}

/* ==========================================================================
   Filter chips (Топливо, Коробка передач, Тип автомобиля)
   ========================================================================== */

.czc .czc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.czc .czc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--czc-chip-h);
    padding: 0 12px;
    border: 1px solid var(--czc-chip-line);
    border-radius: 999px;
    background: transparent;
    color: var(--cz-text);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, transform 0.1s ease;
}

/* Tabular figures: a new count with as many digits keeps the chip's width, so the group never re-wraps for it; the
   2ch minimum also holds one- and two-digit counts at one width (right aligned) */
.czc .czc-chip__count {
    min-width: 2ch;
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.czc .czc-chip__count:empty {
    display: none;
}

.czc .czc-chip[aria-pressed="true"] {
    border-color: var(--cz-red);
    background: var(--czc-red-tint);
    box-shadow: inset 0 0 0 1px var(--cz-red);
}

/* Count 0 and not selected: dimmed, still focusable, clicks ignored by the script */
.czc .czc-chip[aria-disabled="true"]:not([aria-pressed="true"]) {
    opacity: 0.45;
    cursor: default;
}

@media (hover: hover) {
    .czc .czc-chip:not([aria-pressed="true"]):not([aria-disabled="true"]):hover {
        background: var(--cz-raised);
    }
}

/* ==========================================================================
   Active filter bar (#czc-chipbar)
   ========================================================================== */

.czc .czc-chipbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

/* A chip removes its filter: label + x */
.czc .czc-chipbar > button:not(.czc-textbtn) {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: var(--czc-bchip-h);
    padding: 0 8px 0 12px;
    border: 1px solid transparent; /* shows in forced colours */
    border-radius: 999px;
    background: var(--cz-chip-fill, rgba(255, 255, 255, 0.07));
    color: var(--cz-text);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    transition: background-color 0.12s ease, transform 0.1s ease;
}

/* Coarse pointer: 36 visible plus 4px above and below (44; the extra 1px clears the border) */
.czc .czc-chipbar > button:not(.czc-textbtn)::after {
    content: "";
    position: absolute;
    top: calc(-1px - var(--czc-hit));
    right: 0;
    bottom: calc(-1px - var(--czc-hit));
    left: 0;
}

.czc .czc-chipbar > button:not(.czc-textbtn) > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.czc .czc-chipbar > button:not(.czc-textbtn) .czc-ico {
    width: 14px;
    height: 14px;
    color: var(--cz-text-2);
    transition: color 0.12s ease;
}

@media (hover: hover) {
    .czc .czc-chipbar > button:not(.czc-textbtn):hover {
        background: var(--cz-line);
    }

    .czc .czc-chipbar > button:not(.czc-textbtn):hover .czc-ico {
        color: var(--cz-text);
    }
}

/* A label the page does not know yet (a raw make from the URL) */
.czc .czc-chipbar > .czc-skel {
    flex: none;
    width: 80px;
    height: var(--czc-bchip-h);
    border-radius: 999px;
}

/* ==========================================================================
   Toolbar (#czc-bar): sort, view toggle; below 1024 the sticky bar with «Фильтры»
   ========================================================================== */

.czc .czc-sentinel {
    height: 1px;
    margin-bottom: -1px;
    pointer-events: none;
}

.czc .czc-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Sort radios styled as text links with separators */
.czc .czc-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    margin: 0 0 0 -10px;
    padding: 0;
    border: 0;
}

.czc .czc-sort__opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 12px 10px;
    color: var(--cz-text-2);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
}

.czc .czc-sort__opt + .czc-sort__opt::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.5px;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background: var(--cz-line-strong);
}

.czc .czc-sort__text {
    border-radius: 2px;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

.czc .czc-sort__radio:checked + .czc-sort__text {
    color: var(--cz-text);
    text-decoration-color: var(--cz-red);
}

.czc .czc-sort__radio:focus-visible + .czc-sort__text {
    outline: 2px solid var(--cz-red);
    outline-offset: 4px;
}

@media (hover: hover) {
    .czc .czc-sort__opt:hover .czc-sort__text {
        color: var(--cz-text);
    }
}

/* View toggle «Плиткой / Списком» */
.czc .czc-view {
    display: inline-flex;
    flex: none;
    gap: 0;
    padding: 2px;
    border: 1px solid var(--cz-line);
    border-radius: var(--cz-r-md);
    background: var(--cz-surface);
}

.czc .czc-view__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--czc-ctl);
    height: var(--czc-ctl);
    border-radius: var(--cz-r-sm);
    color: var(--cz-text-2);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.czc .czc-view__btn[aria-pressed="true"] {
    background: var(--cz-line-strong);
    color: var(--cz-text);
}

@media (hover: hover) {
    .czc .czc-view__btn:not([aria-pressed="true"]):hover {
        background: var(--cz-raised);
        color: var(--cz-text);
    }
}

/* «Фильтры» (below 1024) and the phone sort select */
.czc .czc-bar__filters {
    flex: none;
    gap: 8px;
    padding: 0 14px;
}

.czc .czc-bar__filters .czc-ico {
    color: var(--cz-text-2);
}

.czc .czc-sort-m {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 260px;
}

.czc .czc-sort-m__select {
    background-color: var(--cz-surface);
}

/* Desktop: sort links on the left, the view toggle on the right; one view toggle per breakpoint */
@media (min-width: 1024px) {
    .czc .czc-bar {
        min-height: 44px;
        margin: 0 0 16px;
        padding: 0 0 12px;
        border-bottom: 1px solid var(--cz-line);
    }

    .czc .czc-sort-m,
    .czc .czc-view--head {
        display: none;
    }

    .czc .czc-view--bar {
        margin-left: auto;
    }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
    .czc .czc-sort {
        margin-left: -8px;
    }

    .czc .czc-sort__opt {
        padding-right: 8px;
        padding-left: 8px;
    }
}

/* Below 1024: the toolbar is the sticky bar; chips go under it */
@media (max-width: 1023.98px) {
    .czc .czc-sort,
    .czc .czc-view--bar {
        display: none;
    }

    .czc .czc-sentinel,
    .czc .czc-bar {
        order: -1;
    }

    .czc .czc-bar {
        position: sticky;
        top: var(--czc-bar-top);
        z-index: 20;
        height: 60px;
        margin: 0 calc(-1 * var(--czc-gutter)) 12px;
        padding: 8px var(--czc-gutter);
        border-bottom: 1px solid transparent;
        background: var(--cz-page);
        transition: border-color 0.15s ease;
    }

    .czc .czc-bar[data-stuck="true"],
    .czc .czc-bar.is-stuck {
        border-bottom-color: var(--cz-line);
    }
}

/* Phones: «Фильтры» and the sort share the row */
@media (max-width: 599.98px) {
    .czc .czc-bar__filters {
        flex: 1 1 0;
        min-width: 0;
    }

    .czc .czc-sort-m {
        flex: 1.3 1 0;
        max-width: none;
    }

    /* Active chips: one line that scrolls sideways */
    .czc .czc-chipbar {
        flex-wrap: nowrap;
        margin-right: calc(-1 * var(--czc-gutter));
        margin-left: calc(-1 * var(--czc-gutter));
        padding: calc(1px + var(--czc-hit)) var(--czc-gutter);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .czc .czc-chipbar::-webkit-scrollbar {
        display: none;
    }

    .czc .czc-chipbar > button:not(.czc-textbtn) {
        max-width: none;
    }

    .czc .czc-chipbar > button:not(.czc-textbtn):focus-visible,
    .czc .czc-chipbar > .czc-textbtn:focus-visible {
        outline-offset: -2px;
    }
}

/* ==========================================================================
   Notes above the grid: price sort, slow, banner, stale, past end
   ========================================================================== */

.czc .czc-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 12px;
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 18px;
}

.czc .czc-note > .czc-ico,
.czc .czc-note--stale::before,
.czc .czc-note--pastend::before {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

.czc .czc-note--sort {
    margin-top: -4px;
    margin-bottom: 16px;
    color: var(--cz-text-3);
}

/* The script writes these two with .text(): their icons are CSS (clock, info) */
.czc .czc-note--stale::before,
.czc .czc-note--pastend::before {
    content: "";
    background-color: currentColor;
    -webkit-mask: var(--czc-note-icon) center / 14px 14px no-repeat;
    mask: var(--czc-note-icon) center / 14px 14px no-repeat;
}

.czc .czc-note--stale {
    --czc-note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

.czc .czc-note--pastend {
    --czc-note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* First load: the status text is for screen readers; after 8 s it becomes the visible slow notice */
.czc .czc-loading:not(.is-slow) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

.czc .czc-loading.is-slow {
    margin: 0 0 12px;
    color: var(--cz-text-2);
    font-size: 14px;
    line-height: 20px;
    animation: czc-fade-in 0.15s ease-out;
}

/* «Не удалось обновить список. Показаны прежние результаты.» over the previous results */
.czc .czc-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--cz-line);
    border-left: 3px solid var(--cz-caution);
    border-radius: var(--cz-r-md);
    background: var(--cz-surface);
}

.czc .czc-banner__icon {
    width: 18px;
    height: 18px;
    color: var(--cz-caution);
}

.czc .czc-banner__text {
    flex: 1 1 200px;
    min-width: 0;
    margin: 0;
    color: var(--cz-text);
    font-size: 14px;
    line-height: 20px;
}

.czc .czc-banner__retry {
    min-height: 36px;
    padding: 0 16px;
    font-size: 14px;
}

@media (pointer: coarse) {
    .czc .czc-banner__retry {
        min-height: 44px;
    }
}

/* ==========================================================================
   Results grid and list (the card and its columns: cz-car-card.css)
   ========================================================================== */

.czc .czc-grid {
    transition: opacity 0.12s ease-out;
}

.czc .czc-pages {
    transition: opacity 0.12s ease-out;
}

/* A fourth card column from 1440 px (the catalog only; cz-car-card.css keeps 3 / 2 / 3 for the stock page): with the
   272 px filters the cards stay at about 260 px and more, the width they have at 1200 px with three columns */
@media (min-width: 1440px) {
    .czc .czcard-grid[data-view="grid"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* The subgrid card's trailing margin under the last row is cancelled in cz-car-card.css, next to that margin */

/* Updating: the old results stay (clickable) and dim after 150 ms */
.czc[data-busy] .czc-grid,
.czc[data-busy] .czc-pages,
.czc .czc-main[data-busy] .czc-grid,
.czc .czc-main[data-busy] .czc-pages,
.czc[data-state="updating"] .czc-grid,
.czc[data-state="updating"] .czc-pages {
    opacity: 0.6;
    transition: opacity 0.15s var(--czc-ease-out) 0.15s;
}

/* ==========================================================================
   Empty and error panels
   ========================================================================== */

.czc .czc-empty,
.czc .czc-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 32px 24px;
    border: 1px solid var(--cz-line);
    border-radius: var(--cz-r-lg);
    background: var(--cz-surface);
    text-align: center;
}

.czc .czc-empty > *,
.czc .czc-error > * {
    max-width: 480px;
}

.czc .czc-empty__title,
.czc .czc-error__title {
    margin: 0;
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: 22px;
    font-weight: var(--cz-display-weight, 600);
    line-height: 28px;
    letter-spacing: var(--cz-display-track, 0.01em);
    text-transform: var(--cz-display-case, none);
}

/* Focused by script on error: the ring shows when focus is visible (a keyboard user), not after a click */
.czc .czc-error__title:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--cz-red);
    outline-offset: 4px;
}

.czc .czc-empty__text,
.czc .czc-error__text {
    margin: 8px 0 0;
    color: var(--cz-text-2);
    font-size: 15px;
    line-height: 22px;
}

.czc .czc-error__status {
    margin: 8px 0 0;
    color: var(--cz-text-2);
    font-size: 14px;
    line-height: 20px;
}

.czc .czc-empty__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.czc .czc-error__retry {
    margin-top: 24px;
    padding: 0 28px;
}

/* ==========================================================================
   «Показать ещё» and the pager (#catalog-pagination)
   ========================================================================== */

.czc .czc-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.czc .czc-pages:not(:empty) {
    margin-top: 32px;
}

/* End and cap lines (and any other line the script puts here) */
.czc .czc-pages > p {
    margin: 16px 0 0;
    color: var(--cz-text-3);
    font-size: 13px;
    line-height: 18px;
}

.czc .czc-pages > p.czc-pages__range {
    margin: 0 0 12px;
    color: var(--cz-text-2);
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.czc .czc-more {
    min-width: 280px;
    min-height: 52px;
    padding: 0 24px;
    font-size: 16px;
}

.czc .czc-more:active:not([aria-disabled="true"]) {
    transform: translateY(1px);
}

.czc .czc-more[aria-disabled="true"] {
    cursor: progress;
}

/* Show-more failed: an inline line plus «Повторить» */
.czc .czc-more-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
}

.czc .czc-more-error > p,
.czc .czc-more-error__text {
    margin: 0;
    color: var(--cz-danger-text);
    font-size: 14px;
    line-height: 20px;
}

/* Pager: first, current ± 2, last; on phones «‹ 7 из 500 ›» */
.czc .czc-pager,
.czc .pagination-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 24px;
}

.czc .czc-pages > .czc-pager:first-child,
.czc .czc-pages > .pagination-wrapper:first-child {
    margin-top: 0;
}

.czc .pagination-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: var(--czc-ctl);
    height: var(--czc-ctl);
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: var(--cz-r-md);
    background: transparent;
    color: var(--cz-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: background-color 0.12s ease;
}

.czc .pagination-btn .czc-ico {
    width: 20px;
    height: 20px;
}

.czc .pagination-btn.active,
.czc .pagination-btn[aria-current="page"] {
    border-color: var(--cz-red);
    background: var(--cz-red);
    color: var(--cz-on-red, #fff);
    font-weight: 600;
}

.czc .pagination-btn[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

@media (hover: hover) {
    .czc .pagination-btn:not(.active):not([aria-current="page"]):hover {
        background: var(--cz-raised);
    }
}

.czc .pagination-dots {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    color: var(--cz-text-3);
    font-size: 15px;
    line-height: 20px;
}

.czc .czc-pager__count {
    display: none;
    padding: 0 12px;
    color: var(--cz-text);
    font-size: 15px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .czc .czc-more {
        width: 100%;
        min-width: 0;
    }

    .czc .czc-pager .pagination-btn:not(.pagination-prev):not(.pagination-next),
    .czc .czc-pager .pagination-dots {
        display: none;
    }

    .czc .czc-pager__count {
        display: inline-block;
    }
}

/* ==========================================================================
   Update pill «Обновляем список…» (fixed, bottom centre)
   ========================================================================== */

.czc .czc-pill {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 30;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border: 1px solid var(--cz-line);
    border-radius: 999px;
    background: var(--cz-raised);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    color: var(--cz-text);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%);
    animation: czc-fade-in 0.15s ease-out;
}

html.czc-lock .czc .czc-pill {
    display: none;
}

/* ==========================================================================
   Drawer (below 1024): the sidebar node becomes a fixed panel with its backdrop and the make sub-panel
   ========================================================================== */

@media (max-width: 1023.98px) {
    .czc .czc-side {
        /* coarse sizes inside the drawer, whatever the pointer */
        --czc-row-h: 48px;
        --czc-chip-h: 44px;
        --czc-preset-h: 44px;
        --czc-seg-h: 44px;
        --czc-filter-h: 44px;
        --czc-inbtn: 44px;

        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 100000;
        width: 100%;
        max-width: 420px;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: 0 0 48px rgba(0, 0, 0, 0.5);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.18s var(--czc-ease-in), visibility 0s linear 0.18s;
    }

    .czc .czc-side[data-open="true"],
    .czc .czc-side.is-open {
        transform: none;
        visibility: visible;
        transition: transform 0.24s var(--czc-ease-out), visibility 0s;
    }

    .czc .czc-skip {
        display: none;
    }

    .czc .czc-side__head {
        min-height: 56px;
        padding: 0 8px 0 16px;
        gap: 4px;
    }

    .czc .czc-side__title {
        font-size: 22px;
        line-height: 28px;
    }

    .czc .czc-side__head .czc-side__reset {
        margin-right: 4px;
    }

    .czc .czc-side__close {
        display: inline-flex;
    }

    .czc .czc-side__body {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--cz-line-strong) transparent;
    }

    .czc .czc-side__foot {
        display: block;
        flex: none;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--cz-line);
        background: var(--cz-surface);
    }

    /* The backdrop follows the drawer (its previous sibling): fades in with .is-open, out when it goes */
    .czc .czc-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99999;
        background: rgba(8, 8, 9, 0.72);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s var(--czc-ease-in), visibility 0s linear 0.15s;
    }

    .czc .czc-side[data-open="true"] + .czc-backdrop,
    .czc .czc-side.is-open + .czc-backdrop,
    .czc .czc-backdrop[data-open="true"] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.2s var(--czc-ease-out), visibility 0s;
        animation: czc-fade-in 0.2s var(--czc-ease-out);
    }

    /* Bottom sheet (UI v6 R4, .czc[data-sheet="1"]): the drawer slides up from the bottom and follows a swipe on the
       grab strip or the head (car-catalog-ui.js + cz-swipe.js set an inline translate3d and .is-dragging) */
    .czc[data-sheet="1"] .czc-side {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        height: calc(100vh - 12px);
        height: calc(100dvh - 12px - env(safe-area-inset-top));
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.24s var(--czc-ease-in), visibility 0s linear 0.24s;
    }

    .czc[data-sheet="1"] .czc-side[data-open="true"],
    .czc[data-sheet="1"] .czc-side.is-open {
        transform: none;
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
    }

    .czc[data-sheet="1"] .czc-side.is-dragging,
    .czc[data-sheet="1"] .czc-side.is-dragging + .czc-backdrop {
        transition: none;
    }

    .czc[data-sheet="1"] .czc-side__grab {
        position: relative;
        display: block;
        flex: none;
        height: 20px;
        touch-action: none;
        cursor: grab;
        -webkit-user-select: none;
        user-select: none;
    }

    .czc[data-sheet="1"] .czc-side__grab::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 5px;
        margin: auto;
        border-radius: 999px;
        background: var(--cz-line-strong);
    }

    .czc[data-sheet="1"] .czc-side.is-dragging .czc-side__grab {
        cursor: grabbing;
    }

    .czc[data-sheet="1"] .czc-side__head {
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
    .czc .czc-side {
        border-radius: 0 var(--cz-r-lg) var(--cz-r-lg) 0;
    }

    /* the sheet: centred, at most 640 wide */
    .czc[data-sheet="1"] .czc-side {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 20px 20px 0 0;
    }
}

/* Primary «Показать 1 234 автомобиля»: full width, 52 tall */
.czc .czc-apply {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
}

.czc .czc-apply[aria-busy="true"] {
    cursor: progress;
}

/* Zero results: the ghost «Ничего не найдено» (still enabled: it closes the drawer) */
.czc .czc-apply[data-count="0"] {
    border-color: var(--cz-line-strong);
    background: transparent;
    color: var(--cz-text);
}

@media (hover: hover) {
    .czc .czc-apply[data-count="0"]:hover {
        border-color: var(--cz-text-3);
        background: var(--cz-raised);
    }
}

/* Drawer level rows (the drill-down in drawer mode): li.czc-level-row > button.czc-level (caption | value | ›)
   plus ⊗ (.czc-level__x) once the level is chosen; the captions share a column */
.czc .czc-nav__levels {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.czc .czc-level-row {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-radius: var(--cz-r-md);
    background: var(--cz-raised);
}

.czc .czc-level {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    min-width: 0;
    min-height: 48px;
    padding: 0 12px;
    border-radius: var(--cz-r-md);
    color: var(--cz-text);
    text-align: left;
    transition: background-color 0.1s ease;
}

.czc .czc-level-row > .czc-level:not(:last-child) {
    padding-right: 4px;
}

.czc .czc-level:focus-visible {
    outline-offset: -2px;
}

.czc .czc-level:active {
    background: var(--cz-line);
}

.czc .czc-level__cap {
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 18px;
}

.czc .czc-level__val {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.czc .czc-level__val--error {
    color: var(--cz-danger-text);
    font-size: 14px;
    font-weight: 400;
}

.czc .czc-level__val.czc-skel {
    width: 55%;
    height: 14px;
}

.czc .czc-level > .czc-ico {
    color: var(--cz-text-2);
}

.czc .czc-level__x {
    flex: none;
    margin-right: 2px;
}

/* In the drawer every reachable level is one 48px row: caption | value | ⊗ or › (the captions share a column) */
@media (max-width: 1023.98px) {
    .czc .czc-pick {
        grid-template-columns: 104px minmax(0, 1fr) 44px;
        column-gap: 12px;
        min-height: 48px;
        padding: 2px 2px 2px 12px;
    }

    .czc .czc-pick__text {
        display: contents;
    }

    .czc .czc-pick__cap {
        grid-column: 1;
    }

    .czc .czc-pick__val,
    .czc .czc-pick__value {
        grid-column: 2;
    }

    .czc .czc-pick__x,
    .czc .czc-pick__remove {
        grid-column: 3;
        grid-row: 1;
    }
}

/* Sub-panel: slides over the drawer body */
@media (max-width: 1023.98px) {
    .czc .czc-sub {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        background: var(--cz-surface);
        animation: czc-sub-in 0.2s var(--czc-ease-out);
    }
}

@keyframes czc-sub-in {
    from {
        transform: translateX(100%);
    }
}

/* Optional exits: the script adds .is-closing, then sets `hidden` 160 ms (sub-panel) / 100 ms (pill) later */
.czc .czc-sub.is-closing {
    transform: translateX(100%);
    transition: transform 0.16s var(--czc-ease-in);
}

.czc .czc-pill.is-closing {
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

.czc .czc-sub__head {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    min-height: 56px;
    padding: 0 12px 0 4px;
    border-bottom: 1px solid var(--cz-line);
}

.czc .czc-sub__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: 20px;
    font-weight: var(--cz-display-weight, 600);
    line-height: 24px;
    letter-spacing: var(--cz-display-track, 0.01em);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.czc .czc-sub__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 16px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Make and model levels open with the segmented order above the filter: it keeps the filter's 12px from the header */
.czc .czc-sub__body > .czc-seg {
    margin-top: 12px;
}

/* The list filter stays at the top of the sub-panel while the list scrolls */
.czc .czc-sub__body .czc-input--filter,
.czc .czc-sub__body .czc-nav__filter {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -16px;
    padding: 12px 16px 8px;
    background: var(--cz-surface);
}

.czc .czc-sub__body .czc-input--filter > .czc-ico,
.czc .czc-sub__body .czc-nav__filter > .czc-ico {
    left: 28px;
    margin-top: -6px;
}

.czc .czc-sub__body .czc-input--filter .czc-iconbtn,
.czc .czc-sub__body .czc-nav__filter .czc-iconbtn {
    top: 12px;
    right: 16px;
}

.czc .czc-sub__body .czc-nav__list {
    max-height: none;
    overflow: visible;
}

.czc .czc-sub__body .czc-nav__list button,
.czc .czc-sub__body .czc-nav__opt,
.czc .czc-nav__row--sub {
    height: 48px;
    font-size: 16px;
}

.czc .czc-sub__body .czc-nav__count {
    font-size: 14px;
    line-height: 20px;
}

/* ==========================================================================
   Press feedback (fine pointer): chips and buttons scale .97
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    .czc .czc-chip:not([aria-disabled="true"]):active,
    .czc .czc-preset:active,
    .czc .czc-chipbar > button:not(.czc-textbtn):active,
    .czc .czc-btn:not([aria-disabled="true"]):not(:disabled):not(.czc-more):active {
        transform: scale(0.97);
    }
}

/* ==========================================================================
   User preferences: more contrast, forced colours, reduced motion
   ========================================================================== */

@media (forced-colors: active) {
    .czc .czc-side,
    .czc .czc-side__head,
    .czc .czc-side__body > * + *,
    .czc .czc-side__foot,
    .czc .czc-sub__head,
    .czc .czc-bar,
    .czc .czc-view,
    .czc .czc-empty,
    .czc .czc-error,
    .czc .czc-banner,
    .czc .czc-pill,
    .czc .czc-chip,
    .czc .czc-preset,
    .czc .czc-chipbar > button,
    .czc .czc-btn,
    .czc .pagination-btn {
        border-color: CanvasText;
    }

    .czc .czc-bar[data-stuck="true"],
    .czc .czc-bar.is-stuck {
        border-bottom-color: CanvasText;
    }

    .czc .czc-input__field,
    .czc .czc-select {
        border-color: ButtonText;
    }

    .czc .czc-select {
        -webkit-appearance: auto;
        appearance: auto;
        background-image: none;
    }

    .czc .czc-chip[aria-pressed="true"],
    .czc .czc-preset[aria-pressed="true"],
    .czc .czc-view__btn[aria-pressed="true"],
    .czc .czc-seg input:checked + span,
    .czc .pagination-btn.active,
    .czc .pagination-btn[aria-current="page"],
    .czc .czc-badge,
    .czc .czc-btn--primary {
        forced-color-adjust: none;
        border-color: Highlight;
        background: Highlight;
        box-shadow: none;
        color: HighlightText;
    }

    /* forced colours paint every underline in the text colour: only the checked sort keeps one */
    .czc .czc-sort__text {
        text-decoration-line: none;
    }

    .czc .czc-sort__radio:checked + .czc-sort__text {
        text-decoration-line: underline;
        text-decoration-color: Highlight;
    }

    .czc .czc-pick,
    .czc .czc-level-row,
    .czc .czc-seg {
        border: 1px solid CanvasText;
    }

    .czc .czc-switch::before {
        forced-color-adjust: none;
        border-color: CanvasText;
        background: Canvas;
    }

    .czc .czc-switch__thumb {
        forced-color-adjust: none;
        background: CanvasText;
    }

    .czc .czc-switch[aria-checked="true"]::before {
        border-color: Highlight;
        background: Highlight;
    }

    .czc .czc-switch[aria-checked="true"] .czc-switch__thumb {
        background: HighlightText;
    }

    .czc .czc-chip[aria-disabled="true"]:not([aria-pressed="true"]),
    .czc .pagination-btn[aria-disabled="true"],
    .czc .czc-select:disabled,
    .czc .czc-nav__list button[aria-disabled="true"] {
        border-color: GrayText;
        color: GrayText;
        opacity: 1;
    }

    .czc :focus-visible,
    .czc .czc-switch:focus-visible::before,
    .czc .czc-sort__radio:focus-visible + .czc-sort__text,
    .czc .czc-seg input:focus-visible + span {
        outline-color: Highlight;
    }

    .czc .czc-input__field:focus,
    .czc .czc-select:focus {
        border-color: Highlight;
        outline: 2px solid Highlight;
    }

    .czc .czc-skel,
    .czc .czc-nav__stack[hidden] + .czc-nav__level > .czc-nav__list--skel::before,
    .czc .czc-nav__stack[hidden] + .czc-nav__level > .czc-nav__list--skel::after {
        border: 1px solid GrayText;
        background: transparent;
    }

    .czc .czc-note--stale::before,
    .czc .czc-note--pastend::before {
        forced-color-adjust: none;
        background-color: CanvasText;
    }

    .czc .czc-backdrop {
        forced-color-adjust: none;
        background: rgba(0, 0, 0, 0.6);
    }
}

/* Durations to (almost) zero, no animation, skeletons static; the drawer and the sub-panel appear in place */
@media (prefers-reduced-motion: reduce) {
    .czc *,
    .czc *::before,
    .czc *::after {
        animation: none !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* The bottom sheet appears and goes in place (a swipe still follows the finger) */
@media (prefers-reduced-motion: reduce) and (max-width: 1023.98px) {
    .czc[data-sheet="1"] .czc-side,
    .czc[data-sheet="1"] .czc-side[data-open="true"],
    .czc[data-sheet="1"] .czc-side.is-open {
        transition: none;
    }
}

/* Forced colours paint backgrounds as Canvas: the grab pill keeps the text colour */
@media (forced-colors: active) and (max-width: 1023.98px) {
    .czc[data-sheet="1"] .czc-side__grab::before {
        forced-color-adjust: none;
        background: CanvasText;
    }
}