.LargeproductImage img {
    display: block;
    max-height: 694px;
    max-width: 694px;
}


.productImage img {
    display: block;
    max-height: 515px;
    max-width: 510px;
}

.productImageThumb img {
    max-height: 280px;
    max-width: 250px;
}

.default-payment-row {
    background-color: lightgreen;
    color: white;
    font-weight: bold;
}

.expired-payment-row {
    background-color: lightcoral;
    color: white;
}

.productImageXxSmallThumb img {
    max-height: 60px;
    max-width: 50px;
    margin-right: 8px;
}

.productImageSmallThumb img {
    max-height: 110px;
    max-width: 100px;
    margin-right: 8px;
}

@media (max-width: 1200px) {
    .productImage .productImageThumb {
        order: 1;
    }
}

.searchbar {
    padding-bottom: 20px;
}

.modal-body {
    display: flex;
}

.modal-body img {
    object-fit: contain;
}

.cartStatus {
    padding-left: 3px;
    padding-right: 3px;
    margin-left: 3px;
    margin-right: 3px;
    border: 1px solid lightGrey;
    background-color: white;
    color: black;
}

.ecomCard {
   border: 1px none lightgrey;
    margin: 25px;
    padding: 10px;
}

.ecomCard-body {
    padding: 0;
}

.ecomPrice {
    padding-top: 10px;
}

.CartQuantity {
    padding-right: 10px;
}

.textRed {
    color: red;
}

.addressBox {
    border: 1px solid lightgrey;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.addressBox:hover {
    background-color: lightblue; 
}

.mobileCount {
    margin-top: 10px;
}

/* ------------------------------------------------------------------
   Site theme integration for Shopping / Cart / Checkout pages.
   When these pages render under the SiteBuilder layout, the published
   site exposes theme CSS variables (--theme-primary,
   --theme-primary-text, --theme-section-border-color,
   --navigation-active-text-color, --theme-section-color,
   --theme-font-color). The selectors below let the ecommerce
   components inherit those colors so Cart, Check Out, and Shopping
   pages match the active site theme. When the variables are not
   defined (default layout) the fallbacks preserve existing visuals.
   ------------------------------------------------------------------ */
.shoppingSection .btn-primary,
.shoppingSection .btn-success,
#cartzone .btn-primary,
#cartzone .btn-success,
#checkoutzone .btn-primary,
#checkoutzone .btn-success,
#productListZone .btn-primary {
    background-color: var(--theme-primary, #0d6efd);
    border-color: var(--theme-primary, #0d6efd);
    color: var(--theme-primary-text, #ffffff);
}

.shoppingSection .btn-primary:hover,
.shoppingSection .btn-success:hover,
#cartzone .btn-primary:hover,
#cartzone .btn-success:hover,
#checkoutzone .btn-primary:hover,
#checkoutzone .btn-success:hover,
#productListZone .btn-primary:hover {
    filter: brightness(0.92);
    background-color: var(--theme-primary, #0d6efd);
    border-color: var(--theme-primary, #0d6efd);
    color: var(--theme-primary-text, #ffffff);
}

.shoppingSection .btn-outline-primary,
#cartzone .btn-outline-primary,
#checkoutzone .btn-outline-primary,
#productListZone .btn-outline-primary {
    color: var(--theme-primary, #0d6efd);
    border-color: var(--theme-primary, #0d6efd);
    background-color: transparent;
}

.shoppingSection .btn-outline-primary:hover,
#cartzone .btn-outline-primary:hover,
#checkoutzone .btn-outline-primary:hover,
#productListZone .btn-outline-primary:hover {
    background-color: var(--theme-primary, #0d6efd);
    color: var(--theme-primary-text, #ffffff);
}

/* Card / bordered surfaces follow the site theme border color. */
.shoppingSection .card,
#cartzone .card,
#checkoutzone .card,
#productListZone .card {
    border-color: var(--theme-section-border-color, #dee2e6);
}

/* Pagination follows the theme primary color. */
.shoppingSection .pagination .page-link,
#productListZone .pagination .page-link {
    color: var(--theme-primary, #0d6efd);
}

.shoppingSection .pagination .page-item.active .page-link,
#productListZone .pagination .page-item.active .page-link {
    background-color: var(--theme-primary, #0d6efd);
    border-color: var(--theme-primary, #0d6efd);
    color: var(--theme-primary-text, #ffffff);
}

/* Links inside cart / checkout pick up the active nav color. */
#cartzone a:not(.btn),
#checkoutzone a:not(.btn) {
    color: var(--navigation-active-text-color, var(--theme-primary, #0d6efd));
}

/* Form focus rings adopt the theme primary color. */
.shoppingSection .form-control:focus,
.shoppingSection .form-select:focus,
#cartzone .form-control:focus,
#cartzone .form-select:focus,
#checkoutzone .form-control:focus,
#checkoutzone .form-select:focus {
    border-color: var(--theme-primary, #86b7fe);
    box-shadow: 0 0 0 0.2rem rgba(var(--navigation-text-rgb, 13, 110, 253), 0.25);
}

/* Product price uses the theme primary color when available. */
.ecomPrice h5 {
    color: var(--theme-primary, inherit);
}