/**
 * Cart Drawer / Mini Cart — mục I/M chỉ thị Phase 6. Desktop: panel bên
 * phải, rộng vừa phải. Mobile: gần full width (mục AC).
 */
.alo-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--alo-z-drawer);
	visibility: hidden;
	pointer-events: none;
	/* Mục AC Phase 6: panel dịch translateX(100%) khi đóng nằm NGOÀI viewport
	   bên phải — không overflow:hidden ở đây thì phần đó vẫn cộng vào
	   document.scrollWidth dù vô hình (visibility:hidden không loại bỏ box
	   khỏi layout), gây thanh cuộn ngang giả trên toàn trang. */
	overflow: hidden;
}
.alo-cart-drawer.is-open { visibility: visible; pointer-events: auto; }

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

.alo-cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(430px, 100vw);
	background: var(--alo-color-surface);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .25s ease;
}
.alo-cart-drawer.is-open .alo-cart-drawer__panel { transform: translateX(0); }

.alo-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-bottom: 1px solid var(--alo-color-border);
}
.alo-cart-drawer__header h2 { margin: 0; font-size: 18px; }
/**
 * `padding-bottom` PHẢI là 0.
 *
 * Vùng này là scrollport, còn `.alo-mini-cart__summary` dính đáy bằng
 * `position: sticky; bottom: 0` — sticky neo vào mép dưới của scrollport,
 * nên phần padding-bottom nằm NGOÀI footer: dải đó trong suốt và nội dung
 * đang cuộn lộ ra bên dưới nút "Xem giỏ hàng".
 *
 * Đo thật (390px, 11 sản phẩm): khe hở đúng 10px = padding-bottom cũ, và ở
 * các vị trí cuộn 0–503 có 4–8 node của item (ảnh, nội dung, ô số lượng)
 * hiện trong khe đó. Mép ngang đã được xử lý sẵn bằng `margin: 0 -18px` của
 * summary; đây là vế còn thiếu theo trục dọc.
 *
 * Không cần bù khoảng thở: summary tự có `padding-bottom: 16px + safe-area`,
 * empty state có padding riêng.
 */
.alo-cart-drawer__body { flex: 1; overflow-y: auto; padding: 10px 18px 0; }

/* Empty state (mục N). */
.alo-cart-drawer__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 48px 16px;
	color: var(--alo-color-text-muted);
}
.alo-cart-drawer__empty-icon { width: 40px; height: 40px; color: var(--alo-color-border); }
.alo-cart-drawer__empty .woocommerce-mini-cart__empty-message { margin: 0; font-weight: 600; color: var(--alo-color-text); }

/* =====================================================================
   DÒNG SẢN PHẨM — Revision 3, bám mockup
   `mockups/alo-cart-mini-cart-2027-final-mockup.html`.

   Bố cục `[ảnh 76px] | [nội dung]`, nội dung xếp dọc: thương hiệu → tên →
   giá → tuỳ chọn vỏ → số lượng. Chiều cao dòng tự do theo số điều khiển —
   sản phẩm thường KHÔNG chừa chỗ trống cho ô chọn vỏ.

   Điều khiển (select vỏ, gợi ý cọc, stepper 3 ô) dùng CHUNG component ở
   `components/cart-controls.css`; ở đây chỉ chỉnh kích thước cho hợp mật độ
   drawer.
   ===================================================================== */
.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }

.alo-cart-drawer .woocommerce-mini-cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	align-items: start;
	gap: 13px;
	padding: 15px 0;
	border-bottom: 1px solid var(--alo-color-border);
}
.alo-cart-drawer .woocommerce-mini-cart-item:last-child { border-bottom: 0; }

/* Khung ảnh vuông giống Cart Page: `contain` trong khung có viền — ảnh
   sản phẩm nước là chai/bình dọc, `cover` sẽ cắt mất đầu/đáy. */
.alo-mini-cart__thumb {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	padding: 6px;
	border: 1px solid var(--alo-color-border);
	border-radius: 14px;
	background: var(--alo-color-surface);
	overflow: hidden;
}
.alo-mini-cart__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.alo-mini-cart__body { min-width: 0; }

.alo-mini-cart__brand {
	margin: 0 0 3px;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--alo-color-text-muted);
}

.alo-mini-cart__name {
	display: block;
	/* chừa chỗ cho nút xoá ở góc trên bên phải */
	margin-right: 40px;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.25;
	color: var(--alo-color-text);
	overflow-wrap: anywhere;
}
.alo-mini-cart__name:hover { color: var(--alo-color-primary); }

.alo-mini-cart__price {
	display: block;
	margin-top: 5px;
	font-size: 17px;
	font-weight: 900;
	color: var(--alo-color-price);
}

/* Điều khiển gọn hơn Cart Page: cùng ngôn ngữ thiết kế, khác mật độ. */
.alo-cart-drawer .alo-cart-controls { margin-top: 8px; gap: 8px; }
.alo-cart-drawer .alo-cart-option { gap: 4px; max-width: none; }
.alo-cart-drawer .alo-cart-option__label { font-size: 12px; }
.alo-cart-drawer .alo-cart-hint { max-width: none; }
.alo-cart-drawer .alo-cart-qty { grid-template-columns: 38px 44px 38px; gap: 6px; }
.alo-cart-drawer .alo-cart-qty__btn,
.alo-cart-drawer .alo-cart-qty__num { height: 40px; border-radius: var(--alo-radius-md); }
.alo-cart-drawer .alo-cart-qty__btn { font-size: 17px; }
.alo-cart-drawer .alo-cart-qty__num { font-size: 15px; }

.alo-cart-drawer .woocommerce-mini-cart-item .remove {
	position: absolute;
	top: 14px;
	/* Rule cũ đặt `left: 0` — phải reset, nếu không nút xoá dính góc TRÁI
	   và đè lên ảnh sản phẩm (thấy rõ trên screenshot 390px). */
	left: auto;
	right: 0;
	/* Chỉ lặp lại các thuộc tính bị CORE đè; phần còn lại do
	   `.alo-icon-btn--sm/--danger` quyết định (UI Consistency 2027). */
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-md);
	background: var(--alo-color-surface);
	color: var(--alo-color-text-muted);
	line-height: 1;
	text-decoration: none;
}
.alo-cart-drawer .woocommerce-mini-cart-item .remove:hover,
.alo-cart-drawer .woocommerce-mini-cart-item .remove:focus-visible {
	border-color: var(--alo-color-danger-border);
	background: var(--alo-color-danger-soft);
	color: var(--alo-color-danger);
}
/* Icon giữ nhỏ, vùng chạm mở rộng lên 44px qua ::before vô hình. */
.alo-cart-drawer .woocommerce-mini-cart-item .remove::before {
	content: "";
	position: absolute;
	inset: -5px;
}

.woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	padding: 16px 0;
	margin: 8px 0 0;
	border-top: 1px solid var(--alo-color-border);
	font-size: 16px;
}
.woocommerce-mini-cart__total strong { font-weight: 700; }
.woocommerce-mini-cart__total .woocommerce-Price-amount { font-weight: 800; color: var(--alo-color-price); }

/* Phase 9 — dòng phụ "Tổng (gồm cọc vỏ)" chỉ hiện khi có fee cọc vỏ (xem
   BottleExchange::render_mini_cart_total_with_fees()). Khi hiện, hạ dòng
   "Tạm tính" gốc xuống phụ (nhỏ hơn, không màu nhấn) vì dòng NÀY mới là số
   cuối cùng đúng — khớp Tổng ở Cart Page (mục U). */
.woocommerce-mini-cart__total:has(+ .woocommerce-mini-cart__total-with-fees) {
	padding-bottom: 4px;
	font-size: 13px;
	color: var(--alo-color-text-muted);
}
.woocommerce-mini-cart__total:has(+ .woocommerce-mini-cart__total-with-fees) .woocommerce-Price-amount {
	font-weight: 400;
	color: var(--alo-color-text-muted);
}
.woocommerce-mini-cart__total-with-fees {
	display: flex;
	justify-content: space-between;
	padding: 0 0 12px;
	font-size: 16px;
}
.woocommerce-mini-cart__total-with-fees strong { font-weight: 700; }
.woocommerce-mini-cart__total-with-fees .woocommerce-Price-amount { font-weight: 800; color: var(--alo-color-price); }

.woocommerce-mini-cart__buttons.buttons {
	display: flex;
	gap: 10px;
	margin: 0;
}
.woocommerce-mini-cart__buttons.buttons .button {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 14px;
	border-radius: var(--alo-radius-sm);
	border: 2px solid var(--alo-color-primary);
	font-weight: 700;
	font-size: 14px;
	text-align: center;
}
.woocommerce-mini-cart__buttons.buttons .button.checkout {
	background: var(--alo-color-primary);
	color: #fff;
}
.woocommerce-mini-cart__buttons.buttons .button.checkout:hover { background: var(--alo-color-primary-2); }
.woocommerce-mini-cart__buttons.buttons .button:not(.checkout) {
	background: transparent;
	color: var(--alo-color-primary);
}
.woocommerce-mini-cart__buttons.buttons .button:not(.checkout):hover { background: var(--alo-color-primary-soft); }


/* =====================================================================
   MINI CART — Revision 1.
   Component TOÀN CỤC: cùng một markup/CSS/JS ở mọi trang dùng header chung
   (Homepage, Shop, Category, Brand, PDP, Blog, Page, Author…). Không có
   bản riêng theo trang.

   Chống rò rỉ CSS từ trang: các trang như Blog/Page System/PDP đặt style
   cho `p`, `ul`, `select`, `a` trong vùng nội dung của chúng. Drawer nằm
   NGOÀI những vùng đó trong DOM, nhưng vài rule dùng selector rộng vẫn có
   thể chạm tới. Vì vậy component tự đặt lại các thuộc tính dễ bị ảnh hưởng
   ngay tại gốc `.alo-cart-drawer` — bằng specificity của chính component,
   KHÔNG rải `!important`.
   ===================================================================== */

.alo-cart-drawer,
.alo-cart-drawer * { box-sizing: border-box; }
.alo-cart-drawer {
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	color: var(--alo-color-text);
	text-align: left;
}
.alo-cart-drawer p,
.alo-cart-drawer ul,
.alo-cart-drawer li { margin: 0; padding: 0; }
.alo-cart-drawer ul { list-style: none; }
.alo-cart-drawer a { text-decoration: none; }

/* Panel: header cố định · danh sách cuộn · tổng kết cố định. Giữ CTA luôn
   với tới được kể cả khi giỏ nhiều dòng hoặc màn hình thấp. */
.alo-cart-drawer__panel { display: flex; flex-direction: column; }
.alo-cart-drawer__header { flex: 0 0 auto; gap: 12px; min-height: 78px; padding: 14px 18px; }
.alo-cart-drawer__title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
	min-width: 0;
	margin: 0;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -.02em;
	line-height: 1.2;
}
.alo-cart-drawer__count {
	font-size: 14px;
	font-weight: 500;
	color: var(--alo-color-text-muted);
}
.alo-cart-drawer__count:empty { display: none; }
/* Hình dạng/hover do `.alo-icon-btn` (components/buttons.css) lo — ở đây chỉ
   còn phần riêng của drawer. */
.alo-cart-drawer__close { margin-right: -2px; }
.alo-cart-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.alo-cart-drawer .widget_shopping_cart_content { display: flex; flex-direction: column; min-height: 100%; }
.alo-cart-drawer .woocommerce-mini-cart { flex: 1 1 auto; }

/* Vùng tổng kết dính đáy drawer.
   Revision 2 — kéo tràn ra sát 2 mép panel bằng margin âm bù đúng padding
   của `.alo-cart-drawer__body`; nếu không, dòng sản phẩm cuộn qua sẽ lộ ra
   ở hai bên dải tổng kết. */
.alo-mini-cart__summary {
	position: sticky;
	bottom: 0;
	margin: auto -18px 0;
	padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
	background: var(--alo-color-surface);
	border-top: 1px solid var(--alo-color-border);
}
.alo-mini-cart__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	font-size: 14px;
	color: var(--alo-color-text-muted);
}
.alo-mini-cart__row span:last-child { color: var(--alo-color-text); font-weight: 600; }
/* Một đường phân cách nhẹ trước dòng tổng — không viền quanh từng dòng. */
.alo-mini-cart__row--total {
	align-items: flex-end;
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--alo-color-border);
	color: var(--alo-color-text);
}
.alo-mini-cart__row--total strong:first-child { font-size: 16px; }
/* Owner chốt 08/09/2026 — tiền về màu chữ: xanh chỉ dành cho thứ bấm được. */
.alo-mini-cart__row--total strong:last-child { font-size: 24px; line-height: 1.1; color: var(--alo-color-text); font-weight: 900; }
.alo-mini-cart__note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 12px 0;
	padding: 11px 12px;
	border-radius: var(--alo-radius-md);
	background: var(--alo-color-primary-soft);
	font-size: 12px;
	line-height: 1.5;
	color: var(--alo-color-text);
}
.alo-mini-cart__note-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	border-radius: 999px;
	background: var(--alo-color-surface);
	color: var(--alo-color-primary);
	font-size: 11px;
	font-weight: 900;
}
.alo-mini-cart__actions { display: grid; gap: 8px; }
.alo-mini-cart__actions .alo-btn { width: 100%; justify-content: center; min-height: 48px; }


/* Chống rò rỉ CSS THẬT SỰ đo được: trên PDP/trang WooCommerce, body có class
   `.woocommerce` nên `.woocommerce select` (0,1,1) THẮNG `.alo-cart-option__select`
   (0,1,0) — đo thật: border-radius về 0, nền nút số lượng về #efefef.
   Nâng specificity bằng cách bọc thêm gốc component (0,2,0) — chỉ lặp lại
   các thuộc tính BỊ ĐÈ, phần còn lại vẫn do components/cart-controls.css
   quyết định; không dùng `!important`. */
.alo-cart-drawer .alo-cart-option__select {
	width: 100%;
	/* 40px: mật độ riêng của drawer, thấp hơn ô nhập 48px của form đầy đủ. */
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--alo-color-field-border);
	border-radius: var(--alo-radius-md);
	background: var(--alo-color-surface);
	color: var(--alo-color-text);
	font-size: 13px;
	font-weight: 650;
	line-height: 1.3;
}
.alo-cart-drawer .alo-mini-cart__meta {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--alo-color-text-muted);
	line-height: 1.5;
}

/* Mobile: drawer gần full width, ảnh nhỏ hơn một chút nhưng vẫn nhận diện
   được; stepper giữ nguyên chiều cao để dễ chạm. */
@media (max-width: 420px) {
	.alo-cart-drawer .woocommerce-mini-cart-item { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
	.alo-mini-cart__thumb { width: 68px; height: 68px; }
	.alo-mini-cart__name { font-size: 15px; }
}

/* =====================================================================
   CHỐNG RÒ RỈ CSS TỪ WOOCOMMERCE CORE — Revision 2.

   `woocommerce.css` style `ul.cart_list` theo widget giỏ hàng CŨ, và trên
   những trang có `body.woocommerce` (Shop, PDP, Cart) các rule đó THẮNG
   specificity của component. Đo thật trên PDP 390px:

   - `.woocommerce ul.cart_list li::before/::after {content:" ";display:table}`
     → hai ô grid MA. Grid tự xếp: ::before chiếm cột 1, ảnh bị đẩy sang cột
     2, nội dung rơi xuống hàng 2 trong cột rộng 62px → tên sản phẩm xuống
     dòng từng chữ cái (thấy rõ trên screenshot);
   - `.woocommerce ul.cart_list li img {float:right;width:32px}` (0,2,3)
     thắng `.alo-mini-cart__thumb img` (0,1,1) → ảnh teo còn 32px, trôi phải;
   - `.woocommerce ul.cart_list li a {font-weight:700}` đè cỡ chữ tên;
   - `.woocommerce a.remove {color:var(--wc-red)!important}` → nút xoá đỏ
     chói thay vì mờ nhẹ như thiết kế.

   Vô hiệu hoá ĐÚNG từng rule đó trong phạm vi drawer, bằng specificity của
   component. Riêng màu nút xoá buộc phải dùng `!important` vì core cũng
   dùng `!important` — không có cách nào khác ngoài việc sửa CSS core.
   ===================================================================== */
.alo-cart-drawer .woocommerce-mini-cart .woocommerce-mini-cart-item::before,
.alo-cart-drawer .woocommerce-mini-cart .woocommerce-mini-cart-item:not(.is-updating)::after {
	/* Phải đủ 3 class: rule core `.woocommerce ul.cart_list li::before` là
	   (0,2,3) nên bản 2 class (0,2,1) THUA — đo thật: ô grid ma vẫn còn.
	   `:not(.is-updating)` để KHÔNG giết spinner loading ở cart.css. */
	content: none;
}
.alo-cart-drawer .woocommerce-mini-cart-item .alo-mini-cart__thumb img {
	float: none;
	margin: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.alo-cart-drawer .woocommerce-mini-cart-item .alo-mini-cart__name {
	display: block;
	font-size: 16px;
	font-weight: 900;
}
.alo-cart-drawer .woocommerce-mini-cart-item .remove {
	color: var(--alo-color-text-muted) !important;
	font-size: 17px;
}
.alo-cart-drawer .woocommerce-mini-cart-item .remove:hover,
.alo-cart-drawer .woocommerce-mini-cart-item .remove:focus-visible {
	/* PHASE 2 · 10/09/2026 — hover nút xoá = hành động phá huỷ, dùng `danger`. */
	color: var(--alo-color-danger) !important;
	background: var(--alo-color-danger-soft);
}
@media (max-width: 420px) {
	.alo-cart-drawer .woocommerce-mini-cart-item .alo-mini-cart__name { font-size: 15px; }
}

/**
 * TOAST "Đã thêm vào giỏ hàng" cho QUICK ADD (AJAX).
 *
 * Vì sao cần dù đã có `components/notice-toast.css`: file kia tạo dáng cho
 * notice GỐC của WooCommerce (`.woocommerce-message`), mà notice đó chỉ xuất
 * hiện khi add-to-cart KHÔNG qua AJAX (có reload trang). Quick add trên
 * archive chạy AJAX nên WooCommerce không in notice nào — không có gì để tạo
 * dáng. Đây là phản hồi thay cho hành vi cũ (tự mở Cart Drawer).
 */
.alo-cart-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	/* Dưới overlay/drawer có chủ đích: nếu khách mở giỏ hàng thì drawer phải
	   nằm trên toast, không phải ngược lại. */
	z-index: var(--alo-z-toast);
	transform: translate(-50%, 12px);
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--alo-color-text);
	color: var(--alo-color-surface);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
	box-shadow: 0 8px 24px rgba(24, 34, 28, .18);

	/* UX review 08/09/2026 — toast nay có tên sản phẩm + lối "Xem giỏ" nên
	   phải là một hàng flex, không còn là một dòng chữ căn giữa. */
	display: flex;
	align-items: center;
	gap: 12px;
}

.alo-cart-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
	/* Bật lại tương tác khi hiện: nút "Xem giỏ" bên trong phải bấm được. */
	pointer-events: auto;
}

.alo-cart-toast__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alo-cart-toast__action {
	flex: 0 0 auto;
	min-height: 32px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: var(--alo-radius-pill);
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.alo-cart-toast__action:hover { background: rgba(255, 255, 255, .12); }

/**
 * Bottom nav hiển thị ở MỌI bề rộng < 1024px (mobile-nav.css ẩn nó từ
 * 1024px), không phải < 768px. Chiều cao dùng đúng con số đã đo trong
 * `body { padding-bottom: 64px }` của mobile-nav.css, cộng safe area của
 * iOS và 12px khoảng hở.
 */
@media (max-width: 1023px) {
	.alo-cart-toast {
		bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
	}
}

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