/**
 * Homepage carousel «Свежие объявления из Кореи» (elements/homepage-catalog.php, assets/js/homepage-catalog.js).
 *
 * The car page's «import dossier» language on the homepage: graphite cards, brand red as the only accent,
 * Oswald numbers, honestly labelled prices. Everything is scoped under .czh with czh / czh-card class names:
 * the site-wide car-catalog.css styles .car-*, .customs-badge, .btn, .spinner and the fadeIn / spin keyframes.
 * The site root is 10px (html{font-size:62.5%}), so sizes are px, never rem. Rubik 400/600 only (the site's
 * Rubik 500 is the italic file). Mobile first: phone values are the defaults, wider screens override them.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

.czh {
    /* Colours, fonts, radii and gutter come from assets/css/cz-site.css (:root) */
    /* Block tokens */
    --czh-gutter: 16px; /* container side padding: 16 below 768, 15 above (the site's Bricks container) */
    --czh-gap: 12px; /* between cards: 12 / 20 / 24 */
    --czh-card-w: min(100% - 44px, 420px); /* phone: one card and the next one peeking */
    --czh-track-pad: 16px; /* phone: the track runs to the screen edges */
    --czh-body-pad: 16px; /* card body: 16 on phones, 20 from 640 */
    --czh-photo-bg: var(--cz-photo-bg, #121214);
    --czh-dot: var(--cz-dot, #6b6b72);
    --czh-pressed: var(--cz-pressed, #26262a);
}

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

/* Bricks builder settings (post-2.min.css, #brxe-syjsce) give this element outer margins: cancelled here, the
   section's own padding spaces it. The builder's background-image rule on .homepage-catalog-wrapper still wins. */
.brxe-homepage-catalog {
    margin: 0 !important;
}

.czh {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 64px 0;
    background: var(--cz-page) url("../images/home-catalog-bg.png") center / cover no-repeat;
    color: var(--cz-text);
    font-family: var(--cz-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

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

/* `hidden` must beat every component's display rule */
.czh [hidden] {
    display: none !important;
}

.czh h2,
.czh h3,
.czh p,
.czh ul,
.czh li,
.czh dl,
.czh dt,
.czh dd {
    margin: 0;
    padding: 0;
}

.czh ul {
    list-style: none;
}

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

.czh button {
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

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

.czh-sr,
.czh .czh-sr {
    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;
}

.czh .czh__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--czh-gutter);
}

/* ==========================================================================
   Heading
   ========================================================================== */

.czh .czh__head {
    margin: 0 0 28px;
    text-align: center;
}

.czh .czh__title {
    margin: 0;
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: 24px;
    font-weight: var(--cz-display-weight, 600);
    line-height: 30px;
    letter-spacing: var(--cz-display-track, 0.01em);
    text-align: center;
    text-transform: var(--cz-display-case, uppercase);
    text-wrap: balance;
}

.czh .czh__title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 999px;
    background: var(--cz-red);
}

.czh .czh__title:focus {
    outline: none; /* focused by script after «Повторить»; it is not a control */
}

/* ==========================================================================
   Track (native scroll-snap)
   ========================================================================== */

.czh .czh__stage {
    position: relative;
    display: flow-root; /* the track's -6px margin stays inside: the stage does not move when a panel replaces it */
}

/* The 6px padding (16px on phones) with a matching negative margin keeps the cards' focus ring inside the
   scroller, which clips everything outside its padding box. */
.czh .czh__track {
    position: relative; /* the cards' offsetParent: page targets come from their offsetLeft */
    isolation: isolate;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--czh-card-w);
    gap: var(--czh-gap);
    margin: -6px calc(-1 * var(--czh-track-pad));
    padding: 6px var(--czh-track-pad);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--czh-track-pad);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    list-style: none;
}

.czh .czh__track::-webkit-scrollbar {
    display: none;
}

.czh .czh__item {
    position: relative; /* the stretched link's ::after covers this box (not clipped by the card's overflow) */
    display: flex;
    min-width: 0;
    scroll-snap-align: start;
}

/* ==========================================================================
   Card
   ========================================================================== */

.czh .czh-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--cz-line);
    border-radius: var(--cz-r-lg);
    background: var(--cz-surface);
    color: var(--cz-text);
    box-shadow: none;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

/* ---- Photo and scrubber ---- */

.czh .czh-card__media {
    position: relative;
    flex: none;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--czh-photo-bg);
}

@supports not (aspect-ratio: 1 / 1) {
    /* iOS 14 */
    .czh .czh-card__media {
        height: 0;
        padding-top: 56.25%;
    }
}

.czh .czh-card__img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    -webkit-user-drag: none;
}

.czh .czh-card__nophoto {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cz-text-3);
    font-size: 13px;
    line-height: 18px;
}

.czh .czh-card__bars {
    position: absolute;
    right: 12px;
    bottom: 10px;
    left: 12px;
    display: flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.czh .czh-card__media.is-scrub .czh-card__bars {
    opacity: 1;
    transition-duration: 0.15s;
}

.czh .czh-card__bar {
    flex: 1 1 0;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 0 1px rgba(18, 18, 20, 0.35); /* visible on white studio floors */
}

.czh .czh-card__bar.is-active {
    background: var(--cz-red);
}

/* ---- Body ---- */

.czh .czh-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: var(--czh-body-pad);
}

.czh .czh-card__main {
    margin-bottom: 16px; /* the price sits at least 16px below, pushed down by margin-top:auto */
}

.czh .czh-card__titles {
    min-height: 66px; /* two name lines + the trim: facts line up across a row */
}

.czh .czh-card__name {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: 18px;
    font-weight: var(--cz-display-weight, 600);
    line-height: 22px;
    letter-spacing: var(--cz-display-track, 0.005em);
    text-transform: var(--cz-display-case, none);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.czh .czh-card__link,
.czh .czh-card__link:visited,
.czh .czh-card__link:hover {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.15s ease;
}

/* The whole card is the link */
.czh .czh-card__link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-radius: var(--cz-r-lg);
}

.czh .czh-card__link:focus {
    outline: none;
}

.czh .czh-card__link:focus::after {
    outline: 2px solid var(--cz-red);
    outline-offset: 2px;
}

.czh .czh-card__link:focus:not(:focus-visible)::after {
    outline: none;
}

.czh .czh-card__trim {
    overflow: hidden;
    margin-top: 2px;
    color: var(--cz-text-2);
    font-size: 14px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.czh .czh-card__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
    min-height: 44px; /* two rows, so a card with fewer facts keeps the row's rhythm */
    margin-top: 12px;
    color: var(--cz-text);
    font-size: 14px;
    line-height: 20px;
}

.czh .czh-card__fact {
    min-width: 0;
}

/* Tabular figures for the numbers only: Rubik's tabular set also widens the brackets («Гибрид (бензин)» +8 px) */
.czh .czh-card__fact[data-fact="year"],
.czh .czh-card__fact[data-fact="mileage"] {
    font-variant-numeric: tabular-nums;
}

.czh .czh-card__fact dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.czh .czh-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
    margin-top: 14px;
}

.czh .czh-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 2px 9px; /* 3 × 10 with the border */
    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: 13px;
    font-weight: 400;
    line-height: 18px;
    white-space: nowrap;
}

.czh .czh-chip--ok {
    background: var(--cz-ok-bg);
    color: var(--cz-ok);
}

.czh .czh-chip--caution {
    background: var(--cz-caution-bg);
    color: var(--cz-caution);
}

.czh .czh-chip--muted {
    color: var(--cz-text-2);
}

/* ---- Price ---- */

.czh .czh-card__price {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--cz-line);
}

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

.czh .czh-card__price-num {
    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.005em);
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}

.czh .czh-card__price-num.is-new {
    animation: czh-reveal 0.2s ease-out both;
}

@keyframes czh-reveal {
    from {
        opacity: 0;
    }
}

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

.czh .czh-card__price-sub-label {
    color: var(--cz-text-3);
}

.czh .czh-card__price-sub-value {
    color: var(--cz-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Hover, press (no lift, no zoom: nothing can clip) ---- */

@media (hover: hover) and (pointer: fine) {
    .czh .czh__item:hover .czh-card {
        border-color: var(--cz-line-strong);
    }

    .czh .czh__item:hover .czh-card__link {
        text-decoration-color: var(--cz-red);
    }

    .czh .czh__item:active .czh-card {
        transform: scale(0.985);
    }
}

@media (hover: none), (pointer: coarse) {
    .czh .czh__item:active .czh-card {
        background: var(--czh-pressed);
    }
}

/* ==========================================================================
   Skeleton (server-rendered, same boxes as the cards)
   ========================================================================== */

.czh .czh-skel {
    display: block;
    border-radius: 6px;
    background: var(--cz-raised);
    background-clip: content-box; /* a bar inside its line box: the skeleton is as tall as the real text */
    animation: czh-pulse 1.6s ease-in-out infinite;
}

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

.czh .czh-card--skel .czh-card__media {
    border-radius: 0;
    background-clip: border-box;
}

.czh .czh-skel--name {
    width: 72%;
    height: 22px;
    padding: 2px 0;
}

.czh .czh-skel--trim {
    width: 48%;
    height: 20px;
    margin-top: 2px;
    padding: 4px 0;
}

.czh .czh-skel--fact {
    width: 76%;
    height: 20px;
    padding: 4px 0;
}

.czh .czh-skel--chip {
    width: 96px;
    height: 24px;
}

.czh .czh-skel--label {
    width: 150px;
    height: 18px;
    padding: 4px 0;
}

.czh .czh-skel--num {
    display: inline-block;
    width: 160px;
    max-width: 100%;
    height: 24px;
    vertical-align: middle;
}

.czh .czh-card__price > .czh-skel--num {
    display: block;
    height: 32px;
    padding: 4px 0;
}

.czh .czh-skel--sub {
    width: 180px;
    max-width: 100%;
    height: 18px;
    padding: 4px 0;
}

/* ==========================================================================
   Loading note, error and empty panels
   ========================================================================== */

/* While loading, the note sits in the controls row's reserved 44px: nothing moves when it appears */
.czh[data-state="loading"] .czh__state {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    pointer-events: none;
}

.czh .czh__slow {
    color: var(--cz-text-2);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.czh[data-state="error"] .czh__track,
.czh[data-state="empty"] .czh__track,
.czh[data-state="error"] .czh__controls,
.czh[data-state="empty"] .czh__controls {
    display: none;
}

.czh .czh__panel {
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 24px;
    border: 1px solid var(--cz-line);
    border-radius: var(--cz-r-lg);
    background: var(--cz-surface);
    text-align: center;
}

.czh .czh__panel-title {
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: 22px;
    font-weight: var(--cz-display-weight, 600);
    line-height: 28px;
    text-transform: var(--cz-display-case, none);
}

.czh .czh__panel-text {
    margin-top: 8px;
    color: var(--cz-text-2);
    font-size: 15px;
    line-height: 22px;
}

.czh .czh__retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 20px;
    padding: 0 24px;
    border: 1px solid var(--cz-line-strong);
    border-radius: var(--cz-r-md);
    background: transparent;
    color: var(--cz-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.czh .czh__retry:hover {
    border-color: var(--cz-text-3);
    background: var(--cz-raised);
    color: var(--cz-text);
}

/* ==========================================================================
   Controls row: ‹ dots ›, centred under the track, never over the cards
   ========================================================================== */

.czh .czh__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 20px;
}

/* Loading keeps the row's 44px reserved; one page needs no controls */
.czh[data-state="loading"] .czh__controls > *,
.czh[data-pages="1"] .czh__controls > * {
    visibility: hidden;
}

.czh .czh__arrow {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--cz-line-strong);
    border-radius: 50%;
    background: var(--cz-surface);
    color: var(--cz-text);
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.czh .czh__arrow svg {
    display: block;
    width: 20px;
    height: 20px;
}

@media (hover: hover) and (pointer: fine) {
    .czh .czh__arrow:not([aria-disabled="true"]):hover {
        border-color: var(--cz-red);
        background: var(--cz-red);
        color: var(--cz-on-red, #fff);
    }
}

.czh .czh__arrow:not([aria-disabled="true"]):active {
    transform: scale(0.96);
}

.czh .czh__arrow[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

.czh .czh__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.czh .czh__dot {
    position: relative;
    flex: none;
    width: 24px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.czh .czh__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 999px;
    background: var(--czh-dot);
}

.czh .czh__dot[aria-current="true"]::before {
    width: 20px;
    margin-left: -10px;
    background: var(--cz-red);
}

.czh .czh__counter {
    min-width: 72px;
    color: var(--cz-text-2);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   CTA
   ========================================================================== */

.czh .czh__cta {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.czh .czh__cta-link,
.czh .czh__cta-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 280px;
    height: 52px;
    padding: 0 32px;
    border: 1px solid transparent;
    border-radius: var(--cz-r-md);
    background: var(--cz-red);
    color: var(--cz-on-red, #fff);
    font-family: var(--cz-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.czh .czh__cta-link:hover {
    background: var(--cz-red-hover);
    color: var(--cz-on-red, #fff);
}

.czh .czh__cta-link:active {
    transform: translateY(1px);
}

/* ==========================================================================
   Wider screens
   ========================================================================== */

@media (min-width: 400px) {
    .czh .czh__controls {
        gap: 12px;
    }
}

@media (min-width: 600px) {
    .czh .czh__cta-link {
        width: auto;
    }
}

@media (min-width: 640px) {
    .czh {
        --czh-gap: 20px;
        --czh-card-w: calc((100% - var(--czh-gap)) / 2);
        --czh-track-pad: 6px;
        --czh-body-pad: 20px;
    }

    .czh .czh-card__titles {
        min-height: 70px;
    }

    .czh .czh-card__name {
        font-size: 20px;
        line-height: 24px;
    }

    .czh .czh-skel--name {
        height: 24px;
    }
}

@media (min-width: 768px) {
    .czh {
        --czh-gutter: 15px;
        padding: 96px 0;
    }

    .czh .czh__head {
        margin-bottom: 40px;
    }

    .czh .czh__title {
        font-size: 30px;
        line-height: 36px;
    }

    .czh .czh__controls {
        margin-top: 24px;
    }

    .czh .czh__cta {
        margin-top: 40px;
    }
}

@media (min-width: 1024px) {
    .czh {
        --czh-gap: 24px;
        --czh-card-w: calc((100% - 2 * var(--czh-gap)) / 3);
    }
}

/* ==========================================================================
   Rows shared by every card of the track (subgrid)
   ========================================================================== */

/* Each card spans the track's five rows (photo, titles, facts, chips, price) and adopts them with subgrid, so the
   facts and the price divider line up across the cards without reserving a second name line in every card: the
   titles row is as tall as the tallest title in the track. The chips row takes any spare height (the script keeps
   the skeleton's height when the cards come in shorter). Without subgrid (Safari < 16, Chrome < 117) the flex
   column with the min-heights above does the same job, with the second name line always reserved. */
@supports (grid-template-rows: subgrid) {
    .czh .czh__track {
        grid-template-rows: auto auto auto 1fr auto;
        row-gap: 0; /* --czh-gap is between the cards only; the rows are spaced by their own margins */
    }

    .czh .czh__item,
    .czh .czh-card {
        display: grid;
        grid-row: 1 / -1;
        grid-template-rows: subgrid;
        grid-template-columns: minmax(0, 1fr);
    }

    .czh .czh-card__body,
    .czh .czh-card__main {
        display: contents;
    }

    .czh .czh-card__titles,
    .czh .czh-card__facts,
    .czh .czh-card__chips,
    .czh .czh-card__price {
        margin-right: var(--czh-body-pad);
        margin-left: var(--czh-body-pad);
    }

    .czh .czh-card__titles {
        min-height: 0;
        padding-top: var(--czh-body-pad);
    }

    .czh .czh-card__chips {
        align-self: start;
    }

    .czh .czh-card__price {
        margin-top: 16px;
        padding-bottom: var(--czh-body-pad);
    }

    .czh[data-hide~="price"] .czh-card__chips {
        margin-bottom: var(--czh-body-pad);
    }
}

/* «Проходной через 10 мес.» (176 px) and «Отчёт об осмотре» (131 px) need 313 px on one line. On narrower cards
   they wrap, and the newest listings nearly always include such a car, so the skeleton holds the second chip row
   there and the real cards come in at its height. The ranges follow the card widths of section 1.5: one card below
   423 px, two below 762 px, three below 1143 px. */
@media (max-width: 422px), (min-width: 640px) and (max-width: 761px), (min-width: 1024px) and (max-width: 1142px) {
    .czh .czh-card--skel .czh-card__chips {
        min-height: 54px;
    }
}

/* Error and empty: the panel sits in the middle of the height the track and the controls had (kept by the script) */
.czh[data-state="error"] .czh__stage,
.czh[data-state="empty"] .czh__stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ==========================================================================
   User preferences
   ========================================================================== */

@media (forced-colors: active) {
    .czh .czh-card {
        border-color: CanvasText;
    }

    .czh .czh__dot::before {
        background: CanvasText;
    }

    .czh .czh__dot[aria-current="true"]::before {
        background: Highlight;
    }

    .czh .czh-card__bars {
        display: none;
    }
}

/* All transitions to zero and a static skeleton; the photo scrub stays (it follows the user's own pointer) */
@media (prefers-reduced-motion: reduce) {
    .czh *,
    .czh *::before,
    .czh *::after {
        animation: none !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* UI v6 type (R5): live from R8 (CARZAKAZ_UI_V6) */

/* Geologica is wider than the Oswald it replaces, so a name that took one line now often takes two (320-768 px cards).
   The skeleton holds the second name line (22 px, the card name's line-height) and the real cards come in at its
   height; the script keeps the skeleton's height when they come in shorter. */
[data-cz-ui="6"] .czh .czh-card--skel .czh-card__titles {
    padding-bottom: 22px;
}