.table th, .table td {
        vertical-align: middle;
    }
    .quantity-input {
        width: 80px;
        max-width: 80px;
    }
    .remove-item {
        color: #dc3545;
        transition: color 0.2s;
    }
    .remove-item:hover {
        color: #a71d2a;
    }
    .coupon-section {
        margin-top: 20px;
    }
    #apply-coupon-form {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }
    #shipping-calc .weight-dimensions {
        margin-bottom: 10px; /* Adjust this value as needed */
    }
    #coupon-code {
        max-width: 150px; /* Adjust this width as needed */
        margin-right: 10px;
    }
    #shipping-calc {
        max-width: 375px;
    }
    /* Shipping calculator: scope styles by theme to avoid white boxes in dark-theme */
    .light-theme #shipping-calc div {
        color: black;
    }
    .light-theme #shipping-calc input.form-control {
        color: black !important;
        background-color: #ffffff !important;
    }
    .dark-theme #shipping-calc div {
        color: #F5EBFF !important;
    }
    .dark-theme #shipping-calc input.form-control {
        color: #F5EBFF !important;
        background-color: #1A1A2E !important;
        border-color: #333 !important;
    }
    #checkout-button {
        background-color: #28a745 !important; /* Green color */
        border-color: #28a745 !important; /* Match border color */
        color: white !important; /* Ensure text is white */
    }
    
    /* Breadcrumb colors should follow the active theme. Dark theme keeps the
       light accent color; light theme uses a dark text color for contrast. */
    .dark-theme #breadcrumbs nav ol.breadcrumb > li.breadcrumb-item + li.breadcrumb-item::before,
    .dark-theme #breadcrumbs nav ol.breadcrumb > li.breadcrumb-item a,
    .dark-theme #breadcrumbs nav ol.breadcrumb > li.breadcrumb-item.active {
        color: #F5EBFF !important;
    }

    .light-theme #breadcrumbs nav ol.breadcrumb > li.breadcrumb-item + li.breadcrumb-item::before,
    .light-theme #breadcrumbs nav ol.breadcrumb > li.breadcrumb-item a,
    .light-theme #breadcrumbs nav ol.breadcrumb > li.breadcrumb-item.active {
        color: #001f3f !important; /* light-theme readable navy */
    }

    /* Small spacer to ensure content doesn't collide with fixed footer (match products page) */
    .footer-spacer {
        height: 10px; /* small 10px padding */
    }
    @media (max-width: 767px) {
        .footer-spacer { height: 10px; }
    }

/* Utility classes extracted from inline style attributes in shopping_cart.html */
.checkout-button-width {
    max-width: 300px;
    min-width: 200px;
}

.shopping-cart-postal-input {
    width: 55%;
}