/* ================================================================================
 * 44-v160-home.css — Hi Car Match v160
 * Public HOME (views/pages/home.php) + public VERIFIED DEALER DIRECTORY
 * (views/pages/dealers.php).
 * --------------------------------------------------------------------------------
 * WHY THIS FILE EXISTS
 *   The v160 redesign shipped the public view templates and the CSS layers in
 *   parallel. The view agents emitted a .v160-pub-* vocabulary; layers 38-41 only
 *   ever styled the legacy .gab-* markup plus a handful of kebab-cased v160
 *   primitives (.v160-pub-brand-tile, .v160-pub-hub__tab ...). Every BEM element
 *   selector the two views above actually use (.v160-pub-brandgrid__item,
 *   .v160-pub-dealer-card__stats, ...) had no rule anywhere. This layer supplies
 *   exactly those, and nothing else.
 *
 * LOAD ORDER
 *   Registered in src/Core/Assets.php after 38-41 and after 42-v160-listing /
 *   43-v160-detail, so it wins the cascade on equal specificity. Because
 *   .v160-pub-models* is ALSO used by views/pages/car-list.php (owned by
 *   42-v160-listing) and .v160-pub-steps* is ALSO used by views/pages/car-detail.php
 *   (owned by 43-v160-detail) with DIFFERENT DOM, every rule for those two blocks
 *   is deliberately scoped so it cannot reach the other two pages. See §3.6 / §5.7.
 *
 * COMPOSITION RULES OBSERVED
 *   - Tokens only (--v160-*). No raw hex anywhere in this file.
 *   - No foundation primitive is redefined; .v160-card / .v160-btn / .v160-tabs /
 *     .v160-kpi / .v160-empty / .v160-segmented / .v160-scroll-x are composed with.
 *   - Logical properties only (inline/block) so the Arabic RTL build needs no
 *     mirrored sheet.
 *   - No :has(), no @layer, no nesting, no preprocessor syntax.
 *
 * BREAKPOINTS (literals, matching 38-v160-foundation.css §18)
 *   tablet <= 1024px      mobile <= 640px
 *
 * CONTENTS
 *   1. HOME — hero
 *   2. HOME — search hub (tabs, brand tiles, body types, price/year bands)
 *   3. HOME — section rhythm
 *   4. HOME — quick-entry journey cards
 *   5. HOME — listing rails, browse rails, dealers, brokerage steps
 *   6. DEALERS — public verified-dealer directory
 *   7. Responsive <= 1024px
 *   8. Responsive <= 640px
 *   9. RTL / reduced motion / print
 * ============================================================================== */


/* ================================================================================
 * 1. HOME — HERO
 * --------------------------------------------------------------------------------
 * Encar/KCar keep the fold search-first: the hero is a short lede, never a
 * full-viewport image. Compact block padding, page-background surface, one
 * hairline separating it from the first content section.
 * ============================================================================== */

.v160-pub-hero {
    padding-block: var(--v160-space-8) var(--v160-space-7);
    background: var(--v160-surface-2);
    border-block-end: 1px solid var(--v160-border);
}

.v160-pub-hero__inner {
    display: grid;
    gap: var(--v160-space-6);
    min-inline-size: 0;
}

.v160-pub-hero__lede {
    max-inline-size: 760px;
    min-inline-size: 0;
}

.v160-pub-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-block-size: 26px;
    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: var(--v160-lh-snug);
}

.v160-pub-hero__eyebrow i {
    color: var(--v160-accent);
    font-size: 13px;
    line-height: 1;
}

.v160-pub-hero__title {
    margin: var(--v160-space-3) 0 0;
    font-family: var(--v160-font-sans);
    font-size: var(--v160-fs-4xl);
    font-weight: 800;
    line-height: var(--v160-lh-tight);
    letter-spacing: var(--v160-track-tight);
    color: var(--v160-text);
}

body[dir="rtl"] .v160-pub-hero__title {
    font-family: var(--v160-font-ar);
    letter-spacing: 0;
}

.v160-pub-hero__sub {
    margin: var(--v160-space-2) 0 0;
    max-inline-size: 68ch;
    font-size: var(--v160-fs-lg);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-muted);
}


/* ================================================================================
 * 2. HOME — SEARCH HUB
 * --------------------------------------------------------------------------------
 * DOM (home.php:522-695)
 *   form.v160-card.v160-pub-hub
 *     .v160-pub-hub__keyword          keyword input + big submit
 *     nav.v160-tabs.v160-pub-hub__tabs[role=tablist]
 *       button.v160-tabs__item[role=tab] x3
 *     .v160-pub-hubpanel[role=tabpanel] x3
 *
 * 39-v160-public.css:1280 already gives .v160-pub-hub its shell (r-2xl, elev-3,
 * overflow hidden) and 39-v160-public.css:1319 gives .v160-pub-hub__tabs a
 * zero-gap full-bleed strip. Both are composed with, not defeated — the only
 * thing missing was the sizing of .v160-tabs__item inside that strip, because
 * 39 was written for a .v160-pub-hub__tab child that this view never emits.
 * ============================================================================== */

/* --- 2.1 Keyword row ------------------------------------------------------- */

.v160-pub-hub__keyword {
    display: flex;
    align-items: center;
    gap: var(--v160-space-3);
    padding: var(--v160-space-5);
    border-block-end: 1px solid var(--v160-border-subtle);
    background: var(--v160-surface-2);
}

.v160-pub-hub__keyword .v160-input-group {
    flex: 1 1 auto;
    min-inline-size: 0;
}

/* The "N대 검색" submit must never be squeezed by a long placeholder. */
.v160-pub-hub__keyword > .v160-btn {
    flex: 0 0 auto;
    min-inline-size: 148px;
}


/* --- 2.2 Tab strip --------------------------------------------------------- */

/* Full-width, equal-weight tabs with the foundation underline indicator. */
.v160-pub-hub__tabs .v160-tabs__item {
    flex: 1 1 0;
    justify-content: center;
    min-block-size: 48px;
    padding-block: 0;
    padding-inline: var(--v160-space-4);
    font-size: var(--v160-fs-lg);
}

.v160-pub-hub__tabs .v160-tabs__item:hover {
    background: var(--v160-surface-2);
}

.v160-pub-hub__tabs .v160-tabs__item[aria-selected="true"] {
    background: var(--v160-surface);
    font-weight: 700;
}

.v160-pub-hub__tabs .v160-tabs__item i {
    font-size: 15px;
    line-height: 1;
}

/* .v160-pub-hub sets overflow:hidden (39-v160-public.css:1285), which would clip an
   outward focus ring on the first/last tab. Draw it inside instead. */
.v160-pub-hub__tabs .v160-tabs__item:focus-visible {
    outline: 2px solid var(--v160-accent);
    outline-offset: -4px;
    border-radius: var(--v160-r-sm);
}


/* --- 2.3 Tab panels -------------------------------------------------------- */

.v160-pub-hubpanel {
    display: grid;
    gap: var(--v160-space-4);
    justify-items: start;
    padding: var(--v160-space-5);
    min-inline-size: 0;
}

/* display:grid would otherwise defeat the [hidden] attribute the tab script sets. */
.v160-pub-hubpanel[hidden] { display: none; }

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


/* --- 2.4 국산 / 수입 toggle -------------------------------------------------- */

.v160-pub-hub__origin {
    justify-self: start;
}

.v160-pub-hub__origin-btn {
    min-inline-size: 84px;
}


/* --- 2.5 Brand tile grid --------------------------------------------------- */

.v160-pub-brandgroup {
    display: grid;
    gap: var(--v160-space-3);
    justify-items: start;
    inline-size: 100%;
    min-inline-size: 0;
}

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

.v160-pub-brandgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: var(--v160-space-2);
    inline-size: 100%;
    min-inline-size: 0;
}

.v160-pub-brandgrid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-inline-size: 0;
    min-block-size: 96px;
    padding: var(--v160-space-3) var(--v160-space-2);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-lg);
    background: var(--v160-surface);
    color: var(--v160-text);
    text-align: center;
    text-decoration: none;
    transition: border-color var(--v160-dur) var(--v160-ease),
                box-shadow var(--v160-dur) var(--v160-ease),
                background var(--v160-dur) var(--v160-ease);
}

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

.v160-pub-brandgrid__item:hover {
    border-color: var(--v160-accent-border);
    box-shadow: var(--v160-elev-2);
}

.v160-pub-brandgrid__item.is-active,
.v160-pub-brandgrid__item[aria-expanded="true"] {
    border-color: var(--v160-accent);
    background: var(--v160-accent-soft);
}

.v160-pub-brandgrid__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 28px;
}

.v160-pub-brandgrid__logo img,
.v160-pub-brandgrid__logo svg {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
}

.v160-pub-brandgrid__name {
    display: block;
    max-inline-size: 100%;
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    line-height: var(--v160-lh-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v160-pub-brandgrid__count {
    font-size: var(--v160-fs-2xs);
    font-weight: 600;
    color: var(--v160-text-subtle);
    font-variant-numeric: tabular-nums;
}

.v160-pub-brandgrid__item:hover .v160-pub-brandgrid__count,
.v160-pub-brandgrid__item.is-active .v160-pub-brandgrid__count {
    color: var(--v160-accent);
}

/* "브랜드 더 보기" disclosure — a .v160-btn--quiet, so only layout is added. */
.v160-pub-brandgrid__more {
    align-self: start;
}

.v160-pub-brandgrid__more-label {
    font-weight: 600;
}

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


/* --- 2.6 Brand -> model panel (home hub ONLY) ------------------------------ */

/* SCOPE NOTE: views/pages/car-list.php uses .v160-pub-models / __item for a
   completely different control (a <ul> of facet links inside .v160-pub-facet)
   which 42-v160-listing.css owns. 44 loads AFTER 42, so every rule below is
   prefixed with .v160-pub-hubpanel — a container that exists only on the home
   search hub — and can never reach the listing page. */

.v160-pub-hubpanel .v160-pub-models {
    display: grid;
    gap: var(--v160-space-3);
    inline-size: 100%;
    min-inline-size: 0;
    padding: var(--v160-space-4);
    border: 1px solid var(--v160-border-subtle);
    border-radius: var(--v160-r-lg);
    background: var(--v160-surface-2);
}

.v160-pub-models__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-snug);
}

.v160-pub-models__hint i {
    color: var(--v160-text-placeholder);
}

/* .v160-pub-models__head / __brand / __grid are built by the inline script in
   home.php:1052-1091; they carry no class="" so the audit never saw them, but
   they still need rules or the injected panel renders unstyled. */
.v160-pub-models__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--v160-space-3);
}

.v160-pub-models__brand {
    font-size: var(--v160-fs-lg);
    font-weight: 700;
    color: var(--v160-text);
    letter-spacing: var(--v160-track-tight);
}

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

.v160-pub-hubpanel .v160-pub-models__item {
    display: flex;
    align-items: center;
    min-block-size: 40px;
    min-inline-size: 0;
    padding-inline: var(--v160-space-3);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-md);
    background: var(--v160-surface);
    color: var(--v160-text);
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color var(--v160-dur) var(--v160-ease),
                color var(--v160-dur) var(--v160-ease);
}

.v160-pub-hubpanel .v160-pub-models__item:hover {
    border-color: var(--v160-accent-border);
    color: var(--v160-accent-hover);
}


/* --- 2.7 Body-type tile grid ----------------------------------------------- */

.v160-pub-typegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: var(--v160-space-2);
    inline-size: 100%;
    min-inline-size: 0;
}

.v160-pub-typegrid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-inline-size: 0;
    min-block-size: 104px;
    padding: var(--v160-space-3) var(--v160-space-2);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-lg);
    background: var(--v160-surface);
    color: var(--v160-text);
    text-align: center;
    text-decoration: none;
    transition: border-color var(--v160-dur) var(--v160-ease),
                box-shadow var(--v160-dur) var(--v160-ease);
}

.v160-pub-typegrid__item:hover {
    border-color: var(--v160-accent-border);
    box-shadow: var(--v160-elev-2);
}

.v160-pub-typegrid__media {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 48px;
}

.v160-pub-typegrid__media img {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
}

.v160-pub-typegrid__media i {
    font-size: 24px;
    line-height: 1;
    color: var(--v160-text-subtle);
}

/* The <i> is a fallback glyph that sits next to the <img>; hide it whenever the
   artwork element is present so the two never stack. */
.v160-pub-typegrid__media img + i { display: none; }

.v160-pub-typegrid__name {
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    line-height: var(--v160-lh-tight);
}


/* --- 2.8 Price / year / mileage bands -------------------------------------- */

/* Overrides .v160-fieldset--3's fixed 3-track grid (38-v160-foundation.css:1130)
   because this panel renders four selects; auto-fit reflows them without the
   tablet media query fighting it. */
.v160-pub-hub__bands {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    inline-size: 100%;
}

.v160-pub-hub__bandhint {
    margin: 0;
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    line-height: var(--v160-lh-snug);
}

.v160-pub-hubpanel > .v160-chip-row {
    inline-size: 100%;
}


/* ================================================================================
 * 3. HOME — SECTION RHYTHM
 * ============================================================================== */

.v160-pub-section {
    padding-block: var(--v160-space-8);
}

.v160-pub-section--tight {
    padding-block: var(--v160-space-6);
}

.v160-pub-section--alt {
    background: var(--v160-surface-2);
    border-block: 1px solid var(--v160-border);
}

/* Two consecutive --alt sections must not double their shared hairline. */
.v160-pub-section--alt + .v160-pub-section--alt {
    border-block-start: 0;
}

.v160-pub-section__head {
    align-items: flex-end;
    margin-block-end: var(--v160-space-5);
}

.v160-pub-section__head .v160-toolbar__lead {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.v160-pub-section__head .v160-toolbar__meta {
    line-height: var(--v160-lh-snug);
}

.v160-pub-section__head--sub {
    margin-block-start: var(--v160-space-7);
}


/* ================================================================================
 * 4. HOME — QUICK-ENTRY JOURNEY CARDS
 * 차량 보기 / 검증된 딜러 찾기 / 내 차 팔기
 * ============================================================================== */

.v160-pub-quickgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--v160-space-3);
    min-inline-size: 0;
}

/* Composes .v160-card + .v160-card--interactive: only the axis flips. */
.v160-pub-quick {
    flex-direction: row;
    align-items: center;
    gap: var(--v160-space-3);
    padding: var(--v160-space-4);
    color: var(--v160-text);
    text-decoration: none;
}

.v160-pub-quick__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--v160-r-lg);
    background: var(--v160-accent-soft);
    color: var(--v160-accent);
    font-size: 20px;
    line-height: 1;
}

.v160-pub-quick__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.v160-pub-quick__title {
    font-size: var(--v160-fs-md);
    font-weight: 700;
    color: var(--v160-text);
    letter-spacing: var(--v160-track-snug);
}

.v160-pub-quick__desc {
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-subtle);
}

.v160-pub-quick__go {
    flex: none;
    margin-inline-start: auto;
    color: var(--v160-text-subtle);
    font-size: 14px;
    transition: color var(--v160-dur-fast) var(--v160-ease);
}

.v160-pub-quick:hover .v160-pub-quick__go {
    color: var(--v160-accent);
}


/* ================================================================================
 * 5. HOME — RAILS, DEALER STRIP, BROKERAGE STEPS
 * ============================================================================== */

/* --- 5.1 Listing rails ----------------------------------------------------- */

/* Wrapper around the .gab-cars-grid produced by CarCardRenderer. Desktop keeps
   the grid from 39-v160-public.css:2066; the mobile pass in §8 converts it to a
   scroll-snap rail. */
.v160-pub-cars {
    min-inline-size: 0;
}


/* --- 5.2 Body-type browse rail --------------------------------------------- */

.v160-pub-typerail,
.v160-pub-brandrail {
    padding-block: var(--v160-space-1) var(--v160-space-3);
}

.v160-pub-typerail {
    gap: var(--v160-space-3);
}

.v160-pub-typerail__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    inline-size: 128px;
    padding: var(--v160-space-3);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-lg);
    background: var(--v160-surface);
    color: var(--v160-text);
    text-align: center;
    text-decoration: none;
    transition: border-color var(--v160-dur) var(--v160-ease),
                box-shadow var(--v160-dur) var(--v160-ease);
}

.v160-pub-typerail__item:hover {
    border-color: var(--v160-accent-border);
    box-shadow: var(--v160-elev-2);
}

.v160-pub-typerail__item img {
    inline-size: 100%;
    block-size: 64px;
    object-fit: contain;
}

.v160-pub-typerail__item span {
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    line-height: var(--v160-lh-tight);
}


/* --- 5.3 Brand browse rail ------------------------------------------------- */

.v160-pub-brandrail__item {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    min-block-size: 56px;
    padding-inline: var(--v160-space-4);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-pill);
    background: var(--v160-surface);
    color: var(--v160-text);
    text-decoration: none;
    transition: border-color var(--v160-dur) var(--v160-ease),
                box-shadow var(--v160-dur) var(--v160-ease);
}

.v160-pub-brandrail__item:hover {
    border-color: var(--v160-accent-border);
    box-shadow: var(--v160-elev-2);
}

.v160-pub-brandrail__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 32px;
    block-size: 22px;
}

.v160-pub-brandrail__logo img,
.v160-pub-brandrail__logo svg {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
}

.v160-pub-brandrail__name {
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    white-space: nowrap;
}


/* --- 5.4 Verified dealer strip (home) -------------------------------------- */

/* SCOPE NOTE: .v160-pub-dealers is overloaded across the two views this file
   owns. On home.php:871 it is a GRID OF CARDS sitting inside .v160-container.
   On dealers.php:188 it is the PAGE WRAPPER that CONTAINS a .v160-container.
   The child/descendant combinators below keep the two apart without either
   view needing an extra class. */

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

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

/* Composes .v160-card; flips it to a row so the avatar leads. */
.v160-pub-dealer {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--v160-space-3);
    padding: var(--v160-space-4);
}

.v160-pub-dealer__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-inline-size: 0;
}

.v160-pub-dealer__name {
    margin: 0;
    font-size: var(--v160-fs-md);
    font-weight: 700;
    line-height: var(--v160-lh-tight);
    color: var(--v160-text);
    letter-spacing: var(--v160-track-snug);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v160-pub-dealer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v160-space-2);
    margin: 0;
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-subtle);
}

.v160-pub-dealer__loc {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-snug);
}

.v160-pub-dealer__loc img,
.v160-pub-dealer__loc svg {
    flex: none;
    inline-size: 16px;
    block-size: auto;
    border-radius: 2px;
}


/* --- 5.5 Brokerage process (home) ------------------------------------------ */

/* SCOPE NOTE: views/pages/car-detail.php renders <ol class="v160-pub-steps"> with
   __item / __num / __body / __text children, owned by 43-v160-detail.css. Home
   renders <section class="v160-pub-steps"> with __title / __list / __actions.
   44 loads after 43, so the shared names are qualified by element type here. */

section.v160-pub-steps {
    margin-block-start: var(--v160-space-8);
}

section.v160-pub-steps > .v160-pub-steps__title {
    margin: 0 0 var(--v160-space-4);
    font-size: var(--v160-fs-xl);
    font-weight: 700;
    line-height: var(--v160-lh-tight);
    color: var(--v160-text);
    letter-spacing: var(--v160-track-tight);
}

.v160-pub-steps__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--v160-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Composes .v160-card (already flex column). */
.v160-pub-step {
    gap: 6px;
    padding: var(--v160-space-5);
}

.v160-pub-step__num {
    font-size: var(--v160-fs-sm);
    font-weight: 800;
    line-height: 1;
    color: var(--v160-accent);
    letter-spacing: var(--v160-track-tight);
    font-variant-numeric: tabular-nums;
}

.v160-pub-step__title {
    font-size: var(--v160-fs-md);
    font-weight: 700;
    line-height: var(--v160-lh-tight);
    color: var(--v160-text);
}

.v160-pub-step__desc {
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-base);
    color: var(--v160-text-subtle);
}

.v160-pub-steps__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v160-space-3);
    margin-block-start: var(--v160-space-5);
}


/* ================================================================================
 * 6. DEALERS — PUBLIC VERIFIED-DEALER DIRECTORY
 * views/pages/dealers.php
 * ============================================================================== */

/* Page wrapper. Matches ONLY on dealers.php, where .v160-pub-dealers has a
   .v160-container child (see the scope note in §5.4). */
.v160-pub-dealers > .v160-container {
    display: grid;
    gap: var(--v160-space-6);
    align-content: start;
    padding-block: var(--v160-space-8) var(--v160-space-12);
    min-inline-size: 0;
}


/* --- 6.1 Header ------------------------------------------------------------ */

.v160-pub-dealers__head {
    display: grid;
    justify-items: start;
    gap: var(--v160-space-3);
    min-inline-size: 0;
}

.v160-pub-dealers__title {
    margin: 0;
    font-size: var(--v160-fs-3xl);
    font-weight: 800;
    line-height: var(--v160-lh-tight);
    letter-spacing: var(--v160-track-tight);
    color: var(--v160-text);
}

body[dir="rtl"] .v160-pub-dealers__title {
    font-family: var(--v160-font-ar);
    letter-spacing: 0;
}

.v160-pub-dealers__desc {
    margin: 0;
    max-inline-size: 78ch;
    font-size: var(--v160-fs-md);
    line-height: var(--v160-lh-base);
    color: var(--v160-text-muted);
}


/* --- 6.2 KPI row ----------------------------------------------------------- */

.v160-pub-dealers__kpis {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    max-inline-size: 720px;
}


/* --- 6.3 Search + filter toolbar ------------------------------------------- */

.v160-pub-dealers__toolbar {
    align-items: center;
    row-gap: var(--v160-space-2);
}

.v160-pub-dealers__toolbar .v160-toolbar__lead {
    flex: 1 1 240px;
    min-inline-size: 0;
}

.v160-pub-dealers__toolbar .v160-toolbar__main {
    flex: 1 1 320px;
    flex-wrap: wrap;
}

.v160-pub-dealers__search {
    flex: 1 1 auto;
    min-inline-size: 200px;
}

.v160-pub-dealers__select {
    inline-size: auto;
    min-inline-size: 150px;
    max-inline-size: 100%;
}


/* --- 6.4 Dealer card grid -------------------------------------------------- */

.v160-pub-dealer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: var(--v160-space-4);
    min-inline-size: 0;
}

/* Composes .v160-card + .v160-card--interactive. */
.v160-pub-dealer-card {
    block-size: 100%;
}

.v160-pub-dealer-card > .v160-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--v160-space-4);
}

.v160-pub-dealer-card__top {
    display: flex;
    align-items: center;
    gap: var(--v160-space-3);
    min-inline-size: 0;
}

.v160-pub-dealer-card__id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-inline-size: 0;
}

.v160-pub-dealer-card__name {
    margin: 0;
    font-size: var(--v160-fs-lg);
    font-weight: 700;
    line-height: var(--v160-lh-tight);
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text);
    overflow-wrap: anywhere;
}

.v160-pub-dealer-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v160-space-2);
    margin: 0;
    padding: var(--v160-space-3);
    border: 1px solid var(--v160-border-subtle);
    border-radius: var(--v160-r-lg);
    background: var(--v160-surface-2);
}

.v160-pub-dealer-card__stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-inline-size: 0;
}

.v160-pub-dealer-card__stat dt {
    margin: 0;
    font-size: var(--v160-fs-2xs);
    font-weight: 600;
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-subtle);
}

.v160-pub-dealer-card__stat dd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-inline-size: 0;
    font-size: var(--v160-fs-md);
    font-weight: 700;
    line-height: var(--v160-lh-snug);
    color: var(--v160-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v160-pub-dealer-card__stat dd img,
.v160-pub-dealer-card__stat dd svg {
    flex: none;
    inline-size: 16px;
    block-size: auto;
    border-radius: 2px;
}

.v160-pub-dealer-card__privacy {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: var(--v160-fs-xs);
    line-height: var(--v160-lh-snug);
}

.v160-pub-dealer-card__privacy i {
    flex: none;
    margin-block-start: 1px;
    font-size: 12px;
}


/* --- 6.5 Honest no-results state ------------------------------------------- */

/* The view toggles this with an inline style="display:none", so nothing here may
   set `display`. Layout only. */
.v160-pub-dealers__nores {
    border: 1px dashed var(--v160-border-strong);
    border-radius: var(--v160-r-xl);
    background: var(--v160-surface);
}


/* ================================================================================
 * 7. RESPONSIVE — TABLET (<= 1024px)
 * ============================================================================== */

@media (max-width: 1024px) {

    .v160-pub-hero {
        padding-block: var(--v160-space-7) var(--v160-space-6);
    }

    .v160-pub-hero__title {
        font-size: var(--v160-fs-3xl);
    }

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

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

    .v160-pub-hub__tabs .v160-tabs__item {
        font-size: var(--v160-fs-md);
        padding-inline: var(--v160-space-3);
    }

    .v160-pub-section {
        padding-block: var(--v160-space-7);
    }

    .v160-pub-brandgrid,
    .v160-pub-typegrid {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    }

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

    .v160-pub-dealers > .v160-container {
        gap: var(--v160-space-5);
        padding-block: var(--v160-space-7) var(--v160-space-10);
    }

    .v160-pub-dealers__title {
        font-size: var(--v160-fs-2xl);
    }

    section.v160-pub-steps {
        margin-block-start: var(--v160-space-7);
    }
}


/* ================================================================================
 * 8. RESPONSIVE — MOBILE (<= 640px)
 * ============================================================================== */

@media (max-width: 640px) {

    /* --- hero --- */
    .v160-pub-hero {
        padding-block: var(--v160-space-6) var(--v160-space-5);
    }
    .v160-pub-hero__inner { gap: var(--v160-space-4); }
    .v160-pub-hero__title { font-size: var(--v160-fs-2xl); }
    .v160-pub-hero__sub   { font-size: var(--v160-fs-md); }

    /* --- hub --- */
    .v160-pub-hub__keyword {
        flex-direction: column;
        align-items: stretch;
        padding: var(--v160-space-4);
    }
    .v160-pub-hub__keyword > .v160-btn {
        inline-size: 100%;
        min-inline-size: 0;
    }

    .v160-pub-hub__tabs .v160-tabs__item {
        min-block-size: var(--v160-tap);
        padding-inline: var(--v160-space-2);
        font-size: var(--v160-fs-sm);
    }
    .v160-pub-hub__tabs .v160-tabs__item i { display: none; }

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

    .v160-pub-hub__origin { inline-size: 100%; }
    .v160-pub-hub__origin .v160-segmented__item { flex: 1 1 0; }
    .v160-pub-hub__origin-btn { min-inline-size: 0; }

    .v160-pub-brandgrid,
    .v160-pub-typegrid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
    .v160-pub-brandgrid__item { min-block-size: 88px; }
    .v160-pub-typegrid__item  { min-block-size: 96px; }
    .v160-pub-typegrid__media { block-size: 40px; }

    .v160-pub-hubpanel .v160-pub-models { padding: var(--v160-space-3); }
    .v160-pub-models__grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .v160-pub-hubpanel .v160-pub-models__item { min-block-size: var(--v160-tap); }

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

    /* --- section rhythm --- */
    .v160-pub-section        { padding-block: var(--v160-space-6); }
    .v160-pub-section--tight { padding-block: var(--v160-space-5); }
    .v160-pub-section__head  { margin-block-end: var(--v160-space-4); }
    .v160-pub-section__head--sub { margin-block-start: var(--v160-space-6); }

    /* --- quick entries --- */
    .v160-pub-quickgrid { grid-template-columns: minmax(0, 1fr); }
    .v160-pub-quick__icon {
        inline-size: 40px;
        block-size: 40px;
        font-size: 18px;
    }

    /* --- listing rails: grid -> horizontal scroll-snap ---------------------
     * Defeats the auto-fill grid from 39-v160-public.css:2066
     * (`.gab-cars-grid { display:grid; grid-template-columns: repeat(auto-fill,
     * minmax(258px,1fr)) }`) for the two home rails only — the class pair keeps
     * the listing page's own .gab-cars-grid untouched. The negative inline
     * margin bleeds the rail to the viewport edge through .v160-container's
     * padding so the next card peeks in, Encar-style.
     * -------------------------------------------------------------------- */
    .v160-pub-cars.gab-cars-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(224px, 76%);
        grid-template-columns: none;
        gap: var(--v160-space-3);
        margin-inline: calc(var(--v160-container-pad) * -1);
        padding-inline: var(--v160-container-pad);
        padding-block-end: var(--v160-space-2);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        scroll-padding-inline-start: var(--v160-container-pad);
        scrollbar-width: none;
    }
    .v160-pub-cars.gab-cars-grid::-webkit-scrollbar { display: none; }
    .v160-pub-cars.gab-cars-grid > * { scroll-snap-align: start; }

    /* --- browse rails --- */
    .v160-pub-typerail,
    .v160-pub-brandrail {
        margin-inline: calc(var(--v160-container-pad) * -1);
        padding-inline: var(--v160-container-pad);
        scroll-padding-inline-start: var(--v160-container-pad);
    }
    .v160-pub-typerail__item { inline-size: 108px; }
    .v160-pub-typerail__item img { block-size: 52px; }
    .v160-pub-brandrail__item { min-block-size: var(--v160-tap); }

    /* --- dealer strip (home) --- */
    .v160-container > .v160-pub-dealers {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--v160-space-2);
    }
    .v160-pub-dealer { padding: var(--v160-space-3); }

    /* --- brokerage steps --- */
    section.v160-pub-steps { margin-block-start: var(--v160-space-6); }
    .v160-pub-steps__list  { grid-template-columns: minmax(0, 1fr); }
    .v160-pub-step         { padding: var(--v160-space-4); }
    .v160-pub-steps__actions > .v160-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* --- dealer directory --- */
    .v160-pub-dealers > .v160-container {
        gap: var(--v160-space-4);
        padding-block: var(--v160-space-6) var(--v160-space-9);
    }
    .v160-pub-dealers__title { font-size: var(--v160-fs-2xl); }
    .v160-pub-dealers__desc  { font-size: var(--v160-fs-sm); }
    .v160-pub-dealers__kpis  { max-inline-size: none; }

    .v160-pub-dealers__toolbar .v160-toolbar__lead,
    .v160-pub-dealers__toolbar .v160-toolbar__main {
        flex: 1 1 100%;
        inline-size: 100%;
    }
    .v160-pub-dealers__search { inline-size: 100%; }
    .v160-pub-dealers__select {
        flex: 1 1 140px;
        inline-size: 100%;
        min-inline-size: 0;
    }
    .v160-pub-dealers__toolbar .v160-segmented { inline-size: 100%; }
    .v160-pub-dealers__toolbar .v160-segmented__item { flex: 1 1 0; }

    .v160-pub-dealer-grid { grid-template-columns: minmax(0, 1fr); }
    .v160-pub-dealer-card__stats { padding: var(--v160-space-2); }
    .v160-pub-dealer-card__name  { font-size: var(--v160-fs-md); }
}


/* ================================================================================
 * 9. RTL / REDUCED MOTION / PRINT
 * --------------------------------------------------------------------------------
 * Everything above is written with logical properties, so these rules only cover
 * what logical properties cannot express: glyph direction and motion.
 * ============================================================================== */

[dir="rtl"] .v160-pub-quick__go,
[dir="rtl"] .v160-pub-section__head .bi-chevron-right {
    transform: scaleX(-1);
}

/* Counts, listing totals and prices stay LTR inside Arabic copy. */
[dir="rtl"] .v160-pub-brandgrid__count,
[dir="rtl"] .v160-pub-dealer-card__stat dd.v160-num {
    direction: ltr;
    unicode-bidi: isolate;
}

[dir="rtl"] .v160-pub-dealer-card__stat dd.v160-num {
    justify-content: flex-end;
}

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

    .v160-pub-brandgrid__item,
    .v160-pub-typegrid__item,
    .v160-pub-typerail__item,
    .v160-pub-brandrail__item,
    .v160-pub-hubpanel .v160-pub-models__item,
    .v160-pub-quick__go,
    .v160-pub-brandgrid__more i {
        transition: none;
    }

    .v160-pub-cars.gab-cars-grid,
    .v160-pub-typerail,
    .v160-pub-brandrail {
        scroll-snap-type: none;
    }
}

@media print {

    .v160-pub-hero,
    .v160-pub-section--alt {
        background: none;
    }

    /* Interactive-only chrome carries no meaning on paper. */
    .v160-pub-hub__keyword,
    .v160-pub-hub__tabs,
    .v160-pub-hub__origin,
    .v160-pub-brandgrid__more,
    .v160-pub-typerail,
    .v160-pub-brandrail,
    .v160-pub-dealers__toolbar,
    .v160-pub-dealers__nores {
        display: none !important;
    }

    .v160-pub-cars.gab-cars-grid,
    .v160-pub-dealer-grid,
    .v160-container > .v160-pub-dealers,
    .v160-pub-steps__list {
        display: block !important;
        overflow: visible !important;
    }

    .v160-pub-dealer-card,
    .v160-pub-dealer,
    .v160-pub-step {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}