/* ============================================================
   MW Motyw — karta produktu (prototyp Etap 3)
   Design tokens wg zatwierdzonej palety: Czerń / Ecru / Taupe.
   Wszystko scope'owane pod .mw-pdp (izolacja od Divi).
   WCAG 2.1 AA: kontrasty >=4.5, focus widoczny, zoom niezablokowany.
   ============================================================ */

/* TOKENY (paleta, typografia, rytm) przeniesione 19.07 do `assets/tokeny.css`,
   wspólnego dla WSZYSTKICH widoków sklepu. Tam się je zmienia — nie tutaj.
   Ten plik zawiera już tylko wygląd karty produktu. */

/* ---- reset lokalny ---- */
.mw-pdp *,.mw-pdp *::before,.mw-pdp *::after{ box-sizing:border-box; }
.mw-pdp{ margin:0; font-family:var(--mw-body); font-size:var(--mw-fs-base); line-height:var(--mw-lh-base);
  color:var(--mw-ink); background:var(--mw-paper); -webkit-font-smoothing:antialiased; }
.mw-pdp img{ max-width:100%; display:block; }
.mw-pdp button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
.mw-pdp a{ color:inherit; }
.mw-pdp h1,.mw-pdp h2,.mw-pdp p,.mw-pdp ul{ margin:0; }

/* ---- focus widoczny (a11y) ---- */
.mw-pdp a:focus-visible,.mw-pdp button:focus-visible,.mw-pdp summary:focus-visible,
.mw-pdp [tabindex]:focus-visible,.mw-pdp details:focus-visible{
  outline:2px solid var(--mw-ink); outline-offset:2px; border-radius:2px;
}

/* ---- 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; }

/* ---- pasek ogłoszeń ---- */
.mw-pasek-ogloszen{ background:var(--mw-black); color:var(--mw-ecru); text-align:center;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; padding:.55rem 1rem; }
/* wariant klikalny (link z panelu): scope pod .mw-pdp (0,2,0), żeby wygrać z resetem
   `.mw-pdp a{color:inherit}` (0,1,1) — inaczej tekst na czarnym pasku zrobiłby się ciemny */
.mw-pdp .mw-pasek-ogloszen--link{ display:block; color:var(--mw-ecru); text-decoration:none; }
.mw-pdp .mw-pasek-ogloszen--link:hover{ opacity:.9; }

/* ---- nagłówek ---- */
.mw-header{ background:var(--mw-paper); border-bottom:1px solid var(--mw-line); }
.mw-header__in{ max-width:var(--mw-max); margin-inline:auto; display:flex; align-items:center;
  justify-content:space-between; gap:1.5rem; padding:1rem clamp(1rem,4vw,3rem); }
.mw-header__logo{ font-family:var(--mw-serif); font-size:1.5rem; letter-spacing:.02em;
  text-decoration:none; line-height:1; }
.mw-logo-tekst{ font-family:var(--mw-serif); }
.mw-header__nav{ margin-inline-start:auto; }
.mw-menu{ display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; }
.mw-menu a,.mw-menu__link{ text-decoration:none; font-size:.85rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mw-ink-2); }
.mw-menu a:hover{ color:var(--mw-ink); }
.mw-header__koszyk{ position:relative; display:inline-flex; text-decoration:none; }
.mw-koszyk-licznik{ position:absolute; top:-8px; right:-10px; min-width:18px; height:18px;
  background:var(--mw-black); color:var(--mw-on-dark); border-radius:9px; font-size:.66rem;
  display:grid; place-items:center; padding:0 4px; }

/* ---- layout główny ---- */
.mw-pdp__main{ max-width:var(--mw-max); margin-inline:auto;
  padding:clamp(1rem,3vw,2rem) clamp(1rem,4vw,3rem) 5rem; }
.mw-okruszki{ font-size:.75rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--mw-ink-3); margin-bottom:1.25rem; }
.mw-okruszki a{ text-decoration:none; }
.mw-okruszki a:hover{ text-decoration:underline; }
/* ⚠️ minmax(0,…), NIE gołe 1fr: 1fr = minmax(auto,1fr), a „auto" nie pozwala
   kolumnie zejść poniżej naturalnej szerokości zdjęcia (550px) → na wąskich
   ekranach (<560px) strona wystawała w prawo poza viewport (zgłoszone 23.07). */
.mw-pdp__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); }
@media (min-width:1024px){
  .mw-pdp__grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:start; }
}

/* ---- galeria ---- */
.mw-galeria{ display:flex; flex-direction:column; gap:.75rem; transition:opacity .2s var(--mw-ease); }
.mw-galeria.is-wymiana{ opacity:0; }
.mw-galeria__scena{ position:relative; background:var(--mw-surface); border:1px solid var(--mw-line); }
.mw-galeria__tor{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; aspect-ratio:3/4;
  scrollbar-width:none; }
.mw-galeria__tor::-webkit-scrollbar{ display:none; }
.mw-galeria__slajd{ flex:0 0 100%; scroll-snap-align:start; margin:0; }
.mw-galeria__img{ width:100%; height:100%; object-fit:cover; }
.mw-galeria__strzalka{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px;
  display:none; align-items:center; justify-content:center; background:var(--mw-glass);
  border:1px solid var(--mw-line); border-radius:50%; color:var(--mw-ink); }
.mw-galeria__strzalka--prev{ left:.75rem; } .mw-galeria__strzalka--next{ right:.75rem; }
.mw-galeria__strzalka:disabled{ opacity:.3; cursor:default; }
@media (min-width:700px){ .mw-galeria__scena:hover .mw-galeria__strzalka{ display:inline-flex; } }
.mw-galeria__licznik{ position:absolute; right:.6rem; bottom:.6rem; background:var(--mw-glass);
  font-size:.7rem; letter-spacing:.05em; padding:.25rem .55rem; color:var(--mw-ink-2); }
.mw-galeria__miniatury{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; }
.mw-galeria__miniatury button{ flex:0 0 62px; aspect-ratio:3/4; border:1px solid var(--mw-line);
  overflow:hidden; background:var(--mw-surface); }
.mw-galeria__miniatury button.is-akt{ border-color:var(--mw-ink); }
.mw-galeria__miniatury img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:1024px){
  .mw-galeria{ flex-direction:row-reverse; gap:1rem; }
  .mw-galeria__scena{ flex:1 1 auto; min-width:0; }
  .mw-galeria__miniatury{ flex-direction:column; flex:0 0 70px; overflow-y:auto; overflow-x:visible; max-height:640px; }
  .mw-galeria__miniatury button{ flex:0 0 auto; width:100%; }
}

/* ---- panel ---- */
.mw-panel{ display:flex; flex-direction:column; gap:1.25rem; }
@media (min-width:1024px){ .mw-panel{ position:sticky; top:1.5rem; } }
.mw-panel__eyebrow{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mw-ink-3); }
.mw-panel__tytul{ font-family:var(--mw-serif); font-weight:500;
  font-size:clamp(2rem,1.4rem + 2.4vw,3rem); line-height:1.05; letter-spacing:.005em; }

/* oceny/gwiazdki */
.mw-oceny{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; width:max-content; }
.mw-gwiazdki{ --mw-ocena:0%; display:inline-block; width:88px; height:16px;
  background:
    linear-gradient(90deg, var(--mw-taupe) var(--mw-ocena), var(--mw-line-2) var(--mw-ocena));
  -webkit-mask:repeat-x left center/17.6px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.9 7.5.6-5.7 4.9 1.8 7.3L12 17.8 5.1 21.7l1.8-7.3L1.2 9.5l7.5-.6z'/%3E%3C/svg%3E");
          mask:repeat-x left center/17.6px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.9 7.5.6-5.7 4.9 1.8 7.3L12 17.8 5.1 21.7l1.8-7.3L1.2 9.5l7.5-.6z'/%3E%3C/svg%3E"); }
.mw-oceny__txt{ font-size:.8rem; color:var(--mw-ink-2); }

/* cena */
.mw-cena{ font-size:1.4rem; font-weight:600; }
.mw-cena del{ color:var(--mw-ink-3); font-weight:400; font-size:1rem; margin-inline-end:.5rem; }
.mw-cena ins{ text-decoration:none; }
.mw-cena .wc-omnibus-message,.mw-cena small{ display:block; font-size:.72rem; font-weight:400;
  color:var(--mw-ink-3); margin-top:.25rem; }

/* sekcje */
.mw-sekcja{ border-top:1px solid var(--mw-line); padding-top:1.1rem; }
.mw-sekcja__naglowek{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.mw-sekcja__etykieta{ font-size:.85rem; margin-bottom:.6rem; }
.mw-mocno{ font-weight:600; }
.mw-link-tabela{ font-size:.78rem; text-decoration:underline; color:var(--mw-ink-2); }

/* swatche koloru — cel dotyku 44px, kropka wewnątrz */
.mw-swatche{ display:flex; flex-wrap:wrap; gap:.3rem; }
.mw-swatch{ width:44px; height:44px; border-radius:50%; position:relative;
  display:inline-flex; align-items:center; justify-content:center; }
.mw-swatch::before{ content:""; width:28px; height:28px; border-radius:50%;
  background:var(--sw); border:1px solid var(--mw-line-2); transition:transform .15s var(--mw-ease); }
.mw-swatch:hover::before{ transform:scale(1.12); }
.mw-swatch.is-akt::before{ outline:1.5px solid var(--mw-taupe); outline-offset:3px; }

/* rozmiary — kafelki */
.mw-rozmiary{ display:flex; flex-wrap:wrap; gap:.5rem; }
.mw-rozmiar{ min-width:46px; height:46px; padding:0 .55rem; border:1px solid var(--mw-line-2);
  background:var(--mw-surface); font-size:.9rem; }
.mw-rozmiar:hover:not([disabled]){ border-color:var(--mw-ink); }
.mw-rozmiar[aria-pressed="true"]{ background:var(--mw-black); color:var(--mw-ecru); border-color:var(--mw-black); }
.mw-rozmiar[data-stan="backorder"]{ border-style:dashed; }
.mw-rozmiar[disabled]{ color:var(--mw-muted); border-color:var(--mw-line);
  text-decoration:line-through; cursor:not-allowed; }

/* dostępność */
.mw-dostepnosc{ font-size:.85rem; margin-top:.65rem; min-height:1.2em; }
.mw-dostepnosc[data-stan="ok"]{ color:var(--mw-ok); }
.mw-dostepnosc[data-stan="backorder"]{ color:var(--mw-warn); font-weight:500; }
.mw-dostepnosc[data-stan="niedostepny"]{ color:var(--mw-ink-3); }   /* tekst, nie kontrolka — 4,5:1 */

/* CTA
   Scope pod .mw-pdp CELOWO: reset `.mw-pdp button{background:none}` ma specyficzność
   (0,1,1) i bez tego zjadał tło aktywnego przycisku (był bezbarwny). `.mw-pdp .mw-cta`
   = (0,2,0) > (0,1,1), więc czerń wygrywa. Stan :disabled dokłada jeszcze klasę → wygrywa nad aktywnym. */
.mw-pdp .mw-cta{ width:100%; padding:1rem; background:var(--mw-black); color:var(--mw-ecru);
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; text-align:center;
  transition:opacity .2s var(--mw-ease); }
.mw-pdp .mw-cta:hover:not(:disabled){ opacity:.88; }
.mw-pdp .mw-cta:disabled{ background:var(--mw-surface-2); color:var(--mw-muted);
  border-color:var(--mw-line); cursor:not-allowed; }
.mw-komunikat{ font-size:.82rem; margin-top:.5rem; color:var(--mw-ok); min-height:1.1em; }

/* dostawa */
.mw-dostawa{ font-size:.85rem; color:var(--mw-ink-2); }
.mw-dostawa strong{ color:var(--mw-ink); }

/* pasek zaufania */
.mw-zaufanie{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.4rem .9rem;
  font-size:.78rem; color:var(--mw-ink-2); border-top:1px solid var(--mw-line); padding-top:1rem; }
.mw-zaufanie a{ color:var(--mw-ink-2); }

/* grupa modelu */
.mw-grupa{ border-top:1px solid var(--mw-line); padding-top:1.1rem; }
.mw-grupa__lista{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.5rem; }
.mw-grupa__el{ display:flex; flex-direction:column; align-items:center; gap:.3rem; width:84px;
  text-align:center; font-size:.72rem; line-height:1.2; text-decoration:none;
  border:1px solid var(--mw-line-2); padding:.4rem; color:var(--mw-ink-2); }
.mw-grupa__el img{ width:56px; height:56px; object-fit:cover; }
.mw-grupa__el:hover{ border-color:var(--mw-ink); }
.mw-grupa__el.is-akt{ border:1.5px solid var(--mw-black); color:var(--mw-ink); }

/* akordeon */
.mw-akordeon{ border-top:1px solid var(--mw-line); }
.mw-akordeon__el{ border-bottom:1px solid var(--mw-line); padding:.9rem 0; }
.mw-akordeon__el summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  align-items:center; font-size:.9rem; }
.mw-akordeon__el summary::-webkit-details-marker{ display:none; }
.mw-akordeon__el summary::after{ content:"+"; font-size:1.2rem; color:var(--mw-ink-3); }
.mw-akordeon__el[open] summary::after{ content:"\2212"; }
.mw-akordeon__tresc{ margin-top:.7rem; font-size:.88rem; line-height:1.6; color:var(--mw-ink-2); }
.mw-sklad{ list-style:none; margin:0; padding:0; }
.mw-sklad li{ padding:.18rem 0; }
/* opis produktu: przywróć widoczne punktory (Cechy) i odstępy nagłówków */
.mw-opis ul{ list-style:disc; padding-left:1.25rem; margin:.5rem 0; }
.mw-opis li{ padding:.12rem 0; }
.mw-opis h3{ font-family:var(--mw-serif); font-weight:500; font-size:1.05rem;
  margin:1rem 0 .3rem; color:var(--mw-ink); }
.mw-opis a{ color:var(--mw-ink); text-decoration:underline; }
/* uwaga o rozmiarówce */
.mw-dopasowanie{ font-weight:600; color:var(--mw-warn); margin-bottom:.5rem; }

/* opinie */
.mw-opinie{ max-width:760px; margin:3rem auto 0; border-top:1px solid var(--mw-line); padding-top:2rem; }
.mw-h2{ font-family:var(--mw-serif); font-weight:500; font-size:1.5rem; margin-bottom:1rem; }

/* sticky CTA mobile — DWA TRYBY:
   (A) brak rozmiaru → prośba + rozmiary do wyboru wprost w pasku
   (B) rozmiar wybrany → cena + kolorowy przycisk „Dodaj do koszyka" */
.mw-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center;
  gap:1rem; padding:.4rem clamp(1rem,4vw,2rem); background:var(--mw-surface);
  border-top:1px solid var(--mw-line); box-shadow:var(--mw-shadow-1); }
.mw-sticky[hidden]{ display:none; }
/* Tryb A */
.mw-sticky__wybor{ display:flex; align-items:center; gap:.6rem; flex:1; min-width:0; }
.mw-sticky__wybor[hidden]{ display:none; }
/* prośba w 2 liniach — węższa, zostawia miejsce chipom; rozmiar tekstu bliżej chipów */
.mw-sticky__prosba{ font-size:.72rem; line-height:1.15; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mw-ink-2); white-space:normal; max-width:6em; flex:0 0 auto; }
.mw-sticky__rozmiary{ display:flex; gap:.35rem; overflow-x:auto; scrollbar-width:none;
  margin-inline-start:auto; }
.mw-sticky__rozmiary::-webkit-scrollbar{ display:none; }
.mw-rozmiar--sticky{ min-width:34px; height:30px; flex:0 0 auto; }
/* kontrolowany rozmiar tekstu chipa: (0,2,0) bije reset `.mw-pdp button{font:inherit}` (0,1,1),
   przez który chipy renderowały się w 16px i psuły proporcje względem etykiety */
.mw-pdp .mw-rozmiar--sticky{ font-size:.8rem; padding:0 .4rem; }
/* Tryb B — od lewej: „Wybrano rozmiar: X” · cena · przycisk */
.mw-sticky__kup{ display:flex; align-items:center; gap:.6rem; flex:1; min-width:0; }
.mw-sticky__kup[hidden]{ display:none; }
/* etykieta: 2 linie i wielkość jak „Wybierz rozmiar” w trybie A */
.mw-sticky__wybrano{ display:flex; align-items:center; gap:.35rem; flex:0 0 auto; }
.mw-sticky__wybrano-etykieta{ font-size:.72rem; line-height:1.15; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mw-ink-2); white-space:normal; max-width:6em; }
/* wartość rozmiaru: typografia jak chipy rozmiarów w trybie A */
.mw-sticky__wybrano-wartosc{ font-size:.8rem; font-weight:600; color:var(--mw-ink); }
.mw-sticky__cena{ font-weight:600; font-size:1rem; white-space:nowrap; flex:0 0 auto; }
.mw-sticky__cena del{ display:none; }
/* przycisk wypełnia to, co zostanie — nie rozpycha paska */
.mw-pdp .mw-cta--sm{ padding:.5rem .8rem; width:auto; flex:1 1 auto; min-width:0;
  letter-spacing:.04em; white-space:nowrap; }
@media (min-width:1024px){ .mw-sticky{ display:none !important; } }

/* modal */
.mw-modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:1rem; }
.mw-modal[hidden]{ display:none; }
.mw-modal__tlo{ position:absolute; inset:0; background:var(--mw-overlay); }
.mw-modal__panel{ position:relative; background:var(--mw-surface); max-width:560px; width:100%;
  padding:1.5rem; border-radius:2px; }
.mw-modal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.mw-modal__x{ font-size:1.6rem; line-height:1; color:var(--mw-ink-2); }
.mw-modal__body p{ margin-bottom:.6rem; }
.mw-uwaga{ font-size:.82rem; color:var(--mw-ink-3); }

/* toast „dodano do koszyka" */
.mw-toast{ position:fixed; right:1rem; bottom:1rem; z-index:70; display:flex; align-items:center;
  gap:.6rem; background:var(--mw-black); color:var(--mw-ecru); padding:.85rem 1.1rem;
  border-radius:var(--mw-radius); box-shadow:var(--mw-shadow-3); font-size:var(--mw-fs-sm);
  max-width:min(92vw,380px); transform:translateY(8px); opacity:0;
  transition:opacity .2s var(--mw-ease), transform .2s var(--mw-ease); }
.mw-toast.is-widoczny{ opacity:1; transform:translateY(0); }
.mw-toast[hidden]{ display:none; }
.mw-toast__link{ margin-inline-start:auto; color:var(--mw-ecru); text-decoration:underline; white-space:nowrap; }
.mw-toast--blad{ background:var(--mw-warn); }
@media (max-width:1023px){ .mw-toast{ bottom:5rem; } } /* nad sticky CTA */

/* stopka */
.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:2rem clamp(1rem,4vw,3rem); }
.mw-footer__male{ font-size:.75rem; color:var(--mw-on-dark-3); margin-top:.4rem; }

/* redukcja ruchu */
@media (prefers-reduced-motion:reduce){
  .mw-pdp *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ===================== POWIADOM O DOSTĘPNOŚCI ===================== */
/* Rozmiar niedostępny — KLIKALNY (pokaże formularz), wizualnie wyciszony z przekreśleniem. */
.mw-rozmiar--niedostepny{ color:var(--mw-muted); border-color:var(--mw-line); }
.mw-rozmiar--niedostepny:hover{ border-color:var(--mw-ink-3); }
.mw-rozmiar--niedostepny::after{ content:""; position:absolute; left:22%; right:22%; top:50%;
  height:1px; background:currentColor; opacity:.5; transform:rotate(-14deg); pointer-events:none; }
.mw-rozmiar{ position:relative; }
.mw-rozmiar--niedostepny[aria-pressed="true"]{ background:var(--mw-black); color:var(--mw-ecru); border-color:var(--mw-black); }

/* Komunikat po potwierdzeniu z maila (?powiadom=ok) */
.mw-powiadom-potw{ margin:.7rem 0 0; padding:.7rem .9rem; border-radius:3px;
  background:var(--mw-surface); border:1px solid var(--mw-line-2); font-size:.9rem; color:var(--mw-ink); }

/* Panel „Powiadom o dostępności" (zamiast koszyka) */
.mw-powiadom{ margin-top:.25rem; border:1px solid var(--mw-line-2); border-radius:4px; padding:1rem 1.1rem; }
.mw-powiadom__tyt{ font-weight:500; font-size:.95rem; margin:0 0 .3rem; }
.mw-powiadom__info{ font-size:.85rem; color:var(--mw-ink-2); margin:0 0 .8rem; line-height:1.5; }
.mw-powiadom__email{ width:100%; height:44px; padding:0 .8rem; border:1px solid var(--mw-line-2);
  border-radius:var(--mw-radius); font:inherit; margin-bottom:.6rem; background:var(--mw-paper); color:var(--mw-ink); }
.mw-powiadom__email:focus{ outline:none; border-color:var(--mw-ink); }
.mw-powiadom__zgoda{ display:flex; gap:.5rem; align-items:flex-start; font-size:.78rem;
  color:var(--mw-ink-2); line-height:1.45; margin-bottom:.8rem; cursor:pointer; }
.mw-powiadom__zgoda input{ margin-top:.15rem; flex:0 0 auto; }
.mw-powiadom__zgoda a{ text-decoration:underline; }
.mw-powiadom__hint{ font-size:.72rem; color:var(--mw-ink-3); margin:.6rem 0 0; text-align:center; }
.mw-powiadom__msg{ font-size:.82rem; margin:.7rem 0 0; padding:.5rem .7rem; border-radius:3px;
  background:var(--mw-surface); color:var(--mw-ok); }
.mw-powiadom__msg--blad{ color:var(--mw-warn); }
/* Honeypot — poza ekranem (NIE display:none, bo boty pomijają ukryte przez none). */
.mw-powiadom__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.mw-powiadom__rodo{ font-size:.68rem; color:var(--mw-ink-3); margin:.7rem 0 0; line-height:1.4; }
.mw-powiadom__rodo a{ text-decoration:underline; }