:root {
    --invicta-blue: #176ca8;
    --invicta-blue-dark: #000000;
    --invicta-blue-light: #eef7fd;
    --invicta-ink: #111111;
    --invicta-muted: #626b73;
    --invicta-border: #d9e0e5;
    /* --font-vheavy: 800;
    --font-heavy: 700;
    --font-semibold: 600;
    --font-medium: 500;
    --font-regular: 400;
    --font-light: 300;
    lighter fonts for the card, to reduce the visual weight of the text-heavy card*/
    --font-vheavy: 600;
    --font-heavy: 500;
    --font-semibold: 400;
    --font-medium: 400;
    --font-regular: 300;
    --font-light: 200;
}


/*
      Fixed production footprint: 450 x 620.
      In an SRP grid, place the card inside a Bootstrap column and keep
      align-items-stretch on the row.
    */
/*#used-results-box {
display:flex;
flex-wrap:wrap;
align-items:stretch;
justify-content:space-between;
gap:30px;
}*/
.used-result .ad-card {
    background-color: var(--invicta-blue-dark);
    padding: 0;
    height: 100%;
}

.used-result .has-badge {
    border: 1px solid var(--invicta-blue);
}

.invicta-vehicle-card {
    width: min(100%, 450px);
    height: 620px;
    overflow: hidden;
    border: 1px solid var(--invicta-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 16px rgb(17 39 57 / 14%);
    /*flex-grow:1;*/
}

.invicta-vehicle-card__media {
    height: 250px;
    background: #e9eef1;
    overflow: hidden;
}

.invicta-vehicle-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.invicta-vehicle-card__reserved {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    max-width: calc(100% - 82px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .52rem .75rem;
    border-radius: 999px;
    background: var(--category-color);
    color: var(--category-bg);
    font-size: .72rem;
    font-weight: var(--font-vheavy);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.invicta-vehicle-card__promo {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    max-width: calc(100% - 82px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .52rem .75rem;
    border-radius: 999px;
    background: var(--promo-bg);
    color: var(--promo-color);
    font-size: .72rem;
    font-weight: var(--font-vheavy);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.invicta-vehicle-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    max-width: calc(100% - 82px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .52rem .75rem;
    border-radius: 999px;
    background: var(--category-bg);
    color: var(--category-color);
    font-size: .72rem;
    font-weight: var(--font-vheavy);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.invicta-vehicle-card__imagecount {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    padding: .52rem .75rem;
    border-radius: 999px;
    background: var(--button-bg);
    color: #fff;
    font-size: .72rem;
    font-weight: var(--font-vheavy);
    letter-spacing: .06em;
}

.invicta-vehicle-card__favourite {
    position: absolute;
    right: 14px;
    bottom: 2px;
    z-index: 3;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #111;
    color: #fff;
    box-shadow: 0 4px 12px rgb(0 0 0 / 16%);
    font-size: 1.45rem;
}

    .invicta-vehicle-card__favourite:hover,
    .invicta-vehicle-card__favourite:focus-visible {
        background: var(--invicta-blue-dark);
        color: #fff;
    }

/*
      Render this strip only when two or more approved structured features
      exist. The full list remains available to screen readers and as a title.
    */
.invicta-vehicle-card__highlights {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 64px 0 18px;
    background: linear-gradient(90deg, #f4faff, #e6f3fb);
    color: var(--invicta-blue-dark);
    font-size: .78rem;
    font-weight: var(--font-vheavy);
    letter-spacing: .025em;
    text-transform: uppercase;
}

.invicta-vehicle-card__highlights-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.used-result .card-body {
    height: 310px;
    display: grid;
    grid-template-rows: 80px 40px 52px 28px 42px;
    gap: 5px;
    align-content: center;
    padding: 10px 14px;
}

.invicta-vehicle-card__identity {
    position: relative;
    min-width: 0;
    padding-right: 100px;
}

/*
      Do not truncate by character count in the browser.
      Clamp by rendered lines so different letters, fonts and viewports behave
      consistently. Keep full values in title and aria-label attributes.
    */
.invicta-vehicle-card__title,
.invicta-vehicle-card__variant {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.invicta-vehicle-card__title {
    margin: 0 0 3px;
    font-size: 1.3rem;
    font-weight: var(--font-vheavy);
    line-height: 1.08;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.invicta-vehicle-card__variant {
    margin: 0;
    color: #555d64;
    font-size: .82rem;
    font-weight: var(--font-semibold);
    line-height: 1.18;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.invicta-vehicle-card__battery {
    position: absolute;
    top: -20px;
    right: 0;
    width: 100px;
    height: 100px;
    object-fit: contain;
}

    .invicta-vehicle-card__battery .battery {
        padding-top: 30px;
    }

.invicta-vehicle-card__specs {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 7px;
    min-width: 0;
    padding-left: 0;
}

.invicta-vehicle-card__spec {
    min-width: 0;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    border: 1px solid var(--invicta-border);
    border-radius: 7px;
    color: var(--button-bg);
    background: #efefef;
    font-size: 14px;
    font-weight: var(--font-heavy);
    line-height: 1.05;
    text-align: center;
    overflow-wrap: anywhere;
}

    .invicta-vehicle-card__spec i {
        flex: 0 0 auto;
        font-size: 1rem;
    }

.invicta-vehicle-card__finance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: end;
}

.invicta-vehicle-card__finance-item {
    min-width: 0;
}

    .invicta-vehicle-card__finance-item.hide {
        display: none;
    }

.invicta-vehicle-card__finance-label {
    display: block;
    margin-bottom: 2px;
    color: #4e555b;
    font-size: .72rem;
    font-weight: var(--font-vheavy);
    letter-spacing: .025em;
    text-transform: uppercase;
}

/*
      The cash price and monthly payment use the same class, therefore the same
      visual size and weight. Do not override either value independently.
    */
.invicta-vehicle-card__price {
    display: inline;
    color: #000;
    font-size: 1.78rem;
    font-weight: var(--font-vheavy);
    line-height: 1;
    letter-spacing: -.025em;
    white-space: nowrap;
}

.invicta-vehicle-card__price-suffix {
    color: #30363b;
    font-size: .72rem;
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.invicta-vehicle-card__contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding-top: 5px;
    border-top: 1px solid #e1e5e8;
}

.invicta-vehicle-card__contact-link {
    min-width: 0;
    color: #111;
    font-size: .78rem;
    font-weight: var(--font-heavy);
    text-decoration: none;
    white-space: nowrap;
}

    .invicta-vehicle-card__contact-link:hover,
    .invicta-vehicle-card__contact-link:focus-visible {
        color: var(--invicta-blue-dark);
        text-decoration: underline;
    }

.invicta-vehicle-card__contact-location {
    display: flex;
    align-items: center;
    min-width: 0;
}

    .invicta-vehicle-card__contact-location span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.invicta-vehicle-card__contact i {
    flex: 0 0 auto;
    margin-right: 6px;
    font-size: .98rem;
}

.invicta-vehicle-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

    .invicta-vehicle-card__actions .btn {
        height: 42px;
        display: grid;
        place-items: center;
        border: 0;
        /*        border-radius: 6px;
*/ font-size: .82rem;
        font-weight: var(--font-vheavy);
        letter-spacing: .02em;
        text-transform: uppercase;
        margin-top: 5px;
    }

.btn-invicta {
    background: var(--button-bg);
    color: #fff;
}

    .btn-invicta:hover,
    .btn-invicta:focus-visible {
        background: var(--button3-bg);
        color: #fff;
    }

.btn-invicta-dark {
    background: #000;
    color: #fff;
}

    .btn-invicta-dark:hover,
    .btn-invicta-dark:focus-visible {
        background: #272727;
        color: #fff;
    }

/*
      If the SRP allows cards narrower than about 390px, switch the specification
      area to two columns and allow the card to grow vertically. At the intended
      450px width, every card remains exactly 620px high.
    */
@media (max-width: 389.98px) {
    .used-result {
        height: auto;
        /*        min-height: 620px;
*/
    }

        .used-result .card-body {
            height: auto;
            grid-template-rows: auto;
        }

    .invicta-vehicle-card__specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invicta-vehicle-card__contact {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }
}
/* now the css for the representative example */
#representative-example-card.hide {
    display:none;
}

.inv-finance__header {
    padding: 22px 12px;
    background: radial-gradient( circle at 88% 18%, rgba(105, 242, 184, .35), transparent 34% ), linear-gradient( 145deg, #0b4d2b 0%, #0d6b3d 58%, #19b35f 100% );
    color: #fff;
}

.inv-finance__body {
    padding: 12px 12px 12px;
}

.inv-finance__heading {
    margin: 0;
    color: inherit;
    font-size: 22px;
    line-height: 1.2;
}

.inv-finance__type {
    display: inline-flex;
    margin-top: 8px;
    padding: 5px 9px;
    border-radius: 0;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.inv-finance__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

    .inv-finance__table tr {
        border-bottom: 1px solid #e2e9ef;
    }

        .inv-finance__table tr:nth-child(odd) {
            background: #f4f7fa;
        }

    .inv-finance__table th,
    .inv-finance__table td {
        padding: 7px 10px;
        vertical-align: top;
        font-size: 13px;
        line-height: 1.3;
    }

    .inv-finance__table th {
        padding-right: 16px;
        color: #516173;
        font-weight: 400;
        text-align: left;
    }

    .inv-finance__table td {
        color: #10243e;
        font-weight: 700;
        text-align: right;
    }

.inv-finance__note {
    margin: 18px 0 0;
    padding-top: 10px;
    color: #657384;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 380px) {
    body {
        padding: 12px;
    }

    .inv-finance__header,
    .inv-finance__body {
        padding: 20px;
    }
}