/* Printella Cart — card-like layout */

/* H1 „Koszyk" — wartości z handoffu.

   Poprzedni selektor `.printella .woocommerce-cart .entry-title` NIGDY nie działał:
   obie klasy siedzą na tym samym `<body>`, a zapis ze spacją wymaga, żeby
   `.woocommerce-cart` był POTOMKIEM `.printella`. Nagłówek zostawał więc na
   `reset.css` — zmierzone 40px/500, czyli lżejszy niż tekst obok niego. */
/* Hello Elementor daje na telefonie `padding: 10px` zarówno `main.site-main`, jak i samemu
   `<h1>`. Pierwsze przesuwało całą treść koszyka o 10 px względem kasy, drugie wsuwało
   TEKST nagłówka względem krawędzi karty, mimo że jego boks był równo. Boczny margines
   ma pochodzić wyłącznie z `clamp()` w `.page-header` i `.printella-cart-layout`. */
body.woocommerce-cart main.site-main {
    padding-inline: 0;
    /*
     * ⚠️ `max-width` MUSI tu być. Hello Elementor nakłada na `.site-main` własną szerokość
     * treści dla tabletu i telefonu — 600 px, a niżej 500 px — i koszyk zapadał się do
     * słupka pośrodku pustego ekranu. Zmierzone: przy oknie 900 px karta miała 557 px,
     * przy 820 px — 561 px, mimo że miejsca było po ~170 px z każdej strony.
     *
     * Kasa tego nie miała, bo jej treść renderuje szablon Elementora POZA `main.site-main`
     * — stąd różnica, którą Steve zauważył („checkout ma już szerokość dopasowaną
     * do okna w każdym query").
     */
    width: 100%;
    max-width: var(--printella-tresc-max, 1320px);
}

body.printella.woocommerce-cart .entry-title {
    padding-inline: 0;
    /* Bez własnego `margin-top` — odstęp od nagłówka strony daje `.page-header`
       (`style.css`, sekcja „GÓRA STRONY"). Domyślne 8 px przesuwało koszyk
       o te 8 px względem kasy. */
    margin-top: 0;
    font-size: clamp(34px, 3.6vw, 48px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #101B54;
    /* Ten sam odstęp co przerwa w siatce kasy (`gap`), żeby H1 → karty wyglądało
       identycznie na koszyku i na kasie. */
    margin-bottom: clamp(16px, 2.4vw, 32px);
    /* Hello Elementor zwęża `.page-header .entry-title` do 500 / 600 / 800 px i centruje
       (`theme.css`, 576–1199 px); `style.css` odkręca to dopiero od 992 px. Zmierzone
       28.10.2026 przy 900 px: H1 150–750, karty i komunikaty 22–878. Nagłówek ma
       stać na krawędzi kart przy każdej szerokości, tak jak tytuł kasy. */
    max-width: none;
    margin-inline: 0;
}

/* ──────────────────────────────────────────────────────────────────────────────
   UKŁAD STRONY (redesign koszyka, etap 3 — korekta)

   Wartości 1:1 z `design_handoff_printella_koszyk`: tło strony #F5F7FB, obie
   kolumny jako BIAŁE KARTY, siatka 1320 px.
   ────────────────────────────────────────────────────────────────────────────── */

/* Szare tło całej strony koszyka, nie tylko obszaru siatki — karty mają się na czym
   odcinać, a w pasie poza siatką (np. pod stopką listy) nie może zostać biel. */
body.woocommerce-cart {
    background: #F5F7FB;
}

/* 2-column grid: products + summary */
.printella-cart-layout {
    display: grid;
    /* `minmax(320px, 400px)`, nie stałe 340 px: karta podsumowania ma mieć ten sam
       zakres co w projekcie, inaczej „Do zapłaty" i kwota 34 px nie mieszczą się
       w jednym wierszu i kolumna wygląda na ściśniętą. */
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: clamp(16px, 2vw, 28px);
    align-items: start;
    max-width: 1320px;
    margin: 0 auto;
    /* Górny odstęp przeniesiony na `.page-header` (`style.css`, sekcja „GÓRA STRONY") —
       tam jest początek treści i tam musi stać odległość od nagłówka strony. Zostawiony
       tutaj dawał go DWA razy: raz nad H1, raz nad kartami. */
    padding: 0 clamp(16px, 2.4vw, 32px) 64px;
    /* Bez własnej deklaracji kroju — od 5.14.0 Nunito Sans jest krojem CAŁEGO sklepu
       (`style.css`, reguła `.printella …`). Powtórzenie go tutaj znaczyłoby drugie
       miejsce do zmiany przy następnej zmianie kroju. */
}

/* Lewa kolumna = karta „Moje wydruki".
   `overflow: hidden` ZDJĘTE — przy radiusie 14 px obcinało cień i nie było po co:
   łamaniem długich nazw plików zajmuje się `overflow-wrap`. */
.printella-cart-products {
    min-width: 0;
    background: #fff;
    border-radius: 14px;
    padding: clamp(20px, 2.6vw, 36px);
    box-shadow: 0 1px 2px rgba(16, 27, 84, 0.04);
}

.printella-cart-products__tytul {
    margin: 0;
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.025em;
    color: #101B54;
}
.printella-cart-products .shop_table,
.printella-cart-products .cart_item {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Summary sticky */
.printella-cart-summary {
    position: sticky;
    top: 24px;
    min-width: 0;
}

/* ──────────────────────────────────────────────────────────────────────────────
   KONTENER LISTY POZYCJI

   Stąd zniknął CAŁY stary wygląd pozycji koszyka (`.printella-cart-item__meta`,
   `__controls`, stepper ilości, karta per pozycja). Nie był tylko martwy — SZKODZIŁ:
   `.printella-cart-products .cart_item` (dwie klasy) wygrywało z `.printella-poz`
   (jedna) i narzucało `display: block` zamiast gridu. Zmierzone w przeglądarce:
   miniatura 534 × 534 px zamiast 200 × 200 z handoffu, a każda pozycja dostawała
   jeszcze własną białą kartę z ramką `1px solid #e5e7eb` — to te „obramowania na
   elementach" wewnątrz karty „Moje wydruki".

   Pozycje mają teraz wyłącznie reguły `.printella-poz*` niżej w tym pliku.
   ────────────────────────────────────────────────────────────────────────────── */
.printella-cart-products .shop_table {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: none;
    background: none;
    width: 100%;
}

/* Reset tabelowych domyślnych WooCommerce na kontenerze (jest divem z klasą `shop_table`). */
.printella-cart-products .shop_table,
.printella-cart-products .shop_table * {
    border-spacing: 0;
    border-collapse: collapse;
}

/* Cart actions — po redesignie został sam punkt zaczepienia dla wtyczek.
   Bez `height` kontener zapada się do zera: ukryte pole nonce nie ma pudełka,
   a same spacje nie są elementem flexa. Stała wysokość zostawiałaby 56 px pustki. */
.printella-cart-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* ──────────────────────────────────────────────────────────────────────────────
   PODSUMOWANIE (redesign koszyka, etap 3)

   Wartości 1:1 z `design_handoff_printella_koszyk`.

   Zniknęły stąd podmiany etykiet przez `visibility: hidden` + `content: 'Produkty'`.
   Etykiety stoją teraz w szablonie, więc da się je tłumaczyć i czyta je czytnik ekranu —
   tekst w `content` nie trafia ani do `.po`, ani (w części czytników) do użytkownika.
   ────────────────────────────────────────────────────────────────────────────── */

/* WooCommerce ustawia `float: right; width: 48%` na `.cart_totals` — tu kolumnę
   wyznacza grid layoutu koszyka. */
.printella .printella-cart-summary .cart-collaterals,
.printella .woocommerce-cart .cart-collaterals {
    width: 100%;
    float: none;
}
.printella .printella-cart-summary .cart-collaterals::before,
.printella .printella-cart-summary .cart-collaterals::after {
    display: none;
}
.printella .printella-cart-summary .cross-sells,
.printella.woocommerce .cart-collaterals .cross-sells,
.printella.woocommerce-page .cart-collaterals .cross-sells {
    float: none;
    width: 100%;
}

.printella .printella-cart-summary .cart_totals,
.printella.woocommerce .cart-collaterals .cart_totals,
.printella.woocommerce-page .cart-collaterals .cart_totals {
    float: none;
    width: 100%;
    background: #fff;
    border: 0;
    border-radius: 14px;
    padding: clamp(22px, 2.4vw, 32px);
    box-shadow: 0 1px 2px rgba(16, 27, 84, 0.04);
    font-family: inherit;
}

.printella .printella-cart-summary .cart_totals * {
    font-family: inherit;
}

.printella .printella-cart-summary .printella-sum__tytul {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* Tabela, nie lista — patrz nagłówek `cart-totals.php`, różnica 1.
   `border-spacing: 0 12px` daje odstęp wierszy z projektu bez paddingów, które
   rozjeżdżałyby wiersz dostawy z radiami. */
.printella-cart-summary .printella-sum__lista {
    width: 100%;
    margin: 20px 0 0;
    border: none;
    border-collapse: separate;
    border-spacing: 0 12px;
    font-size: 16px;
}
/*
 * Prefiks `.woocommerce-cart .cart-collaterals .cart_totals` nie jest ozdobą.
 * WooCommerce rysuje kreskę nad KAŻDĄ komórką sum selektorem
 * `.woocommerce-cart .cart-collaterals .cart_totals tr th` — trzy klasy, więc
 * dwuklasowy reset motywu przegrywał i w podsumowaniu zostawały ramki nad wierszem
 * dostawy (zmierzone: `border-top: 1px solid #E9E6ED` na „Przesyłka").
 */
.woocommerce-cart .cart-collaterals .cart_totals .printella-sum__lista th,
.woocommerce-cart .cart-collaterals .cart_totals .printella-sum__lista td {
    padding: 0;
    border: none;
    background: transparent;
    vertical-align: top;
}

/*
 * Warianty `:nth-child(odd)` i `:hover` gaszą WYŁĄCZNIE tło — paski i podświetlenie
 * wiersza, które rysuje WooCommerce. NIE wolno im ruszać `padding` ani `border`.
 *
 * Do 5.21.0 powtarzały cały reset i miały o jeden element w selektorze więcej niż
 * reguła „Do zapłaty", więc na hover WYGRYWAŁY: kreska nad sumą znikała, a `padding-top`
 * wracał do zera i całe podsumowanie podskakiwało pod kursorem. Zgłoszone przez Steve'a,
 * potwierdzone pomiarem.
 */
.woocommerce-cart .cart-collaterals .cart_totals .printella-sum__lista tr:nth-child(odd) th,
.woocommerce-cart .cart-collaterals .cart_totals .printella-sum__lista tr:nth-child(odd) td,
.woocommerce-cart .cart-collaterals .cart_totals .printella-sum__lista tr:hover th,
.woocommerce-cart .cart-collaterals .cart_totals .printella-sum__lista tr:hover td {
    background: transparent;
}
.printella-cart-summary .printella-sum__lista th {
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #3A4478;
}
.printella-cart-summary .printella-sum__lista td {
    text-align: right;
    font-size: 16px;
    font-weight: 700;
    color: #101B54;
}

/* Rabat na zielono — jedyna kwota w kolumnie, która odejmuje. */
.printella-cart-summary .printella-sum__rabat td,
.printella-cart-summary .printella-sum__rabat td .woocommerce-Price-amount {
    color: #0E7A55;
}
.printella-cart-summary .printella-sum__rabat td a {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #7A83A6;
}

/* Wysyłka: „od X zł" liczone w `cart-shipping.php`, a przy wybranej metodzie lista
   stawek. Dlatego `td` dostaje normalną wagę — to nie jest sama kwota. */
.printella-cart-summary .printella-sum__lista .woocommerce-shipping-totals td,
.printella-cart-summary .printella-sum__lista .shipping td {
    font-weight: 700;
}
.printella-cart-summary .printella-sum__lista .woocommerce-shipping-methods,
.printella-cart-summary .printella-sum__lista .shipping-calculator-form {
    margin: 8px 0 0;
    font-weight: 500;
}

/* „Do zapłaty" — kreska, duża kwota, wszystko z projektu. Ten sam prefiks co reset
   wyżej, bo inaczej reset zdjąłby JEDYNĄ kreskę, która ma tu zostać. */
.woocommerce-cart .cart-collaterals .cart_totals .printella-sum__lista .order-total th,
.woocommerce-cart .cart-collaterals .cart_totals .printella-sum__lista .order-total td {
    padding-top: 18px;
    border-top: 1.5px solid #E3E7F2;
    vertical-align: baseline;
}
.printella-cart-summary .printella-sum__lista .order-total th {
    font-size: 18px;
    font-weight: 800;
    color: #101B54;
}
.printella-cart-summary .printella-sum__lista .order-total td,
.printella-cart-summary .printella-sum__lista .order-total td strong,
.printella-cart-summary .printella-sum__lista .order-total td .woocommerce-Price-amount {
    font-size: clamp(28px, 2.4vw, 34px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.025em;
    color: #101B54;
}

.printella-cart-summary .printella-sum__nota {
    /* Ujemny margines, bo tabela sum zostawia pod ostatnim wierszem ~12 px, których nie da
       się zdjąć bez ruszania odstępów MIĘDZY wierszami. Przypis ma należeć do kwoty nad nim,
       a przy 18 px odrywał się od niej wizualnie. Zmierzone: 18 px → 6 px. */
    margin: -12px 0 0;
    text-align: right;
    font-size: 13px;
    font-weight: 500;
    color: #5A648C;
}

/* CTA — w projekcie to pełna szerokość i wysoki przycisk, nie ikonka obok sumy. */
.printella .printella-cart-summary .wc-proceed-to-checkout {
    margin-top: 22px;
    padding-bottom: 0;
    margin-bottom: 0;
}
.printella .printella-cart-summary .wc-proceed-to-checkout .checkout-button,
.printella .printella-cart-summary .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    height: auto;
    padding: 20px 24px;
    border: none;
    border-radius: 8px;
    background: #F0417E;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}
.printella .printella-cart-summary .wc-proceed-to-checkout .checkout-button:hover,
.printella .printella-cart-summary .wc-proceed-to-checkout a.checkout-button:hover {
    background: #D8306A;
    color: #fff;
}

/* Kod rabatowy — `<details>`, więc strzałkę rysujemy sami (domyślny marker
   przeglądarki ma inny kształt w każdej z nich). */
.printella-cart-summary .printella-sum__kupon {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1.5px solid #E3E7F2;
}
.printella-cart-summary .printella-sum__kupon > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    font-size: 15px;
    font-weight: 500;
    color: #7A83A6;
    cursor: pointer;
    list-style: none;
}
.printella-cart-summary .printella-sum__kupon > summary::-webkit-details-marker {
    display: none;
}
.printella-cart-summary .printella-sum__kupon > summary:hover {
    color: #101B54;
}
.printella-cart-summary .printella-sum__kupon > summary::after {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}
.printella-cart-summary .printella-sum__kupon[open] > summary::after {
    transform: rotate(225deg) translateY(-1px);
}

.printella-cart-summary .printella-sum__kupon-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.printella-cart-summary .printella-sum__kupon-form input.input-text {
    flex: 1;
    min-width: 0;
    /* Ta sama wysokość co przycisk (handoff: 48 px). Przy `padding` zamiast `height`
       pole i przycisk rozjeżdżały się o kilka pikseli przy każdej zmianie kroju. */
    height: 48px;
    padding: 0 16px;
    border: 1.5px solid #DCE1EC;
    border-radius: 8px;
    font-size: 16px;
    color: #101B54;
}
/*
 * ⚠️ SZEŚĆ KLAS W SELEKTORZE JEST KONIECZNE, nie na zapas.
 *
 * `style.css` ubiera KAŻDY przycisk WooCommerce regułą
 * `.printella .woocommerce button.button:not(.prnt-cart-button):not(.checkout-button)`
 * — to (0,5,1), bo oba `:not()` liczą się jak klasy. Nadaje `--btn-primary`, czyli stary
 * fiolet #6F3FA6, 13 px i ramkę 1 px. Poprzednia wersja tej reguły miała (0,4,0)
 * i przegrywała: zmierzone na żywym koszyku — ramka `1px rgb(111,63,166)`, tekst fioletowy,
 * font 13px/600 zamiast 15px/800.
 *
 * Klasa `printella-sum__kupon-btn` dochodzi w `cart-totals.php` właśnie po to, żeby dobić
 * specyficzność do (0,6,1) bez dopisywania kolejnego `:not()` do tamtej globalnej reguły.
 * Wartości wg `design_handoff_printella_detale`.
 */
.printella .woocommerce .printella-cart-summary .printella-sum__kupon-form button.button.printella-sum__kupon-btn {
    flex: none;
    height: 48px;
    min-width: 112px;
    padding: 0 18px;
    border: 1.5px solid #101B54;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    font-weight: 800;
    color: #101B54;
    text-transform: none;
    letter-spacing: 0;
    transition: background-color .15s ease, color .15s ease;
}

.printella .woocommerce .printella-cart-summary .printella-sum__kupon-form button.button.printella-sum__kupon-btn:hover {
    background: #101B54;
    color: #fff;
}

.printella .woocommerce .printella-cart-summary .printella-sum__kupon-form button.button.printella-sum__kupon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 27, 84, 0.18);
}

/* Stan wyłączony (puste pole) — wg handoffu. `disabled` ustawia `printella-kupon.js`
   (nie szablon: bez JS-u formularz ma działać zwykłym POST-em). */
.printella .woocommerce .printella-cart-summary .printella-sum__kupon-form button.button.printella-sum__kupon-btn:disabled {
    border-color: #E6E9F0;
    background: #E6E9F0;
    color: #9AA2BD;
    cursor: not-allowed;
    opacity: 1;   /* kolory z handoffu, bez przygaszenia `woocommerce.css` */
}

/* ── Kod rabatowy: pozostałe stany z handoffu „Detale” (Claude Design, 1b) ──
   Obsługa: `assets/js/printella-kupon.js`. */
.printella-cart-summary .printella-sum__kupon-form {
    flex-wrap: wrap;
}
.printella-cart-summary .printella-sum__kupon-form input.input-text:focus {
    outline: none;
    border-color: #101B54;
    box-shadow: 0 0 0 3px rgba(16, 27, 84, 0.08);
}
/* Błąd: ramka pola + komunikat pod formularzem. Klasy `has-error` i `.coupon-error-notice`
   są te same co w `cart.js`, więc rdzeń sam je zdejmuje przy edycji pola. */
.printella-cart-summary .printella-sum__kupon-form input.input-text.has-error {
    border-color: #C22765;
}
.printella-cart-summary .printella-sum__kupon-form .printella-sum__kupon-blad {
    flex: 1 1 100%;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #C22765;
}
/* Sprawdzanie: wypełniony granat + spinner 14 px. Reguła z `:disabled` niżej nie może
   tu wygrać — przycisk jest wtedy wyłączony, ale ma wyglądać na zajęty, nie nieaktywny. */
.printella .woocommerce .printella-cart-summary .printella-sum__kupon-form.is-sprawdzam button.button.printella-sum__kupon-btn,
.printella .woocommerce .printella-cart-summary .printella-sum__kupon-form.is-sprawdzam button.button.printella-sum__kupon-btn:disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-color: #101B54;
    background: #101B54;
    color: #fff;
    cursor: progress;
    /* `woocommerce.css` daje wyłączonym przyciskom `opacity: .5` — zmierzone na zrzucie:
       granat wychodził szary. */
    opacity: 1;
}
.printella-sum__kupon-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 999px;
    animation: printella-kupon-obrot .7s linear infinite;
}
@keyframes printella-kupon-obrot {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .printella-sum__kupon-spinner { animation-duration: 2s; }
}
/* Wyłączony bez hovera (handoff: „bez hover”). */
/* `:not(.is-sprawdzam)`: przy równej specyficzności ta reguła (późniejsza) wygrywała
   ze stanem „Sprawdzam”, gdy kursor stał na przycisku — zmierzone: szary zamiast granatu. */
.printella .woocommerce .printella-cart-summary .printella-sum__kupon-form:not(.is-sprawdzam) button.button.printella-sum__kupon-btn:disabled:hover {
    border-color: #E6E9F0;
    background: #E6E9F0;
    color: #9AA2BD;
}

/* Zastosowany: chip zamiast formularza. */
.printella-cart-summary .printella-sum__kupon--zastosowany {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.printella-cart-summary .printella-sum__kupon-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 0 8px 0 14px;
    border: 1.5px solid #A9DDBD;
    border-radius: 8px;
    background: #EAF7EF;
}
.printella-cart-summary .printella-sum__kupon-chip-kod {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 15px;
    font-weight: 800;
    color: #1F7A4D;
    overflow-wrap: anywhere;
}
.printella-cart-summary .printella-sum__kupon-chip-kod svg {
    flex: none;
    color: #22A35A;
}
.printella .printella-cart-summary a.printella-sum__kupon-usun {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #3A4478;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.printella .printella-cart-summary a.printella-sum__kupon-usun:hover,
.printella .printella-cart-summary a.printella-sum__kupon-usun:focus-visible {
    background: #fff;
    color: #C22765;
}
/* Wiersz „Rabat · KOD” w sumach: link usunięcia jest teraz w chipie — dwa „Usuń”
   dla jednego kodu to jedno za dużo. */
.printella-cart-summary .printella-sum__rabat .woocommerce-remove-coupon {
    display: none;
}

/* ===== Empty cart ===== */
/* Notyfikacja Woo („Twój koszyk aktualnie jest pusty") renderuje się w osobnym
   `.wc-empty-cart-message` BEZ marginesu — boks noty szedł od krawędzi do krawędzi
   (zmierzone: x = 0→390 przy ekranie 390), podczas gdy każda inna karta w sklepie
   zaczyna się 28 px od brzegu. `main.site-main` ma tu zero świadomie, więc margines
   musi dać ten kontener. */
@media (max-width: 768px) {
    .wc-empty-cart-message {
        padding-inline: var(--prt-margines-boczny, 28px);
    }
}

.printella-cart-empty {
    text-align: center;
    /* Boczne 20 px zastąpione wspólnym marginesem sklepu — pusty koszyk był jedynym
       widokiem, w którym tekst startował inaczej niż na stronie z produktami. */
    padding: 80px var(--prt-margines-boczny, 28px);
    max-width: 400px;
    margin: 0 auto;
}
.printella-cart-empty__icon {
    color: #d1d5db;
    margin-bottom: 24px;
}
.printella-cart-empty__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
}
.printella-cart-empty__text {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0 0 24px;
}
.printella-cart-empty__button {
    display: inline-flex;
}

/* ===== Loading state ===== */
.printella-cart--updating {
    pointer-events: none;
}
.printella-cart--updating .printella-cart-products {
    opacity: 0.5;
    transition: opacity 0.2s;
}

/* ===== Cross-sell ===== */
.printella-cart-layout .cross-sells {
    grid-column: 1 / -1;
    margin-top: 32px;
}

/* ===== Mobile ===== */
/* Projekt składa kolumny poniżej 1040 px (i zdejmuje sticky), nie poniżej 768:
   przy 900 px karta podsumowania miała ~320 px i wiersze się łamały. */
@media (max-width: 1040px) {
    .printella-cart-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .printella-cart-summary {
        position: static;
    }
}

@media (max-width: 768px) {
    /* Na telefonie karta trzyma wspólny margines boczny sklepu (28 px, token
       `--prt-margines-boczny` z `design-system.css`), a nie `clamp(16px,2.4vw,32px)`
       z padding-bottom 64 px. Do 5.74.0 było tu 16 px i koszyk był jedyną stroną
       z węższym marginesem niż reszta sklepu. */
    .printella-cart-layout {
        padding: 16px var(--prt-margines-boczny, 28px) 32px;
    }

    /* Kod rabatowy: pole i przycisk nie zmieszczą się w jednym wierszu na telefonie. */
    .printella-cart-summary .printella-sum__kupon-form {
        flex-wrap: wrap;
    }
    .printella-cart-summary .printella-sum__kupon-form input.input-text,
    .printella .printella-cart-summary .printella-sum__kupon-form .button {
        flex: 1 1 100%;
    }

    /* Cross-sell */
    .printella-cart-layout .cross-sells {
        grid-column: 1;
    }
}

/* ──────────────────────────────────────────────────────────────────────────────
   DOPŁATA DO MINIMUM (brief koszyka §4)

   Wiersz PODRZĘDNY, nie pozycja koszyka. Świadomie bez miniatury, bez linku,
   bez ilości i bez własnego usuwania: gdyby wyglądał jak pozycja, klient
   zaczynałby szukać, jak ją wyrzucić — a nie da się, bo to dopłata do grupy
   wydruków powyżej, nie osobny produkt.

   `padding-left` zgodny z `.printella-cart-item__controls` (96 px miniatury
   + 16 px odstępu), żeby opis zaczynał się w tej samej pionowej linii co nazwa
   pozycji, pod którą stoi.
   ────────────────────────────────────────────────────────────────────────────── */
.printella-cart-doplata {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: -4px 0 12px;
    padding: 10px 0 10px 112px;
    border-top: 1px dashed rgba(0, 0, 0, .12);
    font-size: .875rem;
    line-height: 1.45;
    color: #555;
}

.printella-cart-doplata__opis {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.printella-cart-doplata__nazwa {
    font-weight: 600;
    color: #222;
}

/* Wyjaśnienie jest WIDOCZNE OD RAZU, nie w tooltipie — brief wymaga czytelności
   także na telefonie, a tooltip na dotyku nie istnieje. */
.printella-cart-doplata__wyjasnienie {
    color: #666;
}

.printella-cart-doplata__wyjasnienie strong {
    font-weight: 600;
    color: #555;
}

/* Kwota wyrównana do prawej, w tej samej linii pionowej co ceny pozycji. */
.printella-cart-doplata__kwota {
    flex: 0 0 auto;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
}

@media (max-width: 768px) {
    /* Na telefonie miniatury nie ma po co omijać — wcięcie 112 px zjadałoby
       połowę szerokości ekranu i łamało wyjaśnienie po dwa słowa na linię. */
    .printella-cart-doplata {
        flex-direction: column;
        gap: 6px;
        padding-left: 0;
    }

    .printella-cart-doplata__kwota {
        align-self: flex-start;
    }
}

/* Link „Edytuj konfigurację" pod parametrami wydruku (brief koszyka §3).
   Zastąpił ikonę ołówka obok kosza — jedna droga do edycji, nie dwie. */
.printella-cart-item__edycja {
    margin: 6px 0 0;
}

.printella-cart-edit-link {
    font-size: .875rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── CHECKOUT: miniatura i wiersz dopłaty w tabeli podsumowania ──────────────── */

/* Pozycje w checkoucie nazywają się „Własny nadruk – <tkanina>", więc dwa różne
   wzory na tej samej tkaninie byłyby bez miniatury nierozróżnialne. */
.printella-checkout-thumb {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.printella-checkout-thumb img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}

/* Wiersz dopłaty w tabeli — podrzędny, tak jak jego divowy odpowiednik w koszyku. */
.woocommerce-checkout-review-order-table tr.printella-doplata-row td {
    padding-top: 4px;
    border-top: 1px dashed rgba(0, 0, 0, .12);
    font-size: .8125rem;
    line-height: 1.45;
    color: #555;
}

.woocommerce-checkout-review-order-table tr.printella-doplata-row .printella-cart-doplata__nazwa {
    font-weight: 600;
    color: #222;
}

/* ──────────────────────────────────────────────────────────────────────────────
   GRUPY PO TKANINIE (redesign koszyka, etap 1)

   Wartości 1:1 z handoffu `design_handoff_printella_koszyk/README.md`.
   Tokeny zgodne z `design-system.css` motywu (63 z 86 już tam są).
   ────────────────────────────────────────────────────────────────────────────── */
.printella-cart-grupa {
    margin-top: clamp(24px, 2.6vw, 36px);
}

/* Pierwsza grupa ZACHOWUJE odstęp od tytułu „Moje wydruki" — w projekcie nagłówek
   grupy ma `margin-top: clamp(24px,2.6vw,36px)` także jako pierwszy element. */

.printella-cart-grupa__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid #E3E7F2;
}

.printella-cart-grupa__nazwa {
    margin: 0;
    font-size: clamp(19px, 1.6vw, 22px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* `flex:none`, żeby licznik nie zwężał się przy długiej nazwie tkaniny —
   „Dresówka pętelkowa French Terry 300 g/m²" to realna nazwa. */
.printella-cart-grupa__licznik {
    flex: none;
    font-size: 15px;
    font-weight: 600;
    color: #5A648C;
}

.printella-cart-grupa__stopka {
    margin-top: 18px;
    padding: 18px 22px;
    border-radius: 12px;
    background: #F7F8FC;
}

.printella-cart-grupa__wiersz {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 16px;
    font-weight: 700;
}

.printella-cart-grupa__wiersz--mocny {
    font-weight: 800;
}

/* Wiersz rabatu ilościowego tkaniny. Zieleń ta sama, co przy rabacie w podsumowaniu
   zamówienia (#0E7A55) — obniżka kwoty ma wyglądać tak samo wszędzie w sklepie.
   Odstęp u góry, bo wiersz stoi pod „Łącznie na tej tkaninie" i bez niego obie linie
   się sklejały. */
.printella-cart-grupa__wiersz--rabat {
    margin-top: 8px;
}

.printella-cart-grupa__rabat-kwota {
    color: #0E7A55;
    white-space: nowrap;
}

.printella-cart-grupa__doplata {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1.5px solid #E3E7F2;
}

/* `max-width: 60ch` z handoffu — wyjaśnienie ma być czytelne, nie rozciągnięte
   na całą szerokość karty. */
.printella-cart-grupa__opis {
    margin: 6px 0 0;
    max-width: 60ch;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    color: #3A4478;
}

/* ──────────────────────────────────────────────────────────────────────────────
   POZYCJA = WYDRUK (redesign koszyka, etap 2)

   Wartości 1:1 z `design_handoff_printella_koszyk/README.md`.
   ────────────────────────────────────────────────────────────────────────────── */
.printella-poz {
    display: grid;
    grid-template-columns: clamp(150px, 16vw, 200px) minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 32px);
    padding: clamp(20px, 2.4vw, 28px) 0;
    border-bottom: 1.5px solid #E3E7F2;
}

/* Brak separatora po OSTATNIEJ pozycji w grupie — stopka grupy ma własną linię,
   a dwie obok siebie czytają się jak błąd. */
.printella-poz:last-of-type {
    border-bottom: 0;
}

.printella-poz__podglad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Kwadrat niezależnie od proporcji wzoru: panel 204 × 50 cm i kwadratowy raport
   mają zajmować tyle samo miejsca, żeby lista się nie „schodkowała". */
.printella-poz__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    padding: 8px;
    border: 1.5px solid #E3E7F2;
    border-radius: 12px;
    background: #F7F8FC;
}

/*
 * Obraz WYPEŁNIA pudełko, jak `<image-slot>` w prototypie.
 *
 * Było `max-width/max-height: 100%` — i miniatura przestawała działać: WooCommerce
 * wypisuje przy obrazku atrybuty `width`/`height` (np. 350×350), więc przy samych
 * ograniczeniach maksimum obraz mniejszy od pudełka rysował się we własnym rozmiarze,
 * a nie w rozmiarze z handoffu. `width/height: 100%` + `contain` dają zawsze kwadrat
 * z projektu.
 *
 * `contain`, nie `cover` (prototyp ma `cover`): przycięcie pokazywałoby klientowi inny
 * wzór, niż kupuje — panel 204 × 50 cm straciłby w kadrze trzy czwarte wzoru.
 */
.printella-poz__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: contain;
}

.printella-poz__tresc {
    min-width: 0;
}

/* Górny wiersz pozycji: pigułka trybu po lewej, akcje po prawej (changelog pkt 2). */
.printella-poz__gora {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Pigułka trybu: wygląd i kolory w `design-system.css` (`.prt-tryb`), bo ten sam kod
   kolorów obowiązuje w koszyku, w kasie i w konfiguratorze — changelog pkt 3. Tutaj
   zostaje tylko to, co dotyczy UŁOŻENIA pigułki w pozycji koszyka. */
.printella-poz__tryb {
    flex: none;
}


/* `anywhere`, bo nazwy plików klientów nie mają spacji: „Wzor_kwiatowy_akwarela…"
   bez tego wychodzi poza kartę. */
.printella-poz__plik {
    margin: 12px 0 0;
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.25;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.printella-poz__params,
.printella-poz__szcz {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px 24px;
    margin: 18px 0 0;
}

.printella-poz__param {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.printella-poz__params dt {
    font-size: 14px;
    font-weight: 600;
    color: #5A648C;
}

.printella-poz__params dd {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #101B54;
}

/* Nota o nadmiarze ponad szerokość zadruku — informacja, nie ostrzeżenie o błędzie. */
.printella-poz__nota {
    margin: 14px 0 0;
    max-width: 60ch;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    color: #3A4478;
}

/* `.printella` w selektorze jest KONIECZNE: system przycisków motywu
   (`.printella button` w `style.css`) ma dwa człony i wygrywał z jednoklasową
   regułą — zmierzone 16px/400 i ramka 1.5px, czyli przełącznik wyglądał jak
   przycisk z obwódką zamiast jak tekst ze strzałką. */
.printella .printella-poz__szcz-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #3A4478;
    cursor: pointer;
}

.printella .printella-poz__szcz-btn:hover {
    color: #101B54;
}

.printella-poz__szcz-strzalka {
    display: inline-block;
    transition: transform .15s ease;
}

.printella .printella-poz__szcz-btn[aria-expanded="true"] .printella-poz__szcz-strzalka {
    transform: rotate(90deg);
}

.printella-poz__szcz {
    padding: 16px 18px;
    border-radius: 10px;
    background: #F7F8FC;
}

.printella-poz__szcz dt {
    font-size: 13px;
    font-weight: 600;
    color: #5A648C;
}

.printella-poz__szcz dd {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #101B54;
}

/* ── Akcje w prawym górnym rogu pozycji (changelog pkt 2) ──────────────────────
   Ujemny margines PIONOWY zostaje — wyrównuje pole klikalne 40 px do linii tekstu
   nazwy obok.

   ⚠️ Ujemny margines POZIOMY (−10 px) został zdjęty. Miał wyrównywać optycznie sam glif
   do krawędzi treści i rzeczywiście to robił (zmierzone: glif kończył się na 704 px przy
   krawędzi pozycji 705 px), ale kosztem wypchnięcia całego pola klikalnego 10 px POZA
   kolumnę treści. Przy rest nie widać tego wcale, za to tło najazdu — zaokrąglony kwadrat
   40 × 40 — wyłaziło poza nazwę, cenę i kwotę, które kończą się równo. Zgłoszone przez
   Steve'a jako „kosz wychodzi poza content".

   Cena tej zmiany: glif siedzi teraz ~11 px od krawędzi, bo jest wyśrodkowany w polu
   40 px. To standardowy margines przycisku ikonowego i nie czyta się jak błąd — a tło
   najazdu wychodzące poza kolumnę czytało się. */
.printella-poz__akcje {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: -8px 0;
    flex: none;
}

/* `.printella a` z `design-system.css` nadaje KAŻDEMU linkowi kolor `--prt-navy`
   i ma w selektorze element, więc bije jednoklasowe reguły. Stąd `a` w selektorze. */
.printella a.printella-poz__edytuj {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #3A4478;
    text-decoration: none;
}

.printella a.printella-poz__edytuj:hover {
    background: #EEF3FB;
    color: #101B54;
}

/* Sam kosz, bez tekstu — opis niesie `aria-label` i `title` w szablonie. */
.printella a.printella-poz__usun {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    color: #5A648C;
    text-decoration: none;
}

.printella a.printella-poz__usun:hover {
    background: #FFECEF;
    color: #C22765;
}

/* ── Stopka pozycji: Cena · Ilość · Razem (changelog pkt 4) ───────────────── */
.printella-poz__stopka {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: clamp(16px, 2vw, 28px);
    margin-top: 22px;
}

.printella-poz__kol {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* `min-height` z handoffu: kolumna ceny ma kończyć się na tej samej linii co
   stepper, mimo że jest od niego niższa. */
.printella-poz__kol--cena {
    min-height: 68px;
    justify-content: flex-end;
}

.printella-poz__kol--razem {
    align-items: flex-end;
    text-align: right;
}

.printella-poz__kol-etykieta {
    font-size: 13px;
    font-weight: 600;
    color: #5A648C;
}

/* `nowrap`: „75,90 zł / mb" złamane po „zł" czyta się jak dwie różne liczby. */
.printella-poz__cena-jedn {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.printella-poz__cena-kwota {
    font-size: clamp(24px, 2vw, 28px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* ── Stepper ilości ───────────────────────────────────────────────────────── */
.printella-poz__ilosc {
    display: flex;
    align-items: center;
    border: 1.5px solid #DCE1EC;
    border-radius: 8px;
    background: #fff;
}

.printella .printella-poz__ilosc .quantity-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #101B54;
    cursor: pointer;
}

.printella .printella-poz__ilosc .quantity-btn:hover:not(:disabled) {
    background: none;
    color: #F0417E;
}

.printella .printella-poz__ilosc .quantity-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Pole ilości — WIDOCZNE i edytowalne od 27.10.2026. Wcześniej było schowane
   do 1 × 1 px, a ilość pokazywał `<span>`, więc w koszyku dało się ją tylko
   wyklikać. `tabular-nums`: bez tego wartość skacze w bok przy każdym „+". */
.printella-poz__ilosc-pole,
.printella .printella-poz__ilosc-pole {
    width: 64px;
    min-width: 0;
    padding: 6px 4px;
    border: 1px solid var(--prt-line, #E2E6F2);
    border-radius: 8px;
    background: #fff;
    color: var(--prt-navy, #101B54);
    text-align: center;
    font-family: inherit;
    font-size: 16px;   /* 16 px, inaczej iOS przybliża stronę przy wejściu w pole */
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.printella-poz__ilosc-pole:focus-visible,
.printella .printella-poz__ilosc-pole:focus-visible {
    outline: 2px solid var(--prt-navy, #101B54);
    outline-offset: 1px;
}

.printella-poz__ilosc-jednostka {
    padding-left: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--prt-text-muted, #3A4478);
    white-space: nowrap;
}

/* Ukryty „Zaktualizuj koszyk" — musi zostać KLIKALNY dla skryptu, więc nie
   `display:none`; stąd ten sam zestaw co wyżej zamiast chowania na sucho. */
.printella-cart-actions__ukryty {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Jedna kolumna dopiero od 640 px.
 *
 * Była chwilowo przesunięta na 768 px, bo pozycja wyglądała na ściśniętą — ale przyczyną
 * nie był próg, tylko `max-width: 600px`, które Hello Elementor nakładało na `.site-main`
 * (patrz komentarz przy `body.woocommerce-cart main.site-main`). Po uwolnieniu szerokości
 * pozycja ma przy 768 px 696 px, czyli miejsca na dwie kolumny z zapasem, i wcześniejsze
 * łamanie byłoby stratą.
 */
@media (max-width: 640px) {
    /* Jedna kolumna; miniatura przestaje zjadać szerokość, ale nie rozlewa się
       na cały ekran — 240 px to granica z projektu. */
    .printella-poz {
        grid-template-columns: minmax(0, 1fr);
    }

    .printella-poz__podglad {
        align-items: flex-start;
    }

    .printella-poz__thumb {
        max-width: 240px;
    }

    /* Dwie kolumny parametrów zamiast auto-fill: przy 150 px minimum siatka
       spadałaby do jednej kolumny i karta rosłaby w nieskończoność. */
    .printella-poz__params,
    .printella-poz__szcz {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}