/* =====================================================================
   MW — Tabele rozmiarów (skóra popupu). Własny plik, NIE pdp.css.
   Reużywa chromu modala z pdp.css (.mw-modal / __tlo / __panel); tu tylko
   wnętrze (.mw-tr-*). Scope .mw-pdp (0,2,0+) — wygrywa z resetem/Divi.
   Zakładki: CSS-only, sterowane 2 radiami .mw-tr-radio (nth-of-type).
   ===================================================================== */

/* panel szerszy niż domyślny modal (7 kolumn) + własny padding sekcji.
   STAŁA wysokość (nie max-) → rozmiar nie skacze przy przełączaniu zakładek;
   krótsza zakładka zostawia zapas, dłuższa przewija się w środku. Szerokość i
   wysokość rosną na większych ekranach (media queries niżej). */
.mw-pdp .mw-modal--tr .mw-modal__panel{
  max-width:680px; padding:0; overflow:hidden; border-radius:2px;
  height:min(88vh,760px); display:flex; flex-direction:column;
}
.mw-pdp .mw-modal--tr .mw-tr-radio{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}

/* nagłówek */
.mw-pdp .mw-tr-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--mw-line); flex:0 0 auto;
}
.mw-pdp .mw-tr-tyt{
  font-family:var(--mw-serif); font-weight:600; font-size:1.5rem; line-height:1.1;
  margin:0; letter-spacing:.01em; color:var(--mw-ink);
}
.mw-pdp .mw-tr-tyt small{
  display:block; font-family:var(--mw-sans); font-weight:400; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mw-taupe); margin-bottom:.2rem;
}
.mw-pdp .mw-tr-x{
  border:0; background:none; font-size:1.7rem; line-height:1; cursor:pointer;
  color:var(--mw-ink-2); padding:.1rem .3rem; margin:-.2rem -.3rem 0 .5rem;
}

/* zakładki */
.mw-pdp .mw-tr-tabs{
  display:flex; padding:0 1.4rem; border-bottom:1px solid var(--mw-line); flex:0 0 auto;
}
.mw-pdp .mw-tr-tab{
  padding:.85rem 0; margin-right:1.8rem; cursor:pointer; font-size:.86rem;
  letter-spacing:.02em; color:var(--mw-ink-3); border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .15s var(--mw-ease), border-color .15s var(--mw-ease);
}
.mw-pdp .mw-tr-tab:hover{ color:var(--mw-ink); }
.mw-pdp .mw-tr-radio:nth-of-type(1):checked ~ .mw-tr-tabs .mw-tr-tab:nth-child(1),
.mw-pdp .mw-tr-radio:nth-of-type(2):checked ~ .mw-tr-tabs .mw-tr-tab:nth-child(2){
  color:var(--mw-czern); border-bottom-color:var(--mw-czern); font-weight:600;
}

/* ciało + panele zakładek */
.mw-pdp .mw-tr-body{ padding:1.4rem; overflow-y:auto; flex:1 1 auto; min-height:0;
  -webkit-overflow-scrolling:touch; }
.mw-pdp .mw-tr-pane{ display:none; }
.mw-pdp .mw-tr-radio:nth-of-type(1):checked ~ .mw-tr-body .mw-tr-pane1,
.mw-pdp .mw-tr-radio:nth-of-type(2):checked ~ .mw-tr-body .mw-tr-pane2{ display:block; }

/* instrukcja (proza z edytora) */
.mw-pdp .mw-tr-instr{ margin:0 0 .2rem; }
.mw-pdp .mw-tr-instr p{ margin:0 0 .7rem; font-size:.92rem; color:var(--mw-ink-2); }
.mw-pdp .mw-tr-instr strong{ color:var(--mw-czern); }
.mw-pdp .mw-tr-przyklad{
  margin:.9rem 0 1.1rem; padding:.7rem .9rem; background:var(--mw-ecru); border-radius:3px;
  font-size:.88rem; color:var(--mw-ink-2);
}
.mw-pdp .mw-tr-przyklad p{ margin:0; }
.mw-pdp .mw-tr-przyklad b{ color:var(--mw-czern); }

/* tabela */
.mw-pdp .mw-tr-tabela-wrap{ overflow-x:auto; margin:.4rem 0 0; -webkit-overflow-scrolling:touch; }
.mw-pdp table.mw-tr-tab{ border-collapse:collapse; width:100%; min-width:520px; font-size:.86rem; }
.mw-pdp table.mw-tr-tab th,
.mw-pdp table.mw-tr-tab td{ padding:.55rem .5rem; text-align:center; border-bottom:1px solid var(--mw-line); }
/* Nagłówek na czarnym — hex + !important, bo na żywej karcie ładuje się obok
   arkuszy WC/TablePress/Popup; gwarantujemy czytelność ecru-na-czerni.
   (do listy „cleanup !important po Divi" — zdjąć, gdy zniknie stary balast CSS) */
.mw-pdp table.mw-tr-tab thead th{
  background:#0F0F0F !important; color:#EFE7D5 !important; font-weight:600; letter-spacing:.04em;
  font-size:.82rem; border-bottom:0; position:sticky; top:0;
}
.mw-pdp table.mw-tr-tab thead th:first-child{ text-align:left; }
.mw-pdp table.mw-tr-tab tbody th{
  text-align:left; font-weight:500; color:var(--mw-ink); white-space:nowrap; background:#faf8f4;
}
.mw-pdp table.mw-tr-tab tbody tr:nth-child(even) td,
.mw-pdp table.mw-tr-tab tbody tr:nth-child(even) th{ background:#faf8f4; }
.mw-pdp table.mw-tr-tab tbody tr:hover td,
.mw-pdp table.mw-tr-tab tbody tr:hover th{ background:#f3efe6; }
.mw-pdp .mw-tr-litera{
  display:inline-flex; align-items:center; justify-content:center; width:1.35em; height:1.35em;
  margin-left:.4em; border:1px solid var(--mw-ink-2); border-radius:50%; font-size:.72em;
  color:var(--mw-ink-2); font-weight:600; vertical-align:middle;
}
.mw-pdp .mw-tr-przypisy{ margin:.8rem 0 0; font-size:.78rem; color:var(--mw-ink-3); }
.mw-pdp .mw-tr-przypisy span{ display:block; }

/* obrazek A–F */
.mw-pdp .mw-tr-obraz{ margin:1.2rem 0 0; text-align:center; }
.mw-pdp .mw-tr-obraz img{ display:inline-block; max-width:min(260px,70%); height:auto; }

/* zakładka 2 */
.mw-pdp .mw-tr-jak{ font-size:.92rem; color:var(--mw-ink-2); margin:0 0 1rem; }
.mw-pdp .mw-tr-kroki{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.5rem; }
.mw-pdp .mw-tr-kroki li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; color:var(--mw-ink-2); }
.mw-pdp .mw-tr-kroki .mw-tr-n{
  flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--mw-czern);
  color:var(--mw-ecru); font-size:.78rem; display:inline-flex; align-items:center; justify-content:center;
}
.mw-pdp .mw-tr-pusto{ font-style:italic; color:var(--mw-taupe); font-size:.9rem; margin:0; }
.mw-pdp .mw-tr-dobieracz-note{
  margin-top:1.1rem; padding:.8rem .9rem; border-left:3px solid var(--mw-taupe); background:#faf8f4;
  font-size:.86rem; color:var(--mw-ink-2);
}
.mw-pdp .mw-tr-dobieracz-note b{ color:var(--mw-czern); }

/* ===== DESKTOP / DUŻE EKRANY — szerzej i większa czcionka (więcej miejsca = czytelniej) ===== */
@media (min-width:1000px){
  .mw-pdp .mw-modal--tr .mw-modal__panel{ max-width:860px; height:min(86vh,840px); }
  .mw-pdp .mw-tr-head{ padding:1.3rem 1.9rem; }
  .mw-pdp .mw-tr-tabs{ padding:0 1.9rem; }
  .mw-pdp .mw-tr-body{ padding:1.7rem 1.9rem; }
  .mw-pdp .mw-tr-tyt{ font-size:1.65rem; }
  .mw-pdp .mw-tr-instr p{ font-size:.98rem; }
  .mw-pdp table.mw-tr-tab{ font-size:.95rem; }
  .mw-pdp table.mw-tr-tab th,
  .mw-pdp table.mw-tr-tab td{ padding:.72rem .8rem; }
}
@media (min-width:1500px){
  .mw-pdp .mw-modal--tr .mw-modal__panel{ max-width:1040px; height:min(86vh,920px); }
  .mw-pdp .mw-tr-tyt{ font-size:1.85rem; }
  .mw-pdp .mw-tr-instr p{ font-size:1.05rem; }
  .mw-pdp .mw-tr-przyklad{ font-size:.98rem; }
  .mw-pdp table.mw-tr-tab{ font-size:1.02rem; }
  .mw-pdp table.mw-tr-tab th,
  .mw-pdp table.mw-tr-tab td{ padding:.85rem 1rem; }
}