/*
 * Kervezee visual overrides, ported from the old responsive_classic files.
 * Kept separate so Zen Cart's 2.2.2 template CSS remains upgradeable.
 */

label,
h4.optionName {
    line-height: 1em;
}

#productDescription {
    clear: none;
    float: right;
    width: 55%;
    margin: 20px 0;
    padding: 20px 0 0;
    line-height: 150%;
}

.listingBuyNowButton {
    width: 120px !important;
}

body,
.messageStackSuccess,
.messageStackCaution,
#tagline,
#productQuantityDiscounts table,
.categoryListBoxContents a,
h2.greeting a,
h2,
h3,
.cartAttribsList,
#cart-box {
    color: #000;
}

a:link,
a:visited,
#navEZPagesTOC ul li a,
a:hover,
#navEZPagesTOC ul li a:hover,
fieldset fieldset legend,
#siteinfoLegal a,
.cartTotalDisplay,
.cartOldItem,
.specialsListBoxContents,
.centerBoxContentsSpecials,
.centerBoxContentsAlsoPurch,
.centerBoxContentsFeatured,
.centerBoxContentsNew,
.list-price,
.itemTitle a,
h2.greeting,
#icon,
h1,
.header,
.categoryListBoxContents a:hover,
.categoryListBoxContents:hover a {
    color: #444;
}

.cat-count,
.itemTitle a:hover,
h2.greeting a:hover {
    color: #bb4a3f;
}

#navMainWrapper,
#navSuppWrapper,
#navEZPagesTop,
#navMainSearch1,
.header {
    /*
     * responsive_mobile.css and jquery.mmenu.all.css are loaded after the
     * normal template styles and otherwise replace these with #666/#333.
     */
    background-color: #9b1f1b !important;
    background-image: linear-gradient(to bottom, #780000 31%, #bd4e45 100%) !important;
}

/*
 * Keep every sidebox heading as one continuous bar.  The responsive_classic
 * colour stylesheet also assigns these headings a background, so explicitly
 * replace both its colour and image here.
 */
.rightBoxHeading,
.leftBoxHeading,
.centerBoxHeading {
    background-color: #9b1f1b !important;
    background-image: linear-gradient(to bottom, #780000 0%, #bd4e45 100%) !important;
}

span.cssButton.normal_button.button.button_logoff,
span.cssButton.normal_button.button.small_edit,
.seDisplayedAddressLabel,
tr.tableHeading,
.prod-list-wrap,
#myAccountPaymentInfo h4,
#myAccountShipInfo h4,
#siteinfoIP,
#siteinfoLegal,
#bannerSix {
    background-color: #bb4a3f;
}

#shippingEstimatorContent th,
.productListing-rowheading,
#productQuantityDiscounts table tr:first-child td {
    background-color: #bf5249;
}

#navCatTabsWrapper,
.current,
.productListing-rowheading a,
.list-more:hover,
input.submit_button,
span.normal_button {
    background-color: #444;
}

#navCatTabs li a:hover,
input.submit_button:hover,
input.cssButtonHover,
span.normal_button:hover {
    background-color: #bb4a3f;
}

#filter-wrapper,
span.cssButton.normal_button.button.button_goto_prod_details,
.button_add_selected:hover,
.button_in_cart:hover {
    background-color: #b03828;
}

#navMain ul li a.navCartContentsIndicator {
    color: #b03828;
}

/* Replace the responsive template's blue/charcoal mobile icon accents. */
#navMain ul li a:hover,
#navMain ul li a:focus {
    color: #f3b1ab;
}

#navEZPageNextPrev i,
.navNextPrevList i {
    color: #780000 !important;
}

#navEZPageNextPrev i:hover,
#navEZPageNextPrev i:focus,
.navNextPrevList i:hover,
.navNextPrevList i:focus {
    color: #bd4e45 !important;
}

.pagination li,
#siteinfoIP,
#siteinfoLegal,
#bannerSix,
#shoppingcartContent hr,
#seQuoteResults td,
.listBoxContentTable td,
.tableBorder1 td {
    border-color: #bb4a3f;
}

.sideBoxContent optgroup > option,
th#seProductsHeading,
th#seTotalHeading {
    color: #b03828;
}


/*
 * Product page: keep the complete product image in its own row.  Some legacy
 * product images include a promotional panel in the image itself, so the
 * image must not share a row with the property panel.
 */
#productGeneral #pinfo-left {
    clear: both;
    float: none;
    width: 100%;
    margin: 0 0 1rem;
}

#productGeneral #productMainImage {
    float: none;
    width: 100%;
    margin: 0;
    text-align: center;
}

#productGeneral #productMainImage img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

#productGeneral #pinfo-right,
#productGeneral #productDescription {
    clear: both;
    float: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0.5rem 0;
    padding: 0;
}

#productGeneral #cart-box {
    clear: both;
    float: none;
    box-sizing: border-box;
    width: min(100%, 44rem);
    margin: 1rem auto 2rem;
    padding: 0.75rem 1rem;
}

#productGeneral #productPrices {
    margin: 0 0 0.5rem;
}

#productGeneral #productAttributes .attribBlock {
    margin: 0;
    padding: 0;
}

#productGeneral #productAttributes .wrapperAttribsOptions {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) minmax(8rem, 1fr);
    align-items: center;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0.4rem 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}

#productGeneral #productAttributes .wrapperAttribsOptions > h4.optionName {
    float: none;
    margin: 0;
    padding: 0;
    font-size: 1em;
    line-height: 1.25;
    text-align: left;
}

#productGeneral #productAttributes .wrapperAttribsOptions > div.back {
    float: none;
    min-width: 0;
    text-align: right;
}

#productGeneral #productAttributes .wrapperAttribsOptions > div.back select,
#productGeneral #productAttributes .wrapperAttribsOptions > div.back input,
#productGeneral #productAttributes .wrapperAttribsOptions > div.back textarea {
    max-width: 100%;
    text-align: left;
}

#productGeneral #productAttributes .wrapperAttribsOptions > br.clearBoth,
#productGeneral #productAttributes .attribBlock > br.clearBoth {
    display: none;
}

#productGeneral #cartAdd {
    margin-top: 0.75rem;
}


@media (max-width: 48rem) {
    #productDescription {
        clear: both;
        float: none;
        width: auto;
        padding: 0.5em;
    }
}

/* Product-list pagination: keep every navigation control on one row. */
#productListing .prod-list-wrap {
    display: grid !important;
    grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr);
    align-items: center;
    gap: 0.5rem 1rem;
    box-sizing: border-box;
    height: auto !important;
    min-height: 4rem;
    padding: 0.65rem 1rem !important;
}

#productListing .prod-list-wrap .navSplitPagesResult {
    grid-column: 1;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left;
}

#productListing .prod-list-wrap .navSplitPagesLinks {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap;
}

#productListing .navSplitPagesLinks nav.pagination,
#productListing .navSplitPagesLinks ul.pagination {
    margin: 0;
    padding: 0;
}

#productListing .navSplitPagesLinks ul.pagination {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
}

#productListing .navSplitPagesLinks .pagination li {
    flex: 0 0 auto;
}

#productListing .navSplitPagesLinks .pagination li a,
#productListing .navSplitPagesLinks .pagination .current {
    box-sizing: border-box;
    display: block;
    padding: 0.8rem 0.75rem;
}

/* Storefront actions replace the old image buttons. */
.cart-add {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0.45rem;
}

.kervezeeListingButton {
    display: inline-flex;
    min-width: 8.5rem;
    min-height: 2.5rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border: 1px solid #780000;
    border-radius: 2px;
    color: #fff !important;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.kervezeeOrderProduct {
    background: linear-gradient(to bottom, #9b1f1b 0%, #780000 100%);
}

.kervezeeViewProduct {
    border-color: #444;
    background: #444;
}

.kervezeeListingButton:hover,
.kervezeeListingButton:focus-visible {
    border-color: #bd4e45;
    background: #bd4e45;
    color: #fff !important;
}

.kervezeeListingButton:active {
    transform: translateY(1px);
}

@media (max-width: 48rem) {
    #productListing .prod-list-wrap {
        grid-template-columns: 1fr;
    }

    #productListing .prod-list-wrap .navSplitPagesResult,
    #productListing .prod-list-wrap .navSplitPagesLinks {
        grid-column: 1;
        width: 100% !important;
        text-align: center;
    }

    #productListing .prod-list-wrap .navSplitPagesResult {
        grid-row: 1;
    }

    #productListing .prod-list-wrap .navSplitPagesLinks {
        grid-row: 2;
        overflow-x: auto;
    }

    .cart-add {
        justify-content: center;
        align-items: center;
    }
}