/**
 * cart.css — powłoka strony koszyka (page-koszyk.php): okruszki, nagłówek
 * z liczbą pozycji, pigułka sezonu, siatka dwóch kolumn koszyka
 * i tabela pozycji (woocommerce/cart/cart.php).
 *
 * Wymaga tokens.css i base.css. Prefiks .dc-cart-page__ dla powłoki,
 * .dc-cart__ dla formularza pozycji. Klasy WooCommerce, których szuka
 * cart.js (.woocommerce-cart-form, .cart_totals, .product-remove),
 * stoją w znaczniku obok naszych i nie niosą tu żadnego stylu.
 *
 * MAKIETA MÓWI CO I GDZIE, PROJEKT MÓWI JAK: nadtytuł i nagłówek wg
 * design-audit.md C.8/C.10 (12 / 600 / --dc-tracking-widest, odstęp 14,
 * h1 --dc-display-3 zamiast makietowych 38 px), pigułka sezonu jako
 * plakietka szklana z C.8 (nie nowy kształt).
 */

/* ==========================================================================
   1. OKRUSZKI
   Makieta: 13 px, szarość, separator złoty. Odnośnik bez podkreślenia,
   najazd kolorem (lista przejść z `color`, C.2).
   ========================================================================== */

.dc-cart-page__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-8);
  margin-block-end: var(--dc-space-18);
  font-size: var(--dc-text-base);
  color: var(--dc-text-subtle);
}

.dc-cart-page__crumb {
  color: var(--dc-text-subtle);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

a.dc-cart-page__crumb:hover {
  color: var(--dc-text);
}

.dc-cart-page__crumb--current {
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text);
}

.dc-cart-page__crumb-sep {
  color: var(--dc-accent);
}

/* ==========================================================================
   2. NAGŁÓWEK STRONY
   ========================================================================== */

.dc-cart-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dc-space-24);
  margin-block-end: var(--dc-space-28);
}

.dc-cart-page__eyebrow {
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

/* h1 strony w skali h2 dużego (makieta 38 px -> --dc-display-3, 30–40):
   to nagłówek roboczy, nie wystawowy. */
.dc-cart-page__heading {
  font-size: var(--dc-display-3);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tight);
}

/* Pigułka sezonu: szkło + obwódka + cień stopnia 1 (C.4: pigułki
   z wyróżnieniem), kółko z ikoną 26 px -> --dc-space-28. */
.dc-cart-page__season {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-10);
  padding: var(--dc-space-10) var(--dc-space-16) var(--dc-space-10) var(--dc-space-12);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-glass);
  box-shadow: var(--dc-shadow-sm);
  font-size: var(--dc-text-base);
  color: var(--dc-text-muted);
}

.dc-cart-page__season-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-28);
  height: var(--dc-space-28);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-accent-a15);
  color: var(--dc-accent-strong);
}

/* ==========================================================================
   3. UKŁAD DWÓCH KOLUMN
   WooCommerce wypisuje formularz koszyka i podsumowanie jako rodzeństwo
   w <div class="woocommerce"> — to jedyny wspólny rodzic, więc na nim
   stoi układ. Klasa wtyczki w selektorze celowo POD naszą owijką
   (.dc-cart-page__layout), żeby nie stylować cudzych .woocommerce.

   Flex z zawijaniem zamiast siatki 1fr/404px: flex-basis z tokenów miary
   (--dc-measure-lg 640 dla formularza, --dc-measure-sm 400 dla
   podsumowania) daje dwie kolumny, dopóki obie się mieszczą (1176 px
   kontenera: 640 + 400 + 28 = 1068), a przy 768 px podsumowanie schodzi
   pod formularz samo, bez breakpointu (reguła 9; ten sam wzorzec co
   .dc-help-cta__row).

   NADMIAR SZEROKOŚCI BIERZE FORMULARZ (flex-grow 999 wobec 1): makieta
   stoi na kontenerze 1360 px, motyw na 1240 — te 120 px brakuje kolumnie
   produktu, nie podsumowaniu. Przy równym wzroście (zmierzone 2026-08-31:
   formularz 680 / podsumowanie 440) kolumna nazwy miała ok. 180 px
   i wiersz rósł do 219 px. Po zmianie podsumowanie trzyma swoją miarę
   (400, jak 404 w makiecie), a gdy zawinie się pod formularz, rośnie
   samo do pełnej szerokości — grow 1 w pustym wierszu to 100 %.
   ========================================================================== */

.dc-cart-page__layout .woocommerce {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--dc-space-28);
}

/* Komunikaty WooCommerce („Koszyk zaktualizowany", „Usunięto… Cofnij?")
   wypisuje woocommerce_before_cart do .woocommerce-notices-wrapper, który
   jest RODZEŃSTWEM formularza i podsumowania w tym samym flexie — bez
   własnej szerokości stawał się trzecią kolumną z lewej (zgłoszenie
   Andrzeja 2026-08-31). Pełny wiersz kładzie go NAD obiema kolumnami;
   odstęp od nich daje gap flexa. Pusta owijka (bez komunikatu) znika,
   żeby nie dokładać pustego wiersza i drugiego gapu nad koszykiem. */
.dc-cart-page__layout .woocommerce > .woocommerce-notices-wrapper {
  flex: 1 1 100%;
  min-width: 0;
}

.dc-cart-page__layout .woocommerce > .woocommerce-notices-wrapper:empty {
  display: none;
}

.dc-cart {
  display: flex;
  flex: 999 1 var(--dc-measure-lg);
  flex-direction: column;
  gap: var(--dc-space-20);
  min-width: 0;
}

/* Podsumowanie lepkie przy przewijaniu długiego koszyka (makieta:
   sticky, top 24). align-self: flex-start jest warunkiem sticky w flexie —
   rozciągnięty element nie ma gdzie „pływać". */
.dc-cart-aside {
  position: sticky;
  top: var(--dc-space-24);
  flex: 1 1 var(--dc-measure-sm);
  align-self: flex-start;
  min-width: 0;
}

/* ==========================================================================
   4. PANEL I TABELA POZYCJI
   Panel: ten sam przepis co panel pustego koszyka (glass-soft, blur-lg,
   r28, --dc-shadow-xl + inset-top). Padding 26/26/8 z makiety -> 28
   po bokach, dół zerowy (ostatni wiersz ma własny odstęp).

   TABELA ZOSTAJE TABELĄ (reguła 19). Układ siatki z makiety dostaje <tr>
   przez display: grid; <table>, <thead> i <tbody> idą na display: block,
   żeby wiersz był jedynym kontenerem siatki. Nie display: contents —
   potrafi wyjąć wiersz z drzewa dostępności (uwaga w regule 19).

   Szerokość zdjęcia: pokrętło --dc-cart-thumb = --dc-space-80 (makieta 92,
   scalone w dół — przy węższym kontenerze motywu każdy piksel kafla
   zabiera kolumnie nazwy). Kolumny cen, ilości i wartości biorą szerokość
   z treści (auto) — makietowe 96 / 122 / 108 to były szerokości POD treść,
   nie decyzje. Odstęp kolumn 16 -> 14: ten sam powód.
   ========================================================================== */

.dc-cart__panel {
  --dc-cart-thumb: var(--dc-space-80);

  padding: var(--dc-space-28) var(--dc-space-28) var(--dc-space-8);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-28);
  background-color: var(--dc-surface-glass-soft);
  -webkit-backdrop-filter: var(--dc-blur-lg);
  backdrop-filter: var(--dc-blur-lg);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

.dc-cart__table,
.dc-cart__head,
.dc-cart__table > tbody {
  display: block;
  width: 100%;
}

.dc-cart__row {
  display: grid;
  grid-template-columns: var(--dc-cart-thumb) minmax(0, 1fr) auto auto auto auto;
  gap: var(--dc-space-14);
  align-items: center;
  padding-block: var(--dc-space-20);
  border-block-end: var(--dc-border) solid var(--dc-border-line);
}

.dc-cart__table > tbody > .dc-cart__row:last-child {
  border-block-end: 0;
}

/* Nagłówki kolumn: eyebrow karty z C.8 (12 / 600 / --dc-tracking-wider,
   --dc-text-subtle), wyrównane do treści kolumn. */
.dc-cart__row--head {
  padding-block: 0 var(--dc-space-14);
}

.dc-cart__col {
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-wider);
  text-transform: uppercase;
  text-align: left;
  color: var(--dc-text-subtle);
}

.dc-cart__col--total {
  text-align: right;
}

.dc-cart__cell {
  min-width: 0;
  padding: 0;
  text-align: left;
  font-weight: 400;
}

/* Zdjęcie: kafel z bielą STAŁĄ w obu motywach (packshoty mają białe tło —
   uzasadnienie w cross-sell.css, sekcja 4), r16, object-fit: contain. */
.dc-cart__thumb {
  display: flex;
  width: var(--dc-cart-thumb);
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-on-dark);
}

.dc-cart__photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tag frakcji: tag z C.8 (a10 + 1 px a30, 10 / 700 / --dc-tracking-wide,
   wersaliki — treścią jest SŁOWO, reguła 24). */
.dc-cart__tag {
  display: inline-flex;
  align-items: center;
  margin-block-end: var(--dc-space-8);
  padding: var(--dc-space-4) var(--dc-space-10);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent-a10);
  font-size: var(--dc-text-2xs);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

.dc-cart__title {
  display: block;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-xl);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-snug);
  color: var(--dc-text);
}

.dc-cart__link {
  color: var(--dc-text);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-cart__link:hover {
  color: var(--dc-accent-strong);
}

.dc-cart__bags {
  display: block;
  margin-block-start: var(--dc-space-6);
  font-size: var(--dc-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--dc-text-subtle);
}

.dc-cart__stock {
  display: block;
  margin-block-start: var(--dc-space-6);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-success);
}

.dc-cart__stock--out {
  color: var(--dc-danger);
}

/* Cena za kilogram: kwota krojem wystawowym, jednostka drobnym pismem pod nią. */
.dc-cart__unit {
  display: block;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dc-cart__unit-label {
  display: block;
  margin-block-start: var(--dc-space-2);
  font-size: var(--dc-text-xs);
  color: var(--dc-text-subtle);
}

/* Stepper: pigułka ze szkła (r16 z makietowych 14), przyciski 32 px o r12
   (reguła zagnieżdżenia C.9: 16 − 4 = 12), pole 40 px bez strzałek
   natywnych. „+" ma tint złota jak w makiecie — to akcja „więcej";
   „−" pozostaje neutralne. Najazd kolorem, kliknięcie scale(.97) (C.2). */
.dc-cart__qty {
  display: inline-flex;
  align-items: center;
  padding: var(--dc-space-4);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass);
  box-shadow: var(--dc-shadow-xs);
}

.dc-cart__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-32);
  height: var(--dc-space-32);
  border-radius: var(--dc-radius-12);
  color: var(--dc-text-muted);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-cart__step--plus {
  background-color: var(--dc-accent-a15);
  color: var(--dc-accent-strong);
}

.dc-cart__step:hover {
  background-color: var(--dc-accent-a30);
  color: var(--dc-accent-strong);
}

.dc-cart__step:active {
  transform: scale(0.97);
}

.dc-cart__step:focus-visible {
  border-radius: var(--dc-radius-12);
}

.dc-cart__qty-input {
  width: var(--dc-space-40);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-black);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--dc-text);
  -moz-appearance: textfield;
  appearance: textfield;
}

.dc-cart__qty-input::-webkit-outer-spin-button,
.dc-cart__qty-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.dc-cart__qty-input:focus-visible {
  outline: none;
  border-radius: var(--dc-radius-8);
  box-shadow: 0 0 0 var(--dc-border) var(--dc-accent);
}

/* Wartość pozycji: 19 px / 800 z makiety -> --dc-text-4xl / black. */
.dc-cart__cell--total {
  text-align: right;
}

.dc-cart__total {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-4xl);
  font-weight: var(--dc-weight-black);
  letter-spacing: var(--dc-tracking-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Usuń: przycisk ikonowy — ranga 4 z C.1 (koło 40, szkło, obwódka subtle,
   ikona --dc-text-secondary; najazd kolorem, kliknięcie scale). Makieta ma
   kwadrat 34 / r11 — kształt rangi wygrywa. */
.dc-cart__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text-secondary);
  text-decoration: none;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-cart__remove:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

.dc-cart__remove:active {
  transform: scale(0.97);
}

.dc-cart__remove:focus-visible {
  border-radius: var(--dc-radius-full);
}

/* ==========================================================================
   5. WIERSZ JAKO KARTA — poniżej progu
   Sześć kolumn nie zwija się samo (reguła 9 działa dla siatek auto-fit,
   nie dla wiersza o stałych kolumnach), więc tu są jedyne breakpointy
   pliku, wyznaczone pomiarem (reguła 19, 2026-08-31): przy 768 px
   podsumowanie schodzi już pod formularz, a wiersz tabelaryczny w 676 px
   zostawiał nazwie 154 px (wiersz 199 px wysokości, tytuł w dwóch
   liniach, dostępność w trzech). Od 48em (768 px) w dół wiersz przechodzi
   w kartę: zdjęcie i nazwa w pierwszym rzędzie, cena za kg i stepper
   w drugim, wartość w trzecim, przycisk usunięcia w rogu; nagłówki kolumn
   schodzą do czytnika ekranu. Od 40em w dół dodatkowo ciaśniejszy panel
   i mniejszy kafel (blok niżej).
   ========================================================================== */

@media (max-width: 48em) {
  /* Ta sama technika co .dc-sr-only w base.css (piksel wyrażony tokenem
     --dc-border, bo reguła 8 nie pozwala użyć klasy tylko w breakpoincie). */
  .dc-cart__head {
    position: absolute;
    width: var(--dc-border);
    height: var(--dc-border);
    padding: 0;
    margin: calc(var(--dc-border) * -1);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Trzy wiersze karty: nazwa obok zdjęcia i przycisku „usuń", pod nimi
     cena za kg i stepper, na dole wartość. Kolumna trzecia niesie TYLKO
     przycisk „usuń" (40 px) — wartość w niej rozpychała ją do 110 px
     kosztem nazwy. */
  .dc-cart__row {
    grid-template-columns: var(--dc-cart-thumb) minmax(0, 1fr) auto;
    grid-template-areas:
      'image product remove'
      'price qty qty'
      'total total total';
    align-items: start;
  }

  .dc-cart__cell--image {
    grid-area: image;
  }

  .dc-cart__cell--product {
    grid-area: product;
  }

  .dc-cart__cell--remove {
    grid-area: remove;
  }

  .dc-cart__cell--price {
    grid-area: price;
    align-self: center;
  }

  .dc-cart__cell--qty {
    grid-area: qty;
    align-self: center;
    justify-self: end;
  }

  .dc-cart__cell--total {
    grid-area: total;
    padding-block-start: var(--dc-space-4);
  }
}

/* Panel i kafel ciaśniejsze: przy 390 px kontener daje 326 px, panel
   z paddingiem 28 zabierał kolejne 56, a kafel 80 + „usuń" 40 + odstępy
   zostawiały nazwie 52 px (zmierzone 2026-08-31 — czwarty przypadek
   uwagi G w konwencjach). Po zmianie: 326 − 32 − 56 − 40 − 28 = 170 px. */
@media (max-width: 40em) {
  .dc-cart__panel {
    --dc-cart-thumb: var(--dc-space-56);

    padding-inline: var(--dc-space-16);
  }
}