span.sold-out {
     color: red;
     font-weight: 700;
     text-transform: uppercase;
     margin-left: 10px;
}
 h1.product_title {
     font-size: 1.75em;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin: 0;
}
 h4.bike-price {
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1px;
}
 .products-content h2.bike-title {
     font-size: 14px;
     margin-top: 20px;
     color: #6C8D19;
     font-weight: 600;
     letter-spacing: 1px;
     margin-bottom: .25em;
}
.products-content h2.bike-title a,
.products-content h2.bike-title a:hover {
    color: #6C8D19;
}
 .products-content .the-category {
     padding: 0 5px;
}
 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: .4em;
     letter-spacing: 0px;
}
 .big-image img {
     box-shadow: 0px 0px 5px #000;
}
 .small-images img {
     cursor: pointer;
     margin-bottom: 10px;
     max-width: 125px;
}
/* An anchor when the card links straight out to a store, and a button when the
   store has to be asked something first - adding to this site's basket, or
   resolving a bike before leaving for the checkout. Both are named here, as
   product-b.css does, so the markup can be whichever the card needs rather
   than being bent to fit a rule that only ever matched "a". */
 a.buy-now,
 button.buy-now {
     text-align: center;
     margin: auto;
     display: block;
     width: 100%;
     background: #bf0;
     color: #000;
     font-weight: 900;
     font-size: 2em;
     border: 2px solid #bf0;
     border-radius: 10px;
     padding: .25em 0;
     transition: .5s ease;
     /* A button inherits none of these from the page the way an anchor does. */
     font-family: inherit;
     line-height: inherit;
     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-press, while the store is being asked what this bike is. Still reads as
   the same button so the card does not jump. */
 button.buy-now[disabled] {
     cursor: default;
     opacity: .65;
}
/* The same button on a bike card in the grid, where it sits under a price
   rather than under a product photo: the 2em above is sized for the product
   page and would be wider than the card it is in. */
 .the-category a.buy-now,
 .the-category button.buy-now {
     font-size: 1em;
     max-width: 200px;
     margin: .5em auto 1em;
     padding: .4em .5em;
}
 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;
}
 .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: #bf0;
     font-weight: 900;
}
 @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;
    }
}