/* mobile format */
	
    
	#banner.mustang {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/mustang.tab.jpg) no-repeat scroll 70% 60%;
		background-size: cover;
	}
    
	#banner.landcruiserarms {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/LandCruiserArms.tab.jpg) no-repeat scroll 54% 0%;
		background-size: cover;
	}
    
	#banner.porsche {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/porsche.tab.jpg) no-repeat scroll 50% 60%;
		background-size: cover;
	}
    
	#banner.light {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/defenders.tab.jpg) no-repeat scroll 50% 60%;
		background-size: cover;
	}
    
	#banner.mazda-mx5 {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/mx5-pc.tab.jpg) no-repeat scroll 58% 66%;
		background-size: cover;
	}
    
	#banner.arms {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/arms.tab.jpg) no-repeat scroll 75% 65%;
		background-size: cover;
	}
    
	#banner.bar {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/bar.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.ramp {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/focus.rs.ramp.tab.jpg) no-repeat scroll 25% 65%;
		background-size: cover;
	}
    
	#banner.bar-under {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/bar.under.tab.jpg) no-repeat scroll 55% 65%;
		background-size: cover;
	}
    
	#banner.search {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/search.background.tab.jpg) no-repeat scroll 50% 60%;
		background-size: cover;
	}
    
	#banner.caster {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/caster.tab.jpg) no-repeat scroll 75% 50%;
		background-size: cover;
	}
    
	#banner.trc0003 {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/trc0003.tab.jpg) no-repeat scroll 35% 10%;
		background-size: cover;
	}
    
	#banner.isuzu-dmax {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/isuzu-dmax.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.tyretread {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/tyre-tread.tab.jpg) no-repeat scroll 0% 50%;
		background-size: cover;
	}
    
	#banner.shelf {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/shelf.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.lathe {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/lathe.tab.jpg) no-repeat scroll 48% 47%;
		background-size: cover;
	}
    
	#banner.poly {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/poly.tab.jpg) no-repeat scroll 50% 65%;
		background-size: cover;
	}
    
	#banner.porsche-rsr {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/porsche.RSR.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.jags {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/jags.tab.jpg) no-repeat scroll 50% 45%;
		background-size: cover;
	}
    
	#banner.jag {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/jag.tab.jpg) no-repeat scroll 50% 40%;
		background-size: cover;
	}
    
	#banner.porsche-rsr-purple {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/porsche.rsr.purple.tab.jpg) no-repeat scroll 50% 30%;
		background-size: cover;
	}
    
	#banner.vag-trophy {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/vag-trophy.tab.jpg) no-repeat scroll 80% 55%;
		background-size: cover;
	}
    
	#banner.anti-roll-bars {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/anti-roll.bars.tab.jpg) no-repeat scroll 79% 73%;
		background-size: cover;
	}
    
	#banner.vw-t5 {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/t5.transporter.tab.jpg) no-repeat scroll 50% 80%;
		background-size: cover;
	}
    
	#banner.trc500 {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/trc500.tab.jpg) no-repeat scroll 15% 90%;
		background-size: cover;
	}
    
	#banner.why-fit-arb-4wd {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/why.fit.arb.4wd.tab.jpg) no-repeat scroll 13% 40%;
		background-size: cover;
	}
    
	#banner.lift-kits {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/lift-kits.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.greasable-shackles {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/shackle.tab.jpg) no-repeat scroll 50% 60%;
		background-size: cover;
	}
    
	#banner.bmw-z4 {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/bmw.z4.tab.jpg) no-repeat scroll 52% 72%;
		background-size: cover;
	}
    
	#banner.veloster {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/veloster.tab.jpg) no-repeat scroll 30% 37%;
		background-size: cover;
	}
    
	#banner.bsm {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/bsm.tablet.jpg) no-repeat scroll 50% 67%;
		background-size: cover;
	}
    
	#banner.press-tool-kit {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/PRESSKIT1.tablet.jpg) no-repeat scroll 50% 32%;
		background-size: cover;
	}
    
	#banner.golf-r-75 {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/golf.r.7.5.tablet.jpg) no-repeat scroll 46% 70%;
		background-size: cover;
	}
    
	#banner.offroadday {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/4x4day.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.vw-driver-golf7-5r {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/vw.driver.vw.golf.mk7.tab.jpg) no-repeat scroll 50% 100%;
		background-size: cover;
	}
    
	#banner.mqb-arms {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/mqb.arms.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.jimny {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/jimny.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.a3-beam {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/a3.beam.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.ranger-slate {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/ranger.rear.slate@0,5x.jpg) no-repeat scroll 65% 65%;
		background-size: cover;
	}
    
	#banner.leon {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/leon.tab.jpg) no-repeat scroll 30% 50%;
		background-size: cover;
	}
    
	#banner.pickupshow {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/4x4show.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.hyundaii30n {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/hyundaii30n.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.hondacivic {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/honda_tablet.jpg) no-repeat scroll 50% 100%;
		background-size: cover;
	}
    
	#banner.melsgolf {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/VW.Golf.TDi.PD130.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.ford-focus-rs {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/focus.rs.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.passat {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/passat.tab.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.fca {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/fca.tablet.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.sale {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/Clearance-Sale-Banner.jpg) no-repeat scroll 50% 50%;
		background-size: contain;
	}

	/* JULY 2026 SALE (code SP20) - served from the local images folder, not
	   CloudFront. Overlay text comes from index.cfm; styles at end of file. */
	#banner.sp20-sale {
		background: url(../images/banners/sp20-sale.tab.jpg) no-repeat scroll 55% 60%;
		background-size: cover;
	}



/* Tablet Layout: 481px and higher */

@media only screen and (min-width: 481px) {

	
	#banner.mustang {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/mustang.desktop.jpg) no-repeat scroll 70% 60%;
		background-size: cover;
	}
    
	#banner.landcruiserarms {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/LandCruiserArms.desktop.jpg) no-repeat scroll 54% 0%;
		background-size: cover;
	}
    
	#banner.porsche {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/porsche.desktop.jpg) no-repeat scroll 50% 60%;
		background-size: cover;
	}
    
	#banner.light {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/defenders.jpg) no-repeat scroll 50% 60%;
		background-size: cover;
	}
    
	#banner.mazda-mx5 {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/mx5-pc.desktop.jpg) no-repeat scroll 58% 66%;
		background-size: cover;
	}
    
	#banner.arms {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/arms.jpg) no-repeat scroll 75% 65%;
		background-size: cover;
	}
    
	#banner.bar {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/bar.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.ramp {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/focus.rs.ramp.desktop.jpg) no-repeat scroll 25% 65%;
		background-size: cover;
	}
    
	#banner.bar-under {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/bar.under.desktop.jpg) no-repeat scroll 55% 65%;
		background-size: cover;
	}
    
	#banner.search {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/search.background.jpg) no-repeat scroll 50% 60%;
		background-size: cover;
	}
    
	#banner.caster {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/caster.desktop.jpg) no-repeat scroll 75% 50%;
		background-size: cover;
	}
    
	#banner.trc0003 {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/trc0003.jpg) no-repeat scroll 35% 10%;
		background-size: cover;
	}
    
	#banner.isuzu-dmax {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/isuzu-dmax.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.tyretread {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/tyre-tread.desktop.jpg) no-repeat scroll 0% 50%;
		background-size: cover;
	}
    
	#banner.shelf {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/shelf.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.lathe {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/lathe.desktop.jpg) no-repeat scroll 48% 47%;
		background-size: cover;
	}
    
	#banner.poly {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/poly.desktop.jpg) no-repeat scroll 50% 65%;
		background-size: cover;
	}
    
	#banner.porsche-rsr {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/porsche.RSR.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.jags {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/jags.desktop.jpg) no-repeat scroll 50% 45%;
		background-size: cover;
	}
    
	#banner.jag {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/jag.jpg) no-repeat scroll 50% 40%;
		background-size: cover;
	}
    
	#banner.porsche-rsr-purple {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/porsche.rsr.purple.jpg) no-repeat scroll 50% 30%;
		background-size: cover;
	}
    
	#banner.vag-trophy {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/vag-trophy.desktop.jpg) no-repeat scroll 80% 55%;
		background-size: cover;
	}
    
	#banner.anti-roll-bars {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/anti-roll.bars.desktop.jpg) no-repeat scroll 79% 73%;
		background-size: cover;
	}
    
	#banner.vw-t5 {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/t5.transporter.desktop.jpg) no-repeat scroll 50% 80%;
		background-size: cover;
	}
    
	#banner.trc500 {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/trc500.desktop.jpg) no-repeat scroll 15% 90%;
		background-size: cover;
	}
    
	#banner.why-fit-arb-4wd {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/why.fit.arb.4wd.desktop.jpg) no-repeat scroll 13% 40%;
		background-size: cover;
	}
    
	#banner.lift-kits {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/lift-kits.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.greasable-shackles {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/shackle.desktop.jpg) no-repeat scroll 50% 60%;
		background-size: cover;
	}
    
	#banner.bmw-z4 {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/bmw.z4.desktop.jpg) no-repeat scroll 52% 72%;
		background-size: cover;
	}
    
	#banner.veloster {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/veloster.desktop.jpg) no-repeat scroll 30% 37%;
		background-size: cover;
	}
    
	#banner.bsm {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/bsm.desktop.jpg) no-repeat scroll 50% 67%;
		background-size: cover;
	}
    
	#banner.press-tool-kit {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/PRESSKIT1.desktop.jpg) no-repeat scroll 50% 32%;
		background-size: cover;
	}
    
	#banner.golf-r-75 {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/golf.r.7.5.desktop.jpg) no-repeat scroll 46% 70%;
		background-size: cover;
	}
    
	#banner.offroadday {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/4x4day.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.vw-driver-golf7-5r {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/vw.driver.vw.golf.mk7.desktop.jpg) no-repeat scroll 50% 100%;
		background-size: cover;
	}
    
	#banner.mqb-arms {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/mqb.arms.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.jimny {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/jimny.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.a3-beam {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/a3.beam.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.ranger-slate {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/ranger.rear.slate.jpg) no-repeat scroll 65% 65%;
		background-size: cover;
	}
    
	#banner.leon {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/leon.desktop.jpg) no-repeat scroll 30% 50%;
		background-size: cover;
	}
    
	#banner.pickupshow {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/4x4show.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.hyundaii30n {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/hyundaii30n.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.hondacivic {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/honda_desktop.jpg) no-repeat scroll 50% 100%;
		background-size: cover;
	}
    
	#banner.melsgolf {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/VW.Golf.TDi.PD130.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.ford-focus-rs {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/focus.rs.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.passat {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/passat.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.fca {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/fca.desktop.jpg) no-repeat scroll 50% 50%;
		background-size: cover;
	}
    
	#banner.sale {
		background: url(https://d365pjkgt5rd4j.cloudfront.net/images/banners/Clearance-Sale-Banner.jpg) no-repeat scroll 50% 50%;
		background-size: contain;
	}

	#banner.sp20-sale {
		background: url(../images/banners/sp20-sale.desktop.jpg) no-repeat scroll 50% 55%;
		background-size: cover;
	}


}

/* ============================================================
   JULY 2026 SALE hero overlay (code SP20).
   Markup built in index.cfm while the sitewide promo is active
   (see application.cfc, sitewidePromo). Corporate colours:
   blue #004990, navy #003366, yellow #FFCB05, Poppins inherited.
   ============================================================ */

/* The whole banner is wrapped in an anchor (header.cfm) - stop the global
   link underline running through the overlay text. */
.banner-link,
.banner-link:hover,
.banner-link:focus {
	text-decoration: none;
}

#banner.sp20-sale .clarify {
	/* Darken the workbench photo more evenly than the standard corner
	   vignette so the headline stays readable over the bright metal. */
	background: linear-gradient(to bottom, rgba(0,15,40,0.85) 0%, rgba(0,15,40,0.55) 30%, rgba(0,15,40,0.5) 100%);
}

#banner.sp20-sale {
	/* The yellow quote strip below pulls itself up 40px over the banner
	   (brand-2025.css .quote-container) - extra bottom padding keeps the
	   "offer ends" line clear of it. Wins over the #banner 50px rule on
	   specificity. */
	padding-bottom: 80px;
}

.sale-hero-kicker {
	color: #FFCB05;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 600;
	font-size: clamp(0.8rem, 1.6vw, 1rem);
	margin-bottom: 14px;
}
.sale-hero-headline {
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(1.7rem, 6.5vw, 4.4rem);
	line-height: 1.08;
	margin: 0 0 14px 0;
}
.sale-hero-headline .sale-hero-pct {
	color: #FFCB05;
}
.sale-hero-sub {
	color: #fff;
	font-size: clamp(1rem, 2.2vw, 1.35rem);
	line-height: 1.5;
	margin-bottom: 26px;
}
.sale-code-chip {
	display: inline-block;
	border: 2px dashed #FFCB05;
	border-radius: 4px;
	color: #FFCB05;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 1px 10px;
	margin: 0 2px;
	white-space: nowrap;
}
.sale-hero-cta {
	display: inline-block;
	background: #FFCB05;
	color: #003366;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: clamp(0.95rem, 1.8vw, 1.1rem);
	padding: 13px 36px;
	border-radius: 4px;
	transition: background 0.2s ease;
}
a:hover .sale-hero-cta {
	background: #fff;
}
.sale-hero-ends {
	color: rgba(255,255,255,0.75);
	font-size: clamp(0.8rem, 1.5vw, 0.95rem);
	margin-top: 16px;
}