/* Mobile Cart Styles */
@media screen and (max-width: 768px) {

    /* 1. Layout & Container */
    .cart-layout {
        grid-template-columns: 1fr;
        /* Stack layout */
        gap: 2rem;
        padding: 1rem 0;
    }

    h1 {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    /* 2. Transform Table to Cards */
    .cart-table thead {
        display: none;
        /* Hide header row */
    }

    .cart-table,
    .cart-table tbody {
        display: block;
        width: 100%;
    }

    .cart-table tr {
        display: grid;
        grid-template-columns: 80px 1fr auto;
        grid-template-areas:
            "img info remove"
            "img price remove"
            "qty qty total";
        gap: 10px 15px;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
        position: relative;
    }

    /* Strip cell wrapper behavior to let children participate in grid */
    .cart-table td {
        display: contents;
        border: none;
        padding: 0;
    }

    /* Product Image & Info */
    /* We need to target the contents of td:first-child */

    .cart-product {
        display: contents;
        /* Unwrap the wrapper */
    }

    .cart-product-thumb {
        grid-area: img;
        width: 80px;
        height: 80px;
        border-radius: 8px;
    }

    .cart-product-info {
        grid-area: info;
        padding-top: 5px;
    }

    .cart-product-info h4 {
        margin: 0;
        font-size: 1rem;
        line-height: 1.3;
    }

    .cart-variant-badge {
        margin-top: 4px;
        font-size: 0.75rem;
    }

    /* Price (Unit Price) */
    .cart-table td:nth-child(2) {
        grid-area: price;
        font-size: 0.9rem;
        color: #888;
        font-weight: normal !important;
        align-self: start;
    }

    /* Qty Control */
    .cart-table td:nth-child(3) {
        /* The content is inside a div .qty-control-modern */
    }

    .qty-control-modern {
        grid-area: qty;
        width: 100px;
        /* Compact width */
        height: 32px;
        margin-top: 5px;
    }

    .qty-btn {
        width: 30px;
        height: 30px;
    }

    .qty-input-modern {
        font-size: 1rem;
    }

    /* Total Price (Row Total) */
    .cart-table td:nth-child(4) {
        grid-area: total;
        justify-self: end;
        align-self: end;
        color: #ffb300 !important;
        /* Yellow/Orange highlight */
        font-size: 1.1rem !important;
    }

    /* Remove Button */
    .remove-link {
        grid-area: remove;
        width: 32px;
        height: 32px;
        background: transparent;
        color: #ff5252;
        box-shadow: none;
        align-self: end;
        /* Bottom right of top section? Or span? */
        /* Let's position explicitly if grid area is tricky */
    }

    /* Order Summary Mobile */
    .summary-card {
        border: none;
        background: #fafafa;
        padding: 1.5rem;
    }

    .summary-row {
        font-size: 0.95rem;
    }

    /* Make buttons big and touch-friendly */
    .btn-primary {
        padding: 1rem;
        font-size: 1.1rem;
    }

    /* Fix empty cart overlapping */
    .empty-cart-state {
        padding: 3rem 1rem !important;
    }
}