/* ======================================================================
 * VIN Inventory — Styles
 * ====================================================================== */

/* Archive listing wrapper (plugin's template takeover). The theme adds a top gap
   via `.product-listing.page-section-ptb.default { padding-top:60px }` (0,3,0);
   drop the TOP so the widget sits flush like the shortcode section pages. Our
   marker class is added to beat that specificity (0,4,0) without !important, and
   scopes the override to our own section so the theme's other .page-section-ptb
   sections are untouched. Bottom padding is left to the theme. */
.vin-listing-section.product-listing.page-section-ptb.default {
    padding-top: 0;
}

/* ─── Container ─────────────────────────────────────────────────────── */
#vin-inventory-app {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    color: #333;
    max-width: 1400px;
    margin: 0 auto;
    /* No top padding on desktop — the widget sits flush under the page chrome.
       Mobile keeps a top gap (see the <=992px block below).
       No horizontal padding: the parent Visual Composer column-inner already
       supplies 15px gutters, and .vin-layout reclaims the full Bootstrap row
       width below so cards match the theme's make/model archive sizing. */
    padding: 0 0 40px;
}

@media (max-width: 992px) {
    #vin-inventory-app {
        padding: 50px 16px 30px;
    }
}

/* Banner-bearing section Page: the New Cars page (WP Page id 44424,
   /new-vehicles/) renders a WPBakery lease-deal images carousel in its own
   vc_row ABOVE the widget. relocateBanner() (JS) moves that carousel into the
   top of `.vin-main`; the rule below gives it breathing room. (Desktop no
   longer adds a top gap on the container itself — see #vin-inventory-app.) */
/* The promotional lease banner (WPBakery images carousel) is page content the
   page renders in its own vc_row ABOVE our widget — i.e. full-width above BOTH
   the filter sidebar and the car cards. The old site instead placed it at the
   TOP of the car-cards column, aligned with the filters. relocateBanner() in
   the JS moves that carousel's vc_row into the top of `.vin-main`; the rule
   below gives the relocated banner breathing room above the sort/count row and
   strips the stray VC row/column gutters so it lines up flush with the cards. */
.vin-main > .vin-relocated-banner {
    margin: 0 0 18px !important;
    padding: 0 !important;
}
.vin-main > .vin-relocated-banner .vc_column-inner,
.vin-main > .vin-relocated-banner .wpb_column,
.vin-main > .vin-relocated-banner .wpb_wrapper {
    padding: 0 !important;
    margin: 0 !important;
}

/* Lease-deal images carousel (WPBakery) on the New Cars page (id 44424).
   The theme's Visual Composer carousel JS never initializes on our local
   mirror / when JS is deferred, so it never (a) lays the 3 slides out
   horizontally into a single visible slide nor (b) un-hides the items.
   Result on local: the slide items keep the VC default `visibility:hidden`
   and stack VERTICALLY (3 × 150px = 450px) inside `.vc_carousel-inner`,
   overflowing their 140px `.vc_slide` band and painting on top of the cards,
   so the banner dominates the whole section instead of just pushing the
   cards down.

   Fix (CSS-only, no theme edits, no JS dependency, PROD-SAFE): clamp the
   carousel viewport to one ~150px slide and clip the overflow. `overflow:hidden`
   + `max-height` alone clips the un-initialized vertical stack down to just the
   first slide — no `display:none` needed. That matters because on PRODUCTION
   the VC carousel JS DOES run and cycles all 3 lease banners; `display:none`
   on the extra slides would permanently kill slides 2/3 and stop the rotation.
   Using `max-height` (not a hard `height`) + `overflow:hidden` is carousel-
   friendly: an initialized carousel still sizes/scrolls itself within the clamp.
   Scoped to the page id so no other VC carousel site-wide is affected. */
body.page-id-44424 .wpb_images_carousel .vc_carousel-inner,
body.page-id-44424 .wpb_images_carousel .vc_carousel-slideline,
body.page-id-44424 .wpb_images_carousel .vc_carousel-slideline-inner {
    max-height: 150px !important;
    overflow: hidden !important;
}

/* Reveal the slides. Locally the VC JS never un-hides them (they ship
   `visibility:hidden`); on prod the JS also reveals them, so this is a no-op
   there. Combined with the clamp above, the un-initialized vertical stack is
   clipped to just the first slide locally. */
body.page-id-44424 .wpb_images_carousel .vc_carousel-slideline-inner > .vc_item {
    visibility: visible !important;
}

/* ─── Two-column layout (sidebar filters + results) ─────────────────── */
/* Negative side margins pull the layout out to the full Bootstrap row width
   (1170px on desktop, matching the theme's .row inside the VC column), so the
   25% sidebar + 75% results reproduce the theme make/model archive's 878px
   content column and the cards render at their intended ~267px width. */
/* FLOAT-based two-column split, matching the theme's own Bootstrap .row/.col
   layout (25% sidebar + 75% results). On first paint .vin-main holds the theme's
   FLOATED Bootstrap .row/.col-* cards. Both flex (`flex:1 1 0`) and CSS grid
   (`minmax(0,1fr)`) render this correctly in Blink but WebKit/Safari mis-sizes a
   flex/grid item that wraps floated content — the results column collapses and
   the cards get shoved right. Plain floats with percentage widths are what the
   theme's (Safari-verified) archive uses, so we mirror that. box-sizing:border-box
   is set globally by the theme, so the 15px gutter padding sits inside the width. */
.vin-layout {
    padding-top: 22px;
    margin-left: -15px;
    margin-right: -15px;
}

/* clearfix — contain the floated columns */
.vin-layout::after {
    content: "";
    display: block;
    clear: both;
}

.vin-sidebar {
    float: left;
    width: 25%;
    padding-left: 15px;
    padding-right: 15px;
}

.vin-main {
    float: left;
    width: 75%;
    padding-left: 15px;
    padding-right: 15px;
}

.vin-sidebar-title {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #222;
    margin: 0 0 4px;
    padding-bottom: 8px;
}

/* Funnel icon before the "Filter / Search" heading. */
.vin-sidebar-title__icon {
    vertical-align: middle;
    margin-right: 7px;
    margin-top: -2px;
    color: #c8102e; /* matches the heading's red underline accent */
}

/* Red underline accent, matching the cardealer sidebar headings. */
.vin-sidebar-title::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #c8102e;
    margin-top: 8px;
}

/* ─── Filter Sidebar ────────────────────────────────────────────────── */
.vin-filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vin-filter-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
}

.vin-filter-group label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin-bottom: 4px;
}

.vin-filter-group select {
    height: 32px; /* match the input controls (search/price/range) exactly */
    padding: 4px 28px 4px 10px; /* trimmed vertically so line-height fits inside 32px */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4; /* room for g/p/y descenders (native select clips them otherwise) */
    background: #fff;
    color: #333;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.vin-filter-group select:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

/* Unset state: a select showing its empty "All …/Add …" option renders in the
   same grey as the <input> placeholders below, so an unset dropdown and an unset
   text field match. A real selection (empty option not checked) stays dark #333.
   :has() is widely supported; where it isn't, selects simply stay #333. */
.vin-filter-group select:has(option[value=""]:checked) {
    color: #999;
}

/* Keep the opened option list readable regardless of the control's grey default. */
.vin-filter-group select option {
    color: #333;
}

/* Normalize input placeholders to the same grey (browser defaults vary). */
.vin-filter-group input::placeholder {
    color: #999;
    opacity: 1;
}

/* Price range: two numeric inputs sitting inline in one filter group, matching
   the height/border styling of the select dropdowns. */
.vin-price-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vin-price-range input[type="number"] {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    height: 32px; /* match the <select> rendered height exactly (overrides taller theme input default) */
    background: #fff;
    color: #333;
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Hide the native number spinners for a clean, compact control. */
.vin-price-range input[type="number"]::-webkit-outer-spin-button,
.vin-price-range input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.vin-price-range input[type="number"]:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

.vin-price-sep {
    color: #999;
    flex: 0 0 auto;
}

/* Year range: two selects inline in one "Year" group. */
.vin-year-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vin-year-range select {
    width: 100%;
    min-width: 0;
}

.vin-year-sep {
    color: #999;
    flex: 0 0 auto;
}

/* Free-text search box (first filter). Matches the select/input height + border. */
.vin-filter-group--search input[type="search"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    height: 32px; /* match the <select> rendered height exactly (overrides taller theme input default) */
    background: #fff;
    color: #333;
    appearance: none;
    -webkit-appearance: none;
}

.vin-filter-group--search input[type="search"]:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

/* Generic numeric min/max range (Mileage, Fuel Economy) — same layout as price. */
.vin-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vin-range input[type="number"] {
    width: 100%;
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    height: 32px; /* match the <select> rendered height exactly (overrides taller theme input default) */
    background: #fff;
    color: #333;
    appearance: textfield;
    -moz-appearance: textfield;
}

.vin-range input[type="number"]::-webkit-outer-spin-button,
.vin-range input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.vin-range input[type="number"]:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

.vin-range-sep {
    color: #999;
    flex: 0 0 auto;
}

/* Multi-select chips: removable tags shown ABOVE the dropdown. One chip per
   selected value (never grouped). */
.vin-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.vin-chips:empty {
    display: none;
}

.vin-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 4px 3px 9px;
    /* Black chip with the Nissan Brand typeface to match the old website's
       branding (copyright/brand requirement). "Nissan Brand" is loaded by the
       child theme (@font-face in cardealer-child/css/custom.css). */
    background: #000;
    color: #fff;
    border-radius: 14px;
    font-family: "Nissan Brand", Roboto, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.4;
}

.vin-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vin-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

.vin-chip__remove:hover,
.vin-chip__remove:focus {
    background: rgba(255, 255, 255, 0.45);
    outline: none;
}

.vin-filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.vin-btn-clear {
    width: 100%;
    padding: 11px 16px;
    border: none;
    border-radius: 3px;
    /* Matches the old page's "Update Search Results" price-filter button (#db2d2e). */
    background: #db2d2e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

/* "Show N Matches" apply button: MOBILE-ONLY. On desktop filtering is live, so it
   stays hidden; the mobile overlay (below) reveals + styles it. */
.vin-btn-show {
    display: none;
}

/* While the mobile filter overlay is open, lock page scroll. The overlay itself is
   opaque + max z-index; any fixed/sticky page chrome that could still paint above it
   (chat widget, "Special Offers" CTA bar, etc.) is hidden selector-agnostically by
   JS (lockPageChrome) and restored on close. */
body.vin-filters-locked {
    overflow: hidden;
}
/* Hide the floating page chrome that paints above the overlay, whenever it's open.
   These mirror the theme's own `.modal-open` hide rule (cardealer-child custom.css):
   the dealmatic chat is the bare custom element <bdcai-chat>, and the mobile
   "Special Offers / Get Pre-Approved / Trade-In" bar is the div that wraps the
   Trade-In link. CSS applies continuously, so late-injected / re-shown widgets are
   covered too (the one-time JS sweep in lockPageChrome can miss those). */
body.vin-filters-locked bdcai-chat,
body.vin-filters-locked bdcai-chat-button,
body.vin-filters-locked bdcai-chat-widget,
body.vin-filters-locked [id*="bdcai"],
body.vin-filters-locked [class*="bdcai"],
body.vin-filters-locked div:has(a[data-label="Trade-In"]) {
    display: none !important;
}

.vin-btn-clear:hover {
    background: #b71c1c;
}

/* ─── Results Header ────────────────────────────────────────────────── */
.vin-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 30px;
    font-size: 14px;
    color: #666;
}

.vin-results-count {
    font-weight: 600;
    color: #db2d2e; /* theme accent red (matches the theme's "Vehicles Matching" count) */
}

.vin-sort-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    /* Sit at the right edge of the cards content width, like the old listing header. */
    justify-content: flex-end;
    flex: 0 0 auto;
    /* "Show:" + per-page + "Sort by:" + sort + toggle can be a lot on narrow
       widths — let them wrap instead of overflowing the header. */
    flex-wrap: wrap;
}

/* "Show:" and "Sort by:" each bundled with their control so mobile can wrap the
   two bundles onto separate rows (see the responsive block). */
.vin-perpage-group,
.vin-sort-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Keep the "Sort by:" / "Show:" labels on a single line. */
.vin-sort-label,
.vin-perpage-label {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Cars-per-page select: narrower than the sort select — it only holds a number. */
.vin-perpage-select {
    min-width: 64px !important;
    max-width: 80px !important;
}

/* Sort-by select: compact, content-sized — NOT stretched to fill. Overrides the
   theme's global `select { min-width: 100% }` which otherwise blows it out past
   the cards width. */
.vin-sort-controls select,
.vin-sort-select {
    width: auto;
    min-width: 130px;
    max-width: 180px;
    flex: 0 0 auto;
    height: 32px; /* match the filter controls (32px) */
    padding: 4px 28px 4px 10px; /* trimmed vertically so text fits inside 32px */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* Sort-direction icon toggle (mirrors the theme's #pgs_cars_order arrow control). */
.vin-sort-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Match the adjacent "Sort by" <select> / filter controls (32px) so the icon
       button and dropdown sit flush; kept square + compact. */
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #444;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vin-sort-order:hover,
.vin-sort-order:focus {
    background: #c8102e;
    border-color: #c8102e;
    color: #fff;
    outline: none;
}

.vin-sort-order i {
    line-height: 1;
}

/* ─── Card Grid ─────────────────────────────────────────────────────── */
/* Column counts mirror the cardealer listing grid (col-lg-4 col-md-4 col-sm-4
   col-xs-6 with a left sidebar): 3 columns from desktop down to 768px, then
   2 columns below 768px. */
.vin-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
    list-style: none;
    margin: 0;
    transition: opacity 0.15s ease;
}

/* ─── SSR hydration grid ─────────────────────────────────────────────
   On first paint the cards container holds the server-rendered THEME cards
   (.car-item.card-proposed wrapped in their Bootstrap .row/.col-* layout,
   identical to the make/model/trim archives). Drop the JS widget's CSS-grid
   so the theme's own row/column layout drives them. The class is removed once
   the JS repaints with .vin-card markup on the first user interaction. */
.vin-cards.vin-cards--ssr {
    display: block;
    gap: 0;
}

/* Most of the SSR card grid comes from the THEME's own listing CSS, engaged by
   wrapping the cards in the theme's exact ancestor chain (see vininv_render_ssr_html):
   `.cdhl_vehicles-listing_wrapper` > `.vehicle-listing-wrapper.vehicle-listing-view-grid`
   > `.row.vehicle-listing-main`. That gives us `height:100%` on the card and the
   30px row gap for free.
   The ONE rule below is the exception: the theme's flex-column rule
   (`.vehicle-listing-view-grid [class*="col-"] > .car-item`) exists on prod but is
   MISSING from this (older) local CarDealer CSS, so we supply it. With it, the
   card is a flex column and the theme's height:100% + `.car-footer{margin-top:auto}`
   pin the deal banner to the bottom, leaving the equal-height slack under the VIN. */
.vin-cards--ssr [class*="col-"] > .car-item {
    display: flex;
    flex-direction: column;
}

.vin-cards--ssr .car-item .car-footer {
    margin-top: auto;
}

/* NOTE: The car CARD itself is NOT styled here. Cards are rendered by the theme
 * template (template-parts/cars/layout/grid-view.php, .car-item.card-proposed)
 * in every context — SSR, archives, and the JS repaint — and styled by the
 * child theme's CSS. This plugin only styles the FILTER SIDEBAR + the results
 * shell (grid container, sort header, pagination). See docs/CARD-LAYOUT.md. */

/* ─── Pagination ────────────────────────────────────────────────────── */
.vin-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 30px 0;
    flex-wrap: wrap;
}

.vin-pagination button {
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vin-pagination button:hover:not(:disabled):not(.active) {
    background: #f0f0f0;
    border-color: #bbb;
}

.vin-pagination button.active {
    /* Old site's pagination active page is #db2d2e (page-numbers current). */
    background: #db2d2e;
    color: #fff;
    border-color: #db2d2e;
    font-weight: 600;
}

.vin-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vin-pagination__ellipsis {
    padding: 8px 6px;
    color: #999;
}

/* ─── Loading Skeleton ──────────────────────────────────────────────── */
.vin-skeleton {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.vin-skeleton__image {
    width: 100%;
    aspect-ratio: 430 / 321;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: vin-shimmer 1.5s infinite;
}

.vin-skeleton__content {
    padding: 16px;
}

.vin-skeleton__line {
    height: 14px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: vin-shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}

.vin-skeleton__line--title {
    height: 20px;
    width: 80%;
}

.vin-skeleton__line--price {
    height: 24px;
    width: 40%;
}

.vin-skeleton__line--specs {
    width: 90%;
}

.vin-skeleton__line--btn {
    height: 36px;
    width: 50%;
    margin-top: 4px;
}

@keyframes vin-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── No results ────────────────────────────────────────────────────── */
.vin-no-results {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.vin-no-results h3 {
    font-size: 20px;
    margin: 0 0 8px;
    color: #333;
}

.vin-no-results p {
    font-size: 15px;
    margin: 0;
}

/* ─── Error ─────────────────────────────────────────────────────────── */
.vin-error {
    text-align: center;
    padding: 40px 20px;
    color: #c62828;
    background: #fce4ec;
    border-radius: 8px;
    margin: 20px 0;
}

/* Mobile filter "hamburger" toggle. Hidden on desktop — the sidebar filters are
   always visible there; shown (and driving a collapse) only once the sidebar
   stacks at <=992px (see the responsive block below). */
.vin-filter-toggle {
    display: none;
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    /* Show the toggle as a full-width bar and collapse the filters behind it so
       the car cards are visible first (matches the old site's mobile behaviour).
       The filters reveal when the sidebar gains .is-filters-open (bindEvents). */
    .vin-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px 14px;
        border: none; /* borderless per design; toggle reads as a plain header bar */
        background: #fff;
        color: #db2d2e; /* match the "X vehicles found" accent red */
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 1.5; /* let the glyphs sit optically centred, not hugging the top */
        cursor: pointer;
    }

    .vin-filter-toggle__icon {
        flex: 0 0 auto;
    }

    /* Collapsed by default on mobile: only the toggle bar shows. Both the filters
       and the actions footer stay hidden until the overlay opens. */
    .vin-sidebar > .vin-filters,
    .vin-sidebar > .vin-filter-actions {
        display: none;
    }

    /* OPEN = full-screen overlay above ALL page chrome. Column layout:
       toggle bar (header) + scrolling filters + pinned Clear/Show footer.
       Cards stay hidden behind the opaque overlay + body scroll-lock until the
       user taps Show or the Filter/Search bar again. */
    .vin-sidebar.is-filters-open {
        position: fixed;
        inset: 0;
        z-index: 2147483647; /* max int — above the chat widget + offers banner */
        margin: 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* the filters child scrolls, not the whole overlay */
    }
    .vin-sidebar.is-filters-open > .vin-filter-toggle {
        flex: 0 0 auto;
        border-bottom: 1px solid #e6e6e6;
    }
    .vin-sidebar.is-filters-open > .vin-filters {
        display: flex;
        /* Force a single vertical column inside the overlay. Without this, the
           577-992px "tablet" rule (.vin-filters { flex-direction:row; wrap }) makes
           the groups run off-screen in one horizontal line instead of stacking. */
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;            /* let the flex child actually scroll */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 14px 16px 16px;
    }
    /* Each filter group spans the full overlay width (drop the tablet 220px cap). */
    .vin-sidebar.is-filters-open > .vin-filters > .vin-filter-group {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
    }
    .vin-sidebar.is-filters-open > .vin-filter-actions {
        display: flex;
        flex: 0 0 auto;
        gap: 10px;
        margin: 0;
        padding: 12px 16px;
        background: #fff;
        border-top: 1px solid #e6e6e6;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    }
    .vin-sidebar.is-filters-open .vin-btn-clear,
    .vin-sidebar.is-filters-open .vin-btn-show {
        display: inline-block;
        flex: 1 1 50%;
        width: auto;
    }
    /* Show button on mobile: mirrors Clear's shape, distinct dark fill. */
    .vin-sidebar.is-filters-open .vin-btn-show {
        padding: 11px 16px;
        border: none;
        border-radius: 3px;
        background: #111;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    /* The toggle button is the section header on mobile — drop the redundant
       "CARS SEARCH" heading inside the panel. */
    .vin-sidebar-title {
        display: none;
    }

    /* Stack the filter sidebar above the results. Drop the desktop negative
       side margins (the app regains its 16px padding here) so nothing bleeds
       past the container edge on the wrapped/stacked layout. */
    .vin-layout {
        margin-left: 0;
        margin-right: 0;
    }

    /* Unfloat both columns so they stack full-width. */
    .vin-sidebar,
    .vin-main {
        float: none;
        width: 100%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .vin-sidebar {
        margin-bottom: 6px;
    }

    /* Filters return to a wrapped row when full-width. Bottom-align so every
       <select> sits on a shared baseline regardless of whether a chips row sits
       above it (make/model/trim) — keeps the dropdown controls in a clean line. */
    .vin-filters {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 12px;
    }

    /* Heading takes its own full-width line so Year/Make/Model start on a new
       row beneath it (otherwise it shares the wrapped filter row). */
    .vin-sidebar-title {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .vin-filter-group {
        flex: 1 1 160px;
        max-width: 220px;
    }

    /* With align-items:flex-end on the row, each group's bottom edge aligns. The
       <select> is the last child in every group (chips sit ABOVE it), so all the
       dropdown controls share one baseline regardless of chips above some of them. */

    .vin-filter-actions {
        flex-basis: 100%;
    }

    .vin-btn-clear {
        width: auto;
    }

    /* 3 columns persists down to 768px (matches the theme's col-sm-4). */
    .vin-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* Below 768px the theme drops to 2 columns (col-xs-6). */
@media (max-width: 767px) {
    .vin-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 576px) {
    #vin-inventory-app {
        padding: 0 10px;
    }

    /* Stack the filters as a clean vertical list with comfortable spacing
       (the tablet row-wrap layout collapses to one-per-row here anyway). */
    .vin-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .vin-filter-group {
        flex: 1 1 100%;
        max-width: none;
    }

    /* Results header on mobile: a SINGLE row —
       "X vehicles found"  ............  "Sort by: [select] [order]".
       The per-page ("Show: N") control is hidden on mobile (state.per_page keeps
       its default), which frees the row so count + sort sit together.
       display:contents flattens .vin-sort-controls so the sort group becomes a
       direct flex item of the header. */
    .vin-results-header {
        flex-wrap: nowrap;
        align-items: center;
    }
    .vin-sort-controls {
        display: contents;
    }
    .vin-perpage-group {
        display: none; /* hide the 12/36 per-page selector on mobile */
    }
    .vin-results-count {
        flex: 1 1 auto; /* count takes the left, pushing sort to the right */
    }
    .vin-sort-group {
        flex: 0 0 auto; /* sit on the same row, right-aligned */
        justify-content: flex-end;
    }
    /* The words "Sort by" move into the dropdown itself here (see
       applySortByLabel in vin-inventory.js), so drop the standalone label. */
    .vin-sort-label {
        display: none;
    }
}