/**
 * Blok 6, KROK 3 — kontrakt komponentów. Koszyk i checkout składają się WYŁĄCZNIE z nich.
 *
 * ⚠️ WSZYSTKIE klasy mają prefiks `gts-`, i to nie jest kosmetyka nazewnicza.
 * Customizer (734 linie, w bazie, ładuje się po wszystkim) trzyma 12 deklaracji
 * `!important` na `.woocommerce button.button` i `.button-link/.btn`. Elementu,
 * który tych klas NIE nosi, one nie dotyczą — bez wojny o specyficzność i bez
 * wchodzenia do bazy. Pomiar: `blok6-krok1-audyt-stylu-koszyka.md` §6.
 *
 * Zero `!important` w tym pliku.
 */

/* =========================================================================
   1. KARTA — pojemnik wszystkiego. Wzorzec: .kafelki-offer-item
   Checkout: sekcja adresu, sekcja płatności, podsumowanie.
   ========================================================================= */
.gts-karta {
	padding: var( --gts-odstep-4 );
	border-radius: var( --gts-r-karta );
	background: var( --gts-tlo-karty );
}

.gts-karta--cicha { background: #fafafa; }            /* .gts-dop z Etapu A */
.gts-karta--zwarta { padding: var( --gts-odstep-3 ); } /* prawa kolumna, mniej miejsca */

/* =========================================================================
   2. NAGŁÓWEK SEKCJI
   Motyw styluje h2–h4, więc NIE ustawiamy tu rozmiaru ani kroju — tylko rytm.
   ========================================================================= */
.gts-naglowek {
	margin: 0 0 var( --gts-odstep-2 );
}

.gts-naglowek--drobny {
	font-size: var( --gts-tekst-maly );
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var( --gts-tekst-slaby );
}

/* =========================================================================
   3. PODSUMOWANIE ZAMÓWIENIA — prawa kolumna koszyka, prawa kolumna checkoutu.
   Pozycja żyje TUTAJ, nie w tabeli. Tabela znika jako tabela.
   ========================================================================= */
.gts-podsum__pozycja {
	display: flex;
	gap: var( --gts-odstep-2 );
	align-items: flex-start;
	padding-bottom: var( --gts-odstep-3 );
	border-bottom: 1px solid var( --gts-kreska );
}

.gts-podsum__foto {
	flex: 0 0 64px;
	width: 64px;
	line-height: 0;
}

/* WooCommerce wstawia tu własny <img> (czasem opakowany w <a>), więc promień i kadrowanie
   muszą siedzieć na obrazku, nie na kontenerze. */
.gts-podsum__foto img {
	width: 64px;
	height: 64px;
	border-radius: var( --gts-r-obraz );
	object-fit: cover;
}

.gts-podsum__opis { flex: 1 1 auto; min-width: 0; }

/* Kwota za pozycję trzyma się prawej krawędzi i nie zawija. */
.gts-podsum__suma {
	flex: 0 0 auto;
	margin-left: auto;
	font-weight: 600;
	white-space: nowrap;
}

/* Ostatnia pozycja nie potrzebuje kreski — pod nią i tak jest krawędź karty. */
.gts-podsum__pozycja:last-of-type { padding-bottom: 0; border-bottom: 0; }

.gts-podsum__nazwa {
	margin: 0 0 4px;
	font-size: var( --gts-tekst-bazowy );
	font-weight: 600;
	line-height: var( --gts-interlinia );
}

.gts-podsum__cena { font-size: var( --gts-tekst-maly ); color: var( --gts-tekst-slaby ); }

.gts-podsum__wiersz {
	display: flex;
	justify-content: space-between;
	gap: var( --gts-odstep-2 );
	padding: var( --gts-odstep-1 ) 0;
	font-size: var( --gts-tekst-maly );
}

.gts-podsum__wiersz--suma {
	margin-top: var( --gts-odstep-1 );
	padding-top: var( --gts-odstep-2 );
	border-top: 1px solid var( --gts-kreska );
	font-size: 18px;
	font-weight: 700;
}

/* Sterowanie ilością i usunięcie pozycji — drugorzędne wobec ceny. */
.gts-podsum__akcje {
	display: flex;
	gap: var( --gts-odstep-2 );
	align-items: center;
	margin-top: var( --gts-odstep-1 );
}

/* „×" ma zostać znakiem, nie zdaniem. Pełna treść zostaje w aria-label dla czytników. */
.gts-podsum__usun {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
	font-size: 20px;
	color: var( --gts-tekst-slaby );
}

.gts-podsum__usun:hover { color: #c0392b; }

/* =========================================================================
   4. POLE FORMULARZA — etykieta, kontrolka, podpowiedź, błąd.
   ⚠️ `font: inherit` na kontrolkach jest OBOWIĄZKOWE. Bez tego <select> renderuje
   się Arialem, a <textarea> fontem monospace — tak właśnie wyszło w Etapie A.
   ========================================================================= */
.gts-pole { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var( --gts-odstep-2 ); }

.gts-pole__etykieta { font-size: var( --gts-tekst-maly ); font-weight: 600; }
.gts-pole__etykieta[data-wymagane]::after { content: " *"; color: var( --gts-ostrzezenie ); }

/* ⚠️ `appearance: none` jest tu konieczne, nie kosmetyczne. Bez niego macOS rysuje
   natywną kontrolkę Aqua PONAD naszym tłem, ramką i promieniem — na zrzutach z headless
   tego nie widać, ale na prawdziwym Macu select wygląda jak systemowy szary prostokąt.
   Strzałkę rysujemy sami, bo zniknęła razem z natywnym wyglądem. */
.gts-pole__kontrolka {
	width: 100%;
	min-width: 0;
	appearance: none;
	-webkit-appearance: none;
	padding: 13px 16px;
	border: 1px solid rgba( 0, 0, 0, .2 );
	border-radius: var( --gts-r-pole );
	background: #fff;
	font: inherit;                      /* ⬅ patrz nota wyżej */
	font-size: 15px;
	line-height: var( --gts-interlinia );
}

/* Strzałka rysowana jako tło (SVG w data:), bo natywna zniknęła z `appearance: none`.
   Miejsce po prawej robimy paddingiem, żeby tekst nigdy nie wszedł pod strzałkę. */
select.gts-pole__kontrolka {
	padding-right: 40px;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231a1a1a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 16px center;
	cursor: pointer;
}

textarea.gts-pole__kontrolka { min-height: 90px; resize: vertical; }

.gts-pole__kontrolka:focus-visible { outline: 2px solid var( --gts-zielen-ciemna ); outline-offset: 1px; }
.gts-pole__kontrolka:disabled { opacity: .55; cursor: not-allowed; }
.gts-pole__kontrolka[aria-invalid="true"] { border-color: #c0392b; }

.gts-pole__podpowiedz { font-size: 13px; color: var( --gts-tekst-slaby ); }
.gts-pole__blad { font-size: 13px; font-weight: 600; color: #c0392b; }

/* =========================================================================
   5. PRZYCISK W TRZECH ROLACH
   Wartości wprost z .button-link i .single_add_to_cart_button.
   ========================================================================= */
.gts-przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --gts-odstep-1 );
	padding: var( --gts-przycisk-pad );
	border: 0;
	border-radius: var( --gts-r-przycisk );
	font-family: var( --gts-font-naglowek );
	font-size: var( --gts-przycisk-font );
	font-weight: var( --gts-przycisk-waga );
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all .3s ease;
}

.gts-przycisk--glowny      { background: var( --gts-zielen ); color: #000; }
.gts-przycisk--glowny:hover{ background: #333; color: #fff; }

.gts-przycisk--drugorzedny       { background: var( --gts-tlo-drugorz ); color: #000; }
.gts-przycisk--drugorzedny:hover { background: #333; color: #fff; }

/* Rola trzecia: odpowiedź równoprawna, nie wycofanie się („Zostaw AP900"). */
.gts-przycisk--tekstowy {
	padding: var( --gts-odstep-1 ) 0;
	background: none;
	color: inherit;
	font-family: var( --gts-font-tresc );
	font-size: var( --gts-tekst-maly );
	text-decoration: underline;
}

.gts-przycisk--szeroki { width: 100%; }

/* =========================================================================
   6. RAMKA KOMUNIKATU — cztery warianty, jeden kształt.
   ========================================================================= */
.gts-komunikat {
	margin: var( --gts-odstep-2 ) 0;
	padding: var( --gts-odstep-2 ) var( --gts-odstep-3 );
	border-radius: var( --gts-r-karta );
	font-size: var( --gts-tekst-maly );
	line-height: var( --gts-interlinia );
}

/* Bez paska z boku — jednolite tło. Decyzja właściciela 2026-09-15: mocniejsza kreska
   przy krawędzi rozbijała blok na dwie części zamiast go scalać. */
.gts-komunikat--sukces      { background: rgba( 130, 225, 114, .14 ); }
.gts-komunikat--ostrzezenie { background: rgba( 229, 165, 63, .12 ); }
.gts-komunikat--blad        { background: rgba( 192, 57, 43, .08 ); }
.gts-komunikat--info        { background: rgba( 0, 0, 0, .04 ); }

.gts-komunikat__naglowek { margin: 0; font-size: 17px; font-weight: 600; }
.gts-komunikat__tresc    { margin: var( --gts-odstep-1 ) 0 0; }
.gts-komunikat__akcje    { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var( --gts-odstep-2 ); }

/* =========================================================================
   6b. KOMUNIKATY WooCOMMERCE — ten sam kształt co `.gts-komunikat` wyżej.

   ⚠️ Dlaczego to celuje w klasy WooCommerce, a nie tylko w `gts-*`: komunikat
   sukcesu i „info" wypisuje rdzeń Woo ze swoich szablonów, których NIE forkujemy
   (forkujemy wyłącznie `notices/error.php`, i tylko po to, żeby lista błędów
   dostała tłumaczalny nagłówek). Bez tych selektorów dwa z trzech rodzajów
   komunikatu zostałyby przy starym wyglądzie.

   ⚠️ ZERO `!important`, mimo że po drodze stoją reguły z `style.css`. Ten arkusz
   ładuje się PO nim i po arkuszach WooCommerce (zmierzone w nagłówku `/koszyk/`:
   woo 3–5 → html5blank 7 → tokeny 8 → komponenty 9), a specyficzność mamy równą,
   więc wygrywa kolejność. Jedyne, czego stąd nie przeskoczymy, to Customizer —
   patrz nota przy `.woocommerce-info`.

   ⚠️ Arkusz ładuje się TYLKO w koszyku i na checkoucie (`gts_blok6_arkusze()`),
   więc te selektory nie mają jak wyciec na stronę produktu ani do Mojego konta.
   To jest mechanizm utrzymania zakresu, nie przypadek.
   ========================================================================= */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	margin: var( --gts-odstep-2 ) 0;
	padding: var( --gts-odstep-2 ) var( --gts-odstep-3 );
	border: 0;                                  /* kasuje czerwoną i zieloną kreskę u góry */
	border-radius: var( --gts-r-karta );
	font-family: var( --gts-font-tresc );
	font-size: var( --gts-tekst-maly );
	line-height: var( --gts-interlinia );
	font-weight: 400;
	color: var( --gts-tekst );
	display: block;                             /* kasuje flex + space-around ze `style.css` */
}

.woocommerce-error    { background: rgba( 192, 57, 43, .08 ); }
.woocommerce-message  { background: rgba( 130, 225, 114, .14 ); }

/* ⚠️ `.woocommerce-info` dostaje TYLKO tło i promień, i to jest granica możliwego bez
   `!important`. Customizer trzyma na tej klasie sześć deklaracji `!important` (kolor,
   padding, font, ramka), bo wrzucono ją do listy selektorów PRZYCISKÓW. Dziś nic to nie
   psuje: oba `.woocommerce-info` na checkoucie („Powracający klient?", „Masz kupon?")
   są ukryte — zmierzone 0×0. To zabezpieczenie na wypadek, gdy komunikat typu „info"
   się pojawi (np. „brak dostępnych metod płatności” z `checkout/payment.php`).
   Wyjęcie `.woocommerce-info` z listy przycisków w Customizerze to osobna decyzja:
   Customizer żyje wyłącznie w bazie ([[P-019]]) i przy go-live jedzie ręcznie (W4). */
.woocommerce-info     { background: rgba( 0, 0, 0, .04 ); }

/* Ikona błędu ZOSTAJE — rysuje ją font WooCommerce przez `::before`. Motyw skasował
   `::before` dla `info` i `message`, dla błędu NIE, więc nie wymyślamy własnej:
   przesuwamy tylko istniejącą pod nowy padding. Tekst ustępuje jej z drogi. */
.woocommerce-error {
	padding-left: 52px;
}

.woocommerce-error::before {
	left: var( --gts-odstep-3 );
	top: var( --gts-odstep-2 );
	color: #c0392b;
}

/* Wiersze listy. Font, interlinia i kolor DZIEDZICZĄ się z pudełka — nie powtarzamy ich,
   bo reguła na `li` ma specyficzność 0,0,1,1 i wygrywała z komponentem `.gts-komunikat__naglowek`
   (0,0,1,0), przez co nagłówek renderował się w rozmiarze wiersza. Zmierzone, nie przewidziane. */
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	margin: 0;
}

.woocommerce-error li + li {
	margin-top: 6px;
}

/* ⚠️ WIERSZA Z PUNKTOREM NIE DA SIĘ WCIĄĆ ANI `padding-left`, ANI `margin-left`. Rdzeń
   WooCommerce (nie Customizer, nie motyw) trzyma na `.woocommerce-error li` OBA z `!important`.
   Sprawdzone `CSS.getMatchedStylesForNode`, dwa razy: najpierw wchodziło `position: relative`
   z tej samej reguły, a `padding-left` nie; po zamianie na `margin-left` — to samo. Wyglądało
   na literówkę u nas, a było cudzym `!important`, którego nie ma czego edytować (plik wtyczki).

   Dlatego punktor jest ELEMENTEM UKŁADU, a nie wcięciem: wiersz robimy flexem, kropka jest
   pierwszym elementem, tekst drugim. Zysk poza ominięciem `!important`: zawijany tekst dostaje
   wcięcie wiszące i nie podłazi pod kropkę, a przy komunikacie o regulaminie to widać.

   Punktory pojawiają się tylko przy dwóch komunikatach i więcej (klasę `--wiele` nadaje fork
   `notices/error.php`), bo dopiero wtedy jest to lista, a nie jedno zdanie. */
.gts-komunikat--wiele li:not( .gts-komunikat__naglowek ) {
	display: flex;
	gap: var( --gts-odstep-1 );
}

.gts-komunikat--wiele li:not( .gts-komunikat__naglowek )::before {
	content: "";
	flex: 0 0 5px;
	height: 5px;
	margin-top: .55em;
	border-radius: 50%;
	background: currentColor;
	opacity: .45;
}

/* Nagłówek bierze rozmiar z komponentu (§6, 17 px) — NIE definiujemy go tu drugi raz.
   Dokładamy wyłącznie odstęp pod nim, i tylko tam, gdzie nagłówek w ogóle jest. */
.gts-komunikat--wiele .gts-komunikat__naglowek {
	margin-bottom: var( --gts-odstep-1 );
}

/* `<strong>` w komunikacie Woo (nazwa pola) ma nie krzyczeć bardziej niż nagłówek. */
.woocommerce-error strong,
.woocommerce-message strong,
.woocommerce-info strong {
	font-weight: 600;
}

/* =========================================================================
   7. BLOK ZWIJANY — link, nie widoczne puste pole (§5.8 workstreamu).
   ========================================================================= */
.gts-zwijany { margin-top: var( --gts-odstep-2 ); }

.gts-zwijany__tytul {
	cursor: pointer;
	font-size: var( --gts-tekst-maly );
	text-decoration: underline;
	list-style: none;
}

.gts-zwijany__tytul::-webkit-details-marker { display: none; }
.gts-zwijany__tytul::before { content: "\203a\00a0"; text-decoration: none; }
.gts-zwijany__tresc { margin-top: 10px; font-size: var( --gts-tekst-maly ); max-width: 60ch; }

/* =========================================================================
   8. PASEK SYGNAŁÓW ZAUFANIA — pod akcją, nie w stopce.
   ========================================================================= */
.gts-sygnaly {
	display: flex;
	flex-wrap: wrap;
	gap: var( --gts-odstep-1 ) 20px;
	margin: var( --gts-odstep-2 ) 0 0;
	padding: 0;
	list-style: none;
}

.gts-sygnaly__item { margin: 0; padding: 0; font-size: 16px; font-weight: 600; line-height: var( --gts-interlinia ); }
.gts-sygnaly__item::before { content: "\2713\00a0"; color: var( --gts-zielen-ciemna ); font-weight: 700; }

/* =========================================================================
   UKŁAD DWUKOLUMNOWY (OPCJA C) — `woocommerce/cart/cart.php`.

   Cztery obszary, nie dwa:
     info    — komunikaty Woo (`woocommerce_before_cart_table`), pełna szerokość
     tresc   — sprawdzian dopasowania do auta (lewa)
     pozycja — karta „Twoje zamówienie" (prawa góra)
     sumy    — kwoty, przesyłka, CTA, pasek sygnałów (prawa dół)

   `pozycja` i `sumy` są ROZDZIELONE, choć na desktopie stoją jedna pod drugą. To wymóg
   mobilny: zlecenie żąda kolejności pozycja → selektor → werdykt → suma → CTA. Przy jednym
   bloku podsumowania selektor wypadłby PO cenie, czyli po decyzji.
   ========================================================================= */
.gts-uklad {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 380px;
	grid-template-areas:
		"info  info"
		"tresc pozycja"
		"tresc sumy";
	grid-template-rows: auto auto 1fr;
	gap: var( --gts-odstep-3 ) var( --gts-odstep-4 );
	align-items: start;
}

/* ⚠️ Formularz koszyka MUSI otaczać zarówno pozycję, jak i sprawdzian dopasowania
   (`woocommerce_after_cart_table` zostaje wewnątrz `<form>`, jak w stocku), ale jego dzieci
   mają wylądować w różnych obszarach siatki. `display: contents` usuwa jego własny blok,
   zostawiając formularz w pełni funkcjonalnym — `update_cart` i kupon działają bez zmian. */
.gts-uklad__form { display: contents; }

.gts-uklad__info    { grid-area: info; }
.gts-uklad__lewa    { grid-area: tresc; }
.gts-uklad__pozycja { grid-area: pozycja; }
.gts-uklad__sumy    { grid-area: sumy; }

.gts-uklad__info:empty { display: none; }

@media ( max-width: 1024px ) {
	.gts-uklad {
		grid-template-columns: minmax( 0, 1fr );
		grid-template-areas: "info" "pozycja" "tresc" "sumy";
		grid-template-rows: auto;
	}
}

/* --- Kupon i „Aktualizuj koszyk" w karcie pozycji ------------------------- */
/* ⚠️ BEZ `border-top`. Kreskę rysuje już `.gts-podsum__pozycja` swoim `border-bottom`;
   dwie linie obok siebie wyglądały jak pomyłka, bo nią były. */
.gts-podsum__formularz {
	margin-top: var( --gts-odstep-3 );
}

/* ⚠️ `flex-direction: row` JAWNIE. Motyw ustawia `.coupon` w kolumnę, przez co
   `flex-basis` liczy się w pionie: pole kuponu urosło do 140 px WYSOKOŚCI, mimo że
   `style.css` daje mu `height: 37px`. Bez tej linii skrót `flex` sterował złą osią. */
.gts-podsum__formularz .coupon {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var( --gts-odstep-1 );
	margin-bottom: var( --gts-odstep-2 );
}

.gts-podsum__formularz .coupon .gts-pole__kontrolka {
	flex: 1 1 140px;
	height: auto;
	min-width: 0;
}

/* Wiersze kwot w `cart-totals.php`. */
.gts-podsum__wiersze { display: flex; flex-direction: column; }

/* =========================================================================
   9. WYBÓR WYSYŁKI — w PODSUMOWANIU, czyli w prawej kolumnie.
   Decyzja właściciela 2026-09-15, po obejrzeniu obu wariantów na żywym koszyku.

   Rozważaliśmy przeniesienie wysyłki do lewej kolumny („wysyłka to decyzja, nie
   rachunek"). Zmierzone: biel pod lewą kolumną 156 px → 0 px, wysokość 737 → 795 px.
   Wariant ODRZUCONY mimo lepszej liczby, i słusznie: **jedno podsumowanie to jedno
   miejsce, które opisuje zamówienie**. Rozdzielenie wyboru dostawy od sumy każe
   klientowi patrzeć w dwa miejsca, żeby zobaczyć, co ten wybór robi z ceną —
   a to jest dokładnie ta informacja, dla której wybór istnieje.

   156 px bieli pod lewą kolumną jest więc ŚWIADOME. Nie „naprawiać" go przenoszeniem
   treści w prawo; jeśli kiedyś zacznie przeszkadzać, właściwą dźwignią jest dołożenie
   treści po lewej, nie zabranie jej z podsumowania.

   Wariant jednokolumnowy odrzucony osobno: 1248 px, biel 667 px.
   ========================================================================= */

/* Lista metod wysyłki wewnątrz podsumowania — nie wiersz tabeli Woo. */
.gts-podsum__wysylka ul { margin: 0; padding: 0; list-style: none; }

/* 4 px, nie 8. Rozkład wiersza przesyłki (zmierzony, okno 1440×800): 214 px, z czego
   84 px to trzy opcje, a 21 px same odstępy między nimi. Przy trzech pozycjach listy
   luźniejszy rytm nic nie porządkuje, a spycha przycisk zakupu poniżej zgięcia.
 *
 * ⚠️ Selektor MUSI zawierać `#shipping_method`. WooCommerce trzyma tu
 * `.woocommerce ul#shipping_method li { margin: 0 0 .5em }` — z identyfikatorem,
 * czyli specyficzność 0,1,2,0. Reguła na samych klasach przegrywa niezależnie od
 * kolejności ładowania; pierwsze podejście zaoszczędziło dokładnie 1 px. */
.gts-podsum__wysylka ul#shipping_method li { margin: 0 0 4px; }
.gts-podsum__wysylka ul#shipping_method li:last-child { margin-bottom: 0; }

/* Pasek logotypów przewoźników (PL/EN) — 50 px z paddingiem 5/5. */
.gts-podsum__wysylka ul#shipping_method > div:first-child { padding: 2px 0; }

.gts-podsum__wysylka .woocommerce-shipping-destination { margin-top: 4px; }
.gts-podsum__wysylka p  { margin: var( --gts-odstep-1 ) 0 0; font-size: 13px; color: var( --gts-tekst-slaby ); }

/* Wiersz wysyłki jest wyższy od pozostałych (kilka opcji), więc etykieta ma trzymać
   się góry, a nie środkować się względem listy. */
.gts-podsum__wiersz--wysylka { align-items: flex-start; }

/* =========================================================================
   10. DOMKNIĘCIE PRAWEJ KOLUMNY — trzy rzeczy, których WooCommerce nie oddaje samo.
   ========================================================================= */

/* ⚠️ WooCommerce daje `.cart_totals` `float: right; width: 48%`, licząc na dwukolumnowy
   układ WEWNĄTRZ `.cart-collaterals`. U nas kolumna ma już 380 px, więc 48% robiło z niej
   182 px, a kwoty łamały się na trzy linie. Zdejmujemy oba — bez `!important`, bo reguła
   Woo ma specyficzność 0,0,3,0, a ta 0,0,3,0 przy późniejszej kolejności ładowania. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	float: none;
	width: auto;
}

.gts-uklad__sumy .cart-collaterals { width: 100%; }

/* Etykieta ustępuje, wartość trzyma się prawej.
   ⚠️ `flex: 0 1 auto` + `min-width: 0` na wartości, NIE `flex: 0 0 auto`. Przy sumie
   z dopiskiem o podatku („389,00 € (vrátane 72,74 € 23%)") brak możliwości kurczenia
   wypychał wiersz o 2 px poza ekran 390 px — mało, ale wystarczy, żeby strona przewijała
   się w poziomie. Widoczne tylko na SK, bo tam dopisek jest najdłuższy. */
.gts-podsum__wiersz > span:first-child { flex: 0 1 auto; padding-right: var( --gts-odstep-2 ); }
.gts-podsum__wiersz > span:last-child  { flex: 0 1 auto; min-width: 0; text-align: right; }
.gts-podsum__wiersz .includes_tax      { display: block; font-size: 12px; font-weight: 400; }

/* ⚠️ Pasek logotypów przewoźników (PL) jest szerszy niż kolumna 380 px i wypychał całą
   stronę w poziomie — na SK/CZ tego nie widać, bo tam pasek jest ukryty, więc defekt
   pokazywał się TYLKO na jednym rynku. Logotypy mają się zawijać i skalować. */
.gts-podsum__wysylka,
.gts-podsum__wysylka .woocommerce-shipping-methods { max-width: 100%; }

.gts-podsum__wysylka img { max-width: 100%; height: auto; }

.gts-podsum__wiersz--wysylka { flex-direction: column; align-items: stretch; gap: var( --gts-odstep-1 ); }
.gts-podsum__wiersz--wysylka > span:first-child { padding-right: 0; }

/* =========================================================================
   11. PASEK SYGNAŁÓW I POMOC W LEWEJ KOLUMNIE
   Oba bloki przeniesione spod przycisku zakupu pod sprawdzian dopasowania
   (decyzja właściciela 2026-09-15). Dotyczą DOBORU produktu, nie płatności.
   ========================================================================= */
.gts-dop .gts-dop-sygnaly { margin-top: var( --gts-odstep-3 ); }
.gts-dop .gts-dop-pomoc   { margin-top: var( --gts-odstep-2 ); }

/* Kupon zwinięty — podsumowanie ma być rachunkiem, nie ankietą. */
.gts-podsum__kupon .coupon { margin-top: var( --gts-odstep-1 ); margin-bottom: 0; }

/* =========================================================================
   12. ZWARCIE PRAWEJ KOLUMNY — przycisk zakupu ma być widoczny bez przewijania.
   Zmierzone przed zmianą: dół CTA na y=861 px, czyli 61 px poniżej zgięcia
   przy oknie 1440×800. Między kuponem a „Subtotal" stało ~72 px bieli: 24 px
   przerwy siatki + 24 px dolnego paddingu jednej karty + 24 px górnego drugiej.

   Obie karty są białe na białym, więc czytają się jako jedna — podwójny padding
   na styku niczego nie rozdzielał, tylko oddalał sumę od pozycji.
   ========================================================================= */
.gts-uklad__pozycja > .gts-karta { padding-bottom: var( --gts-odstep-2 ); }
.gts-uklad__sumy .cart_totals    { padding-top: var( --gts-odstep-2 ); }

/* Przerwa między pozycją a sumami — tylko w pionie i tylko po prawej.
   Kolumny nadal dzieli pełne `--gts-odstep-4`. */
.gts-uklad { row-gap: var( --gts-odstep-2 ); }

.gts-podsum__formularz { margin-top: var( --gts-odstep-2 ); }
.gts-podsum__pozycja   { padding-bottom: var( --gts-odstep-2 ); }

/* Pasek sygnałów w lewej kolumnie ma oddychać — jest teraz większy. */
.gts-dop .gts-dop-sygnaly { gap: var( --gts-odstep-1 ) var( --gts-odstep-3 ); }

/* Ostatnie piksele do zgięcia. Rozkład wysokości karty sum (zmierzony, okno 1440×800):
   wiersz przesyłki 214 px (logotypy + 3 opcje + nota), `wc-proceed-to-checkout` **100 px**
   na przycisk o wysokości 52. Te 48 px nadmiaru to margines pod przyciskiem — zbędny,
   bo po przeniesieniu paska sygnałów w lewo pod CTA nie stoi już nic. */
.gts-podsum__wiersz { padding: 6px 0; }
.gts-uklad__sumy .wc-proceed-to-checkout { margin-top: var( --gts-odstep-2 ); margin-bottom: 0; }
.gts-uklad__sumy .wc-proceed-to-checkout > .checkout-button:last-child { margin-bottom: 0; }
.gts-uklad__sumy .cart_totals { padding-bottom: var( --gts-odstep-2 ); }