/* SalvationMart: mobile cart layout */
@media (max-width: 576px) {
    #page-cart .cart-container,
    #page-cart .cart-container .row,
    #page-cart .cart-container [class*="col-"] {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    #page-cart .cart-container .col-md-8,
    #page-cart .cart-container .col-md-4 {
        width: 100%;
        flex: 0 0 100%;
    }

    #page-cart .cart-container .frappe-card {
        padding: 12px !important;
    }

    /* Restore the native table layout */
    #page-cart .cart-container .cart-table {
        width: 100% !important;
        table-layout: auto !important;
    }

    #page-cart .cart-container .cart-table tbody tr {
        display: table-row !important;
    }

    #page-cart .cart-container .cart-table tbody tr > td {
        display: table-cell !important;
        vertical-align: top;
        min-width: 0;
        padding: 8px 4px !important;
    }

    #page-cart .cart-container .cart-table tbody tr > td:first-child {
        width: 62% !important;
    }

    #page-cart .cart-container .cart-table tbody tr > td:nth-child(2) {
        width: 38% !important;
        text-align: right !important;
    }

    /* Product image and name */
    #page-cart .cart-container .cart-item-image {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        margin-right: 8px !important;
    }

    #page-cart .cart-container .cart-item-image img {
        width: 48px;
        max-width: 48px;
        max-height: 72px;
        object-fit: contain;
    }

    #page-cart .cart-container .cart-table .item-title {
        width: auto !important;
        margin-right: 0 !important;
        font-size: 13px;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    #page-cart .cart-container .cart-table .item-subtitle {
        font-size: 12px;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    #page-cart .cart-container .cart-table .notes textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Compact quantity controls */
    #page-cart .cart-container .number-spinner {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 6px !important;
    }

    #page-cart .cart-container .number-spinner .cart-btn {
        width: 24px;
        min-width: 24px;
        padding: 3px;
    }

    #page-cart .cart-container .number-spinner input {
        width: 30px !important;
        min-width: 30px;
        max-width: 30px !important;
        padding: 3px 1px;
    }

    /* Price under quantity */
    #page-cart .cart-container .sm-item-subtotal {
        display: block !important;
        width: 100%;
        text-align: right;
        font-size: 12px;
        white-space: normal;
        overflow-wrap: normal !important;
    }

    #page-cart .cart-container .sm-item-subtotal .item-rate {
        display: block;
        font-size: 11px;
    }

    /* Hide desktop-only subtotal column */
    #page-cart .cart-container .cart-table .column-sm-view {
        display: none !important;
    }

    /* Keep the total row readable */
    #page-cart .cart-container .cart-table tfoot tr {
        display: table-row !important;
    }

    #page-cart .cart-container .cart-table tfoot th {
        padding: 10px 4px !important;
        font-size: 13px;
        white-space: normal;
        overflow-wrap: normal;
    }

    #page-cart .cart-container .cart-table tfoot th:first-child {
        display: none !important;
    }

    #page-cart .cart-container .cart-table tfoot th.item-grand-total {
        display: table-cell !important;
    }

    #page-cart .cart-container .cart-table tfoot th.totals {
        text-align: right !important;
    }

    /* Payment summary */
    #page-cart .cart-container .payment-summary,
    #page-cart .cart-container .cart-payment-addresses {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #page-cart .cart-container .payment-summary table {
        width: 100%;
        table-layout: auto;
    }

    #page-cart .cart-container .payment-summary td:last-child {
        text-align: right;
        white-space: normal;
    }

    #page-cart .cart-container .place-order-container a {
        white-space: normal;
    }
}