/* =========================================================================
   KREATOR ZESTAWÓW
   Siatka produktów + przyklejony panel podsumowania.
   Ładowany tylko na stronie z wzorcem „Kreator zestawów" (inc/enqueue.php).
   ========================================================================= */

.bundle {
	display: grid;
	gap: var(--space-8);
	align-items: start;
}
/* Panel obok siatki dopiero wtedy, gdy obie kolumny mają sens: przy węższym
   ekranie panel schodzi pod siatkę i przykleja się do dolnej krawędzi. */
@media (min-width: 1080px) {
	.bundle { grid-template-columns: minmax(0, 1fr) 22rem; }
}

/* --- Siatka produktów ---------------------------------------------------- */
.bundle__grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) {
	.bundle__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bundle-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}
.bundle-card__media {
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--pep-beige-050);
}
.bundle-card__media img { width: 100%; height: auto; display: block; }
.bundle-card__rating {
	display: flex; align-items: center; gap: var(--space-2);
	font-size: var(--fs-300); color: var(--color-text-muted);
}
.bundle-card__rating .quote-card__stars { color: var(--pep-gold-500); display: inline-flex; }
.bundle-card__title {
	font-family: var(--font-display); font-weight: var(--fw-semibold);
	font-size: var(--fs-400); line-height: 1.35; margin: 0;
	text-transform: none; letter-spacing: var(--tracking-tight);
}
.bundle-card__title a { color: var(--color-text); text-decoration: none; }
.bundle-card__price {
	margin: 0;
	font-family: var(--font-display); font-weight: var(--fw-bold);
	font-size: var(--fs-500); color: var(--color-text);
}
/* Przycisk i licznik dosunięte do dołu — inaczej kafelki w rzędzie mają
   przyciski na różnych wysokościach, zależnie od długości nazwy. */
.bundle-card__form, .bundle-card__qty { margin-top: auto; }
.bundle-card__form { padding-top: var(--space-2); }

.bundle-card__qty {
	display: grid; grid-template-columns: auto 1fr auto;
	align-items: center;
	margin-top: auto;
	border: 1px solid var(--color-text);
	border-radius: var(--radius-pill);
	overflow: hidden;
	background: #fff;
}
.bundle-card__step {
	border: 0; background: transparent; cursor: pointer;
	width: 2.8em; padding: 0.7em 0;
	font-size: var(--fs-400); font-weight: 600; line-height: 1;
	color: var(--color-text);
	transition: background var(--dur) var(--ease);
}
.bundle-card__step:hover { background: var(--pep-beige-050); }
.bundle-card__count {
	text-align: center; font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
}
.bundle-card.is-picked .bundle-card__media { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* --- Panel podsumowania -------------------------------------------------- */
.bundle__panel { position: static; }
@media (min-width: 1080px) {
	/* `top` musi mieć zapas na przyklejony nagłówek — bez tego tytuł panelu
	   chowa się pod menu przy przewijaniu. */
	.bundle__panel { position: sticky; top: calc(var(--header-h, 72px) + var(--space-4)); }
}

.bundle-panel {
	display: grid;
	gap: var(--space-5);
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--color-bg-invert);
	color: var(--color-text-invert);
}
.bundle-panel__title {
	margin: 0;
	font-family: var(--font-display); font-weight: var(--fw-bold);
	font-size: var(--fs-600); letter-spacing: var(--tracking-tight);
	color: #fff;
}

/* Progi rabatu — zapalają się same, gdy zestaw urośnie. Nie są do klikania,
   więc nie udają przycisków: bez kursora wskaźnika i bez stanu hover. */
.bundle-tiers {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2);
	list-style: none; margin: 0; padding: 0;
}
.bundle-tier {
	display: grid; gap: 2px; justify-items: center; text-align: center;
	padding: var(--space-3) var(--space-2);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--fs-300); line-height: 1.25;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bundle-tier strong {
	font-family: var(--font-display); font-size: var(--fs-500);
	font-weight: var(--fw-bold); color: #fff;
}
.bundle-tier.is-active { background: #fff; color: var(--color-text); }
.bundle-tier.is-active strong { color: var(--color-text); }

.bundle-panel__hint {
	margin: 0;
	font-size: var(--fs-300); line-height: 1.5;
	color: var(--pep-gold-500);
}
.bundle-panel__hint.is-max { color: #fff; font-weight: var(--fw-semibold); }
.bundle-panel__hint:empty { display: none; }

.bundle-panel__track {
	height: 6px; border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.18);
	overflow: hidden;
}
.bundle-panel__bar {
	display: block; height: 100%;
	background: #fff;
	transition: width 300ms var(--ease);
}

/* Pusta lista nie ma zostawiać dziury: `:empty` znosi odstęp z gridu panelu. */
.bundle-panel__items:empty { display: none; }
.bundle-panel__items {
	display: grid; gap: var(--space-3);
	list-style: none; margin: 0; padding: 0;
	max-height: 21rem; overflow-y: auto;
}
.bundle-line {
	display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: var(--space-3); align-items: center;
}
.bundle-line__img {
	width: 44px; height: 44px; object-fit: cover;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.12);
}
.bundle-line__body { display: grid; gap: 2px; min-width: 0; }
.bundle-line__title {
	font-size: var(--fs-300); line-height: 1.3; color: #fff;
	/* Nazwy peptydów bywają długie — dwie linie i koniec, inaczej jedna
	   pozycja rozpycha panel na całą wysokość ekranu. */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.bundle-line__price {
	font-size: var(--fs-300); font-weight: var(--fw-semibold);
	color: rgba(255, 255, 255, 0.75);
	font-variant-numeric: tabular-nums;
}
.bundle-line__qty {
	display: flex; align-items: center; gap: var(--space-1);
	font-size: var(--fs-300); font-variant-numeric: tabular-nums;
}
.bundle-line__qty .bundle-card__step {
	width: 1.8em; padding: 0.2em 0; color: #fff;
	border-radius: var(--radius-sm);
}
.bundle-line__qty .bundle-card__step:hover { background: rgba(255, 255, 255, 0.14); }


.bundle-panel__totals { display: grid; gap: var(--space-2); margin: 0; }
.bundle-panel__totals > div {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--space-3);
	font-size: var(--fs-300);
	color: rgba(255, 255, 255, 0.8);
}
.bundle-panel__totals dt { margin: 0; min-width: 0; }
.bundle-panel__totals dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	/* Kwota nie może się łamać na „478,00" i „zł" w osobnych wierszach. */
	white-space: nowrap;
}
.bundle-panel__total {
	padding-top: var(--space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: var(--fs-500) !important;
	color: #fff !important;
}
.bundle-panel__total dt, .bundle-panel__total dd {
	font-family: var(--font-display); font-weight: var(--fw-bold);
}

.bundle-panel__submit:disabled { opacity: 0.45; cursor: not-allowed; }
.bundle-panel__submit.is-busy { opacity: 0.7; }
.bundle-panel__foot {
	margin: 0; text-align: center;
	font-size: var(--fs-300); color: rgba(255, 255, 255, 0.6);
}

.bundle__intro { margin-bottom: var(--space-8); }

/* --- Pasek dla wąskich ekranów ------------------------------------------- */
/* Od 1080 px panel stoi obok siatki i jest w zasięgu wzroku przez cały czas,
   więc pasek jest zbędny — ukrywamy go niezależnie od stanu `hidden`. */
.bundle-bar { display: none; }
@media (max-width: 1079px) {
	.bundle-bar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
		display: flex; align-items: center; justify-content: space-between;
		gap: var(--space-4);
		padding: var(--space-3) var(--space-4);
		background: var(--color-bg-invert);
		color: var(--color-text-invert);
		box-shadow: 0 -8px 24px rgba(22, 19, 15, 0.18);
	}
	.bundle-bar[hidden] { display: none; }
}
/* Poniżej 900 px na dole ekranu stoi już belka nawigacji — pasek siada nad
   nią, inaczej przykrywałby „Koszyk" i „Menu". */
@media (max-width: 900px) {
	.bundle-bar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
.bundle-bar__info { display: grid; gap: 2px; min-width: 0; }
.bundle-bar__count { font-size: var(--fs-300); color: rgba(255, 255, 255, 0.7); }
.bundle-bar__total {
	font-family: var(--font-display); font-size: var(--fs-500);
	font-weight: var(--fw-bold); white-space: nowrap;
	/* `strong` w base.css ma na sztywno kolor tekstu — na ciemnym pasku
	   kwota była czarna na czarnym. */
	color: var(--color-text-invert);
}
.bundle-bar__submit { flex: none; }