/**
 * Main Template CSS Stylesheet
 * 
 * BOOTSTRAP v3.8.1
 *
 */
.clearBoth {
   clear: both;
}
.forward {
    float: right;
}
.back {
    float: left;
}

/* This is used to re-size images */
img {
    max-width: 100%;
    height: auto;
    border: 0;
}

.qmix > br {
    display: none;
}

.normalprice, .productSpecialPriceSale {
    text-decoration: line-through;
}

#back-to-top {
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    z-index: 1;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}

#back-to-top.show {
    opacity: 1;
    z-index: 1;
}

/* Side padding for the main navigation bar. Bootstrap 4 gave .navbar 1rem; Bootstrap 5 gives it
   none and expects a .container inside, so the first item (a store name, the Trademark plugin's
   mark) and the toggler sat against the bar's edges. */
#navMain .navbar {
    --bs-navbar-padding-x: 1rem;
}

/* Type scale: each size the smallest that still meets accessibility. WCAG sets no minimum size;
   the practice is 1rem body text and nothing under 0.875rem, so body text, links, menus, buttons and
   prices stay as Bootstrap sets them and only the sizes above body text come down from Bootstrap's
   2.5/2/1.75/1.5/1.25rem. h1 keeps Bootstrap's own smaller size on narrow screens, so no heading grows
   anywhere. No !important: a store's more specific rules keep their sizes. All in rem, so browser text
   size and 200% zoom still scale everything (WCAG 1.4.4). Headings under 24px are not "large text",
   so their colors need 7:1 for AAA, which the template's color pairs already meet. */
h1, .h1 { font-size: min(1.75rem, calc(1.375rem + 1.5vw)); }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1.125rem; }
h6, .h6 { font-size: 1rem; }
/* Box and card headings are 20px, including card headers marked up as h1/h2 (Please Choose:, option
   names, Contact Us), which would otherwise take the 24/28px page-heading size. */
.leftBoxHeading, .rightBoxHeading, .centerBoxHeading, h2.card-title,
.card-header.h1, .card-header.h2, h1.card-header, h2.card-header { font-size: 1.25rem; }
/* Badges (the Categories box's item counts) were Bootstrap's 0.75em, 12px beside body text. */
.badge { --bs-badge-font-size: max(.875rem, .75em); }

/* set height of scrollable area in mobile menu */
div#navbarSupportedContent {
    max-height:90vh;
    overflow-y:auto;
}

.zca-banner {
    text-align: center;
}

.ot-title {
    text-align: right;
}
.ot-text,
.totalCell {
    text-align: right;
}

.centeredContent {
    text-align: center;
    padding: 1rem;
}

table.tabTable td {
    padding: 0.5rem;
}
#indexProductList-cat-wrap {
    margin-bottom: 1rem;
}
#productsListing-bottomRow {
    margin-top: 1rem;
}

.sideBoxContent select {
    margin-bottom: 1rem;
}
#navCatTabs a,
#navCatTabs a:hover {
    /* Color comes from the Header Category Tabs border settings (stylesheet_bs5t_colors.css). */
    border-width: 0.125rem;
    border-style: solid;
}

/* Bootstrap 5 "helper" classes */
.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }
.z-0 { z-index: 0; }

/* Merging back from version-specific stylesheets */
.btn.button_add_selected {
    position: fixed;
    bottom: 7.5rem;
    z-index: 100;
}
#shippingEstimatorContent,
#shoppingcartBody .qtyCell input {
    width: fit-content;
}
a {
    text-decoration: underline;
}
.btn.button_add_selected {
    position: static;
    z-index: auto;
}
.btn.button_add_selected.bs4-button-float.always {
    position: fixed;
    bottom: 7.5rem;
    z-index: 100;
}
@media (max-width: 577px) { 
    .btn.button_add_selected.bs4-button-float.sm-only {
        position: fixed;
        bottom: 5rem;
        z-index: 100;
        left: 2vw;
    }
    .btn.button_add_selected.bs4-button-hide-sm {
        display: none;
    }
}
#checkoutPayment label.inputLabelPayment+input[type="checkbox"],
#checkoutPayment label.inputLabel+input[type="checkbox"] {
    opacity: 100%;
    position: initial;
    margin-left: .5rem;
}
.card-body {
    border-radius: inherit;
}
.card-header+.card-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.leftBoxCard,
.rightBoxCard {
    overflow: hidden;
}
.pl-dp {
    min-width: 7rem;
}
/* Core writes the prices as adjacent <span>s with no space between them, so a
   was/now/save line could not wrap and pushed the listing table past a phone's
   width. A zero-width space after each gives a break point that is invisible. */
.pl-dp > span::after {
    content: "\200B";
}
.qmax > br {
    display: none;
}
/* Listing thumbnails are img-fluid (max-width: 100%) in a table column with no width of
   its own, so the browser squeezed that column first: 100px images showed at 63px on a
   desktop. Show them at the configured listing size; on phones use a fixed 48px, which
   keeps the three-column table inside a 375px screen. */
.productListing-data .listingProductImage {
    max-width: none;
}
@media (max-width: 575.98px) {
    .productListing-data .listingProductImage {
        max-width: 48px;
        height: auto;
    }
}