/* ==========================================================================
   KARTA PRODUKTU
   Wartości przepisane z podglądu (produkt.html). Motyw wczytuje ten arkusz
   wyłącznie na karcie produktu — patrz mp_ekran() w inc/enqueue.php.
   ========================================================================== */

/* Kolory, których nie ma jeszcze w globalnej palecie w style.css.
   Wszystkie pochodzą z podglądu; trzymam je tutaj, bo style.css jest
   plikiem wspólnym i nie wolno mi go ruszać. Gdyby paleta się rozrosła,
   te cztery hairline'y i zieleń dostępności warto do niej przenieść. */
:root{
  --mp-p-hair:#EFE9E1;              /* cieńsza linia niż --mp-line, tylko na karcie */
  --mp-p-frame:#F1ECE5;             /* obwódka miniatur na przyklejonym pasku */
  --mp-p-dot:#D8CFC1;               /* nieaktywna kropka galerii */
  --mp-p-rule:#C4B7A6;              /* kreska przy nadkreśleniu sekcji poleceń */
  --mp-p-ok:#5C7A54;                /* dioda „dostępny” — element nietekstowy */
  --mp-p-ok-txt:#4F6B48;            /* 5,42 na --mp-cream */
  --mp-p-lead:#4A423A;              /* 9,42 — akapit wiodący w opisie */
  --mp-p-hover:#463A2B;             /* przycisk zakupu po najechaniu */
  --mp-p-glass:rgba(253,251,249,.98);
  --mp-p-zloto:#8A7058;             /* 4,48 na --mp-cream — WYŁĄCZNIE tekst ≥ 24 px (próg 3:1): cena */
  --mp-p-cien:0 -8px 24px -18px rgba(36,29,21,.4);
}

/* ==========================================================================
   OKRUSZKI
   ========================================================================== */

.mp-okruszki{ background:var(--mp-cream); padding:clamp(16px,2.2vw,28px) 0 0; }
.mp-okruszki .mp-wrap{
  font:400 11px/1.7 var(--mp-sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-okruszki a{ color:var(--mp-body); padding:14px 0; display:inline-block; }
.mp-okruszki a:hover{ color:var(--mp-ink); }

.mp-produkt .woocommerce-notices-wrapper{
  max-width:var(--mp-max); margin:0 auto; padding-inline:var(--mp-gut);
}
.mp-produkt .woocommerce-notices-wrapper:empty{ display:none; }

/* ==========================================================================
   UKŁAD DWÓCH KOLUMN
   ========================================================================== */

.mp-produkt__glowna{
  background:var(--mp-cream);
  padding:clamp(18px,2.6vw,36px) 0 clamp(44px,6vw,84px);
}
.mp-produkt__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:clamp(28px,4vw,72px);
  align-items:start;
}
/* Korekta właścicielki (punkt 19): galeria na 60% szerokości i 56 px odstępu
   do panelu zakupu — plakat ma być bohaterem kadru. Dopiero od 1200 px:
   węższy panel zakupu (poniżej 376 px) łamie wiersz z liczbą sztuk
   i przyciskiem. Niżej zostają dwie równe kolumny, a na telefonie jedna. */
@media (min-width:1200px){
  .mp-produkt__grid{ grid-template-columns:minmax(0,60%) minmax(0,1fr); column-gap:56px; }
}

/* ==========================================================================
   GALERIA
   Bez skryptu taśma jest zwykłym poziomym scrollerem ze scroll-snap:
   na telefonie działa natywny swipe, a miniatury są kotwicami.
   Skrypt dokłada klasę .is-js, chowa natywne przewijanie i przejmuje gest.
   ========================================================================== */

.mp-galeria{ display:flex; flex-direction:column; gap:10px; }

/* Kadr 4:5 — decyzja 36 z 20 września. W proporcji plakatu (5:7, punkt 19
   korekty) kadr miał przy 1440 × 900 aż 1035 px wysokości. 4:5 obniża go
   o 11% (924 px przy tej samej szerokości); zdjęcie 5:7 jest wpisane
   w kadr (object-fit:contain), więc plakat jest o tyle mniejszy, a po
   bokach zostaje biały pas — nic nie jest ucinane. Miniatury pod spodem
   (70 × 88 px) mają tę samą proporcję. */
.mp-galeria__scena{
  background:var(--mp-white); border:1px solid var(--mp-p-hair);
  aspect-ratio:4/5; position:relative; overflow:hidden;
}
.mp-galeria__tor{
  position:absolute; inset:0; display:flex;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.mp-galeria__tor::-webkit-scrollbar{ display:none; }
/* Ze skryptem taśmę przesuwa transform, a nie scrollLeft: przeglądarka
   nie musi wtedy godzić naszego gestu z własnym przewijaniem i scroll-snap. */
.mp-galeria.is-js .mp-galeria__tor{
  /* NIE overflow:hidden. Taśma jest ustawiona na inset:0, więc przycinałaby
     zawartość do własnej szerokości jednej klatki — a przy przesuwaniu
     zabierałaby to okno przycinania ze sobą. Skutek: druga i kolejne klatki
     nigdy nie wchodziły w kadr i po kliknięciu miniatury zostawało białe pole.
     Kadrem jest scena (.mp-galeria__scena ma overflow:hidden) i to wystarczy. */
  overflow:visible;
  touch-action:pan-y; scroll-snap-type:none; transition:transform .45s ease;
}
.mp-galeria__klatka{
  flex:0 0 100%; height:100%; position:relative; scroll-snap-align:center;
}
/* Rodzic w selektorze jest potrzebny: .woocommerce-page img{height:auto}
   z woocommerce-layout.css ma szczegółowość (0,1,1) i wygrywał z samą klasą —
   zdjęcie brało wysokość z proporcji pliku, wystawało poza kadr i było ucinane
   u dołu. Bez wewnętrznego marginesu (punkt 19): biały margines mają już pliki. */
.mp-galeria .mp-galeria__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:0; display:block;
}
.mp-galeria__brak{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:12%; text-align:center;
  font:300 clamp(16px,1.6vw,22px)/1.3 var(--mp-serif); color:var(--mp-body);
}
.mp-galeria__badge{ z-index:2; }

.mp-galeria__kropki{
  position:absolute; bottom:14px; left:0; right:0; z-index:2;
  display:flex; justify-content:center; gap:7px;
}
.mp-galeria__kropki span{
  width:6px; height:6px; border-radius:50%; background:var(--mp-p-dot); display:block;
}
.mp-galeria__kropki span.is-on{ background:var(--mp-ink); }

.mp-galeria__miniatury{ display:flex; gap:8px; flex-wrap:wrap; }
.mp-galeria__mini{
  width:70px; height:88px; flex:0 0 auto; display:block;
  position:relative; overflow:hidden;
  background:var(--mp-white); border:1px solid var(--mp-p-hair);
  scroll-snap-align:start;
}
.mp-galeria__mini.is-on{ border-color:var(--mp-ink); }
.mp-galeria__mini-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:7%; display:block;
}

/* ==========================================================================
   PANEL ZAKUPU
   ========================================================================== */

.mp-buybox__nad{
  margin:0; font:400 11px/1.7 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-body);
}
.mp-buybox__tytul{
  margin:12px 0 0; font:300 clamp(30px,3.8vw,50px)/1.08 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-buybox__cena{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:16px 0 0;
}
.mp-buybox__teraz{
  /* 30 px na każdej szerokości: punkt 20 korekty podaje tę wartość bez
     zastrzeżeń, a wcześniejsze clamp() zmniejszało cenę do 24 px na telefonie
     i 24,6 px na 1024. To zarazem tekst duży, więc złoty (4,48:1) przechodzi —
     nie zmniejszać poniżej 24 px i nie używać --mp-p-zloto dla mniejszego pisma. */
  font:300 30px/1 var(--mp-serif); color:var(--mp-p-zloto);
  /* Cyfry równej wysokości (punkt 20 korekty) daje teraz reguła „CYFRY”
     w style.css dla całego serwisu (decyzja 37). */
}
.mp-buybox__stara{
  font:300 15px/1 var(--mp-sans); color:var(--mp-body); text-decoration:line-through;
}
/* Decyzja 35: „z VAT” (przy pliku „z VAT · plik do pobrania”) w stylu
   sprzed korekty B1 — bez kwoty wysyłki. --mp-body ma 5,54:1, więc 12,5 px
   wolno; złoty z ceny tu nie wchodzi (4,48:1, tylko tekst ≥ 24 px). */
.mp-buybox__vat{ font:300 12.5px/1 var(--mp-sans); color:var(--mp-body); }

.mp-buybox__punkty{
  list-style:none; margin:26px 0 30px; padding:22px 0;
  border-top:1px solid var(--mp-p-hair); border-bottom:1px solid var(--mp-p-hair);
  display:flex; flex-direction:column; gap:9px;
}
.mp-buybox__punkty li{
  display:flex; gap:12px; align-items:flex-start;
  font:300 14px/1.7 var(--mp-sans); color:var(--mp-body-3); text-wrap:pretty;
}
.mp-buybox__punkty li::before{
  content:""; width:4px; height:4px; margin-top:9px; flex:0 0 auto;
  background:var(--mp-muted);
}

/* Wybór wariantu — natywne pola radio schowane pod kaflem.
   Stan zaznaczenia wystawia sam input, dlatego nie dokładamy aria-checked. */
.mp-warianty{ border:0; margin:0; padding:0; min-width:0; }
.mp-warianty__legenda{
  padding:0; margin-bottom:11px; float:left; width:100%;
  font:400 11px/1 var(--mp-sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-warianty__siatka{
  clear:both;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px; margin-bottom:24px;
}
.mp-wariant{ position:relative; display:flex; }
.mp-wariant__pole{
  position:absolute; width:1px; height:1px; margin:0; padding:0;
  opacity:0; pointer-events:none;
}
.mp-wariant__kafel{
  flex:1; display:flex; flex-direction:column; gap:7px;
  border:1px solid var(--mp-line-3); padding:14px 16px;
  min-height:var(--mp-tap); cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease;
}
.mp-wariant__nazwa{ font:400 12px/1 var(--mp-sans); color:var(--mp-deep); }
.mp-wariant__podpis{ font:300 11px/1.2 var(--mp-sans); color:var(--mp-body); }
.mp-wariant__kafel:hover{ border-color:var(--mp-rule); }
.mp-wariant__pole:checked + .mp-wariant__kafel{
  border-color:var(--mp-ink); background:var(--mp-ink);
}
.mp-wariant__pole:checked + .mp-wariant__kafel .mp-wariant__nazwa{ color:var(--mp-paper); }
.mp-wariant__pole:checked + .mp-wariant__kafel .mp-wariant__podpis{ color:var(--mp-on-dark); }
.mp-wariant__pole:focus-visible + .mp-wariant__kafel{
  outline:2px solid var(--mp-focus); outline-offset:3px;
}
.mp-wariant__pole:disabled + .mp-wariant__kafel{
  opacity:.5; cursor:not-allowed; text-decoration:line-through;
}

.mp-buybox__stan{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font:400 11px/1.4 var(--mp-sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--mp-p-ok-txt);
}
.mp-buybox__dioda{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--mp-p-ok);
}
.mp-buybox__stan.is-off{ color:var(--mp-body); }
.mp-buybox__stan.is-off .mp-buybox__dioda{ background:var(--mp-rule); }

.mp-buybox__akcja{
  display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; margin-bottom:14px;
}
.mp-ilosc{ display:flex; align-items:center; border:1px solid var(--mp-line-3); }
.mp-ilosc__btn{
  width:48px; min-height:54px; display:flex; align-items:center; justify-content:center;
  font:300 18px/1 var(--mp-serif); color:var(--mp-deep);
}
/* Bez JavaScriptu plus i minus nie mają czym sterować, więc szablon renderuje
   je z atrybutem hidden. Atrybut działa tylko dzięki display:none w arkuszu
   przeglądarki, a reguła wyżej ustawia display:flex i go pokonuje — przyciski
   były widoczne i martwe. Ta sama pułapka co przy „Czytaj więcej". */
.mp-ilosc__btn[hidden]{ display:none; }
.mp-ilosc__btn:hover{ color:var(--mp-ink); }
/* reset.css motywu nadrzędnego ustawia input[type="number"] na 100% szerokości,
   z ramką i zaokrągleniem. Selektor z atrybutem bije samą klasę, więc podnosimy
   szczegółowość o rodzica zamiast sięgać po !important. */
.mp-buybox .mp-ilosc__pole{
  width:56px; height:54px; padding:0; border:0; border-radius:0;
  background:transparent; text-align:center;
  font:300 15px/1 var(--mp-sans); color:var(--mp-ink);
}
/* Strzałki przeglądarki chowamy dopiero wtedy, gdy skrypt podstawi własne
   przyciski — bez JavaScriptu są jedynym sposobem zmiany liczby sztuk myszą. */
.mp-buybox .mp-ilosc.is-js .mp-ilosc__pole{ appearance:textfield; -moz-appearance:textfield; }
.mp-buybox .mp-ilosc.is-js .mp-ilosc__pole::-webkit-outer-spin-button,
.mp-buybox .mp-ilosc.is-js .mp-ilosc__pole::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.mp-buybox__kup{
  flex:1 1 200px; min-width:200px; min-height:54px;
  background:var(--mp-ink); color:var(--mp-paper);
  display:flex; align-items:center; justify-content:center;
  font:400 11px/1 var(--mp-sans); letter-spacing:.17em; text-transform:uppercase;
  transition:background-color .2s ease;
}
.mp-buybox__kup:hover{ background:var(--mp-p-hover); color:var(--mp-paper); }

.mp-buybox__notka{
  margin:0 0 26px; font:300 12.5px/1.6 var(--mp-sans); color:var(--mp-body);
}

/* Pasek zaufania z inc/woocommerce.php — na karcie produktu ma inny układ
   niż domyślny z style.css: dwie kolumny i hairline w roli siatki.
   Selektor jest bardziej szczegółowy od globalnego, więc obywa się bez !important. */
.mp-buybox .mp-trust{
  grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--mp-p-hair);
  border:1px solid var(--mp-p-hair); margin-bottom:28px;
}
/* Ikona jest pozycjonowana bezwzględnie (patrz style.css: wewnątrz <dl>
   element <div> może zawierać wyłącznie dt i dd, więc ikona siedzi w <dt>).
   Tutaj wyśrodkowujemy ją w pionie, bo komórka ma stałą wysokość. */
.mp-buybox .mp-trust > div{
  background:var(--mp-cream); border:0; position:relative;
  padding:18px 16px 18px 51px; min-height:74px;
  display:flex; flex-direction:column; justify-content:center;
}
.mp-buybox .mp-trust__ico{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center; color:var(--mp-body);
}
.mp-buybox .mp-trust dt{
  margin:0 0 6px; color:var(--mp-ink);
  font:400 11px/1 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase;
}
.mp-buybox .mp-trust dd{ font:300 12.5px/1.45 var(--mp-sans); color:var(--mp-body); }
/* Druga wersja komórek przy wariancie „Plik cyfrowy” (inc/woocommerce.php,
   mp_trust_strip). Ikona ma wyżej display:flex, który wygrywa z domyślnym
   [hidden]{display:none} przeglądarki — stąd jawna reguła. */
.mp-buybox .mp-trust [hidden]{ display:none; }

.mp-komplet{
  display:grid; grid-template-columns:84px 1fr; gap:18px; align-items:center;
  border:1px solid var(--mp-line-3); background:var(--mp-warm); padding:16px;
  transition:border-color .2s ease;
}
.mp-komplet:hover{ border-color:var(--mp-ink); }
.mp-komplet__media{
  display:block; background:var(--mp-white);
  aspect-ratio:5/7; position:relative; overflow:hidden;
}
.mp-komplet__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6%;
}
.mp-komplet__opis{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.mp-komplet__nad{
  font:400 11px/1 var(--mp-sans); letter-spacing:.17em;
  text-transform:uppercase; color:var(--mp-taupe);
}
.mp-komplet__tytul{
  font:400 clamp(17px,1.5vw,21px)/1.3 var(--mp-serif); color:var(--mp-ink);
}
.mp-komplet__cena{ font:300 12.5px/1.6 var(--mp-sans); color:var(--mp-body-2); }
.mp-komplet__cena del{ opacity:.6; margin-right:6px; }
.mp-komplet__cena ins{ text-decoration:none; }

.mp-buybox__meta{
  display:flex; gap:26px; flex-wrap:wrap;
  margin:26px 0 0; padding-top:22px; border-top:1px solid var(--mp-p-hair);
  font:300 12px/1.6 var(--mp-sans); color:var(--mp-body);
}

/* ==========================================================================
   ZAKŁADKI I PANELE
   ========================================================================== */

/* Punkt 21 korekty: pasek czyta się jako nawigacja — wyśrodkowany, jasne
   tło z liniami u góry i u dołu, napisy 12 px wersalikami co 40 px, aktywna
   ciemniejsza i podkreślona 2 px. Rozstrzelenie .16em i zwykła grubość
   aktywnej zakładki jak w .aa-tab wzoru: pogrubienie zmieniałoby szerokość
   napisu, a przy wyśrodkowaniu przesuwało sąsiadów. */
.mp-taby-pas{
  background:var(--mp-cream);
  border-top:1px solid var(--mp-line); border-bottom:1px solid var(--mp-line);
}
/* Zawijanie zamiast overflow-x:auto: przewijany pojemnik obcinał obwódkę
   fokusu u góry i u dołu, a na 320 px chował trzecią zakładkę za krawędzią. */
.mp-taby{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  /* 28 px + 2 × 6 px marginesu zakładki = 40 px między napisami. */
  column-gap:28px; row-gap:0;
}
/* Trzy zakładki (310 px) z odstępami 40 px potrzebują 366 px, a poniżej 420 px
   okna pole treści ma mniej; odstęp maleje wtedy z szerokością okna (21,75 px
   na 390), jak .aa-tabs wzoru do 900 px, a na 320 px zakładki się zawijają. */
@media (max-width:419px){
  .mp-taby{ column-gap:clamp(8px,2.5vw,28px); }
}
.mp-taby li{ list-style:none; flex:0 0 auto; }
.mp-taby__tab{
  position:relative;
  display:flex; align-items:center; justify-content:center; white-space:nowrap;
  min-height:var(--mp-tap); min-width:var(--mp-tap); padding:22px 6px;
  font:400 12px/1 var(--mp-sans); letter-spacing:.16em;
  /* #96887A z PDF ma 3,34:1 na tym tle — za mało dla 12 px; --mp-muted 5,12:1. */
  text-transform:uppercase; color:var(--mp-muted);
}
.mp-taby__tab::after{
  content:""; position:absolute; left:6px; right:6px; bottom:0; height:2px;
  background:transparent;
}
.mp-taby__tab:hover{ color:var(--mp-ink); }
.mp-taby__tab.is-on{ color:var(--mp-ink); }
.mp-taby__tab.is-on::after{ background:var(--mp-ink); }

.mp-panele{
  background:var(--mp-cream);
  padding:clamp(40px,5.5vw,80px) 0 clamp(52px,7vw,100px);
}
.mp-panel + .mp-panel{ margin-top:clamp(40px,5vw,72px); }
.mp-panel__h{
  margin:0 0 26px; font:300 clamp(22px,2.4vw,30px)/1.2 var(--mp-serif); color:var(--mp-ink);
}

/* Punkt 22 korekty: trzy kolumny z odstępem 48 px, a wstęp jest pierwszą
   pozycją w kolumnach. Kolumny wyrównuje przeglądarka (column-fill:balance).
   Żeby mogła to zrobić drobniej niż całymi sekcjami, akapit wolno przełamać
   do następnej kolumny (domyślnie co najmniej dwa wiersze po każdej stronie),
   ale nagłówek nie zostaje sam na dole kolumny. Z sekcjami niepodzielnymi
   różnica wysokości kolumn sięgała 44%, po tej zmianie 34% w najgorszym
   przypadku w całym katalogu. Interlinie ściągnięte (1,9 → 1,65; 1,72 → 1,5),
   żeby zakładki z opisem mieściły się na jednym ekranie. */
.mp-opis__kolumny{ columns:3 260px; column-gap:48px; column-fill:balance; }
.mp-opis__wstep{ margin:0 0 30px; }
.mp-opis__kicker{
  margin:0 0 20px; font:400 11px/1.7 var(--mp-sans);
  letter-spacing:.15em; text-transform:uppercase; color:var(--mp-body);
}
.mp-opis__lead{
  margin:0; font:300 clamp(18px,1.7vw,23px)/1.5 var(--mp-serif);
  color:var(--mp-p-lead); text-wrap:pretty;
}
.mp-opis__blok{ margin:0 0 30px; }
.mp-opis__blok h1,
.mp-opis__blok h2,
.mp-opis__blok h3,
.mp-opis__blok h4,
.mp-opis__blok h5,
.mp-opis__blok h6{
  margin:0 0 15px; padding-bottom:11px; border-bottom:1px solid var(--mp-p-hair);
  font:400 clamp(16px,1.35vw,19px)/1.4 var(--mp-serif);
  letter-spacing:.005em; color:var(--mp-ink); text-wrap:balance;
  break-after:avoid; break-inside:avoid;
}
.mp-opis__blok p{
  margin:0 0 13px; font:300 14px/1.65 var(--mp-sans); color:var(--mp-body-2);
  text-wrap:pretty; hanging-punctuation:first;
}
.mp-opis__blok ul,
.mp-opis__blok ol{
  margin:0 0 13px; padding-left:20px;
  font:300 14px/1.65 var(--mp-sans); color:var(--mp-body-2);
}
.mp-opis__blok li{ margin:0 0 6px; }
.mp-opis__blok li p{ margin:0; }
.mp-opis__blok strong{ font-weight:500; color:var(--mp-deep); }
.mp-opis__blok a{ color:var(--mp-bronze); text-decoration:underline; }
.mp-opis__blok img{ height:auto; margin-bottom:13px; }

.mp-dane{ margin:0; display:grid; gap:0 clamp(30px,4vw,72px); }
.mp-dane--dwie{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); max-width:900px;
}
.mp-dane--jedna{ grid-template-columns:1fr; max-width:640px; }
.mp-dane__wiersz{
  display:flex; align-items:baseline; gap:18px;
  padding:15px 0; border-bottom:1px solid var(--mp-p-hair);
}
.mp-dane dt{
  flex:0 0 120px; font:400 11px/1.4 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-body);
}
.mp-dane--jedna dt{ flex-basis:140px; }
.mp-dane dd{ margin:0; font:300 14px/1.6 var(--mp-sans); color:var(--mp-deep); }

/* ==========================================================================
   TREŚĆ ZALEŻNA OD WARIANTU (runda 2, punkt 9)
   Bloki wszystkich wariantów leżą JEDEN NA DRUGIM w tej samej komórce
   siatki, więc pudełko ma zawsze wysokość najwyższego z nich i podmiana
   nie przesuwa niczego pod spodem — ani reszty zakładek bez skryptu, ani
   sekcji „Do tego plakatu pasują” i stopki.
   Niewybrany blok znika przez visibility, a nie przez display:none ani
   atrybut hidden: te dwa zabrałyby komórce wysokość i skok wróciłby.
   visibility:hidden wyjmuje treść z drzewa dostępności i z tabulacji, więc
   czytnik ekranu i tabulator widzą wyłącznie wariant wybrany.
   Bez skryptu klasę is-on nadaje serwer wariantowi zaznaczonemu na wejściu.
   ========================================================================== */
.mp-tresc-wariantu{ display:grid; break-inside:avoid; }
.mp-tresc-wariantu > *{ grid-area:1 / 1; visibility:hidden; }
.mp-tresc-wariantu > .is-on{ visibility:visible; }
/* Treść wpisana TYLKO przy jednym formacie. Blok powstaje wyłącznie tam,
   gdzie coś wpisano, więc przy pozostałych formatach w pudełku nie ma czego
   pokazać — a samo pudełko dalej rezerwowałoby wysokość najwyższego bloku
   i zostawiało pustą dziurę (zmierzone: 189 px w zakładce „Opis” przy
   wpisie zrobionym tylko przy A3). Wtedy — i tylko wtedy — pudełko znika
   w całości: „puste pole znaczy tak jak dla całego produktu”, a nie „pusta
   ramka na wejściu”. Skok układu wraca, ale dotyczy formatu, przy którym
   właścicielka świadomie nic nie napisała. Gdy każdy format ma swój blok,
   warunek nie zachodzi i zostaje rezerwacja wysokości z reguł wyżej. */
.mp-tresc-wariantu:not(:has(> .is-on)){ display:none; }
/* Tabela wariantu odsunięta od wspólnej — inaczej czytałoby się to jak
   dalszy ciąg jednej tabeli, a to są wiersze tylko dla tego formatu. */
.mp-tresc-wariantu--dane{ margin-top:clamp(24px,3vw,40px); }
.mp-dane__nad{
  margin:0 0 6px; font:400 11px/1.4 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-bronze);
}

.mp-opinie{ max-width:560px; }
.mp-opinie__tytul{
  margin:0 0 14px; font:300 clamp(22px,2vw,28px)/1.3 var(--mp-serif); color:var(--mp-ink);
}
.mp-opinie__tekst{ margin:0 0 22px; font:300 14px/1.8 var(--mp-sans); color:var(--mp-body-2); }
.mp-opinie__cta{
  display:inline-flex; align-items:center; min-height:var(--mp-tap);
  border:1px solid var(--mp-rule); padding:16px 32px;
  font:400 11px/1 var(--mp-sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mp-ink);
}
.mp-opinie__cta:hover{ background:var(--mp-ink); color:var(--mp-paper); }

/* ==========================================================================
   SEKCJE POLECEŃ
   ========================================================================== */

.mp-polecane{ padding:clamp(48px,7vw,104px) 0; }
.mp-polecane--pasuja{ background:var(--mp-band); }
.mp-polecane--seria{ background:var(--mp-cream); }
.mp-polecane__nad{
  display:flex; align-items:center; gap:16px; margin:0 0 18px;
  font:400 11px/1 var(--mp-sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-polecane__nad span{ width:32px; height:1px; background:var(--mp-p-rule); flex:0 0 auto; }
.mp-polecane__tytul{
  margin:0 0 clamp(26px,3.4vw,44px);
  font:300 clamp(28px,3.6vw,46px)/1.1 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-polecane__tytul em{ font-style:italic; color:var(--mp-focus); }
.mp-polecane__nad--srodek{ justify-content:center; margin-bottom:16px; }
.mp-polecane__tytul--srodek{ text-align:center; }

/* ==========================================================================
   PRZYKLEJONY PASEK ZAKUPU
   Jeden, nie dwa jak w podglądzie, i pokazywany dopiero po przewinięciu
   poza główny przycisk — patrz assets/js/product.js.
   ========================================================================== */

.mp-sticky{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:68;
  background:var(--mp-p-glass); border-top:1px solid var(--mp-line-2);
  backdrop-filter:blur(10px); box-shadow:var(--mp-p-cien);
}
.mp-sticky__inner{
  max-width:var(--mp-max); margin:0 auto;
  display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center;
  padding:9px 14px 11px;
}
.mp-sticky__media{
  display:block; background:var(--mp-white); border:1px solid var(--mp-p-frame);
  aspect-ratio:5/7; position:relative; overflow:hidden;
}
.mp-sticky__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6%;
}
.mp-sticky__opis{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.mp-sticky__nazwa{
  font:400 13px/1.25 var(--mp-serif); color:var(--mp-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mp-sticky__cena{ font:300 12.5px/1 var(--mp-sans); color:var(--mp-body-2); }
.mp-sticky__btn{
  background:var(--mp-ink); color:var(--mp-paper);
  padding:0 20px; min-height:46px; white-space:nowrap;
  display:flex; align-items:center; justify-content:center;
  font:400 11px/1 var(--mp-sans); letter-spacing:.15em; text-transform:uppercase;
}
.mp-sticky__btn:hover{ background:var(--mp-p-hover); color:var(--mp-paper); }

/* ==========================================================================
   TELEFON
   ========================================================================== */

@media (max-width:860px){
  /* Miniatury jadą w poziomie zamiast zawijać się na trzy rzędy. */
  .mp-galeria__miniatury{
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
    padding-bottom:2px; scrollbar-width:none;
  }
  .mp-galeria__miniatury::-webkit-scrollbar{ display:none; }

  .mp-dane--dwie{ grid-template-columns:1fr; }
  .mp-buybox__meta{ gap:8px 20px; }

  /* Pasek stoi nad dolną nawigacją, nie na niej. Jej wysokość podstawia
     skrypt w --mp-p-tabbar — zależy od wcięcia bezpiecznego telefonu,
     więc nie da się jej zapisać na sztywno. */
  .mp-sticky:not([hidden]){ display:block; bottom:var(--mp-p-tabbar, 64px); }
  body.mp-ma-pasek{ padding-bottom:calc(var(--mp-p-tabbar, 64px) + 92px); }
}

/* ==========================================================================
   PODGLĄD ZDJĘCIA
   Własny, lekki. PhotoSwipe z WooCommerce został zdjęty, bo motyw nie używa
   markupu, który ten skrypt obsługuje — ładował się na darmo razem z jQuery.
   ========================================================================== */

/* Kursor mówi, że w zdjęcie da się kliknąć. */
.mp-galeria__img.jest-powiekszalny{ cursor:zoom-in; }

/* Lupa: jawny cel dla klawiatury i dla dotyku. Sam obraz nie jest
   przyciskiem, więc bez niej powiększenie byłoby dostępne tylko myszą.
   Ikonę rysuje SVG ze skryptu (punkt 3 korekty: szkło z obramowań miało
   uchwyt oderwany od okręgu i pod złym kątem). Przycisk zostaje 44 × 44. */
.mp-galeria__lupa{
  position:absolute; right:12px; bottom:12px; z-index:2;
  width:var(--mp-tap); height:var(--mp-tap);
  display:flex; align-items:center; justify-content:center;
  background:rgba(253,251,249,.92); border:1px solid var(--mp-rule-mocny);
  color:var(--mp-ink); cursor:zoom-in;
  transition:background .2s ease;
}
.mp-galeria__lupa:hover{ background:var(--mp-white); }
.mp-galeria__lupa svg{ display:block; }

/* ==========================================================================
   PODGLĄD — TŁO
   Punkt 5 korekty: było rgba(36,29,21,.94), czyli prawie czarna płachta
   kłócąca się z jasną stroną. Teraz biel z kryciem 80% i rozmyciem 10 px —
   strona prześwituje, plakat zostaje najostrzejszym punktem kadru.
   ========================================================================== */
.mp-podglad{
  position:fixed; inset:0; z-index:200;
  display:none;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
/* Bez rozmycia sama biel 80% za słabo oddziela stronę od plakatu, więc
   przeglądarce bez backdrop-filter dokładamy krycia. */
@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .mp-podglad{ background:rgba(255,255,255,.94); }
}
.mp-podglad.jest-otwarty{ display:block; animation:mp-podglad-wejscie .22s ease both; }
@keyframes mp-podglad-wejscie{ from{ opacity:0; } to{ opacity:1; } }

/* Strona pod spodem nie może się przewijać, gdy podgląd jest otwarty. */
html.ma-podglad{ overflow:hidden; }

.mp-podglad__pudlo{
  position:absolute; inset:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
/* Rozmiar ustawia skrypt (wpasowanie w okno razy skala). max-* zostaje na
   chwilę przed wczytaniem pliku, żeby surowe 1500 × 2100 nie mignęło. */
.mp-podglad__img{
  max-width:100vw; max-height:100vh;
  width:auto; height:auto; display:block;
  background:var(--mp-white);
  cursor:zoom-in; touch-action:none; user-select:none; -webkit-user-select:none;
  transition:transform .18s ease;
}
.mp-podglad__img.jest-przesuwalny{ cursor:grab; }
.mp-podglad__img.jest-przesuwalny:active{ cursor:grabbing; }

.mp-podglad__podpis{
  position:absolute; left:50%; transform:translateX(-50%); z-index:3;
  bottom:clamp(12px,2.4vw,26px);
  margin:0; padding:8px 14px;
  background:rgba(253,251,249,.92); border:1px solid var(--mp-line-2);
  font:400 11px/1 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mp-ink-2);
}

/* Pasek narzędzi: pomniejsz, odczyt skali, powiększ, zamknij.
   Na jasnym tle sterowanie musi mieć własną, nieprzezroczystą podkładkę —
   inaczej kontrast zależałby od tego, co akurat prześwituje spod spodu. */
.mp-podglad__narzedzia{
  position:absolute; z-index:3;
  top:clamp(8px,1.6vw,20px); right:clamp(8px,1.6vw,20px);
  display:flex; align-items:center; gap:8px;
}
.mp-podglad__zamknij,
.mp-podglad__skala,
.mp-podglad__krok{
  min-width:var(--mp-tap); min-height:var(--mp-tap);
  display:flex; align-items:center; justify-content:center;
  color:var(--mp-ink); background:rgba(253,251,249,.92);
  border:1px solid var(--mp-rule-mocny); cursor:pointer;
  font:300 26px/1 var(--mp-sans);
  transition:background .2s ease;
}
/* Stan po najechaniu I po dostaniu ogniska musi być wypisany jawnie: style.css
   zeruje tło każdego przycisku regułą `button:hover, button:focus` (0,1,1),
   więc sama klasa (0,1,0) przegrywa. Na ciemnym tle sprzed punktu 5 nie było
   tego widać, bo przyciski i tak nie miały tła — teraz przycisk zamykania
   dostaje ognisko już przy otwarciu podglądu i bez tej reguły zostawałby
   przezroczysty nad prześwitującą stroną. */
.mp-podglad__zamknij:hover,
.mp-podglad__zamknij:focus,
.mp-podglad__skala:hover,
.mp-podglad__skala:focus,
.mp-podglad__krok:hover,
.mp-podglad__krok:focus{ background:var(--mp-white); }
.mp-podglad__zamknij:focus-visible,
.mp-podglad__skala:focus-visible,
.mp-podglad__krok:focus-visible{ outline:2px solid var(--mp-focus); outline-offset:2px; }
/* Skala na krańcu: przycisk zostaje w tabulacji (disabled gubi ognisko
   i rozszczelnia pułapkę), tylko przygasa. */
.mp-podglad__skala.jest-wyczerpany{ opacity:.45; cursor:default; }

/* Odczyt skali zmienia się przy każdym kliknięciu („100%” → „125%” → „156%”),
   więc cyfry muszą mieć równą szerokość — inaczej pasek narzędzi drga.
   Robi się to przestawieniem TOKENU, nie własnością: font-variant-numeric
   ustawia w motywie jedna reguła w style.css (decyzja 37) i punktowa
   deklaracja i tak przegrałaby z jej !important. */
.mp-podglad__procent{
  min-width:52px; text-align:center;
  font:400 12px/1 var(--mp-sans); letter-spacing:.08em;
  color:var(--mp-ink); --mp-cyfry:var(--mp-cyfry-kolumna);
}

/* Strzałki rysowane obramowaniem, tak jak w opisie kategorii. */
.mp-podglad__krok{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; }
.mp-podglad__krok::before{
  content:''; width:11px; height:11px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
}
.mp-podglad__krok--wstecz{ left:clamp(4px,1.6vw,22px); }
.mp-podglad__krok--wstecz::before{ transform:rotate(-135deg) translate(-2px,-2px); }
.mp-podglad__krok--dalej{ right:clamp(4px,1.6vw,22px); }
.mp-podglad__krok--dalej::before{ transform:rotate(45deg) translate(-2px,-2px); }

@media (max-width:640px){
  /* Na wąskim ekranie strzałki schodzą na dół, żeby nie leżały na zdjęciu. */
  .mp-podglad__krok{ top:auto; bottom:clamp(38px,8vw,60px); transform:none; }
  .mp-podglad__krok--wstecz{ left:24px; }
  .mp-podglad__krok--dalej{ right:24px; }
}

@media (prefers-reduced-motion:reduce){
  .mp-podglad.jest-otwarty{ animation:none; }
  .mp-podglad__img{ transition:none; }
}