/* =====================================================================
   KOSZYK, ZAMÓWIENIE, KONTO

   Tych szablonów NIE nadpisujemy - zostają takie, jakie daje sklep,
   bo przy każdej jego aktualizacji trzeba by je przeglądać, a mechanika
   zamówienia to najgorsze możliwe miejsce na własne poprawki.

   Zmieniamy im wyłącznie wygląd: kolory, kroje, promienie i odstępy
   z tokenów marki. Układ zostaje sklepowy.

   WAGA SELEKTORÓW. Arkusz sklepu celuje w swoje elementy zapisami
   w rodzaju `.woocommerce table.shop_table td` - dwie klasy i dwa
   znaczniki. Krótszy zapis po naszej stronie przegrywa niezależnie
   od kolejności wczytania. Stąd `body.dm` na początku prawie każdej
   reguły: bez tego połowa z nich nie robi nic.
   ===================================================================== */

/* ---------------------------------------------------------------------
   WSPÓLNE OPAKOWANIE
   --------------------------------------------------------------------- */

body.dm .dm-sklep-strona .dm-kontener {
	max-width: 108rem;
	padding-block: 4.4rem 2rem;
}

body.dm .woocommerce h1,
body.dm .woocommerce h2 {
	font-family: var(--dm-pismo-tyt);
	font-weight: 300;
}

body.dm .woocommerce .entry-title,
body.dm .dm-sklep-strona h1.entry-title {
	line-height: 1.1;
	margin-bottom: 2.4rem;
}

/* ---------------------------------------------------------------------
   PRZYCISKI SKLEPU

   Jeden wygląd na całą stronę. Przycisk „Przejdź do kasy" ma wyglądać
   dokładnie jak „Dodaj do koszyka" na karcie produktu.
   --------------------------------------------------------------------- */

body.dm .woocommerce a.button,
body.dm .woocommerce button.button,
body.dm .woocommerce input.button,
body.dm .woocommerce a.button.alt,
body.dm .woocommerce button.button.alt,
body.dm .woocommerce input.button.alt,
body.dm .woocommerce #respond input#submit {
	font-family: var(--dm-pismo);
	font-size: var(--dm-btn-pismo);
	font-weight: var(--dm-btn-waga);
	letter-spacing: var(--dm-btn-odstep);
	text-transform: uppercase;
	line-height: 1.2;
	padding: 1.6rem 3.2rem;
	border-radius: var(--dm-btn-promien);
	background: var(--dm-tekst);
	color: var(--dm-tekst-jasny);
	border: 1px solid var(--dm-tekst);
	transition: background-color var(--dm-btn-czas), border-color var(--dm-btn-czas);
}

body.dm .woocommerce a.button:hover,
body.dm .woocommerce button.button:hover,
body.dm .woocommerce input.button:hover,
body.dm .woocommerce a.button.alt:hover,
body.dm .woocommerce button.button.alt:hover,
body.dm .woocommerce input.button.alt:hover {
	background: var(--dm-grafit);
	border-color: var(--dm-grafit);
	color: var(--dm-tekst-jasny);
}

body.dm .woocommerce a.button.disabled,
body.dm .woocommerce button.button:disabled,
body.dm .woocommerce input.button:disabled {
	background: var(--dm-tekst);
	border-color: var(--dm-tekst);
	color: var(--dm-tekst-jasny);
	opacity: .35;
}

/* ---------------------------------------------------------------------
   POLA FORMULARZY

   Ten sam kształt co w formularzu kontaktowym: zaokrąglenie 10 px,
   stan aktywny to WYŁĄCZNIE zmiana koloru ramki. Bez poświaty
   i bez zmiany grubości - obramowanie, które grubieje przy kliknięciu,
   przesuwa cały wiersz o piksel.
   --------------------------------------------------------------------- */

body.dm .woocommerce form .form-row input.input-text,
body.dm .woocommerce form .form-row textarea,
body.dm .woocommerce form .form-row select,
body.dm .woocommerce .select2-container .select2-selection--single,
body.dm .woocommerce table.cart td.actions .coupon .input-text {
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-akapit);
	line-height: 1.6;
	padding: 1.3rem 1.6rem;
	border: 1px solid var(--dm-ramka-pole);
	border-radius: 10px;
	background: var(--dm-tlo-jasne);
	color: var(--dm-tekst);
	box-shadow: none;
	transition: border-color 150ms;
	height: auto;
}

body.dm .woocommerce form .form-row input.input-text:focus,
body.dm .woocommerce form .form-row textarea:focus,
body.dm .woocommerce form .form-row select:focus {
	border-color: var(--dm-tekst);
	outline: none;
	box-shadow: none;
}

body.dm .woocommerce form .form-row label {
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-2);
	margin-bottom: .6rem;
}

body.dm .woocommerce form .form-row .required {
	color: var(--dm-wyprzedaz);
	text-decoration: none;
}

/* ---------------------------------------------------------------------
   TABELE
   --------------------------------------------------------------------- */

body.dm .woocommerce table.shop_table {
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-blok);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

body.dm .woocommerce table.shop_table th {
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-label);
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dm-tekst);
	background: var(--dm-tlo-jasne);
	padding: 1.6rem 2rem;
	border-bottom: 1px solid var(--dm-ramka);
}

body.dm .woocommerce table.shop_table td {
	padding: 1.8rem 2rem;
	border-top: 1px solid var(--dm-ramka);
	font-size: var(--dm-txt-akapit);
	color: var(--dm-tekst-2);
}

body.dm .woocommerce table.shop_table td.product-name a {
	color: var(--dm-tekst);
}

body.dm .woocommerce table.cart img {
	width: 6.4rem;
	border-radius: var(--dm-r-mini);
}

body.dm .woocommerce a.remove {
	color: var(--dm-tekst-3);
	font-weight: 400;
}

body.dm .woocommerce a.remove:hover {
	background: none;
	color: var(--dm-wyprzedaz);
}

body.dm .woocommerce .cart_totals h2,
body.dm.woocommerce-checkout h3 {
	font-family: var(--dm-pismo-tyt);
	font-weight: 300;
	line-height: 1.2;
	margin-bottom: 1.8rem;
}

/* ---------------------------------------------------------------------
   KOMUNIKATY

   Sklep oznacza je kolorowym paskiem z lewej. Zostawiamy pasek -
   niesie znaczenie - ale dopasowujemy tło i pismo.
   --------------------------------------------------------------------- */

body.dm .woocommerce-message,
body.dm .woocommerce-info,
body.dm .woocommerce-error {
	font-size: var(--dm-txt-akapit);
	line-height: 1.7;
	background: var(--dm-tlo-jasne);
	border-radius: var(--dm-r-karta);
	color: var(--dm-tekst);
	padding: 1.8rem 2rem 1.8rem 4.4rem;
}

body.dm .woocommerce-message::before,
body.dm .woocommerce-info::before,
body.dm .woocommerce-error::before {
	left: 1.6rem;
	top: 1.9rem;
}

body.dm .woocommerce-message { border-top-color: var(--dm-zielen); }
body.dm .woocommerce-info    { border-top-color: var(--dm-blekit); }
body.dm .woocommerce-error   { border-top-color: var(--dm-wyprzedaz); }

body.dm .woocommerce-message a.button {
	padding: 1rem 2rem;
	font-size: var(--dm-txt-label);
}

/* ---------------------------------------------------------------------
   PODSUMOWANIE I PŁATNOŚCI
   --------------------------------------------------------------------- */

body.dm.woocommerce-checkout #payment {
	background: var(--dm-tlo-jasne);
	border-radius: var(--dm-r-blok);
}

body.dm.woocommerce-checkout #payment div.payment_box {
	background: var(--dm-biel);
	border-radius: var(--dm-r-karta);
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-2);
}

body.dm.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--dm-biel);
}

body.dm.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--dm-ramka);
}

body.dm .woocommerce-privacy-policy-text,
body.dm .woocommerce-terms-and-conditions-wrapper {
	font-size: var(--dm-txt-maly);
	line-height: 1.7;
	color: var(--dm-tekst-2);
}

/* ---------------------------------------------------------------------
   MOJE KONTO
   --------------------------------------------------------------------- */

body.dm .woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-karta);
	overflow: hidden;
}

body.dm .woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 1.4rem 2rem;
	font-size: var(--dm-txt-maly);
	border-bottom: 1px solid var(--dm-ramka);
}

body.dm .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--dm-tlo-jasne);
	color: var(--dm-tekst);
}

/* ---------------------------------------------------------------------
   KOSZYK - DWIE KOLUMNY

   Przebudowane 27.08.2026. Sklep układa koszyk pionowo: tabela produktów
   na całą szerokość, pod nią podsumowanie odsunięte do prawej. Na szerokim
   ekranie znaczy to, że kwota do zapłaty leży poniżej krawędzi ekranu,
   a pod tabelą zostaje pas pustego miejsca.

   Teraz: po lewej lista zakupów, po prawej karta z kwotami, kodem
   rabatowym i przyciskiem do kasy. Karta jedzie razem z ekranem, więc
   kwota jest widoczna przez cały czas przeglądania koszyka.

   Robimy to SIATKĄ NA OPAKOWANIU, bez nadpisywania szablonu koszyka.
   Sklep zostaje przy swoim `cart.php`, my zmieniamy tylko rozkład
   pudełek, które on wypisuje.
   --------------------------------------------------------------------- */

/*
 * SZEROKOŚĆ KOSZYKA, KASY I KONTA.
 *
 * To była właściwa przyczyna tego, że koszyk i kasa wyglądały na
 * ściśnięte - nie odstępy w tabeli, tylko szerokość całej kolumny.
 *
 * Koszyk i kasa to zwykłe strony z krótkim kodem sklepu, więc renderuje
 * je `page.php` motywu nadrzędnego. Ten daje stronie bez bloków klasę
 * `bp-tresc--waska`, czyli 750 px - szerokość dobrana pod SAM TEKST,
 * regulamin albo politykę prywatności, gdzie długość wiersza decyduje
 * o czytelności. Dla tabeli zakupów obok karty z kwotami jest o połowę
 * za mało.
 *
 * Nie ruszamy `page.php` - reguła dla stron prawnych jest słuszna.
 * Poszerzamy wyłącznie trzy strony sklepowe, rozpoznane po klasie,
 * którą sklep sam dokłada do `body`.
 */
/*
 * SZEROKOŚĆ TAKA SAMA JAK NA POZOSTAŁYCH PODSTRONACH.
 *
 * Koszyk, zamówienie i konto stoją w zwykłym kontenerze `.bp-tresc`
 * (szablon `templates/czesci/strona-sklepu.php`), bez wąskiej kolumny
 * dokumentu - więc arkusz nie nadpisuje już kontenera (spec. 2, M9).
 *
 * Rytm tytułu i ostatniego elementu - ten sam, który dawała im dotąd
 * kolumna dokumentu motywu nadrzędnego.
 */
.dm-strona-sklepu > h1 {
	margin-block-end: 3rem;
}

.dm-strona-sklepu > :first-child {
	margin-block-start: 0;
}

.dm-strona-sklepu > :last-child {
	margin-block-end: 0;
}

body.dm.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(30rem, 38rem);
	align-items: start;
	gap: clamp(2.4rem, 3vw, 4rem);
}

/*
 * Komunikaty i pusty koszyk idą przez całą szerokość. Bez tego
 * „Produkt został dodany" wchodzi w kolumnę podsumowania i rozpycha ją.
 */
body.dm.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
body.dm.woocommerce-cart .woocommerce > .woocommerce-message,
body.dm.woocommerce-cart .woocommerce > .woocommerce-info,
body.dm.woocommerce-cart .woocommerce > .woocommerce-error,
body.dm.woocommerce-cart .woocommerce > .cart-empty,
body.dm.woocommerce-cart .woocommerce > .return-to-shop,
body.dm.woocommerce-cart .woocommerce > .wc-empty-cart-message {
	grid-column: 1 / -1;
}

/* Pusty koszyk nie potrzebuje dwóch kolumn. */
body.dm.woocommerce-cart .woocommerce:has(.cart-empty),
body.dm.woocommerce-cart .woocommerce:has(.wc-empty-cart-message) {
	display: block;
}

body.dm.woocommerce-cart .woocommerce-cart-form {
	margin: 0;
}

/*
 * Sklep ustawia tu `float: right` i `width: 48%`. Zdejmujemy jedno
 * i drugie - szerokością rządzi teraz kolumna siatki.
 */
/*
 * KARTA PODSUMOWANIA NIE JEST PRZYKLEJONA.
 *
 * Była, do 27.08.2026. Przestała być w chwili, w której pod koszykiem
 * stanęła sekcja „To też może Cię zainteresować": element przyklejony
 * trzyma się w obrębie CAŁEJ siatki, a nie swojego wiersza, więc przy
 * przewijaniu zjeżdżał nad kafle polecanych i przykrywał je z prawej
 * strony.
 *
 * Ograniczenie go do jednego wiersza wymagałoby dołożenia opakowania
 * w środku szablonu koszyka - czyli nadpisania pliku sklepu dla samego
 * efektu przyklejenia. Nie warto.
 *
 * Na kasie karta zostaje przyklejona: tam pod spodem nie ma nic,
 * a formularz bywa długi.
 */
body.dm .cart-collaterals {
	width: 100%;
	float: none;
	margin: 0;
}

body.dm .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
	margin: 0;
	padding: 2.8rem;
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-blok);
	background: var(--dm-tlo-jasne);

	/*
	 * Kolumna po to, żeby nagłówek „Podsumowanie koszyka" stał na górze.
	 * Zaczepienie, w którym wypisujemy kod rabatowy, odpala się PRZED
	 * nagłówkiem - inaczej pole kuponu wskoczyłoby nad tytuł karty.
	 */
	display: flex;
	flex-direction: column;
}

body.dm .cart-collaterals .cart_totals > h2 {
	order: -1;
	margin-bottom: 2rem;
}

/* Tabela kwot wewnątrz karty jest zestawieniem, nie ramką w ramce. */
body.dm .cart-collaterals .cart_totals table.shop_table {
	border: 0;
	border-radius: 0;
	margin: 0;
}

body.dm .cart-collaterals .cart_totals table.shop_table th,
body.dm .cart-collaterals .cart_totals table.shop_table td {
	background: none;
	padding: 1.4rem 0;
	border-top: 0;
	border-bottom: 1px solid var(--dm-ramka);
}

body.dm .cart-collaterals .cart_totals table.shop_table th {
	font-size: var(--dm-txt-label);
	letter-spacing: .14em;
	width: 45%;
}

body.dm .cart-collaterals .cart_totals table.shop_table td {
	text-align: right;
	color: var(--dm-tekst);
}

body.dm .cart-collaterals .cart_totals .order-total th,
body.dm .cart-collaterals .cart_totals .order-total td {
	border-bottom: 0;
	padding-top: 1.8rem;
	font-size: 1.7rem;
}

body.dm .cart-collaterals .cart_totals .order-total td .amount {
	/*
	 * Kwota do zapłaty tym samym krojem co reszta interfejsu.
	 * Do 27.08.2026 stała tu antykwa z nagłówków - ta sama liczba
	 * wyglądała inaczej w koszyku i inaczej na karcie produktu.
	 * Kwoty czyta się, a nie ozdabia.
	 */
	font-family: var(--dm-pismo);
	font-size: 2.4rem;
	font-weight: 500;
}

body.dm .cart-collaterals .wc-proceed-to-checkout {
	padding: 2rem 0 0;
}

body.dm .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0;
	font-size: var(--dm-btn-pismo);
}

/*
 * Sprzedaż krzyżowa („Może Ci się spodobać") nie mieści się w wąskiej
 * kolumnie obok kwot - schodzi pod obie kolumny.
 */
body.dm.woocommerce-cart .cross-sells {
	grid-column: 1 / -1;
	width: 100%;
	float: none;
}

/*
 * SEKCJA POLECANYCH POD KOSZYKIEM.
 *
 * Siedzi wewnątrz opakowania, które jest siatką dwukolumnową, więc
 * bez tego zajęłaby jedną kolumnę i cztery kafle wcisnęłyby się
 * w miejsce karty z kwotami.
 */
body.dm.woocommerce-cart .dm-koszyk-polecane {
	grid-column: 1 / -1;
	width: 100%;
	padding-top: clamp(4.8rem, 5vw, 7.2rem);
}

/* ---------------------------------------------------------------------
   KOD RABATOWY

   Sklep wypisuje własne pole w stopce tabeli produktów. Chowamy je tam
   i pokazujemy nasze, w karcie podsumowania - wypisane w `woo.php`.

   UKRYWAMY STYLEM, BO NIE MA CZEGO ZDJĄĆ ZACZEPIENIEM: `cart.php`
   wypisuje ten blok wprost. Jedyną alternatywą byłoby nadpisanie całego
   szablonu koszyka, czyli plik do przeglądania przy każdej aktualizacji
   sklepu - za dużo jak na przeniesienie jednego pola.
   --------------------------------------------------------------------- */

body.dm .woocommerce table.cart td.actions .coupon {
	display: none;
}

body.dm .woocommerce table.cart td.actions {
	text-align: right;
}

.dm-kupon {
	margin: 0 0 2.4rem;
	padding: 0 0 2.4rem;
	border-bottom: 1px solid var(--dm-ramka);
}

.dm-kupon__etykieta {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst);
}

.dm-kupon__wiersz {
	display: flex;
	gap: 1rem;
}

.dm-kupon__pole {
	flex: 1;
	min-width: 0;
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-akapit);
	line-height: 1.6;
	padding: 1.3rem 1.6rem;
	border: 1px solid var(--dm-ramka-pole);
	border-radius: 10px;
	background: var(--dm-biel);
	color: var(--dm-tekst);
	transition: border-color 150ms;
}

.dm-kupon__pole:focus {
	border-color: var(--dm-tekst);
	outline: none;
	box-shadow: none;
}

.dm-kupon__przycisk {
	flex: 0 0 auto;
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-label);
	font-weight: var(--dm-btn-waga);
	letter-spacing: var(--dm-btn-odstep);
	text-transform: uppercase;
	padding: 1.3rem 2rem;
	border: 1px solid var(--dm-tekst);
	border-radius: 10px;
	background: none;
	color: var(--dm-tekst);
	cursor: pointer;
	transition: background-color var(--dm-btn-czas), color var(--dm-btn-czas);
}

.dm-kupon__przycisk:hover {
	background: var(--dm-tekst);
	color: var(--dm-tekst-jasny);
}

/* ---------------------------------------------------------------------
   KASA - DWIE KOLUMNY

   Po lewej dane, które trzeba wypełnić, po prawej zamówienie i płatności.
   Ten sam podział co w koszyku, żeby przejście z jednego ekranu na drugi
   nie zmieniało rozkładu strony.
   --------------------------------------------------------------------- */

body.dm.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(32rem, 42rem);
	grid-template-rows: auto 1fr;
	align-items: start;
	gap: 0 clamp(2.4rem, 3vw, 4rem);
}

body.dm.woocommerce-checkout form.checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 100%;
	float: none;
}

body.dm.woocommerce-checkout form.checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	margin-top: 0;
}

body.dm.woocommerce-checkout form.checkout #order_review {
	grid-column: 2;
	grid-row: 2;
	width: 100%;
	float: none;
	position: sticky;
	top: 12rem;
	padding: 2.8rem;
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-blok);
	background: var(--dm-tlo-jasne);
}

/*
 * Dane rozliczeniowe i adres wysyłki jeden pod drugim, każdy na pełną
 * szerokość lewej kolumny. Sklep ustawia im `float` i 47% szerokości -
 * czyli dwie wąskie kolumny wewnątrz i tak już wąskiej kolumny.
 */
body.dm.woocommerce-checkout .col2-set .col-1,
body.dm.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
	margin: 0;
}

body.dm.woocommerce-checkout .col2-set .col-2 {
	margin-top: 3.2rem;
}

/*
 * Pola w dwóch kolumnach. Pary ustawia `dm_pola_kasy_w_dwie_kolumny()`
 * w `woo.php` - tutaj jest tylko siatka, w której te pary siadają.
 * Siatka zamiast sklepowych `float`, bo przy `float` pole ukryte
 * warunkowo (np. województwo) zostawia dziurę i przesuwa resztę.
 */
body.dm.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.dm.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body.dm.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.8rem 2rem;
}

body.dm.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
body.dm.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row,
body.dm.woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}

body.dm.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
body.dm.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-wide,
body.dm.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .notes,
body.dm.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .notes,
/*
 * Uwagi do zamówienia zawsze przez całą szerokość - to jedno pole
 * i jest tekstowe. Obejmujemy cały blok, a nie samą klasę `form-row-wide`,
 * bo sklep jej temu polu nie daje.
 */
body.dm.woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row {
	grid-column: 1 / -1;
}

/* Tabela zamówienia w karcie - bez ramki w ramce, jak w koszyku. */
body.dm.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	border-radius: 0;
	margin: 0;
}

body.dm.woocommerce-checkout #order_review table.shop_table th,
body.dm.woocommerce-checkout #order_review table.shop_table td {
	background: none;
	padding: 1.4rem 0;
	border-top: 0;
	border-bottom: 1px solid var(--dm-ramka);
}

body.dm.woocommerce-checkout #order_review table.shop_table tfoot .order-total th,
body.dm.woocommerce-checkout #order_review table.shop_table tfoot .order-total td {
	border-bottom: 0;
	font-size: 1.7rem;
}

body.dm.woocommerce-checkout #order_review table.shop_table tfoot .order-total td .amount {
	/*
	 * Kwota do zapłaty tym samym krojem co reszta interfejsu.
	 * Do 27.08.2026 stała tu antykwa z nagłówków - ta sama liczba
	 * wyglądała inaczej w koszyku i inaczej na karcie produktu.
	 * Kwoty czyta się, a nie ozdabia.
	 */
	font-family: var(--dm-pismo);
	font-size: 2.4rem;
	font-weight: 500;
}

body.dm.woocommerce-checkout #order_review #payment {
	background: none;
	border-radius: 0;
	margin-top: 2rem;
}

body.dm.woocommerce-checkout #order_review #payment ul.payment_methods {
	padding: 0;
	border-bottom: 1px solid var(--dm-ramka);
}

body.dm.woocommerce-checkout #order_review #payment div.form-row.place-order {
	padding: 2rem 0 0;
}

body.dm.woocommerce-checkout #order_review #payment #place_order {
	width: 100%;
}

/* ---------------------------------------------------------------------
   KOSZYK I KASA NA WĄSKIM EKRANIE

   Poniżej 62em obie strony wracają do jednej kolumny. Karta podsumowania
   przestaje być przyklejona - na telefonie zasłaniałaby połowę ekranu.
   --------------------------------------------------------------------- */

@media (max-width: 62em) {

	body.dm.woocommerce-cart .woocommerce,
	body.dm.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	body.dm.woocommerce-checkout form.checkout #customer_details,
	body.dm.woocommerce-checkout form.checkout #order_review_heading,
	body.dm.woocommerce-checkout form.checkout #order_review {
		grid-column: 1;
		grid-row: auto;
	}

	body.dm .cart-collaterals,
	body.dm.woocommerce-checkout form.checkout #order_review {
		position: static;
		margin-top: 3.2rem;
	}

	body.dm.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	body.dm.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
	body.dm.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------
   NAPISY I ODSTĘPY NA KOSZYKU I KASIE - 27.08.2026
   --------------------------------------------------------------------- */

/*
 * Tytuł strony bliżej nagłówka. Domyślne 4,4 rem odstępu od paska plus
 * własny margines nagłówka dawały pas pustego miejsca nad słowem
 * „Koszyk", zanim zaczynała się jakakolwiek treść.
 */
body.dm.woocommerce-cart .dm-strona-sklepu,
body.dm.woocommerce-checkout .dm-strona-sklepu {
	padding-top: 2.4rem;
}

body.dm.woocommerce-cart .dm-strona-sklepu > h1,
body.dm.woocommerce-checkout .dm-strona-sklepu > h1 {
	margin-top: 0;
	margin-bottom: 2.4rem;
}

/*
 * PUSTA RAMKA NA KOMUNIKATY ZNIKA Z SIATKI.
 *
 * Sklep wypisuje ją zawsze, także gdy nie ma czego pokazać. Ma wtedy
 * zero wysokości, ale jest pełnoprawnym wierszem siatki - a siatka ma
 * odstęp 40 px. Czyli pod tytułem stał pas pustego miejsca, którego
 * nie dawało się skrócić marginesem tytułu, bo to nie był margines.
 *
 * `:empty` łapie ją tylko wtedy, gdy naprawdę nic w niej nie ma -
 * komunikat o dodaniu kuponu albo o błędzie wyświetli się normalnie.
 */
body.dm.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:empty,
body.dm.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

/*
 * Sam koszyk zaczyna się zaraz pod tytułem.
 *
 * Formularz koszyka ma własny górny margines, który dokładał się do
 * marginesu tytułu - razem robiło to pas pustego miejsca wysokości
 * połowy pierwszej pozycji.
 */
body.dm.woocommerce-cart .woocommerce-cart-form {
	margin-top: 0;
}

/*
 * KASA NIE MA TYTUŁU.
 *
 * Nagłówek „Zamówienie" nie mówi nic, czego nie mówi już karta
 * „Twoje zamówienie" po prawej i sam formularz. Zdejmujemy go stylem,
 * a nie z szablonu - tytuł strony jest potrzebny w zakładce przeglądarki,
 * w wynikach wyszukiwania i w menu panelu.
 */
body.dm.woocommerce-checkout .dm-strona-sklepu > h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Etykiety pól pogrubione - łatwiej prowadzą wzrok przez formularz. */
body.dm .woocommerce form .form-row label {
	font-weight: 500;
	color: var(--dm-tekst);
}

/*
 * KRAJ NA CAŁĄ SZEROKOŚĆ KOLUMNY.
 *
 * Przy jednym dostępnym kraju sklep renderuje listę wyboru z jedną
 * pozycją, a przeglądarka daje takiej liście szerokość jej treści -
 * czyli sześćdziesiąt kilka pikseli na napis „Polska". Wyglądało to
 * jak przycisk wciśnięty między dwa pełne pola.
 *
 * Ta sama reguła obejmuje `<strong>`, bo część konfiguracji sklepu
 * wypisuje kraj jako zwykły napis zamiast listy.
 */
body.dm.woocommerce-checkout .form-row select,
body.dm.woocommerce-checkout .woocommerce-input-wrapper > strong {
	display: block;
	width: 100%;
}

body.dm.woocommerce-checkout .woocommerce-input-wrapper > strong {
	font-weight: 400;
	font-size: var(--dm-txt-akapit);
	line-height: 1.6;
	padding: 1.3rem 1.6rem;
	border: 1px solid var(--dm-ramka-pole);
	border-radius: 10px;
	background: var(--dm-tlo-jasne);
	color: var(--dm-tekst-2);
}

/* ---------------------------------------------------------------------
   DARMOWA DOSTAWA OSIĄGNIĘTA

   Wiersz wysyłki razem z kalkulatorem kosztów schodzi z podsumowania,
   a na jego miejsce wchodzi jedno zdanie z ikoną. Klasę na `body`
   dokłada `dm_klasa_darmowej_dostawy()` w `woo.php`.

   WYJĄTEK: gdy sklep ma metody do wyboru (lista `#shipping_method`),
   wiersz zostaje. Kupujący musi wskazać sposób dostawy, a metody z mapą
   punktów odbioru pokazują ją właśnie w tym wierszu. Ukryty wiersz
   oznaczałby paczkę bez wybranego punktu. Stawki są wtedy zerowe -
   `dm_zeruj_stawki_od_progu()`. Warunek przez `:has()`, nie przez klasę
   na `body`: lista przerysowuje się skryptem po każdej zmianie koszyka,
   a klasa na `body` zostaje taka, jaka była przy wczytaniu strony.
   --------------------------------------------------------------------- */

body.dm.dm-darmowa-dostawa .woocommerce-shipping-calculator {
	display: none;
}

/* Osobna reguła: przeglądarka bez `:has()` odrzuca całą listę selektorów,
   więc w jednej regule straciłaby także ukrycie kalkulatora. */
body.dm.dm-darmowa-dostawa .woocommerce-shipping-totals:not(:has(#shipping_method)) {
	display: none;
}

body.dm .dm-darmowa th {
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--dm-ramka);
	background: none;
	letter-spacing: normal;
	text-transform: none;
}

.dm-darmowa__tresc {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-akapit);
	font-weight: 500;
	color: var(--dm-zielen-ciemna);
	text-transform: none;
	letter-spacing: normal;
}

.dm-darmowa__tresc svg {
	flex: 0 0 auto;
}

/*
 * Zapowiedź kosztu wysyłki stoi w tym samym wierszu, w którym sklep
 * chciał pokazać formularz z kodem pocztowym. Jest zdaniem, nie kwotą
 * do zapłaty - stąd krój i kolor tekstu pobocznego, a nie ceny.
 */
.dm-wysylka-od {
	display: inline-block;
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-2);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------
   DROBIAZGI
   --------------------------------------------------------------------- */

body.dm .woocommerce .quantity input.qty {
	border: 1px solid var(--dm-ramka-pole);
	border-radius: 10px;
	padding: 1rem;
	font-family: var(--dm-pismo);
	background: var(--dm-biel);
}

/*
 * KAŻDA KWOTA W SKLEPIE IDZIE TYM SAMYM KROJEM.
 *
 * Kwoty pojawiają się w kilkunastu miejscach, z których część rysuje
 * sklep, a część my: karta produktu, kafel, koszyk, podsumowanie, kasa,
 * konto, powiadomienia. Wystarczyło, żeby jedno z nich odziedziczyło
 * krój ozdobny, i ta sama liczba wyglądała na stronie inaczej niż
 * w koszyku.
 *
 * Reguła celuje w znacznik `.amount` i `.price` sklepu oraz w nasze
 * klasy cen. Nie skracamy jej do samego `.amount` - w koszyku kwota
 * bywa zagnieżdżona w elemencie, który ma własny krój.
 */
body.dm .woocommerce .price,
body.dm .woocommerce .amount,
body.dm .woocommerce-Price-amount,
body.dm .dm-produkt__cena,
body.dm .dm-kafel-produktu__cena,
body.dm .dm-slajd__cena,
body.dm .bpo-omnibus {
	font-family: var(--dm-pismo);
	font-variant-numeric: lining-nums tabular-nums;
}

body.dm .woocommerce .price,
body.dm .woocommerce .amount {
	color: var(--dm-tekst);
}

body.dm .woocommerce .woocommerce-breadcrumb {
	display: none;
}

/* ---------------------------------------------------------------------
   KOSZYK NA TELEFONIE - POZYCJA JAKO KAFEL, NIE TABELA

   Poniżej 48em sklep zwija tabelę w listę i przed każdą komórką
   dopisuje etykietę: „Produkt:", „Cena:", „Ilość:", „Kwota:".
   Działa, ale wygląda jak surowy formularz, a ZDJĘCIA PRODUKTU
   NIE WIDAĆ WCALE - komórka z miniaturą jest tam ukryta.

   Dla kupującego zdjęcie jest najszybszym sposobem sprawdzenia,
   co właściwie ma w koszyku. Dlatego wraca, a wiersz zamienia się
   w kafel: miniatura po lewej, reszta po prawej.
   --------------------------------------------------------------------- */

@media (max-width: 48em) {

	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item {
		display: grid;
		grid-template-columns: 8rem minmax(0, 1fr);
		grid-template-areas:
			"zdjecie nazwa"
			"zdjecie cena"
			"zdjecie ilosc"
			"kwota   kwota";
		gap: .6rem 1.6rem;
		align-items: start;
		padding: 1.8rem 0;
		border-bottom: 1px solid var(--dm-ramka-pole);
	}

	/* Miniatura wraca. Komórka jest ukrywana arkuszem sklepu, więc
	   trzeba ją pokazać wprost - i dopiero potem układać. */
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail {
		display: block;
		grid-area: zdjecie;
		padding: 0;
	}

	/*
	 * Kwadratowa miniatura. Wysokość z `!important`, bo arkusz sklepu
	 * ustawia `height: auto` na każdym obrazku w swoim obrębie - zdjęcie
	 * wychodziło wtedy wyższe niż szerokie i rozpychało wiersz kafla.
	 */
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail img {
		width: 8rem !important;
		height: 8rem !important;
		object-fit: cover;
		border-radius: var(--dm-r-karta, 8px);
		display: block;
	}

	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name  { grid-area: nazwa; }
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price { grid-area: cena; }
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity { grid-area: ilosc; }
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal { grid-area: kwota; }

	/*
	 * WYRÓWNANIE DO LEWEJ WYMAGA `!important`.
	 *
	 * Arkusz sklepu ma `text-align: right !important` na każdej komórce
	 * w tym widoku - przy równym priorytecie decyduje waga, a przy
	 * `!important` po drugiej stronie nie ma innego wyjścia niż to samo.
	 * Bez tego nazwa produktu i cena uciekają na prawą krawędź kafla,
	 * odklejone od zdjęcia po lewej.
	 */
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td {
		padding: 0;
		border: 0;
		text-align: left !important;
	}

	/*
	 * Etykiety „Produkt:" i „Cena:" znikają - przy zdjęciu i nazwie obok
	 * siebie nikt nie potrzebuje podpisu, że to jest produkt. Zostają
	 * przy ilości i kwocie, gdzie sama liczba nie mówi, czego dotyczy.
	 */
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name::before,
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price::before,
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail::before,
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove::before {
		content: none !important;
	}

	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity::before,
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal::before {
		float: none !important;
		font-weight: 500;
		margin-right: .8rem;
	}

	/* Pole liczby sztuk stoi po lewej, pod ceną - nie wisi na prawej krawędzi. */
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity .quantity {
		display: inline-flex;
		vertical-align: middle;
	}

	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name a {
		font-size: var(--dm-txt-nazwa);
		line-height: 1.35;
	}

	/* Miejsce na krzyżyk w rogu - inaczej nazwa produktu wchodzi pod niego. */
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name {
		padding-right: 4.4rem;
	}

	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal {
		padding-top: .8rem;
		font-weight: 500;
	}

	/*
	 * Krzyżyk kasujący pozycję siedzi w rogu kafla, a nie w osobnym
	 * wierszu nad nim. Obszar dotyku 40 px - to jest przycisk, który
	 * kasuje, więc nie może być trafiany przypadkiem ani z trudem.
	 */
	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item {
		position: relative;
	}

	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove {
		position: absolute;
		top: 1.4rem;
		right: 0;
		padding: 0;
	}

	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove::before {
		content: none;
	}

	body.dm.woocommerce-cart table.shop_table_responsive tr.cart_item a.remove {
		width: var(--dm-cel-dotyku);
		height: var(--dm-cel-dotyku);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2.2rem;
	}
}

/* ---------------------------------------------------------------------
   METODY DOSTAWY - od 28.09.2026

   Nazwa po lewej, cena po prawej, zwykłą grubością; małe logo
   przewoźnika przed nazwą. Etykietę składa filtr
   `woocommerce_cart_shipping_method_full_label` w `woo.php`.

   W KOSZYKU wiersz „Przesyłka" układa się w pionie: napis nad listą,
   lista na całą szerokość karty - nazwy zaczynają się równo z napisami
   „Kwota", „Przesyłka", „Łącznie".
   W KASIE napis „Przesyłka" znika, lista zajmuje cały wiersz.
   --------------------------------------------------------------------- */

body.dm .woocommerce ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

body.dm .woocommerce ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0;
	padding: .7rem 0;
	text-indent: 0;
	line-height: 1.4;
}

body.dm .woocommerce ul#shipping_method li input {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--dm-tekst);
}

body.dm .woocommerce ul#shipping_method li label {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.dm-dostawa {
	display: flex;
	align-items: center;
	gap: .7rem;
	width: 100%;
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--dm-tekst);
}

.dm-dostawa__logo {
	flex: 0 0 3.4rem;
	width: 3.4rem;
	height: 2rem;
	object-fit: contain;
}

/* Logo Orlen Paczki jest kwadratem - w pełnej wysokości odstaje od
   poziomych logo pozostałych przewoźników. Szerokość pola zostaje,
   żeby nazwy metod stały w jednej linii. */
.dm-dostawa__logo[src*="orlen-paczka"] {
	height: 1.5rem;
}

.dm-dostawa__nazwa {
	flex: 1 1 auto;
	min-width: 0;
	/* Nazwa w jednym wierszu - najdłuższa („DPD Pickup - punkt odbioru")
	   mieści się w najwęższej karcie podsumowania (sprawdzone 390-1920 px). */
	white-space: nowrap;
}

.dm-dostawa__cena,
body.dm .woocommerce .dm-dostawa__cena .amount {
	flex: 0 0 auto;
	margin-left: auto;
	font-weight: 400;
	white-space: nowrap;
}

/* Wiersz dostawy to jedna komórka na całą szerokość (szablon
   `woocommerce/cart/cart-shipping.php`). W koszyku napis nad listą -
   krojem napisów „Kwota", „Łącznie". */
body.dm .woocommerce tr.dm-wiersz-dostawy td,
body.dm .cart-collaterals .cart_totals table.shop_table tr.dm-wiersz-dostawy td {
	text-align: left;
}

body.dm .woocommerce tr.dm-wiersz-dostawy td::before {
	display: none;
}

.dm-wiersz-dostawy__napis {
	display: block;
	margin-bottom: .6rem;
	font-size: var(--dm-txt-label);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dm-tekst);
}

/* Cena metody zwykłą grubością - wiersz kasy ma pogrubienie na kwotach. */
body.dm .woocommerce .dm-dostawa,
body.dm .woocommerce .dm-dostawa .amount,
body.dm .woocommerce .dm-dostawa bdi {
	font-weight: 400;
}

/* Kasa: nagłówki sekcji w skali „Podsumowania koszyka". */
body.dm.woocommerce-checkout .woocommerce-billing-fields > h3,
body.dm.woocommerce-checkout .woocommerce-additional-fields > h3,
body.dm.woocommerce-checkout #order_review_heading {
	font-size: 3rem;
	font-weight: 400;
	color: var(--dm-tekst);
}

/* Kasa: oddech między nazwą produktu a kwotą. */
body.dm.woocommerce-checkout #order_review table.shop_table .product-name {
	padding-right: 2.4rem;
}

/* ---------------------------------------------------------------------
   PASEK DO DARMOWEJ DOSTAWY - pod tytułem koszyka, od 28.09.2026
   Pół szerokości strony; na węższym ekranie cała.
   --------------------------------------------------------------------- */

.dm-pasek-dostawy {
	max-width: 50%;
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin: 0 0 3rem;
	padding: 1.6rem 2.2rem;
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-karta);
	background: var(--dm-tlo-cieple);
}

.dm-pasek-dostawy[hidden] {
	display: none;
}

@media (max-width: 64em) {
	.dm-pasek-dostawy {
		max-width: none;
	}
}

.dm-pasek-dostawy__ikona {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	background: var(--dm-tlo-jasne);
	color: var(--dm-tekst);
}

.dm-pasek-dostawy__tresc {
	flex: 1 1 auto;
	min-width: 0;
}

.dm-pasek-dostawy__tekst {
	margin: 0 0 .9rem;
	font-size: var(--dm-txt-akapit);
	line-height: 1.5;
	color: var(--dm-tekst);
}

.dm-pasek-dostawy__tekst strong {
	font-weight: 500;
}

.dm-pasek-dostawy__os {
	display: block;
	height: .6rem;
	border-radius: var(--dm-r-pigula);
	background: var(--dm-ramka);
	overflow: hidden;
}

.dm-pasek-dostawy__postep {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--dm-tekst);
	transition: width 300ms ease;
}

.dm-pasek-dostawy--osiagnieta .dm-pasek-dostawy__postep {
	background: var(--dm-zielen-ciemna);
}

.dm-pasek-dostawy--osiagnieta .dm-pasek-dostawy__ikona {
	color: var(--dm-zielen-ciemna);
}

/*
 * „Wybierz punkt odbioru" (wtyczka Furgonetki, `#select-point-container`)
 * pod nazwą metody, a nie ściśnięty obok niej w tym samym wierszu.
 */
body.dm .woocommerce ul#shipping_method li {
	flex-wrap: wrap;
}

body.dm .woocommerce ul#shipping_method li #select-point-container {
	flex: 1 1 100%;
	margin: .2rem 0 .4rem calc(1.3rem + .7rem + 3.4rem + .7rem);
	font-size: var(--dm-txt-maly);
	font-weight: 400;
	line-height: 1.5;
}

body.dm .woocommerce ul#shipping_method li #select-point-container a {
	font-weight: 500;
	color: var(--dm-tekst);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/*
 * Kasa: druga kolumna (Kwota) do prawej - kwoty produktów, sumy
 * i nagłówek w jednej linii z cenami metod dostawy (28.09.2026).
 */
body.dm.woocommerce-checkout #order_review table.shop_table th.product-total,
body.dm.woocommerce-checkout #order_review table.shop_table td.product-total,
body.dm.woocommerce-checkout #order_review table.shop_table tfoot td {
	text-align: right;
}

/* ---------------------------------------------------------------------
   KOSZYK: TYTUŁ W LEWEJ KOLUMNIE, KARTA PODSUMOWANIA OD GÓRY
   (28.09.2026). Karta zajmuje trzy pierwsze wiersze siatki - tytuł
   z paskiem, komunikaty, tabela - więc zaczyna się na wysokości tytułu.
   Nadmiar wysokości karty bierze ostatni wiersz (1fr), a nie tytuł.
   --------------------------------------------------------------------- */

body.dm.woocommerce-cart .woocommerce:has(> .dm-koszyk-glowa) {
	grid-template-rows: auto auto 1fr;
}

body.dm.woocommerce-cart .woocommerce > .dm-koszyk-glowa,
body.dm.woocommerce-cart .woocommerce:has(> .dm-koszyk-glowa) > .woocommerce-notices-wrapper,
body.dm.woocommerce-cart .woocommerce > .woocommerce-cart-form {
	grid-column: 1;
}

body.dm.woocommerce-cart .woocommerce:has(> .dm-koszyk-glowa) > .cart-collaterals {
	grid-column: 2;
	grid-row: 1 / span 3;
}

.dm-koszyk-glowa > h1 {
	margin: 0 0 2.4rem;
}

.dm-koszyk-glowa .dm-pasek-dostawy {
	max-width: 50%;
	margin-bottom: 0;
}

@media (max-width: 62em) {
	.dm-koszyk-glowa .dm-pasek-dostawy {
		max-width: none;
	}
}

@media (max-width: 62em) {
	body.dm.woocommerce-cart .woocommerce:has(> .dm-koszyk-glowa) {
		grid-template-rows: none;
	}

	body.dm.woocommerce-cart .woocommerce:has(> .dm-koszyk-glowa) > .cart-collaterals {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ---------------------------------------------------------------------
   KOD RABATOWY - ROZWIJANY, NIŻSZE POLE I PRZYCISK (28.09.2026)
   --------------------------------------------------------------------- */

.dm-kupon {
	margin-bottom: 0;
	padding-bottom: 1.8rem;
}

.dm-kupon__rozwin > summary.dm-kupon__etykieta {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	margin: 0;
	font-size: var(--dm-txt-akapit);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.dm-kupon__rozwin > summary::-webkit-details-marker {
	display: none;
}

.dm-kupon__strzalka {
	flex: 0 0 auto;
	width: .7rem;
	height: .7rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	/* Obrócony kwadrat ma „ciężar" w dolnym rogu - przesunięcie o jego
	   ćwierć w górę stawia grot na środku wysokości napisu. */
	transform: translateY(-.2rem) rotate(45deg);
	transition: transform 200ms;
}

.dm-kupon__rozwin[open] .dm-kupon__strzalka {
	transform: translateY(.2rem) rotate(-135deg);
}

.dm-kupon__rozwin .dm-kupon__wiersz {
	margin-top: 1.2rem;
}

.dm-kupon__pole {
	padding: .8rem 1.4rem;
	line-height: 1.5;
}

.dm-kupon__przycisk {
	padding: .8rem 1.6rem;
}

/*
 * Napis i kwota na środku wiersza, między separatorami (28.09.2026).
 * Sklep daje komórkom `vertical-align: top` - mniejszy napis „KWOTA"
 * stał wtedy przy górnej kresce, a pod nim zostawał pas pustego miejsca.
 */
body.dm .cart-collaterals .cart_totals table.shop_table th,
body.dm .cart-collaterals .cart_totals table.shop_table td,
body.dm.woocommerce-checkout #order_review table.shop_table th,
body.dm.woocommerce-checkout #order_review table.shop_table td {
	vertical-align: middle;
}

/* ---------------------------------------------------------------------
   METODY PŁATNOŚCI W KASIE - od 30.09.2026

   Lista w jednej ramce, każda metoda w osobnym wierszu: radio i nazwa
   po lewej, logo po prawej. Zaznaczona metoda dostaje ciepłe tło i ramkę,
   a jej opis rozwija się pod nazwą na całą szerokość wiersza.
   Logo daje wtyczka płatności wewnątrz `label`, dlatego kolejność
   ustawia `order`, a nie znaczniki.
   --------------------------------------------------------------------- */

body.dm.woocommerce-checkout #order_review #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-karta);
	background: var(--dm-biel);
	overflow: hidden;
}

body.dm.woocommerce-checkout #order_review #payment ul.payment_methods li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 1.5rem 1.6rem;
	border-top: 1px solid var(--dm-ramka);
	line-height: 1.4;
	text-align: left;
}

body.dm.woocommerce-checkout #order_review #payment ul.payment_methods li:first-child {
	border-top: 0;
}

/* Zaznaczenie łagodne: ciepłe tło i ramka w kolorze linii, nie czerń. */
body.dm.woocommerce-checkout #order_review #payment ul.payment_methods li:has(> input:checked) {
	background: var(--dm-tlo-jasne);
	box-shadow: inset 0 0 0 1px var(--dm-linia-ciemna);
	border-radius: var(--dm-r-karta);
}

body.dm.woocommerce-checkout #order_review #payment ul.payment_methods li:has(> input:checked) div.payment_box {
	background: var(--dm-biel);
}

body.dm.woocommerce-checkout #order_review #payment ul.payment_methods li > input.input-radio {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--dm-tekst);
}

body.dm.woocommerce-checkout #order_review #payment ul.payment_methods li > label {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--dm-tekst);
	cursor: pointer;
}

body.dm.woocommerce-checkout #order_review #payment ul.payment_methods li > label img {
	order: 2;
	float: none;
	flex: 0 0 auto;
	width: auto;
	max-width: 6.4rem;
	height: 2.2rem;
	margin: 0 0 0 auto;
	object-fit: contain;
	vertical-align: middle;
}

body.dm.woocommerce-checkout #order_review #payment ul.payment_methods li div.payment_box {
	flex: 0 0 100%;
	margin: .4rem 0 0;
	padding: 1.2rem 1.4rem;
	background: var(--dm-tlo-jasne);
}

body.dm.woocommerce-checkout #order_review #payment ul.payment_methods li div.payment_box::before {
	display: none;
}

body.dm.woocommerce-checkout #order_review #payment ul.payment_methods li div.payment_box p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   KASA: WYSYŁKA W LEWEJ KOLUMNIE - od 30.09.2026

   Blok z `includes/kasa.php`, nad polem „Wysłać na inny adres?".
   Lista w ramce jak lista płatności: radio, logo, nazwa, cena.
   --------------------------------------------------------------------- */

body.dm.woocommerce-checkout .dm-kasa-wysylka {
	margin: 3.2rem 0 2.4rem;
}

body.dm.woocommerce-checkout .dm-kasa-wysylka__tytul {
	margin: 0 0 1.6rem;
	font-family: var(--dm-pismo-tyt);
	font-size: 3rem;
	font-weight: 400;
	color: var(--dm-tekst);
}

body.dm.woocommerce-checkout .dm-kasa-wysylka ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-karta);
	background: var(--dm-biel);
	overflow: hidden;
}

body.dm.woocommerce-checkout .dm-kasa-wysylka ul#shipping_method li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 1.5rem 1.6rem;
	border-top: 1px solid var(--dm-ramka);
}

body.dm.woocommerce-checkout .dm-kasa-wysylka ul#shipping_method li:first-child {
	border-top: 0;
}

body.dm.woocommerce-checkout .dm-kasa-wysylka ul#shipping_method li:has(> input:checked) {
	background: var(--dm-tlo-jasne);
	box-shadow: inset 0 0 0 1px var(--dm-linia-ciemna);
	border-radius: var(--dm-r-karta);
}

body.dm.woocommerce-checkout .dm-kasa-wysylka ul#shipping_method li > label {
	flex: 1 1 0;
}

/* Przycisk mapy punktów od przewoźnika - pod nazwą, na całą szerokość wiersza. */
body.dm.woocommerce-checkout .dm-kasa-wysylka ul#shipping_method li > :not(input):not(label) {
	flex: 0 0 100%;
	margin: .4rem 0 0 2.4rem;
}

body.dm.woocommerce-checkout .dm-kasa-wysylka__brak {
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-2);
}

/* Podsumowanie po prawej: jeden wiersz „Dostawa". */
body.dm.woocommerce-checkout #order_review tr.dm-wiersz-dostawy--kasa th,
body.dm.woocommerce-checkout #order_review tr.dm-wiersz-dostawy--kasa td {
	text-align: left;
}

body.dm.woocommerce-checkout #order_review tr.dm-wiersz-dostawy--kasa td {
	text-align: right;
}

body.dm.woocommerce-checkout #ship-to-different-address[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------
   STRONA PODZIĘKOWANIA - od 30.09.2026
   --------------------------------------------------------------------- */

/* Ramka stanu płatności (wtyczka Przelewy24): czytelne pismo, jeden kolor. */
body.dm .p24-payment-status__title {
	font-size: 2rem;
	color: var(--dm-tekst);
}

body.dm .p24-payment-status__description,
body.dm .p24-payment-status__detail {
	font-size: var(--dm-txt-akapit);
	line-height: 1.6;
	color: var(--dm-tekst-2);
}

body.dm .p24-payment-status__badge {
	font-size: var(--dm-txt-label);
}

/* Szczegóły zamówienia: białe pola, zwarta tabela zamiast całej szerokości. */
body.dm .woocommerce-order-details {
	max-width: 72rem;
}

body.dm .woocommerce-order-details table.shop_table th,
body.dm .woocommerce-order-details table.shop_table td {
	background: var(--dm-biel);
}

/* Wiersze podsumowania jako „Etykieta: wartość" obok siebie - bez
   rozciągania na szerokość kolumn tabeli produktów. */
body.dm .woocommerce-order-details table.shop_table,
body.dm .woocommerce-order-details table.shop_table thead,
body.dm .woocommerce-order-details table.shop_table tbody,
body.dm .woocommerce-order-details table.shop_table tfoot {
	display: block;
}

body.dm .woocommerce-order-details table.shop_table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

body.dm .woocommerce-order-details table.shop_table thead th,
body.dm .woocommerce-order-details table.shop_table tbody td {
	flex: 1 1 auto;
}

body.dm .woocommerce-order-details table.shop_table thead th:last-child,
body.dm .woocommerce-order-details table.shop_table tbody td:last-child {
	flex: 0 0 auto;
	text-align: right;
}

body.dm .woocommerce-order-details table.shop_table tfoot tr {
	justify-content: flex-start;
	border-top: 1px solid var(--dm-ramka);
}

body.dm .woocommerce-order-details table.shop_table tfoot th,
body.dm .woocommerce-order-details table.shop_table tfoot td {
	border: 0;
	text-align: left;
}

body.dm .woocommerce-order-details table.shop_table tfoot th {
	flex: 0 0 auto;
	padding-right: 0;
}

body.dm .woocommerce-order-details table.shop_table tfoot td {
	flex: 1 1 auto;
	padding-left: 1.2rem;
}

/* Pasek „Numer zamówienia / Data / ..." - w cienkiej ramce, z oddechem
   od zdania „Dziękujemy" nad nim. */
body.dm .woocommerce-order .woocommerce-thankyou-order-received {
	margin-bottom: 2.4rem;
}

body.dm .woocommerce-order ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem 0;
	margin: 3.2rem 0 4.8rem;
	padding: 1.8rem 0;
	list-style: none;
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-karta);
	background: var(--dm-biel);
}

body.dm .woocommerce-order ul.woocommerce-order-overview li {
	float: none;
	margin: 0;
	padding: 0 2.4rem;
	border-right: 1px solid var(--dm-ramka);
	font-size: var(--dm-txt-label);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--dm-tekst-3);
}

body.dm .woocommerce-order ul.woocommerce-order-overview li:last-child {
	border-right: 0;
}

body.dm .woocommerce-order ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: .4rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--dm-tekst);
}

/* Nagłówek „Szczegóły zamówienia" z odstępem od tabeli. */
body.dm .woocommerce-order-details__title,
body.dm .woocommerce-customer-details .woocommerce-column__title {
	margin-bottom: 1.6rem;
}

body.dm .woocommerce-order-overview li strong {
	font-size: var(--dm-txt-akapit);
}

/* Ikony telefonu i e-maila w adresach - te same kreski co w motywie. */
body.dm .woocommerce-customer-details--phone::before,
body.dm .woocommerce-customer-details--email::before {
	content: "" !important;
	display: inline-block;
	width: 1.8rem;
	height: 1.8rem;
	margin: 0 .8rem 0 0 !important;
	vertical-align: -.35rem;
	background: var(--dm-tekst-3);
	font-family: inherit !important;
	-webkit-mask: var(--dm-ikona) center / contain no-repeat;
	mask: var(--dm-ikona) center / contain no-repeat;
	position: static !important;
}

body.dm .woocommerce-customer-details--phone,
body.dm .woocommerce-customer-details--email {
	margin: .4rem 0 0 !important;
	padding-left: 0 !important;
	text-indent: 0 !important;
}

body.dm .woocommerce-customer-details--phone::before {
	--dm-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.8a12 12 0 0 0 4.7 4.7L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
}

body.dm .woocommerce-customer-details--email::before {
	--dm-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='m3.6 6.4 8.4 6.6 8.4-6.6'/%3E%3C/svg%3E");
}