/**
 * Layout catalog (sidebar + content), toolbar, filter drawer/sidebar — Phase
 * 10B mục A/B/C: RESTRUCTURE thật thành 2 cột (sidebar filter cố định trái +
 * nội dung phải), không còn dropdown 1 hàng như Phase 2/10 cũ. Vẫn dùng
 * <details> gốc HTML cho phần mở/đóng ở MOBILE — KHÔNG JS framework, chỉ 1
 * script nhỏ đồng bộ trạng thái ban đầu theo breakpoint (xem filter-sidebar.js).
 */

/**
 * Breadcrumb catalog — `.alo-container` được thêm vào chính <nav> qua filter
 * `woocommerce_breadcrumb_defaults` (xem inc/woocommerce.php).
 *
 * Selector phải là `nav.woocommerce-breadcrumb.alo-catalog-breadcrumb`
 * (0,2,1): WC core có `.woocommerce .woocommerce-breadcrumb{margin:0 0 1em}`
 * (0,2,0) — ĐÈ mất `margin:0 auto` của `.alo-container` nên container có
 * đúng max-width 1220px nhưng KHÔNG tự căn giữa (đo thật: left 0 thay vì
 * 102.5). Tăng specificity bằng type selector là đủ thắng, không cần
 * `!important`.
 *
 * Cũng phải trung hoà clearfix `::before/::after{content:" ";display:table}`
 * của WC core — cùng họ bug pseudo-element đã gặp ở product grid.
 */
/* KHÔNG thêm padding ngang ở đây: `.alo-container` tạo lề bằng
   `width: min(calc(100% - 32px), …)` chứ KHÔNG dùng padding (xem base.css).
   Thêm `padding-left:16px` (như bản fix đầu) làm CHỮ breadcrumb thụt vào
   16px so với eyebrow/H1/chips, dù border-box vẫn trùng 102.5 — đo bằng
   border box sẽ KHÔNG thấy lệch này, phải đo vị trí text node thật. */
nav.woocommerce-breadcrumb.alo-catalog-breadcrumb {
	margin: 0 auto 4px;
	padding: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--alo-color-text-muted);
}
nav.woocommerce-breadcrumb.alo-catalog-breadcrumb::before,
nav.woocommerce-breadcrumb.alo-catalog-breadcrumb::after {
	content: none;
	display: none;
}
.alo-catalog-breadcrumb a { color: var(--alo-color-text-muted); }
.alo-catalog-breadcrumb a:hover { color: var(--alo-color-primary); }

/* ============ Layout 2 cột (mục A) ============ */
.alo-catalog-layout {
	display: block;
	margin-top: 8px;
}
@media (min-width: 1024px) {
	.alo-catalog-layout {
		display: grid;
		/* 268px (trước 252px): với grid 2 cột trong sidebar, 252px chỉ chừa
		   56px cho chữ — đủ cho tên 1 từ nhưng "i-on Life"/"Vĩnh Hảo" (có
		   dấu cách) bị NGẮT 2 DÒNG, làm ô cao thấp không đều (đo thật:
		   textLineBoxes = 2 ở đúng 2 mục đó). 268px → ~69px cho chữ, đủ cho
		   nhãn dài nhất. Chỉ thị cho phép cân lại sidebar khi không đủ chỗ. */
		grid-template-columns: 268px minmax(0, 1fr);
		/* column-gap PHẢI nằm trong CHÍNH rule này. Ở pass trước, khi chèn
		   rule `:not(:has(...))` bên dưới, `gap`/`align-items` bị đẩy nhầm
		   sang rule đó → layout 2 cột mất hẳn khoảng cách, sidebar dính sát
		   lưới sản phẩm (đo thật: cạnh phải sidebar 370.5 = cạnh trái cột
		   sản phẩm 370.5, columnGap tính ra `normal`). */
		gap: 28px;
		align-items: start;
	}

	/* Từ pass filter-architecture: sidebar có thể KHÔNG render group nào
	   (mọi group đều 0/1 giá trị — VD một category rất hẹp). Khi đó `<aside>`
	   rỗng vẫn chiếm 268px, để lại cột trống cạnh lưới sản phẩm. Thu về 1
	   cột khi không có filter drawer nào bên trong. */
	.alo-catalog-layout:not(:has(.alo-filter-drawer)) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.alo-catalog-layout__sidebar {
	margin-bottom: 20px;
}
/* <1024px: sidebar chỉ còn chứa sheet `position: fixed` nên cao 0 — bỏ
   margin để không để lại 20px trống giữa toolbar và lưới sản phẩm. */
@media (max-width: 1023px) {
	.alo-catalog-layout__sidebar { margin-bottom: 0; }
}
@media (min-width: 1024px) {
	.alo-catalog-layout__sidebar {
		position: sticky;
		top: 16px;
		margin-bottom: 0;
	}
}

.alo-catalog-layout__content { min-width: 0; }

/* Step 3 regression fix — grid dùng chung (.alo-product-grid/ul.products,
   product-grid.css) lên 4 cột ngay ở 1024px, nhưng TRONG catalog layout
   cột content chỉ còn ~697px (đã trừ sidebar 252px + gap 28px) → card co
   xuống ~162px, quá hẹp so với mockup (tên sản phẩm tiếng Việt dài phải vỡ
   3 dòng, ảnh nhỏ). Override CHỈ trong context có sidebar: giữ 3 cột tới
   1280px rồi mới lên 4 — không đổi breakpoint chung (Related/Search/
   Homepage không có sidebar vẫn 4 cột từ 1024px như cũ). */
@media (min-width: 1024px) and (max-width: 1279px) {
	.alo-catalog-layout__content .alo-product-grid,
	.alo-catalog-layout__content ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* ============ Toolbar gọn (Pass 2A) ============
   Một hàng duy nhất: số kết quả (nhấn nhẹ) | Bộ lọc | Sắp xếp. Thay cụm
   result-count + <select> full-width cũ vốn chiếm 2-3 hàng dọc ở mobile và
   đẩy sản phẩm đầu tiên xuống rất sâu. */
.alo-catalog-toolbar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 14px;
	min-width: 0;
}

.alo-catalog-toolbar__count {
	margin: 0;
	min-width: 0;
	color: var(--alo-color-text-muted);
	font-size: var(--alo-small);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.alo-catalog-toolbar__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Nút "Bộ lọc" và khối "Sắp xếp" cùng trọng lượng thị giác. */
.alo-catalog-toolbar__btn,
.alo-catalog-toolbar__sort select {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-sm);
	background: var(--alo-color-surface);
	color: var(--alo-color-text);
	font-size: 14px;
	font-weight: 650;
	line-height: 1;
	cursor: pointer;
}
.alo-catalog-toolbar__btn:hover,
.alo-catalog-toolbar__sort select:hover { border-color: var(--alo-color-primary); }
.alo-catalog-toolbar__btn.is-active {
	border-color: var(--alo-color-primary);
	color: var(--alo-color-on-soft);
	background: var(--alo-color-primary-soft);
}
.alo-catalog-toolbar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--alo-color-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
}

.alo-catalog-toolbar__sort { margin: 0; }
.alo-catalog-toolbar__sort form,
.alo-catalog-toolbar__sort .woocommerce-ordering { margin: 0; }

/* Desktop: `<select>` gốc là control sắp xếp duy nhất; nút "Bộ lọc" ẩn vì
   sidebar luôn mở sẵn — desktop không đổi so với trước pass (§19). Nút mở
   sheet sắp xếp mang luôn class `.alo-catalog-toolbar__btn` nên ẩn theo
   cùng rule, không cần selector riêng. */
@media (min-width: 1024px) {
	.alo-catalog-toolbar__sort select { max-width: 230px; }
	.alo-catalog-toolbar__btn { display: none; }
}

/* <1024px: `<select>` gốc ẩn hẳn, nút mở bottom sheet thay chỗ.
   Trước 09/09/2026 chỗ này phủ một nhãn "Sắp xếp" lên select trong suốt để
   chạm vào bung picker native. Cách đó giữ được select gốc, nhưng picker là
   giao diện của hệ điều hành nên không thể nói bằng ngôn ngữ của ALÔ — trong
   khi nút "Bộ lọc" ngay cạnh mở một sheet do ALÔ thiết kế. Hai nút cạnh
   nhau, hai thế giới khác nhau (mục 8 mockup UX).
   Dùng `display:none` chứ không phải opacity/visibility để select ẩn cũng ra
   khỏi cây trợ năng — tránh trình đọc màn hình thấy hai control sắp xếp. */
@media (max-width: 1023px) {
	.alo-catalog-toolbar__sort { display: none; }
}

/* Chip filter đang bật */
.alo-active-filters { margin: 0 0 14px; }
.alo-active-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.alo-active-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid #cde8d8;
	background: var(--alo-color-primary-soft);
	color: var(--alo-color-on-soft);
	font-size: 13px;
	font-weight: 650;
}
.alo-active-filters__chip:hover { border-color: var(--alo-color-primary); }
.alo-active-filters__x { font-size: 15px; line-height: 1; }

/* ============ Filter sidebar/drawer ============ */
.alo-filter-drawer { position: relative; }

/* Panel — desktop: card tĩnh lấp đầy cột sidebar (không dropdown/sheet).
   mục B: white card, border nhẹ, radius, section divider, spacing thoáng. */
.alo-filter-drawer__panel {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 8px;
	padding: 20px;
	background: var(--alo-color-surface);
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-lg);
}

@media (min-width: 1024px) {
	.alo-filter-drawer__panel {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		margin-top: 0;
		width: 100%;
	}
	.alo-filter-group { padding: 16px 0; border-bottom: 1px solid var(--alo-color-border); }
	.alo-filter-group:first-child { padding-top: 0; }
	.alo-filter-group:last-child { border-bottom: none; padding-bottom: 0; }
	.alo-filter-group__options { max-width: none; }
}

.alo-filter-group__title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--alo-color-text-muted);
	text-transform: uppercase;
	letter-spacing: .03em;
}

/**
 * ROOT CAUSE "filter căn chỉnh không đều theo hàng và cột" (Owner annotate):
 * `display:flex; flex-wrap:wrap` để mỗi pill tự co theo ĐỘ DÀI CHỮ, nên số
 * item mỗi hàng phụ thuộc hoàn toàn vào tên thương hiệu — ra layout 1 item /
 * 2 item / lẻ dòng, không có trục cột nào.
 *
 * FIX: CSS Grid 2 cột cố định → mọi item cùng chiều rộng, thẳng hàng thẳng
 * cột. Nhóm có nhãn dài (Loại nước: "Nước i-on kiềm") chuyển về 1 cột để
 * chữ không bị bó — chỉ thị cho phép "không bắt buộc tất cả group chung 2
 * cột nếu label dài".
 */
.alo-filter-group__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Nhóm nhãn dài → 1 cột full width, tránh cắt chữ. */
.alo-filter-group--wide .alo-filter-group__options {
	grid-template-columns: minmax(0, 1fr);
}

.alo-filter-option {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 9px;
	border-radius: var(--alo-radius-sm);
	border: 1px solid var(--alo-color-border);
	font-size: 14px;
	line-height: 1.3;
	color: var(--alo-color-text);
	background: var(--alo-color-surface);
}
.alo-filter-option:hover { border-color: var(--alo-color-primary); }

/* Mobile: 44px tối thiểu (mục L chỉ thị Phase 3) — desktop giữ 38px gọn hơn
   vì thao tác bằng chuột, không cần vùng chạm lớn như ngón tay. */
@media (max-width: 767px) {
	.alo-filter-option { min-height: 44px; }
}
/**
 * Ô tick — ROOT CAUSE trông "thô": dấu tick cũ vẽ bằng
 * `linear-gradient(45deg,…)`, thực chất chỉ là một VỆT CHÉO đặc chạy hết ô,
 * không phải hình dấu ✓.
 *
 * Thay bằng SVG data-URI vẽ đúng nét ✓, đặt làm `background-image` của
 * chính ô — tự căn giữa qua `background-position:center`, không phụ thuộc
 * padding/vị trí như cách absolute-position (dễ lệch khi đổi spacing).
 * Không thêm icon font, không JS, không ảnh ngoài.
 */
.alo-filter-option::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	border: 1.5px solid var(--alo-color-border);
	border-radius: 5px;
	background: #fff no-repeat center;
	background-size: 11px 11px;
	transition: background-color .15s ease, border-color .15s ease;
}

.alo-filter-option--checked {
	border-color: var(--alo-color-primary);
	color: var(--alo-color-on-soft);
	background: var(--alo-color-primary-soft);
	font-weight: 600;
}
.alo-filter-option--checked::before {
	border-color: var(--alo-color-primary);
	background-color: var(--alo-color-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
}

/* ============ NHÓM DẠNG HÀNG CÓ DÒNG PHỤ (09/09/2026) ============
   Chỉ dùng cho "Loại vòi": đây là nhóm duy nhất cần chỗ cho một dòng giải
   thích ("Dùng cho máy nóng lạnh" — Owner chốt), mà chip thì không có chỗ.
   Các nhóm còn lại đã gom hết về chip ở chế độ sheet.

   Dùng grid thay vì flex để dấu chọn nằm bên phải và căn giữa theo CẢ HAI
   dòng chữ: với flex thì `::before` luôn là phần tử ĐẦU nên phải mượn
   `order`, mà khi đó hai span nhãn/phụ vẫn bị xếp cùng một hàng ngang. */
.alo-filter-group--rows .alo-filter-option {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 17px;
	grid-template-areas:
		"label mark"
		"sub   mark";
	align-items: center;
	gap: 0 10px;
	min-height: 52px;
	padding: 8px 12px;
}
.alo-filter-group--rows .alo-filter-option__label { grid-area: label; }
.alo-filter-group--rows .alo-filter-option__sub { grid-area: sub; }
.alo-filter-group--rows .alo-filter-option::before {
	grid-area: mark;
	/* Chọn-một → dấu tròn, phân biệt với ô vuông của nhóm chọn-nhiều. */
	border-radius: 999px;
}

.alo-filter-option__sub {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	line-height: 1.35;
	font-weight: 400;
	color: var(--alo-color-text-muted);
}
.alo-filter-option--checked .alo-filter-option__sub { color: inherit; opacity: .85; }

/* Bàn phím: viền focus rõ (link thật nên focus-visible hoạt động sẵn). */
.alo-filter-option:focus-visible {
	outline: 2px solid var(--alo-color-primary);
	outline-offset: 2px;
}

/* Empty state (mục R) */
.alo-empty-state {
	padding: 48px 16px;
	text-align: center;
}
.alo-empty-state__message {
	color: var(--alo-color-text-muted);
	margin-bottom: 16px;
}
.alo-empty-state__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* ============ BOTTOM SHEET (<1024px) — Pass 2A ============
   ROOT CAUSE bug Owner báo: panel cũ `position: fixed` với `z-index: 40`,
   trong khi mobile bottom nav là `z-index: 90` → nav luôn phủ lên panel,
   che mất phần dưới của filter. Nay sheet nằm cùng tầng overlay với cart
   drawer/search (110) và bottom nav bị TẠM ẨN khi sheet mở — sạch hơn
   nhiều so với việc xếp chồng z-index. */

/* Header/footer của sheet chỉ tồn tại ở chế độ sheet. */
.alo-filter-sheet__header,
.alo-filter-sheet__footer,
.alo-filter-sheet__backdrop { display: none; }

@media (max-width: 1023px) {
	.alo-filter-drawer {
		position: fixed;
		inset: 0;
		z-index: var(--alo-z-overlay);
		visibility: hidden;
		pointer-events: none;
	}
	.alo-filter-drawer.is-open { visibility: visible; pointer-events: auto; }

	.alo-filter-sheet__backdrop {
		display: block;
		position: absolute;
		inset: 0;
		background: var(--alo-overlay-backdrop);
		opacity: 0;
		transition: opacity .2s ease;
	}
	.alo-filter-drawer.is-open .alo-filter-sheet__backdrop { opacity: 1; }

	/* Sheet: chừa một khoảng trên, bo góc trên, cao theo viewport thật
	   (`dvh` để thanh URL của trình duyệt mobile không cắt mất footer).
	   KHÔNG dùng chiều cao pixel cố định. */
	.alo-filter-drawer__panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		margin: 0;
		padding: 0;
		max-height: 88vh;
		max-height: 88dvh;
		border: 0;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -8px 28px rgba(12, 26, 17, .18);
	}
	/* CỐ Ý không dùng `transform: translateY()` để trượt sheet.
	   Khi thử, panel `position:absolute; bottom:0` kết hợp transform +
	   transition cho kết quả không ổn định trong lần đo thật (panel kẹt
	   ngoài viewport, footer không với tới được — kể cả khi set transform
	   inline). Chỉ thị ưu tiên "stable behavior over unnecessary JS/CSS
	   complexity", nên sheet hiện/ẩn bằng visibility + fade backdrop:
	   ít bộ phận chuyển động hơn, vị trí luôn đúng. */

	/* Header dính, luôn thấy khi thân cuộn. */
	.alo-filter-sheet__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
		flex-shrink: 0;
		padding: 16px 16px 12px;
		border-bottom: 1px solid var(--alo-color-border);
	}
	.alo-filter-sheet__title { margin: 0; font-size: 17px; font-weight: 800; }
	.alo-filter-sheet__count { margin: 2px 0 0; font-size: 12px; color: var(--alo-color-primary); font-weight: 700; }
	/* Hình dạng/hover do `.alo-icon-btn` lo — trước đây sheet lọc là nút
	   TRÒN trong khi drawer giỏ hàng bo 14px và trình xem bảng bo 8px. */
	.alo-filter-sheet__close { margin: -6px -4px 0 0; }

	/* CHỈ thân cuộn; header/footer đứng yên. */
	.alo-filter-sheet__body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 4px 16px 12px;
	}

	.alo-filter-sheet__footer {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-shrink: 0;
		padding: 12px 16px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--alo-color-border);
		background: var(--alo-color-surface);
	}
	.alo-filter-sheet__clear {
		flex-shrink: 0;
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		padding: 0 4px;
		font-size: 14px;
		font-weight: 700;
		color: var(--alo-color-text-muted);
	}
	.alo-filter-sheet__clear:hover { color: var(--alo-color-primary); }
	.alo-filter-sheet__clear.is-disabled { opacity: .45; pointer-events: none; }
	.alo-filter-sheet__apply {
		flex: 1 1 auto;
		justify-content: center;
		min-height: 48px;
	}

	/* Nhóm filter: gọn hơn hẳn, có đường phân cách thay vì card rời. */
	.alo-filter-group { padding: 14px 0; border-bottom: 1px solid var(--alo-color-border); }
	.alo-filter-group:last-child { border-bottom: 0; }
	.alo-filter-group__title { margin-bottom: 10px; }
	.alo-filter-group__options { gap: 8px; }

	/* BOTTOM NAV không được che sheet — tạm ẩn khi sheet mở, hiện lại khi
	   đóng. Class do overlay manager dùng chung gắn lên <body>, nên mọi
	   đường đóng (X, backdrop, ESC, mở overlay khác) đều khôi phục đúng. */
	body.alo-overlay-alo-filters-open .alo-mobile-bottom-nav,
	body.alo-overlay-alo-sort-open .alo-mobile-bottom-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.alo-filter-sheet__backdrop { transition: none; }
}

/* Dung tích: chip gọn 1 hàng ngang thay vì lưới 2 cột có ô tick. */
@media (max-width: 1023px) {
	.alo-filter-group--chips .alo-filter-group__options {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.alo-filter-group--chips .alo-filter-option {
		min-height: 40px;
		padding: 0 14px;
		border-radius: 999px;
	}
	.alo-filter-group--chips .alo-filter-option::before { display: none; }
}

/* ============ SHEET "SẮP XẾP" (<1024px) — 09/09/2026 ============
   Cố ý DÙNG LẠI bộ class `.alo-filter-sheet__*` cho backdrop/header/body:
   những rule đó đã khai trong khối `@media (max-width: 1023px)` ở trên bằng
   selector class trần nên áp thẳng sang sheet này. Nhờ vậy hai sheet không
   thể trôi lệch nhau về hình dáng — sửa header một chỗ là cả hai cùng đổi.
   Ở đây chỉ khai phần RIÊNG: khung sheet, danh sách lựa chọn.

   ≥1024px sheet biến mất hoàn toàn khỏi layout (`display:none`) — desktop
   dùng `<select>` gốc của WooCommerce, không có gì thay đổi. */
.alo-sort-sheet { display: none; }

@media (max-width: 1023px) {
	.alo-sort-sheet {
		display: block;
		position: fixed;
		inset: 0;
		z-index: var(--alo-z-overlay);
		visibility: hidden;
		pointer-events: none;
	}
	.alo-sort-sheet.is-open { visibility: visible; pointer-events: auto; }

	/* Backdrop dùng chung class với sheet lọc nên đã có sẵn hình dáng +
	   transition từ khối trên; chỉ rule "mờ dần khi mở" là phải khai riêng vì
	   rule của sheet lọc đòi tổ tiên `.alo-filter-drawer`. */
	.alo-sort-sheet.is-open .alo-filter-sheet__backdrop { opacity: 1; }

	/* Cùng lý do với sheet lọc: KHÔNG dùng transform để trượt sheet — hiện/ẩn
	   bằng visibility + fade backdrop, ít bộ phận chuyển động, vị trí luôn
	   đúng. */
	.alo-sort-sheet__panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		max-height: 88vh;
		max-height: 88dvh;
		background: var(--alo-color-surface);
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -8px 28px rgba(12, 26, 17, .18);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.alo-sort-sheet__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}
}

/* Một lựa chọn sắp xếp. Là `<a href>` thật nên focus/hover/back-forward hoạt
   động sẵn, không cần JS cho việc sắp xếp. */
.alo-sort-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 0 4px;
	border-bottom: 1px solid var(--alo-color-border);
	color: var(--alo-color-text);
	font-size: 15px;
	line-height: 1.35;
}
.alo-sort-sheet__list li:last-child .alo-sort-option { border-bottom: 0; }
.alo-sort-option--current { font-weight: 700; }

/* Dấu chọn: hình tròn rỗng → tròn đặc có viền trắng bên trong khi đang chọn.
   Cùng ngôn ngữ với dấu chọn-một của nhóm "Loại vòi" trong sheet lọc. */
.alo-sort-option__mark {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--alo-color-border);
	border-radius: 999px;
	background: #fff;
}
.alo-sort-option--current .alo-sort-option__mark {
	border-color: var(--alo-color-primary);
	background: var(--alo-color-primary);
	box-shadow: inset 0 0 0 3.5px #fff;
}
.alo-sort-option:focus-visible {
	outline: 2px solid var(--alo-color-primary);
	outline-offset: -2px;
}