/* DAI TO SE - góra strony produktu, kierunek 1b „Kolor smaku” z Claude Design (6.10.2026).
   Wartości z .wayfinder/cd-export-pdp/Strona produktu - Etap 1.dc.html: okno 1440 (dwie kolumny, panel 520 px) i 390 (jedna kolumna).
   Szerokości pośrednie są moje: tytuł skaluje się z szerokością kolumny, poniżej 1000 px układ przechodzi w jedną kolumnę.
   Znaczniki i działanie: assets/pdp.js. --pp-smak i --pp-na (kolor tekstu na smaku) ustawia skrypt na <body>. Ruch: tylko transform i opacity. */

/* pasek strony stoi na kolorze smaku, dopóki pod nim jest góra produktu */
body.pp-gora .nav { color: var(--pp-na); }
body.pp-gora .nav::before { background: var(--pp-smak); opacity: 1; transition: none; }
body.pp-gora .nav::after { opacity: 0; }
body.pp-gora .nav :focus-visible { outline-color: var(--pp-na); }

.pp__hero { background: var(--pp-smak); color: var(--pp-na); overflow: clip; } /* clip, nie hidden: lewa kolumna jest przyklejana, a zdjęcie słoika wychodzi poza nią */
.pp__uklad { display: grid; grid-template-columns: minmax(0, 1fr) min(520px, 44vw); gap: 48px; max-width: calc(var(--tresc-max) + 2 * var(--margines)); margin: 0 auto; padding: 0 var(--margines) 72px; }

/* lewa kolumna: tytuł (druga linia konturem) pod słoikiem, miniatury galerii na dole; stoi w oknie, gdy panel jest wyższy */
.pp__lewa { position: sticky; top: var(--pasek-h); align-self: start; height: clamp(600px, calc(100svh - var(--pasek-h) - 24px), 860px); container-type: inline-size; }
.pp__h { position: relative; z-index: 1; padding-top: 20px; font-family: var(--f-druk); font-weight: 500; font-size: min(88px, 11.3cqw); line-height: .9; text-transform: uppercase; }
.pp__h span { display: block; }
.pp__kontur { color: transparent; -webkit-text-stroke: 1.5px var(--pp-na); }
.pp__kadr { position: absolute; inset: 0; pointer-events: none; } /* bez własnego z-index: warstwy zdjęcia układają się względem tytułu (tło pod nim, słoik nad nim) */
.pp__wyc { position: absolute; z-index: 2; left: 54%; bottom: 12%; height: var(--h); aspect-ratio: var(--ar); transform: translateX(-50%); }
.pp__wyc i { position: absolute; left: 4%; right: 4%; bottom: -3%; height: 7%; background: radial-gradient(closest-side, rgba(19,19,19,.38), rgba(19,19,19,0)); }
.pp__wyc img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
/* słoik sfotografowany na tle w kolorze smaku (brand_assets/scena, packshoty/kolor.py): kwadratowe zdjęcie z wygaszonymi brzegami leży pod tytułem,
   to samo zdjęcie przycięte maską słoika nad nim. Ramka wycinka ma w kadrze zdjęcia wysokość 56% i dół na 80% (J i B w kolor.py), stąd 100 / .56 i (1 - .8) / .56 */
.pp__wyc--scena { z-index: auto; width: 0; aspect-ratio: auto; transform: none; }
.pp__wyc .pp__scena { position: absolute; z-index: 0; left: 0; bottom: -35.71%; width: auto; max-width: none; height: 178.57%; aspect-ratio: 1; object-fit: fill; transform: translateX(-50%); }
.pp__wyc .pp__scena--sloik { z-index: 2; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.pp__foto { position: absolute; z-index: 2; left: 12%; top: 220px; width: 84%; height: calc(100% - 340px); object-fit: cover; border: 1px solid var(--tusz); background: var(--piasek); }
.pp__wyc[hidden], .pp__foto[hidden] { display: none; }
.pp__min { position: absolute; z-index: 3; left: 0; bottom: 28px; display: flex; align-items: center; gap: 12px; }
.pp__min button { position: relative; flex: none; width: 56px; height: 56px; padding: 0; border: 1px solid var(--pp-na); border-radius: 0; background: var(--piasek); overflow: hidden; cursor: pointer; }
.pp__min button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--pp-smak), 0 0 0 5px var(--pp-na); }
.pp__min button > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp__min button > span { position: absolute; inset: 0; background: var(--pp-smak); }
.pp__min button > span img { position: absolute; left: 50%; bottom: 10%; height: var(--hm); transform: translateX(-50%); }
.pp__min button:focus-visible, .pp__h:focus-visible { outline: 2px solid var(--pp-na); outline-offset: 6px; }
.pp__min button:active { transform: scale(.96); }
.pp__licz { margin-left: 8px; font-family: var(--f-mono); font-size: 14px; }

/* panel: kremowa karta, wiersze rozdzielone przerywaną linią */
.pp__prawa { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; padding-top: 16px; min-width: 0; } /* nad zdjęciem słoika, które zachodzi pod panel */
.pp__panel { padding: 0 28px; border: 1px solid var(--tusz); background: var(--krem); color: var(--tusz); }
.pp__w { padding: 16px 0; border-top: 1px dashed var(--tusz); }
.pp__w:first-child { padding: 22px 0 20px; border-top: 0; }
.pp__w:last-child { padding-bottom: 18px; }
.pp__cgora { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pp__cgora > div { display: flex; flex-direction: column; gap: 8px; }
.pp__cena { display: flex; align-items: baseline; gap: 12px; font-family: var(--f-mono); font-size: 40px; line-height: 1; }
.pp__cena s { font-size: 20px; color: var(--tusz-2); text-decoration-thickness: 1px; }
.pp__cena s:empty { display: none; }
.pp__gram { font-family: var(--f-mono); font-size: 14px; line-height: 1.3; color: var(--tusz-2); white-space: nowrap; }
.pp__krotki { margin-top: 14px; font-size: 18px; line-height: 1.4; text-wrap: pretty; }
.pp__et { margin-bottom: 12px; font-weight: 500; font-size: 16px; line-height: 1.25; }
.pp__et span:last-child { font-weight: 400; }

/* wspólny wygląd pól wyboru: niezaznaczone z cienkim obrysem, zaznaczone na kolorze smaku z obrysem 2 px */
.pp__panel button { margin: 0; border-radius: 0; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.pp__panel button:focus-visible, .pp__panel a:focus-visible, .pp__komplet a:focus-visible { outline: 2px solid var(--tusz); outline-offset: 3px; }
.pp__smaki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pn__sloik { display: flex; flex-direction: column; border: 1px solid var(--linia); color: var(--tusz); overflow: hidden; }
.pp__sk { position: relative; display: block; height: 100px; }
.pp__sk img { position: absolute; left: 50%; bottom: 9%; height: var(--hm); width: auto; transform: translateX(-50%); }
.pp__sn { display: block; padding: 8px 10px; font-weight: 500; font-size: 15px; line-height: 1.25; }
.pn__sloik[aria-current="page"] { border-color: var(--tusz); box-shadow: inset 0 0 0 1px var(--tusz); } /* 1 + 1 px: zaznaczenie nie przesuwa układu */
.pn__sloik[aria-current="page"] .pp__sn { background: var(--tusz); color: var(--krem); }
.pp__ilosc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; }
.pp__ilosc button { display: flex; flex-direction: column; padding: 0; border: 0; background: transparent; text-align: center; }
.pp__zak { display: grid; place-items: center; min-height: 44px; padding: 4px 6px; background: var(--tusz); color: var(--krem); font-weight: 500; font-size: 14px; line-height: 1.15; white-space: pre-line; }
.pp__zak.is-pusta { background: transparent; }
.pp__ic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 72px; border: 1px solid var(--linia); }
.pp__in { display: flex; align-items: baseline; gap: 5px; font-size: 14px; }
.pp__in b { font-family: var(--f-druk); font-weight: 500; font-size: 30px; line-height: 1; }
.pp__ip { font-family: var(--f-mono); font-size: 14px; line-height: 1; }
.pp__ilosc button[aria-checked="true"] .pp__ic { border-color: var(--tusz); box-shadow: inset 0 0 0 1px var(--tusz); background: var(--pp-smak); color: var(--pp-na); }
.pp__tryb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp__tryb button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 72px; padding: 10px 16px; border: 1px solid var(--linia); background: transparent; font-weight: 500; font-size: 16px; line-height: 1.25; text-align: left; }
.pp__tc { display: flex; gap: 8px; font-family: var(--f-mono); font-size: 14px; font-weight: 400; }
.pp__tc s, .pp__ctac s { text-decoration-thickness: 1px; }
.pp__plany { margin-top: 12px; }
.pp__pet { margin-bottom: 8px; font-size: 14px; color: var(--tusz-2); }
.pp__plany > div:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp__plany button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 12px; border: 1px solid var(--linia); background: transparent; text-align: left; }
.pp__plany b { font-weight: 500; font-size: 14px; line-height: 1.15; }
.pp__plany button span { font-family: var(--f-mono); font-size: 14px; line-height: 1; }
.pp__tryb button[aria-checked="true"], .pp__plany button[aria-checked="true"] { border-color: var(--tusz); box-shadow: inset 0 0 0 1px var(--tusz); background: var(--pp-smak); color: var(--pp-na); }
@media (hover: hover) { .pn__sloik:hover, .pp__ilosc button:hover .pp__ic, .pp__tryb button:hover, .pp__plany button:hover { border-color: var(--tusz); } }
.pp__ilosc button:active .pp__ic, .pp__tryb button:active, .pp__plany button:active, .pn__sloik:active { transform: scale(.98); }
.pp__cta { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; padding: 0 24px; border: 0; background: var(--czerwien); color: var(--krem) !important; font-weight: 500 !important; font-size: 18px !important; }
.pp__ctac { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-mono); font-size: 16px; font-weight: 400; }
@media (hover: hover) { .pp__cta:hover { background: var(--czerwien-najechanie); } }
.pp__cta:active { background: var(--czerwien-wcisniety); transform: scale(.98); }
.pp__uwaga { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--tusz-2); text-align: center; }

/* „Do kompletu”: kremowa karta pod panelem, jeszcze na kolorze smaku */
.pp__komplet { display: flex; align-items: center; gap: 16px; margin-top: -4px; padding: 12px; border: 1px solid var(--tusz); background: var(--krem); color: var(--tusz); }
.pp__kfoto { position: relative; flex: none; width: 72px; height: 72px; overflow: hidden; }
.pp__kfoto img { position: absolute; left: 50%; bottom: 9%; height: var(--hm); width: auto; transform: translateX(-50%); }
.pp__kopis { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pp__ket { font-family: var(--f-mono); font-size: 14px; line-height: 1.3; color: var(--tusz-2); }
.pp__knazwa { font-weight: 500; font-size: 16px; line-height: 1.25; color: inherit; }
.pp__kcena { font-family: var(--f-mono); font-size: 14px; line-height: 1.3; }
@media (hover: hover) { .pp__knazwa:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* zły adres */
.pp__brak ul { margin-top: var(--s-5); list-style: none; }

/* pasek zakupu: tylko tam, gdzie panel nie mieści się obok słoika (jedna kolumna) */
.pp__pzk { display: none; }
.pp__pzk .pz { border-top-color: var(--tusz); }

/* pasek zakupu u góry okna (komputer): 64 px, zasłania pasek strony, gdy główny przycisk zniknie nad oknem */
.pp__pg { position: fixed; z-index: 110; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 var(--margines); border-bottom: 1px solid var(--tusz); background: var(--krem); color: var(--tusz); transition: transform var(--czas) var(--krzywa), opacity var(--czas) var(--krzywa); }
.pp__pg[aria-hidden="true"] { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.pp__pgf { position: relative; flex: none; width: 44px; height: 44px; overflow: hidden; background: var(--pp-smak); }
.pp__pgf img { position: absolute; left: 50%; bottom: 8%; height: var(--hm); width: auto; transform: translateX(-50%); }
.pp__pgt { display: flex; flex-direction: column; gap: 4px; margin-right: auto; min-width: 0; }
.pp__pgt b { font-family: var(--f-druk); font-weight: 500; font-size: 16px; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp__pgt span { font-family: var(--f-mono); font-size: 14px; line-height: 1; color: var(--tusz-2); }
.pp__pgc { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-mono); font-size: 16px; white-space: nowrap; }
.pp__pgc s { color: var(--tusz-2); text-decoration-thickness: 1px; }
.pp__pg button { flex: none; height: 44px; margin: 0; padding: 0 22px; border: 0; border-radius: 0; background: var(--czerwien); color: var(--krem); font: 500 16px var(--f-tekst); cursor: pointer; }
.pp__pg button:focus-visible { outline: 2px solid var(--tusz); outline-offset: 3px; }
@media (hover: hover) { .pp__pg button:hover { background: var(--czerwien-najechanie); } }
.pp__pg button:active { background: var(--czerwien-wcisniety); transform: scale(.98); }
@media (max-width: 999px) { .pp__pg { display: none; } }
@media (prefers-reduced-motion: reduce) { .pp__pg { transition: none; } }

/* jedna kolumna: układ „390” z projektu, wymiary rosną z szerokością okna */
@media (max-width: 999px) {
  .pp__uklad { display: block; padding: 0 0 24px; }
  .pp__lewa { position: relative; top: auto; height: auto; container-type: normal; }
  .pp__h { margin: 0 var(--margines); padding-top: 16px; font-size: min(88px, 9.75vw); line-height: .92; } /* 38 px przy 390; bez dolnego progu, bo przy 320 px „KLASYCZNY” wychodził poza ekran */
  .pp__kontur { -webkit-text-stroke-width: 1.2px; }
  .pp__kadr { position: relative; inset: auto; height: clamp(300px, 62vw, 520px); margin-top: -20px; }
  .pp__wyc { left: 50%; bottom: 8%; height: var(--htel); }
  .pp__foto { left: var(--margines); top: 24px; width: calc(100% - 2 * var(--margines)); height: calc(100% - 36px); }
  .pp__min { position: relative; left: auto; bottom: auto; gap: 10px; padding: 4px var(--margines) 20px; }
  .pp__min button { width: 44px; height: 44px; }
  .pp__licz { margin-left: auto; }
  .pp__prawa { gap: 12px; padding: 0 12px; }
  .pp__panel { padding: 0 16px; }
  .pp__w:first-child { padding: 18px 0 16px; }
  .pp__cgora { gap: 12px; }
  .pp__cgora > div { gap: 6px; }
  .pp__cena { gap: 10px; font-size: 32px; }
  .pp__cena s { font-size: 18px; }
  .pp__krotki { margin-top: 12px; font-size: 16px; line-height: 1.45; }
  .pp__sk { height: 76px; }
  .pp__sn { padding: 7px 8px; font-size: 14px; line-height: 1.2; }
  .pp__ilosc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp__zak { min-height: 40px; }
  .pp__ic { flex-direction: row; justify-content: space-between; gap: 8px; height: 56px; padding: 0 14px; }
  .pp__in b { font-size: 26px; }
  .pp__tryb button { padding: 10px 12px; font-size: 15px; line-height: 1.2; }
  .pp__plany > div:last-child { grid-template-columns: 1fr; }
  .pp__plany button { flex-direction: row; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; }
  .pp__cta { padding: 0 20px; font-size: 17px !important; }
  .pp__ctac { gap: 8px; font-size: 15px; }
  .pp__pzk { display: block; margin: 0; }
}
@media print { .pp__lewa { position: static; } }