/*
 * CSS responsive của trang sản phẩm, nạp ngay sau product.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 cột bên xuống dưới nội dung của trang. */
@media (max-width: 991.98px) {
    /* Màn hình cảm ứng không có rê chuột: hai nút chuyển ảnh luôn hiện. */
    .product-gallery .carousel-control-prev,
    .product-gallery .carousel-control-next {
        opacity: 1;
    }
}

/* Dưới 768px: điện thoại xoay ngang. Từ mốc này ảnh đứng trên, thông tin sản phẩm đứng dưới. */
@media (max-width: 767.98px) {
    .product-description,
    .related-products {
        margin-top: 36px;
    }
}

/* Dưới 576px: điện thoại. */
@media (max-width: 575.98px) {
    .product-price--large {
        font-size: 1.5rem;
    }

    /* Ô số lượng và nút thêm vào giỏ vẫn nằm chung một hàng. */
    .product-buy__row .quantity {
        flex: 0 0 auto;
    }

    .product-buy__row .btn-buy {
        flex-basis: 150px;
        padding-inline: 8px;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .product-description__title span {
        padding: 10px 16px;
    }
}