body { text-align:left; font-size: 14px;font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500; color: #5f7285;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}


a:link {
  color: #df0024;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: #df0024;
}
a:active {
  color: #df0024;
}
a:visited {
  color: #df0024;
}
.tab {
  color: #000000;
  text-decoration: none;
}
.tab-on {
  color: #FFFFFF;
  text-decoration: none;
}
.small {
  font-size: 11px;
}
.footer {
  font-size: 10px;
  color: #FFFFFF;
}
.lite {
  color: #666666;
}
.blue {
  color: #1B68CB;
}
.title {
  font-size: 17px;
  font-weight: bold;
  color: #df0024;
}
h1 {
  font-size: 17px;
  font-weight: bold;
  color: #df0024;
}
.title2 {
  font-size: 10pt;
  font-weight: bold;
  color: #df0024;
}
.title3 {
  font-size: 18px;
  font-weight: bold;
  color: #1B68CB;
}
.tbl-title {
  font-weight: bold;
  background-color: #F1F8FE;
  white-space: nowrap;
}
.tbl-head {
  font-weight: bold;
  background-color: #4489E2;
  color: #FFFFFF;
}
.tbl-head2 {
  font-weight: bold;
  background-color: #C4DCF1;
  color: #006699;
}
.border {
  background-color: #000000;
}
.color1 {
  background-color: #FFFFFF;
}
.color2 {
  background-color: #F8F8F9;
}

div.displayproducts i {font-size:0.8em}

form {
  margin: 0px;
  padding: 0px;
}
img {
  border-style: none;
  border-width; 0px;
}
h3 {
	padding:0 5px;
	font-size:11px;
	cursor: pointer;
	color: #000;
}
h3 a.toplink {
	font-size:11px;
	cursor: pointer;
	color: #000;
	text-decoration:none;
}

h3 a.toplink:hover {
  color: #df0024;
}	

a.activelink {
	font-size:10px;
	cursor: pointer;
	color: #f00;
	text-decoration:underline;
	font-weight:bold;
}
#accordion {
	cursor: pointer;
	font-size:14px;	
}	
	
#accordion a {
	color: #000;  
	font-size:11px;	
}	
	
#accordion a:hover {
  color: #df0024;
}	
	
#accordion a.activelink {
  color: #df0024;
	text-decoration:underline;
}	


#accordion p {
	color: #000;  
	font-size:11px;
	cursor: pointer;
	padding:8px 0 0 0;
	margin:0;
}
#accordion p.sectioninfo{
	padding:0 10px 0 20px;
	max-width:240px;
}
.nav {
	width:200px;
	padding:5px 0;
	margin:5px;
	background-color:#ccc;
}
#accordion div {
	background-color:#ddd;
	padding: 0 0 15px 10px;
}
#productdescription {padding-top:20px}

@media screen and (max-width: 500px) {
		#mobilenavtoggle {position: absolute;cursor: pointer;padding:10px 20px 20px 10px}
		.main-container {display:  block;}
		.main-container>* {display: inline-block;}
		#leftnav-container {width:100%;position: absolute;left:0;display:none;z-index:20}
		#leftnav-container>b{display:none}
		#leftnav-container .nav {width:100%}
		#leftnav-container h3 {font-size:1.2em !important}
		#leftnav-container div p a {font-size:1.3em !important}
		/* Home is an h3 > a.toplink, which a later rule pins to 1em: in the
		   folding menu it should read at the same size as everything else */
		#leftnav-container h3 a.toplink {font-size:inherit !important}
		a.toplink {font-size:1em !important}
}

@media screen and (min-width: 501px) {
		#leftnav-container {display:block}
		#mobilenavtoggle {display:none}
		.main-container {display: flex; align-items: flex-start;}
		#leftnav-container {flex: 0 0 auto;}
		.page-content {flex: 1 1 0%; min-width: 0;}   /* fill the space beside the menu; never wrap under it */
}

/* Below 900px the menu column leaves too little room for the page itself, so it
   folds into the button at the top left - the same width on every page, whether
   that is a category, a product, the basket, the checkout or the account. */
@media screen and (max-width: 900px) {
		#mobilenavtoggle {display:block;position:absolute;cursor:pointer;padding:10px 20px 20px 10px}
		.main-container {display:block}
		/* block, not inline-block: an inline-block at width:100% adds its own
		   padding on top of the full width and pushes the page wider than the
		   window, which made the grey header stop short of the content */
		.main-container>* {display:block}
		#leftnav-container {width:100%;position:absolute;left:0;display:none;z-index:20}
		#leftnav-container>b {display:none}
		#leftnav-container .nav {width:100%}
		#leftnav-container h3 {font-size:1.2em !important}
		#leftnav-container div p a {font-size:1.3em !important}
		/* Home is an h3 > a.toplink, pinned to 11px by the base rule: in the
		   folding menu it should read at the same size as everything else */
		#leftnav-container h3 a.toplink {font-size:inherit !important}
		.page-content {width:auto;max-width:100%;box-sizing:border-box}
}

@media screen and (max-width: 700px) {
		#summarytext img {display:block;width:90% !important}
}

@media screen and (max-width: 900px) {
		.right_thumbnails{display:none}
}

@media screen and (min-width: 901px) {
		#leftnav-container img {display:none}
}


@media screen and (max-width: 1000px) {
		div.productoptionmain {display:  table;}
		div.productoptionname {display:  table-cell;}
		div.productoptiondropdown {display:  table-cell;}
		div.productoptiondescription {display:  block; padding-bottom:20px}
		div#mainimagepicture {width:100% !important;overflow:hidden}
		div#mainimagepicture img {width:100vh !important;max-height:100vh  !important;}
		div#rightimagescontainer {display:none}
		div#bottomimages {margin:20px}
		div#bottomimages table {max-width:580px}
		div.cart td{font-size:0.5em}
		div.cart td b{font-size:0.5em}
}

@media screen and (min-width: 1001px) {
		div.productoption {display:  table;}
		div.productoptionrow {display:  table-row; padding-bottom:20px;}
		div.productoptionname {display:  table-cell;}
		div.productoptiondropdown {display:  table-cell;}
		div.productoptiondescription {display:  table-cell}
		#topmainimage {display:  table;vertical-align: text-top;}
		#topmainimage>div{display:table-row; width:auto;vertical-align: text-top;} 
		#topmainimage>div>div{display:table-cell; padding-top:0;vertical-align: top;} 
		div#bottomimages {display:none}
		#rightimages a img{padding-bottom:5px !important}
}

/* =========================================================================
   Shared page layout (Sep 2026)
   Everything below replaces styles that used to be repeated inline in every
   page template. Structure is views/layout.php. Kept deliberately close to the
   previous look; a fuller redesign comes later.
   ========================================================================= */

body.shop {
	margin: 0;
	background: #275590 url('/shop_images/bg.jpg') repeat-x;
}

/* Header: logo on the left, account and basket icons on the right. Its inner
   box has the same width and centring as the white page box below, so the
   logo lines up with the page's left edge and the icons with the right of the
   Search button (13px in: the box's 5px padding + the content's 8px). */
/* Light steel grey (suits both the black Quadtech and the blue/red Acewell
   logos) with a red line underneath. */
.site-header { background: linear-gradient(#f7f9fb, #dde3ea); border-bottom: 3px solid #df0024; box-shadow: 0 2px 4px rgba(20, 30, 40, .15); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;
	width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 13px 0 5px; text-align: left; }
#logo { display: inline-block; width: 376px; height: 75px; vertical-align: bottom; }
#logo img { height: 75px; }
#logo .logo-text { display: inline-block; line-height: 75px; font-size: 42px; font-weight: bold; color: #df0024; letter-spacing: 1px; }
.cart-area { display: flex; align-items: center; gap: 14px; margin-left: auto; padding: 6px 0; min-height: 75px; }
.currency-box { text-align: right; }

/* Account / basket icons, styled on bikeittrade.com's header */
.head-icons { display: inline-flex; align-items: flex-end; gap: 4px; }
.head-icon { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 4px 6px; border-radius: 6px;
	color: #27313b !important; text-decoration: none; font: 600 11px/1.2 "Open Sans", Arial, sans-serif; transition: background-color .15s, color .15s; }
.head-icon svg { width: 30px; height: 30px; display: block; margin-bottom: 3px; overflow: visible; }
.head-icon:hover, .head-icon:focus, .head-icon.is-on { color: #df0024 !important; }
.head-sep { width: 1px; align-self: stretch; background: #b3bcc7; margin: 4px 6px; }
.head-basket-icon { position: relative; display: block; }
.head-badge { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
	background: #df0024; color: #fff; font: 700 11px/18px Arial, sans-serif; text-align: center; }
.head-total { font-weight: 700; font-size: 12px; color: #df0024; }
.nowrap { white-space: nowrap; }

/* Body: white content box, category menu on the left, thumbnails on the right.
   The white box is always the same width (up to max-width), whatever is on
   the page, so a category with one product doesn't shrink it. */
.site-body { clear: both; text-align: center; }
.right_thumbnails { float: right; width: 135px; position: relative; z-index: 0; }
/* Pictures here are whatever size they were uploaded at - one of them is 407px
   wide in a 135px column, which pushed the page sideways on any window narrower
   than about 1200px. They are held to the column's width. */
.right_thumbnails img { max-width: 100%; height: auto; }
/* Pictures in this column are whatever size they were uploaded at - one of them
   is 407px wide in a 135px column, which pushed the whole page sideways on any
   window narrower than about 1200px. They are held to the column's width. */
.right_thumbnails img { max-width: 100%; height: auto; }
.main-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1180px;   /* room for three product columns beside the menu */
	margin: 0 auto;
	padding: 5px;
	background: #fff;
	text-align: center;
	border-radius: 0 0 6px 6px;
}
#leftnav-container {
	vertical-align: top;
	background: #fff;
	padding-top: 20px;
	text-align: center;   /* the menu has always been centred */
}
#leftnav-container > b { display: block; text-align: center; padding-bottom: 10px; }
.page-content {
	vertical-align: top;
	background: #fff;
	padding: 0 8px 12px;
}
.page-content h1 { margin: 12px 0 14px; }

footer.footer { text-align: center; padding: 10px 5px 20px; }

/* Breadcrumb, above the search box */
.breadcrumb { text-align: left; margin: 8px 0 6px; font-size: 13px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb li { display: flex; align-items: center; color: #687684; }
.breadcrumb li + li::before { content: "\203A"; margin: 0 8px; color: #9aa5b1; font-size: 15px; }
.breadcrumb a, .breadcrumb a:link, .breadcrumb a:visited { color: #275590; text-decoration: none; }
.breadcrumb a:hover { color: #df0024; text-decoration: underline; }
.breadcrumb [aria-current] { color: #27313b; font-weight: 600; }

/* Rounded panels - replaces the nine-slice tables of tbl-*.gif corner images */
.panel {
	background: #FAFAFB linear-gradient(#fff, #FAFAFB 60px);
	border: 1px solid #d8dde4;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	padding: 12px 14px;
	margin: 0 0 14px;
}
.panel-center { text-align: center; }

/* Product cards on category/listing pages */
/* Always start below any images the category text floats left or right -
   otherwise the cards are squeezed into the gap between them. */
.product-grid, .category-tiles, .pager, .product-steps, .search-pages {
	clear: both;
}
.product-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 12px;
}
/* Up to three across; two or one as the space narrows. */
.product-card {
	box-sizing: border-box;
	flex: 0 1 calc((100% - 24px) / 3);   /* a third of the row, less the gaps */
	min-width: 200px;                     /* below this they wrap to 2, then 1 */
	min-height: 206px;
	padding: 12px;
	text-align: center;
	background: #FAFAFB linear-gradient(#fff, #FAFAFB 60px);
	border: 1px solid #d8dde4;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.product-card .product-name { display: block; margin-bottom: 7px; }
.product-card .product-image { display: block; min-height: 100px; margin-bottom: 4px; }
.product-card .product-image img { max-width: 140px; max-height: 140px; }
.product-card .product-price { white-space: nowrap; }
.product-card .product-subtitle { display: block; }

/* Listing toolbar: count, items per page, page numbers */
.pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 12px;
	padding: 8px 12px;
	background: #F1F4F8;
	border: 1px solid #d8dde4;
	border-radius: 8px;
	font-size: 13px;
}
.pager-limit a, .pager-limit .pager-current { margin-left: 4px; }
.pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pager-pages a, .pager-pages span, .pager-limit a, .pager-limit .pager-current {
	display: inline-block;
	min-width: 30px;
	box-sizing: border-box;
	padding: 5px 8px;
	border-radius: 6px;
	text-align: center;
	line-height: 1.2;
}
.pager-pages a, .pager-limit a { background: #fff; border: 1px solid #d8dde4; }
.pager-pages a:hover, .pager-limit a:hover { border-color: #df0024; background: #fff5f6; }
.pager .pager-current { background: #df0024; border: 1px solid #df0024; color: #fff; font-weight: bold; }
.pager-pages .pager-gap { min-width: 0; padding: 5px 2px; }
.pager-pages .pager-disabled { color: #aab4c0; border: 1px solid transparent; }
.featured-heading { clear: both; }

/* Search bar across the top of the white box, and the results page */
.search-form { display: flex; gap: 6px; }
.site-search { margin: 12px 0 4px; }
.search-scope { margin: -6px 0 14px; font-size: 13px; }
.search-form input[type=search] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 12px;
	font: inherit;
	color: #333;
	border: 1px solid #c3cbd6;
	border-radius: 8px;
	background: #fff;
}
.search-form input[type=search]:focus { outline: none; border-color: #df0024; box-shadow: 0 0 0 3px rgba(223, 0, 36, 0.12); }
.search-form button {
	flex: 0 0 auto;
	padding: 8px 18px;
	font: inherit;
	font-weight: bold;
	color: #fff;
	background: #df0024;
	border: 1px solid #df0024;
	border-radius: 8px;
	cursor: pointer;
}
.search-form button:hover { background: #b8001d; }
.search-pages { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; text-align: left; }
.search-page {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	background: #FAFAFB linear-gradient(#fff, #FAFAFB 60px);
	border: 1px solid #d8dde4;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
a.search-page:hover { border-color: #df0024; }
.search-page-image { flex: 0 0 90px; text-align: center; }
.search-page-image img { max-width: 90px; max-height: 70px; }
.search-page-parent { font-weight: normal; color: #5f7285; font-size: 12px; }
.search-more { margin: -8px 0 18px; }
.search-more > summary { cursor: pointer; color: #df0024; font-weight: bold; padding: 4px 0 10px; }
.search-page-snippet { display: block; margin-top: 3px; font-weight: normal; color: #5f7285; font-size: 12px; }

/* Category overview page: sub-categories as tiles, three across, in the same
   rounded boxes as the product cards. */
.category-tiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0 0 18px;
}
.category-tile {
	box-sizing: border-box;
	flex: 0 1 calc((100% - 24px) / 3);
	min-width: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 12px 12px;
	text-align: center;
	background: #FAFAFB linear-gradient(#fff, #FAFAFB 60px);
	border: 1px solid #d8dde4;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: box-shadow .15s, border-color .15s;
}
a.category-tile:hover { border-color: #df0024; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); }
.category-tile-image { display: flex; align-items: center; justify-content: center; height: 170px; margin-bottom: 10px; }
.category-tile-image img { max-width: 100%; max-height: 170px; }
.category-tile-name { font-size: 15px; text-transform: uppercase; letter-spacing: .5px; }
.category-tile-note { display: block; margin-top: 4px; font-size: 12px; font-weight: normal; font-style: italic; color: #5f7285; }

/* Previous / Next under the featured products on an overview page */
.product-steps { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 16px; }
.step-button {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 8px;
	background: #df0024;
	border: 1px solid #df0024;
	color: #fff !important;
}
a.step-button:hover { background: #b8001d; }
.step-button.step-disabled { background: #eef1f5; border-color: #d8dde4; color: #aab4c0 !important; font-weight: bold; }
.step-count { font-size: 13px; }

/* Category overview blocks (sub-category list with images) */
.category-list { max-width: 580px; margin: 0 auto; text-align: left; }
.category-item { overflow: hidden; clear: both; padding: 6px 0; }
.category-item .category-image { float: right; max-width: 150px; padding-left: 20px; }
.category-item .category-image img { max-width: 150px; }
.category-item .category-note { padding-left: 20px; font-style: italic; }

/* Product detail page */
/* Product detail page. The body of the page reads left-aligned, as it always
   has; headings and image panels stay centred. */
.product-detail { text-align: left; }
.product-detail .panel-center, .product-detail #mainimagepicture { text-align: center; }
.product-prices { margin-bottom: 12px; }
.product-gallery { display: table; width: 100%; }
.product-gallery > div { display: table-cell; vertical-align: top; }
#mainimagepicture { text-align: center; }
#mainimagepicture img { max-width: 80%; max-height: 400px; }
.gallery-heading { text-align: center; }
.gallery-thumbs a img { padding: 2px; }
#rightimagescontainer { width: 150px; padding-left: 12px; }
.detail-table { width: 100%; border-collapse: separate; border-spacing: 1px; background: #000; }
.detail-table td { padding: 4px; }
.detail-table .tbl-title { width: 25%; }
.buy-box .buy-heading { color: #FF6600; font-weight: bold; }
.buy-box .productoption { margin: 8px 0; }
.page-links { text-align: center; margin: 14px 0; }

/* Printable pages (invoice): no site chrome, plain light background */
body.shop-print { background: #F1F1F1; }
.page-print { padding: 10px; }

/* Wide screens: the white box and (on pages that have one) the thumbnails
   column beside it are centred together, at every width - the box used to
   hug the left until the screen was wider than both. The header's inner box
   leaves the same 135px on the right when there are thumbnails, so it still
   lines up with the white box. */
@media screen and (min-width: 901px) {
	.site-body { display: flex; align-items: flex-start; justify-content: center; }
	.site-body > .main-container { order: 1; flex: 0 1 1180px; min-width: 0; margin: 0; }
	.site-body > .right_thumbnails { order: 2; float: none; flex: 0 0 135px; }
	.has-thumbs .site-header-inner { max-width: 1315px; padding-right: 148px; }
}

/* Header on a phone held sideways, and on small tablets: the logo, the VAT and
   currency box and the icons will not sit on one line together - the basket
   ends up pushed off the right-hand edge. The VAT and currency question moves
   down under the logo, on one line of its own, which leaves the top line as
   just the logo and the icons. */
@media screen and (min-width: 501px) and (max-width: 900px) {
	.site-header-inner { flex-wrap: wrap; padding-bottom: 4px; }
	/* On the basket, checkout and account pages the menu button sits at the top
	   left (the menu column is folded away there), so leave it room rather than
	   letting the logo sit on top of it. */
	.site-header-inner { padding-left: 64px; }
	/* the cart area stops being a box of its own so its two parts can be placed
	   separately: the icons beside the logo, the VAT and currency below it */
	.cart-area { display: contents; }
	#logo { order: 1; width: auto; max-width: 36%; height: auto; }
	#logo img { max-width: 100%; height: auto; max-height: 58px; }
	#logo .logo-text { font-size: 32px; line-height: 58px; }
	.head-icons { order: 2; margin-left: auto; align-items: flex-end; }
	.head-icon { min-width: 56px; padding: 4px 4px; }
	.currency-box { order: 3; flex: 1 1 100%; text-align: left; padding: 0; }
	.currency-box form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
	.currency-box br { display: none; }   /* VAT question and currencies on one line */
}

@media screen and (max-width: 500px) {
	/* Header on a phone: menu button, then the logo beside it (not on top of
	   it), then the cart summary and tabs full width underneath. */
	.site-header { display: flex; flex-wrap: wrap; align-items: center; }
	.site-header-inner { display: contents; }
	#mobilenavtoggle { position: static; padding: 8px 10px; flex: 0 0 auto; }
	#mobilenavtoggle img { display: block; }
	#logo { flex: 1 1 0; min-width: 0; width: auto; height: auto; padding: 4px 8px 4px 0; }
	#logo img { max-width: 100%; height: auto; display: block; }
	#logo .logo-text { font-size: 28px; line-height: 50px; }
	.cart-area { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-height: 0; padding: 2px 6px 6px; }
	.cart-area .currency-box { flex: 1 1 100%; }
	.head-icons { gap: 0; }
	.head-icon { min-width: 50px; padding: 4px 3px; font-size: 10px; }
	.head-icon svg { width: 26px; height: 26px; }
	.head-sep { margin: 4px 3px; }
	.breadcrumb { padding: 0 4px; }
	.product-card { flex-basis: 100%; }
	/* two tiles across on a phone, smaller pictures */
	.category-tiles { gap: 8px; }
	.category-tile { flex-basis: calc(50% - 4px); min-width: 0; padding: 10px 6px; }
	.category-tile-image { height: 100px; }
	.category-tile-image img { max-height: 100px; }
	.category-tile-name { font-size: 13px; }
	.pager { justify-content: center; }
	.product-gallery, .product-gallery > div { display: block; }
}

/* Technical specification block on product pages (shared by every site). */
#product-spec { margin: 18px 0; text-align: left; }
#product-spec h2, #product-spec h3 { font-size: 1.1em; margin: 16px 0 6px; }
#product-spec table { border-collapse: collapse; margin: 6px 0 12px; max-width: 100%; }
#product-spec th, #product-spec td { border: 1px solid #d0d0d0; padding: 4px 8px; text-align: left; vertical-align: top; }
#product-spec th { background: #5f7285; color: #fff; }
#product-spec ul { margin: 4px 0 12px 20px; padding: 0; }