/* Efekt działa tylko na zdjęciach z PRZEZROCZYSTYM tłem: zz-lift.js wykrywa kanał alfa (canvas) i dopiero wtedy nadaje kafelkowi klasę .lift-ok.
   Efekt najechania na pierwsze zdjęcie produktu: uniesienie ku patrzącemu z losowym przesunięciem i obrotem,
   pod spodem delikatny, rozmyty cień w kształcie produktu, który porusza się razem z nim.
   Parametry: --sh-op (krycie), --sh-blur, --sh-x, --sh-y; losowe --dx --dy --rot ustawia zz-lift.js. */
:root { --sh-op: .1; --sh-blur: 5px; --sh-x: 7%; --sh-y: 7%; }
/* kafelki produktów, opinii i karta produktu: zdjęcie zajmuje całe pole (bez marginesu jak w seriach), więc cień przesunięty mniej */
.ptile, .rv-card, .pdp-stage { --sh-op: .12; --sh-blur: 4px; --sh-x: 2%; --sh-y: 2.5%; }
.ptile .tp-media, .vs-media, .rv-img { isolation: isolate; }
.ptile .tp-media img, .vs-media img, .rv-img img { position: relative; z-index: 1; transform-origin: 50% 80%; will-change: transform; transition: transform .6s cubic-bezier(.22, .7, .2, 1); }
.tp-badges { z-index: 3; }
.ptile .tp-media::before, .vs-media::before, .rv-img::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--img) center / contain no-repeat; filter: brightness(0) blur(12px); opacity: 0; transform-origin: 50% 80%; transform: translate(0, 1%); transition: opacity .6s cubic-bezier(.22, .7, .2, 1), transform .6s cubic-bezier(.22, .7, .2, 1), filter .6s cubic-bezier(.22, .7, .2, 1); pointer-events: none; }
.vs-media { position: relative; }
.vs-media::before { inset: 11%; }
.rv-img { position: relative; }
.rv-img::before { inset: 10px; }
.ptile.lift-ok:hover .tp-media img, .vs-card.lift-ok:hover .vs-media img, .rv-card.lift-ok:hover .rv-img img,
.ptile.lift-ok.is-lift .tp-media img, .vs-card.lift-ok.is-lift .vs-media img, .rv-card.lift-ok.is-lift .rv-img img { transform: translate(var(--dx, 0%), calc(-3% + var(--dy, 0%))) rotate(var(--rot, -4deg)) scale(1.1); }
.ptile.lift-ok:hover .tp-media::before, .vs-card.lift-ok:hover .vs-media::before, .rv-card.lift-ok:hover .rv-img::before,
.ptile.lift-ok.is-lift .tp-media::before, .vs-card.lift-ok.is-lift .vs-media::before, .rv-card.lift-ok.is-lift .rv-img::before { opacity: var(--sh-op); filter: brightness(0) blur(var(--sh-blur)); transform: translate(calc(var(--dx, 0%) + var(--sh-x)), calc(var(--dy, 0%) + var(--sh-y))) rotate(var(--rot, -4deg)) scale(1.1); }
/* karta produktu: tylko pierwsze zdjęcie galerii (klasę .lift-on ustawia zz-lift.js) */
.pdp-stage.lift-on > #pdp-img { z-index: 1; transform-origin: 50% 80%; will-change: transform; transition: transform .6s cubic-bezier(.22, .7, .2, 1), opacity .3s; }
.pdp-stage.lift-on::before { content: ""; position: absolute; inset: 9%; z-index: 0; background: var(--img) center / contain no-repeat; filter: brightness(0) blur(12px); opacity: 0; transform-origin: 50% 80%; transition: opacity .6s cubic-bezier(.22, .7, .2, 1), transform .6s cubic-bezier(.22, .7, .2, 1), filter .6s cubic-bezier(.22, .7, .2, 1); pointer-events: none; }
.pdp-stage.lift-on:hover > #pdp-img, .pdp-stage.lift-on.is-lift > #pdp-img { transform: translate(var(--dx, 0%), calc(-2% + var(--dy, 0%))) rotate(var(--rot, -4deg)) scale(1.05); }
.pdp-stage.lift-on:hover::before, .pdp-stage.lift-on.is-lift::before { opacity: var(--sh-op); filter: brightness(0) blur(var(--sh-blur)); transform: translate(calc(var(--dx, 0%) + var(--sh-x)), calc(var(--dy, 0%) + var(--sh-y))) rotate(var(--rot, -4deg)) scale(1.05); }
@media (prefers-reduced-motion: reduce) { .tp-media img, .vs-media img, .rv-img img, .tp-media::before, .vs-media::before, .rv-img::before, #pdp-img, .pdp-stage::before { transition: none !important; } }
/* Podczas uniesienia zdjęcie (kafelki produktów, opinie, karta produktu) NIE może używać multiply: biel opakowania robiła się przezroczysta i cień
   przeświecał NAD opakowaniem. Zwykłe mieszanie; zdjęcia z białym tłem (bez alfa) dostają maskę = sylwetkę produktu (--mask z zz-lift.js), więc tło znika, a produkt zostaje pełny. */
.ptile.lift-ok:hover .tp-media img, .rv-card.lift-ok:hover .rv-img img, .ptile.lift-ok.is-lift .tp-media img, .rv-card.lift-ok.is-lift .rv-img img, .lift-cut > img, .pdp-stage.lift-on:hover > #pdp-img, .pdp-stage.lift-on.is-lift > #pdp-img {
  mix-blend-mode: normal !important;
  -webkit-mask: var(--mask, none) center / contain no-repeat; mask: var(--mask, none) center / contain no-repeat;
}

/* Punkt odniesienia cienia = sylwetka produktu: zdjęcie w kafelku ma padding 8% (zz-gisou.css), a warstwa cienia rysowała zdjęcie na całym polu,
   więc cień był ok. 19% większy od produktu. Teraz warstwa ma ten sam padding i rysuje obraz w obrębie content-box. Przesunięcie cienia
   jak na stronie testowej (ok. 7% rozmiaru produktu), czyli ~4% pola kafelka; uniesienie i skala jak dla Serii. */
.ptile .tp-media::before { padding: 8%; box-sizing: border-box; background-origin: content-box; background-clip: content-box; }
.ptile { --sh-op: .1; --sh-blur: 5px; --sh-x: 4%; --sh-y: 4%; }