/* ============================================================
   MW Motyw — KOSZYK: mini-koszyk (panel boczny), strona /koszyk/,
   modal „Dodano do koszyka" (mobile), pasek progu darmowej dostawy.
   Ładowany na KAŻDYM naszym widoku (mini-koszyk siedzi w nagłówku).

   Tokeny i chrom: assets/tokeny.css. MOBILE FIRST.

   ⚠️ Pułapki (spisane w DOKUMENTACJA-TECHNICZNA.md):
   - reset `.mw-widok <tag>` ma (0,1,1) — komponenty na button/a/ul/li/p
     piszemy jako `.mw-widok .mw-klasa` (0,2,0), inaczej reset je zjada.
   - overlaye mają display:flex — atrybut [hidden] przegrywa z tym,
     dlatego KAŻDY overlay ma jawną regułę `[hidden]{display:none}`.
   - wrapper overlaya sam nosi klasę .mw-widok (tokeny na karcie mw-pdp),
     więc nadpisujemy jego tło (reset ustawia var(--mw-paper)).
   ============================================================ */

/* ============ MINI-KOSZYK ============
   Mobile (fallback, normalnie ikona prowadzi na /koszyk/): panel z prawej.
   Desktop (≥1000px): DYMEK zakotwiczony pod ikoną koszyka (decyzja Michała
   23.07 — nie panel przez całą wysokość). Mechanizm otwierania wspólny
   (MWMotyw.panel); pozycję dymka ustawia koszyk.js zmiennymi --mw-mk-*. */
.mw-widok.mw-mk{ position:fixed; inset:0; z-index:80; display:flex; justify-content:flex-end;
  background:transparent; margin:0; }
.mw-widok.mw-mk[hidden]{ display:none; }
.mw-mk__tlo{ position:absolute; inset:0; background:var(--mw-overlay); }
.mw-mk__panel{ position:relative; display:flex; flex-direction:column; width:100%;
  max-width:420px; background:var(--mw-paper); box-shadow:-1px 0 0 var(--mw-line); }

@media (min-width:1000px){
  .mw-mk__tlo{ background:transparent; } /* dymek: bez przyciemniania strony */
  .mw-mk__panel{ position:absolute; top:var(--mw-mk-top,76px); right:clamp(8px,2vw,40px);
    height:auto; max-height:min(76vh,780px); border:1px solid var(--mw-line);
    border-radius:var(--mw-radius); box-shadow:var(--mw-shadow-3); }
  /* strzałka celująca w ikonę koszyka (pozycja z koszyk.js) */
  .mw-mk__panel::before{ content:""; position:absolute; top:-7px;
    right:var(--mw-mk-strzalka,28px); width:12px; height:12px; background:var(--mw-paper);
    border-left:1px solid var(--mw-line); border-top:1px solid var(--mw-line);
    transform:rotate(45deg); }
}
.mw-mk__head{ display:flex; align-items:center; justify-content:space-between;
  padding:1rem var(--mw-pad); border-bottom:1px solid var(--mw-line); }
.mw-mk__tyt{ font-family:var(--mw-serif); font-weight:500; font-size:1.35rem; }
.mw-widok .mw-mk__x{ display:grid; place-items:center; width:40px; height:40px;
  color:var(--mw-ink-2); margin-inline-end:-8px; }
.mw-widok .mw-mk__x:hover{ color:var(--mw-ink); }
.mw-mk__tresc{ flex:1 1 auto; overflow-y:auto; padding:.25rem var(--mw-pad); }
.mw-mk__pusto{ display:grid; gap:1rem; justify-items:center; text-align:center; padding:3rem 0; }
.mw-mk__stopka{ display:grid; gap:.6rem; padding:1rem var(--mw-pad) 1.2rem;
  border-top:1px solid var(--mw-line); background:var(--mw-paper); }
.mw-mk__stopka[hidden]{ display:none; }
.mw-mk__razem{ display:flex; justify-content:space-between; align-items:baseline; font-size:1rem; }
.mw-mk__dopisek{ font-size:.74rem; color:var(--mw-ink-3); }

/* ============ POZYCJA KOSZYKA (wspólna: mini + strona) ============ */
.mw-kposz{ position:relative; display:flex; gap:1rem; padding:1.1rem 0;
  border-bottom:1px solid var(--mw-line); }
.mw-kposz:last-child{ border-bottom:0; }
.mw-kposz__foto{ flex:0 0 84px; }
/* height:auto MUSI być — inaczej atrybut height="…" z wp_get_attachment_image czyni
   wysokość „definite" i aspect-ratio jest ignorowane (obraz rośnie na pełną miniaturę). */
.mw-kposz__foto img{ width:84px; height:auto; aspect-ratio:3/4; object-fit:cover; background:var(--mw-surface-3); }
.mw-kposz__brak-foto{ display:block; width:84px; aspect-ratio:3/4; background:var(--mw-surface-3); }
.mw-kposz__info{ flex:1 1 auto; min-width:0; }
.mw-widok .mw-kposz__nazwa{ display:block; text-decoration:none; font-size:.92rem;
  line-height:1.35; margin-bottom:.25rem; }
.mw-widok .mw-kposz__nazwa:hover{ text-decoration:underline; }
.mw-kposz__meta{ font-size:.78rem; color:var(--mw-ink-3); margin-bottom:.45rem; }
.mw-kposz__cena{ font-size:.95rem; }
.mw-kposz__akt{ font-weight:600; }
.mw-kposz__stara{ color:var(--mw-ink-3); font-size:.85em; margin-inline-start:.3rem; }
.mw-widok .mw-kposz__usun{ display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.55rem; font-size:.78rem; color:var(--mw-ink-2); text-decoration:none; }
.mw-widok .mw-kposz__usun:hover{ color:var(--mw-ink); }

/* ============ PASEK PROGU DARMOWEJ DOSTAWY ============ */
.mw-prog-dostawy{ display:grid; gap:.45rem; padding:.3rem 0 .4rem; }
.mw-prog-dostawy__txt{ font-size:.82rem; color:var(--mw-ink-2); }
.mw-prog-dostawy.is-osiagniety .mw-prog-dostawy__txt{ color:var(--mw-ok); }
.mw-prog-dostawy__tor{ height:3px; background:var(--mw-line); border-radius:2px; overflow:hidden; }
.mw-prog-dostawy__pasek{ display:block; height:100%; background:var(--mw-black);
  transition:width .3s var(--mw-ease); }
.mw-prog-dostawy.is-osiagniety .mw-prog-dostawy__pasek{ background:var(--mw-ok); }

/* ============ MODAL „DODANO DO KOSZYKA" (mobile: dołem ekranu) ============ */
.mw-widok.mw-dodano{ position:fixed; inset:0; z-index:85; display:flex; align-items:flex-end;
  justify-content:center; background:transparent; margin:0; }
.mw-widok.mw-dodano[hidden]{ display:none; }
.mw-dodano__tlo{ position:absolute; inset:0; background:var(--mw-overlay); }
.mw-dodano__panel{ position:relative; width:100%; background:var(--mw-paper);
  padding:2rem var(--mw-pad) 1.4rem; text-align:center; }
.mw-dodano__znak{ display:grid; place-items:center; width:56px; height:56px; margin:0 auto .9rem;
  border:1px solid var(--mw-ink-3); border-radius:50%; color:var(--mw-ink-2); }
.mw-dodano__tyt{ font-size:1.02rem; }
/* karta produktu w potwierdzeniu: miniaturka + nazwa + wariant (czytelnie, 23.07) */
.mw-dodano__prod{ display:flex; align-items:center; gap:.9rem; text-align:left;
  background:var(--mw-surface-2); border-radius:2px; padding:.75rem .9rem; margin-top:1.1rem; }
.mw-dodano__prod[hidden]{ display:none; }
.mw-dodano__foto{ flex:0 0 56px; width:56px; aspect-ratio:3/4; object-fit:cover;
  border-radius:2px; background:var(--mw-surface-3); }
.mw-dodano__foto[hidden]{ display:none; }
.mw-dodano__opis{ min-width:0; }
.mw-dodano__nazwa{ font-weight:600; font-size:.95rem; line-height:1.35; }
.mw-dodano__war{ font-size:.84rem; color:var(--mw-ink-2); margin-top:.2rem; }
.mw-dodano__akcje{ display:flex; gap:.75rem; margin-top:1.3rem; }
@media (min-width:1000px){
  .mw-widok.mw-dodano{ align-items:center; }
  .mw-dodano__panel{ max-width:460px; }
}

/* ============ STRONA KOSZYKA ============ */
.mw-koszyk__main{ max-width:var(--mw-max); margin-inline:auto; padding:0 var(--mw-pad) 3rem; }
.mw-koszyk__h1-liczba{ color:var(--mw-ink-3); font-size:.6em; }
.mw-koszyk__kolumny{ display:grid; gap:2rem; align-items:start; }
@media (min-width:1000px){
  .mw-koszyk__kolumny{ grid-template-columns:minmax(0,1fr) 380px; gap:3rem; }
  .mw-koszyk__pozycje .mw-kposz__foto,
  .mw-koszyk__pozycje .mw-kposz__brak-foto{ flex-basis:104px; }
  .mw-koszyk__pozycje .mw-kposz__foto img{ width:104px; }
}

/* usuń w prawym górnym rogu pozycji na stronie koszyka */
.mw-koszyk__pozycje .mw-kposz{ padding-right:1.5rem; }
.mw-widok .mw-koszyk__pozycje .mw-kposz__usun{ position:absolute; top:1.1rem; right:0; margin:0; }
.mw-koszyk__pozycje .mw-kposz__usun span:not(.mw-sr){ display:none; } /* samo ✕, etykieta dla SR zostaje */

.mw-kposz__dol{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.35rem; }
.mw-kposz__dol .mw-kposz__cena{ margin:0; }

/* stepper ilości */
.mw-ilosc{ display:inline-flex; align-items:center; border:1px solid var(--mw-line-2); border-radius:2px; }
.mw-widok .mw-ilosc__przycisk{ width:34px; height:34px; display:grid; place-items:center;
  font-size:1.05rem; color:var(--mw-ink-2); }
.mw-widok .mw-ilosc__przycisk:hover{ color:var(--mw-ink); background:var(--mw-surface-2); }
.mw-ilosc__pole{ width:44px; height:34px; border:0; text-align:center; font:inherit;
  background:transparent; -moz-appearance:textfield; appearance:textfield; }
.mw-ilosc__pole::-webkit-outer-spin-button,
.mw-ilosc__pole::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* podsumowanie */
.mw-koszyk__podsumowanie{ display:grid; gap:1.1rem; border:1px solid var(--mw-line);
  padding:1.25rem; position:sticky; top:1rem; }
.mw-kupon__etykieta{ display:block; font-size:.82rem; color:var(--mw-ink-2); margin-bottom:.45rem; }
.mw-kupon__wiersz{ display:flex; gap:.6rem; }
.mw-kupon__pole{ flex:1 1 auto; min-width:0; border:1px solid var(--mw-line-2); border-radius:2px;
  padding:.55rem .75rem; font:inherit; background:var(--mw-paper); }
.mw-widok .mw-kupon__zastosuj{ flex:0 0 auto; min-height:0; padding:.55rem 1rem; }
.mw-widok .mw-kupony{ display:grid; gap:.4rem; list-style:none; margin:0; padding:0; }
.mw-kupony__poz{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-size:.84rem; color:var(--mw-ink-2); background:var(--mw-surface-2); padding:.5rem .7rem; border-radius:2px; }
.mw-widok .mw-kupony__usun{ display:grid; place-items:center; width:26px; height:26px; color:var(--mw-ink-2); }
.mw-widok .mw-kupony__usun:hover{ color:var(--mw-ink); }

.mw-sumy{ display:grid; gap:.5rem; margin:0; border-top:1px solid var(--mw-line); padding-top:1rem; }
.mw-sumy__wiersz{ display:flex; justify-content:space-between; font-size:.92rem; }
.mw-sumy__wiersz dd{ margin:0; }
.mw-sumy__wiersz--rabat dd{ color:var(--mw-ok); }
.mw-sumy__wiersz--razem{ font-size:1.05rem; font-weight:600; border-top:1px solid var(--mw-line);
  padding-top:.7rem; margin-top:.2rem; }
.mw-koszyk__dopisek{ font-size:.76rem; color:var(--mw-ink-3); margin-top:-.4rem; }
.mw-widok .mw-koszyk__wroc{ display:block; text-align:center; font-size:.82rem;
  color:var(--mw-ink-2); }
.mw-widok .mw-koszyk__wroc:hover{ color:var(--mw-ink); }

/* pusty koszyk */
.mw-koszyk__pusty{ display:grid; gap:.9rem; justify-items:center; text-align:center; padding:4rem 1rem; }
.mw-koszyk__pusty-tyt{ font-family:var(--mw-serif); font-weight:500; font-size:1.7rem; }
.mw-koszyk__pusty-txt{ color:var(--mw-ink-2); font-size:.92rem; }

/* komunikaty (kupony, usunięcia) */
.mw-nota{ padding:.75rem 1rem; border:1px solid var(--mw-line-2); background:var(--mw-surface-2);
  color:var(--mw-ink-2); font-size:.88rem; margin-bottom:.75rem; }
.mw-nota--error{ border-color:var(--mw-error-line); background:var(--mw-error-bg); color:var(--mw-error); }
.mw-nota--success{ border-color:var(--mw-ok-line); background:var(--mw-ok-bg); color:var(--mw-ok); }

/* przygaszenie na czas operacji AJAX */
[data-mw-koszyk-strona][aria-busy="true"],
.mw-mk__panel[aria-busy="true"]{ opacity:.55; pointer-events:none; }

/* ============ POLECANE (cross-sell): karuzela ============
   2 kafelki na telefonie, 3–5 wg szerokości; swipe + strzałki (desktop).
   Używana w koszyku („Skompletuj stylizację") i na karcie („Do tego pasują"). */
.mw-polecane{ margin-top:2.5rem; }
.mw-polecane__head{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1rem; }
.mw-polecane__head .mw-h2{ margin:0; }
.mw-polecane__strzalki{ display:none; gap:.4rem; }
@media (min-width:1000px){ .mw-polecane__strzalki{ display:flex; } }
.mw-widok .mw-polecane__strzalka,.mw-pdp .mw-polecane__strzalka{ display:grid; place-items:center;
  width:36px; height:36px; border:1px solid var(--mw-line-2); border-radius:2px;
  color:var(--mw-ink-2); background:var(--mw-paper); }
.mw-widok .mw-polecane__strzalka:hover:not(:disabled),
.mw-pdp .mw-polecane__strzalka:hover:not(:disabled){ color:var(--mw-ink); border-color:var(--mw-ink-3); }
.mw-widok .mw-polecane__strzalka:disabled,
.mw-pdp .mw-polecane__strzalka:disabled{ opacity:.35; cursor:default; }
.mw-widok .mw-polecane__tasma,.mw-pdp .mw-polecane__tasma{ display:flex; gap:var(--mw-gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  margin:0; padding:0 0 .25rem; list-style:none; }
.mw-polecane__tasma::-webkit-scrollbar{ display:none; }
.mw-polecany{ flex:0 0 calc((100% - var(--mw-gap)) / 2); scroll-snap-align:start; min-width:0; }
@media (min-width:700px){ .mw-polecany{ flex-basis:calc((100% - 2*var(--mw-gap)) / 3); } }
@media (min-width:1000px){ .mw-polecany{ flex-basis:calc((100% - 3*var(--mw-gap)) / 4); } }
@media (min-width:1300px){ .mw-polecany{ flex-basis:calc((100% - 4*var(--mw-gap)) / 5); } }
.mw-polecany__foto img,.mw-polecany__brak{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  display:block; background:var(--mw-surface-3); }
.mw-widok .mw-polecany__nazwa,.mw-pdp .mw-polecany__nazwa{ display:block; margin-top:.55rem;
  font-size:.85rem; line-height:1.35; text-decoration:none; }
.mw-widok .mw-polecany__nazwa:hover,.mw-pdp .mw-polecany__nazwa:hover{ text-decoration:underline; }
.mw-polecany__cena{ font-size:.85rem; margin:.2rem 0 .55rem; }
.mw-polecany__cena del{ color:var(--mw-ink-3); font-size:.9em; }
.mw-polecany__cena ins{ text-decoration:none; }
.mw-widok .mw-polecany__dodaj,.mw-pdp .mw-polecany__dodaj{ min-height:38px; width:100%;
  font-size:.68rem; flex:none; display:grid; place-items:center; text-decoration:none; }
.mw-polecany__rozmiary{ margin-top:.5rem; }
.mw-polecany__rozmiary[hidden]{ display:none; }
.mw-polecany__etyk{ font-size:.72rem; color:var(--mw-ink-3); margin-bottom:.35rem; }
.mw-polecany__chipy{ display:flex; flex-wrap:wrap; gap:.35rem; }
.mw-widok .mw-polecany__rozmiar,.mw-pdp .mw-polecany__rozmiar{ min-width:34px; height:32px;
  padding:0 .45rem; border:1px solid var(--mw-line-2); border-radius:2px; font-size:.8rem;
  display:grid; place-items:center; background:var(--mw-paper); }
.mw-widok .mw-polecany__rozmiar:hover,.mw-pdp .mw-polecany__rozmiar:hover{ border-color:var(--mw-ink); }
.mw-widok .mw-polecany__rozmiar[data-stan="backorder"],
.mw-pdp .mw-polecany__rozmiar[data-stan="backorder"]{ border-style:dashed; } /* szyjemy na zamówienie */
/* w koszyku: oddzielona linią, na dole strony — nie dominuje */
.mw-koszyk__main .mw-polecane{ border-top:1px solid var(--mw-line); padding-top:1.75rem; }
