/*
 * LALUZ UI Patch — MODULE SHOP-PERPAGE (CSS)
 * Ô chọn "số sản phẩm / trang" đứng cạnh ô sắp xếp có sẵn.
 *
 * Đo trên /roja-parfums/ (viewport 1385px):
 *   .prod-heading        926 × 43  flex, space-between, flex-wrap: wrap
 *   .prod-heading-right  280 × 29  flex, gap 10px, flex-wrap: nowrap, 2 con
 *   .box-op              280 × 29  (bọc ô sắp xếp)
 *   .btn-flt             display:none ở desktop, hiện ở mobile
 *
 * Cụm bên phải đang rộng 280 trong khoảng trống ~926 nên thêm một ô nữa
 * không chen chỗ tiêu đề. Ở mobile .btn-flt hiện ra nên cho cụm xuống dòng
 * được thay vì tràn ngang.
 *
 * Ô mới dùng lại đúng class .box-op / .prod-op của theme để thừa hưởng
 * typography sẵn có (Be Vietnam Pro 13px, màu ink, nền trong suốt).
 * Ở đây chỉ chỉnh những gì theme không lo: chiều rộng và khoảng cách.
 *
 * Mọi rule đều đi qua .lz-pp / .lz-pp-wrap nên không thể chạm vào ô sắp xếp cũ.
 */

/* Cho cụm bên phải xuống dòng khi hẹp — chỉ áp dụng khi đã có ô của module. */
html body .prod-heading-right:has( .lz-pp ) {
	flex-wrap: wrap !important;
	gap: 10px 18px !important;
	align-items: center !important;
}

html body .prod-heading-right .lz-pp-wrap {
	display: flex !important;
	align-items: center !important;
	width: auto !important;
	flex: 0 0 auto !important;
}

html body .prod-heading-right .lz-pp-wrap::before {
	content: 'Hiển thị' !important;
	margin-right: 8px !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	color: var( --lz-grey, #6E6B63 ) !important;
	white-space: nowrap !important;
}

html body .prod-heading-right select.lz-pp {
	width: auto !important;
	min-width: 104px !important;
	max-width: 150px !important;
	padding: 6px 22px 6px 0 !important;
	cursor: pointer !important;
}

/* Điện thoại: .btn-flt hiện ra, ba phần tử trên một hàng sẽ chật.
   Cho ô mới đứng riêng một hàng, căn trái cho thẳng với tiêu đề. */
@media ( max-width: 767px ) {
	html body .prod-heading-right .lz-pp-wrap {
		order: 3 !important;
		flex: 0 0 100% !important;
		width: 100% !important;
	}
}