/*
 * Koszyk i zamówienie (klasyczne strony WooCommerce).
 * Kontener, odstępy i H1 daje Row Layout w treści strony, nie ten plik.
 */

/* Kadence wstawia nad tabelą „Cart Summary”, po polsku to samo co nagłówek
   podsumowania obok. Nad tabelą jest już tytuł strony „Koszyk”. */
.woocommerce-cart .cart-summary {
	display: none;
}

/* Nagłówek podsumowania w rozmiarze nagłówków sekcji na zamówieniu (h3). */
/* stylelint-disable-next-line selector-class-pattern -- klasa WooCommerce */
.woocommerce-cart .cart_totals h2 {
	font-size: 1.375rem;
}

/* Usuwanie produktu w kolorze strony zamiast czerwieni.
   Kadence daje tu color: red !important w arkuszu ładowanym po naszym,
   więc trzeba !important i mocniejszego selektora. */
.woocommerce-cart .woocommerce a.remove {
	color: var(--global-palette5) !important; /* stylelint-disable-line declaration-no-important -- przebija !important Kadence */
}

.woocommerce-cart .woocommerce a.remove:hover {
	color: var(--global-palette9) !important; /* stylelint-disable-line declaration-no-important -- jw. */
	background: var(--global-palette1);
}

/* Kupon: pole i przycisk w jednym rzędzie, napis przycisku się nie łamie. */
.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	gap: 4px;
}

.woocommerce-cart table.cart td.actions .coupon .button {
	white-space: nowrap;
}

/* Rozmiary przycisków z naszego systemu zamiast wymiarów z woocommerce.min.css Kadence
   (kupon i „Zaktualizuj koszyk” 38 px, „Przejdź do płatności” 0.6em 1em, kupon na zamówieniu 0.4em 1em).
   Arkusz Kadence ładuje się po naszym, więc selektory są o `.woocommerce` mocniejsze. */

/* Główne przyciski: zwykły rozmiar, 48 px. */
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .woocommerce form.checkout_coupon .form-row .button {
	height: auto;
	padding: 14px 24px;
	line-height: 1.25;
}

.woocommerce-checkout .woocommerce form.checkout_coupon .input-text {
	height: 48px;
	border-radius: 4px;
	font-size: 16px;
}

/* Kupon na zamówieniu: WooCommerce dzieli formularz na dwie połówki (form-row-first/last),
   więc przycisk wisiał w prawej połowie, daleko od pola. Pole i przycisk obok siebie jak w koszyku,
   komunikat o błędzie zostaje pod polem (jest w tym samym akapicie co pole). */
.woocommerce-checkout .woocommerce form.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
}

.woocommerce-checkout .woocommerce form.checkout_coupon .form-row-first,
.woocommerce-checkout .woocommerce form.checkout_coupon .form-row-last {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce-checkout .woocommerce form.checkout_coupon .form-row-first {
	flex: 1 1 240px;
	max-width: 420px;
}

.woocommerce-checkout .woocommerce form.checkout_coupon .coupon-error-notice {
	display: block;
	margin-top: 4px;
	font-size: 15px;
}

/* Wiersz pod tabelą koszyka: mały wariant, 40 px, jak przycisk w nagłówku.
   Przy 48 px „Zaktualizuj koszyk” spadał do nowej linii już przy 900 px szerokości. */
.woocommerce-cart .woocommerce table.cart td.actions .button {
	height: auto;
	padding: 11px 16px;
	border: 0;
	font-size: 15px;
	line-height: 1.2;
}

.woocommerce-cart .woocommerce table.cart td.actions .coupon .input-text {
	height: 40px;
	border-radius: 4px;
	font-size: 15px;
}

/* Komunikat „Proszę wpisać kod kuponu.” WooCommerce dokłada do rzędu kuponu.
   Idzie pod pole na całą szerokość, zamiast wciskać się obok przycisku. */
.woocommerce-cart table.cart td.actions .coupon {
	flex-wrap: wrap;
}

.woocommerce-cart table.cart td.actions .coupon .coupon-error-notice {
	flex-basis: 100%;
	margin: 4px 0 0;
	text-align: left;
	font-size: 15px;
}

@media (width <= 767px) {
	.woocommerce-cart table.cart td.actions .coupon {
		margin-bottom: 8px;
		padding-bottom: 0;
	}

	.woocommerce-cart table.cart td.actions .coupon .input-text {
		flex: 1;
		min-width: 0;
		margin: 0;
	}
}