/*
 * CSS responsive của các trang danh sách sản phẩm, nạp ngay sau product-category.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. Từ mốc này lưới còn 4 cột. */
@media (max-width: 1199.98px) {
    /* Dải logo chỉ còn nút kính lúp dẫn tới trang mọi sản phẩm: ô tìm ở đầu trang đó hiện lại. */
    body:has(.site-header__product-search) .product-search {
        display: flex;
    }
}

/* Dưới 992px: máy tính bảng. Từ mốc này lưới còn 3 cột. */
@media (max-width: 991.98px) {
}

/* Dưới 768px: điện thoại xoay ngang. Từ mốc này lưới còn 2 cột. */
@media (max-width: 767.98px) {
    .product-list__content {
        margin-top: 36px;
        padding-top: 24px;
    }
}

/* Dưới 576px: điện thoại. */
@media (max-width: 575.98px) {
    /* Số kết quả và ô sắp xếp mỗi thứ một hàng. */
    .product-toolbar__sort,
    .product-toolbar__sort .form-select {
        width: 100%;
    }
}