/* Mini-koszyk — szuflada z prawej. */

.kd-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
}
.kd-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity var(--kd-motion-fast) var(--kd-ease);
}
.kd-drawer.is-open .kd-drawer__backdrop { opacity: 1; }

.kd-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(400px, 100vw - 40px);
	height: 100%;
	background: var(--kd-color-background);
	box-shadow: var(--kd-shadow-drawer);
	transform: translateX(100%);
	transition: transform var(--kd-motion-fast) var(--kd-ease);
	/* Panel dostaje focus przy otwarciu tylko po to, by dzialal Esc — obwodka bylaby mylaca. */
	outline: none;
}
.kd-drawer.is-open .kd-drawer__panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.kd-drawer__backdrop,
	.kd-drawer__panel { transition: none; }
}

/* Tlo strony nie moze sie przewijac pod otwarta szuflada. */
.kd-drawer-open { overflow: hidden; }

.kd-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kd-space-2);
	padding: var(--kd-space-2) var(--kd-space-3);
	border-bottom: 1px solid var(--kd-color-border);
}
.kd-drawer__title { font-size: var(--kd-h4-size); margin: 0; }
.kd-drawer__close {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--kd-color-text);
	font-size: var(--kd-h2-size);
	line-height: 1;
	padding: 0 var(--kd-space-1);
}
.kd-drawer__close:hover { background: none; color: var(--kd-color-primary); }

.kd-drawer__body {
	flex: 1;
	overflow-y: auto;
	/* bez tego dociagniecie listy do konca przewija strone pod szuflada */
	overscroll-behavior: contain;
	padding: var(--kd-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--kd-space-3);
}

.kd-drawer__notice {
	margin: 0;
	padding: var(--kd-space-2);
	border-radius: var(--kd-radius-sm);
	background: var(--kd-color-surface);
	color: var(--kd-color-error);
	font-size: var(--kd-body-sm-size);
}

.kd-drawer__empty {
	margin: auto 0;
	text-align: center;
	display: grid;
	gap: var(--kd-space-3);
	justify-items: center;
}

.kd-drawer__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--kd-space-3);
}
.kd-drawer__item {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--kd-space-2);
	align-items: start;
}
.kd-drawer__thumb img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--kd-radius-sm);
	display: block;
}
.kd-drawer__info { display: grid; gap: 6px; }
.kd-drawer__name {
	font-weight: 600;
	font-size: var(--kd-body-size);
	line-height: 1.3;
	color: var(--kd-color-text);
}
.kd-drawer__price { font-size: var(--kd-body-size); }

.kd-drawer__qty {
	display: flex;
	align-items: center;
	gap: var(--kd-space-1);
}
.kd-qty__btn {
	width: 32px;
	height: 32px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--kd-color-surface);
	color: var(--kd-color-text);
	border: 0;
	box-shadow: none;
	border-radius: var(--kd-radius-sm);
	font-size: var(--kd-body-size);
}
.kd-qty__btn:hover { background: var(--kd-color-primary); color: var(--kd-color-primary-contrast); }
.kd-qty__value { min-width: 24px; text-align: center; font-size: var(--kd-body-size); }

.kd-drawer__remove {
	margin-left: auto;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	font-size: var(--kd-caption-size);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--kd-color-text-muted);
	text-decoration: underline;
}
.kd-drawer__remove:hover { background: none; color: var(--kd-color-error); }

.kd-drawer__foot {
	margin-top: auto;
	display: grid;
	gap: var(--kd-space-2);
	border-top: 1px solid var(--kd-color-border);
	padding-top: var(--kd-space-3);
}
.kd-drawer__sum {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
	font-size: var(--kd-body-size);
}
.kd-drawer__hint { margin: 0; font-size: var(--kd-caption-size); color: var(--kd-color-text-muted); }
.kd-btn--block { display: block; text-align: center; }
.kd-drawer__cart-link { text-align: center; font-size: var(--kd-body-sm-size); color: var(--kd-color-text-muted); }

/* Klik juz poszedl — przycisk ma to pokazac, zanim wroci odpowiedz. */
.is-loading { opacity: .6; pointer-events: none; }

/*
 * Szuflada otwiera sie natychmiast po klikniecu, jeszcze przed odpowiedzia serwera
 * (pomiar 21.09.2026: 2,5 s na pulpicie, 4,45 s na telefonie). Przez ten czas panel stoi
 * przygaszony, a nad trescia idzie cienka kreska postepu. Zaden spinner, zadne slowo
 * „ladowanie": ruch ma byc odpowiedzia na klik, nie ogloszeniem o czekaniu.
 */
.kd-drawer__panel.is-busy .kd-drawer__body { opacity: .4; transition: opacity var(--kd-motion-fast) var(--kd-ease); }
.kd-drawer__panel.is-busy .kd-drawer__head::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--kd-color-primary), transparent);
	background-size: 45% 100%;
	background-repeat: no-repeat;
	animation: kd-drawer-progress 1.1s ease-in-out infinite;
}
.kd-drawer__head { position: relative; }

@keyframes kd-drawer-progress {
	0%   { background-position: -45% 0; }
	100% { background-position: 145% 0; }
}

/* Osoba, ktora prosila system o mniej ruchu, dostaje samo przygaszenie. */
@media (prefers-reduced-motion: reduce) {
	.kd-drawer__panel.is-busy .kd-drawer__head::after { animation: none; background: var(--kd-color-border); background-size: 100% 100%; }
}