body, html {
    margin: 0;
    padding: 0;
    height: 200%;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto';
}

/* The Breadcrumb */
.breadcrumb-wrapper {
    font-size: 20px;                  
    padding: 15px;                  
    background-color: #dad4d4;
    border-bottom: 1px solid #ddd;
    margin: 0 auto;                                 
    box-sizing: border-box; 
    text-align: center;
}

.inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.breadcrumb a {
    text-decoration: none;            
    color: #5f5e5e;                
    font-weight: 500;   
    font-style: italic;           
}
.breadcrumb a:hover {
    text-decoration: underline;      
}

.breadcrumb span[aria-hidden="true"] {
    margin: 0 5px;                  
    color: #666;                     
}

.breadcrumb span:last-child {
    color: #350808;                  
    font-weight: 400;                
    font-style: italic;              
}
/* End Breadcrumb */

/* Main */
main {
    flex: 1;
}

/* Title */
.cart-table {
    border-collapse: collapse;  /* Ensure borders are continuous */
    width: 90%; 
    margin: 0 auto;
}

.cart-table th {
    font-family: 'Roboto', 'Arial';
    font-weight: 300;
    font-size: 20px;
    padding: 50px 20px 20px 20px;
    border-bottom: 1px solid #000000;
}

.cart-table td {
    padding: 15px 15px;
    text-align: left;
    border-bottom: 1px solid #000000;
}

.cart-remove-btn {
    color: white;
    background-color: red;
    border: 1px none red;
    border-radius: 3px;
    padding: 10px; /* Changed padding from 30px auto to 10px */
    transition: 0.2s;
}

.cart-remove-btn:hover {
    background-color: black;
    box-shadow: 1px 1px 0.3px black;
}

/* Product review image */
.cart__image img {
    min-width: 15px;
    max-width: 250px;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Text Style for Product review */
.product-name {
    font-size: 15px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

.product-name:hover {
    text-decoration: underline;
}

main small {
    display: block;
    margin: 20px auto;
    text-align: left;
}

/* Quantity Selector Container */
.quantity-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000000;
    overflow: hidden; 
    width: auto; 
}

/* Minus and Plus Buttons */
.quantity-adjust-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: none;
    cursor: pointer;
}

.quantity-adjust-btn:hover {
    background-color: #f0f0f0; /* Slight hover effect */
}

/* Quantity Input */
.num-qty {
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 0; 
    font-size: 16px;
    opacity: 0.5;
    border: 1px solid black;
}

/* Optional: For Plus/Minus Icons */
.fallback-text {
    font-size: 20px;
    padding: 10px 10px;
    margin: 10px 10px;
}

/* Buttons */
.update-cart-btn,
.pay-btn {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.update-cart-btn {
    background-color: #f2d9c3; /* Changed color to a more subtle green */
    color: #110c0c;
    border: 1px solid black;
    transition: 500ms smooth;
}
.update-cart-btn:hover {
    box-shadow: 0.5px 0.5px 1px rgb(138, 108, 108);
}
.update-cart-btn:active {
    opacity: 0.8;
}

.pay-btn {
    background-color: #000000; /* Black for pay button */
    color: white;
}
.pay-btn a {
    text-decoration: none;
    color: inherit;
}

.pay-btn:hover {
    opacity: 0.4; 
}

/* Cart Footer Styles */
.cart-footer {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    padding: 10px;
}

.cart-footer-item {
    flex: 1;
    margin-right: 50px;
}

.cart-footer-item:last-child {
    margin-right: 0; /* Remove margin from the last item */
}

#CartSpecialInstructions {
    width: 100%;  /* Changed from 600px to 100% for better responsiveness */
    height: 150px; 
    /* resize: none;  Optional: Disable resizing (users won't be able to drag to resize) */
}

/* Subtotal Styles */
.subtotal-label {
    font-weight: 300;
    font-size: 20px;
    font-family: 'Roboto';
}

.subtotal-amount {
    font-size: 25px;
    color: #333;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .cart-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cart-footer-item {
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* Added to adjust cart table on smaller screens */
    .cart-table {
        width: 100%; /* Ensure the table takes full width */
    }

    .cart-table th,
    .cart-table td {
        padding: 10px; /* Reduced padding for smaller screens */
    }
}