/* ==========================================================================
   KOSZYK
   Odwzorowanie podglądu koszyk.html. Wszystkie kolory i miary idą przez
   tokeny --mp-* ze style.css motywu; wyjątki opisane niżej.
   Arkusz wczytuje się wyłącznie na stronie koszyka (inc/enqueue.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   RAMA STRONY
   Hello Elementor zwęża .site-main do 1140 px i dokłada własne marginesy,
   a projekt ma 1360 px z rynną --mp-gut. Selektor z dwiema klasami body
   przebija regułę motywu nadrzędnego bez !important.
   -------------------------------------------------------------------------- */

.woocommerce-cart.woocommerce-page .site-main{
  max-width:none;
  padding-inline:0;
  padding-block:clamp(30px, 4vw, 58px) clamp(48px, 7vw, 96px);
}

/* Tytuł strony z szablonu motywu nadrzędnego („Koszyk”) zastępuje
   nagłówek z projektu („Twój koszyk”), rysowany w cart.php. */
.woocommerce-cart .page-header{ display:none; }

.mp-cart{
  /* Dwa odcienie z podglądu, dla których style.css nie ma tokenu.
     Trzymamy je jako zmienne lokalne, żeby nie rozsypywać surowych wartości. */
  --mp-cart-line:#EFE9E1;   /* linia rozdzielająca pozycje */
  --mp-cart-frame:#F1ECE5;  /* ramka miniatury plakatu */

  max-width:var(--mp-max);
  margin-inline:auto;
  padding-inline:var(--mp-gut);
}

/* --------------------------------------------------------------------------
   NADPISANIA MOTYWU NADRZĘDNEGO
   Hello Elementor podkreśla każdy odnośnik w .page-content i maluje każdy
   [type=submit] na różową ramkę z zaokrągleniem. Selektor atrybutu bije
   znacznik `button` ze style.css motywu, więc prostujemy to tutaj.
   Wszędzie wystarcza wyższa szczegółowość — bez !important.
   -------------------------------------------------------------------------- */

.mp-cart a{ text-decoration:none; }

/* Obwódka focusu w kolorze projektu zamiast czarnej z reset.css. */
.mp-cart :focus-visible{
  outline:2px solid var(--mp-focus); outline-offset:3px; box-shadow:none;
}

.mp-cart__crumbs{
  margin:0 0 18px;
  font:400 11px/1.7 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-body);
}
.mp-cart__crumbs a{
  color:var(--mp-body);
  padding:14px 0; min-height:var(--mp-tap);
  display:inline-flex; align-items:center;
}
.mp-cart__crumbs a:hover{ color:var(--mp-ink); }

.mp-cart__title{
  margin:0 0 clamp(26px, 3.4vw, 46px);
  font:300 clamp(34px, 4.6vw, 62px)/1.05 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-cart__title em{ font-style:italic; color:var(--mp-focus); }
/* Skrypt oddaje tu focus po usunięciu ostatniej pozycji — bez migotania obwódki przy kliknięciu. */
.mp-cart__title:focus{ outline:none; }
/* Kontrola dostępności: samo „outline:none” zabierało obwódkę także wtedy, gdy
   focus przyszedł z klawiatury — użytkownik nie widział, gdzie wylądował po
   usunięciu pozycji. Zdejmujemy ją tylko dla wskaźnika, zostawiamy dla klawisza. */
.mp-cart__title:focus-visible{ outline:2px solid var(--mp-focus); outline-offset:4px; }

.mp-cart__grid{
  display:grid;
  grid-template-columns:1fr minmax(280px, 340px);
  gap:clamp(28px, 3.6vw, 60px);
  align-items:start;
}

/* --------------------------------------------------------------------------
   LISTA POZYCJI
   -------------------------------------------------------------------------- */

.mp-cart__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }

.mp-cart__item{
  display:grid; grid-template-columns:96px 1fr; gap:20px;
  padding:22px 0; border-bottom:1px solid var(--mp-cart-line);
  align-items:start;
}

.mp-cart__thumb{
  display:block; position:relative; overflow:hidden;
  background:var(--mp-white); border:1px solid var(--mp-cart-frame);
  aspect-ratio:5 / 7;
}
.mp-cart__thumb img{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:contain; padding:6%;
}

.mp-cart__body{ display:flex; flex-direction:column; min-width:0; }

.mp-cart__head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap;
}
.mp-cart__info{ min-width:0; }

.mp-cart__cat{
  display:block;
  font:400 11px/1.5 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-body);
}
.mp-cart__name{
  display:flex; align-items:center; min-height:var(--mp-tap); margin-top:4px;
  font:400 clamp(18px, 1.6vw, 23px)/1.3 var(--mp-serif); color:var(--mp-ink);
}
.mp-cart__name:hover{ color:var(--mp-bronze); }
.mp-cart__meta{
  margin:7px 0 0;
  font:300 12.5px/1.6 var(--mp-sans); color:var(--mp-body);
}
.mp-cart__backorder{
  margin:7px 0 0;
  font:300 12.5px/1.6 var(--mp-sans); color:var(--mp-taupe);
}

.mp-cart__line{
  margin:0;
  font:300 clamp(16px, 1.4vw, 19px)/1 var(--mp-serif);
  /* Kwoty pozycji stoją jedna pod drugą — cyfry także równej szerokości. */
  color:var(--mp-deep); --mp-cyfry:var(--mp-cyfry-kolumna);
  white-space:nowrap;
}
.mp-cart__line del{ color:var(--mp-muted); font-size:.8em; }
.mp-cart__line ins{ text-decoration:none; }

.mp-cart__acts{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

/* Sterowanie ilością: dwa przyciski 44 px, bez pola tekstowego — jak w projekcie.
   Selektory mają po dwie klasy, bo muszą przebić [type=submit] z reset.css. */
.mp-cart__qty{ display:flex; align-items:center; border:1px solid var(--mp-line-3); }
.mp-cart .mp-cart__step{
  width:var(--mp-tap); height:var(--mp-tap);
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:0; padding:0;
  font:300 16px/1 var(--mp-serif); color:var(--mp-deep);
}
.mp-cart .mp-cart__step:hover:not([disabled]){ color:var(--mp-ink); background:var(--mp-band); }
.mp-cart .mp-cart__step[disabled]{ color:var(--mp-line-3); background:none; cursor:default; }
.mp-cart__qtyval{
  min-width:28px; text-align:center;
  font:300 14px/1 var(--mp-sans); color:var(--mp-ink);
}

.mp-cart .mp-cart__remove{
  display:inline-flex; align-items:flex-end; justify-content:flex-start;
  min-height:var(--mp-tap); min-width:var(--mp-tap); padding:14px 0 6px;
  background:none; border:0; border-radius:0;
  border-bottom:1px solid var(--mp-line-2);
  font:400 11px/1 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-body);
}
.mp-cart .mp-cart__remove:hover{ color:var(--mp-ink); background:none; }

/* Stan pracy skryptu — kliknięty przycisk nie może przyjąć drugiego kliknięcia. */
.mp-cart[aria-busy="true"] .mp-cart__list{ opacity:.55; }
.mp-cart[aria-busy="true"] .mp-cart__step,
.mp-cart[aria-busy="true"] .mp-cart__remove{ pointer-events:none; }

/* --------------------------------------------------------------------------
   CZĘSTO KUPOWANE RAZEM
   -------------------------------------------------------------------------- */

.mp-cross{ margin-top:clamp(34px, 4.4vw, 58px); }
.mp-cross__head{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.mp-cross__rule{ display:block; flex:0 0 auto; width:32px; height:1px; background:var(--mp-rule); }
.mp-cross__label{
  margin:0;
  font:400 11px/1 var(--mp-sans);
  letter-spacing:.15em; text-transform:uppercase; color:var(--mp-body);
}
/* minmax(0,1fr), a nie 1fr — powód przy .mp-grid--4 w style.css (runda 2,
   punkt 8). To TRZECIA siatka kafli produktu, obok katalogu i strony głównej;
   po poprawce punktu 8 została jako jedyna przy `1fr` i wypadła z pomiaru.
   Zmierzone w WebKicie 26.6 (siedem szerokości od 1440 do 390 px): siatka się
   tu nie rozsypywała, bo `min-width:0` na .mp-card zeruje domyślne minimum
   elementu siatki — ale samo `1fr` dalej znaczy „nie węziej niż zawartość”
   i wróciłoby do gry, gdyby ktoś kiedyś ruszył to `min-width`. Z tym samym
   `1fr` i BEZ `min-width:0` (kod sprzed 2190d8b) WebKit dawał tu przy oknie
   900 px kolumny 95,6 / 94 / 94 / 94 px zamiast równych 94,4 px. */
.mp-cross__grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(14px, 2vw, 24px);
}

/* --------------------------------------------------------------------------
   PODSUMOWANIE
   -------------------------------------------------------------------------- */

.mp-cart__side{
  /* 19 px pod przyklejonym nagłówkiem (korekta 23): 70 px bez skryptu, 123 ze skrótem. */
  position:sticky; top:calc(var(--mp-naglowek-dol) + 19px);
  border:1px solid var(--mp-line); background:var(--mp-warm);
  padding:clamp(22px, 2.6vw, 34px);
}

.mp-summary__title{
  margin:0 0 22px;
  font:400 clamp(20px, 1.8vw, 25px)/1.3 var(--mp-serif); color:var(--mp-ink);
}

.mp-summary__rows{ margin:0; }
.mp-summary__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--mp-line-2);
}
.mp-summary__key{
  margin:0;
  font:300 13.5px/1.35 var(--mp-sans); color:var(--mp-body-3);
}
.mp-summary__val{
  margin:0; text-align:right;
  font:300 13.5px/1.35 var(--mp-sans); color:var(--mp-ink);
}
.mp-summary__val bdi{ white-space:nowrap; }
/* Nazwa wybranej metody dostawy — kwota obok musi być czytelna z czego wynika. */
.mp-summary__hint{
  display:block; margin-top:5px;
  font:300 12px/1.45 var(--mp-sans); color:var(--mp-body);
}

.mp-summary__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin:0; padding:18px 0 22px;
}
.mp-summary__total-key{
  font:400 11px/1 var(--mp-sans);
  letter-spacing:.17em; text-transform:uppercase; color:var(--mp-ink);
}
.mp-summary__total-val{
  font:300 clamp(22px, 2vw, 28px)/1 var(--mp-serif); color:var(--mp-ink);
  text-align:right;
}
/* wc_cart_totals_order_total_html() zamyka kwotę w <strong> — projekt ma light. */
.mp-summary__total-val strong{ font-weight:300; }
.mp-summary__total-val small{ display:block; margin-top:6px; font:300 12px/1.5 var(--mp-sans); color:var(--mp-body); }

.mp-summary__actions{ display:flex; flex-direction:column; }
/* woocommerce.css stroi .wc-proceed-to-checkout a.checkout-button na 1,25em
   i blokowy układ — stąd selektor o tej samej szczegółowości, wczytany później. */
.mp-cart .mp-summary__actions a.mp-summary__cta{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--mp-tap); margin:0; padding:19px;
  background:var(--mp-ink); color:var(--mp-paper); border-radius:0;
  font:400 11px/1 var(--mp-sans);
  letter-spacing:.17em; text-transform:uppercase; text-align:center;
}
.mp-cart .mp-summary__actions a.mp-summary__cta:hover{ background:var(--mp-strong); color:var(--mp-paper); }
.mp-summary__back{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--mp-tap); margin-top:10px;
  font:400 11px/1 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-body);
}
.mp-summary__back:hover{ color:var(--mp-ink); }

.mp-summary__notes{
  list-style:none; margin:24px 0 0; padding:20px 0 0;
  border-top:1px solid var(--mp-line-2);
  display:flex; flex-direction:column; gap:10px;
}
.mp-summary__notes li{ font:300 12px/1.6 var(--mp-sans); color:var(--mp-body-2); }

/* --------------------------------------------------------------------------
   STAN PUSTY
   -------------------------------------------------------------------------- */

.mp-cart__empty{
  padding:clamp(40px, 6vw, 90px) 0; text-align:center;
  max-width:440px; margin-inline:auto;
}
.mp-cart__empty-title{
  margin:0 0 14px;
  font:300 clamp(24px, 2.4vw, 32px)/1.3 var(--mp-serif); color:var(--mp-ink);
}
.mp-cart__empty-text{
  margin:0 0 26px;
  font:300 14px/1.8 var(--mp-sans); color:var(--mp-body-2); text-wrap:pretty;
}
.mp-cart__empty .mp-btn{ padding:18px 38px; line-height:1; }

/* Blok na dodatki innych wtyczek (hak woocommerce_cart_collaterals).
   Rysuje się tylko wtedy, gdy coś do niego trafi — patrz cart.php. */
.mp-cart__extra{ margin-top:clamp(34px, 4.4vw, 58px); }

/* --------------------------------------------------------------------------
   KOMUNIKATY WOOCOMMERCE
   Domyślne mają fioletową krechę, ikonę z własnego kroju i wcięcie 3,5em.
   Sprowadzamy je do ramki w stylu strony. Selektory mają po dwie klasy,
   tyle samo co reguły woocommerce.css — wygrywa kolejność wczytania.
   -------------------------------------------------------------------------- */

.mp-cart .woocommerce-message,
.mp-cart .woocommerce-info,
.mp-cart .woocommerce-error{
  list-style:none;
  margin:0 0 22px; padding:14px 18px;
  border:1px solid var(--mp-line); border-top-width:1px; border-radius:0;
  background:var(--mp-warm);
  font:300 13.5px/1.6 var(--mp-sans); color:var(--mp-body-2);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.mp-cart .woocommerce-error{ border-color:var(--mp-taupe); color:var(--mp-ink-2); }
.mp-cart .woocommerce-message::before,
.mp-cart .woocommerce-info::before,
.mp-cart .woocommerce-error::before{ content:none; }
.mp-cart .woocommerce-message a,
.mp-cart .woocommerce-info a,
.mp-cart .woocommerce-error a{
  color:var(--mp-ink); border-bottom:1px solid var(--mp-rule);
  min-height:var(--mp-tap); display:inline-flex; align-items:center;
}
.mp-cart .woocommerce-message .button,
.mp-cart .woocommerce-info .button{
  background:none; padding:0; margin:0;
  font:400 11px/1 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-ink);
  border-radius:0;
}
.mp-cart .woocommerce-error li{ list-style:none; }

/* --------------------------------------------------------------------------
   TELEFON — próg 860 px, ten sam co w podglądzie (S.vw < 860)
   -------------------------------------------------------------------------- */

@media (max-width:860px){
  .mp-cart__grid{ grid-template-columns:1fr; }
  .mp-cart__side{ position:static; }
  /* minmax(0,1fr) — jak wyżej (runda 2, punkt 8). */
  .mp-cross__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:520px){
  .mp-cart__item{ grid-template-columns:76px 1fr; gap:16px; }
  .mp-cart__head{ flex-direction:column; gap:8px; }
  .mp-cart__line{ order:2; }
  .mp-cart__acts{ gap:14px; }
}