/**
 * Matysiak Gratis – style sekcji „Gratis do wyboru” w koszyku oraz etykiet pozycji gratisowej.
 *
 * Selektory wyłącznie z klas zarezerwowanych w docs/kontrakty.md §4.3 (prefiks mg-):
 * mg-gratis, mg-gratis__heading, mg-gratis__list, mg-gratis__item, mg-gratis__image,
 * mg-gratis__body, mg-gratis__name, mg-gratis__desc, mg-gratis__button, mg-badge,
 * mg-gratis-price, mg-qty.
 *
 * Kolory pochodzą ze zmiennych CSS motywu avanam (wartości realne ustawia Customizer,
 * fallbacki odpowiadają domyślnym motywu lub zieleni sklepu):
 * - --global-palette1  = „Accent” (akcent, w sklepie zielony)      – inc/components/color_palette/component.php:85
 * - --global-palette8  = „Lighter Background” (jasne tło)          – inc/components/color_palette/component.php:120
 * - --global-palette9  = „White or offwhite” (tło białe)           – inc/components/color_palette/component.php:125
 * - --global-gray-400  = jasna ramka pól formularzy (#ebebeb)      – assets/css/src/_vars.scss:59, :11
 *
 * Sekcja jest renderowana wewnątrz <form class="woocommerce-cart-form"> – na desktopie
 * to lewa kolumna 70 % układu floatowego motywu (assets/css/src/woo/_checkout.scss:563).
 * Przycisk .mg-gratis__button ma też klasę .button motywu i dziedziczy jej kolory,
 * padding i zaokrąglenie – tu nie nadpisujemy wyglądu przycisku.
 * Ładowany przez MG_Frontend::enqueue_assets() (handle mg-gratis) na koszyku, checkout
 * oraz na każdej stronie, gdy koszyk zawiera pozycję gratisową (etykieta w mini-koszyku).
 */

/* --- Sekcja pod tabelą koszyka ------------------------------------------ */

.mg-gratis {
	margin: 2em 0 1.5em;
	padding: 1.25em;
	border: 1px solid var(--global-gray-400, #ebebeb);
	border-radius: 4px;
	background: var(--global-palette8, #f7fafc);
	clear: both;
}

.mg-gratis__heading {
	margin: 0 0 .75em;
	font-size: 1.15em;
}

/* Siatka kart: w kolumnie 70 % daje 2–3 karty na desktopie, 1 na wąskim ekranie. */
.mg-gratis__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1em;
}

/* Karta jednego gratisu. margin: 0 – motyw daje li margines listy. */
.mg-gratis__item {
	display: flex;
	flex-direction: column;
	gap: .5em;
	margin: 0;
	padding: .75em;
	border: 1px solid var(--global-gray-400, #ebebeb);
	border-radius: 4px;
	background: var(--global-palette9, #fff);
}

.mg-gratis__image img {
	display: block;
	width: 100%;
	max-width: 140px;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
}

.mg-gratis__body {
	display: flex;
	flex-direction: column;
	gap: .35em;
	flex: 1;
}

.mg-gratis__name {
	font-weight: 600;
	line-height: 1.3;
}

.mg-gratis__desc {
	margin: 0;
	font-size: .9em;
	opacity: .8;
}

/* Przycisk przyklejony do dołu karty; kolory z .button motywu. */
.mg-gratis__button {
	margin-top: auto;
	align-self: flex-start;
}

/* --- Etykiety pozycji gratisowej (koszyk, mini-koszyk, checkout, sekcja) --- */

/* Mała etykieta GRATIS przy nazwie – akcent motywu. */
.mg-badge {
	display: inline-block;
	padding: .1em .5em;
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.6;
	border-radius: 3px;
	color: #fff;
	background: var(--global-palette1, #3a9d3f);
	vertical-align: middle;
	white-space: nowrap;
}

/* W karcie sekcji etykieta stoi w kolumnie – nie rozciągaj jej na szerokość. */
.mg-gratis__body .mg-badge {
	align-self: flex-start;
}

/* „GRATIS” w miejscu ceny i sumy pozycji. */
.mg-gratis-price {
	font-weight: 700;
	color: var(--global-palette1, #3a9d3f);
	letter-spacing: .03em;
}

/* Stała ilość „1” zamiast div.quantity z inputem – wysokość zbliżona do pola ilości. */
.mg-qty {
	display: inline-block;
	min-width: 3em;
	padding: .35em 0;
	text-align: center;
	font-weight: 600;
}

/* --- Wąskie ekrany ------------------------------------------------------- */

@media (max-width: 600px) {
	.mg-gratis {
		padding: 1em;
	}

	.mg-gratis__list {
		grid-template-columns: 1fr;
	}

	.mg-gratis__image img {
		max-width: 110px;
	}
}