/* ============================================================
   MW Motyw — TOKENY WSPÓLNE dla wszystkich widoków sklepu.
   JEDNO miejsce na paletę, typografię i odstępy — zmiana tutaj
   przechodzi na kartę produktu, kategorię, koszyk, konto itd.

   Dla agencji: to jest plik, który zmieniacie, żeby przemalować
   sklep. Nie szukajcie kolorów po pozostałych arkuszach.

   Scope: `:is(.mw-widok,.mw-view)` (wspólna klasa opakowania każdego widoku)
   + `.mw-pdp` dla zgodności wstecz z kartą z Etapu 3.
   ============================================================ */

:is(.mw-widok,.mw-view),
.mw-pdp{
  /* --- kolory marki (paleta zamknięta 20.05.2026, CZTERY kolory) --- */
  --mw-black:#0F0F0F;
  --mw-ecru:#EFE7D5;
  --mw-taupe:#8A7968;
  --mw-choco:#3A2D24;      /* czwarty kolor palety: hover ciemnych CTA, akcenty */
  /* --- pochodne funkcjonalne (kontrast AA) --- */
  --mw-ink:#0F0F0F;
  --mw-ink-2:#4A443C;      /* tekst drugorzędny na ecru ~8:1 */
  --mw-ink-3:#5E574C;      /* podpisy ~6:1 */
  /* Tło sklepu: BIAŁE (decyzja Michała 19.07). Ecru zostaje kolorem marki
     — używamy go na pasku ogłoszeń i w stopce, nie jako tła stron. */
  --mw-paper:#FFFFFF;
  --mw-surface:#FFFFFF;
  --mw-surface-2:#F7F5F1;  /* tło pola, wiersza, sekcji wyróżnionej */
  --mw-surface-3:#F0ECE6;  /* placeholder zdjęcia — cieplejsze, widoczne na bieli */
  --mw-line:#E4E0D8;       /* hairline na bieli */
  --mw-line-2:#CFC8BC;
  /* --- stany (komunikat = tekst + tło + ramka, trzy tokeny na stan) --- */
  --mw-ok:#2E6B4F;         /* na stanie */
  --mw-ok-bg:#F1F7F3;
  --mw-ok-line:#A9C3B4;
  --mw-warn:#8A5A1C;       /* szyjemy (backorder) */
  --mw-error:#7A2E2E;      /* błąd formularza i koszyka */
  --mw-error-bg:#FBF3F3;
  --mw-error-line:#CFA9A9;
  --mw-muted:#9C968C;      /* TYLKO kontrolka wyłączona (2,94:1 — WCAG zwalnia nieaktywne).
                              Tekst informacyjny bierze --mw-ink-3 (7,13:1). Defekt 5 */
  --mw-promo:#8C2F2F;      /* przecena — AA na ecru i na bieli */
  /* --- na zdjęciu / ciemnym (para do --mw-ink i --mw-line) --- */
  --mw-on-dark:#FAFAF7;    /* wraca: hero, baner kolekcji, blok redakcyjny */
  --mw-on-dark-2:#CDC3B1;  /* linki i tekst na ciemnym tle stopki */
  --mw-on-dark-3:#B9AD98;  /* drobny druk na ciemnym */
  --mw-on-dark-fade:color-mix(in srgb,var(--mw-on-dark) 55%,transparent);  /* ramka i kontrolka na zdjeciu */
  --mw-line-on-dark:color-mix(in srgb,var(--mw-on-dark) 12%,transparent);  /* podzialki w stopce */
  --mw-scrim:linear-gradient(180deg,   /* WCAG 1.4.3 — zdjęcie bywa jasne pod napisem */
    color-mix(in srgb,var(--mw-black) 26%,transparent) 0%,
    color-mix(in srgb,var(--mw-black) 6%,transparent) 38%,
    color-mix(in srgb,var(--mw-black) 62%,transparent) 100%);
  /* --- przezroczystosci i cienie (bylo 12 recznych rgba w 5 plikach) --- */
  --mw-overlay:color-mix(in srgb,var(--mw-black) 35%,transparent);  /* zaslona pod modalem, panelem, minikoszykiem */
  --mw-glass:color-mix(in srgb,var(--mw-paper) 90%,transparent);    /* mleczna plamka na zdjeciu: licznik galerii, spinner */
  --mw-shadow-0:0 4px 16px color-mix(in srgb,var(--mw-black) 7%,transparent);    /* kadr zdjecia na jasnym tle */
  --mw-shadow-1:0 -2px 12px color-mix(in srgb,var(--mw-black) 6%,transparent);   /* pasek sticky */
  --mw-shadow-2:0 10px 30px color-mix(in srgb,var(--mw-black) 12%,transparent);  /* dropdown */
  --mw-shadow-3:0 18px 48px color-mix(in srgb,var(--mw-black) 16%,transparent);  /* modal, minikoszyk */
  /* --- typografia --- */
  --mw-serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  /* tekst i UI — Cormorant przy 11-16 px jest za cienki, Crimson ma wiekszy x-height */
  --mw-body:"Crimson Text","Iowan Old Style",Georgia,serif;
  --mw-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* skala pisma: 13 / 15 / 16 / 18 / 24 / 44. Innych stopni nie ma.
     Dolny koniec podniesiony 28.08 — klientki 50+, drobny druk ma nie powstać nigdzie
     (ustalenie z callu 27.08). Poprzednio skala schodziła do 10,5 px w badge'ach. */
  --mw-fs-xs:.8125rem;   /* 13 — mikroetykiety wersalikami, okruszki, badge */
  --mw-fs-sm:.9375rem;   /* 15 — cena, meta, linki stopki, kontrolki drugorzedne */
  --mw-fs-base:1rem;     /* 16 — tresc, nawigacja, CTA */
  --mw-fs-md:1.125rem;   /* 18 — akapit wyrozniony, lid krotki */
  --mw-fs-lg:1.5rem;     /* 24 — h2, logo, nazwa marki */
  --mw-fs-display:clamp(2.25rem,4.5vw,2.75rem);   /* 36 → 44 px od ~980 px w górę */
  --mw-fs-hero:clamp(2.5rem,5.5vw,4rem);          /* 40 → 64 — tytuł sekcji-bohatera, tylko strona główna */
  /* skala interlinii: 3 stopnie, innych nie ma */
  --mw-lh-tight:1.05;    /* naglowki display */
  --mw-lh-snug:1.3;      /* lid, nazwy produktow, nawigacja */
  --mw-lh-base:1.55;     /* tekst ciagly, reset */
  /* --- rytm --- */
  --mw-ease:cubic-bezier(.4,0,.2,1);
  --mw-max:1360px;
  --mw-gap:clamp(.5rem,2vw,1rem);
  --mw-pad:clamp(1rem,4vw,3rem);
  /* skala odstepow: wielokrotnosci 8, wyjatkowo 4. Innych wartosci nie ma. */
  --mw-s1:.25rem;   /* 4 */
  --mw-s2:.5rem;    /* 8 */
  --mw-s3:1rem;     /* 16 */
  --mw-s4:1.5rem;   /* 24 */
  --mw-s5:2rem;     /* 32 */
  --mw-s6:2.5rem;   /* 40 */
  --mw-s7:3rem;     /* 48 */
  --mw-s8:4rem;     /* 64 */
  --mw-s9:5rem;     /* 80 */
  --mw-section-gap:6rem;  /* 96 — jedyny odstep miedzy sekcjami strony */
  --mw-header-h:4.5rem;  /* 72 — wysokosc paska, potrzebna do ujemnego marginesu na stronie glownej */
  --mw-bar-h:2.5rem;     /* 40 — wysokosc paska ogloszen, rezerwowana od pierwszej klatki */
  --mw-control-h:48px;   /* jedna wysokosc kontrolki: przycisk, pole, submit szukajki */
  --mw-radius:0;         /* kanty proste — decyzja Tomka 25.08 */
}

/* ---- reset lokalny (tylko wewnątrz naszych widoków) ----
   ⚠️ NIE owijać tego w :where() ani inaczej obniżać specyficzności!
   Ten reset pełni PODWÓJNĄ rolę: normalizuje przeglądarkę ORAZ przebija style DIVI,
   które nadal renderuje resztę strony. Próba (21.07) zbicia go do specyficzności 0
   sprawiła, że Divi wygrał i linki w naszych widokach (logo, okruszki, ceny w kafelkach)
   zrobiły się RÓŻOWE — bo `a{color:inherit}` przestało nadpisywać kolor linków Divi.
   Analogicznie ucierpiałyby `ul{list-style:none}` i marginesy `p/h1`.
   KONSEKWENCJA: nasze komponenty na tagach z resetem (button/ul/a/li) piszemy jako
   `:is(.mw-widok,.mw-view) .mw-klasa` (0,2,0), żeby wygrać z resetem (0,1,1). */
:is(.mw-widok,.mw-view) *,:is(.mw-widok,.mw-view) *::before,:is(.mw-widok,.mw-view) *::after{ box-sizing:border-box; }
/* kroj bazowy Crimson Text: systemowy byl legacy i wychodzil wszedzie poza strona glowna */
:is(.mw-widok,.mw-view){ margin:0; font-family:var(--mw-body); font-size:16px; line-height:var(--mw-lh-base);
  color:var(--mw-ink); background:var(--mw-paper); -webkit-font-smoothing:antialiased; }
:is(.mw-widok,.mw-view) img{ max-width:100%; display:block; }
:is(.mw-widok,.mw-view) button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
:is(.mw-widok,.mw-view) a{ color:inherit; }
:is(.mw-widok,.mw-view) h1,:is(.mw-widok,.mw-view) h2,:is(.mw-widok,.mw-view) h3,:is(.mw-widok,.mw-view) p,:is(.mw-widok,.mw-view) ul,:is(.mw-widok,.mw-view) ol{ margin:0; }
:is(.mw-widok,.mw-view) ul,:is(.mw-widok,.mw-view) ol{ padding:0; list-style:none; }

/* ---- focus widoczny (WCAG 2.4.7) ---- */
:is(.mw-widok,.mw-view) a:focus-visible,:is(.mw-widok,.mw-view) button:focus-visible,:is(.mw-widok,.mw-view) input:focus-visible,
:is(.mw-widok,.mw-view) select:focus-visible,:is(.mw-widok,.mw-view) summary:focus-visible,:is(.mw-widok,.mw-view) [tabindex]:focus-visible{
  outline:2px solid var(--mw-ink); outline-offset:2px; border-radius:var(--mw-radius);
}

/* ---- tylko dla czytników ekranu ---- */
.mw-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- skip link ---- */
.mw-skip{ position:absolute; left:-9999px; top:0; background:var(--mw-ink); color:var(--mw-on-dark);
  padding:.6rem 1rem; z-index:100; }
.mw-skip:focus{ left:.5rem; top:.5rem; }

/* ---- szanuj „ogranicz ruch" (WCAG 2.3.3) ---- */
@media (prefers-reduced-motion:reduce){
  :is(.mw-widok,.mw-view) *,:is(.mw-widok,.mw-view) *::before,:is(.mw-widok,.mw-view) *::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}

/* ============================================================
   CHROM WSPÓLNY: pasek ogłoszeń, nagłówek, stopka, wspólne nagłówki.
   Przeniesione 19.07 z pdp.css, żeby KAŻDY widok (kategoria, koszyk,
   konto, 404) miał ten sam szkielet bez kopiowania stylów.
   ============================================================ */
/* Ponizej 593 px tresc paska nie miesci sie w jednej linii i zawija na dwie (zmierzone 02.09).
   Hero odejmuje --mw-bar-h od 100svh, wiec token musi zgadzac sie z realna wysokoscia,
   inaczej zdjecie wychodzi poza ekran. Prog zalezy od dlugosci tresci z panelu. */
@media (max-width:592px){
  :root{ --mw-bar-h:3.5rem; }   /* 56 — dwie linie */
}

/* wysokosc rezerwowana od pierwszej klatki: bez niej pasek skacze przy wczytaniu kroju */
.mw-pasek-ogloszen{background:var(--mw-black); color:var(--mw-ecru); text-align:center;
  font-family:var(--mw-body); font-size:var(--mw-fs-xs); letter-spacing:.18em;
  text-transform:uppercase; padding:var(--mw-s2) var(--mw-s3);
  min-block-size:var(--mw-bar-h); display:grid; place-items:center;}
/* wariant klikalny (link z panelu): scope pod :is(.mw-widok,.mw-view) (0,2,0), żeby wygrać z resetem
   `a{color:inherit}` — inaczej tekst na czarnym pasku zrobiłby się ciemny */
:is(.mw-widok,.mw-view) .mw-pasek-ogloszen--link{display:block; color:var(--mw-ecru); text-decoration:none;}
:is(.mw-widok,.mw-view) .mw-pasek-ogloszen--link:hover{opacity:.9;}
/* transition:none celowo: Divi wstrzykuje `all`, przez co tlo paska dochodzilo do bieli
   wolniej niz rozwijala sie nakladka i pasek wygladal na ciemniejszy */
.mw-header{background:var(--mw-paper); border-bottom:1px solid var(--mw-line);
  position:sticky; inset-block-start:0; z-index:40; transition:none;}
.mw-header__in{max-width:var(--mw-max); margin-inline:auto;
  display:flex; align-items:center; gap:var(--mw-s4);
  padding:var(--mw-s3) var(--mw-pad); min-block-size:var(--mw-header-h);}
.mw-header__logo{font-family:var(--mw-serif); font-size:var(--mw-fs-lg); letter-spacing:.02em;
  text-decoration:none; line-height:1; order:2; margin-inline:auto; flex:0 0 auto;}
.mw-header__logo-img{display:block; block-size:28px; aspect-ratio:216/28;
  background:currentColor;
  -webkit-mask:url(img/logo-mw.svg) no-repeat center / contain;
  mask:url(img/logo-mw.svg) no-repeat center / contain;}
.mw-logo-tekst{font-family:var(--mw-serif);}
.mw-header__nav{order:1; flex:1 1 0; min-inline-size:0;}
.mw-header__tools{order:3; flex:1 1 0; min-inline-size:0; display:flex; align-items:center;
  justify-content:flex-end; gap:var(--mw-s5);}
.mw-menu{display:flex; gap:var(--mw-s4); list-style:none; margin:0; padding:0;}
/* etykieta wersalikowa jak na stronie glownej: Crimson Text, .18em (zakladki karuzeli, batony) */
.mw-menu a,.mw-menu__link,
:is(.mw-widok,.mw-view) .mw-header__tools a,
:is(.mw-widok,.mw-view) .mw-header__szukaj-btn{
  text-decoration:none; font-family:var(--mw-body); font-size:var(--mw-fs-xs);
  letter-spacing:.18em; text-transform:uppercase; color:var(--mw-ink); white-space:nowrap;}
.mw-menu a:hover,.mw-header__tools a:hover,.mw-header__szukaj-btn:hover{color:var(--mw-taupe);}
.mw-header__koszyk{display:inline-flex; gap:.25ch; text-decoration:none;}

/* ---- WYSZUKIWARKA w nagłówku (lupa + rozwijany pasek) ---- */
.mw-header__szukaj-btn{display:inline-grid; place-items:center; width:40px; height:40px;
  color:var(--mw-ink); background:none; border:0; cursor:pointer;}
.mw-header__szukaj-btn:hover{color:var(--mw-ink-2);}
.mw-szukajka{display:flex; align-items:center; gap:.5rem; max-width:var(--mw-max); margin-inline:auto;
  padding:0 var(--mw-pad) 1rem;}
.mw-szukajka[hidden]{display:none;}
.mw-szukajka__pole{flex:1 1 auto; min-width:0; min-height:var(--mw-control-h); padding:.6rem .9rem; font:inherit;
  border:1px solid var(--mw-line-2); border-radius:var(--mw-radius); background:var(--mw-paper); color:var(--mw-ink);}
.mw-szukajka__pole:focus{outline:2px solid var(--mw-ink); outline-offset:1px; border-color:var(--mw-ink);}
.mw-szukajka__submit{display:inline-grid; place-items:center; width:var(--mw-control-h); height:var(--mw-control-h); flex:0 0 auto;
  background:var(--mw-black); color:var(--mw-ecru); border:0; border-radius:var(--mw-radius); cursor:pointer;}
.mw-szukajka__submit:hover{background:var(--mw-choco);}

/* live podpowiedzi (dropdown pod polem) */
.mw-szukajka__wrap{position:relative; flex:1 1 auto; min-width:0;}
.mw-szw{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:var(--mw-paper); border:1px solid var(--mw-line-2); border-radius:var(--mw-radius);
  box-shadow:var(--mw-shadow-2); max-height:min(70vh,430px); overflow:auto;}
.mw-szw[hidden]{display:none;}
.mw-szw__poz{display:flex; align-items:center; gap:.8rem; padding:.6rem .8rem; text-decoration:none;
  color:var(--mw-ink); border-bottom:1px solid var(--mw-line);}
.mw-szw__poz:hover,.mw-szw__poz:focus{background:var(--mw-surface-2);}
.mw-szw__foto{flex:0 0 auto; width:48px; height:60px; overflow:hidden; background:var(--mw-surface-3);}
.mw-szw__foto img{width:48px; height:60px; object-fit:cover; display:block;}
.mw-szw__info{display:flex; flex-direction:column; gap:.15rem; min-width:0;}
.mw-szw__nazwa{font-size:var(--mw-fs-sm); line-height:var(--mw-lh-snug);}
.mw-szw__cena{font-size:var(--mw-fs-sm); color:var(--mw-ink-2);}
.mw-szw__cena del{opacity:.6; margin-right:.3rem;}
.mw-szw__wiecej{display:block; padding:.7rem .8rem; text-align:center; text-decoration:none;
  font-size:var(--mw-fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--mw-ink); background:var(--mw-surface-2);}
.mw-szw__wiecej:hover{background:var(--mw-line);}
.mw-szw__pusto{margin:0; padding:.9rem .8rem; font-size:var(--mw-fs-sm); color:var(--mw-ink-2);}

/* kręcące się kółko w otwartym okienku podpowiedzi (na czas ładowania) */
.mw-szw__laduje{display:flex; justify-content:center; padding:1.5rem;}
.mw-spinner{width:26px; height:26px; border:2px solid var(--mw-line-2); border-top-color:var(--mw-ink);
  border-radius:50%; animation:mw-spin .7s linear infinite;}
@keyframes mw-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .mw-spinner{animation-duration:1.4s;} }

/* sekcja „Z bloga" na końcu podpowiedzi */
.mw-szw__grupa{padding:.55rem .8rem .35rem; font-size:var(--mw-fs-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--mw-ink-3); background:var(--mw-surface-2); border-top:1px solid var(--mw-line); border-bottom:1px solid var(--mw-line);}
.mw-szw__poz--wpis{padding-top:.7rem; padding-bottom:.7rem;}
.mw-szw__meta{font-size:var(--mw-fs-xs); color:var(--mw-ink-3);}
.mw-h2{font-family:var(--mw-serif); font-weight:500; font-size:var(--mw-fs-lg); margin-bottom:1rem;}
.mw-footer{background:var(--mw-black); color:var(--mw-ecru); margin-top:4rem;}
.mw-footer__in{max-width:var(--mw-max); margin-inline:auto; padding:3.5rem var(--mw-pad) 2rem;}
.mw-footer__male{font-size:var(--mw-fs-xs); color:var(--mw-on-dark-3); margin-top:.4rem;}

/* ---- STOPKA KOLUMNOWA ---- */
.mw-footer__kolumny{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.5rem; }
.mw-footer__kol{ border:0; }
.mw-footer__kol-tyt{ font-size:var(--mw-fs-xs); letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--mw-ecru); margin:0 0 1.1rem; list-style:none; pointer-events:none; }
.mw-footer__kol-tyt::-webkit-details-marker{ display:none; }
.mw-footer__linki{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.mw-footer__linki a{ color:var(--mw-on-dark-2); text-decoration:none; font-size:var(--mw-fs-sm); transition:color .15s var(--mw-ease); }
.mw-footer__linki a:hover{ color:var(--mw-ecru); }

/* kolumna marki / kontakt */
.mw-footer__marka-nazwa{ font-family:var(--mw-serif); font-weight:500; font-size:var(--mw-fs-lg); color:var(--mw-ecru);
  margin:0 0 1.1rem; letter-spacing:.02em; }
.mw-footer__godz,
.mw-footer__bok{ font-size:var(--mw-fs-sm); color:var(--mw-on-dark-2); margin:0 0 .7rem; }
.mw-footer__marka p a{ color:var(--mw-on-dark-2); text-decoration:none; font-size:var(--mw-fs-sm); }
.mw-footer__marka p a:hover{ color:var(--mw-ecru); text-decoration:underline; text-underline-offset:3px; }
.mw-footer__newsletter{ display:inline-block; margin-top:1rem; border:1px solid var(--mw-on-dark-fade); color:var(--mw-ecru);
  text-decoration:none; padding:.65rem 1.7rem; font-size:var(--mw-fs-xs); letter-spacing:.14em; text-transform:uppercase;
  transition:background .15s var(--mw-ease), color .15s var(--mw-ease); }
.mw-footer__newsletter:hover{ background:var(--mw-ecru); color:var(--mw-black); }

/* dół: copyright + social */
.mw-footer__dol{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--mw-line-on-dark); }
.mw-footer__copy{ font-size:var(--mw-fs-xs); color:var(--mw-on-dark-3); margin:0; }
.mw-footer__social{ display:flex; gap:1.1rem; }
.mw-footer__social a{ color:var(--mw-on-dark-2); display:inline-flex; transition:color .15s var(--mw-ease); }
.mw-footer__social a:hover{ color:var(--mw-ecru); }

@media (max-width:900px){
  .mw-footer__kolumny{ grid-template-columns:1fr 1fr; gap:2rem 2.5rem; }
}
/* mobile: kolumny linków jako akordeon (<details>) */
@media (max-width:600px){
  .mw-footer__kolumny{ grid-template-columns:1fr; gap:0; }
  .mw-footer__kol{ border-bottom:1px solid var(--mw-line-on-dark); }
  .mw-footer__kol-tyt{ pointer-events:auto; cursor:pointer; display:flex; align-items:center;
    justify-content:space-between; margin:0; padding:1.15rem 0; }
  .mw-footer__kol-tyt::after{ content:"⌄"; font-size:1.1rem; line-height:1; color:var(--mw-on-dark-2); transition:transform .2s var(--mw-ease); }
  .mw-footer__kol[open] .mw-footer__kol-tyt::after{ transform:rotate(180deg); }
  .mw-footer__linki{ padding:0 0 1.15rem; }
  .mw-footer__marka{ padding-top:1.8rem; }
  .mw-footer__dol{ justify-content:center; text-align:center; }
}
/* ---- MENU MOBILNE (mobile first: domyślnie schowane pod przyciskiem) ---- */
.mw-hamburger{ display:grid; place-items:center; width:40px; height:40px; margin-inline-start:-8px; }
/* `top` MUSI byc w transition — kreski jada na top, nie na transform (bug do 28.08) */
.mw-hamburger__kreski,
.mw-hamburger__kreski::before,
.mw-hamburger__kreski::after{ content:""; display:block; width:20px; height:1.5px;
  background:var(--mw-ink); transition:transform .25s var(--mw-ease), opacity .25s var(--mw-ease), top .25s var(--mw-ease); }
.mw-hamburger__kreski{ position:relative; }
.mw-hamburger__kreski::before{ position:absolute; top:-6px; }
.mw-hamburger__kreski::after{ position:absolute; top:6px; }
.mw-hamburger[aria-expanded="true"] .mw-hamburger__kreski{ background:transparent; }
.mw-hamburger[aria-expanded="true"] .mw-hamburger__kreski::before{ top:0; transform:rotate(45deg); }
.mw-hamburger[aria-expanded="true"] .mw-hamburger__kreski::after{ top:0; transform:rotate(-45deg); }

/* hamburger bierze tyle samo miejsca co narzedzia, zeby logo stalo w osi ekranu */
.mw-hamburger{ order:1; flex:1 1 0; justify-items:start; }
/* na waskim ekranie logo w pelnym rozmiarze wchodzilo pod SZUKAJ i KOSZYK */
.mw-header__in{ gap:var(--mw-s2); }
.mw-header__logo-img{ block-size:18px; }
.mw-header__tools{ gap:var(--mw-s3); }
.mw-header__nav{ display:none; }
.mw-header__nav.is-otwarte{ display:block; position:absolute; inset-block-start:100%;
  inset-inline:0; background:var(--mw-paper); border-block:1px solid var(--mw-line);
  padding:var(--mw-s3) var(--mw-pad); z-index:20; }
.mw-header__nav.is-otwarte .mw-menu{ flex-direction:column; gap:var(--mw-s3); }
.mw-header__account{ display:none; }

@media (min-width:900px){
  .mw-hamburger{ display:none; }
  .mw-header__nav{ display:block; }
  .mw-header__account{ display:inline; }
  .mw-header__in{ gap:var(--mw-s4); }
  .mw-header__logo-img{ block-size:28px; }
  .mw-header__tools{ gap:var(--mw-s5); }
}

/* ---- WYCISZENIE WSTRZYKNIĘĆ SPOZA NASZYCH WIDOKÓW ----
   Ivory Search (add-search-to-menu) doklejał pole wyszukiwania w wp_footer,
   które lądowało nad paskiem ogłoszeń i psuło górę każdego widoku.
   Wyszukiwarka jest osobnym widokiem w planie (3.3b cz. 5) — zrobimy własną.
   UWAGA: karta produktu ma <body class="mw-pdp"> (bez mw-widok), więc reguły
   MUSZĄ obejmować OBA scope'y — inaczej „Search for…" wraca tylko na karcie. */
:is(.mw-widok,.mw-view) .is-search-form,      .mw-pdp .is-search-form,
:is(.mw-widok,.mw-view) .is-form-style,       .mw-pdp .is-form-style,
:is(.mw-widok,.mw-view) .is-search-icon,      .mw-pdp .is-search-icon,
:is(.mw-widok,.mw-view) .is-ajax-search,      .mw-pdp .is-ajax-search,
:is(.mw-widok,.mw-view) .is-menu,             .mw-pdp .is-menu,
:is(.mw-widok,.mw-view) #is-popup-wrapper,    .mw-pdp #is-popup-wrapper{ display:none !important; }

/* ---- ZEROWANIE ŁATKI DIVI: padding-top na body ----
   Divi wstrzykuje inline `body:not(.home){padding-top:51px/45px}` jako kompensację
   swojego FIXED-headera (rejestr customizacji B6). Nasze widoki mają własny,
   niefixed nagłówek, więc ta łatka zostawiała pusty BIAŁY PASEK u góry.
   `body.mw-*` (0,1,1) + !important pewnie bije `body:not(.home)` (0,1,1). */
body:is(.mw-widok,.mw-view), body.mw-pdp{ padding-top:0 !important; }

/* ---- OKRUSZKI + TYTUŁ WIDOKU (wspólne: listing, koszyk, konto…) ----
   Przeniesione ze sklep.css (22.07) — koszyk ich potrzebuje, a nie ładuje
   arkusza listingu. JEDNA definicja tutaj. ---- */
.mw-okruszki{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  font-size:var(--mw-fs-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--mw-ink-3); padding:1.25rem 0; }
.mw-okruszki a{ text-decoration:none; }
.mw-okruszki a:hover{ text-decoration:underline; }
.mw-okruszki [aria-current]{ color:var(--mw-ink); }
.mw-listing__head{ padding:.5rem 0 1.5rem; }
/* h1 listingu jedzie na tym samym stopniu co kazdy h1 widoku — bylo osobne clamp do 64 px */
.mw-listing__h1{ font-family:var(--mw-serif); font-weight:400;
  font-size:var(--mw-fs-display); line-height:var(--mw-lh-tight); letter-spacing:-.01em; }

/* ---- PRZYCISKI WSPÓLNE (obrys / pełny) ----
   Przeniesione ze sklep.css (22.07) — używane przez filtry, koszyk i modale.
   Scope :is(.mw-widok,.mw-view) (0,2,0), żeby wygrać z resetem `button/a` (0,1,1). ---- */
:is(.mw-widok,.mw-view) .mw-btn{ flex:1; display:grid; place-items:center; min-height:var(--mw-control-h);
  text-decoration:none; font-size:var(--mw-fs-xs); letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; font-family:inherit; border-radius:var(--mw-radius); border:1px solid var(--mw-ink);
  background:var(--mw-paper); color:var(--mw-ink);
  transition:background .15s var(--mw-ease), color .15s var(--mw-ease), border-color .15s var(--mw-ease); }
:is(.mw-widok,.mw-view) .mw-btn--obrys:hover{ background:var(--mw-ink); color:var(--mw-paper); }
:is(.mw-widok,.mw-view) .mw-btn--pelny{ background:var(--mw-black); color:var(--mw-ecru); border-color:var(--mw-black); }
/* hover na czekoladzie — poprzedni czarny hover byl nieodrozalny od tla przycisku */
:is(.mw-widok,.mw-view) .mw-btn--pelny:hover{ background:var(--mw-choco); border-color:var(--mw-choco); }
:is(.mw-widok,.mw-view) .mw-btn:disabled,
:is(.mw-widok,.mw-view) .mw-btn[aria-disabled="true"]{ background:var(--mw-surface-2); color:var(--mw-muted);
  border-color:var(--mw-line); cursor:not-allowed; }

/* ---- MEGA-MENU: nakladka pelnej szerokosci pod paskiem ---- */
/* punkt odniesienia to .mw-header__in, nie pozycja listy: nakladka ma isc przez cala szerokosc */
.mw-menu__has-children{ position:static; }
.mw-megamenu__list{ list-style:none; margin:0; padding:0; }

/* telefon: podpozycje wciete, zawsze widoczne w rozwinietym menu */
.mw-megamenu{ margin-block:var(--mw-s2) var(--mw-s3); }
.mw-megamenu__list{ display:flex; flex-direction:column; gap:var(--mw-s2);
  margin-inline-start:var(--mw-s3); }
.mw-megamenu__list a{ font-family:var(--mw-body); font-size:var(--mw-fs-sm); color:var(--mw-ink-3);
  text-transform:none; letter-spacing:.02em; text-decoration:none; }
.mw-megamenu__frames,.mw-megamenu__word{ display:none; }

@media (min-width:900px){
  /* pasek i nakladka czytaja sie jako jedna plaszczyzna: zadnej kreski i ta sama pelna biel.
     Przezroczystosc dawala dwa rozne odcienie, bo pod kazdym byl inny kawalek zdjecia */
  /* rozwijanie wysokoscia jak w referencji, nie wjazd. Referencja ustawia height JS-em,
     my ograniczeniem: 0 zwija komplet razem z odstepami, czego siatka 0fr nie robi */
  .mw-megamenu{ position:absolute; inset-inline:0; inset-block-start:100%; z-index:30; margin:0;
    background:var(--mw-paper); box-shadow:var(--mw-shadow-2);
    max-block-size:0; overflow:hidden; visibility:hidden;
    transition:max-block-size .3s var(--mw-ease), visibility .3s; }
  .mw-header:has(.mw-menu__has-children:is(:hover,:focus-within)){ border-block-end-color:transparent; }
  .mw-menu__has-children:hover > .mw-megamenu,
  .mw-menu__has-children:focus-within > .mw-megamenu{ max-block-size:80vh; visibility:visible; }
  .mw-header--closed .mw-megamenu{ max-block-size:0; visibility:hidden; }

  /* kazda nakladka tej samej wysokosci: kadr 32vw jak w referencji + odstepy i podpis */
  .mw-megamenu__in{ position:relative; max-width:var(--mw-max); margin-inline:auto;
    min-block-size:calc(32vw + var(--mw-s6) + var(--mw-s8) + var(--mw-s5));
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--mw-s7);
    padding:var(--mw-s6) var(--mw-pad) var(--mw-s8); }
  .mw-megamenu__list{ display:block; columns:2; column-gap:var(--mw-s5); margin:0; }
  .mw-megamenu__list li{ break-inside:avoid; }
  .mw-megamenu__list a{ display:block; padding-block:var(--mw-s1); font-size:var(--mw-fs-sm);
    color:var(--mw-ink); }
  .mw-megamenu__list a:hover{ color:var(--mw-taupe); }

  .mw-megamenu__frames{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--mw-s4); }
  .mw-megamenu__frame{ display:block; text-decoration:none; }
  .mw-megamenu__image{ display:block; inline-size:100%; block-size:auto; aspect-ratio:3/4;
    object-fit:cover; background:var(--mw-surface-3); }
  .mw-megamenu__caption{ display:block; margin-block-start:var(--mw-s2);
    font-family:var(--mw-serif); font-size:var(--mw-fs-md); color:var(--mw-ink); }

  .mw-megamenu__word{ display:block; position:absolute; inset-inline-start:var(--mw-pad);
    inset-block-end:var(--mw-s4); font-family:var(--mw-serif); font-weight:300;
    font-size:var(--mw-fs-display); line-height:1; color:var(--mw-ink); pointer-events:none; }
}