/* =========================================================
   КВІТИ ВІД МАРУСІ — MOBILE CART FIX
   Only affects the cart page on small screens.
   Desktop layout remains unchanged.
========================================================= */

@media (max-width: 576px) {

    /* Prevent the cart table from creating horizontal overflow. */
    .cart-page .cart-table-wrapper {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .cart-page .cart-table {
        width: 100% !important;
        max-width: 100%;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Desktop table header is not useful on a phone. */
    .cart-page .cart-table thead {
        display: none;
    }

    /* Each product becomes a compact mobile card. */
    .cart-page .cart-table tbody tr {
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 12px;
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
        background: #fff;
        border-bottom: 1px solid #ece8f5;
    }

    /* Image */
    .cart-page .cart-table tbody tr > td:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 82px !important;
        min-width: 0;
        padding: 0;
        align-self: start;
    }

    .cart-page .cart-table tbody tr > td:first-child a,
    .cart-page .cart-table tbody tr > td:first-child img {
        display: block;
        width: 82px;
        max-width: 82px;
        height: 100px;
        box-sizing: border-box;
    }

    .cart-page .cart-table tbody tr > td:first-child img {
        object-fit: cover;
        border-radius: 14px;
    }

    /* Product name / options */
    .cart-page .cart-table tbody tr > td.cart-product {
        grid-column: 2;
        grid-row: 1;
        width: auto !important;
        min-width: 0;
        padding: 0;
        text-align: left !important;
    }

    .cart-page .cart-product__title {
        display: block;
        min-width: 0;
        margin: 0;
        font-size: 19px;
        line-height: 1.25;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .cart-page .cart-product__stock,
    .cart-page .cart-product__options {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.4;
    }

    /* Quantity + update + remove controls */
    .cart-page .cart-table tbody tr > td.cart-quantity {
        grid-column: 2;
        grid-row: 2;
        width: auto !important;
        min-width: 0;
        padding: 0;
        text-align: left !important;
    }

    .cart-page .cart-quantity-box {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 7px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cart-page .cart-qty-input {
        width: 64px !important;
        min-width: 64px;
        max-width: 64px;
        height: 44px;
        margin: 0;
        box-sizing: border-box;
        text-align: center;
    }

    .cart-page .cart-update,
    .cart-page .cart-remove {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0;
        box-sizing: border-box;
        border-radius: 11px;
    }

    /* Price and line total become a compact row below controls. */
    .cart-page .cart-table tbody tr > td.cart-price {
        grid-column: 1;
        grid-row: 3;
        width: auto !important;
        padding: 0;
        text-align: left !important;
        font-size: 16px;
    }

    .cart-page .cart-table tbody tr > td.cart-total {
        grid-column: 2;
        grid-row: 3;
        width: auto !important;
        padding: 0;
        text-align: right !important;
        font-size: 18px;
        font-weight: 700;
    }

    /* Voucher rows should not inherit the product-card grid. */
    .cart-page .cart-table tbody tr:has(.input-group) {
        display: table-row;
    }

    /* Summary already looks good; keep it inside the viewport. */
    .cart-page .cart-summary,
    .cart-page .cart-summary__card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cart-page .cart-summary__row {
        min-width: 0;
    }

    .cart-page .cart-summary__row span,
    .cart-page .cart-summary__row strong {
        min-width: 0;
    }

    /* Actions stack cleanly on a phone. */
    .cart-page .cart-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cart-page .cart-actions a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}