/*.filters {
    margin: 2rem 0;
    overflow-y: hidden;
    overflow-x: visible;
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    align-content: start;
    align-items: start;
    scrollbar-gutter: stable;
}*/

/*.filters .car-filters-form, */

.filters-panel {
    flex: 0 1 30rem;
}

.filters-panel > .ca-card.filters {
    padding-bottom: 2rem;
    height: calc(100% - ((1.62rem * 2) + (1.25rem * 3.052)));
}

.filters-panel > .ca-card.filters footer {
    box-shadow: 0 0 12px 0px #0006;
}

.pure-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.filters > .content * {
    --input-size: 1.25rem;
    --input-line-height: calc(1.38 * var(--input-size));
    --input-padding-y: calc(0.38 * var(--input-size));
    --input-padding-x: calc(0.62 * var(--input-size));
    --input-border-radius: var(--border-radius-25);
    /*--bg-colour-active: #676b6b;*/
    --accent-colour: #45869d;
    --accent-colour-transparent: #45869d00;
    --accent-colour-inverse: #fff;
    --button-line-height: calc(var(--input-padding-y) * 2 + var(--input-line-height));
}

.filters .car-filters-form {
    /*height: 100vh;*/
    /* padding: 1.5rem 0 0; */
    /*overflow-y: auto;
    overflow-x: visible;*/


    padding: 0;
    overflow-y: auto;
    overflow-x: visible;
    height: 100%;
    border-radius: var(--border-radius-3);
    background-color: #C9D1CEC4;
    background-color: #C9D1CE44;
    border: 1px solid var(--colour-secondary-alt-6);
}

.filters-heading {
    --text-opsz: 22;
    margin: 0;
    padding: 1.62rem 2rem 1.38rem;
    font-size: 1.38rem;
    background-color: #0001;
    line-height: 2.3rem;
}

.filter-group-heading {
    --text-wght: 600;
    --text-opsz: 18;
    margin: 0;
    padding: 0 0 0.5rem;
    font-size: 1.125rem;
}

.filters .car-filters-form .form-actions {
    /* background-color: #fbfbfa; */
    /*position: sticky;*/
    bottom: 0;
    left: 0;
    right: 0;
    /*padding-left: 0.8em;
    padding-right: 0.8em;*/
    padding: 1em 1em 1.4rem;
    border-top: 3px solid var(--colour-secondary-alt-7);
    border-top: 5px solid #0000001a;
    margin: 0;
    justify-content: stretch;
}

.filters .car-filters-form .form-actions [type="submit"] {
    width: 100%;
    justify-content: center;
    background-color: #74a9b3;
}

.pure-form.car-filters-form fieldset {
    display: grid;
    align-content: start;
    align-items: start;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 0;
    /* margin: 1.4em 0; */
    margin: 0;
    padding: 0;
    /*padding: 0.5em;*/
    /*background-color: #fbfbfa;*/
}
.pure-form.car-filters-form fieldset.minmax {
    grid-gap: 0 1.5rem;
}

@media (width < 28rem){
    .pure-form.car-filters-form fieldset {
        grid-template-columns: 1fr;
        grid-gap: 0.38rem 1.5rem;
    }
}

.pure-form.car-filters-form fieldset + fieldset {
    /* margin-top: -0.6em; */
}

.pure-form.car-filters-form fieldset .span {
    grid-column: 1/-1;
}

.filter-group {
    padding: 1rem 1rem 1.62rem;
    /*background-color: var(--colour-secondary-alt-6);*/
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
}

.filter-group + .filter-group {
    /* margin-top: 0.38rem; */
    border-top: 1px solid var(--colour-secondary-alt-7);
    border-top: 1px solid #0002;
}

.pure-form.car-filters-form legend {
    /* --text-opsz: 14;
    --text-wght: var(--font-weight-semibold);
    --letter-spacing: var(--letter-spacing-display);
    --border-color: var(--colour-secondary-alt-5);
    font-size: 0.8rem;
    border-bottom-width: 2px;
    border-bottom-color: var(--border-color);
    border-bottom-style: solid;*/
    padding: 0;
    margin-top: 0;
    /*padding-bottom: 0.4em;*/
    /*margin-bottom: 0.62em;*/
    /*margin-bottom: 0;*/
    /*text-transform: uppercase !important;
    font-feature-settings: var(--font-settings),"cpsp" 1,"case" 1;
    color: var(--colour-darker);
    line-height: inherit;*/
    border: none;
}
.pure-form.car-filters-form legend.with-labels {
    --text-opsz: 18;
    --text-wght: var(--font-weight-light);
    --font-settings: var(--font-settings-display);
  --letter-spacing: var(--letter-spacing-display);
  font-size: 1.125rem;
  line-height: 1;
  margin-bottom: calc(0.38em - 0.25rem);
  color: var(--card-colour);
}

.filters-tabs, .filters-tabs .pure-menu-link {
}

.filters-tabs {
    padding: 0;
    margin: 0 0 0.42em;
    display: inline-grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    justify-content: stretch;
}

.filters-tabs .pure-menu-item {
    display: flex;
}

.filters-tabs .pure-menu-link {
    display: flex;
    border: none;
    background-color: transparent;
    margin: 0;
    padding: 0.4em 0.8em;
    flex: 1;
    justify-content: center;
}

.filters-tabs .pure-menu-link[aria-selected="true"],
.filters-tabs .pure-menu-link:has(:checked) {
    background-color: #393d46;
    color: var(--colour-lighten-85);
}

.filters .tab-panel {
    display: flex;
    flex-direction: column;
    /*gap: 0.38rem;*/
}

.pure-form.car-filters-form fieldset.pricing-tab-panel {
    margin-top: 0;
}

.filters input {
    accent-color: var(--bg-colour-active);
}

.filters .toggle-button-list.list-inline {
    /*--button-line-height: calc((var(--input-padding-y) * 2 + var(--input-line-height)) / 1em);*/
    --button-line-height: calc( (var(--input-padding-y) * 2) + var(--input-line-height) );
}
/*
.filters ul.toggle-button-list {
    --button-border-radius: calc(var(--button-line-height) * 0.5);
    --list-height: calc(var(--button-line-height) + var(--border-width) * 2 + var(--list-padding) * 2);
    --btn-width: min-content;
    --bg-colour: #fff;
    --border-width: 1px;
    --border-colour: var(--colour-base-7);
    --list-padding: 0.24em;
    --list-padding: 2px;
    --button-padding: 0 calc(var(--button-border-radius) * 1.5);
    --bg-colour-hover: #00000020;
    display: inline-grid;
    grid-template-columns: auto var(--button-line-height) auto;
    align-self: start;
    font-size: 0.875rem;
    margin: 0 -0.8rem;
    border-radius: calc(var(--list-height) * 0.5);
    outline: 3px solid rgba(var(--colour-base-7-rgb), 0);
    transition: var(--btn-out);
}

.filters ul.toggle-button-list:focus-within {
    outline-color: var(--colour-base-7);
}

.filters ul.toggle-button-list:focus-within,
.filters ul.toggle-button-list:has(:hover):focus-visible {
    outline: 3px solid var(--colour-base-7);
    transition: var(--btn-in);
}

.filters ul.toggle-button-list > li:hover {
    z-index: 1;
}

.filters ul.toggle-button-list > li {
    display: grid;
    border-radius: var(--button-border-radius);
}

.filters ul.toggle-button-list > li:first-child {
    grid-column: 1/3;
    grid-row: 1;
    padding-right: calc(var(--button-border-radius) * 0.62);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.filters ul.toggle-button-list > li + li {
    grid-column: 2/4;
    grid-row: 1;
    padding-left: calc(var(--button-border-radius) * 0.62);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.filters ul.toggle-button-list > li:has([aria-selected="true"]),
.filters ul.toggle-button-list > li:has(:checked),
.filters ul.toggle-button-list > li:has(.active) {
    z-index: 2;
}

.filters .content ul.toggle-button-list.list-inline > li .pure-button,
.filters .content ul.toggle-button-list.list-inline > li .pure-button,
.filters .content ul.toggle-button-list.list-inline > li:first-child .pure-button,
.filters .content ul.toggle-button-list.list-inline > li:last-child .pure-button {
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
}

.filters ul.toggle-button-list:has([aria-selected="true"]) .pure-button,
.filters ul.toggle-button-list:has(:checked) .pure-button,
.filters ul.toggle-button-list:has(.active) .pure-button {
    --text-wght: var(--font-weight-semibold);
    border-radius: var(--button-border-radius);
}
*/
.filters ul.toggle-button-list .pure-button.active,
.filters ul.toggle-button-list .pure-button:has(:checked),
.filters ul.toggle-button-list .pure-button[aria-selected="true"] {
    /*background-color: var(--bg-colour-active);*/
}


.filters .pure-button-group {
    --button-padding: 0 0;
    /*margin-bottom: 1rem;*/
    margin: .25rem 0;
    display: grid !important;
    grid-auto-flow: column;
    grid-template-columns: repeat(auto-fit, minmax(1rem, auto));
    width: 100%;
}

.filters .pure-button-group .pure-button {
    /*margin: .25em 0;*/
    margin: 0;
    background-color: var(--colour-secondary-alt-8);
    position: relative;
}

.filters .pure-button-group .pure-button:hover,
.filters .pure-button-group .pure-button:focus,
.filters .pure-button-group .pure-button:focus-within {
    background-color: #e2e3e3;
    background-image: linear-gradient(#0000 30%,#0000);
}

.filters .pure-button-group .pure-button:active, .filters .pure-button-group .pure-button:hover:active {
    background-color: #d9dada;
    background-image: linear-gradient(#0000 30%,#0000);
}

.filters .pure-button-group .pure-button:focus-visible {
    outline: 1px solid var(--bg-colour-active);
    z-index: 1;
}

.filters .pure-button-group .pure-button:has(:checked) {
    background-color: var(--bg-colour-active);
    color: #fff;
}

.filters .pure-button-group .pure-button:first-child {
    border-top-left-radius: var(--input-border-radius);
    border-bottom-left-radius: var(--input-border-radius);
}

.filters .pure-button-group .pure-button:last-child {
    border-top-right-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius);
}


.filters .button-md .pure-button {
    --button-line-height: calc(var(--input-padding-y) * 2 + var(--input-line-height));
    --text-wght: var(--font-weight-bold);
    font-size: 1.125rem;
    box-shadow: var(--elevation-z0-4) !important;
}


/*.filters .input-NORMAL {
    padding: 0.5em 0.6em;
    font-size: 100%;
    line-height: 1.15;
}
.filters .input-medium {
    padding: 0 1em !important;
    line-height: 2.5rem;
    font-size: 1rem;
    height: auto;
}*/

form.filters .step-button {
    text-indent: 1000%;
    overflow: hidden;
    white-space: nowrap;
}
form.filters .step-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--colour-base-11);
    mask-position: 50% 50%;
    mask-size: 1.38rem;
    mask-repeat: no-repeat;
}
form.filters .step-button-up::before {
    /*mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000000'%3E%3Cpath d='M421-110v-311H110v-118h311v-311h118v311h311v118H539v311H421Z' /%3E%3C/svg%3E");*/
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M417-417H166v-126h251v-251h126v251h251v126H543v251H417v-251Z'/%3E%3C/svg%3E");
}
form.filters .step-button-down::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M166-417v-126h628v126H166Z'/%3E%3C/svg%3E");
}

form.filters .number-step-input {
    appearance: textfield;
    text-align: end;
    /*flex: 0 0 7ch;*/
    --font-settings: var(--font-settings-tnumber);
    --input-border-radius: 0;
}
form.filters .number-step-input::-webkit-outer-spin-button,  
form.filters .number-step-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input-group-text {
    background-color: rgba(var(--colour-base-rgb), 0.4);
    color: var(--colour-base-9);
}


form.filters input[type="color"],
form.filters input[type="date"],
form.filters input[type="datetime-local"],
form.filters input[type="datetime"],
form.filters input[type="email"],
form.filters input[type="month"],
form.filters input[type="number"],
form.filters input[type="password"],
form.filters input[type="search"],
form.filters input[type="tel"],
form.filters input[type="text"],
form.filters input[type="time"],
form.filters input[type="url"],
form.filters input[type="week"],
form.filters select,
form.filters textarea {
    border-radius: var(--input-border-radius);
    accent-color: var(--accent-colour);
}

form.filters .input-large input[type="color"],
form.filters .input-large input[type="date"],
form.filters .input-large input[type="datetime-local"],
form.filters .input-large input[type="datetime"],
form.filters .input-large input[type="email"],
form.filters .input-large input[type="month"],
form.filters .input-large input[type="number"],
form.filters .input-large input[type="password"],
form.filters .input-large input[type="search"],
form.filters .input-large input[type="tel"],
form.filters .input-large input[type="text"],
form.filters .input-large input[type="time"],
form.filters .input-large input[type="url"],
form.filters .input-large input[type="week"],
form.filters .input-large select,
form.filters .input-large textarea,
form.filters input[type="color"].input-large,
form.filters input[type="date"].input-large,
form.filters input[type="datetime-local"].input-large,
form.filters input[type="datetime"].input-large,
form.filters input[type="email"].input-large,
form.filters input[type="month"].input-large,
form.filters input[type="number"].input-large,
form.filters input[type="password"].input-large,
form.filters input[type="search"].input-large,
form.filters input[type="tel"].input-large,
form.filters input[type="text"].input-large,
form.filters input[type="time"].input-large,
form.filters input[type="url"].input-large,
form.filters input[type="week"].input-large,
form.filters select.input-large,
form.filters textarea.input-large {
    line-height: var(--input-line-height) !important;
    padding: var(--input-padding-y) var(--input-padding-x);
    accent-color: var(--accent-colour);
}

form.filters .input-large,
form.filters select.input-large {
    accent-color: var(--accent-colour);
}

form.filters .input-large select,
form.filters select.input-large {
    /*height: 2.6875em;*/
    height: calc(var(--input-padding-y) * 2 + var(--input-line-height) + 2px);
}

form.filters label.checkbox-item {
    /*padding: 0;*/
    --text-wght: var(--font-weight-bold);
    font-weight: var(--text-wght);
    background-color: transparent;
    color: var(--colour-darker);
    height: auto;
    gap: 0.5rem;
    align-items: center;
}

form.filters .filter-group-product label.checkbox-item + .checkbox-item {
  border-top: 1px solid var(--card-divider-colour);
}
form.filters .filter-group-product label.checkbox-item {
  --input-padding-y: 5rem;
  padding: 1em .8em 1em .3em;
}

form.filters label.checkbox-item > input[type="checkbox"] {
    align-self: stretch;
}

form.filters label.checkbox-item .name {
    --text-opsz: 18;
    font-size: 1.125rem;
    line-height: 1;
}

form.filters label.checkbox-item .description {
    --text-opsz: 14;
    --text-wght: 400;
    font-size: 0.875rem;
    line-height: 1.2;
}