/* noam-links header cart drawer (assets/cart-drawer.js, inc/mod-cart-drawer.php). A modal <dialog> on the inline-end
   side (left in RTL). It lives in the top layer, so opening it moves nothing on the page; the page's scroll is left
   alone (no scroll lock → no scrollbar jump), and the drawer's own list keeps its scroll (overscroll-behavior).
   Motion (design-system/MASTER.md, Emil): slides in over 260ms on --ease-drawer, out over 180ms (exits faster),
   from @starting-style; transform + opacity only; under reduced motion only a short fade. Layout rules sit on
   dialog.nlc-drw (not :modal) so they hold while the exit transition plays after close(). */
dialog.nlc-drw {
	--nlc-drw-off: 100%;
	--nlc-drw-ease: var(--ease-drawer, cubic-bezier(0.32, 0.72, 0, 1));
	--nlc-drw-ease-out: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
	position: fixed;
	inset-block: 0;
	inset-inline-start: auto;
	inset-inline-end: 0;
	width: min(420px, calc(100vw - 32px));
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--white, #fff);
	color: var(--ink, #1c1a17);
	box-shadow: 0 0 2px rgba(28, 26, 23, .08), 0 20px 60px rgba(28, 26, 23, .22);
	overflow: hidden;
	transform: translateX(var(--nlc-drw-off));
	transition: transform 180ms var(--nlc-drw-ease), overlay 180ms allow-discrete, display 180ms allow-discrete;
}
[dir="rtl"] dialog.nlc-drw { --nlc-drw-off: -100%; }
dialog.nlc-drw[open] {
	transform: translateX(0);
	transition-duration: 260ms;
}
dialog.nlc-drw::backdrop {
	background: rgba(28, 26, 23, .5);
	opacity: 0;
	transition: opacity 180ms var(--nlc-drw-ease-out), overlay 180ms allow-discrete, display 180ms allow-discrete;
}
dialog.nlc-drw[open]::backdrop { opacity: 1; transition-duration: 260ms; }
@starting-style {
	dialog.nlc-drw[open] { transform: translateX(var(--nlc-drw-off)); }
	dialog.nlc-drw[open]::backdrop { opacity: 0; }
}

.nlc-drw__in { display: flex; flex-direction: column; height: 100%; font-size: 1rem; line-height: 1.55; }
.nlc-drw__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 12px 12px; border-bottom: 1px solid var(--line, #e7dfcf); }
.nlc-drw__t { margin: 0; font-size: 1.375rem; font-weight: 800; line-height: 1.2; }
.nlc-drw__t:focus { outline: none; }
.nlc-drw__t:focus-visible { outline: 3px solid var(--gold, #f2b134); outline-offset: 2px; border-radius: 4px; }
.nlc-drw__cnt { font-size: 1rem; font-weight: 500; color: var(--muted, #6a6158); font-variant-numeric: tabular-nums; }
.nlc-drw__ic { display: block; flex: none; }
.nlc-drw__x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--cream, #faf7f1); color: var(--ink, #1c1a17); cursor: pointer; }
.nlc-drw__msg { margin: 0; padding: 8px 16px; font-size: .9375rem; color: var(--green, #17713f); font-weight: 700; background: #e3f4e9; }
.nlc-drw__msg--plain { color: var(--ink-2, #443f38); font-weight: 500; background: none; }
.nlc-drw__msg--err { color: var(--red-d, #951420); background: var(--red-50, #fdf1f2); }
.nlc-drw__msg:empty { display: none; }
.nlc-drw__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 12px; }
.nlc-drw__empty { display: grid; justify-items: center; align-content: start; gap: 4px; padding-top: 24px; text-align: center; }
.nlc-drw__empty picture { display: block; width: 160px; }
.nlc-drw__img { display: block; width: 160px; height: 160px; object-fit: contain; border-radius: var(--r, 14px); }
.nlc-drw__empty p { margin: 0; color: var(--ink-2, #443f38); }
.nlc-drw__empty-t { font-size: 1.125rem; font-weight: 800; color: var(--ink, #1c1a17) !important; }
.nlc-drw__empty .nlc-btn { margin-top: 12px; }
.nlc-drw__lines { list-style: none; margin: 0; padding: 0; }
.nlc-drw__line { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid var(--line, #e7dfcf); }
.nlc-drw__main { display: grid; gap: 2px; min-width: 0; }
.nlc-drw__name { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink, #1c1a17); text-decoration: none; overflow-wrap: anywhere; }
.nlc-drw__sub { font-size: .875rem; color: var(--muted, #6a6158); overflow-wrap: anywhere; }
.nlc-drw__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; text-align: right; unicode-bidi: isolate; }
.nlc-drw__price { padding-top: 11px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nlc-drw__rm { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 8px; margin-inline-start: -8px; border: 0; border-radius: var(--r-sm, 9px); background: none; color: var(--muted, #6a6158); font: inherit; font-size: .875rem; cursor: pointer; }
.nlc-drw__rm .nlc-drw__ic { width: 18px; height: 18px; }
.nlc-drw__parts { display: grid; gap: 2px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm, 9px); background: var(--cream, #faf7f1); font-size: .9375rem; }
.nlc-drw__parts div { display: flex; justify-content: space-between; gap: 12px; }
.nlc-drw__parts dt { color: var(--ink-2, #443f38); }
.nlc-drw__parts dd { margin: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nlc-drw__foot { display: grid; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line, #e7dfcf); background: var(--cream, #faf7f1); }
.nlc-drw__foot .nlc-btn { min-height: 48px; }
.nlc-drw__foot .nlc-linkbtn { justify-self: center; min-height: 44px; padding: 0 8px; font-size: .9375rem; }
.nlc-drw__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; }
.nlc-drw__total strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.nlc-drw :is(a, button):focus-visible { outline: 3px solid var(--gold, #f2b134); outline-offset: 2px; }

/* Press feedback on everything pressable (MASTER: scale .97, 160ms ease-out); colour changes stay 150ms. */
.nlc-drw :is(.nlc-btn, .nlc-drw__x, .nlc-drw__rm, .nlc-linkbtn) {
	transition: transform 160ms var(--nlc-drw-ease-out), background-color 150ms, border-color 150ms, color 150ms;
}
.nlc-drw :is(.nlc-btn, .nlc-drw__x, .nlc-drw__rm, .nlc-linkbtn):active:not([disabled]) { transform: scale(0.97); }

/* Hover only where there is a real pointer. */
@media (hover: hover) and (pointer: fine) {
	.nlc-drw__x:hover { background: var(--cream-2, #f4efe3); }
	a.nlc-drw__name:hover { color: var(--red, #b81823); text-decoration: underline; }
	.nlc-drw__rm:hover { color: var(--red, #b81823); background: var(--red-50, #fdf1f2); }
}

/* Reduced motion: no slide — only a short fade in and out. */
@media (prefers-reduced-motion: reduce) {
	dialog.nlc-drw, dialog.nlc-drw[open] {
		transform: none;
		transition: opacity 150ms linear, overlay 150ms allow-discrete, display 150ms allow-discrete;
	}
	dialog.nlc-drw { opacity: 0; }
	dialog.nlc-drw[open] { opacity: 1; }
	dialog.nlc-drw::backdrop, dialog.nlc-drw[open]::backdrop { transition-duration: 150ms; }
	@starting-style {
		dialog.nlc-drw[open] { transform: none; opacity: 0; }
	}
	.nlc-drw :is(.nlc-btn, .nlc-drw__x, .nlc-drw__rm, .nlc-linkbtn):active:not([disabled]) { transform: none; }
}