﻿
main {
    align-items: start;
    /* background-color: #e0e4e2; */
    background-color: var(--page-bg-colour);
    background-color: var(--colour-base-4);
    padding: 0 !important;
}

.page-header {
    align-self: stretch;
}

section {
    width: 100%;
}

section.car-section {
    /*background-color: #f3f8f6;*/
    /*display: grid;
    grid-template-columns: 1fr minmax(0,98rem) 1fr;*/
    border-bottom: 1.5rem solid var(--colour-base-5);
}

/*section.car-section::before {
    content: "";
    grid-column: 1;
}*/

/*section.car-section::after {
    content: "";
    grid-column: 3;
}*/

.car-container {
    --bg: #fff;
    --colour: inherit;
    --border-colour: transparent;
    --border-width: 1px;
    --border-style: none;
    /*--divider-colour: #0002;
    --divider-colour: #d6d9ce;*/
    --divider-colour: #d9d9d5;
    --divider-colour: #ccd4d3;
    --divider-colour: var(--colour-base);
    --margin-top: 0;
    --margin-bottom: 0;
    --margin-x: 1rem;
    --padding-x-1: 0.62rem;
    --padding-y-1: 1rem;
    --padding-x-05: calc(var(--padding-x-1) * 0.5);
    --padding-y-05: calc(var(--padding-y-1) * 0.5);
    --padding-x-2: calc(var(--padding-x-1) * 1.38);
    --padding-y-2: calc(var(--padding-y-1) * 1.38);
    --padding-x-3: calc(var(--padding-x-1) * 1.62);
    --padding-y-3: calc(var(--padding-y-1) * 1.62);
    --padding-x-4: calc(var(--padding-x-1) * 2);
    --padding-y-4: calc(var(--padding-y-1) * 2);
    --padding-1: var(--padding-y-1) var(--padding-x-1);
    --gap: 1rem;
    /*grid-column: 2;*/
    display: grid;
    grid-template-columns: 100%;
    gap: var(--gap);
    padding: 0;
}

.car-swatch {
    display: flex;
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.25rem;
    border: 2px solid #fff;
}


.car-grid {
    --grid-gap: 0 2rem;
    display: grid;
    /*grid-template-columns: 1fr 35rem;*/
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content 1fr auto auto;
    gap: var(--grid-gap);
    /*grid-column: 1;*/
    grid-row: 1;
}
.car-features-grid {
    --grid-gap: 1rem 2rem;
    display: grid;
    gap: var(--grid-gap);
}

.car-header {
    /*grid-column: 1;
    grid-row: 1/3;*/
    grid-row: 1;
}

.car-colours {
    grid-column: 1;
    grid-row: 4;
}

.car-specs {
    /*grid-column: 1;
    grid-row: 5;*/
}

.car-img {
    /*grid-column: 1;*/
    grid-row: 2;
}
.car-features {
    /*grid-row: 4;*/
}
.car-cap {
    /*grid-row: 5;*/
}
.car-specs {
    /*grid-row: 6;*/
}

.car-cta {
    grid-column: 2;
    grid-row: 1/4;
}

.car-pricing {
    /*grid-column: 2;
    grid-row: 1 / -1;*/
    grid-row: 2;
}

.car-variants {
    /*grid-column: 1/-1;
    grid-row: 7;*/
    /*margin-top: 2rem;*/
    padding-right: 1.5rem;
}

.car-detail {
    --item-border-colour: var(--colour-base-4);
    --item-border-radius: 0.62rem;
    --item-bg: var(--colour-base);
    /*--item-bg: #fff;*/
    --header-bg: transparent;
    --content-bg: transparent;
    /*padding: 0 0 3.8rem 0;
    min-height: 100vh;*/
    position: relative;
}

.car-detail .ca-card.car-data-card {
    /*margin-bottom: 1rem;*/
  --card-border-style: solid;
  --card-border-colour: var(--item-border-colour);
  --border-radius: var(--item-border-radius);
  --card-padding-x: 1.5rem;
  --card-bg: var(--item-bg);
  --header-bg: var(--header-bg);
  --content-bg: var(--content-bg);
  --header-padding: calc(var(--card-padding-y) * 1.38) var(--card-padding-x) var(--card-padding-y);
  overflow: hidden;
  /*box-shadow: 0 0 5px var(--item-border-colour);*/
  z-index: 1;
}
.car-detail .car-img + .ca-card.car-features-card {
    /*border-width: 0.4rem 1px;*/
  --card-padding-x: 0;
  --border-radius: 0;
    outline: 0.4rem solid var(--item-border-colour);
    box-shadow: 0 0 3.2rem 2rem var(--item-border-colour);
    /*margin: 0 1.62rem; */
}
.car-detail .ca-card.car-features-card + .ca-card.car-features-card {
    margin-top: 1rem;
}
.ca-card.car-features-card {
  --card-padding-x: 0;
}
.ca-card.car-data-card {

}
.car-data-card .ca-card-list-item .cap-name {
  --text-wght: 660;
  margin-inline-end: auto;
}
.car-data-card .ca-card-list {
    display: grid;
}
.car-data-card.car-key-figures .ca-card-list {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}


.car-props {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0;
    /*border: 1px solid var(--item-border-colour);*/
}

.car-grid-group-1 {
    display: grid;
    background-image: radial-gradient(closest-side, white, 68%, transparent);
}
.car-grid-group-2 {
    z-index: 1;
}
.car-grid-group-3 {
    padding-bottom: 3rem;
}

@media (width < 32rem){
    .car-prop-card:nth-of-type(2n){
        /*border-left: 2px solid var(--item-border-colour);*/
    }
    .car-prop-card:first-child, .car-prop-card:first-child + .car-prop-card {
        /*border-bottom: 2px solid var(--item-border-colour);*/
    }
}
@media (min-width: 32rem) {
    .car-props {
        grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    }
    .car-prop-card + .car-prop-card {
        border-left: 1px solid var(--item-border-colour);
    }
}
@media (min-width: 35.5rem) {
    .car-container {
        --padding-x-1: 1rem;
        --padding-y-1: 1rem;
        /*--padding-x-2: calc(var(--padding-x-1) * 1.38);
        --padding-y-2: calc(var(--padding-y-1) * 1.38);
        --padding-x-3: calc(var(--padding-x-1) * 1.62);
        --padding-y-3: calc(var(--padding-y-1) * 1.62);*/
    }
    .car-detail .car-img + .ca-card.car-features-card {
        margin: 0;
        --card-padding-x: 1.5rem;
    }
}
@media (min-width: 64rem) {
    .car-container {
        --gap: 1rem 1rem;
        align-content: start;
        align-items: start;
        grid-template-columns: 1fr 30rem;
        grid-template-rows: min-content 1fr;
    }
    .car-grid-group-1 {
        display: grid;
        align-content: start;
        align-items: start;
        grid-column: 1;
        grid-row: 1;
    }
    .car-grid-group-2 {
        display: grid;
        grid-column: 2;
        grid-row: 1 / -1;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .car-grid-group-3 {
        display: grid;
        grid-column: 1;
        grid-row: 2;
    }
    .car-grid {
        grid-column: 1;
    }
    .car-pricing {
        /*grid-column: 2;*/
        /*grid-row: 1 / -1;*/
    }
}
@media (min-width: 80rem) {
    .car-container {
        --gap: 1rem 4rem;
    }
    .car-data-card .ca-card-list {
        gap: 0 var(--card-padding-x);
        grid-template-columns: 1fr 1fr;
    }
    .car-data-card .ca-card-list .ca-card-list-item {
        border-top: var(--list-border-width, 1px) var(--list-border-style, solid) var(--card-divider-colour, transparent);
        /*border-bottom: var(--list-border-width, 1px) var(--list-border-style, solid) var(--card-divider-colour, none);*/
    }
    .car-data-card .ca-card-list .ca-card-list-item:nth-last-child(2):nth-child(even)::after {
        content:"";
        /*flex: 0 0 100%;*/
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: var(--list-border-width, 1px);
        border-top: var(--list-border-width, 1px) var(--list-border-style, solid) var(--card-divider-colour, transparent);
    }
    .car-data-card .ca-card-list .ca-card-list-item:nth-last-child(2):nth-child(even) {
        position: relative;
        /*border-bottom: none;*/
        /*flex-flow: row wrap;
        border-bottom: var(--list-border-width, 1px) var(--list-border-style, solid) var(--card-divider-colour, transparent);*/
    }

    .car-data-card:has(.ca-card-list) {
        --list-padding: 0 var(--card-padding-x) 1rem var(--card-padding-x);
        --list-item-padding: var(--card-padding-y) var(--padding-x-05) var(--card-padding-y) 0;
    }
}


.car-grid.car-detail::before {
    content: "";
    position: absolute;
    right: calc(var(--gap) * -1);
    aspect-ratio: 1.5;
    top: 0;
    left: 0;
    background: radial-gradient(ellipse farthest-side at 50% 40%, #fff 16%, 78%,transparent);
}


.car-detail .ca-card > details.ca-card,
.car-prop-card {
    --card-bg: transparent;
  /*--header-bg: var(--header-bg);
  --content-bg: var(--content-bg);
  --border-radius: var(--item-border-radius);*/
   --header-bg-hover: var(--colour-base);
}
.car-detail .ca-card > details.ca-card {
    transition: var(--card-transition-out);
}
.car-detail .ca-card > details.ca-card:has(summary:hover) {
  --card-bg: var(--colour-base);
  transition: var(--card-transition-in);
}



.car-header {
    margin: var(--padding-y-3) 0 0 0;
    padding: var(--padding-y-1) var(--padding-x-3);
    position: relative;
    font-size: var(--font-size-h1);
}
.car-heading {
    --text-wght: 640;
    margin: 0;
}
.car-subheading {
    --text-wght: 400;
    margin: 0;
    font-size: 0.62em;
}

.car-img {
    position: relative;
    /*background: radial-gradient(50% 50%, #fff 56%, 88%,transparent);*/
    background: radial-gradient(ellipse farthest-side at 50% 100%, #fff 0%, 68%,transparent);
    background-repeat: no-repeat;
    /*background-size: 100% 100%;
    background-position: 50% 100%;*/
    /*background-size: cover;*/
    overflow: hidden;
}

.car-variant-colour-opts {
    display: grid;
    grid-template-columns: auto auto;
      justify-content: start;
      gap: 1rem;
      font-size: 1rem;
}

.car-colours {
    padding: var(--padding-1);
    /*background-color: #fff;*/
    border-top: 1px solid var(--divider-colour);
    display: flex;
    justify-content: center;
}

.car-variants {
    /*border-top: 0.5rem solid var(--divider-colour);*/
    /*padding: var(--padding-1) 0;*/
    padding: 0;
    /*background-color: #fff;*/
}

.car-section .car-pricing {
    /*background-color: #fff;*/
    /*padding: var(--padding-y-3) 0;*/
    /*padding: 2.5rem 0;*/
    /*grid-column: 2;*/
    overflow-y: clip;
}

.car-pricing-wrapper {
    --bg-pricing: #e6e8df;
    --bg-pricing: #e6e6e3;
    --bg-pricing: #dae0df;
    --bg-pricing: #fff;
    background-color: var(--bg-pricing);
    /*position: sticky;
    top: 0;*/
    display: grid;
    align-content: start;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    /*box-shadow: 0 0 4px -2px #0006, 0 0 30px -8px #0003;
    box-shadow: var(--box-shadow-5);
    box-shadow: 0 0 8px -4px rgba(0,0,0,.2),0 0 19px 2px rgba(0,0,0,.08),0 0 24px 4px rgba(0,0,0,.08);*/
}

.car-pricing-card {
    --header-bg: var(--bg-pricing);
    --content-bg: var(--bg-pricing);
    --card-bg: var(--bg-pricing);
}

.car-pricing-divider {
    margin: 1.5rem var(--margin-x);
}

.car-section .car-pricing .car-pricing-sale .price .amount {
    font-size: 2.5rem;
    height: 1em;
    line-height: 1;
    --text-opsz: 36;
    --text-wght: 600;
}

.car-section .car-pricing-header {
    /*margin: 0 var(--margin-x) 1.2rem;*/
    padding: var(--padding-y-3) var(--padding-x-3) var(--padding-y-1);
    /*background-color: #d6e5e8;*/
    border-bottom: 1px solid #45869d10;
    border-top: 4px solid var(--divider-colour);
    /*color: #fff;*/
}

.car-pricing-heading {
    margin: 0;
    /*--text-wght: 500;*/
    --text-opsz: 30;
    /*--letter-spacing: var(--letter-spacing-6);*/
    font-size: var(--fs-3-rem);
}

.car-cta {
    margin: var(--padding-y-3) 0 0 0;
    padding: var(--padding-y-3) var(--padding-x-3);
    /*background-color: #fff;
    border-bottom: 1px solid var(--divider-colour);*/

    padding: var(--padding-y-1) var(--padding-x-1);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: #fffe;
    box-shadow: var(--elevation-z11);
}

.car-cta .container {
    display: grid;
    align-items: start;
    flex-flow: column;
    grid-template-columns: auto 24rem;
    gap: 0.8rem 2rem;
    grid-template-rows: auto min-content;
}

/*.car-pricing-content {
    box-shadow: var(--elevation-z4);
    box-shadow: var(--elevation-z4);
    border-radius: var(--border-radius-5);
    border: 1px solid transparent;
    border: 1px solid #c9dadd;
    overflow: auto;
}*/

.car-pricing-detail {
    background-color: #fff;
    background-color: #f2f2f2;
}

.car-section [data-prices-container] {
    /*--bg-colour: var(--colour-secondary-alt-8);
  --bg-colour-active: #393d46;*/
    /*--colour: var(--colour-secondary-alt-1);*/
    --colour: #faffff;
    --colour-active: #e7eff3;
    --colour-active: #f5f6f6;
    --border-colour: var(--colour-secondary-alt-7);
    --divider-colour: #0003;
    --divider-colour-active: #fff5;
    /*--bg-colour: var(--colour-secondary-light-3);*/
    --bg-colour: #86a7a8;
    --bg-colour-active: #45869d;
    /*--bg-colour-active: #414545;
    --bg-colour-active: #1c6f8c;*/
    /*background-image: linear-gradient(#45869d22, 10%, var(--bg-colour));
    background-size: 100% 1rem;
    background-repeat: no-repeat;*/

    /*--bg-colour: #566566;
    --colour: #f6f9fa;*/
    --bg-colour: #c7dcdd;
    --colour: var(--colour-base-12);
    --divider-colour: #888e8f;
}

.car-section .car-pricing-sale {
    --bg-colour: #c7dcdd;
}

.car-section .car-pricing-sale-prices {
    padding: var(--padding-y-2) var(--padding-x-3) var(--padding-y-3);
    background-color: var(--bg-colour-active);
    color: var(--colour-active);
    border-top: 1px solid var(--border-colour);
    border-bottom: 1px dotted var(--border-colour);
    grid-template-columns: auto auto;
    align-items: start;
    justify-content: center;
    display: grid;
    gap: 3rem;
    grid-template-columns: min-content min-content;
    grid-template-row: min-content 1fr;
}
.car-section .car-pricing-sale-prices.no-pricing {
    background-color: var(--bg-colour);
    color: var(--colour);
}

.car-section .car-pricing-sale  .car-pricing-item {
    /*display: flex;
    flex-flow: column wrap;
    align-content: center;*/
}
.car-section .car-pricing-sale  .title {
    margin-bottom: 0.125em;
    font-size: 1.25rem;
}

.car-section .car-pricing-sale .sale .price {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
}

.car-section .car-pricing-sale .sale .title {
    --text-opsz: 20;
    --text-wght: var(--font-weight-normal);
    /*font-size: 1rem;*/
    /*margin: 0;*/
}

.car-section .car-pricing-sale .sale .price .amount {
}

.car-section .car-pricing-sale .finance .price {
    display: flex;
    align-items: flex-start;
    gap: 0.25em;
    /*height: auto;*/
}

.car-section .car-pricing-sale .finance {
    position: relative;
    /*grid-column: 2;
    grid-row: 1;*/
    /*align-items: end;
    display: flex;
    flex-direction: column;*/
}
.car-section .car-pricing-sale .finance::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 0;
    bottom: 0;
    width: 1px;
    border-left: 1px solid #fff5;
}

.car-section .car-pricing-sale .finance .title {
    --text-opsz: 20;
    --text-wght: var(--font-weight-normal);
    /*font-size: 1rem;*/
    /*margin: 0;*/
}

.car-section .car-pricing-sale .finance .price .amount {
}

.car-section .car-pricing-sale .finance .price .frequency {
    --text-opsz: 14;
    font-size: 0.8rem;
    top: 0.62em;
    position: relative;
    white-space: nowrap;
}


.car-pricing h3 {
  font-size: 1.5rem;
  /*color: var(--colour-base-10);*/
  --text-wght: 640;
}

.car-terms {
    /*position: sticky;
    top: 1rem;*/
    display: grid;
    grid-template-rows: auto 1fr;
}


.car-lease-product {
    padding: 1rem;
    padding: 0;
    display: grid;
    grid-template-rows: auto;
}

.car-pricing-sale-detail,
.car-lease-terms-header {
    padding: var(--padding-y-2) var(--padding-x-3);
    /*background: linear-gradient(#f2f2f2,33%,var(--colour-white));*/
    /*background-color: var(--colour-white);*/
}

.car-lease-terms,
.car-lease-features,
.car-pricing-features
{
    /*padding: 0 var(--padding-x-3) var(--padding-y-2) var(--padding-x-3);*/
    padding-bottom: var(--padding-y-2);
    border-top: 0.62rem solid var(--divider-colour);
}
.car-lease-terms-heading,
.car-lease-features,
.car-pricing-features {
    padding-left: var(--padding-x-3);
    padding-right: var(--padding-x-3);
}
.car-product-heading {
    margin-top: 0;
}

.car-lease-product-description {
    font-size: 1.5rem;
    --text-opsz: 20;
    --text-wght: 400;
    --letter-spacing: var(--letter-spacing-text);
    text-wrap: balance;
    line-height: 1.2;
}

.car-lease-product-description p a {
    font-size: 1.125rem;
    --text-opsz: 18;
    --text-wght: 500;
}

.car-product-links {
    /*padding: var(--padding-y-2) var(--padding-x-3);
    padding: 0.38rem var(--padding-x-1);*/
    /*background-color: var(--colour-white);*/
    /*border-top: 3px solid #f2f2f2;*/
}

.car-product-links.section-menu .pure-menu-list .pure-menu-item {
    border-top-style: none;
    border-bottom: 1px dotted var(--colour-darken-3);
}
.car-product-links.section-menu .pure-menu-list .pure-menu-item:first-child {
    border-top: 1px dotted var(--colour-darken-3);
}
.car-product-links a.pure-menu-link {
    color: var(--colour-anchor-2);
    padding: 0;
}
.car-product-links .pure-menu-link:hover, 
.car-product-links .pure-menu-link:focus, 
.car-product-links .pure-menu-link:focus-visible {
  color: var(--colour-anchor-alt);
  background-color: var(--colour-lighten-3);
}
.section-menu .car-product-links .pure-menu-link::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 -960 960 960' width='20'%3E%3Cpath style='fill:rgb(211, 67, 72)' d='M384-288v-384l192 192-192 192Z'/%3E%3C/svg%3E");
}

.car-pricing-sale .car-product-links a.pure-menu-link {
  color: var(--colour-anchor-alt);
  padding: 0.38rem 1.62rem;
  background-color: var(--bg-colour);
    box-shadow: var(--elevation-z0);
    transition: var(--btn-out);
}
.car-pricing-sale .car-product-links a.pure-menu-link:hover,
.car-pricing-sale .car-product-links a.pure-menu-link:focus,
.car-pricing-sale .car-product-links a.pure-menu-link:focus-visible {
    background-color: hsl(182.7, 24.4%, 85.4%);
    box-shadow: var(--elevation-z3);
    transition: var(--btn-in);
}

@media (width < 48rem){
    .car-product-links a.pure-menu-link {
        padding: 0.38em 0;
    }
}

.car-variants-list {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(20rem, 1fr));
    grid-auto-flow: row;
    gap: 1rem;
}

ul.lease-freq-toggle {
    --border-colour: var(--colour-secondary-alt-7);
    --btn-width: min-content;
    width: min-content;
    font-size: 0.8rem;
    --bg-colour: var(--colour-secondary-alt-8);
    --bg-colour-hover: var(--colour-secondary-alt-7);
    --button-padding: 0 0.8em;
}

.toggle-button-list.lease-freq-toggle .pure-button {
    line-height: 2;
    --text-wght: 550;
    text-transform: none;
}

.toggle-button-list.lease-freq-toggle .pure-button.active,
.toggle-button-list.lease-freq-toggle .pure-button:has(:checked) {
    transition: var(--transition-in-fast);
}

.toggle-button-list.lease-freq-toggle .pure-button:hover,
.toggle-button-list.lease-freq-toggle .pure-button:focus {
    box-shadow: none !important;
}


.car-colour-current {
    padding: 0 0.62rem;
    grid-row: 1;
    grid-column: 1 / -1;
}

.car-dropdown {
    --bg-colour: transparent;
    --border-colour: var(--colour-darken-2);
    --padding-y: 0.16em;
    --padding-x: 1.2em;
    --button-padding: var(--padding-y) var(--padding-x);
    --button-border-radius: calc(var(--button-line-height) * 0.5em + var(--padding-y));
    display: grid;
    width: fit-content
}
.car-variant-dropdown {
    
}
.car-colour-dropdown {
    --bg-colour: #fff;
    --border-colour: var(--colour-darken-2);
    --padding-y: 0.16em;
    --padding-x: 1.2em;
    --button-padding: var(--padding-y) var(--padding-x) var(--padding-y) var(--padding-y);
    --button-border-radius: calc(var(--button-line-height) * 0.5em + var(--padding-y));
    justify-content: stretch;
    display: grid;
    /*grid-row: 1;
    grid-column: 2;*/
}

.car-dropdown .pure-button.button-dropdown {
    font-size: 0.9rem;
    background-color: var(--bg-colour);
    border: 1px solid var(--border-colour);
    /*border-radius: var(--button-border-radius);*/
    line-height: var(--button-line-height);
    --text-wght: var(--font-weight-bold);
    --letter-spacing: var(--letter-spacing-none);
    text-transform: uppercase;
    /*align-content: center;
    justify-content: center;*/
    font-feature-settings: var(--font-settings) "case" 0, "dlig", "frac" 0, "dnom" 0, "numr" 0, "subs" 0, "sups" 0, "zero" 0, "ss01" 0, "ss02" 0, "ss03", "ss04" 0, "ss05" 0, "ss06" 0, "ss07" 0, "ss08" 0, "cv01", "cv02", "cv03" 0, "cv04" 0, "cv05", "cv06", "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "cv11", "cv12" 0, "cv13" 0, "cpsp" 0, "c2sc" 0, "salt" 0, "aalt" 0, "calt", "ccmp", "locl", "kern", "cpsp" 1, "case" 1;
    color: var(--colour);
    display: grid;
    
    background-image: none;
}
.car-dropdown .pure-button.button-dropdown:focus,
.car-dropdown:focus-within .pure-button.button-dropdown
{
  outline: 3px solid var(--border-colour);
}

.car-dropdown .pure-button.button-dropdown::after {
    grid-column: 3;
}
.car-dropdown.car-colour-single .pure-button.button-dropdown::after {
    display: none;
}

.car-colour-dropdown .pure-button.button-dropdown {
    grid-template-columns: 2.2rem auto 1rem;
}
.car-colour-dropdown .pure-button.button-dropdown .car-swatch {
    background-color: #dfe0e0;
    width: calc(var(--button-line-height) * 1em);
    height: calc(var(--button-line-height) * 1em);
    border-radius: 50%;
    border-width: 5px;
    grid-column: 1;
}

.car-colour-dropdown .pure-button.button-dropdown .text {
    grid-column: 2;
    grid-row: 1;
}
.car-dropdown .pure-button.button-dropdown .text {
    --text-wght: 400;
    --letter-spacing: var(--letter-spacing-normal);
    font-size: 0.9rem;
    text-transform: none;
    align-self: center;
    line-height: 1;
    display: inline-block;
    padding: 0 1em 0 0.25em;
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
}
.car-dropdown .pure-button.button-dropdown .text {
    padding: 10px 1em 10px 0.25em;
  height: calc(var(--button-line-height) * 1em);
}
.car-dropdown .pure-menu-children .pure-menu-item .pure-menu-link {
    font-size: 0.875rem;
    line-height: 1.2;
    white-space: normal;
    padding: 1.38em 0.8rem;
    align-items: start;
    gap: 0.5em;
}

.car-colour-dropdown .pure-menu-children .pure-menu-item .pure-menu-link .car-swatch {
    margin: 0;
    flex: 0 0;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 0 3px -1px #000c;
}

.car-dropdown .pure-menu-children .pure-menu-item .pure-menu-link .text {
    text-wrap: balance;
}

/* .lease-terms-table.show-weekly .price-month {
                            display: none;
                        }

                        .lease-terms-table.show-monthly .price-week {
                            display: none;
                        } */

.lease-terms-table-wrapper {
    --padding-x: calc(var(--padding-x-3) - 0.38rem);
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
}
.lease-terms-table {
    --cell-padding-1: var(--cell-padding-y-1) 0.38em;
    width: 100%;
    /* border: none; */
    border-top-style: none;
    border-bottom-style: none;
    border-left: none;
    border-right: none;
    /*margin: 0 -0.8rem;*/
    /*background-color: var(--colour-white);*/
}
.lease-terms-table td, .lease-terms-table th {
  border-bottom-color: var(--divider-colour);
}

.lease-terms-table thead th {
    /* border-top: 1px solid #cbcbcb; */
    border-bottom-width: 3px;
    padding-top: var(--cell-padding-y-1);
}

.lease-terms-table th:last-child,
.lease-terms-table td:last-child {
    /* border-right: 1px solid #cbcbcb; */
}

.lease-terms-table tbody tr:last-child {
    /* border-bottom: 1px solid #cbcbcb; */
}

.lease-terms-table thead tr:first-child th {
    border-left-color: transparent;
    background-color: transparent;
}

.lease-terms-table tr :last-child {
    border-right-color: transparent;
}

.lease-terms-table tbody {
    font-size: 1.125rem;
    --text-opsz: 25;
}

.lease-terms-table .price,
.lease-terms-table .price-head {
    /*width: 6.5ch;*/
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.lease-terms-table .price-head {
    /*border-top: 1px solid #cbcbcb;*/
}

.lease-terms-table thead tr.lease-terms-head th {
    --text-opsz: 14;
    --text-wght: 400;
    font-size: 0.875rem;
    /* text-align: center; */
    padding: calc(var(--cell-padding-y-1) * 0.8) 1rem;
    background-color: var(--colour-darken-05);
}

.lease-terms-table:has(.lease-terms-head) {
    /* border-top: none; */
}

.lease-terms-table .lease-terms-head + tr th {
    border-top: none;
}

.lease-terms-table .lease-terms-head + tr th.price-head {
    border-top: 1px solid #cbcbcb;
}

.lease-terms-table .lease-terms-head th:empty {
    /* border: none;
                            background-color: transparent !important; */
}

.lease-terms-table [data-pdi] {
    --bg-colour: hsl(94.7, 65.5%, 93.6%);
}
.lease-terms-table [data-pdi]:hover {
  --bg-colour: hsl(94.7, 35.5%, 88.6%);
}

/*.lease-terms-table [data-pdi] :first-child::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 9px;
  background-color: var(--bg-colour);
  left: auto;
  display: inline-flex;
  align-items: center;
  line-height: 100%;
}*/
.lease-term-pdi-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1em;
    font-size: 0.875rem;
    background-color: var(--bg-colour);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lease-term-pdi-indicator > * {
    height: 1ch;
}
table.lease-terms-table tr[data-pdi] > td {
  background-color: var(--bg-colour);
  position: relative;
}
.terms-table-legend {
    --content-padding: var(--card-padding-y) var(--card-padding-x);
    margin-top: -1.5rem;
}

.lease-terms-length-cell {
    width: 10rem;
}
.lease-terms-mileage-cell {
    /*width: calc(100% - 300px);*/
}


.car-section .ca-tabs.lease-product-tabs {
    border-top: 1px solid var(--border-colour);
    border-bottom-style: dotted;
    border-bottom-style: none;
    margin: 0;
}
.ca-tab-list-item:has([aria-selected="true"]),
.ca-tab-list-item:has(:checked) {
    z-index: 2;
}
.ca-tabs .ca-tab {
    --outline-width: 1px;
    /*outline: 1px solid transparent !important;*/
    outline-width: var(--outline-width) !important;
    outline-style: none !important;
    outline-color: var(--bg-colour-active) !important;
    transition: none;
    text-align: center;
}
.ca-tabs .ca-tab[aria-selected="true"], .ca-tabs .ca-tab:has(:checked) {
    --outline-width: 6px;
    outline-style: solid !important;
    box-shadow: var(--box-shadow-6);
    border-color: transparent !important;
    border-radius: 0.125px;
    transition: outline-width var(--speed-1) var(--ease-out-3);
}
.ca-tabs .ca-tab::after {
    opacity: 0;
    top: round(down, 100%, 1px);
    background-color: var(--bg-colour-active);
    translate: 0;
    /*bottom: 0;*/
    /*top: calc(100% - 1px);*/
}
.ca-tabs .ca-tab.active::after, 
.ca-tabs .ca-tab:has(:checked)::after, 
.ca-tabs .ca-tab[aria-selected="true"]::after {
    /*top: calc(100% + 5px);*/
    opacity: 1;
    translate: 0 var(--outline-width);
    transition: translate var(--speed-1) var(--ease-out-3) 0.01s;
}
.ca-tabs.lease-product-tabs .ca-tab[aria-selected="false"]:hover,
.ca-tabs.lease-product-tabs .ca-tab[aria-selected="false"]:focus {
    background-color: #fff3;
  /*background-image: linear-gradient(#7e9d9e, 62%, #7e9d9e);
  background-image: linear-gradient(#4b5859, 62%, #4b5859);*/
  background-image: none;
}
.ca-tabs.lease-product-tabs .ca-tab[aria-selected="false"]:focus-visible {
    outline: 2px solid var(--bg-colour-active) !important;
    outline-offset: -1px;
    transition: none;
    z-index: 1;
}
.ca-tabs .ca-tab + .ca-tab-panel, .ca-tabs .ca-tab-list-item + .ca-tab-list-item .ca-tab {
    border-left: none;
}
.ca-tabs .ca-tab + .ca-tab-panel, .ca-tabs .ca-tab-list-item + .ca-tab-list-item {
   /* border-left: 1px solid #fff;*/
}


.car-section .car-pricing-toggle {
    /*margin: 0 var(--padding-x-1) var(--padding-y-3);*/
    /*margin: 0;
    position: absolute;
    right: 1.5rem;
    top: 0.75rem;*/


    /*background-color: #d6e5e8;*/
    padding: var(--padding-y-2) var(--padding-x-1) 0;
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: auto 0.38rem;
    gap: 0.62rem 0.38rem;
}
.car-section .car-pricing .toggle-button-list {
    --button-width: 6rem;
}
/*.car-section .car-pricing-toggle::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 2;
    border-bottom: 1px solid var(--divider-colour);
}*/
/*
.car-section .car-pricing .toggle-button-list {
    --btn-width: 6rem;
    --bg-colour: #fff;
    --border-colour: var(--colour-darken-2);
    --button-border-radius: calc(var(--button-line-height) * 0.5 * 1em);
    --btn-padding-x: 1.5rem;
    --button-padding: 0 var(--btn-padding-x);
    align-self: center;
    display: inline-flex;
    grid-column: 1;
    grid-row: 1
}
.car-section .car-pricing .toggle-button-list:focus-within {
  outline: 3px solid var(--border-colour);
}
.car-pricing ul.toggle-button-list > li .pure-button,
.car-pricing ul.toggle-button-list:has(li:last-child.active) > li:first-child .pure-button,
.car-pricing ul.toggle-button-list > li.active + li .pure-button
{
    padding: var(--button-padding);
}
.car-pricing ul.toggle-button-list > li {
    display: grid;
}
.car-pricing ul.toggle-button-list > li + li {
    margin-left: calc(var(--btn-padding-x) * -1);
    padding-left: 1rem;
}
.car-pricing ul.toggle-button-list > li:has([aria-selected="true"]),
.car-pricing ul.toggle-button-list > li:has(:checked){
    z-index: 1;
}
*/
.car-section .car-img .swiffy-slider {
    display: grid;
    /*grid: auto 4rem / 1fr 1fr;*/
    grid: auto / 1fr 1fr;
    width: 100%;
}

.car-section .car-img .slider-container {
    grid-column: 1 / -1;
}

.car-section .car-img .slider-container > * {
    padding: 0;
}

.car-section .car-img .slider-img {
    height: auto;
    background-color: transparent;
}

.car-section .car-img .slider-img.active {
    opacity: 1;
}

.car-section .car-img .slider-img:first-child {
    position: relative;
}

.car-section .car-img .slider-img.loaded {
    background-image: none !important;
}

.car-section .car-img .slider-nav {
    padding: 0;
}

.car-section .car-img .slider-nav::before {
    width: 5rem;
    height: 5rem;
    left: -1.5rem;
}

.car-section .car-img .slider-nav::after {
    width: 2rem;
    height: 2rem;
}



.car-specs-card.ca-card .car-specs-list {
    /* margin: 0;
    padding: 0;
    list-style: none;*/
}

.car-specs-card.ca-card .car-specs-list li {
    /*margin: 0;*/
}

.car-specs-card.ca-card {
    /*--card-bg: transparent;*/
    /*--card-padding-y: 1rem;
    --card-padding-x: 1.5rem;*/
    --content-padding: var(--card-padding);
    /*--header-padding: calc(var(--card-padding-y) * 1.38) var(--card-padding-x) var(--card-padding-y-half);*/
    /*--card-border-colour: var(--item-border-colour);
    --card-border-style: solid;*/
    /*margin-top: 1rem;*/
}

.car-spec-category-card.ca-card {
    --card-bg: transparent;
}

.car-spec-category-card.ca-card + .car-spec-category-card.ca-card {
    border-top: 1px solid var(--divider-colour);
}


.car-pricing-features .feature-list li {
    gap: 0.38em;
}
.car-pricing-features .feature-list li::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%2364a7b7'%3E%3Cpath d='m424-276 304-304-74-74-230 230-116-116-74 74 190 190Zm56 228q-89.64 0-168.48-34.02-78.84-34.02-137.16-92.34-58.32-58.32-92.34-137.16T48-480q0-89.9 34.08-168.96 34.08-79.07 92.5-137.55Q233-845 311.74-878.5 390.48-912 480-912q89.89 0 168.94 33.5Q728-845 786.5-786.5t92 137.58q33.5 79.09 33.5 169 0 89.92-33.5 168.42Q845-233 786.51-174.58q-58.48 58.42-137.55 92.5Q569.9-48 480-48Z'%3E%3C/path%3E%3C/svg%3E");
}

@media (min-width: 35.5rem) {
    .car-container {
        padding: 0 1rem;
    }
    .car-section .car-img .swiffy-slider {
        position: relative;
        grid: auto / 1fr round(calc(100% - 4rem), 1px) 1fr;
    }

    .car-section .car-img .slider-container {
        grid-column: 2;
        grid-row: 1;
    }

    .car-section .car-img .slider-container img {
        position: absolute;
        width: 100%;
        opacity: 0;
        pointer-events: none;
        height: auto;
        padding: 0;
    }

    .lease-term-pdi-indicator {
        left: -0.5em;
    }
}


@media (64rem < width < 93rem) {
    .car-container {
        padding-right: 0;
    }

    .car-grid {
        /*grid-template-columns: 1fr 32.5rem;
    gap: 0 1.5rem;*/
    }

    .car-section .car-pricing {
        padding-top: 0;
        padding-bottom: 0;
        box-shadow: 0 0 25px 0 #0002;
        grid-row: 1/-1;
        /*position: sticky;
        top: 0;*/
    }

    .car-pricing-content {
        box-shadow: none;
        border: none;
        border-radius: 0;
    }

    .car-section .car-pricing-toggle {
    }
}
@media (width < 35.5rem){
    .lease-terms-table-wrapper {
        padding-left: 0;
        padding-right: 0;
    }
    .lease-terms-table tr > :first-child {
        padding-left: var(--padding-x-3);
    }
    .lease-terms-table tr > :last-child {
        padding-right: var(--padding-x-3);
    }
    .car-section .car-pricing-toggle {
        grid-template-rows: auto 2.7rem 0.38rem;
    }
    .car-colour-dropdown {
        grid-row: 1;
        grid-column: 1/3;
    }
    .car-section .car-pricing .toggle-button-list.payment-toggle {
        grid-column: 1;
        grid-row: 2;
    }

    .car-grid-group-1 {
        margin-bottom: -0.5rem;
        background-image: radial-gradient(white, 68%, transparent);
    }
}

.pure-button.button-car-enquiry {
    --button-padding: 1rem 1.5rem;
    --button-line-height: 1.2;
    font-size: var(--fs-3-rem);
}

.panel-finance-calculator .close-button {
    z-index: 3;
}
.panel-finance-calculator .panel-header, 
.panel-finance-calculator .panel-item--enquiry-object {
    display: none;
}