/*
	Theme Name: AdTorque Edge
	Theme URI: https://www.adtorqueedge.com/
	Description: AdTorque Edge Theme
	Version: 1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap');

/* NORMALIZE.CSS v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea,.form-control.empty + label{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],fieldset{padding:.35em .75em .625em}textarea{overflow:auto}[type=form con],[type=radio]{box-sizing:border-box;padding:0}[type=number]details{display:block}summary{display:list-item}

/* SVG */
[class*=" icon-"],[class^=icon-]{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}

/* SLIDER STYLES */
.embla{position:relative}.embla__viewport{overflow:hidden;width:100%}.embla__viewport.is-draggable{cursor:move;cursor:grab}.embla__viewport.is-dragging{cursor:grabbing}.embla__container{display:flex;user-select:none;}.embla__container.flex{flex-wrap:nowrap;}.embla__slide{position:relative;width:100%;flex-shrink:0}.embla__slide__img,.embla__slide__video{display:block;width:100%;height:auto}.full-height .embla__slide__inner{position:relative;overflow:hidden;height:100vh}.embla__slide__video,.full-height .embla__slide__img{width:100%;height:100%;object-fit:cover;object-position:center}.embla__button{outline:0;cursor:pointer;background-color:transparent;touch-action:manipulation;position:absolute;z-index:1;top:50%;transform:translateY(-50%);border:0;width:30px;height:30px;justify-content:center;align-items:center;fill:#1bcacd;padding:0}.embla__button:disabled{cursor:default;opacity:.3}.embla__button__svg{width:100%;height:100%}.embla__button--prev{left:50px}.embla__button--next{right:50px}.embla__dots{display:flex;list-style:none;justify-content:center}.embla__dot{cursor:pointer;position:relative;display:flex;align-items:center;}.embla__dot:last-child{margin-right:0}@media(max-width: 500px) {.embla__slide__inner {width:100%;height:100%;}.embla__slide__video {max-height: none !important;}}@media(max-width: 1024px) {.embla__button--prev{left:30px}.embla__button--next{right:30px}}
.disable-click .embla__slide { pointer-events: none; }
.align-slider{overflow: hidden;}.align-slider .embla__viewport{overflow: visible;}
.align-slider .embla{max-width:100%;margin:auto;--slide-height:auto;--slide-spacing:1rem;--slide-size:70%}.align-slider .embla__container{backface-visibility:hidden;display:flex;touch-action:pan-y pinch-zoom;margin-left:calc(var(--slide-spacing) * -1)}.align-slider .embla__slide{flex:0 0 var(--slide-size);min-width:0;padding-left:var(--slide-spacing)}.align-slider .embla__slide__number{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);border-radius:1.8rem;font-size:4rem;font-weight:600;display:flex;align-items:center;justify-content:center;height:var(--slide-height)}.align-slider .embla__buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;align-items:center}.align-slider .embla__button{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value),0.5);-webkit-appearance:none;appearance:none;background-color:transparent;touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:3.6rem;height:3.6rem;z-index:1;border-radius:50%;color:var(--text-body);display:flex;align-items:center;justify-content:center}.align-slider .embla__button:disabled{color:var(--detail-high-contrast)}.align-slider .embla__button__svg{width:100%;height:100%}.align-slider .embla__slide img {display: block; width: 100%;}
.embla-thumbs .embla__slide {
	width: 33.3333%;
	min-width: 33.3333%;
}


/* Hiding/Appearing Styles */
@media (max-width:767px){.hide-mobile{display:none!important}}@media (min-width:768px){.hide-above-mobile{display:none!important}}@media (max-width:1024px){.hide-below-desktop{display:none!important}}@media (min-width:1025px){.hide-desktop{display:none!important}}@media (max-width:1200px){.hide-below-large{display:none!important}}@media (min-width:1025px){.hide-large{display:none!important}}

/* FLEX */
.flex{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-left:-20px}.flex.no-gaps{margin-left:0}.fv-center{align-items:center}.fh-center{justify-content:center}.flex>*{width:100%;float:left;position:relative;padding:0 0 0 20px}.flex.pb-vert>*{padding-bottom:20px}.flex.no-gaps>*{padding:0}.flex.site-container>*{padding:0}.flex>.m-col-6{width:50%}.flex>.m-col-4{width:33.333%}.flex>.m-col-3{width:25%}.m-two-cols>*{width:50%}.m-three-cols>*{width:33.333%}.m-full{width:100%}.flex-grow{flex-grow:1}.equal-height>*{display:flex;flex-direction:column}.equal-height>*>*{display:flex;flex-direction:column;flex-grow:1}.equal-height img{min-height:1px;align-self:flex-start}.flex-reverse{flex-direction:row-reverse}.equal-height>*>*>:last-child{margin-top:auto}.flex-right{justify-content:flex-end;}
.m-flex-basic{display:flex;justify-content:space-between;width:100%}
@media (min-width:500px){.flex-basic{display:flex;justify-content:space-between;width:100%}.t-two-cols>*{width:50%}.t-three-cols>*{width:33.333%}.t-four-cols>*{width:25%}a.video-popup{max-width:500px;height:218px;margin:20px auto;padding:170px 20px 0 20px}}
@media (max-width:767px){.flex.t-pb-vert>*{padding-bottom:20px}}
@media (min-width:768px){.l-two-cols>*{width:50%}.l-three-cols>*{width:33.333%}.l-four-cols>*{width:25%}.flex>.l-col-10{width:83.333%}.flex>.l-col-9{width:75%}.flex>.l-col-8{width:66.66667%}.flex>.l-col-7{width:58.333%}.flex>.l-col-6{width:50%}.flex>.l-col-5{width:41.66667%}.flex>.l-col-4{width:33.333%}.flex>.l-col-3{width:25%}.flex>.l-col-2{width:16.66667%}}
@media (max-width:1024px){.flex.l-pb-vert>*{padding-bottom:20px}}
@media (min-width:1025px){.flex{margin-left:-30px}.flex>*{padding:0 0 0 30px}.flex.pb-vert>*{padding-bottom:30px}.d-two-cols>*{width:50%}.d-three-cols>*{width:33.333%}.d-four-cols>*{width:25%}.d-five-cols>*{width:20%}.d-six-cols>*{width:16.66667%}.flex>.d-col-10{width:83.333%}.flex>.d-col-9{width:75%}.flex>.d-col-8{width:66.66667%}.flex>.d-col-7{width:58.333%}.flex>.d-col-6{width:50%}.flex>.d-col-5{width:41.66667%}.flex>.d-col-4{width:33.333%}.flex>.d-col-3{width:25%}.flex>.d-col-2{width:16.66667%}}
@media (min-width:1200px){.xl-two-cols>*{width:50%}.xl-three-cols>*{width:33.333%}.xl-four-cols>*{width:25%}.xl-five-cols>*{width:20%}.xl-six-cols>*{width:16.66667%}.flex>.xl-col-10{width:83.333%}.flex>.xl-col-9{width:75%}.flex>.xl-col-8{width:66.66667%}.flex>.xl-col-7{width:58.333%}.flex>.xl-col-6{width:50%}.flex>.xl-col-5{width:41.66667%}.flex>.xl-col-4{width:33.333%}.flex>.xl-col-3{width:25%}.flex>.xl-col-2{width:16.66667%}}
@media (min-width:1440px){.xxl-two-cols>*{width:50%}.xxl-three-cols>*{width:33.333%}.xxl-four-cols>*{width:25%}.xxl-five-cols>*{width:20%}.xxl-six-cols>*{width:16.66667%}.flex>.xxl-col-10{width:83.333%}.flex>.xxl-col-9{width:75%}.flex>.xxl-col-8{width:66.66667%}.flex>.xxl-col-7{width:58.333%}.flex>.xxl-col-6{width:50%}.flex>.xxl-col-5{width:41.66667%}.flex>.xxl-col-4{width:33.333%}.flex>.xxl-col-3{width:25%}.flex>.xxl-col-2{width:16.66667%}}
/*@media (min-width:1500px){.flex:not(.sml-gaps):not(.no-gaps){margin-left:-50px}.flex:not(.sml-gaps):not(.no-gaps)>*{padding-left: 50px} }*/

*,*:before,*:after {box-sizing:inherit}section{margin:0;position:relative;background-size:cover;background-position:center;background-repeat:no-repeat}h1,h2,h3,h4{display:block;width:100%;margin-top:0;margin-bottom:15px}a{text-decoration:none}a:hover{text-decoration:underline}p{margin:0 0 20px}a,button,input[type=submit]{transition:all .4s ease}img{max-width:100%;height:auto;}button:focus{outline:0}.full-wrapper,.sml-wrapper,.wrapper,.lrg-wrapper{position:relative;width:100%;margin:0 auto}.t-left{text-align:left}.t-right{text-align:right}.t-center,.t-centre{text-align:center;list-style-position:inside}.t-upper{text-transform:uppercase}.inline-list{margin:0;padding:0;display:flex;flex-wrap:wrap}.inline-list li{float:left;list-style:none}.anchor{position:relative;visibility:hidden;display:block}.hidden{display:none!important}iframe[name=google_conversion_frame]{height:0!important;width:0!important;line-height:0!important;font-size:0!important;margin-top:-13px;float:left}.slider-video video{display:block}.error-page form{display:none!important}.parallax{position:relative;background-repeat:no-repeat;background-attachment:fixed;background-position:top center;background-size:cover}.content ol,.content ul{padding-left:20px;margin-bottom:20px;line-height:1.75em}.content ol ol,.content ol ul,.content ul ol,.content ul ul{padding-left:20px}img:not([src]){visibility:hidden}img[data-src],img[data-srcset]{display:block;min-height:1px}.loaded{animation-name:fadeIn;animation-duration:.4s;animation-timing-function:cubic-bezier(0,0,.4,1);animation-fill-mode:forwards}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.videoWrapper{position:relative;padding-bottom: 56.25%;width:100%;height:0}.videoWrapper iframe,.videoWrapper video{position:absolute;top:0;left:0;width:100%;height:100%}th{background:#e4e4e4}td,th{padding:10px 15px;border:1px solid #d8d8d8}.bg-img{position:absolute;top:0;right:0;width:48%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}a.skip-main{left:-999px;position:absolute;top:auto;width:1px;height:1px;overflow:hidden;z-index:-999}a.skip-main:active,a.skip-main:focus{color:#fff;background-color:#000;left:auto;top:auto;width:30%;height:auto;overflow:auto;margin:10px 35%;padding:5px;border-radius:15px;border:4px solid #ff0;text-align:center;font-size:1.2rem;z-index:999}

/* 
*  CSS TABLE OF CONTENTS
*   
*  1.0 - Global Styling
*    1.1 - Button	
*    1.2 - Sidebar
*    1.3 - Finance text calculator	
*    1.4 - Form styles
*    1.5 - Forms Checkbox
*    1.6 - Error page
*    1.7 - Social
*  2.0 - Featured Cars
*  3.0 - Grid & Video Gallery
*    3.1 - Gallery Grid - Masonary
*    3.2 - Video Gallery
*  4.0 - Tab & Accordian
*  5.0 - News & Events - Menu Item - Category Blog
*  6.0 - Header & Menu
*  7.0 - Footer Links
*  8.0 - Banner
*  9.0 - Quicklinks
*  10.0 - Mini Stock Locator
*  11.0 - Main Content - Pages
*    11.1 - Home Page
*    11.2 - Content Page
*    11.3 - Contact Page
*    11.4 - Latest Offers Page
*/

/* ========================================================================== 
* 1.0 Global Styling
* ========================================================================== */

html {
  font-size: 15px;
  line-height: 1.5em;
  box-sizing:border-box;
  font-family:var(--ff-main);
}

body {
	background: #fff;
	color: #000;
	padding-top: 55px;
}

.anchor {
	top: -40px;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	color: #000;
	line-height: 1em;
	font-weight: 400;
	text-transform: uppercase;
}

h1, .h1 {
	font-size: 28px;
}

h2, .h2 { 
	font-size: 24px;
}

h3, .h3 {
	font-size: 20px;
}

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

.subtitle {
	margin-top: -20px;
	font-size: 20px;
}

a {
	color: #000;
}

a:hover {
	color: var(--clr-primary);
}

iframe {
	display: block;
}

.wrapper, .sml-wrapper, .lrg-wrapper {
	line-height: 1.5em;
	padding: 40px 30px;
}

.wrapper {
	max-width: 1300px;
}

.sml-wrapper {
	max-width: 1100px;
}

.lrg-wrapper {
	max-width: 1900px;
}

.m-top {
	margin-top: 20px;
}

.m-bot {
	margin-bottom: 20px;
}

.grey-bg {
	background-color: #eee;
}

.wrapper.no-padding-top, .sml-wrapper.no-padding-top, .lrg-wrapper.no-padding-top {
	padding-top: 0;
}

.wrapper.no-padding-bottom, .sml-wrapper.no-padding-bottom, .lrg-wrapper.no-padding-bottom  {
	padding-bottom: 0;
}

.t-blue {
  color: var(--clr-primary) !important;
}

@media (min-width: 1025px) {


	body {
		padding-top: 75px;
	}

	h1, .h1, h2, .h2 {
		margin-bottom: 20px;
	}

	.anchor {
		top: -90px;
	}

	.wrapper, .sml-wrapper, .lrg-wrapper {
		padding: 80px 50px;
	}

	h1, .h1 {
		font-size: 48px;
	}

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

	h3, .h3 {
		font-size: 24px;
	}

	h4, .h4 {
		font-size: 20px;
	}
  
  * + h2, * + h3, * + h4 {
    margin-top: 40px;
  }

}

@media(min-width: 1200px) {

	body {
	}

	.wrapper, .sml-wrapper {
		/* padding-top: 100px; */
		/* padding-bottom: 100px; */
	}

}


/* ========================================================================== 
*  1.1 - Buttons	
* ========================================================================== */

.btn {
	display: inline-block;
	position: relative;
	width: auto;
	padding: 18px 20px 19px;
	text-decoration: none;
	border: none;
	line-height: 1em;
	/* text-transform: uppercase; */
	text-align: center;
	background-position: center;
	transition: background 0.8s;
	cursor: pointer;
	font-weight: 700;
}

a.btn:hover, .btn:hover {
	text-decoration: none;
}

.btn-mg-top {
	margin-top: 20px;
}

.btn-mg-bot {
	margin-bottom: 20px;
}

.btn-primary, a.btn-primary, .readmore, p.readmore {
	background-color: var(--clr-primary);
	color: #fff;
}

.btn-primary:hover, a.btn-primary:hover {
	background: #8a8a8a radial-gradient(circle, transparent 1%, #8a8a8a 1%) center/15000%;
	color: #fff;
}

.btn-primary:active, a.btn-primary:active, p.readmore:hover, .readmore:hover {
	background-color: #555;
	background-size: 100%;
	transition: background 0s;
}

.btn-secondary, a.btn-secondary {
	background-color: #666;
	color: #fff;
}

a.btn-secondary:hover, .btn-secondary:hover {
	background: #8a8a8a radial-gradient(circle, transparent 1%, #8a8a8a 1%) center/15000%;
	color: #fff;
}

.btn-secondary:active, a.btn-secondary:active {
	background-color: var(--clr-primary-dk);
	background-size: 100%;
	transition: background 0s;
}

.btn-outline, a.btn-outline {
	background: transparent;
	border: 2px solid #000;
	color: #000;
}

a.btn-outline:hover, .btn-outline:hover {
	background: #000 radial-gradient(circle, transparent 1%, #000 1%) center/15000%;
	color: #fff;
}

.btn-outline:active, a.btn-outline:active {
	background-color: #333;
	background-size: 100%;
	transition: background 0s;
}

.btn-signature {
	padding: 5px 20px; 
}


.btn-flex {
  display: flex;
  flex-direction: row;
}

.btn-flex >*:first-child {
  margin-right: 10px;
  margin-bottom: 0;
}

@media (max-width: 500px) {

	.btn-flex {
		flex-direction: column;
	}

	.btn-flex >*:first-child {
		margin-right: 0;
		margin-bottom: 20px;
	}

}

@media (min-width: 1025px) {

	.btn-full {
		display: block;
		width: 100%;
	}

	.btn.form-submit {
		width: 100%;
		text-align: center;
	}

  .btn {
    min-width: 180px;
  }

}

/* ========================================================================== 
*  1.2 - Sidebar
* ========================================================================== */

.sidebar-mini {
	position: fixed;
	right: -124px;
	top: 40%;
	transform: translateY(-50%);
	width: 160px;
	z-index: 2000;
	transition: all 0.4s ease;
}

.sidebar-mini:hover {
	right: 0;
}

.sidebar-mini a:hover {
	background: #444;
}

.sidebar-mini a {
	display: block;
	background: var(--clr-primary);
	color: #fff;
	padding: 10px;
	vertical-align: middle;
	text-decoration: none;
}

.sidebar-mini .icon-sidebar {
	margin-right: 10px;
	vertical-align: middle;
}

.sidebar-mini .s-bg span {
	vertical-align: middle;
}

/* ========================================================================== 
*  1.3 - Finance text calculator	
* ========================================================================== */

.finance-text-calc .ft-content {
	margin: 30px 0;
}

.ft-content .ft-text {
	margin-top: 15px;
	font-size: 36px;
	line-height: 1.5;
}

.ft-content .input-group, .ft-content .select-group {
	position: relative;
}

.ft-input {
	padding: 0 5px;
	border: 0;
	border-bottom: 2px solid #000;
	background-color: transparent;
	color: #000;
	font-weight: bold;
	font-size: 1.1em;
}

.ft-input option {
	font-size: 0.6em;
}

.ft-input.error {
	border-color: red;
}

.ft-input:focus {
	outline: 0;
}

.ft-input.loan-amount {
	max-width: 200px;
	padding-left: 30px;
}

.ft-input.loan-interest {
	max-width: 150px;
	padding-right: 30px;
}

.ft-input.loan-balloon-value {
	max-width: 150px;
	padding-left: 30px;
}

.ft-input.loan-balloon-percent {
	max-width: 100px;
	padding-right: 30px;
}

.input-icon {
	position: absolute;
	left: 0;
	top: -16px;
	font-size: 1.3em;
	color: #000;
	font-weight: bold;
}

.loan-interest + .input-icon, .loan-balloon-percent + .input-icon {
	left: auto;
	right: 8px;
}

.ft-text {
	display: block;
}

.ft-content #allow-balloon {
	display: inline-block;
	margin-top: 20px;
}

.ft-disclaimer {
	margin-top: 30px;
	font-size: 14px;
	line-height: 1.8;
	color: #777;
}

.ft-results {
	margin-top: 30px;
	padding: 30px;
	background-color: #f5f5f5;
}

.ft-results p {
	margin: 0;
	font-size: 22px;
}

.ft-repayment {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 2px solid #ddd;
}

.ft-repayment .tabs-content {
	display: none;
}

.ft-repayment .tabs-content.active {
	display: block;
	font-size: 80px;
	line-height: 2;
}

.ft-repayment .tabs-header {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid #000;
	border-left-width: 0;
	cursor: pointer;
}

.ft-repayment .tabs-header:nth-child(4){
	border-radius: 3px 0 0 3px;
	border-left-width: 1px;
}

.ft-repayment .tabs-header:nth-child(6){
	border-radius: 0 3px 3px 0;
}

.ft-repayment .tabs-header.active {
	background-color: #000;
	color: #fff;
}

.ft-repayment .balloon-payment {
	margin-top: 20px;
}

.ft-loan-details {
	max-width: 350px;
	margin: 0 auto;
	font-size: 18px;
	line-height: 2;
}

.ft-loan-details.ftld-ec {
	font-weight: bold;
}

.ft-results .btn-primary {
	margin-top: 30px;
}

.preapproval-form {
	display: none;
}

.preapproval-form.show {
	display: block;
}

/* ========================================================================== 
*  1.4 - Form styles
* ========================================================================== */

.ate-form {
	margin-top: 30px;
}

.form-group {
	position: relative;
}

.form-control, .select-container {
	display: block;
	width: 100%;
	margin-bottom: 35px;
	padding: 13px 20px;
	color: #000;
	background-color: #fff;
	border: 2px solid #aaa;
	line-height: 1em;
	outline: none;
	background-image: none;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.form-control:focus, .select-container:focus {
	outline: none;
	border-color: var(--clr-primary);
}

.form-control.error, .select-container.error {
	border-color: red;
}

.select-container {
	display: inline-block;
	padding: 0 !important;
	overflow: hidden;
	vertical-align: top;
	background: url(images/select-input.png) no-repeat right 20px center #fff;
}

.select-container .select-hide {
	 background: transparent;
	 width: 100%;
	 color: #000;
	 height: 45px;
	 padding: 0 20px;
	 line-height: 2;
	 border: 0;
	 appearance: none;
	 text-indent: 0.01px;
	 text-overflow: '';
}

.select-container .select-hide:focus {
	outline: 0;
}

.form-group label {
	position: absolute;
	top: -22px;
	left: 0px;
	padding: 0 5px;
	border: 0;
	color: var(--clr-primary);
	z-index: 1;
	line-height: 1.5em;
	transition: all 0.4s ease-in-out;
	cursor: text;
	font-size: 12px;
	background: transparent;
}

.form-control.empty + label, .form-group .select-container + label {
	top: 0;
	left: 0;
	padding: 15px 20px;
	background-color: transparent;
	color: #666;
	border-left: 0;
	border-right: 0;
}

.form-group .select-container + label {
	opacity: 0;
	pointer-events: none;
}

.form-group .select-container.active + label {
	top: -22px;
	padding: 0;
	opacity: 1;
	color: #000;
}

.home textarea.form-control {
	height: 100px;
	resize: none;
}

textarea.form-control {
	height: 150px;
	resize: none;
}

.form-text {
	margin-bottom: 30px; 
}

.ate-form h4 {  
	margin: 50px 0 30px;
}

.ate-form .form-submit .spinner2 {
	display: none;
}

.ate-form .form-submit.show-spinner .spinner2 {
	display: inline-block;
	margin-right: 10px;
}

.ate-form .spinner2 {
	vertical-align: middle;
	transform-origin: center;
	animation: spinner-rotate 2.25s linear infinite;
	will-change: transform;
}

.form-tc {
   display: block;
   margin: 0 0 20px;
   padding-bottom: 15px;
   border-bottom: 1px solid #cccc;
   font-weight: bold;
}

/* Phone Input Field */

.form-phone .form-control {

padding-left: 50px;
}

.form-group label.pre-fil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 13px 17px 13px;
  width: auto;
  color: var(--clr-primary);
  font-size: 14px;
}

.form-phone .form-control.empty + label.ph-number {
  left: 35px;
  top: 2px;
}

.lta-access-code {
    margin-top: -20px;
    margin-bottom: 0;
    line-height: 1em;
}

.spinner2 circle{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:spinner-stretch calc(2.25s * .75) ease-in-out infinite;will-change:stroke-dasharray,stroke-dashoffset}
@keyframes spinner-rotate{100%{transform:rotate(360deg)}}@keyframes spinner-stretch{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,200;stroke-dashoffset:-35px}100%{stroke-dashoffset:-124px}}

/* ========================================================================== 
*  1.5 - Forms Checkbox
* ========================================================================== */

.checkbox-group .container {
	display: flex;
	align-items: center;
	position: relative;
	padding-top: 0;
	padding-left: 45px;
	min-height: 35px;
	margin-bottom: 25px;
	cursor: pointer;
	user-select: none;
	font-size: 14px;
	line-height: 1.5em;
}

.checkbox-group input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.checkmark, .radiomark {
	position: absolute;
	top: 5px;
	left: 0px;
	height: 35px;
	width: 35px;
	background-color: #fff;
	border: 2px solid #aaaaaa;
	border-radius: 0;
}

.radiomark {
	border-radius: 25px;
}

.error + .checkmark {
	border-color: #ec1c24;
}

.checkbox-group-tcs.checkbox-group .container {
}

/* On mouse-over, add a grey background color */
.checkbox-group:hover input ~ .checkmark, .checkbox-group:hover input ~ .radiomark {
	background-color: #ccc;
}

.checkbox-group input:checked ~ .checkmark, .checkbox-group input:checked ~ .radiomark {
	background-color: var(--clr-primary);
	border-color: var(--clr-primary);
}

.checkmark:after, .radiomark:after {
	content: "";
	position: absolute;
	display: none;
}

.checkbox-group input:checked ~ .checkmark:after, .checkbox-group input:checked ~ .radiomark:after {
	display: block;
}

.checkbox-group .checkmark:after {
	left: 11px;
	top: 5px;
	width: 10px;
	height: 18px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.checkbox-group .container {
	vertical-align: middle;
}

/* Radio Button -Style the indicator (dot/circle) */
.checkbox-group .radiomark:after {
    top: 10px;
    left: 10px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: white;
}

/* ========================================================================== 
*  1.6 - Error page
* ========================================================================== */

.error404 h1 {
	display: flex;
	justify-content: center;
	align-items: center;
}

.error404 h2 {
	color: red;
}

.error404 h1 svg {
	margin-right: 20px;
}

/* ========================================================================== 
*  1.7 - Social
* ========================================================================== */

.social {
	align-items: center;
}

.social a {
	display: block;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	padding: 10px;
	font-size: 20px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 5px;
	cursor: pointer;
	line-height: 1em;
	text-align: center;
}

.social li a {
	color: #fff;
}

.social a span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

.social li:last-child a {
	margin-right: 0;
}

.social a:hover {
	background: #e0e0e0;
	color: #0c0c0c;
}

.top-header .social {
	margin-left: 20px;
}

.top-header .social a {
	width: 30px;
	height: 30px;
	padding: 7px;
	font-size: 16px;
	color: #fff;
}

/* ========================================================================== 
*  2.0 - Featured cars - Dots
* ========================================================================== */


.featcars .embla__dots__container {
	bottom: auto;
    position: relative;
    display: block;
    padding: 20px;
}

.featcars .embla__button {
	top: auto;
	bottom: -50px;
	left: 50%;
	width: 40px;
	height: 40px;
	padding: 10px;
	transform: translateX(-55px);
	fill: #ccc;
	border: 1px solid #ccc;
}

.featcars .embla__button:hover {
	background-color: var(--clr-primary);
	border-color: var(--clr-primary);
	fill: #fff;
}

.featcars .embla__button--next {
	transform: translateX(15px);
}

.featcars.embla {
    display: flex;
    flex-direction: column;
}

.featcars .embla__dot.is-selected, .embla__dot.is-selected {
	background-color: var(--clr-primary);
}


/* ========================================================================== 
*  2.0 - Featured cars - Styles
* ========================================================================== */

.featcars .flex .cow ul {
  display: block;
}

.featcars .cow h2 {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    padding: 15px 20px;
}

.featcars .cow h3 {
    padding: 0 20px;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

.featcars .cow .t-large {
	margin: 0;
}

.featcars .cow h3 .price-text {
    line-height: 1.2em;
    font-size: 14px;
    display: block;
    color: #999;
    font-weight: normal;
    text-transform: capitalize;
    margin-top: 5px;
}

.featcars .t-was {
	order: 2;
}

.featcars .cow .cow-il li {
    color: #000;
    font-size: 15px;
    display: flex;
    margin: 0;
    justify-content: space-between;
    border-top: solid 1px #e5e5e5;
    padding: 10px 20px;
}

.featcars .cow .cow-il li.cow-price-cat {
	color: var(--clr-primary);
	font-weight: 600;
}

.featcars .cow .cow-il li.cow-price-cat span:nth-child(2) {
	display: flex;
}


.featcars .cow-button {
	padding: 0 20px 20px;
}

.featcars .featured-banner .cow-img:after,.featcars .just-arrived .cow-img:after,.featcars .special-banner .cow-img:after {
	background-color: #000000;
    padding: 10px;
}

.featcars .cow-content {
    padding: 0 0 20px;
}

.featcars .cow .btn-primary {
	margin: 0 20px 20px;
}

@media (max-width:767px) {
  
  .featured-cars .lrg-wrapper, .featured-cars .wrapper {
    overflow-x: hidden;

  }
  
  .featcars .embla__viewport {
    overflow: visible;
  }
  
}

@media (min-width:1200px) {

  .featcars .cow img {
    max-height: 250px;
    object-fit: cover;
  }

}

/* ========================================================================== 
*  3.1 - Gallery Grid - Masonary
* ========================================================================== */

.gallery-grid-layout {
	columns: 340px;
	column-gap: 30px; 
}

.gallery-grid-layout > div {
		break-inside: avoid-column;
		margin-bottom: 30px;
}

.gallery-grid-layout img {
	display: block;
}

/* ========================================================================== 
*  3.2 - Video Gallery Styles
* ========================================================================== */

.video-gallery {
	max-width: 960px;
	margin: 0 auto;
}

div.imgbox a:hover img {
	opacity: 0.6;
}

div.vid_icon:hover, span.vid_icon:hover {
	opacity: 1;
	background-image: url(../images/vid_icon.png);
}

.titlebelowthumb a {
	display: block;
	margin-top: 8px;
	text-transform: uppercase;
	font-weight: bold;
}

/* ========================================================================== 
*  4.1 - Tabs
* ========================================================================== */

.tabs-flex {
	display: flex;
	margin-bottom: 20px;
}

.default-header {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 15px 20px;
	flex: 1 1 100%;
	background-color: #dce4e6;
	color: #000;
	border: 3px solid #dce4e6;
	font-size: 18px;
	text-align: center;
	cursor: pointer;
	text-transform: uppercase;
	font-weight: 700;
}


.default-header:hover {
	background: #d1d6d7;
    color: #444444;
}

.default-header.dropdown {
	display: block;
}

.default-header.active {
	background-color: #fff;
	color: #000;
}

.default-content {
	display: none;
}

.default-content.dropdown {
	display: block;
	max-height: 0;
	overflow: hidden;
	transition: all 0.4s ease;
	border-right: none;
	border-bottom: 1px solid #ccc;
}

.default-content.active, .default-content.tab-slider {
	display: block;
	padding: 20px;
	background-color: #fff;
	border-radius: 5px;
	border: 1px solid #dce4e6;
}

.default-content.dropdown.active {
	max-height: 10000px;
}

@media (max-width: 768px) {

	.tabs-flex {
		flex-wrap: wrap;
	}

}


@media (min-width: 769px) {

	.default-header:first-child {
		border-radius: 5px 0 0 5px;
	}

	.default-header:last-child {
		border-radius: 0 5px 5px 0;
	}

}


/* ========================================================================== 
*  4.2 - Accordian
* ========================================================================== */

.accord-head {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	font-size: 20px; 
	cursor: pointer;
	margin: 0;
}   

.accord-head svg {
	fill: #000;
	transition: all 0.4s ease;  
}  

.accord-head:hover, .accord-container.active .accord-head{
	color: var(--clr-primary);
}

.accord-head:hover svg, .accord-container.active svg {
	fill: var(--clr-primary);
}   

.accord-container.active .accord-head svg {
	transform: rotate(45deg);
}

.accord-content {
	padding: 0 20px;
	max-height: 0;
	overflow: hidden;
	transition: all 0.4s ease;  
	border-bottom: 1px solid #ccc;
}

.accord-content:last-child * {
	margin-bottom: 0;
}

.accord-container.active .accord-content {
	padding: 0 20px 20px;  
	max-height: 10000px;  
}

/* ========================================================================== 
*  5.0 - News & Events - Menu Item - Category Blog
* ========================================================================== */

article {
	position: relative;
}

article a.post-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

article:hover h2,
article:hover h3 {
	color: var(--clr-primary);;
}

.view-article {
  font-weight: 600;
}

.post-date {
  color: #818181;
  margin: 0;
  font-size: 14px;
  background: #ebebeb;
  padding: 5px 5px;
  border-radius: 5px;
}

.post img {
	display: block;
	width: 100%;
	margin-bottom: 20px;
}

.post h3 {
	margin-bottom: 20px;
}

.page-header, .page-header + .article-info {
	display: none;
}

.published {
	margin-left: 0;
}

.published .icon-calendar {
	display: none;
}

.pagination ul {
	display: flex;
	list-style: none;
	justify-content: center;  
	padding-left: 0;
}

.pagination ul li {
	display: inline-block;
}

.pagination ul li a, .pagination ul li span {
	padding: 7px;
	margin: 0 5px;
	text-decoration: none;
	width: 40px;
	height: 40px;
	display: block;
	text-align: center;
	border: 1px solid #000;
}

.pagination ul li span, .pagination ul li a:hover {
	background-color: var(--clr-primary);
	color: #fff;
}

.pagination-start, .pagination-prev, .pagination-next, .pagination-end {
	display: none !important;
}

.np-img {
	width: 100%;
	background-position: center;
	background-size: cover;
}

.np-line {
	margin-bottom: 35px;
}

/* ========================================================================== 
*  6.1 - Top Header
* ========================================================================== */

.top-header {
	display: none;
	position: relative;
	z-index: 1000;
	text-align: center;
	background-color: #e3e3e3;
	width: 100%;
}

.top-header .lrg-wrapper {
	padding-top: 5px;
	padding-bottom: 5px;
	justify-content: flex-end;
}

.top-header a {
	color: #222;
}

.top-header a:hover {
	color: var(--clr-primary);
	text-decoration: none
}

.top-header p {
	margin: 0;
	line-height: 1.1em;
	vertical-align: middle;
	color: #fff;
}

.top-header .icon-location, .top-header .icon-mobile {
	margin: 0 5px 0 10px;
	color: var(--clr-primary);
}

.translated-ltr .skiptranslate ~ .header .top-header {
	top: 40px;
}

@media (min-width: 1025px) {

	.top-header {
		display: block;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 1030;
		text-align: right;
		transition: top 0.4s ease;
		overflow: hidden;
	}

	.top-header .lrg-wrapper {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.top-header p {
		display: inline-block;
	}

}

/* ========================================================================== 
*  6.2 - Dealer menu
* ========================================================================== */

.dealer-menu {
	background: #000;
	position:fixed;
	top: 52px;
	left: 0;
	width: 100%;
	z-index: 1030;
	transition: top 0.4s ease;
}

.dealer-menu .wrapper {
	padding-top: 15px;
	padding-bottom: 15px;
}

.dealer-menu .logo {
	display: inline-block;
	width: 150px;
}

.dealer-name {
	color: #fff;
	text-align: right;
	font-weight: 700;
	width: auto;
	float: right;
	font-style: italic;
	margin-top: 15px;
}

.dealer-name span {
	color: var(--clr-primary); 
}

@media (min-width: 1025px) {

	.dealer-name {
		margin-top: 7px;
	}

	.stacked .nav-menu {
		top: 135px;
	}

}

@media (min-width: 1200px) {

	.dealer-name {
		font-size: 30px;
		margin-top: 15px;
	}

	.dealer-menu .logo {
		width: auto;
	}

	.stacked .nav-menu {
		top: 156px;
	}

	.fixed-menu .stacked .nav-menu {
		top: 0;
	}

}

/* ========================================================================== 
*  6.3 - Navigation
* ========================================================================== */

.nav-menu {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1030;
	background-color: #fff;
	color: #000;
	font-size: 14px;
	transition: ease 0.3s all;
}

.nav-menu .lrg-wrapper {
	align-items: flex-start;
	display: flex;
}

.fixed-menu .nav-menu {
	box-shadow: 0 5px 15px 0 rgb(0 0 0 / 8%);
}

.scrolling-down .nav-menu {
}

.primary-nav {
	display: none;
}

.logo {
	margin-right: 0;
}

.logo img {
	display: block;
}

.logo a {
	display: block;
}

.mobile-title {
	white-space: nowrap;
	text-align: center;
}

.mobile-link .icon-cross, .show-menu .mobile-link .icon-menu {
	display: none;
}

.nav-contact {
  display: flex;
  margin-top: 14px;
}

.nav-contact a {
	margin-left: 11px;
	display: flex;
	align-items: center;
	text-decoration: none;
}

.nav-contact svg {
	margin-right: 5px;
	font-size: 22px;
	margin-top: -3px;
}

.nav-contact span {
	display: none;
}

@media (max-width: 1024px) {

	.logo img {
		width: auto;
		height: 35px;
	}
	
	.mobile-link {
		justify-content: flex-end;
	}
  
  .nav-contact {
    margin-left: auto;
    margin-top: 9px;
  }

  .nav-contact a {
    margin-right: 10px;
    margin-left: 0;
  }
  
  .nav-contact svg {
    margin-right: 0;
  }

}

@media (min-width: 1025px) {

	.mobile-header, .mobile-title {
		display: none;
	}

	.logo {
		margin-left: 40px;
		width: 50px;
		transition: ease 0.3s all;
	}

	.logo img {
		height: auto;
		width: 100%;
	}

	.m-menu {
		background: #e3e3e3;
	}

	.nav-menu {
		position: fixed;
		top: 0;
	}

	.nav-menu .lrg-wrapper {
		max-width: 2000px;
		padding: 13px 20px 0 50px;
		flex-wrap: wrap;
	}

	.stacked .nav-menu .lrg-wrapper {
		padding-top: 0px;
		padding-bottom: 0px;
	}

	.primary-nav {
		display: inline-block;
		margin-right: auto;
		margin-left: 0;
		margin-top: 6px;
	}

	.primary-nav ul {
		display: flex;
		justify-content: flex-end;
		margin: 0;
		padding: 0;
		z-index: 50;
	}

	.primary-nav li {
		display: inline-block;
		position: relative;
	}

	.primary-nav a {
		display: block;
		padding: 15px 10px 15px;
		color: #222;
		text-decoration: none;
		/* text-transform: uppercase; */
		transition: all 1s ease;
		font-weight: 700;
		border-bottom: solid 5px transparent;
	}

	.primary-nav li:hover a {
		color: var(--clr-primary);
	}	

	.primary-nav > ul > li:hover > a {
    border-color: var(--clr-primary);
	}	

	.primary-nav .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		border: none;
		/* text-transform: uppercase; */
		min-width: 100%;
		white-space: nowrap;
	}

	.primary-nav .sub-menu a {
		font-weight: 400;	
	}
	
	.primary-nav li:last-child .sub-menu {
		/* left: auto; */
		/* right: 0; */
	}

	.primary-nav ul li:hover .sub-menu {
		display: block;
	}
	
	.primary-nav .mm-link .sub-menu, .primary-nav ul li.mm-link:hover .sub-menu {
		display: none;
	}

	.primary-nav .sub-menu li {
		display: block;
	}

	.primary-nav > ul > li:last-child > a {
		/* padding-right: 0; */
	}

	.primary-nav > .nav > li:hover > a {
		color: var(--clr-primary);
	}

	.primary-nav .sub-menu a {
		position: relative;
		padding: 8px 20px;
		text-align: left;
		background-color: #262626;
	}

	.primary-nav .sub-menu a, .primary-nav ul li:hover .sub-menu a {
		color: #fff;
	}

	.primary-nav .sub-menu li:hover a, .primary-nav ul li:hover .sub-menu li:hover a {
		color: var(--clr-primary);
	}

	.primary-nav .sub-menu li:last-child a {
		border: 0;
	}

	.right-sidebar h2 {
		margin: 14px 0 27px; 
	}

	.translated-ltr.translated-ltr .skiptranslate ~ .header .nav-menu {
		top: 88px;
	}

	/* Second Level Sub-Menu */
	.primary-nav ul li .sub-menu .sub-menu {
		display: none;
		position: absolute;
	}

	.primary-nav .sub-menu li:hover .sub-menu {
		display: block !important;
	}

	.primary-nav .sub-menu .sub-menu {
		top: 0;
		left: 100%;
		height: 103.1%;
		display: none !important;
	}

	.primary-nav .sub-menu .sub-menu li a {
		background-color: #f2f2f2 !important;
		color: #000 !important;
	}

	.primary-nav .sub-menu .sub-menu li:hover a {
		background-color: var(--clr-primary) !important;
		color: #fff !important;
	}

	/* ========================================================================== 
	*  	6.3.1 - Smaller Navigation on scroll
	* ========================================================================== */

	.fixed-menu .top-header {
		transform: translate(0, -100%);
	}
	
	.fixed-menu .dealer-menu {
		top: 0;
		transform: translate(0, -100%);
	}

	.fixed-menu .nav-menu {
	}

	.scrolling-down .nav-menu {
		/* transform: translate(0, -100%); */
		/* box-shadow: none; */
	}

}

@media(min-width: 1200px) {

	.logo {
	}
	
	.primary-nav a {
		padding-left: 15px;
		padding-right: 15px;
	}
  
  .nav-contact span {
    display: inline-block;
  }
}

/* ========================================================================== 
	*  	6.3.2 - Fixed menu items positioned under navigation
	* ========================================================================== */

.fixed-menu {
	--fixed-padding: 44px;
}

@media(min-width: 1025px) {
	.fixed-menu {
		--fixed-padding: 96px;
	}
}

@media(min-width: 1200px) {
	.fixed-menu {
		--fixed-padding: 106px;
	}
}

/* ========================================================================== 
*  6.4 - Mobile Header
* ========================================================================== */



.mobile-header {
	position: fixed;
	width: 100%;
	left: 0;
	top: 55px;
	background-color: #f2f6f7;
	border-bottom: 1px solid #e4e4e4;
	z-index: 1000;
	transition: all 0.4s ease;
}

.fixed-menu .mobile-header {
	top: 0;
	transform: translate(0, -100%);
}

.mobile-header .m-flex-basic > div {
	display: flex;
}

.mobile-link, .mobile-header a {
	display: flex;
	border: 0;
	padding: 0;
	background-color: transparent;
	align-items: center;
	color: #ddd;
	margin-top: 7px;
}

.mobile-link span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

.mobile-header a {
	margin-right: 20px;
}

.mobile-header a svg, .mobile-link svg {
	color: #222;
	font-size: 20px;
}

.mobile-link .icon-cross, .show-menu .mobile-link .icon-menu {
	display: none
}

.show-menu .mobile-link .icon-cross {
	display: block;
}

@media (min-width: 1025px) {
	.mobile-link {
		display: none;
	}
}

.mobile-overlay {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.6);
	z-index: 500;
	transition: all 1.4s ease;
}

.show-menu .mobile-overlay {
	display: block;
	animation: mobile_overlay 1s;
}

@keyframes mobile_overlay {
	from {background-color: rgba(0,0,0,0);}
	to {background-color: rgba(0,0,0,0.6);}
}

body.show-menu {
	overflow: hidden;
}

.m-menu {
	display: block;
	position: fixed;
	width: 100%;
	top: 56px;
	right: -100%;
	height: 100%;
	background-color: #fff;
	z-index: 99999999;
	padding-bottom: 200px;
	max-height: 2000px;
	overflow: auto;
	transition: all 0.4s ease;
	border-top: 1px solid #e4e4e4;
}

.fixed-menu .m-menu {
	top: 55px;
}

.show-menu .m-menu {
	display: block;
	right: 0;
}

.m-menu .sub-menu {
	max-height: 0;
	overflow: hidden;
	transition: all 0.4s ease;
}

.m-menu .show .sub-menu {
	max-height: 10000px;
}

.m-menu ul {
	margin: 0;
	padding: 0;
}

.m-menu li {
	padding: 0 0;
	list-style: none;
}

.m-menu a {
	display: block;
	position: relative;
	text-decoration: none;
	margin: 0 20px;
	color: #262626;
	border-bottom: 1px solid #e4e4e4;
	font-weight: bold;
	padding: 25px 15px 20px;
	font-size: 20px;
}

.m-menu .active > a {
	background-color: var(--clr-primary);
	color: #fff;
}

.m-menu .sub-menu a {
	background: #ffffff;
	border-bottom: 1px solid #e4e4e4;
	font-size: 16px;
	padding-left: 30px;
	color: #8e8e8e;
	padding-top: 20px;
	padding-bottom: 15px;
}

.m-menu .current-menu-item .sub-menu .current-menu-item a {
	background-color: var(--clr-primary);
	color: #fff;
}

.m-menu .menu-item-has-children > a:after {
	background-image: url(images/select-input.png);
	background-repeat: no-repeat;
	content: '';
	position: absolute;
	width: 18px;
	height: 10px;
	top: 50%;
	right: 15px;
	margin-top: -5px;
}

.m-menu .menu-item-has-children.show > a:after {
	transform: rotate(0);
}

/* Second Level Sub-Menu */
.m-menu .sub-menu, .m-menu .show .sub-menu .sub-menu {
	max-height: 0;
	overflow: hidden;
	transition: all .4s ease;
}

.m-menu .show .sub-menu, .m-menu .show .sub-menu .show .sub-menu {
	max-height: 100%;
}

.m-menu .sub-menu .sub-menu a {
	padding-left: 30px;
	color: #ffffff;
	background: #8e8e8e;
}

/* ========================================================================== 
*  6.5 - Mobile Header - Split Style
* ========================================================================== */

.mobile-split .wrapper {
	padding: 0 !important;
}

.mobile-split .m-flex-basic > div {
	padding: 0 30px;
}

.mobile-split .mobile-link {
	padding: 11px 30px;
	background: var(--clr-primary); 
}

.mobile-split a svg {
	margin-right: 0;
}


@media (max-width: 1024px) {

	.mobile-header .wrapper, .nav-menu .lrg-wrapper {
		padding: 10px 30px 11px;
	}

}

/* ========================================================================== 
*  6.6 - Mega Menu
* ========================================================================== */

.mega-menu {
	display: none;
	position: fixed;
	top: 139px;
	left: 0;
	width: 100%;
	height: calc(100% - 139px);
	z-index: 99;
	background: #fff;
	transition: all 0.4s ease;
    overflow: auto;
    background: #f3f3f3;
}

.mm-active .mega-menu {
	display: block;
}

.fixed-menu .mega-menu {
	top: 94px;
	height: calc(100% - 94px);
}

.mm-cross {
    position: absolute;
    top: 50px;
    right: 50px;
    border: 2px solid #000;
    border-radius: 50%;
    padding: 3px;
    height: 36px;
    width: 36px;
    font-size: 26px;
    z-index: 1000;
    cursor: pointer;
}

.mm-cross:hover {
	background: #000;
    fill: #fff;
}

.mm-car {
	position: relative;
    text-align: center;
    cursor: pointer;
}

.mm-car a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
	z-index: 1;
}

.mm-car:hover {
	text-decoration: none;
}

.mm-car img {
	transition: all 0.4s ease;
}

.mm-car:hover img {
    transform: scale(0.9);
}

.mm-car p {
	margin: 10px 0;
}

.mm-car:hover p {
	color: var(--clr-primary); 
}

.mm-car span {
	display:block;
}

.mega-menu .flex > div {
  opacity: 0;
  animation: mm-show .33s 1s forwards;
}

.mega-menu .flex > div:nth-child(1) {  animation-delay: 0.1s; }
.mega-menu .flex > div:nth-child(2) {  animation-delay: 0.2s; }
.mega-menu .flex > div:nth-child(3) {  animation-delay: 0.3s; }
.mega-menu .flex > div:nth-child(4) {  animation-delay: 0.4s; }
.mega-menu .flex > div:nth-child(5) {  animation-delay: 0.5s; }
.mega-menu .flex > div:nth-child(6) {  animation-delay: 0.6s; }
.mega-menu .flex > div:nth-child(7) {  animation-delay: 0.7s; }
.mega-menu .flex > div:nth-child(8) {  animation-delay: 0.8s; }
.mega-menu .flex > div:nth-child(9) {  animation-delay: 0.9s; }

@keyframes mm-show {
	from {
		opacity: 0;
		transform: translateY(-1em);}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}



@media (min-width: 1025px) {
	.mm-link + ul {
		display: none !important;	
	}
}

@media(min-width: 1200px) {

	.mega-menu {
		top: 151px;
		height: calc(100% - 151px);
	}

	.fixed-menu .mega-menu {
		top: 106px;
		height: calc(100% - 106px);
	}
}

/* ========================================================================== 
*  7.0 - Footer Links
* ========================================================================== */

.footer-links {
	background-color: #E6E6E6;
}

.footer-links, .footer-links a {
	color: #999;
}

.footer-links h2 {
	font-size: 28px;
	color: #262626;
	margin-bottom: 40px;
}

.footer-links .h3 {
	margin: 0;
	/* color: #fff; */
	text-transform: none;
	font-size: 25px;
}

.footer-links .h4 {
	margin: 20px 0 10px;
	color: #262626;
	text-transform: none;
	font-weight: 600;
	font-size: 17px;
}

.footer-links p {
	margin: 0 0 20px 0;
}

.footer-links a {
	text-decoration: none;
}

.footer-links a:hover, .copyright a:hover {
	color: var(--clr-primary);
}

.highlight {
	color: var(--clr-primary); /* Highlight Day Colour*/
}

.footer-links ul {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.footer-links .chronoform {
	margin-bottom: 0;
	padding-right: 10px;
}

.foot-header {
	display: flex;
	justify-content: space-between;
	align-items: center;  
}

.foot-header.active .icon-foot { 
	transform: rotate(45deg);
}

.footer-links .sub-menu {
	display: none;
}

.icon-foot {
	font-size: 15px;
	transition: all 0.4s ease;
	display: none;
}

.footer .social a {
  background-color: #cecece;
  color: #262626;
}

.footer .social a:hover {
  background-color: var(--clr-primary);
  color: #fff;
} 

.footer-nav {
  background-color: #8f8f8f;
}

.footer-nav .wrapper, .footer-nav .lrg-wrapper, .footer-nav .sml-wrapper {
  padding-top: 0;
  padding-bottom: 0;
}

.footer-nav ul {
  background-color: #8f8f8f;
  list-style: none;
  margin: auto;
  display: flex;
  text-transform: uppercase;
  margin-left: -10px;
  flex-direction: column;
  text-align: center;
  padding: 20px 0;
}

.footer-nav .hide-desktop {
  display: none;
}

.footer-nav a {
  color: #fff;
  padding: 5px 10px;
  font-weight: 600;
  font-size: 12px;
  display: block;
  text-decoration: none;
  width: 100vw;
  margin-left: -20px;
}

.footer-nav a:hover {
  color: var(--clr-primary);
}

.footer-nav .sub-menu {
  display: none;
}

@media (min-width:1025px) {

  .footer-nav ul {
    flex-direction: row;
	  text-align: left;
  }

.footer-nav a {
  margin: 0;
  width: 100%;
}

}

/* ========================================================================== 
*  7.1 - Copyright
* ========================================================================== */

.copyright, .copyright a {
  text-decoration: none;
}

.copyright p {
	margin-bottom: 0;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 1.4em;
}

.copyright .lrg-wrapper {
	font-size: 14px;
	line-height: 1.5em;
	text-transform: uppercase;
}

.edge-designed a {
	display: inline-block;
	vertical-align: middle;
}

.edge-designed span {
	display: inline-block;
	vertical-align: middle;
}

.edge-designed img {
	margin-left: 10px;
}

.back-top {
	position: fixed;
	bottom: 10px;
	right: 10px;
}

.copyright .lrg-wrapper, .copyright .wrapper, .copyright .sml-wrapper {
  padding-top: 20px;
  padding-bottom: 60px;
}

@media (max-width: 767px) {

	.copyright {
		text-align: center;
	}

	.copy-name {
		display: block;
	}

	.copy-break {
		display: none;
	}

	.edge-designed {
		margin-top: 10px;
	}

	.foot-content {
		display: block;
		max-height: 0;
		overflow: hidden;
		transition: all 0.4s ease;
	}

	.foot-content.active {
		max-height: 1000px;
	}

	.icon-foot {
		display: block;
	}

}

@media (min-width: 768px) {

	.copy-flex {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

  .copyright .lrg-wrapper, .copyright .wrapper, .copyright .sml-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
  }

}


@media (min-width: 1025px) {

	.footer-links .lrg-wrapper, .footer-links .wrapper, .footer-links .sml-wrapper {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.footer-links h1 {
		margin: 10px 0 40px 0;
	}

	.footer-links .h3 {
		margin: 0 0 15px 0;
	}

	.footer-links .flex > div {
		padding-bottom: 0;
	}
  
}

/* ========================================================================== 
*  8.0 - Banner
* ========================================================================== */

.banner .wrapper {
	max-width: none;
	padding: 0;
}

.banner img {
	display: block;
	width: 100%;
}

.embla__button {
	fill: #fff;
}


.banner-text {
	padding: 0 50px;
}

.banner-text .h2 {
	font-size: 24px;
	font-weight: 400;
	margin: 0;
	text-transform: uppercase;
	line-height: 1em;
}

.banner-text p {
	font-size: 16px;
	margin-bottom: 20px;
}

.banner-text .h2, .banner-text p {
	color: #000;
	/* line-height: 1.2em; */
}

.banner .embla__dots__container {
  display: none;
}

/* Banner Overlay - Homepage */
/* .home .banner .embla::before {
    content: "";
    display: block;
    background-color: rgb(0 0 0 / 50%);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
} */

@media (min-width: 768px) {
  
  .banner-layer {
    position: absolute;
    top: 35%;
    left: 13%;
    width: 100%;
    max-width: 600px;
    z-index: 2;
	}
  
  .banner-text {    
    padding: 0;
  }

	.banner-text .h2 {
		font-size: 30px;
		margin-bottom: 20px;
	}

	.banner-text p {
		font-size: 24px;
	}

	.banner-text .h2, .banner-text p {
		color: #fff;
		text-shadow: 1px 1px 2px rgb(0 0 0 / 50%);
	}

  .banner-layer .btn {
    max-width: 290px;
    width: 100%;
  }
  
}

@media (min-width: 1025px) {
  
	.banner-text .h2 {
		font-size: 38px;
	}
  
}

@media (min-width: 1200px) {
  
  .banner-layer {
    top: 25%;
  }
  
}

@media (min-width: 1400px) {
  
  .banner-layer {
    top: 25%;
  }
  
	.banner-text .h2 {
		font-size: 48px;
	}
  
}

@media (max-width: 767px) {
  
  .banner-layer {
    height: 205px;
    padding: 20px;
    background: #f1f1f1;
  }
  
  .banner-text {    
    padding: 0;
  }

	.banner-text .h2 {
		margin-bottom: 20px;
	}
  
  .banner-layer .btn {
    max-width: 80%;
    text-align: center;
    width: 100%;
  }
  
  .banner .embla__dots__container {
    display: none;
  }
  
  .banner .embla__button {
    top: 25%;
  }

	.banner .embla__button.embla__button--next {		
    transform: translateY(-50%);
	}
  
}

@media (max-width: 500px) {

	.crop-mobile img {
		height: 100%;
		object-fit: cover;
		object-position: center;
		aspect-ratio: 16 / 9;
		height: 250px;
	}

}

/* ========================================================================== 
*  8.1 - Banner - Dots
* ========================================================================== */

.embla__dots__container {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
    display: block;
    padding: 20px;
}

.embla__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;	
	padding: 0;
	border: 1px solid #636363;
	background-color: transparent;
}

.featcars .embla__dot.is-selected {
	background-color: #636363;
}


.embla__button--next {
	transform: translateX(15px);
}

.featcars.embla {
    display: flex;
    /* flex-direction: column-reverse; */
}


.embla__dot {
    margin-right: 10px;
}

@media (min-width:1025px) {

.embla__dot {
	width: 16px;
	height: 16px;
}
	
}

/* ========================================================================== 
*  8.1 - Banner - Slideer with Icons
* ========================================================================== */

.banner-layer-right {
   padding: 20px 20px;
   width: 100%;
}

.banner-layer-right .banner-icons img {
   max-width: 30px;
   min-height: auto;
}

.banner-layer-right h5 {
   color: #fff;
   margin-top: 0;
   font-size: 11px;
   line-height: 16px;
   font-weight: 400;
   margin-bottom: 5px;
}

.banner-terms {
    position: absolute;
    right:0;
    bottom: 0;
    padding: 0 10px 20px 0;
 }

.banner-terms p {
  color: #fff;
  font-size: 13px;
}

@media (min-width: 500px) {
  
  .home .embla__slide {
    background-color: transparent;
  }
  
  .banner-layer-right .banner-icons img {
     max-width: 50px;
  }
  
  .banner-layer-right h5 {
     font-size: 12px;
     margin-bottom: 10px;
  }

  
}

@media (min-width: 768px) {
 

   .banner-layer-right {
      max-width: 400px;
      top: 50%;
      transform: translateY(-50%);
      bottom: auto;
   	  position: absolute;
      right: 0;
      padding: 10px 30px;
      width: 100%;

   }

   .banner-layer-right h5 {
      margin-bottom: 0;
   }
}


@media (min-width: 1025px) {

   .banner-layer-right {
      padding: 20px 50px;
      max-width: 500px;
   }

   .banner-layer-bottom h5, .banner-layer-right h5 {
      font-size: 12px;
   }

   .banner-layer-right .banner-icons {
      display: flex;
      gap: 15px;
      align-items: center;
   }
  
  .banner-terms {
    padding-right: 50px;
  }

}

@media (min-width: 1400px) {
  .banner-layer-right .banner-icons img {
    max-width: 70px;
   }
  
  .banner-layer-right h5 {
    font-size: 16px;
  }
  
  .banner-layer-right {
    max-width: 700px;
  }
  
}

@media (min-width: 1500px) {
  .banner-layer-right .banner-icons img {
    max-width: 90px;
   }
}


@media (max-width: 767px) {
  .banner-layer-right {
    background: #000;
  }
  
  .banner-layer-right .flex {
    margin-left: -10px;
  }
  
  .banner-layer-right .flex >* {
    padding: 0 0 0 10px;
  }
  
}

@media (max-width: 500px) {
  .banner-layer-right {
    background: #000;
  }
  
  .banner-layer-right .flex {
    margin-left: -10px;
  }
  
  .banner-layer-right .flex >* {
    padding: 0 0 0 10px;
  }
  
}



/* ========================================================================== 
*  9.0 - Quicklinks
* ========================================================================== */

.quicklinks {
	
}

.q-link {
	position: relative;
	overflow: hidden;
}

.q-img {
	overflow: hidden;
}

.q-link img{
	transition: all 0.6s ease;
	display: block;
}

.q-link:hover img {
	transform: scale(1.1);
}

.q-link a {
	text-decoration: none;
}

.q-link .h3 {
	margin-top: 20px;
	margin-bottom: 10px;
}

@media (max-width: 769px) {
	.q-img, .q-link p {
		display: none;
	}
	
	.q-link .h3 {
		margin: 0;
		font-size: 20px;
		line-height: 1.1;
		color: #222;
		font-weight: 600;
		text-align: center;
		padding: 30px 15px;
		border-top: 1px solid #eee;
	}
}


/* ========================================================================== 
*  10.1 - Mini Stock Locator - Wrapper and Video BG
* ========================================================================== */

.search-our-stock {
	z-index: 3;
}

.search-our-stock .search-overlay {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
}

/* Video background */
.search-our-stock .ss-video {
	position: absolute;
	overflow: hidden;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.search-our-stock .ss-video video {
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
}

.search-our-stock label {
	text-align: left;
}

.mini-search {
}

.mini-search .stock-option {
	display: none;
	width: 100%;
	max-width: 310px;
}

.mini-search .stock-option, .mini-search .stock-option .so-select {
  border-radius: 8px;
}

.mini-search .stock-option.active, .mini-search .stock-option.active .so-select {
  border-radius: 8px 8px 0 8px;
}

.mini-search .stock-option.active {
  width: 100%;
}

.home .mini-search .stock-options {
  justify-content: center;
}

.ate-stock-locator #angle-quote {
    display: none;
}

@media (min-width: 1200px) {
	.mini-search {
		min-height: 50px;
	}

	.mini-search .stock-options {
		/* display: flex; */
		/* justify-content: flex-end; */
	}
	
	.mini-search .ms-btn-container, .mini-search .sd-heading-fixed, .mini-search .sd-search-fixed {
		display: none;
	}
}

/* ========================================================================== 
*  10.2 - Mini Stock Locator - Colours
* ========================================================================== */

/* Border colours */
.mini-search .stock-options, .mini-search .stock-option .so-select {
	border-color: #e6e6e6;
}

.mini-search .stock-option:not(.so-more-filters):after {
	background-color: #666;
}

.mini-search .stock-option.active, .mini-search .stock-option.active .so-select {
  border-radius: 8px 8px 0 0;
}

/* Text colours */
.mini-search .stock-option .so-select label {
	color: #000;
}

.mini-search .stock-option .value {
	color: #000;
}

/* Background colour */
.mini-search .stock-option .so-select, .mini-search .stock-option.ms-btn {
	background-color: #fff;
}

.mini-search .stock-option.active .value  {
	color: #000;
}

/* ========================================================================== 
*  10.2 - Mini Stock Locator - Quick Search
* ========================================================================== */

.mini-search a.sl-mini-search-btn {
	padding: 15px 20px;
}

.mini-search-quick {
	color: #222;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 20px;
}

.mini-search-quick > div {
	width: 50%;
	padding: 10px;
}

.mini-search-quick .msq-text {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.mini-search-quick svg {
	font-size: 20px;
	margin-right: 10px;
}

.mini-search-quick a {
	display: block;
	border: 1px solid #222;
	color: #222;
	padding: 8px 25px;
	text-decoration: none;
	text-align:center;
	border-radius: 3px;
	font-size: 18px;
}

.mini-search-quick a:hover, .mini-search-quick a.primary {
	background-color: var(--clr-primary);
	color: #fff;
}



@media (min-width: 1025px){
  
  .search-our-stock h2 {
    margin-bottom: 0;
  }

	.mini-search-quick .msq-text {
		margin-right: 20px;
		padding-right: 30px;
		border-right: 1px solid #fff;
	}

	.mini-search-quick > div, .mini-search-quick .msq-text {
		width: auto;
	}

	.mini-search-quick a {
		border: 1px solid transparent;
	}

	.mini-search-quick a:hover, .mini-search-quick a.primary {
		border-color:  #fff;
	}

	.mini-search-quick {
		margin-top: 30px;
	}

}

/* ========================================================================== 
*  10.3 - Mini Stock Locator - Search Flex
* ========================================================================== */

.search-flex {
	display: flex;
	flex-direction: column;
}

.search-flex .mini-search-quick {
    justify-content: flex-end;
}

.ate-stock-locator .sdc-vehicle-details .sdc-certified{
    display: none;
}

@media (max-width: 1024px) {
    .search-flex > *:nth-child(1) { order: 1; }
    .search-flex > *:nth-child(2) { order: 3; }
    .search-flex > *:nth-child(3) { order: 2; }

    .search-flex .mini-search-quick {
    	margin-top: 20px;
	}

	.search-our-stock .search-flex  {
		text-align: center;
	}

}

@media (min-width: 1025px) {

	.search-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.search-flex h2, .search-flex .mini-search-quick {
		margin: 0;
	}

	.search-flex h2, .search-flex > div {
		width: auto;
	}

	.search-flex > div:last-child {
		width: 100%;
    margin-top: 20px;
	}

	.search-flex .mini-search-quick .msq-text {
	    margin-right: 0;
	    padding-right: 30px;
	    border-right: 1px solid #222;
	}

	.search-flex .mini-search-quick > div {
	    padding: 0 0 0 10px;
	}

	.search-flex .mini-search-quick > div:last-child {
		padding-right: 0;
	}
}


.mini-search #so-location, .mini-search #so-year, .mini-search #so-more_filters {
  display: none;
}



/* ========================================================================== 
*  11.1 - Main Content - Home Page
* ========================================================================== */

.home .banner {
  background-color: #000;
}

.content {
	position: relative;
}

.content-fill {
	height: 100%;
	background: #bdbdbd;
	padding: 10px 20px; 
}

.dark-bg p, .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4, .dark-bg a {
	color: #fff;
}

.welcome {
  background-color: #F9F4F4;
  background-size: cover;
  background-position: center;
}

.welcome h1 span {
    display: block;
    margin-bottom: 5px;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.1;
    color: var(--clr-primary);
}

.location-map {
	position: relative;
}

.location-map a {
	position: absolute;
	left: 50%;
	bottom: 50px;
	z-index: 1;
	transform: translate(-50%, 0);
}

.google-rating-strip {
  background-color: var(--clr-primary-dk);
  color: #fff;
}

.google-rating-strip .wrapper {
  padding-top: 15px;
  padding-bottom: 20px;
}

.google-rating-strip p {
  margin-bottom: 5px;
}

.google-rating-strip span {  
  font-weight: 600;  
  font-size: 20px;
}

.flex-google-rating {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.flex-google-rating img {margin: 2px 0 0 10px;}

@media (max-width: 1024px) {

	.welcome {
		background-image: none !important;
	}

	.google-rating-strip .wrapper {
	  padding-top: 7px;
	  padding-bottom: 13px;
	}

}



/* Series Selector
========================================================================== */

.md-range .wrapper, .md-range .lrg-wrapper {
  padding-top: 15px;
}

.md-flex > div:nth-child(1) .md-link:after {content: "1";}
.md-flex > div:nth-child(2) .md-link:after {content: "2";}
.md-flex > div:nth-child(3) .md-link:after {content: "3";}
.md-flex > div:nth-child(4) .md-link:after {content: "4";}
.md-flex > div:nth-child(5) .md-link:after {content: "5";}
.md-flex > div:nth-child(6) .md-link:after {content: "6";}
.md-flex > div:nth-child(7) .md-link:after {content: "7";}
.md-flex > div:nth-child(8) .md-link:after {content: "8";}
.md-flex > div:nth-child(9) .md-link:after {content: "X";}
.md-flex > div:nth-child(10) .md-link:after {content: "Z";}
.md-flex > div:nth-child(11) .md-link:after {content: "i";}
.md-flex > div:nth-child(12) .md-link:after {content: "M";}

.md-link {
  background-color: #f2f2f2;
  padding: 40px 10px 10px;
  display: block;
  color: #4d4d4d;
  font-weight: bold;
  position: relative;
  overflow: hidden;
}

.md-link:after {
  display: block;
  content: "";
  color: #e6e6e6;
  font-weight: bold;
  font-size: 70px;
  position: absolute;
  top: 25px;
  right: 4px;
  z-index: 1;
}

.md-link span {
  position: relative;
  z-index: 2;
}

.md-link:hover:after, .md-link:hover {
  color: var(--clr-primary);
  text-decoration: none;
}

.md-heading {  
  background-color: #eee;
  border: 1px solid #ddd;
  color: #1a1a1a;
  display: block;
  width: 100%;
  padding: 19px 10px 17px;
  font-size: 14px;
  font-weight: bold;
  text-transform: none;
  text-align: center;  
  cursor: pointer;
}

.md-mobile {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.md-mobile.active {
  max-height: 10000px;
}

@media (min-width: 1024px) {  
  
  .md-heading {
    display:none !important;
  }

  .md-mobile {
     max-height: 10000px;
  }

  .refine-search .md-mobile {
    margin-top: 20px;
  }
  
}

@media (min-width: 1025px) {

	.md-range .wrapper, .md-range .lrg-wrapper {
	  padding-top: 30px;
	}
	
}

@media (min-width: 1200px) {
  
  .md-link {
    padding: 60px 20px 20px;
  }

  .md-link:after {
    font-size: 90px;
    top: 35px;
    right: 10px;
  }
  
}

/* ========================================================================== 
*  11.1.2 - Main Content - Home Page Nav
* ========================================================================== */

body.home {
  padding-top: 56px;
}


/* Desktop transparent/solid header + logo swap moved to the "Header + Footer (Figma ...)" block at the end of this file (2026-10-15). */

/* Logo */
.bmw-logo-wht {
  display: none;
}

/* ========================================================================== 
*  11.2 - Content Pages
* ========================================================================== */

.center-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.center-content > div {
	max-width: 768px;
	width: 100%;
	padding: 40px 0
}

.full-wrapper .center-content > div {
	padding: 40px 30px
}

.center-img img {
	display: block;
	width: 100%;
	object-fit: cover;
	height: 100%;
}

.centered-carousel .embla__container {
  align-items: center;
}

.centered-carousel .embla__slide {
  width: 50%;
  transform: translateX(10%);
}

.centered-carousel .embla__slide__inner {
  width: 80%;
  filter: grayscale(100%);
}

.centered-carousel .is-selected .embla__slide__inner {
  width: 110%;
  transform: translateX(-13.6%);
  filter: grayscale(0);
}

.wp-block-image {
	margin: 20px 0;
}


.flex-program-benefits div:nth-child(odd) .block-content {
  background-color: #f5f5f5;
}

.program-benefits .block-content {
	background-color: #fff;
	padding: 20px;
	height: 100%;
	border-radius: 8px;
	transition: ease 0.3s all;
}

.program-benefits .block-content:hover {
	box-shadow: 0 0 6px 0px #d6d6d6;
}

.program-benefits .block-content img {
	max-width: 64px;
	width: 100%;
	margin-bottom: 30px;
}

.parallax .sml-wrapper, .parallax .lrg-wrapper, .parallax .wrapper {
  min-height: 360px;
  display: flex;
  align-items: center;
  z-index: 1;
}

.parallax .sml-wrapper > *, .parallax .lrg-wrapper > *, .parallax .wrapper > * {
  margin: 0;
}

.parallax::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0000004f;
}

.parallax span {
  display: block;
}

/* Lease with FASST/Hertz */
.j-center {
  justify-content:center;
  margin:0 auto;
}

.j-center .center-boxes {
  text-align: center;
  border: 1px solid #ebe7e7;
  padding: 15px;
  height: 100%;
}

.j-center .center-boxes img{
  margin: 0 auto;
  margin-bottom: 20px;
  max-width:105px;
}

.page_banner > .wrapper, .page_banner > .sml-wrapper, .page_banner > .lrg-wrapper, .page_banner > .full-wrapper {
  padding: 0; 
}

/* START | Program Benefits */

.page-id-552 .flex > div:nth-child(odd) > .block-column {
  background-color: #F5F5F5;
}

.page-id-552 .flex .block-column img {
  max-width: 70px;
  border-radius: 10px;
  border: 3px solid #528cdd;
  display: block;
  margin-bottom: 20px;
}

.page-id-552 .block-column {
  padding: 30px;
  height: 100%;
  border-radius: 5px;
}

.page-id-552 .block-column p:last-child {
  margin-bottom: 0;
}

/* END | Program Benefits */


@media (min-width:1025px) {
  
  .content p {
    font-size: 16px;
  }

	.program-benefits .block-content {
		padding: 30px;
	}	
  
  
  .parallax .sml-wrapper, .parallax .lrg-wrapper, .parallax .wrapper {
    min-height: 480px;
  }

}

/* ========================================================================== 
*  11.3 - Contact page
* ========================================================================== */

.contact-tabs .inline-list {
	padding-left: 0;
	background-color: #dce4e6;
}

.contact-tabs iframe {
	margin-bottom: 20px;
}

.contact-card {
	background-color: #f5f5f5;
	border: 1px solid #969696;
  text-align: center;
  padding: 30px;
}

.contact-card .contact-logo {
	background-color: #fff;
	text-align: center;
	padding: 10px 20px;
}

.contact-card .contact-stuff {
	padding: 20px;
}

.contact-card .s-header {
	width: auto;
	color: #000;
	cursor: pointer;
	position: relative;
}

.contact-card .s-header:after {
	content: "+";
	position: absolute;
	color: #000;
	right: 2px;
	top: 0;
	z-index: 2;
	font-weight: bold;
}

.contact-card .s-content {
	display: none;
}

.contact-card .s-header.active + .s-content {
	display: block;
}

/* ========================================================================== 
*  11.4 - Team page
* ========================================================================== */

.flex-team {
  display: flex;
}

.block-team {
  text-align: center;
}

.block-team p {
  margin-bottom: 0;
}

.block-team img {
  display: block;
  margin-bottom: 10px;
  width: 100%;
}

/* ========================================================================== 
*  11.4.2 - password Page
* ========================================================================== */

.pwd-bg {
    background: #f1f1f1;
    padding: 70px 30px;
}

.pwd-container {
	background: #fff;
	max-width: 500px;
	width: 100%;
	padding: 30px;
	text-align: center;
	margin: 0 auto;
}

.pwd-container .btn {
	width: 100%;
}

/* ========================================================================== 
*  11.5 - Latest Offers Page
* ========================================================================== */
	
.block-latest-offer {
  position: relative;
  box-shadow: 0 0 3px #fff;
  transition: ease 0.6s all;
  background-color: #E3E3E3;
  height: 100%;
}

.block-latest-offer:hover {
  box-shadow: 0 1px 15px #0000006e;
  background-color: #4D4D4D;
}

.block-latest-offer img {
  display: block;
  width: 100%;
}

.block-latest-offer h2 {
  font-weight: bold;
  margin-bottom: 0px !important;
  padding: 15px;
  font-size: 15px;
  text-transform: none;
  display: flex;
  transition: ease 0.3s all;
  background-color: transparent;
  line-height: 1.3em;
}

.block-latest-offer svg {
  margin: 2px 5px 0 0;
}

.block-latest-offer:hover {
}

.block-latest-offer:hover h2 {
  color: #fff;
}

.block-latest-offer:hover .block-latest-offer svg {
  color: #fff;
}

.block-latest-offer a {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;
  z-index: 1;
}

.block-latest-offer iframe, .block-latest-offer video {
  width: 100%;
  max-height: 329px;
  position: relative;
  z-index: 2;
}

@media (min-width:768px) {
  
  .block-latest-offer img, .block-latest-offer iframe, .block-latest-offer video {  
    height: 330px;
    object-fit: cover;
  }
  
  .block-latest-offer img {  
    object-fit: cover;
  }
  

  
}

/* ========================================================================== 
 *  4.2 - Stock Locator New
 * ========================================================================== */   

   .stock-item, .stock-option, .stock-option .so-select, .keywords-wrapper, .stock-option .so-dropdown, .stock-locator a.si-features span, .stock-locator .btn, .sd-details .sd-content {
    border-radius: 10px;
   }
   
   
   .si-gallery, .sd-heading, .sdc-vehicle-details, .sdc-user-details {
     border-radius: 10px 10px 0 0;
   }
   
   .sd-content.sdd-tabs, .sdc-submit {
   border-radius: 0 0 10px 10px;
   }
   
   .ate-stock-locator #angle-quote {
     display: none;
   }
   
   .ate-stock-locator .si-certified {
     order: 1;
   }
   
   .ate-stock-locator .always-bmw {
     display: none;
     position: relative;
     cursor: pointer;
     font-size: 13px;
     margin-top: -20px;
     margin-bottom: 20px;
   }
   
   .ate-stock-locator .sl-stock-details.certified .ab-certified, .ate-stock-locator .sl-stock-details:not(.certified) .ab-used {
     display: block;
   } 
   
   .ate-stock-locator .always-bmw div {
   display: none;
   background: #fff;
   border: 1px solid var(--clr-primary);
   }
   
   .ate-stock-locator .select-dp.always-bmw div {
   border: 1px solid var(--clr-primary);
   }
   
   .ate-stock-locator .always-bmw:hover div {
   display: block;
   position: absolute;
   top: 74px;
   left: 0;
   right: 0;
   z-index: 221;
   margin: 0;
   width: calc(100% - 40px);
   box-shadow: 0px 1px 3px 0 rgb(0 0 0 / 80%);
   }
   
   .ate-stock-locator .bmw-cert {
   background-color: var(--clr-primary);
   color: #fff;
   padding: 16px 20px;
   margin: 0;
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   }
   
   @media (min-width:1200px) {
   .ate-stock-locator .always-bmw {
     margin-top: -30px;
     margin-bottom: 30px;
   }
   }
   
   .ate-stock-locator .si-title .year, .ate-stock-locator .sd-title .year, .ate-stock-locator .v_manufacture, .ate-stock-locator .user-account, .ate-stock-locator .sd-share-mobile > div:first-child, .ate-stock-locator .finance-disclaimer, .ate-stock-locator .sbft-price .sbf-title, .ate-stock-locator .sbft-price .sbf-suggestions, .ate-stock-locator .stock-locator a.sd-fin-disc.btn-fancy, .ate-stock-locator .sdc-vehicle-details .sdc-certified, .ate-stock-locator .v_dereg {
   display: none;
   }
   
   .ate-stock-locator [type="checkbox"]:not(:checked):before, .ate-stock-locator [type="checkbox"]:checked:before {
   content: none;
   }
   
   .featured-cars .cow {
   height: 100%;
   }
   
   .featcars .embla__button {
   bottom: -70px;
   }
   
   .ate-stock-locator .sd-price {
     font-size: 28px;
   }
   
   .ate-stock-locator .sd-price .sl-highlight {
     color: #000;
   }
   
   .ate-stock-locator .sd-enquiry {
     display: flex;
     flex-direction: column;
   }
   
   .ate-stock-locator .sd-external-buttons {
     order: 1;
     margin-top: 20px;
     margin-bottom: 0;
   }
   
   .ate-stock-locator a.sic-bottom img {
     max-height: 50px;
   }
   
   .sd-enquiry #mobile-required, .sd-enquiry #email-required {
       display: inline-flex !important;
   }
   
   .mini-search {
     z-index: 10;
   }
   
   
   .mini-search #so-year, .mini-search #so-location, .mini-search #so-more_filters {
     display: none;
   }
   
   .stock-option .so-select {
   height: 100%;
   }
   
   /* ========================================================================== 
* LIFESTYLE HUB TEMPLATE STYLES
* ========================================================================== */

/* Wrap and Grid Layout */
.lh-wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 30px;
}
.lh-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
}
.lh-section-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
}

@media (min-width: 1025px) {
    .lh-wrap {
        padding: 80px 50px;
    }
    .lh-grid {
        flex-direction: row;
        gap: 60px;
    }
    .lh-latest {
        flex: 2;
    }
    .lh-popular {
        flex: 1;
    }
}

/* Hero Slider */
.lh-hero {
    position: relative;
    width: 100%;
}
.lh-hero-slider {
    position: relative;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #262626;
}
@media (min-width: 1025px) {
    .lh-hero-slider {
        height: 550px;
    }
}
.lh-hero-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
}
.lh-hero-slider__slide.is-active {
    opacity: 1;
    z-index: 2;
}
.lh-hero-slider__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.lh-hero-slider__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 60px 30px 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
}
.lh-hero-slider__meta {
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--clr-primary);
    font-weight: 700;
}
.lh-hero-slider__title {
    color: #fff;
    margin: 0;
    font-size: 28px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
@media (min-width: 1025px) {
    .lh-hero-slider__title {
        font-size: 42px;
    }
}
.lh-hero-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    font-size: 30px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s ease;
    border-radius: 50%;
}
.lh-hero-slider__nav:hover {
    background: var(--clr-primary);
}
.lh-hero-slider__nav.is-prev { left: 20px; }
.lh-hero-slider__nav.is-next { right: 20px; }

/* Latest Cards */
.lh-latest__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
@media (min-width: 768px) {
    .lh-latest__cards {
        grid-template-columns: 1fr 1fr;
    }
}
.lh-card__media img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.4s ease;
}
.lh-card__media {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
}
.lh-card:hover .lh-card__media img {
    transform: scale(1.05);
}
.lh-card__cat {
    color: var(--clr-primary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.lh-card__title {
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.3em;
}
.lh-card__title a {
    color: #000;
}
.lh-card__title a:hover {
    color: var(--clr-primary);
    text-decoration: none;
}
.lh-card__excerpt {
    font-size: 15px;
    color: #666;
    margin-bottom: 15px;
}
.lh-card__meta {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
}

/* Popular List */
.lh-popular__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.lh-popular-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.lh-popular-item__thumb {
    flex: 0 0 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
}
.lh-popular-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}
.lh-popular-item:hover .lh-popular-item__thumb img {
    opacity: 0.8;
}
.lh-popular-item__cat {
    color: var(--clr-primary);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 5px;
}
.lh-popular-item__title {
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 1.3em;
}
.lh-popular-item__title a {
    color: #000;
}
.lh-popular-item__title a:hover {
    color: var(--clr-primary);
    text-decoration: none;
}
.lh-popular-item__meta {
    font-size: 11px;
    color: #999;
}

.ate-sold .stock-item .si-gallery a,
.ate-sold .stock-item .si-title,
.ate-sold .stock-item .si-price-category,
.ate-sold .stock-item .btn-primary,
.ate-sold .stock-item .si-location,
.ate-sold .stock-item .sl-save-stock,
.ate-sold .stock-item .si-myfeatures {
    pointer-events: none;
    cursor: default;
}

.ate-sold .stock-item .si-price-category{
    display: none;
}


/* ==========================================================================
*  BYD Certified – Figma rebuild (2026-10-15)
*  Tokens + overrides for the Figma home design. Appended last so it wins
*  over the v1 rules above without editing them.
* ========================================================================== */

:root {
	--clr-primary: #1E334E;
	--clr-primary-lt: #2E4A6E;
	--clr-primary-dk: #152538;
	--clr-secondary: #686D71;
	--clr-secondary-lt: #868B90;
	--clr-secondary-dk: #4A4F54;
	--clr-base: #4A4F54;
	--clr-base-lt: #868B90;
	--clr-base-dk: #1E334E;
	--clr-grey: #F4F5F6;
	--clr-grey-lt: #EEF1F5;
	--clr-grey-dk: #E3E5E8;
	--clr-star: #F5B400;
	--form-bg: #fff;
	--form-lb: #E3E5E8;
	--form-text: #1E334E;
	--footer-bg: #1E334E;
	--footer-hd: #fff;
	--footer-text: rgba(255,255,255,.78);
	--ff-main: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
	--shadow-card: 0 12px 32px rgba(16,24,40,.08);
	--icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* --- Base type --- */
html {
	font-size: 16px;
}

body {
	color: var(--clr-base);
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	color: var(--clr-primary);
	font-weight: 700;
	text-transform: none;
	line-height: 1.15;
}

h4, .h4 {
	font-weight: 600;
}

@media (min-width: 1025px) {
	h1, .h1 { font-size: 48px; line-height: 56px; letter-spacing: -.25px; }
	h2, .h2 { font-size: 36px; line-height: 44px; letter-spacing: -.25px; }
	h3, .h3 { font-size: 24px; line-height: 30px; }
	h4, .h4 { font-size: 20px; line-height: 26px; }
}

@media (min-width: 1200px) {
	.wrapper { max-width: 1800px; }
	.wrapper, .lrg-wrapper { padding: 120px 60px; }
}

.grey-bg {
	background-color: var(--clr-grey-lt);
}

/* --- Grid (ported from the v2 base) ---
   .grid>* resets the v1 ".x-cols>*{width}" rules, which match any parent. */
.grid {
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(0, 1fr);
}

.grid > * {
	width: auto;
	min-width: 0;
	margin: 0;
}

.grid.m-two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
	.grid.t-two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid.t-three-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.grid { gap: 24px; }
	.grid.l-two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid.l-three-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid.l-four-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.grid.d-two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid.d-three-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid.d-four-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.grid.d-five-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.section-header {
	display: grid;
	gap: 12px;
	margin-bottom: 32px;
}

.section-header > * {
	margin: 0;
}

@media (min-width: 1025px) {
	.section-header { margin-bottom: 48px; }
}

/* --- Buttons: pill style --- */
.btn, a.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	padding: 18px 32px;
	border-radius: 999px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: .2px;
	text-transform: none;
}

.btn-primary, a.btn-primary {
	background: var(--clr-primary);
	border-color: var(--clr-primary);
	color: #fff;
}

.btn-primary:hover, a.btn-primary:hover {
	background: var(--clr-primary-lt);
	border-color: var(--clr-primary-lt);
	color: #fff;
}

.btn-primary:active, a.btn-primary:active {
	background: var(--clr-primary-dk);
}

/* New: white pill for dark backgrounds (hero / welcome) */
.btn-white, a.btn-white, .dark-bg a.btn-white {
	background: #fff;
	border: 1px solid #fff;
	color: var(--clr-primary-dk);
}

.btn-white:hover, a.btn-white:hover {
	background: var(--clr-grey-lt);
	color: var(--clr-primary-dk);
}

/* New: frosted-glass pill for dark backgrounds */
.btn-glass, a.btn-glass {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.6);
	color: #fff;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.btn-glass:hover, a.btn-glass:hover {
	background: rgba(255,255,255,.18);
	color: #fff;
}

/* New: trailing arrow icon, takes the button text colour */
.btn-arrow::after,
.ate-form .form-submit::after {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
}

.btn-flex {
	gap: 16px;
	flex-wrap: wrap;
}

.btn-flex > *:first-child {
	margin: 0;
}

/* --- Home hero (ACF slider) --- */
.home .banner {
	background-color: var(--clr-primary-dk);
}

.home .banner .embla__slide__inner {
	position: relative;
}

.home .banner .embla__slide__inner picture img {
	display: block;
	width: 100%;
}

@media (min-width: 768px) {

	.home .banner .embla__slide__inner::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			linear-gradient(180deg, rgba(30,51,78,.55) 0, rgba(30,51,78,0) 200px),
			linear-gradient(180deg, rgba(13,24,40,0) 68%, rgba(13,24,40,.75) 100%),
			linear-gradient(90deg, rgba(13,24,40,.88) 0%, rgba(13,24,40,.55) 38%, rgba(13,24,40,0) 70%);
	}

	.home .banner .banner-layer {
		z-index: 2;
		left: 8.85%;
		top: 34.8%;
		max-width: 620px;
		background: none;
		height: auto;
		padding: 0;
	}

	.home .banner .embla__dots__container {
		display: block;
		position: absolute;
		z-index: 2;
		left: 8.85%;
		bottom: 90px;
	}

	.home .banner .embla__dots {
		gap: 8px;
		justify-content: flex-start;
	}

	.home .banner .embla__dot {
		width: 24px;
		height: 4px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 2px;
		background: rgba(255,255,255,.4);
		transition: width .2s;
	}

	.home .banner .embla__dot.is-selected {
		width: 48px;
		background: #fff;
	}

}

@media (min-width: 1200px) {
	.home .banner .banner-layer { top: 34.8%; }
}

.home .banner .banner-text .h2 {
	color: #fff;
	font-weight: 700;
	text-transform: none;
	text-shadow: none;
	letter-spacing: -.5px;
	font-size: 32px;
	line-height: 38px;
	margin-bottom: 28px;
}

.home .banner .banner-text p {
	color: #fff;
}

@media (min-width: 768px) { .home .banner .banner-text .h2 { font-size: 48px; line-height: 56px; } }
@media (min-width: 1200px) { .home .banner .banner-text .h2 { font-size: 64px; line-height: 72px; } }
@media (min-width: 1700px) { .home .banner .banner-text .h2 { font-size: 76px; line-height: 84px; } }

.home .banner .embla__button {
	z-index: 2;
	width: 56px;
	height: 56px;
	padding: 16px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.3);
	background: rgba(255,255,255,.1);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	fill: #fff;
	color: #fff;
	transform: translateY(-50%);
}

.home .banner .embla__button--prev { left: 40px; }
.home .banner .embla__button--next { right: 40px; }

/* Single slide: hide dots + arrows (they come back if a 2nd slide is enabled) */
.home .banner .embla:not(:has(.embla__slide + .embla__slide)) .embla__dots__container,
.home .banner .embla:not(:has(.embla__slide + .embla__slide)) .embla__arrows { display: none; }

@media (max-width: 767px) {

	.home .banner .banner-layer {
		background: var(--clr-primary);
		height: auto;
		padding: 32px 20px;
	}

	.home .banner .embla__button { display: none; }

}

/* --- Google rating strip --- */
.google-rating-strip {
	background-color: var(--clr-primary-dk);
}

.google-rating-strip .wrapper,
.google-rating-strip .wrapper.t-center {
	padding-top: 24px;
	padding-bottom: 24px;
}

.flex-google-rating {
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.google-rating-strip .flex-google-rating p {
	margin: 0 10px 0 0;
	padding-right: 20px;
	border-right: 1px solid rgba(255,255,255,.25);
	font-size: 16px;
	line-height: 20px;
	letter-spacing: .64px;
	color: rgba(255,255,255,.7);
}

.google-rating-strip .flex-google-rating span {
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
	color: #fff;
}

.flex-google-rating img {
	margin: 0;
	height: 18px;
	width: auto;
}

/* --- Find your next vehicle: mini search pill --- */
.search-our-stock {
	background-color: var(--clr-grey-lt);
}

.search-our-stock label {
	background: none;
	padding: 0;
}

.mini-search {
	--bg-color: var(--clr-primary);
	--text-color: #fff;
}

.mini-search .stock-options {
	display: flex;
	align-items: center;
	gap: 0;
	max-width: 1157px;
	margin: 0 auto;
	padding: 8px;
	background: #fff;
	border: 0;
	border-radius: 999px;
	box-shadow: var(--shadow-card);
}

/* Stock plugin CSS fixes the pill at 74px with no bottom padding, so the button sat 9px from the top
   and 1px from the bottom: let it size to the content and pad evenly to centre the button */
.stock-locator.mini-search .stock-options {
	height: auto;
	padding: 8px;
}

/* Our CSS shows the in-pill button at every width, so the plugin's second button below the pill
   (base theme only hides it from 1200px) duplicated it on tablet/mobile */
.mini-search .ms-btn-container {
	display: none;
}

/* Stacked layout (under 1200px, plugin sets the pill to display:block so gap does nothing):
   8px between rows to match the 8px pill padding, none under the button (was 20px + 8px) */
@media (max-width: 1199px) {
	.stock-locator.mini-search .stock-option { margin-bottom: 8px; }
	.stock-locator.mini-search .stock-option.ms-btn { margin-bottom: 0; }
}

.mini-search #so-series, .mini-search #so-make, .mini-search #so-budget, .mini-search .stock-option.ms-btn {
	display: block;
	flex: 1 1 0;
	max-width: none;
}

.mini-search .stock-option, .mini-search .stock-option .so-select,
.mini-search .stock-option.active, .mini-search .stock-option.active .so-select {
	border-radius: 999px;
	border-color: transparent;
}

.mini-search .stock-option .so-select {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 28px 0 32px;
}

.mini-search #so-series .so-select {
	position: relative;
}

.mini-search #so-series .so-select::after {
	content: "";
	position: absolute;
	right: 0;
	top: 16px;
	width: 1px;
	height: 32px;
	background: var(--clr-grey-dk);
}

.mini-search .stock-option:not(.so-more-filters):after {
	display: none;
}

.mini-search .stock-option .so-select > div {
	display: flex;
	gap: 6px;
	align-items: baseline;
}

.mini-search .stock-option .so-select label,
.mini-search .stock-option .value,
.mini-search .stock-option.active .value {
	margin: 0;
	font-size: 20px;
	line-height: 26px;
	font-weight: 400;
	color: var(--clr-primary);
}

.mini-search .stock-option .so-select svg {
	width: 20px;
	height: 20px;
	fill: var(--clr-primary);
}

.mini-search a.sl-mini-search-btn {
	width: 100%;
	height: 64px;
	padding: 0 24px;
}

@media (min-width: 1200px) {
	.mini-search .stock-option .so-select label,
	.mini-search .stock-option .value { font-size: 24px; line-height: 30px; }
}

@media (max-width: 767px) {

	.mini-search .stock-options {
		flex-direction: column;
		border-radius: 24px;
		gap: 8px;
	}

	.mini-search #so-series, .mini-search #so-make, .mini-search #so-budget, .mini-search .stock-option.ms-btn {
		width: 100%;
	}

	.mini-search #so-series .so-select::after { display: none; }

}

/* New: model tile link (md-link carries BMW numerals in :after, so not reused) */
.model-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 88px;
	padding: 0 20px 0 28px;
	background: #fff;
	border: 1px solid var(--clr-grey-dk);
	border-radius: 16px;
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
	color: var(--clr-primary);
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s;
}

.model-tile::after {
	content: "";
	flex: 0 0 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--clr-grey-lt) center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E334E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.model-tile:hover {
	border-color: var(--clr-primary);
	box-shadow: var(--shadow-card);
	color: var(--clr-primary);
}

.model-tiles {
	margin-top: 40px;
}

@media (max-width: 767px) {

	.model-tile {
		min-height: 64px;
		padding: 0 10px 0 16px;
		border-radius: 12px;
		font-size: 16px;
		line-height: 20px;
	}

	.model-tile::after {
		flex-basis: 28px;
		height: 28px;
		background-size: 14px;
	}

}

/* --- Featured cars (cow cards) --- */
.featured-cars .cow,
.featcars .cow {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.featcars .cow img {
	width: 100%;
	height: 300px;
	max-height: none;
	object-fit: cover;
}

.featcars .cow h2 {
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
	color: var(--clr-primary);
	padding: 24px 24px 8px;
	margin: 0;
}

.featcars .cow h3 {
	padding: 0 24px;
}

/* Figma 179:361: rows inset 24px, bottom divider only */
.featcars .cow .cow-il li {
	margin: 0 24px;
	padding: 10px 0;
	border-top: 0;
	border-bottom: 1px solid var(--clr-grey-dk);
	font-size: 14px;
	line-height: 20px;
	color: var(--clr-secondary-lt);
}

.featcars .cow .cow-il li > *:last-child {
	font-weight: 600;
	color: var(--clr-primary);
}

.featcars .cow .cow-il li.cow-price-cat,
.featcars .cow .cow-il li.cow-price-cat > *:last-child {
	font-size: 22px;
	line-height: 26px;
	font-weight: 700;
	color: var(--clr-primary);
}

.featcars .cow .cow-il li.cow-price-cat > *:first-child {
	font-size: 14px;
	font-weight: 400;
	color: var(--clr-secondary-lt);
	align-self: center;
}

/* Figma 179:361: 56px pill, Title Case, arrow inline (equal-height sets children to column) */
.featcars .cow .btn-primary {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin: 0 24px 24px;
	text-transform: none;
}

.featcars .cow-content {
	padding-bottom: 16px;
}

.featcars .cow .btn-primary::after {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
}

.featcars .embla__dots {
	gap: 8px;
	margin-top: 32px;
}

.featcars .embla__dot {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--clr-secondary);
	transition: width .2s;
}

.featcars .embla__dot.is-selected {
	width: 28px;
	background: var(--clr-primary);
}

/* --- Welcome / BYD Certified programme ---
   Background image = media ID 1791 (/wp-content/uploads/byd-home-welcome-1920x1073-1.webp). */
.welcome {
	position: relative;
	background-color: var(--clr-primary-dk);
	background-image: url("/wp-content/uploads/byd-home-welcome-1920x1073-1.webp");
	background-size: cover;
	background-position: center right;
	color: #fff;
}

.welcome::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(13,24,40,.92) 0%, rgba(13,24,40,.7) 45%, rgba(13,24,40,.1) 80%);
}

.welcome > * {
	position: relative;
	z-index: 1;
}

.welcome-content {
	display: grid;
	gap: 32px;
	max-width: 600px;
}

.welcome-content > * {
	margin: 0;
}

.welcome .welcome-logo {
	width: 300px;
	max-width: 100%;
	height: auto;
}

.welcome p {
	color: #fff;
	font-size: 18px;
	line-height: 26px;
}

@media (min-width: 1200px) {
	.welcome { min-height: 1073px; display: flex; align-items: center; }
	.welcome > .wrapper { width: 100%; }
	.welcome p { font-size: 24px; line-height: 30px; }
}

@media (max-width: 1024px) {
	.welcome { background-image: url("/wp-content/uploads/byd-home-welcome-1920x1073-1.webp") !important; }
}

/* New: frosted-glass benefit card for the programme checklist */
.benefit-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 16px;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	text-align: center;
}

.benefit-card img {
	width: 44px;
	height: 44px;
}

.benefit-card p,
.welcome .benefit-card p {
	margin: 0;
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	color: #fff;
}

/* Stock plugin CSS sets Roboto (not loaded) + square buttons: bring it onto the theme font/pill */
.stock-locator, .stock-locator * {
	font-family: var(--ff-main);
}

.stock-locator.mini-search a.sl-mini-search-btn {
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	gap: 4px;
}

.search-our-stock .featured-cars {
	margin-top: 40px;
}

.featcars .cow .cow-il li.cow-price-cat span:nth-child(2) {
	gap: 8px;
	align-items: baseline;
}

@media (max-width: 767px) {
	.search-our-stock .featured-cars { overflow-x: hidden; }
}

/* WordPress core's standard visually-hidden class (missing from this theme):
   keeps the home h1 for SEO/screen readers where the Figma shows a logo instead */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Contact Us (Figma 12) ---
   Restyles the base contact-card / contact-iframe / ate-form blocks; no new classes. */
.contact-card {
	--icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
	--icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 16.4v2.8a1.9 1.9 0 0 1-2 1.9 18.6 18.6 0 0 1-8.1-2.9 18.3 18.3 0 0 1-5.6-5.6A18.6 18.6 0 0 1 1.4 4.5 1.9 1.9 0 0 1 3.3 2.5h2.8a1.9 1.9 0 0 1 1.9 1.6c.1.9.4 1.8.7 2.7a1.9 1.9 0 0 1-.4 2L7 10a15 15 0 0 0 5.6 5.6l1.2-1.2a1.9 1.9 0 0 1 2-.4c.9.3 1.8.6 2.7.7a1.9 1.9 0 0 1 1.5 1.7z'/%3E%3C/svg%3E");
	--icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	height: 100%;
	padding: 40px 24px;
	background: linear-gradient(135deg, var(--clr-primary) 0%, #0D1828 100%);
	border: 0;
	border-radius: 24px;
	color: rgba(255,255,255,.9);
	text-align: left;
}

/* soft blue glow behind the details */
.contact-card::before {
	content: "";
	position: absolute;
	top: -300px;
	left: 200px;
	width: 700px;
	height: 700px;
	background: radial-gradient(closest-side, rgba(61,122,204,.35), rgba(61,122,204,0));
	pointer-events: none;
}

.contact-card > * {
	position: relative;
}

.contact-card .contact-logo {
	width: 180px;
	height: auto;
	padding: 0;
	background: none;
}

.contact-card h2 {
	margin: 0;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(255,255,255,.15);
	color: #fff;
	font-size: 30px;
	line-height: 38px;
	letter-spacing: -.25px;
	text-transform: uppercase;
}

.contact-card .contact-stuff {
	display: grid;
	gap: 20px;
	width: 100%;
	padding: 0;
}

.contact-card .contact-stuff > * {
	position: relative;
	margin: 0;
	padding-left: 38px;
}

.contact-card .contact-stuff > *::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	width: 24px;
	height: 24px;
	background-color: #fff;
	-webkit-mask: var(--icon-pin) center / contain no-repeat;
	mask: var(--icon-pin) center / contain no-repeat;
}

.contact-card .contact-stuff > :nth-child(2)::before {
	-webkit-mask-image: var(--icon-phone);
	mask-image: var(--icon-phone);
}

.contact-card .contact-stuff > :nth-child(3)::before {
	-webkit-mask-image: var(--icon-clock);
	mask-image: var(--icon-clock);
}

.contact-card .contact-stuff > p:first-child {
	color: rgba(255,255,255,.85);
	font-size: 20px;
	line-height: 30px;
}

.contact-card h3,
.contact-card h4 {
	margin: 0 0 4px;
	font-weight: 600;
	color: rgba(255,255,255,.6);
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
}

.contact-card .contact-stuff div p {
	margin: 0;
	font-size: 18px;
	line-height: 28px;
}

.contact-card .contact-stuff a {
	color: rgba(255,255,255,.9);
	font-size: 22px;
	line-height: 32px;
	font-weight: 600;
}

.contact-card .btn {
	margin-top: 20px;
}

.contact-iframe {
	height: 100%;
	min-height: 360px;
	overflow: hidden;
	border-radius: 24px;
	background: #E8ECF0;
}

.contact-iframe iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 360px;
	border: 0;
}

/* Build check: the row stacks at ≤1024, so space the map off the contact card */
@media (max-width: 1024px) {
	.contact-iframe { margin-top: 24px; }
}

@media (min-width: 1200px) {
	.contact-card { padding: 56px; }
	.contact-card h2 { font-size: 40px; line-height: 48px; }
	.contact-card .contact-stuff > p:first-child { font-size: 24px; }
	.contact-iframe, .contact-iframe iframe { min-height: 580px; }
}

/* General Enquiry form (ate-form plugin markup): white card, labels above 56px fields */
.ate-form {
	margin-top: 40px;
	padding: 32px 20px;
	background: #fff;
	border-radius: 24px;
	box-shadow: var(--shadow-card);
}

.ate-form .form-group {
	padding-top: 28px;
	margin-bottom: 28px;
}

.ate-form .form-control,
.ate-form .select-container {
	height: 56px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--clr-grey-dk);
	border-radius: 12px;
	color: var(--clr-primary);
	font-size: 16px;
	line-height: 22px;
}

.ate-form .select-container .select-hide {
	height: 54px;
	color: var(--clr-primary);
	font-size: 16px;
}

.ate-form textarea.form-control {
	height: 128px;
	padding: 16px 20px;
}

/* labels sit fixed above the field (no floating placeholder) */
.ate-form .form-group label,
.ate-form .form-control.empty + label,
.ate-form .form-group .select-container + label,
.ate-form .form-phone .form-control.empty + label.ph-number {
	top: 0;
	left: 0;
	padding: 0;
	opacity: 1;
	color: var(--clr-primary);
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
}

.ate-form .form-phone .form-control {
	padding-left: 60px;
}

.ate-form .form-group label.pre-fil {
	top: 28px;
	left: 0;
	height: 56px;
	padding: 0 20px;
	transform: none;
	color: var(--clr-primary);
	font-size: 16px;
	line-height: 56px;
	font-weight: 400;
}

.ate-form .form-tc {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	color: var(--clr-primary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
}

.ate-form .checkbox-group .container {
	align-items: flex-start;
	min-height: 20px;
	margin-bottom: 16px;
	padding-left: 32px;
	color: var(--clr-secondary-dk);
	font-size: 14px;
	line-height: 21px;
}

.ate-form .checkmark {
	top: 1px;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--clr-secondary);
	border-radius: 6px;
}

.ate-form .checkbox-group .checkmark:after {
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border-width: 0 2px 2px 0;
}

.ate-form .form-submit {
	margin: 12px 0 0;
}

.ate-form .form-mando {
	margin: 0;
	color: var(--clr-secondary);
	font-size: 14px;
}

.center-img img {
	border-radius: 24px;
}

@media (min-width: 1025px) {
	.ate-form { padding: 64px; }
	.ate-form .form-submit { width: auto; }
}


/* ==========================================================================
*  Sell My Car (Figma 04, 2026-10-15)
*  In-content banners (hero + CTA), 3-step list, trade-in form grid,
*  "why sell" cards, FAQ list.
* ========================================================================== */

/* --- In-content banners: .banner placed in the page content (not the home slider).
   The layer fills the image and centres the text on the left. --- */
.banner > .wrapper > .banner-layer {
	height: auto;
	padding: 32px 20px;
	background: var(--clr-primary-dk);
}

.banner > .wrapper > .banner-layer .h2,
.banner > .wrapper > .banner-layer p {
	color: #fff;
	text-transform: none;
	text-shadow: none;
}

.banner > .wrapper > .banner-layer .h2 {
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
	margin-bottom: 16px;
}

.banner > .wrapper > .banner-layer p {
	font-size: 18px;
	line-height: 26px;
	margin-bottom: 24px;
}

.banner > .wrapper > .banner-layer p:last-child {
	margin-bottom: 0;
}

/* New: banner-light = navy text over a white fade (the base banner assumes white text on a dark image) */
.banner-light > .wrapper > .banner-layer {
	background: var(--clr-grey-lt);
}

.banner-light > .wrapper > .banner-layer .h2,
.banner-light > .wrapper > .banner-layer p {
	color: var(--clr-primary);
}

@media (min-width: 768px) {
	.banner > .wrapper > .banner-layer {
		top: 0;
		bottom: 0;
		left: 0;
		max-width: none;
		display: flex;
		align-items: center;
		padding: 0 6.25%;
		background: linear-gradient(90deg, rgba(15,15,15,.9) 0%, rgba(13,24,40,.55) 40%, rgba(13,24,40,0) 75%);
	}

	.banner > .wrapper > .banner-layer .banner-text {
		max-width: 720px;
	}

	.banner > .wrapper > .banner-layer .h2 {
		font-size: 36px;
		line-height: 44px;
		margin-bottom: 24px;
	}

	.banner > .wrapper > .banner-layer p {
		font-size: 20px;
		line-height: 30px;
		margin-bottom: 32px;
	}

	.banner > .wrapper > .banner-layer .btn {
		max-width: none;
		width: auto;
		min-width: 280px;
	}

	.banner-light > .wrapper > .banner-layer {
		background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.92) 30%, rgba(255,255,255,0) 68%);
	}

	.banner-light > .wrapper > .banner-layer .banner-text {
		max-width: 840px;
	}
}

@media (min-width: 1200px) {
	.banner > .wrapper > .banner-layer .h2 {
		font-size: 48px;
		line-height: 56px;
	}

	.banner > .wrapper > .banner-layer p {
		font-size: 24px;
		line-height: 34px;
	}

	.banner-light > .wrapper > .banner-layer .h2 {
		font-size: 60px;
		line-height: 70px;
		letter-spacing: -.5px;
	}
}

/* --- New: step-list = numbered steps with an icon rail (no steps block in the base theme) --- */
h2:has(+ .step-list) {
	margin-bottom: 40px;
}

.content .step-list {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: inherit;
}

.step-list li {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	column-gap: 28px;
	align-content: start;
	min-height: 160px;
	padding-bottom: 24px;
}

.step-list li:last-child {
	min-height: 0;
	padding-bottom: 0;
}

.step-list li::after {
	content: "";
	position: absolute;
	top: 64px;
	bottom: 0;
	left: 31px;
	width: 2px;
	background: var(--clr-grey-dk);
}

.step-list li:last-child::after {
	display: none;
}

.step-list img {
	grid-row: 1 / span 3;
	width: 64px;
	height: 64px;
	padding: 18px;
	border-radius: 50%;
	background: var(--clr-primary);
}

.step-list li > * {
	grid-column: 2;
}

.step-list li > img {
	grid-column: 1;
}

.step-list span {
	color: var(--clr-secondary);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.step-list .h4 {
	margin: 4px 0 8px;
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
}

.step-list p {
	margin: 0;
	color: var(--clr-secondary-dk);
	font-size: 17px;
	line-height: 26px;
}

@media (min-width: 1200px) {
	h2:has(+ .step-list) { font-size: 40px; line-height: 48px; }
}

/* --- Trade-in form (ate-form plugin markup): 2-col grid, full-width rows for heading, remarks, consents, submit --- */
#request-trade-in-form {
	margin-top: 0;
}

#request-trade-in-form > .flex {
	display: contents;
}

#request-trade-in-form > .flex > * {
	width: auto;
	margin: 0;
}

#request-trade-in-form > .flex > :not(.form-group) {
	padding: 0;
}

#request-trade-in-form .form-group {
	margin-bottom: 24px;
}

#request-trade-in-form .form-group.row {
	display: block;
	margin-left: 0;
	margin-right: 0;
}

#request-trade-in-form .form-group.row > * {
	width: auto;
	max-width: none;
	padding: 0;
}

#request-trade-in-form > h4 {
	margin: 8px 0 20px;
	font-size: 20px;
	line-height: 26px;
}

#request-trade-in-form .lta-access-code {
	margin: 8px 0 0;
	color: var(--clr-secondary-lt);
	font-size: 14px;
	line-height: 20px;
}

#request-trade-in-form .lta-access-code small {
	font-size: inherit;
}

#request-trade-in-form .lta-access-code a {
	color: inherit;
	text-decoration: underline;
}

@media (min-width: 1025px) {
	#request-trade-in-form {
		display: grid;
		grid-template-columns: minmax(0, 162fr) minmax(0, 181fr) minmax(0, 67fr) minmax(0, 272fr);
		column-gap: 24px;
		padding: 56px;
	}

	#request-trade-in-form > h4,
	#request-trade-in-form > .form-group:has(textarea),
	#request-trade-in-form > .form-tc,
	#request-trade-in-form > .checkbox-group,
	#request-trade-in-form > .form-group:has(.form-submit) {
		grid-column: 1 / -1;
	}

	#request-trade-in-form > .form-tc {
		justify-self: start;
	}

	#request-trade-in-form .form-submit {
		min-width: 320px;
	}
}

/* Figma 04 rows for the reordered form 11 (2026-10-21): Salutation | First | Last, then Phone | Handover,
   Trade-in | Rego, LTA | Mileage. The 4 columns (162 | 181 | 67 | 272) give 162 | 272 | 272 and two halves. */
@media (min-width: 768px) {
	#request-trade-in-form > .flex > :has(#name) { grid-column: 2 / 4; }
	#request-trade-in-form > .flex > :has(#lname) { grid-column: 4; }
	#request-trade-in-form > .flex > :has(#phone),
	#request-trade-in-form > :has(#trade-options),
	#request-trade-in-form > :has(#lta) { grid-column: 1 / 3; }
	#request-trade-in-form > :has(#ho-date),
	#request-trade-in-form > :has(#rego),
	#request-trade-in-form > :has(#mileage) { grid-column: 3 / 5; }
}

/* Contact General Enquiry (Figma 12): Salutation | First | Last, Phone | Email; intro, message and
   consents full width; Submit left, mandatory note right. 4 columns: 218 | 215 | 97 | 336. */
@media (min-width: 1025px) {
	#contact-form {
		display: grid;
		grid-template-columns: minmax(0, 218fr) minmax(0, 215fr) minmax(0, 97fr) minmax(0, 336fr);
		column-gap: 24px;
	}

	#contact-form > .flex { display: contents; }

	#contact-form > .flex > * {
		width: auto;
		margin: 0;
		padding: 0;
	}

	#contact-form > .flex > :first-child { grid-column: 2 / 4; }
	#contact-form > .flex > :last-child { grid-column: 4; }
	#contact-form > .form-group:has(#phone) { grid-column: 1 / 3; }
	#contact-form > .form-group:has(#email) { grid-column: 3 / 5; }

	#contact-form > p:not(.form-mando),
	#contact-form > .form-group:has(#message),
	#contact-form > .form-tc,
	#contact-form > .checkbox-group {
		grid-column: 1 / -1;
	}

	#contact-form > .form-tc { justify-self: start; }
	#contact-form > .form-group:has(.form-submit) { grid-column: 1 / 3; }

	#contact-form > .form-mando {
		grid-column: 3 / 5;
		align-self: center;
		justify-self: end;
	}
}

/* --- "Why sell" cards: q-text as a white card with an icon chip --- */
.grid > .q-text {
	padding: 36px;
	background: #fff;
	border-radius: 20px;
}

.grid > .q-text img {
	display: block;
	width: 64px;
	height: 64px;
	margin-bottom: 24px;
	padding: 18px;
	border-radius: 16px;
	background: var(--clr-grey-lt);
}

.grid > .q-text .h4 {
	margin-bottom: 12px;
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
}

.grid > .q-text p {
	margin: 0;
	color: var(--clr-secondary-dk);
	font-size: 16px;
	line-height: 24px;
}

/* --- FAQ list: grey rounded panel, question left, icon right --- */
.faqs {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 20px;
	background: var(--clr-grey);
	border-radius: 24px;
}

.faqs .accord-container {
	border-bottom: 1px solid #99A1AF;
}

.faqs .accord-container:last-child {
	border-bottom: 0;
}

.faqs .accord-head {
	flex-direction: row-reverse;
	align-items: center;
	gap: 20px;
	padding: 24px 0;
	color: #101828;
	font-size: 18px;
	line-height: 26px;
}

.faqs .accord-head svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	fill: #101828;
}

.faqs .accord-content,
.faqs .accord-container.active .accord-content {
	padding-left: 0;
	padding-right: 0;
	border-bottom: 0;
}

.faqs .accord-content p {
	color: var(--clr-secondary-dk);
	font-size: 17px;
	line-height: 26px;
}

@media (min-width: 1025px) {
	.faqs { padding: 20px 40px; }
	.faqs .accord-head { font-size: 24px; line-height: 30px; }
}


/* ==========================================================================
*  Book a Test Drive (Figma 07, 2026-10-15)
*  Banner = ACF Page Banner. Centred intro + the ate-form "Test Drive Form" card; no new classes.
*  ========================================================================== */
.page-id-265 .section-header {
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
	gap: 20px;
}

.page-id-265 .section-header p {
	color: var(--clr-secondary-dk);
}

#test-drive-form {
	max-width: 1200px;
	margin: 0 auto;
}

#test-drive-form > .flex {
	display: contents;
}

#test-drive-form > .flex > * {
	width: auto;
	margin: 0;
	padding: 0;
}

#test-drive-form .form-submit {
	width: auto;
}

#test-drive-form .form-mando small {
	font-size: inherit;
}

@media (min-width: 1025px) {
	.page-id-265 .section-header { margin-bottom: 56px; }
	.page-id-265 .section-header p { font-size: 24px; line-height: 30px; }

	/* 4 columns reproduce the Figma rows at 1072px: 220 | 402 | 402 (name) and 524 | 524 (contact, consultant) */
	#test-drive-form {
		display: grid;
		grid-template-columns: 220px minmax(0, 280fr) minmax(0, 98fr) minmax(0, 402fr);
		column-gap: 24px;
		row-gap: 28px;
	}

	#test-drive-form .form-group,
	#test-drive-form .form-tc,
	#test-drive-form .checkbox-group .container {
		margin: 0;
	}

	#test-drive-form > .flex > :first-child { grid-column: 2 / 4; }
	#test-drive-form > .flex > :last-child { grid-column: 4; }
	#test-drive-form > .form-group:not(:first-of-type) { grid-column: 1 / 3; }
	#test-drive-form > .form-group:has(#email),
	#test-drive-form > .form-group:has(#v-model) { grid-column: 3 / 5; }
	#test-drive-form > .form-group:has(#message) { grid-column: 1 / -1; }

	#test-drive-form > .form-tc,
	#test-drive-form > .checkbox-group {
		grid-column: 1 / -1;
	}

	#test-drive-form > .form-tc { justify-self: start; }
	#test-drive-form > .form-tc + .checkbox-group { margin-top: -12px; }
	#test-drive-form > .checkbox-group + .checkbox-group { margin-top: -12px; }

	#test-drive-form > .form-group:has(.form-submit) { padding-top: 0; }

	#test-drive-form > .form-mando {
		grid-column: 3 / 5;
		align-self: center;
		justify-self: end;
	}
}


/* ==========================================================================
*  Programme Benefits (Figma 05, 2026-10-15)
*  In-content hero banner (scrims baked into the image) + "BYD Certified Advantage" image cards
*  (q-text restyled with a photo on top: 3 cards then 4). No new classes.
*  ========================================================================== */
.page-id-552 .banner-text p strong {
	font-weight: 600;
}

.page-id-552 .grid + .grid {
	margin-top: 24px;
}

.page-id-552 .grid > .q-text {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	background: var(--clr-grey);
}

.page-id-552 .grid > .q-text img {
	width: 100%;
	height: 220px;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	object-fit: cover;
}

.page-id-552 .grid > .q-text > div {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 32px 36px;
}

.page-id-552 .grid > .q-text .h4 {
	margin: 0;
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
}

.page-id-552 .grid > .q-text p {
	color: var(--clr-secondary);
	font-size: 17px;
	line-height: 26px;
}

@media (min-width: 768px) {
	/* the image already carries the Figma scrims, so drop the left gradient */
	.page-id-552 .banner > .wrapper > .banner-layer {
		align-items: flex-start;
		padding-top: 14%; /* = Figma y268 of 1920 (padding % resolves against width) */
		background: none;
	}

	.page-id-552 .banner > .wrapper > .banner-layer .banner-text {
		max-width: 760px;
	}

	.page-id-552 .banner > .wrapper > .banner-layer .h2 {
		margin-bottom: 16px;
	}

	.page-id-552 .banner > .wrapper > .banner-layer p {
		max-width: 664px;
		margin-bottom: 16px;
	}
}

@media (min-width: 1025px) {
	.page-id-552 .section-header {
		margin-bottom: 64px;
	}

	.page-id-552 .grid > .q-text img {
		height: 264px;
	}

	.page-id-552 .grid > .q-text .h4 {
		font-size: 24px;
		line-height: 30px;
	}
}

@media (min-width: 1200px) {
	.page-id-552 .banner > .wrapper > .banner-layer .h2 {
		font-size: 76px;
		line-height: 84px;
		margin-bottom: 20px;
	}

	.page-id-552 .banner > .wrapper > .banner-layer p {
		font-size: 24px;
		line-height: 34px;
	}

	.page-id-552 .banner > .wrapper > .banner-layer p:first-of-type {
		font-size: 28px;
		line-height: 36px;
	}
}


/* ==========================================================================
*  About Us (Figma 10, 2026-10-15)
*  Banner = ACF Page Banner (no text). Intro split (logo + h1 | body) over a full-width
*  rounded image, then "What We Offer" q-text icon cards. No new classes.
*  ========================================================================== */
.page-id-616 .content:not(.grey-bg) > .wrapper > .grid {
	gap: 24px;
	margin-bottom: 40px;
}

.page-id-616 .content:not(.grey-bg) > .wrapper > .grid img {
	display: block;
	width: 160px;
	height: auto;
	margin-bottom: 24px;
}

.page-id-616 .content:not(.grey-bg) > .wrapper h1 {
	margin: 0;
	color: var(--clr-primary);
}

.page-id-616 .content:not(.grey-bg) > .wrapper > .grid p {
	margin: 0;
	color: var(--clr-secondary-dk);
	font-size: 18px;
	line-height: 30px;
}

.page-id-616 picture img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.page-id-616 .grey-bg .grid > .q-text {
	box-shadow: 0 12px 32px rgba(16, 24, 40, .08);
}

.page-id-616 .grey-bg .grid > .q-text img {
	width: 80px;
	height: 80px;
	margin-bottom: 28px;
	border-radius: 22px;
	background: #E8EEF4;
}

.page-id-616 .grey-bg .grid > .q-text .h4 {
	color: var(--clr-primary);
	font-weight: 700;
}

@media (min-width: 1200px) {
	/* Figma: 740 | 120 gap | 820 inside the 1680 wrapper */
	.page-id-616 .content:not(.grey-bg) > .wrapper > .grid {
		grid-template-columns: minmax(0, 740fr) minmax(0, 820fr);
		column-gap: 120px;
		margin-bottom: 64px;
	}

	.page-id-616 .content:not(.grey-bg) > .wrapper > .grid img {
		width: 200px;
		margin-bottom: 32px;
	}

	.page-id-616 .content:not(.grey-bg) > .wrapper h1 {
		font-size: 64px;
		line-height: 72px;
		font-weight: 700;
	}

	.page-id-616 .content:not(.grey-bg) > .wrapper > .grid p {
		font-size: 22px;
		line-height: 36px;
	}

	.page-id-616 picture img {
		border-radius: 24px;
	}

	.page-id-616 .grey-bg .wrapper {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.page-id-616 .grey-bg .section-header {
		margin-bottom: 56px;
	}

	.page-id-616 .grey-bg .grid > .q-text {
		min-height: 322px;
		padding: 40px 44px;
	}

	.page-id-616 .grey-bg .grid > .q-text .h4 {
		font-size: 26px;
		line-height: 30px;
	}
}


/* ==========================================================================
*  Our Team (Figma 11, 2026-10-15)
*  Banner = ACF Page Banner (no text). h1 + three groups (h2 + grid of base-theme
*  .block-team cards). The theme grid stops at d-five-cols, so the 6-col desktop
*  grid is scoped to this page. No new classes.
*  ========================================================================== */
.page-id-147 .content > .wrapper > h2 {
	margin: 48px 0 24px;
	color: var(--clr-primary);
	font-weight: 700;
	text-align: left;
}

.page-id-147 .content > .wrapper > .section-header + h2 {
	margin-top: 0;
}

.page-id-147 .content > .wrapper > .grid {
	column-gap: 16px;
	row-gap: 32px;
}

.page-id-147 .block-team {
	text-align: left;
}

.page-id-147 .block-team img {
	aspect-ratio: 253 / 317;
	height: auto;
	margin-bottom: 0;
	object-fit: cover;
	border-radius: 16px;
}

.page-id-147 .block-team h3 {
	margin: 18px 0 4px;
	color: var(--clr-primary);
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
}

.page-id-147 .block-team p {
	color: var(--clr-secondary);
	font-size: 15px;
	line-height: 19px;
}

.page-id-147 .block-team a {
	color: inherit;
	text-decoration: none;
}

@media (min-width: 1200px) {
	/* Figma: 128 top / 160 bottom; h1 48/700; 120 between blocks; heading 28/700 then 61 to the cards; cards 253 + 32 gap, rows 40 apart */
	/* padding on the wrapper: main also carries .content */
	.page-id-147 section.content > .wrapper {
		padding-top: 128px;
		padding-bottom: 160px;
	}

	.page-id-147 .content > .wrapper > .section-header {
		margin-bottom: 120px;
	}

	.page-id-147 .content > .wrapper > .section-header h1 {
		margin: 0;
		color: var(--clr-primary);
		font-size: 48px;
		line-height: 56px;
		font-weight: 700;
	}

	.page-id-147 .content > .wrapper > h2 {
		margin: 120px 0 61px;
		font-size: 28px;
		line-height: 35px;
	}

	.page-id-147 .content > .wrapper > .grid.d-six-cols {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		column-gap: 32px;
		row-gap: 40px;
	}

	.page-id-147 .block-team h3 {
		font-size: 20px;
		line-height: 25px;
	}
}

/* ==========================================================================
*  Promotions, News & Events (Figma 08, 2026-10-15)
*  Banner = ACF Page Banner (no text). Intro + filter pills + 3-col card grid,
*  then an in-content CTA banner (left gradient baked into the image).
*  Filter pills = base-theme tabs JS (.tabs-header[data-tab] / .tabs-content.<tab>);
*  the base tabs CSS is scoped to .ft-repayment, so show/hide is scoped here.
*  Cards = base-theme <article>. No new classes.
*  ========================================================================== */
.page-id-550 .section-header h1 {
	color: var(--clr-primary);
}

.page-id-550 .section-header p {
	max-width: 913px;
	margin: 0 auto;
	color: var(--clr-secondary-dk);
}

.page-id-550 .tabs-flex {
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 40px;
}

.page-id-550 .tabs-header {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 16px 32px;
	border-radius: 999px;
	background: #fff;
	color: var(--clr-primary);
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.page-id-550 .tabs-header:hover {
	background: var(--clr-grey);
}

.page-id-550 .tabs-header.active {
	background: var(--clr-primary);
	color: #fff;
}

.page-id-550 .tabs-content {
	display: none;
}

.page-id-550 .tabs-content.active {
	display: block;
}

.page-id-550 article {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 20px;
	background: #fff;
}

.page-id-550 article img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 544 / 340;
	object-fit: cover;
}

.page-id-550 article > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 28px 32px 32px;
}

.page-id-550 article .h4 {
	margin: 0;
	letter-spacing: normal;
	color: var(--clr-primary);
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
}

.page-id-550 article p {
	margin: 0;
	color: var(--clr-secondary-dk);
	font-size: 16px;
	line-height: 24px;
}

.page-id-550 article .post-date {
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--clr-secondary);
	font-size: 14px;
	line-height: 20px;
}

.page-id-550 article .btn {
	margin-top: 20px; /* Figma: 12 gap + 8 spacer + 12 gap = 32 below the description */
}

@media (min-width: 1025px) {
	.page-id-550 .tabs-flex {
		margin-bottom: 56px;
	}

	.page-id-550 article .h4 {
		font-size: 24px;
		line-height: 30px;
	}
}

@media (min-width: 768px) {
	/* the CTA image already carries the Figma left gradient */
	.page-id-550 .banner > .wrapper > .banner-layer {
		background: none;
	}

	.page-id-550 .banner > .wrapper > .banner-layer .h2 {
		margin-bottom: 32px;
	}

	.page-id-550 .banner > .wrapper > .banner-layer .btn {
		min-width: 0;
	}
}

@media (min-width: 1200px) {
	/* Figma: section 120/120 (= base wrapper); h1 48/700, 20 to the 24/400 body, 48 to the pills */
	.page-id-550 .section-header {
		gap: 20px;
	}

	.page-id-550 .section-header h1 {
		font-size: 48px;
		line-height: 56px;
		font-weight: 700;
	}

	.page-id-550 .section-header p {
		font-size: 24px;
		line-height: 30px;
	}
}

/* ==========================================================================
*  Article (Figma 09, 2026-10-15): post template (single.php), was page 1880 until 2026-11-04
*  Banner = ACF Page Banner (no text). 1200-wide column: h1, date, divider,
*  body copy, featured image + 3 thumbs, centred "Enquire Now". No new classes.
*  ========================================================================== */
.single-post section.content > .wrapper {
	max-width: 1320px;
}

/* single.php meta line (date + time, author, comments): the body carries the Figma date (2026-11-04) */
.single-post section.content article > span {
	display: none;
}

.single-post section.content h1 {
	margin: 0 0 16px;
	color: var(--clr-primary);
}

.single-post section.content .post-date {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--clr-secondary);
	font-size: 16px;
	line-height: 24px;
}

.single-post section.content .post-date svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.single-post section.content hr {
	margin: 0 0 24px;
	border: 0;
	border-top: 1px solid #E2E6EA;
}

.single-post section.content p {
	margin: 0 0 20px;
	color: var(--clr-secondary-dk);
}

.single-post section.content .h4 {
	margin: 0 0 20px;
	color: var(--clr-primary);
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
}

.single-post section.content img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 16px;
}

.single-post section.content article > img {
	margin-top: 24px;
	aspect-ratio: 1200 / 640;
	border-radius: 20px;
}

.single-post section.content .grid {
	margin-top: 24px;
}

.single-post section.content .grid img {
	aspect-ratio: 384 / 264;
}

.single-post section.content .btn {
	display: flex;
	width: fit-content;
	margin: 40px auto 0;
}

@media (min-width: 1200px) {
	/* Figma: 96 below the banner, 120 at the bottom; h1 48/700, 24 to the date, 24 to the divider, 24 to the body; 24/30 body; 64 to the gallery and the button */
	.single-post section.content > .wrapper {
		padding-top: 96px;
	}

	.single-post section.content h1 {
		margin-bottom: 24px;
		font-size: 48px;
		line-height: 56px;
		font-weight: 700;
	}

	.single-post section.content p {
		font-size: 24px;
		line-height: 30px;
	}

	.single-post section.content article > img {
		margin-top: 64px; /* collapses with the 20 paragraph margin */
	}

	.single-post section.content .btn {
		margin-top: 64px;
	}
}

/* ==========================================================================
*  BYD Lifestyle Card (Figma 06 + 04B How It Works, 2026-10-15): page 1883
*  In-content hero (navy overlay + glow baked into the image, 2 buttons),
*  partner logo wall, How It Works (3 glass step cards on a navy gradient),
*  FAQ list (base faqs/accord markup), CTA banner (gradient baked in).
*  No new classes: steps = q-text in a grid, logos = a centred flex row of images.
*  ========================================================================== */
.page-id-1883 section.content > .wrapper {
	padding-bottom: 72px;
}

.page-id-1883 .section-header {
	gap: 16px;
}

.page-id-1883 .section-header .h1 {
	margin: 0;
	color: #000;
}

.page-id-1883 .section-header p {
	margin: 0;
	color: var(--clr-secondary-dk);
}

/* --- Partner logo wall: 168x83 cells, rows centred (the last row of 9 sits in the middle) --- */
.page-id-1883 .section-header + hr {
	margin: 40px 0 28px;
	border: 0;
	border-top: 1px solid #E3E6EA;
}

.page-id-1883 .flex.t-center {
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
}

.page-id-1883 .flex.t-center > * {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33.333%;
	height: 83px;
	padding: 0 12px;
}

.page-id-1883 .flex.t-center img {
	width: auto;
	max-width: 100%;
	max-height: 50px;
}

/* --- How It Works (04B): navy gradient + two radial glows --- */
.page-id-1883 section.dark-bg {
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, #1E334E 0%, #0D1828 100%);
}

.page-id-1883 section.dark-bg::before,
.page-id-1883 section.dark-bg::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.page-id-1883 section.dark-bg::before {
	top: -400px;
	left: -300px;
	width: 1100px;
	height: 1100px;
	background: radial-gradient(closest-side, rgba(61,122,204,.28), rgba(61,122,204,0));
}

.page-id-1883 section.dark-bg::after {
	top: 200px;
	left: calc(50% + 340px);
	width: 1000px;
	height: 1000px;
	background: radial-gradient(closest-side, rgba(61,122,204,.22), rgba(61,122,204,0));
}

.page-id-1883 section.dark-bg > .wrapper {
	position: relative;
	z-index: 1;
	padding-bottom: 40px;
}

.page-id-1883 section.dark-bg .section-header {
	margin-bottom: 40px;
}

.page-id-1883 section.dark-bg .section-header .h1 {
	color: #fff;
}

.page-id-1883 section.dark-bg .grid {
	gap: 24px;
}

.page-id-1883 section.dark-bg .q-text {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 40px;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 28px;
	background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 100%);
	box-shadow: none;
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}

.page-id-1883 section.dark-bg .q-text .t-upper {
	margin: 0 0 24px;
	color: #fff;
	padding: 6px 14px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.page-id-1883 section.dark-bg .q-text .h4 {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(255,255,255,.12);
	color: #fff;
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
}

.page-id-1883 section.dark-bg .q-text .h4 img {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	margin: 0;
	padding: 15px;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 50%;
	background: linear-gradient(135deg, #4D8CD9 0%, #1E334E 100%);
	box-shadow: 0 8px 24px rgba(61,128,230,.4);
}

.page-id-1883 section.dark-bg .q-text p:last-child {
	margin: 0;
	color: #fff;
}

.page-id-1883 section.dark-bg .grid + p {
	margin: 40px 0 0;
	text-align: center;
}

/* --- FAQ (Figma 06): white list items on the grey panel, 40px round toggle --- */
.page-id-1883 .faqs {
	padding: 12px 20px;
}

.page-id-1883 .faqs .accord-container {
	border-bottom-color: #E3E6EA;
}

.page-id-1883 .faqs .accord-head {
	padding: 28px 0;
	color: #000;
	font-size: 18px;
	font-weight: 600;
}

.page-id-1883 .faqs .accord-head svg {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 11px;
	border-radius: 50%;
	background: #fff;
	fill: #000;
}

.page-id-1883 .faqs .accord-container.active .accord-head svg {
	background: #000;
	fill: #fff;
}

.page-id-1883 .faqs .accord-container.active .accord-head {
	padding-bottom: 12px;
}

.page-id-1883 .faqs .accord-container.active .accord-content {
	padding-bottom: 29px;
}

.page-id-1883 .faqs .accord-content p {
	margin: 0;
}

.page-id-1883 .faqs + p {
	margin: 56px 0 0;
	color: var(--clr-secondary-dk);
	font-size: 16px;
	line-height: 24px;
}

.page-id-1883 .faqs + p a {
	color: #000;
	font-weight: 600;
	text-decoration: underline;
}

/* Hero card visual (Figma "image 1" 314:2850) in the base .banner-layer-right.
   Mobile: centred over the empty top of the 768x960 hero image (the text sits below it).
   z-index 1 keeps it under the transparent text layer (z-index 2) so the buttons stay clickable. */
.page-id-1883 .banner:first-child + .banner .banner-layer-right {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 768 / 960;
	padding: 0 10%;
	background: none;
}

@media (min-width: 768px) {
	/* both banner images already carry the Figma overlays */
	.page-id-1883 .banner > .wrapper > .banner-layer {
		background: none;
	}

	/* Tablet: the text already fills the short hero, so the card has no room */
	.page-id-1883 .banner:first-child + .banner .banner-layer-right {
		display: none;
	}

	.page-id-1883 .banner > .wrapper > .banner-layer .btn {
		min-width: 0;
	}

	.page-id-1883 .banner:first-child + .banner > .wrapper > .banner-layer {
		align-items: flex-start;
		padding-top: 12.24%; /* = Figma y235 of 1920 (padding % resolves against width) */
	}

	.page-id-1883 .banner:first-child + .banner .banner-text {
		max-width: 780px;
	}

	.page-id-1883 .banner:first-child + .banner .banner-text p {
		max-width: 672px;
	}

	.page-id-1883 .flex.t-center > * {
		width: 20%;
	}
}

/* Desktop: sized + placed as % of the banner so it scales with the image (vertical centre at 57% as in Figma).
   1200-1599 is smaller and further right so the 672px paragraph clears it. */
@media (min-width: 1200px) {
	.page-id-1883 .banner:first-child + .banner .banner-layer-right {
		top: 29%;
		right: 4%;
		left: auto;
		display: block;
		width: 34%;
		max-width: none;
		aspect-ratio: auto;
		padding: 0;
		transform: none;
	}
}

/* Figma 1920: card image 775px wide at x984 y195 of the 814px hero */
@media (min-width: 1600px) {
	.page-id-1883 .banner:first-child + .banner .banner-layer-right {
		top: 24%;
		right: 8.4%;
		width: 40.3%;
	}
}

@media (min-width: 1025px) {
	.page-id-1883 section.dark-bg .grid {
		gap: 80px; /* the 40px arrow circle sits in the middle of the gap */
	}

	.page-id-1883 section.dark-bg .q-text:not(:last-child)::before,
	.page-id-1883 section.dark-bg .q-text:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 50%;
		right: -61px;
		width: 40px;
		height: 40px;
		transform: translateY(-50%);
	}

	.page-id-1883 section.dark-bg .q-text:not(:last-child)::before {
		border: 1px solid rgba(255,255,255,.2);
		border-radius: 50%;
		background: rgba(255,255,255,.08);
	}

	.page-id-1883 section.dark-bg .q-text:not(:last-child)::after {
		background-color: #fff;
		-webkit-mask: var(--icon-arrow) center / 18px no-repeat;
		mask: var(--icon-arrow) center / 18px no-repeat;
	}

	.page-id-1883 .faqs {
		padding: 12px 40px;
	}

	.page-id-1883 .faqs .accord-head {
		font-size: 20px;
		line-height: 26px;
	}
}

@media (min-width: 1200px) {
	/* Figma: section headers 48/700 + 16 + 24/400 */
	.page-id-1883 .section-header .h1 {
		font-size: 48px;
		line-height: 56px;
		font-weight: 700;
	}

	.page-id-1883 .section-header p,
	.page-id-1883 section.dark-bg .q-text p:last-child,
	.page-id-1883 section.dark-bg .grid + p,
	.page-id-1883 .faqs .accord-content p {
		font-size: 24px;
		line-height: 30px;
	}

	.page-id-1883 .banner:first-child + .banner .banner-text .h2 {
		margin-bottom: 24px;
		font-size: 76px;
		line-height: 84px;
	}

	.page-id-1883 .banner:first-child + .banner .banner-text p {
		margin-bottom: 32px;
		font-size: 24px;
		line-height: 30px;
	}

	.page-id-1883 section + .banner .banner-text .h2 {
		margin-bottom: 36px;
		font-size: 48px;
		line-height: 56px;
	}

	.page-id-1883 section.content:not(.dark-bg) > .wrapper {
		padding-top: 72px;
	}

	.page-id-1883 section.content + section.content:not(.dark-bg) > .wrapper {
		padding-top: 100px;
		padding-bottom: 100px;
	}

	.page-id-1883 section.dark-bg .section-header {
		margin-bottom: 64px;
	}

	.page-id-1883 section.dark-bg .q-text {
		padding: 41px;
	}

	.page-id-1883 section.dark-bg .q-text .h4 {
		font-size: 26px;
		line-height: 30px;
	}

	.page-id-1883 section.dark-bg .grid + p {
		margin-top: 64px;
	}

	.page-id-1883 .flex.t-center > * {
		width: 168px;
		padding: 0;
	}

	.page-id-1883 .faqs + p {
		margin-top: 56px;
	}

	.page-id-1883 .faqs {
		margin-top: -8px; /* Figma: 56 from the heading (section-header margin is 64) */
	}
}


/* ==========================================================================
*  FAQ (Figma 13, 2026-10-15): page 1999 /faq/
*  Banner = ACF Page Banner. Category nav (sticky, a-link anchors) + grouped
*  faqs/accord lists in a flex d-col-3 / d-col-9 row, inset CTA banner.
*  No new classes.
*  ========================================================================== */
.page-id-1999 .d-col-3 ul {
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.page-id-1999 .d-col-3 li + li {
	margin-top: 8px;
}

.page-id-1999 .d-col-3 a {
	display: block;
	padding: 18px 24px;
	border-radius: 14px;
	color: var(--clr-primary);
	font-size: 18px;
	line-height: 23px;
	font-weight: 600;
}

/* Figma shows the first category filled by default; it hands off to hover/focus */
.page-id-1999 .d-col-3 ul:not(:hover):not(:focus-within) li:first-child a,
.page-id-1999 .d-col-3 a:hover,
.page-id-1999 .d-col-3 a:focus {
	background: var(--clr-primary);
	color: #fff;
	text-decoration: none;
}

.page-id-1999 .d-col-9 h2 {
	margin-bottom: 20px;
	color: var(--clr-primary);
	font-weight: 700;
}

.page-id-1999 .faqs {
	max-width: none;
	margin: 0 0 64px;
	padding: 8px 20px;
}

.page-id-1999 .faqs:last-child {
	margin-bottom: 0;
}

.page-id-1999 .faqs .accord-container {
	border-bottom-color: #E3E6EA;
}

.page-id-1999 .faqs .accord-head {
	padding: 28px 0;
	color: var(--clr-primary);
	font-size: 18px;
	font-weight: 600;
}

.page-id-1999 .faqs .accord-head svg {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 11px;
	border-radius: 50%;
	background: #fff;
	fill: var(--clr-primary);
}

.page-id-1999 .faqs .accord-container.active .accord-head {
	padding-bottom: 12px;
}

.page-id-1999 .faqs .accord-container.active .accord-head svg {
	background: var(--clr-primary);
	fill: #fff;
}

.page-id-1999 .faqs .accord-container.active .accord-content {
	padding-bottom: 28px;
}

.page-id-1999 .faqs .accord-content p {
	margin: 0;
}

.page-id-1999 .faqs .accord-content a {
	color: var(--clr-primary);
	font-weight: 600;
	text-decoration: underline;
}

/* --- CTA: inset banner, centred text, radius 32 --- */
.page-id-1999 section + .banner {
	padding: 0 30px 40px;
}

.page-id-1999 section + .banner > .wrapper {
	overflow: hidden;
	border-radius: 24px;
}

.page-id-1999 section + .banner > .wrapper > .banner-layer {
	text-align: center;
}

@media (min-width: 768px) {
	/* the CTA image already carries the Figma gradient */
	.page-id-1999 section + .banner > .wrapper > .banner-layer {
		justify-content: center;
		background: none;
	}

	.page-id-1999 section + .banner > .wrapper > .banner-layer .banner-text {
		max-width: 1000px;
	}

	.page-id-1999 section + .banner > .wrapper > .banner-layer .btn {
		min-width: 0;
	}
}

@media (min-width: 1025px) {
	.page-id-1999 section.content .flex {
		flex-wrap: nowrap;
		gap: 80px;
		margin-left: 0;
	}

	.page-id-1999 section.content .flex > * {
		padding: 0;
	}

	.page-id-1999 section.content .flex > .d-col-3 {
		flex: 0 0 300px;
		width: 300px;
	}

	.page-id-1999 section.content .flex > .d-col-9 {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	/* sticky category nav (below the fixed header) */
	.page-id-1999 .d-col-3 ul {
		position: sticky;
		top: 120px;
		margin: 0;
	}

	.page-id-1999 .faqs {
		padding: 8px 40px;
	}

	.page-id-1999 .faqs .accord-head {
		font-size: 20px;
		line-height: 26px;
	}
}

@media (min-width: 1200px) {
	/* Figma: nav 360 + 80 gap + 1240 list = the 1680 wrapper */
	.page-id-1999 section.content .flex > .d-col-3 {
		flex-basis: 360px;
		width: 360px;
	}

	.page-id-1999 .d-col-9 h2 {
		font-size: 32px;
		line-height: 40px;
	}

	.page-id-1999 .faqs .accord-content p {
		font-size: 24px;
		line-height: 30px;
	}

	.page-id-1999 section + .banner {
		max-width: 1800px;
		margin: 0 auto;
		padding: 0 60px 120px;
	}

	.page-id-1999 section + .banner > .wrapper {
		border-radius: 32px;
	}

	.page-id-1999 section + .banner > .wrapper > .banner-layer .h2 {
		margin-bottom: 32px;
		font-size: 48px;
		line-height: 56px;
	}
}


/* ==========================================================================
*  Download Our App (Figma 14, 2026-10-15): page 690 /about-us/download-our-app/
*  In-content hero (glow baked into the image, OneGo logo inside the h1),
*  "More at Your Fingertips" q-text icon cards (chip gradient is in the SVGs),
*  inset download CTA banner with the store badges, disclaimer line. No new classes.
*  ========================================================================== */
.page-id-690 .banner:first-child + .banner h1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
}

.page-id-690 .banner:first-child + .banner h1 img {
	width: 180px;
	height: auto;
	margin: 0;
}

.page-id-690 .banner:first-child + .banner .banner-text p {
	color: rgba(255,255,255,.85);
}

/* --- feature cards --- */
.page-id-690 .section-header {
	margin-bottom: 40px;
}

.page-id-690 .grid > .q-text {
	padding: 32px 32px 36px;
	border-radius: 24px;
	background: #F4F5F6;
}

.page-id-690 .grid > .q-text img {
	width: 64px;
	height: 64px;
	margin: 0 0 24px;
	padding: 0;
	border-radius: 0;
	background: none;
}

.page-id-690 .grid > .q-text .h4 {
	margin: 0 0 12px;
	color: var(--clr-primary);
	font-weight: 700;
}

.page-id-690 .grid > .q-text p {
	color: var(--clr-secondary);
}

/* --- download CTA: inset banner, centred text + badges --- */
.page-id-690 section + .banner {
	padding: 0 30px;
}

/* CTA is the last block since the disclaimer was removed (fb4 item 11):
   Figma keeps the same gap to the footer as above the CTA, 40 mobile / 120 desktop (Teck, 2026-11-02) */
.page-id-690 section + .banner:last-child {
	padding-bottom: 40px;
}

.page-id-690 section + .banner > .wrapper {
	overflow: hidden;
	border-radius: 24px;
}

.page-id-690 section + .banner > .wrapper > .banner-layer {
	text-align: center;
}

.page-id-690 section + .banner .flex {
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 0;
}

.page-id-690 section + .banner .flex > a {
	width: auto; /* base .flex > * is 100% wide */
	padding: 0;
}

.page-id-690 section + .banner .flex img {
	width: 180px;
	height: auto;
	margin: 0;
}

/* --- disclaimer (Figma: 32 below the CTA, 120 to the footer) ---
   section + .banner + section: plain `.banner + section` also caught the feature cards
   right after the hero, leaving "More at Your Fingertips" 32px under the image (2026-10-21) */
.page-id-690 section + .banner + section.content > .wrapper {
	padding-top: 32px;
}

.page-id-690 .banner + section.content small {
	color: var(--clr-secondary);
}

@media (min-width: 768px) {
	/* both banner images already carry the Figma overlays */
	.page-id-690 .banner > .wrapper > .banner-layer {
		background: none;
	}

	.page-id-690 section + .banner:last-child {
		padding-bottom: 120px;
	}

	.page-id-690 .banner:first-child + .banner > .wrapper > .banner-layer {
		align-items: flex-start;
		padding-top: 15.94%; /* = Figma y306 of 1920 (padding % resolves against width) */
	}

	.page-id-690 .banner:first-child + .banner .banner-text {
		max-width: 820px;
	}

	.page-id-690 .banner:first-child + .banner .banner-text p {
		max-width: 787px;
	}

	.page-id-690 section + .banner > .wrapper > .banner-layer {
		justify-content: center;
	}

	.page-id-690 section + .banner > .wrapper > .banner-layer .banner-text {
		max-width: 980px;
	}

	.page-id-690 section + .banner .flex img {
		width: 231px;
	}

	.page-id-690 section + .banner .flex {
		gap: 38px;
	}
}

@media (min-width: 1025px) {
	.page-id-690 .section-header {
		margin-bottom: 56px;
	}

	.page-id-690 .grid > .q-text {
		padding: 40px 40px 44px;
	}

	.page-id-690 .grid > .q-text img {
		margin-bottom: 32px;
	}

	.page-id-690 .grid > .q-text .h4 {
		font-size: 24px;
		line-height: 32px;
	}

	.page-id-690 .grid > .q-text p {
		font-size: 18px;
		line-height: 28px;
	}
}

@media (min-width: 1200px) {
	.page-id-690 .banner:first-child + .banner .banner-layer h1.h2 {
		font-size: 76px;
		line-height: 84px;
		letter-spacing: -.5px;
		margin-bottom: 28px;
	}

	.page-id-690 .banner:first-child + .banner h1 img {
		width: 253px;
	}

	.page-id-690 .banner:first-child + .banner .banner-text p {
		font-size: 24px;
		line-height: 30px;
	}

	.page-id-690 section + .banner {
		max-width: 1800px;
		margin: 0 auto;
		padding: 0 60px;
	}

	.page-id-690 section + .banner > .wrapper {
		border-radius: 32px;
	}

	.page-id-690 section + .banner > .wrapper > .banner-layer .h2 {
		margin-bottom: 40px;
		font-size: 44px;
		line-height: 54px;
	}

	.page-id-690 .banner + section.content > .wrapper {
		padding-bottom: 120px;
	}
}

/* ==========================================================================
*  Privacy Policy (Figma 15, 2026-10-15): page 171 /privacy-policy/
*  ACF Page Banner (no text, top scrim baked in) + one legal-copy section:
*  28/36 headings, 18/30 body, numbered lists, DPO .q-text card, dividers. No new classes.
*  ========================================================================== */
.page-id-171 section.content > .wrapper {
	padding-top: 48px;
	padding-bottom: 64px;
}

.page-id-171 section.content h1,
.page-id-171 section.content h2 {
	margin: 0 0 20px;
	color: var(--clr-primary);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}

.page-id-171 section.content p,
.page-id-171 section.content li {
	color: var(--clr-secondary-dk);
	font-size: 16px;
	line-height: 26px;
}

.page-id-171 section.content p {
	margin: 0 0 20px;
}

.page-id-171 section.content ol {
	margin: 0 0 20px;
	padding: 0 0 0 44px;
	list-style: decimal;
}

.page-id-171 section.content li {
	margin: 0 0 12px;
	padding-left: 8px;
}

.page-id-171 section.content li::marker {
	color: var(--clr-primary);
	font-weight: 600;
}

.page-id-171 section.content .q-text {
	padding: 24px;
	border-radius: 20px;
	background: #F4F5F6;
}

.page-id-171 section.content .q-text p {
	margin: 0 0 8px;
}

.page-id-171 section.content .q-text p:last-child {
	margin-bottom: 0;
}

.page-id-171 section.content .q-text strong {
	color: var(--clr-primary);
	font-size: 18px;
	font-weight: 600;
}

.page-id-171 section.content .q-text a {
	color: inherit;
}

/* Figma: 56 above and below each divider (the 20 paragraph margin is replaced) */
.page-id-171 section.content hr {
	margin: 36px 0 40px;
	border: 0;
	border-top: 1px solid #E3E6EA;
}

.page-id-171 section.content .q-text + hr {
	margin-top: 40px;
}

@media (min-width: 1200px) {
	/* Figma: 96 below the banner, 140 to the footer */
	.page-id-171 section.content > .wrapper {
		padding-top: 96px;
		padding-bottom: 140px;
	}

	.page-id-171 section.content h1,
	.page-id-171 section.content h2 {
		font-size: 28px;
		line-height: 36px;
	}

	.page-id-171 section.content p,
	.page-id-171 section.content li {
		font-size: 18px;
		line-height: 30px;
	}

	.page-id-171 section.content .q-text {
		padding: 32px;
	}

	.page-id-171 section.content .q-text strong {
		font-size: 20px;
	}

	.page-id-171 section.content hr {
		margin: 36px 0 56px;
	}

	.page-id-171 section.content .q-text + hr {
		margin-top: 56px;
	}
}

/* ==========================================================================
*  Header + Footer (Figma navbar 19:293, dropdowns 16:342, footer 179:5256) – 2026-10-15
*  Desktop only (>=1025px); mobile waits for the mobile designs.
*  - 2026-10-19: header.php / footer.php updated (King approved): <base href>
*    removed, sprite paths fixed, white logo + footer logo are real <img>s, Download
*    App link added. Find Us keeps the Figma glyph (CSS mask, sprite svg hidden);
*    Download App uses the theme sprite icon-mobile.
*  - Transparent-over-hero state = any page whose <main> starts with a .banner,
*    until the theme JS adds body.fixed-menu on scroll. Other pages (stock) are
*    solid from the top.
*  Replaces the old ".home" transparent-nav rules in 11.1.2.
* ========================================================================== */

:root {
	--nav-h: 84px;
	--nav-pad: clamp(24px, 6.25vw, 120px);
	--nav-item-pad: clamp(10px, .9375vw, 18px);
	--icon-location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' width='22' height='22'%3E%3Cpath transform='matrix(1 0 0 1 3.6667 1.8333)' d='M14.6667 7.33333L15.5417 7.33333L14.6667 7.33333ZM7.88425 18.1491L8.41012 18.8484C8.42586 18.8366 8.44119 18.8242 8.45609 18.8114L7.88425 18.1491ZM7.33333 18.3331L7.33333 19.2081L7.33333 18.3331ZM6.78242 18.1491L6.21057 18.8114C6.22548 18.8242 6.24081 18.8366 6.25654 18.8484L6.78242 18.1491ZM7.33333 0L7.33333 -0.875L7.33333 0ZM14.6667 7.33333L13.7917 7.33333C13.7917 9.32676 12.6694 11.4694 11.2186 13.3756C9.78802 15.2551 8.14287 16.7697 7.31241 17.4868L7.88425 18.1491L8.45609 18.8114C9.33063 18.0563 11.0767 16.4515 12.6111 14.4354C14.1252 12.446 15.5417 9.91683 15.5417 7.33333L14.6667 7.33333ZM7.88425 18.1491L7.35838 17.4497C7.35116 17.4552 7.34237 17.4581 7.33333 17.4581L7.33333 18.3331L7.33333 19.2081C7.72176 19.2081 8.09967 19.0819 8.41012 18.8484L7.88425 18.1491ZM7.33333 18.3331L7.33333 17.4581C7.3243 17.4581 7.31551 17.4552 7.30829 17.4497L6.78242 18.1491L6.25654 18.8484C6.567 19.0819 6.94491 19.2081 7.33333 19.2081L7.33333 18.3331ZM6.78242 18.1491L7.35426 17.4868C6.5238 16.7697 4.87864 15.2551 3.44811 13.3756C1.99729 11.4694 0.875 9.32676 0.875 7.33333L0 7.33333L-0.875 7.33333C-0.875 9.91683 0.541419 12.446 2.05556 14.4354C3.58998 16.4515 5.33604 18.0563 6.21057 18.8114L6.78242 18.1491ZM0 7.33333L0.875 7.33333C0.875 5.62048 1.55543 3.97777 2.7666 2.7666L2.14788 2.14788L1.52917 1.52917C-0.0101958 3.06853 -0.875 5.15635 -0.875 7.33333L0 7.33333ZM2.14788 2.14788L2.7666 2.7666C3.97777 1.55543 5.62048 0.875 7.33333 0.875L7.33333 0L7.33333 -0.875C5.15635 -0.875 3.06853 -0.0101958 1.52917 1.52917L2.14788 2.14788ZM7.33333 0L7.33333 0.875C9.04619 0.875 10.6889 1.55543 11.9001 2.7666L12.5188 2.14788L13.1375 1.52917C11.5981 -0.0101958 9.51032 -0.875 7.33333 -0.875L7.33333 0ZM12.5188 2.14788L11.9001 2.7666C13.1112 3.97777 13.7917 5.62048 13.7917 7.33333L14.6667 7.33333L15.5417 7.33333C15.5417 5.15635 14.6769 3.06853 13.1375 1.52917L12.5188 2.14788Z' fill='%23FFFFFF'/%3E%3Cpath transform='matrix(1 0 0 1 8.25 6.4167)' d='M5.5 2.75L4.625 2.75C4.625 3.78553 3.78553 4.625 2.75 4.625L2.75 5.5L2.75 6.375C4.75203 6.375 6.375 4.75203 6.375 2.75L5.5 2.75ZM2.75 5.5L2.75 4.625C1.71447 4.625 0.875 3.78553 0.875 2.75L0 2.75L-0.875 2.75C-0.875 4.75203 0.747968 6.375 2.75 6.375L2.75 5.5ZM0 2.75L0.875 2.75C0.875 1.71447 1.71447 0.875 2.75 0.875L2.75 0L2.75 -0.875C0.747968 -0.875 -0.875 0.747968 -0.875 2.75L0 2.75ZM2.75 0L2.75 0.875C3.78553 0.875 4.625 1.71447 4.625 2.75L5.5 2.75L6.375 2.75C6.375 0.747968 4.75203 -0.875 2.75 -0.875L2.75 0Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
	--icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20'%3E%3Cpath transform='matrix(1 0 0 1 1.6667 1.6667)' d='M9.86 12.14L9.52956 12.8133C9.53533 12.8161 9.54115 12.8189 9.54699 12.8216L9.86 12.14ZM10.8708 11.8875L10.2747 11.4324L10.2741 11.4332L10.8708 11.8875ZM11.1667 11.5L11.7628 11.9551L11.7667 11.95L11.1667 11.5ZM16.1785 11.3215L16.7088 10.7912L16.1785 11.3215ZM16.1785 16.1785L16.7088 16.7088L16.1785 16.1785ZM15 16.6667L15 17.4167L15 16.6667ZM0 1.66667L0.75 1.66667L0 1.66667ZM1.66667 0L1.66667 -0.75L1.66667 0ZM4.16667 0L4.16667 -0.75L4.16667 0ZM5.16667 5.5L5.61667 6.1L5.61667 6.1L5.16667 5.5ZM4.77667 5.7925L4.32665 5.19248L4.32151 5.1964L4.77667 5.7925ZM4.53333 6.82L3.85917 7.14865L3.86047 7.15128L4.53333 6.82ZM9.86 12.14L9.54699 12.8216C9.874 12.9717 10.2424 13.006 10.5915 12.9188L10.4097 12.1912L10.228 11.4636C10.2096 11.4681 10.1902 11.4663 10.173 11.4584L9.86 12.14ZM10.4097 12.1912L10.5915 12.9188C10.9406 12.8316 11.2496 12.6281 11.4676 12.3418L10.8708 11.8875L10.2741 11.4332C10.2626 11.4483 10.2464 11.459 10.228 11.4636L10.4097 12.1912ZM10.8708 11.8875L11.467 12.3426L11.7628 11.9551L11.1667 11.5L10.5705 11.0449L10.2747 11.4324L10.8708 11.8875ZM11.1667 11.5L11.7667 11.95C11.8521 11.8362 11.9628 11.7438 12.0901 11.6801L11.7546 11.0093L11.4192 10.3385C11.0837 10.5063 10.7918 10.7499 10.5667 11.05L11.1667 11.5ZM11.7546 11.0093L12.0901 11.6801C12.2173 11.6165 12.3577 11.5833 12.5 11.5833L12.5 10.8333L12.5 10.0833C12.1248 10.0833 11.7548 10.1707 11.4192 10.3385L11.7546 11.0093ZM12.5 10.8333L12.5 11.5833L15 11.5833L15 10.8333L15 10.0833L12.5 10.0833L12.5 10.8333ZM15 10.8333L15 11.5833C15.2431 11.5833 15.4763 11.6799 15.6482 11.8518L16.1785 11.3215L16.7088 10.7912C16.2556 10.3379 15.6409 10.0833 15 10.0833L15 10.8333ZM16.1785 11.3215L15.6482 11.8518C15.8201 12.0237 15.9167 12.2569 15.9167 12.5L16.6667 12.5L17.4167 12.5C17.4167 11.8591 17.1621 11.2444 16.7088 10.7912L16.1785 11.3215ZM16.6667 12.5L15.9167 12.5L15.9167 15L16.6667 15L17.4167 15L17.4167 12.5L16.6667 12.5ZM16.6667 15L15.9167 15C15.9167 15.2431 15.8201 15.4763 15.6482 15.6482L16.1785 16.1785L16.7088 16.7088C17.1621 16.2556 17.4167 15.6409 17.4167 15L16.6667 15ZM16.1785 16.1785L15.6482 15.6482C15.4763 15.8201 15.2431 15.9167 15 15.9167L15 16.6667L15 17.4167C15.6409 17.4167 16.2556 17.1621 16.7088 16.7088L16.1785 16.1785ZM15 16.6667L15 15.9167C11.2207 15.9167 7.59612 14.4153 4.92373 11.7429L4.3934 12.2733L3.86307 12.8036C6.81677 15.7573 10.8228 17.4167 15 17.4167L15 16.6667ZM4.3934 12.2733L4.92373 11.7429C2.25134 9.07055 0.75 5.446 0.75 1.66667L0 1.66667L-0.75 1.66667C-0.75 5.84383 0.90937 9.8499 3.86307 12.8036L4.3934 12.2733ZM0 1.66667L0.75 1.66667C0.75 1.42355 0.846577 1.19039 1.01849 1.01849L0.488155 0.488155L-0.0421748 -0.0421748C-0.495388 0.411038 -0.75 1.02573 -0.75 1.66667L0 1.66667ZM0.488155 0.488155L1.01849 1.01849C1.19039 0.846577 1.42355 0.75 1.66667 0.75L1.66667 0L1.66667 -0.75C1.02573 -0.75 0.411038 -0.495388 -0.0421748 -0.0421748L0.488155 0.488155ZM1.66667 0L1.66667 0.75L4.16667 0.75L4.16667 0L4.16667 -0.75L1.66667 -0.75L1.66667 0ZM4.16667 0L4.16667 0.75C4.40978 0.75 4.64294 0.846577 4.81485 1.01849L5.34518 0.488155L5.87551 -0.0421748C5.42229 -0.495388 4.80761 -0.75 4.16667 -0.75L4.16667 0ZM5.34518 0.488155L4.81485 1.01849C4.98676 1.19039 5.08333 1.42355 5.08333 1.66667L5.83333 1.66667L6.58333 1.66667C6.58333 1.02573 6.32872 0.411038 5.87551 -0.0421748L5.34518 0.488155ZM5.83333 1.66667L5.08333 1.66667L5.08333 4.16667L5.83333 4.16667L6.58333 4.16667L6.58333 1.66667L5.83333 1.66667ZM5.83333 4.16667L5.08333 4.16667C5.08333 4.30897 5.0502 4.44933 4.98656 4.57661L5.65738 4.91202L6.3282 5.24743C6.49598 4.91187 6.58333 4.54184 6.58333 4.16667L5.83333 4.16667ZM5.65738 4.91202L4.98656 4.57661C4.92292 4.7039 4.83051 4.81462 4.71667 4.9L5.16667 5.5L5.61667 6.1C5.91681 5.8749 6.16042 5.583 6.3282 5.24743L5.65738 4.91202ZM5.16667 5.5L4.71667 4.9L4.32667 5.1925L4.77667 5.7925L5.22667 6.3925L5.61667 6.1L5.16667 5.5ZM4.77667 5.7925L4.32151 5.1964C4.03084 5.41835 3.82596 5.73408 3.74168 6.08996L4.47149 6.26279L5.20131 6.43563C5.20574 6.4169 5.21653 6.40028 5.23182 6.3886L4.77667 5.7925ZM4.47149 6.26279L3.74168 6.08996C3.6574 6.44584 3.69892 6.81991 3.85918 7.14865L4.53333 6.82L5.20749 6.49135C5.19906 6.47404 5.19687 6.45436 5.20131 6.43563L4.47149 6.26279ZM4.53333 6.82L3.86047 7.15128C5.07258 9.61321 7.06611 11.6043 9.52956 12.8133L9.86 12.14L10.1904 11.4667C8.02459 10.4037 6.27189 8.65323 5.2062 6.48872L4.53333 6.82Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
	--icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20'%3E%3Cpath transform='matrix(1 0 0 1 3.3333 1.6667)' d='M13.3333 6.66667L14.0833 6.66667L13.3333 6.66667ZM7.1675 16.4992L7.61825 17.0986C7.63174 17.0885 7.64488 17.0779 7.65765 17.0668L7.1675 16.4992ZM6.66667 16.6665L6.66667 17.4165L6.66667 16.6665ZM6.16583 16.4992L5.67568 17.0668C5.68845 17.0779 5.7016 17.0885 5.71508 17.0986L6.16583 16.4992ZM6.66667 0L6.66667 -0.75L6.66667 0ZM13.3333 6.66667L12.5833 6.66667C12.5833 8.4942 11.5554 10.4521 10.2349 12.1871C8.93167 13.8994 7.43346 15.2786 6.67735 15.9315L7.1675 16.4992L7.65765 17.0668C8.45154 16.3814 10.0362 14.9248 11.4285 13.0956C12.8033 11.2892 14.0833 8.99997 14.0833 6.66667L13.3333 6.66667ZM7.1675 16.4992L6.71675 15.8997C6.70231 15.9106 6.68473 15.9165 6.66667 15.9165L6.66667 16.6665L6.66667 17.4165C7.00993 17.4165 7.3439 17.3049 7.61825 17.0986L7.1675 16.4992ZM6.66667 16.6665L6.66667 15.9165C6.6486 15.9165 6.63102 15.9106 6.61658 15.8997L6.16583 16.4992L5.71508 17.0986C5.98944 17.3049 6.3234 17.4165 6.66667 17.4165L6.66667 16.6665ZM6.16583 16.4992L6.65598 15.9315C5.89987 15.2786 4.40166 13.8994 3.09847 12.1871C1.7779 10.4521 0.75 8.4942 0.75 6.66667L0 6.66667L-0.75 6.66667C-0.75 8.99997 0.530013 11.2892 1.90486 13.0956C3.29709 14.9248 4.88179 16.3814 5.67568 17.0668L6.16583 16.4992ZM0 6.66667L0.75 6.66667C0.75 5.09747 1.37336 3.59254 2.48295 2.48295L1.95262 1.95262L1.42229 1.42229C0.0313967 2.81319 -0.75 4.69964 -0.75 6.66667L0 6.66667ZM1.95262 1.95262L2.48295 2.48295C3.59254 1.37336 5.09747 0.75 6.66667 0.75L6.66667 0L6.66667 -0.75C4.69964 -0.75 2.81319 0.0313967 1.42229 1.42229L1.95262 1.95262ZM6.66667 0L6.66667 0.75C8.23586 0.75 9.74079 1.37336 10.8504 2.48295L11.3807 1.95262L11.911 1.42229C10.5201 0.0313967 8.63369 -0.75 6.66667 -0.75L6.66667 0ZM11.3807 1.95262L10.8504 2.48295C11.96 3.59254 12.5833 5.09747 12.5833 6.66667L13.3333 6.66667L14.0833 6.66667C14.0833 4.69964 13.3019 2.81319 11.911 1.42229L11.3807 1.95262Z' fill='%23FFFFFF'/%3E%3Cpath transform='matrix(1 0 0 1 7.5 5.8333)' d='M5 2.5L4.25 2.5C4.25 3.4665 3.4665 4.25 2.5 4.25L2.5 5L2.5 5.75C4.29493 5.75 5.75 4.29493 5.75 2.5L5 2.5ZM2.5 5L2.5 4.25C1.5335 4.25 0.75 3.4665 0.75 2.5L0 2.5L-0.75 2.5C-0.75 4.29493 0.705074 5.75 2.5 5.75L2.5 5ZM0 2.5L0.75 2.5C0.75 1.5335 1.5335 0.75 2.5 0.75L2.5 0L2.5 -0.75C0.705074 -0.75 -0.75 0.705074 -0.75 2.5L0 2.5ZM2.5 0L2.5 0.75C3.4665 0.75 4.25 1.5335 4.25 2.5L5 2.5L5.75 2.5C5.75 0.705074 4.29493 -0.75 2.5 -0.75L2.5 0Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
	--icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20'%3E%3Cpath transform='matrix(1 0 0 1 1.6667 1.6667)' d='M16.6667 8.33333L15.9167 8.33333C15.9167 12.5215 12.5215 15.9167 8.33333 15.9167L8.33333 16.6667L8.33333 17.4167C13.3499 17.4167 17.4167 13.3499 17.4167 8.33333L16.6667 8.33333ZM8.33333 16.6667L8.33333 15.9167C4.14517 15.9167 0.75 12.5215 0.75 8.33333L0 8.33333L-0.75 8.33333C-0.75 13.3499 3.31675 17.4167 8.33333 17.4167L8.33333 16.6667ZM0 8.33333L0.75 8.33333C0.75 4.14517 4.14517 0.75 8.33333 0.75L8.33333 0L8.33333 -0.75C3.31675 -0.75 -0.75 3.31675 -0.75 8.33333L0 8.33333ZM8.33333 0L8.33333 0.75C12.5215 0.75 15.9167 4.14517 15.9167 8.33333L16.6667 8.33333L17.4167 8.33333C17.4167 3.31675 13.3499 -0.75 8.33333 -0.75L8.33333 0Z' fill='%23FFFFFF'/%3E%3Cpath transform='matrix(1 0 0 1 10 5)' d='M0.75 0C0.75 -0.414214 0.414214 -0.75 0 -0.75C-0.414214 -0.75 -0.75 -0.414214 -0.75 0L0 0L0.75 0ZM0 5L-0.75 5C-0.75 5.41421 -0.414214 5.75 1.66533e-16 5.75L0 5ZM3.33333 5.75C3.74755 5.75 4.08333 5.41421 4.08333 5C4.08333 4.58579 3.74755 4.25 3.33333 4.25L3.33333 5L3.33333 5.75ZM0 0L-0.75 0L-0.75 5L0 5L0.75 5L0.75 0L0 0ZM0 5L0 5.75L3.33333 5.75L3.33333 5L3.33333 4.25L0 4.25L0 5Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
	--icon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' width='18' height='18'%3E%3Cpath transform='matrix(1 0 0 1 0 0.033)' d='M6.82575 17.7352L6.82575 11.7502L4.97025 11.7502L4.97025 9L6.82575 9L6.82575 7.815C6.82575 4.75125 8.21175 3.3315 11.2192 3.3315C11.52 3.3315 11.9355 3.363 12.3202 3.40875C12.6084 3.4384 12.8943 3.48726 13.176 3.555L13.176 6.04875C13.0132 6.03356 12.8498 6.02455 12.6863 6.02175C12.503 6.01699 12.3198 6.01474 12.1365 6.015C11.6062 6.015 11.1923 6.087 10.8802 6.24675C10.6705 6.35198 10.4942 6.51351 10.371 6.71325C10.1775 7.02825 10.0905 7.4595 10.0905 8.02725L10.0905 9L13.0297 9L12.7402 10.5772L12.525 11.7502L10.0905 11.7502L10.0905 17.934C14.547 17.3955 18 13.6012 18 9C18 4.02975 13.9703 0 9 0C4.02975 0 0 4.02975 0 9C0 13.221 2.9055 16.7625 6.82575 17.7352Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
	--icon-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' width='18' height='18'%3E%3Cpath transform='matrix(1 0 0 1 0 0)' d='M5.27256 0.0630126C4.31496 0.108163 3.66104 0.261013 3.08931 0.485563C2.49771 0.716188 1.99619 1.02556 1.49721 1.52634C0.998311 2.02711 0.690961 2.52894 0.462061 3.12159C0.240511 3.69444 0.0903612 4.34896 0.0480612 5.30709C0.00576119 6.26521 -0.00361381 6.57324 0.00111119 9.01734C0.00576119 11.4613 0.0165612 11.7677 0.0629862 12.7278C0.108736 13.6852 0.260986 14.339 0.485611 14.9108C0.716611 15.5025 1.02561 16.0038 1.52661 16.5029C2.02754 17.0021 2.52899 17.3087 3.12299 17.5379C3.69539 17.7592 4.35006 17.91 5.30804 17.9519C6.26601 17.9939 6.57434 18.0037 9.01769 17.999C11.461 17.9943 11.7687 17.9834 12.7285 17.9379C13.6885 17.8924 14.3388 17.739 14.9109 17.5154C15.5026 17.284 16.0042 16.9754 16.503 16.4744C17.0017 15.9732 17.3089 15.471 17.5376 14.8781C17.7594 14.3057 17.9101 13.6511 17.9516 12.6938C17.9936 11.7331 18.0035 11.4264 17.9989 8.98276C17.9941 6.53904 17.9831 6.23266 17.9376 5.27289C17.8921 4.31311 17.7396 3.66136 17.5151 3.08911C17.2838 2.49744 16.9751 1.99651 16.4744 1.49701C15.9736 0.997513 15.471 0.690613 14.8783 0.462388C14.3055 0.240763 13.6513 0.0897876 12.6933 0.0483876C11.7353 0.00698759 11.427 -0.00373741 8.98274 0.00106259C6.53849 0.00571259 6.23249 0.0162126 5.27256 0.0630126ZM5.37771 16.3328C4.50021 16.2947 4.02374 16.1489 3.70619 16.0268C3.28574 15.8648 2.98619 15.669 2.66976 15.3556C2.35326 15.0422 2.15894 14.7416 1.99476 14.3221C1.87146 14.0045 1.72296 13.5286 1.68194 12.6511C1.63731 11.7027 1.62794 11.4179 1.62269 9.01509C1.61744 6.61231 1.62666 6.32784 1.66821 5.37909C1.70571 4.50234 1.85241 4.02534 1.97421 3.70794C2.13621 3.28696 2.33136 2.98794 2.64546 2.67174C2.95956 2.35546 3.25926 2.16069 3.67919 1.99651C3.99644 1.87269 4.47231 1.72546 5.34944 1.68369C6.29856 1.63869 6.58296 1.62969 8.98544 1.62444C11.3879 1.61919 11.6731 1.62819 12.6226 1.67004C13.4993 1.70814 13.9765 1.85341 14.2936 1.97604C14.7142 2.13804 15.0136 2.33259 15.3298 2.64729C15.646 2.96184 15.841 3.26049 16.0051 3.68131C16.1291 3.99759 16.2764 4.47331 16.3178 5.35104C16.363 6.30016 16.3732 6.58479 16.3775 8.98704C16.3819 11.3893 16.3734 11.6746 16.3318 12.623C16.2935 13.5005 16.148 13.9772 16.0258 14.2951C15.8638 14.7154 15.6685 15.0151 15.3542 15.3311C15.04 15.6473 14.7406 15.842 14.3205 16.0061C14.0037 16.1298 13.5272 16.2774 12.6508 16.3192C11.7016 16.3638 11.4172 16.3732 9.01386 16.3784C6.61049 16.3837 6.32684 16.3739 5.37771 16.3328ZM12.7147 4.18981C12.7151 4.40344 12.7788 4.61215 12.8978 4.78957C13.0168 4.96699 13.1857 5.10513 13.3832 5.18653C13.5807 5.26793 13.7979 5.28893 14.0074 5.24687C14.2168 5.20481 14.4091 5.10159 14.5598 4.95025C14.7106 4.79891 14.8131 4.60626 14.8544 4.39667C14.8957 4.18707 14.8738 3.96994 14.7917 3.77274C14.7096 3.57554 14.5708 3.40713 14.3929 3.28881C14.2151 3.17049 14.0061 3.10757 13.7925 3.10801C13.5061 3.10861 13.2317 3.2229 13.0296 3.42577C12.8275 3.62863 12.7143 3.90346 12.7147 4.18981ZM4.37886 9.00901C4.38389 11.5614 6.45681 13.6258 9.00861 13.621C11.5606 13.6161 13.6264 11.5434 13.6216 8.99101C13.6167 6.43861 11.5433 4.37364 8.99106 4.37866C6.43881 4.38369 4.37406 6.45691 4.37886 9.00901ZM5.99999 9.00579C5.99882 8.41245 6.17362 7.83209 6.50228 7.33809C6.83095 6.8441 7.29872 6.45866 7.84644 6.23051C8.39417 6.00236 8.99724 5.94176 9.57941 6.05636C10.1616 6.17096 10.6967 6.45562 11.1171 6.87434C11.5375 7.29306 11.8243 7.82703 11.9412 8.40874C12.0581 8.99045 11.9999 9.59376 11.7739 10.1424C11.5479 10.691 11.1644 11.1603 10.6717 11.4909C10.179 11.8216 9.59933 11.9987 9.00599 11.9999C8.612 12.0007 8.22172 11.9239 7.85741 11.7739C7.49311 11.6238 7.16193 11.4035 6.88279 11.1255C6.60365 10.8475 6.38201 10.5172 6.23054 10.1535C6.07907 9.78975 6.00072 9.39977 5.99999 9.00579Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
	--icon-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' width='18' height='18'%3E%3Cpath transform='matrix(1 0 0 1 0 0)' d='M15.3353 15.339L12.6698 15.339L12.6698 11.1623C12.6698 10.1663 12.6495 8.8845 11.2808 8.8845C9.891 8.8845 9.67875 9.96825 9.67875 11.0887L9.67875 15.339L7.01325 15.339L7.01325 6.75L9.57375 6.75L9.57375 7.92075L9.60825 7.92075C9.966 7.24575 10.836 6.53325 12.1357 6.53325C14.8365 6.53325 15.336 8.31075 15.336 10.6245L15.3353 15.339ZM4.00275 5.57475C3.14475 5.57475 2.4555 4.88025 2.4555 4.026C2.4555 3.1725 3.1455 2.47875 4.00275 2.47875C4.85775 2.47875 5.55075 3.1725 5.55075 4.026C5.55075 4.88025 4.857 5.57475 4.00275 5.57475ZM5.33925 15.339L2.66625 15.339L2.66625 6.75L5.33925 6.75L5.33925 15.339ZM16.6688 0L1.32825 0C0.594 0 0 0.5805 0 1.29675L0 16.7033C0 17.4202 0.594 18 1.32825 18L16.6665 18C17.4 18 18 17.4202 18 16.7033L18 1.29675C18 0.5805 17.4 0 16.6665 0L16.6688 0Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

.nav-menu-border {
	display: none;
}

@media (min-width: 1025px) {

	body {
		padding-top: var(--nav-h);
	}

	body:has(main > .banner:first-child) {
		padding-top: 0;
	}

	/* --- Bar (solid state) --- */
	.nav-menu {
		background-color: #fff;
		box-shadow: 0 2px 12px rgba(0,0,0,.08);
	}

	.nav-menu > .lrg-wrapper {
		position: relative;
		max-width: 1920px;
		height: var(--nav-h);
		margin: 0 auto;
		padding: 0 var(--nav-pad);
		align-items: center;
		flex-wrap: nowrap;
	}

	.primary-nav {
		margin: 0 auto 0 calc(var(--nav-item-pad) * -1);
	}

	.primary-nav > ul > li > a {
		padding: 32px var(--nav-item-pad);
		border: 0;
		color: var(--clr-primary);
		font-size: 15px;
		line-height: 20px;
		font-weight: 600;
		white-space: nowrap;
		transition: color .2s ease, opacity .2s ease;
	}

	.primary-nav > ul > li:hover > a {
		opacity: .7;
	}

	/* --- Dropdowns --- */
	.nav-menu .primary-nav .sub-menu {
		top: 100%;
		left: 0;
		min-width: 220px;
		padding: 8px 0;
		background-color: #fff;
		border-radius: 2px;
		box-shadow: 0 12px 24px rgba(0,0,0,.12);
	}

	body .nav-menu .primary-nav ul.sub-menu > li > a {
		padding: 11px 20px;
		background-color: transparent;
		color: var(--clr-primary);
		font-size: 15px;
		line-height: 24px;
		font-weight: 400;
		opacity: 1;
	}

	body .nav-menu .primary-nav ul.sub-menu > li:hover > a,
	body .nav-menu .primary-nav ul.sub-menu > li.current-menu-item > a {
		background-color: var(--clr-grey-lt);
		color: var(--clr-primary);
	}

	/* --- Utilities: Find Us, phone, divider, logo --- */
	.nav-contact {
		margin: 0;
		align-items: center;
		gap: 28px;
	}

	.nav-contact a {
		margin: 0;
		color: var(--clr-primary);
		transition: opacity .2s ease;
	}

	.nav-contact a:hover {
		opacity: .7;
	}

	.nav-contact svg {
		display: none;
	}

	.nav-contact .icon-mobile {
		display: block;
		margin: 0;
		font-size: 22px;
	}

	.nav-contact a:first-child::before {
		content: "";
		width: 22px;
		height: 22px;
		background-color: currentColor;
		-webkit-mask: var(--icon-location) center / contain no-repeat;
		mask: var(--icon-location) center / contain no-repeat;
	}

	.nav-contact span {
		font-size: 24px;
		line-height: 30px;
		font-weight: 400;
	}

	.logo {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		width: auto;
		height: auto;
		margin: 0 0 0 28px;
	}

	.logo::before {
		content: "";
		width: 1px;
		height: 32px;
		margin-right: 28px;
		background-color: var(--clr-grey-dk);
	}

	.logo a {
		width: 176px;
	}

	.logo img {
		width: 100%;
		height: auto;
	}

	.bmw-logo-blk {
		display: block;
	}

	.bmw-logo-wht {
		display: none;
	}

	/* --- Transparent state (over a hero, before scrolling) --- */
	body:has(main > .banner:first-child):not(.fixed-menu) .nav-menu {
		background-color: transparent;
		box-shadow: none;
	}

	body:has(main > .banner:first-child):not(.fixed-menu) .nav-menu::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 200px;
		background: linear-gradient(180deg, rgba(13,24,40,.6) 0%, rgba(13,24,40,0) 100%);
		pointer-events: none;
		z-index: -1;
	}

	body:has(main > .banner:first-child):not(.fixed-menu) .primary-nav > ul > li > a,
	body:has(main > .banner:first-child):not(.fixed-menu) .nav-contact a {
		color: #fff;
	}

	body:has(main > .banner:first-child):not(.fixed-menu) .logo::before {
		background-color: rgba(255,255,255,.4);
	}

	body:has(main > .banner:first-child):not(.fixed-menu) .bmw-logo-blk {
		display: none;
	}

	body:has(main > .banner:first-child):not(.fixed-menu) .bmw-logo-wht {
		display: block;
	}

	body:has(main > .banner:first-child):not(.fixed-menu) .nav-menu-border {
		display: block;
		position: absolute;
		left: var(--nav-pad);
		right: var(--nav-pad);
		bottom: 0;
		width: auto;
		height: 1px;
		margin: 0;
		background-color: #fff;
	}

	/* --- Footer --- */
	.footer,
	.footer-links,
	.copyright {
		background-color: var(--footer-bg);
	}

	.footer-links,
	.footer-links a {
		color: #fff;
	}

	.footer-links > .wrapper {
		position: relative;
		display: grid;
		grid-template-columns: 240px minmax(24px, 477px) auto clamp(32px, 5vw, 96px) auto clamp(32px, 5vw, 96px) auto 1fr;
		grid-template-rows: auto auto auto 1fr;
		max-width: 1920px;
		padding: 96px var(--nav-pad) 72px;
	}

	.footer-links .anchor {
		position: absolute;
	}

	/* Brand column: BYD Certified white logo <img> inside the footer.php h2 */
	.footer-links h2 {
		grid-column: 1;
		grid-row: 1;
		width: 237px;
		margin: 0;
		line-height: 0;
	}

	.footer-links h2 img {
		width: 100%;
		height: auto;
	}

	.footer-links > .wrapper > .h4 {
		grid-column: 1;
		grid-row: 2;
		margin: 24px 0 0;
		color: #fff;
		font-size: 16px;
		line-height: 20px;
		font-weight: 600;
	}

	.footer-links > .wrapper > .social {
		grid-column: 1;
		grid-row: 3;
		display: flex;
		gap: 12px;
		margin: 22px 0 0;
	}

	.footer-links .social li {
		margin: 0;
	}

	.footer .social a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 1px solid #fff;
		border-radius: 50%;
		background-color: transparent;
		color: #fff;
		transition: background-color .2s ease, color .2s ease;
	}

	.footer .social a:hover {
		background-color: #fff;
		color: var(--clr-primary);
	}

	.footer .social svg {
		display: none;
	}

	.footer .social a::before {
		content: "";
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask: center / contain no-repeat;
		mask: center / contain no-repeat;
	}

	.footer .social a[href*="facebook"]::before {
		-webkit-mask-image: var(--icon-facebook);
		mask-image: var(--icon-facebook);
	}

	.footer .social a[href*="instagram"]::before {
		-webkit-mask-image: var(--icon-instagram);
		mask-image: var(--icon-instagram);
	}

	.footer .social a[href*="linkedin"]::before {
		-webkit-mask-image: var(--icon-linkedin);
		mask-image: var(--icon-linkedin);
	}

	/* Contact Information: Address | Phone | Trading Hours */
	.footer-links .h3 {
		grid-column: 3 / 8;
		grid-row: 1;
		align-self: start;
		margin: 0;
		color: #fff;
		font-size: 24px;
		line-height: 30px;
		font-weight: 700;
	}

	.footer-links .flex,
	.footer-links .flex > div:last-child {
		display: contents;
	}

	.footer-links .flex > div:first-child {
		grid-column: 3;
		grid-row: 2 / 5;
		width: auto;
		padding: 0;
	}

	.footer-links .flex > div:last-child > :nth-child(1) {
		grid-column: 5;
		grid-row: 2;
	}

	.footer-links .flex > div:last-child > :nth-child(2) {
		grid-column: 5;
		grid-row: 3 / 5;
	}

	.footer-links .flex > div:last-child > :nth-child(3) {
		grid-column: 7;
		grid-row: 2;
	}

	.footer-links .flex > div:last-child > :nth-child(4) {
		grid-column: 7;
		grid-row: 3 / 5;
	}

	.footer-links .flex .h4 {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 10px 0 16px;
		color: #fff;
		font-size: 16px;
		line-height: 20px;
		font-weight: 600;
	}

	.footer-links .flex .h4::before {
		content: "";
		flex: 0 0 20px;
		height: 20px;
		background-color: currentColor;
		-webkit-mask: var(--icon-pin) center / contain no-repeat;
		mask: var(--icon-pin) center / contain no-repeat;
	}

	.footer-links .flex > div:last-child > .h4:nth-child(1)::before {
		-webkit-mask-image: var(--icon-phone);
		mask-image: var(--icon-phone);
	}

	.footer-links .flex > div:last-child > .h4:nth-child(3)::before {
		-webkit-mask-image: var(--icon-clock);
		mask-image: var(--icon-clock);
	}

	.footer-links .flex p:not(.h4) {
		margin: 0 0 16px;
		padding-left: 30px;
		color: rgba(255,255,255,.8);
		font-size: 16px;
		line-height: 24px;
	}

	.footer-links .flex p:not(.h4) a {
		color: inherit;
	}

	.footer-links .flex p:not(.h4) a:hover {
		color: #fff;
	}

	.footer-links .flex strong {
		color: #fff;
		font-weight: 600;
	}

	.footer-links .flex p > span {
		display: block;
		margin-bottom: 6px;
	}

	.footer-links .flex p > span + br {
		display: none;
	}

	/* No footer menu bar in the design */
	.footer-nav {
		display: none;
	}

	/* Legal bar */
	.copyright > .wrapper {
		max-width: 1920px;
		padding: 0 var(--nav-pad);
	}

	.copyright p {
		display: flex;
		justify-content: flex-start;
		gap: 40px;
		width: 100%;
		padding: 28px 0;
		border-top: 1px solid rgba(255,255,255,.15);
		color: #fff;
		font-size: 14px;
		line-height: 20px;
		text-transform: none;
	}

	.copyright p a {
		color: #fff;
		opacity: .6;
		transition: opacity .2s ease;
	}

	.copyright p a:hover {
		color: #fff;
		opacity: 1;
	}

}

/* ==========================================================================
*  Mobile header, menu + footer (Figma mobile M00 423:1968 / M01 footer) – 2026-10-20
*  <=1024px. Reuses the --icon-* masks from the desktop block above.
*  - Header: hamburger left, Find Us + Download App outline icons, logo right; tel link hidden (not in M00).
*  - Menu: navy items, no active fill; "Our Brands" (menu-item-1686) hidden per client comment #64.
*  - Footer: logo, social, divider, Contact Information rows, legal stacked; footer menu hidden.
* ========================================================================== */
@media (max-width: 1024px) {

	:root {
		--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
	}

	/* --- Header bar --- */
	.nav-menu {
		border-bottom: 1px solid #e4e4e4;
		box-shadow: none;
	}

	.nav-menu > .lrg-wrapper {
		align-items: center;
		height: 55px;
		padding: 0 20px;
	}

	.mobile-link {
		margin: 0;
		color: var(--clr-primary);
	}

	.mobile-link svg {
		width: 20px;
		height: 20px;
		color: var(--clr-primary);
	}

	.nav-contact {
		align-items: center;
		gap: 20px;
		margin: 0 20px 0 auto;
	}

	.nav-contact a {
		margin: 0;
		color: var(--clr-primary);
	}

	.nav-contact svg {
		display: none;
	}

	.nav-contact .icon-mobile {
		display: block;
		margin: 0;
		font-size: 22px;
	}

	.nav-contact a:first-child::before {
		content: "";
		width: 22px;
		height: 22px;
		background-color: currentColor;
		-webkit-mask: var(--icon-location) center / contain no-repeat;
		mask: var(--icon-location) center / contain no-repeat;
	}

	.nav-contact a[href^="tel:"] {
		display: none;
	}

	.logo {
		line-height: 0;
	}

	.logo img {
		width: 104px;
		height: auto;
	}

	/* --- Slide-out menu --- */
	.m-menu a {
		margin: 0 20px;
		padding: 23px 32px 23px 0;
		border-bottom-color: #e4e4e4;
		color: var(--clr-primary);
		font-size: 20px;
		line-height: 20px;
		font-weight: 700;
	}

	.m-menu .active > a,
	.m-menu .current-menu-item .sub-menu .current-menu-item a {
		background-color: transparent;
		color: var(--clr-primary);
	}

	.m-menu .menu-item-has-children > a:after {
		right: 4px;
		width: 16px;
		height: 16px;
		margin-top: -8px;
		background: #6b6b6b;
		-webkit-mask: var(--icon-chevron) center / contain no-repeat;
		mask: var(--icon-chevron) center / contain no-repeat;
		transition: transform .3s ease;
	}

	.m-menu .menu-item-has-children.show > a:after {
		transform: rotate(180deg);
	}

	.m-menu .sub-menu a {
		padding: 16px 0 16px 16px;
		color: #6b6b6b;
		font-size: 16px;
		line-height: 20px;
		font-weight: 600;
	}

	.m-menu .menu-item-1686 {
		display: none;
	}

	/* --- Footer --- */
	.footer,
	.footer-links,
	.copyright {
		background-color: var(--footer-bg);
	}

	.footer-links > .wrapper {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 40px 20px 0;
	}

	.footer-links .anchor {
		position: absolute;
	}

	.footer-links h2 {
		order: 1;
		width: 160px;
		max-width: none;
		margin: 0;
		line-height: 0;
	}

	.footer-links h2 img {
		width: 100%;
		height: auto;
	}

	.footer-links > .wrapper > .h4 {
		order: 2;
		margin: 20px 0 0;
		color: #fff;
		font-size: 16px;
		line-height: 20px;
		font-weight: 600;
	}

	.footer-links > .wrapper > .social {
		order: 3;
		display: flex;
		gap: 12px;
		margin: 20px 0 0;
		padding: 0;
	}

	.footer-links .social li {
		margin: 0;
	}

	.footer .social a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 1px solid #fff;
		border-radius: 50%;
		background-color: transparent;
		color: #fff;
	}

	.footer .social svg {
		display: none;
	}

	.footer .social a::before {
		content: "";
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask: center / contain no-repeat;
		mask: center / contain no-repeat;
	}

	.footer .social a[href*="facebook"]::before {
		-webkit-mask-image: var(--icon-facebook);
		mask-image: var(--icon-facebook);
	}

	.footer .social a[href*="instagram"]::before {
		-webkit-mask-image: var(--icon-instagram);
		mask-image: var(--icon-instagram);
	}

	.footer .social a[href*="linkedin"]::before {
		-webkit-mask-image: var(--icon-linkedin);
		mask-image: var(--icon-linkedin);
	}

	/* Divider + Contact Information */
	.footer-links .h3 {
		order: 4;
		align-self: stretch;
		margin: 28px 0 0;
		padding-top: 30px;
		border-top: 1px solid rgba(255,255,255,.15);
		color: #fff;
		font-size: 24px;
		line-height: 30px;
		font-weight: 700;
	}

	.footer-links .flex {
		order: 5;
		display: block;
		width: 100%;
		margin: 8px 0 0;
		padding: 0;
	}

	.footer-links .flex > div {
		width: 100%;
		padding: 0;
	}

	.footer-links .flex .h4 {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 16px 0 12px;
		color: #fff;
		font-size: 16px;
		line-height: 20px;
		font-weight: 600;
	}

	.footer-links .flex .h4::before {
		content: "";
		flex: 0 0 20px;
		height: 20px;
		background-color: currentColor;
		-webkit-mask: var(--icon-pin) center / contain no-repeat;
		mask: var(--icon-pin) center / contain no-repeat;
	}

	.footer-links .flex > div:last-child > .h4:nth-child(1)::before {
		-webkit-mask-image: var(--icon-phone);
		mask-image: var(--icon-phone);
	}

	.footer-links .flex > div:last-child > .h4:nth-child(3)::before {
		-webkit-mask-image: var(--icon-clock);
		mask-image: var(--icon-clock);
	}

	.footer-links .flex p:not(.h4) {
		margin: 0 0 8px;
		padding-left: 30px;
		color: rgba(255,255,255,.8);
		font-size: 16px;
		line-height: 24px;
	}

	.footer-links .flex p:not(.h4) a {
		color: inherit;
	}

	.footer-links .flex strong {
		color: inherit;
		font-weight: 400;
	}

	.footer-links .flex p > span {
		display: block;
		margin-bottom: 6px;
	}

	.footer-links .flex p > span + br {
		display: none;
	}

	/* No footer menu in the design */
	.footer-nav {
		display: none;
	}

	/* Legal bar */
	.copyright > .wrapper {
		padding: 0 20px;
	}

	.copyright p {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		width: 100%;
		margin: 0;
		padding: 28px 0 32px;
		border-top: 1px solid rgba(255,255,255,.15);
		color: rgba(255,255,255,.6);
		font-size: 14px;
		line-height: 20px;
		text-align: left;
		text-transform: none;
	}

	.copyright p a {
		color: #fff;
		text-decoration: underline;
	}

}


/* ==========================================================================
*  Home mobile (Figma mobile M01) – 2026-10-20
*  <=767px only, tablets keep the current layout. No new classes.
*  - Site-wide: 20px side gutter on .wrapper / .lrg-wrapper (every mobile frame uses 20).
*  - Hero: 390x320 crop of the mobile slide image over a light panel, navy heading + navy pill.
*  - Find Your Next Vehicle: Make/Model + Price only (Type hidden); model tiles hidden
*    (client comment #58 "remove all these model sections on mobile"); 300px car cards, next one peeking.
*  - Reviews: clip the Elfsight slider overflow (pre-existing horizontal scroll).
*  - Welcome: photo on top fading into a solid navy panel (Figma), text at 80% white.
*    Uses the desktop photo (car runs off its right edge); Figma's mobile crop needs its own image.
*  - Footer: address on one line, "Main Line: 1800 2255 777" inline (Figma).
* ========================================================================== */
@media (max-width: 767px) {

	.wrapper,
	.lrg-wrapper {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Elfsight reviews slider is wider than the screen (page scrolled sideways to 454px) */
	.home .content:has([class*="elfsight-app"]) {
		overflow-x: clip;
	}

	/* --- Hero --- */
	.home .banner,
	.home .banner .banner-layer {
		background-color: var(--clr-grey-lt);
	}

	.home .banner .embla__slide__inner picture img {
		aspect-ratio: 39 / 32;
		height: auto;
		object-fit: cover;
		/* desktop 2000x850 file, framed like the Figma mobile hero */
		object-position: 85% center;
	}

	.home .banner .banner-layer {
		padding: 32px 20px 40px;
	}

	.home .banner .banner-text .h2 {
		margin-bottom: 24px;
		color: var(--clr-primary);
		font-size: 40px;
		line-height: 46px;
	}

	.home .banner .banner-text .btn-white {
		width: auto;
		min-height: 48px;
		padding: 14px 24px;
		background: var(--clr-primary);
		border-color: var(--clr-primary);
		color: #fff;
	}

	.home .banner .banner-text .btn-white::after {
		display: none;
	}

	/* --- Find your next vehicle --- */
	#sl-mini-search #so-condition,
	.model-tiles {
		display: none;
	}

	#sl-mini-search .stock-options {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 16px;
	}

	#sl-mini-search .stock-option {
		width: 100%;
		margin: 0;
	}

	#sl-mini-search .so-select {
		height: 48px;
		padding: 0 16px;
		border: 0;
		border-radius: 8px;
		background-color: var(--clr-grey-lt);
	}

	#sl-mini-search .so-select label,
	#sl-mini-search .so-select .value {
		font-size: 15px;
	}

	#sl-mini-search .ms-btn .btn {
		height: 48px;
		min-height: 48px;
		font-size: 15px;
	}

	/* Figma: first card sits on the 20px gutter, next one peeks on the right.
	   Embla centres the active slide, so the slider viewport is widened to the left
	   until its centre lands on the card (card 300 + 16 gap; centre = 20 + 150 = 170px). */
	.search-our-stock .featured-cars {
		container-type: inline-size;
		margin-left: -20px;
		margin-right: -20px;
		clip-path: inset(-40px 0 -40px 12px);
	}

	.search-our-stock .featured-cars .featcars {
		margin-left: calc(340px - 100cqw);
	}

	.featcars .embla__slide h3 {
		font-size: 20px;
	}

	.featcars .embla__container {
		margin-left: -16px;
	}

	.featcars .embla__slide {
		flex: 0 0 316px;
		max-width: 316px;
		padding-left: 16px;
	}

	/* --- Welcome --- */
	/* 537px = image width at 300px tall; wider screens scale the image to full width
	   (was auto 300px, which left a dark strip on the left from ~540px to 767px) */
	.welcome {
		background-size: max(100%, 537px) auto;
		background-position: 100% top;
		background-repeat: no-repeat;
	}

	.welcome::before {
		background: linear-gradient(180deg, rgba(21,37,56,0) max(160px, 29.8vw), var(--clr-primary-dk) max(330px, 61.5vw));
	}

	.welcome > .wrapper {
		padding-top: max(225px, 41.9vw);
		padding-bottom: 48px;
	}

	.welcome-content {
		gap: 24px;
	}

	.welcome .welcome-logo {
		width: 200px;
	}

	.welcome p {
		color: rgba(255,255,255,.8);
		font-size: 16px;
		line-height: 24px;
	}

	.welcome .grid {
		gap: 12px;
	}

	.benefit-card {
		justify-content: center;
		min-height: 180px;
		padding: 32px 20px;
	}

	.benefit-card p,
	.welcome .benefit-card p {
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
	}

	.welcome .btn-flex {
		flex-direction: column;
		gap: 12px;
	}

	.welcome .btn-flex .btn {
		width: 100%;
		min-height: 48px;
		padding: 14px 24px;
	}

	/* --- Footer (Figma M01): address + "Main Line: number" on one line --- */
	.footer-links .wrapper > .h4 {
		font-size: 14px;
	}

	.footer-links .wrapper > .h3 {
		font-size: 20px;
		line-height: 28px;
	}

	.footer-links .flex > div:first-child p:not(.h4) br,
	.footer-links .flex p strong + br {
		display: none;
	}

	.footer-links .flex p strong {
		font-weight: inherit;
	}

	.footer-links .flex p strong::after {
		content: ": ";
	}

}


/* ==========================================================================
*  Stock list (Figma 02B 278:1873, approved) + Vehicle details (Figma 03B 223:8235) – 2026-10-19
*  CSS only, restyles the central stock-search-v3 markup (template_v3.4.1.css);
*  everything is scoped to #sl-stock-results / #sl-stock-details so it beats
*  the central rules without !important. No new classes.
*  Layout (filter card, 3-col grid, details grid) is desktop only (>=1025px);
*  mobile keeps the plugin layout until the mobile designs arrive.
*  Not in the plugin output / feed (see changelog): $/month + interest rate,
*  card location strip, Finance card, Preferred Sales Consultant, consent
*  checkboxes, BYD Certified sticker, Similar Vehicles, contact/hours data.
* ========================================================================== */

#sl-stock-results,
#sl-stock-details {
	background-color: var(--clr-grey);
	font-family: var(--ff-main);
}

/* --- list: filter bar --- */
#sl-stock-results .stock-option {
	border: 1px solid #E3E6EA;
	border-radius: 12px;
	color: var(--clr-primary);
}

#sl-stock-results .stock-option .so-select {
	padding: 0 16px;
	background-color: var(--clr-grey);
	border-radius: 12px;
	font-size: 15px;
	line-height: 19px;
}

#sl-stock-results .so-select label {
	margin: 0 4px 0 0;
	color: var(--clr-secondary);
	font-size: 15px;
	font-weight: 400;
	line-height: 19px;
}

/* a model filter (?make[<make>]=<model>, e.g. the home model tiles) also prints a
   bare make tag; hide it while a model tag follows, so only the model tag shows */
#sl-stock-results .active-filters .tag[data-filter="make"]:has(~ .tag[data-filter="model"]) {
	display: none;
}

#sl-stock-results .so-select .value {
	margin: 0;
	color: var(--clr-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 19px;
}

#sl-stock-results .so-select svg {
	width: 18px;
	height: 18px;
	color: var(--clr-primary);
	fill: var(--clr-primary);
}

#sl-stock-results .keywords-wrapper {
	min-height: 52px;
	padding: 0 16px 0 44px;
	background-color: var(--clr-grey);
	border: 1px solid #E3E6EA;
	border-radius: 12px;
}

#sl-stock-results #sl-keywords {
	background-color: transparent;
	color: var(--clr-primary);
	font-size: 15px;
	line-height: 19px;
}

#sl-stock-results #sl-keywords::placeholder {
	color: var(--clr-secondary);
	opacity: 1;
}

#sl-stock-results .keyword-search-icon {
	top: 50%;
	bottom: auto;
	left: 16px;
	height: 16px; /* box was 24px with the 16px svg at its top: icon sat 3px above the text */
	line-height: 0;
	transform: translateY(-50%);
	color: var(--clr-secondary);
	fill: var(--clr-secondary);
}

#sl-stock-results .btn-clear-filters {
	color: var(--clr-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 19px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- list: results heading --- */
#sl-stock-results .sl-results-heading {
	margin: 0;
	padding: 0;
	color: var(--clr-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
}

#sl-stock-results .btn-view-saved {
	color: var(--clr-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 19px;
}

#sl-stock-results .sl-sortby label {
	color: var(--clr-secondary);
	font-size: 15px;
	font-weight: 400;
}

#sl-stock-results #sortby {
	color: var(--clr-primary);
	font-size: 15px;
	font-weight: 600;
	background-color: transparent;
}

/* --- list: cards --- */
#sl-stock-results .stock-item,
#sl-stock-details .sd-similar-vehicles .stock-item {
	overflow: hidden;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: var(--shadow-card);
	color: var(--clr-primary);
}

#sl-stock-results .si-gallery,
#sl-stock-details .sd-similar-vehicles .si-gallery {
	height: auto;
	background-color: var(--clr-grey);
	border: 0;
	border-radius: 0;
}

#sl-stock-results .si-slider img {
	width: 100%;
	height: auto;
	aspect-ratio: 538 / 340;
	object-fit: cover;
}

#sl-stock-results .si-gallery .embla__button,
#sl-stock-details #sd-gallery-main .embla__button {
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	bottom: auto;
	padding: 0;
	background-color: rgba(255,255,255,.9);
	border-radius: 50%;
	transform: translateY(-50%);
	transition: background-color .2s ease;
}

#sl-stock-results .si-gallery .embla__button {
	width: 40px;
	height: 40px;
}

#sl-stock-results .si-gallery .embla__button--prev { left: 16px; right: auto; }
#sl-stock-results .si-gallery .embla__button--next { right: 16px; left: auto; }

#sl-stock-results .si-gallery .embla__button:disabled,
#sl-stock-details #sd-gallery-main .embla__button:disabled {
	display: none;
}

#sl-stock-results .si-gallery .embla__button:hover,
#sl-stock-details #sd-gallery-main .embla__button:hover {
	background-color: #fff;
}

#sl-stock-results .si-gallery .embla__button svg,
#sl-stock-details #sd-gallery-main .embla__button svg {
	width: 14px;
	height: 14px;
	fill: var(--clr-primary);
}

#sl-stock-results .banner-badges,
#sl-stock-details .sd-similar-vehicles .banner-badges {
	top: auto;
	right: auto;
	bottom: 16px;
	left: 16px;
	gap: 8px;
}

#sl-stock-results .banner-badge,
#sl-stock-details .sd-similar-vehicles .banner-badge {
	height: 28px;
	margin: 0;
	padding: 6px 12px;
	background-color: #fff;
	border-radius: 999px;
	color: var(--clr-primary);
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
}

#sl-stock-results .banner-badge.banner-highlight,
#sl-stock-details .sd-similar-vehicles .banner-badge.banner-highlight {
	background-color: var(--clr-primary);
	color: #fff;
}

#sl-stock-results .si-content-main,
#sl-stock-details .sd-similar-vehicles .si-content-main {
	gap: 14px;
	padding: 28px 28px 24px;
}

#sl-stock-results .si-title,
#sl-stock-details .sd-similar-vehicles .si-title {
	padding: 0 36px 0 0;
	color: var(--clr-primary);
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
}

#sl-stock-results .si-title .year,
#sl-stock-details .sd-similar-vehicles .si-title .year {
	display: inline;
}

#sl-stock-results .si-title .badge,
#sl-stock-details .sd-similar-vehicles .si-title .badge {
	margin-top: 2px;
	color: var(--clr-secondary);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
}

#sl-stock-results .sl-save-stock {
	top: 28px;
	right: 28px;
	bottom: auto;
	left: auto;
	width: 22px;
	height: 22px;
	color: var(--clr-primary);
}

#sl-stock-results .sl-save-stock svg {
	width: 22px;
	height: 22px;
}

/* Figma 02B: "$X / month" sits bottom-right of the price block (on the "Was" line); wraps under on narrow cards */
#sl-stock-results .si-price-category,
#sl-stock-details .sd-similar-vehicles .si-price-category {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	column-gap: 12px;
	padding: 0;
}

#sl-stock-results .si-cert-repymnt,
#sl-stock-details .sd-similar-vehicles .si-cert-repymnt {
	margin: 0 0 0 auto;
	padding: 0;
}

#sl-stock-results .si-repayments,
#sl-stock-details .sd-similar-vehicles .si-repayments,
#sl-stock-results .si-repayments b,
#sl-stock-details .sd-similar-vehicles .si-repayments b {
	color: var(--clr-secondary);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
}

#sl-stock-results .si-finance,
#sl-stock-details .sd-similar-vehicles .si-finance {
	padding: 0;
}

#sl-stock-results .si-interest,
#sl-stock-details .sd-similar-vehicles .si-interest {
	color: var(--clr-secondary);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

#sl-stock-results .si-interest b,
#sl-stock-details .sd-similar-vehicles .si-interest b {
	display: block;
	color: var(--clr-primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
}

#sl-stock-results .si-location span,
#sl-stock-details .sd-similar-vehicles .si-location span {
	font-size: 14px;
	line-height: 18px;
}

#sl-stock-results .si-price,
#sl-stock-details .sd-similar-vehicles .si-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	row-gap: 2px;
}

#sl-stock-results .si-price .price-value,
#sl-stock-details .sd-similar-vehicles .si-price .price-value {
	margin: 0;
	color: var(--clr-primary);
	font-size: 34px;
	font-weight: 700;
	line-height: 43px;
}

#sl-stock-results .si-price .price-text,
#sl-stock-details .sd-similar-vehicles .si-price .price-text {
	color: var(--clr-secondary);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
}

#sl-stock-results .si-price .price-was,
#sl-stock-details .sd-similar-vehicles .si-price .price-was {
	flex-basis: 100%;
	color: var(--clr-secondary);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	text-decoration: line-through;
}

#sl-stock-results .si-myfeatures,
#sl-stock-details .sd-similar-vehicles .si-myfeatures {
	gap: 24px;
	padding: 0;
}

#sl-stock-results .si-myfeatures b,
#sl-stock-details .sd-similar-vehicles .si-myfeatures b {
	display: block;
	color: var(--clr-primary);
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
}

#sl-stock-results .si-myfeatures span,
#sl-stock-details .sd-similar-vehicles .si-myfeatures span {
	margin-top: 2px;
	color: var(--clr-secondary);
	font-size: 15px;
	line-height: 19px;
}

/* Similar Vehicles cards are narrower than /stock cards: start the price block at 0 so "$X / month" stays on the "Was" line (feedback 4 #7) */
#sl-stock-details .sd-similar-vehicles .si-price {
	flex: 1 0 0;
}

#sl-stock-results .load-more .btn {
	width: 100%;
	min-height: 56px;
	padding: 18px 32px;
	border-radius: 2px;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
}

#sl-stock-results .price-disclaimer,
#sl-stock-details .price-disclaimer {
	color: var(--clr-secondary);
	font-size: 13px;
	line-height: 18px;
}

/* Feedback 4 #2: Alice price_disclaimer now holds the Figma BYD SEO copy
   (three .stock-seo spans). On results it sits in a full-bleed white band
   under Load More; on details it's not wanted (#8). */
#sl-stock-results .price-disclaimer {
	margin: 50px 0 -24px;
	padding: 50px 0 80px;
	background: #fff;
	box-shadow: 0 0 0 100vmax #fff;
	clip-path: inset(0 -100vmax);
	font-size: 14px;
	line-height: 22px;
}

#sl-stock-results .price-disclaimer .stock-seo {
	display: block;
}

#sl-stock-results .price-disclaimer .stock-seo + .stock-seo {
	margin-top: 14px;
}

#sl-stock-results .price-disclaimer strong {
	color: var(--clr-primary);
	font-weight: 700;
}

#sl-stock-details .price-disclaimer {
	display: none;
}

/* --- details: utility bar --- */
#sl-stock-details .sd-back-results {
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 28px 0 20px;
}

#sl-stock-details .sd-back-btn,
#sl-stock-details .sd-share-mobile a {
	margin: 0;
	color: var(--clr-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 19px;
}

#sl-stock-details .sd-back-btn {
	font-size: 16px;
	line-height: 20px;
}

#sl-stock-details .sd-share-mobile {
	display: flex;
	align-items: center;
	gap: 28px;
}

/* --- details: heading + gallery card --- */
#sl-stock-details .sd-heading-gallery,
#sl-stock-details .sd-description,
#sl-stock-details #sd-enquiry {
	align-self: start;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: var(--shadow-card);
}

#sl-stock-details .sd-heading-gallery {
	overflow: hidden;
}

#sl-stock-details .sd-heading {
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 32px;
	background-color: transparent;
	border-radius: 0;
}

#sl-stock-details .sd-title {
	margin: 0;
	color: var(--clr-primary);
	font-size: 26px;
	font-weight: 700;
	line-height: 33px;
}

#sl-stock-details .sd-title .year,
#sl-stock-details .sd-title .badge {
	display: inline;
}

#sl-stock-details .sd-title .badge {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

#sl-stock-details .sd-price .price-value {
	color: var(--clr-primary);
	font-size: 26px;
	font-weight: 700;
	line-height: 33px;
}

#sl-stock-details .sd-price .price-text {
	color: var(--clr-secondary);
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
}

#sl-stock-details .sd-gallery {
	background-color: transparent;
}

#sl-stock-details #sd-gallery-main .embla__slide img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

#sl-stock-details #sd-gallery-main .embla__button {
	width: 48px;
	height: 48px;
	box-shadow: var(--shadow-card);
}

#sl-stock-details #sd-gallery-main .embla__button--prev { left: 24px; right: auto; }
#sl-stock-details #sd-gallery-main .embla__button--next { right: 24px; left: auto; }

#sl-stock-details #sd-gallery-main .embla__button svg {
	width: 16px;
	height: 16px;
}

#sl-stock-details #sd-gallery-main .banner-badges {
	top: auto;
	right: auto;
	bottom: 24px;
	left: 24px;
}

#sl-stock-details #sd-gallery-main .banner-badge {
	height: 30px;
	margin: 0;
	padding: 6px 12px;
	background-color: rgba(13,24,40,.6);
	border-radius: 999px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
}

#sl-stock-details #sd-gallery-thumb {
	height: auto;
	margin-top: 10px;
}

#sl-stock-details #sd-gallery-thumb .embla__container {
	height: auto;
}

#sl-stock-details #sd-gallery-thumb .embla__slide {
	flex: 0 0 calc((100% - 60px) / 6);
	min-width: 0;
	height: auto;
	margin-right: 12px;
	background-color: transparent;
	cursor: pointer;
}

#sl-stock-details #sd-gallery-thumb .embla__slide img {
	width: 100%;
	height: auto;
	aspect-ratio: 145 / 113;
	object-fit: cover;
	border: 0;
	border-radius: 12px;
}

#sl-stock-details #sd-gallery-thumb .embla__slide.is-selected img {
	outline: 3px solid var(--clr-primary);
	outline-offset: -3px;
}

/* --- details: headings (accent bar 32x3) --- */
#sl-stock-details .sdc-heading {
	margin: 0 0 20px;
	padding: 0 0 13px;
	color: var(--clr-primary);
	font-size: 20px;
	font-weight: 700;
	line-height: 25px;
}

#sl-stock-details .sdc-heading::after {
	top: auto;
	right: auto;
	bottom: 0;
	left: 0;
	width: 32px;
	height: 3px;
	background-color: var(--clr-primary);
	border-radius: 2px;
}

/* --- details: car details + features card --- */
#sl-stock-details .sd-description {
	padding: 32px;
}

#sl-stock-details .sd-description .sd-content {
	padding: 0;
	background-color: transparent;
	border-radius: 0;
}

#sl-stock-details .sdc-heading-wrapper {
	margin: 0;
}

#sl-stock-details .slf-vehicle-details > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #E3E6EA;
	text-align: left;
}

#sl-stock-details .slf-vehicle-details > div span:first-child {
	padding: 0;
	color: var(--clr-secondary);
	font-size: 15px;
	font-weight: 400;
	line-height: 19px;
	text-align: left;
}

#sl-stock-details .slf-vehicle-details > div span:last-child {
	color: var(--clr-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 19px;
	text-align: right;
}

/* .sd-description in the selector: `#sl-stock-details .sd-description .sd-content { padding: 0 }`
   was winning, so the toggle sat flush on the last spec row and the card edge (2026-10-21) */
#sl-stock-details .sd-description .sdd-features {
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 24px 0;
	color: var(--clr-primary);
}

#sl-stock-details .sdd-features .sdc-heading {
	margin: 0;
	padding: 0;
}

#sl-stock-details .sdd-features .sdc-heading::after {
	content: none;
}

#sl-stock-details .sdd-features svg {
	width: 20px;
	height: 20px;
	color: var(--clr-primary);
	fill: var(--clr-primary);
}

#sl-stock-details #stock-features {
	padding-top: 20px;
	font-size: 15px;
}

/* --- details: enquiry card --- */
#sl-stock-details #sd-enquiry {
	padding: 32px;
}

#sl-stock-details #sd-enquiry .sd-content {
	padding: 0;
	background-color: transparent;
	border-radius: 0;
}

#sl-stock-details #sd-enquiry .sdc-fin-option,
#sl-stock-details #sd-enquiry .sdc-book-test-drive,
#sl-stock-details #sd-enquiry .sdc-submit {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #E3E6EA;
}

#sl-stock-details .sdc-fin-option .sdc-heading,
#sl-stock-details .sdc-book-test-drive .sdc-heading {
	margin: 0 0 16px;
	padding: 0;
	font-size: 16px;
	line-height: 20px;
}

#sl-stock-details .sdc-fin-option .sdc-heading::after,
#sl-stock-details .sdc-book-test-drive .sdc-heading::after {
	content: none;
}

#sl-stock-details .sdc-user-details .flex.d-two-cols {
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
}

#sl-stock-details .sdc-user-details .flex.d-two-cols > div {
	flex: 0 0 calc(50% - 8px);
	width: calc(50% - 8px);
	max-width: none;
	padding: 0;
}

#sl-stock-details #sd-enquiry .form-control {
	height: 56px;
	margin: 0;
	padding: 0 16px;
	background-color: var(--clr-grey);
	border: 1px solid #E3E6EA;
	border-radius: 12px;
	color: var(--clr-primary);
	font-size: 15px;
	line-height: 19px;
}

#sl-stock-details #sd-enquiry textarea.form-control {
	height: 120px;
	padding: 16px;
}

#sl-stock-details #sd-enquiry .form-group-last {
	margin-top: 16px;
}

#sl-stock-details #sd-enquiry .form-group label {
	left: 16px;
	color: var(--clr-secondary);
	font-size: 15px;
	line-height: 19px;
}

#sl-stock-details #sd-enquiry .form-group input + label {
	height: 56px;
}

/* Feedback 4 mobile #2: Book a test drive dialog. The two groups touched
   (no gap), and the time select was a square 43px box in another grey. It now
   matches the date field: 48px, #F4F5F6, 12px radius, same border and text. */
#sl-stock-details .sd-test-drive-dialog .form-group + .form-group {
	margin-top: 16px;
}

#sl-stock-details .sd-test-drive-dialog .select-container {
	height: 48px;
	overflow: hidden;
	background-color: #F4F5F6;
	border: 1px solid #E3E6EA;
	border-radius: 12px;
}

#sl-stock-details .sd-test-drive-dialog .select-container select {
	height: 46px;
	padding: 0 16px;
	color: var(--clr-primary);
	font-size: 15px;
}

#sl-stock-details .sd-choices:not(.sd-hide-desktop) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
}

#sl-stock-details .sd-choices .sl-radio label.btn {
	height: 100%;
	padding: 16px 20px;
	background-color: #fff;
	border: 1px solid #E3E6EA;
	border-radius: 12px;
	color: var(--clr-primary);
	font-size: 15px;
	font-weight: 700;
	line-height: 19px;
	text-align: left;
}

#sl-stock-details .sd-choices .sl-radio input:checked + label.btn {
	border-color: var(--clr-primary);
	box-shadow: inset 0 0 0 1px var(--clr-primary);
}

#sl-stock-details .sd-choices .sdc-extra {
	margin-top: 4px;
	color: var(--clr-secondary);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
}

#sl-stock-details .sdc-submit .btn {
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	padding: 18px 32px;
	border-radius: 2px;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
}

#sl-stock-details .sdc-submit .btn::after {
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
}

/* --- details: contact card (Figma location card) --- */
#sl-stock-details .sd-details {
	align-self: start;
}

#sl-stock-details .sd-details .sd-content {
	padding: 56px;
	background: radial-gradient(circle at 100% 0, rgba(61,122,204,.35), rgba(61,122,204,0) 55%), linear-gradient(135deg, #1E334E 0%, #0D1828 100%);
	border-radius: 24px;
	color: rgba(255,255,255,.9);
}

#sl-stock-details .sd-details .sdc-heading {
	margin: 0 0 24px;
	padding: 0 0 24px;
	border-bottom: 1px solid rgba(255,255,255,.15);
	color: #fff;
	font-size: 32px;
	line-height: 40px;
}

#sl-stock-details .sd-details .sdc-heading::after {
	content: none;
}

/* Feedback 4 #4 + #6: the stock plugin builds these headings from
   "finance this {stock_desc}?" and "Contact {location}", with no Alice
   setting for either, so the text is swapped in CSS. Kept below the base
   heading rules so the font-size: 0 wins. */
#sl-stock-details .sdc-fin-option .sdc-heading,
#sl-stock-details .byd-certified---auto-selection > .sd-content > .sdc-heading {
	font-size: 0;
}

#sl-stock-details .sdc-fin-option .sdc-heading::before {
	content: "Do you want to finance this car?";
	font-size: 16px;
}

#sl-stock-details .byd-certified---auto-selection > .sd-content > .sdc-heading::before {
	content: "BYD Certified - Auto Selection";
	font-size: 32px;
}

#sl-stock-details .sdd-details,
#sl-stock-details .sdd-hours {
	color: rgba(255,255,255,.9);
	font-size: 16px;
	line-height: 24px;
}

#sl-stock-details .sdd-hours > div {
	border-color: rgba(255,255,255,.15);
}

#sl-stock-details .sdd-details b {
	color: rgba(255,255,255,.6);
	font-weight: 600;
}

#sl-stock-details .sd-details a,
#sl-stock-details .sd-details .sl-highlight {
	color: #fff;
}

#sl-stock-details .sdd-map {
	overflow: hidden;
	border-radius: 20px;
}

/* Finance box (Figma 03B): bold navy figures, small grey labels, room before "BYD Car Details" */
#sl-stock-details .sd-description .sdc-finance {
	margin: 0 0 32px;
	padding: 0 0 24px;
}

#sl-stock-details .sd-fin-heading {
	color: var(--clr-secondary);
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
}

#sl-stock-details .sd-fin-heading > div {
	color: var(--clr-primary);
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
}

#sl-stock-details .sd-fin-heading > span {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 18px;
}

/* hours: Figma wording. The plugin always prints Mon–Sun rows, so show Mon + Sun only and relabel them.
   Assumes Mon–Sat share hours (Alice location 2410 hours JSON: "Monday-Saturday" + "Sunday"). */
#sl-stock-details .sdd-hours::before {
	content: "Trading hours";
	display: block;
	margin: 0 0 8px;
	color: rgba(255,255,255,.6);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

#sl-stock-details .sdd-hours > div {
	justify-content: flex-start;
	gap: 4px;
	padding: 0 0 4px;
	border: 0;
}

#sl-stock-details .sdd-hours > div:nth-child(n+2):nth-child(-n+6) {
	display: none;
}

#sl-stock-details .sdd-hours > div > span:first-child {
	font-size: 0;
}

#sl-stock-details .sdd-hours > div:first-child > span:first-child::before,
#sl-stock-details .sdd-hours > div:nth-child(7) > span:first-child::before {
	content: "Mon - Sat:";
	font-size: 16px;
}

#sl-stock-details .sdd-hours > div:nth-child(7) > span:first-child::before {
	content: "Sun & Public Holidays:";
}

@media (min-width: 1025px) {

	/* list layout */
	#sl-stock-results .sl-searchbar {
		padding: 32px var(--nav-pad) 24px;
	}

	#sl-stock-results .so-wrapper {
		display: flex;
		flex-direction: column;
		gap: 16px;
		max-width: none;
		padding: 24px;
		background-color: #fff;
		border-radius: 20px;
		box-shadow: var(--shadow-card);
	}

	#sl-stock-results #stock-options {
		justify-content: flex-start;
		gap: 16px;
	}

	#sl-stock-results #stock-options .stock-option {
		flex: 1 1 0;
		width: auto;
		height: 52px;
		margin: 0;
	}

	#sl-stock-results #stock-options .stock-option .so-select {
		height: 100%;
	}

	#sl-stock-results #so-sort_by {
		display: none;
	}

	#sl-stock-results .filters-wrapper {
		gap: 24px;
		margin: 0;
	}

	#sl-stock-results .keywords-wrapper {
		flex: 1 1 auto;
	}

	#sl-stock-results .filters-wrapper > .btn-clear-filters {
		margin: 0;
	}

	#sl-stock-results .sl-heading .sl-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		max-width: none;
		padding: 16px var(--nav-pad) 0;
	}

	#sl-stock-results .sl-heading-rightside {
		align-items: center;
		gap: 32px;
	}

	#sl-stock-results .sl-heading-rightside > .btn-view-saved {
		margin: 0;
	}

	#sl-stock-results .list-stock .sl-wrapper {
		max-width: none;
		padding: 24px var(--nav-pad) 80px;
	}

	#sl-stock-results .ls-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
	}

	/* details layout */
	#sl-stock-details .stock-details > .sl-wrapper {
		max-width: none;
		padding: 0 var(--nav-pad) 80px;
	}

	#sl-stock-details .sd-grid {
		grid-template-columns: minmax(0, 936fr) minmax(0, 704fr);
		grid-template-areas:
			"heading-gallery enquiry"
			"heading-gallery details"
			"description details"
			"similar-vehicles similar-vehicles";
		gap: 24px 40px;
	}

	/* duplicates the BYD Car Details rows; not in Figma 03B */
	#sl-stock-details .sd-highlights {
		display: none;
	}

}

/* ==========================================================================
*  Stock list mobile (Figma mobile M02 Find My BYD, variation B) – 2026-10-20
*  <=1024px (the desktop stock layout starts at 1025). CSS only, no new classes.
*  - Filters shown inline in a white card (Figma): Type / Make-Model / Price / Year
*    in a 2x2 grid, More Filters full width, then keyword search + Clear All Filters.
*    The plugin's "Filters" drawer button is hidden; Sort By moves to the heading row.
*  - Heading centred 22px, "Saved BYD Cars" left + Sort By right underneath.
*  - Cards: 20px padding, title 18, price 24 (Figma); Load More full width.
* ========================================================================== */
@media (max-width: 1024px) {

	#sl-stock-results .sl-searchbar {
		padding: 24px 20px 0;
	}

	#sl-stock-results .so-wrapper {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 16px;
		background-color: #fff;
		border-radius: 20px;
		box-shadow: var(--shadow-card);
	}

	body:not(.mobile-filters) #sl-stock-results #stock-options {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	body:not(.mobile-filters) #sl-stock-results #stock-options .stock-option {
		position: relative;
		width: auto;
		height: 44px;
		margin: 0;
	}

	/* Inline dropdowns open as a panel under the field (the plugin's mobile
	   dropdown is in-flow and gets squashed inside the 44px row) */
	body:not(.mobile-filters) #sl-stock-results #stock-options .so-dropdown {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		z-index: 20;
		width: max-content;
		min-width: 100%;
		max-width: calc(100vw - 72px);
		height: auto;
		max-height: 320px;
		overflow: auto;
		padding: 12px 16px;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: var(--shadow-card);
	}

	body:not(.mobile-filters) #sl-stock-results #stock-options .stock-option:nth-child(even) .so-dropdown {
		left: auto;
		right: 0;
	}

	/* More Filters body-type tiles: 3 equal columns that fit the panel */
	body:not(.mobile-filters) #sl-stock-results .sbf-more-options {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	body:not(.mobile-filters) #sl-stock-results .sbf-more-options .sbfs-btn {
		width: 100%;
		min-width: 0;
		padding-left: 4px;
		padding-right: 4px;
	}

	body:not(.mobile-filters) #sl-stock-results #stock-options .so-select {
		height: 100%;
		padding: 0 12px;
		font-size: 13px;
	}

	body:not(.mobile-filters) #sl-stock-results #stock-options .so-select > div {
		flex: 1 1 auto;
		justify-content: flex-start;
		min-width: 0;
	}

	body:not(.mobile-filters) #sl-stock-results #stock-options .so-select label,
	body:not(.mobile-filters) #sl-stock-results #stock-options .so-select .value {
		flex: 0 0 auto;
		width: auto;
		min-width: 0;
		font-size: 13px;
		white-space: nowrap;
	}

	/* long picks ("Build Your Dreams") truncate instead of widening the page */
	body:not(.mobile-filters) #sl-stock-results #stock-options .so-select > div {
		overflow: hidden;
	}

	body:not(.mobile-filters) #sl-stock-results #stock-options .so-select .value {
		flex-shrink: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	body:not(.mobile-filters) #sl-stock-results #stock-options .so-select svg {
		flex: 0 0 16px;
		width: 16px;
		height: 16px;
		margin-left: 6px;
	}

	body:not(.mobile-filters) #sl-stock-results #so-more_filters {
		grid-column: 1 / -1;
	}

	body:not(.mobile-filters) #sl-stock-results #so-sort_by,
	body:not(.mobile-filters) #sl-stock-results .mobile-filter-btns,
	#sl-stock-results .btn-mobile-filters {
		display: none;
	}

	#sl-stock-results .filters-wrapper {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin: 0;
	}

	#sl-stock-results .keywords-wrapper {
		min-height: 44px;
		padding-left: 40px;
	}

	#sl-stock-results .kw-left {
		margin: 0;
	}

	#sl-stock-results .kw-right {
		padding: 0;
	}

	#sl-stock-results #sl-keywords {
		height: 44px;
		padding: 0;
		border: 0;
		font-size: 13px;
		text-align: left;
	}

	#sl-stock-results .keyword-search-icon {
		left: 14px;
		height: 16px;
	}

	#sl-stock-results .filters-wrapper > .btn-clear-filters {
		display: block;
		align-self: flex-end;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		font-size: 13px;
	}

	/* heading */
	#sl-stock-results .sl-heading .sl-wrapper {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 24px 20px 0;
	}

	#sl-stock-results .sl-results-heading {
		font-size: 22px;
		line-height: 28px;
		text-align: center;
	}

	#sl-stock-results .sl-heading-rightside {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
	}

	#sl-stock-results .sl-heading-rightside > .btn-view-saved {
		margin: 0;
		font-size: 13px;
	}

	#sl-stock-results .slm-filter-sort .sl-saved,
	#sl-stock-results .sl-sortby .icon-sort {
		display: none;
	}

	#sl-stock-results .sl-sortby {
		align-items: center;
		gap: 4px;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
	}

	#sl-stock-results .sl-sortby label,
	#sl-stock-results #sortby {
		font-size: 13px;
		white-space: nowrap;
	}

	#sl-stock-results .sl-sortby .sortby-hide {
		display: inline;
		margin-left: -4px;
	}

	#sl-stock-results #sortby {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		border: 0;
		opacity: 1;
	}

	/* cards */
	#sl-stock-results .list-stock .sl-wrapper {
		padding: 16px 20px 48px;
	}

	/* plugin min column is 340px, which overflows phones under ~380px (build check 2026-10-21) */
	#sl-stock-results .ls-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
		gap: 20px;
	}

	#sl-stock-results .si-content-main {
		padding: 20px;
	}

	#sl-stock-results .si-title {
		font-size: 18px;
		line-height: 24px;
	}

	#sl-stock-results .si-price .price-value {
		font-size: 26px;
		line-height: 32px;
	}

	#sl-stock-results .load-more .btn {
		width: 100%;
	}

}

/* ==========================================================================
*  Vehicle details mobile (Figma mobile M03) – 2026-10-20
*  <=1024px (the desktop details layout starts at 1025). CSS only, no new classes.
*  - Utility bar: "Back to search results" left, icon-only Save / Share / Print right
*    on one row; views counter hidden.
*  - Heading + gallery full bleed (no card): title left, price right, photo edge to edge.
*  - Highlights strip hidden (not in Figma); details card before the enquiry form.
*  - Enquiry form shown inline (the plugin hides it behind "Enquire Now" / "Call Us"
*    buttons below 1025px); those buttons are hidden.
* ========================================================================== */
@media (max-width: 1024px) {

	/* utility bar */
	#sl-stock-details .sd-back-results {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0;
		padding: 0 0 14px;
	}

	#sl-stock-details > .stock-details > .sl-wrapper {
		padding-top: 14px;
	}

	#sl-stock-details .sd-back-btn {
		font-size: 14px;
		white-space: nowrap;
	}

	#sl-stock-details .sd-share-mobile {
		display: flex;
		align-items: center;
		gap: 16px;
		margin: 0;
	}

	#sl-stock-details .sd-share-mobile > div[title] {
		display: none;
	}

	#sl-stock-details .sd-share-mobile a {
		display: flex;
		align-items: center;
		font-size: 0;
	}

	#sl-stock-details .sd-share-mobile .print {
		display: flex;
	}

	#sl-stock-details .sd-share-mobile .print span {
		display: none;
	}

	#sl-stock-details .sd-share-mobile svg {
		width: 20px;
		height: 20px;
		margin: 0;
	}

	/* heading + gallery full bleed */
	#sl-stock-details .sd-heading-gallery {
		margin-left: -20px;
		margin-right: -20px;
		border-radius: 0;
		box-shadow: none;
	}

	#sl-stock-details .sd-heading {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		padding: 20px;
	}

	#sl-stock-details .sd-title {
		margin: 0;
		font-size: 20px;
		line-height: 26px;
	}

	#sl-stock-details .sd-price {
		flex: 0 0 auto;
		margin: 0;
		text-align: right;
	}

	#sl-stock-details .sd-price .price-value {
		font-size: 20px;
		line-height: 26px;
		white-space: nowrap;
	}

	#sl-stock-details .sd-price .price-text,
	#sl-stock-details .sd-price .sd-category {
		font-size: 12px;
	}

	#sl-stock-details #sd-gallery-main .embla__slide img {
		aspect-ratio: 39 / 29;
		border-radius: 0;
	}

	#sl-stock-details #sd-gallery-main .embla__button--prev,
	#sl-stock-details #sd-gallery-main .embla__button--next {
		width: 36px;
		height: 36px;
	}

	#sl-stock-details #sd-gallery-main .embla__button--prev {
		left: 16px;
	}

	#sl-stock-details #sd-gallery-main .embla__button--next {
		right: 16px;
	}

	/* order: heading/gallery, details card, enquiry form, contact */
	#sl-stock-details .sd-highlights,
	#sl-stock-details .sd-primary-choice {
		display: none;
	}

	#sl-stock-details .sd-grid {
		grid-template-areas: "heading-gallery" "description" "enquiry" "details" "similar-vehicles";
	}

	#sl-stock-details .sd-description,
	#sl-stock-details #sd-enquiry {
		padding: 24px 20px;
	}

	#sl-stock-details .sd-enquiry-mobile #sd-enquiry-form {
		display: block;
	}

	/* Figma: one field per row, 48px tall */
	#sl-stock-details #sd-enquiry-form .d-two-cols > div {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}

	#sl-stock-details #sd-enquiry-form input.form-control {
		height: 48px;
	}

	/* Feedback 4 mobile #1: label box was still the desktop 56px, so the
	   floating label sat 4px below the middle of the 48px field */
	#sl-stock-details #sd-enquiry .form-group input + label {
		height: 48px;
	}

	#sl-stock-details .sd-details .sd-content {
		padding: 32px 20px;
	}

}

/* ==========================================================================
*  Sell / Request Trade-in Value mobile (Figma mobile M04) – 2026-10-20
*  Page 547. No new classes.
*  - <=1024: trade-in form fields one per row. The ate-form plugin floats the
*    name/phone groups without a clear, so the LTA group wrapped them and its label
*    sat on top of "First Name".
*  - <=767: hero + CTA photos cropped (Figma 390x320 / 390x260), smaller step icons,
*    uppercase step label, compact "Why sell" cards with a pill icon chip,
*    full-width Get a Free Quote buttons.
* ========================================================================== */
@media (max-width: 1024px) {

	#request-trade-in-form > .flex > * {
		float: none;
		width: 100%;
	}

	#request-trade-in-form .form-phone {
		padding-left: 0;
	}

	#request-trade-in-form .form-phone .form-control {
		padding-left: 64px;
	}

}

@media (max-width: 767px) {

	/* hero + CTA photos */
	.page-id-547 .banner img {
		aspect-ratio: 39 / 32;
		height: auto;
		object-fit: cover;
	}

	/* Feedback 4 mobile #3: CTA uses the wide photo, framed like Figma
	   (screen at the left, driver on the right), not the portrait close-up */
	.page-id-547 .banner:not(:first-child, .banner-light) img {
		aspect-ratio: 39 / 26;
		object-position: 75% 50%;
	}

	.page-id-547 .banner:not(:first-child, .banner-light) .btn {
		width: 100%;
		max-width: none;
		background: #fff;
		border-color: #fff;
		color: var(--clr-primary);
	}

	.page-id-547 .banner:not(:first-child, .banner-light) .btn::after {
		display: none;
	}

	/* steps */
	.page-id-547 h2:has(+ .step-list) {
		font-size: 26px;
		line-height: 32px;
	}

	.page-id-547 .step-list img {
		width: 32px;
		height: 32px;
		padding: 7px;
	}

	.page-id-547 .step-list span {
		font-size: 13px;
		letter-spacing: 2px;
		text-transform: uppercase;
	}

	.page-id-547 .step-list h3 {
		font-size: 18px;
		line-height: 24px;
	}

	.page-id-547 .step-list p {
		font-size: 16px;
		line-height: 24px;
	}

	/* form submit */
	#request-trade-in-form .form-submit {
		width: 100%;
	}

	/* "Why sell" cards */
	.page-id-547 .grid > .q-text {
		padding: 28px 20px;
	}

	.page-id-547 .grid > .q-text img {
		width: 64px;
		height: 28px;
		margin-bottom: 16px;
		padding: 4px 22px;
		border-radius: 14px;
		object-fit: contain;
	}

	.page-id-547 .grid > .q-text h3 {
		font-size: 17px;
		line-height: 24px;
	}

}

/* ==========================================================================
*  Programme Benefits mobile (Figma mobile M05) – 2026-10-20
*  Page 552, <=767px. No new classes.
*  - Hero: photo cropped to 39:32, then navy text on the light grey panel (the
*    banner-light look; desktop keeps the dark banner). Divider under the subtitle.
*  - Benefit cards: 4:3 photos, 20px side padding, title 18 / body 16 (Figma).
* ========================================================================== */
@media (max-width: 767px) {

	/* hero */
	.page-id-552 .banner:first-child img {
		aspect-ratio: 39 / 32;
		height: auto;
		object-fit: cover;
	}

	.page-id-552 .banner:first-child + .banner > .wrapper > .banner-layer {
		background: var(--clr-grey-lt);
	}

	.page-id-552 .banner:first-child + .banner .h2 {
		font-size: 42px;
		line-height: 48px;
		margin-bottom: 16px;
		color: var(--clr-primary);
	}

	.page-id-552 .banner:first-child + .banner p {
		font-size: 16px;
		line-height: 24px;
		color: var(--clr-base);
	}

	.page-id-552 .banner:first-child + .banner p:has(> strong) {
		margin-bottom: 20px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--clr-grey-dk);
		font-size: 20px;
		line-height: 26px;
		color: var(--clr-primary);
	}

	/* benefit cards */
	.page-id-552 .grid {
		gap: 16px;
	}

	.page-id-552 .grid > .q-text > img {
		aspect-ratio: 4 / 3;
		height: auto;
		object-fit: cover;
	}

	/* Feedback 4 mobile #5: the top row photos are 1088x528 (about 2:1), so
	   4:3 cut away the tablet + hand on "177-Point Vehicle Health Check".
	   16:9 keeps nearly the full width, anchored left like Figma */
	.page-id-552 .grid.d-three-cols > .q-text > img {
		aspect-ratio: 16 / 9;
		object-position: 0 50%;
	}

	.page-id-552 .grid > .q-text > div {
		padding: 28px 20px 36px;
	}

	.page-id-552 .grid > .q-text .h4 {
		font-size: 18px;
		line-height: 24px;
	}

	.page-id-552 .grid > .q-text p {
		font-size: 16px;
		line-height: 24px;
	}

}

/* ==========================================================================
*  BYD Lifestyle Card mobile (Figma mobile M06) – 2026-10-20
*  Page 1883, <=767px. No new classes.
*  - Hero photo cropped to 39:32 (Figma 390x320); the card visual layer follows it.
*  - Hero + CTA buttons full width (Figma), 48px tall.
*  - Section headings navy 26px; partner logos 5 per row, small (Figma).
*  - How It Works is not in the mobile frame; kept (flagged for King).
* ========================================================================== */
@media (max-width: 767px) {

	/* hero */
	.page-id-1883 .banner:first-child picture img {
		aspect-ratio: 39 / 32;
		height: auto;
		object-fit: cover;
	}

	.page-id-1883 .banner:first-child + .banner .banner-layer-right {
		aspect-ratio: 39 / 32;
		padding: 0 15%;
	}

	.page-id-1883 .banner:first-child + .banner p {
		font-size: 16px;
		line-height: 24px;
	}

	/* hero + CTA buttons */
	.page-id-1883 .banner .btn {
		width: 100%;
		max-width: none;
		min-height: 48px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.page-id-1883 .banner .btn-glass {
		background: transparent;
	}

	/* headings */
	.page-id-1883 section.content:not(.dark-bg) .section-header .h1 {
		font-size: 26px;
		line-height: 32px;
		color: var(--clr-primary);
	}

	.page-id-1883 .section-header p {
		font-size: 16px;
		line-height: 24px;
	}

	/* partner logos: 5 per row */
	.page-id-1883 .section-header + hr {
		margin: 24px 0 12px;
		border-top-color: transparent;
	}

	.page-id-1883 .flex.t-center > * {
		width: 20%;
		height: 39px;
		padding: 0 6px;
	}

	.page-id-1883 .flex.t-center img {
		max-height: 24px;
	}

	/* FAQ (feedback 4 #18: no grey panel at mobile, plain divided list as in Figma) */
	.page-id-1883 .faqs {
		padding: 0;
		background: none;
		border-radius: 0;
	}

	.page-id-1883 .faqs .accord-head svg {
		flex-basis: 32px;
		width: 32px;
		height: 32px;
		padding: 8px;
	}

	.page-id-1883 .faqs + p {
		margin-top: 32px;
		font-size: 14px;
		line-height: 24px;
		text-align: center;
	}

	/* CTA: heading + buttons over the bottom of the photo, as in Figma (feedback 4 #19) */
	.page-id-1883 section + .banner .banner-layer {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0 20px 40px;
		background: linear-gradient(to top, rgba(21, 37, 56, .9), rgba(21, 37, 56, 0));
	}

}

/* ==========================================================================
*  Book a Test Drive mobile (Figma mobile M07) – 2026-10-20
*  Page 265. No new classes.
*  - <=1024: test drive form fields one per row. The ate-form plugin floats the
*    first/last name groups without a clear, so the phone group sat on top of them
*    ("First Name" and "Phone Number" labels overlapped). Same fix as the trade-in form.
*  - <=767: banner photo cropped to 39:32 (Figma 390x320), 48px fields + 20px gaps, full-width submit.
* ========================================================================== */
@media (max-width: 1024px) {

	#test-drive-form > .flex > * {
		float: none;
		width: 100%;
	}

	#test-drive-form .form-phone {
		padding-left: 0;
	}

	#test-drive-form .form-phone .form-control {
		padding-left: 64px;
	}

}

@media (max-width: 767px) {

	.page-id-265 .banner img {
		aspect-ratio: 39 / 32;
		height: auto;
		object-fit: cover;
	}

	#test-drive-form .form-group {
		margin-bottom: 20px;
	}

	#test-drive-form .form-control,
	#test-drive-form select {
		height: 48px;
	}

	#test-drive-form textarea.form-control {
		height: auto;
	}

	#test-drive-form .checkbox-group-tcs + .form-group {
		margin-top: 8px;
	}

	#test-drive-form .form-submit {
		width: 100%;
		margin-top: 0;
	}

}

/* ==========================================================================
*  Promotions, News & Events mobile (Figma mobile M08) – 2026-10-20
*  Page 550, <=767px. No new classes.
*  - Hero photo cropped to 39:32 (Figma 390x320).
*  - Intro left-aligned; filter tabs in one row that scrolls sideways (Figma).
*  - Card photos taller (Figma 350x340).
*  - CTA: heading + full-width white button over the photo (Figma 390x360).
* ========================================================================== */
@media (max-width: 767px) {

	/* hero */
	.page-id-550 .banner:first-child img {
		aspect-ratio: 39 / 32;
		height: auto;
		object-fit: cover;
		object-position: 72% center;
	}

	/* intro */
	.page-id-550 .section-header.t-center {
		text-align: left;
	}

	.page-id-550 .section-header h1 {
		font-size: 26px;
		line-height: 32px;
	}

	.page-id-550 .section-header p {
		font-size: 16px;
		line-height: 24px;
	}

	/* filter tabs: one row, scrolls sideways */
	.page-id-550 .tabs-flex {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		margin-right: -20px;
		padding-right: 20px;
		scrollbar-width: none;
	}

	.page-id-550 .tabs-flex::-webkit-scrollbar {
		display: none;
	}

	.page-id-550 .tabs-flex > * {
		flex-shrink: 0;
	}

	/* cards. Feedback 4 mobile #4: the near-square 35/34 crop cut the
	   1088x680 photos (card 4's driver + car sit at the far right), so show
	   them at their own 8:5 ratio, uncropped */
	.page-id-550 .tabs-content article > img {
		aspect-ratio: 8 / 5;
		height: auto;
		object-fit: cover;
	}

	/* CTA over the photo */
	.page-id-550 .banner:not(:first-child) > .wrapper {
		position: relative;
	}

	.page-id-550 .banner:not(:first-child) img {
		aspect-ratio: 39 / 36;
		height: auto;
		object-fit: cover;
		object-position: center;
	}

	.page-id-550 .banner:not(:first-child) .banner-layer {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0 20px 40px;
		background: linear-gradient(to top, rgba(30, 51, 78, .6), rgba(30, 51, 78, 0));
	}

	.page-id-550 .banner:not(:first-child) .btn {
		width: 100%;
		max-width: none;
	}

}

/* ==========================================================================
*  Article mobile (Figma mobile M09) – 2026-10-20
*  Article posts (single.php, was page 1880), <=767px. No new classes.
*  - Hero photo cropped to 39:32 (Figma 390x320).
*  - Title 32/42, body copy 18/27, sub-heading 18px (Figma).
*  - Gallery: featured photo + 3 thumbnails in one row (Figma), full-width Enquire Now.
* ========================================================================== */
@media (max-width: 767px) {

	.single-post .banner img {
		aspect-ratio: 39 / 32;
		height: auto;
		object-fit: cover;
	}

	.single-post section.content h1 {
		font-size: 32px;
		line-height: 42px;
	}

	.single-post section.content .post-date {
		margin: 16px 0 24px;
	}

	.single-post section.content p:not(.post-date) {
		font-size: 18px;
		line-height: 27px;
	}

	.single-post section.content .h4 {
		font-size: 18px;
		line-height: 24px;
	}

	.single-post section.content article > img {
		aspect-ratio: 7 / 4;
		object-fit: cover;
	}

	.single-post section.content .grid.d-three-cols {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.single-post section.content .grid.d-three-cols img {
		aspect-ratio: 55 / 42;
		height: auto;
		object-fit: cover;
	}

	.single-post section.content .btn {
		width: 100%;
		max-width: none;
	}

}

/* ==========================================================================
*  About Us mobile (Figma mobile M10) – 2026-10-20
*  Page 616. No new classes.
*  - All widths: the banner photo lost its rounded corners. The About block's
*    `.page-id-616 picture img` radius (meant for the showroom photo) also hit the
*    ACF banner picture.
*  - <=767: banner cropped to 39:32 (Figma 390x320), bigger logo, h1 32/46,
*    body 18/27, What We Offer icons in an 80x44 pill (Figma).
* ========================================================================== */
.page-id-616 .banner picture img {
	border-radius: 0;
}

@media (max-width: 767px) {

	.page-id-616 .banner picture img {
		aspect-ratio: 39 / 32;
		object-fit: cover;
	}

	.page-id-616 .content:not(.grey-bg) > .wrapper > .grid img {
		width: 200px;
	}

	.page-id-616 .content:not(.grey-bg) > .wrapper h1 {
		font-size: 32px;
		line-height: 46px;
	}

	.page-id-616 .content:not(.grey-bg) > .wrapper > .grid p {
		font-size: 18px;
		line-height: 27px;
	}

	.page-id-616 .grey-bg .grid > .q-text {
		padding: 40px;
	}

	.page-id-616 .grey-bg .grid > .q-text img {
		width: 80px;
		height: 44px;
		padding: 0;
		margin-bottom: 32px;
		object-fit: contain;
	}

	.page-id-616 .grey-bg .grid > .q-text .h4 {
		font-size: 18px;
		line-height: 24px;
	}

}

/* ==========================================================================
*  Our Team mobile (Figma mobile M11) – 2026-10-20
*  Page 147, <=767px. No new classes.
*  - Banner photo cropped to 39:32 (Figma 390x320).
*  - Title line height 34, 12px column gap, smaller name/role text, phone
*    numbers grey and kept on one line (Figma).
* ========================================================================== */
@media (max-width: 767px) {

	.page-id-147 .banner img {
		aspect-ratio: 39 / 32;
		height: auto;
		object-fit: cover;
	}

	.page-id-147 section.content h1 {
		margin-bottom: 16px;
		line-height: 34px;
	}

	.page-id-147 .content > .wrapper > .grid {
		gap: 20px 12px;
	}

	.page-id-147 .block-team .h5 {
		margin-top: 16px;
		font-size: 16px;
		line-height: 22px;
	}

	.page-id-147 .block-team p {
		font-size: 13px;
		line-height: 19px;
	}

	.page-id-147 .block-team p a {
		color: inherit;
		white-space: nowrap;
	}

}

/* ==========================================================================
*  Contact Us mobile (Figma mobile M12) – 2026-10-20
*  Page 137, <=767px. No new classes.
*  - Banner photo cropped to 39:32 (Figma 390x320).
*  - Location card heading 26/36 (Figma).
*  - General Enquiry: photo moves above the heading + form, 350x456 (Figma);
*    heading 30/38, shorter message box, full-width Submit. Inputs keep their 56px touch height (Figma draws ~26px).
* ========================================================================== */
@media (max-width: 767px) {

	.page-id-137 .banner img {
		aspect-ratio: 39 / 32;
		height: auto;
		object-fit: cover;
	}

	.page-id-137 .contact-card h2 {
		font-size: 26px;
		line-height: 36px;
	}

	.page-id-137 .grey-bg .flex.d-two-cols > .d-col-4 {
		order: -1;
		margin-bottom: 32px;
	}

	.page-id-137 .grey-bg .d-col-8 > h2 {
		font-size: 30px;
		line-height: 38px;
	}

	.page-id-137 .ate-form textarea {
		height: 100px;
	}

	.page-id-137 .grey-bg .flex.d-two-cols > .d-col-4 img {
		aspect-ratio: 175 / 228;
		height: auto;
		object-fit: cover;
	}

	.page-id-137 .ate-form [type=submit],
	.page-id-137 .ate-form .btn {
		width: 100%;
		max-width: none;
		margin-top: 0;
	}

}

/* ==========================================================================
*  FAQ mobile (Figma mobile M13) – 2026-10-20
*  Page 1999, <=767px. No new classes.
*  - Banner photo cropped to 39:32 (Figma 390x320).
*  - Category jump links in one row of pills that scrolls sideways (Figma).
*    They are anchor links with no active state, so the first pill is filled
*    as in Figma and the rest are plain.
*  - Section headings 22/28.
*  - CTA: heading + white button over the photo, left-aligned (Figma 350x540).
* ========================================================================== */
@media (max-width: 767px) {

	.page-id-1999 .banner:first-child img {
		aspect-ratio: 39 / 32;
		height: auto;
		object-fit: cover;
	}

	/* category pills */
	.page-id-1999 section.content .d-col-3 ul {
		display: flex;
		gap: 8px;
		margin-right: -20px;
		padding-right: 20px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.page-id-1999 section.content .d-col-3 ul::-webkit-scrollbar {
		display: none;
	}

	.page-id-1999 section.content .d-col-3 li {
		flex-shrink: 0;
		margin: 0;
	}

	.page-id-1999 section.content .d-col-3 .a-link {
		padding: 16px;
		border-radius: 100px;
		font-size: 15px;
		line-height: 20px;
		white-space: nowrap;
	}

	.page-id-1999 section.content .d-col-3 li:first-child .a-link {
		background: var(--clr-primary);
		color: #fff;
	}

	.page-id-1999 section.content h2.h3 {
		font-size: 22px;
		line-height: 28px;
	}

	/* CTA over the photo */
	.page-id-1999 .banner:not(:first-child) {
		padding: 0 20px 40px;
	}

	.page-id-1999 .banner:not(:first-child) > .wrapper {
		overflow: hidden;
		border-radius: 16px;
	}

	.page-id-1999 .banner:not(:first-child) img {
		aspect-ratio: 35 / 54;
		height: auto;
		object-fit: cover;
		object-position: center;
	}

	.page-id-1999 .banner:not(:first-child) .btn {
		width: auto;
		min-width: 0;
	}

	.page-id-1999 .banner:not(:first-child) .banner-layer {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0 20px 40px;
		background: linear-gradient(to top, rgba(21, 37, 56, .9), rgba(21, 37, 56, 0));
	}

	.page-id-1999 .banner:not(:first-child) .banner-text {
		text-align: left;
	}

	.page-id-1999 .banner:not(:first-child) .h2 {
		font-size: 26px;
		line-height: 32px;
	}

}

/* ==========================================================================
*  Download Our App mobile (Figma mobile M14) – 2026-10-20
*  Page 690, <=767px. No new classes.
*  - Hero photo cropped to 39:32 (Figma 390x320). OneGo logo 200px (Figma
*    comment #15: bigger logo), h1 32/40, intro 16/24.
*  - Feature cards: icon on the left, text on the right (Figma 350x134).
*  - Download CTA: a plain navy card (Figma has no photo on mobile), left-aligned
*    heading, badges side by side.
* ========================================================================== */
@media (max-width: 767px) {

	/* hero */
	.page-id-690 .banner:first-child picture img {
		aspect-ratio: 39 / 32;
		height: auto;
		object-fit: cover;
	}

	.page-id-690 .banner:first-child + .banner > .wrapper > .banner-layer {
		padding: 24px 20px 40px;
	}

	.page-id-690 .banner:first-child + .banner .banner-layer h1.h2 {
		margin-bottom: 16px;
		font-size: 32px;
		line-height: 40px;
	}

	.page-id-690 .banner:first-child + .banner h1 img {
		width: 200px;
	}

	.page-id-690 .banner:first-child + .banner .banner-text p {
		font-size: 16px;
		line-height: 24px;
	}

	/* feature cards */
	.page-id-690 .section-header {
		margin-bottom: 24px;
	}

	.page-id-690 .section-header .h1 {
		font-size: 28px;
		line-height: 36px;
	}

	.page-id-690 .grid.d-three-cols {
		gap: 12px;
	}

	.page-id-690 .grid > .q-text {
		display: grid;
		grid-template-columns: 48px 1fr;
		align-content: start;
		column-gap: 16px;
		padding: 20px;
		border-radius: 16px;
		text-align: left;
	}

	.page-id-690 .grid > .q-text img {
		grid-row: span 2;
		width: 48px;
		height: 48px;
		margin: 0;
	}

	.page-id-690 .grid > .q-text .h4 {
		margin: 0 0 4px;
		font-size: 17px;
		line-height: 24px;
	}

	.page-id-690 .grid > .q-text p {
		font-size: 15px;
		line-height: 22px;
	}

	/* download CTA */
	.page-id-690 section + .banner {
		padding: 0 20px;
	}

	.page-id-690 section + .banner > .wrapper {
		border-radius: 16px;
	}

	.page-id-690 section + .banner picture {
		display: none;
	}

	.page-id-690 section + .banner > .wrapper > .banner-layer {
		position: static;
		padding: 24px;
		background: linear-gradient(to bottom, #1E334E, #0F1A2A);
		text-align: left;
	}

	.page-id-690 section + .banner .banner-text {
		text-align: left;
	}

	.page-id-690 section + .banner > .wrapper > .banner-layer .h2 {
		margin-bottom: 20px;
		font-size: 22px;
		line-height: 30px;
	}

	.page-id-690 section + .banner .flex {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 12px;
	}

	.page-id-690 section + .banner .flex img {
		width: 144px;
	}

}

/* ==========================================================================
*  Privacy Policy mobile (Figma mobile M15) – 2026-10-20
*  Page 171, <=767px. No new classes.
*  - Banner photo cropped to 39:32 (Figma 390x320).
*  - Body copy and list items 16/24, dividers 24px above and below (Figma).
* ========================================================================== */
@media (max-width: 767px) {

	.page-id-171 .banner img {
		aspect-ratio: 39 / 32;
		height: auto;
		object-fit: cover;
	}

	.page-id-171 section.content p,
	.page-id-171 section.content ol > li {
		line-height: 24px;
	}

	.page-id-171 section.content hr {
		margin: 24px 0;
	}

}

/* ==========================================================================
*  Tablet responsive pass (768–1199) — 2026-10-21
*  No Figma tablet frame: layouts sit between the desktop and mobile masters.
* ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

	/* --- In-content banners (hero + CTA bands): the image is a fixed-ratio <picture> and the
	   text layer is absolute, so at tablet the copy ran past the image (Benefits, Lifestyle,
	   App, FAQ) or over the subject on the right (Sell, App). Stack picture + layer in one
	   grid cell: the band grows to fit the text, the image covers it, the text keeps to the
	   faded left side. --- */
	.banner > .wrapper {
		display: grid;
	}

	.banner > .wrapper > picture,
	.banner > .wrapper > .banner-layer {
		grid-area: 1 / 1;
	}

	.banner > .wrapper > picture img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: right center;
	}

	.banner > .wrapper > .banner-layer {
		position: relative;
		top: auto;
		bottom: auto;
		padding: 48px 6.25%;
	}

	.banner > .wrapper > .banner-layer .banner-text,
	.banner-light > .wrapper > .banner-layer .banner-text,
	.page-id-552 .banner > .wrapper > .banner-layer .banner-text,
	.page-id-1883 .banner:first-child + .banner .banner-text {
		max-width: 58%;
	}

	/* Lifestyle hero: the card visual was hidden at tablet (no room beside the text);
	   with the text held to the left 58% it fits on the right, centred on the band */
	.page-id-1883 .banner:first-child + .banner .banner-layer-right {
		top: 50%;
		right: 4%;
		left: auto;
		display: block;
		width: 36%;
		aspect-ratio: auto;
		padding: 0;
		transform: translateY(-50%);
	}

	/* --- Home hero: the prev arrow (left 40px) sat on the heading and button at 1024 --- */
	.home .banner .banner-layer {
		left: 128px;
		max-width: 520px;
	}

	.home .banner .embla__dots__container {
		left: 128px;
	}

	/* --- Home "Find your next vehicle": the plugin sets the bar to display:block under 1200px,
	   so the selects stacked at half width inside a 999px-radius white pill. 2 x 2 grid in a
	   rounded card instead: Type | Make, Price | Search. --- */
	.stock-locator.mini-search .stock-options {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		border-radius: 40px;
	}

	.stock-locator.mini-search .stock-option,
	.stock-locator.mini-search .stock-option.ms-btn {
		width: auto;
		margin: 0;
	}

	.mini-search .stock-option .so-select {
		background-color: var(--clr-grey-lt);
	}

	.mini-search #so-series .so-select::after {
		display: none;
	}

	.mini-search .stock-option .so-select {
		border: 0;
	}

}

/* Benefits hero: the image has no left scrim, so at tablet the copy sat on the front car */
@media (min-width: 768px) and (max-width: 1199px) {
	.page-id-552 .banner:first-child + .banner > .wrapper > .banner-layer {
		background: linear-gradient(90deg, rgba(13,24,40,.85) 0%, rgba(13,24,40,.55) 45%, rgba(13,24,40,0) 70%);
	}
}

/* The base theme's d-* columns start at 1025px, so 768-1024 fell back to one full-width column */
@media (min-width: 768px) and (max-width: 1024px) {

	/* About: copy + photo side by side */
	.grid.d-two-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Form name pairs (First | Last) side by side */
	.ate-form .flex.d-two-cols {
		flex-wrap: nowrap;
		gap: 16px;
	}

	.ate-form .flex.d-two-cols > * {
		width: 50%;
	}

	/* Contact: the portrait photo ran ~1000px tall under the form; as on mobile it moves above
	   the form, cropped to a landscape band */
	.page-id-137 .grey-bg .flex.d-two-cols > .d-col-4 {
		order: -1;
		margin-bottom: 32px;
	}

	.page-id-137 .grey-bg .flex.d-two-cols > .d-col-4 img {
		width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
		object-fit: cover;
		object-position: center 30%;
	}

	/* Sell: form card no longer butts up to Step 03 */
	.page-id-547 .flex.d-two-cols > .d-col-5 {
		margin-bottom: 40px;
	}

	/* Sell: trade-in form laid out as on desktop */
	#request-trade-in-form {
		display: grid;
		grid-template-columns: minmax(0, 162fr) minmax(0, 181fr) minmax(0, 67fr) minmax(0, 272fr);
		column-gap: 24px;
		padding: 40px;
	}

	#request-trade-in-form > h4,
	#request-trade-in-form > .form-group:has(textarea),
	#request-trade-in-form > .form-tc,
	#request-trade-in-form > .checkbox-group,
	#request-trade-in-form > .form-group:has(.form-submit) {
		grid-column: 1 / -1;
	}

	#request-trade-in-form > .form-tc {
		justify-self: start;
	}

	/* FAQ: categories as wrapping pills above the list (was a bare vertical link list) */
	.page-id-1999 section.content .d-col-3 ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.page-id-1999 section.content .d-col-3 li + li {
		margin-top: 0;
	}

	.page-id-1999 section.content .d-col-3 .a-link {
		padding: 14px 20px;
		border: 1px solid #E3E6EA;
		border-radius: 100px;
		font-size: 16px;
		line-height: 20px;
	}

	.page-id-1999 section.content .d-col-3 li:first-child .a-link {
		background: var(--clr-primary);
		border-color: var(--clr-primary);
		color: #fff;
	}
}

/* Home model tiles: 10 tiles in 3 columns left one orphan (5-up wraps the names), so 2 x 5 */
@media (min-width: 768px) and (max-width: 1024px) {
	.grid.model-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* From 900px there is room for the 3-up card rows (Benefits, Lifestyle steps, App features,
   Sell "why sell", article gallery); below that the cards' own padding squeezes the copy */
@media (min-width: 900px) and (max-width: 1024px) {
	.grid.d-three-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Latest offers: 9 cards 3-up (2-up left an orphan) */
	.grid.t-two-cols.d-three-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
*  Desktop QA fixes — 2026-10-21
* ========================================================================== */

/* Home "Find your next vehicle": Figma label is "View All Available Cars". The button text
   ("Search all BYD Cars") is written by the central stock-locator script, which we can't edit,
   so the label is swapped in CSS: hide the script's text, show the Figma label */
.stock-locator.mini-search a.sl-mini-search-btn {
	font-size: 0;
}

.stock-locator.mini-search a.sl-mini-search-btn > * {
	display: none;
}

.stock-locator.mini-search a.sl-mini-search-btn::after {
	content: "View All Available Cars";
	font-size: 16px;
}

/* Request Trade-in Value / Test Drive: the base ate-form CSS indents the phone group 30px,
   so the field was 30px narrower than the others and the "+65" prefix sat half outside it.
   Was only reset at <=1024px; reset everywhere */
.ate-form .form-phone {
	padding-left: 0;
}

.ate-form .form-phone .form-control {
	padding-left: 64px;
}

/* ==========================================================================
*  Mobile QA fixes — 2026-10-21 (round 2)
* ========================================================================== */

/* Home "Find your next vehicle": the plugin's dropdown is height:calc(100% - 137px) with
   overflow:auto below 1200px, so an opened filter (e.g. Price) collapsed to 10px and showed nothing */
@media (max-width: 1199px) {
	.stock-locator.mini-search .stock-option .so-dropdown {
		height: auto;
		overflow: visible;
	}
}

/* The <=767px button rule (#sl-mini-search .ms-btn .btn, font-size 15px) outranked the label
   swap above, so the script's "Search BYD Cars" showed next to "View All Available Cars" */
#sl-mini-search .ms-btn a.sl-mini-search-btn {
	font-size: 0;
}

#sl-mini-search .ms-btn a.sl-mini-search-btn::after {
	font-size: 16px;
}

@media (max-width: 767px) {
	#sl-mini-search .ms-btn a.sl-mini-search-btn::after {
		font-size: 15px;
	}
}

@media (max-width: 1024px) {

	/* Stock details: title and price centred on one row (Figma), "Drive Away" stacked under the price */
	#sl-stock-details .sd-heading {
		align-items: center;
	}

	#sl-stock-details .sdp-values {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

}

@media (max-width: 767px) {

	/* Sell steps (Figma mobile): 28px icon, rail centred under it running icon to icon, text at 56px */
	.page-id-547 .step-list li {
		grid-template-columns: 28px minmax(0, 1fr);
		column-gap: 28px;
		min-height: 124px;
	}

	.page-id-547 .step-list img {
		width: 28px;
		height: 28px;
		padding: 6px;
	}

	.page-id-547 .step-list li::after {
		top: 28px;
		left: 13px;
	}

	/* the form card sat directly under step 03 */
	.page-id-547 #request-trade-in-form {
		margin-top: 40px;
	}

}

/* Footer socials: hide the "We're social" heading + list while AliceData social_media is empty
   (BMW links removed 2026-10-21); both come back on their own once BYD links are added */
.footer-links > .wrapper > .h4:has(+ .social:empty),
.footer-links > .wrapper > .social:empty {
	display: none;
}

/* ==========================================================================
*  Page Banners metabox + text heroes (2026-10-21), as on the /bmw base site.
*  Sell 547, Benefits 552, Lifestyle 1883, App 690: the image comes from the Page Banners
*  metabox (first .banner in main, picture only) and the page content starts with a
*  text-only .banner (layer + text, no picture). No new classes.
*  - 768+: both banners share one grid cell, so the text sits over the image and the
*    band grows with the text at tablet (the image covers it).
*  - Mobile: image, then the text panel below it (Figma mobile frames).
* ========================================================================== */
@media (min-width: 768px) {
	.main:has(> .banner:first-child + .banner > .wrapper > :is(.banner-layer, .banner-layer-right):first-child) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.main > .banner:first-child:has(+ .banner > .wrapper > :is(.banner-layer, .banner-layer-right):first-child),
	.main > .banner:first-child + .banner:has(> .wrapper > :is(.banner-layer, .banner-layer-right):first-child) {
		grid-area: 1 / 1;
	}

	.main > .banner:first-child + .banner:has(> .wrapper > :is(.banner-layer, .banner-layer-right):first-child) {
		position: relative;
	}

	/* the absolute layers are placed against .wrapper, which has no picture to give it height */
	.main > .banner:first-child + .banner:has(> .wrapper > :is(.banner-layer, .banner-layer-right):first-child) > .wrapper {
		height: 100%;
	}

	.main > .banner:first-child:has(+ .banner > .wrapper > :is(.banner-layer, .banner-layer-right):first-child) picture,
	.main > .banner:first-child:has(+ .banner > .wrapper > :is(.banner-layer, .banner-layer-right):first-child) img {
		height: 100%;
	}

	.main > .banner:first-child:has(+ .banner > .wrapper > :is(.banner-layer, .banner-layer-right):first-child) img {
		object-fit: cover;
	}
}

@media (max-width: 767px) {

	/* Lifestyle card visual: over the metabox image (39:32, same width), just above the text */
	.page-id-1883 .banner:first-child + .banner {
		position: relative;
	}

	.page-id-1883 .banner:first-child + .banner .banner-layer-right {
		top: auto;
		bottom: 100%;
	}

	/* Feedback 4 #17: mobile hero = Figma M06 export (media 2097) with the card + smoke baked in, so the separate card layer is hidden */
	.page-id-1883 .banner:first-child + .banner .banner-layer-right {
		display: none;
	}

	/* showroom photo: desktop 1680x640 file shown 4:3 with the car on the right, as in Figma */
	.page-id-616 picture img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: 90% center;
	}

}

/* ==========================================================================
*  BYD Certified sticker, vehicle details (Figma 03B Hover state 171:286 / 171:293) – 2026-10-22
*  Markup = Alice 2818 Stock Settings "Extra Section (Above Vehicle Details)",
*  printed at the top of .sd-description (local copy: pages/stock-extra-section-byd-certified.html).
*  New .byd-certified-* classes: no base-theme class covers a hover pop-over
*  (same pattern as EVNext SG's .evnext-warranty). CSS only: :hover on desktop,
*  :focus-within on tap (tabindex="0" on the wrapper).
*  Certified cars only, like /bmw's .ab-certified: the stock plugin adds
*  .certified to .sl-stock-details when Alice is_certified = 1.
* ========================================================================== */
#sl-stock-details .byd-certified {
	position: relative;
	display: none;
	margin-bottom: 24px;
	outline: none;
	cursor: pointer;
}

#sl-stock-details.certified .byd-certified {
	display: inline-flex;
}

/* desktop: Figma puts the pill in the gap between the gallery and the details
   card, flush with the card's left edge. Below 1200 the gap is only 20px,
   so it stays inside the card. */
@media (min-width: 1200px) {
	#sl-stock-details.certified .sd-description {
		position: relative;
	}

	#sl-stock-details .byd-certified {
		position: absolute;
		left: 0;
		bottom: 100%;
		margin: 0 0 4px;
	}
}

/* collapsed pill: navy, white BYD Certified logo */
#sl-stock-details .byd-certified-logo {
	display: block;
	box-sizing: content-box;
	width: auto;
	max-width: none;
	height: 19px;
	padding: 10px 18px;
	background-color: var(--clr-primary);
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(0, 8, 20, .25);
}

#sl-stock-details .byd-certified:focus-visible .byd-certified-logo {
	outline: 2px solid var(--clr-primary);
	outline-offset: 3px;
}

/* expanded card: opens over the pill */
#sl-stock-details .byd-certified-card {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	width: 380px;
	max-width: calc(100vw - 80px);
	padding: 20px 24px 24px;
	background: linear-gradient(135deg, rgba(30, 51, 78, .97), rgba(13, 24, 40, .97));
	border-radius: 20px;
	box-shadow: 0 16px 40px rgba(0, 8, 20, .35);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	color: #fff;
	text-align: left;
	cursor: default;
}

#sl-stock-details .byd-certified:hover .byd-certified-card,
#sl-stock-details .byd-certified:focus-within .byd-certified-card {
	display: block;
}

#sl-stock-details .byd-certified-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
}

/* white version of byd-icon-shield.svg (the uploaded file is navy) */
#sl-stock-details .byd-certified-header::before {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 25.67s9.33-4.67 9.33-11.67V5.83L14 2.33 4.67 5.83V14c0 7 9.33 11.67 9.33 11.67z'/%3E%3Cpath d='M10.5 14l2.33 2.33 4.67-4.66'/%3E%3C/svg%3E") center / contain no-repeat;
}

#sl-stock-details .byd-certified-intro {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, .75);
	font-size: 15px;
	line-height: 22px;
}

#sl-stock-details .byd-certified-card ul {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#sl-stock-details .byd-certified-card li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, .92);
	font-size: 15px;
	line-height: 20px;
}

/* 20px circle check */
#sl-stock-details .byd-certified-card li::before {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23fff' fill-opacity='.15'/%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}