/*
Theme Name: Marta Pawelec — Plakaty Anatomiczne
Theme URI: https://martapawelec.pl
Description: Motyw potomny Hello Elementor. Warstwa wizualna sklepu z plakatami anatomicznymi — tokeny, komponenty i nadpisania WooCommerce. Wartości kolorów i typografii pochodzą z zatwierdzonego podglądu HTML (wersja po audycie dostępności).
Author: digitalvoice.pl
Template: hello-elementor
Version: 0.1.0
Requires PHP: 8.2
Text Domain: mp
*/

/* ==========================================================================
   TOKENY
   Źródłem prawdy jest podgląd HTML z paczki projektowej, nie blok kodu
   z sekcji 5 briefu — ten zawiera wartości sprzed audytu dostępności,
   z których sześć nie przechodzi WCAG AA (kontrast 2,35–4,49 na tle kremowym).
   Wartości poniżej policzone i zweryfikowane: 5,12–7,48 na tle --mp-cream.
   ========================================================================== */

:root{
  /* tła */
  --mp-cream:#FDFBF9;      /* główne tło strony */
  --mp-warm:#FAF6F2;       /* nagłówek, sekcje wyróżnione */
  --mp-band:#F5F1EC;       /* pasy przedzielające */
  --mp-stone:#ECE8E3;      /* kafle, tła pól */
  --mp-paper:#F5F0E9;      /* tekst na ciemnym tle */
  --mp-white:#FFFFFF;

  /* atrament i tekst — wszystkie ≥5,1:1 na --mp-cream */
  --mp-ink:#241D15;        /* 16,13 — nagłówki, tekst główny */
  --mp-ink-2:#3A3128;      /* 12,33 — nagłówki drugiego rzędu */
  --mp-strong:#4A3E2E;     /* 10,07 — wyróżnienia */
  --mp-deep:#5C5145;       /* 7,48 */
  --mp-body-2:#635B52;     /*  6,46 — tekst wiodący */
  --mp-accent:#6B5D4E;     /*  6,16 — logo, akcenty serif */
  --mp-body-3:#655C53;     /*  6,34 */
  --mp-bronze:#7A6244;     /*  5,56 — odnośniki, hover */
  --mp-body:#6E655A;       /*  5,54 — tekst podstawowy */
  --mp-taupe:#7A6650;      /*  5,29 — pasek promocyjny */
  --mp-muted:#756A5C;      /*  5,12 — etykiety pomocnicze */

  /* kolory dopuszczalne WYŁĄCZNIE na ciemnym tle (--mp-ink) */
  --mp-on-dark:#CFC7BB;    /*  9,94 na --mp-ink */
  --mp-on-dark-2:#A2978A;  /*  5,81 na --mp-ink */

  /* linie i elementy nietekstowe */
  --mp-line:#EBE4DB;
  --mp-line-2:#E5DED4;
  --mp-line-3:#E0D8CC;
  --mp-rule:#CFC3B2;
  --mp-scroll:#DCD3C6;
  --mp-select:#E5DED2;
  --mp-focus:#8A7452;      /* obwódka focusu, element nietekstowy (próg 3:1):
                              4,33 na --mp-paper, 4,47 na bieli, 3,66 na --mp-stone */

  /* Obrys kontrolki, która NIE MA innej granicy niż linia: pole wyboru
     w stanie wyłączonym, przycisk obrysowy, pole wyszukiwania. WCAG 1.4.11
     wymaga tu 3:1, a dotychczasowe hairline'y dawały 1,41–1,98 — kontrolka
     była praktycznie niewidoczna dla osoby o obniżonej wrażliwości na
     kontrast. Ten odcień przechodzi próg na KAŻDEJ powierzchni motywu:
     3,73 na bieli, 3,61 na kremie, 3,47 na ciepłym, 3,32 na pasie
     i 3,06 na kamieniu — zostając w tej samej ciepłej rodzinie co paleta.
     Pierwsza wersja (#A6906E) liczona była wyłącznie wobec bieli i dawała
     2,98 na kremie, czyli o włos za mało.
     Linie dekoracyjne (--mp-line*, --mp-rule) zostają bez zmian: przegrody
     i podkreślenia nie niosą informacji, więc próg ich nie dotyczy. */
  --mp-rule-mocny:#98815C;

  /* typografia */
  --mp-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mp-sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Cyfry (decyzja 37 z 20 września): równej wysokości w całym serwisie.
     Cormorant Garamond ma domyślnie cyfry nautyczne („9”, „3”, „5”, „7”
     schodzą 275 jednostek pod linię pisma, „119 zł” czyta się jak słowo);
     równe daje cecha lnum, którą mają pliki *-latin.woff2 wszystkich pięciu
     odmian (w *-latin-ext cyfr nie ma). Jost ma cyfry równe z natury, więc
     dla niego wartość nic nie zmienia. Token czyta JEDNA reguła niżej
     („CYFRY”); miejsce, które chce inaczej, przestawia token, a nie
     własność. --mp-cyfry-kolumna: cyfry także równej szerokości (tnum) —
     do kwot i liczników, które stoją jedna pod drugą albo zmieniają się
     w miejscu (w Cormorant lnum + tnum daje „nine.tf”, sam tnum dawałby
     nautyczne tabelaryczne „nine.tosf”). */
  --mp-cyfry:lining-nums;
  --mp-cyfry-kolumna:lining-nums tabular-nums;

  /* rytm */
  --mp-gut:clamp(20px, 5vw, 64px);
  --mp-max:1360px;
  --mp-sec:clamp(56px, 8vw, 124px);

  /* minimalny cel dotykowy — wymóg z sekcji 10 briefu */
  --mp-tap:44px;

  /* nagłówek — wysokości, od których zależą przyklejone elementy i kotwice
     (korekta z 10 września 2026, punkt 23). Wysokość pełnego nagłówka
     wynika z tych samych wartości co logo:
     30 (dopełnienie) + pre + 1,14·main + 5 + 11 (ornament) + 8 + 11 (podpis)
     + 24 (dopełnienie) = 89 px + pre + 1,14·main. Zmiana marginesów logo
     albo dopełnienia siatki wymaga zmiany stałej 89 px — pilnuje tego
     tests/jakosc/naglowek.spec.js. */
  --mp-logo-pre:clamp(13px,1.3vw,17px);
  --mp-logo-main:clamp(26px,3.1vw,40px);
  --mp-naglowek-pelny:calc(89px + var(--mp-logo-pre) + 1.14 * var(--mp-logo-main));
  --mp-naglowek-skrot:52px;   /* wzór: --wd-header-bottom-sticky-h */
  --mp-nav-h:51px;            /* 50 px wstęgi + 1 px linii */
  --mp-pasek-admina:0px;
  /* Ile zajmuje przyklejony nagłówek. Bez skryptu przykleja się sama wstęga. */
  --mp-naglowek-przyklejony:var(--mp-nav-h);
  /* Dolna krawędź przyklejonego nagłówka w oknie — od niej liczą top inne
     przyklejone elementy (pasek narzędzi, koszyk, zamówienie, wpis). */
  --mp-naglowek-dol:calc(var(--mp-pasek-admina) + var(--mp-naglowek-przyklejony));
}

/* Klasę mp-naglowek-js stawia skrypt w <head> (inc/enqueue.php) na każdej
   podstronie; klasa mp-js obszaru sklepu ma inne znaczenie i żyje tylko
   w katalogu. Ze skryptem przyklejony zostaje pas skrótu, linia i menu. */
html.mp-naglowek-js{ --mp-naglowek-przyklejony:calc(var(--mp-naglowek-skrot) + 1px + var(--mp-nav-h)); }
/* Pasek administratora WordPressa zasłaniałby przyklejony nagłówek
   właścicielce oglądającej stronę zalogowaną. Wartości z admin-bar.css:
   32 px, 46 px poniżej 783 px, a poniżej 601 px pasek przewija się ze stroną. */
:root:has(> body.admin-bar){ --mp-pasek-admina:32px; }
@media (max-width:782px){ :root:has(> body.admin-bar){ --mp-pasek-admina:46px; } }
@media (max-width:600px){ :root:has(> body.admin-bar){ --mp-pasek-admina:0px; } }
/* Telefon: nagłówek mobilny 60 px + 1 px linii, przyklejony w całości. */
@media (max-width:860px){ :root, html.mp-naglowek-js{ --mp-naglowek-przyklejony:61px; } }

/* ==========================================================================
   RESET — przeniesiony 1:1 z podglądu
   ========================================================================== */

html, body{ margin:0; padding:0; background:var(--mp-cream); }
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font:300 16px/1.7 var(--mp-sans);
  color:var(--mp-ink);
}
*{ box-sizing:border-box; }
a{ color:var(--mp-ink); text-decoration:none; }
a:hover{ color:var(--mp-bronze); }
::selection{ background:var(--mp-select); }
input, select, textarea, button{ font-family:var(--mp-sans); }
::-webkit-scrollbar{ height:6px; width:6px; }
::-webkit-scrollbar-thumb{ background:var(--mp-scroll); }
/* Selektory atrybutowe MUSZĄ tu być. Hello Elementor w reset.css maluje
   [type="button"], [type="submit"] i button na magentę #c36 — także
   w stanie podstawowym, nie tylko przy najechaniu. Samo `button` ma
   szczegółowość (0,0,1) i przegrywa z [type="button"] (0,1,0), więc
   przycisk z atrybutem type dostawał różową ramkę: rozwijane menu,
   plusy i minusy ilości, zamknięcie panelu koszyka. */
button,
[type="button"],
[type="submit"],
[type="reset"]{
  background:none; border:0; border-radius:0; padding:0; font:inherit; color:inherit;
  cursor:pointer; text-align:inherit;
}
/* Hello Elementor w reset.css maluje KAŻDY przycisk na #CC3366 przy najechaniu
   i focusie. Ta magenta wychodziła na rozwijanym menu, na zamknięciu koszyka,
   na plusach i minusach ilości — wszędzie, gdzie nie nadpisaliśmy stanu ręcznie.
   Zerujemy to raz, u źródła, zamiast łatać komponent po komponencie. */
button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus{
  background:none; color:inherit; border-color:inherit;
}
/* Przyciski, które mają własne tło, odzyskują je niżej — .mp-btn definiuje
   swoje stany po tej regule, więc wygrywa kolejnością. */
img{ max-width:100%; height:auto; }

/* CYFRY — jedyne miejsce, które ustawia font-variant-numeric (decyzja 37).
   !important nie jest tu wygodą: motyw składa pismo skrótem `font:` w ponad 300
   regułach, a skrót zeruje font-variant-numeric (i font-feature-settings)
   do „normal” na każdym elemencie, który go używa — dziedziczenie z html ani
   reguła bez !important tego nie przeżyją, co potwierdził pomiar w Chromium.
   Wyjątki robi się przez token: `--mp-cyfry:var(--mp-cyfry-kolumna)` na
   elemencie przechodzi na niego i na jego potomków. Reguła obejmuje także
   znaczniki WooCommerce, Elementora i pola formularzy — „wszędzie” z decyzji. */
*, ::before, ::after{ font-variant-numeric:var(--mp-cyfry) !important; }

/* Widoczny focus — wymóg sekcji 10. Nie usuwać. */
:focus-visible{ outline:2px solid var(--mp-focus); outline-offset:3px; }

/* Skok do kotwicy i focus nie mogą wjechać pod przyklejony nagłówek
   (punkt 23). 9 px oddechu — tyle dawało dotychczasowe scroll-margin
   „Dla firm” (60 − 51). */
html{ scroll-padding-top:calc(var(--mp-naglowek-dol) + 9px); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   TYPOGRAFIA
   ========================================================================== */

.mp-h1, .mp-h2, .mp-h3{
  font-family:var(--mp-serif); font-weight:300; color:var(--mp-ink);
  margin:0; text-wrap:balance;
}
.mp-h1{ font-size:clamp(34px, 5.2vw, 62px); line-height:1.08; }
.mp-h2{ font-size:clamp(26px, 3.6vw, 42px); line-height:1.14; }
.mp-h3{ font-size:clamp(20px, 2.2vw, 26px); line-height:1.24; }
.mp-em{ font-style:italic; color:var(--mp-accent); }

.mp-lead{ font-size:clamp(16px, 1.5vw, 19px); line-height:1.66; color:var(--mp-body-2); }
.mp-body{ font-size:16px; line-height:1.75; color:var(--mp-body); }
.mp-small{ font-size:13px; line-height:1.75; color:var(--mp-body); }

/* Etykieta wersalikowa. Minimum 11px — podgląd nie schodzi niżej,
   mimo że style.css z paczki ma deklaracje 8–9,5px. */
.mp-eyebrow{
  font-size:11px; line-height:1.6; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mp-muted); font-weight:400;
}

/* ==========================================================================
   UKŁAD
   ========================================================================== */

.mp-wrap{ max-width:var(--mp-max); margin:0 auto; padding-inline:var(--mp-gut); }
.mp-section{ padding-block:var(--mp-sec); }

/* Pomijacz nawigacji. W paczce klasa była użyta w podglądzie,
   ale nie istniała w style.css motywu — stąd tutaj. */
.mp-skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--mp-ink); color:var(--mp-paper);
  padding:16px 22px; min-height:var(--mp-tap);
  font:400 11px/1 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center;
}
.mp-skip:focus{ left:8px; top:8px; color:var(--mp-paper); }

/* Każdy cel dotykowy co najmniej 44 px */
.mp-tap{
  min-height:var(--mp-tap); min-width:var(--mp-tap);
  display:inline-flex; align-items:center;
}

.mp-btn{
  background:var(--mp-ink); color:var(--mp-paper);
  padding:19px 38px; min-height:var(--mp-tap);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:400;
  border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.mp-btn:hover{ background:var(--mp-strong); color:var(--mp-paper); }
.mp-btn--ghost{
  background:transparent; color:var(--mp-ink); border:1px solid var(--mp-rule-mocny);
}
.mp-btn--ghost:hover{ background:var(--mp-band); color:var(--mp-ink); }

/* ==========================================================================
   PASEK PROMOCYJNY, NAGŁÓWEK, NAWIGACJA
   Wartości przepisane z podglądu (sklep.html) — nie zmieniaj bez porównania.
   Przyklejony blok i pas skrótu pochodzą z korekty z 10 września 2026
   (punkt 23), wartości ze wzoru aboutanatomy.com.
   ========================================================================== */

.mp-promo{
  background:var(--mp-taupe); color:#FBF8F3;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:11px 16px; text-align:center;
  font:400 11px/1.5 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase;
}
.mp-promo span[aria-hidden]{ opacity:.8; }

/* Nagłówek i wstęga menu to jeden blok przyklejony ujemnym top: przy
   przewijaniu odjeżdża pełne logo, a zostaje pas skrótu 52 px i menu.
   Układ nie zmienia się nigdy — stan przełączają visibility i transform,
   więc przewijanie nie przesuwa treści (zmierzone: CLS 0). */
.mp-naglowek{
  position:sticky; z-index:60;
  top:calc(var(--mp-pasek-admina) - var(--mp-naglowek-pelny) - 1px);   /* bez skryptu: sama wstęga */
}
html.mp-naglowek-js .mp-naglowek{ top:calc(var(--mp-pasek-admina) + var(--mp-naglowek-skrot) - var(--mp-naglowek-pelny)); }
/* Odnośnik w przyklejonym nagłówku zawsze jest na ekranie. Bez tego
   scroll-padding z html uznawał go za zasłonięty i przewijał stronę
   przy każdym Tab — zmierzone: 1200 → 770 → 340 px. */
[data-mp-naglowek] a,
[data-mp-naglowek] button{ scroll-margin-top:calc(-1 * (var(--mp-naglowek-dol) + 9px)); }

.mp-header{ position:relative; background:var(--mp-warm); border-bottom:1px solid var(--mp-line); }
.mp-header__grid{
  max-width:var(--mp-max); margin:0 auto;
  padding:30px var(--mp-gut) 24px;
  /* Stała wysokość jest podstawą ujemnego top bloku (token wyżej); przy
     okazji nic się nie przesuwa po doczytaniu kroju. */
  height:var(--mp-naglowek-pelny);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
}
.mp-header__note{
  margin:0; font:400 11px/1.6 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-body);
}
.mp-header__acts{ display:flex; align-items:center; justify-content:flex-end; gap:22px; }
.mp-header__acts a{
  font:400 11px/1 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mp-body); padding:14px 0; min-height:var(--mp-tap);
  display:flex; align-items:center;
}
.mp-header__acts a.is-strong{ color:var(--mp-ink); }

.mp-logo{ display:flex; flex-direction:column; align-items:center; }
.mp-logo__pre{
  font:300 var(--mp-logo-pre)/1 var(--mp-serif);
  letter-spacing:.46em; text-indent:.46em; color:var(--mp-accent);
}
.mp-logo__main{
  font:300 var(--mp-logo-main)/1.14 var(--mp-serif);
  letter-spacing:.16em; text-indent:.2em; color:var(--mp-ink-2);
}
.mp-logo__rule{ display:flex; align-items:center; gap:9px; margin-top:5px; }
.mp-logo__rule i{ width:48px; height:1px; background:var(--mp-rule); display:block; }
.mp-logo__rule span{ font:300 11px/1 var(--mp-serif); color:#9C8E79; }
.mp-logo__sub{
  font:400 11px/1 var(--mp-sans); letter-spacing:.19em; text-indent:.34em;
  text-transform:uppercase; color:var(--mp-body); margin-top:8px;
}

/* --- pas skrótu: logo w jednej linii, Szukaj, Koszyk (punkt 23) --- */

.mp-header__skrot{ display:none; }
@media (min-width:861px){
  .mp-header__skrot{
    position:absolute; left:0; right:0; bottom:0; height:var(--mp-naglowek-skrot);
    max-width:var(--mp-max); margin-inline:auto; padding-inline:var(--mp-gut);
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
    background:var(--mp-warm);
    visibility:hidden; transform:translateY(-100%);
  }
  /* Wjazd z góry jak we wzorze (wd-fadeInDownBig .4s ease). Przejście jest
     tylko w stanie skróconym — przy powrocie na górę pas znika od razu,
     inaczej przez 0,4 s jechałby po pełnym logo. */
  .mp-naglowek.jest-skrocony .mp-header__skrot{ visibility:visible; transform:none; transition:transform .4s ease; }
  .mp-naglowek.jest-skrocony .mp-header__grid > .mp-logo,
  .mp-naglowek.jest-skrocony .mp-header__grid > .mp-header__acts{ visibility:hidden; }
  .mp-naglowek.jest-skrocony{ box-shadow:0 1px 3px rgba(0,0,0,.1); }   /* wzór: .whb-sticky-shadow */
  .mp-header__skrot .mp-header__acts{ grid-column:3; }
  /* display:block ma tę samą szczegółowość co .mp-logo{display:flex}
     i wygrywa kolejnością — ta reguła musi stać za .mp-logo. */
  .mp-logo--linia{
    grid-column:2; display:block; min-height:var(--mp-tap); line-height:var(--mp-tap);
    white-space:nowrap; text-align:center;
  }
  /* Wartości małego logo z nagłówka telefonu (.mp-logo--maly). */
  .mp-logo--linia .mp-logo__pre{ font-size:13px; line-height:inherit; text-indent:0; }
  .mp-logo--linia .mp-logo__main{ font-size:19px; line-height:inherit; letter-spacing:.14em; text-indent:0; }
}
@media (prefers-reduced-motion: reduce){
  .mp-naglowek.jest-skrocony .mp-header__skrot{ transition:none; }
}

/* Wstęga menu pod nagłówkiem — przykleja ją blok .mp-naglowek. */
.mp-nav{
  background:var(--mp-warm); border-bottom:1px solid var(--mp-line);
}
.mp-nav__inner{
  max-width:var(--mp-max); margin:0 auto; padding-inline:var(--mp-gut);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(18px,3vw,46px); flex-wrap:wrap; min-height:50px;
  list-style:none;
}
.mp-nav__inner li{ list-style:none; }
/* Po dołożeniu działu „Inne” (korekta, punkt 18) dziewięć pozycji przy
   odstępie 3vw łamało się na dwa rzędy poniżej 882 px, a to rozbiłoby
   wysokość przyklejonego nagłówka. 18 px to dolna granica clamp() wyżej —
   zmierzone: 580 + 8·18 = 724 px ≤ 775 px dostępnych na 861. */
@media (min-width:861px) and (max-width:1023px){ .mp-nav__inner{ column-gap:18px; } }
.mp-nav__inner a{
  display:block; font:400 11px/1 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-body-3);
  padding:16px 0; border-bottom:1px solid transparent;
}
.mp-nav__inner a:hover,
.mp-nav__inner .current-menu-item > a,
.mp-nav__inner [aria-current="page"]{ color:var(--mp-ink); border-bottom-color:var(--mp-ink); }

/* --- podmenu kategorii --- */

.mp-nav__poz{ position:relative; display:flex; align-items:center; gap:3px; }

.mp-nav__rozwin{
  min-width:22px; min-height:var(--mp-tap);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--mp-muted);
}
.mp-nav__poz:hover > .mp-nav__rozwin,
.mp-nav__poz.jest-otwarta > .mp-nav__rozwin{ color:var(--mp-ink); }
.mp-nav__rozwin svg{ transition:transform .2s ease; }
.mp-nav__poz.jest-otwarta .mp-nav__rozwin svg{ transform:rotate(180deg); }
.mp-nav__rozwin:hover{ color:var(--mp-ink); }

.mp-nav__podmenu{
  position:absolute; top:calc(100% + 1px); left:50%; transform:translateX(-50%);
  min-width:212px; margin:0; padding:6px 0; list-style:none; z-index:50;
  background:var(--mp-warm); border:1px solid var(--mp-line);
  border-top:0; box-shadow:0 18px 36px -28px rgba(44,35,25,.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, visibility .16s;
}
/* Podmenu pierwszej pozycji („Sklep”) wyśrodkowane pod nią wychodziło na
   861–875 px za lewą krawędź okna (−5,9 px na 861; zmierzone przy decyzji 40
   z 20 września 2026, gdy doszedł do niego Outlet). W tym przedziale pasek ma
   najmniejszy odstęp, więc „Sklep” stoi najbliżej krawędzi — podmenu zaczyna
   się tam równo z pozycją zamiast pod jej środkiem. */
@media (min-width:861px) and (max-width:1023px){
  .mp-nav__poz:first-child > .mp-nav__podmenu{ left:0; transform:none; }
}
/* Rozwijanie bez JavaScriptu: najechanie i focus wewnątrz pozycji. */
.mp-nav__poz:hover > .mp-nav__podmenu,
.mp-nav__poz:focus-within > .mp-nav__podmenu,
.mp-nav__poz.jest-otwarta > .mp-nav__podmenu{
  opacity:1; visibility:visible; pointer-events:auto;
}

.mp-nav__podpoz a{
  display:flex; align-items:center; padding:9px 18px; min-height:38px;
  font:400 10px/1.4 var(--mp-sans); letter-spacing:.17em; text-transform:uppercase;
  color:var(--mp-body-2); border-bottom:0; white-space:nowrap;
  transition:color .15s ease;
}
.mp-nav__podpoz a:hover,
.mp-nav__podpoz a[aria-current="page"]{ color:var(--mp-ink); }
/* Cienka kreska wjeżdżająca od lewej zamiast pełnego tła — spójne z resztą,
   gdzie stan aktywny znaczy linia, nie plama koloru. */
.mp-nav__podpoz a::before{
  content:''; width:0; height:1px; margin-right:0; background:var(--mp-rule);
  transition:width .16s ease, margin-right .16s ease;
}
.mp-nav__podpoz a:hover::before,
.mp-nav__podpoz a[aria-current="page"]::before{ width:14px; margin-right:9px; }

/* Na telefonie menu jest w szufladzie — podmenu leży pod pozycją. */
@media (max-width:860px){
  .mp-menu__nawigacja .mp-nav__podmenu{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    border:0; box-shadow:none; background:transparent; padding:0 0 10px 14px; min-width:0;
  }
  .mp-menu__nawigacja .mp-nav__podpoz a{
    font:300 16px/1.5 var(--mp-serif); letter-spacing:0; text-transform:none;
    padding:9px 0; color:var(--mp-body-2);
  }
  .mp-menu__nawigacja .mp-nav__rozwin{ display:none; }
  .mp-menu__nawigacja .mp-nav__poz{ display:block; }
}

/* ==========================================================================
   HERO ARCHIWUM
   ========================================================================== */

.mp-hero{
  background:var(--mp-warm); border-bottom:1px solid var(--mp-line);
  padding:clamp(34px,4.6vw,64px) 0 clamp(30px,4vw,54px); text-align:center;
}
.mp-hero__crumbs{
  margin:0 0 20px; font:400 11px/1 var(--mp-sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mp-body);
}
.mp-hero__crumbs a{ color:var(--mp-body); }
.mp-hero__crumbs a:hover{ color:var(--mp-ink); }
.mp-hero__title{
  margin:0; font:300 clamp(34px,5vw,68px)/1.05 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-hero__title em{ font-style:italic; color:var(--mp-focus); }
.mp-hero__lead{
  margin:16px auto 0; max-width:520px;
  font:300 14px/1.85 var(--mp-sans); color:var(--mp-body);
  letter-spacing:.004em; text-wrap:pretty;
}

/* ==========================================================================
   PASEK NARZĘDZI — przyklejony pod nagłówkiem
   ========================================================================== */

.mp-toolbar{
  background:var(--mp-cream); border-bottom:1px solid var(--mp-line);
  /* Tuż pod dolną krawędzią przyklejonego nagłówka (z nakładką 1 px na jego
     linię): 103 px ze skryptem, 50 px bez, a na telefonie 60 px — czyli
     cel 44 px + 2 × 8 px odstępu nagłówka mobilnego. Przy top:0 pierwszy
     rząd paska z przyciskiem „Filtry” chował się po przewinięciu pod
     nagłówkiem, a od korekty 15 to jedyne wejście do filtrów. */
  position:sticky; top:calc(var(--mp-naglowek-dol) - 1px); z-index:35;
}
.mp-toolbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:56px; flex-wrap:wrap;
}
.mp-toolbar__left{ display:flex; align-items:center; gap:20px; }
.mp-toolbar__count{ margin:0; font:300 12.5px/1 var(--mp-sans); color:var(--mp-body); }
.mp-toolbar__right{ display:flex; align-items:center; gap:18px; }

.mp-sort{ display:flex; align-items:center; gap:10px; padding:14px 0; min-height:46px; }
.mp-sort__label{
  font:400 11px/1 var(--mp-sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-sort__select{
  font:300 13px/1 var(--mp-sans); color:var(--mp-ink);
  border:0; border-bottom:1px solid var(--mp-rule); background:transparent;
  padding-bottom:5px; cursor:pointer;
}

/* Przełącznik fasetek. Bez skryptu widoczny tylko na telefonie (kotwica do
   listy filtrów nad wynikami); ze skryptem na każdej szerokości otwiera panel
   filtrów — reguła w assets/css/strony/sklep.css (korekta 15). */
.mp-filters-toggle{
  display:none; align-items:center; gap:9px;
  border:1px solid var(--mp-rule); padding:14px 18px; min-height:46px;
  font:400 11px/1 var(--mp-sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mp-ink);
}
.mp-filters-toggle__ico{ display:flex; flex-direction:column; gap:3px; }
.mp-filters-toggle__ico i{ height:1px; background:var(--mp-ink-2); display:block; }
.mp-filters-toggle__ico i:nth-child(1){ width:13px; }
.mp-filters-toggle__ico i:nth-child(2){ width:9px; }
.mp-filters-toggle__ico i:nth-child(3){ width:5px; }

/* ==========================================================================
   OPIS KATEGORII
   Pierwszy akapit widoczny zawsze, reszta po kliknięciu. Treść stoi
   w kodzie strony w całości — chowamy ją przed czytelnikiem, nie przed
   wyszukiwarką.
   ========================================================================== */

/* Blok siedzi na środku, bo cały hero jest wyśrodkowany. Bez margin-inline
   tekst lądował w lewej połowie strony z pustką po prawej. */
.mp-opis{ max-width:62ch; margin-inline:auto; }

/* Lead zostaje wyśrodkowany — to jedno, krótkie zdanie i tak się czyta.
   Rozwinięcie wyrównujemy do lewej: cztery akapity ciągłego tekstu ustawione
   na środku są męczące, bo oko za każdym razem szuka początku wiersza. */
.mp-opis__reszta{ margin-top:22px; text-align:left; }
.mp-opis__akapit{
  margin:0 0 14px; font-size:15px; line-height:1.75; color:var(--mp-body);
  text-wrap:pretty;
}
.mp-opis__akapit:last-child{ margin-bottom:0; }
.mp-opis__naglowek,
.mp-opis__reszta h2{
  font:400 clamp(18px,1.8vw,22px)/1.3 var(--mp-serif);
  color:var(--mp-ink-2); margin:0 0 14px; text-align:left;
}
.mp-opis__wiecej{
  margin-top:16px; min-height:var(--mp-tap);
  display:inline-flex; align-items:center; gap:9px;
  font:400 11px/1 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mp-bronze);
  border-bottom:1px solid var(--mp-rule); padding-bottom:6px;
}
.mp-opis__wiecej:hover{ color:var(--mp-ink); border-bottom-color:var(--mp-ink); }
/* Atrybut hidden działa tylko dzięki display:none w arkuszu przeglądarki —
   każda własna deklaracja display go pokonuje. Bez tej reguły przycisk
   „Czytaj więcej" był widoczny u osób bez JavaScriptu i nic nie robił,
   bo obsługę kliknięcia dokłada skrypt. */
.mp-opis__wiecej[hidden]{ display:none; }
/* Strzałka rysowana obramowaniem — bez dodatkowego pliku i bez fontu ikon. */
.mp-opis__wiecej-ikona{
  width:7px; height:7px; display:block;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease;
}
.mp-opis.jest-otwarty .mp-opis__wiecej-ikona{
  transform:rotate(-135deg) translate(-2px,-2px);
}

/* ==========================================================================
   SIATKA I FASETY
   ========================================================================== */

/* Biały pas pod siatką, reszta strony (hero, pasek narzędzi) zostaje kremowa
   (korekta 14, 10.09.2026). Biały plakat na białym tle nie ma widocznej
   krawędzi kafla — oddziela go tylko cień, jak wydruk położony na kartce. */
.mp-shop{ background:var(--mp-white); padding:clamp(30px,4vw,56px) 0 clamp(56px,8vw,110px); }
.mp-shop__grid{ display:grid; grid-template-columns:minmax(210px,240px) 1fr; gap:clamp(24px,3vw,52px); }

.mp-facet{ margin-bottom:34px; }
.mp-facet__title{
  font:400 11px/1 var(--mp-sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--mp-ink); padding-bottom:14px;
  border-bottom:1px solid var(--mp-line-2); margin:0 0 6px; display:block;
}
/* Selektor z typem, bo Hello Elementor ustawia input[type=search] i pokrewnym
   szary obrys #666 o szczegółowości (0,1,1) — sama klasa (0,1,0) przegrywa
   i pole dostawało zimną szarość zamiast koloru z palety. */
input.mp-facet__input,
.mp-facet__input{
  width:100%; border:1px solid var(--mp-rule-mocny); background:var(--mp-white);
  padding:13px 14px; font:300 14px/1.4 var(--mp-sans); color:var(--mp-ink);
  margin-top:10px;
}
.mp-facet__row{
  display:flex; align-items:center; gap:11px;
  padding:12px 0; min-height:var(--mp-tap); width:100%;
}
.mp-facet__box{ width:13px; height:13px; flex:0 0 auto; border:1px solid var(--mp-rule-mocny); }
.mp-facet__box.is-on{ background:var(--mp-ink); border-color:var(--mp-ink); }
.mp-facet__label{ flex:1; font:300 13.5px/1.4 var(--mp-sans); color:var(--mp-deep); }
.mp-facet__count{ font:300 12px/1 var(--mp-sans); color:var(--mp-body); }
.mp-facet--cta{ border-top:1px solid var(--mp-line-2); padding-top:22px; }
.mp-facet__cta{
  font-size:13px; color:var(--mp-ink); border-bottom:1px solid var(--mp-rule);
  padding-bottom:7px; display:inline-flex; align-items:flex-end; min-height:var(--mp-tap);
}

.mp-grid{ display:grid; }
/* minmax(0,1fr), a nie 1fr (runda 2, punkt 8). Samo `1fr` to
   `minmax(auto,1fr)`, czyli „nie węziej niż zawartość kolumny”. Safari
   trzyma się tego dosłownie i przy przełączeniu 3/4 kolumn nie pozwalał
   kolumnie zwęzić się poniżej szerokości zawartości kafla — siatka
   wychodziła poza prawą krawędź. Zero jako dolna granica pozwala kolumnie
   zejść do wyliczonej szerokości; wychodzenie zdjęcia pilnuje
   `min-width:0` na kaflu i `max-width:100%` na obrazie niżej. */
.mp-grid--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(26px,3vw,42px) clamp(14px,2.2vw,30px);
}
.mp-grid.products{ list-style:none; margin:0; padding:0; }
.mp-more{ display:flex; justify-content:center; margin-top:clamp(36px,4.6vw,60px); }

/* ==========================================================================
   KAFEL PRODUKTU — komponent „Poster Card”
   ========================================================================== */

/* position:relative — blok zawierający dla paska akcji na liście sklepu
   (korekta 13), który leży obok odnośnika kafla, nie w nim.
   min-width:0 — kafel jest elementem siatki, a element siatki ma domyślnie
   min-width:auto (nie węziej niż własna zawartość). W Safari to właśnie ta
   wartość rozpychała kolumny przy przełączeniu 3/4 (runda 2, punkt 8). */
.mp-card{ list-style:none; position:relative; min-width:0; }

/* Nadpisanie układu WooCommerce.
   woocommerce-layout.css narzuca li.product { float:left; width:22.05% },
   czyli 22% szerokości komórki siatki — kafel kurczył się do 43 px.
   Selektor jest celowo bardziej szczegółowy, żeby obyć się bez !important. */
.woocommerce ul.products li.product.mp-card,
ul.products li.product.mp-card{
  width:auto; float:none; margin:0; clear:none;
}
.woocommerce ul.products.mp-grid,
ul.products.mp-grid{ margin:0; padding:0; }
.woocommerce ul.products.mp-grid::before,
.woocommerce ul.products.mp-grid::after{ content:none; }
.mp-card__link{ display:flex; flex-direction:column; height:100%; min-width:0; }
/* Kadr 5:7 — proporcja plakatu B2 (runda 2, punkt 1). Wszystkie zdjęcia
   plakatów mają kadr 5:7, więc kadr 4:5 (0,80) zostawiał po bokach pusty pas:
   przy kafelku 381 px plakat miał 341 px i 41 px bieli. Kadr w proporcji
   zdjęcia znosi ten pas — plakat wypełnia kafel od krawędzi do krawędzi.
   Bez obrysu i bez marginesu zdjęcia (korekta 14 z 10 września).

   BEZ CIENIA W SPOCZYNKU (runda 2, punkt 1). Dotąd kafel miał cień
   rgba(44,35,25,.45) 18 px w dół, rozmycie 40 px — biały kafel na białym tle
   rysował się nim jak płytkie pudełko. We wzorze aboutanatomy.com kafel go
   nie ma: plakat oddziela od strony własna biel i krawędź wydruku. Cień
   zostaje w jednym miejscu — pod paskiem przycisków, który wysuwa się po
   najechaniu (.mp-card__akcje w strony/sklep.css). */
.mp-card__media{
  position:relative; display:block; background:var(--mp-white);
  aspect-ratio:5/7; overflow:hidden;
}
/* Obraz wpisany w kadr, nie przycięty przez CSS — plakat ma być cały
   (contain). Przy kadrze 5:7 i miniaturze 5:7 „contain” wypełnia kadr co do
   piksela. Miniatura sklepu jest kadrowana 5:7 już przy generowaniu
   (inc/setup.php), więc w kaflu wypełniają go także pliki źródłowe
   o innym kształcie — zdjęcie kwadratowe traci przy tym 28,6% szerokości,
   co opisuje docs/zdjecia/README.md i pytanie 2.10.
   max-width:100% — zabezpieczenie dla Safari z punktu 8: obraz nigdy nie
   wychodzi poza kolumnę siatki. */
.mp-card__img{
  position:absolute; inset:0; width:100%; height:100%; max-width:100%;
  object-fit:contain; display:block;
}
/* Cztery klasy nie są ozdobą: woocommerce.css ma
   `.woocommerce ul.products li.product a img { height:auto; margin:0 0 1em }`
   o szczegółowości (0,3,4). Bez tej reguły obraz bierze wysokość naturalną
   zamiast wysokości kadru i dolny margines 1em — kafel przestaje trzymać
   proporcję. Elementor dokłada to samo regułą `.elementor img{height:auto}`
   (assets/css/elementor-glowna.css). */
.mp-card .mp-card__link .mp-card__media .mp-card__img{ height:100%; margin:0; }
.mp-card__fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:12%; text-align:center;
  font:300 clamp(14px,1.4vw,19px)/1.3 var(--mp-serif); color:var(--mp-body);
}
.mp-badge{
  position:absolute; top:0; left:0;
  font:400 11px/1 var(--mp-sans); letter-spacing:.15em; text-transform:uppercase;
  padding:9px 13px;
}
.mp-badge--promo{ background:var(--mp-taupe); color:#F7F2EA; }
.mp-badge--new{ background:var(--mp-ink); color:var(--mp-paper); }

/* 20 px od kadru do podpisu — korekta 12 (wzór: .pcard-img{margin-bottom:20px}). */
.mp-card__body{ padding-top:20px; display:flex; flex-direction:column; gap:9px; }
.mp-card__cat{
  font:400 11px/1.5 var(--mp-sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-card__title{
  font:400 clamp(16px,1.4vw,20px)/1.3 var(--mp-serif); color:var(--mp-ink);
}
.mp-card__price{
  display:flex; align-items:baseline; gap:10px;
  font:300 13px/1 var(--mp-sans); color:var(--mp-body-3);
}
.mp-card__price del{ font-size:12px; color:var(--mp-muted); }
.mp-card__price ins{ text-decoration:none; color:var(--mp-body-3); }

/* ==========================================================================
   STAN PUSTY
   ========================================================================== */

.mp-empty{
  border:1px solid #EFE9E1; background:var(--mp-warm); text-align:center;
  padding:clamp(36px,5vw,72px) clamp(24px,3vw,48px);
}
.mp-empty__title{
  margin:0; font:300 clamp(24px,2.4vw,32px)/1.25 var(--mp-serif); color:var(--mp-ink);
}
.mp-empty__text{
  margin:14px auto 26px; max-width:400px;
  font:300 14px/1.85 var(--mp-sans); color:var(--mp-body-2); text-wrap:pretty;
}

/* ==========================================================================
   PASEK ZAUFANIA, DARMOWA WYSYŁKA, DOLNY PASEK, STOPKA
   ========================================================================== */

.mp-trust{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--mp-line); background:var(--mp-warm); }
/* Ikona pozycjonowana bezwzględnie, bo wewnątrz <dl> element <div> może
   zawierać wyłącznie dt i dd — żaden dodatkowy kontener nie przejdzie.
   Ikona siedzi więc w <dt>, a wizualnie stoi po lewej obok obu wierszy. */
.mp-trust > div{
  position:relative; padding:18px 16px 18px 45px;
  border-right:1px solid var(--mp-line);
}
.mp-trust__ico{ position:absolute; left:16px; top:19px; line-height:0; color:var(--mp-body); }
.mp-trust > div:last-child{ border-right:0; }
.mp-trust dt{ font:400 11px/1 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--mp-body); margin:0 0 5px; }
.mp-trust dd{ margin:0; font:300 13px/1.5 var(--mp-sans); color:var(--mp-body-2); }

.mp-freeship{ border:1px solid var(--mp-line); background:var(--mp-warm); padding:16px 18px; margin-bottom:22px; }
.mp-freeship__row{
  display:flex; justify-content:space-between; gap:16px; margin-bottom:10px;
  font:400 11px/1 var(--mp-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--mp-body);
}
.mp-freeship__track{ height:2px; background:var(--mp-line-2); }
.mp-freeship__bar{ height:2px; background:var(--mp-taupe); transition:width .3s ease; }

.mp-tabbar{
  position:fixed; inset:auto 0 0 0; z-index:90;
  background:var(--mp-warm); border-top:1px solid var(--mp-line);
  display:none; grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom);
}
.mp-tabbar a{
  min-height:var(--mp-tap); padding:9px 4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font:400 10px/1 var(--mp-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--mp-body-2);
}
.mp-tabbar a[aria-current="page"]{ color:var(--mp-ink); }
.mp-tabbar__badge{
  position:absolute; transform:translate(12px,-10px);
  background:var(--mp-ink); color:var(--mp-paper);
  font-size:9px; line-height:1; padding:3px 5px; border-radius:9px;
}

.mp-footer{ background:var(--mp-ink); color:var(--mp-on-dark); }
.mp-footer a{ color:var(--mp-on-dark); }
.mp-footer a:hover{ color:var(--mp-paper); }
.mp-footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,48px); padding-block:clamp(40px,5vw,72px); }
.mp-footer__title{ font:400 11px/1 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--mp-on-dark-2); margin:0 0 16px; }
/* Odnośniki kolumn w celu dotykowym 44 × 44 px (decyzja właścicielki 44
   z 20 września 2026). Było 28 px wysokości i 9 px odstępu, a krótkie słowa
   miały cel węższy niż palec: „FAQ” 23 px, „Blog” 24, „Outlet” 32. Odstęp
   między odnośnikami zniknął, bo światło daje teraz samo pole 44 px — tekst
   stoi co 44 px zamiast co 37, a kolumna pięciu odnośników rośnie o 37 px
   (183 → 220; z zachowanym odstępem byłoby +73). Wyrównanie tekstu do lewej
   krawędzi kolumny zostaje: min-width poszerza tylko pole, nie przesuwa słowa. */
.mp-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.mp-footer li a{ font-size:13px; line-height:1.6; display:inline-flex; align-items:center; min-height:var(--mp-tap); min-width:var(--mp-tap); }
.mp-footer__legal{
  border-top:1px solid rgba(207,199,187,.18); padding-block:22px;
  font:400 11px/1.6 var(--mp-sans); letter-spacing:.1em; color:var(--mp-on-dark-2);
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
}

/* ==========================================================================
   POLE WYBORU Z ETYKIETĄ
   Etykieta była elementem liniowym, więc zawijany tekst wracał POD kontrolkę:
   pierwszy wiersz zaczynał się za polem wyboru, drugi i trzeci pod nim,
   przez co lewa krawędź akapitu była poszarpana. Flex z wyrównaniem do góry
   trzyma cały tekst w jednej kolumnie obok pola.
   ========================================================================== */

.mp-pole--checkbox label{
  display:flex; align-items:flex-start; gap:10px;
  min-height:var(--mp-tap);
}
.mp-pole--checkbox .mp-checkbox{ flex:0 0 auto; margin-top:.35em; }
.mp-pole--checkbox span{ flex:1 1 auto; }

/* ==========================================================================
   ODNOŚNIKI W TEKŚCIE CIĄGŁYM
   WCAG 1.4.1: informacji nie wolno przekazywać samym kolorem. Odnośnik
   w zdaniu odróżniał się od otoczenia wyłącznie odcieniem, więc osoba
   nierozróżniająca barw nie widziała, że to odnośnik (axe: „link-in-text-block").
   Podkreślenie dotyczy WYŁĄCZNIE tekstu ciągłego — nawigacja, kafle, przyciski
   i stopka mają własne sygnały (obwódki, pozycja, kontekst) i zostają bez zmian.
   ========================================================================== */

/* Odnośnik w zdaniu zgody też jest odnośnikiem w tekście ciągłym — bez
   podkreślenia odróżniał się od otoczenia wyłącznie odcieniem (1,16:1),
   co axe-core zgłasza jako naruszenie WCAG 1.4.1. */
.mp-pole--checkbox a,
.mp-firm-zgoda a,
.mp-strona__tresc p > a,
.mp-strona__tresc li > a,
.mp-strona__tresc dd > a,
.mp-wpis__tresc p > a,
.mp-wpis__tresc li > a,
.mp-realizacja__tresc p > a,
.mp-realizacja__tresc li > a,
.mp-hero__lead a,
.mp-lead a{
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
  text-decoration-color:var(--mp-rule);
}
.mp-pole--checkbox a:hover,
.mp-firm-zgoda a:hover,
.mp-strona__tresc p > a:hover,
.mp-strona__tresc li > a:hover,
.mp-wpis__tresc p > a:hover,
.mp-wpis__tresc li > a:hover,
.mp-realizacja__tresc p > a:hover,
.mp-lead a:hover{ text-decoration-color:currentColor; }

/* ==========================================================================
   CEL DOTYKOWY — egzekwowanie kontraktu
   Audyt jakości (Faza C) wykazał, że część kontrolek formularzy schodziła
   poniżej zapisanych 44 px: pola tekstowe 38, wybór sortowania i logo
   w nagłówku mobilnym po 35. Reguła stoi tu, a nie w arkuszach podstron,
   bo dotyczy każdej kontrolki niezależnie od ekranu.
   Testuje to tests/jakosc/zgodnosc-z-projektem.spec.js.
   ========================================================================== */

.mp-input,
.mp-facet__input,
.mp-sort__select,
select.mp-input,
.woocommerce-input-wrapper input.input-text,
.woocommerce-input-wrapper select{
  min-height:var(--mp-tap);
}

/* Pole wielolinijkowe ma własną wysokość zadaną liczbą wierszy — wymuszanie
   na nim minimum celu dotykowego nic nie wnosi. */
textarea.mp-input{ min-height:150px; }

/* ==========================================================================
   PRZYCISK POBRANIA PLIKU
   --------------------------------------------------------------------------
   Tabela plików do pobrania stoi na DWÓCH ekranach zasilanych różnymi
   arkuszami: „Moje konto → Pobieranie” (konto.css) i strona zamówienia,
   którą klientka dostaje odnośnikiem w mailu (zamowienie.css). Reguła jest
   więc tutaj, jak reguły formularzy niżej — inaczej trzeba by ją pisać dwa razy.

   Do 20 września przycisk nie miał żadnej reguły motywu: brał domyślny styl
   WooCommerce (fiolet #7F54B3 i wysokość 32 px). Na stronie zamówienia tekst
   mieścił się w jednej linii także przy 390 px, więc cel dotykowy wynosił tam
   32 px — poniżej kontraktu 44 px z sekcji 10 briefu (ten sam, który egzekwują
   reguły wyżej i decyzja 44 dla stopki). W „Moim koncie” etykieta łamała się
   na dwie linie i przypadkiem dawała 47 px; przypadek to nie kontrakt.

   Sekcja „Pobrania” na stronie zamówienia pojawiła się dopiero po decyzji 9
   z 20 września (przepięcie pozycji na wariant z plikiem) — wcześniej
   nie było czego stylować.
   ========================================================================== */

.woocommerce a.button.woocommerce-MyAccount-downloads-file,
.woocommerce-page a.button.woocommerce-MyAccount-downloads-file,
a.woocommerce-MyAccount-downloads-file{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--mp-tap); padding:11px 20px; border-radius:0; border:0;
  background:var(--mp-ink); color:var(--mp-paper);
  font:400 11px/1.45 var(--mp-sans);
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  /* Nazwa pliku to nazwa produktu — bywa dłuższa niż kolumna. Łamiemy ją
     zamiast rozpychać tabelę w poziomie. */
  text-align:center; overflow-wrap:anywhere;
}
.woocommerce a.button.woocommerce-MyAccount-downloads-file:hover,
.woocommerce-page a.button.woocommerce-MyAccount-downloads-file:hover,
a.woocommerce-MyAccount-downloads-file:hover{
  background:var(--mp-strong); color:var(--mp-paper);
}

/* ==========================================================================
   FORMULARZE
   --------------------------------------------------------------------------
   Te reguły siedziały w konto.css, czyli w arkuszu wczytywanym wyłącznie
   na „Moim koncie”. Formularz kontaktowy zbudowany jest z tych samych klas,
   ale na stronie Kontakt tamten arkusz nie wchodzi — pola brał więc pod
   siebie motyw nadrzędny: obwódka #666, tekst czysto czarny, etykieta jak
   zwykły akapit. W palecie kremowo-brązowej wyglądało to jak wklejone
   z innego serwisu.

   Reguły są tu przeniesione bez zmiany wartości; konto i zamówienie
   renderują się identycznie jak wcześniej.
   ========================================================================== */

.mp-form{ display:flex; flex-direction:column; gap:16px; margin-top:18px; }
.mp-pole{ display:flex; flex-direction:column; gap:7px; margin:0; }
.mp-pole label{
  font:400 10.5px/1 var(--mp-sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--mp-muted);
}
/* Nazwa znacznika w selektorze nie jest ozdobą. Motyw nadrzędny opisuje
   pola listą `input[type=text], input[type=email], …` o szczegółowości
   (0,1,1) — obwódka #666, zaokrąglenie 3 px, margines wewnętrzny .5rem 1rem.
   Sama klasa (0,1,0) tego nie pokona, więc pola na stronie Kontakt miały
   szarą obwódkę i zaokrąglone rogi, których nie ma nigdzie indziej
   w projekcie. Z nazwą znacznika jest remis, a przy remisie wygrywa
   arkusz wczytany później — czyli ten. */
input.mp-input,
textarea.mp-input,
select.mp-input{
  width:100%; min-height:var(--mp-tap);
  border:1px solid var(--mp-line-3); border-radius:0; background:var(--mp-white);
  padding:13px 14px; font:300 15px/1.4 var(--mp-sans); color:var(--mp-ink);
  transition:border-color .15s ease;
}
input.mp-input:focus-visible,
textarea.mp-input:focus-visible,
select.mp-input:focus-visible{ border-color:var(--mp-focus); }
.mp-pole--checkbox label{
  flex-direction:row; align-items:center; gap:10px; min-height:var(--mp-tap);
  display:flex; letter-spacing:.02em; text-transform:none;
  font:300 13.5px/1.5 var(--mp-sans); color:var(--mp-body-2);
}
.mp-checkbox{ width:16px; height:16px; accent-color:var(--mp-ink); }
.mp-form__nota{ margin:0; font:300 13px/1.6 var(--mp-sans); color:var(--mp-body-2); }
.mp-form__nota a{ color:var(--mp-bronze); border-bottom:1px solid var(--mp-line-2); }

/* Logo w nagłówku mobilnym jest odnośnikiem do strony głównej, a więc celem. */
.mp-logo--maly{
  min-height:var(--mp-tap);
  display:inline-flex; flex-direction:column; justify-content:center;
}

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

@media (max-width:860px){
  .mp-shop__grid{ grid-template-columns:minmax(0,1fr); }
  /* minmax(0,1fr) z tego samego powodu co wyżej — punkt 8 (Safari). */
  .mp-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mp-trust{ grid-template-columns:repeat(2,1fr); }
  .mp-trust > div:nth-child(2n){ border-right:0; }
  .mp-trust > div:nth-child(-n+2){ border-bottom:1px solid var(--mp-line); }
  .mp-footer__cols{ grid-template-columns:repeat(2,1fr); }
  .mp-tabbar{ display:grid; }
  .mp-filters-toggle{ display:flex; cursor:pointer; }
  /* Pasek narzędzi łamie się tu na dwa rzędy i pierwszy z nich to przycisk
     „Filtry” z ramką, dosunięty do górnej krawędzi paska. Nakładka 1 px na
     linię nagłówka (potrzebna na komputerze, gdzie wysokość nagłówka jest
     ułamkowa) chowała jego górną krawędź pod nagłówkiem. Nagłówek mobilny ma
     równe 61 px, więc pasek zaczyna się dokładnie pod nim, a 5 px dopełnienia
     — tyle, ile na komputerze daje wyśrodkowanie w 56 px — odsuwa ramkę
     od linii nagłówka. */
  .mp-toolbar{ top:var(--mp-naglowek-dol); }
  .mp-toolbar__inner{ padding-top:5px; }
  body{ padding-bottom:64px; }
}

/* ==========================================================================
   NAGŁÓWEK NA TELEFONIE
   Kontrola wykazała, że wariant desktopowy rozpada się na 430 px: nawias
   licznika koszyka osierocony w trzeciej linii, wstęga nawigacji w dwóch
   rzędach i dublująca dolny pasek. Podgląd ma tu osobny układ 48/1fr/48.
   ========================================================================== */

.mp-header__mobil{ display:none; }

.mp-hamburger{
  min-width:var(--mp-tap); min-height:var(--mp-tap);
  display:flex; flex-direction:column; justify-content:center; gap:5px; padding:0 12px;
}
.mp-hamburger span{ height:1px; background:var(--mp-ink-2); display:block; }
.mp-hamburger span:nth-child(1),
.mp-hamburger span:nth-child(2){ width:18px; }
.mp-hamburger span:nth-child(3){ width:12px; }

.mp-logo--maly{ gap:2px; }
.mp-logo--maly .mp-logo__main{ font-size:19px; letter-spacing:.14em; }
.mp-logo--maly .mp-logo__sub{ font-size:8.5px; letter-spacing:.22em; margin-top:3px; }

.mp-header__koszyk-mobil{
  min-width:var(--mp-tap); min-height:var(--mp-tap);
  display:flex; align-items:center; justify-content:center; gap:5px;
  color:var(--mp-ink); font:400 11px/1 var(--mp-sans); --mp-cyfry:var(--mp-cyfry-kolumna);
}

@media (max-width:860px){
  .mp-header__grid{ display:none; }
  .mp-nav{ display:none; }
  .mp-header__mobil{
    display:grid; grid-template-columns:var(--mp-tap) 1fr var(--mp-tap);
    align-items:center; padding:8px 10px;
  }
  /* Nagłówek mobilny (61 px) zostaje na ekranie w całości — jak dotąd. */
  .mp-naglowek,
  html.mp-naglowek-js .mp-naglowek{ top:var(--mp-pasek-admina); }
}

/* ==========================================================================
   PEŁNOEKRANOWE MENU NA TELEFONIE
   ========================================================================== */

.mp-menu{ position:fixed; inset:0; z-index:130; }
.mp-menu[hidden]{ display:none !important; }
.mp-menu__tlo{
  position:absolute; inset:0; background:rgba(36,29,21,.34);
  opacity:0; transition:opacity .26s ease;
}
.mp-menu.jest-otwarty .mp-menu__tlo{ opacity:1; }
.mp-menu__okno{
  position:absolute; inset-block:0; left:0;
  width:min(360px,86%); background:var(--mp-cream);
  border-right:1px solid var(--mp-line);
  box-shadow:30px 0 70px -40px rgba(44,35,25,.55);
  display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .26s cubic-bezier(.32,.72,.32,1);
}
.mp-menu.jest-otwarty .mp-menu__okno{ transform:none; }

.mp-menu__glowa{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--mp-gut) 16px; border-bottom:1px solid var(--mp-line);
  background:var(--mp-warm);
}
.mp-menu__tytul{ margin:0; font:300 24px/1.15 var(--mp-serif); color:var(--mp-ink); }
.mp-menu__zamknij{
  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-menu__nawigacja{ flex:1; overflow-y:auto; padding:8px var(--mp-gut); }
.mp-menu__nawigacja ul,
.mp-menu__nawigacja li{ list-style:none; margin:0; padding:0; }
.mp-menu__nawigacja a{
  display:block; padding:14px 0; min-height:var(--mp-tap);
  font:300 26px/1.4 var(--mp-serif); color:var(--mp-ink);
  border-bottom:1px solid #EFE9E1;
}
.mp-menu__nawigacja a:hover,
.mp-menu__nawigacja [aria-current="page"]{ color:var(--mp-bronze); }

.mp-menu__kontakt{ padding:22px var(--mp-gut) 28px; border-top:1px solid var(--mp-line); }
.mp-menu__etykieta{
  margin:0 0 8px; font:400 10.5px/1 var(--mp-sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-menu__dane{ margin:0 0 4px; font:300 14px/1.7 var(--mp-sans); color:var(--mp-body-3); }

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

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