/**
 * Koszyk – sekcja „Dobierz do swojego zamówienia” (cross-sell).
 *
 * PROBLEM
 * Lista produktów cross-sell jest siatką CSS (ul.products.columns-2 =
 * grid-template-columns: repeat(2, minmax(0, 1fr))), ale WooCommerce/Astra
 * nakłada na kafelek osobną regułę z czasów układu opartego na float:
 *
 *     .woocommerce .cart-collaterals .cross-sells ul.products li { width: calc(50% - 10px) }
 *
 * W siatce te 50% liczy się od KOMÓRKI, nie od całej listy – kafelek dostawał
 * połowę przysługującego mu miejsca (109 px zamiast ~238 px). Przycisk
 * „Dodaj do koszyka” ma stałe odstępy 15/30 px, więc w tak wąskim kafelku
 * łamał się na trzy linie i był szerszy od samego kafelka – wychodził poza
 * jego szare tło.
 *
 * ROZWIĄZANIE
 * Oddajemy decyzję o szerokości siatce (width: auto) i zabezpieczamy przycisk,
 * żeby nigdy nie przerósł kafelka – także przy wąskich ekranach.
 *
 * @package Astra Child
 */

/* Kafelek wypełnia swoją komórkę siatki.
   Specyficzność (0,5,2) bije regułę WooCommerce (0,4,2), więc bez !important. */
.woocommerce .cart-collaterals .cross-sells ul.products li.product,
.woocommerce-page .cart-collaterals .cross-sells ul.products li.product {
	width: auto;
	max-width: 100%;
	margin-right: 0;
	margin-left: 0;
}

/* Przycisk „Dodaj do koszyka” nie może być szerszy od kafelka. */
.woocommerce .cart-collaterals .cross-sells ul.products li.product .button,
.woocommerce-page .cart-collaterals .cross-sells ul.products li.product .button {
	max-width: 100%;
	/* Przy bardzo wąskiej kolumnie zmniejszamy odstępy boczne zamiast łamać tekst. */
	padding-right: clamp(12px, 8%, 30px);
	padding-left: clamp(12px, 8%, 30px);
	overflow-wrap: break-word;
}

/* Obrazki produktów nie rozpychają kafelka. */
.woocommerce .cart-collaterals .cross-sells ul.products li.product img,
.woocommerce-page .cart-collaterals .cross-sells ul.products li.product img {
	max-width: 100%;
	height: auto;
}