/* Propozycja dokupienia — w szufladzie koszyka i na stronie `/koszyk/`.
 *
 * Uklad jednorzedowy: miniatura, nazwa z cena, maly przycisk obrysowy przy prawej krawedzi.
 * Poprzednia wersja miala kreskowana ramke, miniature 56 px i pelny turkusowy przycisk
 * w osobnym rzedzie — czytala sie jak druga rownorzedna zacheta obok „Przejdz do platnosci",
 * a zajmowala ~150 px wysokosci w szufladzie 400 px.
 */

.kd-bump {
	/* Kreska zastapiona ciagla wloskowata linia: kreskowana obwodka to jezyk pola formularza
	   („upusc tu plik"), a to jest karta produktu. Promien z tej samej polki co reszta kart. */
	border: 1px solid var(--kd-color-border);
	border-radius: var(--kd-radius-md);
	padding: var(--kd-space-2);
	display: grid;
	gap: 10px;
}

/* Wyglad nadkreslnika niesie wspolna klasa `kd-eyebrow` z `main.css` — tu zostaje sam odstep
   i zejscie o stopien, bo w szufladzie 400 px stoi nad trescia, a nie nad sekcja strony. */
.kd-bump__lead {
	margin: 0;
	font-size: var(--kd-label-size);
	color: var(--kd-color-text-muted);
}

.kd-bump__item {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	column-gap: var(--kd-space-2);
	align-items: center;
}

.kd-bump__info {
	display: grid;
	gap: 2px;
	/* Element siatki ma domyslnie `min-width: auto` — bez tego dluga nazwa rozepchnelaby kolumne
	   ponad `minmax(0, 1fr)` i przycisk wyszedlby poza szuflade. */
	min-width: 0;
}

.kd-bump__thumb img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--kd-radius-sm);
	display: block;
}

.kd-bump__name {
	/* ⚠️ `min-height` nie jest wypelniaczem: przy nazwie jednowierszowej cel dotykowy schodzi
	   do 18 px i pomiar zglasza blad.
	   ⚠️ Interlinia 20 px NIE jest estetyka — 2 x 20 = dokladnie te 40 px. `-webkit-line-clamp`
	   ustawia wysokosc pudelka na N wierszy, ale `min-height` podnosi ja z powrotem, a razem
	   z nia okno `overflow: hidden`. Przy interlinii 1,3 (16,9 px) dwa wiersze mialy 33,8 px,
	   wiec spod 40-px krawedzi wystawalo 6 px TRZECIEGO wiersza — widoczne na stagingu jako
	   ucieta „naturalnym" nad cena. Zmiana rozmiaru pisma wymaga przeliczenia tej pary. */
	min-height: 40px;
	font-size: var(--kd-caption-size);
	font-weight: 600;
	line-height: 20px;
	color: var(--kd-color-text);
	/* Nazwy kamieni bywaja dlugie („naturalnym — ochrona i spokoj") — bez tego wchodza pod przycisk. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.kd-bump__price { font-size: var(--kd-caption-size); }
.kd-bump__price del { display: none; }
.kd-bump__price ins { text-decoration: none; color: var(--kd-color-accent-sale); }
/* Zdanie „Razem z nim dostawa bedzie darmowa” (28.09.2026): tylko gdy ten produkt domyka prog. */
.kd-bump__note {
	font-size: var(--kd-caption-size);
	line-height: 1.4;
	color: var(--kd-color-accent);
}

/* Przycisk stoi w trzeciej kolumnie i obejmuje oba wiersze opisu. Wariant obrysowy (`kd-btn--ghost`
   dokladany w `module.php`) zostawia pelny kolor jednemu przyciskowi w widoku — temu, ktory
   prowadzi do kasy. 40 px to prog dotykowy, nie estetyka. */
.kd-bump__add {
	grid-column: 3;
	align-self: center;
	min-height: 40px;
	padding: 10px 16px;
	font-size: var(--kd-caption-size);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
}

/* Na `/koszyk/` propozycja stoi w pelnej szerokosci strony — bez ograniczenia miniatura 48 px
   wisialaby samotnie na 1 280 px. */
.woocommerce-cart .kd-bump {
	max-width: 520px;
	margin-block: var(--kd-space-3);
}

/*
 * Bardzo waskie ekrany: powrot do dwoch rzedow.
 *
 * Przy oknie 320 px panel szuflady ma 280 px, a po odjeciu wypelnien szuflady i karty na nazwe
 * zostaje ~40 px — nazwa rozpychalaby wtedy panel w bok. Ponizej progu przycisk wraca pod opis.
 */
@media (max-width: 360px) {
	.kd-bump__item {
		grid-template-columns: 48px minmax(0, 1fr);
		row-gap: var(--kd-space-1);
		align-items: start;
	}

	.kd-bump__thumb { grid-row: span 2; }

	.kd-bump__add {
		grid-column: 2;
		justify-self: start;
	}
}

/* Druga propozycja w tej samej ramce (opakowanie w sezonie prezentow, 28.09.2026): kreska oddziela
   ja od pierwszej, zeby nie czytala sie jak ciag dalszy nazwy produktu wyzej. */
.kd-bump__lead--next {
	padding-top: 10px;
	border-top: 1px solid var(--kd-color-border);
}