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;
}
/* The family is named here because app-c.css sets every h2 in Impact and
   leaves only the a and span inside one in Montserrat. A title written as a
   link inside its heading got Montserrat by that accident; one written as bare
   text in the heading - the /collections/ index - came out in Impact, which
   has a single weight and so ignored the 600 below as well. */
 .products-content h2.bike-title {
     font-family: 'Montserrat', Arial, Helvetica, sans-serif;
     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;
}
/* A category tile on the /collections/ index. Its picture is whatever the
   category has - tile artwork of its own, or its first bike's photo - so the
   pictures are not one height, and a name printed straight under its picture
   sat higher on a short tile than on a tall one.

   Bootstrap's row already stretches every tile on a line to the tallest. This
   stands the link over that whole height, centres the picture in the room
   above the name and leaves the name on the bottom edge, so the names share a
   line whatever is above them. Below md a tile is a line of its own and
   nothing here changes how it looks. */
 .products-content .the-category-tile {
     display: flex;
}
 .products-content .the-category-tile > a {
     display: flex;
     flex-direction: column;
     /* For a tile with no picture at all: the name still goes to the bottom. */
     justify-content: flex-end;
     width: 100%;
}
/* Auto margins rather than a stretch, so the picture keeps its proportions and
   the spare height is shared above and below it. */
 .products-content .the-category-tile img {
     flex: 0 0 auto;
     margin-top: auto;
     margin-bottom: auto;
}
 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;
    }
}