/* ------------------------------------------------------------------
   Vehicles — listing, cards, filters, shortlist, compare
   ------------------------------------------------------------------

   Project CSS for the dealership front end. The old theme ships no
   vehicle components, so these are ours; everything else on the page
   (buttons, headings, page header) uses the theme's own classes.

   Follows the existing module-css convention — one file per area,
   registered in front/layouts/partials/styles.blade.php.
------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Card
------------------------------------------------------------------ */
.vehicle-card {
    position: relative;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.vehicle-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.vehicle-card__img {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f2f4f7;
}

.vehicle-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.vehicle-card:hover .vehicle-card__img img {
    transform: scale(1.05);
}

/* A sold car stays published for SEO — it must read as unavailable. */
.vehicle-card--sold .vehicle-card__img img {
    filter: grayscale(0.75);
}

.vehicle-card__price {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: rgba(17, 24, 39, 0.92);
    color: #fff;
    padding: 7px 14px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 17px;
}

.vehicle-card__price s {
    opacity: 0.6;
    font-weight: 400;
    font-size: 13px;
    margin-left: 6px;
}

.vehicle-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #fff;
    color: #111827;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.vehicle-card__badge.is-sold {
    background: #b42318;
    color: #fff;
}

.vehicle-card__badge.is-reserved {
    background: #b54708;
    color: #fff;
}

.vehicle-card__photos {
    position: absolute;
    right: 14px;
    bottom: 14px;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
}

.vehicle-card__wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
}

.vehicle-card__content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.vehicle-card__title {
    font-size: 19px;
    line-height: 1.35;
    margin: 0 0 8px;
}

.vehicle-card__title a {
    color: inherit;
}

.vehicle-card__text {
    font-size: 14px;
    opacity: 0.75;
    margin: 0 0 14px;
}

.vehicle-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 0 14px;
    padding: 0;
    font-size: 14px;
}

.vehicle-card__specs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.85;
}

.vehicle-card__monthly {
    font-size: 13px;
    opacity: 0.7;
    margin: 0 0 14px;
}

.vehicle-card__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    flex-wrap: wrap;
}

/* List view — image beside the content rather than above it. */
@media (min-width: 768px) {
    .vehicle-grid--list .vehicle-card {
        flex-direction: row;
    }

    .vehicle-grid--list .vehicle-card__img {
        flex: 0 0 38%;
        aspect-ratio: auto;
    }

    .vehicle-grid--list .vehicle-card__content {
        flex: 1 1 auto;
    }
}

/* ------------------------------------------------------------------
   Shortlist and compare buttons
------------------------------------------------------------------ */
.shortlist-btn,
.compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.shortlist-btn--heart {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.shortlist-btn:hover,
.compare-btn:hover {
    border-color: #98a2b3;
}

.shortlist-btn.is-active {
    color: #d92d20;
    border-color: #d92d20;
}

.compare-btn.is-active {
    color: #175cd3;
    border-color: #175cd3;
}

/* ------------------------------------------------------------------
   Toolbar, chips, pagination
------------------------------------------------------------------ */
.vehicle-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.vehicle-toolbar__count strong {
    font-size: 18px;
}

.vehicle-toolbar__count span {
    opacity: 0.6;
    font-size: 14px;
}

.vehicle-toolbar__controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.vehicle-toolbar__select {
    padding: 9px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
}

.vehicle-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.vehicle-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #f2f4f7;
    color: #344054;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
}

.vehicle-chip:hover {
    background: #e4e7ec;
    color: #101828;
}

.vehicle-chip--clear {
    background: transparent;
    text-decoration: underline;
}

.vehicle-pagination {
    margin-top: 30px;
}

.vehicle-pagination .pagination {
    justify-content: center;
    flex-wrap: wrap;
}

/* vehicle-filter.js adds this while a request is in flight. */
#vehicle-results.is-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* ------------------------------------------------------------------
   Filter sidebar
------------------------------------------------------------------ */
.vehicle-filters {
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    padding: 22px;
    background: #fff;
    margin-bottom: 30px;
}

.vehicle-filters__widget {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #eef0f4;
}

.vehicle-filters__widget:last-of-type {
    border-bottom: 0;
}

.vehicle-filters__widget h4 {
    font-size: 16px;
    margin: 0 0 12px;
}

.vehicle-filters__widget label {
    font-size: 14px;
}

.vehicle-filters input[type='search'],
.vehicle-filters input[type='number'],
.vehicle-filters select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 14px;
}

/* Long option lists scroll rather than pushing the results off screen. */
.vehicle-filters__list {
    max-height: 260px;
    overflow-y: auto;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.checkbox-item label {
    margin: 0;
    cursor: pointer;
}

.checkbox-item label span {
    opacity: 0.55;
    font-size: 13px;
}

.vehicle-filters__range,
.vehicle-filters__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vehicle-filters__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.vehicle-filters__clear {
    font-size: 14px;
    text-decoration: underline;
}

.model-hint {
    font-size: 13px;
    opacity: 0.65;
    margin: 0;
}

/* ------------------------------------------------------------------
   Empty state — search, shortlist, comparison
------------------------------------------------------------------ */
.vehicle-empty-state {
    text-align: center;
    padding: 70px 20px;
    border: 1px dashed #d0d5dd;
    border-radius: 12px;
}

.vehicle-empty-state i {
    font-size: 42px;
    opacity: 0.3;
    margin-bottom: 18px;
    display: block;
}

.vehicle-empty-state h3 {
    margin-bottom: 8px;
}

.vehicle-empty-state p {
    opacity: 0.7;
    margin-bottom: 22px;
}

/* Screen-reader-only labels on the toolbar selects. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ==================================================================
   Car listing — Carola car-listing-2 / car-listing-3
   ==================================================================
   The page was still on the previous theme's classes (`space-top`,
   `vehicle-listing__*`), none of which Carola defines. It is now the
   theme's `car-listing-section`: sidebar in a col-4, results in a col-8.

   Two layouts, switched from the toolbar:

     .car-listing-results--grid   car-listing-2, two cards per row
     .car-listing-results--list   car-listing-3, one per row, image beside

   Carola styles the CARD (.single-featured-car-block.style_two) and the
   SEARCH widget, but nothing else in this sidebar: its own widgets are
   fixed lists of checkboxes with no collapse, and its only widget title
   rule is `h3.sidebar-widget-title` at 28px. Sixteen sections at 28px,
   all open, ran several screens long — so the titles below are <summary>
   at a working size, and each section is a real dropdown.
   ================================================================== */

.car-listing-intro {
    margin-bottom: 34px;
    color: var(--body-color);
}

.car-listing-intro p {
    color: var(--body-color);
    margin-bottom: 0;
}

/* --- sidebar shell ---------------------------------------------- */
.car-listing-sidebar {
    padding: 30px 26px;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
    box-shadow: 0 18px 60px rgb(17 17 17 / 5%);
}

/* Carola pads its search widget 50px and rules it off; that spacing is
   built for three widgets, not sixteen. */
.car-listing-sidebar .sidebar-search-widget {
    padding-bottom: 22px;
    margin-bottom: 6px;
}

.car-listing-sidebar .sidebar-search-box input {
    padding: 14px 46px 14px 18px;
    font-size: 15px;
    line-height: 24px;
    border-radius: 8px;
}

.car-listing-sidebar .sidebar-search-box button {
    top: 14px;
    right: 18px;
    font-size: 15px;
    background: transparent;
}

/* --- collapsible section ---------------------------------------- */
details.sidebar-widget {
    border-top: 1px solid rgb(17 17 17 / 8%);
}

.sidebar-widget--plain {
    border-top: 1px solid rgb(17 17 17 / 8%);
    padding: 16px 0;
}

/* The disclosure triangle is replaced by a chevron on the right, but the
   element stays a <summary>, so the browser keeps the toggle behaviour,
   the keyboard handling and the expanded/collapsed semantics. */
details.sidebar-widget > summary.sidebar-widget-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--primary-font);
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    color: var(--primary-color);
    transition: color 300ms ease;
}

details.sidebar-widget > summary.sidebar-widget-title::-webkit-details-marker {
    display: none;
}

details.sidebar-widget > summary.sidebar-widget-title::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid rgb(17 17 17 / 45%);
    border-bottom: 2px solid rgb(17 17 17 / 45%);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 300ms ease, border-color 300ms ease;
}

details.sidebar-widget[open] > summary.sidebar-widget-title::after {
    transform: rotate(-135deg) translateY(-2px);
    border-color: var(--theme-color);
}

details.sidebar-widget > summary.sidebar-widget-title:hover {
    color: var(--theme-color);
}

details.sidebar-widget > summary.sidebar-widget-title:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 3px;
}

.sidebar-widget-body {
    padding: 0 0 18px;
}

/* Long option lists — makes, colours, features — scroll inside their own
   section rather than pushing the sections below them off the screen,
   which is the whole point of collapsing them. */
.sidebar-widget-scroll {
    max-height: 226px;
    overflow-y: auto;
    padding-right: 4px;
}

.sidebar-widget-scroll::-webkit-scrollbar {
    width: 5px;
}

.sidebar-widget-scroll::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgb(17 17 17 / 18%);
}

/* --- inputs inside the sidebar ---------------------------------- */
.sidebar-widget-body label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
}

.sidebar-widget-body .checkbox-item label {
    display: flex;
    margin: 0;
    font-weight: 400;
    font-size: 15px;
    color: var(--body-color);
}

.sidebar-widget-body input[type="number"],
.sidebar-widget-body input[type="text"],
.sidebar-widget-body select {
    width: 100%;
    padding: 11px 14px;
    margin-bottom: 12px;
    font-family: var(--secondary-font);
    font-size: 15px;
    line-height: 22px;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid rgb(17 17 17 / 12%);
    border-radius: 8px;
    transition: border-color 300ms ease;
}

.sidebar-widget-body input[type="number"]:focus,
.sidebar-widget-body select:focus {
    border-color: var(--theme-color);
}

.sidebar-range,
.sidebar-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sidebar-range input,
.sidebar-pair input,
.sidebar-pair select {
    margin-bottom: 0;
}

.sidebar-widget-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px solid rgb(17 17 17 / 8%);
}

.sidebar-widget-actions .btn-style-four {
    padding: 14px 30px;
}

.sidebar-widget-clear {
    font-size: 15px;
    color: var(--body-color);
    text-decoration: underline;
    transition: color 300ms ease;
}

.sidebar-widget-clear:hover {
    color: var(--theme-color);
}

/* --- layout toggle in the toolbar ------------------------------- */
.vehicle-layout-toggle {
    display: inline-flex;
    padding: 3px;
    border: 1px solid rgb(17 17 17 / 12%);
    border-radius: 8px;
    background: #fff;
}

.vehicle-layout-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border-radius: 6px;
    font-size: 15px;
    color: rgb(17 17 17 / 45%);
    transition: all 300ms ease;
}

.vehicle-layout-toggle__btn:hover {
    color: var(--theme-color);
}

.vehicle-layout-toggle__btn.is-active {
    color: #fff;
    background: var(--theme-color);
}

/* --- list layout (car-listing-3) -------------------------------- */
/* The card splits into a row internally, so the photograph has to fill
   its half's height — otherwise a 4:3 image beside a taller details
   column leaves a white gap under the picture. */
.single-featured-car-block.style_two.is-list .row {
    align-items: stretch;
}

.single-featured-car-block.style_two.is-list .single-featured-car-image {
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.single-featured-car-block.style_two.is-list .single-featured-car-image a {
    display: block;
    height: 100%;
}

.single-featured-car-block.style_two.is-list .single-featured-car-image img,
.single-featured-car-block.style_two.is-list .single-featured-car-image picture {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
}

.single-featured-car-block.style_two.is-list .single-featured-car-content {
    padding: 18px 18px 18px 6px;
}

/* --- grid layout (car-listing-2) -------------------------------- */
/* Two cards per row in a col-8 column are narrow, so the six spec cells
   need to hold their two-across rows rather than wrapping to one. */
.car-listing-results--grid .featured-car-info-outer {
    gap: 4px 14px;
}

.car-listing-results--grid .single-featured-car-info li {
    font-size: 14px;
}

/* Equal heights per row, so a card with fewer recorded specs does not
   leave the one beside it floating. */
.car-listing-results .row > [class*="col-"] {
    display: flex;
}

.car-listing-results .row > [class*="col-"] > .single-featured-car-block {
    width: 100%;
}

/* A sold car stays published for SEO; it should read as unavailable. */
.single-featured-car-block.is-unavailable .single-featured-car-image img {
    filter: grayscale(1);
    opacity: 0.85;
}

/* --- responsive ------------------------------------------------- */
@media (max-width: 991px) {

    /* Sidebar above the results once stacked. Every section except the
       first two is collapsed, so it costs little vertical space. */
    .car-listing-sidebar {
        margin-bottom: 40px;
    }

    .single-featured-car-block.style_two.is-list .single-featured-car-image img {
        min-height: 220px;
    }

    .single-featured-car-block.style_two.is-list .single-featured-car-content {
        padding: 18px 12px;
    }
}

@media (max-width: 767px) {
    .car-listing-sidebar {
        padding: 22px 18px;
    }

    details.sidebar-widget > summary.sidebar-widget-title {
        font-size: 16px;
        padding: 14px 0;
    }

    .single-featured-car-block.style_two.is-list .single-featured-car-image img {
        min-height: 190px;
    }
}

/* The theme's own h3.sidebar-widget-title is 28px, built for a sidebar of
   three widgets. Beside seventeen 17px <summary> titles it read as a
   heading for the whole sidebar rather than a peer of the sections, so the
   search widget's title is brought down to match them. */
.car-listing-sidebar h3.sidebar-widget-title {
    font-size: 17px;
    line-height: 26px;
    margin-bottom: 14px;
}

/* The shortlist heart sits inside .single-featured-car-image, which the
   theme gives position:relative AND overflow:hidden. Left in normal flow
   the button rendered below the photograph and was clipped away entirely
   — present in the markup, invisible on the page. Pinned to the corner. */
.single-featured-car-image .js-shortlist-form {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    margin: 0;
}

.single-featured-car-image .shortlist-btn--heart {
    box-shadow: 0 6px 18px rgb(17 17 17 / 18%);
}

/* Compare sits directly under the "View Vehicle" button inside
   .single-featured-car-book-btn, which is a plain block — so the two were
   touching. It is a secondary action and should read as one. */
.single-featured-car-book-btn .js-compare-form {
    margin-top: 14px;
}

/* --- pagination -------------------------------------------------- */
/* The theme styles .pagination li a (60px round, .current filled) in
   global.css but centres nothing and reserves no space for a gap marker,
   because its own demo pager is a fixed run of three pages. */
.pagination-wrapper .pagination {
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

.pagination-wrapper .pagination li {
    line-height: 1;
}

/* Bootstrap also defines .pagination and loads first; these two carry its
   list styling off in case the cascade order ever changes. */
.pagination-wrapper .pagination li a {
    text-decoration: none;
    box-shadow: 0 6px 20px rgb(17 17 17 / 6%);
}

.pagination-wrapper .pagination-gap span {
    display: inline-block;
    width: 34px;
    text-align: center;
    font-size: 18px;
    color: rgb(17 17 17 / 40%);
}

@media (max-width: 767px) {

    /* 60px circles times seven will not fit a phone. */
    .pagination-wrapper .pagination li a {
        height: 46px;
        width: 46px;
        line-height: 46px;
        font-size: 16px;
    }
}

/* Feature group names come straight from the admin, where they were typed
   lowercase ("interior", "safety"). Capitalising here rather than editing
   the rows keeps the admin free to name them however it likes. */
details.sidebar-widget > summary.sidebar-widget-title {
    text-transform: capitalize;
}

/* ==================================================================
   Compare vehicles
   ==================================================================
   Carola has no comparison page, so this is built from its tokens.

   The table is CSS grid rather than a <table>: every row needs the same
   column widths, and the number of columns changes with how many cars
   are being compared (1 to 4). `--compare-cols` is set inline from the
   count and inherits down to each row, so one number drives the whole
   layout.

   It scrolls horizontally inside .compare-scroll rather than widening
   the page — a label column plus four cars will not fit a phone.
   ================================================================== */

.compare-section {
    background: var(--grey-bg);
}

/* --- empty state -------------------------------------------------- */
.compare-empty {
    max-width: 560px;
    margin: 0 auto;
    padding: 56px 32px;
    text-align: center;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
}

.compare-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: var(--grey-bg);
    color: var(--theme-color);
    font-size: 30px;
}

.compare-empty h3 {
    font-family: var(--primary-font);
    font-size: 26px;
    line-height: 34px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.compare-empty p {
    color: var(--body-color);
    margin-bottom: 26px;
}

/* --- head bar ----------------------------------------------------- */
.compare-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.compare-head__count {
    font-family: var(--primary-font);
    font-size: 18px;
    color: var(--primary-color);
}

.compare-head__count strong {
    font-size: 22px;
}

.compare-head__count span {
    color: var(--body-color);
    font-size: 15px;
}

.compare-head__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.compare-share,
.compare-clear {
    font-family: var(--secondary-font);
    font-size: 15px;
    color: var(--body-color);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 300ms ease;
}

.compare-share i {
    margin-right: 6px;
    color: var(--theme-color);
}

.compare-share:hover,
.compare-clear:hover {
    color: var(--theme-color);
}

.compare-clear {
    text-decoration: underline;
}

/* --- the grid ----------------------------------------------------- */
.compare-scroll {
    overflow-x: auto;
    padding-bottom: 6px;
}

.compare-grid {
    min-width: calc(220px + (var(--compare-cols, 2) * 200px));
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
    overflow: hidden;
}

.compare-row {
    display: grid;
    grid-template-columns: 220px repeat(var(--compare-cols, 2), minmax(190px, 1fr));
    border-top: 1px solid rgb(17 17 17 / 7%);
}

.compare-row:first-child {
    border-top: 0;
}

.compare-cell {
    padding: 14px 18px;
    font-family: var(--secondary-font);
    font-size: 15px;
    line-height: 24px;
    color: var(--primary-color);
    border-left: 1px solid rgb(17 17 17 / 6%);
}

.compare-cell:first-child {
    border-left: 0;
}

.compare-cell--label {
    font-weight: 500;
    color: var(--body-color);
    background: rgb(246 246 246 / 60%);
}

.compare-cell__group {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(17 17 17 / 38%);
}

.compare-cell--flag {
    text-align: center;
}

.compare-cell--flag i {
    color: #12a150;
    font-size: 15px;
}

.compare-cell--flag span {
    color: rgb(17 17 17 / 28%);
}

/* Group heading spans the full width. */
.compare-row--group {
    grid-template-columns: 1fr;
    background: var(--primary-color);
}

.compare-cell--group {
    font-family: var(--primary-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    border-left: 0;
}

/* A row where the cars actually differ is the decision; the rest is
   confirmation. Marked with a rule down the label, not a loud fill,
   because on some comparisons most rows differ. */
.compare-row.is-different .compare-cell--label {
    box-shadow: inset 3px 0 0 var(--theme-color);
    color: var(--primary-color);
    font-weight: 600;
}

/* --- car header cells --------------------------------------------- */
.compare-row--cars {
    align-items: end;
}

.compare-cell--car {
    padding: 18px;
}

.compare-car__image {
    display: block;
    margin-bottom: 14px;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.compare-car__image img,
.compare-car__image picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-car__title {
    font-family: var(--primary-font);
    font-size: 17px;
    line-height: 25px;
    font-weight: 600;
    margin-bottom: 6px;
}

.compare-car__title a {
    color: var(--primary-color);
    transition: color 300ms ease;
}

.compare-car__title a:hover {
    color: var(--theme-color);
}

.compare-car__price {
    font-family: var(--primary-font);
    font-size: 20px;
    font-weight: 600;
    color: var(--theme-color);
    margin-bottom: 14px;
}

.compare-car__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.compare-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgb(17 17 17 / 14%);
    border-radius: 50%;
    background: #fff;
    color: rgb(17 17 17 / 50%);
    cursor: pointer;
    transition: all 300ms ease;
}

.compare-remove:hover {
    color: #fff;
    background: var(--theme-color);
    border-color: var(--theme-color);
}

/* --- differences-only toggle -------------------------------------- */
/* A checkbox and :has(), so hiding the identical rows costs no
   JavaScript. The checkbox sits in the corner cell; :has() lets a rule
   on the grid react to it however deeply it is nested, which a sibling
   combinator could not do. */
.compare-diff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    cursor: pointer;
}

.compare-grid:has(#compare-diff-only:checked) .compare-row.is-same {
    display: none;
}

/* --- responsive --------------------------------------------------- */
@media (max-width: 767px) {
    .compare-row {
        grid-template-columns: 140px repeat(var(--compare-cols, 2), minmax(160px, 1fr));
    }

    .compare-grid {
        min-width: calc(140px + (var(--compare-cols, 2) * 170px));
    }

    .compare-cell {
        padding: 12px 14px;
        font-size: 14px;
    }

    .compare-empty {
        padding: 40px 22px;
    }
}


/* ==================================================================
   Vehicle detail — Carola car-details
   ==================================================================
   The page follows the theme's structure, so most of it is already
   styled: .car-details-outerbox (the mosaic grid), .car-details-image,
   .car-details-feature-box / -icon / -content, .car-details-included-list,
   .car-details-top-highlights-list and .car-details-right-sidebar all
   come from style.css.

   What is left is what Carola's demo never needed:

     * a mosaic holding real photographs (its images are pre-cropped, so
       it sets no heights and the frames came out ragged)
     * .car-details-infobox and .car-details-sub-title, which the theme
       marks up but never styles
     * label/value pairs in the highlights list — the theme's list items
       are single sentences
     * the price box and the restored enquiry / finance partials
   ================================================================== */

/* --- photo mosaic ------------------------------------------------- */
/* The theme spans the first image 3x2 in a four-column grid but sets no
   sizes, because its own three files are already the right shapes. Real
   uploads are not, so each frame gets a ratio and the photograph is
   cropped to fill it. */
.car-details-outerbox {
    /* minmax(0,1fr) rather than 1fr: a bare 1fr is floored by the content,
       so the two side frames grew to their photographs' intrinsic height and
       the right column ended up taller than the big frame beside it, leaving
       a band of empty grey under the mosaic. Flooring at 0 makes both rows
       exactly half the big frame, so the columns finish level. */
    /* The theme uses `auto auto auto auto`, which sizes each column to its
       content; with the frames emptied that collapsed the last column to a
       sliver. Four equal columns instead. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
}

.car-details-image {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    min-height: 0;
}

.car-details-image:nth-child(1) {
    aspect-ratio: 3 / 2;
}

/* Taken out of flow so the photograph's intrinsic height cannot inflate
   its grid row. With the frames empty of in-flow content, the row heights
   come from the big frame's 3:2 ratio spanning both rows, so the two side
   frames add up to exactly the height beside them. */
.car-details-image a {
    position: absolute;
    inset: 0;
    display: block;
}

.car-details-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}

.car-details-image:hover img {
    transform: scale(1.05);
}

/* One photograph: no mosaic to build, so one frame the width of the page. */
.car-details-single .car-details-image {
    aspect-ratio: 16 / 9;
}

/* Photographs beyond the three on show stay in the fancyBox group so its
   arrows walk the whole set. They must not occupy the grid. */
.car-details-hidden-photo {
    display: none;
}

.car-details-more {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 40px;
    font-family: var(--primary-font);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgb(17 17 17 / 72%);
}

.vd-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 40px;
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    color: var(--primary-color);
    border: 1px solid rgb(17 17 17 / 12%);
}

.car-details-image .vd-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
}

.vd-badge.is-sold {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
}

.vd-badge.is-reserved {
    background: #b54708;
    border-color: #b54708;
    color: #fff;
}

/* --- headings the theme marks up but does not style --------------- */
.car-details-title {
    font-family: var(--primary-font);
    font-size: 32px;
    line-height: 42px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 26px;
}

.car-details-sub-title {
    font-family: var(--primary-font);
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.car-details-about-box,
.car-details-included-excluded,
.car-details-highlights {
    padding-top: 34px;
    margin-top: 34px;
    border-top: 1px solid rgb(17 17 17 / 8%);
}

.car-details-about-text {
    color: var(--body-color);
}

.car-details-about-text p:last-child {
    margin-bottom: 0;
}

.car-details-feature-content h6 {
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--body-color);
    margin: 0;
}

.car-details-feature-content span {
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}

.car-details-included-list,
.car-details-top-highlights-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.car-details-included-list li i {
    color: var(--theme-color);
    flex: 0 0 auto;
}

/* The theme's list item is one sentence; a specification is a pair, so
   the value is pushed to the right and the label carries the space. */
.car-details-top-highlights-list li {
    margin-bottom: 0 !important;
    padding: 11px 0;
    border-bottom: 1px solid rgb(17 17 17 / 8%);
}

.car-details-top-highlights-list li i {
    color: #12a150;
    font-size: 14px;
    flex: 0 0 auto;
}

.car-details-top-highlights-list li span {
    color: var(--body-color);
}

.car-details-top-highlights-list li strong {
    margin-left: auto;
    padding-left: 16px;
    font-family: var(--primary-font);
    font-weight: 600;
    color: var(--primary-color);
    text-align: right;
}

.car-details-spec-group {
    font-family: var(--primary-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-color);
    margin: 24px 0 6px;
}

.car-details-spec-group:first-of-type {
    margin-top: 8px;
}

/* --- sidebar ------------------------------------------------------ */
/* .car-details-right-sidebar is already a white padded card, so the
   panels inside it must not each be another one. */
.car-details-right-sidebar {
    position: sticky;
    top: 24px;
}

.vd-price-box {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgb(17 17 17 / 8%);
}

.vd-price {
    font-family: var(--primary-font);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--theme-color);
}

.vd-price-was {
    font-size: 16px;
    color: var(--body-color);
    text-decoration: line-through;
    margin-top: 2px;
}

.vd-price-monthly {
    margin-top: 8px;
    font-size: 15px;
    color: var(--body-color);
}

.vd-price-monthly strong {
    color: var(--primary-color);
}

/* --- enquiry + finance partials ----------------------------------- */
/* Restored from the pre-theme backup, so their spacing utilities and
   panel classes have no CSS in Carola. Inside the sidebar card they are
   sections, not cards. */
.mb--20 {
    margin-bottom: 20px;
}

.mb--30 {
    margin-bottom: 30px;
}

.car-details-right-sidebar .vehicle-enquiry-block,
.car-details-right-sidebar .finance-calculator {
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid rgb(17 17 17 / 8%);
}

.vehicle-enquiry-block > h2,
.finance-calculator > h4 {
    font-family: var(--primary-font);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--primary-color);
}

.enquiry-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border-bottom: 1px solid rgb(17 17 17 / 10%);
}

.enquiry-tabs li a {
    display: inline-block;
    padding: 8px 2px;
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--body-color);
    border-bottom: 2px solid transparent;
    transition: all 300ms ease;
}

.enquiry-tabs li a:hover,
.enquiry-tabs li a.active {
    color: var(--theme-color);
    border-bottom-color: var(--theme-color);
}

/* The panes were switched by a project script that no longer exists. The
   tab links are real fragment links, so :target does the work and keeps
   working with scripting off. `is-active` is the server's choice — which
   tab was last submitted — and a :target overrides it. */
.enquiry-pane {
    display: none;
}

.enquiry-pane.is-active,
.enquiry-pane:target {
    display: block;
}

.vehicle-enquiry-block:has(.enquiry-pane:target) .enquiry-pane.is-active:not(:target) {
    display: none;
}

.enquiry-pane label,
.calculator-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
}

.enquiry-pane .req,
.calculator-form .req {
    color: var(--theme-color);
}

.enquiry-pane .form-control,
.calculator-form .form-control {
    width: 100%;
    padding: 11px 13px;
    font-family: var(--secondary-font);
    font-size: 15px;
    line-height: 22px;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid rgb(17 17 17 / 12%);
    border-radius: 8px;
}

.enquiry-pane .form-control:focus,
.calculator-form .form-control:focus {
    border-color: var(--theme-color);
    box-shadow: none;
}

.form-error {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: var(--theme-color);
}

.checkbox-inline {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
}

.checkbox-inline label {
    margin: 0;
    font-weight: 400;
    color: var(--body-color);
}

.calculator-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.calculator-result {
    padding: 13px;
    text-align: center;
    background: var(--grey-bg);
    border-radius: 10px;
    font-family: var(--primary-font);
}

.calculator-result--primary {
    background: rgb(255 44 59 / 8%);
    color: var(--theme-color);
}

.finance-disclaimer {
    margin-top: 14px;
    font-size: 13px;
    line-height: 20px;
    color: rgb(17 17 17 / 50%);
}

/* --- responsive --------------------------------------------------- */
@media (max-width: 991px) {

    /* The mosaic's 3x2 span leaves the two small frames unusably thin on
       a tablet, so it becomes a simple two-up. */
    .car-details-outerbox {
        grid-template-columns: 1fr 1fr;
        /* Two stacked bands here, not the desktop 2x1fr split: the second row
           holds the small frames side by side, so it must size to their own
           ratio rather than inherit the tall first row. */
        grid-template-rows: auto auto;
        grid-auto-rows: auto;
    }

    .car-details-image:nth-child(1) {
        grid-area: auto;
        grid-column: 1 / -1;
    }

    .car-details-image:nth-child(n + 2) {
        aspect-ratio: 4 / 3;
    }

    .car-details-right-sidebar {
        position: static;
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .car-details-title {
        font-size: 25px;
        line-height: 34px;
    }

    .car-details-sub-title {
        font-size: 19px;
        line-height: 27px;
    }

    .vd-price {
        font-size: 27px;
        line-height: 35px;
    }

    .car-details-top-highlights-list li {
        flex-wrap: wrap;
    }

    .car-details-top-highlights-list li strong {
        padding-left: 28px;
    }
}

/* --- detail sidebar action buttons -------------------------------- */
/* .vehicle-actions and its two rows had NO CSS left after the theme
   change — the partial came back from the pre-theme backup and its
   styles did not. The buttons are btn-style-* anchors, which are
   inline-block, so with `w-100` on them they stacked with nothing but
   line-height between: they read as sitting on top of one another.
   A flex column with a real gap is all this needed. */
.vehicle-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
}

.vehicle-actions > a,
.vehicle-actions > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
}

/* Shortlist and compare are each a form wrapping a button, so the grid
   children are the forms and the buttons fill them. */
.vehicle-actions__save {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vehicle-actions__save form {
    margin: 0;
}

.vehicle-actions__save .shortlist-btn,
.vehicle-actions__save .compare-btn {
    width: 100%;
    justify-content: center;
}

/* Call / WhatsApp / Print share a row and wrap when there is no space. */
.vehicle-actions__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vehicle-actions__contact > a,
.vehicle-actions__contact > button {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

/* --- room under the enquiry submit -------------------------------- */
/* The submit is the last thing in the pane, and the finance calculator
   opens directly beneath it with only a hairline between. */
.enquiry-pane button[type="submit"] {
    margin-top: 6px;
    margin-bottom: 14px;
}

/* `contain` was the right call while every photograph was a product cutout
   on white. Now that real forecourt photographs are being uploaded — wide
   2.47:1 shots — containing them inside a 3:2 frame left more grey padding
   than picture, and the gallery read as empty. `cover` fills the frame the
   way a photograph is meant to; the cutouts are 1.56:1, near enough to the
   frame that they lose almost nothing. */
.car-details-image img {
    object-fit: cover;
    background: var(--grey-bg);
}

.car-details-image:hover img {
    transform: none;
}

/* --- enquiry confirmation ----------------------------------------- */
.enquiry-thanks-section {
    background: var(--grey-bg);
}

.enquiry-thanks {
    max-width: 640px;
    margin: 0 auto;
    padding: 54px 40px;
    text-align: center;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
}

.enquiry-thanks__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 24px;
    border-radius: 50%;
    font-size: 30px;
    color: #fff;
    background: #12a150;
}

.enquiry-thanks__icon.is-quiet {
    background: var(--grey-bg);
    color: var(--theme-color);
}

.enquiry-thanks h2 {
    font-family: var(--primary-font);
    font-size: 30px;
    line-height: 40px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.enquiry-thanks__lead {
    color: var(--body-color);
    margin-bottom: 26px;
}

/* The reference is the one thing worth writing down, so it is the only
   element on the page given the theme colour. */
.enquiry-thanks__ref {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    margin-bottom: 26px;
    border-radius: 40px;
    background: rgb(255 44 59 / 8%);
}

.enquiry-thanks__ref span {
    font-size: 14px;
    color: var(--body-color);
}

.enquiry-thanks__ref strong {
    font-family: var(--primary-font);
    font-size: 18px;
    color: var(--theme-color);
}

.enquiry-thanks__list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    text-align: left;
}

.enquiry-thanks__list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgb(17 17 17 / 8%);
}

.enquiry-thanks__list li span {
    font-size: 15px;
    color: var(--body-color);
}

.enquiry-thanks__list li strong {
    font-family: var(--primary-font);
    font-weight: 600;
    color: var(--primary-color);
    text-align: right;
}

.enquiry-thanks__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

@media (max-width: 767px) {
    .enquiry-thanks {
        padding: 36px 22px;
    }

    .enquiry-thanks h2 {
        font-size: 24px;
        line-height: 33px;
    }
}

/* The popular-car title link had no colour of its own.
   The theme colours `h5.single-featured-car-title a` but never writes the
   same rule for `h5.single-popular-car-title a`, so on that card — the one
   the Vehicle Group carousel uses — the link fell through to the browser's
   default blue while the heading around it was black. Mirrors what the
   theme already does for its sibling. */
h5.single-popular-car-title a {
    color: rgb(17, 17, 17);
}

h5.single-popular-car-title a:hover {
    color: var(--theme-color);
}

/* ==================================================================
   Detail sidebar and specification — colour by meaning
   ==================================================================
   Every action in the sidebar was btn-style-one, so five buttons in a
   column all read as the same red outline and none of them stood out —
   including the two that matter most, "Book a test drive" and "Finance
   enquiry". Below them the equipment ticks, the specification group
   headings and the monthly-payment tile were red as well, so a page that
   is mostly reference information was carrying eight red elements.

   Red now belongs to the price alone. Each action takes the colour of
   what it does, and the reference lists take the neutral accents. The
   rules sit in this file rather than the palette layer because this file
   loads after it and set the red in the first place.
   ================================================================== */

/* --- sidebar actions ------------------------------------------------ */
.vehicle-actions__btn--drive {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.vehicle-actions__btn--drive:hover {
    color: #fff;
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.vehicle-actions__btn--finance {
    color: var(--accent-violet);
    border-color: var(--accent-violet);
}

.vehicle-actions__btn--finance:hover {
    color: #fff;
    background-color: var(--accent-violet);
    border-color: var(--accent-violet);
}

.vehicle-actions__btn--call {
    color: var(--accent-teal);
    border-color: var(--accent-teal);
}

.vehicle-actions__btn--call:hover {
    color: #fff;
    background-color: var(--accent-teal);
    border-color: var(--accent-teal);
}

/* WhatsApp's own green — anything else on a WhatsApp button looks wrong. */
.vehicle-actions__btn--whatsapp {
    color: #128c4a;
    border-color: #128c4a;
}

.vehicle-actions__btn--whatsapp:hover {
    color: #fff;
    background-color: #128c4a;
    border-color: #128c4a;
}

/* Print is a utility, not an offer. */
.vehicle-actions__btn--print {
    color: var(--ink-muted);
    border-color: rgb(17 17 17 / 18%);
}

.vehicle-actions__btn--print:hover {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* The icons inherit from the button rather than keeping the theme red. */
.vehicle-actions [class*="vehicle-actions__btn--"] i {
    color: inherit;
}

/* --- equipment and specification ------------------------------------ */
/* Equipment the car HAS is a positive, the same green the specification
   list already uses. */
.car-details-included-list li i {
    color: var(--accent-green);
}

/* Specification groups rotate through the accents, so Performance,
   Dimensions and Running Costs are told apart at a glance instead of
   being three identical red labels. */
.car-details-spec-group {
    color: var(--accent-blue);
}

.car-details-spec-group:nth-of-type(4n + 2) {
    color: var(--accent-teal);
}

.car-details-spec-group:nth-of-type(4n + 3) {
    color: var(--accent-amber);
}

.car-details-spec-group:nth-of-type(4n + 4) {
    color: var(--accent-violet);
}

/* The monthly payment is the affordability answer, not an alert. */
.calculator-result--primary {
    background: rgb(18 161 80 / 9%);
    color: var(--accent-green);
}

/* The body-type / trim line above the title was red as well, which put a
   third red element in the same eyeful as the price. It is a label, so it
   reads as one. */
.car-details-infobox .rating-location-box .location,
.car-details-infobox .rating-location-box .location i {
    color: var(--ink-muted);
}

/* The description is three paragraphs; without a gap between them it read as
   one wall of text. */
.car-details-about-text p {
    margin-bottom: 14px;
}

.car-details-about-text p:last-child {
    margin-bottom: 0;
}

/* ==================================================================
   Vehicle video walkaround
   ==================================================================
   Sits under the photo mosaic, where the buyer is already looking at
   the car. The frame holds 16:9 whatever the source, so a YouTube embed
   and a self-hosted MP4 occupy the same shape and the page does not jump
   as one loads.
   ================================================================== */
.vd-video {
    margin-top: 26px;
}

.vd-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.vd-video__frame iframe,
.vd-video__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ==================================================================
   Compare — choosing the cars on the compare page
   ==================================================================
   The listing cards no longer carry a compare toggle. Cars are picked
   here instead, which means the choice is made where the comparison
   happens rather than collected one at a time while browsing.

   Checkbox + :has() rather than JavaScript: ticking a card lights it up
   with no script at all, and the form still submits if :has() is not
   supported.
   ================================================================== */
.compare-picker {
    margin-top: 40px;
    padding-top: 34px;
    border-top: 1px solid rgb(17 17 17 / 8%);
}

.compare-picker__head {
    margin-bottom: 20px;
}

.compare-picker__head h3 {
    margin: 0 0 4px;
    font-family: var(--primary-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
}

.compare-picker__head p {
    margin: 0;
    color: var(--ink-muted);
}

.compare-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.compare-pick {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 10%);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 250ms ease, box-shadow 250ms ease;
}

.compare-pick:hover {
    border-color: rgb(17 17 17 / 24%);
}

/* The control itself is off-screen rather than hidden, so it keeps its
   keyboard focus and its label association. */
.compare-pick input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.compare-pick input[type="checkbox"]:focus-visible ~ .compare-pick__body {
    outline: 2px solid var(--accent-blue);
    outline-offset: 3px;
}

.compare-pick__media {
    flex: 0 0 76px;
    width: 76px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    overflow: hidden;
    background: var(--grey-bg);
    color: var(--ink-muted);
}

.compare-pick__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.compare-pick__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.compare-pick__title {
    font-family: var(--primary-font);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.compare-pick__meta {
    font-family: var(--secondary-font);
    font-size: 12.5px;
    color: var(--ink-muted);
}

.compare-pick__tick {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    font-size: 10px;
    color: transparent;
    background: transparent;
    border: 1px solid rgb(17 17 17 / 20%);
    border-radius: 50%;
    transition: all 200ms ease;
}

.compare-pick:has(input:checked) {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px var(--accent-blue) inset;
}

.compare-pick:has(input:checked) .compare-pick__tick {
    color: #fff;
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.compare-picker__actions {
    margin-top: 22px;
}

@media (max-width: 575px) {
    .compare-picker__grid {
        grid-template-columns: 1fr;
    }

    .compare-picker__actions .btn-style-four {
        width: 100%;
    }
}

/* The header now carries the submit button beside its copy. */
.compare-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

@media (max-width: 575px) {
    .compare-picker__head {
        align-items: stretch;
    }

    .compare-picker__head .btn-style-four {
        width: 100%;
    }
}