/* DAI TO SE - moduł produktu na stronie głównej (section.pd#produkt), kierunek 1a „Plakat” z Claude Design (6.10.2026).
   Wartości z .wayfinder/cd-export-modul-produktu/Modul A Plakat.dc.html: okno 1440 (scena 750 px z trzema strefami) i 390 (jedna kolumna).
   Szerokości pośrednie są moje: układ „komputer” od 1240 px (prawa kolumna zwęża się, żeby nie wejść na słoik), niżej układ „telefon” w kolumnie do 600 px.
   Znaczniki i działanie: assets/produkt.js; --pd-smak i --pd-na (tekst na smaku: tusz albo krem) ustawia skrypt na sekcji. Ruch: tylko transform i opacity.
   Stany sceny: .is-on (kursor nad słoikiem, środek ekranu na telefonie, chwila po wyborze i po dodaniu do koszyka), data-faza="start" / "ruch" (zmiana produktu). */
.pd { position: relative; padding: 10px; scroll-margin-top: calc(var(--s-4) * -1); }
.pd button { margin: 0; border-radius: 0; font: inherit; cursor: pointer; touch-action: manipulation; }
.pd :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* zakładki: trzy linie produktów, w każdej trzy smaki w swoim kolorze; wybrana przechodzi w scenę */
.pd__zakladki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
.pd__gn { display: flex; align-items: center; gap: 12px; height: 24px; font-family: var(--f-mono); font-size: 13px; line-height: 1; }
.pd__gn i { flex: 1; height: 1px; background: var(--tusz); }
.pd__gz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
.pd__zak { position: relative; display: block; height: 92px; padding: 0; border: 0; background: var(--zk); color: var(--zn); transition: transform 120ms; }
.pd__zak:focus-visible { outline-color: var(--tusz); z-index: 1; }
.pd__zak:active { transform: translateY(2px); }
.pd__zak[data-rodzaj="wysoki"] { --zh: 50px; } .pd__zak[data-rodzaj="niski"] { --zh: 38px; } .pd__zak[data-rodzaj="torebka"] { --zh: 56px; }
.pd__zs { position: absolute; left: 50%; bottom: 36px; height: var(--zh); aspect-ratio: var(--ar); transform: translateX(-50%) rotate(3deg); transition: transform 400ms cubic-bezier(.34,1.56,.64,1); }
.pd__zs img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pd__zn { position: absolute; left: 6px; right: 6px; bottom: 11px; font-weight: 500; font-size: 15px; line-height: 1.2; text-align: center; white-space: nowrap; }
.pd__zak[aria-checked="true"]::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: var(--zk); }
@media (hover: hover) { .pd__zak[aria-checked="false"]:hover .pd__zs { transform: translateX(-50%) translateY(-8px) rotate(-5deg); } }

/* scena: pas w kolorze smaku. Siatka: lewa kolumna z nazwą i ceną, środek dla słoika, prawa z cennikiem */
.pd__pas { position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr) min(460px, calc(50% - 210px)); grid-template-rows: auto auto auto auto 1fr; align-content: start; height: 750px; margin-top: 10px; padding: 40px; overflow: hidden; background: var(--pd-smak); color: var(--pd-na); }
.pd__pas > * { position: relative; }
.pd__okladka { position: absolute; inset: 0; background: var(--pd-smak); transform: translateY(-100%); } /* nowy kolor: spływa z góry przy zmianie produktu, w spoczynku kolor ma sam pas */
.pd__rama { position: absolute; inset: 10px; border: 1px dashed currentColor; opacity: .35; pointer-events: none; }
.pd__linia { grid-column: 1; grid-row: 1; font-family: var(--f-mono); font-size: 14px; line-height: 1.3; }
.pd__h { grid-column: 1; grid-row: 2; margin-top: 10px; font-family: var(--f-druk); font-weight: 500; font-size: 30px; line-height: 1.06; text-transform: uppercase; text-wrap: balance; }
.pd__tag { grid-column: 1; grid-row: 3; margin-top: 10px; min-height: 25px; font-size: 18px; line-height: 1.4; }
.pd__cena { grid-column: 1; grid-row: 4; margin-top: 26px; }
.pd__cena .pn__cj { font-family: var(--f-mono); font-size: 44px; line-height: 1; }
.pd__omn .omnibus { margin-top: 8px; color: inherit; }
.pd__zobacz { position: absolute; left: 40px; top: 430px; display: inline-flex; align-items: center; gap: 10px; height: 44px; color: inherit; font-weight: 500; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; }
.pd__zobacz svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--czas) var(--krzywa); }
@media (hover: hover) { .pd__zobacz:hover svg { transform: translate(3px, -3px); } }
.pd__zobacz:active { opacity: .7; }
.pd__lokale { position: absolute; left: 40px; top: 488px; width: 300px; font-size: 14px; line-height: 1.45; }
.pd__lokale a { display: inline-block; padding: 12px 0; margin: -12px 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* pole dotyku 44 px bez zmiany wiersza */

/* słoik stoi na nazwie złożonej na całą szerokość; za nim klaks i odręczna ikona */
.pd__scena { position: absolute; inset: 0; pointer-events: none; }
.pd__slowo { position: absolute; left: 0; right: 0; bottom: 46px; font-family: var(--f-druk); font-weight: 500; font-size: 150px; line-height: .8; text-align: center; white-space: nowrap; }
.pd__pas[data-rodzaj="wysoki"] { --jh: 440px; } .pd__pas[data-rodzaj="niski"] { --jh: 320px; } .pd__pas[data-rodzaj="torebka"] { --jh: 470px; }
.pd__stary[data-rodzaj="wysoki"] { --jh: 440px; } .pd__stary[data-rodzaj="niski"] { --jh: 320px; } .pd__stary[data-rodzaj="torebka"] { --jh: 470px; }
.pd__sloik, .pd__stary { position: absolute; left: 50%; bottom: 110px; display: block; height: var(--jh); aspect-ratio: var(--ar); margin-left: calc(var(--jh) * var(--ar) / -2); }
.pd__sloik { z-index: 3; pointer-events: auto; }
.pd__stary { z-index: 2; opacity: 0; }
.pd__stary img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pd__klaks { position: absolute; z-index: 0; left: -14%; top: -24%; width: 128%; fill: var(--krem); transform-origin: 50% 70%; transform: scale(0) rotate(-12deg); transition: transform 300ms cubic-bezier(.55,0,1,.45); }
.pd__pas[data-rodzaj="niski"] .pd__klaks { left: -6%; top: -52%; width: 112%; }
.pd__pas[data-rodzaj="torebka"] .pd__klaks { left: -16%; top: -14%; width: 132%; }
.pd__tyl { position: absolute; z-index: 1; left: -27%; top: 2%; height: 40%; width: auto; transform: rotate(-9deg); transition: transform 600ms cubic-bezier(.34,1.56,.64,1); }
.pd__pas[data-rodzaj="torebka"] .pd__tyl { top: -4%; }
/* ikona za słoikiem lekko się unosi i kołysze przez cały czas, przy każdym produkcie (prośba użytkownika z 6.10.2026). Osobne właściwości translate i rotate,
   bo transform należy do „ożywienia” sceny i oba ruchy się składają; dwa różne okresy, żeby ruch nie powtarzał się co do klatki.
   Jedyna pętla na stronie poza #smaki: wyjątek w check-system.mjs (S4). Przy ograniczonym ruchu ikona stoi. */
@media (prefers-reduced-motion: no-preference) { .pd__tyl { animation: pd-unos 3.4s ease-in-out infinite alternate, pd-kolys 4.6s ease-in-out infinite alternate; } }
@keyframes pd-unos { from { translate: -2% 6%; } to { translate: 2% -6%; } }
@keyframes pd-kolys { from { rotate: -3deg; } to { rotate: 4deg; } }
.pd__cien { position: absolute; z-index: 1; left: -6%; right: -6%; bottom: -16px; height: 34px; background: radial-gradient(closest-side, rgba(19,19,19,.5), rgba(19,19,19,0)); }
.pd__img { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform: rotate(3deg); transition: transform 300ms cubic-bezier(.55,0,1,.45); }
/* scena ożywa */
.pd__pas.is-on .pd__klaks { transform: none; transition: transform 600ms cubic-bezier(.34,1.56,.64,1) 180ms; }
.pd__pas.is-on .pd__tyl { transform: translate(-18%, -14%) rotate(-20deg) scale(1.1); }
.pd__pas.is-on .pd__img { transform: translateY(-28px); transition: transform 600ms cubic-bezier(.34,1.56,.64,1); }
/* zmiana produktu. start: stan wyjściowy bez przejść; ruch: kolor spływa 480 ms, stary słoik opada 260 ms, nowy wskakuje 600 ms z odbiciem */
.pd__pas[data-faza="start"] .pd__img { transform: translateY(-70px) scale(.88); opacity: 0; transition: none; }
.pd__pas[data-faza="start"] .pd__klaks { transform: scale(0) rotate(-12deg); transition: none; }
.pd__pas[data-faza="start"] .pd__stary { opacity: 1; transform: rotate(3deg); }
.pd__pas[data-faza="start"] .pd__slowo { transform: translateY(40px); opacity: 0; }
.pd__pas[data-faza="start"] :is(.pd__linia, .pd__h, .pd__tag, .pd__cena) { opacity: 0; }
.pd__pas[data-faza="ruch"] .pd__okladka { transform: none; transition: transform 480ms cubic-bezier(.2,.7,.2,1); }
.pd__pas[data-faza="ruch"] .pd__img { transition: transform 600ms cubic-bezier(.34,1.56,.64,1) 100ms, opacity 200ms 100ms; }
.pd__pas[data-faza="ruch"] .pd__stary { opacity: 0; transform: translateY(160px) rotate(9deg); transition: transform 260ms cubic-bezier(.55,0,1,.45), opacity 260ms; }
.pd__pas[data-faza="ruch"] .pd__slowo { transition: transform 480ms cubic-bezier(.2,.7,.2,1) 120ms, opacity 240ms 120ms; }
.pd__pas[data-faza="ruch"] :is(.pd__linia, .pd__h, .pd__tag, .pd__cena) { transition: opacity 240ms 120ms; }

/* zakup: cennik ilości i sposób zakupu jako listy wierszy; wybrany wiersz ma tło w kolorze tekstu i napis w kolorze smaku */
.pd__zakup { grid-column: 3; grid-row: 1 / span 5; z-index: 4; display: flex; flex-direction: column; }
.pd__lista { border: 1px solid var(--pd-na); background: var(--krem); color: var(--tusz); } /* tabela czarno-biała jak poradnik subskrypcji, niezależnie od koloru smaku; obrys w kolorze tekstu na smaku, żeby czarny wiersz nie zlewał się z ciemnym tłem (trufla) */
.pd__lista + .pd__lista { margin-top: 12px; }
.pd__w { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 16px; border: 0; background: transparent; color: inherit; text-align: left; }
.pd__w + .pd__w { border-top: 1px solid currentColor; }
.pd__w[aria-checked="true"], .pd__plany button[aria-checked="true"] { background: var(--tusz); color: var(--krem); }
@media (hover: hover) { .pd__w:hover { box-shadow: inset 0 0 0 2px currentColor; } .pd__plany button:hover { box-shadow: inset 0 0 0 1px currentColor; } }
.pd__w:active, .pd__plany button:active { opacity: .8; }
.pd__kw { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border: 1.5px solid currentColor; }
.pd__kw i { width: 8px; height: 8px; background: currentColor; opacity: 0; }
.pd__w[aria-checked="true"] .pd__kw i { opacity: 1; }
.pd__we { flex: none; width: 50px; font-weight: 500; font-size: 16px; }
.pd__wk { flex: 1; font-size: 14px; line-height: 1.2; }
.pd__w[data-k="tryb"] .pd__we { flex: 1; width: auto; }
.pd__w[data-k="tryb"] .pd__wk { display: none; }
.pd__wc { display: flex; gap: 8px; flex: none; font-family: var(--f-mono); font-size: 16px; }
.pd__wc s, .pd__ctac s { text-decoration-thickness: 1px; }
.pd__sub { display: flex; flex-direction: column; margin-top: 10px; }
.pd__sub[hidden], .pd__por[hidden] { display: none; }
.pd__plany { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pd__plany button { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 56px; padding: 0 12px; border: 1px solid var(--pd-na); background: var(--krem); color: var(--tusz); text-align: left; }
.pd__plany b { font-weight: 500; font-size: 14px; line-height: 1.2; }
.pd__plany span { font-size: 13px; line-height: 1.2; }
.pd__pyt { align-self: flex-start; height: 40px; padding: 0; border: 0; background: none; color: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.pd__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; margin-top: 18px !important; padding: 0 22px; border: 2px solid var(--tusz); background: var(--krem); color: var(--tusz); font-weight: 500 !important; font-size: 18px !important; }
.pd__cta:focus-visible { outline-color: var(--pd-na); }
.pd__ctac { display: flex; gap: 10px; font-family: var(--f-mono); font-size: 18px; font-weight: 400; }
.pd__dostawa { margin-top: 12px; font-size: 14px; line-height: 1.45; }
/* poradnik subskrypcji: kremowa karta obok cennika, nad sceną */
.pd__por { position: absolute; z-index: 10; right: calc(100% + 20px); top: 0; width: 500px; max-width: calc(100vw - 40px); padding: 24px 28px 28px; border: 2px solid var(--tusz); background: var(--krem); color: var(--tusz); }
.pd__porg { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pd__porg p { font-family: var(--f-druk); font-weight: 500; font-size: 16px; line-height: 1.2; text-transform: uppercase; }
.pd__porg button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -12px -14px 0 0; padding: 0; border: 0; background: none; color: inherit; }
.pd__porg svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.pd__porb { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; font-size: 15px; line-height: 1.4; }
.pd__porb b { font-weight: 500; }

/* pasek zakupu (układ „telefon”): w kolorze smaku, przy dole okna, gdy główny przycisk jest poza ekranem */
.pd .pz-kotwica { display: none; margin: 0 -5px; }
.pd .pz { gap: 12px; padding: 0 12px 0 16px; background: var(--pd-smak); border-top: 1px solid var(--tusz); color: var(--pd-na); }
.pd .pz__n { font-size: 15px; }
.pd .pz__o { font-size: 13px; color: inherit; }
.pd__pzb { display: flex; align-items: center; gap: 10px; flex: none; height: 48px; padding: 0 14px; border: 2px solid var(--tusz); background: var(--krem); color: var(--tusz); font-weight: 500 !important; font-size: 15px !important; }
.pd__pzb span:last-child { font-family: var(--f-mono); font-size: 14px; font-weight: 400; }

/* układ „telefon” (projekt 390 px): zakładki 3 x 3, potem jedna kolumna: linia i link, nazwa, scena, dopisek i cena, zakup, lokale */
@media (max-width: 1239px) {
  .pd { padding: 5px; }
  .pd__zakladki { display: flex; flex-direction: column; gap: 6px; }
  .pd__gn { gap: 8px; height: 22px; font-size: 12px; }
  .pd__gz { column-gap: 5px; }
  .pd__zak { height: 60px; }
  .pd__zak[data-rodzaj="wysoki"] { --zh: 28px; } .pd__zak[data-rodzaj="niski"] { --zh: 22px; } .pd__zak[data-rodzaj="torebka"] { --zh: 31px; }
  .pd__zs { bottom: 25px; }
  .pd__zn { left: 4px; right: 4px; bottom: 6px; font-size: 13px; }
  .pd__zak[aria-checked="true"] { box-shadow: inset 0 0 0 3px var(--zn); }
  .pd__zak[aria-checked="true"]::after { content: none; }
  .pd__pas { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; height: auto; margin-top: 5px; padding: 14px max(20px, calc((100% - 600px) / 2)) 26px; }
  .pd__rama { inset: 8px; }
  .pd__linia { grid-column: 1; grid-row: 1; align-self: center; font-size: 13px; }
  .pd__zobacz { position: relative; left: auto; top: auto; grid-column: 2; grid-row: 1; gap: 8px; font-size: 15px; }
  .pd__zobacz svg { width: 14px; height: 14px; }
  .pd__h { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; font-size: 22px; }
  .pd__scena { position: relative; inset: auto; grid-column: 1 / -1; grid-row: 3; height: 290px; }
  .pd__slowo { left: -20px; right: -20px; bottom: 0; font-size: 72px; }
  .pd__pas[data-rodzaj="wysoki"], .pd__stary[data-rodzaj="wysoki"] { --jh: 236px; } .pd__pas[data-rodzaj="niski"], .pd__stary[data-rodzaj="niski"] { --jh: 168px; } .pd__pas[data-rodzaj="torebka"], .pd__stary[data-rodzaj="torebka"] { --jh: 254px; }
  .pd__sloik, .pd__stary { bottom: 24px; }
  .pd__tyl { left: -22%; }
  .pd__cien { bottom: -10px; height: 22px; }
  .pd__pas.is-on .pd__img { transform: translateY(-16px); }
  .pd__tag { grid-column: 1; grid-row: 4; align-self: end; margin-top: 16px; min-height: 22px; font-size: 16px; }
  .pd__cena { grid-column: 2; grid-row: 4; margin-top: 16px; text-align: right; }
  .pd__cena .pn__cj { font-size: 30px; }
  .pd__omn .omnibus { margin-top: 6px; white-space: nowrap; }
  .pd__zakup { grid-column: 1 / -1; grid-row: 5; margin-top: 20px; }
  .pd__lista + .pd__lista { margin-top: 10px; }
  .pd__w { gap: 10px; height: 52px; padding: 0 14px; }
  .pd__we { width: 44px; font-size: 15px; }
  .pd__wk { font-size: 13px; }
  .pd__wc { font-size: 15px; }
  .pd__w[data-k="ilosc"] .pd__wc { flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.2; }
  .pd__w[data-k="ilosc"] .pd__wc s { font-size: 13px; }
  .pd__w[data-k="tryb"] .pd__wc { gap: 6px; }
  .pd__w[data-k="tryb"] .pd__we { line-height: 1.2; }
  .pd__sub { margin-top: 8px; }
  .pd__plany { gap: 5px; }
  .pd__plany button { height: 60px; padding: 0 8px; }
  .pd__plany b { font-size: 13px; }
  .pd__plany span { font-size: 12px; }
  .pd__pyt { height: 44px; }
  .pd__por { position: relative; right: auto; width: auto; max-width: none; margin-top: 4px; padding: 18px 18px 20px; }
  .pd__cta { height: 56px; margin-top: 16px !important; padding: 0 18px; font-size: 17px !important; }
  .pd__ctac { gap: 8px; font-size: 16px; }
  .pd__dostawa { margin-top: 10px; }
  .pd__lokale { position: relative; left: auto; top: auto; width: auto; grid-column: 1 / -1; grid-row: 6; margin-top: 18px; }
  .pd .pz-kotwica { display: block; }
}
@media (prefers-reduced-motion: reduce) { .pd__zs, .pd__img, .pd__klaks, .pd__tyl { transition: none !important; } }