@charset "utf-8";
/* CSS Document */

/*All*/
/*https://medium.com/swlh/how-to-fix-cumulative-layout-shift-1b48a138faa9*/
img { aspect-ratio: attr(width) / attr(height);}

body{margin:0 0!important ; padding: 0 !important; 
background-color: #1e1e1e !important; 
/*background:#222 url(../img/body_background.png);
background-repeat: repeat; */
}


/*Home page*/
.red {color: #C00;}

.top-bar {border: 0px solid yellow;}

.top-bar-section .has-dropdown > a:after {
   border-color: white transparent transparent; /*changed from green by Paul 14/10/2022 at Sean's request by email 13/7/2022*/
}

/* Added 28/11/2025 for links between subdomains */
.top-bar-section li.currentsubdomain:not(.has-form) a:not(.button) {background-color: #35349a;}
/* Added 1/12/2025 for subdomain links at top on mobile*/
.top-bar-section.top-bar-subdomains li {list-style-type: none; float:left;}
.top-bar-section.top-bar-subdomains li a {padding: 8px 15px;}

.currency img {width: 20px;padding-bottom: 3px;}

.currencytext a:link, .currencytext a:visited {color: #ffffff !important; display: inline; margin: 0 !important; padding: 0 !important; }


.basket-summary {font-size: 14px; line-height: 2.5em;}

.fi-shopping-cart, .fi-home{font-size: 24px; line-height: 0; vertical-align: middle;}

.hc-modal {background-color: #222;}
.hc-modal h2, .hc-modal h3, .hc-modal h4, .hc-modal h5, .hc-modal p, .hc-modal ul {color: #ffffff;}
.hc-modal a{color:  #ff7e22;}

/*Header*/
.header-wrapper{background-color: #ffffff; margin: 0 auto; padding: 22px 0; color: #ffffff; border-top: 1px solid #3e3e3e; border-bottom: 1px solid #3e3e3e;}
.harleylogo {text-align:center; border: 0px solid yellow;}
.header-rhs {text-align:right; padding-top: 15px;}

.header-search {margin: 0;}

header div, header div a:link, header div ul li a {font-size: 12px;}
#telephone {vertical-align:4px;}

.cardlogos {margin: 10px 0 0 0; float:right;}

.searchwrapper {min-height: 800px !important;}
/*Search changes by Paul 24/12/2021*/
input[type=text].mainsearch {
    margin:0 0 5px;
    display:inline-block;
    width:calc(100% - 80px);
    z-index: 18;
    position:relative;
    background-image:url(/img/magnifying-glass.png);
    background-size:25px 25px;
    background-repeat: no-repeat;
    background-position: 3px 5px;
    padding-left: 30px !important;
    font-size: 18px; /*added 12/9/2025*/
}
input[type=text].mainsearch::placeholder {font-size: 14px;} /*changed to 14px 25/9/2025*/
input[type=submit].mainsearchbutton {background:#58585A; font-size:120%; z-index: 18; margin-bottom:0; height: 37px; padding-top: 0; padding-bottom: 0;}
i.mainsearchclear {color:#58585A; font-size:120%; position:absolute; margin-left: -20px; margin-top: 5px; z-index:30; display: none;}
#cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
    background-color: #000000;
    opacity: .5;
    filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.5);
}

#seajax, #seajax1{display: none;
position: absolute;
/*width: 500px; */
height: 600px;
background-color: white;
top: 38px;
z-index: 9999 !important;
overflow:auto;
border-top: 1px dotted #bebebe;
color: #000;
}

/* The form which allows people to order the results in category-one-level.php 8/1/2022 */
#productsortform {margin-bottom: 0;}
#productsort {display:inline; width:auto; margin-bottom:0; padding:0 8px; height: 30px;}
#productshowingcounts.panel {padding: 10px 20px; font-size: 0.825rem; border: none;}



.productselect{
	border-left: 1px solid #bebebe;
	border-right: 1px solid #bebebe;
	border-bottom: 1px dotted #bebebe;
	margin:0; 
	padding: 3px; 
	cursor: pointer; 
    z-index: 9999 !important;	
    font-size: 0.75rem;
	}
/*border-bottom: 1px dotted #efefef; margin:0; padding: 3px; cursor: pointer*/

/*offers*/
.harley-icon-offers {border: 0px solid aqua;}
#header-offers {font-size: 12px; color: #ffffff; vertical-align:8px; border: 0px solid pink;}
.fi-burst-new, .fi-burst-sale  {font-size: 32px; margin: 0 5px 0 0px; vertical-align: baseline; line-height: 0; color: #DCDCDC; }

/*search*/
.harley-icon-search {/*padding-top: 4px;*/ border: 0px solid pink;}
.harley-icon-search  i{color: #bebebe; font-size: 24px !important;  color: #DCDCDC; border: 0px solid aqua; margin-top: 5px;}
.harley-icon-search a:link, .harley-icon-search a:hover, .harley-icon-search a:visited
{/*padding-top: 4px;*/ border: 0px solid orange;color: #ffffff; font-size: 12px; color: #ffffff; vertical-align:5px;}

/*social*/
.harley-icon-social a:link, .harley-icon-social a:hover, .harley-icon-social a:visited {color: #ffffff;}
.harley-icon-social  i{color: #58585A; font-size: 24px !important; border: 0px solid aqua; margin: 5px 0 0 10px;}
.f-icons i{color: #a8a8a9 !important;}

.fi-telephone {font-size: 20px; }


/*.header-links{float: right; margin: 0; padding:0;}
.header-links li a:link, .header-links li a:visited {color: #ffffff;}*/




/*Home */
/*slider */
.slick-slider { margin-bottom: 0px !important; }

/*featured cats*/
.fc-wrapper {background-color: #efefef; padding-top: 25px; padding-bottom: 25px;} /*screen width white background*/
.fc-frame {margin-top: 15px; margin-bottom: 15px;} /*screen width white background*/

.fc-thumb-title {position: relative; margin-bottom: 5px;}
/*featured cat titles*/
.fc-title { position:absolute; bottom:0; left:0;
     width: 100%; /* optional, though better have one */
	text-align: center; background: rgb(0, 0, 0);  background: rgba(0, 0, 0, 0.65); padding:4px;
}

.fc-title h3 {font-size: 14px; text-transform: uppercase; display: block; width: 100%;  padding: 0; margin: 0;}
.fc-title h3 a:link, .fc-title h3 a:visited
{text-decoration:none;  display: block; color: #ffffff;}
.fc-title h3 a:hover, .fc-title h3 a:focus, .fc-title a:active
{ text-decoration:underline;  display: block; }
/*see also mobile media query*/


/* text section*/
.hometext-wrapper {background-color: #ffffff; }
.home-title { padding-top: 25px; padding-bottom: 5px; border-bottom: 1px solid #e4e4e4; margin-bottom: 30px;}
.home-title h1{font-size: 20px; text-transform:uppercase;  }
.fc-wrapper .home-title {padding-top: 0;} /*for when I moved the <h1> above Top Categories 19/4/2024*/
.fc-wrapper .home-title h1 {text-align: center;} /*for when I moved the <h1> above Top Categories 19/4/2024*/

.home-text {border-right: 1px solid #e4e4e4;}
.hometext-wrapper h3{font-size: 16px; text-transform: uppercase; color: #8f8f8f;}

#home-gallery h4 {text-transform: uppercase; font-size: 16px;}
#home-gallery img {margin: 0 0 5px;}
/*featured products */
.multiple-items div img{margin:auto;}
.multiple-items-text { margin-top: 10px; padding: 0 10px; text-align:center;}
.multiple-items-text a:link, .multiple-items-text a:hover, .multiple-items-text a:visited {color: #ffffff !important;}


/*footer*/
.f-contact span.formerlyh4, .f-usefullinks span.formerlyh4 {
	font-size: 14px; text-transform: uppercase; color: #ffffff; font-weight: bold; display: block;
    line-height: 2rem;
}

.f-contact, .f-usefullinks, .f-services {padding-top:24px; padding-bottom: 24px; z-index: 2}

.f-contact .harley-icon-social i {margin-left: 0; margin-right: 10px;}
.f-contact p {font-size: 12px !important; color: #bcbcbc !important;}
.f-contact p a:link,  .f-contact p a:visited{color: #bcbcbc !important; }
.f-contact p a:hover {color: #ffffff !important; text-decoration: underline;}


.f-usefullinks ul{font-size: 12px; list-style-type: none; margin: 0; padding: 0;}
.f-usefullinks ul a:link, .f-usefullinks ul a:visited{ color: #bcbcbc !important;}
.f-usefullinks ul a:hover {text-decoration: underline;}

/*.basecredits ul{text-align:center; padding-top: 25px; padding-bottom: 25px; font-size: 12px; color: #ababab; list-style-type:none; background-color: inherit;
border: 1px solid green;  }
.basecredits ul li{
border: 1px solid green;}
.basecredits a:link,  .basecredits a:visited{color: #ababab !important; }
.basecredits a:hover {color: #ababab !important; text-decoration: underline;} */


.credits-wrapper {background-color: #262626; border-top: 1px solid #3e3e3e; }
.basecredits {text-align:center; padding-top: 20px; padding-bottom: 20px; font-size: 12px; color: #ababab; list-style-type:none; background-color: inherit; border: 0px solid green;   }
.basecredits a:link,  .basecredits a:visited{color: #ababab !important; }
.basecredits a:hover {color: #ababab !important; text-decoration: underline;}

/*Second level page*/
.contentwrapper {background-color:/*#151515*/ #262626;}

.maincontent {
	background-color: #fff;
	border-radius: 0px;
	margin-bottom: 15px;
}

/* Added 19/8/2025 as this was repeated all over the place except with callout */
div.panel {margin-bottom: 0; border: 0;}
div.panel.callout {border-style: solid; border-width: 1px; border-color: #d8d8d8; margin-bottom: 1.25rem;}

.lhscontent {
	/*background-color: #676767;
	border-radius: 3px;*/
	}
	
	
/*The accordion is closed*/
.accordion-icon:before {
    content: "\f067"; font-size: 16px; color: #cccccc; margin-right: 5px;/*&#xf199; f0d7 */
}

/*The accordion is open*/
.active .accordion-icon:before {
    content: "\f068" !important; font-size: 16px; color: #cccccc; margin-right: 5px;
 }
 	
.accordion .side-nav{background-color: #111111; margin-top: 0; padding-top:0;}
.accordion .side-nav li {border-bottom: 1px dotted #454545;margin-bottom: 0;}
.accordion .side-nav li a:link {color: #ffffff !important; font-size: 12px;} /*changed to white at Pete's request 12/11/2021*/
.accordion .side-nav li a:hover {color: #ffffff !important; background-color: #212121;}
.accordion .side-nav li a:visited {color: #ffffff !important;}

.accordion-navigation {}
.accordion-navigation a.refine:link, 
.accordion-navigation a.refine:visited {background-color: #111111; font-size: 14px; text-transform:uppercase;
color: #ffffff; padding-top: 15px;padding-bottom: 5px;color: red; border-bottom:1px solid #454545; margin-bottom: 0;}
.accordion-navigation a.refine:hover {background-color: #202020; }
.accordion-navigation select {width: 90%; width: calc(100% - 15px);} /*added by Paul 10/11/2018 so that dropdowns of multiple filters are correct width*/
.accordion-navigation h4 {color: white; text-transform: uppercase; text-align: center;}


/*dirty refine fix*/
.accordion .ul-refine li {
	color: #ffffff;
	font-size: 12px;
	 padding-top: 10px; 
	 padding-left: 12px;
 }

.ul-refine li  input {margin-right: 5px;  vertical-align:-2px; }

.banner img {width: 100%;} /*force banners to 970px can be removed if all banners are 970px wide*/
.section-intro {line-height: 1.5em;}

.section-intro .accordion .accordion-navigation h1, .maincontent h1 {font-size: 1.25rem; color: #000000;}
.section-intro .accordion .accordion-navigation .content, .content {background-color: #ffffff; line-height: 1.5em; font-size: 14px;}

.productlink img {border: 1px solid #bfbfbf; padding: 3px;}
/*Added by Paul 15/9/2020 after CLS gave width and height to product images, this makes them bigger again on mobiles*/
@media only screen and (max-width: 40.063em) {a.productlink img {width: 100%; height: auto;}}



/*top brands*/
h1.title {color: #ffffff;}
h1.title a {color: white;} /*Added by Paul for edit link on category pages*/

/*20/10/2015 adjusted for Top Brands*/
.section-x4-wrapper {border-bottom: 0px solid #dddddd; padding-bottom: 5px;padding-top: 5px; }
.section-x4 {text-align: center;margin: 5px 0;}
.section-x4 div {border-bottom: 0px solid #dddddd; margin-bottom: 5px;padding-bottom: 0px;}


.section-x4 h5 {font-size: 0.825rem; text-align:center; font-weight: normal; color: #727272; 
text-transform:uppercase; padding-left: 5px; padding-right:5px;}
.section-x4 h5 a:link, .section-x4 h5 a:visited{ color: #666; }
.section-x4 h5 a:hover {text-decoration: underline;}

/*Top Brand Lists of products on (at least) fajax.php */
.productx1 div {margin-bottom: 20px;}
.productx1 div span.formerlyh2 {display: block; line-height: 1.3rem; font-size: 1.0rem; font-weight: normal;} /*chagned from 1.125rem by Paul 23/3/2021 to make it a bit smaller, changed from 1.4 & 1.05 to 1.3 and 1.0 23/10/2022 */
.productx1 div span.formerlyh2 a {color: black;} /*changed from #727272 as requested by Pete 25/11/2021*/
.productx1 div span.formerlyh2 a:hover {text-decoration: underline;}
.productx1 div span.formerlyh3 {display: block; font-size: 1.05rem; font-weight: normal; color: black;} /*changed from #727272 as requested by Pete 25/11/2021, changed from 1.125 to 1.05 font-size 23/10/2022 */





/*child section*/
.section-x3 {text-align: center;margin-bottom: 20px;}
.section-x3 div {border-bottom: 1px solid #dddddd; margin-bottom: 10px; /*min-height: 500px;*/}
.section-x3 h5 {font-size: 18px; text-align:left; font-weight: bold; }
.section-x3 h5 a:hover {text-decoration: underline;}
.section-x3 h3 {text-align: left; }
.section-x3 h3 span{font-size: 14px;}
.section-x3-wrapper {border-bottom: 1px solid #dddddd; padding-bottom: 20px;padding-top: 20px;}
.section-x3 .discountlabel {text-align: left; margin: 0; border-bottom: none;}

/*Customer Information pages*/

/*.off-canvas-wrap h2 {font-size: 16px; text-transform: uppercase; color: #8f8f8f;} commented by Paul 8/1/2018 */

/*product*/

.product-titleprice{padding-top: 10px; padding-bottom: 10px; border-bottom: 0 solid #dddddd; margin-bottom: 10px;}
.producttitle {border: 0px solid aqua;}
.producttitle h1 {font-size: 1.5rem; font-weight: bold}

/* New product layout by Paul 19/9/2025 */
.productright h1 {font-size: 1.5rem; font-weight: bold}
@media only screen and (min-width: 40.063em) { 
    .productleft {padding: 30px 7% 30px 7%;}
    .productright {padding: 30px 7% 30px 0;}
}

span.formerlyh3.price, .price span.formerlyh2 {/*color: red;*/ font-weight: bold; font-size: 28px; line-height: 1.1;}
span.formerlyh3.price strong, .price span.formerlyh2 strong {color: #d81921;}
span.formerlyh3.price span, .price span.formerlyh2 span {font-size: 0.925rem; font-weight: normal;}
span.formerlyh3.price small {line-height: 1.2em;}
span.formerlyh3.price small, .price span.formerlyh2 small {font-weight: normal;}
span.formerlyh3.price small.undiscounted, .price span.formerlyh2 small.undiscounted {color: #373737; font-weight: bold; font-size: 0.91rem;}
span.formerlyh3.price small.undiscounted span, .price span.formerlyh2 small.undiscounted span {color: green; font-weight: normal;}
span.formerlyh3.price small.stockquantity, .price span.formerlyh2 small.stockquantity {color: red; font-weight: normal; font-size: 0.91rem;}
span.formerlyh3.price small.outofstock, .price span.formerlyh2 small.outofstock, div.price a.outofstock {color: red; font-weight: normal; font-size: 0.85rem;}
span.formerlyh3.price small.instock, small.instock a, div.price a.instock {color: #087830; font-weight: normal; font-size: 0.85rem;} /*on category-one-level.php from 21/10/2022*/
span.formerlyh3.price small.available, small.available a, div.price a.available {color: #FF8000; font-weight: normal; font-size: 0.85rem;}
/* Basket button on category page from 21/10/2022 */
span.formerlyh3.price form {display: inline;}
span.formerlyh3.price input.basketbutton {margin: 6px 0 3px 0; padding: 4px 6px; display: inline; font-size: 0.80rem; border-radius:3px; background: #222;}


/*Added by Paul for discount circle on discounted products 25/9/2018*/
li.discountpercent {position: relative;}
li.discountpercent span.discountpercent {
    position: absolute; top: 10px; left: 10px;
    color: white; background: #d81921;
    border-radius: 50%; width: 70px; height: 70px; 
    font-size: 130%; font-weight: bold; line-height: 110%;
    padding: 18px 5px 0 5px;
    text-align: center;
    transform: rotate(-15deg);
    box-shadow: 1px 1px grey;
    pointer-events: none;
}
li.productbadges {position:relative;} /*added 29/3/2022 at Pete's request*/
li.productbadges span.productbadges {
    position: absolute;
    margin: 0; 
    padding: 3px 5px;
    bottom: 15px; 
    right: 15px;
    border: 1px solid white;
    border-radius: 5px;
    background-color: black; /*non-homologated*/
    color: white;
    text-transform: uppercase;
    font-size: 110%;
    pointer-events: none; /*doesn't seem to work*/
    /* image is 176px by 25px, changed to text 30/3/2022 */
    /* width: 176px; height: 25px; */
    /* background-image:url(/img/non-homologated.jpg); */
    /* background-repeat:no-repeat; */
}
/*https://stackoverflow.com/a/25329265, \1f527 for Unicode wrench*/
li.productbadges span.productbadges.vehicle-specific {background-color: #087830;}
li.productbadges span.productbadges.vehicle-specific::before {font-family: "FontAwesome"; content: "\f0ad"; padding-right:6px;}
li.productbadges span.productbadges.universal-fitment {background-color: #ff9000;}
li.productbadges span.productbadges.universal-fitment::before {font-family: "FontAwesome"; content: "\f0ad"; padding-right:6px;}
li.productbadges span.productbadges:nth-of-type(2) {bottom: 50px;}
li.productbadges.withproductratings span.productbadges {bottom: 50px;}
li.productbadges.withproductratings span.productbadges:nth-of-type(2) {bottom: 85px;}
/* for when the lightbox is showing */
div.clearing-blackout li.discountpercent span {display: none;}
div.clearing-blackout li.productbadges span {display: none;}

/* For caegory pages from 3/12/2025 */
div.productbox span.productbadges {
    display: inline-block;
    width: 100%;
    margin: -8px 0 8px 0; 
    text-align: center;
    padding: 3px 5px;
    border: 1px solid white;
    border-radius: 5px;
    background-color: #ff9000;
    color: white;
    text-transform: uppercase;
    font-size: 0.8rem;
    pointer-events: none; /*doesn't seem to work*/
}
div.productbox span.productbadges.vehicle-specific {background-color: #087830;}
div.productbox span.productbadges::before {font-family: "FontAwesome"; content: "\f0ad"; padding-right:6px;}
 
 


i.grey {color: #6f6f6f;}
dd.active i.grey {color: #373737 !important;} /*Make Active icons green*/

.resource-top {font-size: 0.875rem; padding-top: 0.5rem !important}

.buybutton {padding-top: 5px; font-size: 15px; font-weight: bold; color: #454545; text-transform:uppercase;}
.buybutton i, .productdetails i {font-size:1.5rem; margin-right: 5px;} /* show-for-landscape, not sure what this was for Paul 13/1/2018 */
#buy {cursor: pointer;} /*buy button added by Paul 13/1/2018*/
.disabled {display: none;}
.optionalert {text-transform: none;}

.optionlabels {text-transform: uppercase;}


.product-imagetabs {padding-top: 20px;  border-bottom: 0px solid #dddddd; margin-bottom: 10px;}
.productimage {border: 0px solid aqua;}

.relatedtitle h3 {font-size: 1.2rem; font-weight: normal;}
.relatedtitle h3 a{color: #727272;}
.relatedtitle h3 a:hover {text-decoration: underline;}

#deliverypanel h6 {text-transform: uppercase; color: #5f5f5f; border-bottom: 1px solid #efefef;}

/*Basket*/
.scrolltablelabel p {font-size: 0.925rem;} /*responsive spec table message*/

.responsive {border: none;}
.iconb i{font-size: 1.5rem; margin-top: 0.5rem; cursor: pointer;}

/* Terms */
.reveal-modal span.formerlyh1 {text-transform: uppercase; font-size: 1.25rem; color: #6f6f6f; margin-top:0.2rem; margin-bottom:0.5rem; display: block;} /*for formally <h1> tags, requested change by Vancho 13/4/2021 14:04*/
.reveal-modal h2 {text-transform: uppercase; font-size: 1.125rem; color: #6f6f6f;}
.reveal-modal p.formerlyh2 {text-transform: uppercase; font-size: 1.35rem; color: white; padding:0; margin:0 0 8px 0;} /*added 16/9/2024, changed to white from 6f6f6f and made bigger from 1.125rem 19/2/2026*/

/* Sell my bike*/
form.sellmybike h2, form.bikesaleenquiry h2 { text-transform: uppercase; font-size: 16px; }
form.sellmybike h6, form.bikesaleenquiry h6 { text-transform: uppercase; font-size: 12px; border-bottom: 1px solid #efefef; }



@media only screen and (min-device-width: 767px) {
.scrolltablelabel {display: none;}
}

/*start jack l moore image zoom*/
/* these styles are for the demo, but are not required for the plugin */
		.zoom {
			display:inline-block;
			position: relative;
		}
		
		/* magnifying glass icon */
		.zoom:after {
			content:'';
			display:block; 
			width:33px; 
			height:33px; 
			position:absolute; 
			top:0;
			right:0;
			background:url(icon.png);
		}

		.zoom img {
			display: block;
		}

		.zoom img::selection { background-color: transparent; }

/* end jack l moore image zoom*/

.review {margin: 10px 0}
.review img {margin: 5px 0;}

/*cat-child.php and top brands*/
.breadcrumbs {
	background-color: inherit;
	border: none;
	padding-top: 15px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.breadcrumbs li {padding-top: 5px; padding-bottom: 5px;}
li.bc-home {margin-top: -5px; margin-bottom:0; color: #ffffff; }
.breadcrumbs .fi-home{font-size: 22px; vertical-align: 0px; color: #ffffff;}
.breadcrumbs li, .breadcrumbs li a:link, .breadcrumbs li a:visited {color: #ffffff; }

/*Gallery*/
.heading-1 { padding-top: 0.9375em; padding-bottom: 0.46875em; }
.heading-1 h1{text-transform: uppercase;}
/*Links*/
.heading-2 { padding-top: 0.9375em; padding-bottom: 0.4687em; }
.heading-2 h2{text-transform: uppercase; font-size: 18px;}


h1 {color: #050038;}

h1 {
	font-size: 36px;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}


/* Sitepoint Mega Menu*/
/* http://www.sitepoint.com/building-responsive-mega-menu-foundation/ */
/* ICOMOON STYLES */
@font-face {
  font-family: 'icomoon';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon_copy.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon_copy.eot") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon_copy.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon_copy.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon_copy.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}


/*  This breaks product review stars 
[class^="icon-"], [class*=" icon-"] */
.icon-circle-right
{
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: absolute;
  top: 50%;
  -webkit-transition: all .3s ease;
          transition: all .3s ease;*/
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

/* This breaks product review stars 
[class^="icon-"]:not(.icon-play),
[class*=" icon-"]:not(.icon-play)  */

.icon-circle-right
{
  margin-top: -6.5px;
  right: 0;
} 

.icon-play:before {
  content: "\ea15";
}

.icon-circle-right:before {
  content: "\ea42";
}


/* MEGA MENU POSITIONING STYLES */
.top-bar-section .has-dropdown {
  position: static;
}
.top-bar-section .has-dropdown a {
  position: relative;
}

.top-bar-section .has-dropdown.moved {
  position: static;
}
.top-bar-section .has-dropdown.moved > a:after {
  display: block;
}

/* Special css for the currency dropdown*/
.top-bar-section .has-dropdown .currency-dropdown li {width: 8%; right: 15% !important; position:inherit;}
/* Added 8/11/2017 for Euro currency option */
.top-bar-section .has-dropdown .currency-dropdown li:last-child {margin-top: 44px;}

  /* DROPDOWN GENERAL STYLES */
.m-menu {
  border-top: 1px solid #4E4E4E;
}
.m-menu a {
  display: block;
  opacity: .5;
  -webkit-transition: opacity .3s ease;
          transition: opacity .3s ease;
}
.m-menu a:hover {
  opacity: 1;
}

.m-menu span.formerlyh3 {
    display: block;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 1em;
    padding: .5em 0;
    margin: .5em 0;
}
.m-menu p {color: #ffffff; font-size: 0.8125rem;}
 
 
  /* TOP LINKS INSIDE DROPDOWN STYLES */
.column li:not(:first-child) a {
  border-top: 1px solid #262626;
}
.column li:not(:last-child) a {
  border-bottom: 1px solid #4E4E4E;
}
.column li a:hover i {
  right: 3px;
}




  /* BOTTOM LINKS INSIDE FIRST DROPDOWN STYLES

.intro .icon-play {
  position: absolute;
  color: rgba(0, 0, 0, 0.4);
  font-size: 2.5em;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: color .3s ease;
          transition: color .3s ease;
}
.intro:hover .icon-play {
  color: rgba(0, 0, 0, 0.7);
}
*/

  /* TARGET DIV INSIDE SECOND DROPDOWN STYLES
.column > img {
  margin: 1em 0;
}

.info-wrap h3 {
  width: 50%;
  padding-bottom: 5px;
  border-bottom: 1px solid #4E4E4E;
}

.info {
  display: none;
}

.info-visible {
  display: block;
}

.dt {
  margin-top: 50px;
  text-align: center;
  font-size: 2em;
  padding: 0 20px;
}

.p {
  color: black;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}

*/


@media only screen and (max-width: 40.063em) { 
    .header-rhs {text-align:center;}
    .marcellus {padding: 5px; padding-bottom: 5px;}
    .header-search {margin: 20px 0 0 0;}
    .home-text {border-right: none;}
    /*switch coloring for featured cats*/
    .fc-title h4 a:link, .fc-title h4 a:visited { color: #000000 !important;}
    /*.fc-title {background: rgb(245, 245, 245);  background: rgba(245, 245, 245, 0.85);} /*Removed at Sean's request 30/9/2025*/
    div.vrmform form h2 {padding-top: 8px; margin-bottom: 6px;} /*Sean requested more space under search box on mobile 30/9/2025*/
    div.vrmform form h3 {display: inline-block;} /*this is so the <span> + sign doesn't inherit block and cause wrapping from 30/9/2025*/
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/*Contact Page*/
.small-form-headings h6 {color: #6f6f6f; text-transform: uppercase;}

#orderrecaptcha, #enquiryrecaptcha, #availabilityrecaptcha{margin-bottom:10px;}

/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) { 
.maincontent {
/*	min-height: 425px; */
}
} 

/*CSS Media Queries for iPads & iPhones http://stephen.io/mediaqueries/#iPhone */
/* iphone 6 landscape */
.cartonly {display: none;}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape)
{ 
.currency, .cartinfo, .basket-info {display: none;} /*fix topbar*/
.cartonly {display: inline;}
}
/* iPad in  portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation :  portrait) 
 {
.currency, .basket-info {display: none;} 	 /*fix topbar*/
	 }


/**************** Added by Paul 12/12/2019 for tabs on product pages ****************/
.product-tabs-wrapper {margin-top: 2.5rem !important; margin-bottom: 0.5rem !important;}

dl.dltabs {clear: both;}
dl.dltabs dt {
    font-weight: normal;
    display: block;
    background: #58585A;
    border-top: 2px solid #58585A; /* to avoid extra height on active one */
    color: #ffffff;
    padding: 0.75rem 2rem;
    font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
    font-size: 0.875rem;
    width: 25%;
    float: left;
    text-align: center;
	cursor: pointer;
	border-right: 1px solid #464648;
    margin-bottom: 0;
}
div.dltabstop {margin-top: 2.5rem !important;}
div.dltabstop dl.dltabs {margin-bottom: 0; }
dl.dltabs.smallscreen dt {
    border-left: 0;
    border-right: 0;
    width: auto; 
    float: none;
}
dl.dltabs dt:last-of-type {border-right: 0 solid pink;}
dl.dltabs dt a {color: #222;}
dl.dltabs dt.active {background: #ffffff; border-top: 2px solid #CF3629; color:#58585A; border-right: 0;}
dl.dltabs.smallscreen dt {background: #58585A;}
dl.dltabs.smallscreen dt.active {border-bottom: 2px solid #CF3629; border-top: 0; background: #ffffff; color:#58585A;}
dl.dltabs dt:nth-of-type(n+1) {border-left: 0;} /*only if active tab comes first should it keep its own left border*/
/*dl.dltabs dd {padding: 10px; clear: left; border: 1px solid #CF3629; border-top-color: #58585A;}*/
dl.dltabs dd {padding-bottom: 10px; clear: left;}
dl.dltabs dd div:first-of-type {padding-top: 10px;} /*putting this on the <dd> didn't do anything*/
dl.dltabs.smallscreen dd div:first-of-type {padding-top: 0;}
dl.dltabs.smallscreen dt {border-bottom: 1px solid #464648;}



dl.dltabs dd p, li, input{font-size: 0.8125rem}
dl.dltabs dd {font-size: 0.8125rem} /* Added 4/3/2020 as Pete's request to normalise text sizes in description */

dl.dltabs dd h3 {font-size: 0.875rem;}
dl.dltabs dd h4 {font-size: 0.875rem;} /* Added 4/3/2020 as Pete's request to normalise text sizes in description */
dl.dltabs dd h6 {font-size: 0.875rem; font-weight: bold }

dl.dltabs.smallscreen dd div {padding-top: 0.5rem !important;}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-size: 0.8125rem}
::-moz-placeholder { /* Firefox 19+ */
font-size: 0.8125rem}
:-ms-input-placeholder { /* IE 10+ */
font-size: 0.8125rem}
:-moz-placeholder { /* Firefox 18- */
font-size: 0.8125rem}
/*description*/

/*q&a tab*/
.tab-ques-answ {background-color: #f1f1f1; margin-top: 1rem !important; margin-bottom: 1rem !important;}
.tab-ques {font-weight: bold; margin-bottom: 0 }
.tab-ques span, .tab-answ span {color: #CF3629;font-weight: bold;}

dl.dltabs dd small{font-size: 0.6875rem; color: #999; margin-top: 0}

/*fitment*/
.product-fits {text-transform: uppercase; font-size: 0.8125rem; color: #666 }
ul.fitment, ul.resources {line-height: 1.5; margin-left: 0}
ul.fitment li, ul.resources li { font-size: 0.875rem !important;}
ul.fitment li i, ul.resources li i {color: #CF3629; font-size:0.8125rem;}

/*resources*/
.tab-resources {border: 1px solid #c4c4c5; background-color: #f5f5f5}
.tab-resources a:link  {font-size: 0.8125rem }
.tab-resources a:link i {font-size: 2rem !important; }

/*related*/
.tab-related th {margin-bottom: 1rem}




/********************************* control.css appended to here 21/9/2020 *********************************/
/* CSS Document */


#control, .control{
    background-color: #F0F0F0;
    background-image: linear-gradient(to bottom, #FDFDFD, #DDDDDD);
    background-repeat: repeat-x;
	width: 100%;
	margin-top: 0px;
	margin-bottom: 6px;
	border: 1px solid #666;	
	height: 50px;
	display: inline;
	float: left;
	border-radius: 2px;
}

.editable{
   	display: inline;
	float:left;
}

.action{
color: green; text-size: 15px; font-weight: bold; display: none; float: right;
margin:14px 14px 0px 10px;	
}

.cset, .cset:hover, .cset:active, .cset:focus{
    background-color: #F0F0F0;
    background-image: linear-gradient(to bottom, #ccc, #999);
		border: 1px solid #666;	
	padding:3px 8px 6px 8px;
	text-decoration:none;
	color:#fff;
	font-weight:bold;
	float:left;
	margin:10px 10px 0px 10px;
	border-radius: 3px;
}

.csave, .csave:hover, .csave:active, .csave:focus{
	background:#d91900;
		padding:3px 8px 6px 8px;
		border: 1px solid #666;	
	text-decoration:none;
	color:#fff !important;
	font-weight:bold;
	float:left;
	margin:10px 10px 0px 10px;	
	border-radius: 3px;
}

.lcms  .lnav, .lcms  .lcontent{
width: 1000px;
margin: auto;	
}

body.lcms {
	font-family: Trebuchet MS,Arial,Helvetica,sans-serif;
	background-color: #fff;
	margin: 0px;
	padding: 0px;
	color: #000;
 	background-repeat: repeat-x;
	font-size: medium;
}

.lcms .lnav ul {
		box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	     width: 100%;
		 border-radius: 5px;
	}
	
.lcms .lnav  li {
	margin: 0px 0px 0px 15px;
	padding: 0px 0px 1px 0px;
     width: 100%;
	 display:block;
	 min-height: 20px;
	 clear: both;
	 background-color: white;
	 border-radius: 5px;
	}
	
.edit_block{
  border: 1px solid gray;
 
  display: inline;
  width: 100%;
  float: left;
}
.edit_block p.edit_p{
  margin: 0;
  float: right;
}

.edit_block p.edit_p a.edit_a{
 color: #999;
 font-size: 10px;
 display: block;
   border-top: 1px solid gray;
   text-decoration: none;
   border-left: 1px solid gray;
   padding: 5px;
}



/* Added by Paul 30/9/2020 for responsive basket*/
table.responsive th {text-align: left; text-transform: uppercase; font-size: 16px; font-weight: normal;}
table.responsive tr th:nth-child(2) {padding-right: 25px;} /*so refresh and delete buttons don't wrap*/
/*to make smaller on mobile 10/11/2025*/
/*@media only screen and (max-width: 640px) {
    table.responsive tr th {padding-left: 3px; padding-right: 3px;}
    table.responsive tr th:nth-child(2) {padding-right: 3px;}
}*/
table.responsive input[name=quantity] {max-width: 50px; display: inline;}
table.responsive i.fa {padding-left: 3px; cursor: pointer; font-size: 120%;}
@media only screen and (max-width: 800px) {table.responsive tr.totalline td.jrt-cell-1 {font-weight: bold;}} /*when responsive-tables jquery plugin kicks in*/
table.responsive tr.totalline td.jrt-cell-1::before{content: ' '}
table.responsive tr.totalline td.jrt-cell-2::before{content: ' '}
table.responsive tr.totalline td.jrt-cell-3::before{content: ' '}
table.responsive tr.totalline td.jrt-cell-4::before{content: ' '}
table.responsive tr.totalline td.jrt-cell-5::before{content: ' '}

/* Added 11/2/2021 to make layout wider */
.row {max-width: 1440px;}
.contain-to-grid .top-bar {max-width: 1440px;}


/* These styles are for the top menu, added to here 23/3/2021 by Paul. */
.header-wrapper {padding-bottom: 0;}
ul.newmenu {width: 1440px; position: relative; padding:0; margin: 0 auto; list-style-type: none; justify-content: space-between;}
ul.newmenu > li {padding: 23px 0 8px 0; margin:0; width: auto; text-align: center; font-size: 88%;} /*14px high normally*/
ul.newmenu > li:first-child {margin-left: -7px;} /*so that text is left-aligned to arhcustom logo but red box extends 14px to left*/
ul.newmenu > li:last-child {margin-right: -12px;} /*so that text is right-aligned to paper aeroplane icon*/
ul.newmenu > li > a {padding: 14px; overflow:hidden; white-space:nowrap; color: #333; font-size: 100%; font-weight: 500;} /*sort of bold text*/
ul.newmenu > li > div.row {display: none;} /*submenu is hidden initially*/
/* When a menu item is hovered. Top level li have bottom padding of 8px, the submenu div has margin-top 6px and border-top 2px */
/* The left position of the first item is the opposive of the first-child margin-left above.*/
ul.newmenu > li:hover > a {color: white; background: #cf3529;}
ul.newmenu > li:hover > div.row {position: absolute; z-index: 1000; max-width: none; width: 980px; background: rgba(255, 255, 255); padding: 25px 42px; margin-top: 8px; display: block; border-top: 2px solid #cf3529; margin-left: 0;}
ul.newmenu > li:nth-of-type(n+6) > div.row {left: auto; margin-left: -450px;} /*matches element 6,7,8*/
ul.newmenu > li:nth-of-type(n+11) > div.row {margin-left: 0; right: 13px;} /*matches element 11+, near opposite of last-child margin-right above*/
ul.newmenu > li > div > ul {list-style-type: none; padding:0; margin: 0; float: left !important; width: 20%;} /*up to 5 columns so 20% of width each, !important to override foundation*/
ul.newmenu > li > div > ul > li {margin: 0; padding: 0; text-align: left; font-size: 1.1em; line-height: 1.5;} /*eg Body > 1st column > Fenders*/
ul.newmenu > li > div > ul > li > a {color: #cf3529; font-size: 88%; font-weight: bold; margin: 0; padding: 0;} /*eg Body > 1st column > Fenders*/
ul.newmenu > li > div > ul > li ul {margin: 0; padding: 0;} /*these uls are just for organisation and not display*/
ul.newmenu > li > div > ul > li > ul > li > a {line-height: 1.3; color: #333; font-weight: normal;} /* eg Body > 1st column > Fenders > Accessories */
ul.newmenu > li > div > ul > li > ul > li > ul {display: none;} /*eg Body > 1st column > Fenders > Accssories > Extensions */
/* When screen is too small for the full 1440px, make the ul.newmenu just fit*/
/* Go to a floated menu so that items can wrap below 1400px*/
@media only screen and (max-width: 1400px) {
    ul.newmenu {width: auto; justify-content: start;}
    ul.newmenu > li:first-child {margin-left: 0;} /*so that text is left-aligned to arhcustom logo but red box extends 14px to left*/
    ul.newmenu > li:last-child {margin-right: 0;} /*so that text is right-aligned to paper aeroplane icon*/
    ul.newmenu > li {float: left !important;} /*to override foundation's desire to float the last one on the right*/
}
/* Below 1000px don't display sub menus*/
@media only screen and (max-width: 1000px) {
    ul.newmenu > li > a {padding: 12px 14px;} /*will no longer have submenus below it so red extends too low*/
    ul.newmenu > li:hover > div.row {display: none;}
}
/* Foundation's default is Hamburger mode for mobiles. Then above 40.063em it changes to desktop mode so the lines below */
/* do the same. Menu is default hidden. Above 40.063 it's block. And above 1400px it's flex. */
header.row {padding-bottom: 8px;}
ul.newmenu {display: none;}
dd.accordion-navigation > div.starthidden {display:none;}
dd.accordion-navigation > div.starthiddenifsmall {display:none;}
.accordion dd.accordion-navigation > div.content.startshowingevenifsmall {display:block;} /*added to show even if small as I think default is hidden anyway and so class above is probably unnecessary, 31/8/2023, to override foundation.css */
dd.accordion-navigation.toggleall {display:none;} /*shop by... appears on desktop, from 24/1/2022 Pete wants mobile to show these as well so change from block to none*/
/*dd.accordion-navigation.toggleme {display:none;} /*start hidden on mobile*/
@media only screen and (min-width: 40.063em) {
    /*dd.accordion-navigation.toggleall {display:none;} /*shop by... hide on desktop*/
    /*dd.accordion-navigation.toggleme {display:block;} /*appear on desktop*/
    header.row {padding-bottom: 0;}
    li.mobileonly {display: none;} /*hide mobile menu, though items shouldn't be there anyway, from 2/3/2023 this is also used to hide subcategories with redirects*/
    ul.newmenu {display: block;} /*show desktop menu*/
    .accordion dd.accordion-navigation > div.starthiddenifsmall.content {display:block;} /*to override foundation default*/
}
@media only screen and (min-width: 1400px) {ul.newmenu {display: flex;}}



/* Other styles added 29/3/2021 */
.columns.allproducts {padding: 0 20px; line-height: 1.5em;}

/* New product design 26/4/2021 */
ul.productimages li {margin: 0; padding: 0;}
ul.productimages li img {margin: 2px; padding: 5px; border: 1px solid #cccccc;}
ul.productimages li:nth-of-type(2) {clear: left;}
ul.productimages li:nth-of-type(n+2) img {width: 125px; u}
div.price #quantity {width: 50px; height: 50px; display: inline; margin-top: 10px; border-radius:5px;}
div.price a.basketbutton {height: 50px; margin-top: 10px; margin-left: 10px; border-radius:5px; padding-left: 1rem; padding-right: 1rem;}
span.plusbutton {width: 20px; height: 20px; padding:0; border-radius: 5px;}
div.price a.wishlistbutton {height: 50px; margin-top: 10px; margin-left: 3px; border-radius:5px; padding-left: 1rem; padding-right: 1rem; background: #222;}
div.price a.wishlistbutton i.already {color: pink;}

.maincontent .price a{
	display: inline-block;
	margin-bottom: 20px;
}
.maincontent .price a>i{
	margin-right: 5px;
}
/* CSS tweaks 07/5/2021 */
ul.productimages{
	text-align: center;
}
ul.productimages :not(:first-child){
	display: inline-block;
	float: none;
}
span.firstpara{
	font-size: 0.9rem;
}
.extrastuff > p:nth-child(odd){
	font-weight: bold;
	text-decoration: underline;
}
.extrastuff > p:nth-child(odd) span{
	float: right;
	margin-right: 30px;
}
.extrastuff > p:nth-child(even),
.extrastuff div>p,
.extrastuff ul li{
	font-size: 0.9rem;
}
ul.fitment li{
	font-size: 0.9rem !important;
}
div.price {font-size: 0.9rem;}
div.price ul li {font-size: 0.9rem;}
div.price > li {font-size: 0.9rem; line-height: 1.6rem; text-indent: -13px; padding-left: 13px;} /*sometimes PE has <li> with no <ul> so this makes any overflowing lines display indented;*/
div.price p {font-size: 0.9rem;} /*added 28/6/2021 for font size on product pages*/
div.price > a {font-size: 0.9rem;} /*added 28/6/2021 for Usually ships... and About Shipping Costs*/
div.price > a.basketbutton {font-size: 0.9rem;} /*added 28/6/2021 to get Add to basket back up to 16px*/
div.price > a.wishlistbutton {font-size: 0.9rem;} /*added 4/10/2022 to make same size as basket button*/

/* For links within the filters on the left */
.side-nav li a.filterlink {padding-left:0; display:inline;}
input[type="checkbox"]+label.filterlabel {margin-left: 0; color: white; font-size: 1em;}

/* For Trustpilot in header */
div.trustpilot-widget-header {float:right; margin-top:5px;}
ul.productimages li div.trustpilot-widget-product {margin-top: 4px;}
div.trustpilot-widget-product-reviews iframe {height: 300px !important; float:none;}
div.trustpilot-widget-basket {float: right; margin-right: 0;}
@media only screen and (max-width: 640px) {
    div.trustpilot-widget-header {margin-left: auto; margin-right: auto; float: none; width: 230px;}
    div.trustpilot-widget-basket {margin-left: auto; margin-right: auto; float: none;}
    div.trustpilot-widget-basket iframe {height: 60px !important;}
}
@media only screen and (max-width: 475px) {div.trustpilot-widget-basket{width:230px;}} /*this is when the word Excellent is smaller and it can fit in 230px wide*/
/* For Paypal and Trustpilot in basket*/
div.paypal-message {float:right; margin-right: 25px;}
div.price div.paypal-message {float:none; margin-right: inherit;}

/* contact */
.return-conditions li {font-size: 16px}

/* Putting icons in top menu bar 14/10/2022 */
.top-bar .toggle-topbar {right: auto; left: 0;} /*menu icon should float left*/
.top-bar .menu-action-icon {position: absolute; right: 0; top:50%; margin-top: -16px;} /*other icons on the right*/
@media only screen and (min-width: 40.063em) {.top-bar li.menu-action-icon {display: none;}} /*hide on bigger screens*/
.top-bar .menu-action-icon a {color: white; padding: 0 12px; line-height: 33px; font-size: 120%;} /*make them bigger and white*/
.top-bar-section .has-dropdown.mobileonly a:after {border-style: outset; border-width: 8px; margin-left:20px;} /*overrides foundation default inset 5px so it can be bigger and white*/
.searchspacer.showspace {display: block; height: 10px; width: 50px;} /*a laborious way to add spacing only when search box is missing*/

/* Added for products on home page 21/3/2023 */
div.fc-wrapper div.homeproducts > div.columns > div.row > div.columns {min-height: 400px;}
div.fc-wrapper div.homeproducts.youmightlikethese > div.columns {min-height: 450px;} /*for you might like theses on category-one-level.php*/
div.fc-wrapper div.homeproducts div.columns {text-align: left;}
div.fc-wrapper div.homeproducts a.productlink {color: #222; display: inline-block; margin-bottom:10px;}
div.fc-wrapper div.homeproducts span.formerlyh3 {font-size: 20px; margin-bottom:10px; display: inline-block;}
div.fc-wrapper > div.row > h3 {padding-left: 15px; font-size: 20px;}



/* VRM and year/model search started by Paul 15/6/2023 */
div.withvrmform > div.columns:last-of-type{padding-left:0 !important;} /*so there's no gap to right of VRM form*/
div.withvrmform {background-color: #333333;}
div.vrmform {padding:0; margin:0; height: 100%;}
div.vrmform form {padding: 5px 0 5px 25px; margin:0;}
/*div.vrmform form:first-of-type {
    background-color: #464646; 
    background-image:url(/img/motorbike-outline-over-grey.png);
    background-position: right 30px top 16px;
    background-repeat: no-repeat;
}*/
div.vrmform form:last-of-type {
    background-color: #333333; /*Vancho had 97000F;*/
}
div.vrmform h2 {
    color: white;
    margin: 5px 0 10px 0;
    line-height: 120%;
    font-size: 130%;
}
div.vrmform form:first-of-type h3 {
    /*max-width: 100px;
    max-width: calc(100% - 130px);*/
}
div.vrmform h3 {
    color: white;
    margin: 10px 0 8px 0;
    line-height: 100%;
    font-size: 110%;
}

span.vrm {
    display: inline-block;
    background-image: url(/img/uk-license-plate-wide-small.png);
    background-repeat: no-repeat;
    color: black;
    height: 37px;
    padding: 0 0 0 18px;
    margin: 0;
    border: 0;
    width: 100%; /*added 12/9/2025 to try to make this better on very small screens*/
    max-width: 280px; /*added 12/9/2025 to try to make this better on very small screens*/
}
/* So when you fill in a YMM, it just shows the blue part under the Turn On/off button*/
span.vrm.ymm {background-position: -160px 0; padding-left: 0;}
.vrmnotinuse span.vrm {background-image: url(/img/uk-license-plate-wide-small-grey.png);}
.accordion .vrmnotinuse .ul-refine li {color: #999999;}
span.vrm > input {
    padding: 0;
    margin: 0;
    height: 35px;
    border: 0;
    display: inline; 
    background-color: transparent;
}
@font-face {font-family: uknumberplateregular; src: url(/css/uknumberplate-webfont.woff2);} /*borrowed 29/6/2023*/
span.vrm > input[type=text] {
    font-family: uknumberplateregular, "Helvetica Neue", Arial, sans-serif;
    height: 38px;
    text-transform: uppercase;
    text-align: center;
    font-size: 160%;
    width: 140px;
    color: black;
    background-color: transparent; /*to override foundation style*/
}
span.vrm > input[type=submit] {
    font-weight: bold;
    margin: 0;
    font-size: 140%;
    width: 117px; /*in case the calc doesn't work, it uses this instead, added 12/9/2025*/
    width: calc( 100% - 145px ); /*100% = 262px (280px width of span.vrm - 18px padding-left), so 100% - 145px = 117px */
    min-width: 77px; /*this is for an awkward screen size where the Search button starts getting covered up, this forces it to wrap below*/
    color: white;
    cursor: pointer;
}
ul.vrmdetails span.vrm > input[type=text] {font-size: 230%; height: 38px;}
ul.vrmdetails span.vrm > input[type=submit] {font-size: 200%; background-color: #2f2e8f; height:38px;}
ul.vrmdetails li.vrmselectyourmotorcycle > span {font-size: 130%; padding-bottom:5px;}
ul.vrmdetails li.vrmselectyourmotorcycle > select {max-width: 278px;} /*for select your motorcycle boxes added 26/11/2024*/
div.vrmform label {
    font-weight: bold;
    width: 60px;
    color: white;
    padding: 0;
    margin: 8px 0 0 0;
    display: inline-block;
}
div.vrmform select {
    width: 240px;
    height: 35px;
    padding: 3px 8px;
    margin: 0 0 8px 0;
}
/*div.vrmform select[name=cm] {display: inline; width: 115px;} search button removed 8/3/2024*/
div.vrmform select.disableselect {
    color: #CCCCCC;
    -webkit-touch-callout: none; /* from https://stackoverflow.com/a/15273197*/
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
div.vrmform form:last-of-type input[type=submit] {
    border: 0;
    border-radius: 0;
    text-align: center;
    background-color: #2F2D83; /*Vancho had C10F0F;*/
    color: white;
    font-weight: bold;
    height: 35px;
    font-size: 140%;
    width: 120px;
    color: white;
    cursor: pointer;

}
/* From 12/9/2025 start the "or select by make, year, model" as hidden on mobile, with a toggle above it*/
/* The div.vrmform is on the home page and li.vrmselectyourmotorcycle on category-one-level.php */
/* Also hide the span with the plus sign */
@media only screen and (max-width: 640px) {
    div.vrmform form br, div.vrmform form select,
    li.vrmselectyourmotorcycle.startclosedonsmall br, li.vrmselectyourmotorcycle.startclosedonsmall select {display: none;}
}

/*Remove line under VRM parts at Vancho's request 29/6/2023*/
.accordion ul.side-nav.vrmdetails li {border-bottom: 0;}

/*For the white features banner at the top 13/2/2024*/
div.featuresbanner {padding-top: 5px; padding-bottom: 5px;}
div.featuresbanner ul {width: auto; display: flex; justify-content: space-between; margin:0 auto; padding:0 0 0 15px; width:100%; max-width:1440px;}
div.featuresbanner ul li {list-style-type: none; font-size:80%; padding:6px 10px 12px 10px;}
div.featuresbanner ul li i {font-size: 120%;}
div.featuresbanner ul li:first-of-type {border-left: none; padding-left: 0; margin-left:-7px;}
div.featuresbanner ul li:last-of-type {padding-right: 0; margin-right:-12px;}
div.featuresbanner ul li a {color: #333333; text-transform: uppercase;}
@media only screen and (max-width: 500px) {div.featuresbanner {display: none;}}

/*Added 18/4/2024 when removing and changing various headers*/
.top-bar-section .dropdown li.title.back.js-generated > a {color: #fff; line-height: 22.5px; font-size: 18px;} /*removed h5*/
b.modal-header {text-transform: uppercase; color: white; font-size: 1.125rem;} /*replaces h2*/
.hometext-wrapper #offers strong{font-size: 16px; text-transform: uppercase; color: #8f8f8f; font-weight: normal;} /*replaces h3*/

/*Added 13/5/2024 for sales information in product.php*/
p.salescountinfo {}
p.salescountinfo span {color: red;}

/*Added 23/8/2024 for recommended products in the basket*/
div.recommendedproducts {padding-bottom: 2em;}
div.recommendedproducts a {color: black;}
div.recommendedproducts a.relatedimage {height: 150px; display:flex; align-items:center; justify-content:center; border: 1px solid #bfbfbf;}
div.recommendedproducts a.relatedimage > img {height: auto; max-height: 150px; border: none;}
div.recommendedproducts span.formerlyh3.price {font-size: 24px; margin-top: 10px; display: inline-block;}
div.recommendedproducts span.formerlyh3.price form {display: block; margin:0;}

/* Checkout page changes 18/9/2024 */
p.checkoutwarning {color: red;}
p.checkoutwarning label {display:inline; color:red; font-size:inherit;}
input#address_lookup_billing, input#address_lookup_delivery {width: 350px; display: inline; border: 2px solid red;}
ul#suggestion_list_billing, ul#suggestion_list_delivery {display: none; padding:0; margin:-1.5em 0 0 0; border: 1px solid black; min-width: 300px; position: absolute; background: white; z-index:100;}
ul#suggestion_list_billing li, ul#suggestion_list_delivery li {list-style-type: none; line-height:1.5em;}

/* One page checkout 19/8/2025 */
div.onepagecheckout div.panel h2 {font-size: 1.25rem;}
div.onepagecheckout p {margin-top: 10px; margin-bottom: 10px;}
div.onepagecheckout div.sectionwrapper {padding-left: 10px; padding-right:10px;}
div.onepagecheckout div.sectionclosed {display: none;}
div.onepagecheckout input.twoboxes {width: 49%; display: inline;}
div.onepagecheckout .notavailable h2 {color: grey;}
div.onepagecheckout input[type=checkbox] {display: inline;}
div.labelwithinput {vertical-align: top; margin:0; padding:0; display:inline-block;}
div.labelwithinput {width: 100%;}
div.labelwithinput.twoboxes {width: 49%;}
div.labelwithinput label {font-size: 70%;}
div.labelwithinput input, div.labelwithinput select {width: 100%; margin-bottom:8px;}
div.labelwithinput input[type=checkbox] {width: auto; display: inline;}


/* Added 2/12/2024 when all products display using getProductImageNameStockBasket */
/* The min height is to cover the longest possible title, this is then reduced in with jQuery on the productbox div*/
/* Note that if padding herechanges, then change the width calculation on div.productbox > div*/
div.productbox {border: 2px solid #E3E3E3; padding:13px; margin-bottom:8px; min-height: 600px; position:relative;} /*testing 2px border, 13px padding from 25/9/2025*/
div.productbox br.narrowonly {display:none;} /*these line breaks only when very narrow, see below*/
div.productcontainer div.productbox {margin:8px;} /*only extra margin on category page when showing 4 across*/
div.productbox a.productimage {height: 150px; display:flex; align-items:center; justify-content:center;} /*display:flex for vertical centering with 150px, 26/11/2024*/
div.productbox a.productimage > img {height: auto; max-height: 150px; padding-bottom:8px;}
div.fc-wrapper div.productbox {min-height: 600px;} /*on home page, these can be much bigger than above and need more space for jQuery to adjust them*/
div.fc-wrapper div.productbox a.productimage {height: inherit;} /*on home page, images are bigger*/
div.fc-wrapper div.productbox a.productimage > img {max-height: inherit;} /*on home page images are bigger*/
div.productbox a.producttitle {display: inline-block; color: #222; text-align:left;} /*no padding or disrupts the giveminheight calculations*/
div.productbox.productbrandbox a.producttitle {width:100%; text-align:center;} /*brands are in a div.productbox but they don't usually stretch to two lines*/
div.productbox span.productstockreview {display: inline-block; height:18px; width:100%; padding-top:8px;}
div.productbox span.productstockreview img {padding-bottom: 4px;} /*so bottom of images aligns with bottom of text*/
div.productbox span.productstockreview small {padding-top: 3px;} /*padding should match a.reviewstars padding below*/
div.productbox span.productstockreview small.outofstock {color: red; font-weight: normal; font-size: 0.85rem;}
div.productbox span.productstockreview small.instock {color: #087830; font-weight: normal; font-size: 0.85rem;}
div.productbox span.productstockreview small.available {color: #FF8000; font-weight: normal; font-size: 0.85rem;}
div.productbox span.productstockreview a.reviewstars {font-size: 0.85rem; float:left; padding-top: 3px;} /*just for the number of reviews added 23/10/2022, moved to the left at Sean's request 30/9/2025*/
div.medium-2 div.productbox span.productstockreview span.numreviews {display: none;} /*hide review count on basket page when showing 6 across*/
div.productbox > div {position: absolute; bottom: 0; width:calc(100% - 30px); padding-bottom:15px;} /*subtract padding to give with*/
span.productpriceanddiscount {clear:both; font-weight: normal; font-size: 0.925rem; display: inline-block; padding: 15px 0 10px 0; line-height:1.2rem;} /*can display on product.php without div.productbox*/
span.productpriceanddiscount span.discountedprice {font-weight: bold; color: #d81921; font-size:28px;} /*around discounted price*/
span.productpriceanddiscount span.normalprice {font-weight: bold; font-size:28px;} /*around normal price when no discount*/
span.productpriceanddiscount span.undiscounted {color: #373737; font-weight: bold; font-size: 0.91rem; padding-top: 0;}
span.productpriceanddiscount span.savings {color: green; font-weight: normal;}
div.productbox span.productbasketbutton form {display: inline;} /* Basket button on category page from 21/10/2022 */
div.productbox span.productbasketbutton input.basketbutton {margin: 6px 0 3px 0; padding: 4px 6px; display: inline; font-size: 0.80rem; border-radius:3px; background: #35349a; width: 100%;} /*background changed from #222; on 28/11/2025 to be consistent with product page*/
div.productbox span.productbasketbutton input.basketbutton {width: 100%;}
/* Wrap the word From and the stars when the 2-col or 4-col layout gets too narrow*/
@media only screen and (max-width: 510px) {
    div.productbox br.narrowonly {display: inline;}
    div.productbox span.productstockreview a.reviewstars {float:none;}
}
@media only screen and (min-width: 640px) and (max-width: 1300px) {
    div.productbox br.narrowonly {display: inline;}
    div.productbox span.productstockreview a.reviewstars {float:none;}
}


/* CSS tweaks 28/4/2021, display:flex for vertical centering with 150px added 26/11/2024 by Paul */
@media only screen and (max-width: 40.063em) {.relatedproducts div:nth-of-type(2) a {margin-top:20px;}}

/* added 16/12/2024 for contactus page*/
div.loadingafterpress {position: fixed; left: 50%; top: 50%; margin-left: -150px; margin-top: -120px; background: #58585A; color: white; font-size: 300%; padding: 80px; display:none;}


/* Added 19/9/2025 for white background in top bar on mobile */
@media only screen and (max-width: 40.063em) {
    nav.top-bar {background: white;}
    .top-bar.expanded .title-area {background: white;}
    .top-bar .toggle-topbar.menu-icon a {color: #333333;}
    .top-bar .menu-action-icon a {color: #333333;}
    .top-bar .toggle-topbar.menu-icon a span::after {box-shadow: 0 0px 0 1px #333333,0 7px 0 1px #333333,0 14px 0 1px #333333;}
    .top-bar .toggle-topbar.menu-icon a {padding-left: 10px;} /*added 25/9/2025 at Pete's request when I removed MENU text, was 15px*/
}