/* FLOUZE — widok produktu (klik w model 3D). Układ wg szkicu: pasek ← nazwa, duża ramka (podgląd | miniatury,
   rozmiary, opis, przycisk), po zjechaniu w dół „inne produkty". Pod nagłówkiem strony (z-index 50), nad stroną (40 < 150). */
body.produkt-otwarty { overflow: hidden; }
.pp { position: fixed; inset: 0; z-index: 40; background: #000; overflow-y: auto; overscroll-behavior: contain;
  padding-top: var(--pp-top, 64px); animation: pp-wejscie .28s ease-out; }
@keyframes pp-wejscie { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.pp-pasek { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
  height: 52px; background: linear-gradient(#000 70%, rgba(0,0,0,0)); }
.pp-wstecz { width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; color: #fff; cursor: pointer; }
.pp-wstecz svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pp-wstecz:hover { color: var(--ice, #cfd2d4); }
.pp-tytul { text-align: center; font-size: clamp(12px, 3.4vw, 15px); letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }

.pp-karta.card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(14px, 3vw, 36px);
  max-width: 1040px; margin: 8px auto 0; padding: clamp(12px, 2.4vw, 28px); border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.015); transform: none !important; box-shadow: none !important; }
.pp-scena { position: relative; min-width: 0; aspect-ratio: 1 / 1.08; max-height: 70vh; border: 1px solid rgba(255,255,255,.18); overflow: hidden; }
.pp-scena .stage { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; max-height: none; border: 0; background: none; }
.pp-scena .stage canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.pp-scena .stage .hint { position: absolute; left: 10px; bottom: 8px; }
.pp-foto { position: absolute; inset: 0; display: none; background: #000; }
.pp-foto.on { display: block; }
.pp-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; user-select: none; -webkit-user-drag: none; }
.pp-scena.foto .stage { visibility: hidden; }

.pp-panel { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pp-panel h3 { margin: 0; font-weight: 400; font-size: clamp(15px, 4vw, 20px); letter-spacing: .1em; text-transform: uppercase; }
.pp-panel .price { font-size: clamp(16px, 4vw, 20px); color: var(--ice, #cfd2d4); }
.pp-mini { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-mini button { width: 58px; height: 58px; padding: 0; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; cursor: pointer;
  display: grid; place-items: center; overflow: hidden; font: 600 11px/1 'Space Mono', monospace; letter-spacing: .05em; }
.pp-mini button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-mini button.on, .pp-mini button:hover { border-color: var(--ice, #cfd2d4); box-shadow: 0 0 12px -2px var(--ice, #cfd2d4); }
.pp-rozm { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-rozm button { min-width: 44px; height: 40px; padding: 0 10px; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; cursor: pointer; font: inherit; letter-spacing: .06em; }
.pp-rozm button.on { background: #fff; color: #000; border-color: #fff; }
.pp-etykieta { font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,.5); text-transform: uppercase; margin-bottom: -6px; }
.pp-opis { border: 1px solid rgba(255,255,255,.25); padding: 12px 14px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.82); white-space: pre-line; }
.pp-panel .pill.add { align-self: stretch; margin-top: auto; }

.pp-inne { max-width: 1040px; margin: 34px auto 0; padding: 0 clamp(12px, 2.4vw, 28px) 60px; }
.pp-inne h2 { font-weight: 400; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 14px; color: rgba(255,255,255,.7);
  display: flex; align-items: center; gap: 14px; }
.pp-inne h2::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.25); }
.pp-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pp-kafel { display: block; text-align: left; padding: 0 0 10px; background: none; border: 1px solid rgba(255,255,255,.22); color: #fff; cursor: pointer;
  font: inherit; transition: border-color .2s, transform .2s; }
.pp-kafel:hover { border-color: var(--ice, #cfd2d4); transform: translateY(-3px); }
.pp-kafel .obr { aspect-ratio: 1 / 1; display: grid; place-items: center; background: rgba(255,255,255,.03); overflow: hidden; }
.pp-kafel .obr img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.pp-kafel b { display: block; font-weight: 400; font-size: 12px; letter-spacing: .08em; margin: 10px 10px 4px; text-transform: uppercase; }
.pp-kafel span { display: block; margin: 0 10px; font-size: 12px; color: var(--ice, #cfd2d4); }

@media (max-width: 760px) {
  .pp-karta.card { grid-template-columns: 1fr; border-left: 0; border-right: 0; }
  .pp-scena { aspect-ratio: 1 / 1; max-height: 58vh; }
}
@media (prefers-reduced-motion: reduce) { .pp { animation: none; } }

/* jedna strzałka „wstecz”: uniwersalna (#wstecz) zamyka widok produktu — własna strzałka paska byłaby drugą obok */
.pp .pp-wstecz { visibility: hidden; }
.pp-kafel span.wkrotce { color: #8a959b; letter-spacing: .2em; }

/* 2026-10-17: 4 większe miniatury w rzędzie + ramka z przeklikiwaniem (‹ ›) */
.pp-scena { border: 3px solid rgba(255,255,255,.75); }
.pp-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pp-mini button { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.pp-strz { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 58px; display: grid; place-items: center;
  background: rgba(0,0,0,.55); border: 2px solid #fff; color: #fff; font: 400 30px/1 var(--mono, monospace); cursor: pointer; padding: 0; }
.pp-strz:hover { background: #fff; color: #000; }
.pp-strz-l { left: 8px; } .pp-strz-p { right: 8px; }
.pp-opis { white-space: pre-line; line-height: 1.65; }

/* 2026-10-17 (2): układ wg szkicu — tytuł wyśrodkowany, 2×2 zdjęcia w białej ramce, mniejszy opis, tabela rozmiarów obok rozmiarów */
.pp-nazwa { text-align: center; margin: 0; font-family: 'Dela Gothic One', 'Space Mono', sans-serif; font-weight: 400; text-transform: uppercase; line-height: 1.05; }
.pp-nazwa .t1 { display: block; font-size: clamp(22px, 5.4vw, 36px); letter-spacing: .035em; transform: scale(1.08, .8); animation: pp-glow 4.6s ease-in-out infinite; }
.pp-nazwa .t2 { display: block; margin-top: 2px; font-size: clamp(14px, 3.3vw, 21px); letter-spacing: .26em; transform: scale(1.08, .8); animation: pp-glow 4.6s ease-in-out -2.3s infinite; }
@keyframes pp-glow {
  0%, 100% { color: #e6e9eb; text-shadow: 0 0 5px rgba(207,214,222,.35), 0 0 18px rgba(190,205,225,.22); }
  50% { color: #fff; text-shadow: 0 0 7px rgba(255,255,255,.8), 0 0 26px rgba(205,220,240,.6), 0 0 54px rgba(190,205,225,.3); }
}
.pp-mini { grid-template-columns: 1fr 1fr; gap: 3px; background: #fff; border: 3px solid #fff; }
.pp-mini button { border: 0; aspect-ratio: 1.3 / 1; filter: brightness(.82); transition: filter .2s; background: #000; }
.pp-mini button img { object-position: 50% 25%; }
.pp-mini button:hover, .pp-mini button.on { filter: none; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #000; }
.pp-opis { font-size: 11.5px; line-height: 1.5; padding: 9px 12px; }
.pp-rozm-wiersz { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-rozm-wiersz .pp-tabela-btn { align-self: auto; width: auto; margin: 0; padding: 9px 12px; font-size: 11px; letter-spacing: .1em; }
@media (prefers-reduced-motion: reduce) { .pp-nazwa .t1, .pp-nazwa .t2 { animation: none; } }
.pp-mini button { display: block; position: relative; width: 100%; height: auto; }
.pp-mini button img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-panel .pp-mini button { width: 100%; height: auto; }
.pp-panel { container-type: inline-size; }
.pp-nazwa .t1 { font-size: 5.1cqw; transform: scaleY(.82); white-space: nowrap; }
.pp-nazwa .t2 { font-size: 3.5cqw; transform: scaleY(.82); white-space: nowrap; }

/* tytuł na kartach produktów — ten sam styl co w widoku produktu */
#produkty .card h3.pp-nazwa { container-type: inline-size; margin: 12px 0 8px; width: 100%; letter-spacing: normal; }
#produkty .card h3.pp-nazwa .t1 { font-size: 6.4cqw; }
#produkty .card h3.pp-nazwa .t2 { font-size: 4.2cqw; }

/* rozmiary wyśrodkowane, tabela rozmiarów mała i symetrycznie pod nimi */
.pp-rozm-wiersz { flex-direction: column; align-items: center; justify-content: center; gap: 9px; }
.pp-rozm-wiersz .pp-rozm { justify-content: center; }
.pp-panel .pp-rozm-et { text-align: center; }
.pp-rozm-wiersz .pp-tabela-btn { align-self: center; width: auto; min-width: 0; margin: 0; padding: 4px 11px; font-size: 9px; line-height: 1.4; letter-spacing: .14em; border-width: 1px; }

/* animacja przewijania zdjęć: kadr wjeżdża z boku */
.pp-foto img.wjazd-p, .pp-scena .stage.wjazd-p { animation: pp-wjazd-p .45s cubic-bezier(.2,.8,.2,1); }
.pp-foto img.wjazd-l, .pp-scena .stage.wjazd-l { animation: pp-wjazd-l .45s cubic-bezier(.2,.8,.2,1); }
@keyframes pp-wjazd-p { from { transform: translateX(32%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pp-wjazd-l { from { transform: translateX(-32%); opacity: 0; } to { transform: none; opacity: 1; } }
.pp-foto { touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) { .pp-foto img, .pp-scena .stage { animation: none !important; } }

/* ── 2026-10-17 (4): gruba ramka zdjęcia głównego + HUD aparatu w stylu Flouze ── */
.pp-scena.pp-scena { border: 13px solid transparent; border-image: var(--lg-g-b) 12 / 13px round; }
.pp-scena .stage .hint { display: none; }
.pp-hud { position: absolute; inset: 9px; z-index: 5; pointer-events: none; border: 1px solid rgba(255,255,255,.55);
  font: 400 9.5px/1 'Space Mono', monospace; letter-spacing: .16em; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.9); }
.pp-hud .nar { position: absolute; width: 20px; height: 20px; border: 0 solid #fff; filter: drop-shadow(0 0 3px rgba(207,214,222,.7)); }
.pp-hud .nar.tl { left: -1px; top: -1px; border-left-width: 3px; border-top-width: 3px; }
.pp-hud .nar.tr { right: -1px; top: -1px; border-right-width: 3px; border-top-width: 3px; }
.pp-hud .nar.bl { left: -1px; bottom: -1px; border-left-width: 3px; border-bottom-width: 3px; }
.pp-hud .nar.br { right: -1px; bottom: -1px; border-right-width: 3px; border-bottom-width: 3px; }
.pp-hud .siatka { position: absolute; background: rgba(255,255,255,.14); }
.pp-hud .siatka.v1 { left: 33.33%; top: 0; bottom: 0; width: 1px; } .pp-hud .siatka.v2 { left: 66.66%; top: 0; bottom: 0; width: 1px; }
.pp-hud .siatka.h1 { top: 33.33%; left: 0; right: 0; height: 1px; } .pp-hud .siatka.h2 { top: 66.66%; left: 0; right: 0; height: 1px; }
.pp-hud .cel { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: .55;
  background:
    linear-gradient(#fff,#fff) 50% 0 / 1.5px 9px no-repeat, linear-gradient(#fff,#fff) 50% 100% / 1.5px 9px no-repeat,
    linear-gradient(#fff,#fff) 0 50% / 9px 1.5px no-repeat, linear-gradient(#fff,#fff) 100% 50% / 9px 1.5px no-repeat; }
.pp-hud.fokus .cel { animation: hud-fokus .6s ease-out; }
@keyframes hud-fokus { 0% { transform: scale(2.2); opacity: 0; } 55% { transform: scale(.88); opacity: 1; } 100% { transform: scale(1); opacity: .55; } }
.pp-hud > span { position: absolute; white-space: nowrap; }
.pp-hud .h-rec { left: 18px; top: 13px; } .pp-hud .h-rec b { color: #ff3b30; font-weight: 400; animation: hud-rec 1.2s steps(2, jump-none) infinite; }
.pp-hud .h-kadr { right: 18px; top: 13px; }
.pp-hud .h-par { left: 18px; bottom: 13px; opacity: .85; } .pp-hud .h-bat { right: 18px; bottom: 13px; opacity: .85; }
@keyframes hud-rec { 0% { opacity: 1; } 100% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .pp-hud .h-rec b, .pp-hud.fokus .cel { animation: none; } }

/* karty: bez napisu „360° · ZDJĘCIA”; pas ostrzegawczy z teksturą zniszczonego, malowanego drewna */
#produkty .stage .hint { display: none; }
#produkty .stage::after { height: 18px; background: url("../img/pas-ostrzegawczy.jpg") repeat-x 0 0 / auto 100%; border-top: 1px solid #0b0b0b; border-bottom: 1px solid #0b0b0b; }

/* galeria 4+4: przełącznik stron zdjęć */
.pp-mini button[hidden] { display: none; }
.pp-strony { display: flex; justify-content: center; gap: 8px; margin-top: -4px; }
.pp-strony button { width: 26px; height: 20px; padding: 0; background: none; border: 1px solid rgba(255,255,255,.4); color: rgba(255,255,255,.7); font: 700 10px/1 'Space Mono', monospace; cursor: pointer; }
.pp-strony button.on { background: #fff; color: #000; border-color: #fff; }

/* lupa do powiększania zdjęcia — tylko komputer z myszką, tylko gdy widać zdjęcie (nie model 360°) */
.pp-lupa { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pp-scena.foto .pp-lupa { display: grid; place-items: center; position: absolute; right: 26px; bottom: 26px; z-index: 7; width: 44px; height: 44px; padding: 0;
    background: rgba(0,0,0,.6); border: 2px solid #fff; color: #fff; cursor: pointer; transition: background .2s, color .2s; }
  .pp-lupa svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .pp-lupa .minus { display: none; } .pp-lupa.on .plus { display: none; } .pp-lupa.on .minus { display: inline; }
  .pp-lupa:hover, .pp-lupa.on { background: #fff; color: #000; }
  .pp-foto img { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .pp-foto.zoom img { transform: scale(2.6); cursor: zoom-out; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .pp-foto.zoom img.wjazd-p, .pp-foto.zoom img.wjazd-l { animation: none; }
  .pp-foto:not(.zoom) img { cursor: zoom-in; }
}