.vehicle-header-top {grid-area:vht;}
.suitable-for {grid-area:sf;}
.vehicle-details {
    display:flex;
	align-items:center;
}

.kit-vehicle-heading {
	width: 100%;
	height: auto;
	display: grid;
	grid-column-gap: 5px;
	grid-row-gap: 5px;
	grid-template-columns: max-content auto;
	grid-template-areas:
		'viht vitt'
	;
	padding: 5px 0;
}
.vehicle-info.heading.type { grid-area: viht;}
.vehicle-info.text.type {grid-area: vitt;}

.vehicle-information {
    margin-top:50px;
}

.vehicle-information,
.kit-details {
    display:grid;
	grid-column-gap: 2vw;
	margin-left: 0;
}

.kit-description {
    margin:40px 0;
    text-align:center;
    font-size:20px;
}
span.text-bold {
	font-weight: 500;
}
.vehicle-information {
    grid-template-columns: calc(40% - 1vw) calc(60% - 1vw);
}
.kit-details {
    grid-template-columns: calc(60% - 1vw) calc(40% - 1vw);
    grid-template-areas:
    'KOC KSL'
    'DIS DIS'
    ;
}
@media screen and (max-width: 959px) {
.kit-details {
    grid-template-columns: 100%;
    grid-row-gap:30px;
    grid-template-areas:
    'KOC'
    'KSL'
    'DIS'
    ;
}
}
.kit-contains-container {grid-area:KSL;
    display:grid;
    grid-template-areas:
    'kit-contains'
    'kit-price'
    'kit-purchase'
    ;
}
.kit-options-container {grid-area:KOC;}
.kit-disclaimer-container {grid-area:DIS;
    margin-top: 40px;
	padding: 20px;
	background-color: #ffeaea;
	border: 1pt solid #ff0000;
}

.kit-contains {grid-area:kit-contains;}
.kit-purchase {grid-area:kit-purchase;}
.kit-purchase > div {
    display:grid;
    grid-template-columns:max-content 60px auto;
    grid-column-gap:15px;
    align-items:center;
    width:100%;
}
.kit-purchase {
    background-color:#efefef;
    padding:15px;
    height:max-content;
    display:flex;
    align-items:center;
}
#rrpDiv { grid-area:kit-price;
    border-top:2pt solid #efefef;
    margin:15px 0;
    padding-top:15px;
}

#rrpDiv .p-div {
    display:flex;
    align-items:flex-end;
    justify-content: flex-end;
    gap:.5rem;
}

#rrpDiv .price-tag {
    margin:0;
    color:green;
}

#rrpDiv .greenwarning, #rrpDiv .redwarning {
    margin:3px 0;
    font-size:.95rem;
    text-align: right;
    color:#f44336;
}
  #rrpDiv .price-tag.price-oos {
    text-decoration-line: line-through;
    text-decoration-color: #f44336;
    text-decoration-thickness: 2px;
    color:#777;
  }
#discountAmount {
    color:#f44336;
}
.kit-contains .form-group {
    display:block;
}

.kit-contains .form-group.optional {
    opacity:.98;
}

.kit-contains .kit-item {
    display:inline-block;
    margin-right:3px;
    vertical-align:bottom;
}

.kit-contains .kit-item.type h3 {
    display:inline;
    font-size:1rem;
    font-weight:600;
    margin:0;
    }
    
.kit-contains .kit-item.sku {
    color:#1134a6;
}
.kit-contains .stock-warning {
    color:#f44336;
    font-weight:600;
    margin-left:3px; }
    
.kit-contains .is-oos .kit-item.type h3 {
    color:#f44336;
    }
    
.kit-contains-heading {
	padding: 10px 0px 10px 30px !important;
	font-size: 24px;
	border: 1pt solid #000;
	margin: 0 0 15px 0;
	font-family: 'Barlow Semi Condensed';
	font-weight: 400;
	color: #333;
	text-transform: none;
}

.vehicle-type, .available-options, .kit-select {
    display:grid;
    grid-template-columns: calc(35% - 10px) calc(65% - 10px);
	grid-column-gap: 20px;
}
.vehicle-type label,
.available-options label,
.kit-select label,
.kit-select__header {
    font-size:19px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    font-weight:600;
    text-transform:uppercase;
    text-align: right;
}

.kit-select,
.vehicle-type,
.available-options {
    padding:10px;
}
@media screen and (max-width:959px) {
    .kit-select {
    	grid-template-columns: 100%;
    	padding:20px;
    }
    .kit-select__header {
        justify-content:center;
        margin-bottom: 10px;
    }
}

.vehicle-type {
    background: #333;
}
.kit-select-lists .kit-select:nth-child(odd) {
    background: #efefef;
}

.kit-select-lists {
    border: 2pt solid #D3D3D3;
}

.available-options {
    background-color:#D3D3D3;
}

.vehicle-type-label {
    color:#fff;
}

/* Modal */
.kit-modal {
    position:fixed;
    inset:0;
    display:none;
    z-index:10000;
}
    
.kit-modal[aria-hidden="false"] {
    display:block;
}
    
.kit-modal__backdrop {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.5);
}
    
.kit-modal__dialog { position:relative;
    width:min(560px, 92vw);
    margin:10vh auto 0;
    background:#fff; border-radius:8px;
    padding:1rem 1.25rem;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.kit-modal__actions {
    margin-top:1rem;
    display:flex;
    justify-content:flex-end;
    gap:.5rem;
}
    
.kit-modal__btn {
    padding:.5rem .85rem;
    border:1px solid #ddd;
    border-radius:6px;
    background:#f5f5f5;
    cursor:pointer;
}
.price-tag {
	margin: 0;
	font-size: 26px !important;
	font-weight: bold !important;
}
#rrpDiv label {
    font-size:20px;
}
/* Base select */
.vehicle-type select,
.available-options select,
.kit-select__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* your chevron */
  background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23777%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23777%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);
  background-repeat: no-repeat;
  background-position: right 12px center;  /* move as you like */
  background-size: 24px 16px;
  padding-right: 2.5rem;                  /* room for the icon */
}

/* Old IE/Edge arrow */
.vehicle-type select,
.available-options select,
.kit-select__select::-ms-expand { display: none; }

/* If you still have any UIkit background lingering, force it off */
/* (only needed if the element still also has .uk-select styles) */
.vehicle-type select,
.available-options select,
.kit-select__select.uk-select {
  background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23777%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23777%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A) !important;
}

/* Optional: swap to a red chevron in your invalid state */
.vehicle-type select,
.available-options select,
.kit-select__control--invalid .kit-select__select {
  border-color: #dc2626;
  background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23dc2626%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23dc2626%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);
}
.vehicle-type select,
.available-options select,
.kit-select select {
    -webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 20px;
	background-repeat: no-repeat;
	background-position: 100% 50%;
	height: 44px;
	vertical-align: middle;
	display: inline-block;
	max-width: 100%;
	width: 100%;
	border: 1pt solid #999;
	padding: 0 10px;
	color: #777;
	transition: .2s ease-in-out;
	transition-property: color, background-color, border-color, box-shadow;
	font-family:'Barlow Semi Condensed';
}
@media screen and (max-width:959px) {
    .kit-select__select {
        text-align:center;
    }
}
.kit-select--invalid {
    border:1pt solid red!important;
}
/* Overlay container */
#kit-blocker {
  position: fixed;
  inset: 0;
  display: none;               /* shown via JS as 'flex' */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45); /* backdrop */
  z-index: 1000000;
}
/* Dialog card */
#kit-blocker .kit-blocker__dialog {
  background: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  width: min(480px, 92%);
  box-shadow: 0 15px 35px rgba(0,0,0,.25);
  text-align: left;
}
/* Red border after attempted add */
.form-group.kit-select.kit-select--error .kit-select__select {
  border: 2px solid #d9534f !important;
  box-shadow: 0 0 0 3px rgba(217,83,79,.15);
}
/* Modal styles — high z-index to beat page builders & YOOtheme overlays */
#kit-block-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1000000; }
#kit-block-modal.show { /* display is forced inline in JS; class kept for theming if needed */ }
#kit-block-modal .kbm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
#kit-block-modal .kbm-dialog { position: relative; background: #fff; border-radius: 10px; padding: 16px 18px; width: min(480px, 92%); box-shadow: 0 15px 35px rgba(0,0,0,.25); z-index: 1; }
#kit-block-modal .kbm-title { font-weight: 700; font-size: 1.1rem; margin-bottom: .25rem; color: #b10000; }
#kit-block-modal .kbm-body  { font-size: .98rem; margin-bottom: .75rem; }
#kit-block-modal .kbm-actions { display: flex; justify-content: flex-end; }
#kit-block-modal .kbm-close { padding: .5rem .9rem; border: none; border-radius: 6px; background: #0073e6; color: #fff; font-weight: 600; cursor: pointer; }
#kit-block-modal .kbm-close:focus { outline: 2px solid #99c7ff; outline-offset: 2px; }

/* Red border only after an attempted add */
.form-group.kit-select.kit-select--error .kit-select__select {
  border: 2px solid #d9534f !important;
  box-shadow: 0 0 0 3px rgba(217,83,79,.15);
}