/*
 * CSS specifically for product page.
*/


@font-face {
    font-family: 'Sonic';
    src: url('/files/fonts/sonic/sonic-webfont.woff2') format('woff2'),
         url('/files/fonts/sonic/sonic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#info p {
    font-size: 15px;
}
h4 {
    font-size: 15px;
}
#info .specs_highlight {
    display: flex;
	justify-content: center;
}
#info .specs_highlight .highlight_image {
	display: flex;
}
#info .specs_highlight .highlight_image img {
	object-fit: cover;
    max-width: 100%;
    height: auto;
}
#info .specs_highlight div.highlight_text {
	background: #000;
	padding: 3em;
}
#info .specs_highlight div {
	max-width: 50%;
}
#info .specs_highlight div.highlight_text h2 {
	color: #fff;
	font-size: 36px;
	font-family: 'Sonic';
	margin: 0;
}
#info .specs_highlight div.highlight_text h6 {
	margin: 0 0 20px;
	color: #bf0;
	font-size: 14px;
}
#info .specs_highlight div.highlight_text p {
	color: #fff;
	font-size: 11px;
	letter-spacing: 1px;
}
h1.product_title {
    font-size: 3.5rem;
    line-height: 3.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    font-family: 'Sonic';
}
h3.product_price {
    color: #c1db40;
    font-weight: 900;
    font-size: 2em;
    letter-spacing: 1px;
    margin: 0;
}
h3.product_price s {
    color: #000;
    font-size: .75em;
}
h3.product_price span {
    color: #000;
    font-size: 1.5rem;
    letter-spacing: 0px;
}
.big-image img {
    box-shadow: none;
    border: none !important;
}
.small-images img {
    cursor: pointer;
    margin-bottom: 10px;
    border: 1px solid #afd15d;
    height: 85px;
    object-fit: contain;
}
/* Every element this look is worn by, not just the anchor.
   Add to cart is a real <button> - it performs an action on this page rather
   than going anywhere - and a bike that is sold out is a <span>, because there
   is nothing to press. Both have to look like the link they sit in place of,
   so the selector names all three rather than the markup being bent to fit a
   rule that only ever matched "a". */
a.buy-now,
button.buy-now,
span.buy-now {
    text-align: center;
    margin: auto;
    display: block;
    background: #bf0;
    color: #000;
    font-weight: 900;
    font-size: 1.25em;
    border: 2px solid #bf0;
    border-radius: 10px;
    padding: .25em 0;
    transition: .5s ease;
    max-width: 300px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* A button inherits none of these from the page the way an anchor does. */
    font-family: inherit;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
a.buy-now:hover,
button.buy-now:hover {
    background: #000;
    color: #bf0;
}
button.buy-now {
    cursor: pointer;
}
/* Mid-request, and while the store is being asked what this bike is. Still
   reads as the same button so the page does not jump. */
button.buy-now[disabled] {
    cursor: default;
    opacity: .65;
}
/* Sold out, beside the price.
   A badge and not a button: it is a fact about the bike, next to the other
   fact about the bike, and it leaves the button row for the thing a visitor
   can actually do.

   Written twice, and the second selector is the one that does the work. The
   badge sits inside the price heading, so "h3.product_price span" above
   matches it too and sets colour, size and letter-spacing on it - at a higher
   specificity than a lone class. Repeating the rule as
   "h3.product_price span.stock-badge" outranks it honestly, which is better
   than scattering !important through a shared component. The bare class is
   kept so the badge still looks right anywhere else it is used. */
.stock-badge,
h3.product_price span.stock-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: .6rem;
    padding: .25em .7em;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
}
.stock-badge-out,
h3.product_price span.stock-badge-out {
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #3a3a3a;
}
/* The purchase button, when this market has one. It is the page's primary
   action, so it runs the full width of the product column rather than sitting
   at the same 300px as the dealer-locator link below the list. */
a.buy-now-primary,
button.buy-now-primary,
span.buy-now-primary {
    max-width: none;
    width: 100%;
    height: 56px;
    font-size: 1.5em;
    letter-spacing: .02em;
}
a.database-btn {
    text-align: center;
    background: #bf0;
    color: #000;
    font-weight: 900;
    font-size: 1em;
    border: 2px solid #bf0;
    border-radius: 10px;
    transition: .5s ease;
    padding: .5em;
    margin: auto 20px;
    display: block;
}
a.database-btn:hover {
    background: #000;
    color: #bf0;
}
h5 {
    font-weight: 900;
    font-size: 1.25em;
    letter-spacing: 1px;
    margin: 0;
}
hr.border-chartreuse {
    border-top: 3px solid #bf0;
}
#product-tab .nav-link,
.sidebar ul li a {
    color: #000;
}
#product-tab-content h3 {
    font-weight: 900;
    font-size: 1.25em;
    letter-spacing: 1px;
    border-bottom: 3px solid #bf0;
    width: fit-content;
}
.sidebar ul,
#product-tab-content ul {
    padding: 0;
}
.sidebar ul li,
#product-tab-content li {
    list-style-position: inside;
    margin-bottom: 5px;
}
.sidebar ul li {
    list-style: none;
}
.specs-table tr:nth-child(odd) {
    background: #c1c1c1;
}
#specsTable tbody tr:nth-child(-n+3) {
    display: none;
}
.specs-table td {
    border: 1px solid;
    padding: 5px;
}
h5.breadcrumbs {
    font-size: 1em;
    padding-bottom: .35em;
}
h5.breadcrumbs a {
    color: #000;
}
.tab-content a {
    color: #000;
    font-weight: 900;
}
.card button.btn.btn-link {
    background: transparent;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    display: block;
    margin: auto;
    width: 100%;
    text-decoration: none;
}
a#set-store {
    display: block;
    text-align: center;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    font-weight: 700;
    background: #bf0;
    padding: .5rem 0;
    font-size: 1.5rem;
}
.accordion>.card:first-of-type {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.geo-allowed h3 {
    font-size: 1.5rem;
    font-weight: 700;
}
.geo-allowed p.h4 {
    font-size: 1.25em;
    text-transform: uppercase;
    font-weight: 700;
}
.geo-allowed a {
    color: #cce299;
}
.geo-allowed > a {
    text-transform: uppercase;
    font-size: 1rem;
    text-decoration: underline;
}
div#sidebar {
    position: fixed;
    background: #fff;
    border: 1px solid;
    height: 100vh;
    overflow-y: scroll;
    padding: 2em;
    right: 0;
    max-width: 320px;
    width: 100%;
    top: 0;
    z-index: 5;
}
div#sidebar a#close-sidebar {
    font-size: 2rem;
    color: #000;
    border: 2px solid;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: calc(-100% + 20px);
    position: relative;
    margin-bottom: 25px;
    text-decoration: none;
}
div#sidebar input {
    width: 100%;
    border: 2px solid #000;
}
div#sidebar .store-item {
  border: 1px solid;
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 0.5rem;
}
div#sidebar .store-item > a {
    color: #cce299;
    text-transform: uppercase;
    font-size: .85rem;
    font-weight: 700;
}
div#sidebar .store-item p a {
    color: #000;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: underline;
}
div#sidebar .store-item h3, div#sidebar .store-item .h3 {
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}

div#sidebar .store-item p.h4 {
  font-size: .8rem;
  line-height: 1.5;
  color: #000;
  word-wrap: break-word;
}

div#sidebar .store-item p.h4 span {
  display: block;
}

#pushdaddy-widget {
  z-index: 3 !important;
}

div#sidebar .store-item .availability {
  text-align: center;
  padding: 5px;
  background: red;
  font-weight: 700;
}

div#sidebar .store-item .availability.stock-in-stock {
  background: #bbff00;
}

div#sidebar a#close-sidebar {
  font-size: 2rem;
  color: #000;
  border: 2px solid;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: calc(-100% + 20px);
  position: relative;
  margin-bottom: 25px;
  text-decoration: none; }

@media only screen and (max-width: 576px) {
    .nav-tabs .nav-item {
        width: 100%;
        border: 1px solid;
    }
    .nav-tabs .nav-item .nav-link.active {
        background: #bf0;
    }
	#info .specs_highlight {
		flex-flow: column;
	}
	#info .specs_highlight div {
		max-width: 100%;
	}
	#info .highlight_image {
        order: 1;
    }
	#info .specs_highlight div.highlight_text h2 {
		font-size: 30px;
		text-align: center;
	}
	#info .specs_highlight div.highlight_text h6 {
		text-align: center;
	}
}