/* =======================================================================
   Car Catalog — frontend design system
   -----------------------------------------------------------------------
   Concept: the printed window sticker — the spec-and-price sheet taped
   inside a car's window at a dealership. Ink on paper, hairline/dashed
   rules, a stamped price, tabular data blocks.

   Structure (dense icon+value spec rows, solid year header bar, modal
   scroll behavior) comes from a working reference of the client's
   current site — this pass re-skins that structure in the window-
   sticker visual language rather than changing the layout again.

   Mobile is the primary surface (~85% of traffic): mobile-first rules,
   min-width queries add desktop refinement.

   Scoped under the component's own root containers so this never leaks
   into the rest of the site's template.
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&family=Suez+One&display=swap');

.carcat-home, .carcat-make, .carcat-model, .carcat-variant, .carcat-results,
#carcatFilterModal, #carcatToolsModal, #carcat-search-results {
    --carcat-ink: #17140F;
    --carcat-ink-soft: #6B655C;
    --carcat-paper: #FFFFFF;
    --carcat-paper-tint: #F7F5F0;
    --carcat-rule: #DCD7CB;
    --carcat-accent: #FF4B12;          /* safety-orange — price + CTAs only */
    --carcat-on-accent: #FFFFFF;
    --carcat-yes: #276B36;
    --carcat-shape: 4px;

    font-family: 'Heebo', system-ui, sans-serif;
    color: var(--carcat-ink);
}

/* =======================================================================
   Shared catalog breadcrumb strip — used on every catalog page (make,
   model, compare, comparemodels, results, variant). Deliberately global
   / NOT scoped to any one page's palette block above (unlike most
   classes in this file, which are scoped per page on purpose) so it
   renders identically everywhere, regardless of which page-specific
   design language (window-sticker / stormy / neutral-slate / make-page
   blue) wraps it. Visible only below 992px: the site's own breadcrumb
   module already covers >=992px and disappears below that width, so
   this fills exactly that gap instead of duplicating it.
   ======================================================================= */
.carcat-catalog-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    color: #94a3b8;
}

.carcat-catalog-breadcrumb a { color: inherit; text-decoration: none; }
.carcat-catalog-breadcrumb a:hover { text-decoration: underline; }
.carcat-catalog-breadcrumb .sep { color: #cbd5e1; }
.carcat-catalog-breadcrumb .current { color: #1e293b; font-weight: 700; }

/* Back button, first item in the breadcrumb row on every page that has
   one — same visual the make page's button originally used, rebuilt
   here with literal values (not --mk-* tokens) so it looks identical
   regardless of page. It shares the breadcrumb row's visibility, so it
   disappears at the same >=992px breakpoint instead of needing its own
   rule (this was the bug on the model page before: its button lived in
   a separate, always-visible topbar — and until this pass, the make
   page still had this same problem via its own sticky topbar). */
.carcat-catalog-back-btn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: none;
    background: #eceff8;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-inline-end: 2px;
}

.carcat-catalog-back-btn:hover { background: #dfe4f3; }
.carcat-catalog-back-btn svg { width: 15px; height: 15px; }

@media (min-width: 992px) {
    .carcat-catalog-breadcrumb { display: none; }
}

.carcat-title, .carcat-make-name, .carcat-price, .carcat-year-bar,
.carcat-variant .fs-4, h1 {
    font-family: 'Suez One', serif;
}

/* =======================================================================
   Typography
   ======================================================================= */

.carcat-title { font-size: 1.5rem; line-height: 1.15; }
.carcat-subtitle { font-size: 1rem; font-weight: 700; }

@media (min-width: 768px) {
    .carcat-title { font-size: 2.1rem; }
}

/* =======================================================================
   Search field
   ======================================================================= */

.carcat-search { position: relative; }

#carcat-search-input {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px;
    font-size: 1.05rem;
    color: var(--carcat-ink);
}

#carcat-search-input::placeholder { color: var(--carcat-ink-soft); }
#carcat-search-input:focus { outline: none; box-shadow: none; }

#carcat-search-results {
    background: var(--carcat-paper);
    max-height: 320px; overflow-y: auto;
    border: 1.5px solid var(--carcat-ink);
    border-radius: 14px; top: 100%; margin-top: 6px; padding: 4px;
    z-index: 1000;
}

#carcat-search-results .list-group-item {
    border: none; border-radius: 0; padding: 10px 12px;
    border-bottom: 1px dashed var(--carcat-rule) !important;
}

#carcat-search-results .list-group-item:last-child { border-bottom: none !important; }
#carcat-search-results .list-group-item:hover { background: var(--carcat-paper-tint); }
#carcat-search-results .list-group-item small { display: block; color: var(--carcat-ink-soft); opacity: 1; }

/* =======================================================================
   Filter button
   ======================================================================= */

.carcat-filter-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--carcat-ink) !important;
    border: none !important;
    color: var(--carcat-paper) !important;
    border-radius: var(--carcat-shape) !important;
    padding: 12px 22px !important;
    font-weight: 700; font-size: 0.92rem;
    box-shadow: none !important;
}

.carcat-filter-btn:hover, .carcat-filter-btn:active { background: #000 !important; }
.carcat-filter-icon { font-size: 1.05rem; line-height: 1; }

@media (max-width: 575.98px) {
    .carcat-filter-btn { width: 100%; justify-content: center; padding: 14px 22px !important; }
}

/* =======================================================================
   Filter modal — genuinely full-screen on mobile (Bootstrap's own
   .modal-fullscreen-sm-down, already on the markup, handles the
   full-height/no-radius/pinned-footer mechanics on its own — this used to
   fight that with a bottom-sheet override; now it only adds paper styling
   on top of Bootstrap's native fullscreen layout instead of re-flexing it).
   ======================================================================= */

@media (max-width: 575.98px) {
    #carcatFilterModal .modal-content { border: none; }
    #carcatFilterModal .modal-header { padding: 14px 16px 8px; }
    #carcatFilterModal .modal-body { padding: 4px 16px 12px; }
    #carcatFilterModal .modal-footer { padding: 10px 16px 14px; }
}

/* The filter form (#carcat-filter-form, in layouts/carcatalog/filter_modal.php)
   wraps both .modal-body and .modal-footer as its own children, sitting
   between them and .modal-content in the DOM. That breaks Bootstrap's
   .modal-dialog-scrollable mechanics, which need .modal-header /
   .modal-body / .modal-footer to be .modal-content's own direct flex
   children — with the form in between, .modal-body never gets
   flex-constrained by .modal-content's own max-height, so it renders at
   its full content height instead of scrolling internally (only visible
   once the modal doesn't fit the viewport, e.g. a short browser window).
   display:contents removes the form from layout entirely (it keeps
   working as a form — its inputs still submit via it) so .modal-body and
   .modal-footer become .modal-content's flex children again. */
#carcatFilterModal .modal-content > form { display: contents; }

#carcatFilterModal .modal-content { background: var(--carcat-paper); }

@media (min-width: 576px) {
    #carcatFilterModal .modal-content { border-radius: 4px; border: 1.5px solid var(--carcat-ink); box-shadow: none; }
}

#carcatFilterModal .modal-title { font-weight: 700; font-size: 1.05rem; }
#carcatFilterModal .modal-header { border-bottom: 1px solid var(--carcat-rule); }
#carcatFilterModal .modal-footer { border-top: 1px solid var(--carcat-rule); }

.carcat-filter-row { width: 100%; margin-bottom: 14px !important; }
.carcat-filter-row .form-label { font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; color: var(--carcat-ink-soft); }

#carcatFilterModal .btn-primary { background: var(--ch-primary, #094cb2); border: none; border-radius: var(--carcat-shape); padding: 13px; font-weight: 700; }
#carcatFilterModal .btn-primary:hover, #carcatFilterModal .btn-primary:active { background: #073e8c; }

.carcat-filter-row .d-flex.flex-wrap { gap: 6px !important; }
.carcat-filter-row .form-check { display: inline-flex; align-items: center; margin: 0; padding-right: .25rem; }
.carcat-filter-row .form-check-input { position: absolute; opacity: 0; width: 0; height: 0; }

.carcat-filter-row .form-check-label {
    cursor: pointer; padding: 6px 12px; border-radius: 10px;
    border: 1.5px solid var(--carcat-rule); background: var(--carcat-paper);
    font-size: 0.84rem; font-weight: 500;
    transition: border-color 0.1s ease, background-color 0.1s ease;
    user-select: none;
}

.carcat-filter-row .form-check-input:checked + .form-check-label {
    background: var(--carcat-ink); border-color: var(--carcat-ink); color: var(--carcat-paper); font-weight: 700;
}

.carcat-filter-row .form-check-input:focus-visible + .form-check-label { outline: 2px solid var(--carcat-accent); outline-offset: 2px; }

.carcat-price-slider .small { font-size: 0.95rem !important; color: var(--carcat-ink) !important; }
.carcat-range-wrap { height: 26px; }

/* The visible gray bar is drawn ONCE here, behind both overlapping range
   inputs — not by either input's own ::-webkit-slider-runnable-track (see
   below for why). Same geometry the inputs use (inset-inline: 8px,
   vertically centered), so it lines up exactly under both thumbs. */
.carcat-range-wrap::before {
    content: '';
    position: absolute;
    inset-inline: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    border-radius: 1rem;
    background: #dfe3e7;
    pointer-events: none;
}

/* Center the whole input on the wrap's vertical midpoint (top: 50% +
   translateY(-50%)) instead of a fixed top offset — that way the thumb
   centering below only has to account for the track's own height, not
   also guess at the wrap's exact height. */
.carcat-range-input {
    position: absolute;
    inset-inline: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    background: none;
    accent-color: var(--carcat-accent);
}

/* Explicit, always-on thumb styling, gray (matching the slider bar
   itself, not the orange accent) and sized for a comfortable touch
   target. -webkit-appearance/appearance: none takes the thumb out of
   native rendering entirely — which also takes it out of the browser's
   automatic vertical centering against the track, so without an explicit
   margin-top the thumb sits with its TOP (not its center) aligned to the
   track's midline. margin-top here is the standard fix: (track height −
   thumb height) / 2 = (4 − 26) / 2 = -11px. Confirmed via DevTools
   Computed tab that this rule genuinely wins over the site template's own
   competing .form-range::-webkit-slider-thumb margin-top.
   !important is needed throughout: Bootstrap ships its own
   .form-range::-webkit-slider-thumb rule (same specificity as ours, a
   source-order tie) plus a MORE SPECIFIC
   .form-range:focus::-webkit-slider-thumb rule that only applies while
   the handle is actively focused/dragged — that's why the thumb was
   previously disappearing mid-drag and reappearing after. !important on
   both the base and focus/active states keeps this styling in full
   control regardless of Bootstrap's own rules or their order. */
.carcat-range-input::-webkit-slider-runnable-track,
.carcat-range-input:focus::-webkit-slider-runnable-track,
.carcat-range-input:active::-webkit-slider-runnable-track {
    height: 4px !important;
    /* Both #carcat-price-min and #carcat-price-max are full-width,
       overlapping inputs (both stretch the whole slider, only their
       own thumb position differs). Each one's track pseudo-element
       paints an OPAQUE bar across the whole width — with two of them
       stacked, the one added later in the DOM (#carcat-price-max)
       paints on top and its opaque track fully covers the OTHER
       input's thumb, i.e. the min handle disappears under it. In this
       RTL page the min handle (value at its own minimum) sits at the
       slider's visual right edge, which is exactly the "right circle
       appears below the bar" symptom being reported — it isn't
       mispositioned, it's buried under the other input's track. Fix:
       make every input's own track transparent (the single visible
       bar is drawn once by .carcat-range-wrap::before above, behind
       both inputs), so neither input's track can occlude the other's
       thumb regardless of DOM order. */
    background: transparent !important;
}

.carcat-range-input::-moz-range-track,
.carcat-range-input:focus::-moz-range-track,
.carcat-range-input:active::-moz-range-track {
    height: 4px !important;
    background: transparent !important;
}

.carcat-range-input::-webkit-slider-thumb,
.carcat-range-input:focus::-webkit-slider-thumb,
.carcat-range-input:active::-webkit-slider-thumb {
    pointer-events: auto !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 26px !important;
    height: 26px !important;
    /* Confirmed via DevTools Computed tab: our rule DOES win over the
       site template's .form-range::-webkit-slider-thumb margin-top
       (proven by setting it to 0 and seeing 0 actually applied) — so
       display:flex/align-items on the input is NOT what centers a
       webkit range thumb; margin-top is still the mechanism that
       matters here. Track height 4px, thumb height 26px:
       (4 − 26) / 2 = -11px. */
    margin-top: -11px !important;
    border-radius: 50% !important;
    background: #9aa0a6 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
    cursor: pointer !important;
}

.carcat-range-input::-moz-range-thumb,
.carcat-range-input:focus::-moz-range-thumb,
.carcat-range-input:active::-moz-range-thumb {
    pointer-events: auto !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #9aa0a6 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
    cursor: pointer !important;
}

/* =======================================================================
   Makes grid
   ======================================================================= */

.carcat-make-card {
    background: var(--carcat-paper);
    border: 1.5px solid var(--carcat-rule);
    border-radius: var(--carcat-shape);
    transition: border-color 0.12s ease, transform 0.08s ease;
}

.carcat-make-card:hover { border-color: var(--carcat-ink); }
.carcat-make-card:active { transform: scale(0.97); }
.carcat-make-logo { max-height: 40px; max-width: 100%; object-fit: contain; }
.carcat-make-name { font-weight: 400; color: var(--carcat-ink); font-size: 0.95rem; }

/* No-longer-sold model — grayscale, matching the old catalog's convention */
.carcat-discontinued-card {
    filter: grayscale(100%);
    opacity: 0.7;
}

/* =======================================================================
   Model image
   ======================================================================= */

.carcat-model-image {
    max-width: 100%; max-height: 320px; object-fit: contain;
    border: 1.5px solid var(--carcat-rule);
    background: var(--carcat-paper-tint);
}

.carcat-make-header-logo { height: 48px; }

.carcat-model-thumb { max-height: 60px; object-fit: contain; }

/* highlight_color is arbitrary, admin-picked per model — handed to CSS via
   a custom property since there's no way to predefine every possible
   color in a stylesheet (see make/default.php and admin models list) */
.carcat-make-card[style*="--carcat-highlight"] {
    background-color: var(--carcat-highlight);
}

.carcat-spec-label { width: 50%; }

/* =======================================================================
   Year header bar — stamped ticket header
   ======================================================================= */

.carcat-year-bar {
    background: transparent;
    color: var(--carcat-ink);
    padding: 0 0 10px;
    border-bottom: 2px solid var(--carcat-ink);
    font-size: 1.15rem;
}

.carcat-year-status {
    font-family: 'Heebo', sans-serif;
    font-weight: 500; font-size: 0.78rem;
    color: var(--carcat-ink-soft);
    margin-inline-start: 8px;
}

.carcat-year-block { border: none; border-radius: 0; overflow: visible; margin-bottom: 2rem; }

/* =======================================================================
   Variant rows — dense inline icon+value spec strip, stamped price
   ======================================================================= */

.carcat-variant-row {
    padding: 13px 16px;
    border-bottom: 1px dashed var(--carcat-rule);
}

.carcat-variant-row:last-child { border-bottom: none; }
.carcat-variant-row:hover { background: var(--carcat-paper-tint); }

.carcat-variant-name { color: var(--carcat-ink); font-weight: 500; }

.carcat-spec-flow { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }

.carcat-spec-item {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.8rem; color: var(--carcat-ink-soft);
}

.carcat-spec-icon { font-size: 0.85rem; line-height: 1; }

.carcat-price { font-size: 1.05rem; color: var(--carcat-accent); white-space: nowrap; }
.carcat-discontinued-label { color: var(--carcat-ink-soft); font-size: 0.82rem; font-family: 'Heebo', sans-serif; }

.carcat-pdf-link, .carcat-download-icon {
    font-size: 1.05rem; text-decoration: none; color: var(--carcat-ink);
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 1.5px solid var(--carcat-ink);
    border-radius: 50%;
}

.carcat-pdf-link:hover, .carcat-download-icon:hover { background: var(--carcat-ink); color: var(--carcat-paper); }

/* Results / current-year table rows now live in the homepage-aligned
   .carcat-ch-* block further down (see "Results page" section) — the
   window-sticker rules that used to style them were removed there. */

/* =======================================================================
   Variant page — spec sheet table, boolean marks, price stamp
   ======================================================================= */

.carcat-spec-group h2 {
    font-family: 'Suez One', serif; font-weight: 400; font-size: 1.05rem;
    border-bottom: 2px solid var(--carcat-ink) !important;
}

.carcat-spec-table th, .carcat-spec-table td {
    border-color: var(--carcat-rule) !important; border-style: dashed !important;
    padding: 9px 6px !important; font-size: 0.92rem;
}

.carcat-spec-table th { color: var(--carcat-ink-soft) !important; font-weight: 400 !important; }

/* Price stamp on the variant page — the one bold moment */
.carcat-variant .fs-4 {
    color: var(--carcat-on-accent) !important;
    background: var(--carcat-accent);
    padding: 6px 16px;
    display: inline-block;
    transform: rotate(-1deg);
    font-weight: 400 !important;
    font-size: 1.3rem !important;
}

.carcat-bool-yes { color: var(--carcat-yes); font-size: 1.1rem; }
.carcat-bool-no { color: var(--carcat-ink-soft); font-size: 1.1rem; font-weight: 700; }

.carcat-variant .badge.bg-info, .carcat-model .badge.bg-info, .carcat-make .badge.bg-info {
    background: transparent !important; color: var(--carcat-ink) !important;
    border: 1px solid var(--carcat-ink); font-weight: 500; border-radius: var(--carcat-shape); padding: 4px 10px;
}

.carcat-variant .badge.bg-secondary, .carcat-model .badge.bg-secondary {
    background: var(--carcat-paper-tint) !important; color: var(--carcat-ink-soft) !important;
    font-weight: 500; border-radius: var(--carcat-shape); padding: 4px 10px;
}

/* Applied-filter chips for the results page now live in the
   homepage-aligned .carcat-ch-* block further down. */

/* =======================================================================
   "Stormy" ice-blue palette, mobile-first per a client-provided
   reference design. Originally scoped to .carcat-compare only; extended
   to .carcat-model (the model/trim-list page redesign) so that page
   matches the comparison pages visually. Still does NOT reach
   .carcat-make or .carcat-variant, which keep the window-sticker look
   until/unless those get redesigned too.
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700;800&display=swap');

.carcat-compare {
    --cc-navy: #384959;
    --cc-slate: #6A89A7;
    --cc-sky: #88BDF2;
    --cc-ice: #BDDDFC;
    --cc-ice-light: #EBF4FC;
    --cc-ice-bg: #F2F7FD;
    --cc-card: #ffffff;
    --cc-text: #384959;
    --cc-muted: #6A89A7;
    --cc-border: #BDDDFC;
    --cc-border-rgb: 189, 221, 252;
    --cc-primary: #88BDF2;
    --cc-radius: 16px;
    --cc-shadow: 0 4px 24px -4px rgba(56,73,89,0.08), 0 2px 8px -2px rgba(56,73,89,0.04);
    --cc-subtle: #4B637A;
    --cc-benefit: #2A7B62;
    --cc-benefit-bg: #E8F5F1;

    font-family: 'Assistant', sans-serif;
    background: var(--cc-ice-bg);
    color: var(--cc-text);
    margin: -1rem;
    padding: 1rem;
    border-radius: 8px;
}

/* The model page (v5 redesign, model-v51.html) moved to a NEUTRAL
   Tailwind-slate palette with blue used only as a sparing accent
   (price text, powertrain icon boxes) — a deliberately different,
   flatter look from .carcat-compare's ice-blue "stormy" system above.
   Colors here are copied verbatim from the mockup's Tailwind config,
   same approach as the make page's own palette. */
.carcat-model {
    --cc-navy: #1E293B;
    --cc-slate: #64748B;
    --cc-sky: #2563EB;
    --cc-ice: #E2E8F0;
    --cc-ice-light: #F1F5F9;
    --cc-ice-bg: #EBEFF8;
    --cc-card: #ffffff;
    --cc-text: #1E293B;
    --cc-muted: #64748B;
    --cc-border: rgba(203,213,225,0.8);
    --cc-border-rgb: 203, 213, 225;
    --cc-primary: #2563EB;
    --cc-radius: 16px;
    --cc-shadow: 0 1px 2px 0 rgba(15,23,42,0.06);

    /* Model-page-only accents the shared token set above has no slot
       for: the blue used for prices/hover (distinct from --cc-navy,
       which is a neutral dark slate here, not blue), the icon-box
       blue (uniform across every fuel type — the icon SHAPE is what
       differs, not its color), and the PDF button's red icon. */
    --cc-price-blue: #1E3A8A;
    --cc-icon-bg: #EFF6FF;
    --cc-icon-color: #1E40AF;
    --cc-pdf-red: #EF4444;

    font-family: 'Assistant', 'Noto Sans Hebrew', system-ui, -apple-system, sans-serif;
    background: #ffffff;
    color: var(--cc-text);
    margin: -1rem;
    padding: 1rem;
    border-radius: 8px;
}

/* .carcat-model / .carcat-compare's own margin: -1rem + padding: 1rem
   (all 4 sides) is a self-cancelling pair: below 992px the -1rem pull
   up and the 1rem padding back down net out to a ZERO top offset
   versus plain ambient flow — which is exactly why it never used to
   look wrong there. At >=992px, only zeroing margin-top (an earlier,
   incomplete pass) left padding-top: 1rem in place with nothing left
   to cancel it against, so the container actually sat 1rem LOWER than
   its <992px position — on top of the real breadcrumb module's own
   height appearing/disappearing, that extra 1rem was a second,
   avoidable source of the reported jump when crossing the breakpoint.
   Zeroing padding-top too restores the same net-zero top offset on
   both sides of 992px, so the only thing that still moves when you
   cross it is the breadcrumb module's own (intentional, unavoidable)
   height — nothing added by this container. Covers every page that
   carries .carcat-model — model, compare, comparemodels — since
   comparemodels never redeclares its own root margin/padding. */
@media (min-width: 992px) {
    .carcat-model,
    .carcat-compare {
        margin-top: 0;
        padding-top: 0;
    }
}

.carcat-compare .text-muted { color: var(--cc-muted) !important; }

.carcat-compare-breadcrumb, .carcat-cm-breadcrumb { margin-top: 10px; margin-bottom: 12px; }

/* Hero */
.carcat-compare-header-card {
    background: rgba(235, 239, 248, 1);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 18px 20px;
}

/* The header card is split into a head box (title) and a body box
   (overview cards), with the sticky trim-picker bar as a true
   top-level sibling between them — see .carcat-sticky-bar below for
   why. These two rules make the pair still read as one seamless card
   even though the sticky bar visually sits "inside" the gap.
   Border removed here rather than on the shared .carcat-compare-header-card
   base rule above, since that base rule is also used for the plain
   "pick a model" card (comparemodels step 1) and the trim-comparison
   page (view=compare), which both keep their border. */
.carcat-compare-header-card.carcat-cm-top-card-head {
    border: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 12px;
}

.carcat-compare-header-card.carcat-cm-top-card-body {
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 12px 0 0 0;
    background: #ffffff;
}

.carcat-hero-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.carcat-hero-badge {
    display: inline-block;
    background: var(--cc-navy);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 6px;
}

.carcat-compare-hero-image {
    display: block;
    width: 100%;
    max-height: 200px;
    height: auto;
    object-fit: scale-down;
    border-radius: var(--cc-radius);
    margin-bottom: 8px;
}

.carcat-compare-header-card h1 {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--cc-navy);
    letter-spacing: -0.01em;
}

.carcat-hero-subtitle {
    font-size: 0.78rem;
    color: var(--cc-muted);
    margin: 4px 0 0;
}

/* comparemodels result page's merged "top card" (title + trim subtitle +
   the two model cards, all inside one carcat-compare-header-card) —
   ported from comper-models-page/code-3.html's TopComparisonHeader. */
.carcat-cm-top-subtitle {
    text-align: center;
    font-size: 0.78rem;
    color: var(--cc-muted);
    margin-bottom: 14px;
}

.carcat-cm-top-subtitle strong { color: var(--cc-navy); }

/* "חדש" badge in the top card's badge row — signals this comparison
   covers the current, available lineup. */
.carcat-hero-new-badge {
    display: inline-block;
    background: var(--cc-sky);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
}

/* Heading above each powertrain group's cascade (only shown when a
   model has more than one powertrain) — same icon treatment as the
   fuel-type group cards above, so the split reads as one system. */
.carcat-cascade-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.carcat-cascade-group-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--cc-ice-light);
    border: 1px solid var(--cc-border);
    color: var(--cc-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.carcat-cascade-group-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

.carcat-cascade-group-label { font-size: 0.85rem; font-weight: 800; color: var(--cc-navy); }

/* Quick summary card (trim count + price range) at the bottom of the
   top card — ported from var comparision/code-221.html's
   HeroHeaderSection "quick summary card". */
.carcat-hero-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid var(--cc-border);
    border-radius: 12px;
}

.carcat-hero-summary-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.carcat-hero-summary-col-end {
    align-items: flex-end;
    text-align: end;
}

.carcat-hero-summary-label {
    font-size: 0.68rem;
    color: var(--cc-muted);
}

.carcat-hero-summary-value {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--cc-navy);
}

.carcat-hero-price-value {
    color: #094cb2;
}

/* Generic card wrapper */
.carcat-compare-card {
    background: rgba(235, 239, 248, 1);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    overflow: hidden;
}

.carcat-compare-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(var(--cc-border-rgb), 0.6);
}

.carcat-compare-card-head-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--cc-ice-light);
    border: 1px solid var(--cc-border);
    color: var(--cc-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.carcat-compare-card-head-icon svg { width: 16px; height: 16px; fill: #14b30c; }

.carcat-compare-card-head-titles { flex: 1; }
.carcat-compare-card-head-title { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; color: var(--cc-navy); }
.carcat-compare-card-head-subtitle { font-size: 0.7rem; color: var(--cc-muted); font-weight: 500; }

.carcat-compare-card-body { padding: 16px; }

/* Dimensions */
.carcat-dims-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.carcat-dims-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid rgba(var(--cc-border-rgb), 0.7);
    border-radius: 12px;
    padding: 10px 12px;
}

.carcat-dims-label { font-size: 0.76rem; font-weight: 600; color: var(--cc-slate); }
.carcat-dims-value { font-size: 0.88rem; font-weight: 800; color: var(--cc-navy); }
.carcat-dims-unit { font-size: 0.65rem; color: var(--cc-slate); margin-inline-start: 2px; }

/* "מידות לכל הגרסאות" toggle + accordion — base card above always shows
   the cheapest trim's dimensions; this button/panel only render when
   CompareModel::getDimensionsSummary() found other trims that differ on
   at least one field (no rounding tolerance — removed 2026-10-01).
   Toggled via a small inline <script> in tmpl/compare/default.php
   (stable id/class selectors only — see the action*= bug fixed
   2026-09-30). */
.carcat-dims-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    background: var(--cc-ice);
    border: 1px solid rgba(var(--cc-border-rgb), 0.7);
    border-radius: 10px;
    color: var(--cc-navy);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.carcat-dims-toggle:hover { background: #e8edfb; }
.carcat-dims-toggle-icon { width: 13px; height: 13px; transition: transform 0.15s ease; }
.carcat-dims-toggle[aria-expanded="true"] .carcat-dims-toggle-icon { transform: rotate(180deg); }

.carcat-dims-others {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.carcat-dims-other-row {
    background: #ffffff;
    border: 1px solid rgba(var(--cc-border-rgb), 0.7);
    border-radius: 10px;
    padding: 9px 12px;
}

.carcat-dims-other-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cc-navy);
    margin-bottom: 4px;
}

.carcat-dims-other-line { font-size: 0.74rem; color: var(--cc-slate); line-height: 1.5; }

/* Engine-group cards — one stacked, always-visible .carcat-compare-card
   per powertrain group (structure from the client's varcomp-v24a1.html
   mockup; replaces the old tab-switched single-panel layout so every
   powertrain's trims are visible/scannable/printable at once). */
.carcat-enginegroup-list { display: flex; flex-direction: column; gap: 12px; }

/* Fuel icon: the shape (bolt / cycle / plug / flame) is what tells
   powertrains apart, not color — same convention as the model page's
   powertrain heading icon, so this just overrides the generic card-head
   icon's solid fill with a stroke-only outline render. */
.carcat-compare-card-head-icon.carcat-fuel-icon svg { fill: none; stroke: currentColor; stroke-width: 2; }

.carcat-trimrow-list { display: flex; flex-direction: column; gap: 6px; }

.carcat-trimrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    background: #ffffff;
    border: 1px solid rgba(var(--cc-border-rgb), 0.7);
    border-radius: 10px;
}

.carcat-trimrow-name { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--cc-navy); }
.carcat-trimrow-price { font-size: 0.82rem; font-weight: 900; color: var(--cc-navy); white-space: nowrap; }

/* Engine-info strip on the "what each trim adds" cards below — a single
   framed, bullet-separated box (drivetrain / powertrain type /
   horsepower / 0-100 / economy-or-range), matching the client's
   varcomp-v241.html mockup structure: white background + border, not a
   tinted box like the rest of this page's cards. */
.carcat-diff-engine-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    background: #ffffff;
    border: 1px solid rgba(var(--cc-border-rgb), 0.7);
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cc-navy);
}

.carcat-diff-engine-sep { color: var(--cc-border); font-weight: 400; }

/* Tier colors — same trim keeps the same accent everywhere */
.carcat-compare {
    --tier-0: #6A89A7;
    --tier-1: #88BDF2;
    --tier-2: #384959;
    --tier-3: #4a7ba8;
    --tier-4: #2e3d4a;
}

.carcat-tier-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-inline-end: 4px;
}

.carcat-tier-0 { --tier-color: var(--tier-0); }
.carcat-tier-1 { --tier-color: var(--tier-1); }
.carcat-tier-2 { --tier-color: var(--tier-2); }
.carcat-tier-3 { --tier-color: var(--tier-3); }
.carcat-tier-4 { --tier-color: var(--tier-4); }

.carcat-tier-dot { background: #3762e4; }

/* Safety grid (2-col pills with checkmark) */
.carcat-safety-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.carcat-safety-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid rgba(var(--cc-border-rgb), 0.7);
    border-radius: 12px;
    padding: 8px;
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--cc-navy);
}

.carcat-safety-pill svg { width: 15px; height: 15px; fill: none; stroke: #14b30c; stroke-width: 2.5; flex-shrink: 0; }

.carcat-safety-pill-missing {
    opacity: 0.6;
}

.carcat-safety-pill-missing svg { stroke: #b0b8c1; }
.carcat-safety-pill-missing span { text-decoration: line-through; color: var(--cc-muted); }

/* Comfort rows (key on the right in RTL, value on the left) — same
   white-rounded-card-row treatment as the model/make pages' trim and
   price rows, instead of a flat divided list. */
.carcat-comfort-rows { display: flex; flex-direction: column; gap: 6px; }

.carcat-comfort-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid rgba(226,232,240,0.85);
    border-radius: 10px;
    font-size: 0.8rem;
    gap: 10px;
}

.carcat-comfort-row .lbl { color: var(--cc-slate); font-weight: 500; flex-shrink: 0; }
.carcat-comfort-row .val { color: var(--cc-navy); font-weight: 700; text-align: left; }

/* Plain yes/no comfort lines (no "label: value" split) — same green
   check used in the safety grid, so a one-sided row still reads as
   "included" instead of looking like a blank/missing value. */
.carcat-comfort-check { display: flex; align-items: center; flex-shrink: 0; }
.carcat-comfort-check svg { width: 15px; height: 15px; fill: none; stroke: #14b30c; stroke-width: 2.5; }

/* Two-col grid wrapper for safety+comfort cards side by side */
.carcat-two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 700px) {
    .carcat-two-col-grid { grid-template-columns: 1fr; }
}

/* Cumulative "what does each trim add" cards */
/* Mobile: horizontal scroll (one card at a time, snap) — matches the
   earlier cumulative-cards treatment. Desktop: back to a stacked column
   since there's room to show every card expanded at once. */
.carcat-cum-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.carcat-cum-row::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
    .carcat-cum-row { flex-direction: column; overflow-x: visible; padding-bottom: 0; }
}

.carcat-compare-diff-card {
    background: rgba(235, 239, 248, 1);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 14px 16px;
    flex: 0 0 85%;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .carcat-compare-diff-card { flex: 1 1 auto; }
}

.carcat-diff-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--cc-ice-light);
    color: var(--cc-navy);
    border: 1px solid var(--cc-border);
    margin-inline-end: 6px;
}

.carcat-diff-badge-top { background: var(--cc-navy); color: #fff; border-color: var(--cc-navy); }

.carcat-compare-diff-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.carcat-compare-diff-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.carcat-compare-diff-name strong { font-size: 0.9rem; color: var(--cc-navy); }

.carcat-compare-diff-price { text-align: start; white-space: nowrap; }
.carcat-compare-diff-price-value { font-size: 0.9rem; font-weight: 900; color: var(--cc-navy); }
.carcat-compare-diff-price-diff { display: block; font-size: 0.65rem; color: var(--cc-muted); font-weight: 600; }

.carcat-compare-diff-intro { font-size: 0.72rem; color: var(--cc-muted); font-weight: 600; margin-bottom: 8px; }

.carcat-compare-shared-group-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cc-slate);
    margin-bottom: 6px;
}

.carcat-compare-plus-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.carcat-compare-plus-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--cc-navy);
    padding: 5px 0;
}

.carcat-compare-plus-list li .plus-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cc-ice-light);
    border: 1px solid var(--cc-border);
    color: var(--cc-slate);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.carcat-compare-plus-list.carcat-base-list li .dot-icon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tier-color, var(--cc-sky));
    flex-shrink: 0;
}

/* Sticky comparison bar (model-vs-model page).
   This is a direct child of the page's outer container (a sibling of
   the header/overview cards, not nested inside either), because
   position: sticky only stays "stuck" while its containing block is
   still on screen — nested inside the short header card, it used to
   scroll away with that card instead of floating through the whole
   page. As a page-level sibling it stays pinned for the entire
   scroll. */
.carcat-sticky-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: #eceff8;
    padding: 6px 20px;
    margin: 0 0 3px;
    /* Without this, a wide grid track (forced open by the <select>'s
       intrinsic content width — the long trim-name options) can push the
       whole page wider than the viewport on mobile, which is what breaks
       the "stuck to top" sticky look: the page gets horizontal scroll and
       the bar scrolls away with it instead of staying pinned. */
    min-width: 0;
}

.carcat-sticky-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cc-navy);
    background: #ffffff;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center;
    min-width: 0;
}

/* Per-side background instead of a top accent bar — same treatment as
   the overview cards / dimension boxes below, matching codey.html's
   own sticky pair indicator (tinted card vs plain white, both plain
   1px borders, no accent bar). */
.carcat-sticky-pill.carcat-tier-0 {
    background: #ffffff;
    border-color: var(--cc-ice);
}

.carcat-sticky-pill.carcat-tier-1 {
    background: #ffffff;
    border-color: var(--cc-border);
}

/* Trim-switcher dropdown inside a sticky pill — looks like the same
   plain-text pill, just with a caret hinting it opens a picker. */
.carcat-sticky-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carcat-sticky-select-caret { font-size: 0.6rem; color: var(--cc-slate); flex-shrink: 0; }

/* Overview cards (model-vs-model page) */
.carcat-overview-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.carcat-overview-card {
    background: #eceff8;
    border-radius: var(--cc-radius);
    padding: 12px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

/* Both cards share the same tinted background/shadow above — side B
   (tier-1) no longer has its own border ring on top of that (it used
   to stand out from a plain white tier-0 card that way). */

.carcat-overview-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 400;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--cc-sky);
    color: #ffffff;
    border: none;
    margin-bottom: 4px;
}

.carcat-overview-card h2 { font-size: 0.95rem; font-weight: 800; color: var(--cc-navy); margin: 0; }
.carcat-overview-trim { font-size: 0.72rem; color: var(--cc-navy); font-weight: 400; margin-bottom: 6px; }

.carcat-overview-price {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--cc-border-rgb), 0.6);
    margin-bottom: 8px;
}

.carcat-overview-price-value { font-size: 1.05rem; font-weight: 900; color: var(--cc-navy); }

.carcat-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

.carcat-overview-image { margin: 6px 0; }
.carcat-overview-image img { width: 100%; height: auto; display: block; object-fit: contain; }
.carcat-overview-year { font-size: 0.68rem; font-weight: 700; color: var(--cc-slate); }
.carcat-tier-1 .carcat-overview-year { color: var(--cc-subtle); }

.carcat-overview-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.72rem;
}
.carcat-overview-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.carcat-overview-stats .lbl { color: var(--cc-muted); }
.carcat-overview-stats .val { color: var(--cc-navy); font-weight: 700; }

/* Section-title bullet — shared by every model-vs-model spec card
   (dimensions, performance, safety, comfort), which all now use the
   same .carcat-compare-card / .carcat-row-table treatment below. */
.carcat-cm-dims-section-dot {
    display: inline-block;
    width: 8px;
    height: 16px;
    border-radius: 4px;
    background: var(--cc-slate);
    flex-shrink: 0;
}

/* Row-by-row comparison tables (dimensions / performance / safety / comfort) */
.carcat-row-table { display: flex; flex-direction: column; }

/* Which column is which model — the table itself has no other cue
   besides the sticky bar/dropdowns far above it, and the two sides
   aren't symmetric (label + 2 values), so it read as ambiguous which
   value belonged to which car without repeating the names here.
   Shown on the same line as the card's own title, in the title's own
   color, rather than as a separate row inside the table — and aligned
   to mirror .carcat-row-table-row's own 1.2fr/1fr/1fr columns below,
   so each name sits directly above its own value column instead of
   floating as a left-aligned block. This override is scoped to the
   comparemodels page only: the trim-comparison page (view=compare)
   reuses the same .carcat-compare-card-head/-titles classes with an
   icon + subtitle layout and must keep the plain flex behavior. */
.carcat-comparemodels .carcat-compare-card-head {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 6px;
}

/* Same scoping reason as above: the trim-comparison page (view=compare)
   reuses the base .carcat-compare-card and keeps its border, so this
   only drops it on the model-vs-model comparison results page. */
.carcat-comparemodels .carcat-compare-card {
    border: none;
}

.carcat-comparemodels .carcat-compare-card-head-titles {
    grid-column: 1;
    flex: initial;
    min-width: 0;
}

.carcat-compare-card-head-names {
    grid-column: 2 / span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.carcat-compare-card-head-name {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cc-navy);
}

.carcat-row-table-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 6px;
    align-items: center;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(var(--cc-border-rgb), 0.4);
    font-size: 0.76rem;
}

.carcat-row-table-row:last-child { border-bottom: none; }

.carcat-row-label { color: var(--cc-muted); font-weight: 600; }

.carcat-row-val {
    text-align: center;
    font-weight: 800;
    color: var(--cc-navy);
}

.carcat-row-same .carcat-row-val { font-weight: 500; color: var(--cc-muted); }

/* The numerically-bigger side of a dimensions row (see comparemodels'
   $winner calc) — the brand blue, bolder/larger than a plain value. */
.carcat-row-val-winner {
    color: #3153bf;
    font-weight: 900;
    font-size: 0.85rem;
}

.carcat-row-divider {
    padding: 8px 16px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--cc-navy);
    background: var(--cc-ice-light);
    border-bottom: 1px solid rgba(var(--cc-border-rgb), 0.6);
    border-top: 1px solid rgba(var(--cc-border-rgb), 0.6);
}

/* =======================================================================
   Model page redesign — "stormy" treatment (see block above). Every
   class here is prefixed .carcat-mp- (model page) and lives only inside
   .carcat-model, so it can never collide with the older shared classes
   (.carcat-year-block, .carcat-variant-row, etc.) still used by the
   make/variant/comparemodels pages.
   ======================================================================= */

/* The share button (only remaining user of this class — the back-arrow
   button that used to live alongside it moved into the shared catalog
   breadcrumb row, see .carcat-catalog-back-btn below) now sits next to
   the page title instead of in its own topbar strip. */
.carcat-mp-topbar-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--cc-border);
    background: #fff;
    color: var(--cc-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.carcat-mp-topbar-btn svg { width: 17px; height: 17px; }

.carcat-mp-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.carcat-mp-title-row .carcat-mp-title { margin: 0; }

.carcat-mp-breadcrumb { margin: 10px 0 0; }

.carcat-mp-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.carcat-mp-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
}

/* Neutral pill matching the mockup — the "●" is a plain text
   character inline with the label, not a separately-colored dot;
   available vs. discontinued isn't color-coded here, just worded. */
.carcat-mp-badge-status {
    background: var(--cc-ice-light);
    color: var(--cc-muted);
    border: 1px solid var(--cc-border);
}

.carcat-mp-badge-bodytype {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--cc-navy);
    background: var(--cc-ice-light);
    border: 1px solid var(--cc-border);
    padding: 3px 10px;
    border-radius: 20px;
}

.carcat-mp-badge-make {
    margin-inline-start: auto;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cc-slate);
}

.carcat-mp-title { font-size: 1.5rem; font-weight: 900; color: var(--cc-navy); letter-spacing: -0.01em; margin-top: 8px; }
.carcat-mp-description { font-size: 0.78rem; color: var(--cc-muted); line-height: 1.55; margin-top: 6px; }

.carcat-mp-hero {
    position: relative;
    width: 100%;
    border-radius: var(--cc-radius);
    overflow: hidden;
    margin-top: 14px;
}

.carcat-mp-hero img { width: 100%; max-height: 350px; height: auto; display: block; object-fit: cover; }

/* Fallback state — shown when a model has no per-model-year gallery yet
   and the hero is standing in with the model's own main_image (see
   HtmlView::$heroIsFallback). Kept as its own hook so this look can
   diverge from the real gallery slider above without touching it. */
.carcat-mp-hero-fallback img {
    max-height: none;
}

/* Slider track — a horizontal scroll-snap strip, no JS. Each slide is
   a full-width flex item; the browser's native swipe/scroll handles
   paging, and scroll-snap-align keeps it settling on one full slide
   at a time instead of stopping mid-image. */
.carcat-mp-hero-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.carcat-mp-hero-track::-webkit-scrollbar {
    display: none;
}

.carcat-mp-hero-slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
}

/* Prev/next arrows — plain anchor links to the neighboring slide's id
   (native fragment-scroll, no JS). Desktop/mouse only: hidden below
   the project's established desktop breakpoint and only revealed at
   min-width: 992px (same threshold used for .carcat-catalog-breadcrumb). */
.carcat-mp-hero-arrow {
    display: none;
}

@media (min-width: 992px) {
    .carcat-mp-hero-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(15,23,42,0.55);
        color: #fff;
        font-size: 1.3rem;
        line-height: 1;
        text-decoration: none;
        z-index: 2;
        transition: background 0.15s ease;
    }

    .carcat-mp-hero-arrow:hover {
        background: rgba(15,23,42,0.8);
        color: #fff;
    }

    .carcat-mp-hero-arrow-prev {
        inset-inline-start: 10px;
    }

    .carcat-mp-hero-arrow-next {
        inset-inline-end: 10px;
    }
}

/* Dot navigation — plain anchor links to each slide's id, so jumping
   to a slide is native fragment-scroll behavior, still no JS. */
.carcat-mp-hero-dots {
    position: absolute;
    bottom: 10px;
    inset-inline-start: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.carcat-mp-hero-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(15,23,42,0.35);
}

.carcat-mp-hero-caption {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    background: rgba(15,23,42,0.85);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
}

.carcat-mp-year-section { margin-top: 22px; }

.carcat-mp-year-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cc-border);
    margin-bottom: 10px;
}

.carcat-mp-year-head-left { display: flex; align-items: center; gap: 7px; }
.carcat-mp-year-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc-slate); flex-shrink: 0; }
.carcat-mp-year-head h3 { font-size: 0.88rem; font-weight: 800; color: var(--cc-navy); margin: 0; }
.carcat-mp-year-status { font-size: 0.68rem; font-weight: 700; color: var(--cc-slate); }

.carcat-mp-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--cc-navy);
    background: var(--cc-ice-light);
    border: 1px solid var(--cc-border);
    padding: 3px 9px;
    border-radius: 7px;
}

.carcat-mp-pdf-link svg { width: 11px; height: 11px; color: var(--cc-pdf-red); }
.carcat-mp-pdf-link:hover { background: var(--cc-ice); }

/* Print/share button — same small-pill treatment as .carcat-mp-pdf-link
   (compare/default.php + comparemodels/default.php), just on a <button>
   instead of an <a>, with a navy icon instead of the PDF-red one. */
.carcat-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--cc-navy);
    background: var(--cc-ice-light);
    border: 1px solid var(--cc-border);
    padding: 3px 9px;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
}

.carcat-print-btn svg { width: 11px; height: 11px; color: var(--cc-navy); }
.carcat-print-btn:hover { background: var(--cc-ice); }

.carcat-mp-group-list {
    /* "model page v1" redesign: each powertrain block floats inside a
       single padded EBEFF8 card with no per-block background band —
       blocks are separated by a hairline + vertical gap (divide-y),
       and every trim row underneath is its own small white card, not
       a flat divided row (see .carcat-mp-trim-row below). */
    background: var(--cc-ice-bg);
    border: 1px solid rgba(var(--cc-border-rgb), 0.7);
    border-radius: var(--cc-radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.carcat-mp-group-list > div {
    padding-top: 12px;
    border-top: 1px solid rgba(var(--cc-border-rgb), 0.6);
}

.carcat-mp-group-list > div:first-child {
    padding-top: 0;
    border-top: none;
}

.carcat-mp-powertrain-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 8px;
    background: transparent;
    border-bottom: none;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--cc-navy);
}

.carcat-mp-powertrain-head .fuel-icon {
    /* Same icon box for every fuel type, on purpose — the mockup
       doesn't color-code by powertrain here, the ICON SHAPE (bolt /
       cycle / plug / flame) is what tells them apart, not the color.
       Solid white + a soft shadow (not a tinted box) per the v1 ref. */
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #ffffff;
    color: var(--cc-icon-color);
    box-shadow: 0 1px 2px 0 rgba(15,23,42,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.carcat-mp-powertrain-head .fuel-icon svg { width: 13px; height: 13px; }

.carcat-mp-powertrain-head .fuel-label { flex: 1; }

/* Was a static trim-count pill ("2 גרסאות") — now a real link to the
   trim-comparison view instead, per the user's explicit request; same
   compact pill footprint so the powertrain head's layout is unchanged. */
.carcat-mp-powertrain-head .carcat-mp-compare-btn {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--cc-muted);
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(var(--cc-border-rgb), 0.6);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
}

.carcat-mp-powertrain-head .carcat-mp-compare-btn:hover {
    background: var(--cc-navy);
    color: #ffffff;
    border-color: var(--cc-navy);
}

.carcat-mp-trim-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border: 1px solid rgba(226,232,240,0.85);
    border-radius: 12px;
    margin-bottom: 6px;
}

.carcat-mp-group-list > a.carcat-mp-trim-row:last-child,
.carcat-mp-group-list > div:last-child > a.carcat-mp-trim-row:last-child,
.carcat-mp-group-list > div > a.carcat-mp-trim-row:last-child { margin-bottom: 0; }

/* The name/price block grows to fill whatever space trim names of
   different lengths leave behind, so the specs+arrow group stays
   pinned to the row's leading (left) edge instead of drifting with
   justify-content: space-between — that used to leave the spec
   values misaligned from one trim row to the next. */
.carcat-mp-trim-row-info { flex: 1 1 auto; min-width: 0; }

.carcat-mp-trim-row:hover { background: #F8FAFC; }
.carcat-mp-trim-row:hover .carcat-mp-trim-row-name { color: var(--cc-sky); }
.carcat-mp-trim-row-name { font-size: 0.78rem; font-weight: 800; color: var(--cc-navy); transition: color 0.15s ease; }
.carcat-mp-trim-row-price { font-size: 0.75rem; font-weight: 800; color: var(--cc-price-blue); margin-top: 1px; }
.carcat-mp-trim-row-discontinued { font-size: 0.68rem; font-weight: 700; color: var(--cc-muted); margin-top: 1px; }

/* flex-shrink: 0 keeps this block (and its unit labels) at full,
   unbroken width even when a long trim name wraps to two lines and
   squeezes the row — the name/price info block is the one that's
   allowed to shrink/wrap, never this one. */
.carcat-mp-trim-row-specs { display: flex; align-items: center; gap: 12px; text-align: center; flex-shrink: 0; }
.carcat-mp-trim-row-spec-val { font-size: 0.7rem; font-weight: 800; color: var(--cc-navy); white-space: nowrap; }
.carcat-mp-trim-row-spec-unit { font-size: 0.6rem; color: var(--cc-muted); white-space: nowrap; }

.carcat-mp-trim-row-arrow { width: 13px; height: 13px; color: var(--cc-slate); flex-shrink: 0; transform: scaleX(-1); }
.carcat-mp-trim-row:hover .carcat-mp-trim-row-arrow { color: var(--cc-navy); }

/* "Competing models" picker, between the current lineup and older
   generations — same pale-card look as the make page's model nav-cards
   (.carcat-mk-nav-card), rebuilt here with this page's own --cc-* tokens
   since .carcat-model and .carcat-make each keep their own separate
   palette (see the "Stormy"/neutral-slate comment above). */
.carcat-mp-competitors { margin-top: 26px; }

.carcat-mp-competitors-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }

.carcat-mp-competitors-title { font-size: 0.95rem; font-weight: 800; color: var(--cc-navy); margin: 0; }

.carcat-mp-competitors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.carcat-mp-competitor-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 14px;
    background: var(--cc-ice-bg);
    border: 1px solid var(--cc-border);
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.carcat-mp-competitor-card:has(.carcat-mp-competitor-link:hover) { background: var(--cc-ice-light); }

.carcat-mp-competitor-card:has(.carcat-mp-competitor-radio:checked) {
    background: var(--cc-ice-light);
    border-color: var(--cc-sky);
    box-shadow: 0 0 0 1px var(--cc-sky);
}

.carcat-mp-competitor-card.is-extra { display: none; }
.carcat-mp-competitor-card.is-extra.is-shown { display: flex; }

/* The radio's own tap target: a small corner label, separate from the
   name/image link below so the two actions (select for comparison vs.
   navigate to the model's page) don't fight over the same click.
   Sized comfortably above the visible dot (accent-color'd radio itself)
   for touch, not just the radio's native rendered size. */
.carcat-mp-competitor-radio-label {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 6px;
    cursor: pointer;
    z-index: 1;
}

.carcat-mp-competitor-radio { margin: 0; accent-color: var(--cc-sky); pointer-events: none; }

.carcat-mp-competitor-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
}

.carcat-mp-competitor-img { width: 100%; max-width: 56px; height: 34px; object-fit: contain; }
.carcat-mp-competitor-img-placeholder { background: rgba(255,255,255,0.6); border-radius: 6px; }

.carcat-mp-competitor-name { font-weight: 700; font-size: 0.7rem; color: var(--cc-navy); line-height: 1.25; }

.carcat-mp-competitors-actions { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 12px; }

.carcat-mp-competitors-more-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cc-sky);
    cursor: pointer;
}

.carcat-mp-competitors-more-btn:hover { text-decoration: underline; }

.carcat-mp-competitors-compare-btn {
    flex-shrink: 0;
    padding: 9px 18px;
    border-radius: 10px;
    border: none;
    background: var(--cc-navy);
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.carcat-mp-competitors-compare-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.carcat-mp-competitors-compare-btn:not(:disabled):hover { background: #0F172A; }

@media (min-width: 768px) {
    .carcat-mp-competitors-grid { grid-template-columns: repeat(6, 1fr); }
}

.carcat-mp-cta { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }

.carcat-mp-cta-primary {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    background: var(--cc-navy);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.carcat-mp-cta-primary:hover { background: #0F172A; color: #fff; }
.carcat-mp-cta-primary svg { width: 16px; height: 16px; }

.carcat-mp-cta-secondary {
    width: 100%;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1px solid var(--cc-border);
    background: #fff;
    color: var(--cc-navy);
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.carcat-mp-cta-secondary:hover { background: var(--cc-ice-light); color: var(--cc-navy); }
.carcat-mp-cta-secondary svg { width: 16px; height: 16px; color: var(--cc-slate); }

.carcat-mp-disclaimer { font-size: 0.62rem; text-align: center; color: var(--cc-muted); line-height: 1.6; margin-top: 14px; }

@media (min-width: 768px) {
    .carcat-mp-trim-row-specs { gap: 18px; }
}

/* =======================================================================
   Motion & accessibility
   ======================================================================= */

@media (prefers-reduced-motion: reduce) {
    .carcat-home *, .carcat-make *, .carcat-model *, .carcat-variant *, .carcat-results * {
        transition: none !important; animation: none !important;
    }
}

/* =======================================================================
   Make page redesign — matches design-model-versions-page sibling brief
   in "manufacture page" (manufac-v11.html), colors copied verbatim from
   that mockup rather than reusing the "stormy" tokens (deliberate choice,
   confirmed with the user) since this page has its own visual identity.
   Every class here is prefixed .carcat-mk- (make page) and lives only
   inside .carcat-make, so it can never collide with .carcat-make-card /
   .carcat-make-name, which the HOME PAGE's makes grid still uses.
   ======================================================================= */

.carcat-make {
    --mk-surface: #eceff8;
    --mk-surface-light: #f6f8fd;
    --mk-dark: #0f172a;
    --mk-navy: #1e3a8a;
    --mk-blue-accent: #2563eb;
    --mk-border: rgba(226,232,240,0.8);
    --mk-slate-400: #94a3b8;
    --mk-slate-500: #64748b;
    --mk-slate-600: #475569;
    --mk-slate-700: #334155;
    --mk-slate-800: #1e293b;

    /* "manuf page v1" pass: same token values as before (already an
       exact match), font stack brought in line with the model page's
       own v1 pass. */
    font-family: 'Assistant', 'Heebo', 'Inter', system-ui, sans-serif;
}

/* The old .carcat-mk-topbar (sticky, flush-to-edge bar with its own
   negative margin + backdrop blur) was the one catalog breadcrumb still
   built as a self-contained "bar" instead of a plain in-flow nav like
   every other page — that inconsistency (sticky vs. static, a visible
   white bar vs. bare text) was the actual cause of the reported
   top-of-page jumpiness between pages. Removed; the make page now uses
   the same plain, non-sticky .carcat-catalog-breadcrumb nav as every
   other catalog page, just like .carcat-model already did. */
.carcat-mk-breadcrumb { margin-top: 10px; margin-bottom: 12px; }

.carcat-mk-hero {
    margin-top: 14px;
    background: var(--mk-surface);
    border-radius: 18px;
    padding: 18px 20px;
    border: 1px solid var(--mk-border);
}

.carcat-mk-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.carcat-mk-hero-logo { height: 100%; max-width: 50px; object-fit: contain; }

.carcat-mk-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #fff;
    color: var(--mk-navy);
    font-size: 0.66rem;
    font-weight: 800;
    border: 1px solid #dbeafe;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.carcat-mk-hero-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; }

.carcat-mk-hero-title { font-size: 1.4rem; font-weight: 800; color: var(--mk-dark); letter-spacing: -0.01em; margin: 0 0 6px; }
.carcat-mk-hero-desc { font-size: 0.72rem; line-height: 1.6; color: var(--mk-slate-600); font-weight: 400; }

.carcat-mk-hero-stats {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(226,232,240,0.6);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
}

.carcat-mk-hero-stats > div { background: #ffffff; padding: 6px 4px; border-radius: 8px; border: 1px solid rgba(226,232,240,0.9); }
.carcat-mk-hero-stats span { display: block; font-size: 0.6rem; color: var(--mk-slate-400); }
.carcat-mk-hero-stats strong { font-size: 0.85rem; font-weight: 800; color: var(--mk-slate-800); }
.carcat-mk-hero-stats strong.accent { color: var(--mk-navy); }

.carcat-mk-nav { margin-top: 18px; }

.carcat-mk-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.carcat-mk-nav-head-left { display: flex; align-items: center; gap: 6px; }
.carcat-mk-nav-head-left h2 { font-size: 0.95rem; font-weight: 800; color: var(--mk-dark); margin: 0; }
.carcat-mk-nav-head-left .count { font-size: 0.66rem; background: #f1f5f9; color: var(--mk-slate-500); font-weight: 600; padding: 2px 8px; border-radius: 20px; }

.carcat-mk-nav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.carcat-mk-nav-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 14px;
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    text-decoration: none;
    text-align: center;
    transition: background-color 0.15s ease;
}

.carcat-mk-nav-card:hover { background: #dfe4f3; }
.carcat-mk-nav-card:active { transform: scale(0.97); }
.carcat-mk-nav-card.is-discontinued { opacity: 0.55; filter: grayscale(0.6); }

.carcat-mk-nav-card .ev-dot { position: absolute; top: 8px; inset-inline-start: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-blue-accent); }

.carcat-mk-nav-card-img { width: 100%; max-width: 56px; height: 34px; object-fit: contain; }
.carcat-mk-nav-card-img-placeholder { background: rgba(255,255,255,0.6); border-radius: 6px; }

.carcat-mk-nav-card-name { font-weight: 700; font-size: 0.7rem; color: var(--mk-dark); line-height: 1.25; }
.carcat-mk-nav-card-sub { font-size: 0.58rem; color: var(--mk-slate-500); font-weight: 400; }
.carcat-mk-nav-card-sub.ev { color: #1d4ed8; font-weight: 700; }

.carcat-mk-pricelist { margin-top: 22px; }

.carcat-mk-pricelist-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; margin-bottom: 4px; }
.carcat-mk-pricelist-head h2 { font-size: 1.05rem; font-weight: 800; color: var(--mk-dark); margin: 0; }
.carcat-mk-pricelist-head p { font-size: 0.66rem; color: var(--mk-slate-500); margin: 2px 0 0; }

.carcat-mk-pricelist-card {
    margin-top: 10px;
    background: var(--mk-surface);
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid var(--mk-border);
    scroll-margin-top: 70px;
}

.carcat-mk-pricelist-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.carcat-mk-pricelist-card-head-left { display: flex; align-items: center; gap: 7px; }
.carcat-mk-pricelist-card-head-left .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mk-slate-800); flex-shrink: 0; }
.carcat-mk-pricelist-card-head-left .dot.ev { background: var(--mk-blue-accent); }
.carcat-mk-pricelist-card-head-left h3 { font-size: 0.85rem; font-weight: 800; color: var(--mk-dark); margin: 0; }
.carcat-mk-pricelist-card-title-link { color: inherit; text-decoration: none; }
.carcat-mk-pricelist-card-title-link:hover { color: var(--mk-navy); text-decoration: underline; }

.carcat-mk-status-badge { font-size: 0.6rem; font-weight: 800; background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 10px; }

.carcat-mk-compare-btn {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--mk-navy);
    background: #fff;
    border: 1px solid #dbeafe;
    padding: 5px 12px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.carcat-mk-compare-btn:hover { background: var(--mk-navy); color: #fff; border-color: var(--mk-navy); }

.carcat-mk-pricelist-empty { font-size: 0.7rem; color: var(--mk-slate-500); margin: 0; }

.carcat-mk-pricelist-rows { display: flex; flex-direction: column; gap: 6px; }

/* "manuf page v1" pass: each price row is its own small white card
   (same treatment as the model page's trim rows), not a flat row with
   a divider line underneath. */
.carcat-mk-pricelist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid rgba(226,232,240,0.85);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

.carcat-mk-pricelist-row:hover { background: #F8FAFC; }
.carcat-mk-pricelist-row:hover .name { color: var(--mk-navy); }
.carcat-mk-pricelist-row .name { font-size: 0.75rem; font-weight: 600; color: var(--mk-slate-800); }
.carcat-mk-pricelist-row .price { font-size: 0.82rem; font-weight: 800; color: var(--mk-navy); white-space: nowrap; }
.carcat-mk-pricelist-row .badge-discontinued { font-size: 0.62rem; font-weight: 700; color: var(--mk-slate-500); background: #f1f5f9; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }

.carcat-mk-cta { margin-top: 24px; margin-bottom: 4px; }

.carcat-mk-cta-primary {
    display: block;
    width: 100%;
    text-align: center;
    padding: 13px 16px;
    border-radius: 14px;
    background: #172554;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    text-decoration: none;
}

.carcat-mk-cta-primary:hover { background: var(--mk-navy); color: #fff; }

@media (min-width: 480px) {
    .carcat-mk-nav-grid { grid-template-columns: repeat(4, 1fr); }
}

/* =======================================================================
   Variant page (single-trim full spec sheet) — Sep 2026 redesign per
   "single variant spec"/coderr.html, its own "Enhanced Contrast Stormy
   Morning" palette (a higher-contrast variant of the same family used on
   .carcat-compare/.carcat-model/.carcat-make — copied verbatim from the
   mockup's own Tailwind config, not reused from any of those). Own
   carcat-vs- prefix, never reused elsewhere, to avoid the class-name
   collision that broke an earlier pass on the comparemodels page.
   ======================================================================= */
.carcat-variant {
    --vs-navy: #0F172A;
    --vs-heading: #1E293B;
    --vs-blue: #2563EB;
    --vs-ice: #93C5FD;
    --vs-accent: #3B82F6;
    --vs-subtle: #334155;
    --vs-muted: #475569;
    --vs-card: #F1F5F9;
    --vs-card-tint: #EBF1F8;
    --vs-border: #CBD5E1;
    --vs-border-strong: #94A3B8;
    --vs-benefit: #065F46;
    --vs-benefit-bg: #D1FAE5;
    --vs-row-bg: #eceff8;

    color: var(--vs-navy);
}

/* Top model card — breadcrumb, price-left/badges-right header, three
   bordered stat boxes and a full-width PDF button, per the reference
   screenshot (this replaced an earlier pass that used a back-link
   topbar and a single-column tinted stats list, which the user pointed
   out did not match the reference at all). */
.carcat-vs-card {
    background: rgba(235, 239, 248, 1);
    border: none;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Visual identity (colors/font/hide-below-992px) now comes from the
   shared .carcat-catalog-breadcrumb class (added alongside this one in
   the template) — this rule keeps only the spacing this page's card
   layout needs. */
.carcat-vs-breadcrumb { margin-top: 10px; margin-bottom: 16px; }

.carcat-vs-card-top {
    text-align: right;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--vs-border);
    margin-bottom: 16px;
}

.carcat-vs-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    gap: 6px;
    margin-bottom: 10px;
}

.carcat-vs-badge {
    font-size: 0.64rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--vs-card);
    color: var(--vs-heading);
    border: 1px solid var(--vs-border);
    line-height: 1.4;
}

.carcat-vs-badge-fuel { background: var(--vs-benefit-bg); color: var(--vs-benefit); border-color: #a7d9c5; }
.carcat-vs-badge-year { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.carcat-vs-badge-discontinued { background: var(--vs-card); color: var(--vs-muted); }

.carcat-vs-name { font-size: 1.6rem; font-weight: 800; color: var(--vs-navy); line-height: 1.25; margin: 0; }
.carcat-vs-engine-line { font-size: 0.88rem; color: var(--vs-subtle); font-weight: 600; margin-top: 6px; }

.carcat-vs-price-block { margin-top: 14px; }
.carcat-vs-price-label { font-size: 0.82rem; font-weight: 700; color: var(--vs-subtle); }
.carcat-vs-price { font-size: 1.9rem; font-weight: 900; color: var(--vs-navy); line-height: 1.3; }
.carcat-vs-price-currency { font-size: 1.1rem; font-weight: 700; }
.carcat-vs-price-sublabel { font-size: 0.75rem; font-weight: 600; color: var(--vs-muted); }
.carcat-vs-discontinued-tag { font-size: 1rem; font-weight: 800; color: var(--vs-muted); }

.carcat-vs-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.carcat-vs-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid var(--vs-border);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
}

.carcat-vs-stat-box .lbl { font-size: 0.74rem; font-weight: 700; color: var(--vs-subtle); }
.carcat-vs-stat-box .val { font-size: 1.15rem; font-weight: 800; color: var(--vs-navy); }
.carcat-vs-stat-box .val-accent { color: var(--vs-blue); }

.carcat-vs-pdf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    background: var(--vs-navy);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
}

.carcat-vs-pdf-btn:hover { background: #000000; color: #ffffff; }
.carcat-vs-pdf-btn svg { width: 18px; height: 18px; color: #f87171; flex-shrink: 0; }

/* Tab-style jump nav to the spec sections below the card */
.carcat-vs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.carcat-vs-tab {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--vs-subtle);
    border: 1px solid var(--vs-border);
    text-decoration: none;
    white-space: nowrap;
}

.carcat-vs-tab:hover,
.carcat-vs-tab:first-child {
    background: var(--vs-navy);
    color: #ffffff;
    border-color: var(--vs-navy);
}

.carcat-vs-description {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--vs-subtle);
    margin-bottom: 20px;
}

/* Spec sections — every row shares the SAME background (explicit
   instruction: no alternating zebra stripe like the mockup used) */
.carcat-vs-section {
    background: #ffffff;
    border: 1px solid #d7e1f2;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
}

.carcat-vs-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--vs-card);
    padding: 12px 14px;
    border-bottom: 1px solid var(--vs-border);
}

.carcat-vs-section-dot {
    display: inline-block;
    width: 8px;
    height: 16px;
    border-radius: 4px;
    background: var(--vs-subtle);
    flex-shrink: 0;
}

.carcat-vs-section-title { font-size: 0.9rem; font-weight: 800; color: var(--vs-navy); }

.carcat-vs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    background: var(--vs-row-bg);
    border-bottom: 1px solid var(--vs-border);
    font-size: 0.85rem;
}

.carcat-vs-row:last-child { border-bottom: none; }

/* On mobile the row is narrow enough that space-between reads fine; on
   desktop the same full-bleed row is much wider and space-between pushes
   the value far away from its label. A capped-but-variable label width
   made every row's value start at a different point (jagged, hard to
   scan), so the label column is now a FIXED width — every value in a
   section lines up under the one above it, while staying close to its
   label rather than stretching to the far edge. */
@media (min-width: 768px) {
    .carcat-vs-row {
        justify-content: flex-start;
        gap: 16px;
    }

    .carcat-vs-row-label { flex: 0 0 260px; }
    .carcat-vs-row-value { flex: 0 0 auto; }
}

.carcat-vs-row-label { color: var(--vs-subtle); font-weight: 400; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Hebrew", sans-serif; }
.carcat-vs-row-value { color: var(--vs-navy); font-weight: 800; text-align: left; }

.carcat-vs-bool-yes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--vs-benefit);
    font-weight: 800;
}

.carcat-vs-bool-yes svg { width: 20px; height: 20px; }

.carcat-vs-bool-no {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--vs-muted);
    font-weight: 700;
}

.carcat-vs-bool-no svg { width: 20px; height: 20px; }

.carcat-vs-download-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--vs-blue);
    color: #fff;
}

.carcat-vs-download-icon svg { width: 15px; height: 15px; }
.carcat-vs-download-icon:hover { background: var(--vs-navy); color: #fff; }

/* =======================================================================
   Home page (view=home) — redesigned Sep 2026 per "catalog homepage"/
   code.html (an "Alexandria" editorial mockup — Material-tokens Tailwind,
   originally Noto Serif headline / Inter body / Public Sans labels;
   the Noto Serif headline treatment was later dropped catalog-wide in
   favor of the plain Inter/Heebo body font, primary blue
   #094cb2). Following the pattern already established for every other
   page redesign this project: each redesigned page gets its OWN token
   block copied from its own mockup's real palette rather than being
   folded into an existing design language (window-sticker / Stormy /
   make-page navy) — .carcat-home overrides the shared window-sticker
   tokens it inherits from the top-of-file block, scoped to itself only.
   All new classes prefixed .carcat-ch- (car-catalog home).

   The results page (view=results, reached from the homepage's filter
   modal) shares this same token set and font stack rather than getting
   its own palette — it's a direct continuation of the homepage's
   search/filter flow, not a separate design moment.

   The compare-models page (view=comparemodels, "השוואת רכבים") also
   plugs into this token set (.carcat-comparemodels below) — but unlike
   results, it keeps ALL of its existing markup/classes (the ice-blue
   "Stormy" .carcat-compare / navy .carcat-model component CSS), just
   with the --cc-* semantic tokens those components already read from
   remapped to the ch-* palette (see .carcat-comparemodels further down,
   after .carcat-model). This recolors the whole page without having to
   rewrite every one of its many component rules individually. The
   single-model trim-comparison page (view=compare) still shares the
   same markup/classes but is deliberately NOT in scope here — its
   redesign is a separate, later task — so it keeps the old ice-blue/
   navy tokens untouched.
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Public+Sans:wght@500;600;700&display=swap');

.carcat-home, .carcat-results, .carcat-comparemodels, .carcat-ch-tools, #carcatToolsModal, .carcat-sh-row, .carcat-sf-wrap {
    --ch-primary: #094cb2;
    --ch-on-primary: #ffffff;
    --ch-primary-tint: #ebeff8;
    --ch-surface: #faf9fa;
    --ch-surface-container-lowest: #ffffff;
    --ch-surface-container-low: #f5f3f4;
    --ch-surface-container: #efedee;
    --ch-surface-container-high: #e9e8e9;
    --ch-on-surface: #1b1c1d;
    --ch-on-surface-variant: #434653;
    --ch-outline-variant: #c3c6d5;
    --ch-secondary-container: #dfe3e8;

    font-family: 'Inter', 'Heebo', system-ui, sans-serif;
    color: var(--ch-on-surface);
}

/* Only the full-page wrappers get an opaque page background — .carcat-ch-tools
   and #carcatToolsModal are placed INSIDE other pages (via mod_carcatalog_tools)
   and must stay transparent there, or they paint over whatever's behind them
   on the host page. They still need the --ch-* variables above (for their own
   descendants like .carcat-ch-tool-card / .carcat-ch-tools-modal-content),
   just not this page-level background/color. */
.carcat-home, .carcat-results, .carcat-comparemodels {
    background: var(--ch-surface-container-lowest);
}

/* =======================================================================
   Compare-models page (view=comparemodels) — the ch-* palette remap
   below applies ONLY to the "pick" stages (pick_models / pick_trims,
   the model/trim-selection screens before the comparison itself), which
   the template marks with an extra .carcat-cm-modern class on the root
   element. The "result" stage (the actual head-to-head comparison) is
   NOT in scope for this remap and deliberately keeps the original
   "Stormy"/navy ice-blue design that .carcat-compare/.carcat-model
   already define — same as the untouched single-model compare page
   (view=compare).
   ======================================================================= */

.carcat-comparemodels.carcat-cm-modern {
    --cc-navy: var(--ch-on-surface);
    --cc-slate: var(--ch-on-surface-variant);
    --cc-sky: var(--ch-primary);
    --cc-ice: var(--ch-outline-variant);
    --cc-ice-light: var(--ch-primary-tint);
    --cc-ice-bg: var(--ch-surface);
    --cc-card: var(--ch-surface-container-lowest);
    --cc-text: var(--ch-on-surface);
    --cc-muted: var(--ch-on-surface-variant);
    --cc-border: var(--ch-outline-variant);
    --cc-border-rgb: 195, 198, 213;
    --cc-primary: var(--ch-primary);
    --cc-radius: 16px;
    --cc-shadow: 0 1px 2px 0 rgba(27, 28, 29, 0.06);
    --cc-subtle: var(--ch-on-surface-variant);

    font-family: 'Inter', 'Heebo', system-ui, sans-serif;
    background: var(--ch-surface-container-lowest);
    color: var(--ch-on-surface);
}

.carcat-comparemodels.carcat-cm-modern h1,
.carcat-comparemodels.carcat-cm-modern h2,
.carcat-comparemodels.carcat-cm-modern h3 { font-family: 'Inter', 'Heebo', system-ui, sans-serif; }

/* =======================================================================
   Compare-models page — "pick_trims" stage rebuild, matching the
   comper-models-v11.html / v13.png reference mockup precisely (per the
   Alexandria brief in comper-models-v12.md). Reference literals not
   already covered by an existing --ch-* token get their own --cc-*
   tokens here (panel border/bg tint, muted text, side-B indigo accent)
   rather than being hardcoded inline.
   ======================================================================= */

.carcat-comparemodels.carcat-cm-modern {
    --cc-panel-bg: var(--ch-primary-tint);
    --cc-panel-border: #d8dee9;
    --cc-text-muted: #728096;
    --cc-side-a: var(--ch-primary);
    --cc-side-a-hover: #073e91;
    --cc-side-b: #4f46e5;
    --cc-side-b-tint: #eef0fe;
    --cc-side-b-border: #c7caf6;
}

/* Page header */
.carcat-cm-header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--cc-panel-bg);
    border: 1px solid var(--cc-panel-border);
    border-radius: 20px;
    padding: 20px 24px;
    box-shadow: var(--cc-shadow);
}

.carcat-cm-header-gradient {
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 6px;
}

.carcat-cm-header-main { display: flex; align-items: center; gap: 14px; }

.carcat-cm-header-icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(9, 76, 178, 0.1);
    border: 1px solid rgba(9, 76, 178, 0.2);
    color: var(--ch-primary);
    display: flex; align-items: center; justify-content: center;
}

.carcat-cm-header-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ch-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(9, 76, 178, 0.1);
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 6px;
}

.carcat-cm-header h1 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ch-on-surface);
    margin: 0;
}

@media (min-width: 768px) {
    .carcat-cm-header h1 { font-size: 2rem; }
}

.carcat-cm-header-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--ch-on-surface-variant);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--cc-panel-border);
    padding: 6px 12px;
    border-radius: 10px;
}

.carcat-cm-header-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; flex-shrink: 0; }

@media (max-width: 639.98px) {
    .carcat-cm-header { padding: 14px 16px; gap: 8px; flex-wrap: nowrap; }
    .carcat-cm-header-main { gap: 10px; min-width: 0; }
    .carcat-cm-header-icon { width: 38px; height: 38px; border-radius: 11px; }
    .carcat-cm-header-icon svg { width: 20px; height: 20px; }
    .carcat-cm-header-eyebrow { font-size: 0.62rem; padding: 1px 8px; margin-bottom: 3px; }
    .carcat-cm-header h1 { font-size: 1.15rem; }
    .carcat-cm-header-chip { font-size: 0.68rem; padding: 5px 8px; gap: 4px; white-space: nowrap; flex-shrink: 0; }
}

/* Step section head (shared by step 1 + step 2) */
.carcat-cm-step-section { display: flex; flex-direction: column; gap: 16px; }

.carcat-cm-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px;
}

.carcat-cm-step-head-title { display: flex; align-items: center; gap: 10px; }

.carcat-cm-step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--ch-primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--cc-shadow);
}

.carcat-cm-step-head-title h2 { font-size: 1rem; font-weight: 700; color: var(--ch-on-surface); margin: 0; }

@media (min-width: 768px) {
    .carcat-cm-step-head-title h2 { font-size: 1.1rem; }
}

.carcat-cm-step-hint { font-size: 0.78rem; color: var(--cc-text-muted); }

/* Step 1 — overview cards */
/* Overview cards stay side-by-side (2 columns) at EVERY width, including
   phones — matching comper-models-v21.html/v23.png, which keeps its two
   model cards in a 2-col grid even on mobile instead of stacking them
   full-width. The phone-only media query further down shrinks padding,
   type and spacing so the pair still fits comfortably narrow. */
.carcat-cm-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.carcat-cm-overview-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--cc-panel-bg);
    border: 1px solid var(--cc-panel-border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--cc-shadow);
    transition: box-shadow 0.15s ease;
}

.carcat-cm-overview-card:hover { box-shadow: 0 4px 14px 0 rgba(27, 28, 29, 0.09); }

.carcat-cm-overview-card-bar { position: absolute; top: 0; right: 0; left: 0; height: 5px; }

.carcat-cm-overview-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }

.carcat-cm-side-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.74rem; font-weight: 700;
    color: var(--cc-side-a);
    background: rgba(9, 76, 178, 0.1);
    border: 1px solid rgba(9, 76, 178, 0.2);
    padding: 4px 10px;
    border-radius: 8px;
}

.carcat-cm-side-b .carcat-cm-side-badge {
    color: var(--cc-side-b);
    background: var(--cc-side-b-tint);
    border-color: var(--cc-side-b-border);
}

.carcat-cm-bodytype-badge {
    font-size: 0.74rem; font-weight: 600;
    color: var(--ch-on-surface-variant);
    background: var(--ch-surface-container-lowest);
    border: 1px solid var(--cc-panel-border);
    padding: 4px 9px;
    border-radius: 8px;
}

/* Phone-only plain-text counterpart to .carcat-cm-bodytype-badge — the
   reference mockup drops the bordered chip on mobile and instead prints
   the body-type as a plain muted line of its own, between the badge row
   and the model name. Hidden by default; swapped in by the phone media
   query below (which also hides the desktop chip). */
.carcat-cm-bodytype-text {
    display: none;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--cc-text-muted);
    margin: -8px 0 6px;
}

.carcat-cm-overview-name {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ch-on-surface);
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .carcat-cm-overview-name { font-size: 1.7rem; }
}

.carcat-cm-price-box {
    background: var(--ch-surface-container-lowest);
    border: 1px solid rgba(216, 222, 233, 0.8);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.carcat-cm-price-label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--cc-text-muted); margin-bottom: 4px; }

.carcat-cm-price-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }

.carcat-cm-price-main { font-size: 1.2rem; font-weight: 800; color: var(--ch-primary); }
.carcat-cm-side-b .carcat-cm-price-main { color: var(--cc-side-b); }

.carcat-cm-price-sep { color: var(--cc-text-muted); font-size: 0.85rem; }
.carcat-cm-price-secondary { font-size: 0.95rem; font-weight: 700; color: var(--ch-on-surface-variant); }

@media (min-width: 768px) {
    .carcat-cm-price-main { font-size: 1.35rem; }
}

.carcat-cm-spec-rows { display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; }

.carcat-cm-spec-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(216, 222, 233, 0.6);
    border-radius: 10px;
    padding: 9px 12px;
}

.carcat-cm-spec-row-label { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ch-on-surface-variant); }
.carcat-cm-spec-row-label svg { flex-shrink: 0; color: var(--cc-side-a); }
.carcat-cm-side-b .carcat-cm-spec-row-label svg { color: var(--cc-side-b); }
.carcat-cm-spec-row-label.carcat-cm-spec-icon-fuel svg { color: #059669; }
.carcat-cm-spec-row-label.carcat-cm-spec-icon-electric svg { color: #2563eb; }

.carcat-cm-spec-row-value { font-weight: 700; color: var(--ch-on-surface); text-align: left; }

/* =======================================================================
   Phone-only (<640px) tightening for the pick_trims overview cards —
   matches comper-models-v21.html/v23.png: cards stay 2-up but shrink
   padding/type, the body-type chip becomes a plain text line, and the
   price box + spec rows switch from same-line to stacked layout.
   ======================================================================= */
@media (max-width: 639.98px) {
    .carcat-cm-overview-grid { gap: 10px; }

    .carcat-cm-overview-card { padding: 14px; border-radius: 16px; }

    .carcat-cm-overview-card-badges { margin-bottom: 6px; }

    .carcat-cm-bodytype-badge { display: none; }
    .carcat-cm-bodytype-text { display: block; }

    .carcat-cm-overview-name { font-size: 1.15rem; margin-bottom: 10px; }

    .carcat-cm-price-box { padding: 10px 12px; margin-bottom: 12px; text-align: center; }
    .carcat-cm-price-value { flex-direction: column; align-items: center; gap: 1px; }
    .carcat-cm-price-sep { display: none; }
    .carcat-cm-price-main { font-size: 0.95rem; }
    .carcat-cm-price-secondary { font-size: 0.76rem; }

    .carcat-cm-spec-rows { gap: 6px; font-size: 0.76rem; }
    .carcat-cm-spec-row { flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 10px; }
    .carcat-cm-spec-row-value { text-align: right; width: 100%; }
}

/* Step 2 — variant selection */
.carcat-cm-variant-section {
    position: relative;
    overflow: hidden;
    background: var(--cc-panel-bg);
    border: 1px solid var(--cc-panel-border);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--cc-shadow);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.carcat-cm-variant-head {
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(216, 222, 233, 0.7);
}

.carcat-cm-variant-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }

@media (min-width: 768px) {
    .carcat-cm-variant-grid { grid-template-columns: 1fr 1fr; }
}

.carcat-cm-variant-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }

.carcat-cm-variant-label { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 700; color: var(--ch-on-surface); }

.carcat-cm-variant-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc-side-a); flex-shrink: 0; }
.carcat-cm-variant-dot.carcat-cm-side-b { background: var(--cc-side-b); }

.carcat-cm-variant-count { font-size: 0.74rem; color: var(--cc-text-muted); white-space: nowrap; }

.carcat-cm-variant-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(216, 222, 233, 0.6);
}

@media (min-width: 640px) {
    .carcat-cm-variant-footer { flex-direction: row; align-items: center; }
}

.carcat-cm-variant-footer-hint { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--ch-on-surface-variant); }
.carcat-cm-variant-footer-hint svg { flex-shrink: 0; color: var(--ch-primary); }

/* Selects — same treatment as the homepage "Tools" modal's make/model
   dropdowns (.carcat-ch-tools-select): no separate chevron box, just an
   inline SVG arrow on the select's own background. Used for both the
   make/model pickers (pick_models) and the variant pickers (pick_trims,
   step 2), on both desktop and mobile — this replaces the boxed-chevron
   treatment an earlier pass copied from the reference mockup's own
   dropdown, per direct instruction to match the Tools modal instead. */
.carcat-cm-select-wrap { position: relative; }

.carcat-cm-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    background: var(--ch-surface-container-low) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23434653' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat left 12px center;
    border: 1px solid var(--ch-outline-variant);
    border-radius: 14px;
    padding: 12px 14px 12px 40px;
    font-family: 'Inter', 'Heebo', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ch-on-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.carcat-cm-select:hover { border-color: var(--ch-primary); }
.carcat-cm-select:focus { outline: none; border-color: var(--ch-primary); background-color: var(--ch-surface-container-lowest); }

.carcat-cm-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--ch-primary);
    color: #fff;
    font-size: 0.94rem;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    padding: 13px 24px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    box-shadow: var(--cc-shadow);
}

.carcat-cm-cta-btn:hover { background: var(--cc-side-a-hover); }
.carcat-cm-cta-btn:active { transform: scale(0.99); }

@media (min-width: 640px) {
    .carcat-cm-cta-btn { width: auto; min-width: 320px; }
}

/* Hero + search */

.carcat-ch-hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 0px 16px;
    background: var(--ch-surface-container-lowest);
}

.carcat-ch-status-pill {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    background: rgba(223, 227, 232, 0.5);
    padding: 5px 12px;
    border-radius: 999px;
    font-family: 'Public Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ch-on-surface-variant);
}

.carcat-ch-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ch-primary);
    animation: carcat-ch-pulse 2s ease-in-out infinite;
}

@keyframes carcat-ch-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.carcat-ch-title { font-size: 1.7rem; font-weight: 700; line-height: 1.2; margin: 0; }
.carcat-ch-subtitle { font-size: 0.88rem; line-height: 1.5; color: var(--ch-on-surface-variant); margin: 0; }

/* Results page title — a filter icon pinned to the row's opposite
   edge from the title (space-between, not just a small gap next to
   it), same treatment as the homepage tool cards' .carcat-ch-tool-icon
   but with the light ice-blue tint used elsewhere for icon chips
   instead of that card's tinted surface, since this one sits directly
   on the page background rather than inside a tinted card. It's a real
   <button> (opens #carcatFilterModal, the same filter modal the
   homepage uses) rather than a decorative span, hence the button
   resets below. */
.carcat-results-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.carcat-results-title-icon {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: none;
    border-radius: 10px;
    background: #eceff8;
    color: var(--ch-primary);
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
}

@media (min-width: 768px) {
    .carcat-ch-title { font-size: 2.3rem; }
    .carcat-ch-subtitle { font-size: 1rem; }
}

.carcat-ch-search {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--ch-primary-tint);
    border-radius: 14px;
    padding: 6px;
    position: relative;
    transition: background-color 0.15s ease;
}

.carcat-ch-search:focus-within { background: var(--ch-surface-container); }

.carcat-ch-search-icon-btn, .carcat-ch-search-filter-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border: none; border-radius: 10px;
    background: transparent;
    color: var(--ch-on-surface-variant);
    padding: 0;
}

.carcat-ch-search-filter-btn { background: var(--ch-primary-tint); }
.carcat-ch-search-icon-btn:hover, .carcat-ch-search-filter-btn:hover { color: var(--ch-primary); }
.carcat-ch-search-icon-btn:active, .carcat-ch-search-filter-btn:active { transform: scale(0.95); }

.carcat-ch-search-input {
    flex: 1; min-width: 0;
    background: transparent;
    border: none; outline: none; box-shadow: none;
    font-size: 0.95rem;
    color: var(--ch-on-surface);
    font-family: inherit;
}

.carcat-ch-search-input::placeholder { color: var(--ch-outline-variant); }

.carcat-ch-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0; left: 0;
    background: var(--ch-surface-container-lowest);
    border: 1px solid var(--ch-outline-variant);
    border-radius: 12px;
    max-height: 320px; overflow-y: auto;
    padding: 4px;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(27, 28, 29, 0.12);
}

.carcat-ch-search-results .list-group-item {
    border: none; border-radius: 8px !important;
    padding: 10px 12px;
    font-size: 0.9rem;
    color: var(--ch-on-surface);
}

.carcat-ch-search-results .list-group-item:hover { background: var(--ch-surface-container-low); }
.carcat-ch-search-results .list-group-item small { display: block; color: var(--ch-on-surface-variant); opacity: 1; font-size: 0.72rem; margin-top: 1px; }

.carcat-ch-chips {
    display: flex; align-items: center; gap: 8px;
    overflow-x: auto; padding-bottom: 2px;
    font-family: 'Public Sans', sans-serif;
}

.carcat-ch-chips::-webkit-scrollbar { display: none; }

.carcat-ch-chip {
    flex-shrink: 0;
    padding: 7px 16px;
    border-radius: 999px;
    border: none;
    background: var(--ch-surface-container);
    color: var(--ch-on-surface-variant);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.carcat-ch-chip.is-active { background: var(--ch-primary); color: var(--ch-on-primary); font-weight: 700; }

/* Tools banner */

.carcat-ch-tools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px 0px;
}

.carcat-ch-tool-card {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 14px 8px;
    border-radius: 14px;
    border: 1px solid rgba(195, 198, 213, 0.4);
    background: var(--ch-primary-tint);
    color: inherit;
    text-decoration: none;
}

.carcat-ch-tool-card:hover { border-color: var(--ch-primary); }
.carcat-ch-tool-card:active { transform: scale(0.97); }

.carcat-ch-tool-card--primary {
    background: var(--ch-primary);
    color: var(--ch-on-primary);
    border-color: var(--ch-primary);
}

.carcat-ch-tool-card--placeholder { opacity: 0.9; }

.carcat-ch-tool-badge {
    position: absolute; top: 6px; left: 6px;
    background: rgba(27, 28, 29, 0.75);
    color: #fff;
    font-family: 'Public Sans', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
}

.carcat-ch-tool-icon {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--ch-surface-container-lowest);
    color: var(--ch-primary);
}

.carcat-ch-tool-card--primary .carcat-ch-tool-icon { background: rgba(255, 255, 255, 0.15); color: var(--ch-on-primary); }

.carcat-ch-tool-text { display: flex; flex-direction: column; gap: 2px; }
.carcat-ch-tool-text strong { font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
.carcat-ch-tool-text small { font-family: 'Public Sans', sans-serif; font-size: 0.62rem; color: var(--ch-on-surface-variant); }
.carcat-ch-tool-card--primary .carcat-ch-tool-text small { color: rgba(255, 255, 255, 0.8); }

/* Make picker (dropdown) that sits above/alongside the tools banner —
   catalog homepage's own instance (tmpl/catalog.php) and the site
   homepage's instance (mod_carcatalog_tools tmpl/sitehome.php) both use
   this same wrapper + the shared .carcat-ch-tools-label /
   .carcat-ch-tools-select classes below, so the two stay visually
   identical by construction instead of two copies drifting apart. */
.carcat-ch-make-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}

/* Inside .carcat-sh-row (site-homepage "tools row"), mobile (<768px):
   the picker is still a real flex row on its own line (row 1 of the
   two-row mobile layout — see the .tools/.tselecta rules in the site
   template's user.css), so it grows/shrinks to fill that line next to
   its two fixed-size buttons and still fits a narrow phone (e.g. iPhone
   SE, 375px) without overflowing. Harmless where .carcat-ch-make-picker
   isn't inside a flex row (the catalog homepage's own instance) since
   flex-* properties only take effect on an actual flex item. */
.carcat-sh-row .carcat-ch-make-picker {
    flex: 1 1 auto;
    min-width: 120px;
}

/* Site-homepage instance (per reference mockup) shows just the pill
   itself, no label row above it — the label stays in the markup for
   screen readers only. */
.carcat-ch-make-picker--label-hidden .carcat-ch-tools-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =======================================================================
   Site homepage "tools row" — mod_carcatalog_tools' and
   mod_carcatalog_filter's "sitehome" layouts. Per the reference mockup:
   plain icon buttons with a small bordered frame around the icon and a
   label underneath (no card background at all), sitting next to the
   make-picker dropdown above (.carcat-ch-make-picker, styled identically
   to the catalog homepage's own dropdown via the shared classes there).
   ======================================================================= */

.carcat-sh-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    gap: 24px;
}

.carcat-sh-buttons, .carcat-sf-wrap {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* Desktop (>=768px): .tselecta/.carcat-sh-row/.carcat-sh-buttons all
   become display:contents (site template's user.css unwraps .tselecta;
   the two rules right below unwrap the rest), so the picker and every
   button/tools-i icon become direct flex siblings of .tools itself,
   evenly spread by .tools' own justify-content:space-between. Letting
   the picker keep growing in that context stretched it to an
   excessive width (it absorbed the entire row's leftover space, since
   nothing else was left to grow) — pinned to a fixed, comfortable
   width instead so it reads as one item among equals, not a bar that
   swallows the row.
   IMPORTANT: this block must come AFTER the plain .carcat-sh-row /
   .carcat-sh-buttons rules above — CSS gives source order the final
   say between two same-specificity rules, media query or not, so a
   media-query block placed BEFORE the plain rules it's meant to
   override loses to them at any width, silently no-op'ing exactly this
   fix (this bit us once already: it shipped in the wrong order). */
@media (min-width: 768px) {
    .carcat-sh-row {
        display: contents;
    }

    .carcat-sh-buttons {
        display: contents;
    }

    .carcat-sh-row .carcat-ch-make-picker {
        flex: 0 0 auto;
        width: 220px;
    }
}

.carcat-sh-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 76px;
    text-align: center;
    color: inherit;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.carcat-sh-btn:hover, .carcat-sh-btn:focus-visible { color: inherit; text-decoration: none; }

.carcat-sh-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid var(--ch-outline-variant);
    background: #ecedf1;
    color: var(--ch-on-surface-variant);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.carcat-sh-btn:hover .carcat-sh-btn-icon,
.carcat-sh-btn:focus-visible .carcat-sh-btn-icon {
    border-color: var(--ch-primary);
    color: var(--ch-primary);
}

.carcat-sh-btn-label {
    font-family: 'Inter', 'Heebo', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.76rem;
    line-height: 1.25;
    color: var(--ch-on-surface);
}

.carcat-sh-btn-badge {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ch-primary);
    color: var(--ch-on-primary);
    font-family: 'Public Sans', sans-serif;
    font-size: 0.52rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Brands grid */

.carcat-ch-brands { padding: 8px 0px 24px; display: flex; flex-direction: column; gap: 14px; }

.carcat-ch-filter-open-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(195, 198, 213, 0.4);
    border-radius: 12px;
    background: var(--ch-primary-tint);
    color: var(--ch-primary);
    font-weight: 700;
    font-size: 0.9rem;
}

.carcat-ch-filter-open-btn:active { transform: scale(0.98); }

.carcat-ch-brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (min-width: 576px) {
    .carcat-ch-brands-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) {
    .carcat-ch-brands-grid { grid-template-columns: repeat(6, 1fr); }
}

.carcat-ch-brand-card {
    display: flex; flex-direction: column;
    align-items: center; justify-content: space-between;
    text-align: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(195, 198, 213, 0.4);
    background: var(--ch-primary-tint);
    text-decoration: none;
    color: inherit;
}

.carcat-ch-brand-card:hover { border-color: var(--ch-primary); }
.carcat-ch-brand-card:active { transform: scale(0.97); }

.carcat-ch-brand-logo { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.carcat-ch-brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.carcat-ch-brand-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ch-surface-container-lowest);
    color: var(--ch-primary);
    font-weight: 700;
    font-size: 1rem;
}

.carcat-ch-brand-name { font-size: 0.78rem; font-weight: 700; color: var(--ch-on-surface); line-height: 1.15; }

.carcat-ch-brand-count {
    font-family: 'Public Sans', sans-serif;
    font-size: 0.62rem; font-weight: 600;
    color: var(--ch-on-surface-variant);
    background: var(--ch-surface-container-lowest);
    padding: 2px 8px; border-radius: 999px;
}

.carcat-ch-empty { color: var(--ch-on-surface-variant); text-align: center; padding: 24px 0; }

/* =======================================================================
   Results page (view=results) — card-grid redesign, 2026-10-01, from the
   "filterpage" mockup (code.html/screen.png): sticky header with a
   result-count badge and removable applied-filter chips, a 2-column
   image-card grid (replacing the old plain list rows), and a fixed
   footer with a single "edit filters" button (deliberately no reset
   button — see the project conversation that approved this design).
   Still uses the homepage's shared --ch-* tokens/fonts (see .carcat-home,
   .carcat-results above) — this is a new LAYOUT, not a new palette, and
   per the project's "apply a new design to one page first, then ask
   about the rest of the site" rule it is scoped to .carcat-rc-* classes
   used only on this page (the shared .carcat-catalog-breadcrumb/
   .carcat-catalog-back-btn classes it also uses are the same ones every
   other catalog page already renders, left untouched here).
   ======================================================================= */

.carcat-results.carcat-rc {
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
}

/* Plain, non-sticky breadcrumb row — deliberately OUTSIDE
   .carcat-rc-header (which is the part that goes sticky below), so it
   only costs space once on first load and scrolls away normally
   instead of eating room from every scrolled screen. Reuses the exact
   same .carcat-catalog-breadcrumb/.carcat-catalog-back-btn classes (and
   their shared >=992px hide rule) every other catalog page already
   has — just with a bit of this page's own padding. */
.carcat-rc-breadcrumb {
    /* margin-top (not padding) because this IS the breadcrumb nav
       itself (not a separate wrapper) — a flex container with
       align-items: center, so padding-top only re-centers its own
       content instead of moving the box down; margin-top is what
       actually pushes it further from the site header, matching
       .carcat-mk-breadcrumb/.carcat-mp-breadcrumb's own margin-top:
       10px (verified: all three now sit the same distance from the
       header on mobile). */
    margin: 10px 0 0;
    padding: 0 16px;
}

.carcat-rc-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 16px 10px;
    border-bottom: 1px solid var(--ch-outline-variant);
}

.carcat-rc-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.carcat-rc-title {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--ch-on-surface);
    letter-spacing: -0.01em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carcat-rc-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.carcat-rc-count-badge {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ch-primary);
    background: var(--ch-primary-tint);
    border: 1px solid rgba(9, 76, 178, 0.12);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* The filter-edit entry point now lives inline in the sticky header
   (not a fixed footer — see the file comment in default.php for why)
   so it's reachable on any scroll position at any viewport width. */
.carcat-rc-filter-btn {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: var(--ch-on-surface);
    color: #ffffff;
    padding: 0;
}

.carcat-rc-filter-btn svg { width: 18px; height: 18px; }
.carcat-rc-filter-btn:active { opacity: 0.85; }

.carcat-rc-filter-btn-count {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--ch-primary);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.carcat-rc-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-top: 10px;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.carcat-rc-chips::-webkit-scrollbar { display: none; }

.carcat-rc-chip {
    flex-shrink: 0;
}

.carcat-rc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ch-on-surface);
    background: var(--ch-primary-tint);
    border: 1px solid var(--ch-outline-variant);
    padding: 6px 10px;
    border-radius: 10px;
}

.carcat-rc-chip-remove {
    display: flex;
    color: var(--ch-on-surface-variant);
    flex-shrink: 0;
}

.carcat-rc-chip-remove svg { width: 12px; height: 12px; }
.carcat-rc-chip-remove:hover { color: var(--ch-on-surface); }

.carcat-rc-body { padding: 14px 16px 0; }

.carcat-rc-empty { color: var(--ch-on-surface-variant); text-align: center; padding: 40px 0; }

.carcat-rc-group { margin-bottom: 28px; }

.carcat-rc-group-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--ch-outline-variant);
}

.carcat-rc-group-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ch-on-surface);
    margin: 0;
}

.carcat-rc-group-sort {
    font-size: 0.72rem;
    color: var(--ch-on-surface-variant);
}

.carcat-rc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.carcat-rc-card {
    display: flex;
    flex-direction: column;
    background: var(--ch-primary-tint);
    border-radius: 14px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease;
    /* A flex item (and, since this is also a .carcat-rc-grid item, a
       grid item) defaults to min-width:auto — it refuses to shrink
       below its CONTENT's intrinsic width, no matter what the child
       .carcat-rc-card-name's own white-space:nowrap + ellipsis asks
       for. A long, unbreakable model name (e.g. a make+model name that
       itself contains a long Latin run) was winning that fight: it
       widened this card's grid column past the card's own share of
       the row, pushing .carcat-rc-grid wider than the viewport on
       mobile instead of being truncated. min-width:0 opts this card
       back into shrinking to the grid track's actual width, which is
       what makes the ellipsis rule below able to do its job at all. */
    min-width: 0;
}

.carcat-rc-card:active { transform: scale(0.97); }

.carcat-rc-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    padding: 8px 0;
}

.carcat-rc-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.carcat-rc-card-image-fallback {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ch-outline-variant);
}

.carcat-rc-card-image-fallback svg { width: 100%; height: 100%; }

.carcat-rc-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 6px;
}

.carcat-rc-card-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ch-on-surface);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carcat-rc-card-price {
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--ch-primary);
    margin-top: 3px;
}

.carcat-rc-card-metric {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    font-family: 'Public Sans', sans-serif;
    font-size: 0.68rem;
    color: var(--ch-on-surface-variant);
}

.carcat-rc-card-metric svg { width: 12px; height: 12px; flex-shrink: 0; }

.carcat-rc-show-more-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; margin-top: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(195, 198, 213, 0.4);
    border-radius: 12px;
    background: var(--ch-primary-tint);
    color: var(--ch-primary);
    font-weight: 700; font-size: 0.85rem;
}

.carcat-rc-show-more-btn:hover { border-color: var(--ch-primary); }
.carcat-rc-show-more-btn:disabled { opacity: 0.6; }

@media (min-width: 640px) {
    .carcat-rc-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
    .carcat-rc-grid { grid-template-columns: repeat(4, 1fr); }
}

/* =======================================================================
   Homepage "Tools" modal — compare models / compare trims / AI advisor,
   opened by all three homepage tool cards, switching between them via
   the mini-tab bar without closing. Large radius + borderless per spec;
   .modal-dialog-scrollable keeps the header/tabbar/footer pinned while
   only the body scrolls (needed once the advisor tab grows longer).
   ======================================================================= */

.carcat-ch-tools-modal-dialog { max-width: 560px; }

.carcat-ch-tools-modal-content {
    /* !important: the live template's own modal CSS declares a
       border-radius on .modal-content that otherwise wins the cascade
       over this same-specificity rule. */
    border: 20px solid var(--ch-surface-container-low);
    border-radius: 15px !important;
    overflow: hidden;
    background: var(--ch-surface-container-lowest);
    box-shadow: 0 20px 60px rgba(27, 28, 29, 0.22);
}

.carcat-ch-tools-modal-header {
    border-bottom: 1px solid var(--ch-outline-variant);
    padding: 18px 20px 14px;
}

.carcat-ch-tools-modal-header .modal-title {
    font-family: 'Inter', 'Heebo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ch-on-surface);
}

.carcat-ch-tools-tabbar {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    background: var(--ch-surface-container-low);
    border-bottom: 1px solid var(--ch-outline-variant);
}

.carcat-ch-tools-tab {
    flex: 1;
    border: 1px solid var(--ch-outline-variant);
    background: var(--ch-surface-container-lowest);
    color: var(--ch-on-surface-variant);
    font-family: 'Inter', 'Heebo', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.76rem;
    padding: 7px 10px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.carcat-ch-tools-tab:hover:not(.is-active) { border-color: var(--ch-primary); color: var(--ch-primary); }

.carcat-ch-tools-tab.is-active {
    border-color: var(--ch-primary);
    background: var(--ch-primary);
    color: var(--ch-on-primary);
}

.carcat-ch-tools-modal-body {
    padding: 22px 20px;
}

.carcat-ch-tools-pane { display: none; }
.carcat-ch-tools-pane.is-active { display: block; }

.carcat-ch-tools-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 420px) {
    .carcat-ch-tools-two-col { grid-template-columns: 1fr; }
}

.carcat-ch-tools-label {
    display: block;
    font-family: 'Inter', 'Heebo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--ch-on-surface);
    margin-bottom: 6px;
}

/* The "modern" dropdown look, same treatment as the compare-models sticky
   trim switcher: no native chrome, custom caret, pill-ish surface. */
.carcat-ch-tools-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    background: var(--ch-surface-container-low) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23434653' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat left 12px center;
    border: 1px solid var(--ch-outline-variant);
    border-radius: 14px;
    padding: 12px 14px 12px 40px;
    font-family: 'Inter', 'Heebo', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ch-on-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.carcat-ch-tools-select:hover { border-color: var(--ch-primary); }
.carcat-ch-tools-select:focus { outline: none; border-color: var(--ch-primary); background-color: var(--ch-surface-container-lowest); }

/* Site-homepage instance only (per the "sh" tools row) — the catalog
   homepage's own dropdown keeps its original background since the two
   share .carcat-ch-tools-select by design (see the comment above
   .carcat-ch-make-picker). Overrides background-color only, not the
   `background` shorthand, so the caret icon/position are untouched. */
.carcat-sh-row .carcat-ch-tools-select { background-color: #ecedf1; }
.carcat-sh-row .carcat-ch-tools-select:focus { background-color: #ecedf1; }

.carcat-ch-tools-error {
    color: #c0362c;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 12px 0 0;
}

.carcat-ch-tools-pane--advisor {
    text-align: center;
    padding: 20px 8px 8px;
}

.carcat-ch-tools-pane--advisor .carcat-ch-tool-badge {
    position: static;
    display: inline-block;
    margin-bottom: 12px;
}

.carcat-ch-tools-advisor-title {
    font-family: 'Inter', 'Heebo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ch-on-surface);
    margin: 0 0 8px;
}

.carcat-ch-tools-advisor-body {
    font-size: 0.85rem;
    color: var(--ch-on-surface-variant);
    line-height: 1.6;
    margin: 0;
}

.carcat-ch-tools-modal-footer {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--ch-outline-variant);
    background: var(--ch-surface-container-lowest);
}

.carcat-ch-tools-confirm-btn,
.carcat-ch-tools-reset-btn {
    border: none;
    border-radius: 999px;
    padding: 13px 18px;
    font-family: 'Inter', 'Heebo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.carcat-ch-tools-confirm-btn {
    flex: 2;
    background: var(--ch-primary);
    color: var(--ch-on-primary);
}

.carcat-ch-tools-confirm-btn:hover:not(:disabled) { background: #073e8c; }

.carcat-ch-tools-reset-btn {
    flex: 1;
    background: var(--ch-surface-container-low);
    color: var(--ch-on-surface-variant);
}

.carcat-ch-tools-reset-btn:hover:not(:disabled) { background: var(--ch-surface-container); }

.carcat-ch-tools-confirm-btn:disabled,
.carcat-ch-tools-reset-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .carcat-ch-tools-modal-content { border-width: 10px; border-radius: 0; }
    .carcat-ch-tools-modal-header { padding: 14px 16px 10px; }
    .carcat-ch-tools-tabbar { padding: 10px 12px; }
    .carcat-ch-tools-modal-body { padding: 18px 16px; }
    .carcat-ch-tools-modal-footer { padding: 12px 16px 16px; }
}

/* =======================================================================
   Print styles — compare/default.php (trim comparison) and
   comparemodels/default.php (model comparison). Both pages get a
   .carcat-print-btn (see above) that calls window.print(); this block is
   what makes the resulting printout/"Save as PDF" actually usable:
   1) browsers strip background colors from print output by default
      unless told otherwise — print-color-adjust: exact keeps ours;
   2) .carcat-cum-row (the cascade "what each trim adds" cards) is a
      horizontal-scroll strip below the 768px breakpoint — printing only
      captures what was visible on screen, cutting cards off, so force
      the desktop stacked layout here regardless of the viewport the
      visitor is actually printing from;
   3) break-inside: avoid keeps a single card from being split across a
      page boundary;
   4) everything OUTSIDE .carcat-model (the site template's own header,
      footer, nav, sidebars, etc. — none of it ours, and we don't know
      its markup) is hidden via the visibility trick below rather than
      display:none, so we don't have to know or guess at the surrounding
      template's structure — it works regardless of what wraps our
      component's output. .carcat-model is the shared root wrapper used
      by the model page too (site/tmpl/model/default.php), so this same
      isolation benefits printing that page as well, not just these two.
   ======================================================================= */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body * { visibility: hidden; }

    .carcat-model,
    .carcat-model * {
        visibility: visible;
    }

    .carcat-model {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .carcat-print-btn { display: none !important; }

    /* The toggle button and its collapsed panel are a screen-only
       interaction convenience — on paper everyone should just see
       everything, so hide the button and force the panel open
       regardless of its `hidden` attribute/aria-expanded state. */
    .carcat-dims-toggle { display: none !important; }
    .carcat-dims-others { display: flex !important; }

    .carcat-cum-row {
        flex-direction: column !important;
        overflow-x: visible !important;
        padding-bottom: 0 !important;
    }

    .carcat-compare-diff-card { flex: 1 1 auto !important; }

    .carcat-compare-card,
    .carcat-compare-diff-card,
    .carcat-compare-header-card,
    .carcat-dims-item,
    .carcat-dims-other-row,
    .carcat-overview-card,
    .carcat-row-table-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* Ad/module positions (home, make, model, variant, comparemodels — see
   ModulePositionHelper) — plain spacing so whatever a site admin drops
   in there (an ad, a banner module, anything) doesn't sit flush against
   the surrounding page content. Only renders at all when something is
   actually assigned to the position. */
.carcat-module-position { margin: 20px 0; }
.carcat-module-position:empty { display: none; }

.carcat-module-position--cathomefilter,
.carcat-module-position--cathometools {
    margin: 0;
}

/* ------------------------------------------------------------------
   2026-10-03: CTA buttons hidden pending the lead-collection decision
   (waiting on partners re: the full lead mechanism / AI car-advisor
   project — see claude/tasks-frontend-tools-and-homepage.md, section 7).
   The underlying rules above are left untouched so this is easy to
   revert once a decision is made — just delete this block.
   - Make page: the whole bottom CTA area (currently only the
     "schedule a test drive" placeholder button, which goes nowhere).
   - Model page: all three bottom CTA links (test drive placeholder,
     "compare models", "compare trims") — the disclaimer paragraph in
     the same container (.carcat-mp-disclaimer) stays visible.
   ------------------------------------------------------------------ */
.carcat-mk-cta {
    display: none;
}

.carcat-mp-cta-primary,
.carcat-mp-cta-secondary {
    display: none;
}