/*
 * Site overrides that are NOT part of the copied Laravel assets.
 *
 * Kept in its own file so public/assets/css/style.css, responsive.css,
 * responsive-ss.css and style-ss.css stay byte-identical to the old repo and
 * can be re-copied at any time without losing these.
 *
 * Loaded last in src/app/layout.tsx.
 */

/*
 * The my-account form carries Bootstrap's `was-validated` class (it does in the
 * original Blade too), which paints a green tick over every valid field. On a
 * <select> that tick is drawn exactly where the site's own dropdown arrow goes,
 * leaving two icons stacked on top of each other.
 *
 * This codebase already contained the fix — _variables.css has the same rule for
 * .form-control, with the .form-select variant commented out — but that file is
 * linked by neither the old header nor this layout. Restored here for selects,
 * putting the site's dropdown arrow back.
 */
.was-validated .form-select:valid,
.was-validated .form-select:invalid,
.form-select.is-valid,
.form-select.is-invalid {
    background-image: url(../img/icons/dropdown.png) !important;
    background-size: 13px 9px !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    padding-right: 2.25rem !important;
}


/* ============================================================
 * MODERN DROPDOWNS
 *
 * select2 ships a dated default skin — square corners, hairline grey
 * borders and a #5897fb blue highlight that belongs to no palette on
 * this site. This restyles it, and the plain native <select>s sitting
 * next to it in the same form, into one consistent control built on
 * the brand orange (--primary-color: #ff600a).
 *
 * Purely cosmetic: no ids, names or markup change, so the cascading
 * make/model/variant AJAX in public/assets/js/search-widget.js is
 * untouched.
 * ============================================================ */

:root {
    --dd-radius: 10px;
    --dd-border: #e3e6eb;
    --dd-border-hover: #c9ced6;
    --dd-text: #1f2328;
    --dd-muted: #8b9199;
    --dd-tint: rgba(255, 96, 10, .10);
    --dd-ring: rgba(255, 96, 10, .18);
    --dd-shadow: 0 12px 32px rgba(16, 20, 26, .13);
}

/* ---------- native <select> ---------- */

form.bmc-form:not(.bmc-form-subscribe) select.form-control,
form.bmc-form:not(.bmc-form-subscribe) select.form-select,
.vehicle-form select.form-control,
.vehicle-form select.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    /* Chevron inlined as a data URI so it costs no extra request and can be
       recoloured per state without shipping more images. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b9199' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px !important;
    border: 1px solid var(--dd-border) !important;
    border-radius: var(--dd-radius) !important;
    color: var(--dd-text);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

form.bmc-form:not(.bmc-form-subscribe) select.form-control:hover,
form.bmc-form:not(.bmc-form-subscribe) select.form-select:hover,
.vehicle-form select.form-control:hover,
.vehicle-form select.form-select:hover {
    border-color: var(--dd-border-hover) !important;
}

form.bmc-form:not(.bmc-form-subscribe) select.form-control:focus,
form.bmc-form:not(.bmc-form-subscribe) select.form-select:focus,
.vehicle-form select.form-control:focus,
.vehicle-form select.form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--dd-ring) !important;
    outline: 0;
}

/* Text inputs in the same row, so the form reads as one set of controls. */
form.bmc-form:not(.bmc-form-subscribe) input.form-control {
    border: 1px solid var(--dd-border) !important;
    border-radius: var(--dd-radius) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

form.bmc-form:not(.bmc-form-subscribe) input.form-control:hover { border-color: var(--dd-border-hover) !important; }

form.bmc-form:not(.bmc-form-subscribe) input.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--dd-ring) !important;
    outline: 0;
}

/* ---------- select2: the closed control ---------- */

.select2-container--default .select2-selection--single {
    height: var(--main-search-input) !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: var(--dd-radius) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: var(--main-search-input) !important;
    line-height: calc(var(--main-search-input) - 2px) !important;
    border: 1px solid var(--dd-border) !important;
    border-radius: var(--dd-radius) !important;
    padding-left: 14px;
    padding-right: 38px;
    color: var(--dd-text) !important;
    font-weight: 600;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.select2-container--default .select2-selection--single:hover .select2-selection__rendered {
    border-color: var(--dd-border-hover) !important;
}

/* Open — control and panel read as one object. */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--dd-ring);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-selection__placeholder {
    color: var(--dd-muted) !important;
    font-weight: 500;
}

/* ---------- select2: the arrow ---------- */

/* select2 draws its arrow as a CSS border-triangle. Replaced with a chevron
   that rotates and turns orange while the panel is open. */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: var(--main-search-input) !important;
    width: 38px;
    right: 1px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: 0 !important;
    width: 12px;
    height: 12px;
    margin: 0 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(0deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b9199' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform .18s ease;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: translate(-50%, -50%) rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ff600a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ---------- select2: the dropdown panel ---------- */

/*
 * THE HORIZONTAL SCROLLBAR FIX.
 *
 * select2 renders TWO elements with class `select2-container`: the inline one
 * that replaces the <select>, and a second one appended to <body> that holds
 * the open dropdown. _variables.css sets
 *
 *     .select2-container { width: 100% !important; }
 *
 * for the inline one — but it hits the body-level one too, and `!important`
 * beats the pixel width select2 sets inline. So every time a dropdown opened it
 * became as wide as the whole page while still positioned at its field's left
 * offset, pushing far past the right edge and giving the window a horizontal
 * scrollbar.
 *
 * Only the dropdown container is ever a direct child of <body>, which makes it
 * safe to hand that one back to select2's own measurement.
 */
body > .select2-container {
    width: auto !important;
    max-width: 100vw;
}

/*
 * The same fix for the compose modal.
 *
 * Its dropdowns are initialised with `dropdownParent: $('#modal-compose-message')`
 * — they have to be, or Bootstrap's modal stacking context hides the panel
 * behind the dialog and traps focus away from its search box. That makes the
 * panel container a direct child of the modal instead of of <body>, so the rule
 * above no longer catches it and style.css:575's
 * `.select2-container { width: 100% !important }` stretches the open panel to
 * the full modal width instead of the field it belongs to.
 *
 * Only the panel is ever a direct child of the modal; the inline containers
 * that replace the <select>s sit inside the form and still want 100%.
 */
#modal-compose-message > .select2-container {
    width: auto !important;
}

/* ============================================================
 * The /web/search filter bar's chevron.
 *
 * style.css:3448 rotates it with `.bmc-sticky-search-wrapper.is-open`, but
 * nothing has ever set `is-open` — there is no JS for it anywhere in
 * public/assets/js. Bootstrap's collapse already maintains `aria-expanded` on
 * the trigger, so the arrow is keyed off that instead and needs no script.
 * ============================================================ */
.bmc-sticky-search-header[aria-expanded='true'] .bmc-sticky-search-arrow {
    transform: rotate(180deg);
}

/* ============================================================
 * HEADER MENU — the current page.
 *
 * style.css:221-237 styles .bmc-web-menu three ways: normal, :hover and
 * :active. None of them is `.active`.
 *
 *   .nav-link:active   CSS pseudo-class — only while the mouse is held down
 *   .nav-link.active   Bootstrap's class — "this is the current page"
 *
 * Only the first was ever written, so marking a link current had no visible
 * effect. (:hover paints the same colour the link already has, so the menu
 * gives no feedback at all.) Both are given one here.
 *
 * The underline is drawn on a pseudo-element rather than with border-bottom so
 * it does not add height and shift the row when it appears.
 * ============================================================ */
.bmc-web-menu .nav-item .nav-link {
    position: relative;
    transition: color .15s ease;
}

.bmc-web-menu .nav-item .nav-link:hover {
    color: var(--primary-color);
}

.bmc-web-menu .nav-item .nav-link.active {
    color: var(--primary-color);
    font-weight: 700;
}

.bmc-web-menu .nav-item .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-color);
}

.select2-container--default .select2-dropdown {
    border: 1px solid var(--dd-border);
    border-radius: 12px;
    box-shadow: var(--dd-shadow);
    overflow: hidden;
    padding: 6px;
    background: #fff;
}

/* The panel is detached from the control, so both open directions keep the
   full radius rather than select2's squared-off joining edge. */
.select2-container--default .select2-dropdown--below { margin-top: 6px; border-radius: 12px; }
.select2-container--default .select2-dropdown--above { margin-bottom: 6px; border-radius: 12px; }

/* ---------- select2: search box inside the panel ---------- */

.select2-container--default .select2-search--dropdown { padding: 4px 4px 8px; }

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--dd-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    outline: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--dd-ring);
}

/* ---------- select2: the options ---------- */

.select2-container--default .select2-results > .select2-results__options {
    max-height: 260px;
    /* A thin scrollbar so a long make list does not dominate the panel. */
    scrollbar-width: thin;
    scrollbar-color: #d5d9df transparent;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar { width: 8px; }
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background: #d5d9df;
    border-radius: 8px;
}

.select2-container--default .select2-results__option {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dd-text);
    transition: background-color .12s ease, color .12s ease;
}

/* Hover / keyboard highlight — this was select2's default blue. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--dd-tint) !important;
    color: var(--primary-color) !important;
}

/* The value currently chosen. */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    font-weight: 600;
}

.select2-container--default .select2-results__option[role="group"] { padding: 0; }

.select2-container--default .select2-results__message {
    color: var(--dd-muted);
    font-size: 13px;
}

.select2-container--default .select2-selection--single .select2-selection__clear { color: var(--dd-muted); }
.select2-container--default .select2-search--inline .select2-search__field { outline: 0; }

/* ------------------------------------------------------------
 * One radius for every control in the search form.
 *
 * _variables.css carries a MORE specific rule —
 *   .bmc-form .select2-container--default … .select2-selection__rendered
 *   { border-radius: 4px !important; border: 1px solid #00000021 !important; }
 * — which outranked the generic select2 styling above. The result was a form
 * where the Post Code input had 10px corners and every dropdown next to it had
 * 4px. These re-state the same selectors so the whole row matches.
 * ------------------------------------------------------------ */

.bmc-form .select2-container .select2-selection--single,
form.bmc-form:not(.bmc-form-subscribe) .select2-container .select2-selection--single {
    border-radius: var(--dd-radius) !important;
}

.bmc-form .select2-container--default .select2-selection--single .select2-selection__rendered,
form.bmc-form:not(.bmc-form-subscribe) .select2-container--default .select2-selection--single .select2-selection__rendered {
    border-radius: var(--dd-radius) !important;
    border: 1px solid var(--dd-border) !important;
    line-height: calc(var(--main-search-input) - 2px) !important;
}

.bmc-form .select2-container--default .select2-selection--single:hover .select2-selection__rendered,
form.bmc-form:not(.bmc-form-subscribe) .select2-container--default .select2-selection--single:hover .select2-selection__rendered {
    border-color: var(--dd-border-hover) !important;
}

.bmc-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered,
form.bmc-form:not(.bmc-form-subscribe) .select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered {
    border-color: var(--primary-color) !important;
}

/* Every remaining control in the form — inputs, textareas and any select that
   has not been handed to select2 — on the same radius. */
form.bmc-form:not(.bmc-form-subscribe) .form-control,
form.bmc-form:not(.bmc-form-subscribe) .form-select,
form.bmc-form:not(.bmc-form-subscribe) input,
form.bmc-form:not(.bmc-form-subscribe) textarea,
form.bmc-form:not(.bmc-form-subscribe) select {
    border-radius: var(--dd-radius) !important;
}


/* ============================================================
 * SEARCH PAGE — vertical filter sidebar
 *
 * The filter used to be a full-width sticky bar above the results that
 * collapsed open and shut. It is now a column down the left, with the
 * results grid beside it.
 * ============================================================ */

.bmc-filter-sidebar {
    background: #fff;
    border: 1px solid var(--dd-border);
    border-radius: 14px;
    overflow: hidden;
    /* Follows the results while they scroll, without covering the header. */
    position: sticky;
    top: 130px;
}

.bmc-filter-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--dd-border);
    background: #fafbfc;
}

.bmc-filter-sidebar-head h6 {
    font-size: 15px;
    font-weight: 700;
    color: var(--dd-text);
}

.bmc-filter-sidebar-head h6 i { color: var(--primary-color); }

.bmc-filter-toggle {
    border: 1px solid var(--dd-border);
    border-radius: 8px;
    background: #fff;
    color: var(--dd-text);
    line-height: 1;
    padding: 6px 10px;
}

.bmc-filter-toggle i { transition: transform .2s ease; }

/* Bootstrap flips aria-expanded on the button itself, so the chevron can be
   turned from CSS with no extra JavaScript. */
.bmc-filter-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.bmc-filter-sidebar-body {
    padding: 16px;
    /* A long filter list scrolls inside the card rather than pushing the
       sticky column taller than the viewport. */
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d5d9df transparent;
}

.bmc-filter-sidebar-body::-webkit-scrollbar { width: 8px; }
.bmc-filter-sidebar-body::-webkit-scrollbar-thumb { background: #d5d9df; border-radius: 8px; }

.bmc-filter-sidebar-body .containerSearch-Div { padding: 0; }

/*
 * FLATTEN THE INNER CARD.
 *
 * The widget wraps its fields in `.bmc-tabContent`, which is styled as a card
 * in its own right — white background, 20px radius, 30px/20px padding and a
 * drop shadow. That was designed for the widget sitting loose on the page; in
 * the sidebar it drew a second box inside the filter box.
 */
.bmc-filter-sidebar-body .bmc-tabContent {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/*
 * Bootstrap rows carry -12px side margins to cancel their columns' gutters.
 * In a narrow sidebar that pulls the fields out past the card's padding, so
 * gutters are dropped entirely and every field simply spans the column.
 */
.bmc-filter-sidebar-body .row {
    margin-left: 0;
    margin-right: 0;
}

.bmc-filter-sidebar-body .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/*
 * SEARCH / RESET.
 *
 * Both buttons are `width: 100%` in style.css — fine when each had its own
 * row, but they share one `d-flex`, so side by side they added up to 200% and
 * spilled out of the card. Here they split the row instead.
 */
.bmc-filter-sidebar-body .bmc-search-btn,
.bmc-filter-sidebar-body .bmc-search-out-btn {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 12px !important;
    border-radius: var(--dd-radius) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bmc-filter-sidebar-body .d-flex.gap-1 { gap: 8px !important; }

/* The button block carries an inline `margin-top: 30px`, sized for the wide
   layout; !important is the only way past an inline style. */
.bmc-filter-sidebar-body .d-flex.gap-1 { margin-top: 0; }
.bmc-filter-sidebar-body .bmc-search-btn + .bmc-search-out-btn { margin-left: 0; }

.bmc-filter-sidebar-body [style*="margin-top: 30px"],
.bmc-filter-sidebar-body [style*="margin-top:30px"] {
    margin-top: 10px !important;
}

/* Tighter labels and spacing — a sidebar has less room than the full-width bar. */
.bmc-filter-sidebar-body form.bmc-form .form-label,
.bmc-filter-sidebar-body form.bmc-form label {
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 4px;
}

.bmc-filter-sidebar-body .mb-3 { margin-bottom: 12px !important; }
.bmc-filter-sidebar-body .dashed-divider { margin: 12px 0 !important; }
.bmc-filter-sidebar-body .mt-3 { margin-top: 8px !important; }

/* "+ Advance Search" sits under the buttons, not floated off to one side. */
.bmc-filter-sidebar-body a.bmc-search-toggle {
    display: inline-block;
    font-size: 13px;
}

@media (max-width: 991.98px) {
    /* Stacked above the results, so it should not stick or scroll internally. */
    .bmc-filter-sidebar { position: static; }
    .bmc-filter-sidebar-body { max-height: none; overflow-y: visible; }
}

/* ---------- "Searching…" state ---------- */

/*
 * Shown while the router is fetching the next set of results. Without it a
 * client-side search looks like nothing happened — there is no browser spinner
 * any more, because the page is not reloading.
 */
.bmc-search-pending {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
}

.bmc-search-pending-bar {
    position: relative;
    flex: 1 1 auto;
    height: 3px;
    border-radius: 3px;
    background: var(--dd-tint);
    overflow: hidden;
}

.bmc-search-pending-bar::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    border-radius: 3px;
    background: var(--primary-color);
    animation: bmc-search-sweep 1s ease-in-out infinite;
}

@keyframes bmc-search-sweep {
    0%   { left: -40%; }
    100% { left: 100%; }
}

.bmc-search-pending-text { white-space: nowrap; }

/* The fields stay readable but clearly inert until the results land. */
form.bmc-form[data-pending="true"] .bmc-tabContent {
    opacity: .6;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* ============================================================
 * Footer background
 *
 * The same gradient the home page's counter strip uses
 * (`.bmc-counter-grdnt` in style.css), replacing the flat #201a1a.
 *
 * Scoped to `footer.web-footer` only — `.web-footer-after`, the bar underneath
 * holding the copyright and social links, keeps its own #232222 and is
 * deliberately untouched.
 *
 * `footer.web-footer` rather than `.web-footer` so this cannot be beaten by
 * the equally-specific rule in style.css if load order ever changes.
 * ============================================================ */

footer.web-footer {
    background: linear-gradient(45deg, #010c23, #083554);
}

/*
 * The "Contact Us" column carries `.bmc-bg-frst`, its own `#15141a` panel that
 * also paints a `:before` bleeding off the left edge of the viewport. Sitting
 * on top of the footer, it left that one column looking untouched while the
 * rest of the footer took the gradient.
 *
 * Cleared so the gradient runs unbroken across the whole footer. responsive.css
 * already does exactly this below its breakpoint, so a transparent
 * `.bmc-bg-frst` is a state the design was built to handle.
 */
footer.web-footer .bmc-bg-frst {
    background: transparent;
}

footer.web-footer .bmc-bg-frst:before {
    display: none;
}

/* ============================================================
 * Footer subscribe — one input group
 *
 * The field and the button each carried their own height, background and half
 * of a pill radius, and had to be kept in agreement by hand — which they were
 * not: the input was `height: 50px` while the button set only `padding: 0`, so
 * it collapsed to its line-height and sat visibly shorter.
 *
 * They are now a single control. The wrapper owns the pill — background,
 * border and radius — and clips whatever is inside it, so the two children
 * cannot disagree about shape. `align-items: stretch` makes them exactly as
 * tall as the wrapper, so there is no height to keep in sync at all.
 * ============================================================ */

form.bmc-form-subscribe {
    display: flex;
    align-items: stretch;
    height: 50px;
    /* Translucent rather than a fixed grey, so it sits on the footer's gradient
       instead of showing as a flat patch over it. */
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    /* Clips both children into the pill — neither needs its own corner radii. */
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* The whole group lights up, the way a real input group does. */
form.bmc-form-subscribe:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 96, 10, .18);
}

form.bmc-form-subscribe .form-control,
form.bmc-form-subscribe .form-control:focus {
    flex: 1 1 auto;
    /* Lets the field shrink rather than push the button out of the pill. */
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 20px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    color: #e6e6e6;
    font-size: 15px;
    box-shadow: none !important;
    outline: 0;
}

form.bmc-form-subscribe .form-control::placeholder {
    color: #9a9a9a;
    opacity: 1;
}

form.bmc-form-subscribe .btn-subscribe,
form.bmc-form-subscribe .btn-subscribe:hover,
form.bmc-form-subscribe .btn-subscribe:focus {
    flex: 0 0 auto;
    /* Replaces `width: calc(100% - 150px)`, which sized the button off the
       container instead of its own label. */
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0 26px;
    border: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

/* ============================================================
 * Footer gallery — hover zoom that follows the cursor
 *
 * The two custom properties are written by
 * src/components/site/FooterGalleryImage.tsx on mousemove; everything else
 * happens here, so each frame is a compositor-only transform rather than a
 * layout pass.
 * ============================================================ */

/*
 * Shared by the footer gallery and the vehicle detail carousel. The component
 * (HoverZoomImage) sets --gx / --gy from the pointer and --zoom from its prop;
 * nothing else about the image is decided here, so each caller keeps control of
 * its own sizing.
 */
.bmc-hover-zoom {
    /* Defaults, so the image is centred before the pointer ever arrives. */
    --gx: 50%;
    --gy: 50%;
    --zoom: 1.4;

    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.bmc-hover-zoom > img {
    display: block;
    transform-origin: var(--gx) var(--gy);
    /* Scale eases in and out; the origin follows almost instantly, because a
       slow origin feels like the image is lagging behind the pointer. */
    transition: transform .3s ease, transform-origin .08s linear;
    will-change: transform;
}

/* Only where hovering is actually possible — on touch this would fire on tap
   and leave the image stuck zoomed. */
@media (hover: hover) {
    .bmc-hover-zoom:hover > img {
        transform: scale(var(--zoom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .bmc-hover-zoom > img,
    .bmc-hover-zoom:hover > img {
        transform: none;
        transition: none;
    }
}

/* Footer thumbnails crop to a fixed 80px box; the vehicle carousel image keeps
   its natural aspect ratio, which is why this sizing is not in the shared rule. */
.footer-gallery-zoom {
    border-radius: 5px;
}

.footer-gallery-zoom > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
 * Customer messages (/message)
 * ============================================================ */

.bmc-msg-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.bmc-msg-list li + li { border-top: 1px solid #ececec; }

.bmc-msg-list-item {
    display: block;
    padding: 14px 4px;
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease;
}

.bmc-msg-list-item:hover { background: #fafafa; color: inherit; }

.bmc-msg-list-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
}

.bmc-msg-list-date { font-size: 12px; color: #8b9199; white-space: nowrap; }

.bmc-msg-list-who {
    display: block;
    font-size: 13px;
    color: var(--primary-color);
    margin-top: 2px;
}

.bmc-msg-count {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 96, 10, .12);
    font-size: 11px;
    font-weight: 700;
}

.bmc-msg-list-preview {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-top: 3px;
    /* One line — the thread view has the whole message. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bmc-msg-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.bmc-msg {
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
}

/* The user's own messages, so a thread reads as two voices. */
.bmc-msg.is-mine {
    background: rgba(255, 96, 10, .07);
    border-color: rgba(255, 96, 10, .28);
}

.bmc-msg-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #8b9199;
    margin-bottom: 6px;
}

.bmc-msg-body {
    margin: 0;
    font-size: 14px;
    /* Preserves the line breaks people actually typed. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------- expand / zoom icon on product cards ---------- */

/*
 * style.css colours this white with `.expand-box svg`, but Font Awesome is
 * loaded as a webfont here, so the icon is an <i> with a ::before glyph and
 * never an <svg> — the rule matched nothing and the glyph fell back to the
 * inherited text colour, dark on the orange circle.
 */
.expand-box i,
.expand-box svg,
.expand-box i::before {
    color: #ffffff;
}

/* It is a button in all but name, so it should look like one. */
.expand-box { cursor: pointer; }

/* ============================================================
 * Phone field — the "+44" dial-code box
 *
 * _variables.css pins `.iti__selected-flag` to `height: 45px; margin-top: 4px`,
 * but the input beside it is a plain Bootstrap `.form-control` at ~38px. The
 * grey dial-code block was therefore taller than the field it sits in and stuck
 * out above and below it, with mismatched corners.
 *
 * Both are given the same height here, and the flag is anchored to the input's
 * box rather than floated with a margin, so they cannot drift apart again.
 * ============================================================ */

.iti { width: 100%; display: block; }

.iti input,
.iti input[type="tel"],
.iti input[type="text"] {
    height: 46px;
    margin-top: 0 !important;
    border-radius: 8px !important;
}

.iti--separate-dial-code .iti__selected-flag,
.iti .iti__selected-flag {
    height: 100% !important;
    margin-top: 0 !important;
    top: 0;
    bottom: 0;
    /* Only the left corners, so it meets the input's edge cleanly. */
    border-radius: 8px 0 0 8px !important;
    background-color: rgba(0, 0, 0, .05);
}

.iti--separate-dial-code .iti__selected-dial-code {
    font-size: 14px;
}

/* ============================================================
 * Action buttons on the vehicle / part detail pages
 *
 * "Make Offer", "Add To Cart", "Buy now" and the bid buttons are rendered as
 * plain siblings inside `.bmc-productContent` — no flex row, no gap — so they
 * sat flush against each other with no gap at all.
 *
 * Spacing is given to the buttons rather than to a wrapper because which of
 * them appear varies: several conditional branches emit one button, others two,
 * and there is no single container to put a `gap` on.
 *
 * Scoped to `.bmc-productContent` — `.bmc-bid-btn` is used on nine other
 * screens where it is already spaced correctly.
 * ============================================================ */

.bmc-productContent .bmc-bid-btn {
    margin-right: 12px;
    /* Keeps a gap if they wrap onto two lines on a narrow column. */
    margin-bottom: 10px;
}

/* No trailing gap after the last one in a row. */
.bmc-productContent .bmc-bid-btn:last-child {
    margin-right: 0;
}

/* ---------- checkout result screens ---------- */

.bmc-order-tick,
.bmc-order-cross {
    width: 68px;
    height: 68px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.bmc-order-tick {
    background: rgba(38, 141, 38, .12);
    color: #268d26;
}

.bmc-order-cross {
    background: rgba(189, 32, 32, .12);
    color: #bd2020;
}

/* ---------- shorter page banner ---------- */

/*
 * A modifier rather than a change to .bmc-page-banner: about, contact and
 * policy use the same banner and keep their original 40px.
 */
.bmc-page-banner.bmc-page-banner-sm { padding: 30px; }

.bmc-page-banner.bmc-page-banner-sm .bmc-banner-heading {
    font-size: 34px;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .bmc-page-banner.bmc-page-banner-sm { padding: 22px; }
    .bmc-page-banner.bmc-page-banner-sm .bmc-banner-heading { font-size: 26px; }
}

/* ================================================================
 * Home hero
 *
 * The band the search card sits in. Everything here is scoped under
 * .bmc-hero — SearchWidget also renders on /web/search and /parts in `short`
 * mode, and none of this may reach those.
 * ================================================================ */

/* Full-bleed: no side margin and no radius, so the band runs edge to edge.
 * The copy and the card still line up with the rest of the page because
 * .bmc-hero-inner is a .container. */
.bmc-hero {
    position: relative;
    margin: 0 0 40px;
    overflow: hidden;
    background: #0e1f42;
}

/*
 * Five layers in one background shorthand, painted front to back:
 *   1. brand orange bleeding in from the top-left
 *   2. a wider warm tan behind it, so the orange fades rather than stops
 *   3. the same orange coming down from the top-right
 *   4. and again rising from the bottom-right, to balance 1
 *   5. the field itself, angled so the corners differ
 *
 * The big circle is ::before rather than a sixth layer here — a background
 * layer can only be one flat fill inside its hard stop, and this circle is
 * warm at its centre and cold at its rim.
 *
 * All three glows are positioned in percentages, so they hold their place now
 * that the band is full-bleed and its width tracks the viewport.
 *
 * The hairlines are a separate ::after so they can be clipped to the lower
 * band without cutting the glows.
 */
.bmc-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(620px 340px at 4% -14%, rgba(255, 96, 10, .30), rgba(255, 96, 10, 0) 60%),
        radial-gradient(860px 470px at 8% -20%, rgba(226, 170, 128, .32), rgba(226, 170, 128, 0) 64%),
        radial-gradient(620px 360px at 94% -12%, rgba(255, 96, 10, .26), rgba(255, 96, 10, 0) 62%),
        radial-gradient(760px 420px at 97% 112%, rgba(255, 96, 10, .24), rgba(255, 96, 10, 0) 62%),
        linear-gradient(128deg, #12244a 0%, #0d1c3c 46%, #0b1733 100%);
}

/*
 * The disc in the upper right. Its own element so it can carry a gradient
 * across its face: warm orange near the middle, cooling to the navy at the rim,
 * which is what gives it a visible edge on the left without a border.
 *
 * Sized in vw so it keeps its proportion now that the band is full-bleed.
 */
.bmc-hero-bg::before {
    content: "";
    position: absolute;
    top: -34%;
    right: -8%;
    width: 62vw;
    height: 62vw;
    max-width: 900px;
    max-height: 900px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 34%, rgba(255, 154, 84, .40), rgba(255, 154, 84, 0) 58%),
        linear-gradient(158deg, #3b3350 0%, #2a2f52 42%, #1c2a4d 74%, #16264a 100%);
}

.bmc-hero-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 150px;
    background: repeating-linear-gradient(
        -52deg,
        rgba(255, 255, 255, .05) 0,
        rgba(255, 255, 255, .05) 1px,
        rgba(255, 255, 255, 0) 1px,
        rgba(255, 255, 255, 0) 26px
    );
}

.bmc-hero-inner {
    position: relative;
    padding-top: 54px;
    padding-bottom: 60px;
}

/* ---------- copy ---------- */

.bmc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #f5d9c6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.bmc-hero-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
}

.bmc-hero-title {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.01em;
}

.bmc-hero-title span { color: var(--primary-color); }

/* Below md the two halves would not fit on one line each, so the explicit
 * break comes out and the heading wraps to whatever the width allows. */
.bmc-hero-title br { display: none; }

@media (min-width: 768px) {
    .bmc-hero-title br { display: inline; }
}

.bmc-hero-sub {
    max-width: 52ch;
    margin: 0 0 34px;
    color: #b9c4da;
    font-size: 15px;
    line-height: 1.6;
}

/* ---------- the search card ---------- */

.bmc-hero-card { position: relative; }

/* The orange strip along the card's top edge, inset from both sides. */
.bmc-hero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    right: 26px;
    height: 5px;
    border-radius: 0 0 4px 4px;
    background: var(--primary-color);
    z-index: 1;
}

/* style.css zeroes the top-left corner — a leftover from when tabs sat above
 * the card. There are none here, so all four corners match. */
.bmc-hero-card .bmc-tabContent {
    border-radius: 14px;
    padding: 26px 28px 18px;
    box-shadow: 0 24px 60px rgba(6, 18, 44, .28);
}

/* The rule between the location block and the vehicle selects. style.css
 * draws it for the whole site; inside the hero card it only needs toning down
 * against the white. */
.bmc-hero-card .dashed-divider {
    border-top: 1px dashed #e4e7ec;
    margin: 6px 0 20px !important;
}

/*
 * Scoped through `form.bmc-form` on purpose. style.css carries
 *   form.bmc-form .form-label { font-size: 14px }
 * at three-part specificity, which beat the two-part selector this rule used
 * to have. The effect was visible only on Post Code: it is the one field whose
 * label actually has class="form-label", so it took the site's 14px while
 * every other label — Distance included, whose markup says htmlFor="form-label"
 * rather than className, so it has no class at all — took this rule's size.
 *
 * Matching Post Code means 14px for all of them. The letter-spacing comes down
 * from .07em because at 14px uppercase, DISTANCE(NATIONAL) would otherwise run
 * past its column.
 */
.bmc-hero-card form.bmc-form .form-label,
.bmc-hero-card form.bmc-form label {
    display: block;
    margin-bottom: 6px;
    color: #1d2939;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/*
 * Same specificity fix, and the reason Post Code and Distance did not line up:
 * style.css sets their height from --main-search-input at three-part
 * specificity, so this rule's 44px never applied to either. Pinning
 * line-height and padding as well keeps an <input> and a <select> the same
 * height — they compute their content box differently otherwise.
 */
.bmc-hero-card form.bmc-form .form-control,
.bmc-hero-card form.bmc-form .form-select {
    height: 44px;
    padding: 0 14px;
    line-height: 42px;
    border: 1px solid #dfe3ea;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
}

/* The postcode box holds an absolutely-positioned spinner, so its wrapper has
 * to be the containing block for it — style.css already relies on that. */
.bmc-hero-card form.bmc-form select.form-control { padding-right: 34px; }

.bmc-hero-card form.bmc-form .form-control:focus,
.bmc-hero-card form.bmc-form .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 96, 10, .14);
}

/*
 * The nowrap is the point: the button lives in a col-lg-2, which at
 * some widths is narrower than "magnifier + Search" and was breaking the label
 * onto its own line under the icon.
 *
 * The buttons are also allowed to wrap as a pair rather than squeeze, so a
 * narrow column drops Reset below Search instead of shrinking both.
 */
.bmc-hero-card .bmc-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 44px;
    padding: 0 18px;
    border-radius: 7px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

/*
 * The magnifier is an <em> in the ported markup, so it inherits italic — the
 * glyph was being skewed, which reads as the icon sitting high and left of the
 * label rather than on the same line as it. font-style: normal un-skews it;
 * the fixed size and line-height stop the icon font's own metrics from pushing
 * the button's content box taller than the text.
 */
.bmc-hero-card .bmc-search-btn .fa-search {
    font-style: normal;
    font-size: 13px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* The `me-2` on the icon is the whole gap; without this the flex gap below
 * would add to it and the label would drift right of centre. */
.bmc-hero-card .bmc-search-btn .fa-search.me-2 { margin-right: 8px !important; }

/*
 * Search and Reset stay on one line. col-lg-2 is 16.67%, which is narrower
 * than the two buttons together, so the column is widened below and the pair
 * is told never to wrap.
 */
.bmc-hero-card .d-flex.gap-1 {
    flex-wrap: nowrap;
    gap: 8px !important;
}

/*
 * 76/24 instead of Bootstrap's 83.33/16.67. `.order-1` / `.order-2` in the
 * selectors matter: the advance-search panel is ALSO a col-lg-10 in this row
 * (it carries order-3), and it must keep its full width below the fields.
 */
@media (min-width: 992px) {
    .bmc-hero-card .row > .col-lg-10.order-1 { flex: 0 0 76%; max-width: 76%; }
    .bmc-hero-card .row > .col-lg-2.order-2  { flex: 0 0 24%; max-width: 24%; }
}

.bmc-hero-card .bmc-search-btn:hover { background: #d94e05; color: #fff; }

.bmc-hero-card .bmc-search-out-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 44px;
    padding: 0 16px !important;
    border: 1px solid #dfe3ea;
    border-radius: 7px;
    background: #fff;
    color: #344054;
    font-weight: 600;
}

.bmc-hero-card .bmc-search-out-btn:hover { border-color: #b9c0cc; color: #101828; }

.bmc-hero-card .bmc-search-toggle {
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.bmc-hero-card .bmc-search-toggle:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
    .bmc-hero { margin: 0 0 30px; }
    .bmc-hero-inner { padding-top: 38px; padding-bottom: 42px; }
    .bmc-hero-card .bmc-tabContent { padding: 20px 18px 12px; }
}


/* ================================================================
 * Sign-up band — the strip between the last section and the footer
 * ================================================================ */

/*
 * Full-bleed, like .bmc-hero, so the orange runs edge to edge and the footer
 * meets it with no white gap. The gradient runs slightly deeper to the right,
 * which keeps a flat 100% orange from looking like a solid block.
 */
.bmc-cta-band {
    background: linear-gradient(100deg, #ff7a1a 0%, #f2600a 56%, #e35405 100%);
}

.bmc-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Wraps after "perfect" at desktop widths, as in the design. */
.bmc-cta-copy h2 {
    max-width: 30ch;
    margin: 0 0 6px;
    color: #fff;
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.bmc-cta-copy p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
}

.bmc-cta-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    background: #fff;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease;
}

.bmc-cta-btn:hover {
    color: #d94e05;
    box-shadow: 0 8px 22px rgba(120, 40, 0, .22);
    transform: translateY(-1px);
}

.bmc-cta-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .7);
    outline-offset: 2px;
}

/* Stacked below lg: the button under the copy rather than squeezed beside it. */
@media (max-width: 991.98px) {
    .bmc-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .bmc-cta-copy h2 { max-width: none; }
}


/* ================================================================
 * Custom cursor — the orange dot and the circle trailing it
 * ================================================================ */

/*
 * style.css gives these `transition: transform ease-out 10ms` and `100ms`.
 * Both are restated with opacity added, so bmc-web.js can fade the pair out
 * when the pointer leaves the window instead of leaving a stray dot frozen
 * mid-page.
 *
 * `will-change: transform` keeps the two on their own compositor layer, so
 * moving them does not repaint anything underneath.
 */
#cursor {
    transition: transform ease-out 10ms, opacity .16s ease;
    will-change: transform;
}

#stalker {
    transition: transform ease-out 100ms, opacity .16s ease;
    will-change: transform;
}

/*
 * Written as id + class so it beats `#stalker { opacity: 30% }` — a bare
 * `.bmc-cursor-away` would lose to the id and the circle would never fade.
 */
#cursor.bmc-cursor-away,
#stalker.bmc-cursor-away {
    opacity: 0;
}

/* A pointing device is what this is for. On touch there is no cursor to
 * decorate, and the pair only costs a paint. */
@media (hover: none) {
    #cursor,
    #stalker { display: none; }
}

/* ---------- Stripe Connect status (managePayment) ---------- */

.bmc-pay-status { margin: 0; font-size: 14px; }

.bmc-pay-status > div {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f1f4;
}

.bmc-pay-status > div:last-child { border-bottom: 0; }
.bmc-pay-status dt { color: #6b7280; font-weight: 500; }
.bmc-pay-status dd { margin: 0; font-weight: 600; }

@media (max-width: 575.98px) {
    .bmc-pay-status > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- my reviews (/review) ---------- */

.bmc-review-list { list-style: none; margin: 0; padding: 0; }

.bmc-review-list > li {
    padding: 14px 0;
    border-bottom: 1px solid #f0f1f4;
}

.bmc-review-list > li:last-child { border-bottom: 0; }

.bmc-review-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    margin-bottom: 4px;
}

.bmc-review-head span { color: #6b7280; font-size: 12px; white-space: nowrap; }

.bmc-review-body {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* ============================================================
 * HOME — the gap above "How it Works"
 *
 * The section carries two spacing classes, and the second wins:
 *   .bmc-x-spaceing            padding: 30px 0        (style.css:544)
 *   .bmc-spaccing-extra-scroll padding: 50px 0 80px 0 (style.css:1284)
 *
 * so its real top padding was 50px, sitting under the 30px the section above
 * already contributes — a visibly empty band before the heading.
 *
 * Scoped to the id rather than the class on purpose: .bmc-spaccing-extra-scroll
 * is also on the "Why Breaking" section further down the page, which is not
 * being changed. The bottom padding is left at 80px so the section does not
 * collide with the counter band under it.
 * ============================================================ */
#how-working-home {
    padding-top: 0;
}

/* ============================================================
 * LISTING STATS — Date Posted / Views / Saved to Favourites.
 *
 * The band under the description on /vehicle/info/{id} and /part/info/{id},
 * which was empty. Rendered by components/site/ListingStats.
 *
 * A wrapping flex row rather than a grid: three items on a wide screen, and
 * they fold onto their own lines on a phone without a breakpoint of their own.
 * ============================================================ */
.bmc-listing-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 18px;
}

/*
 * Sized for the half-width column the advert pages put this in, not the full
 * page: a ~150px basis lets the three tiles share one row beside the gallery
 * and fold to their own lines on a phone without a breakpoint of their own.
 */
.bmc-listing-stat {
    flex: 1 1 150px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fafbfc;
    border: 1px solid var(--dd-border, #e3e6eb);
    border-radius: var(--dd-radius, 10px);
}

.bmc-listing-stat-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 96, 10, .10);
    color: var(--primary-color);
    font-size: 15px;
}

.bmc-listing-stat-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bmc-listing-stat-label {
    font-size: 12px;
    color: #8b9199;
    line-height: 1.3;
}

.bmc-listing-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondry-color);
    line-height: 1.3;
    white-space: nowrap;
}

/* ============================================================
 * The expand button on the part detail photo.
 *
 * `.expand-box` (style.css:3119) is `position: absolute`, so it needs a
 * positioned ancestor or it pins itself to whatever ancestor happens to be
 * positioned — on this page, nothing was, which would have thrown it to the
 * top-right of the viewport.
 *
 * The search cards and the vehicle gallery already sit inside positioned
 * containers (`.bmc-product-image-layers` and Bootstrap's `.carousel-item`),
 * which is why only this one needs the rule.
 * ============================================================ */
.bmc-productImg .bmc-singleProduct-img {
    position: relative;
}

/* ============================================================
 * The expand button inside a Bootstrap carousel.
 *
 * `.carousel-control-next` is `position:absolute; top:0; bottom:0; width:15%;
 * z-index:1` — it covers the whole right-hand edge of the slide, which is
 * exactly where `.expand-box` sits (top:3px; right:3px). Both carry z-index 1,
 * and the controls come later in the DOM, so the control painted on top and
 * swallowed every click: the icon was visible and completely dead.
 *
 * Raising the button above the controls is enough; it is 34px in the corner, so
 * the arrow keeps effectively all of its own hit area.
 * ============================================================ */
.carousel-item .expand-box {
    z-index: 3;
}

/* ============================================================
 * The caption on a gallery slide.
 *
 * The vehicle gallery now mixes the car's own photos with one per part that has
 * an image, so a slide has to say which it is. Only part slides are captioned —
 * a photo of the car needs no label.
 *
 * z-index 2: above the slide, below the expand button (3) so it never covers
 * the one thing on the slide you can click.
 * ============================================================ */
.bmc-slide-label {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    max-width: calc(100% - 60px);
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(28, 28, 46, .82);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
 * The "Sold Out" badge on the Vehicles View cards.
 *
 * `.sold-badge` is only ever defined in public/assets/css/_variables.css, and
 * that file is linked by neither the old Blade header nor src/app/layout.tsx —
 * so the badge has been rendering with Bootstrap's bare `.badge` and no colour
 * at all: dark text on the photo, easy to miss entirely.
 *
 * Restored here, and in red rather than the green _variables.css used. A car
 * that is no longer for sale is a stop sign, and it now matches the "Sold"
 * badge on the Parts View (`.pb-sold` in parts-board.css).
 *
 * Solid rather than tinted because this one sits on top of a photograph, where
 * a pale background would not carry.
 * ============================================================ */
.sold-badge {
    background: #dc2626;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

/* ============================================================
 * INBOX — the thread list and the open thread.
 *
 * The screen was built from the data alone (the original Blade for it was not
 * part of the migration material), so it had no visual structure: a subject, a
 * "To …" line and a preview, stacked flat with no separation between one
 * conversation and the next.
 *
 * The listing each conversation is about is the new part — see migration 0008.
 * Its photo doubles as the row's avatar, which is what makes the list scannable.
 * ============================================================ */

.bmc-msg-list-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 12px;
    border-radius: 10px;
}

.bmc-msg-list li + li { border-top: 1px solid #f0f1f3; }

.bmc-msg-list-item:hover { background: #fafbfc; }

/* Avatar — the listing's photo, or the counterparty's initial. */
.bmc-msg-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: #f2f4f6;
    border: 1px solid var(--dd-border, #e3e6eb);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bmc-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }

.bmc-msg-initial {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

.bmc-msg-list-body { flex: 1; min-width: 0; }

.bmc-msg-list-top { align-items: baseline; gap: 12px; }

/* What the conversation is about. */
.bmc-msg-about {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(255, 96, 10, .08);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bmc-msg-about i { font-size: 11px; }

.bmc-msg-list-preview {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 14px;
}

/* ---------- the open thread ---------- */

.bmc-msg-listing {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin: 14px 0 18px;
    border: 1px solid var(--dd-border, #e3e6eb);
    border-radius: 12px;
    background: #fafbfc;
    flex-wrap: wrap;
}

.bmc-msg-listing-img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: #f2f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 22px;
}

.bmc-msg-listing-img img { width: 100%; height: 100%; object-fit: cover; }

.bmc-msg-listing-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.bmc-msg-listing-label {
    font-size: 12px;
    color: #8b9199;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.bmc-msg-listing-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondry-color);
    overflow: hidden;
    text-overflow: ellipsis;
}

.bmc-msg-listing-btn {
    flex-shrink: 0;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 8px 16px !important;
    font-size: 14px;
}

@media (max-width: 575px) {
    .bmc-msg-listing-btn { width: 100%; text-align: center; }
}

/* ============================================================
 * MY BUYING YARD — the three tabs.
 *
 * The screen had two pills that sliced one dataset (completed purchases) two
 * ways. It is Bidding / Favourites / My Purchases now, and the only new
 * furniture is the count on each tab and the amount+status line on a bidding
 * card. The grid itself is the portal's `bmc-product-card`, untouched.
 * ============================================================ */

/* Plain brackets rather than a pill — the tab is already a pill, and a badge
   inside one reads as a control within a control. */
.bmc-yard-count {
    font-weight: 600;
    opacity: .7;
}

/* The one thing a bidding card says that a product card does not. */
.bmc-bid-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.bmc-bid-amount { font-size: 14px; color: #6b7280; }
.bmc-bid-amount b { color: var(--secondry-color); }

.bmc-bid-status {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}

.bmc-bid-status.is-pending  { background: #fef3c7; color: #92400e; }
.bmc-bid-status.is-accepted { background: #dcfce7; color: #15803d; }
.bmc-bid-status.is-declined { background: #fee2e2; color: #b91c1c; }