@charset "utf-8";
/* CSS Document for Design 911 .Net website by Kolen Mackey for Datadial 04/12/24 V=6.0 Chromium Base*/

:root {
    --d911-orange: #eb6a2e;
    --d911-teal: #23a9be;
    --team-black: #202020;
    --brand-color1: #eb6a2e;
    --brand-color2: #eb5e55;
    --site-black: #363c4b;
    --site-grey: #48586a;
    --site-mid-grey: #7a8391;
    --site-light-grey: #c0c8d2;
    --site-border: #e2e9f2;
    --site-highlight: #c3dfe0;
    --site-green: #65aa5e;
    --site-red: #a7252c;
    --transition-all: all ease-in-out 0.3s;
    --dd-bkg1: #f2f6fb;
    --dd-bkg2: #eef2f7;
}
/*marker - 1*/

/* Base Reset*/
*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*------------------- CSS Variables - Not Compatible with IE11 so they have been removed */

[v-cloak] {
    display: none;
}

body {
    /*background:#f6f8fa;*/
    /*color: #2c3135;*/
    color: var(--site-black);
    font-family: 'Arimo', 'Century Gothic', Helvetica, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #fdfdfd;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(253, 253, 253, 1) 25%, rgba(253, 253, 253, 1) 65%, rgba(250, 250, 250, 1) 100%);
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(253, 253, 253) 8%, rgb(253, 253, 253) 38%, rgb(250, 250, 250) 100%);
    background-attachment: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    margin: 15px 0;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
    font-weight: 300;
}

h1,
.h1 {
    font-size: 32px;
    line-height: 38px;
    margin: 0 0 20px;
}

h2,
.h2 {
    font-size: 28px;
    line-height: 32px;
}

.sectionTitle,
h3,
.h3 {
    font-size: 22px;
    line-height: 26px;
}

h4,
.h4 {
    font-size: 18px;
    line-height: 24px;
}

h5,
.h5 {
    font-size: 0.796rem;
    line-height: 0.996rem;
}

h6,
.h6 {
    font-size: 16px;
    line-height: 22px;
    text-transform: none;
}

p {
    font-size: 14px;
    line-height: 22px;
    margin: 15px 0;
}

.rte ul,
.rte ol {
    margin: 0;
    padding: 0 0 0 20px;
}

.rte ul li,
.rte ol li {
    margin: 10px 0;
    padding: 0 0 0 20px;
}

.rte ul + h2,
.rte ul + h3,
.rte ul + h4,
.rte ol + h2,
.rte ol + h3,
.rte ol + h4,
.rte p + h2,
.rte p + h3,
.rte p + h4 {
    margin-top: 30px;
}

/*---------------------------------General Website Styles*/

/*------------------- General Styles */
a {
    text-decoration: none;
    /*color:#2a5bba;*/
    color: currentColor;
}

a:hover {
    text-decoration: none;
    color: #eb6a2e;
}

.altColor {
    color: #23a9be !important;
}

.altColor2 {
    color: #23a9be !important;
}

.altColor3 {
    color: #eb6a2e !important;
}

.green {
    color: #08a972;
}

svg.icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    fill: currentColor;
}

svg.hidden {
    display: none;
}

img {
    color: var(--site-border);
    font-size: 0.26rem;
    max-width: 100%;
    height: auto;
    white-space: nowrap;
    overflow: hidden;
}

iframe,
picture,
picture img {
    max-width: 100%;
}

/*-------------------  Form Elements */

input[type='email']:not(.q-field__native),
input[type='tel']:not(.q-field__native),
input[type='text']:not(.q-field__native),
input[type='password']:not(.q-field__native),
input[type='button']:not(.q-field__native),
input[type='submit']:not(.q-field__native),
input[type='number']:not(.q-field__native),
button,
select {
    padding: 8px;
    color: #363c4b;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #d0dbdd;
    background: #fff;
    margin: 0 0 8px 0;
    font-family: inherit;
    -webkit-appearance: none;
    border-radius: 0;
    height: 40px;
}

input[type='button'].slim,
input[type='submit'].slim,
button.slim {
    height: auto;
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.button.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type='number']:not(.q-field__native) {
    -moz-appearance: textfield;
}

input {
    padding: 14px 8px;
    filter: none;
}

input[type='email']:not(.q-field__native):focus,
input[type='tel']:not(.q-field__native):focus,
input[type='text']:not(.q-field__native):focus,
input[type='password']:not(.q-field__native):focus,
input[type='button']:not(.q-field__native):focus,
input[type='submit']:not(.q-field__native):focus,
input[type='number']:not(.q-field__native):focus,
textarea:focus {
    background: var(--dd-bkg1);
    color: #363c4b;
    outline: none;
}

input[type='button'],
input[type='submit'] {
    -webkit-appearance: none;
}

select {
    background: #fff url('../images/svg/arrow-down.svg') no-repeat 98% center / 18px auto !important;
}

select:focus {
    outline: none;
}

select option {
    padding: 4px;
}

textarea {
    font-size: 13px;
    padding: 8px;
    color: #131313;
    display: block;
    width: 100%;
    border: 1px solid #d0dbdd;
    margin: 0 0 8px 0;
    font-family: inherit;
    height: 150px;
    background: #fff;
}

label {
    display: block;
    margin-bottom: 8px;
}

a.button,
button,
input[type='button'],
input[type='submit'] {
    background: none;
    color: #131313;
    border: 1px solid #d0dbdd;
    cursor: pointer;
    padding: 8px 20px;
    display: inline-block;
    width: auto;
    text-transform: uppercase;
}

button[class^='box-'],
input[type='text'][class^='box-'],
input[type='password'][class^='box-'],
input[type='button'][class^='box-'],
input[type='submit'][class^='box-'] {
    display: inline-block;
    width: inherit;
}

input[type='checkbox'] + [class^='box-'] {
    padding: 0 10px;
}

a.button,
input.button,
input[type='submit'].button,
button.button,
button.button {
    background: #8297ae;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border: none;
    padding: 8px 20px;
    display: inline-block;
    border-radius: 4px;
}

a.button.green,
input.button.green,
input[type='submit'].button.green,
.button.green,
button.button.green {
    background: #08a972;
}

input.button.orange,
button.button.orange,
input[type='submit'].button.orange,
a.button.orange {
    background: #eb6a2e;
}

/* Checkout Buttons */
.button.big {
    height: 60px;
    line-height: 42px;
    font-size: 14px;
}

input[type='button'],
input[type='submit'] {
    -webkit-appearance: none;
}

::-moz-placeholder {
    opacity: 1;
}

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

input:focus::-moz-placeholder {
    opacity: 0;
}

textarea:focus::-webkit-input-placeholder {
    opacity: 0;
}

textarea:focus::-moz-placeholder {
    opacity: 0;
}

/*Remove Chrome blue auto-fill*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

/*Links*/
a.button {
    text-transform: uppercase;
}

.button.line {
    border: 1px solid #a5adb6;
    color: #363c4b;
    background-color: transparent;
}

.button.line:hover,
.button:hover {
    color: #fff;
    background-color: #50545f;
    border-color: transparent;
}

a.borderline {
    border-bottom: 1px solid #7d8798;
    padding-bottom: 4px;
}

a.borderline:hover {
    border-color: #eb6a2e;
}

/*Form Elements - Make checkboxes and Radio buttons look like buttons*/
/*
Sample code: - As used in checkout
<p class="buttonBox">
	<input type="radio" name="yadda" id="yadda" runat="server" checked />
	<label for="yadda"> My Text label Here </label>
</p>
*/
.buttonBox {
    margin: 0 10px 10px 0;
    display: inline-block;
    position: relative;
}

.buttonBox label {
    display: block;
    padding: 10px 20px;
    border: 1px solid #606770;
    color: #606770;
    cursor: pointer;
    border-radius: 4px;
}

.buttonBox input[type='checkbox'],
.buttonBox input[type='radio'] {
    display: inline-block;
    width: auto;
    position: absolute;
    visibility: hidden;
}

.buttonBox input[type='radio'] + label,
.buttonBox input[type='checkbox'] + label,
.buttonBox input[type='radio'] + span.error + label,
.buttonBox input[type='checkbox'] + span.error + label {
    background: url('../images/checkbox_empty.png') 15px center / 18px auto no-repeat;
    padding: 10px 20px 10px 60px;
    position: relative;
}

.buttonBox input[type='radio']:checked + label,
.buttonBox input[type='radio']:checked + label:hover,
.buttonBox input[type='checkbox']:checked + label:hover,
.buttonBox input[type='checkbox']:checked + label {
    background: #606770 url('../images/checkbox_ticked.png') 15px center no-repeat;
    border-color: #606770;
}

.buttonBox input[type='radio'] + label:before,
.buttonBox input[type='checkbox'] + label:before,
.buttonBox input[type='radio'] + span.error + label:before,
.buttonBox input[type='checkbox'] + span.error + label:before {
    content: '';
    position: absolute;
    width: 3px;
    background: #d0dbdd;
    top: 8px;
    bottom: 8px;
    left: 45px;
    border-radius: 2px;
    opacity: 0.6;
}

.buttonBox input[type='radio'] + label:hover,
.buttonBox input[type='checkbox'] + label:hover,
.buttonBox :checked + label,
.buttonBox input[type='radio'] + span.error + label:hover,
.buttonBox input[type='checkbox'] + span.error + label:hover,
.buttonBox :checked + span.error + label,
.buttonBox label:hover {
    background-color: #606770;
    color: #fff;
    border: 1px solid #606770;
}

.buttonBox label span {
    padding: 0 10px;
    max-width: 78%;
}

.buttonBox label * {
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
}

/*------------------- Box styles */

[class^='box-'],
div[class^='box-'],
input[type='text'][class^='box-'] {
    display: inline-block;
    vertical-align: top;
    margin: 0 -2px;
}

.box-10,
input.box-10 {
    width: 10%;
}

.box-20,
input.box-20 {
    width: 20%;
}

.box-25,
input.box-25 {
    width: 25%;
}

.box-30,
input.box-30 {
    width: 30%;
}

.box-33,
input.box-33 {
    width: 33.3%;
}

.box-35,
input.box-35 {
    width: 35%;
}

.box-40,
input.box-40 {
    width: 40%;
}

.box-45,
input.box-45 {
    width: 45%;
}

.box-50,
input.box-50 {
    width: 50%;
}

.box-55,
input.box-55 {
    width: 55%;
}

.box-60,
input.box-60 {
    width: 60%;
}

.box-65,
input.box-65 {
    width: 65%;
}

.box-70,
input.box-70 {
    width: 70%;
}

.box-75,
input.box-75 {
    width: 75%;
}

.box-80,
input.box-80 {
    width: 80%;
}

.box-90,
input.box-90 {
    width: 90%;
}

.box-100,
input.box-100 {
    width: 100.2%;
}

.pad-5 {
    padding: 5px;
}

.pad-0-5 {
    padding: 0 5px;
}

.pad-10 {
    padding: 10px;
}

.pad-0-10 {
    padding: 0 10px;
}

.pad-10-l {
    padding: 0 0 0 10px;
}

.pad-10-r {
    padding: 0 10px 0 0;
}

.pad-20 {
    padding: 20px;
}

.pad-0-20 {
    padding: 0 20px;
}

.pad-20-l {
    padding: 0 0 0 20px;
}

.pad-20-r {
    padding: 0 20px 0 0;
}

.pad-40 {
    padding: 40px;
}

.pad-0-40 {
    padding: 0 40px;
}

.pad-40-l {
    padding: 0 0 0 40px;
}

.pad-40-r {
    padding: 0 40px 0 0;
}

.pad-50 {
    padding: 50px;
}

.pad-0-50 {
    padding: 0 50px;
}

.pad-50-l {
    padding: 0 0 0 50px;
}

.pad-50-r {
    padding: 0 50px 0 0;
}

/*------------------- Flexgrid */

.flexgrid {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    list-style-type: none;
}

.flexgrid > div,
.flexgrid > li {
    width: 24%;
    margin: 0;
}

.flexgrid.split-50 > div {
    width: 50%;
}

.flexgrid li a {
    padding: 0;
    text-align: center;
    color: inherit;
}

/*------------------- Universal Classes */

.featimg {
    display: block;
    background: #f5f5f5 url() center / cover no-repeat;
}

.borderbox {
    align-items: center;
    border: 1px solid var(--site-border);
    padding: 20px 40px;
    margin: 10px 0;
    background: #fff;
}

.borderbox h2:first-of-type,
.borderbox h3:first-of-type,
.borderbox h4:first-of-type {
    margin-top: 0;
}

/*----------------- Product List Grid */
.flexgrid.product {
    padding: 0;
    margin: 0 -0.5%;
    align-content: flex-start;
    justify-content: initial;
}

.flexgrid.product > div,
.flexgrid.product li {
    width: 24%;
    margin: 0 0.5% 15px;
    display: block;
    text-align: center;
    height: 250px;
    background: #efefef;
}

/*------------------- Custom Scrollbars */

.scrollbox {
    scrollbar-width: thin;
    scrollbar-color: var(--site-border) rgba(255, 255, 255, 0.13);
}

.scrollbox::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0.13);
    width: 5px;
    height: 5%;
}

.scrollbox::-webkit-scrollbar-thumb {
    background: var(--site-border);
}

/*------------------- Containers */

#container {
    display: block;
    margin: 0;
    padding: 0;
    max-width: 100vw;
    position: relative;
    overflow-x: hidden;
    /*overflow: hidden;*/
}

#pageContent,
.innerframe {
    display: block;
    margin: 0 auto;
    max-width: 1240px;
    position: relative;
}

#masthead {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
    background: #fff;
    background-position: 0 92px;
    padding: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    border-bottom: 1px solid var(--site-border);
}

#masthead * {
    transition: all ease-in-out 0.1s;
}

#masthead.docked {
    box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.23);
    background-position: 0 67px;
    border-color: #fff;
}

#pageContent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 138px 0 0;
    margin: 0 auto;
}

#pageContent #navBar {
    width: 20%;
    position: relative;
    padding: 20px 0 50px;
}

/*#gallery #pageContent #navBar {
    width: auto;
    padding: 39px 0 50px;
}*/

#mainContent {
    width: 80%;
    border-left: 1px solid var(--site-border);
    padding: 0;
}

#masthead #searchbox {
    background: #fff;
}

/*------------------- Masthead */
.logoframe {
    position: relative;
    display: flex;
    align-items:center;
    gap: 15px;
    position: absolute;
    inset: 0 auto 0 -3px;
    margin: auto;
    /*border:1px solid #fc0;*/
}
#LogoIcon,
#Logo {
    display: block;
    width: 250px;
    overflow: hidden;
    padding: 0;
    background: url(/images/svg/D911-logo-mixed.svg) 0 center / contain no-repeat;    
    font-size: 0;
    z-index: 5000;
    height: 60px;
}

#LogoIcon {
    width: 100px;
    height:48px;
    background: url(/images/svg/D911_EOT_Slogan.svg) 0 center / contain no-repeat;
    
}

#masthead > .innerframe {
    min-height: 90px;
    z-index: initial;
}

#masthead a:not(.button) {
    color: inherit;
}

#siteNavigation {
    display: flex;
    justify-content: flex-start;
    text-align: right;
    padding: 0;
    flex-direction: row-reverse;
    align-items: center;
}

#siteNavigation ul {
    display: flex;
    gap: 2%;
    list-style: none;
    margin: 0;
    text-align: center;
    padding: 0;
    white-space: nowrap;
    color: var(--site-grey);
}

#siteNavigation ul li {
    display: block;
    margin: 0;
    padding: 0;
}
#siteNavigation ul li.mylogin {
    margin: 0 4px;
}
#siteNavigation > ul > li > a {
    display: block;
    padding: 0 0 0;
    color: #7d8798;
    font-size: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: relative;
    /*border-radius: 50%;
  border: 1px solid var(--site-border);*/
}

#siteNavigation ul li.login a svg,
#siteNavigation ul li.contact a svg {
    width: 24px;
    height: 24px;
}

#topFrame a:hover {
    color: #91b0d7;
}
body.login #siteNavigation ul li.login a {
    background: #fcfcfc;
}

#siteNavigation ul li.logout a:hover {
    background: #3a424a;
}

#siteNavigation #loggedIn {
    border-color: #08a972;
    line-height: 30px;
    font-size: 13px;
    background: #08a972;
    color: #fff;
    border-radius: 50%;
    margin: 5px 8px 0 0;
    width: 30px;
    height: 30px;
    font-weight: bold;
}

#masthead #call .no {
    margin: 0;
    padding: 0;
    font-size: 0.96rem;
    letter-spacing: -0.5px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

#siteNavigation ul #call {
    display: flex;
    align-items: center;
}

#call a .phone {
    display: none;
}

#call a .phone svg {
    width: 26px;
    height: 26px;
}
#call a.whatsapp {
    height: 30px;
    margin-right: 5px;
}

#call a.whatsapp img {
    width: 30px;
    height: 30px;
}

.mylogin svg {
    width: 30px;
    height: 26px;
}

#siteNavigation ul#accountBox {
    display: block;
    position: fixed;
    top: 0;
    left: auto;
    right: -31vw;
    width: 30vw;
    height: 100vw;
    padding: 50px;
    background: #fff;
    color: #363c4b;
    z-index: 5000;
    box-shadow: -1px -1px 6px rgba(0, 0, 0, 0.3);
    transition: right ease-out 0.4s;
    border-top: 4px solid #a5adb6;
}

#siteNavigation ul#accountBox.active {
    right: 0;
}

#siteNavigation #accountBox li {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 0;
}

#accountBox li.intro {
    border-bottom: 1px solid var(--site-border);
    margin-bottom: 30px;
}

#accountBox li a:not(.button) {
    color: #363c4b;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 22px;
}

#accountBox li a:not(.button):hover {
    color: #23a9be;
    background: transparent;
}

#accountBox li a.button {
    color: #fff;
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #08a972;
}

#accountBox {
}

#siteNavigation ul #menu_icon {
    display: none;
}

#menu_icon svg {
    width: 24px;
    height: 26px;
}

#search_icon svg {
    width: 24px;
    height: 24px;
}

#masthead #topFrame {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row-reverse;

    border-left: 1px solid rgba(255, 255, 255, 0);
    padding: 5px 0;
    position: absolute;
    inset: 15px 0 auto auto;
    width: auto;
    height: 60px;
}

#topFrame .basket_icon {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 5px 0;
    margin-left: 10px;
}

#topFrame .basket_icon svg {
    width: 30px;
    height: 40px;
}

#topFrame .basket_icon a span {
    position: absolute;
    color: #eb6a2e;
    padding: 4px 0;
    display: block;
    inset: 7px 0 auto 4px;
    margin: auto;
    text-align: center;
    font-weight: 600;
    font-size: 0.66rem;
    line-height: 0.66rem;
}

/*New - displayed over the basket icon - 20/05/24*/

#topFrame .basket {
    display: block;
    padding: 0 50px 50px 0;
    background: #fff;
    color: #363c4b;
    position: fixed;
    top: 0;
    right: -55%;
    width: 50%;
    border-radius: 0;
    box-shadow: -1px -1px 6px rgba(0, 0, 0, 0.3);
    z-index: 5000;
    height: 100vh;
    overflow-y: auto;
    transition: all ease-in-out 0.4s;
    text-align: left;
    scrollbar-color: #a0a7af rgba(255, 255, 255, 0.13);
    border-top: 4px solid #a5adb6;
}

#topFrame .popout-basket-container {
    padding-left: 50px;
}

#topFrame .basketFrame.active .basket {
    right: 0;
}

/*Shop Settings - 20/05/24*/
#shopSettings {
    display: block;
    position: relative;
    padding: 0 0 2px;
}

.trigger-settings {
    display: flex;
    align-items: center;
    text-align: left;
}
.trigger-settings svg {
    width: 24px;
    height: 24px;
    margin: 0 0 0 10px;
    flex-shrink: 0;
    fill: #606770;
}

.trigger-settings .label {
    display: block;
    font-size: 0.56rem;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    color: #92aac6;
    line-height: 0.56rem;
}

#current_language {
    display: block;
    /*border-left: 1px solid #efefef;
  border-right: 1px solid #efefef;*/
    padding: 0 10px;
    flex-shrink: 0;
}

#current_language img {
    width: 22px;
    height: auto;
    display: block;
    margin: 4px 0 0;
    border-radius: 4px;
}

#current_language .label {
    text-align: center;
}

#ship_to {
    display: block;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

#ship_to .choice {
    color: #eb6a2e;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.644rem;
    line-height: 0.644rem;
    display: block;
    margin: 5px 0;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 3px 0 1px;
    border-bottom: 1px solid var(--site-border);
    width: 120px;
    padding-bottom: 1px;
    height: 16px;
}

#current_currency {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    /* background: #eb6a2e; */
    /* background: var(--site-grey); */
    color: var(--site-grey);
    font-size: 0.96rem;
    font-weight: bold;
    margin: 2px 0 0 10px;
    flex-shrink: 0;
    line-height: 0.96rem;
    padding: 0 0 2px;
    background: #fff;
    border: 0.126rem solid var(--site-grey);
}
/*modal*/
.shop-settings {
    display: none;
    padding: 20px 8px 8px;
    background: #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
    position: absolute;
    z-index: 1000;
    top: calc(100% + 3px);
    left: 50%;
    width: 200px;
    transform: translateX(-50%);
    text-align: left;
    border-top: 2px solid #91b0d7;
}

#shopSettings.active .shop-settings {
    display: block;
}

#shopSettings.active .trigger-settings *,
#shopSettings .trigger-settings:hover * {
    color: #91b0d7;
}

#shopSettings .trigger-settings:hover svg {
    fill: #91b0d7;
}

#shopSettings.active .trigger-settings img,
#shopSettings .trigger-settings:hover img {
    filter: grayscale(1) contrast(110%);
    /* opacity: 0.4; */
    mix-blend-mode: overlay;
}

#shopSettings.active .trigger-settings > svg {
    fill: #eb6a2e;
}

#shopSettings .trigger-settings:hover #current_currency,
#shopSettings.active #current_currency {
    color: #91b0d7;
    border-color: #91b0d7;
}
#shopSettings.active .trigger-settings::before,
.trigger-settings:hover #current_language::before {
    content: '';
    background: #91b0d7;
    position: absolute;
    inset: auto 0 2px 10px;
    border-radius: 4px;
    width: 22px;
    height: 17px;
    z-index: -1;
    opacity: 0.8;
}

.shop-settings label {
    display: block;
    margin: 0 0 10px;
}

.shop-settings label span {
    display: block;
    margin: 0;
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #728294;
    height: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.shop-settings label select {
    width: 100%;
    margin: 0;
    border: none;
    padding: 10px 0;
}

.save-changes {
    margin: 0;
}

.save-changes .button {
    width: 100%;
    margin: 0;
    text-align: center;
}
/*--end*/
#accountBox li a.close:hover,
#accountBox li a.close,
#topFrame .basket .close,
#navBar .close {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    background: #a5adb6;
    color: #fff;
    text-align: center;
    padding: 0;
}

#accountBox li a.close,
#topFrame .basket .close {
    right: 0;
    left: 0;
}

#topFrame .basket .close {
    position: sticky;
}

.basket .sticky-header {
    position: sticky;
    z-index: 1;
    padding: 30px 0 10px;
    background: #fff;
    height: auto;
    width: 100%;
    top: 0;
}

.basket h3 {
    display: flex;
    border-bottom: 1px solid #363c4b;
    padding-bottom: 10px;
}

.basket h3 > div {
    width: 50%;
}

.basket h3 > div:last-of-type {
    text-align: right;
}

.basket h3 span {
    font-weight: 400;
}

.basket span.info {
    display: inline-block;
    vertical-align: middle;
    margin: 0 20px 0 0;
    padding: 8px 20px;
    max-width: 60%;
}

.basket .summary {
    margin: 0 0 20px;

    font-size: 18px;
    line-height: 22px;
    padding: 20px 0 15px;
}

.basket .summary > div {
    display: block;
    width: 100%;
    margin-left: 50%;
    width: 50%;
}

.basket .summary > div.h4 {
    margin-top: 10px;
}

.basket .summary > div .amount {
    width: 180px;
    text-align: right;
}

.basket .summary > div .amount .icon {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.basket .summary > div .amount select {
    margin: 0;
    height: 30px;
    padding: 6px;
    font-size: 12px;
}

.summary-container {
    display: flex;
    border-top: 1px solid #363c4b;
}
.summary-container dl {
    display: flex;
    justify-content: space-between;
    margin: 0 0 10px;
}
.summary-container .h6 svg {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
.summary-container .h4 > div,
.summary-container .h6 > div {
    width: 130px;
}
.summary-container .border-none {
    border: none !important;
}

.summary {
    flex: 2;
}

.basket .summary > div.h6 small a {
    color: #eb6a2e;
    text-decoration: underline;
}

.basket .summary > div.popout-basket-vat-number-form {
    display: block;
    text-align: left;
    border: 1px solid #eb6a2e;
    padding: 10px;
    margin-top: 10px;
}

.basket .summary > div.popout-basket-vat-number-form h6 {
    margin: 0;
}

.basket .summary > div.popout-basket-vat-number-form .the-form {
    display: flex;
}

.basket .summary > div.popout-basket-vat-number-form .the-form input {
    margin-right: 10px;
}

.basket .summary > div.popout-basket-vat-number-form .the-form #vat-number-verify-button {
    width: 150px;
}

.basket .summary > div.important-basket-message {
    display: block;
    text-align: left;
    border: 1px solid #eb6a2e;
    padding: 10px;
    margin-top: 10px;
}

.basket .summary > div.important-basket-message p {
    padding: 0;
    margin: 0;
}

.basket .summary .checkout-buttons-container {
    font-size: 14px;
}

.basket .basket_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--site-border);
}

.basket .basket_item:first-of-type {
    border-top: 1px solid var(--site-border);
}

.basket_item .product_image {
    width: 15%;
    padding-right: 10px;
}

.basket_item .product_info {
    width: 55%;
    padding: 0 15px;
}

.basket_item .product_info a {
    display: block;
    padding: 5px 0;
}

.basket_item .product_info .code {
    display: block;
    padding: 5px 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: #23a9be;
}

.basket_item .product_price {
    font-size: 16px;
}

.basket_item .product_price small {
    color: #606770;
    padding: 0 5px;
    font-weight: bold;
}

.basket_item .basket-line-badges,
.product .product-info .basket-line-badges {
    display: flex;
    align-items: center;
}

/*.basket .basket_offer styles with main basket offers*/

#masthead .basket_item .product_info a:hover {
    color: #23a9be;
}

.basket_item .product_info small {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.basket_item .product_info small .section-item {
    padding-bottom: 5px;
}

.basket_item .product_info small .offer {
    display: block;
    color: #08a972;
    font-weight: 600;
    padding: 2px 0;
}

.basket_item .product_price {
    color: #08a972;
    width: 31%;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: left;
}

.basket_item .product_price input {
    width: 45px;
    text-align: center;
    margin: 0;
}

.basket .cta {
    text-align: right;
    display: block;
}

.basket .cta .button {
    display: inline-block;
    margin: 0 0 0 5px;
}

.basket .basket-footer-badges {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 20px;
}

.basket .basket-footer-badges .basket-footer-badge {
    display: block;
    max-width: 25%;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 0.84rem;
    color: #728294;
    margin-left: 20px;
}

.basket .basket-footer-badges .basket-footer-badge img {
    display: block;
    margin: 0 auto 5px;
}

.minimum-order-value-not-reached {
    display: flex;
    align-items: center;
    border: 1px solid #eb6a2e;
    padding: 15px;
    font-size: 18px;
}

.minimum-order-value-not-reached .info-flag {
    width: 40px;
    margin-left: 20px;
}

.minimum-order-value-not-reached .eu-flag {
    width: 75px;
}

.minimum-order-value-not-reached .message {
    padding: 0 20px 0 40px;
    flex: 1;
}

.delivery-warnings {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}

.delivery-warnings .delivery-warning {
    width: 49%;
}

.delivery-warning {
    border: 1px solid #a5adb6;
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    display: flex;
    align-items: center;
}

.delivery-warning .image {
    width: 30%;
}

.delivery-warning .description {
    width: 70%;
    padding-left: 10px;
}

.delivery-warning .description {
    width: 70%;
    padding-left: 10px;
}

.delivery-warning .description .important {
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 5px;
    font-size: 13px;
}

.delivery-warning .description .message {
    font-size: 12px;
}

#topFrame .currencies {
    position: relative;
    display: inline-block;
    padding: 0;
    margin-left: 15px;
    line-height: 25px;
    text-align: center;
    width: 40px;
    min-width: 40px;
    border-radius: 50%;
    height: 40px;
    border: 1px solid var(--site-border);
}

#topFrame .currencies > a {
    display: block;
    padding: 3px 0 6px;
}

#topFrame .currencies .current_currency {
    font-size: 20px;
    line-height: 28px;
    color: #606770;
    display: block;
    margin: 2px auto;
    font-weight: 600;
}

#topFrame .currencies .currencies_box {
    display: none;
    position: absolute;
    top: 100%;
    left: -8px;
    width: 55px;
    padding: 10px 0;
    background: #fff;
    box-shadow: -1px -1px 6px rgba(0, 0, 0, 0.3);
    border-radius: 0 0 4px 4px;
    color: #363c4b;
    z-index: 100;
    line-height: 1rem;
}

#masthead .currencies.active .currencies_box {
    display: block;
}

#topFrame .currencies_box a {
    display: block;
    padding: 5px 0;
}

#topFrame .currencies_box a:hover {
    color: #eb6a2e;
}

#topFrame .currencies .currencies_box a small {
    font-size: 10px;
}

#topFrame .languages {
    display: inline-block;
    padding: 0;
    line-height: 25px;
    text-align: center;
    margin-left: 0;
    width: 40px;
    min-width: 40px;
    border-radius: 50%;
    height: 40px;
    border: 1px solid var(--site-border);
}

#topFrame .currencies:hover,
#topFrame .languages:hover {
    background: #fcfcfc;
}

#topFrame .languages #current_language {
    vertical-align: middle;
    display: block;
    margin: 0 auto 2px auto;
    width: 100%;
    border-radius: 4px 4px 0 0;
    padding: 12px 8px;
}

#topFrame .languages.active #current_language {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    opacity: 1;
}

#topFrame .languages .languages_box {
    display: none;
    position: absolute;
    top: 80%;
    right: 0;
    padding: 20px;
    background: #fff;
    z-index: 100;
    margin: 0;
    color: #363c4b;
    border-radius: 4px;
    box-shadow: -1px -1px 6px rgba(0, 0, 0, 0.3);
    min-width: 280px;
}

#masthead .languages.active .languages_box {
    display: block;
}

#translationDetector {
    color: #fff;
    height: 1px;
}

#google_translate_element {
    margin: 15px 0 0;
    display: block;
    padding: 0;
}

#masthead #language_shortcuts > a {
    display: block;
    text-align: left;
    padding: 5px;
    margin: 5px 0;
    font-weight: 500;
}

#masthead .languages .languages_box a:hover {
    color: #23a9be;
}

#masthead .languages .languages_box a img {
    display: inline-block;
    vertical-align: middle;
}

#masthead #language_shortcuts a span {
    padding: 0 20px;
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}

#masthead .currencies.active,
#masthead .languages.active {
    background: #f9f9f9;
}

#masthead #searchbox {
    position: absolute;
    top: -5px;
    bottom: 0;
    right: 0;
    line-height: 25px;
    width: 100%;
    margin: 5px 0 0;
    padding: 15px 40px 15px 20px;
    visibility: hidden;
    opacity: 0;
    z-index: 5000;
    display: block;
    align-items: center;
}

#masthead #searchbox.active {
    visibility: visible;
    opacity: 1;
}

#searchbox input {
    border: 1px solid #c1c9d2;
    border-color: #d0d9e3;
    min-width: initial;
    margin: 0 -2px;
    font-size: 0.786rem;
    font-weight: 500;
    color: var(--site-grey);
}

#searchbox input[type='text'] {
    border-radius: 4px 0 0 4px;
}

#searchbox .searchButton {
    width: 30%;
    background: #a5adb6;
    border-radius: 0 4px 4px 0;
}

#searchbox .searchButton:hover {
    background: #eb6a2e;
    border-color: #eb6a2e;
}

#searchbox .searchbox {
    width: 70%;
}

.close {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    padding: 0;
    background: #7d8798;
    text-align: center;
    color: #fff;
}

.close:hover {
    color: #23a9be;
}

.close svg {
    width: 20px;
    height: 20px;
    margin: 5px 0 0 0;
}

#errorBox {
    background: #50545f;
    padding: 0;
    text-align: center;
    margin: 2px 3px 0 -2px;
    font-size: 12px;
    display: none;
}

#dimScreen {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 100;
}

.please-wait-message {
    position: fixed;
    top: 25vh;
    left: 0;
    right: 0;
    margin: auto;
    padding: 25px;
    font-size: 18px;
    line-height: 22px;
    font-weight: bold;
    z-index: 1001;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    color: #08a972;
    letter-spacing: 0.5px;
}

.please-wait-message:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.9);
}

.please-wait-message img {
    display: block;
    margin: 0 auto;
}

/*------------------- #Ad */
.banner a[href='#'] {
    cursor: default;
}

.bottom-banner {
    display: block;
    position: fixed;
    z-index: 200;
    bottom: -80px;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    text-align: center;
    padding: 1px 0 0;
    visibility: hidden;
    opacity: 0;
    transition: all ease-in-out 0.4s;
    max-height: 80px;
    box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.13);
}

.bottom-banner.active {
    bottom: 0;
    opacity: 1;
    visibility: visible;
}

#checkout .bottom-banner {
    display: none;
}

.bottom-banner picture {
    display: block;
    margin: 0 auto;
}

#home .bottom-banner {
    display: none;
}

#footer #trustPilot {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 20px 0;
}

#footer #trustPilot .trustpilot-widget {
    max-height: 75px;
}

#filterSelector {
    display: block;
    padding: 0 20px;
    border-top: 3px double var(--dd-bkg2);
    min-height: 48px;
    background: #fff;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 39%, rgba(249, 249, 249, 1) 88%, rgba(226, 223, 242, 1) 90%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 39%, rgba(249, 249, 249, 1) 88%, rgba(226, 223, 242, 1) 90%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 39%, rgba(226, 254, 242, 1) 88%, rgba(226, 223, 242, 1) 90%, rgba(255, 255, 255, 1) 100%);
    /*#e2e9f2 226,223,242   #E2EAF2 - 226,234,242  */

    background: linear-gradient(to bottom, rgb(255, 255, 255) 78%, rgb(245, 250, 254) 88%, rgb(231, 238, 242) 90%, rgb(255, 255, 255) 100%);
}

#masthead.docked #filterSelector {
    min-height: 54px;
}

#filterSteps {
    display: none;
}

#filterSelector-choices {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#filterSelector-choices .label {
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    width: 25%;
    font-weight: 500;
}

#filterSelector-choices .label::after {
    content: 'Start here';
    display: inline-block;
    background: #242c34;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    margin-left: 20px;
    border-radius: 8px 0;
    white-space: nowrap;
}

#filterSelector-choices .filterSteps {
    padding: 0 0 0 10px;
    width: 60.4%;
    display: flex;
    justify-content: space-between;
}
#filterSelector-choices .filterSteps > span {
    width: 42%;
    margin: 0;
    padding: 4px 0 5px 5px;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
}

#filterSelector-choices .filterSteps > span::before {
    display: block;
    background: #bccde1;
    width: 20px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    font-weight: 600;
    margin: 0 -5px 0 0;
    border-radius: 5px;
    z-index: 10;
    font-size: 0.66rem;
}

#filterSelector-choices .filterSteps > .step2:before {
    content: '1';
}

#filterSelector-choices .filterSteps > .step3:before {
    content: '2';
}

#filterSelector-choices .filterSteps > .step1 {
    display: none;
}

#filterSelector-choices .filterSteps > span:nth-of-type(4) {
    width: 120px;
}

#filterSteps .selected {
    color: #606770;
}

#filterSteps .selected span {
    background: #131313;
    opacity: 0.6;
}

#filterSelector-choices .filterSteps .step1 {
    display: none;
}

#filterSelector-choices .filterSteps button,
#filterSelector-choices .filterSteps select {
    width: 100%;
    min-width: initial;
    margin: 0;
}

#filterSelector-choices .filterSteps select {
    color: #7d8ea2;
    padding: 4px 13px;
    text-transform: uppercase;
    border-radius: 4px;
    border: 1px solid var(--site-border);
    height: 32px;
    font-weight: 600;
    font-size: 0.76rem;
    letter-spacing: 0.026rem;
}

#filterSelector-choices .filterSteps select.unselected {
    cursor: pointer;
}

#filterSelector-choices .filterSteps > span.active:before {
    background: #08a972;
}

#filterSelector-choices .filterSteps > span.active select {
    border-color: #08a972;
}

#filterSelector-choices.active .filterSteps > span:before,
#filterSelector-choices.active .filterSteps > span.active:before {
    background: #bccde1;
}

#filterSelector-choices.active .filterSteps > span select,
#filterSelector-choices.active .filterSteps > span.active select {
    border-color: #bccde1;
}

#filterSelector-choices.active .label::after {
    display: none;
}

#filterSelector #dropCarMake {
    background: transparent;
}

#filterSelector-choices .filterSteps button {
    width: 100%;
    padding: 8px 14px;
    font-size: 0.68rem;
    font-weight: 600;
    border-color: transparent;
    color: #fff;
    background: #9cadc1;
    border-radius: 4px;
    height: 32px;
}

#filterSelector-choices .filterSteps button.enabled {
    background: #08a972;
}

#filterSelector-choices .filterSteps button:hover {
    background: #a5adb6;
    color: #fff;
}

#filterSelector-chosen {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 0;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}

#filterSelector-chosen .myVehicle,
#filterSelector-chosen p {
    margin: 0;
}

#filterSelector-chosen p {
    width: 25%;
    border-right: 1px solid #23a9be;
}

#filterSelector-chosen .myVehicle {
    width: 60%;
    padding: 0;
    font-weight: 500;
    color: #23a9be;
    font-size: 0.86rem;
    line-height: 1.06rem;
    margin: 0 0 4px;
}

#filterSelector-chosen .myVehicle span.label-separator {
    color: #92aac6;
    font-weight: 600;
}

#filterSelector-chosen .myVehicle span.label-separator strong {
    /*color:var(--site-grey);*/
}

#filterSelector-chosen .changeCar {
    width: auto;
    text-align: right;
}

#filterSelector-chosen input {
    display: flex;
    color: var(--d911-teal);
    width: 160px;
    min-width: initial;
    font-size: 0.72rem;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: -0.013rem;
    border-radius: 4px;
    height: 34px;
    border: 1px solid var(--dd-bkg2);
    padding: 4px 12px;
    justify-content: space-between;
}

#filterSelector-chosen input:hover {
    background: var(--d911-teal);
    color: #fff;
}

.basic-lightbox {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 9000;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: all ease-in-out 0.4s;
    pointer-events: none;
}

.basic-lightbox.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.basic-lightbox-content {
    display: block;
    padding: 4px;
    background: #fff;
    position: relative;
}

.basic-lightbox-content .close {
    background: #fff;
    color: #131313;
    top: -36px;
    z-index: -1;
}

.basic-lightbox-content .close:after {
    content: '';
    display: block;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.2;
}

.basic-lightbox-content img {
    display: block;
    margin: 0;
}

/*------------------- Masthead Docked */

#masthead.docked > .innerframe {
    min-height: 60px;
}

#masthead.docked #Logo {
    width: 200px;
}
#masthead.docked #LogoIcon {
    left:210px;
    height:38px;
}
#masthead.docked #searchbox,
#masthead.docked #topFrame,
#masthead.docked #searchbox {
    top: 0;
}

#masthead.docked #filterSteps,
#masthead.docked .promoBox {
    opacity: 0;
    height: 1px;
    overflow: hidden;
}

#masthead.docked #filterSelector select,
#masthead.docked #filterSelector input {
    height: 35px;
}

#masthead.docked #filterSelector-chosen {
    padding: 0;
}

#masthead.docked #filterSelector-chosen input {
    margin: 6px 0 8px;
}

/*------------------- #Footer */
#footer {
    background-color: #fff;
    border-top: 4px double var(--site-border);
    padding: 0;
    box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.13);
    border-bottom: 4px solid #eb6a2e;
    position: relative;
}

#footer > .innerframe {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#footer a {
    color: currentColor;
}

#footer a.contact {
    color: #eb6a2e;
}

#footer a:hover {
    color: #eb6a2e;
}

.footerlogo img {
    display:block;
    width: 100%;
    height: auto;
    height: 40px;
    object-fit: contain;
    object-position: 0 0;
    max-width: 230px;
}

#footer ul {
    list-style: none;
}
.footColFrame {
    display: block;
    /*height: calc(100vh - 188px);*/
}

#footCol1 {
    width: 20%;
    margin: 0;
    padding: 30px 20px 20px 0;
}
.footerlogo {
    max-width: 180px;
    height: 40px;
}

#footCol2 {
    width: 80%;
    margin: 0;
    padding: 10px 0 40px 20px;
    display: grid;
    grid-template-columns: repeat(4, minmax(23%, 25%));

    grid-gap: 20px;
    border-left: 1px solid var(--site-border);
    overflow: auto;
    max-height: 100%;
}

#footCol2 .block-col {
    display: block;
}

.block-col .h3 {
    margin: 20px 0 40px;
}

#footer #lowerFooter {
    width: 100%;
    padding: 10px 0 10px;
    border-top: 1px solid var(--site-border);
    text-align: center;
    color: #8899ae;
    font-size: 0.78rem;
    letter-spacing: 0.13rem;
    text-transform: uppercase;
    font-weight: bold;
    height: 50px;
    background: #fcfcfc;
}

#lowerFooter .copyframe {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0 60px;
    max-width: fit-content;
    position: relative;
    gap: 40px;
}
#footCol2 ul li {
    margin: 0 0 8px;
}

#lowerFooter a {
    color: currentColor;
}

#footer ul + .h3,
#footer p + .h3 {
    margin-top: 30px;
}

#footCol2 .socialbox {
    grid-column: span 4;
}

.socialbox .h3 {
    margin: 0 0 10px;
}

.socialbox ul.social {
    display: flex;
    list-style: none;
    gap: 20px;
}

.social li {
    display: block;
    margin: 0 0 15px 0;
}

.social li a {
    display: block;
}

.social li a span {
    padding-left: 10px;
}

.social li svg {
    width: 25px;
    height: 25px;
}

.creditcards {
    margin: 40px 0 0;
    height: 40px;
    width: 100%;
}

.creditcards img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.popout-basket-container .creditcards {
    margin: 10px 0;
    background: url('../images/svg/PAYMENT_STRIP_UK.svg') right / contain no-repeat;
}

#footer .button,
#footer .newsletter input {
    width: 100%;
}

#gotop {
    display: block;
    margin: auto;
    width: 31px;
    height: 30px;
    line-height: 40px;
    text-align: center;
    border: 1px solid var(--site-border);
    background: url('../images/svg/arrow-down.svg') center / 22px auto no-repeat;
    transform: rotate(-180deg);
    border-radius: 4px;
    position: absolute;
    inset: 0 auto 0 0;
}
#ddtag svg {
    width: 150px;
    height: 30px;
    color: #a5b6ca;
}
/*------------------- #navBar */
#navBar .sectionContent {
    display: block;
    margin: 0 0 40px;
}

#navBar .sectionContent img {
    max-width: 90%;
    object-fit: contain;
}

#navBar .navTitle {
    display: block;
    padding: 10px 0;
    text-transform: uppercase;
    border-bottom: 1px solid var(--site-border);
    margin: 0 0 20px;
}

#navBar .navTitle a {
    color: currentColor;
}

#navBar ul#partsMenu {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
}

#partsMenu li {
    display: block;
    margin: 0 0 5px;
}

#partsMenu li a {
    display: block;
    padding: 5px 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    color: currentColor;
}

#partsMenu li.selected a,
#partsMenu li a:hover {
    color: #eb6a2e;
}

#partsMenu {
}

#partsMenu {
}

/*------------------- Homepage */
.homePageBoxes {
    display: block;
    padding: 0 0 0 15px;
    margin: 0;
    max-width: 100%;
    width: 100%;
}

.homePageBoxes h1 {
    margin: 0 0 15px;
    text-transform: uppercase;
}

   

    #recentProducts {
        margin: 30px 0;
    }

.homePageBoxes > h2 {
    margin-top: 30px;
}

.homePanel h2 {
    width: 100%;
}

ul.intro_icon {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    margin: 30px 0 0;
}

ul.intro_icon li {
    display: inline-block;
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0 20px 0 0;
}

ul.intro_icon li img {
    border: 1px solid var(--site-border);
}

.Banners {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 22px 0 0 0;
}

.Banners > div {
    display: block;
}

.Banners > div:nth-child(1),
.Banners > div:nth-child(2),
.Banners > div:nth-child(3),
.Banners > div:nth-child(4) {
    margin: 0 0 10px;
    width: 100%;
}

.Banners > div img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit:cover;
}

.introPanel {
    margin: 0 0 50px;
    padding: 0;
}
.homePageBoxes .introPanel {
    margin: 0 0 50px;
    padding: 0;
    columns: 2;
    gap: 40px;
    break-inside: avoid;
}

.homePageBoxes .introPanel h1 {
    column-span: all;
}
.banner-carousel {
    display: block;
    width: 100%;
    margin: 30px 0 6px;
    aspect-ratio: 5/1.54;
}
    .banner-carousel .bx-wrapper {
        position: relative;
        z-index: 0;
    }
    .banner-carousel .bx-viewport {
        
    }
    .banner-carousel ul{
        list-style:none;
        display:block;
    }
        .banner-carousel ul li{
           
        }
            .banner-carousel ul li a {
                display: block;
                position: relative;                
            }
        .banner-carousel .bx-wrapper picture {
            
        }


            .banner-carousel .bx-wrapper picture img {
                object-fit: cover;
                aspect-ratio: 5/1.54;
            }

    .banner-carousel .bx-wrapper .bx-prev {
        left: 10px;        
    }
    .banner-carousel .bx-wrapper .bx-next {
        right: 10px;
    }
    .banner-carousel .bx-wrapper .bx-prev,
    .banner-carousel .bx-wrapper .bx-next{
        opacity:0;
    }
    .banner-carousel:hover .bx-wrapper .bx-prev,
    .banner-carousel:hover .bx-wrapper .bx-next {
        opacity: 1;
    }
    /*------------------- Categories */
    #categories {
        padding: 0;
        display: grid;
        grid-template-columns: repeat(6, minmax(14%, 16%));
        margin: 40px 0;
        grid-gap: 10px;
        list-style: none;
    }

#categories li {
    display: block;
    padding: 0;
    border: 1px solid var(--site-border);
    margin: 0;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    transition: all ease-in-out 0.2s;
}
#categories li:hover {
    background: var(--dd-bkg1);
    box-shadow: 0 15px 10px -10px rgba(33, 43, 59, 0.3);
    transform: translate(0, -3px);
}
#categories li h5 {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#categories li a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    text-align: center;
}

#categories li a span {
    width: 100%;
    display: block;
    border-top: 1px solid var(--site-border);
    padding: 20px 10px 10px;
}

#categories li img {
    width: 90px;
    height: 90px;
    margin: 10px auto;
    object-fit: scale-down;
    mix-blend-mode: multiply;
    transition: var(--transition-all);
    filter: grayscale(100%) contrast(110%);
}
#categories li:hover img {
    filter: grayscale(0%) contrast(110%);
    /*mix-blend-mode: multiply;*/
    opacity: 1;
}
#categories li a {
    display: block;
    padding: 0;
    text-transform: uppercase;
    font-weight: 500;
    color: inherit;
    word-break: break-word;
}
#categories li a span {
    width: 100%;
    display: block;
    border-top: 1px solid var(--site-border);
    padding: 10px;
}

#categories li a#viewall {
    border-top: 1px solid var(--site-border);
    color: #2a5bba;
    padding: 6px 0;
    margin-top: 8px;
}

#categories li a:hover {
    color: #23a9be;
}

#categories.diagrams li {
    text-align: center;
}

#categories.diagrams li a img {
    display: inline-block;
}

#HomeFeatured {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0 0;
}

#HomeFeatured > div {
    border: 1px solid var(--site-border);
    padding: 10px;
    background: #fff;
}

#manufacturersHighlight .boxes {
    display: flex;
    justify-content: space-between;
}

#manufacturersHighlight .boxes > div {
    width: 30%;
    padding: 10px;
    text-align: center;
}

#whatsHot {
    width: 25%;
}

#discountTyres img,
#whatsHot img {
    width: 100%;
}

#manufacturersHighlight {
    width: 47.5%;
}

#discountTyres {
    width: 25%;
}

#HomeFeatured > div > h2 {
    min-height: 80px;
    border-bottom: 1px solid var(--site-border);
}

#productHighlight {
    border: 1px solid var(--site-border);
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

#productHighlight > .product {
    width: 40%;
    text-align: center;
    padding: 10px;
}

#productHighlight > .desc {
    width: 60%;
    padding: 20px 20px;
    border-left: 1px solid var(--site-border);
}

#productHighlight .desc .h4 {
    width: 100%;
    margin: 0;
}

.paypalCredit {
    margin-top: 20px;
    text-align: center;
}

/*------------------- xxx */
#mainContent {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    position: relative;
    padding: 0;
}

#mainContent .rightColumnContainer {
    width: 180px;
    border-left: 1px solid var(--site-border);
    padding: 0;
    margin: 0;
}

#bodyText {
    width: 100%;
    padding: 20px 0 20px 20px;
}

#bodyText.page {
    padding: 80px 50px;
}

#bodyMain {
    display: block;
    width: 100%;
    padding: 30px 20px;
}

/*------------------- ProductList.aspx */

/*.breadcrumbs {
  display: block;
  margin: 0 0 40px 0;
  border-bottom: 1px solid var(--site-border);
  padding: 0 0 10px 0;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}*/
.breadcrumbs {
    display: flex;
    margin: 0 0 40px 0;
    border-bottom: 1px solid var(--site-border);
    padding: 0 0 10px 0;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
/*.breadcrumbs::before{
        content:"xox";
    }*/
.breadcrumbs h1,
.breadcrumbs h1 span {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    display: inline;
    line-height: 20px;
}

.breadcrumbs h5 {
    margin-top: 0;
}

.breadcrumbs span {
    color: #606770;
    display: block;
    line-break: loose;
}

.sectionTitle {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    margin: 25px 0 15px 0;
    padding: 0 0 5px 0;
    border-bottom: 1px solid var(--site-border);
    font-weight: 400;
    font-size: 1.36rem;
}

.sectionTitle.results {
    min-height: 40px;
    color: #363c4b;
}

.sectionTitle.results span {
    color: #23a9be;
}

.sectionTitle.results {
    margin: 5px 0 30px;
}

.sectionTitle.results a.active {
    visibility: hidden;
}

#relatedCategory,
#youmayalsolike .sectionContent,
#popularmodels .sectionContent {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    min-width: 100%;
    margin: 0 -1% 0;
}

#relatedCategory > div,
#youmayalsolike .sectionContent > div,
#popularmodels .sectionContent > div {
    border: 1px solid var(--site-border);
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 4px;
    background: #fff;
    margin: 10px 1%;
    display: flex;
    /*Must be  for IE11*/
    flex-flow: column;
    /*Must be  for IE11*/
    width: 23%;
}

#relatedCategory > div:hover,
#youmayalsolike .sectionContent > div:hover,
#popularmodels .sectionContent > div:hover {
    border-color: #23a9be;
}

#relatedCategory > div:hover a,
#youmayalsolike .sectionContent > div:hover a,
#popularmodels .sectionContent > div:hover a {
    color: #23a9be;
}

#relatedCategory > div a,
#youmayalsolike .sectionContent > div a,
#popularmodels .sectionContent > div a {
    display: block;
    padding: 10px 20px;
}

#navBar .shopInfo {
    border-top: 1px solid var(--site-border);
    margin: 30px 0;
}

#navBar .headedPanel {
    border-bottom: 1px solid var(--site-border);
    border-left: 1px solid var(--site-border);
    margin: 0;
    padding: 20px;
    text-align: center;
    background: #fff;
}

#navBar .headedPanel .h6 {
    color: #23a9be;
    text-transform: uppercase;
}

#navBar .fastFinder {
    display: flex;
    padding: 20px;
    border: 1px solid var(--site-border);
    border-radius: 4px;
    margin-right: 20px;
    background: #fff;
}

#diagramsLink {
    position: relative;
}

#navBar .diagrams {
    display: flex;
    padding: 5px 10px 5px 20px;
    border: 1px solid #08a972;
    border-radius: 4px;
    margin-right: 20px;
    background: #fff;
    gap: 10px;
}

#navBar .diagrams::before {
    background: url('/images/green-triangle.png') 0 center / contain no-repeat;
    position: absolute;
    top: 4px;
    left: 0px;
    height: 30px;
    content: '';
    width: 30px;
}

#navBar .fastFinder:hover,
#navBar .diagrams:hover {
    background: #fcfcfc;
}

/*.fastFinder svg,
.diagrams svg {
  width: 50px;
  height: 50px;
}*/

.fastFinder span,
.diagrams span {
    padding: 0;
}

.fastFinder span strong,
.diagrams span strong {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 16px;
    padding: 0;
}

.headedPanel svg,
.headedPanel img {
    display: block;
    margin: 0 auto;
}

.headedPanel svg {
    fill: #23a9be;
    width: 50px;
    height: 50px;
}

.headedPanel a {
    color: #23a9be;
}

#productListContainer .sectionContent {
    padding: 20px 0;
}

#productListContainer .brand-filters .sectionContent {
    padding: 0;
}

#productListContainer {
    display: block;
    padding: 0;
    margin-top: 40px;
    position: relative;
}

#categoryOpen,
#navBar .close {
    display: none;
}

#AboutSection .sectionContent {
    columns: 2;
    column-gap: 50px;
    margin: 0 0 40px;
    font-size: 0.96rem;
    line-height: 1.2rem;
}

.sectionContent p {
    break-inside: avoid;
    margin: 0 0 15px;
    font-size: inherit !important;
    line-height: inherit !important;
}

/*------------------- Product List */

.products-list {
    display: block;
    padding: 30px 0 0;
}

.product-wrapper {
    display: block;
    border: 2px solid #bccde1;
    border-color: #d0d9e3;
    border-color: #c1d2e394;
    padding: 0;
    margin: 0 0 50px;
    background: #fff;
    transition: all ease-in-out 0.2s;
    position: relative;
    border-radius: 4px;
    /*box-shadow: 0 15px 10px -18px rgba(0, 0, 0, 0.35);*/
    box-shadow: 0 18px 10px -18px rgba(0, 0, 0, 0.4);
}

.products-list .product-wrapper {
    z-index: 0;
}
.products-list .product-wrapper.modal-active {
    z-index: 10;
}
.product-wrapper:hover {
    box-shadow: 0 15px 20px -28px rgba(0, 0, 0, 0.85);
}
.listview .product-wrapper:hover {
    box-shadow: 0 30px 18px -28px rgba(0, 0, 0, 0.45);
}
#product .productFrame .product-wrapper:hover {
    box-shadow: none;
}

.product-wrapper .productDisplayOuterContainer {
    border-radius: 4px;
}

.product-wrapper a[class^='']:hover {
    color: #23a9be;
}

.product-wrapper .framedImage {
    display: flex;
    justify-content: center;
    padding: 65px 0;
    position: relative;
    align-items: center;
    height: 100%;
}
.product-wrapper .framedImage img {
    display: block;
    margin: auto;
}
.listview .product-wrapper .framedImage {
}

.product-wrapper .framedImage .zoom {
    position: absolute;
    bottom: 0;
    left: 10px;
    font-size: 0.68rem;
    letter-spacing: -0.13px;
    font-weight: 600;
    color: #606770;
    text-transform: uppercase;
    padding: 5px;
    width: 45px;
    text-align: center;
    line-height: 0.86rem;
}
.product-wrapper .framedImage .zoom a {
    display: block;
}
.product-wrapper .framedImage .zoom svg {
    /*Camera Icon*/
    width: 20px;
    height: 20px;
    margin: -2px auto 0;
}
.product-wrapper .framedImage .zoom .count {
    color: #23a9be;
    position: relative;
    top: 1px;
}
.productImageContainer {
    position: relative;
}

.productImageContainer .diagramBox a {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5px 10px;
    color: #fff;
    background: #363c4b;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

.productImageContainer .diagramBox a img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}
/*.productInfoBox .product-head*/
.product-wrapper .productInfoBox .product-head {
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
    margin-bottom: 0;
    min-height: 80px;
    display: flex;
}
.product-wrapper .productInfoBox .product-head.prodpage {
    border: none;
}
.product-wrapper .productInfoBox .product-head a {
    display: block;
    width: calc(100% - 150px);
    padding: 15px 20px;
    color: var(--site-grey);
}
.listview .product-wrapper .productInfoBox .product-head {
    height: 100px;
}
#product .listview .product-wrapper .productInfoBox .product-head {
    height: 100px;
    justify-content: flex-end;
    border-left: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
}
.product-wrapper .productInfoBox .product-head a:hover {
    color: var(--d911-teal);
}
.product-wrapper .productInfoBox .product-head .brand-logo {
    width: 150px;
    display: block;
    padding: 15px 5px;
    border-left: 1px solid var(--site-border);
    text-align: center;
    position: relative;
}
.product-wrapper .productInfoBox .product-head .brand-logo img {
    display: block;
    margin: auto;
    position: absolute;
    inset: 0;
    object-fit: contain;
    width: 100px;
    height: 60px;
}
.brand-logo .txt {
    position: absolute;
    inset: auto 0 0;
    font-size: 0.66rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--site-accent);
    display: none;
}

.gridview .product-wrapper .productInfoBox .product-head a {
    width: 100%;
    padding: 0;
    height: 60px;
    overflow: hidden;
    margin: 0;
}
.gridview .product-wrapper .productInfoBox .product-head .brand-logo {
    width: initial;
    border: none;
    position: relative;
    inset: initial;
    margin: 0 -15px;
    border-top: 1px solid var(--site-border);
    padding-bottom: 10px;
    height: 70px;
}
.product-wrapper .prod-main-txt .txtbox {
    padding: 15px 10px 15px 20px;
    color: var(--site-grey);
}

.product-wrapper .prod-main-txt .txtbox .row {
    display: block;
}

.product-wrapper .special-offer .panel {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 0;
}

.product-wrapper .special-offer .panel input {
    vertical-align: middle;
    margin-left: 5px;
    margin: 0;
    text-align: center;
}

.product-wrapper .special-offer #dialog {
    display: block;
    padding: 10px;
}

.product-wrapper .special-offer .pricebox {
    font-size: 16px;
    text-align: right;
    display: block;
    margin: 15px 0 0;
}

.product-wrapper .special-offer .pricebox .pricewas {
    text-decoration: line-through;
    color: #a0a7af;
}

.product-wrapper .special-offer .pricebox .pricenow {
    color: #08a972;
    margin-left: 10px;
}

.product-wrapper .offer {
    color: #08a972;
    font-weight: 600;
    text-transform: uppercase;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 20px;
}

.product-wrapper img.brand {
    vertical-align: middle;
}

.product-wrapper p {
    margin: 0 0 5px;
    padding: 15px 0;
}

.product-wrapper p.txtlimit {
    border-bottom: 1px solid #d0dbdd;
    max-height: 150px;
    overflow: auto;
    padding: 15px 20px 15px 0;
}

.product-wrapper .error {
    display: block;
    padding: 0 15px 10px;
}

.product-wrapper .diagramListContainer {
    padding: 15px 15px 0;
    border-top: 1px solid var(--site-border);
}
.product-wrapper .diagramListContainer .diagramList {
    grid-template-columns: repeat(6, minmax(15%, 16%));
    grid-gap: 10px;
}
.gridview .product-wrapper .diagramListContainer .diagramList {
    grid-template-columns: repeat(4, minmax(24%, 25%));
}
.gridview .product-wrapper .diagramListContainer {
    padding: 20px 15px 0;
}

/*Section 1*/
.productDescriptionContainerTop {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    margin: 0;
}
.listview .productDescriptionContainerTop {
    height: 328px;
}
.productDescriptionContainerTop .productImageContainer {
    display: block;
    margin: 0;
    width: 35%;
    height: 328px;
}

.productDescriptionContainerTop .productInfoBox {
    width: 65%;
    margin: 0;
    padding: 0;
}
.productDescriptionContainerTop .productInfoBox .code-label svg {
    width: 16px;
    height: 16px;
    fill: #728294;
    margin-right: 3px;
}
.home .gridview.offers .productInfoBox .product-head {
    min-height: 90px;
}

.productInfoBox .code {
    display: block;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.gridview .product-wrapper .framedImage .zoom,
.gridview .productInfoBox .code {
    left: 0;
}
.productInfoBox .prod-main-txt {
    display: block;
    height: 228px;
    overflow: auto;
    padding: 0;
    margin: 0;
    border-left: 1px solid var(--site-border);
}

.productInfoBox.kit .scrollbox,
.productInfoBox.allvehicles .scrollbox {
    height: 180px;
}

.scrollbox .txtbox {
    padding: 10px 15px;
}

/*Section 2*/
.productDescriptionContainerBottom {
    display: block;
    margin: 0;
    padding: 0;
}
.gridview .productDescriptionContainerBottom {
    /*border-top: 3px solid #c5e8ee;*/
}
.home .productDescriptionContainerBottom {
    margin: 5px 0 0;
}
.fitsbox {
    display: block;
    height: 40px;
    padding: 0;
    width: calc(35% + 1px);
    margin: 0;
    background: #fff;
    border-right: 1px solid var(--site-border);
    flex-shrink: 0;
}
.gridview .fitsbox {
}
.fitsbox.active {
}

.gridview .fitsbox {
    background: #fff;
    height: 40px;
    width: 100%;
}
.gridview .fitsbox.active {
}
label.partType {
    text-align: center;
    font-size: x-small;
    font-weight: bold;
}

.alternativeProdLoader {
    text-align: center;
    width: 36%;
    position: absolute;
    bottom: 6px;
}

.fitsbox .view-fits-vehicles {
    display: flex;
    cursor: pointer;
    padding: 5px 17px;
    align-items: center;
    height: 40px;
    background: #fff;
    color: #6798b0;
}
.alternateProductToggle {
    /*color: #fff;
    background: #92a4b9;*/
}
.fitsbox.active .fitsbox .view-fits-vehicles {
    border-top-color: #fff;
}

.prod-main-txt.active .txt-toggle,
.txt-toggle:hover,
.alternateProductToggle:hover,
.fitsbox.active .view-fits-vehicles span,
.fitsbox.active .view-fits-vehicles,
.view-fits-vehicles:hover {
    background: var(--dd-bkg1);
}
.txt-toggle,
.alternateProductToggle {
    display: flex;
    position: relative;
    border: none;
    border-left: 1px solid var(--site-border);
    inset: auto;
    margin: 0;
    color: #6798b0;
    text-align: left;
    width: 31.44%;
    padding: 5px 15px 5px 10px;
    height: 40px;
    background: #fff;
    align-items: center;
}

.alternateProductToggle {
    border: none;
    border-right: 1px solid var(--site-border);
    width: 35%;
}
.listview .alternateProductToggle {
    padding: 5px 15px 5px 15px;
}

.gridview .alternateProductToggle {
    border: none;
    width: 100%;
    margin: 0;
}
.kitbox.active .toggle span::after,
.alternateProduct:has(.alternateProductResults) .alternateProductToggle span::after,
.prod-main-txt.active .txt-toggle span::after,
.fitsbox.active .view-fits-vehicles span::after,
.gridview .alternateProduct:has(.alternateProductResults) .alternateProductToggle span::after {
    color: #23a9be;
    transform: rotate(-45deg);
}
.gridview .fitsbox.active .view-fits-vehicles span::after,
.gridview .kitbox.active .toggle span::after {
    top: 10px;
    right: 12px;
}

.gridview .fitsbox.active .view-fits-vehicles {
}
.kitbox .toggle span,
.txt-toggle span,
.productInfoBox .kitbox .toggle span,
.alternateProductButton button span,
.alternateProductToggle span,
.view-fits-vehicles span {
    display: block;
    padding: 0;
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: -0.13px;
    position: relative;
    width: 100%;
}
.alternateProductButton button:hover span,
.alternateProductToggle:hover span {
}

.unavailable-message {
    background-color: none;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 13px;
    float: right;
    margin-bottom: 10px;
    width:fit-content;
}

.alternateProductToggle:hover,
.alternateProduct:has(.alternateProductResults) .alternateProductToggle,
.prod-main-txt.active .txt-toggle,
.txt-toggle:hover,
.kitbox .toggle:hover,
.kitbox.active .toggle,
.fitsbox.active .view-fits-vehicles,
.view-fits-vehicles:hover {
    color: #23a9be;
    background: var(--dd-bkg1);
}
.txt-toggle span::after,
.kitbox .toggle span::after,
.alternateProductButton button span::after,
.alternateProductToggle span:after,
.view-fits-vehicles span::after {
    content: '\002B';
    display: block;
    position: absolute;
    top: 3px;
    right: 0;
    color: #92aac6;
    width: 10px;
    height: 10px;
    font-size: 1.14rem;
    line-height: 0.68rem;
}

.view-fits-vehicles svg {
    width: 26px;
    height: 26px;
    padding-right: 26px;
}

.fitsbox .fits-vehicles {
    display: none;
    overflow: auto;
    position: absolute;
    background: var(--dd-bkg1);
    padding: 20px 15px;
    z-index: 10;
    height: 328px;
    margin: auto;
    width: 35%;
    inset: auto auto 41px 0;
    border-radius: 4px 0 0 0;
}
.gridview .fitsbox .fits-vehicles {
    width: 100%;
    inset: auto 0 41px;
    height: 467px;
    padding: 15px 8px;
    font-size: 0.84rem;
    line-height: 1rem;
    color: #667586;
}
#relatedproducts .gridview .fitsbox .fits-vehicles {
    height: 299px;
}
.fitsbox.active .fits-vehicles {
    display: block;
}
.fitsbox .fits-vehicles .h6 {
    display: block;
    margin: 0 0 10px;
}
.fits-vehicles ul {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    padding: 0;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1rem;
    color: var(--site-grey);
}
.fits-vehicles ul li {
    display: block;
    padding: 0;
    margin: 0;
}

.txt-toggle {
    display: none;
    align-items: center;
    width: 100%;
    border: none;
    border-top: 1px solid var(--site-border);
    /*border-bottom: 1px solid var(--site-border);*/
    color: #6798b0;
    background: #fff;
}
.gridview .txt-toggle {
    display: flex;
}
.linethrough {
    text-decoration: line-through;
    color: #a0a7af;
    padding: 0 10px;
    /*font-size: 14px;*/
    margin: 5px 0;
    white-space: nowrap;
}

.pricewas .linethrough {
    padding: 0;
    white-space: nowrap;
}

.pricewas .pricenow {
    padding-left: 5px;
    font-size: 16px;
}

.kitbox {
    display: block;
    height: 40px;
    padding: 0;
    width: 22%;
    margin: 0 -1px;
    background: #fff;
    border-left: 1px solid var(--site-border);
    border-right: 1px solid var(--site-border);
}

.gridview .kitbox::after {
    inset: 0 40px auto auto;
    width: 40px;
}

.gridview .pdfFrame {
    height: auto;
}
.kitbox .txtbox {
    display: none;
    overflow: auto;
    position: absolute;
    inset: auto 0 41px calc(35% + 1px);
    background: var(--dd-bkg1);
    z-index: 10;
    height: 328px;
    padding: 20px 15px;
    overflow: auto;
}
.gridview .kitbox .txtbox {
    height: 467px;
    padding: 15px 10px 20px;
    inset: auto auto 41px 0;
    width: 100%;
}
.kitbox .toggle {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 5px 15px;
    color: #6798b0;
    background: #fff;
    justify-content: center;
    margin: 0;
}

.gridview .kitbox .toggle {
    width: 100%;
    inset: initial;
    margin: 0;
    border: none;
    position: initial;
    padding: 0;
}

.kitbox .toggle svg {
    margin-right: 5px;
    width: 20px;
    height: 20px;
}

.kitbox .toggle.active {
    height: 41px;
}

.kitbox.active .txtbox {
    display: block;
}
.kitbox.active .txtbox .stockStatus {
    display: inline-flex;
    width: 100%;
    margin: 0;
    white-space: normal;
}

.productInfoBox .prod-main-txt p {
    margin: 0 0 10px;
    padding: 0;
}
.kitbox .kit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px 30px;
    color: var(--site-grey);
}
.gridview .kitbox .kit-grid {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    font-size: 0.84rem;
    line-height: 1rem;
    color: #667586;
}
.productInfoBox .expand .toggle {
    display: block;
    cursor: pointer;
    height: 39px;
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #606770;
}

.productInfoBox .expand .toggle svg {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

.productInfoBox .expand .txtbox {
    padding-top: 10px;
}

.productInfoBox .expand.active .toggle {
    color: #23a9be;
    border-bottom: 1px solid var(--site-border);
}

#product #relatedproducts .product-wrapper *::after,
#product #relatedproducts .product-wrapper *::before,
#product #relatedproducts .product-wrapper *,
#productListContainer .product-wrapper *::after,
#productListContainer .product-wrapper *::before,
#productListContainer .product-wrapper * {
    border-color: #e2e9f2;
}

.offertag.text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 8px 15px;
    text-transform: uppercase;
    position: absolute;
    top: -29px;
    height: 30px;
    right: 20px;
    border-radius: 4px 4px 0 0;
    white-space: nowrap;
    background: #fff;
    color: #23a9be;
    border: 1px solid var(--site-border);
    border-bottom: none;
}

.offertag {
    position: absolute;
    inset: 0 auto 0 calc(35% - 80px);
    width: 80px;
    height: 80px;
    z-index: 0;
}
.gridview .offertag {
    inset: 0 0 auto auto;
}

.offertag img {
    position: absolute;
    inset: 0;
    display: block;
    object-fit: contain;
}

.paging {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
}
.paging.bottom {
    margin: 40px 0;
}

.paging.top {
    justify-content: space-between;
}

.paging .topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.paging .page-display {
    font-size: 12px;
    text-transform: uppercase;
    color: #50545f;
    letter-spacing: 0.5px;
    font-weight: 600;
    width: auto;
    padding: 0;
}

.pageno {
    margin-left: 20px;
}
.pageno:empty {
    display: none;
}
.pageno a {
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 0;
    background: #efefef;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 2px;
}

.paging > div a.current,
.paging > div a:hover {
    background: #363c4b;
    color: #fff;
}

/*Section 4*/
.productOptions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    border-top: 1px solid var(--site-border);
    margin: 0;
    padding: 0 15px;
}
.gridview .productOptions {
    padding: 0 8px;
}

.productOptions > .panel {
    margin: 0;
}

.product-wrapper .productOptions .priceBox {
    width: 34%;
    padding: 10px 0;
    margin: 0;
    display: block;
    position: relative;
}

.productOptions .panel.options {
    width: 100%;
    margin-top: 10px;
}

.productOptions .panel.options h5 {
    margin: 0 0 10px;
    text-transform: none;
}

.productOptions .panel.options .option-group-label {
    padding-bottom: 5px;
    color: #728294;
    font-size: 0.76rem;
    line-height: 0.96rem;
    font-weight: 600;
}

.productOptions .panel.options select {
    padding-right: 25px;
    margin-bottom: 15px;
    max-width: 340px;
}

.productOptions .priceregular + .panel.options,
.productOptions .pricewas + .panel.options {
    margin-top: 20px;
}

.productOptions .pricewas {
    width: 100%;
}
.listview .productOptions .pricewas {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}
.listview .productOptions .pricewas span {
    width: fit-content;
    margin: 0;
}
.linethrough.previous-price,
.price-old-display {
    display: block;
    margin: 0 0 5px;
    width: 100%;
    white-space: nowrap;
}
.relatedProductItem .stockStatus,
.productOptions .pricewas > span,
.panel.options label span {
    display: block;
    margin: 0 0 2px;
    padding: 0;
    overflow: hidden;
}

.productOptions .panel.badges-addbasket {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 15px 0 10px;
    width: 66%;
}
.productOptions .product-secondary-badges {
    width: 55%;
    display: flex;
    justify-content: flex-end;
}

.product-secondary-badges .secondarybadge {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
    padding: 0 2px;
    color: #728294;
    flex-direction: column-reverse;
}

.product-secondary-badges .secondarybadge img {
    display: block;
    object-fit: contain;
    margin: 0 auto;
    aspect-ratio: 1/1;
}
.product-secondary-badges .secondarybadge svg {
    width: 40px;
    aspect-ratio: 1/1;
    height: auto;
}
.product-secondary-badges .secondarybadge .txt {
    margin: 5px -2px 0;
    text-align: left;
    font-size: 0.482rem;
    line-height: 0.58rem;
    font-weight: 600;
    min-height: 18px;
}

.productOptions .panel.badges-addbasket .addbasket {
    width: 45%;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.productOptions .panel.badges-addbasket input,
.productOptions .panel.badges-addbasket button {
    margin: 0 0 3px 3px;
    vertical-align: middle;
    text-align: center;
}

.productOptions .panel.badges-addbasket input[type='number'] {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}

.productOptions .panel.badges-addbasket .error {
    width: 100%;
    padding: 6px;
    color: #363c4b;
    font-size: 13px;
    margin: 5px 0 0;
    border-radius: 6px 0;
}

.productOptions label {
    display: inline-block;
    padding: 0 0 0 10px;
    cursor: pointer;
    vertical-align: middle;
}

.productOptions label img {
    vertical-align: middle;
}

.productOptions input[type='checkbox'] {
    margin-top: 3px;
}

.productOptions label strong {
    font-weight: 600;
    color: #08a972;
    padding-left: 0;
    display: block;
    font-size: 0.76rem;
    line-height: 0.86rem;
    width: 125px;
}
.gridview .productOptions label strong {
    padding: 0;
}

.productOptions .priceBox .stock {
    width: 100%;
    margin: 0 0 5px;
    padding: 0;
    display: block;
}

.productOptions .priceBox .stock.retail {
    font-size: 12px;
    margin-top: 5px;
}

.productOptions .priceBox .stock.retail img {
    position: relative;
    top: 4px;
    cursor: pointer;
}

.productOptions .priceBox .options .stock.retail img {
    top: -1px;
}

/*priceOptions - modified - dd_km - 02/10/24---*/
.product-wrapper .productOptions {
    justify-content: space-between;
}

.product-wrapper .productOptions .priceBoxFrame:has(.unavailable-message) {
    width:100% !important;
}
#ProductList .gridview .product-wrapper .productOptions {
    flex-direction: column;
    height: 100%;
}
#relatedproducts .gridview .product-wrapper .productOptions {
    border: none;
}

.notVisible {
    display: none;
}

.visible {
    display: block;
}

.product-wrapper .productOptions:has(.panel.options .stockStatus) {
    padding-bottom: 0;
}

.product-wrapper .productOptions .priceBoxFrame {
    width: calc(100% - 290px);
    padding: 10px 15px 0 0;
    margin: 0;
    display: block;
    position: relative;
    display: flex;
}
.gridview .product-wrapper .productOptions .priceBoxFrame {
    width: 100%;
    padding: 10px 0 0;
}
.product-wrapper .productOptions:empty,
.product-wrapper .productOptions .priceBoxFrame:empty {
    padding: 0;
    border: none;
    height: 0;
    display: none;
}
.product-wrapper .productOptions .priceBoxFrame .priceBox {
    width: 100%;
    padding: 0;
}

.product-wrapper .productOptions .priceBoxFrame .variant-grid .panel.options {
    width: 100%;
    display: grid;
    /*grid-template-columns: repeat(4,minmax(23%, 25%));*/
    grid-template-columns: repeat(2, minmax(48%, 50%));
    grid-gap: 8px 12px;
    margin: 0;
    padding: 0 0 15px 0;
}
.gridview .product-wrapper .productOptions .priceBoxFrame .variant-grid .panel.options {
    display: flex;
    padding: 0 5px 10px;
    margin: 0;
    gap: 5px;
    justify-content: flex-start;
    width: 100%;
    height: fit-content;
}
.listview .product-wrapper .productOptions .priceBoxFrame .variant-grid .panel.options .h5 {
    grid-column: span 2;
    margin: 0;
}

.product-wrapper .productOptions .priceBoxFrame .variant-grid .priceOption img {
    width: 120px;
    height: 55px;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.listview .product-wrapper .productOptions .priceBoxFrame .variant-grid .priceOption img {
    position: absolute;
    inset: 0 5px auto auto;
    margin: auto;
    width: 80px;
    height: 65px;
}
.gridview .product-wrapper .productOptions .priceBoxFrame .variant-grid .priceOption img {
    display: none;
}
#productDetails.gridview .product-wrapper .productOptions .priceBoxFrame .variant-grid .priceOption label {
    min-height: 65px;
}
#productDetails.gridview .product-wrapper .productOptions .priceBoxFrame .variant-grid .priceOption img {
    display: block;
    position: absolute;
    inset: 0 5px auto auto;
    margin: auto;
    width: 80px;
    height: 65px;
}

.productOptions .panel.options {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0;
}
.productOptions .panel.options:empty {
    padding: 0;
}
.productOptions .panel.options.dropdowns {
    flex-wrap: wrap;
    gap: 10px;
}

.productOptions .panel.options.dropdowns .dropdown-group {
    width: 49%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.gridview .productOptions .panel.options.dropdowns .dropdown-group {
    width: 100%;
    display: block;
}
.productOptions .panel.options.dropdowns .dropdown-group select {
    width: fit-content;
    margin: 0;
    max-width: 60%;
    min-width:40%;
}
.gridview .productOptions .panel.options.dropdowns .dropdown-group select {
    width: 100%;
    max-width: 100%;
}
.productOptions .panel.badges-addbasket {
    width: 290px;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 0 15px 10px;
    border-left: 1px solid var(--site-border);
}

.productOptions .panel.badges-addbasket .product-secondary-badges {
    width: 100%;
    align-self: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.productOptions .product-secondary-badges .secondarybadge {
    margin: 0;
    max-width: 45px;
}
.productOptions .product-secondary-badges .secondarybadge:last-child {
    margin: 0;
}
.productOptions .panel.badges-addbasket .addbasket {
    width: 100%;
    margin: 14px 0;
}
.productOptions .panel.badges-addbasket .qty {
    padding: 0 5px 0 0;
    width: 70px;
    font-size: 0.68rem;
    font-weight: 500;
}
.productOptions .panel.badges-addbasket button {
    width: calc(100% - 70px);
    white-space: nowrap;
    padding: 8px;
    font-size: 0.68rem;
    margin: 0;
    max-width: 210px;
}
.priceBox .options .h5 {
    width: 100%;
}
.priceBox .options .priceOption {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--site-border);
    border-radius: 4px;
    margin: 0;
    padding: 6px 6px 30px;
    position: relative;
}
.priceBox .options .nonvariant-group {
    width: calc(50% - 7px);
    margin: 5px 0;
    display: block;
}
.priceBox .options .nonvariant-group select {
    width: 100%;
    margin: 0;
}

.priceBox .options .priceOption:has(input:checked) {
    background: var(--dd-bkg1);
}

.priceBox .options .priceOption .priceGroup {
    justify-content: space-between;
    margin: 10px 0 0;
}

.priceOption input {
    position: absolute;
    top: 6px;
    left: 6px;
    pointer-events: none;
}
.gridview .priceOption input {
    top: 5px;
    left: 4px;
}
.productOptions .priceBox .h5,
.productOptions .priceBoxFrame .h5 {
    font-size: 0.85rem;
    font-weight: 500;
    color: #728294;
    margin: 0 0 10px;
}

.gridview .productOptions .priceBoxFrame .h5 {
    margin: 0 0 10px;
    padding: 0 5px;
}
.priceOption label {
    display: block;
    width: 100%;
    font-size: 0.74rem;
    line-height: 0.82rem;
    letter-spacing: 0.02rem;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    cursor: pointer;
    padding: 0;
}
.listview .priceOption label {
    display: block;
    min-height: 55px;
}
.gridview .priceOption label {
    padding-left: 20px;
}
.priceBox.options .priceOption.active {
    border-color: #363c4b;
}
.priceOption .title {
    display: block;
    padding-top: 4px;
    margin: 0 0 0 20px;
    font-weight: 600;
    font-size: 0.76rem;
    line-height: 0.76rem;
}
.listview .priceOption .title {
    margin-bottom: 5px;
    width: calc(100% - 80px);
}
.gridview .priceOption .title {
    margin: 4px 0 2px;
    width: calc(100% - 80px);
}

.priceOption .title span {
    color: var(--site-green);
}

.priceBox .options .priceOption .priceGroup {
    justify-content: space-between;
    margin: 0;
}
.listview .priceBox .options .priceOption .priceGroup {
    width: 75%;
    padding-left: 20px;
    gap: 5px 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.listview .priceBox .options .priceOption .priceGroup > div {
    width: fit-content;
}
.priceBox .priceregular {
    display: block;
    width: 100%;
    padding: 10px 0 0;
    font-size: 0.96rem;
}
.gridview .priceBox .priceregular {
    padding: 0 0 5px;
}
.gridview .priceBox .priceregular span {
    display: block;
    width: 100%;
}
/*.stockStatus*/

.relatedProductItem .stock.retail,
.productOptions .priceBox .stock.retail {
    position: relative;
    border: 1px solid #edeff0;
    background: #fdfdfd;
    padding: 5px;
    font-size: 0.66rem;
    font-weight: 600;
    height: 25px;
    border-radius: 0 0 2px 2px;
    color: #728294;
    margin: 10px 0 0;
    max-width: 275px;
}
.part-options .priceBox .options div .part-status span {
    white-space: break-spaces !important;
}
.relatedProductItem .stockStatus,
.stockStatus,
.panel.options label .stockStatus {
    position: relative;
    display: inline-flex;
    width: 100%;
    letter-spacing: -0.013rem;
    white-space: nowrap;
    overflow: hidden;
}

.stockStatus::before {
    content: '';
    margin-right: 6px;
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #a0a7af;
    flex-shrink: 0;
    border: 2px solid #fff;
}

.yellowDot::before {
    background: #f7e80c;
}

.greenDot::before {
    background: #08a972;
}
.lightGreenDot::before {
    background: #6ed7b3;
}

.redDot::before {
    background: #a7252c;
}

.blueDot::before {
    background: #159cf2;
}

.orangeDot::before {
    background: #ff6600;
}

/*---*/

/*Product Video - modified - dd_km 24/09/24 and size mod by sd*/
/*.product-extras-frame {
    display: block;
    height: 41px;
    position: relative;
    border-top: 1px solid var(--site-border);
    padding: 1px 0 0;
    background: #fff;
}*/
.product-extras-frame {
    display: flex;
    align-items: center;
    height: 41px;
    position: relative;
    border-top: 1px solid var(--site-border);
    padding: 1px 0 0;
    background: #fff;
    padding: 0;
}

.product-extras-frame:empty {
    height: 0;
    border: none;
    padding: 0;
}
.gridview .product-extras-frame {
    height: auto;
    padding: 0;
    background: #f4f6f9;
    background: #f4f8fc;
}
.gridview .product-extras-frame > div {
    width: 26%;
    min-width: 25%;
    border: none;
    border-left: 1px solid var(--site-border);
    border-right: 1px solid var(--site-border);
    padding: 0;
    margin: 0 -1px;
    /*z-index:1;*/
}
.gridview .product-extras-frame .fitsbox {
    z-index: 1;
}
.gridview .product-extras-frame .toggle span,
.gridview .product-extras-frame .view-fits-vehicles span {
    height: 100%;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
}
.gridview .product-extras-frame > div span::after {
    inset: 2px 14px auto auto;
}
.productOptions .other-info {
    display: block;
    padding: 0;
    width: 100%;
    margin: 0;
}

.videoFrame {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 22%;
    margin: 0 -1px;
    padding: 0;
    height: 40px;
    background: #fff;
    border-left: 1px solid var(--site-border);
    border-right: 1px solid var(--site-border);
}
.videoFrame .video-thumbnail {
    margin: 0;
    display: flex;
    padding: 4px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: #728294;
    cursor: pointer;
    width: 100%;
    position: relative;
}

.products-list.gridview .product-wrapper .videoPagelink span {
    display: none;
}
.videoFrame .video-thumbnail:hover {
    color: #23a9be;
}
.videoFrame .video-thumbnail img {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    object-fit: cover;
}
.videoFrame .video-thumbnail .video-gallery-trigger img,
.videoFrame .video-thumbnail svg {
    margin-right: 5px;
    width: 20px;
    height: 20px;
}
.gridview .videoFrame .video-thumbnail svg {
    margin: 0;
}
.gridview .videoFrame .video-gallery-trigger span{
    display:none;
}
.gridview .videoFrame .video-gallery-trigger img{
    object-fit:contain;
}
.videoFrame a {
    display: flex;
    align-items: center;
    font-size: 0.68rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.13px;
    color: #6798b0;
}

.videoFrame .vd-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
}
.videoFrame .hidden-gallery-links{
    display:none;
}

#videoModal .dg-container {
}

.videoFrame .vd-modal iframe {
    width: 1080px;
    height: auto;
    aspect-ratio: 16/9;
}

.videoFrame .vd-modal-content {
    margin: 140px auto 0;
    padding: 30px 0 10px;
    width: 80%;
    width: 1130px;
    /* background-color: white; */
    position: relative;
}
.videoFrame .vd-close {
    color: #aaa;
    display: flex;
    font-size: 28px;
    font-weight: bold;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 100;
    width: 40px;
    align-items: center;
    height: 40px;
    cursor:pointer;
}

.videoFrame .vd-close:hover,
.videoFrame .vd-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/*Carousel video - 14/02/25 dd_km */
#videoWrapper .dg-container {
    
}

.dg-container .carousel-frame iframe {
    
}




/*.pdfFrame*/
.pdfFrame {
    display: block;
    height: 40px;
    padding: 0;
    width: 22%;
    margin: 0 -1px;
    background: #fff;
    border-left: 1px solid var(--site-border);
    border-right: 1px solid var(--site-border);
}
.pdfFrame .resourcePagelink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    font-size: 0.66rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.13px;
    color: #6798b0;
    text-decoration: none;
}

.pdfFrame .resourcePagelink svg {
    margin-right: 5px;
    width: 30px;
    height: 30px;
}
.videoFrame .video-thumbnail:hover,
.pdfFrame .resourcePagelink:hover {
    background: var(--dd-bkg1);
}

.gridview .pdfFrame .resourcePagelink svg {
    margin: 0;
}
.gridview .pdfFrame .resourcePagelink span {
    display: none;
}
.pdfFrame .vd-modal-pdf {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
}
.vd-modal,
.vd-modal-pdf {
    display: none; /* Ensure modals are hidden by default */
}
.product-wrapper.video-modal-active,
.product-wrapper.pdf-modal-active {
    z-index: 100;
}
.product-wrapper.video-modal-active .vd-modal,
.product-wrapper.pdf-modal-active .vd-modal-pdf {
    display: block; /* Only show active modal */
}

.pdfFrame .vd-modal-pdf iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.pdfFrame .vd-modal-content-pdf {
    margin: 15% auto;
    padding: 40px 10px 10px;
    width: 80%;
    max-width: 956px; /* Set max width for the popup */
    background-color: white;
    position: relative;
}
.pdfFrame .vd-close-pdf {
    color: #aaa;
    display: flex;
    font-size: 28px;
    font-weight: bold;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 100;
    width: 40px;
    align-items: center;
    height: 40px;
}

.pdfFrame .vd-close-pdf:hover,
.pdfFrame .vd-close-pdf:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/*---*/
/*.alternateProducts  - 13/11/24 dd_km */
.alternateProduct {
    display: block;
    padding: 0;
    border-top: 1px solid var(--site-border);
    position: relative;
    height: 41px;
}
#product .alternateProduct {
    display: block;
    height: auto;
}

.listview .alternateProduct {
    height: auto;
}
.alternateProduct .alternateProductButton {
    display: flex;
    width: 100%;
    /*justify-content: flex-end;*/
    position: relative;
    inset: 0 0 auto;
    background: #fff;
    height: 40px;
    color: #6798b0;
    border-radius: 0 4px 4px 0;
}
.listview .alternateProduct .alternateProductButton {
    background: linear-gradient(0deg, #fdfdfd 80%, #f0f4f4 90%);
}
#product .alternateProductToggle,
#product .alternateProduct .alternateProductButton {
    display: none;
}

.prod-main-txt .txtbox .section-head,
.product-wrapper .diagramListContainer .h4,
.fitsbox .fits-vehicles .h6,
.kitbox .h6,
.alternateProduct .section-head {
    display: block;
    margin: 0 0 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #3e648c;
    position: relative;
    text-transform: uppercase;
    line-height: 1.05rem;
}

.gridview .product-wrapper .diagramListContainer .h4,
.gridview .fitsbox .fits-vehicles .h6,
.gridview .kitbox .h6,
.gridview .alternateProduct .section-head {
    min-height: 30px;
}

.gridview .alternateProduct .section-head {
    width: 100%;
    cursor: pointer;
}
.listview .prod-main-txt .txtbox .section-head,
#ProductList .listview .alternateProductResults .section-head {
    display: none;
}

.alternateProductResults.hide {
    display: none !important;
}
.alternateProduct .alternateProductResults {
    border-top: 1px solid var(--site-border);
    padding: 15px 10px 20px;
    margin: 0;
    position: absolute;
    inset: auto 0 41px;
    z-index: 10;
    max-height: 495px;
    overflow: auto;
    background: var(--dd-bkg1);
    box-shadow: 0 -7px 9px -8px rgba(0, 0, 0, 0.16);
}

.listview .alternateProduct .alternateProductResults {
    position: relative;
    inset: auto;
    box-shadow: none;
}

#product .alternateProduct .alternateProductResults {
    position: relative;
    inset: auto;
    display: block;
    box-shadow: none;
    border: none;
    padding: 20px 15px 15px;
    z-index: initial;
}
#product .priceregular.grid-8-price-from {
    display: none;
}

.gridview .alternateProduct .alternateBrands {
    grid-template-columns: repeat(2, minmax(48%, 58%));
    grid-gap: 6px;
}

.alternateProduct .alternateBrands {
    display: grid;
    grid-template-columns: repeat(6, minmax(15%, 16%));
    grid-gap: 10px;
}

.alternateBrands .relatedProductItem {
    border: 1px solid var(--site-border);
    border-radius: 4px;
    padding: 5px 5px 32px;
    background: #fff;
    position: relative;
}

.alternateBrands .relatedProductItem:hover {
    background: #fdfdfd;
}
.relatedProductItem a {
    display: block;
    color: inherit;
}
.gridview .relatedProductItem a {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.relatedProductItem .stockStatus {
    color: #2c3135;
    line-height: 0.84rem;
    white-space: nowrap;
    word-spacing: -0.03rem;
    overflow: hidden;
    color: #728294;
    text-transform: uppercase;
}
.relatedProductItem .imgbox {
    display: flex;
    max-width: 80%;
    margin: 0 auto;
    height: 100px;
    align-items: center;
    justify-content: center;
}
.gridview .relatedProductItem .imgbox {
    height: 50px;
    width: 80px;
    margin: 10px auto 0;
}
.relatedProductItem .imgbox img {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 80px;
    object-fit: contain;
}
.gridview .relatedProductItem .imgbox img {
}
.alternateBrands .relatedProductItem:hover img {
    mix-blend-mode: multiply;
}
.relatedProductItem .brand-img {
    display: block;
    text-align: center;
    margin: 0 auto;
}
.relatedProductItem .brand-img img {
    max-width: 80%;
    height: 40px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.relatedProductItem .priceregular {
    display: block;
    text-align: center;
    line-height: 1rem;
}
.gridview .relatedProductItem .priceregular {
    font-size: 0.68rem;
    line-height: 0.88rem;
    font-weight: 500;
    margin: 0 0 5px;
}

.gridview .relatedProductItem .stock.retail {
}
.gridview .relatedProductItem a div {
    width: 100%;
}

#relatedproducts .alternateBrands + .priceBox {
    height: fit-content;
}

/*---*/
.add-to-wishlist,
.remove-from-wishlist {
    float: right;
}

.breadcrumbs + h2 {
    padding-right: 100px;
}

.inline-div {
    overflow: hidden;
    text-overflow: clip;
    width: 100px;
    height: 43px;
    margin: 15px;
    font: bold;
    font-size: 18px;
}

/*Product Grid Layout*/
ul.layout {
    display: inline-flex;
    margin: 0 0 10px;
    list-style: none;
}

ul.layout li {
    margin: 0 10px 0 0;
}

ul.layout li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    padding: 0;
    margin: 0;
    color: #a0a7af;
    background: #efefef;
}

ul.layout li a svg {
    width: 16px;
    height: 16px;
}

ul.layout li a:hover,
ul.layout li a.active {
    background: #363c4b;
    color: #fff;
}

.product-wrapper:hover .inline-div {
    overflow: visible;
    white-space: normal;
    height: auto;
}

.needProduct .products-list.gridview {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    min-width: 100%;
    margin: 0 -1% 0;
}

.needProduct .gridview .product-wrapper .productOptions .priceBox {
    height: auto;
}

.products-list.gridview {
    display: grid;
    grid-template-columns: repeat(4, minmax(23%, 25%));
    grid-gap: 30px 15px;
    margin: 0;
}

.gridview .product-wrapper {
    margin: 0;
    min-width: 100%;
    width: 100%;
}

.gridview .fits-vehicles ul li,
.gridview .productInfoBox,
.gridview .productImageContainer {
    width: 100%;
}
.gridview .productImageContainer {
    height: auto;
}
.gridview .framedImage {
    padding: 40px 10px 30px;
}

.gridview .productImageContainer .diagramBox a {
    right: 10px;
    bottom: 0;
}

.gridview .view-fits-vehicles {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    border-right: none;
    border-top: none;
    height: 40px;
    white-space: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}
.gridview .view-fits-vehicles span {
    display: block;
    width: 100%;
    height: 100%;
}
.kitbox .toggle::before,
.view-fits-vehicles::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #6798b0;
    mask: url('../images/svg/i_cars.svg') center / 26px no-repeat;
    width: 40px;
    height: 40px;
    z-index: 10;
}
.gridview .kitbox .toggle::before {
    inset: initial;
}
.gridview .view-fits-vehicles::before {
    width: 100%;
}
.kitbox .toggle::before {
    mask: url('../images/svg/about-kit.svg') center / 22px no-repeat;
}
.listview .kitbox .toggle,
.listview .view-fits-vehicles {
    gap: 10px;
}

.listview .kitbox .toggle::before,
.listview .view-fits-vehicles::before {
    position: relative;
}

.gridview .product-wrapper .productOptions .priceBox {
    width: 100%;
    justify-content: flex-start;
    min-height: initial;
    height: 140px;
    border-bottom: 1px solid #bad0d2;
    margin: 0 0 6px;
    overflow: auto;
    padding: 0 5px;
}

.relatedProductItem .stock.retail,
.priceBox .options .priceOption .stock.retail {
    position: absolute;
    left: 0;
    bottom: 0;
    border: none;
    border-top: 1px solid #edeff0;
    max-width: 100%;
    width: 100%;
}

.gridview .priceBox .options .priceOption {
    padding: 1px 2px 25px;
}
.gridview .priceBox .options .priceOption .priceGroup {
    margin: 0;
}
.gridview .productOptions .panel.badges-addbasket {
    width: 100%;
    padding: 10px 0;
    justify-content: flex-start;
}

.gridview .product-wrapper .productOptions .panel.badges-addbasket {
    padding: 0 0 10px;
    border: none;
    flex-direction: row;
    gap: 4px;
}

.gridview .productOptions .other-info {
    margin: 0;
}

.gridview .priceBox .options .priceOption:last-child {
    margin-bottom: 0;
}
.gridview .productOptions .stock.retail {
    position: absolute;
    border: 1px solid #edeff0;
    inset: auto 5px 5px;
    margin: 0;
    width: auto;
}
.gridview .productOptions label .stock.retail {
    position: absolute;
}

.gridview .product-secondary-badges .secondarybadge svg {
    width: 35px;
}

.gridview .productOptions .videoFrame {
    margin: 15px -15px 0 -15px;
}
/*---*/
.productOptions .buttonframe {
    margin: 0;
    display: flex;
    justify-content: flex-start;
    width: 78%;
}

.gridview .productOptions .buttonframe {
    width: 75%;
    margin: 0;
}

.productOptions .buttonframe input {
    padding: 8px 15px;
}

.panel.badges-addbasket input.remove-from-wishlist,
.panel.badges-addbasket input.add-to-wishlist {
    display: block;
    width: 40px;
    margin: 0 0 0 5px;
    text-indent: -9000px;
    overflow: hidden;
    background: #a5adb6 url('../images/svg/favorite.svg') center / 25px auto no-repeat;
}

.panel.badges-addbasket input.remove-from-wishlist {
    background: #23a9be url('../images/svg/favorite-remove.svg') center / 25px auto no-repeat;
}

/*Special Offers 4 column*/
.products-list.gridview.offers {
    padding: 0;
}

.products-list.gridview.offers .prod-main-txt {
    display: none;
}

.products-list.gridview.offers .productInfoBox .product-head {
    border: none;
    padding: 15px 15px 0;
    font-size: 16px;
    line-height: 24px;
}

#ProductList .product-wrapper .gridview .product-wrapper:hover {
    box-shadow: none;
}

#ProductList .product-wrapper .gridview .product-wrapper .productDescriptionContainerTop {
    flex-wrap: nowrap;
    align-items: center;
}

#ProductList .product-wrapper .gridview .product-wrapper .productImageContainer {
    width: 40%;
    border-right: 1px solid var(--site-border);
    padding: 10px 10px 0;
}

#ProductList .product-wrapper .gridview .product-wrapper .productDescriptionContainerBottom {
    display: none;
}

#ProductList .product-wrapper .gridview .product-wrapper .productInfoBox .product-head {
    font-size: 14px;
    line-height: 18px;
    text-transform: none;
    padding: 5px 15px;
    margin-bottom: 0;
    height: auto;
}

#ProductList .product-wrapper .gridview .product-wrapper .modal {
    position: absolute;
}

/* Recent Products on Homepage */

#recentProducts .products-list.gridview.offers.super-compact {
    display: grid;
    grid-template-columns: repeat(6, minmax(14%, 16%));
    grid-gap: 12px 6px;
    margin: 50px 0;
}

#recentProducts .products-list.gridview.offers.super-compact .product-wrapper {
}

#recentProducts .products-list.gridview.offers.super-compact .product-wrapper .productInfoBox .code,
#recentProducts .products-list.gridview.offers.super-compact .product-wrapper .framedImage .zoom,
#recentProducts .products-list.gridview.offers.super-compact .product-wrapper .productDescriptionContainerBottom {
    display: none;
}

#recentProducts .products-list.gridview.offers.super-compact .product-wrapper .framedImage {
    padding: 15px 10px;
    height: 160px;
}

#recentProducts .products-list.gridview.offers.super-compact .product-wrapper .productInfoBox .product-head {
    padding: 8px 8px 0;
    font-size: 0.76rem;
    line-height: 0.98rem;
    height: 140px;
    font-weight: 600;
}
#recentProducts .products-list.gridview.offers.super-compact .product-wrapper .productInfoBox .product-head a {
    height: 50px;
    margin-bottom: 10px;
}
#recentProducts .products-list.gridview.offers.super-compact .offertag {
    width: 60px;
    height: 60px;
}
/*------------------- Popular Products list on viewProduct.aspx */
ul.listGoogleBoostInternalLinks {
    list-style: none;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    min-width: 100%;
    margin: 0 -1% 0;
}

ul.listGoogleBoostInternalLinks li {
    padding: 0;
    border: 1px solid var(--site-border);
    background: #efefef;
    margin: 5px 1%;
    width: 23%;
}

ul.listGoogleBoostInternalLinks li a {
    display: block;
    padding: 10px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
}

/*------------------- Refine Model list: refit 04/12/24 */
/*ul.refineList {
  padding: 1px 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  min-width: 100%;
  margin: 0 -1% 0;
}*/
.refineList {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(14%, 16%));
    margin: 40px 0;
    grid-gap: 10px;
    list-style: none;
}

.refineList li {
    border: 1px solid var(--site-border);
    text-align: center;
    border-radius: 4px;
    background: #fff;
    margin: 0;
}

.refineList li:hover {
    background: var(--dd-bkg1);
    background: #f6f9fd;
}
.refineList li.active {
    border-color: var(--d911-teal);
    background: #f6f9fd;
}

.refineList li a {
    width: 100%;
    display: block;
    padding: 20px 10px 10px;
}
.refineList.diagramCategories li a {
    padding: 20px 0 0;
}
.refineList li .bulletLink_1 {
    display: block;
    padding: 10px;
    text-align: center;
    margin: 0;
    font-weight: 500;
    color: var(--site-mid-grey);
    word-break: break-word;
}
.refineList.diagramCategories li h5,
.popularModels .refineList li .h5.bulletLink_1,
.partType .refineList li .h5.bulletLink_1 {
    border-top: 1px solid var(--site-border);
}

.refineList.diagramCategories li h5 {
    padding: 10px;
    margin: 0;
    color: var(--site-mid-grey);
    font-weight: 500;
}
.refineList.diagramCategories li.active h5 {
    color: var(--d911-teal);
}

.refineList li .imgbox {
    display: block;
    max-width: 90%;
    min-width: 100px;
    min-height: 100px;
    margin: 0 auto 10px;
    object-fit: none;
    transition: var(--transition-all);
    mix-blend-mode: multiply;
    padding: 20px 0 10px;
}
.refineList.diagramCategories li .imgbox,
.partType .refineList li .imgbox,
.refineList li:hover .imgbox {
    filter: grayscale(0%) contrast(110%);
}

.popularModels .refineList li .imgbox {
    filter: grayscale(100%) contrast(110%);
}
.refineList.diagramCategories li .imgbox {
    max-width: 100px;
    padding: 0;
}

.brandFilters .refineList li {
    display: flex;
    align-items: center;
}
.brandFilters .refineList .bulletLink_1 img {
    max-width: 130px;
    max-height: 80px;
}


/*------------------- Product Page */
#product .h1 {
}

#product .productFrame {
    display: block;
    margin: 0 0 50px;
}

#product .products-list {
    padding: 0;
    position: relative;
    z-index: 10;
}
#relatedproducts {
    position: relative;
    z-index: 9;
    margin: 40px 0;
    display: block;
}
#relatedproducts .products-list {
}
#product .productInfoBox .prod-main-txt {
    /*height: 295px;*/
}

#product .productInfoBox.allvehicles .prod-main-txt {
    /*height: 255px;*/
}

#product h1 + .product-wrapper:hover {
    box-shadow: none;
}

/* Mandatory and Suggested Products */

.crosssell.diagrams-crosssell .basic-lightbox-content {
    width: 100%;
    max-width: 900px;
}

.crosssell .scroll {
    width: 100%;
    max-width: 900px;
    max-height: 70vh;
    overflow: auto;
}

.crosssell h3 {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.crosssell .products-list {
    padding: 0;
}

.crosssell .products-list.gridview .needProduct .block.mandatory,
.crosssell .products-list.gridview .needProduct .block.suggested {
    width: 100%;
}

.crosssell .needProduct {
    position: relative;
    padding: 0 0 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #f5f5f5;
    border: 1px solid var(--site-border);
}

.crosssell .needProduct .block {
    padding: 1px 15px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.crosssell .needProduct .mandatory > h4 {
    color: #23a9be;
    font-size: 20px;
}

.crosssell .needProduct h4 {
    text-transform: none;
    color: #606770;
    margin-bottom: 10px;
}

#ProductList .crosssell .needProduct .product-wrapper,
.crosssell .needProduct .product-wrapper {
    width: 100%;
    box-shadow: none;
    margin: 5px 0;
    pointer-events: all;
}

.crosssell .needProduct .product-wrapper .productDisplayOuterContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
}

.crosssell .needProduct .product-wrapper .productDescriptionContainerTop {
    flex-wrap: nowrap;
    align-items: center;
    border-right: 1px solid var(--site-border);
    width: calc(100% - 130px);
    height: auto;
}

.crosssell .needProduct .product-wrapper .productDescriptionContainerBottom {
    width: 100%;
}

.crosssell .needProduct .products-list.gridview.offers > div {
    width: 100%;
}

.crosssell .needProduct .product-wrapper .productOptions {
    align-items: center;
    padding: 10px 0 0 30%;
    min-width: 100px;
    justify-content: space-between;
}

.crosssell .needProduct .product-wrapper .productOptions.part-options {
    padding: 10px 0 0 0;
}

.crosssell .needProduct .product-wrapper .productOptions.part-options .panel.badges-addbasket {
    align-self: normal;
    padding-right: 10px;
    flex-direction: row;
}

.crosssell .needProduct .product-wrapper .productOptions label strong {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 15px;
    padding-bottom: 30px;
}

.crosssell .needProduct .product-wrapper .productOptions label {
    width: 100%;
    padding-left: 22px;
    padding-top: 3px;
}

.crosssell .needProduct .product-wrapper .productOptions label span {
    display: inline-flex;
    margin: 0;
}

.crosssell .needProduct .product-wrapper .productOptions .panel.options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(48%, 50%)) !important;
}
.crosssell .needProduct .product-wrapper .productOptions label + div {
    width: auto;
    max-width: fit-content;
    margin: 0 0 10px;
}

.crosssell .needProduct .product-wrapper .productOptions .panel.options > div {
    display: block;
    margin: 0 0 10px;
}

.crosssell .needProduct .product-wrapper .productOptions .priceBox {
    padding: 0 10px;
    min-height: 30px;
}

.crosssell .needProduct .product-wrapper .simple-part-price .priceBox {
    padding: 0;
    width: 100%;
}

.crosssell .needProduct .product-wrapper .simple-part-price .priceregular {
    text-align: left;
}

.crosssell .needProduct .product-wrapper .productOptions.part-options .priceBox {
    width: calc(100% - 250px);
    margin-bottom: 10px;
}

.crosssell .needProduct .product-wrapper .productOptions.part-options .priceBox div {
    gap: 10px;
    width: 100%;
}

.crosssell .needProduct .product-wrapper .productOptions.part-options .priceBox .part-status {
    display: flex;
    align-items: center;
}

.crosssell .priceBox .part-status img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.crosssell .needProduct .product-wrapper .productOptions.no-part .panel.badges-addbasket {
    justify-content: flex-start;
    width: 100%;
    padding: 5px 10px;
}

.crosssell .needProduct .product-wrapper .productImageContainer {
    width: 35%;
    padding: 5px 8%;
    height: auto;
}

.crosssell .needProduct .product-wrapper .framedImage {
    padding: 0;
}

.crosssell .needProduct .product-wrapper .productInfoBox {
    width: 65%;
    padding: 10px;
    min-height: 120px;
    border-left: 1px solid var(--site-border);
    position: relative;
}

.crosssell .needProduct .product-wrapper .productInfoBox .code {
    position: relative;
    padding: 0;
}

.crosssell .needProduct .product-wrapper .productInfoBox .brand-img {
    position: absolute;
    top: 0;
    margin: auto;
    left: 100%;
    display: block;
    width: 130px;
    bottom: 0;
    align-content: center;
    text-align: center;
}

.crosssell .needProduct .product-wrapper .productInfoBox .brand-img img {
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 110px;
}

.crosssell .needProduct .product-wrapper .productOptions > div {
    justify-content: flex-end;
    padding: 5px 15px;
    border: none;
    width: 250px;
    flex-direction: row;
}

.crosssell .needProduct .product-wrapper .productOptions .panel.badges-addbasket .addbasket > div:first-of-type {
    max-width: 100%;
}

.crosssell .needProduct .product-wrapper .productInfoBox .product-head {
    display: block;
    height: auto;
}

.crosssell .needProduct .product-wrapper .button,
.crosssell .needProduct .product-wrapper input.button,
.crosssell .needProduct .product-wrapper input[type='submit'].button {
    font-size: 12px;
    padding: 8px 14px;
}

.crosssell .needProduct .product-wrapper .pricefrom,
.crosssell .needProduct .product-wrapper .pricewas,
.crosssell .needProduct .product-wrapper .priceregular {
    line-height: 25px;
    width: 100%;
}

.crosssell .gridview .productOptions .panel.badges-addbasket .msg,
.crosssell .gridview .productOptions .panel.badges-addbasket .msg span {
    padding: 0 0 5px 0;
    text-align: right;
}

.surcharge {
    width: 100%;
}

/*New crosssell header - 08//24 dd_km */
.crosssell .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0 0 10px;
    gap: 20px;
}
.header-box h3 {
    display: block;
    margin-bottom: 0;
}
.header-box .basket-footer-badges {
    display: flex;
    gap: 10px;
}
.header-box .basket-footer-badges .basket-footer-badge {
    display: block;
    width: 80px;
    margin: 0;
    text-align: center;
    font-size: 0.68rem;
    line-height: 0.88rem;
    font-weight: 600;
}
.crosssell .header-box .basket-footer-badges .basket-footer-badge img {
    display: block;
    margin: 0;
}

/* Related Products */
#relatedproducts .products-list.gridview {
    display: grid;
    grid-template-columns: repeat(4, minmax(24%, 25%));
    grid-gap: 10px;
    min-width: 100%;
    margin: 0;
}

#relatedproducts .product-wrapper.related {
    width: 100%;
}
#relatedproducts .alternateProduct,
#relatedproducts .productOptions .priceBox .h5,
#relatedproducts .productOptions .priceBoxFrame .h5,
#relatedproducts .gridview .product-wrapper.related .product-extras-frame,
#product #relatedproducts .product-wrapper.related .stock.retail,
#product #relatedproducts .product-wrapper.related .priceBoxFrame .h5,
#product #relatedproducts .product-wrapper.related .panel.options,
#product #relatedproducts .product-wrapper.related .panel.badges-addbasket,
#product #relatedproducts .product-wrapper.related .product-secondary-badges,
#product #relatedproducts .product-wrapper.related .prod-main-txt,
#product #relatedproducts .product-wrapper.related .kitbox,
#product #relatedproducts .product-wrapper.related .fitsbox,
product #relatedproducts .product-wrapper.related .productInfoBox .prod-main-txt {
    display: none;
}
#product #relatedproducts .product-wrapper.related .priceregular.grid-8-price-from {
    display: block;
}
#product #relatedproducts .product-wrapper.related .productOptions .priceBox {
    border: none;
    height: auto;
    min-height: 50px;
}
#relatedproducts .productDescriptionContainerBottom {
    border-top: 1px solid var(--site-border);
}
.panel.badges-addbasket .msg {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: center;
    padding: 0;
    margin: 5px 0 0;
}
.gridview .productOptions .panel.badges-addbasket .msg {
    padding: 0;
    margin: 5px 0 0;
}
.productOptions .panel.badges-addbasket .msg span {
    display: flex;
    width: 70px;
    text-align: left;
    font-size: 0.54rem;
    line-height: 0.54rem;
    font-weight: 600;
    align-items: center;
    text-transform: uppercase;
    gap: 4px;
    padding: 0;
}
.panel.badges-addbasket .msg svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.button.proceed-to-checkout {
    text-align: center;
    color: #fff;
    white-space: nowrap;
}

.gridview .productOptions .panel.badges-addbasket .product-secondary-badges {
    width: 100%;
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 3px;
}
.gridview .productOptions .panel.badges-addbasket .product-secondary-badges .secondarybadge {
    margin: 0;
}

.gridview .productOptions .panel.badges-addbasket .addbasket {
    width: 100%;
    justify-content: flex-start;
}

/*New Mods:02/10/24 - dd_km */
.gridview .productInfoBox .prod-main-txt {
    border-left: none;
    padding: 0;
    position: relative;
    height: 37px;
    background: #fdfdfd;
    overflow: unset;
}
.productDescriptionContainerTop:has(.kitbox) .productInfoBox .prod-main-txt {
    height: 187px;
}
.gridview .productDescriptionContainerTop:has(.kitbox) .productInfoBox .prod-main-txt {
    height: 40px;
    overflow: initial;
}
.gridview .productInfoBox .prod-main-txt .txtbox {
    display: none;
    padding: 15px;
    font-size: 0.84rem;
    line-height: 1rem;
    color: #667586;
    position: absolute;
    inset: auto 0 37px;
    background: var(--dd-bkg1);
    height: 430px;
    overflow: auto;
}
.gridview .productInfoBox .prod-main-txt.active .txtbox {
    display: block;
}

.gridview .productOptions .panel.options {
    display: block;
    margin-bottom: 10px;
}
.gridview .productOptions .panel.options.dropdowns {
    display: flex;
    margin-bottom: 10px;
    padding: 5px 0 0;
}
.gridview .priceBox .options .priceOption {
    width: 100%;
    min-height: 70px;
}
.gridview .priceBox .options .nonvariant-group {
    width: 100%;
}
.gridview .productOptions .panel.badges-addbasket .addbasket {
    padding: 0;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 10px 0;
}

.gridview .product-wrapper .productOptions .panel.badges-addbasket .addbasket > .qty input {
    margin: 0 0 0 5px;
}

.gridview .productInfoBox .product-head {
    border-left: none;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 10px 40px;
    border-bottom: 0;
    display: block;
    width: 100%;
    border-top: 1px solid var(--site-border);
    font-size: 0.916rem;
    line-height: 1.2rem;
    font-weight: 500;
    height: 150px;
    min-height: initial;
    /* border-bottom: 3px solid #c5e8ee; */
}

.gridview .productOptions label .stock.retail {
    border: none;
    border-top: 1px solid var(--site-border);
    position: absolute;
    inset: auto auto 0 0;
}

.gridview .productOptions:has(.stockStatus) .stockStatus {
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    max-width: 99%;
    width: 99%;
    text-overflow: ellipsis;
}

/*---*/
.product-trade-links{
    display:block;
    margin:15px 0 0;
}
.gridview .product-trade-links{
    margin-top:5px;
}
.button.tradelink {
    min-width: 180px;
    padding: 5px 26px 8px 12px;
    background: var(--dd-bkg2);
    color: #8297ae;
    position: relative;
}

    .button.tradelink:hover {
        background: #8297ae;
        color:#fff;
    }
    .button.tradelink svg {
        position: absolute;
        inset: 5px 8px auto auto;
        width: 12px;
        height: 12px;
    }
    .button.tradelink .smallcaps {
        font-size: 0.58rem;
        font-weight: 600;
        display:block;
        margin:0 0 2px;
    }
    .button.tradelink .h6 {
        margin: 0;
        text-transform: uppercase;
        font-size: 0.86rem;
        line-height: 0.86rem;
        font-weight: 500;
    }

.gridview .button.tradelink{
    width:100%;
}
/*---*/
#recentProducts .gridview .productOptions .panel.badges-addbasket .msg svg {
    display: inline-block;
    margin: 0 10px 2px 0;
}

#recentProducts .panel.badges-addbasket .msg {
    padding: 0 5px;
}

/*------------------- Contact */
.contact #mainContent {
    flex-direction: row;
}

#contactFrame {
    display: block;
    padding: 20px;
    width: 100%;
}

#contactFrame h2.title {
    margin-top: 50px;
}

.contactbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 30px 0;
}

.contactbox > div {
    display: block;
    width: 48%;
}

.contactbox .img img {
    width: 100%;
}

/*------------------- Login */

#login #mainContent {
    display: block;
    border-left: none;
    min-height: 71.5vh;
    padding: 0 20px 50px;
    margin: 0 auto;
}

#login .loginPage {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px 0 0;
    width: 100%;
}

#login .loginPage h1 {
    width: 100%;
}

#login .registerBox,
#login .loginBox {
    width: 49%;
    padding: 20px;
}

#login .yourDetails,
#login #pnlExistingCustomer form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#login .loginBox .reset,
#login .loginBox label {
    width: 40%;
    margin: 0;
}

#login .loginBox .logbox,
#login .loginBox input {
    width: 60%;
}

#login .loginBox .button {
    width: 100%;
}

#login .loginBox .logbox {
    margin-bottom: 0;
}

#login .loginBox .logbox ~ .logbox {
    margin-top: 0;
    text-align: center;
}

/*------------------- My Order Status */
#orderStatus {
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    width: 90%;
    margin: 30px auto;
    max-width: 700px;
    border: 1px solid var(--site-border);
    background: #fff;
    border-radius: 4px;
}

#orderStatus .brand {
    display: block;
    background: url('/images/svg/D911-logo-mixed.svg') center 4vh / 50% auto no-repeat;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 20vh 50px 0;
    text-align: center;
}

#orderStatus .pageDisplay {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 50px;
}

#orderStatus .pageDisplay > div {
    display: block;
    max-width: 600px;
}

#orderStatus .pageDisplay h4,
#orderStatus .pageDisplay h3 {
    text-transform: none;
    margin: 0 0 30px;
}

#orderStatus .pageDisplay p.submit {
    text-align: right;
}

#orderStatus .pageDisplay button[type='submit'],
#orderStatus .pageDisplay button[type='button'],
#orderStatus .pageDisplay input[type='text'] {
    width: 100%;
}

#orderStatus .pageDisplay button[type='submit'],
#orderStatus .pageDisplay button[type='button'] {
    background: #eb6a2e;
    color: #fff;
    border: none;
    display: inline-block;
    max-width: 250px;
}

#orderStatus .pageDisplay label {
    display: flex;
    align-items: center;
    margin: 20px 0 5px;
}

#orderStatus .pageDisplay label > span:first-of-type {
    width: 40%;
    padding: 0 20px 0 0;
}

#orderStatus .pageDisplay label > span:last-of-type {
    width: 100%;
}

#orderStatus .pageDisplay .order-details .headings {
    font-weight: bold;
}

#orderStatus .pageDisplay .order-details div {
    padding: 5px 5px 5px 0;
    word-wrap: break-word;
}

/*------------------- Diagrams  */
#diagram #container {
    overflow: initial;
}

#diagram #mainContent {
    display: block;
    padding: 50px 0 50px 20px;
}

#diagram .diagramSearch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#diagram .diagramSearch h4 {
    padding-right: 20px;
    width: 40%;
    margin: 0;
}

#diagram .diagramSearch input {
    max-width: 30%;
}

#diagram .categoriesSmall .refineList {
    grid-template-columns: repeat(10, minmax(8%, 10%));
}

#diagram .categoriesSmall .refineList li {
}

#diagram .categoriesSmall .refineList li a {
    padding: 10px 0 0;
}
.refineList.diagramCategories li .imgbox,
#diagram .categoriesSmall .refineList li .imgbox {
    max-width: 70%;
    padding: 0;
    min-width: initial;
    min-height: 68px;
    margin: 0 auto;
}
#diagramLists {
    display: block;
    padding: 50px 0;
}
.refineList.diagramCategories li h5,
#diagram .categoriesSmall .refineList li h5 {
    font-size: 0.644rem;
    line-height: 0.744rem;
    margin: 5px 0 0;
    padding: 10px 5px;
}
#diagramCategoriesLists #categoryTitle {
    display: none;
}

.diagramList {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(14%, 16%));
    grid-gap: 20px 10px;
    min-width: 100%;
    margin: 20px 0 40px;
}
#diagram .diagramList {
    grid-template-columns: repeat(6, minmax(14%, 16%));
    grid-gap: 20px 10px;
}
.diagramList li {
    margin: 0;
    width: 100%;
    background: #fff;
    border: 1px solid var(--site-border);
    position: relative;
    padding: 0 0 30px;
    border-radius: 4px;
}

.diagramList li a {
    display: block;
    text-align: center;
    padding: 20px 0 1px;
}

.diagramList li a img {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: 140px;
    object-fit: contain;
}

.diagramList li a span {
    display: inline-block;
    padding: 4px 10px;
    background-color: #08a972;
    color: #fff;
    font-weight: 500;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100px;
}

.diagramList li .diagram-title {
    padding: 15px 10px 10px;
    display: block;
    border-top: 1px solid var(--site-border);
    margin: 10px 0 0;
    text-transform: uppercase;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--site-grey);
    line-height: 0.96rem;
}

.diagramList li p.diagram-title {
    text-transform: uppercase;
    font-size: 12px;
    line-height: 16px;
}

.diagramList li .imgHolder {
    padding: 10px;
}

#diagramsTitle {
    border-bottom: 1px solid var(--site-border);
    padding-bottom: 10px;
    margin: 50px 0 0;
}

#diagramWrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

#diagramWrapper > .imgDiagMapHolder {
    width: 549px;
    display: block;
    position: sticky;
    top: 120px;
    padding: 0;
    height: auto;
    margin: 0;
}

#diagramWrapper > #partsList {
    width: calc(100% - 554px);
    display: block;
    margin: 40px 0 0 0;
}

#diagramWrapper > .otherDiagrams {
    width: 100%;
    padding: 50px 0;
}

.imgDiagMapHolder .imgHolder {
    border: 1px solid var(--site-border);
    position: sticky;
    z-index: 1;
    border-radius: 4px;
    padding: 40px 0 20px;
    background: #fff;
    height: auto;
    width: 100%;
    top: 160px;
}

.imgDiagMapHolder .imgHolder > div {
    max-width: 100%;
}

.imgDiagMapHolder p {
    display: inline-flex;
    width: 100%;
    padding: 9px 0;
    margin: 0;
    /*text-align: center;*/
}

.imgDiagMapHolder span {
    display: inline-block;
    padding: 4px 10px;
    background-color: #08a972;
    color: #fff;
    font-weight: 500;
    position: absolute;
    top: 10px;
    left: 0;
    margin: 0 auto;
    width: 100px;
    text-align: center;
    height: 25px;
}

#diagramWrapper #diagramImage {
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

.parts-table-header th {
    padding: 8px;
    border-bottom: 1px solid var(--site-border);
    background-color: #f3f3f3;
}

.parts-table-row td {
    padding: 8px;
    border-bottom: 1px solid var(--site-border);
}

#parts-table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#parts-table tbody {
    display: block;
    height: 692px;
    overflow-y: auto;
    width: 100%;
    position: relative;
}

#parts-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.parts-table-header {
    background: rgba(214, 209, 209, 0.25);
    line-height: 25px;
    color: #1634a6;
    position: sticky;
    top: 0;
}

#parts-table th {
    border-right: 1px solid #fff;
    color: #363c4b;
    text-transform: uppercase;
    text-align: left;
}
#parts-table tr {
}
#parts-table tr:nth-of-type(odd) {
    background: var(--dd-bkg1);
}

#parts-table th,
#parts-table td {
    padding: 4px;
    font-size: 12px;
}

#parts-table td p {
    font-size: 12px;
    line-height: 15px;
}

#parts-table tr th:nth-of-type(1),
#parts-table tr td:nth-of-type(6),
#parts-table tr td:nth-of-type(1) {
    text-align: center;
}

#parts-table .parts-table-row {
    cursor: pointer;
}

#parts-table .parts-table-row.nla {
    color: #a0a7af;
}

#parts-table .parts-table-row .button {
    width: 150px;
}

#parts-table td p {
    margin: 0;
}

#parts-table td input[type='number'] {
    background-color: #fff;
    height: 30px;
    margin: 5px 0;
    width: 30px;
    font-size: 12px;
}

#parts-table td .btnAddToBasket,
#parts-table td img {
    border: none;
    display: block;
    margin: 0 auto;
    padding: 0;
}

#parts-table td .btnAddToBasket {
    background: url('../images/svg/i_basket.svg') no-repeat center / 20px auto;
    width: 25px;
    height: 25px;
}

#parts-table td .moreProduct {
    background: url('../images/svg/i_info.svg') no-repeat center / 20px auto;
    border: none;
    width: 20px;
    height: 20px;
    display: block;
    margin: 0 auto;
}

#parts-table .parts-table-row {
    background-color: transparent;
}

#parts-table td .diagram-part-button-wrapper {
    position: relative;
}

#parts-table td .diagram-part-button-wrapper .basket-added-icon {
    width: 15px;
    height: 15px;
    position: absolute;
    right: 12px;
    top: -12px;
    color: #fff;
}

/*------------------- Fast part Finder - SEO page */
#partFinder #searchContainer {
    margin: 0 0 50px;
    padding: 0;
    border-bottom: 1px solid var(--site-border);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#searchContainer .txtblock {
    display: block;
    width: 48%;
}

#searchContainer strong {
    color: #23a9be;
}

#partFinder #pnlMainContent {
    width: 100%;
}

#partFinder .searchblock {
    display: flex;
    flex-wrap: wrap;
}

#partFinder .searchblock input {
    max-width: 60%;
    margin-right: 5px;
}

#partFinder .searchblock span {
    width: 100%;
    color: #9f021b;
}

#resultsContainer table {
    width: 100%;
}

#resultsContainer table tr:nth-child(odd) {
    background: #efefef;
}

#resultsContainer table tr th {
    padding: 6px 6px;
    width: 20%;
    text-align: left;
}

#resultsContainer table tr td {
    padding: 4px 6px;
    width: 20%;
    text-align: left;
}

#resultsContainer table tr td input {
    margin: 0;
}

#resultsContainer table tr td .button:hover {
    background: #50545f;
}

ul.paged {
    display: block;
    padding: 10px 0;
    margin: 0;
}

ul.paged.bottom {
    margin-bottom: 30px;
}

ul.paged li {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    text-transform: uppercase;
    margin: 0 5px 0 0;
}

ul.paged li.title {
    padding: 5px 10px 0 0;
}

ul.paged li a {
    padding: 8px 10px;
    background: #efefef;
    text-align: center;
    color: currentColor;
}

ul.paged li a[page-index] {
    display: block;
}

ul.paged li:hover a,
ul.paged li.active a {
    background: #23a9be;
    color: #fff;
}

ul.paged span {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}

/*------------------- Modals */
.modal {
    display: block;
    width: 100%;
    max-width: 800px;
    padding: 20px;
    background: #efefef;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    top: 20vh;
    left: 20px;
    right: 20px;
    margin: auto;
    z-index: 5000;
    box-shadow: 0px 0px 12px #b1b1b1;
    border: 1px solid #fff;
}

.modal.hide {
    display: none;
}

.modal .close {
    position: absolute;
    top: 5px;
    right: 5px;
    display: block;
    width: 40px;
    height: 40px;
    background: url('../images/svg/i_close.svg') no-repeat center / 20px auto;
}

.modal .links a {
    display: inline-block;
    margin: 0 5px 5px;
    color: #23a9be;
    padding: 8px 15px;
    background: #fff;
    text-align: center;
    min-width: 170px;
}

.modal .links a:hover {
    background: #606770;
    color: #fff;
}

.product-wrapper .modal {
    max-width: initial;
    background: #a0a7af;
    position: relative;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    display: block;
    justify-content: center;
    box-shadow: none;
    border: none;
    z-index: 1;
    border-radius: 0;
    color: #fff;
    margin: 15px 0 0;
    padding: 10px;
}

.product-wrapper .modal .note svg {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 650%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    z-index: 9999;
}

/*------------------- My Basket */
#basket #mainContent {
    border-left: none;
    border-right: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
}

#basket #pageContent #side {
    width: 20%;
    padding: 0;
}

#side .headedPanel {
    border-bottom: 1px solid var(--site-border);
    border-right: 1px solid var(--site-border);
    margin: 0;
    padding: 20px;
    text-align: center;
    background: #fff;
}

#side .helpbox {
    border-top: 1px solid var(--site-border);
    margin: 30px 0;
}

.info {
    background: #efefef;
    border: 1px solid var(--site-border);
    padding: 15px;
    text-align: center;
    margin: 5px 0;
    display: block;
    border-radius: 6px 0;
}

.alert,
.alert {
    background: #363c4b;
    color: #fff;
    padding: 8px 15px;
    text-align: center;
    margin: 10px 0;
    display: block;
    border-radius: 6px 0;
}

.error.alert,
.error.alert {
    background: #bd0216;
    color: white !important;
}

#basket #basketContainer {
    padding: 0;
    display: block;
    margin: 0;
}

ul#basketItems {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
}

#basketItems li {
    display: block;
    padding: 15px;
    margin: 10px 0;
}

#basketItems li:hover {
    background: rgba(0, 0, 0, 0.02);
}

#basketItems li.header:hover,
#basketItems li.header {
    background: transparent;
    display: flex;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 0;
    border-bottom: 1px solid #363c4b;
    margin-bottom: 20px;
}

#basketItems li.basket-product {
    border: 1px solid var(--site-border);
    position: relative;
    padding: 0;
    display: flex;
    background: #fff;
}

#basketItems li.basket-product:hover {
    border-color: #23a9be;
}

#basketItems li.basket-product > .product,
#basketItems li.header > .b-item {
    width: 70%;
}

#basketItems li.basket-product > .quantity,
#basketItems li.header > .b-qty {
    width: 15%;
    text-align: center;
}

#basketItems li.basket-product > .figure,
#basketItems li.header > .b-price {
    width: 15%;
    text-align: right;
}

.basket-product .product {
    display: flex;
}

.product .product-image {
    width: 30%;
    max-width: 140px;
    border-right: 1px solid var(--site-border);
    padding: 10px;
    background: #fff;
}

.product .product-image img {
    display: block;
    margin: 0 auto;
}

.product .product-info {
    width: 70%;
    padding: 10px 20px;
}

.product .product-info a {
    display: block;
    padding-bottom: 5px;
}

.basket-product .quantity {
    padding: 10px 0;
}

.product .product-info .code {
    display: block;
    padding: 5px 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: #23a9be;
}

.product .product-info .section-item {
    text-transform: uppercase;
    padding-bottom: 5px;
}

.product .product-info .offer {
    padding: 2px 0;
    color: #23a9be;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}

input[type='text'],
input[type='email'] {
    min-width: initial;
    width: 100%;
}

.basket-product .quantity > div {
    display: block;
}

.basket-product .quantity .read-only-quantity {
    padding-top: 5px;
}

.basket-product .quantity span {
    display: none;
}

.basket-product .quantity a {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    width: 48%;
}

.basket-product .quantity input {
    width: 50px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.basket-product .quantity .update-quantity-link {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.basket-product .quantity .remove-basket-item,
.basket .product_price .remove-basket-item {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    background: #fff;
    display: inline-block;
    padding: 8px 20px;
    border-top: 1px solid var(--site-border);
    border-left: 1px solid var(--site-border);
    color: #a4a4a4;
}

.basket .product_price .remove-basket-item {
    position: relative;
    border: none;
    padding: 12px;
}

.basket-product .quantity .remove-basket-item svg {
    height: 20px;
    width: 20px;
}

.basket .product_price .remove-basket-item svg {
    height: 15px;
    width: 15px;
    color: #a4a4a4;
}

.basket-product .quantity .remove-basket-item:hover {
    color: #fff;
    background: #363c4b;
    border: none;
}

.basket .product_price .remove-basket-item:hover {
    color: inherit;
    background: none;
    border: none;
}

.basket-product .figure {
    color: #08a972;
    font-size: 16px;
    padding: 15px 15px 40px 0;
}

#basketItems li.offerBox {
    background: transparent;
    padding: 0;
    margin: 0;
}

#basketItems ul.offers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/*Offer Available - before totals*/

.basket .basket_offer,
#basketItems li.offer {
    border: 1px solid #7d8798;
    background: #fff;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    margin: 0 0 10px;
}

.basket .basket_offer span,
#basketItems li.offer span {
    padding: 10px;
}

.basket .basket_offer .label,
#basketItems li.offer .label {
    border-right: 1px solid #7d8798;
    color: #23a9be;
    width: 25%;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.basket .basket_offer .txt,
#basketItems li.offer .txt {
    width: 55%;
    text-align: left;
    padding: 5px 15px;
    display: flex;
    align-items: center;
}

.basket .basket_offer .figure,
#basketItems li.offer .figure {
    display: block;
    text-align: right;
    font-size: 16px;
    width: 20%;
    color: #eb6a2e;
    align-self: center;
}

/*Offer Possible - after totals*/
#basketItems li.offer.possible {
    border-color: #363c4b;
}

#basketItems li.offer.possible .label {
    color: #23a9be;
}

.offersFrame {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.basket .offersFrame {
    justify-content: space-between;
}

.offersFrame .offersAd {
    width: 50%;
}

.basket .offersFrame .offersAd {
    width: 100%;
}

.basket .offersFrame .discount-code {
    width: 100%;
    margin-top: 20px;
    justify-content: right;
    display: flex;
    flex-wrap: wrap;
}

.basket .offersFrame .discount-code > * {
    width: 100%;
    text-align: right;
}

.basket .offersFrame .discount-code .error.alert {
    text-align: center;
}

.basket .offersFrame .discount-code input[type='text'] {
    width: 180px;
    margin-right: 10px;
}

.offersFrame .offersAd img {
    display: block;
}

#basketItems li.offerBox .discount-code {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    width: 50%;
    padding-left: 10px;
}

#basketItems li.offerBox .discount-code input,
#basketItems li.offerBox .discount-code button {
    margin: 0;
}

#basketItems li.offerBox .discount-code h6 {
    padding-right: 10px;
    margin: 0;
}

#basketItems li.offerBox .discount-code > div {
    display: flex;
    align-items: center;
}

#basketItems li.offerBox .discount-code > div button {
    margin-left: 5px;
}

#basketItems li.offerBox .discount-code + div {
    width: 100%;
}

.discount-code-applied {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    width: 50%;
    padding: 0;
}

.basket .discount-code-applied {
    width: 100%;
    margin-top: 10px;
}

.discount-code-applied h6 {
    padding-right: 20px;
    margin: 0;
}

.discount-code-applied h6 .applied-offer-code {
    text-transform: uppercase;
    font-weight: bold;
    color: #eb6a2e;
}

#ctl02_ctl00_OfferCodeErrorRow {
    width: 100%;
}

#ctl02_ctl00_OfferCodeListRow {
    width: 100%;
    display: flex;
    border: 1px solid #7d8798;
    margin: 15px 0;
    line-height: 24px;
}

#ctl02_ctl00_OfferCodeListRow p {
    width: 65%;
    border-right: 1px solid #7d8798;
    padding: 10px 15px;
    margin: 0;
}

#ctl02_ctl00_OfferCodeListRow a {
    width: 35%;
    padding: 10px 15px;
    text-align: center;
    margin: 0;
    font-weight: 500;
    color: #08a972;
    background: #fff url('/images/svg/i_close.svg') 98% 5px / 15px auto no-repeat;
    display: block;
    margin: 0;
}

#basketItems li.basket-totals {
    background: none;
    border-top: 1px solid #7d8798;
    margin-top: 30px;
    display: flex;
    padding: 20px 0 0;
    justify-content: space-between;
}

.basket-totals #ctl01_saveBasket {
    margin-top: 20px;
}

#basketItems li.basket-totals .block1 {
    width: 30%;
    padding: 0 30px 0 0;
}

#basketItems li.basket-totals .block1 .info {
    display: block;
}

#basketItems li.basket-totals .block2 {
    width: 70%;
    padding: 0;
}

#btnUploadPartsCancel, #btnUploadPartsContinue, #btnUploadPartsCancelmapping {
    display: unset !important;
    width: fit-content !important;
}

#basketItems li.basket-totals .block1 .button {
    display: block;
    width: 100%;
    min-width: 210px;
    text-align: center;
}

#basketItems li.basket-totals .block2 dl {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.basket-totals .block2 dl dt {
    width: 50%;
    margin: 5px 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--site-border);
}

.basket-totals .block2 dl dd {
    width: 50%;
    margin: 5px 0;
    text-align: right;
    font-size: 16px;
    color: #08a972;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--site-border);
}

.basket-totals .block2 dl dd select {
    width: 100%;
    font-size: 14px;
    color: #363c4b;
    background-color: transparent;
}

.basket-totals .block2 dl dd select:focus {
    background-color: #fff;
}

.basket-totals .block2 dl dd.total,
.basket-totals .block2 dl dt.total {
    font-size: 22px;
    font-weight: 500;
    border-bottom: 2px solid #7d8798;
}

#pageContent:has(#basicpagerepeater) #navBar {
    display: none;
}

#basket #pageContent #navBar {
    display: block;
    width: 100%;
    padding: 0;
}

#basket #bodyMain {
    display: block;
    width: 100%;
    padding: 30px 30px 30px 0;
}

#checkout .alertBox,
#basket .alertBox {
    padding: 0;
    margin: 10px 0 0 0;
}

#basket .discount-code .button.line,
#checkout .discount-code .button.line {
    border-color: #a5adb6;
}

#checkout .discount-code input[type='text'],
#basket .discount-code input[type='text'] {
    max-width: 185px;
    border-color: #a5adb6;
    background: transparent;
}

#checkout #OfferCodeListRow,
#basket #OfferCodeListRow {
    padding: 0;
    margin: 0 0 20px;
    list-style: none;
}

#checkout .discount-code h4,
#basket .discount-code h4 {
    margin: 0 0 5px;
}

#checkout .discount-code p,
#basket .discount-code p {
    display: inline-block;
    margin: 0 5px 0 0;
}

#checkout .discount-code a.offercode,
#basket .discount-code a.offercode {
    color: #08a972;
    display: inline-block;
    padding: 5px 20px 5px 30px;
    background: url('../images/svg/i_close.svg') no-repeat 5px center / 15px auto;
    letter-spacing: 1px;
    border: 1px solid var(--site-border);
    border-radius: 4px;
    margin: 5px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

#checkout .discount-code a.offercode:hover,
#basket .discount-code a.offercode:hover {
    background-color: #efefef;
}

#basket #lowerContent {
    display: block;
    margin: 30px auto 80px;
    width: 100%;
}

#lowerContent .basket-offers {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    min-width: 100%;
    margin: 0 -1% 0;
}

#lowerContent .basket-offers .product-wrapper {
    margin: 20px 1% 20px;
    display: flex;
    flex-flow: column;
    width: 23%;
    max-width: 23%;
}

#lowerContent .basket-offers .panel.badges-addbasket {
    padding: 10px 0;
}

#checkout .info {
    display: flex;
    justify-content: space-between;
    text-align: left;
    margin: 0;
    padding: 20px;
}

#checkout .info.flash {
    background: #eb6a2e;
    color: #fff;
    border-radius: 6px 0;
    font-size: 16px;
    line-height: 22px;
}

.info.alert,
.info.alert {
    padding: 0 10px;
    text-align: center;
}

.info.alert span,
.info.alert span {
    margin: 0;
    text-transform: uppercase;
    font-weight: 500;
    padding: 10px 20px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    border-radius: 6px 0;
    width: 180px;
    text-align: center;
    height: 100%;
}

#basket .loginFrame {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#basket .loginFrame > div {
    padding: 20px;
    margin: 0 0 10px;
}

#basket .loginFrame .loginBox {
    width: 55%;
}

#basket .loginFrame .registerBox {
    width: 44%;
}

#basket .loginFrame > div h3 {
    text-transform: none;
    margin: 0 0 5px;
}

#basket .loginFrame > div h3 span {
    color: #23a9be;
}

#basket .loginFrame .box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* align-items: center; */
}

#basket .loginFrame .loginBox .box label {
    width: 49.6%;
}

#basket .loginFrame .loginBox .box label input:not(.button) {
    width: 100%;
}

#basket .loginFrame .loginBox .button {
    margin-top: 10px;
}

#basket .loginFrame .loginBox .borderline {
    align-self: self-end;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    padding: 5px 0;
}

#basket .loginFrame input,
#basket .loginFrame .button {
    margin: 5px 0 0;
}

#basket .loginFrame .loginBox label + .button {
    white-space: break-spaces;
    max-width: 60%;
    display: inline-block;
    vertical-align: middle;
}

#basket .loginFrame p {
    margin: 0;
}

#basket .loginFrame .registerBox .box div {
    width: 80%;
}

#basket .loginFrame .green-placeorder {
    padding: 15px 20px 15px 50px;
    font-size: 13px;
    font-weight: 600;
    background-size: 30px auto;
}

/*------------------- Checkout */
#checkout #container {
    overflow: initial;
}

#checkout #masthead #topFrame {
    top: auto;
    position: relative;
}

#checkout #masthead .checkoutBox {
    display: block;
    letter-spacing: 2px;
    color: #363c4b;
    line-height: 50px;
    margin: 0 30px 0 0;
    height: 50px;
    text-align: right;
}

.checkoutBox .icon {
    width: 40px;
    height: 40px;
}

#checkout #masthead .checkoutBox h4 {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

#checkout #mainContent {
    display: block;
    border-left: none;
    min-height: 71.5vh;
    padding: 0 20px 50px;
    margin: 0 auto;
}

#checkout #side {
    width: 25%;
    padding: 20px 0;
    border-bottom: 1px solid var(--site-border);
}

#checkout #side .sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 95px;
    max-height: calc(100vh - 90px);
    overflow: auto;
    min-height: 300px;
}

#checkout #side .prod-main-txt {
    border: 1px solid var(--site-border);
    padding: 20px;
    background: #fff;
}

#checkout #side p {
    font-size: 12px;
    line-height: 17px;
}

#checkout #side #side-notes,
#checkout #side #dataUsagePolicy {
    margin: 15px 0;
    border-top: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
    padding: 1px 0;
}

#dataUsagePolicy h5 {
    color: #08a972;
}

#checkout ol#progress {
    display: flex;
    padding: 20px 0 10px;
    width: 100%;
    margin: 0 0 30px;
    list-style: none;
    position: sticky;
    position: -webkit-sticky;
    top: 70px;
    max-height: calc(100vh - 90px);
    overflow: auto;
    background: #fff;
    border-bottom: 1px solid #606770;
    z-index: 10;
}

#login ol.progress {
    display: block;
    padding: 20px 0 10px;
    width: 100%;
    margin: 0;
    list-style: none;
    border-top: 1px solid var(--site-border);
}

#login ol.progress li,
#checkout #progress li {
    padding: 0;
    margin: 0 10px 0 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

#login ol.progress li {
    width: 100%;
    display: block;
    margin: 0 0 5px;
}

#login ol.progress li .step,
#checkout #progress li .step {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #efefef;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 400;
}

#checkout #progress li .step + span {
    display: none;
    padding: 0 20px;
    letter-spacing: 1px;
}

#login ol.progress li .step + span {
    padding: 0 20px;
    letter-spacing: 1px;
}

#checkout #progress li.selected {
    border-right: 1px solid #23a9be;
}

#checkout #progress li.selected .step {
    background: #23a9be;
    color: #fff;
}

#checkout #progress li.done .step {
    background: #7d8798;
    color: #fff;
}

#checkout #progress li.selected .step + span {
    display: inline-block;
    color: #23a9be;
}

#checkout ol.progress li .step + span {
    display: inline-block;
    color: #363c4b;
}

#footer.basic,
#checkout #footer {
    padding: 50px 0 20px;
}

#footer.basic .innerframe > *,
#checkout #footer .innerframe > * {
    width: 100%;
    text-align: center;
}

#footer.basic ul,
#checkout #footer ul {
    list-style: none;
    margin: 0 0 20px;
}

#footer.basic ul li,
#checkout #footer ul li {
    display: inline-block;
    margin: 0 20px;
}

#checkout .delivery-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#checkout .yourDetails {
}

#checkout .delivery-options > h3,
#checkout .yourDetails > h3 {
    width: 100%;
}

#checkout .delivery-options .buttonBox {
    margin: 0 0 10px;
    width: 45%;
    /* max-width: 40%; */
}

/*Form Elements*/
.labelFrame,
#checkout .details {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.labelFrame select,
.labelFrame input,
#checkout .details select,
#checkout .details input,
#checkout .yourDetails input,
.address-input .labelFrame .address-name {
    width: 100%;
}

.address-input .labelFrame .address-name {
    display: flex;
    justify-content: space-between;
}

.address-input .labelFrame .address-name div {
    width: 49%;
}

#myDetails label + input ~ span,
#checkout label + input ~ span {
    margin: 0 0 8px 40%;
}

#myDetails label + input ~ span:not(.error),
#checkout label + input ~ span:not(.error) {
    display: block;
    width: 100%;
    padding: 5px;
}

#checkout .data-entry-message {
    margin: 0 0 10px 0;
    width: 100%;
}

#accountCreation label + input ~ span {
    margin: 0 0 8px;
}

#deliveryOption_other_container .block1 {
    width: 60%;
    border-right: 1px solid var(--site-border);
    padding-right: 40px;
}

#deliveryOption_other_container .block2 {
    width: 40%;
    padding: 40px 0 40px 40px;
}

#checkout #billingAddressForm {
    display: block;
    margin: 0;
}

#checkout .details.postcode {
    width: 100%;
}

#checkout .searchPostcode {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#checkout .searchPostcode input[type='text'] {
    border-color: #606770;
    width: 100%;
    font-size: 20px;
}

#checkout .searchPostcode input[type='text']::placeholder {
    font-size: 13.3px;
    color: #aaa;
}

#accountCreation > h3 {
    width: 100%;
}

#checkout #accountCreation h5 {
    text-transform: none;
    margin-top: 0;
}

#accountCreation .accountChoice {
    width: 100%;
    padding: 0;
}

#accountCreation .accountChoice {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#accountCreation .accountChoice .buttons {
    width: 40%;
    padding: 0 40px 0 0;
}

.accountChoice .buttonBox {
    display: block;
    margin: 0 0 10px;
}

#checkout #accountCreation #passwordForm {
    width: 60%;
    padding: 0;
}

#checkout #accountCreation #passwordForm input,
#checkout #accountCreation #passwordForm label {
    display: block;
    width: 100%;
}

#checkout #accountCreation #passwordForm label span {
    display: block;
    padding-bottom: 5px;
}

#checkout #accountCreation #dataUse .accordion-title {
    border: 1px solid var(--site-border);
    padding: 10px;
    border-radius: 4px;
    background: #efefef;
}

#checkout .vatBox {
    align-items: flex-start;
}

#checkout .vatBox .block1 {
    width: 45%;
    padding: 0 30px 0 0;
}

#checkout .vatBox .block2 {
    width: 55%;
    padding: 0 0 0 30px;
    border-left: 1px solid var(--site-border);
}

#checkout .vatBox .block1 .buttonBox {
    margin: 0;
    width: 100%;
}

#checkout .vatBox label {
    width: 100%;
}

#checkout .signUp > h4 {
    margin: 0;
    width: 100%;
}

#checkout .signUp .block1 {
    width: 40%;
    padding: 0 40px 0 0;
    border-right: 1px solid var(--site-border);
}

#checkout .signUp .block2 {
    width: 60%;
    padding: 0 0 0 40px;
}

#checkout .sectionFooter {
    display: block;
    margin: 30px 0 100px;
    border-top: 1px solid #606770;
}

#checkout .sectionFooter p a {
    display: inline-block;
    vertical-align: middle;
}

#checkout .sectionFooter p .button {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

#checkout .button.extra-large {
    padding: 10px 30px;
    line-height: 30px;
    height: auto;
    font-size: 16px;
    font-weight: 500;
}

.success,
.error {
    font-weight: bold;
    display: block;
    width: 100%;
}

.success {
    color: #eb6a2e !important;
}

.error {
    color: #ab162c !important;
}

.error:empty {
    display: none;
}

form input[aria-invalid='true'],
form select[aria-invalid='true'],
form textarea[aria-invalid='true'] {
    border: 2px solid #ab162c !important;
    background: #f9d9de;
}

.submit-messages {
    color: #eb6a2e;
    display: block;
    margin: 16px 0;
    text-align: right;
    font-size: 1.1em;
    font-weight: bold;
}

form span.error:not(:empty):not(.submit-messages) {
    display: block;
    margin: 0 0 8px;
}

#checkout #summary {
    display: block;
    margin: 0;
}

#summary .shipTo {
    align-items: initial;
}

#summary .shipTo h3 {
    width: 100%;
}

#summary .shipTo .block1 {
    width: 50%;
    padding: 1px 0;
}

#summary .shipTo .block2 {
    width: 50%;
    padding: 1px 0;
}

#carInfo .block1 {
    width: 100%;
}

#carInfo .block2 {
    width: 50%;
    padding-right: 30px;
}

#carInfo .block3 {
    width: 50%;
    padding-left: 30px;
}

#checkout #carInfo label {
    font-size: 13px;
    padding-right: 0px;
}

#checkout #otherInfo h3 {
    width: 100%;
}

#checkout .terms {
    text-align: right;
    display: block;
}

#checkout .terms .buttonBox {
    margin: 0;
}

#checkout .terms .buttonBox label a {
    color: currentColor;
    text-decoration: underline;
    text-transform: none;
}

#checkout .terms .buttonBox input[type='checkbox']:checked + label {
    background-color: #606770;
    border-color: #606770;
}

#checkout .terms .button {
    border-color: transparent;
    background: var(--site-border);
    color: #363c4b;
    font-size: 12px;
    margin-bottom: 10px;
}

#otherInfo .block1 {
    padding-right: 40px;
    width: 1000%;
}

#summary .termsBox {
    display: block;
    margin: 30px 0 50px;
}

#summary .termsBox .buttonBox {
    margin: 0;
}

#summary .termsBox .buttonBox label {
    margin: 0 0 0 40px;
    display: inline-block;
    vertical-align: middle;
    border-color: #08a972;
    background-color: #efefef;
}

#summary .termsBox .buttonBox label:hover,
#summary .termsBox .buttonBox :checked + label {
    background-color: #08a972;
    border: 1px solid #08a972;
}

#checkout #masthead {
    min-height: 70px;
}

#checkout #Logo {
    width: 230px;
}

#checkout #masthead > .innerframe {
    min-height: 70px;
}

#checkout .payBox {
    border: 1px solid #08a972;
}

#checkout .payment-options .buttonBox {
    width: 31%;
}

#checkout .payment-options .buttonBox label {
    width: 100%;
    height: 100%;
    text-align: center;
    background: #fff;
    color: #363c4b;
}

#checkout .payment-options .buttonBox label:hover {
    border: 1px solid #606770;
}

#checkout .payment-options .buttonBox label img {
    width: 100%;
    height: 80px;
    object-fit: scale-down;
    object-position: center;
}

#checkout .payment-options .buttonBox :checked + label {
    border: 2px solid #08a972;
    color: #08a972;
}

#checkout .payment-options .buttonBox label span small {
    display: block;
    font-size: 12px;
}

#checkout #paymentFormContainerByCard {
    padding: 30px 0;
    align-items: center;
}

#checkout #paymentFormContainerByCard > .block1 {
    width: 55%;
    border-right: 1px solid var(--site-border);
    padding-right: 40px;
}

#checkout #paymentFormContainerByCard > .block2 {
    width: 40%;
}

#checkout #paymentFormContainerByCard > .block2 img {
    margin: 0 10px 5px 0;
}

/*Thank you page*/
#checkout.thanks #topFrame .currencies,
#checkout.thanks #topFrame .languages {
    display: none;
}

#checkout #thanks {
    padding: 30px 0 0;
}

#checkout #thanks ul li strong,
#checkout #thanks p strong,
#checkout #thanks h6 strong {
    color: #23a9be;
}

#checkout #thanks h6 + h3 {
    margin-top: 30px;
}

#checkout #thanks .notice {
    margin: 50px 0;
    background: #efefef;
}

#checkout #thanks .footer {
    border-top: 1px solid #606770;
    padding-top: 15px;
}

#checkout .flexgrid.address-summary {
    flex-wrap: wrap;
    align-items: flex-start;
}

#checkout .flexgrid.address-summary h3 {
    width: 100%;
}

#checkout .flexgrid.address-summary .txtbox {
    width: 50%;
}

#checkout .flexgrid.address-summary .txtbox p {
    padding-right: 30px;
}

#checkout .flexgrid.address-summary .txtbox a {
    color: #eb6a2e;
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--site-border);
    margin: 15px 0 0;
}

#checkout h6.flash {
    border: 1px solid #23a9be;
    padding-bottom: 10px;
    margin: 0 0 5px;
    padding: 15px 40px;
    background: #fff;
    color: #23a9be;
}

#checkout .checkoutLinks .button.line {
    border-color: var(--site-border);
    background: var(--site-border);
    color: #a0a7af;
    padding: 12px 25px;
    margin-right: 5px;
    margin-bottom: 10px;
}

#checkout .checkoutLinks .button.line:hover {
    background-color: #a0a7af;
    color: #fff;
}

/*Payment/Braintree*/
.paymentOptions {
    display: flex;
    flex-flow: row wrap;
    min-width: 100%;
    margin: 0 0 30px;
}

.paymentOptions .buttonBox {
    display: block;
    background: #fafafa;
    width: 31%;
    margin: 0 10px 10px 0;
}

.paymentOptions .buttonBox label {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    height: 100%;
}

.paymentOptions .buttonBox label svg {
    margin: 0 10px 0 0;
    width: 40px;
    height: 40px;
}

.paymentOptions .buttonBox label span {
    width: calc(100% - 50px);
    line-height: 18px;
}

.paymentOptions .buttonBox input[type='radio']:checked + label {
    background-color: #606770;
    border-color: #606770;
}

.bankOptions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.bankOptions .headbox {
    width: 100%;
}

.bankOptions .bank {
    width: 40%;
    padding: 20px;
    border: 1px solid var(--site-border);
}

.bankOptions .box {
    width: 59.4%;
    padding: 20px;
    border: 1px solid var(--site-border);
}

.bankOptions .box h6 {
    color: #23a9be;
    margin: 0 0 15px;
}

.bankOptions .box p + h6 {
    border-top: 1px solid var(--site-border);
    padding: 10px 0 0;
}

#checkout p.placeOrder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-top: 2px oslid #7d8798;
    padding: 10px 0 0;
    margin: 30px 0 0;
}

#checkout p.placeOrder .button {
    margin: 0 0 0 30px;
    max-width: 320px;
    font-size: 22px;
    letter-spacing: 1px;
    font-weight: 500;
    padding: 20px 35px;
    height: auto;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
}

/*------------------- Accordion */
.borderbox.accordion-frame {
    padding: 30px 40px;
}

.accordion-frame .accordion-title {
    display: block;
    margin: 0;
    cursor: pointer;
}

.accordion-frame .accordion-title svg {
    float: right;
    width: 25px;
    height: 25px;
    margin: 0 10px;
}

.accordion-frame.active .accordion-title {
    padding-bottom: 20px;
    margin: 0 0 30px;
}

.accordion-frame.active .accordion-title svg {
    transform: rotate(-180deg);
    fill: #eb6a2e;
}

.accordion-frame .accordion {
    display: none;
}

.accordion-frame.active .accordion {
    display: block;
}

.accordion-frame.active .flexgrid.address-summary {
    display: flex;
}

.accordion-frame:not(.active):hover {
    background: #efefef;
}

.accordion-frame.active #carInfo,
.accordion-frame.active #otherInfo {
    display: flex;
    align-items: initial;
    margin: 0;
}

.accordion-frame.borderbox {
    padding: 0;
}

.accordion-frame.borderbox .accordion-title {
    padding: 20px 40px;
    margin: 0;
}

.accordion-frame.borderbox .accordion {
    padding: 0 40px 20px;
    margin: 0;
}

#login .borderbox:not(.reset) .error:not(.submit-messages),
#register .borderbox:not(.reset) .error:not(.submit-messages) {
    margin: 0 0 8px 40%;
}

/*------------------- partsCatalogue.aspx */
#catalogue .flexgrid.carmake select {
    width: 32%;
}

/*------------------- Gallery */
.refineList.gallery {
    grid-template-columns: repeat(6, minmax(14%, 16%));
}
ul.refineList.gallery a {
    padding: 10px;
    font-size: 0.68rem;
    line-height: 0.88rem;
    font-weight: 600;
    text-align: left;
    color:var(--site-mid-grey);
}

ul.refineList.gallery a span {
    padding-top: 10px;
    display: block;
}

ul.refineList.gallery a img {
    width: 100%;
}
    ul.refineList.gallery a iframe {
        max-width: 100%;
        display: block;
        border: none;
    }

#gallery #jquery-overlay {
    z-index: 7000;
}

#gallery #jquery-lightbox {
    z-index: 8000;
    max-width: 90%;
}

#gallery .galleryIcons {
    display: block;
    margin: 20px 0 0;
}

#gallery .galleryIcons a {
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--site-border);
}

/*------------------- Error Pages */
#Error #bodyMain {
    max-width: 750px;
}

/*404.aspx*/
#E500,
#E404 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 1px;
    text-align: center;
    width: 100%;
    /*color: #fff;*/
}

#E404 h1 {
    color: #eb6a2e;
    font-size: 8vw;
    line-height: 10vw;
}

#E500 h1 {
    color: #08a972;
    font-size: 8vw;
    line-height: 10vw;
}

/*Error.aspx*/
/*------------------- myAccount */
#myAccount #container {
    overflow: initial;
}

#myAccount #filterSelector {
    display: none;
}

#myAccount #userInfo {
    display: block;
    margin: 0 0 30px;
    padding: 15px;
}

#myAccount #userInfo h2 {
    margin: 0;
    padding: 0;
}

#myAccount #userInfo h2 svg {
    fill: #606770;
    display: inline-block;
    vertical-align: middle;
    margin: 0 20px 0 0;
    width: 45px;
    height: 45px;
}

#myAccount #navBar #categoryOpen {
    display: none;
}

#myAccount #pageContent #navBar {
    position: absolute;
    padding: 0;
}

#myAccount #navBar .navFrame {
    display: block;
    padding: 50px 50px 30px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -100%;
    width: 100%;
    z-index: 1000;
    overflow-y: auto;
    background: #fff;
    transition: all ease-in-out 0.4s;
    border-top: 4px solid #eb6a2e;
}

#myAccount #mainContent {
    margin: 0 auto 50px;
    border: none;
    width: 100%;
}

#myAccount #navigationTabs {
    display: block;
    border-bottom: 1px solid #08a972;
    margin: 0;
}

#navigationTabs ul {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 0 10px;
    margin: 0;
}

#navigationTabs ul li {
    display: block;
    margin: 0 5px;
    padding: 0;
    text-transform: uppercase;
    background: #fff;
    border: 1px solid #08a972;
    border-bottom: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 4px 4px 0 0;
}

#navigationTabs ul li:hover,
#navigationTabs ul li.selected {
    background: #08a972;
    border-color: #08a972;
    color: #fff;
}

#navigationTabs ul li a {
    color: currentColor;
    display: block;
    padding: 10px 20px;
}

#navigationTabs ul li#logOut:hover a {
    background: #363c4b;
    border-color: #363c4b;
    color: #fff;
}

#myOrders {
    display: block;
    padding: 0;
    margin: 0;
}

#myOrders li {
    list-style: none;
    padding: 20px 10px;
    border: 1px solid var(--site-border);
    margin: 0 0 20px;
    border-radius: 4px;
    background: #fff;
    width: 100%;
}

#myOrders li > div {
    display: flex;
    width: 100%;
}

#myOrders li:hover {
    background: rgba(107, 89, 89, 0.02);
}

#myOrders li > div > div {
    padding: 0 10px;
    min-width: 15%;
}

#myOrders li > div:not(.tracking-info) > div span:not(.ladda-label):first-of-type {
    display: block;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 0 0 10px;
    color: #a0a7af;
    text-transform: uppercase;
}

#myOrders li > div:not(.tracking-info) > div:first-of-type > span:not(.ladda-label):nth-of-type(2) {
    font-size: 16px;
}

#myOrders li > div.tracking-info {
    width: 100%;
    padding: 20px 0 0;
}

#myOrders li > div.tracking-info a {
    color: #23a9be;
    font-weight: bold;
}

#myOrders li > div.tracking-info .details {
    padding-bottom: 20px;
}

#myOrders li > div.tracking-info .details > div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 5px;
}

#myOrders li > div.tracking-info .label {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #a0a7af;
    text-transform: uppercase;
}

#myOrders li > div.tracking-info h5 {
    padding-left: 10px;
}

#myOrders li > div.tracking-info .order-tracking-line-heading {
    padding-bottom: 10px;
    text-transform: uppercase;
    font-style: italic;
}

#invoice-history .row span {
    word-break: break-word;
}

#myDetails {
    display: block;
    margin: 0 auto;
}

#myDetails .borderbox {
    margin-bottom: 25px;
}

#myDetails .searchPostcode,
#myDetails .borderbox .details {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    min-height: 50px;
    display: inline !important;
}

#myDetails .details input {
    width: 100%;
}

/* #myDetails .details label {
  width: 40%;
  line-height: 40px;
} */

#myDetails .searchPostcode input {
    width: 100%;
}

#myDetails .searchPostcode input[type='text']::placeholder {
    font-size: 13.3px;
    color: #aaa;
}

.details .panel {
    width: 100%;
}

#myDetails .clientSave .button {
    width: 250px;
}

/*------------------- Always Hidden - Sidebar Items */
#diagram #categoryOpen,
#gallery #categoryOpen,
#BasicPage #categoryOpen,
#login #categoryOpen,
#register #categoryOpen,
#basket #pageContent #categoryOpen {
    display: none;
}

#BasicPage #bodyText {
    padding: 50px;
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: 4px;
    min-height: 50vh;
}

/*------------------- TyreSearch.aspx */
#tyreSearch table tr td {
    font-size: 12px;
}

#tyreSearch table select {
    width: 100%;
    min-width: 175px;
    height: 25px;
    padding: 0 20px 0 5px;
}

#tyreSearch .fpfLogoContainer {
    float: left;
    height: 100px;
    margin: 0px 50px 0px 0px;
}

#tyreSearch #searchContainer p strong {
    color: #f00;
}

#tyreSearch #searchContainer,
#tyreSearch #resultsContainer {
    margin-bottom: 40px;
}

#tyreSearch #tyrebox {
    display: flex;
    justify-content: flex-start;
}

/*------------------- Cars for Sale */
#CarsList {
    width: 100%;
    max-width: 820px;
    display: block;
    margin: 30px auto;
    padding: 0 20px;
}

#CarsList .buttons {
    display: block;
    padding: 20px 0;
    margin: 0 0 20px;
}

#CarsList .buttons .button {
    padding: 12px 25px;
    margin-right: 5px;
}

#CarsList .buttons .active {
    background: #444;
}

.car-sale-listing {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto 50px;
    padding: 20px;
    border: 1px solid var(--site-border);
    background: #fff;
    border-radius: 4px;
    position: relative;
}

.car-sale-listing > div {
    display: block;
    width: 100%;
}

.car-sale-listing .images a {
    display: block;
    margin: 0;
}

.car-sale-listing .images .main-image-link {
    position: relative;
    margin-bottom: 10px;
}

.car-sale-listing .images .main-image {
    padding: 0;
    margin: 0 0.5px -3px;
}

.car-sale-listing .images ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.car-sale-listing .images ul li {
    margin: 0 0 1px;
    flex: 0 0 20%;
    padding: 0 0.5px;
}

.car-sale-listing .images ul li img {
    cursor: pointer;
    display: block;
    margin: 0;
}

.car-sale-listing .images .zoom {
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.car-sale-listing .details .description-container {
    max-height: 600px;
    overflow: auto;
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc;
    padding: 10px 10px 10px 0;
}

.car-sale-listing .arrow {
    margin-top: 10px;
    cursor: pointer;
}

/*------------------- Make Payment */
#payment {
    display: block;
    padding: 30px 0;
}

#makepayment {
    display: block;
    padding: 10px 0;
}

/*------------------- Brand Filters */
.filters .filter-buttons {
    text-align: right;
}

/*------------------- Vue effects */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.slide-fade-left-enter-active,
.slide-fade-right-enter-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-left-leave-active,
.slide-fade-right-leave-active {
    transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-left-enter-from {
    transform: translateX(-100px);
    opacity: 1;
}

.slide-fade-left-leave-to {
    transform: translateX(-300px);
    opacity: 0;
}

.slide-fade-right-enter-from {
    transform: translateX(100px);
    opacity: 1;
}

.slide-fade-right-leave-to {
    transform: translateX(300px);
    opacity: 0;
}

.slide-enter-active {
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}

.slide-leave-active {
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.slide-enter-to,
.slide-leave {
    max-height: 100px;
    overflow: hidden;
}

.slide-enter,
.slide-leave-to {
    overflow: hidden;
    max-height: 0;
}

.stock-block {
    display: inline-block;
    width: 20px;
    height: 5px;
    bottom: 2px;
    position: relative;
}

.account-navigation {
    padding-bottom: 20px;
}

.account-navigation > div {
    padding: 10px;
}

.account-navigation .account-navigation-button {
    border: 1px solid #bbb;
    background: #fff;
    align-items: flex-start;
    padding: 10px;
    height: 85px;
}

.account-navigation .account-navigation-button .col {
    font-size: 12px;
}

.account-navigation .account-navigation-button .col span {
    font-family: 'Roboto', sans-serif;
}

.account-navigation .account-navigation-button .col .account-navigation-button-heading {
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    color: #23a9be;
    padding-bottom: 5px;
}

.account-navigation .account-navigation-button:hover,
.account-navigation .account-navigation-button.selected {
    background: #ccc;
    border: 1px solid #eb6a2e;
}

.account-navigation a:hover {
    color: initial;
}

.account-navigation a:hover .account-navigation-button .col .account-navigation-button-heading,
.account-navigation .account-navigation-button.selected .col .account-navigation-button-heading {
    color: #eb6a2e;
}

.account-navigation .account-navigation-button img {
    width: 50px;
    height: 50px;
    margin-right: 20px;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.row > .col {
    width: auto;
    min-width: 0;
    max-width: 100%;
    flex: 10000 1 0%;
}

.row > .col-0 {
    height: auto;
    width: 0%;
}

.row > .col-1 {
    height: auto;
    width: 8.3333%;
}

.row > .col-2 {
    height: auto;
    width: 16.6667%;
}

.row > .col-3 {
    height: auto;
    width: 25%;
}

.row > .col-4 {
    height: auto;
    width: 33.3333%;
}

.row > .col-5 {
    height: auto;
    width: 41.6667%;
}

.row > .col-6 {
    height: auto;
    width: 50%;
}

.row > .col-7 {
    height: auto;
    width: 58.3333%;
}

.row > .col-8 {
    height: auto;
    width: 66.6667%;
}

.row > .col-9 {
    height: auto;
    width: 75%;
}

.row > .col-10 {
    height: auto;
    width: 83.3333%;
}

.row > .col-11 {
    height: auto;
    width: 91.6667%;
}

.row > .col-12 {
    height: auto;
    width: 100%;
}

.row > .col-xs {
    width: auto;
    min-width: 0;
    max-width: 100%;
    flex: 10000 1 0%;
}

.row > .col-xs-0 {
    height: auto;
    width: 0%;
}

.row > .col-xs-1 {
    height: auto;
    width: 8.3333%;
}

.row > .col-xs-2 {
    height: auto;
    width: 16.6667%;
}

.row > .col-xs-3 {
    height: auto;
    width: 25%;
}

.row > .col-xs-4 {
    height: auto;
    width: 33.3333%;
}

.row > .col-xs-5 {
    height: auto;
    width: 41.6667%;
}

.row > .col-xs-6 {
    height: auto;
    width: 50%;
}

.row > .col-xs-7 {
    height: auto;
    width: 58.3333%;
}

.row > .col-xs-8 {
    height: auto;
    width: 66.6667%;
}

.row > .col-xs-9 {
    height: auto;
    width: 75%;
}

.row > .col-xs-10 {
    height: auto;
    width: 83.3333%;
}

.row > .col-xs-11 {
    height: auto;
    width: 91.6667%;
}

.row > .col-xs-12 {
    height: auto;
    width: 100%;
}

.pt-xs {
    padding-top: 5px;
}

.pt-sm {
    padding-top: 10px;
}

.pt-md {
    padding-top: 20px;
}

.pt-lg {
    padding-top: 30px;
}

.pb-xs {
    padding-bottom: 5px;
}

.pb-sm {
    padding-bottom: 10px;
}

.pb-md {
    padding-bottom: 20px;
}

.pb-lg {
    padding-bottom: 30px;
}

.pl-xs {
    padding-left: 5px;
}

.pl-sm {
    padding-left: 10px;
}

.pl-md {
    padding-left: 20px;
}

.pl-lg {
    padding-left: 30px;
}

.pr-xs {
    padding-right: 5px;
}

.pr-sm {
    padding-right: 10px;
}

.pr-md {
    padding-right: 20px;
}

.pr-lg {
    padding-right: 30px;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

/* Quasar Overrides */
.q-field--outlined .q-field__control {
    padding: 0;
}

.q-field--labeled .q-field__native {
    padding-left: 9px;
    height: 56px;
    border: 1px solid #d0dbdd;
}

.q-input.q-field--outlined .q-field__control:before {
    border: none;
}

.q-select.q-field--labeled .q-field__native {
    padding-top: 4px;
    height: 32px;
    border: none;
}

.q-field__label {
    left: 9px;
}

/* Cookie Consent Banner */
#CybotCookiebotDialogPoweredbyCybot,
.CookiebotWidget-main-logo {
    display: none !important;
}

#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
    padding: 0 !important;
    border: 2px solid #eb6a2e !important;
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change {
    background-color: #eb6a2e !important;
    border-color: #eb6a2e !important;
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw {
    border-color: #eb6a2e !important;
}

#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #eb6a2e !important;
}

#CookiebotWidget .CookiebotWidget-consent-details button,
#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a,
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a,
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonIABHeaderViewPartnersLink,
#CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentList dt a,
#CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a,
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonIABDescription a,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink,
#CybotCookiebotDialogDetailBodyContentTextAbout a,
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover,
#CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieProvider:not(.CybotCookiebotDialogDetailBodyContentCookieInfoCount):hover,
#CybotCookiebotDialogBodyLevelButtonsSelectPane label:not([for='CybotCookiebotDialogBodyLevelButtonNecessary']) .CybotCookiebotDialogBodyLevelButtonDescription:hover {
    color: #eb6a2e !important;
}

#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li.CookiebotWidget-approved svg {
    fill: #eb6a2e !important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    border-bottom: 1px solid #eb6a2e !important;
    color: #eb6a2e !important;
}

#CybotCookiebotDialog a:hover:after,
#CybotCookiebotDialog a:hover:before,
#CybotCookiebotDialog button:hover:after,
#CybotCookiebotDialog button:hover:before {
    border-color: #eb6a2e !important;
}

#CybotCookiebotDialog label {
    display: inline !important;
}

.rounded-input {
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 5px;
}

.diagram-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-content: center;
}

.diagram-item {
    text-align: center;
}

/*Scolling container - 16/09/24*/
.dg-container {
    position: relative;
    margin: 20px auto;
    padding: 0 40px 0 0;
}

.dg-container .carousel-frame {
    border: 1px solid var(--site-border);
    border-left: 3px solid #a5adb6;
    border-right: 3px solid #a5adb6;
    overflow: hidden;
    padding: 10px 0;
}
#videoModal .carousel-frame {
    border: none;
    border-right: 3px solid #a5adb6;
    padding: 0;
}
    .dg-container .carousel-frame::after,
    .dg-container .carousel-frame::before {
        content: '';
        display: block;
        width: 20px;
        height: 100%;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        border-top: 3px solid #a5adb6;
        border-bottom: 3px solid #a5adb6;
        user-select: none;
    }

.dg-container .carousel-frame::after {
    right: 40px;
    left: auto;
}
#videoModal .carousel-frame::before{
    display:none;
}
#videoModal .carousel-frame::after{
    width:10px;
}
.dg-image-wrapper {
    display: flex;
    transition: transform 0.5s ease;
    width: max-content;
    gap: 10px;
    padding: 0 10px;
}
.dg-video-wrapper {
    display: flex;
    transition: transform 0.5s ease;
    width: max-content;
    gap: 20px;
    padding: 0 10px;

}
.dg-image-wrapper a {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d0d9e3;
    border-radius: 4px;
    width: 150px;
    height: auto;
    margin: 0;
    padding: 10px;
    text-align: center;
    align-items: center;
    position: relative;
}

.dg-image-wrapper img {
    display: block;
    width: 120px;
    aspect-ratio: 1/1;
    margin: 5px 0;
}

.dg-image-wrapper .txt {
    font-size: 0.76rem;
    line-height: 0.96rem;
    font-weight: 500;
    height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* border-bottom: 1px solid var(--site-border); */
    display: block;
    text-transform: capitalize;
    margin: 8px 0 0;
}

.dg-title {
    color: #08a972;
    display: block;
    position: absolute;
    width: 80%;
    padding: 5px 10px;
    background: #fff;
    inset: 0;
    bottom: auto;
    height: 30px;
    text-align: center;
    margin: auto;
}

.dg-arrow {
    position: absolute;
    right: 0;
    color: white;
    background: #a5adb6;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
    width: 38px;
    height: 50px;
    margin: 0;
}

.dg-arrow:hover {
    background: #7d8798;
}

.dg-arrow-left {
    bottom: 0;
    transform: scaleX(-1);
}

.dg-arrow-right {
    top: 0;
}

.dg-start .dg-arrow-left,
.dg-end .dg-arrow-right {
    background: var(--site-border);
}

/*------------------- Brands Page - 13/12/24 dd_km */
.brand_banner {
    border: 1px solid var(--site-border);
    display: flex;
    width: 100%;
    min-height: 180px;
    background: #fff;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.brand_banner img {
    display: block;
    margin: 0 auto;
    border: 1px solid #fff;
    max-height: 200px;
    object-fit: contain;
}

#gpay-button-online-api-id {
    width: 100%;
}

/* Job listing page */
.job-header {
    text-align: center;
    margin-bottom: 40px;
}

.main-title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 10px;
}

.main-description {
    font-size: 1.2rem;
    color: #666;
}

.address-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
}

select.address-dropdown {
    width: 100%;
    min-width: 300px;
    max-width: 100%;
    padding-right: 2.5em; /* Reserve space for the arrow */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    box-sizing: border-box;
    background: #fff;
    /* Optional: Custom arrow for more control */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7em center;
    background-size: 1.2em;
}

select.address-dropdown option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.address-box {
    flex: 1 1 calc(33.333% - 24px);
    min-width: 250px;
    max-width: 396px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.address-box button {
    margin-top: 12px;
    align-self: flex-end;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 4px;
    color: #fff;
}

.badge-shipping {
    background: #007bff;
}

.badge-billing {
    background: #28a745;
}

.address-actions {
    display: flex;
    flex-wrap: unset;
    gap: 8px;
    margin-top: 12px;
}

.address-actions button {
    margin: 0;
    font-size: 10px;
}

/* Job Listings Section */
.job-listings {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.job-card {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;    
    position: relative;
    padding-bottom: 40px; 
}

    .job-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

.job-title {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 10px;
}

.job-role, .working-hours, .job-type, .schedule, .contact-info {
    font-size: 1rem;
    color: #555;
    margin-bottom: 8px;
}

.job-description, .benefits {
    margin-bottom: 16px;
}

    .job-description p, .benefits p {
        font-size: 1rem;
        color: #666;
    }

.job-details {
    max-height: 0; 
    overflow: hidden; 
    visibility: hidden; 
    opacity: 0; 
    margin-top: 16px;
    padding-top: 10px;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.job-card.open .job-details {
    max-height: 5000px; 
    visibility: visible; 
    opacity: 1;
    padding-bottom: 20px;
}

.job-card .read-more {
    color: black;
    font-size: 0.86rem;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    right: 20px;
}

.read-more:hover {
    text-decoration: underline;
    color: #0056b3;
}


/*------------------- xxx */
/*------------------- xxx */
/*------------------- xxx */
/*------------------- xxx */
/*------------------- xxx */
/*----------------------------------------------------------------------------------------------------------------------- Begin Responsive Queries*/
/* ----------------------------------------------------------------------- Min Withs Smallest to largest */
@media only screen and (min-width: 768px) {
    .row > .col-sm {
        width: auto;
        min-width: 0;
        max-width: 100%;
        flex: 10000 1 0%;
    }

    .row > .col-sm-0 {
        height: auto;
        width: 0%;
    }

    .row > .col-sm-1 {
        height: auto;
        width: 8.3333%;
    }

    .row > .col-sm-2 {
        height: auto;
        width: 16.6667%;
    }

    .row > .col-sm-3 {
        height: auto;
        width: 25%;
    }

    .row > .col-sm-4 {
        height: auto;
        width: 33.3333%;
    }

    .row > .col-sm-5 {
        height: auto;
        width: 41.6667%;
    }

    .row > .col-sm-6 {
        height: auto;
        width: 50%;
    }

    .row > .col-sm-7 {
        height: auto;
        width: 58.3333%;
    }

    .row > .col-sm-8 {
        height: auto;
        width: 66.6667%;
    }

    .row > .col-sm-9 {
        height: auto;
        width: 75%;
    }

    .row > .col-sm-10 {
        height: auto;
        width: 83.3333%;
    }

    .row > .col-sm-11 {
        height: auto;
        width: 91.6667%;
    }

    .row > .col-sm-12 {
        height: auto;
        width: 100%;
    }

    .pt-sm-xs {
        padding-top: 5px;
    }

    .pt-sm-sm {
        padding-top: 10px;
    }

    .pt-sm-md {
        padding-top: 20px;
    }

    .pt-sm-lg {
        padding-top: 30px;
    }

    .pb-sm-xs {
        padding-bottom: 5px;
    }

    .pb-sm-sm {
        padding-bottom: 10px;
    }

    .pb-sm-md {
        padding-bottom: 20px;
    }

    .pb-sm-lg {
        padding-bottom: 30px;
    }

    .pl-sm-xs {
        padding-left: 5px;
    }

    .pl-sm-sm {
        padding-left: 10px;
    }

    .pl-sm-md {
        padding-left: 20px;
    }

    .pl-sm-lg {
        padding-left: 30px;
    }

    .pr-sm-xs {
        padding-right: 5px;
    }

    .pr-sm-sm {
        padding-right: 10px;
    }

    .pr-sm-md {
        padding-right: 20px;
    }

    .pr-sm-lg {
        padding-right: 30px;
    }

    #errMsg {
        margin-left: 40% !important;
    }
}

@media only screen and (min-width: 1024px) {
    #siteNavigation ul li#search_icon {
        display: none;
    }

    #masthead.docked #searchbox,
    #masthead #searchbox {
        position: absolute;
        top: 15px;
        line-height: 25px;
        margin: 0;
        padding: 10px 0 0 0;
        visibility: visible;
        opacity: 1;
        z-index: 10;
        background: transparent;
        right: 33%;
        width: 30%;
        height: 70px;
        border-right: none;
        border-left: none;
        display: block;
    }

    #masthead.docked #searchbox {
        top: 0;
    }

    #searchbox .close {
        display: none;
    }

    /*Hidden Navbars on website*/
    #BasicPage #pageContent #navBar,
    #register #pageContent #navBar,
    #login #pageContent #navBar,
    #basket #pageContent #navBar {
        display: none;
    }

    #gallery #pageContent #navBar {
        display: block;
    }

   /* #gallery #mainContent,*/
    #BasicPage #mainContent,
    #register #mainContent,
    #login #mainContent {
        display: block;
        width: 100%;
        max-width: 1000px;
        border: none;
        margin: 0 auto 50px;
        padding: 50px 20px;
    }

    #diagram #bodyTrext,
    #gallery #bodyText,
    #register #bodyText {
        padding: 20px;
        min-height: 50vh;
    }

    .row > .col-md {
        width: auto;
        min-width: 0;
        max-width: 100%;
        flex: 10000 1 0%;
    }

    .row > .col-md-0 {
        height: auto;
        width: 0%;
    }

    .row > .col-md-1 {
        height: auto;
        width: 8.3333%;
    }

    .row > .col-md-2 {
        height: auto;
        width: 16.6667%;
    }

    .row > .col-md-3 {
        height: auto;
        width: 25%;
    }

    .row > .col-md-4 {
        height: auto;
        width: 33.3333%;
    }

    .row > .col-md-5 {
        height: auto;
        width: 41.6667%;
    }

    .row > .col-md-6 {
        height: auto;
        width: 50%;
    }

    .row > .col-md-7 {
        height: auto;
        width: 58.3333%;
    }

    .row > .col-md-8 {
        height: auto;
        width: 66.6667%;
    }

    .row > .col-md-9 {
        height: auto;
        width: 75%;
    }

    .row > .col-md-10 {
        height: auto;
        width: 83.3333%;
    }

    .row > .col-md-11 {
        height: auto;
        width: 91.6667%;
    }

    .row > .col-md-12 {
        height: auto;
        width: 100%;
    }

    .pt-md-xs {
        padding-top: 5px;
    }

    .pt-md-sm {
        padding-top: 10px;
    }

    .pt-md-md {
        padding-top: 20px;
    }

    .pt-md-lg {
        padding-top: 30px;
    }

    .pb-md-xs {
        padding-bottom: 5px;
    }

    .pb-md-sm {
        padding-bottom: 10px;
    }

    .pb-md-md {
        padding-bottom: 20px;
    }

    .pb-md-lg {
        padding-bottom: 30px;
    }

    .pl-md-xs {
        padding-left: 5px;
    }

    .pl-md-sm {
        padding-left: 10px;
    }

    .pl-md-md {
        padding-left: 20px;
    }

    .pl-md-lg {
        padding-left: 30px;
    }

    .pr-md-xs {
        padding-right: 5px;
    }

    .pr-md-sm {
        padding-right: 10px;
    }

    .pr-md-md {
        padding-right: 20px;
    }

    .pr-md-lg {
        padding-right: 30px;
    }
}

@media only screen and (min-width: 1240px) {
    #masthead.docked #searchbox,
    #masthead #searchbox {
        width: 30%;
    }

    #footer {
        max-height: calc(100vh - 130px);
        height: auto;
    }
    #siteNavigation > ul > #call > a {
        width: auto;
        border-radius: 0;
        border: none;
        padding: 0;
    }

    #filterSelector {
        padding: 0 10px;
    }

    /*Fade Out Siblings on hover*/

    #partFinder .partManufac,
    .diagramList,
    .refineList,
    .products-list {
        pointer-events: none;
    }

    #partFinder .partManufac > div,
    .diagramList li,
    .refineList li {
        transition: all ease-in-out 0.2s;
    }

    #partFinder .partManufac > div,
    .diagramList li,
    .refineList li,
    .products-list > div.product-wrapper {
        pointer-events: auto;
    }

    #partFinder .partManufac:hover > div,
    .diagramList:hover li,
    .refineList:hover li,
    .products-list:hover > div.product-wrapper {
        opacity: 0.2;
    }

    #partFinder .partManufac:hover > div:hover,
    .diagramList:hover li:hover,
    .refineList:hover li:hover,
    .products-list:hover > div.product-wrapper:hover {
        opacity: 1;
    }

    #partFinder .partManufac:hover > div:hover,
    .diagramList:hover li:hover,
    .refineList li.active,
    .refineList:hover li:hover {
        -webkit-box-shadow: 0 15px 10px -10px rgba(33, 43, 59, 0.3);
        -moz-box-shadow: 0 15px 10px -10px rgba(33, 43, 59, 0.3);
        box-shadow: 0 15px 10px -10px rgba(33, 43, 59, 0.3);
        transform: translate(0, -3px);
    }

    /*Masthead*/
    #masthead.docked #searchbox,
    #masthead #searchbox {
        right: 34.5%;
        width: 24.5%;
    }

    #masthead.docked #searchbox {
        height: 70px;
    }

    /*myAccount*/
    #myAccount #bodyMain {
        padding: 30px 0;
    }

    #gallery #mainContent,
    #BasicPage #mainContent,
    #register #mainContent,
    #login #mainContent {
        padding: 50px 0;
    }

    .row > .col-lg {
        width: auto;
        min-width: 0;
        max-width: 100%;
        flex: 10000 1 0%;
    }

    .row > .col-lg-0 {
        height: auto;
        width: 0%;
    }

    .row > .col-lg-1 {
        height: auto;
        width: 8.3333%;
    }

    .row > .col-lg-2 {
        height: auto;
        width: 16.6667%;
    }

    .row > .col-lg-3 {
        height: auto;
        width: 25%;
    }

    .row > .col-lg-4 {
        height: auto;
        width: 33.3333%;
    }

    .row > .col-lg-5 {
        height: auto;
        width: 41.6667%;
    }

    .row > .col-lg-6 {
        height: auto;
        width: 50%;
    }

    .row > .col-lg-7 {
        height: auto;
        width: 58.3333%;
    }

    .row > .col-lg-8 {
        height: auto;
        width: 66.6667%;
    }

    .row > .col-lg-9 {
        height: auto;
        width: 75%;
    }

    .row > .col-lg-10 {
        height: auto;
        width: 83.3333%;
    }

    .row > .col-lg-11 {
        height: auto;
        width: 91.6667%;
    }

    .row > .col-lg-12 {
        height: auto;
        width: 100%;
    }

    .pt-lg-xs {
        padding-top: 5px;
    }

    .pt-lg-sm {
        padding-top: 10px;
    }

    .pt-lg-md {
        padding-top: 20px;
    }

    .pt-lg-lg {
        padding-top: 30px;
    }

    .pb-lg-xs {
        padding-bottom: 5px;
    }

    .pb-lg-sm {
        padding-bottom: 10px;
    }

    .pb-lg-md {
        padding-bottom: 20px;
    }

    .pb-lg-lg {
        padding-bottom: 30px;
    }

    .pl-lg-xs {
        padding-left: 5px;
    }

    .pl-lg-sm {
        padding-left: 10px;
    }

    .pl-lg-md {
        padding-left: 20px;
    }

    .pl-lg-lg {
        padding-left: 30px;
    }

    .pr-lg-xs {
        padding-right: 5px;
    }

    .pr-lg-sm {
        padding-right: 10px;
    }

    .pr-lg-md {
        padding-right: 20px;
    }

    .pr-lg-lg {
        padding-right: 30px;
    }

    /*
* Design911 8 column product grid display -  this is a  sub display of gridview for desktop
*/

    .products-list.gridview.gridCol8 {
        grid-template-columns: repeat(8, minmax(12%, 12.5%));
        grid-gap: 12px 6px;
    }

    .products-list.gridview.gridCol8 .product-wrapper {
        height: auto;
    }

    .products-list.gridview.gridCol8 .productDisplayOuterContainer {
        left: 50%;
        transform: translateX(-50%);
        transform-origin: center;
        position: relative;
    }

    .product-wrapper:nth-child(8n) .productDisplayOuterContainer {
        transform-origin: right;
    }

    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .framedImage {
        padding: 40px 8px 35px;
    }

    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .framedImage img {
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 190px;
    }
    .products-list.gridview .framedImage {
        padding: 40px 10px 30px;
        height: 280px;
    }
    .products-list.gridview .framedImage a {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    .products-list.gridview .framedImage img {
        width: auto;
        max-height: 148px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /*.products-list.gridview.gridCol8 .product-wrapper:not(:hover) a {
        margin: 0;
        display: block;
        padding: 0 5px;
    }*/
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .priceBox {
        padding: 0;
        height: 90px;
        border: none;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .priceBox .price-display {
        line-height: 1rem;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .stock.retail {
        inset: auto 0 0;
        border: none;
    }
    .products-list.gridview.gridCol8.prod-main-txt .txtbox {
        display: block;
    }
    .products-list.gridview.gridCol8 .prod-main-txt .txtbox {
        height: 430px;
    }
    .products-list.gridview.gridCol8 .kitbox .txtbox {
        /* height: 509px;*/
    }

    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productInfoBox .code {
        padding: 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 115px;
        left: 0;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .product-wrapper .framedImage .zoom {
        left: 0;
    }

    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .offertag {
        inset: -10px -10px auto auto;
        margin: auto;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .framedImage {
        height: 180px;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .product-extras-frame,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .alternateProduct,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .prod-main-txt,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .fitsbox,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .kitbox,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .panel.options,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .panel.badges-addbasket .product-secondary-badges,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .panel.badges-addbasket,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .surcharge,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .previous-price,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productInfoBox .kitbox,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .variant-grid .h5,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .variant-grid .panel.options {
        display: none;
    }

    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productInfoBox .product-head {
        min-height: unset;
        font-size: 0.74rem;
        line-height: 0.98rem;
        height: 110px;
        padding: 5px 0 0;
        display: block;
        font-weight: 500;
        margin: 2px 0 0;
        border: none;
        text-transform: uppercase;
        overflow: hidden;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .product-head .brand-logo img,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .product-head .brand-logo {
        height: 50px;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productInfoBox .product-head a {
        display: block;
        padding: 0 5px;
        height: 50px;
        text-overflow: ellipsis;
    }

    .products-list.gridview.gridCol8 .productOptions .panel.badges-addbasket .msg span {
        font-size: 0.68rem;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .offertag {
        inset: -10px -10px auto auto;
        margin: auto;
        z-index: 10;
        width: 50px;
        height: 50px;
    }

    /*-----------------Hover state*/
    .products-list.gridview.gridCol8 .product-wrapper:hover {
        background: none;
        border: none;
        z-index: 100;
    }

    .products-list.gridview.gridCol8 .product-wrapper:hover > a {
        display: block;
        position: relative;
        height: 340px;
        width: 100%;
        background: #0003;
    }

    .products-list.gridview.gridCol8 .product-wrapper:hover .framedImage {
        padding: 30px 0 20px;
    }

    .products-list.gridview.gridCol8 .product-wrapper:hover .productDisplayOuterContainer {
        position: absolute;
        top: -50px;
        width: 260px; /*Any more than this will block user touching left or right products*/
        background: #fff;
        border-radius: 2px;
        box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.2);
        transition: all cubic-bezier(0.62, 1.11, 0.66, 0.71) 0.12s;
        transform: translateX(-50%) scale(1);
    }

    .products-list.gridview.gridCol8 .product-wrapper:nth-child(8n):hover .productDisplayOuterContainer {
        transform: translateX(-80%) scale(1);
    }

    .products-list.gridview.gridCol8 .product-wrapper:hover .panel.badges-addbasket,
    .products-list.gridview.gridCol8 .product-wrapper:hover .productOptions .surcharge,
    .products-list.gridview.gridCol8 .product-wrapper:hover .productOptions .previous-price {
        display: block;
    }

    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .priceBox .priceregular,
    .products-list.gridview.gridCol8 .grid-8-price-from {
        display: block;
        font-size: 0.88rem;
        color: var(--site-grey);
    }

    .products-list.gridview.gridCol8 .gridview .priceBox .priceregular .price-display,
    .products-list.gridview.gridCol8 .grid-8-price-from .price-display {
        font-size: 0.96rem;
    }

    .products-list.listview .grid-8-price-from,
    .products-list.gridview .grid-8-price-from {
        display: none;
    }
    .products-list.gridview.gridCol8 .product-wrapper:hover .grid-8-price-from {
        display: none;
    }
}

@media only screen and (min-width: 1680px) {
    /*masthead*/
    /*#filterSelector-choices .filterSteps {
    width: 60.4%;
  }*/

    /*Footer*/
    #footCol1,
    #filterSelector-choices .label {
        width: 20%;
    }

    #footCol2 {
        width: 80%;
    }

    #mainContent {
        width: 80%;
    }

    #pageContent #navBar {
        width: 20%;
    }

    #filterSelector-chosen .myVehicle {
        width: 100%;
        padding: 0;
    }

    #filterSelector-chosen .changeCar {
        /*width: 20%;*/
    }

    #filterSelector-choices {
        padding: 0;
    }

    #filterSelector-choices .filterSteps > span:nth-of-type(4) {
        width: 20%;
    }

    #siteNavigation ul#accountBox,
    #topFrame .basketFrame .basket {
        width: 40%;
        right: -45%;
    }

    #checkout #pageContent #side,
    #basket #pageContent #side {
        width: 20%;
    }
}

/* ----------------------------------------------------------------------- MAX Widths Largest to smallest */
@media only screen and (max-width: 1679px) {
    /*Checkout*/
    #checkout #mainContent {
        width: 100%;
        max-width: 980px;
    }

    .panel.badges-addbasket input[type='submit'].button {
        padding: 8px 15px;
    }

    /*Basket*/
    #basketItems li.offerBox .discount-code,
    #basketItems li.offerBox .discount-code-applied {
        width: 50%;
    }

    .basket .discount-code-applied {
        width: 100%;
    }

    .offersFrame .offersAd {
        width: 50%;
    }

    


}
@media only screen and (max-width: 1439px) {
    .videoFrame .vd-modal-content {        
        width: 1010px;        
    }
    .videoFrame .vd-modal iframe {
        width: 960px;
    }

} /*--endQuery*/

@media only screen and (max-width: 1279px) {
    /*UI*/
    .logoframe{
        left:20px;
    }
    #pageContent {
        overflow: hidden;
    }

    #pageContent #navBar {
        width: 20%;
    }

    #mainContent {
        width: 80%;
    }

    /*Masthead*/
    #menu_icon {
        display: block;
    }

    #Logo {
        width: 220px;
    }

    #bodyText {
        padding: 30px 20px;
    }

    #masthead #topFrame {
        padding-right: 20px;
    }

    #siteNavigation {
        padding: 0;
    }

    #siteNavigation ul#accountBox {
        right: -56%;
        width: 55%;
        height: 100vh;
    }

    #call .no {
        display: none;
    }

    #call a .phone {
        display: block;
    }

    #call a.whatsapp {
        display: none;
    }

    #topFrame .basketFrame {
        z-index: 5000;
        position: absolute;
    }

    #topFrame .basket {
        right: -61%;
        width: 60%;
    }

    #topFrame .languages .languages_box {
        right: 20px;
    }

    #filterSelector-choices .label {
        width: 25%;
    }

    #filterSelector-choices .filterSteps {
        width: 75%;
        padding-left: 7px;
    }

    #siteNavigation ul li:not(.intro) {
        margin: 0 0 0 5px;
        width: 40px;
        height: 40px;
    }

    #topFrame .languages,
    #topFrame .currencies,
    #topFrame .basket_icon {
        margin-left: 15px;
    }

    #filterSelector-chosen .changeCar {
        width: auto;
    }

    #filterSelector-chosen p {
        width: 24.4%;
    }

    #masthead.docked #searchbox, 
    #masthead #searchbox {
        right: 36%;
        width: 25%;
    }

    #searchbox .searchButton {
        padding: 8px;
    }

    /*Footer*/
    #footCol1 {
        width: 20%;
        padding: 33px 20px 20px;
    }

    #footCol2 {
        width: 80%;
        padding: 30px 20px;
    }

    #footer #lowerFooter {
        padding: 10px 20px;
        height: auto;
    }

    /*Type*/
    h1,
    .h1 {
        font-size: 1.68rem;
        line-height: 1.98rem;
        margin: 0 0 20px;
        letter-spacing: -0.026rem;
        font-weight: 400;
    }

    h2,
    .h2 {
        font-size: 24px;
        line-height: 32px;
    }

    .sectionTitle,
    h3,
    .h3 {
        font-size: 20px;
        line-height: 26px;
    }

    h4,
    .h4 {
        /*        font-size: 16px;
        line-height: 18px;*/
        font-size: 1.08rem;
        line-height: 1.18rem;
    }

    h5,
    .h5 {
        font-size: 0.786rem;
        line-height: 0.986rem;
    }

    h6,
    .h6 {
        font-size: 14px;
        line-height: 22px;
    }

    p {
        font-size: 13px;
        line-height: 22px;
    }

    /*My Account*/
    #myAccount #userInfo {
        position: relative;
        top: 0;
        margin: 0 0 30px;
        padding: 0;
    }

    #myAccount #userInfo h2 {
        margin: 0 0 30px;
        padding: 5px 0 0 60px;
        position: relative;
        min-height: 50px;
    }

    #myAccount #userInfo h2 svg {
        position: absolute;
        top: 0;
        left: 0;
    }

    /*Hompepage*/
    .Banners {
        margin: 17px 0 0 0;
    }

    #HomeFeatured h2 {
        margin-top: 0;
    }

    .homePageBoxes {
        padding: 0 15px;
    }

    .introPanel {
        margin: 30px 0 50px;
    }
    
    /*Sidebar*/
    #gallery #pageContent #navBar,
    #pageContent #navBar {
        padding: 20px 0 50px 20px;
    }

    .home .gridview .product-wrapper .productOptions .panel.badges-addbasket {
        position: relative;
    }

    .home .gridview .productOptions .panel.badges-addbasket {
        justify-content: flex-end;
        padding: 10px 0;
    }

    .home .panel.badges-addbasket input[type='submit'].button {
        display: block;
        width: 100%;
        margin: 0;
    }

    #recentProducts .panel.badges-addbasket .msg {
        padding: 0;
        flex-wrap: wrap;
        max-height: 100%;
    }

    #recentProducts .panel.badges-addbasket .msg > span,
    #recentProducts .panel.badges-addbasket .msg > a {
        width: 100%;
        text-align: center;
    }

    #recentProducts .panel.badges-addbasket .msg > span {
        padding: 20px 0 0;
    }

    /*ProductList*/
    #categories {
    }

    #diagram #mainContent {
        padding: 30px 20px;
    }

    /*Product Page*/

    /*Basket*/
    #basket #mainContent {
        width: 80%;
    }

    #basket #pageContent #side {
        width: 20%;
    }

    #basket #pageContent #side {
        padding: 0 20px 0 0;
    }

    #basket #bodyMain {
        padding: 30px 20px;
    }

    #basket #lowerContent {
        margin: 30px 20px 50px;
    }

    .basket-product .quantity .update-quantity-link {
        display: block;
        margin-left: 0;
        text-align: center;
        width: 100%;
    }

    #basketItems li.offerBox .discount-code,
    #basketItems li.offerBox .discount-applied {
        width: 50%;
    }

    .offersFrame .offersAd {
        width: 50%;
    }

    #lowerContent .basket-offers .product-wrapper {
        width: 48%;
        max-width: 48%;
    }

    /*Checkout*/
    #checkout ol#progress {
        position: relative;
        top: auto;
        background: transparent;
    }

    /*Diagrams*/
    ul.refineList #diagram #mainContent {
        padding: 30px 20px;
    }

    #diagramWrapper {
        margin: 0;
        padding: 0;
    }

    .imgDiagMapHolder .imgHolder {
        height: auto;
    }

    .imgDiagMapHolder .imgHolder > div {
        margin: 0 auto;
    }

    /* Recent Products on Homepage */
    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper:nth-of-type(1n + 13) {
        display: none;
    }

    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper {
        width: 24%;
    }
    /*video carousel*/
    .videoFrame .vd-modal-content {
        width: 930px;
    }
    .videoFrame .vd-modal iframe {
        width:880px;
    }

}

@media only screen and (max-width: 1179px) {
    #diagram .categoriesSmall .refineList {
        grid-template-columns: repeat(8, minmax(10.5%, 12.5%));
    }

    .productOptions .panel.options.dropdowns .dropdown-group {
        width: 100%;
    }
    .productOptions .panel.options.dropdowns .dropdown-group select {
        width: 100%;
    }
    /*galleries*/
    .refineList.gallery {
        grid-template-columns: repeat(5, minmax(19%, 20%));
    }
    
}
/*--endQuery*/

@media only screen and (max-width: 1023px) {
    /*Masthead*/
    #Logo,
    #masthead.docked #Logo {
        width: 220px;
    }

    #topFrame .languages,
    #topFrame .basket_icon,
    #topFrame .currencies {
        margin-left: 10px;
    }

    #siteNavigation ul li {
        margin: 0 0 0 6px;
    }

    #siteNavigation ul #menu_icon {
        display: inline-block;
        margin: 0 0 0 -7px;
    }

    #masthead.docked #searchbox,
    #masthead #searchbox {
        position: fixed;
        width: 100%;
        top: -100%;
        bottom: auto;
        padding: 100px 20px;
        box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.25);
        margin: 0;
        border-top: 4px solid #7d8798;
        right: 0;
        left: 0;
    }

    #masthead #searchbox.active {
        top: 0;
    }

    #searchbox a {
        color: #fff;
    }

    #filterSelector-choices .filterSteps > span {
        width: 38%;
    }

    #filterSelector-choices .filterSteps > span:nth-of-type(4) {
        width: 24%;
    }

    #filterSelector-choices .label {
        width: 25%;
        font-size: 14px;
        font-weight: 500;
    }

    #filterSelector-choices .filterSteps {
        width: 75%;
    }

    #filterSelector-chosen p {
        width: 26.4%;
        line-height: 18px;
    }

    #filterSelector-chosen .myVehicle {
        font-size: 14px;
        line-height: 18px;
    }

    #filterSelector-chosen input {
        padding: 8px 15px;
    }

    /*Sidebar*/

    #categoryOpen {
        display: block;
        padding: 15px 20px;
        text-transform: uppercase;
        font-weight: 500;
        background: #fcfcfc;
        border-bottom: 1px solid var(--site-border);
        font-family: 'Roboto', sans-serif;
    }
    #gallery #pageContent #navBar, #pageContent #navBar {
        
        width: 100%;
        padding: 0;
    }

    #categoryOpen span {
        font-size: 18px;
        float: right;
        font-weight: 600;
    }

    #navBar .navFrame {
        display: block;
        padding: 50px 50px 30px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100%;
        width: 100%;
        z-index: 1000;
        overflow-y: auto;
        background: #fff;
        transition: all ease-in-out 0.4s;
        border-top: 4px solid #eb6a2e;
    }

    #navBar .close {
        display: block;
        background: #eb6a2e;
    }

    #myAccount #navBar.active .navFrame,
    #navBar.active .navFrame {
        left: 0;
    }

    #navBar .diagrams {
        flex-direction: row;
    }

    .diagrams span {
        padding: 5px 0 5px 15px;
    }

    #navBar .navTitle a {
        font-size: 26px;
        line-height: 32px;
        font-weight: 300;
    }

    #navBar ul#partsMenu {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--site-border);
    }

    #navBar .shopInfo {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 20px;
        border-top: none;
    }

    #navBar .headedPanel {
        width: 48%;
        margin: 0 0 20px;
        padding: 20px;
        border: 1px solid var(--site-border);
    }

    #partsMenu li {
        width: 50%;
    }

    #partsMenu li a {
        display: block;
        padding: 5px 0;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 400;
        color: currentColor;
        line-height: 25px;
    }

    .Banners {
        margin: 12px 0 0 0;
    }
    .banner-carousel{
        margin:0 0 8px;
    }
    #siteNavigation ul#accountBox {
        right: -71%;
        width: 70%;
    }

    /*Masthead*/
    #topFrame .basket {
        right: -102%;
        width: 100%;
    }

    .bottom-banner {
        padding: 1px;
    }

    /*UI*/
    #mainContent {
        width: 100%;
        border-left: none;
    }

    #bodyText {
        width: 100%;
    }

    .products-list.gridview {
        grid-template-columns: repeat(3, minmax(32%, 33%));
    }
    /*Product Page*/
    .breadcrumbs {
        height: auto;
        padding: 0 0 4px;
        font-size: 0.66rem;
        line-height: 0.86rem;
        letter-spacing: -0.013rem;
    }

    #productDetails {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 15px;
        margin: 0 0 30px;
    }

    .txt-toggle,
    .alternateProductToggle {
    }

    #productDetails .product-wrapper .priceBox .priceregular.grid-8-price-from {
        display: none;
    }
    /*.gridview*/
    .gridview .offertag {
        width: 60px;
        height: 60px;
    }

    .gridview .framedImage {
        height: 220px;
    }

    .gridview .productInfoBox .prod-main-txt .txtbox {
        height: 370px;
    }

    .gridview .fitsbox .fits-vehicles {
        height: 407px;
    }

    .gridview .kitbox .txtbox {
        height: 447px;
    }

    .gridview .productInfoBox .code {
        z-index: -1;
    }

    .gridview .product-extras-frame {
        padding: 0;
    }
    /*Product List*/
    .refineList li a {
        padding: 10px;
    }

    /*Footer*/
    .footerlogo img {
        width: 80%;
    }

    #footCol1 {
        width: 35%;
    }

    #footCol2 {
        width: 65%;
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }

    .block-col .h3 {
        margin: 0 0 30px;
    }

    #footCol2 .socialbox {
        grid-column: span 2;
    }

    #footCol2 > .newsletter {
        width: 100%;
    }

    #footer .social li {
        width: 48%;
    }

    #contactFrame {
        padding: 20px;
    }

    /*Homepage*/
    .banner-carousel, .banner-carousel .bx-wrapper picture img {
	
	aspect-ratio: 5/1.98;
}
    .Banners > div:nth-child(n) {
        width: 100%;
        margin: 0 0 10px;
    }

    .homePageBoxes {
        padding: 10px 15px 0;
    }

    .introPanel {
        margin: 30px 0 50px;
        padding: 0;
    }

    /*My Account*/
    .borderbox {
        padding: 30px;
    }

    #myOrders {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        min-width: 100%;
        margin: 10px 0 0;
    }

    /*Basket*/

    #basket #mainContent {
        width: 100%;
        border: none;
    }

    #basket #pageContent #side {
        width: 100%;
        padding: 0 20px;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        min-width: 100%;
        margin: 0;
    }

    #basket #pageContent #side .headedPanel {
        border: 1px solid var(--site-border);
        padding: 20px;
        margin: 0;
        display: flex;
        /*Must be  for IE11*/
        flex-flow: column;
        /*Must be  for IE11*/
        width: 32%;
    }

    #basketItems li.offer.available,
    #basketItems li.offer.possible {
        padding: 10px;
        font-size: 13px;
    }

    #basketItems li.basket-totals .block1 {
        width: 35%;
    }

    #basketItems li.basket-totals .block2 {
        width: 65%;
    }

    #basketItems li.basket-totals .block1 .button {
        min-width: initial;
        height: auto;
        white-space: normal;
    }

    .offersFrame .offersAd {
        width: 48%;
    }

    .offersFrame .offersAd picture {
        width: 100%;
    }

    #basketItems li.offerBox .discount-code,
    #basketItems li.offerBox .discount-code-applied {
        width: 52%;
    }

    /*Checkout*/
    #orderStatus {
        padding-left: 0;
    }

    #orderStatus .brand {
        width: 100%;
        position: relative;
    }

    #orderStatus .pageDisplay {
        padding: 50px 20px;
        height: auto;
    }

    #accountCreation .accountChoice .buttons,
    #checkout #accountCreation #passwordForm {
        width: 50%;
    }

    #checkout h6.flash,
    #checkout .borderbox {
        padding: 20px;
    }

    #checkout .delivery-options .buttonBox {
        width: 100%;
        margin: 0 0 10px;
    }

    #accountCreation .accountChoice {
        width: 100%;
        padding: 10px 0;
        border: none;
    }

    #deliveryOption_other_container .block1,
    #deliveryOption_other_container .block2,
    #checkout .signUp .block1,
    #checkout .signUp .block2 {
        width: 100%;
        padding: 10px 0;
        border: none;
    }

    #checkout .signUp .block1,
    #checkout .signUp .block2 {
        padding: 0;
    }

    #checkout .signUp .block1 .buttonBox {
        width: 100%;
        margin-top: 15px;
    }

    #checkout .signUp .block2 p {
        margin-top: 0;
    }

    #checkout .sectionFooter {
        margin: 10px 0 0;
    }

    #otherInfo .block1 textarea,
    #otherInfo .block2 select,
    #checkout .sectionFooter input {
        width: 100%;
    }

    #otherInfo .block1,
    #otherInfo .block2,
    #checkout #carInfo .block1,
    #checkout #carInfo .block2,
    #checkout #carInfo .block3 {
        width: 100%;
        padding: 10px 0;
        border: none;
    }

    .accordion-frame.borderbox .accordion,
    .accordion-frame.borderbox .accordion-title,
    #checkout .flexgrid.address-summary {
        padding: 10px;
    }

    /*Diagrams*/
    #diagram #mainContent {
        display: block;
        padding: 50px 20px;
    }

    #diagramWrapper > .imgDiagMapHolder {
        width: 100%;
        height: auto;
        margin: 0 auto;
        max-height: 100%;
        position: relative;
        inset: auto;
    }
    .imgDiagMapHolder .imgHolder {
        border-radius: 4px 4px 0 0;
        margin: 0 0 4px;
    }
    #diagramWrapper > #partsList {
        width: 100%;
        margin-top: 0;
    }

    /* Recent Products on Homepage */
    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper .productInfoBox .product-head {
        font-size: 14px;
    }

    /* Mandatory and Suggested Products */
    .crosssell .needProduct .product-wrapper .productDescriptionContainerTop,
    .crosssell .needProduct .product-wrapper .productDescriptionContainerBottom {
        width: 100%;
    }

    .crosssell .needProduct .product-wrapper .productDescriptionContainerTop {
        border-right: none;
        border-bottom: 1px solid var(--site-border);
    }

    .crosssell .needProduct .product-wrapper .productImageContainer {
        border-bottom: none;
    }

    .crosssell .needProduct .product-wrapper .productOptions > div {
        width: 100%;
    }

    .crosssell .needProduct .product-wrapper .productOptions,
    .crosssell .needProduct .product-wrapper .productOptions.part-options {
        padding: 10px 0 10px 10px;
        border: none;
    }

    .crosssell .needProduct .product-wrapper .productOptions.no-part .panel.badges-addbasket {
        padding: 0 0 10px;
    }

    .crosssell .needProduct .product-wrapper .productInfoBox h4 + .row {
        padding-right: 130px;
    }

    .crosssell .needProduct .product-wrapper .productInfoBox .brand-img {
        left: auto;
        right: 0;
        width: 130px;
        border-left: 1px solid var(--site-border);
    }

    #myOrders li > div > div {
        padding-bottom: 20px;
    }

    
    /*video carousel*/
    .videoFrame .vd-modal-content {
        width: 93%;
        margin: 20% auto;
    }

    .videoFrame .vd-modal iframe {
        width: 704px;
    }

    /*jobs*/
    #BasicPage #bodyText {
        padding: 30px;
        background: #fff;
        border:none;
        border-radius:0;
        min-height:initial;
    }
    .job-listings {        
        grid-template-columns: repeat(1, 1fr);
        
    }

}

@media only screen and (max-width: 767px) {
    /*Masthead*/
    .logoframe {
        inset: auto;
        margin: 0 auto;
        position: relative;
        width: fit-content;
        padding:10px 0;
    }
    #masthead #Logo,
    #masthead.docked #Logo {
        width: 200px;
        position: relative;
        inset:auto;
        height: 50px;
        margin: 0 auto;
    }

    #masthead #topFrame {
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        padding: 0 20px;
        justify-content: center;
        margin: 0;
        height: 50px;
    }
    #siteNavigation ul {
        margin: 0 10px 0 0;
    }
    #topFrame .basket {
        right: -105%;
        width: 100%;
    }

    #masthead.docked #filterSelector {
        min-height: 58px;
    }

    #filterSelector-choices .label {
        font-size: 12px;
        line-height: 16px;
        width: 20%;
    }

    #filterSelector-choices .filterSteps {
        width: 80%;
    }

    #filterSelector-choices .filterSteps > span:nth-of-type(n) {
        width: 33%;
    }

    #filterSelector-choices .filterSteps select {
        padding: 8px 15px 8px 8px;
        font-size: 12px;
    }

    #masthead.docked #filterSelector-chosen input {
        margin: 5px 0;
        height: 40px;
    }

    #filterSelector-chosen p {
        display: none;
    }

    #filterSelector-chosen .myVehicle {
        padding: 0 10px 0 0;
        line-height: 20px;
        width: auto;
    }

    #masthead.docked #filter-selector-change-vehicle {
        margin: 8px 0;
    }

    #siteNavigation ul#accountBox {
        right: -101%;
        width: 100%;
    }

    #pageContent {
        padding: 179px 0 0;
    }

    /*Product List*/
    #productListContainer .products-list.gridview {
        grid-template-columns: repeat(2, minmax(48%, 50%));
        grid-gap: 30px 15px;
    }

    .productOptions .panel.badges-addbasket,
    .productOptions .priceBox {
        font-size: 13px;
        width: 50%;
    }

    .refineList,
    #categories {
        grid-template-columns: repeat(4, minmax(23%, 25%));
    }

    .panel.badges-addbasket .msg {
        text-align: left;
        width: 100%;
        margin: 10px 0 0;
        padding-bottom: 20px;
    }

    #tyreSearch .panel.badges-addbasket .msg {
        text-align: right;
    }

    .productOptions .buttonframe {
        justify-content: flex-start;
        width: 72%;
        margin: 0;
    }

    .gridview .productOptions .buttonframe {
        width: 72%;
    }

    .panel.badges-addbasket input.remove-from-wishlist,
    .panel.badges-addbasket input.add-to-wishlist {
        margin: 0 0 0 10px;
    }

    .productOptions .priceBox .stock {
        text-align: right;
    }

    .productOptions .priceBox .panel.options .stock {
        text-align: left;
    }

    #productDetails .productInfoBox .product-head {
        height: auto;
        padding: 0;
    }

    #productDetails .productInfoBox .prod-main-txt,
    #productDetails .productInfoBox.kit .prod-main-txt,
    #productDetails .productInfoBox.allvehicles .prod-main-txt {
        height: auto;
    }

    #product .h1,
    #productDetails .product-wrapper {
        margin: 0 auto;
        min-width: 300px;
        width: 100%;
    }

    #productDetails .h1 {
        font-size: 1.42rem;
        line-height: 1.62rem;
        font-weight: 400;
        margin-bottom: 30px;
    }

    #productDetails .fitsbox {
        height: auto;
    }

    /*#productDetails .alternateProductResults,
            #productDetails .fitsbox .fits-vehicles,
            #productDetails .productInfoBox .kitbox.active .txtbox,
            #productDetails .productInfoBox .prod-main-txt .txtbox {
                position: relative;
                inset: auto;
                margin: 0;
                max-height: 300px;
                height: auto;
                background: #fff;
            }*/
    #productDetails.gridview .fitsbox .fits-vehicles {
        height: 331px;
    }
    #productDetails.gridview .kitbox .txtbox {
        height: 330px;
    }

    .kitbox.active .toggle span::after,
    .fitsbox.active .view-fits-vehicles span::after {
        top: 12px;
        right: 12px;
    }
    #productDetails .alternateProductResults {
        box-shadow: none;
        height: auto;
    }

    #productDetails .alternateProduct {
        height: auto;
    }

    #productDetails .alternateProductResults,
    #productDetails .fitsbox .fits-vehicles,
    #productDetails .productInfoBox .kitbox.active .txtbox {
        border-top: 1px solid var(--site-border);
    }

    #productDetails .productInfoBox .prod-main-txt .txtbox {
        margin: 0px 0 40px;
        border-bottom: 1px solid var(--site-border);
    }

    #productDetails .product-wrapper .productOptions .priceBox {
        min-height: 90px;
        height: auto;
    }

    #productDetails .product-wrapper .diagramListContainer {
        padding: 20px 15px 15px;
    }
    /*video carousel*/
    .videoFrame .vd-modal-content {
        width: 92.5%;
    }
    .videoFrame .vd-modal iframe {
        width: 504px;
    }

    /*homepage slider*/
    .banner-carousel,
    .banner-carousel .bx-wrapper picture img {
        aspect-ratio: 5/1.96;
    }

    /*gridview*/
    /*.gridview .product-extras-frame {
            display: none;
        }*/
    /*related products*/
    #relatedproducts .products-list.gridview {
        grid-template-columns: repeat(3, minmax(32%, 33%));
    }
    /*recent products*/
    #recentProducts .products-list.gridview.offers.super-compact {
        grid-template-columns: repeat(4, minmax(23%, 25%));
        grid-gap: 10px 6px;
    }

    #recentProducts .products-list.gridview.offers.super-compact .productInfoBox .product-head a {
        height: 50px;
    }
    /*fancybox gallery*/
    .fancybox-content img {
        display: block;
        max-width: calc(100% - 12px);
        margin: 0 auto 0 6px;
    }
    .fancybox-caption {
        display: block;
        border-top: 1px solid #6f7c9d;
        max-height: 25%;
        padding: 20px;
        font-size: 0.76rem;
        overflow: auto;
    }
    /*---*/

    #AboutSection .sectionContent {
        columns: initial;
        column-gap: initial;
    }

    /*Footer*/
    #footCol1 {
        width: 100%;
        padding: 30px 20px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
    }

    #footCol1 > div {
        max-width: 31%;
        min-width: 30%;
    }

    #footCol1 > .creditcards {
        width: 100%;
        margin: 0 0 20px 0;
        max-width: 100%;
        border-bottom: 1px solid var(--site-border);
        padding: 15px;
        height: 60px;
    }

    .footerlogo img {
        max-width: 200px;
    }

    .block-col .h5 {
        margin: 0 0 10px;
    }

    .block-col .h3 + .h5 {
        margin: -20px 0 10px;
    }

    #footCol2 {
        width: 100%;
        padding: 0 20px 30px;
    }

    #lowerFooter .copyframe {
        max-width: calc(100% - 60px);
        gap: 4px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    #footCol2 {
        grid-template-columns: repeat(1, minmax(98%, 100%));
    }

    #footCol2 .socialbox {
        grid-column: span 1;
    }

    /*Homepage*/

    .introPanel {
        margin: 30px 0 50px;
    }

    .homePageBoxes .introPanel {
        margin: 0 0 40px;
        columns: initial;
        gap: initial;
    }

    #HomeFeatured {
        padding: 0 0 20px;
    }

    #whatsHot {
        order: 1;
        width: 49.2%;
        margin-bottom: 10px;
    }

    #discountTyres {
        order: 2;
        width: 49.2%;
        margin-bottom: 10px;
    }

    #manufacturersHighlight {
        order: 3;
        width: 100%;
    }

    .home .gridview .productOptions .panel.badges-addbasket {
        justify-content: flex-start;
        padding: 10px 0;
    }

    .home .panel.badges-addbasket input[type='submit'].button {
        display: block;
        width: auto;
        margin: 0 0 0 5px;
        padding: 8px 14px;
    }

    /*Product List*/
    .products-list.gridview {
        grid-template-columns: repeat(2, minmax(48%, 50%));
        grid-gap: 20px 15px;
        margin: 0 0 30px;
    }

    .productOptions .panel.badges-addbasket,
    .productOptions .priceBox {
        width: 100%;
        padding: 0;
        border: none;
        font-size: 0.86rem;
    }

    .gridview .productOptions .panel.badges-addbasket .product-secondary-badges {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        width: 100%;
        margin: 0 0 20px;
    }
    #productDetails.gridview .productOptions .panel.badges-addbasket .product-secondary-badges {
        grid-template-columns: repeat(8, 1fr);
    }

    .productDescriptionContainerTop .productImageContainer {
        width: 100%;
    }

    .productDescriptionContainerTop .productInfoBox {
        width: 100%;
    }

    .productInfoBox .prod-main-txt {
        border-left: none;
    }

    .productInfoBox .txtbox {
        padding: 20px;
    }

    ul.listGoogleBoostInternalLinks li {
        width: 48%;
    }

    .product-wrapper .productOptions .priceBox {
        width: 100%;
    }

    #ProductList .listview {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        min-width: 100%;
        margin: 0 -1% 0;
    }

    #ProductList .listview .product-wrapper,
    #recentProducts .gridview .product-wrapper,
    #ProductList .gridview .product-wrapper {
        width: 48%;
        align-self: unset;
    }

    .products-list.listview .product-wrapper {
    }

    .products-list.listview .product-wrapper .kitbox {
        border-left: none;
    }

    .products-list.listview .productDescriptionContainerTop:has(.kitbox) .prod-main-txt {
        height: 180px;
    }

    .products-list.listview .product-wrapper .videoPagelink {
    }

    .products-list.listview .product-wrapper .pdfFrame .resourcePagelink,
    .products-list.listview .product-wrapper .videoFrame .video-thumbnail {
        width: 20%;
    }

    .products-list.listview .product-wrapper .videoFrame .video-thumbnail {
        left: 60%;
    }

    .products-list.listview .product-wrapper .pdfFrame .resourcePagelink span,
    .products-list.listview .product-wrapper .videoFrame .video-thumbnail span {
        display: none;
    }

    .products-list.listview .product-wrapper .pdfFrame .resourcePagelink svg,
    .products-list.listview .product-wrapper .videoFrame .video-thumbnail svg {
        margin: 0;
    }

    .products-list.listview .productOptions .panel.badges-addbasket .product-secondary-badges {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .products-list.listview .productInfoBox .kitbox::after {
        inset: 0 20% auto 60%;
        width: auto;
    }

    .products-list.listview .productInfoBox .kitbox .toggle {
        width: 60%;
    }

    .videoFrame .vd-modal,
    .pdfFrame .vd-modal-pdf {
        padding-top: 120px;
    }

    .videoFrame .vd-modal-content {
        margin: 120px auto;
    }

    /*refinelist*/
    #diagram .diagramList,
    #diagram .categoriesSmall .refineList {
        grid-template-columns: repeat(4, minmax(23%, 25%));
    }
    .diagramList li .diagram-title {
        padding: 15px 10px 10px;
        font-size: 0.786rem;
        line-height: 0.796rem;
    }
    .refineList.gallery {
        grid-template-columns: repeat(4, minmax(23%, 25%));
    }
    /*My Account*/
    .borderbox {
        padding: 20px;
    }

    #myAccount #userInfo h2 {
        font-size: 20px;
        line-height: 28px;
    }

    #invoice-history > div > .row > div {
        width: 50%;
    }
    /*Register*/
    #register .borderbox:not(.reset) .error {
        margin: 0 0 8px;
    }

    /*Basket*/
    #basketItems li.basket-totals {
        flex-wrap: wrap;
        margin-top: 10px;
        padding: 10px 0 0;
    }

    #basketItems li.basket-totals .block2 dl {
        margin-bottom: 0;
    }

    #basketItems li.basket-totals .block2,
    #basketItems li.basket-totals .block1 {
        width: 100%;
        padding: 10px 0;
    }

    #basket .loginFrame .registerBox,
    #basket .loginFrame .loginBox {
        width: 100%;
        margin: 0 0 10px;
    }

    #basketItems li.basket-totals .block1 .buttons {
        display: none;
    }

    #checkout .alertBox,
    #basket .alertBox {
        margin: 0;
    }

    #basketItems li.basket-totals .block2 {
        width: 100%;
    }

    #basketItems li.offerBox .discount-code,
    #basketItems li.offerBox .discount-code-applied,
    .offersFrame .offersAd {
        width: 100%;
    }

    .offersFrame .offersAd {
        text-align: right;
        margin-bottom: 10px;
    }

    .offersFrame .offersAd picture {
        display: inline-block;
    }

    .basket .basket_offer span,
    #basketItems li.offer span,
    .basket .basket_offer .txt,
    #basketItems li.offer .txt,
    .basket .basket_offer .label,
    #basketItems li.offer .label {
        width: 100%;
        border: none;
        text-align: left;
        justify-content: flex-start;
        padding: 0;
    }

    .basket .basket_offer,
    #basketItems li.offer.available,
    #basketItems li.offer.possible {
        padding: 10px;
        display: block;
    }

    .basket .basket_offer .figure,
    .basket .basket_offer .txt,
    .basket .basket_offer .label,
    #basketItems li.offer .figure,
    #basketItems li.offer .txt,
    #basketItems li.offer .label {
        width: 100%;
        border: none;
    }

    .basket .basket_offer .label,
    #basketItems li.offer.available .label,
    #basketItems li.offer.possible .label {
        /*border-bottom:1px solid #7D8798;*/
        margin-bottom: 5px;
    }

    .basket .basket_offer .txt,
    #basketItems li.offer.available .txt,
    #basketItems li.offer.possible .txt {
        display: block;
    }

    #basketItems .discount-code h6 {
        padding: 0;
        margin-bottom: 5px;
    }

    .minimum-order-value-not-reached {
        font-size: 14px;
    }

    .minimum-order-value-not-reached .info-flag {
        width: 25px;
        margin-left: 0;
    }

    .minimum-order-value-not-reached .eu-flag {
        width: 50px;
    }

    .minimum-order-value-not-reached .message {
        padding: 0 10px 0 20px;
    }

    .delivery-warnings .delivery-warning {
        width: 100%;
    }

    .basket .summary > div {
        margin-left: 20%;
        width: 80%;
    }

    /*Login*/
    #login .registerBox,
    #login .loginBox {
        width: 100%;
        margin: 0 0 10px;
    }

    /*Checkout*/
    #checkout #masthead .checkoutBox {
        margin-right: 15px;
        display: flex;
        align-items: center;
        width: 150px;
        text-align: left;
    }

    #checkout #masthead .checkoutBox h4 {
        padding-left: 5px;
        line-height: 18px;
    }

    #checkout #masthead .checkoutBox svg {
        width: 50px;
    }

    #checkout .borderbox .buttonBox {
        width: 100%;
        text-align: left;
    }

    .labelFrame,
    #checkout .details {
        display: block;
    }

    .labelFrame label,
    #checkout .details label,
    #checkout .yourDetails label,
    .labelFrame label + select,
    .labelFrame label + input,
    #checkout .details label + select,
    #checkout .details label + input,
    #checkout .yourDetails label + input,
    .address-input .labelFrame .address-name {
        width: 100%;
    }

    .labelFrame label.empty {
        display: none;
    }

    .accordion-frame.borderbox .accordion,
    .accordion-frame.borderbox .accordion-title,
    #checkout .flexgrid.address-summary {
        padding: 0;
    }

    #checkout .paymentOptions {
        margin: 0 0 20px;
    }

    #checkout .paymentOptions .buttonBox {
        width: 100%;
    }

    #checkout .bankOptions .bank {
        width: 100%;
        margin-bottom: 6px;
    }

    #checkout .bankOptions .box {
        width: 100%;
    }

    #accountCreation .accountChoice .buttons {
        display: flex;
        flex-wrap: wrap;
    }

    #accountCreation .accountChoice .buttons,
    #checkout #accountCreation #passwordForm {
        width: 100%;
        padding: 0;
    }

    #myDetails label + input ~ span,
    #checkout label + input ~ span {
        margin-left: 0%;
    }

    /* Mandatory and Suggested Products */
    .crosssell .needProduct .block.mandatory {
        width: 100%;
    }

    .crosssell .needProduct .block.suggested {
        width: 100%;
    }

    .crosssell .needProduct .product-wrapper .productDescriptionContainerTop {
        flex-direction: column;
    }

    .crosssell .needProduct .product-wrapper .productImageContainer {
        width: 100%;
        border-bottom: 1px solid var(--site-border);
    }

    .crosssell .needProduct .product-wrapper .productInfoBox {
        width: 100%;
        padding: 10px 140px 10px 20px;
        min-height: 120px;
        border-left: none;
        position: relative;
    }

    .crosssell .needProduct .product-wrapper .framedImage {
        padding: 20px 0;
        display: flex;
        justify-content: center;
        max-width: 250px;
        margin: 0 auto;
    }
    /* Cars for sale */
    .car-sale-listing .images ul li {
        flex: 0 0 33.3%;
    }

    #filterSelector-choices .label::after {
        display: none;
    }

    /* Recent Products on Homepage */
    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper:nth-of-type(1n + 16) {
        display: none;
    }

    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper {
        width: 32%;
        margin: 5px 0.5%;
    }

    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper .productDescriptionContainerTop .productImageContainer {
        border: none;
    }

    #tyreSearch .productOptions .priceBox .stock {
        text-align: right;
    }

    #checkout .vatBox .block1 {
        width: 100%;
        padding: 0 0 30px 0;
    }

    #checkout .vatBox .block2 {
        width: 100%;
        padding: 0;
        border-left: none;
        border-top: 1px solid var(--site-border);
    }
}

@media only screen and (max-width: 599px) {
    #bodyText {
        padding: 30px 15px;
    }

    /*Masthead*/
    #masthead {
        background-position: 0 112px;
    }

    #masthead > .innerframe {
        min-height: unset;
        z-index: initial;
    }

    #masthead.docked > .innerframe {
        min-height: 60px;
    }

    #masthead #topFrame {
        justify-content: space-between;
        padding: 0 16px;
        gap: 2%;
    }

        #masthead #Logo, #masthead.docked #Logo {
            margin: 0;
            width: 180px;
            height: 50px;
        }
    #LogoIcon {
        height: 34px;
        width: 70px;
    }

    #categoryOpen {
        padding: 10px 16px;
    }
    #siteNavigation ul {
        margin: 0;
        gap: 2.5%;
    }
    #shopSettings {
        width: 150px;
    }
    #siteNavigation ul li:not(.intro) {
        margin: 0;
        width: 36px;
        height: 40px;
    }

    #siteNavigation > ul > li > a {
        width: 35px;
    }

    #siteNavigation #loggedIn {
        line-height: 28px;
        font-size: 12px;
        margin: 5px 0 0 3px;
        width: 28px;
        height: 28px;
    }

    #ship_to {
        padding: 0 4px;
    }

    #current_language {
        padding: 0 4px 0 0;
        border-left: 0;
    }
    #shopSettings.active .trigger-settings::before {
        inset: auto 0 2px;
    }

    #ship_to .choice {
        font-size: 0.54rem;
        line-height: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        margin: 3px 0 1px;
        border-bottom: 1px solid var(--site-border);
        width: 96px;
        padding-bottom: 1px;
    }

    #current_currency {
        margin-left: 0;
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
    }

    #topFrame .basket_icon svg {
        width: 30px;
        height: 40px;
    }

    #masthead.docked #filterSelector {
        min-height: unset;
    }

    #topFrame .languages .languages_box {
        right: 20px;
        left: 20px;
        padding: 20px;
    }

    #filterSelector {
        padding: 0;
        min-height: 50px;
    }

    #filterSelector-choices {
        padding: 0;
    }

    #filterSelector-choices .label {
        width: 100%;
        border: none;
        padding: 10px 15px;
        margin: 0;
        left: 0;
        height: 50px;
        font-size: 14px;
    }

    #filterSelector-choices .label::after {
        display: block;
    }

    #filterSelector-choices .filterSteps {
        width: 100%;
    }

    #filterSelector-chosen .changeCar:after,
    #filterSelector-choices .label::before {
        content: '+';
        display: inline-block;
        padding: 0 15px;
        font-size: 18px;
        font-weight: 500;
        color: inherit;
        position: absolute;
        right: 0;
    }

    #filterSelector-chosen .changeCar:after {
        top: 0;
        line-height: 50px;
    }

    #filterSelector-choices.active .label::before {
        top: 18px;
        transform: rotate(-45deg);
        color: var(--d911-teal);
    }

    #filterSelector-choices:not(.active) .label:after {
        padding: 5px 10px;
        /*background: #eb6a2e;*/
    }

    #filterSelector-choices .filterSteps {
        background: #fff;
        display: block;
        padding: 10px 20px 30px;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 100;
        margin: 0;
        border-top: 1px solid #efefef;
        border-bottom: 1px solid var(--site-border);
        transition: all ease-in-out 0.4s;
        visibility: hidden;
        opacity: 0;
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15);
    }

    #masthead.docked #filterSelector-choices .filterSteps {
        padding: 10px 16px 30px;
    }

    #pageContent {
        padding-top: 173px;
    }

    #myAccount #pageContent {
        padding-top: 110px;
    }

    #checkout #pageContent {
        padding-top: 130px;
    }

    #filterSelector-choices.active .filterSteps {
        left: 0;
        visibility: visible;
        opacity: 1;
    }

    #filterSelector-choices .filterSteps > span:nth-of-type(n) {
        width: 100%;
    }

    #filterSelector-choices .filterSteps > span:nth-of-type(1) {
        display: none;
    }

    #filterSelector-choices .filterSteps > span:nth-of-type(4) {
        padding: 10px 0 0;
    }

    #filterSelector-choices .filterSteps button,
    #filterSelector-choices .filterSteps select {
        width: 100%;
        margin: 0;
        height: auto;
    }

    #mastehead #filterSelector-choices .filterSteps button {
        padding: 15px 20px;
        height: auto;
    }

    #filterSelector-chosen {
        padding: 0;
        height: 50px;
        align-items: center;
    }

    #filterSelector-chosen p {
        display: none;
    }

    #filterSelector-choices.active .label::after {
        display: none;
    }

    #filterSelector-chosen .myVehicle {
        width: 100%;
        padding: 0 30px 0 15px;
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
    }

    #filterSelector-chosen .changeCar {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
    }

    #filterSelector-chosen input:hover,
    #filterSelector-chosen input {
        background-color: transparent;
        border: none;
        padding: 4px 10px;
        color: #23a9be;
        display: block;
        width: 100%;
        font-size: 0;
        height: 100%;
    }
    /*breadcrumbs*/
    .breadcrumbs {
        margin-bottom: 20px;
    }
    /*categories*/
    .refineList,
    #categories {
        /*grid-template-columns: repeat(2,minmax(48%,50%));*/
        grid-template-columns: repeat(3, minmax(31%, 33%));
    }

    /* Product List */
    .products-list.gridview {
        grid-gap: 16px 8px;
    }

    .product-wrapper .productDisplayOuterContainer {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .gridview .productDescriptionContainerBottom {
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    .gridview .product-wrapper .productOptions {
        justify-content: flex-end;
    }
    .gridview .product-wrapper .productOptions .priceBox {
        padding: 0;
        min-height: 90px;
        height:auto;
        border: none;
        margin: 0;
    }

    .gridview .priceBox .priceregular {
        padding: 0 5px 5px;
    }

    .product-wrapper .productOptions .priceBox {
        width: 100%;
        padding: 10px 0;
        min-height: unset;
    }

    .gridview .product-wrapper .productInfoBox .product-head a {
        height: 70px;
    }

    .priceBox .options .priceOption {
        width: 100%;
    }

    .product-wrapper .fitsbox {
        display: none;
    }
    .productOptions .panel.badges-addbasket button {
        white-space: wrap;
        line-height: 0.68rem;
    }
    .productOptions .panel.badges-addbasket .addbasket {
        width: 100%;
    }

    #ProductList .product-wrapper .prod-main-txt,
    #ProductList .product-wrapper .alternateProduct {
        display: none;
    }

    /*Product Display */
    #productDetails .h1 {
        font-size: 1.42rem;
        line-height: 1.62rem;
        font-weight: 400;
    }

    #productDetails .product-wrapper .productInfoBox .prod-main-txt,
    #productDetails .product-wrapper .framedImage .zoom,
    #productDetails .product-wrapper .productDescriptionContainerBottom,
    #productDetails .product-wrapper .fitsbox {
        display: block;
        max-height: initial;
    }
    #productDetails.gridview .productOptions .panel.badges-addbasket .product-secondary-badges {
        grid-template-columns: repeat(5, 1fr);
    }
    #productDetails.gridview .product-wrapper .diagramListContainer .diagramList {
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }
    #relatedproducts .product-wrapper .productInfoBox .prod-main-txt,
    #relatedproducts .product-wrapper .framedImage .zoom,
    #relatedproducts .product-wrapper .productDescriptionContainerBottom,
    #relatedproducts .product-wrapper .fitsbox {
        display: none;
    }

    #ProductList .products-list .productInfoBox .product-head {
        font-size: 0.76rem;
        line-height: 0.96rem;
        padding: 10px 10px 0;
    }

    #ProductList .products-list .framedImage {
        padding: 50px 10px 30px;
    }

    #ProductList .products-list .framedImage img {
        display: block;
        margin: 0 auto;
        height: 110px;
        object-fit: contain;
        object-position: center;
        overflow: hidden;
    }

    #ProductList .products-list .framedImage .zoom {
        bottom: 5px;
        padding: 0;
        right: 10px;
    }
    /*video carousel*/
    .videoFrame .vd-modal-content {
        width: 92%;
    }

    .videoFrame .vd-modal iframe {
        width: 290px;
    }


    /*related products*/
    #relatedproducts .products-list.gridview {
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }
    /*recent products super-compact*/
    #recentProducts .products-list.gridview.offers.super-compact {
        grid-template-columns: repeat(2, minmax(49%, 50%));
        grid-gap: 10px;
    }

   /* #ProductList .products-list .productOptions .panel.options,*/
    #ProductList .products-list .productOptions .panel.badges-addbasket .product-secondary-badges,
    #ProductList .products-list .productOptions .panel.badges-addbasket .other-info,
    #ProductList .products-list .productOptions .surcharge,
    #ProductList .products-list .productOptions .previous-price,
    #ProductList .products-list .productInfoBox .kitbox {
        display: none;
    }

    .gridview .product-wrapper .productOptions .priceBoxFrame .variant-grid .panel.options{
        padding:0 0 10px;
    }
    .gridview .priceOption .title {
        margin: 0 0 2px;
        width: 100%;
        line-height: 0.86rem;
    }

    /*.gridview .priceOption label {        
        padding:5px 20px 5px 5px;
    }
    .gridview .productOptions label strong {
        padding: 0;
        width: 100%;
    }*/
    .gridview .priceOption input {
        top: 2px;
        
    }
    /*refine list*/
    .brandFilters .refineList .bulletLink_1 img {
        max-width: 100%;
    }
    /*diagrams*/
    #diagram #mainContent {
        padding: 10px 20px 30px;
    }
    /*galleries*/
    .refineList.gallery {
        grid-template-columns: repeat(2, minmax(48%, 50%));
        margin-top: 20px;
    }
    /*fancybox*/
    /*.fancybox-slide--image .fancybox-content{
            border:1px solid #fc0;
            padding:10px;
        }*/

    .pageno {
        margin-left: 0;
        justify-content: center;
        display: flex;
        gap: 3px;
        flex-wrap: wrap;
    }
        .pageno a{
            display:block;
            margin:0;
        }
        /* Mandatory and Suggested Products */
        .crosssell .needProduct .product-wrapper .productImageContainer {
            border: none;
        }

    .crosssell .needProduct .product-wrapper .productInfoBox {
        width: 100%;
        padding: 80px 20px 10px;
    }

    .crosssell .needProduct .product-wrapper .productInfoBox .brand-img {
        left: 0;
        right: 0;
        width: 100%;
        border: none;
        /*border-top: 1px solid var(--site-border);*/
        border-bottom: 1px solid var(--site-border);
        height: 60px;
        bottom: auto;
    }

    .crosssell .needProduct .product-wrapper .productOptions.part-options .priceBox {
        max-width: 100%;
        width: 100%;
    }

    .crosssell .needProduct .product-wrapper .productOptions,
    .crosssell .needProduct .product-wrapper .productOptions.part-options {
        padding: 10px;
    }

    .crosssell .header-box {
        display: block;
    }








    .header-box h3 {
        margin-bottom: 0;
        display: block;
        text-align: center;
    }

    .basket-footer-badges .basket-footer-badge {
        display:flex;
        align-items:center;
        gap:10px;
        line-height: 0.78rem;
    }

    #tyreSearch .tyreImageContainer {
        display: none;
    }

    .basket .cta .button {
        margin-top: 10px;
    }

    .basket .summary > div {
        margin-left: 0;
        width: 100%;
    }

    .basket h3 {
        font-size: 1.03rem;
        font-weight: 400;
    }

    .basket .sticky-header {
        padding: 1px 0;
    }

    .basket .basket-footer-badges {
        justify-content: center;
    }

    .basket .basket-footer-badges .basket-footer-badge {
        max-width: 20%;
    }

    #empty-basket-popout-basket {
        margin: 0 auto 20px;
        display: block;
    }
    /*my account*/
    #myOrders li > div > div {
        padding: 0 10px 10px;
        width: 100%;
    }

    .videoFrame .vd-modal-content {
        margin: 50% auto;
    }

    /*footer*/
    #footCol1 > div {
        max-width: 100%;
        min-width: 100%;
    }

    .socialbox ul.social {
        flex-wrap: wrap;
        gap: 20px 10px;
    }

    .socialbox ul.social l {
        width: 48%;
    }

    /*also found on these pages*/
    #productListContainer .diagramListContainer .diagramList {
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }

    /*homepage slider*/
    .banner-carousel {
        margin: 10px 0 6px;
    }
        .banner-carousel,
        .banner-carousel .bx-wrapper picture img {
            height: auto;
            aspect-ratio: 1/0.744;
        }





}

/*iphone6 + regular android*/
@media only screen and (max-width: 479px) {
    /*Typeography*/
    h1 {
        font-size: 26px;
        line-height: 34px;
    }

    /*Sidebar*/
    #navBar .navFrame {
        padding: 50px 20px 30px;
    }

    #navBar .headedPanel {
        width: 100%;
    }

    #navBar .navTitle a {
        font-size: 24px;
        line-height: 30px;
    }

    #categoryOpen span {
        font-weight: 500;
    }

    #partsMenu li {
        width: 100%;
    }

    /*Product List*/

    .breadcrumbs + h2 {
        padding-right: 0;
    }

    ul.layout {
        display: none;
    }

    /* #categories li {
    text-align: center;
    padding: 15px;
  }

  #categories li a {
    padding: 10px 0;
    font-size: 13px;
    flex-wrap: wrap;
  }

  #categories li a span {
    display: block;
    width: 100%;
  }

  #categories li a img {
    display: block;
    margin: 0 auto 15px;
  }*/

    .paging.top {
        justify-content: flex-end;
    }

    .paging.bottom {
        margin-bottom: 40px;
    }

    .paging .pageno,
    .paging .page-display {
        max-width: 100%;
        width: 100%;
        text-align: right;
        padding-bottom: 10px;
    }

    /* Mandatory and Suggested Products */
    .crosssell .needProduct .block {
        padding: 0 15px 0;
    }

    .crosssell .needProduct .block .products-list.gridview.offers .productInfoBox .product-head {
        padding: 10px 15px;
    }

    /*.panel.badges-addbasket input[type="submit"].button*/
    .productOptions .buttonframe {
        width: calc(100% - 70px);
        margin: 0;
    }

    .button.proceed-to-checkout {
        width: 55%;
    }

    /*Footer*/

    #footCol1,
    #footCol2 {
        width: 100%;
        border: none;
    }

    #footer #footCol2 > div.creditcards,
    #footer #footCol1 > div.tp {
        width: 100%;
    }

    .contactbox > div {
        width: 100%;
    }

    .contactbox .txt {
        padding: 20px 0 10px;
        border-bottom: 1px solid #ccc;
    }

    /*Login*/
    #login .registerBox input,
    #login .loginBox .logbox,
    #login .loginBox input,
    #login .loginBox .reset,
    #login .loginBox label {
        width: 100%;
    }

    #login .loginBox label {
        padding-bottom: 5px;
    }

    /*Homepage*/
    .introPanel {
        padding: 0;
    }

    #HomeFeatured > div > h2 {
        min-height: 30px;
        border-bottom: 1px solid var(--site-border);
        font-size: 18px;
        line-height: 22px;
        font-weight: 500;
        margin: 10px 0;
    }

    #HomeFeatured > div h3,
    #HomeFeatured > div .h3 {
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
    }

    #manufacturersHighlight .boxes > div {
        padding: 10px 0;
    }

    #productHighlight > .desc,
    #productHighlight > .product {
        width: 100%;
    }

    /*Product List*/
    .shopInfo .headedPanel {
        width: 100%;
        margin: 0 0 20px;
    }

    .listview .productInfoBox .product-head,
    .gridview .productInfoBox .product-head {
        min-height: initial;
        height: auto;
        padding: 10px;
        font-size: 16px;
        line-height: 20px;
    }

    .productInfoBox .prod-main-txt {
        max-height: 220px;
        height: auto;
    }

    .introPanel {
        margin: 0 0 50px;
    }

    .popularModels .refineList,
    .carType .refineList {
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }

    ul.listGoogleBoostInternalLinks li {
        width: 100%;
    }

    /*My Account*/
    #myDetails p input.button,
    #myDetails .searchPostcode button,
    #myDetails .details input,
    #myDetails .details label {
        width: 100%;
    }

    #myDetails .details label {
        line-height: 16px;
        color: #363c4b;
    }

    #myDetails .buttonBox {
        margin: 0 0 10px 0;
        width: 100%;
    }

    .buttonBox input[type='checkbox']:checked + label {
        width: 100%;
    }

    #navigationTabs ul {
        justify-content: center;
    }

    #navigationTabs ul li a {
        padding: 10px;
        font-size: 12px;
        font-weight: 600;
    }

    /*Side Basket*/

    #topFrame .basket {
        padding: 0 20px 40px 0;
    }

    #topFrame .popout-basket-container {
        padding-left: 20px;
    }

    #topFrame .basket_icon {
        margin-left: 0;
    }

    #topFrame .basket span.info {
        display: block;
        margin: 0 0 10px;
        max-width: 100%;
    }

    #topFrame .basket .cta input {
        width: 100%;
        margin: 0 0 10px;
    }

    /*Basket*/

    #basketItems li.header {
        display: none;
    }

    #basketItems li.basket-product {
        flex-wrap: wrap;
        width: 100%;
    }

    #basketItems li.basket-product > .product {
        width: 100%;
        border-bottom: 1px solid var(--site-border);
        padding: 0;
    }

    .basket_item .product_image,
    #basketItems .product .product-image {
        width: 40%;
        padding: 5px;
    }

    #basketItems .product-info {
        padding: 10px;
    }

    .basket_item .product_info {
        width: 60%;
        padding: 0 0 0 15px;
    }

    .basket .basket_item {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .basket_item .product_price,
    #basketItems .product-info a {
        display: block;
        width: 100%;
    }

    #basketItems li.basket-product > .quantity {
        width: 40%;
        padding: 10px;
        text-align: center;
    }

    #basketItems li.basket-product > .figure {
        width: 60%;
        padding: 15px 15px 30px 0;
    }

    #basketItems li.basket-totals {
        flex-wrap: wrap;
    }

    #basketItems li.basket-totals .block2,
    #basketItems li.basket-totals .block1 {
        width: 100%;
        padding: 10px 0;
    }

    #basket .discount-code input[type='text'] {
        max-width: 240px;
    }

    #basket #pageContent #side {
        display: block;
    }

    #basket #pageContent #side .headedPanel {
        margin-bottom: 20px;
        width: 100%;
    }

    #basketItems li.offerBox .discount-code {
        display: block;
    }

    #basket .discount-code input[type='text'] {
        margin: 0;
    }

    #basketItems li.offerBox .discount-code-applied h6 {
        width: 100%;
    }

    #checkout .alertBox,
    #basket .alertBox {
        padding: 0;
        margin: 0;
    }

    #basket .loginFrame > div {
        padding: 20px;
    }

    #basket .loginFrame > div h3 {
        margin-top: 0;
        font-weight: 400;
    }

    #basket .loginFrame .registerBox,
    #basket .loginFrame .loginBox {
        display: block;
        /*border:1px solid #08A972;*/
    }

    #basket .loginFrame .registerBox input,
    #basket .loginFrame .loginBox .box .button,
    #basket .loginFrame .loginBox .box label {
        display: block;
        width: 100%;
    }

    #basket .loginFrame .loginBox .borderline {
        display: inline-block;
        margin: 15px 0 5px;
    }

    #basketItems .block2 .offers {
        margin-top: 20px;
    }

    #lowerContent .basket-offers .product-wrapper {
        width: 100%;
        max-width: 100%;
    }

    /*Checkout*/
    #checkout .shop-settings {
        left: auto;
        transform: none;
        right: 0;
    }

    #checkout #masthead .checkoutBox {
        margin-right: 0;
        width: 120px;
    }

    #checkout #masthead .checkoutBox h4 {
        padding-left: 5px;
        line-height: 15px;
        font-size: 14px;
        font-weight: 500;
    }

    .buttonBox input[type='radio'] + label,
    .buttonBox input[type='checkbox'] + label,
    .buttonBox input[type='radio'] + span.error + label,
    .buttonBox input[type='checkbox'] + span.error + label {
        padding-right: 10px;
    }

    #checkout .searchPostcode button,
    #checkout .searchPostcode input[type='text'] {
        width: 100%;
    }

    #checkout h6.flash,
    #checkout .borderbox {
        padding: 15px;
    }

    .accordion-frame.borderbox .accordion,
    .accordion-frame.borderbox .accordion-title,
    #checkout .flexgrid.address-summary {
        padding: 0;
    }

    #checkout .flexgrid.address-summary .txtbox {
        width: 100%;
    }

    #checkout .checkoutLinks .button.line {
        width: 100%;
        margin: 0 0 5px;
    }

    .accordion-frame.borderbox .accordion-title > .txt {
        display: block;
    }

    #checkout p.placeOrder .button {
        margin: 0;
        width: 100%;
    }

    #checkout #progress li.selected {
        display: flex;
        margin: 0;
        align-items: center;
    }

    #checkout #progress li.selected .step {
        min-width: 40px;
    }

    /*Diagrams*/
    #diagramLists {
        padding: 30px 0;
    }
    #diagram .diagramSearch h4 {
        padding-right: 0;
        width: 100%;
        margin: 0 0 15px;
    }

    #diagram .diagramSearch input {
        max-width: 70%;
    }

    #diagram #categoryTitle {
        border-bottom: 1px solid var(--site-border);
        padding: 0 5px 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        min-height: 30px;
        margin: 0;
    }
    #diagramCategoriesLists:has(.refineList.active) #categoryTitle::after {
        transform: rotate(-45deg);
        color: var(--d911-teal);
    }
    #diagram #categoryTitle::after {
        content: '+';
        font-size: 20px;
    }

    #diagram #categoryTitle.active {
        color: #23a9be;
    }

    #diagram #categoryTitle.active:after {
        transform: rotate(45deg);
    }

    .refineList.diagramCategories {
        display: none;
        margin-top: 30px;
    }

    .refineList.diagramCategories {
        /*grid-template-columns: repeat(2,minmax(48%,50%));*/
        grid-template-columns: repeat(3, minmax(31%, 33%));
    }
    .refineList.diagramCategories.active {
        display: grid;
    }

    #categoryList.hidebydefault {
        display: none !important;
    }

    #diagram .categoriesSmall .refineList {
        grid-template-columns: repeat(3, minmax(31%, 33%));
    }

    #diagram .diagramList {
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }

    /*also found on these pages*/
    #productListContainer .diagramListContainer .diagramList {
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }

    .diagramList li,
    #diagram .categoriesSmall .refineList li {
    }

    #diagramsTitle + p .button {
        display: block;
        text-align: center;
    }

    #partsList table tbody,
    #partsList table {
        display: block;
        width: 100%;
    }

    #partsList table .parts-table-header {
        display: none;
    }

    #partsList table tr {
        display: block;
        width: 100%;
        border: 1px solid var(--site-border);
        margin: 2px 0;
    }

    #partsList table td {
        display: flex;
        align-items: center;
        width: 100%;
        text-align: left;
        min-height: 15px;
        padding: 5px 10px;
    }

    #parts-table td .btnAddToBasket,
    #parts-table td .moreProduct {
        margin: 0;
    }

    #partsList table td:before {
        content: '';
        width: 50%;
        float: left;
        padding: 0 10px;
        text-align: left;
        text-transform: uppercase;
        font-weight: 600;
    }

    #partsList table td:nth-child(1):before {
        content: 'No';
    }

    #partsList table td:nth-child(2):before {
        content: 'part no';
    }

    #partsList table td:nth-child(3):before {
        content: 'desc';
    }

    #partsList table td:nth-child(4):before {
        content: 'note';
    }

    #partsList table td:nth-child(5):before {
        content: 'model';
    }

    #partsList table td:nth-child(6):before {
        content: 'price';
    }

    #partsList table td:nth-child(7):before {
        content: 'qty';
    }

    #partsList table td:nth-child(8):before {
        content: 'info';
    }

    #partsList table td:nth-child(9):before {
        content: 'add to cart';
    }

    /*Cars for sale*/
    #CarsList .buttons {
        display: flex;
    }

    #CarsList .buttons a {
        margin: 0 0.5px;
    }

    .car-sale-listing {
        padding: 10px 10px 20px;
    }

    .car-sale-listing .images ul li {
        flex: 0 0 50%;
    }

    /* Recent Products on Homepage */
    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper:nth-of-type(1n + 11) {
        display: none;
    }

    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper {
        width: 49%;
    }

    #parts-table td .diagram-part-button-wrapper .basket-added-icon {
        right: 10px;
        top: 8px;
    }
}

/*Iphone 4&5*/
@media only screen and (max-width: 359px) {
}

/* Size and Orientation */
@media only screen and (max-width: 479px) and (orientation: portrait) {
}

/* Landscape Orientation */
@media screen and (orientation: landscape) {
    .crosssell .scroll {
        max-height: 60vh;
    }
}

/* Portrait Orientation */
@media screen and (orientation: portrait) {
}

/*--------------------------------------------------------------------- End Responsive Queries*/