/* ==================================================================================
 * 42-v160-listing.css — 매물 검색 결과 페이지 (views/pages/car-list.php)
 * ----------------------------------------------------------------------------------
 * WHY THIS FILE EXISTS
 * The v160 redesign rewrote car-list.php onto a new `.v160-pub-*` vocabulary, but
 * 39-v160-public.css was written against the old `.gab-list-*` / `.gab-filter-*`
 * markup. Everything the rewritten template emits below the shared primitives was
 * therefore unstyled. This layer supplies the missing rules.
 *
 * SCOPE
 *   Defines ONLY classes that car-list.php emits and that no earlier layer defines.
 *   It never redefines a foundation primitive (.v160-btn / .v160-input / .v160-chip /
 *   .v160-badge / .v160-check-row / .v160-segmented / .v160-pagination / .v160-empty
 *   / .v160-alert / .v160-toolbar / .v160-container …) — it composes from them.
 *   Rules already present in 39-v160-public.css for .v160-pub-row, __media, __main,
 *   __title, __specs, __meta and for .v160-pub-filters / .v160-pub-facet /
 *   .v160-pub-facet__head / __body are LEFT INTACT; only genuine conflicts with the
 *   new DOM are overridden, and each such override names the file:line it defeats.
 *
 * LOAD ORDER
 *   Loads after 38-foundation / 39-public / 40-console / 41-mobile, so it wins the
 *   cascade at equal specificity without needing !important.
 *
 * DESIGN TARGET
 *   Encar / KCar search results: 1px hairlines, cool-slate neutrals, soft elevation,
 *   brand red as an accent only, dense and scannable, tabular numerals everywhere a
 *   number can be compared vertically.
 *
 * HOUSE RULES OBSERVED
 *   Logical properties only (RTL-safe). No :has(), no @layer, no nesting, no
 *   preprocessor syntax. No raw hex colours — every colour is a token or an rgba()
 *   scrim declared as a local custom property below.
 *
 * CONTENTS
 *   1.  Local custom properties
 *   2.  Page skeleton & two-column layout
 *   3.  Breadcrumb
 *   4.  Result header + assurance strip
 *   5.  Filter rail — shell (head / body / foot)
 *   6.  Filter rail — facets (details/summary accordion)
 *   7.  Filter rail — brand & model
 *   8.  Filter rail — dual range slider, min/max pair, colour swatch
 *   9.  Mobile compact list bar
 *   10. Result toolbar
 *   11. Applied-filter chip row
 *   12. Recommended block
 *   13. Results — list & grid presentations
 *   14. Result row — parts owned by this template
 *   15. Pagination
 *   16. Empty state
 *   17. Compare tray
 *   18. Responsive — tablet (<=1024)
 *   19. Responsive — phone (<=640)
 *   20. RTL, reduced motion, forced colours, print
 * ================================================================================== */


/* ==================================================================================
 * 1. LOCAL CUSTOM PROPERTIES
 * ----------------------------------------------------------------------------------
 * Layer-local only (prefix --v160-list-*). No token from 38-v160-foundation.css is
 * redefined here. rgba() scrims are declared once so no raw hex appears in a rule.
 * ================================================================================== */

:root {
    /* Filter rail width and its sticky offset below the site header. */
    --v160-list-rail-w: 268px;
    --v160-list-rail-top: 96px;
    --v160-list-rail-gap: 20px;   /* rail top offset + breathing room */

    /* Media scrims — photo-count pill and compare-tray lift. */
    --v160-list-scrim: rgba(15, 23, 42, 0.72);
    --v160-list-elev-up: 0 -4px 16px rgba(15, 23, 42, 0.10);

    /* Result presentation geometry. */
    --v160-list-thumb-w: 232px;
    --v160-list-aside-w: 176px;
    --v160-list-card-min: 248px;
}


/* ==================================================================================
 * 2. PAGE SKELETON & TWO-COLUMN LAYOUT
 * ================================================================================== */

.v160-pub-list-page {
    background: var(--v160-surface-2);
    padding-block: var(--v160-space-4) var(--v160-space-10);
}

.v160-pub-list-layout {
    display: grid;
    grid-template-columns: var(--v160-list-rail-w) minmax(0, 1fr);
    align-items: start;
    gap: var(--v160-space-6);
}

.v160-pub-results-col {
    display: flex;
    flex-direction: column;
    gap: var(--v160-space-4);
    min-inline-size: 0;
}


/* ==================================================================================
 * 3. BREADCRUMB
 * ----------------------------------------------------------------------------------
 * Slim hairline row above the H1. Deliberately quiet: 12px, subtle, no chrome.
 * ================================================================================== */

.v160-pub-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
    padding-block: var(--v160-space-2) var(--v160-space-3);
    font-size: var(--v160-fs-xs);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-subtle);
}

.v160-pub-breadcrumb__link {
    color: var(--v160-text-muted);
    text-decoration: none;
    border-radius: var(--v160-r-xs);
    transition: color var(--v160-dur-fast) var(--v160-ease);
}

.v160-pub-breadcrumb__link:hover,
.v160-pub-breadcrumb__link:focus-visible {
    color: var(--v160-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.v160-pub-breadcrumb__link:focus-visible {
    outline: 2px solid var(--v160-accent);
    outline-offset: 2px;
}

.v160-pub-breadcrumb__sep {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--v160-text-placeholder);
}

.v160-pub-breadcrumb__current {
    min-inline-size: 0;
    color: var(--v160-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==================================================================================
 * 4. RESULT HEADER + ASSURANCE STRIP
 * ================================================================================== */

.v160-pub-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--v160-space-4);
    margin-block-end: var(--v160-space-5);
}

.v160-pub-list-head__main {
    flex: 1 1 320px;
    min-inline-size: 0;
}

.v160-pub-list-head__title {
    margin: 0;
    font-size: var(--v160-fs-2xl);
    font-weight: 700;
    line-height: var(--v160-lh-tight);
    letter-spacing: var(--v160-track-tight);
    color: var(--v160-text);
    overflow-wrap: anywhere;
}

.v160-pub-list-head__count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: var(--v160-space-2) 0 0;
    font-size: var(--v160-fs-md);
    font-variant-numeric: tabular-nums;
}

.v160-pub-list-head__count strong {
    font-size: var(--v160-fs-xl);
    line-height: 1.1;
}

.v160-pub-list-head__desc {
    margin: var(--v160-space-1) 0 0;
    max-inline-size: 62ch;
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-muted);
}

/* Trust / brokerage note strip — pill list, never a card. */
.v160-pub-assurance {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v160-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.v160-pub-assurance li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 6px;
    padding-inline: var(--v160-space-3);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-pill);
    background: var(--v160-surface);
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-xs);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.v160-pub-assurance li i {
    flex: 0 0 auto;
    font-size: var(--v160-fs-sm);
    color: var(--v160-accent);
}


/* ==================================================================================
 * 5. FILTER RAIL — SHELL
 * ----------------------------------------------------------------------------------
 * The rail itself (.v160-pub-filters) is already a sticky, scrolling, hairline card
 * in 39-v160-public.css:2726. What was missing is its internal chrome: a sticky
 * header, the scroll body and a sticky footer holding the "N개 결과 보기" CTA.
 * The same element also carries .v160-mob-sheet, so all desktop chrome is scoped to
 * (min-width: 1025px) and the sheet framework in 41-v160-mobile.css owns <=1024.
 * ================================================================================== */

.v160-pub-filters__title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-inline-size: 0;
    margin: 0;
    font-size: var(--v160-fs-md);
    font-weight: 700;
    line-height: var(--v160-lh-tight);
    color: var(--v160-text);
}

.v160-pub-filters__title i {
    flex: 0 0 auto;
    color: var(--v160-text-subtle);
}

@media (min-width: 1025px) {

    .v160-pub-filters__head {
        position: sticky;
        inset-block-start: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: var(--v160-space-2);
        padding-block: var(--v160-space-3);
        padding-inline: var(--v160-space-4);
        border-block-end: 1px solid var(--v160-border);
        background: var(--v160-surface);
    }

    .v160-pub-filters__body {
        display: block;
    }

    .v160-pub-filters__foot {
        position: sticky;
        inset-block-end: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: var(--v160-space-2);
        padding-block: var(--v160-space-3);
        padding-inline: var(--v160-space-4);
        border-block-start: 1px solid var(--v160-border);
        background: var(--v160-surface);
    }

    /* The sheet close button belongs to the mobile presentation only. */
    .v160-pub-filters .v160-mob-sheet__close {
        display: none;
    }
}


/* ==================================================================================
 * 6. FILTER RAIL — FACETS
 * ----------------------------------------------------------------------------------
 * The template uses <details class="v160-pub-facet"><summary class="…__head">, not a
 * button with aria-expanded. 39-v160-public.css:2795 already lays the head out as a
 * flex row; here we kill the native disclosure marker and drive the caret from
 * [open] instead of [aria-expanded] (39-v160-public.css:2829 keys off the latter and
 * simply never matches this markup, so there is nothing to defeat).
 * ================================================================================== */

.v160-pub-facet__head {
    cursor: pointer;
    list-style: none;
}

.v160-pub-facet__head::-webkit-details-marker {
    display: none;
}

.v160-pub-facet__head::marker {
    content: "";
}

.v160-pub-facet__title {
    min-inline-size: 0;
    font-size: var(--v160-fs-md);
    font-weight: 700;
    color: var(--v160-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v160-pub-facet__caret {
    flex: 0 0 auto;
    font-size: var(--v160-fs-xs);
    color: var(--v160-text-subtle);
    transition: transform var(--v160-dur) var(--v160-ease);
}

details.v160-pub-facet[open] > .v160-pub-facet__head .v160-pub-facet__caret {
    transform: rotate(180deg);
}

.v160-pub-facet__head:focus-visible {
    outline: 2px solid var(--v160-accent);
    outline-offset: -2px;
    border-radius: var(--v160-r-sm);
}

/* A facet that is not an accordion (the keyword field). It has no summary row, so it
 * must supply its own block padding to line up with the accordion bodies. */
.v160-pub-facet--plain {
    padding-block: var(--v160-space-4) var(--v160-space-3);
    padding-inline: var(--v160-space-4);
}

.v160-pub-facet--plain .v160-field__label {
    margin-block-end: 6px;
}


/* ==================================================================================
 * 7. FILTER RAIL — BRAND & MODEL
 * ----------------------------------------------------------------------------------
 * Origin segmented control -> search-within-brands -> scrollable brand list with a
 * right-aligned tabular count per row -> per-brand "모델" expander -> model links.
 * ================================================================================== */

.v160-pub-origin {
    display: flex;
    inline-size: 100%;
    margin-block-end: var(--v160-space-2);
}

.v160-pub-origin .v160-segmented__item {
    flex: 1 1 0;
    min-inline-size: 0;
    padding-inline: var(--v160-space-2);
}

.v160-pub-brandsearch {
    margin-block-end: var(--v160-space-2);
}

.v160-pub-brandlist {
    max-block-size: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--v160-space-2);
    border: 1px solid var(--v160-border-subtle);
    border-radius: var(--v160-r-md);
    background: var(--v160-surface);
    scrollbar-width: thin;
}

.v160-pub-brandlist__empty {
    margin: 0;
    padding-block: var(--v160-space-4);
    text-align: center;
    font-size: var(--v160-fs-sm);
    color: var(--v160-text-subtle);
}

/* Only the <div> wrapper gets a divider — the "전체" row is a bare <label>. */
div.v160-pub-brand {
    border-block-end: 1px solid var(--v160-border-subtle);
}

div.v160-pub-brand:last-of-type {
    border-block-end: 0;
}

.v160-pub-brand__row {
    min-block-size: 38px;
}

.v160-pub-brand__row .v160-check-row__count {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
}

.v160-pub-brand__row:hover {
    color: var(--v160-text);
}

/* Brand logo (img) or its two-letter fallback (span) — gab_brand_mark() emits both. */
.v160-pub-brand__mark {
    flex: 0 0 auto;
    inline-size: 20px;
    block-size: 20px;
    object-fit: contain;
}

span.v160-pub-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v160-r-xs);
    background: var(--v160-surface-3);
    color: var(--v160-text-subtle);
    font-size: var(--v160-fs-2xs);
    font-weight: 700;
    line-height: 1;
}

/* "+N개 더보기" style expander — indented to sit under the brand label. */
.v160-pub-brand__more {
    margin-inline-start: 28px;
    margin-block-end: var(--v160-space-1);
    min-block-size: 28px;
    font-size: var(--v160-fs-xs);
}

.v160-pub-brand__more i {
    font-size: 10px;
    transition: transform var(--v160-dur) var(--v160-ease);
}

.v160-pub-brand__more[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.v160-pub-models {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin-block: 0 var(--v160-space-2);
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 28px 0;
}

.v160-pub-models[hidden] {
    display: none;
}

.v160-pub-models__item {
    display: block;
    padding-block: 6px;
    padding-inline: var(--v160-space-2);
    border-radius: var(--v160-r-sm);
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-snug);
    text-decoration: none;
    transition: background var(--v160-dur-fast) var(--v160-ease),
                color var(--v160-dur-fast) var(--v160-ease);
}

.v160-pub-models__item:hover {
    background: var(--v160-surface-3);
    color: var(--v160-text);
}

.v160-pub-models__item.is-active,
.v160-pub-models__item[aria-current="page"] {
    background: var(--v160-accent-soft);
    color: var(--v160-accent);
    font-weight: 700;
}

.v160-pub-models__item:focus-visible {
    outline: 2px solid var(--v160-accent);
    outline-offset: -2px;
}


/* ==================================================================================
 * 8. FILTER RAIL — DUAL RANGE SLIDER, MIN/MAX PAIR, COLOUR SWATCH
 * ----------------------------------------------------------------------------------
 * Two overlaid <input type="range"> elements. The tracks are transparent and
 * pointer-events are disabled on the inputs so only the thumbs are grabbable; the
 * visible rail is .__track with .__fill painted between the two values by the view's
 * own script (it writes inset-inline-start / inline-size, so both must be logical).
 * ================================================================================== */

.v160-pub-range {
    position: relative;
    display: block;
    block-size: 26px;
    margin-block: var(--v160-space-2) var(--v160-space-3);
    margin-inline: 9px;
}

.v160-pub-range__track {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    block-size: 4px;
    transform: translateY(-50%);
    border-radius: var(--v160-r-pill);
    background: var(--v160-border-strong);
    pointer-events: none;
}

.v160-pub-range__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    border-radius: inherit;
    background: var(--v160-accent);
}

.v160-pub-range__slider {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.v160-pub-range__slider:focus {
    outline: none;
}

.v160-pub-range__slider::-webkit-slider-runnable-track {
    block-size: 26px;
    background: transparent;
    border: 0;
}

.v160-pub-range__slider::-moz-range-track {
    block-size: 26px;
    background: transparent;
    border: 0;
}

.v160-pub-range__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 18px;
    block-size: 18px;
    margin-block-start: 4px;
    border: 2px solid var(--v160-accent);
    border-radius: 50%;
    background: var(--v160-surface);
    box-shadow: var(--v160-elev-2);
    cursor: pointer;
    pointer-events: auto;
}

.v160-pub-range__slider::-moz-range-thumb {
    inline-size: 14px;
    block-size: 14px;
    border: 2px solid var(--v160-accent);
    border-radius: 50%;
    background: var(--v160-surface);
    box-shadow: var(--v160-elev-2);
    cursor: pointer;
    pointer-events: auto;
}

.v160-pub-range__slider:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--v160-ring);
}

.v160-pub-range__slider:focus-visible::-moz-range-thumb {
    box-shadow: var(--v160-ring);
}

/* The min handle must stay grabbable when the two values collide. */
.v160-pub-range__slider--min { z-index: 2; }
.v160-pub-range__slider--max { z-index: 1; }

.v160-pub-minmax {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
}

.v160-pub-minmax .v160-input {
    flex: 1 1 0;
    min-inline-size: 0;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.v160-pub-minmax__sep {
    flex: 0 0 auto;
    color: var(--v160-text-subtle);
    font-size: var(--v160-fs-sm);
}

/* Colour facet swatch — the fill itself comes from an inline style in the view. */
.v160-pub-swatch {
    flex: 0 0 auto;
    inline-size: 16px;
    block-size: 16px;
    border: 1px solid var(--v160-border-strong);
    border-radius: var(--v160-r-xs);
}


/* ==================================================================================
 * 9. MOBILE COMPACT LIST BAR
 * ----------------------------------------------------------------------------------
 * Desktop hides it entirely; the sticky treatment lives in section 18. Kept simple
 * and token-driven so the app-like mobile layer can build on it without a fight.
 * ================================================================================== */

.v160-mob-listbar {
    display: none;
}

.v160-mob-listbar__filter {
    flex: 0 0 auto;
}

.v160-mob-listbar__count {
    flex: 0 0 auto;
    font-size: var(--v160-fs-sm);
    color: var(--v160-text-muted);
    font-variant-numeric: tabular-nums;
}

.v160-mob-listbar__count strong {
    color: var(--v160-text);
    font-weight: 700;
}


/* ==================================================================================
 * 10. RESULT TOOLBAR
 * ----------------------------------------------------------------------------------
 * .v160-toolbar / --bar / __lead / __end / __meta come from the foundation; only the
 * listing-specific composition is defined here.
 * ================================================================================== */

.v160-pub-toolbar {
    justify-content: space-between;
}

.v160-pub-toolbar__count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: var(--v160-fs-md);
    font-variant-numeric: tabular-nums;
}

.v160-pub-toolbar__count strong {
    font-size: var(--v160-fs-lg);
}

.v160-pub-toolbar__form {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    margin: 0;
    min-inline-size: 0;
}

/* Visible only when JS is unavailable — the view's script hides it otherwise. */
.v160-pub-toolbar__go {
    flex: 0 0 auto;
}

.v160-pub-viewtoggle {
    flex: 0 0 auto;
}


/* ==================================================================================
 * 11. APPLIED-FILTER CHIP ROW
 * ----------------------------------------------------------------------------------
 * Each chip is an <a> that drops exactly one condition; the x is .v160-chip__x from
 * the foundation. Save / share / clear-all sit at the inline end.
 * ================================================================================== */

.v160-pub-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v160-space-2) var(--v160-space-3);
    padding-block: var(--v160-space-3);
    padding-inline: var(--v160-space-4);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-xl);
    background: var(--v160-surface);
}

.v160-pub-chips__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-size: var(--v160-fs-xs);
    font-weight: 700;
    color: var(--v160-text-muted);
}

.v160-pub-chips__label i {
    color: var(--v160-accent);
}

.v160-pub-chips > .v160-chip-row {
    flex: 1 1 240px;
    min-inline-size: 0;
}

.v160-pub-chips__actions {
    display: flex;
    align-items: center;
    gap: var(--v160-space-1);
    flex: 0 0 auto;
    margin-inline-start: auto;
}


/* ==================================================================================
 * 12. RECOMMENDED BLOCK
 * ================================================================================== */

.v160-pub-reco {
    display: flex;
    flex-direction: column;
    gap: var(--v160-space-3);
    padding: var(--v160-space-4);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-xl);
    background: var(--v160-surface);
}

.v160-pub-reco .v160-toolbar__title {
    font-size: var(--v160-fs-lg);
}


/* ==================================================================================
 * 13. RESULTS — LIST & GRID PRESENTATIONS
 * ----------------------------------------------------------------------------------
 * Encar's default is the horizontal row; grid is the alternate. Both containers live
 * in #v160-results and are toggled by the view's setView().
 * ================================================================================== */

.v160-pub-results {
    min-inline-size: 0;
}

/* LIST — one hairline-divided card, rows flush to its edges. */
.v160-pub-list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-xl);
    background: var(--v160-surface);
    box-shadow: var(--v160-elev-1);
    overflow: hidden;
}

.v160-pub-list[hidden] {
    display: none;
}

.v160-pub-list > .v160-pub-row:last-child {
    border-block-end: 0;
}

/* GRID — 4:3 cards from CarCardRenderer, dense auto-fill columns. */
.v160-pub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--v160-list-card-min), 1fr));
    gap: var(--v160-space-4);
    align-items: start;
    min-inline-size: 0;
}

.v160-pub-grid[hidden] {
    display: none;
}

/* Keep every grid thumbnail on the same 4:3 rhythm regardless of source aspect.
 * defeats 04-cards.css:123 (.gab-cars-grid) which also matches this container. */
.v160-pub-grid > * {
    min-inline-size: 0;
}

.v160-pub-grid .gab-ccg-main,
.v160-pub-grid .gab-car-card-image {
    aspect-ratio: 4 / 3;
}


/* ==================================================================================
 * 14. RESULT ROW — PARTS OWNED BY THIS TEMPLATE
 * ----------------------------------------------------------------------------------
 * .v160-pub-row / __media / __main / __title / __specs / __meta are already defined
 * in 39-v160-public.css:2552+. Everything below is what this template adds, plus the
 * one genuine conflict (__price) that has to be overridden.
 * ================================================================================== */

.v160-pub-row__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* Photo-count pill, bottom-start of the thumbnail. */
.v160-pub-row__photos {
    position: absolute;
    inset-block-end: 6px;
    inset-inline-start: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-block: 2px;
    padding-inline: 7px;
    border-radius: var(--v160-r-pill);
    background: var(--v160-list-scrim);
    color: var(--v160-text-inverse);
    font-size: var(--v160-fs-2xs);
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.v160-pub-row__demo {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-start: 6px;
}

.v160-pub-row__brand {
    margin: 0;
    font-size: var(--v160-fs-xs);
    font-weight: 600;
    line-height: 1.3;
    color: var(--v160-text-subtle);
}

.v160-pub-row__title a {
    color: inherit;
    text-decoration: none;
}

.v160-pub-row__title a:hover {
    color: var(--v160-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.v160-pub-row__title a:focus-visible {
    outline: 2px solid var(--v160-accent);
    outline-offset: 2px;
    border-radius: var(--v160-r-xs);
}

.v160-pub-row__marks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v160-space-1);
}

/* Right-aligned price block: seller badge, price, actions, compare checkbox. */
.v160-pub-row__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--v160-space-2);
    min-inline-size: 0;
    text-align: end;
    padding-inline-start: var(--v160-space-4);
    border-inline-start: 1px solid var(--v160-border-subtle);
}

/* defeats 39-v160-public.css:2632 — there .v160-pub-row__price is the aside column
 * itself (flex, own border and padding). In this template it is a <p> holding the
 * formatted price INSIDE .__aside, so the column chrome must be stripped off it. */
.v160-pub-row__aside .v160-pub-row__price {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--v160-fs-2xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--v160-track-tight);
    color: var(--v160-accent);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.v160-pub-row__actions {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
}

.v160-pub-row__compare {
    min-block-size: 32px;
    font-size: var(--v160-fs-xs);
    color: var(--v160-text-muted);
}

.v160-pub-row__compare .v160-check-row__label {
    flex: 0 0 auto;
}


/* ==================================================================================
 * 15. PAGINATION
 * ================================================================================== */

.v160-pub-pagination {
    padding-block: var(--v160-space-4) var(--v160-space-2);
}

.v160-pub-pagination .v160-pagination__summary {
    inline-size: 100%;
    margin-block-start: var(--v160-space-2);
    text-align: center;
    font-size: var(--v160-fs-xs);
    color: var(--v160-text-subtle);
    font-variant-numeric: tabular-nums;
}


/* ==================================================================================
 * 16. EMPTY STATE
 * ----------------------------------------------------------------------------------
 * Honest: it restates the filters actually in force and offers relax-suggestions that
 * each drop one real condition. No fabricated "similar results".
 * ================================================================================== */

.v160-pub-empty {
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-xl);
    background: var(--v160-surface);
}

.v160-pub-empty .v160-empty__art {
    inline-size: 200px;
    max-inline-size: 50vw;
}

.v160-pub-empty__mascot {
    inline-size: 100%;
    block-size: auto;
}

.v160-pub-empty__filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--v160-space-2);
    inline-size: 100%;
    max-inline-size: 640px;
}

.v160-pub-empty__filters .v160-chip-row {
    justify-content: center;
}

.v160-pub-empty__tips {
    inline-size: 100%;
    max-inline-size: 640px;
    text-align: start;
}

.v160-pub-empty__tiplist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v160-space-2) var(--v160-space-4);
    margin-block: var(--v160-space-2) 0;
    margin-inline: 0;
    padding-inline-start: var(--v160-space-4);
    font-size: var(--v160-fs-sm);
    color: var(--v160-text-muted);
}

.v160-pub-empty__tiplist li {
    min-inline-size: 0;
}

.v160-pub-empty__tiplist a {
    color: var(--v160-text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.v160-pub-empty__tiplist a:hover {
    color: var(--v160-accent);
}


/* ==================================================================================
 * 17. COMPARE TRAY
 * ----------------------------------------------------------------------------------
 * Fixed to the bottom of the viewport, revealed by the view's script once at least
 * one car is checked. On tablet/phone it is lifted clear of the mobile tab bar
 * (section 18) using 41-v160-mobile.css's --v160-mob-tabbar-total.
 * ================================================================================== */

.v160-pub-comparebar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--v160-z-fixed);
    border-block-start: 1px solid var(--v160-border);
    background: var(--v160-surface);
    box-shadow: var(--v160-list-elev-up);
}

.v160-pub-comparebar[hidden] {
    display: none;
}

.v160-pub-comparebar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v160-space-3);
    padding-block: var(--v160-space-3);
}

.v160-pub-comparebar__lead {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    flex: 0 0 auto;
    min-inline-size: 0;
}

.v160-pub-comparebar__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--v160-fs-md);
    font-weight: 700;
    color: var(--v160-text);
    white-space: nowrap;
}

.v160-pub-comparebar__title i {
    color: var(--v160-accent);
}

.v160-pub-comparebar__items {
    display: flex;
    flex: 1 1 260px;
    gap: var(--v160-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    min-inline-size: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.v160-pub-comparebar__item {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    flex: 0 0 auto;
    max-inline-size: 220px;
    padding-block: 4px;
    padding-inline: var(--v160-space-2) 4px;
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-md);
    background: var(--v160-surface-2);
}

.v160-pub-comparebar__thumb {
    flex: 0 0 auto;
    inline-size: 40px;
    block-size: 30px;
    border-radius: var(--v160-r-xs);
    object-fit: cover;
    background: var(--v160-surface-3);
}

.v160-pub-comparebar__thumb--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v160-text-subtle);
    font-size: var(--v160-fs-md);
}

.v160-pub-comparebar__name {
    min-inline-size: 0;
    font-size: var(--v160-fs-xs);
    line-height: 1.3;
    color: var(--v160-text);
}

.v160-pub-comparebar__actions {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    flex: 0 0 auto;
    margin-inline-start: auto;
}


/* ==================================================================================
 * 18. RESPONSIVE — TABLET (<= 1024px)
 * ----------------------------------------------------------------------------------
 * The rail stops being a column and becomes the off-canvas sheet owned by
 * 41-v160-mobile.css. The compact bar takes over filter access and goes sticky.
 * ================================================================================== */

@media (max-width: 1024px) {

    .v160-pub-list-page {
        padding-block: var(--v160-space-3) var(--v160-space-8);
    }

    .v160-pub-list-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--v160-space-4);
    }

    /* Off-canvas sheet: strip the desktop card chrome the rail carries.
     * defeats 39-v160-public.css:2726 (.v160-pub-filters sticky card — border,
     * radius, box-shadow and its own overflow scroll all fight the sheet shell in
     * 41-v160-mobile.css:1171, whose __body is the real scroll region). */
    .v160-pub-filters.v160-mob-sheet {
        max-block-size: 88vh;
        overflow: hidden;
        border: 0;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        box-shadow: var(--v160-elev-5);
    }

    .v160-pub-filters__head {
        border-block-end: 1px solid var(--v160-border);
    }

    .v160-pub-filters__foot {
        display: flex;
        flex-wrap: wrap;
        gap: var(--v160-space-2);
    }

    .v160-pub-filters__foot .v160-btn {
        flex: 1 1 auto;
    }

    /* Sticky compact bar: count on one side, filter button on the other. */
    .v160-mob-listbar {
        position: sticky;
        inset-block-start: calc(var(--v160-mob-header-h, 56px) + var(--v160-mob-safe-t, 0px));
        z-index: var(--v160-mob-z-sticky, 190);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--v160-space-3);
        min-block-size: var(--v160-mob-subbar-h, 52px);
        padding-block: var(--v160-space-2);
        padding-inline: var(--v160-space-3);
        border: 1px solid var(--v160-border);
        border-radius: var(--v160-r-lg);
        background: var(--v160-surface);
        box-shadow: var(--v160-elev-1);
    }

    /* The desktop toolbar keeps sort + per-page + view mode; the count moves to the
     * sticky compact bar so nothing is stated twice. The toolbar count is an
     * aria-live region, so it is hidden visually only — never with display:none. */
    .v160-pub-toolbar__count {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .v160-pub-comparebar {
        inset-block-end: var(--v160-mob-tabbar-total, 56px);
    }

    .v160-pub-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--v160-space-3);
    }
}


/* ==================================================================================
 * 19. RESPONSIVE — PHONE (<= 640px)
 * ----------------------------------------------------------------------------------
 * Single column, full-bleed result card, price block folded under the copy.
 * ================================================================================== */

@media (max-width: 640px) {

    .v160-pub-breadcrumb {
        padding-block: var(--v160-space-1) var(--v160-space-2);
    }

    .v160-pub-list-head {
        align-items: flex-start;
        gap: var(--v160-space-3);
        margin-block-end: var(--v160-space-4);
    }

    .v160-pub-list-head__title {
        font-size: var(--v160-fs-xl);
    }

    .v160-pub-list-head__desc {
        display: none;
    }

    .v160-pub-assurance {
        gap: 6px;
        inline-size: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        padding-block-end: 2px;
    }

    .v160-pub-assurance::-webkit-scrollbar {
        display: none;
    }

    /* Full-bleed list: edge-to-edge rows, no outer radius on a phone. */
    .v160-pub-list {
        margin-inline: calc(var(--v160-container-pad, 16px) * -1);
        border-inline: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .v160-pub-row {
        grid-template-columns: 116px minmax(0, 1fr);
        gap: var(--v160-space-3);
        padding: var(--v160-space-3);
    }

    .v160-pub-row__title {
        font-size: var(--v160-fs-md);
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .v160-pub-row__specs {
        font-size: var(--v160-fs-sm);
    }

    .v160-pub-row__aside {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        text-align: start;
        padding-inline-start: 0;
        padding-block-start: var(--v160-space-2);
        border-inline-start: 0;
        border-block-start: 1px solid var(--v160-border-subtle);
    }

    .v160-pub-row__aside .v160-pub-row__price {
        font-size: var(--v160-fs-xl);
    }

    .v160-pub-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--v160-space-3);
    }

    .v160-pub-chips {
        padding: var(--v160-space-3);
    }

    .v160-pub-chips__actions {
        inline-size: 100%;
        margin-inline-start: 0;
        justify-content: flex-end;
    }

    .v160-pub-reco {
        padding: var(--v160-space-3);
    }

    .v160-pub-empty {
        padding-inline: var(--v160-space-4);
    }

    .v160-pub-empty__tiplist {
        flex-direction: column;
        gap: var(--v160-space-2);
    }

    .v160-pub-comparebar__inner {
        gap: var(--v160-space-2);
        padding-block: var(--v160-space-2);
    }

    .v160-pub-comparebar__items {
        flex: 1 1 100%;
        order: 3;
    }

    .v160-pub-comparebar__actions {
        margin-inline-start: auto;
    }

    .v160-pub-comparebar__item {
        max-inline-size: 180px;
    }
}


/* ==================================================================================
 * 20. RTL, REDUCED MOTION, FORCED COLOURS, PRINT
 * ================================================================================== */

/* The breadcrumb chevron is directional glyph art, not text. */
[dir="rtl"] .v160-pub-breadcrumb__sep {
    transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {

    .v160-pub-facet__caret,
    .v160-pub-brand__more i,
    .v160-pub-models__item,
    .v160-pub-breadcrumb__link {
        transition: none;
    }
}

@media (forced-colors: active) {

    .v160-pub-list,
    .v160-pub-chips,
    .v160-pub-reco,
    .v160-pub-empty,
    .v160-pub-brandlist,
    .v160-pub-comparebar__item {
        border: 1px solid CanvasText;
    }

    .v160-pub-row__photos {
        border: 1px solid CanvasText;
        forced-color-adjust: none;
    }

    .v160-pub-range__track,
    .v160-pub-range__fill {
        forced-color-adjust: none;
    }
}

@media print {

    .v160-pub-filters,
    .v160-pub-comparebar,
    .v160-mob-listbar,
    .v160-pub-toolbar,
    .v160-pub-chips__actions,
    .v160-pub-row__actions,
    .v160-pub-row__compare {
        display: none;
    }

    .v160-pub-list-page {
        background: none;
        padding-block: 0;
    }

    .v160-pub-list-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .v160-pub-list {
        box-shadow: none;
    }

    .v160-pub-row {
        break-inside: avoid;
    }
}