/* ==========================================================================
   Koszyk, kasa i konto klienta

   WooCommerce rysuje te widoki wlasnymi szablonami i wlasnymi klasami, wiec
   zamiast je przepisywac, ubieramy je w typografie i kolory sklepu. Selektory
   zaczynaja sie od `.woocommerce`, zeby wygrac z arkuszem wtyczki.
   ========================================================================== */

.woocommerce .ml-page__title { margin-bottom: 24px; }

/* Koszyk, kasa i konto to tabele i formularze, a nie tekst do czytania - nie
   moga siedziec w kolumnie ograniczonej do szerokosci wygodnej dla oka. */
.woocommerce-cart .ml-prose,
.woocommerce-checkout .ml-prose,
.woocommerce-account .ml-prose { max-width: none; }

.woocommerce table.shop_table { width: 100%; }

/* waska tabela ma sie przewijac w poziomie, a nie rozpychac strony */
.woocommerce form.woocommerce-cart-form { overflow-x: auto; }

/* --- komunikaty WooCommerce --- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
	border-top: 0;
	border-left: 3px solid var(--ml-sage-deep);
	border-radius: var(--ml-radius);
	background: var(--ml-sage-wash);
	color: var(--ml-ink-soft);
	font-size: 14px;
	padding: 14px 18px 14px 20px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-error { border-color: var(--ml-sale); background: #fdf4f3; color: var(--ml-sale); }
.woocommerce-message .button,
.woocommerce-info .button { float: right; }

/* --- przyciski --- */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	padding: 13px 26px;
	border: 1px solid var(--ml-ink);
	border-radius: var(--ml-radius);
	background: var(--ml-ink);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
	line-height: 1.3;
	transition: background .25s var(--ml-ease), border-color .25s var(--ml-ease);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--ml-gold-deep);
	border-color: var(--ml-gold-deep);
	color: #fff;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt { background: var(--ml-ink); border-color: var(--ml-ink); }

/* --- pola formularzy --- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.wc-block-components-text-input input {
	padding: 12px 14px;
	border: 1px solid var(--ml-line-strong);
	border-radius: var(--ml-radius);
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: var(--ml-ink);
	height: auto;
}
.woocommerce form .form-row label,
.wc-block-components-checkout-step__title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--ml-ink-muted);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.6; padding-left: 0; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }

/* --- tabela koszyka --- */

.woocommerce table.shop_table {
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius);
	border-collapse: collapse;
}
.woocommerce table.shop_table th {
	padding: 14px 16px;
	background: var(--ml-sage-wash);
	border-bottom: 1px solid var(--ml-line);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
	color: var(--ml-ink-muted);
	text-align: left;
}
.woocommerce table.shop_table td {
	padding: 16px;
	border-top: 1px solid var(--ml-line);
	font-size: 14px;
}
.woocommerce table.cart img { width: 74px; height: auto; }
.woocommerce a.remove {
	width: 22px; height: 22px;
	line-height: 20px;
	color: var(--ml-ink-faint) !important;
	font-weight: 400;
	border-radius: 0;
}
.woocommerce a.remove:hover { background: var(--ml-sale); color: #fff !important; }

.woocommerce .quantity input.qty {
	width: 66px;
	padding: 10px 6px;
	border: 1px solid var(--ml-line-strong);
	border-radius: var(--ml-radius);
	font-family: inherit;
	text-align: center;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
	border: 1px solid var(--ml-line);
	padding: 22px;
	background: var(--ml-paper);
}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 14px;
}
.woocommerce .cart_totals table.shop_table { border: 0; }
.woocommerce .cart_totals table.shop_table th { background: none; text-transform: none; font-size: 14px; }

.woocommerce .order-total .amount { font-size: 20px; color: var(--ml-ink); }

/* --- kupon --- */

.woocommerce .coupon .input-text {
	padding: 12px 14px;
	border: 1px solid var(--ml-line-strong);
	border-radius: var(--ml-radius);
	font-family: inherit;
}

/* --- metody płatności --- */

.woocommerce-checkout #payment {
	background: var(--ml-sage-wash);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius);
}
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--ml-line);
	padding: 18px;
}
.woocommerce-checkout #payment div.form-row { padding: 18px; }
.woocommerce-checkout #payment div.payment_box {
	background: var(--ml-paper);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius);
	font-size: 13px;
	color: var(--ml-ink-muted);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* --- konto klienta --- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ml-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--ml-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	font-size: 13px;
	letter-spacing: .04em;
	transition: background .2s var(--ml-ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--ml-sage-wash);
	color: var(--ml-ink);
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius);
	padding: 26px;
}

/* --- koszyk i kasa w blokach (WooCommerce Blocks) --- */

.wc-block-components-button,
.wc-block-components-button:not(.is-link) {
	border-radius: var(--ml-radius) !important;
	background: var(--ml-ink) !important;
	color: #fff !important;
	font-weight: 600;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
	font-size: 12px;
}
.wc-block-components-button:hover:not(.is-link) { background: var(--ml-gold-deep) !important; }
.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-totals-wrapper { border-color: var(--ml-line); }
.wc-block-components-title,
.wc-block-cart__submit-container { font-family: inherit; }

/* --- pusty koszyk --- */

.woocommerce .cart-empty,
.wc-block-cart__empty-cart__title {
	font-size: 20px;
	font-weight: 300;
	text-align: center;
}
.woocommerce .return-to-shop { text-align: center; margin-top: 18px; }

@media (max-width: 768px) {
	.woocommerce table.shop_table td { padding: 12px; }
	.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
	.woocommerce-checkout #order_review { margin-top: 20px; }
}

/* --- układ koszyka: towary po lewej, podsumowanie po prawej ---
   WooCommerce ustawia tu procenty i float. Zamieniamy to na siatkę, bo przy
   szerokim ekranie podsumowanie lądowało pod tabelą, daleko od oka. */

@media (min-width: 900px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 34px;
		align-items: start;
	}
	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-cart .woocommerce form.woocommerce-cart-form { width: 100%; float: none; margin: 0; }
	/* Bez `position: sticky`. Sklep ma siedem metod dostawy, z tego dwie
	   z przyciskiem wyboru paczkomatu - podsumowanie bywa wyzsze niz ekran.
	   Przyklejone pudelko wyzsze od okna przykleja sie gora, a jego dol -
	   razem z przyciskiem "Przejdz do zamowienia" - zostaje poza zasiegiem
	   i nie da sie do niego doscrollowac. Do tego przy dluzszej stronie
	   nachodzi na sekcje pod spodem.

	   Nie ratujemy tego przez `max-height` z wlasnym paskiem przewijania,
	   bo `overflow` tworzy kontekst przycinania i zamknelby w sobie okno
	   wyboru paczkomatu. Zwykla kolumna dziala zawsze. */
	.woocommerce-cart .woocommerce .cart-collaterals {
		width: 100%;
		float: none;
		margin: 0;
	}
	.woocommerce-cart .woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
}

.woocommerce-cart .cart-collaterals .cross-sells { grid-column: 1 / -1; }

/* Wiersz z kuponem.

   `td.actions` musi zostac komorka tabeli. Nadanie mu `display: flex` wyrzuca
   go z ukladu tabelarycznego, przez co `colspan="6"` przestaje dzialac i
   komorka kurczy sie do szerokosci pierwszej kolumny - przyciski laduja wtedy
   jeden pod drugim w waskim slupku. Ukladamy wiec zawartosc, a nie sama
   komorke. */
.woocommerce table.cart td.actions {
	padding: 16px;
	text-align: left;
	vertical-align: middle;
}
.woocommerce table.cart td.actions::after {
	content: '';
	display: table;
	clear: both;
}
.woocommerce .cart .actions .coupon {
	display: flex;
	gap: 8px;
	align-items: stretch;
	float: left;
	max-width: 460px;
	width: 60%;
	padding: 0;
}
.woocommerce .cart .actions .coupon .input-text {
	flex: 1 1 auto;
	width: auto;
	min-width: 140px;
	margin: 0;
}
.woocommerce .cart .actions .coupon .button { flex: 0 0 auto; white-space: nowrap; }
.woocommerce .cart .actions > .button { float: right; }

/* miniatura produktu w koszyku */
.woocommerce table.cart td.product-thumbnail img {
	width: 72px;
	height: 90px;
	object-fit: cover;
}

/* Szerokosci kolumn koszyka.
   Przy `table-layout: auto` przegladarka rozdaje wolne miejsce po rowno i pusta
   kolumna z krzyzykiem potrafi zabrac pol tabeli. `fixed` sprawia, ze podane
   szerokosci sa wiazace, a kolumna z nazwa dostaje cala reszte. */
.woocommerce table.cart { table-layout: fixed; }
.woocommerce table.cart .product-remove { width: 52px; padding-inline: 12px; }
.woocommerce table.cart .product-thumbnail { width: 104px; }
.woocommerce table.cart .product-price,
.woocommerce table.cart .product-subtotal { width: 118px; }
.woocommerce table.cart .product-quantity { width: 104px; }
.woocommerce table.cart .product-name { width: auto; }
.woocommerce table.cart td.product-thumbnail img {
	width: 72px;
	height: 90px;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Koszyk na telefonie - kafelek zamiast rozsypanej tabeli

   `woocommerce-smallscreen.css` zamienia tabele koszyka w slupek: kazda komorka
   dostaje `display:block`, `text-align:right!important` i etykiete z
   `data-title` doklejona przez `::before`. Do tego **ukrywa miniature**.
   Efekt na 414 px to nazwa produktu wyciekajaca poza ekran, cena w osobnej
   ramce szerokiej na pol wiersza i zaden obrazek - czyli koszyk, w ktorym nie
   widac, co sie kupuje.

   Skladamy wiersz od nowa jako siatke: zdjecie po lewej, nazwa i cena po
   prawej, na dole ilosc i kwota. `!important` jest tu konieczne, bo reguly
   WooCommerce same go uzywaja.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* Tabela przestaje byc tabela. Dopoki nia jest, przegladarka liczy jej
	   szerokosc z najszerszej komorki - a komorka z kuponem ma przycisk, ktory
	   sie nie lamie. Stad tabela szersza od kontenera o kilka pikseli i kwota
	   ucieta prawa krawedzia ekranu. */
	.woocommerce table.cart {
		display: block;
		width: 100%;
		max-width: 100%;
		table-layout: auto;
		border: 0;
	}
	.woocommerce table.cart tbody { display: block; }

	.woocommerce table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr) auto;
		grid-template-areas:
			"foto nazwa usun"
			"foto cena  cena"
			"foto ilosc suma";
		align-items: center;
		gap: 6px 14px;
		padding: 16px 0;
		border-bottom: 1px solid var(--ml-line);
	}
	.woocommerce table.cart tr.cart_item:nth-child(2n) td { background: none; }

	.woocommerce table.cart tr.cart_item td {
		display: block;
		width: auto !important;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
		background: none;
	}
	/* etykiety "Cena:", "Ilosc:", "Kwota:" - uklad mowi to samo bez slow */
	.woocommerce table.cart tr.cart_item td::before { content: none !important; }

	.woocommerce table.cart tr.cart_item td.product-thumbnail {
		display: block;
		grid-area: foto;
		align-self: start;
	}
	.woocommerce table.cart tr.cart_item td.product-thumbnail img {
		width: 84px;
		height: 108px;
	}

	.woocommerce table.cart tr.cart_item td.product-name {
		grid-area: nazwa;
		font-size: 14px;
		line-height: 1.35;
	}
	.woocommerce table.cart tr.cart_item td.product-name a {
		text-decoration: none;
		color: inherit;
	}

	.woocommerce table.cart tr.cart_item td.product-remove {
		grid-area: usun;
		align-self: start;
		justify-self: end;
	}

	.woocommerce table.cart tr.cart_item td.product-price {
		grid-area: cena;
		font-size: 13px;
		color: var(--ml-ink-muted);
	}

	.woocommerce table.cart tr.cart_item td.product-quantity { grid-area: ilosc; }
	.woocommerce table.cart tr.cart_item td.product-quantity .quantity { margin: 0; }

	.woocommerce table.cart tr.cart_item td.product-subtotal {
		grid-area: suma;
		justify-self: end;
		text-align: right !important;
		font-size: 15px;
		font-weight: 600;
		white-space: nowrap;
	}

	/* Kupon i "Zaktualizuj koszyk" - jeden pod drugim, na cala szerokosc.
	   WooCommerce daje im 48% i float, przez co napis na przycisku sie ucinal. */
	.woocommerce table.cart td.actions {
		display: block;
		width: auto !important;
		padding: 18px 0 0 !important;
		border: 0 !important;
		text-align: left !important;
	}
	.woocommerce .cart .actions .coupon {
		display: flex;
		float: none;
		width: 100%;
		max-width: none;
		margin-bottom: 12px;
	}
	.woocommerce .cart .actions .coupon .input-text,
	.woocommerce .cart .actions .coupon input {
		width: auto !important;
		flex: 1 1 auto;
		min-width: 0;
	}
	.woocommerce .cart .actions .coupon .button {
		width: auto !important;
		flex: 0 0 auto;
		float: none !important;
		padding-inline: 16px;
		font-size: 11px;
	}
	.woocommerce .cart .actions > .button {
		display: block;
		float: none;
		width: 100%;
	}
}

/* Nieaktywny "Zaktualizuj koszyk" jest szarą płachtą, która przyciąga wzrok
   bardziej niż cokolwiek innego w koszyku - a nic nie robi, dopóki klientka
   nie zmieni ilości. Wyciszamy go do samego obramowania. */
.woocommerce .cart .actions > .button[disabled] {
	background: none;
	color: var(--ml-ink-faint);
	border: 1px solid var(--ml-line);
}
.woocommerce .cart .actions > .button[disabled]:hover { background: none; }

/* Kwota podatku łamała wiersz w środku liczby: „229,00 zł (zawiera / 42,82 zł
   23%)". Nota o VAT ma iść pod kwotą, a nie owijać się wokół niej. */
.woocommerce .cart_totals .order-total .woocommerce-Price-amount { white-space: nowrap; }
.woocommerce .cart_totals .order-total small.includes_tax {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--ml-ink-muted);
}
/* Sama kwota podatku jest osobnym `.woocommerce-Price-amount` i dziedziczyla
   rozmiar od sumy - obok drobnego "(zawiera" stalo wielkie "42,82 zl". */
.woocommerce .cart_totals .order-total small.includes_tax .woocommerce-Price-amount {
	font-size: 12px;
	font-weight: 400;
	color: inherit;
}

/* ==========================================================================
   Zwroty z konta klientki
   ========================================================================== */

.ml-zwroty__wstep {
	max-width: 68ch;
	margin-bottom: 26px;
	font-size: 14px;
	color: var(--ml-ink-soft);
}
.ml-zwroty__puste {
	padding: 34px 30px;
	border: 1px solid var(--ml-line);
	background: var(--ml-sage-wash);
	text-align: center;
}
.ml-zwroty__nota { font-size: 13px; color: var(--ml-ink-muted); }

.ml-zwrot {
	border: 1px solid var(--ml-line);
	margin-bottom: 20px;
}
.ml-zwrot__head {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	padding: 16px 22px;
	background: var(--ml-sage-wash);
	border-bottom: 1px solid var(--ml-line);
	font-size: 14px;
}
.ml-zwrot__head .ml-label { display: block; margin-bottom: 2px; }
.ml-zwrot__form { padding: 22px; }

.ml-zwrot__produkty {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}
.ml-zwrot__produkty legend { margin-bottom: 10px; padding: 0; }
.ml-zwrot__produkty .ml-check { margin-bottom: 8px; font-size: 14px; }
.ml-zwrot__produkty em { color: var(--ml-ink-faint); font-style: normal; }

@media (max-width: 600px) {
	.ml-zwrot__head { gap: 14px; padding: 14px 16px; }
	.ml-zwrot__form { padding: 16px; }
}

/* ==========================================================================
   Kasa: pole uwag i nagłówki kroków

   Domyślne pole uwag WooCommerce zostaje szare i kanciaste na tle reszty
   formularza - wygląda jak wklejone z panelu administracyjnego.
   ========================================================================== */

.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-billing-fields {
	margin-top: 8px;
}
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper textarea,
.woocommerce-checkout #order_comments {
	width: 100%;
	min-height: 110px;
	padding: 12px 14px;
	border: 1px solid var(--ml-line-strong);
	border-radius: var(--ml-radius);
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ml-ink);
	resize: vertical;
}
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ml-line);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
	color: var(--ml-ink-muted);
}
.woocommerce-checkout form.checkout .form-row { margin-bottom: 16px; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--ml-line);
	font-size: 13px;
	color: var(--ml-ink-muted);
}
.woocommerce-checkout #place_order { width: 100%; padding: 16px 24px; font-size: 13px; }


/* ==========================================================================
   Pasek do darmowej dostawy
   ========================================================================== */

.ml-dostawa {
	margin-bottom: 18px;
	padding: 14px 18px;
	background: var(--ml-sage-wash);
	border-left: 3px solid var(--ml-gold);
}
.ml-dostawa--osiagnieta { border-left-color: var(--ml-ok); }
.ml-dostawa__tekst {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--ml-ink-soft);
}
.ml-dostawa__tekst .woocommerce-Price-amount {
	font-weight: 600;
	color: var(--ml-ink);
}
.ml-dostawa__tor {
	height: 4px;
	background: var(--ml-line);
	overflow: hidden;
}
.ml-dostawa__tor span {
	display: block;
	height: 100%;
	background: var(--ml-gold);
	transition: width .4s var(--ml-ease);
}
.ml-dostawa--osiagnieta .ml-dostawa__tor span { background: var(--ml-ok); }

/* na kasie pasek idzie nad calym formularzem */
.woocommerce-checkout .ml-dostawa { margin-bottom: 24px; }

@media (max-width: 700px) {
	.woocommerce .cart .actions .coupon { width: 100%; max-width: none; float: none; margin-bottom: 12px; }
	.woocommerce .cart .actions > .button { float: none; width: 100%; }
}

/* ==========================================================================
   Wybór paczkomatu

   Widget InPostu ma własną kolorystykę (żółto-czarną) i tak zostaje - klientki
   ją rozpoznają. Ubieramy tylko to, co rysuje wtyczka na stronie kasy.
   ========================================================================== */

.woocommerce .select-paczkomat-button {
	display: inline-flex;
	margin: 10px 0 8px;
	padding: 11px 20px;
	font-size: 11px;
}
.paczkomat-logo { margin: 6px 0; }

#selected-paczkomat {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ml-ink-muted);
}
#selected-paczkomat.ml-paczkomat--wybrany {
	display: block;
	padding: 12px 14px;
	background: var(--ml-sage-wash);
	border-left: 3px solid var(--ml-ok);
	color: var(--ml-ink-soft);
}
#selected-paczkomat.ml-paczkomat--wybrany strong {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
	color: var(--ml-ink-muted);
}
#selected-paczkomat.ml-paczkomat--wybrany span { display: block; }

/* Modal widgetu domyslnie startuje przyklejony do lewej krawedzi ekranu.
   Ustawiamy go na srodku - inaczej zaslania formularz zamiast stanac obok. */
.easypack-modal,
.easypack-widget-modal,
div[class*="easypack"][class*="modal"] {
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	max-width: calc(100vw - 40px) !important;
	max-height: calc(100vh - 80px) !important;
	z-index: 2147483001 !important;
}

/* ==========================================================================
   Sekcje polecanych w koszyku

   Cztery kolumny wchodzily pod przyklejone podsumowanie - kafelek z prawej
   ladowal pod przyciskiem "Przejdz do platnosci". W koszyku dajemy trzy.
   ========================================================================== */

.woocommerce-cart .ml-polecane ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1000px) {
	.woocommerce-cart .ml-polecane ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.woocommerce-cart .ml-polecane ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Kolory przyciskow WooCommerce

   `.checkout-button` to `button.alt`, ktory ma wlasna zmienna koloru i nie
   dziedziczy naszej palety - stad fioletowy hover z domyslnego motywu
   WooCommerce. Sklep nie uzywa fioletu nigdzie indziej.
   ========================================================================== */

.woocommerce .checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
	background: var(--ml-ink);
	border-color: var(--ml-ink);
	color: #fff;
}
.woocommerce .checkout-button:hover,
.woocommerce .checkout-button:focus,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce #place_order:focus {
	background: var(--ml-sage-deep);
	border-color: var(--ml-sage-deep);
	color: #fff;
}

/* ==========================================================================
   Uklad kasy na duzym ekranie

   Domyslnie WooCommerce stawia podsumowanie POD formularzem, przez co prawa
   polowa ekranu stoi pusta na calej dlugosci adresu. Przenosimy je do drugiej
   kolumny i przyklejamy - klientka przez caly czas widzi, co i za ile zamawia.
   ========================================================================== */

@media (min-width: 1000px) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		grid-template-rows: auto 1fr;
		gap: 20px 44px;
		align-items: start;
	}
	/* Formularz rozciaga sie na oba wiersze, dzieki czemu wysoka kolumna z
	   danymi nie rozpycha wiersza, w ktorym stoi naglowek podsumowania -
	   inaczej samo podsumowanie ladowalo pod calym adresem, poza ekranem. */
	.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
	.woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle,
	.woocommerce-checkout form.checkout > .checkout_coupon { grid-column: 1 / -1; }

	.woocommerce-checkout form.checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-bottom: 0;
	}
	/* To samo co w koszyku: podsumowanie zamowienia niesie liste dostaw
	   i liste platnosci, wiec bywa wyzsze niz ekran. Przyklejone urywaloby
	   sie na dole, razem z przyciskiem "Kupuje i place". */
	.woocommerce-checkout form.checkout #order_review {
		grid-column: 2;
		grid-row: 2;
	}

	/* Dane rozliczeniowe i "wyslac na inny adres" jedno pod drugim - w waskiej
	   kolumnie dwa slupki formularza robilyby sie nieczytelne. */
	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2 {
		width: 100%;
		float: none;
	}
	.woocommerce-checkout #customer_details .col-2 {
		margin-top: 26px;
		padding-top: 22px;
		border-top: 1px solid var(--ml-line);
	}
}

.woocommerce-checkout #order_review table.shop_table { border: 0; }
.woocommerce-checkout #order_review table.shop_table th { background: none; }
.woocommerce-checkout #order_review .product-name { font-size: 13px; }

/* ==========================================================================
   Bramka logowania przed kasa (snippet WPCode 21379)
   Snippet rysuje ja we wlasnym turkusie z emotkami - obok reszty sklepu
   wyglada jak okno z innej strony. Przejmujemy sam wyglad; tresc i logika
   zostaja po stronie snippetu, zeby nie ruszac go na zywym sklepie.
   ========================================================================== */
.aloha-checkout-login-overlay {
	background: rgba(20, 23, 15, .62) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.aloha-checkout-login-modal {
	border-radius: 0 !important;
	border-top: 3px solid var(--ml-gold) !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .38) !important;
	font-family: inherit !important;
	padding: 40px 38px 34px !important;
}
.aloha-checkout-login-modal h2 {
	font-family: inherit !important;
	font-size: 24px !important;
	font-weight: 300 !important;
	letter-spacing: -.01em;
	color: var(--ml-ink) !important;
}
.aloha-checkout-login-modal p {
	color: var(--ml-ink-soft) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
}
/* Klodka-emotka zastapiona spokojna kreska - emotki nie naleza do tej marki. */
.aloha-checkout-icon { font-size: 0 !important; margin-bottom: 18px !important; }
.aloha-checkout-icon::after {
	content: "";
	display: block;
	width: 46px;
	height: 2px;
	margin: 0 auto;
	background: var(--ml-gold);
}
.aloha-checkout-btn {
	border-radius: 0 !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	transition: background .2s var(--ml-ease), color .2s var(--ml-ease) !important;
}
.aloha-checkout-btn-primary {
	background: var(--ml-ink) !important;
	color: #fff !important;
	border: 1px solid var(--ml-ink) !important;
}
.aloha-checkout-btn-primary:hover { background: var(--ml-gold) !important; border-color: var(--ml-gold) !important; }
.aloha-checkout-btn-secondary {
	background: transparent !important;
	color: var(--ml-ink) !important;
	border: 1px solid var(--ml-line-strong) !important;
}
.aloha-checkout-btn-secondary:hover { border-color: var(--ml-ink) !important; background: var(--ml-sage-wash) !important; }
.aloha-checkout-btn-guest {
	background: transparent !important;
	color: var(--ml-ink-soft) !important;
	border: 0 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	letter-spacing: .04em !important;
	text-transform: none !important;
}
.aloha-checkout-btn-guest:hover { color: var(--ml-ink) !important; background: transparent !important; }
.aloha-checkout-divider span { font-size: 11px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-ink-faint) !important; }

/* Podpowiedz nad lista dostaw, dopoki nie ma adresu. Zolta ramka, bo to
   prosba o dzialanie, a nie blad - czerwien straszylaby bez powodu. */
.ml-adres-podpowiedz td { padding: 0 0 12px !important; border: 0 !important; }
.ml-podpowiedz {
	display: grid;
	gap: 4px;
	padding: 12px 14px;
	border-left: 3px solid var(--ml-gold);
	background: #fdf8ea;
	font-size: 13px;
	line-height: 1.5;
}
.ml-podpowiedz strong { font-weight: 600; color: var(--ml-ink); }
.ml-podpowiedz span { color: var(--ml-ink-soft); }