/*
 * CSS responsive của trang giỏ hàng, nạp ngay sau cart.css.
 *
 * Các mốc màn hình dưới đây trùng với lưới của Bootstrap 5: cần chỉnh ở cỡ màn
 * hình nào thì viết vào mốc đó. Mốc xếp từ rộng tới hẹp, nên luật ở mốc dưới đè
 * luật ở mốc trên.
 */

/* Dưới 1400px: laptop, màn hình máy bàn nhỏ. */
@media (max-width: 1399.98px) {
}

/* Dưới 1200px: laptop nhỏ, máy tính bảng xoay ngang. */
@media (max-width: 1199.98px) {
}

/* Dưới 992px: máy tính bảng. Từ mốc này khối tổng tiền xuống dưới danh sách sản phẩm. */
@media (max-width: 991.98px) {
}

/*
 * Dưới 768px: điện thoại xoay ngang. Bảng không còn đủ chỗ cho sáu cột, nên mỗi
 * sản phẩm thành một khối: ảnh bên trái, tên và nút bỏ ở hàng đầu, rồi giá, số
 * lượng và tạm tính mỗi thứ một hàng kèm nhãn lấy từ thuộc tính data-label.
 */
@media (max-width: 767.98px) {
    .cart-table,
    .cart-table tbody {
        display: block;
    }

    .cart-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .cart-line {
        display: grid;
        grid-template-columns: 72px 1fr 40px;
        gap: 6px 12px;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px solid var(--site-line);
    }

    .cart-table td {
        padding: 0;
        border: 0;
    }

    .cart-line__image {
        grid-row: 1 / span 4;
        align-self: start;
        width: auto;
    }

    .cart-line__name {
        grid-column: 2;
    }

    .cart-line__remove {
        grid-column: 3;
        grid-row: 1;
    }

    .cart-line__price,
    .cart-line__quantity,
    .cart-line__total {
        display: flex;
        grid-column: 2 / span 2;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
    }

    .cart-line__price::before,
    .cart-line__quantity::before,
    .cart-line__total::before {
        content: attr(data-label);
        color: var(--site-muted);
        font-size: 0.875rem;
        font-weight: 500;
    }
}

/* Dưới 576px: điện thoại. */
@media (max-width: 575.98px) {
    .cart-totals {
        padding: 20px 16px;
    }
}