/* ==========================================================================
   PODPOWIEDZI WYSZUKIWARKI
   ========================================================================== */

.mp-facet{ position:relative; }

.mp-podpowiedzi{
  position:absolute; top:100%; left:0; right:0;
  /* Pod przyklejonym nagłówkiem (60), nad paskiem narzędzi (35). W panelu
     filtrów (110) i tak liczy się tylko wobec sąsiednich faset. */
  z-index:50;
  margin:4px 0 0; padding:0; list-style:none; max-height:60vh; overflow-y:auto;
  background:var(--mp-cream); border:1px solid var(--mp-line);
  box-shadow:0 24px 48px -30px rgba(44,35,25,.5);
}
.mp-podpowiedzi[hidden]{ display:none; }

.mp-podpowiedz a{
  /* Dwie kolumny: miniatura i tekst. Cena nie ma już własnej kolumny —
     kategoria, tytuł i cena stoją w trzech liniach (korekta z 10 września
     2026, punkt B2). Kolumna „auto” z ceną zabierała 136 px z 263 px listy,
     tytuł dostawał 33 px i urywał się na pierwszej literze. */
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:start;
  padding:10px 12px; min-height:var(--mp-tap); border-bottom:1px solid var(--mp-line);
}
.mp-podpowiedz:last-of-type a{ border-bottom:0; }
.mp-podpowiedz img,
.mp-podpowiedz__brak-foto{
  width:44px; height:59px; object-fit:contain; background:var(--mp-white);
  border:1px solid #F1ECE5; display:block;
}
.mp-podpowiedz__tresc{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.mp-podpowiedz__kicker{
  font:400 9.5px/1.4 var(--mp-sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--mp-muted); overflow-wrap:anywhere;
}
/* Tytuł się zawija, nigdy nie jest ucięty. */
.mp-podpowiedz__tytul{ font:400 14px/1.35 var(--mp-serif); color:var(--mp-ink); overflow-wrap:break-word; }
.mp-podpowiedz__cena{
  font:300 12.5px/1 var(--mp-sans); color:var(--mp-body-3); white-space:nowrap;
  /* Cyfry równej szerokości: ceny stoją jedna pod drugą (decyzja 37 — token). */
  --mp-cyfry:var(--mp-cyfry-kolumna);
}

/* Zaznaczenie strzałkami stoi na odnośniku, bo to on jest opcją listy
   (li jest tylko opakowaniem). „Zobacz wszystkie wyniki” podświetla cały
   wiersz — odnośnik jest węższy od wypełnienia wiersza. */
.mp-podpowiedz a.jest-zaznaczona,
.mp-podpowiedz a:hover,
.mp-podpowiedzi__wszystkie:has(> a.jest-zaznaczona){ background:var(--mp-band); }

.mp-podpowiedzi__brak,
.mp-podpowiedzi__wszystkie{
  padding:12px 14px; font:300 13px/1.5 var(--mp-sans); color:var(--mp-body-2);
}
.mp-podpowiedzi__wszystkie{ border-top:1px solid var(--mp-line-2); background:var(--mp-warm); }
.mp-podpowiedzi__wszystkie a{
  display:flex; align-items:center; min-height:32px;
  font:400 10.5px/1 var(--mp-sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mp-ink);
}

/* Stan wczytywania wyników filtrowania. */
.mp-results.jest-zajety{ opacity:.45; transition:opacity .15s ease; }

/* ==========================================================================
   „POKAŻ WIĘCEJ” — dopisywanie porcji (korekta B3)
   Selektor zawężony do listy sklepu: klasę .mp-more ma też „Czytaj dalej”
   na blogu (inc/a11y.php).
   ========================================================================== */

#mp-wyniki .mp-more a.jest-zajety{ opacity:.6; cursor:progress; }

/* ==========================================================================
   KATALOG ZE SKRYPTEM (korekty 15 i 16)
   Klasę html.mp-js stawia skrypt w <head> — mp_sklep_wczesny_skrypt()
   w inc/enqueue.php. Bez niej zostaje układ z kolumną filtrów.
   ========================================================================== */

html.mp-js .mp-shop__grid{ grid-template-columns:minmax(0,1fr); }
html.mp-js .mp-filters-toggle{ display:flex; cursor:pointer; }

/* ==========================================================================
   PANEL FILTRÓW (korekta 15)
   Wartości ze wzoru .filters-panel (aboutanatomy.com/anatomy-posters):
   320 px (na małym ekranie najwyżej 84% szerokości), mleczne półprzezroczyste
   tło, wysuw .35 s, tło pod panelem przezroczyste. Zamknięcie ma cel 44 px
   i kolor --mp-body-2 (we wzorze znak 24 px w kolorze #96887A).
   ========================================================================== */

.mp-filtry__glowa,
.mp-filtry__stopka{ display:none; }

/* Zamknięty panel ma display:none, a nie visibility:hidden. Przyciski i pola
   dziedziczą z Hello Elementor `transition: all .3s`, więc zmiana visibility
   przodka animowała się też w nich — w chwili otwarcia zamknięcie było
   jeszcze „hidden” i nie przyjmowało fokusu. Skrypt dokłada najpierw
   jest-widoczny, a klatkę później jest-otwarty (wysuw). */
html.mp-js .mp-filtry{ position:fixed; inset:0; z-index:110; display:none; }
html.mp-js .mp-filtry.jest-widoczny{ display:block; }
html.mp-js .mp-filtry__tlo{ position:absolute; inset:0; background:transparent; }
html.mp-js .mp-filtry__okno{
  position:absolute; inset-block:0; left:0; width:min(320px, 84vw);
  display:flex; flex-direction:column;
  background:rgba(253,251,249,.97);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-right:1px solid var(--mp-line);
  box-shadow:4px 0 24px rgba(46,34,24,.08);
  transform:translateX(-100%); transition:transform .35s ease;
}
html.mp-js .mp-filtry.jest-otwarty .mp-filtry__okno{ transform:none; }

html.mp-js .mp-filtry__glowa{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 28px; padding:32px 0 18px; border-bottom:1px solid var(--mp-line);
}
.mp-filtry__tytul{ margin:0; font:300 26px/1.15 var(--mp-serif); color:var(--mp-ink); }
.mp-filtry__zamknij{
  min-width:var(--mp-tap); min-height:var(--mp-tap); margin-right:-13px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--mp-body-2);
}
.mp-filtry .mp-filtry__zamknij:hover{ color:var(--mp-ink); }

html.mp-js .mp-facets{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:28px 28px 8px;
}
html.mp-js .mp-filtry__stopka{ display:block; padding:16px 28px 28px; border-top:1px solid var(--mp-line); }
.mp-filtry__zastosuj{ width:100%; justify-content:center; }

/* Etykieta pola „Szukaj” jest elementem liniowym, więc pole miało szerokość
   napisu z podpowiedzią (159 px w kolumnie 240 px), a nie całej fasety.
   W wąskim panelu rzucało się to w oczy — pole i kreska pod nagłówkiem
   kończyły się w dwóch trzecich szerokości wierszy. */
.mp-facets form.mp-facet > label{ display:block; }

body.mp-filtry-otwarte{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  html.mp-js .mp-filtry__okno{ transition:none; }
}

/* ==========================================================================
   ETYKIETY AKTYWNYCH FILTRÓW (korekta 15)
   Po zamknięciu panelu klient dalej widzi, co ma zaznaczone. Układ jak
   .wd-active-filters we wzorze: „Wyczyść” oddzielone kreską, potem etykiety.
   Każda etykieta to zwykły odnośnik — działa też bez skryptu.
   ========================================================================== */

.mp-aktywne{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:0 15px;
  margin:0 0 clamp(18px,2.2vw,28px);
}
.mp-aktywne__wyczysc{
  display:inline-flex; align-items:center; min-height:var(--mp-tap); padding-right:15px;
  border-right:1px solid var(--mp-line-2);
  font:400 11px/1 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mp-body);
}
.mp-aktywne__wyczysc:hover{ color:var(--mp-ink); }
/* Lista zajmuje resztę wiersza obok „Wyczyść” — na telefonie etykiety
   łamią się pod sobą, zamiast spadać całą grupą do następnej linii. */
.mp-aktywne__lista{
  flex:1 1 0; min-width:0;
  display:flex; flex-wrap:wrap; gap:0 18px;
  margin:0; padding:0; list-style:none;
}
.mp-aktywne__etykieta{
  display:inline-flex; align-items:center; gap:7px; min-height:var(--mp-tap); min-width:var(--mp-tap);
  font:300 13.5px/1.4 var(--mp-sans); color:var(--mp-ink);
}
.mp-aktywne__etykieta:hover{ color:var(--mp-bronze); }
.mp-aktywne__x{ font-size:17px; line-height:1; color:var(--mp-body); }

/* ==========================================================================
   3 ALBO 4 PRODUKTY W RZĘDZIE (korekta 16)
   Ikony ze wzoru .view-btn: pole 34 × 34, obrys --mp-line, słupki 15 × 15;
   aktywna — ciemne tło. Cel kliknięcia 44 × 44 (pole wizualne w środku),
   dlatego odstęp między kwadratami 10 px zamiast 4 px ze wzoru. Słupki
   w kolorze --mp-muted (5,12:1) zamiast #96887A ze wzoru (3,34:1).

   Stan aktywny rysujemy z atrybutu data-mp-kolumny na <html>, który stawia
   skrypt w <head> — ikona jest poprawna od pierwszego malowania, zanim
   shop.js zdąży przestawić aria-pressed.

   Decyzja 30 właścicielki z 20 września: pierwsze wejście pokazuje TRZY
   w rzędzie (jak wzór; plakat ma wtedy 381 px zamiast 286 px przy 1440).
   Cztery to wybór klienta, więc to on ma znacznik: data-mp-kolumny="4".
   Dzięki temu trzy kolumny widać też bez JavaScriptu, gdzie nie ma czym
   przełączać — dawniej zostawały tam cztery.

   Zakres jak we wzorze: przełącznik od 1201 px; 861–1200 px zawsze trzy
   kolumny (we wzorze „4” i tak dawało tam 3 — martwy przycisk), do 860 px
   dwie kolumny jak dotąd.
   ========================================================================== */

.mp-kolumny{ display:none; gap:0; margin-right:-5px; }
.mp-kolumny__przycisk{
  width:var(--mp-tap); height:var(--mp-tap); padding:0;
  display:flex; align-items:center; justify-content:center;
}
.mp-kolumny__ikona{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--mp-line); background:var(--mp-cream);
  transition:background-color .2s ease, border-color .2s ease;
}
.mp-kolumny__ikona svg{ display:block; fill:var(--mp-muted); transition:fill .2s ease; }
.mp-kolumny__przycisk:hover .mp-kolumny__ikona{ border-color:var(--mp-rule-mocny); }

html:not([data-mp-kolumny="4"]) .mp-kolumny__przycisk[data-mp-kolumny="3"] .mp-kolumny__ikona,
html[data-mp-kolumny="4"] .mp-kolumny__przycisk[data-mp-kolumny="4"] .mp-kolumny__ikona{
  background:var(--mp-ink); border-color:var(--mp-ink);
}
html:not([data-mp-kolumny="4"]) .mp-kolumny__przycisk[data-mp-kolumny="3"] svg,
html[data-mp-kolumny="4"] .mp-kolumny__przycisk[data-mp-kolumny="4"] svg{ fill:var(--mp-paper); }

@media (min-width:861px) and (max-width:1200px){
  .mp-shop .mp-grid--4{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1201px){
  html.mp-js .mp-kolumny{ display:flex; }
  /* Odstępy ze wzoru .shop-grid.cols-3 (56 / 44 px przy szerokim ekranie). */
  html:not([data-mp-kolumny="4"]) .mp-shop .mp-grid--4{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(26px,3.9vw,56px) clamp(14px,3.05vw,44px);
  }
}

/* ==========================================================================
   KAFEL NA LIŚCIE SKLEPU — druga fotografia (korekta 12)
   Aranżacja w ramie przenika przez zdjęcie główne w .5 s (wzór:
   .pcard-img img{transition:opacity .5s ease}) — samo przenikanie, bez
   powiększenia. Ta sama zmiana przy fokusie klawiatury w kaflu.
   :has(:focus-visible), a nie :focus-within: po kliknięciu myszą fokus
   zostaje na odnośniku (i trafia na nową kartę po „Pokaż więcej”), więc
   :focus-within zostawiałby aranżację na kaflu, z którego kursor dawno zjechał.
   Na urządzeniach bez najechania druga fotografia jest wyłączona
   (display:none — leniwy obraz bez pudełka nie jest nawet pobierany).
   Cztery klasy w selektorze display: woocommerce.css ma
   `.woocommerce ul.products li.product a img{display:block}` (0,3,4).
   ========================================================================== */

.mp-card__img--druga{ opacity:0; transition:opacity .5s ease; }
.mp-card:hover .mp-card__img--druga{ opacity:1; }
/* Osobna reguła: przeglądarka bez :has() odrzuca całą listę selektorów,
   a razem z nią działające najechanie. */
.mp-card:has(:focus-visible) .mp-card__img--druga{ opacity:1; }
@supports not selector(:has(*)){
  .mp-card:focus-within .mp-card__img--druga{ opacity:1; }
}
@media (hover:none){
  .mp-card .mp-card__link .mp-card__media .mp-card__img--druga{ display:none; }
}

/* ==========================================================================
   KAFEL NA LIŚCIE SKLEPU — pasek „Szybki podgląd / Dodaj do koszyka”
   (korekta 13). Wartości ze wzoru .pcard-actions / .pcard-act: pasek
   wysuwa się od dołu zdjęcia na 16 px ponad jego krawędź w .3 s, mleczne
   półprzezroczyste tło, napisy wersalikami 10 px, po najechaniu na przycisk
   ciemne tło i jasny napis.

   Przyciski leżą obok odnośnika kafla (nakładka ma pudełko kadru), bo
   element interaktywny w odnośniku jest błędem. Pasek pojawia się też przy
   fokusie klawiatury w kaflu i przy fokusie na samym pasku — przycisk
   z fokusem nie może być niewidoczny. Wysokość przycisku min. 44 px
   (we wzorze 42 px), napis może złamać się na dwa wiersze.

   Selektory przycisków z dwiema klasami: reset Hello Elementor ma
   [type="submit"]:focus{background:none} o szczegółowości (0,2,0), a przy
   jednej klasie pasek tracił tło pod fokusem i napis leżał na zdjęciu.
   ========================================================================== */

/* Ta sama proporcja co kadr zdjęcia w style.css (5:7 od rundy 2, punkt 1) —
   nakładka ma pokrywać dokładnie zdjęcie, bo od jej dolnej krawędzi
   odmierzany jest wysuw paska przycisków. */
.mp-card__nakladka{
  position:absolute; top:0; left:0; right:0; aspect-ratio:5/7;
  pointer-events:none; z-index:2;
}
.mp-card__akcje{
  position:absolute; left:16px; right:16px; bottom:0;
  display:flex; gap:1px; background:var(--mp-line);
  box-shadow:0 6px 20px rgba(46,34,24,.12);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.mp-card:hover .mp-card__akcje,
.mp-card__akcje:focus-within{ opacity:1; transform:translateY(-16px); pointer-events:auto; }
/* Osobno — przeglądarka bez :has() odrzuciłaby całą listę selektorów. */
.mp-card:has(:focus-visible) .mp-card__akcje{ opacity:1; transform:translateY(-16px); pointer-events:auto; }
@supports not selector(:has(*)){
  .mp-card:focus-within .mp-card__akcje{ opacity:1; transform:translateY(-16px); pointer-events:auto; }
}

.mp-card__form{ display:flex; flex:1 1 0; min-width:0; margin:0; }
.mp-card__akcje .mp-card__akcja{
  flex:1 1 0; min-width:0; min-height:var(--mp-tap);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:13px 4px; border:0;
  background:rgba(253,251,249,.97);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:400 10px/1.2 var(--mp-sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--mp-ink); cursor:pointer;
  /* Hello Elementor daje przyciskom white-space:nowrap — w wąskim kaflu
     „SZYBKI PODGLĄD” wychodził poza ramkę zamiast złamać się na dwa wiersze. */
  white-space:normal;
  transition:background-color .2s ease, color .2s ease;
}
/* Obwódka fokusu do środka: przyciski stykają się bokami, a obwódka
   na zewnątrz chowała się pod sąsiednim przyciskiem. */
.mp-card__akcje .mp-card__akcja:focus-visible{ outline-offset:-4px; }
@media (hover:hover){
  .mp-card__akcje .mp-card__akcja:hover{ background:var(--mp-ink); color:var(--mp-paper); }
}
/* Bez skryptu podglądu przycisk nie miałby czego otworzyć. Klasę mp-podglad
   stawia skrypt w <head> i zdejmuje, gdy szybki-podglad.js nie wystartuje. */
.mp-card__akcje .mp-card__akcja--podglad{ display:none; }
html.mp-podglad .mp-card__akcje .mp-card__akcja--podglad{ display:flex; }
/* Produkt niedostępny ma na pasku tylko podgląd — bez skryptu pasek byłby
   pustą kreską z cieniem. */
html:not(.mp-podglad) .mp-card__akcje--tylko-podglad{ display:none; }

/* Urządzenia bez najechania: pasek stale widoczny pod ceną, w przepływie
   strony, a nie na zdjęciu — nie ma czym go wysunąć. */
@media (hover:none){
  .mp-shop .mp-card{ display:flex; flex-direction:column; }
  .mp-shop .mp-card__link{ height:auto; flex:1 1 auto; }
  .mp-card__nakladka{ position:static; aspect-ratio:auto; pointer-events:auto; }
  .mp-card__akcje{
    position:static; margin-top:12px; gap:8px;
    background:transparent; box-shadow:none;
    opacity:1; transform:none; pointer-events:auto;
  }
  .mp-card__akcje .mp-card__akcja{
    padding:8px 4px; background:transparent; border:1px solid var(--mp-rule-mocny);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}

/* ==========================================================================
   SZYBKI PODGLĄD — okno (korekta 13)
   Wzór go nie ma. Układ z WoodMart .popup-quick-view (szerokość 970 px,
   dwie kolumny, odstęp i margines 30 px), tło pod oknem i wejście jak
   w panelu koszyka, kroje i kolory z karty produktu.
   ========================================================================== */

.mp-szybki{
  position:fixed; inset:0; z-index:125;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.mp-szybki[hidden]{ display:none !important; }
.mp-szybki__tlo{
  position:absolute; inset:0; background:rgba(36,29,21,.34);
  opacity:0; transition:opacity .26s ease;
}
.mp-szybki.jest-otwarty .mp-szybki__tlo{ opacity:1; }
.mp-szybki__okno{
  position:relative; width:min(970px, 100%);
  max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--mp-cream); box-shadow:0 30px 70px -40px rgba(44,35,25,.55);
  opacity:0; transform:translateY(12px);
  transition:opacity .26s ease, transform .26s cubic-bezier(.32,.72,.32,1);
}
.mp-szybki.jest-otwarty .mp-szybki__okno{ opacity:1; transform:none; }
.mp-szybki.jest-zajety .mp-szybki__okno{ cursor:progress; }
.mp-szybki.jest-zajety .mp-szybki__kup{ opacity:.6; pointer-events:none; }

.mp-szybki__zamknij{
  position:absolute; top:6px; right:6px; z-index:1;
  min-width:var(--mp-tap); min-height:var(--mp-tap);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--mp-body-2);
}
.mp-szybki .mp-szybki__zamknij:hover{ color:var(--mp-ink); }

.mp-szybki__uklad{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:30px; padding:30px;
}
.mp-szybki__media{ position:relative; aspect-ratio:4/5; background:var(--mp-white); }
.mp-szybki .mp-szybki__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
}
.mp-szybki__opis{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding-top:14px; }
.mp-szybki__nad{
  margin:0; font:400 11px/1.7 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-body);
}
.mp-szybki__tytul{
  margin:10px 44px 0 0; font:300 26px/1.15 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
/* Cyfry równej wysokości daje reguła „CYFRY” w style.css (decyzja 37). */
.mp-szybki__cena{ display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin:14px 0 26px; }
.mp-szybki__teraz{ font:300 26px/1 var(--mp-serif); color:var(--mp-deep); }
.mp-szybki__stara{ font:300 14px/1 var(--mp-sans); color:var(--mp-body); text-decoration:line-through; }
.mp-szybki__stara[hidden]{ display:none; }
.mp-szybki__form{ width:100%; }

/* Wybór wariantu — skopiowane z assets/css/strony/produkt.css (ten arkusz
   nie wczytuje się w sklepie). Zmieniasz tam — zmień i tu. */
.mp-szybki .mp-warianty{ border:0; margin:0; padding:0; min-width:0; }
.mp-szybki .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-szybki .mp-warianty__siatka{
  clear:both; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px; margin-bottom:22px;
}
.mp-szybki .mp-wariant{ position:relative; display:flex; }
.mp-szybki .mp-wariant__pole{
  position:absolute; width:1px; height:1px; margin:0; padding:0;
  opacity:0; pointer-events:none;
}
.mp-szybki .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-szybki .mp-wariant__nazwa{ font:400 12px/1 var(--mp-sans); color:var(--mp-deep); }
.mp-szybki .mp-wariant__podpis{ font:300 11px/1.2 var(--mp-sans); color:var(--mp-body); }
.mp-szybki .mp-wariant__kafel:hover{ border-color:var(--mp-rule); }
.mp-szybki .mp-wariant__pole:checked + .mp-wariant__kafel{ border-color:var(--mp-ink); background:var(--mp-ink); }
.mp-szybki .mp-wariant__pole:checked + .mp-wariant__kafel .mp-wariant__nazwa{ color:var(--mp-paper); }
.mp-szybki .mp-wariant__pole:checked + .mp-wariant__kafel .mp-wariant__podpis{ color:var(--mp-on-dark); }
.mp-szybki .mp-wariant__pole:focus-visible + .mp-wariant__kafel{ outline:2px solid var(--mp-focus); outline-offset:3px; }
.mp-szybki .mp-wariant__pole:disabled + .mp-wariant__kafel{ opacity:.5; cursor:not-allowed; text-decoration:line-through; }
/* Próba dodania bez wyboru: obrys kafli w kolorze obwódki fokusu (4,33:1). */
.mp-szybki .mp-warianty.jest-bledny .mp-wariant__kafel{ border-color:var(--mp-focus); }

/* Stan dostępności — jak .mp-buybox__stan; zieleń z produkt.css
   (--mp-p-ok, --mp-p-ok-txt 5,42:1 na kremie). */
.mp-szybki__stan{
  display:flex; align-items:center; gap:10px; margin:0 0 14px;
  font:400 11px/1.4 var(--mp-sans); letter-spacing:.15em;
  text-transform:uppercase; color:#4F6B48;
}
.mp-szybki__dioda{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:#5C7A54; }
.mp-szybki__stan.is-off{ color:var(--mp-body); }
.mp-szybki__stan.is-off .mp-szybki__dioda{ background:var(--mp-rule); }

.mp-szybki .mp-szybki__kup{ width:100%; min-height:54px; }
.mp-szybki__wiecej{
  margin-top:16px; min-height:var(--mp-tap); display:inline-flex; align-items:center;
  font:400 10.5px/1 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mp-body-2); border-bottom:1px solid var(--mp-line-2);
}
.mp-szybki__wiecej:hover{ color:var(--mp-ink); }

body.mp-szybki-otwarty{ overflow:hidden; }

@media (max-width:768px){
  .mp-szybki__uklad{ grid-template-columns:minmax(0,1fr); gap:20px; padding:20px; }
  .mp-szybki__media{ aspect-ratio:auto; height:45vh; }
  .mp-szybki__opis{ padding-top:0; }
}

@media (prefers-reduced-motion: reduce){
  .mp-szybki__tlo,
  .mp-szybki__okno{ transition:none; }
}