/* ═══ FLOUZE — czarny, lodowy chrom, monospace ═══ */
@property --d { syntax: '<length>'; inherits: true; initial-value: 1.6px; }

:root {
  --bg: #000;
  --ink: #f1f2f3;
  --dim: #8a959b;
  --ice: #cfd2d4;
  --ice-2: #a8acaf;
  --line: rgba(255,255,255,.92);
  --mono: 'Space Mono', ui-monospace, 'Courier New', monospace;
  --hdr: 116px;        /* wysokość nagłówka u góry strony */
  --hdr-miejsce: 116px; /* stałe miejsce w układzie — nie zmienia się przy scrollu */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--mono); }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; padding-top: var(--hdr-miejsce); }
body.intro-on { overflow: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ziarno na całej stronie */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .6s steps(4) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(1%,3%)} }

/* ═══════════════ INTRO ═══════════════ */
#intro { position: fixed; inset: 0; z-index: 1000; pointer-events: all; cursor: wait; touch-action: none; }
#intro .intro-veil { position: absolute; inset: 0; background: rgba(0,0,0,.7); }   /* zasłona 70% */
#introPaths, #introBolts { position: absolute; inset: 0; width: 100%; height: 100%; }
#introPaths path { fill: none; stroke: rgba(225,227,228,.85); stroke-width: 1.4; filter: drop-shadow(0 0 4px var(--ice)); }
#introPaths circle { fill: none; stroke: rgba(232,233,234,.95); stroke-width: 1.6; filter: drop-shadow(0 0 5px var(--ice)); }
.intro-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(232,233,234,.9), rgba(190,194,197,.25) 40%, transparent 70%); opacity: 0; }
#introLogo {
  position: absolute; left: 50%; top: 50%;
  width: min(86vw, 860px); aspect-ratio: 1818 / 643;
  transform: translate(-50%, -50%);
  display: flex; transform-origin: 50% 50%;
}
#introLogo .half { height: 100%; width: auto; opacity: 0; will-change: transform, filter; }
#introLogo .half-l { width: 48.515%; }
#introLogo .half-r { width: 51.485%; }
#introLogo.joined .half { filter: drop-shadow(0 0 10px rgba(207,210,212,.9)) drop-shadow(0 0 28px rgba(168,172,175,.6)); }

/* ═══════════════ [1] HEADER + LOGO 3D ═══════════════ */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;   /* fixed: zmiana wysokości NIE przesuwa treści (sticky powodował skakanie przy scrollu) */
  height: var(--hdr); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 16px; background: linear-gradient(#000 60%, rgba(0,0,0,.0));
  transition: height .35s cubic-bezier(.2,.8,.2,1);
}
.top.small { --hdr: 76px; background: rgba(0,0,0,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; transition: transform .2s, background .2s; }
.ico:hover { background: rgba(207,210,212,.08); transform: scale(1.08); }
.ico svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-row { justify-self: end; display: flex; gap: 2px; }
.ico.cart { position: relative; width: auto; padding: 0 6px; gap: 5px; display: inline-flex; align-items: center; }
.badge { display: none; font: 700 14px/1 var(--mono); color: #fff; letter-spacing: 0; background: none; border: 0; padding: 0; }   /* sama cyfra obok ikony, nic nie zasłania */
.badge.on { display: inline-block; }
.cart.bump { animation: bump .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes bump { 0%{transform:scale(1)} 35%{transform:scale(1.35) rotate(-8deg)} 100%{transform:scale(1)} }

.logo3d {
  display: block; width: min(46vw, 300px); aspect-ratio: 1818 / 643;
  perspective: 700px; perspective-origin: 50% 50%;
  opacity: 0; transition: opacity .25s, width .35s cubic-bezier(.2,.8,.2,1);
}
.top.small .logo3d { width: min(34vw, 190px); }
.logo3d.show { opacity: 1; }
.stack {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; will-change: transform;     /* transform ustawia ui.js (jeden element, bez przeliczania warstw) */
}
.stack .layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  backface-visibility: hidden;
}
.stack .layer.front {
  filter: drop-shadow(0 0 3px rgba(207,210,212,.6));   /* lekka poświata — mocniejsza zakrywała boki bryły */
}
.stack::after { content: ""; position: absolute; inset: -12%; transform: translateZ(-6px); pointer-events: none;
  background: radial-gradient(closest-side, rgba(168,172,175,.22), transparent 75%); }   /* poświata ZA bryłą, nie na niej */



/* ═══════════════ [2] SLOT ANIMACJI ═══════════════ */
.anim-slot {
  position: relative; overflow: hidden;
  display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 40%, #0e0f10 0%, #030607 55%, #000 100%);
}
#slotBolts, .slot-bolts { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }   /* płótno błyskawic nie może zajmować miejsca w układzie (wypychało logo banera w dół) */
.slot-smoke { position: absolute; filter: blur(30px); opacity: .55; z-index: 0; background-blend-mode: normal; }
.slot-smoke.s1 { width: 60%; height: 60%; background: radial-gradient(closest-side, #3a3d40, transparent); left: -10%; top: -10%; animation: drift 11s ease-in-out infinite alternate; }
.slot-smoke.s2 { width: 50%; height: 55%; background: radial-gradient(closest-side, #35383b, transparent); right: -12%; bottom: -14%; animation: drift 14s ease-in-out infinite alternate-reverse; }
.slot-smoke.s3 { width: 35%; height: 35%; background: radial-gradient(closest-side, #6f7376, transparent); left: 35%; top: 30%; opacity: .22; animation: drift 9s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(18%, 14%) scale(1.25); } }
.slot-inner { position: relative; z-index: 2; text-align: center; width: 100%; padding: 0 6%; }
.slot-kicker { letter-spacing: .5em; font-size: 12px; color: var(--ice); opacity: .85; margin-bottom: 18px; }
.slot-logo { width: min(82%, 640px); margin: 0 auto; animation: float 5s ease-in-out infinite; }
.slot-logo img {
  width: 100%;
  filter: drop-shadow(0 0 12px rgba(207,210,212,.7)) drop-shadow(0 0 40px rgba(168,172,175,.35));
}
@keyframes float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.slot-sub { margin-top: 22px; font-size: 13px; letter-spacing: .4em; color: #dcdedf; }
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: .8; }
.glitch::before { color: #a8acaf; animation: gl1 2.6s infinite steps(1); }
.glitch::after  { color: #ff3b6b; animation: gl2 2.6s infinite steps(1); }
@keyframes gl1 { 0%,86%,100% { transform: none; clip-path: inset(0 0 100% 0); } 88% { transform: translate(-3px,1px); clip-path: inset(10% 0 50% 0); } 92% { transform: translate(2px,-1px); clip-path: inset(55% 0 5% 0); } }
@keyframes gl2 { 0%,87%,100% { transform: none; clip-path: inset(0 0 100% 0); } 89% { transform: translate(3px,0); clip-path: inset(60% 0 10% 0); } 93% { transform: translate(-2px,1px); clip-path: inset(5% 0 70% 0); } }

/* ═══════════════ [3] PRODUKTY 3D ═══════════════ */
.products { padding: 56px 16px 10px; max-width: 1200px; margin: 0 auto; }
.sec-title { font-weight: 400; letter-spacing: .35em; font-size: 15px; text-align: center; margin: 0 0 26px; color: #e4e6e7; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card {
  position: relative; border: 2px solid var(--line); border-radius: 26px; padding: 12px 12px 18px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #000; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(207,210,212,.4), 0 18px 50px -18px rgba(168,172,175,.55); }
.card.wide { grid-column: 1 / -1; }
.stage { position: relative; width: 100%; aspect-ratio: 1 / 1.08; }
.card.wide .stage { aspect-ratio: 16 / 10; max-height: 420px; }
.stage canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.stage canvas:active { cursor: grabbing; }
.hint {
  position: absolute; top: 8px; right: 10px; font-size: 10px; letter-spacing: .2em; color: var(--ice);
  border: 1px solid rgba(207,210,212,.5); border-radius: 20px; padding: 3px 8px; pointer-events: none;
  animation: hint 2.4s ease-in-out infinite;
}
@keyframes hint { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.card h3 { font-weight: 400; font-size: clamp(13px, 3.6vw, 17px); letter-spacing: .06em; margin: 10px 0 8px; }
.price { font-size: clamp(16px, 4.6vw, 22px); letter-spacing: .08em; margin-bottom: 16px; }
.pill {
  position: relative; overflow: hidden;
  border: 5px solid #fff; border-radius: 999px; padding: 8px 18px; min-width: 76%;
  font-size: clamp(13px, 3.6vw, 17px); letter-spacing: .12em; line-height: 1.3;
  transition: transform .2s, background .25s, color .25s;
}
.pill::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(207,210,212,.5) 50%, transparent 70%);
  transition: transform .6s;
}
.pill:hover { background: #fff; color: #000; }
.pill:hover::after { transform: translateX(120%); }
.pill:active { transform: scale(.94); }
.fly-dot {
  position: fixed; z-index: 200; width: 14px; height: 14px; border-radius: 50%; pointer-events: none;
  background: var(--ice); box-shadow: 0 0 14px var(--ice), 0 0 30px var(--ice-2);
}

/* ═══════════════ [TOP] PANEL SLAJDÓW — od krawędzi do krawędzi ═══════════════ */
.top-slider { position: relative; width: 100%; height: clamp(460px, 78svh, 860px); overflow: hidden; background: #000; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.top-slider .tor { display: flex; height: 100%; transition: transform .65s cubic-bezier(.7,0,.2,1); will-change: transform; }
.top-slider.ciagnie .tor { transition: none; }
.slajd { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.slajd-logo { background: radial-gradient(120% 90% at 50% 40%, #0e0f10 0%, #030607 55%, #000 100%); }
.slajd-tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s ease-out; }
.slajd.aktywny .slajd-tlo { transform: scale(1); }
.slajd-podpis { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 22px 64px; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.slajd-podpis h3 { margin: 0 0 8px; font-weight: 700; letter-spacing: .25em; font-size: clamp(18px, 5vw, 34px); text-shadow: 0 0 18px rgba(207,210,212,.35); }
.slajd-podpis p { margin: 0 0 12px; max-width: 620px; font-size: 14px; line-height: 1.6; color: #d9dbdc; }
.slajd-podpis h3:empty, .slajd-podpis p:empty { display: none; }
.edytor .slajd-podpis h3:empty, .edytor .slajd-podpis p:empty { display: block; min-height: 1.4em; outline: 1px dashed rgba(207,210,212,.4); }
.slajd-link { display: inline-block; border: 2px solid #fff; padding: 8px 14px; color: #fff; text-decoration: none; letter-spacing: .2em; font-size: 12px; transition: background .2s, color .2s; }
.slajd-link:hover { background: #fff; color: #000; }
.slajd-pusty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); letter-spacing: .2em; font-size: 12px; border: 2px dashed #222426; }
.slajd .slajd-podpis, .slajd .slot-inner, .slajd .post { opacity: 0; transform: translateY(24px); transition: opacity .6s .25s, transform .7s .25s cubic-bezier(.2,.8,.2,1); }
.slajd.aktywny .slajd-podpis, .slajd.aktywny .slot-inner, .slajd.aktywny .post { opacity: 1; transform: none; }
/* post jak na Instagramie */
.slajd-post { display: grid; place-items: center; background: #050708; }
.post-rozmyte { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(36px) brightness(.45) saturate(1.3); }
.post { position: relative; width: min(84vw, 400px); background: #000; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 30px 80px -20px rgba(168,172,175,.45); }
.post-gl { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; letter-spacing: .1em; border-bottom: 1px solid #212426; }
.post-av { width: 28px; height: 28px; background: #fff; padding: 2px; }
.post-kropki { margin-left: auto; color: var(--dim); }
.post-foto { position: relative; aspect-ratio: 1; background: #0b0c0d; }
.post-foto img { width: 100%; height: 100%; object-fit: cover; }
.post-opis { padding: 11px 12px 14px; font-size: 13px; line-height: 1.5; color: #d9dbdc; }
.post-opis b { color: #fff; letter-spacing: .08em; }
.post-opis .slajd-link { display: block; width: max-content; margin-top: 10px; font-size: 11px; padding: 6px 10px; }
/* sterowanie */
.sl-strzalka { position: absolute; top: 50%; z-index: 5; width: 46px; height: 46px; display: grid; place-items: center; transform: translateY(-50%);
  background: rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.85); transition: background .2s, transform .2s; }
.sl-strzalka:hover { background: #fff; } .sl-strzalka:hover svg { stroke: #000; }
.sl-strzalka svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linejoin: miter; stroke-linecap: square; }
.sl-strzalka.lewo { left: 12px; } .sl-strzalka.prawo { right: 12px; }
.sl-strzalka.lewo:active { transform: translateY(-50%) translateX(-3px); } .sl-strzalka.prawo:active { transform: translateY(-50%) translateX(3px); }
.sl-kropki { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 5; display: flex; justify-content: center; gap: 8px; }
.sl-kropki button { width: 10px; height: 10px; border: 2px solid #fff; background: transparent; padding: 0; transition: background .2s, transform .2s; }
.sl-kropki button.on { background: var(--ice); border-color: var(--ice); transform: rotate(45deg) scale(1.2); box-shadow: 0 0 10px var(--ice); }
.sl-pasek { position: absolute; left: 0; bottom: 0; z-index: 5; height: 3px; width: 0; background: var(--ice); box-shadow: 0 0 10px var(--ice); }
@keyframes slPasek { from { width: 0; } to { width: 100%; } }
@media (max-width: 600px) { .sl-strzalka { width: 38px; height: 38px; } .sl-strzalka.lewo { left: 6px; } .sl-strzalka.prawo { right: 6px; } }

/* ═══════════════ BLOK NA DOLE: F, ZAPIS NEWSLETTER, pole e-mail (wg szkicu) ═══════════════ */
.newsletter { max-width: 640px; margin: 0 auto; padding: 40px 16px 56px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.nl-f.film-ramka { width: min(54vw, 260px); }
.nl-tresc { width: 100%; }
.nl-tresc h2 { font-weight: 700; letter-spacing: .28em; font-size: clamp(18px, 5.2vw, 26px); margin: 4px 0 22px; text-transform: uppercase; }
.mail { display: flex; align-items: stretch; width: 100%; border: 2px solid rgba(255,255,255,.55); transition: border-color .3s, box-shadow .3s; }
.mail:focus-within { border-color: var(--ice); box-shadow: 0 0 22px -4px rgba(207,210,212,.6); }
.mail input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: 14px; letter-spacing: .2em; padding: 17px 18px; text-align: left; }
.mail input::placeholder { color: #6f7a80; }
.mail button { display: grid; place-items: center; padding: 0 26px; background: #fff; transition: background .2s; }
.mail button svg { width: 22px; height: 22px; fill: none; stroke: #000; stroke-width: 2.2; stroke-linecap: square; transition: transform .25s; }
.mail button:hover { background: var(--ice); }
.mail button:hover svg { transform: translateX(4px); }
.mail.sent { border-color: var(--ice); }
.mail.blad { border-color: #ff4d6d; animation: trzes .3s; }
@keyframes trzes { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.nl-podpis { margin: 14px 0 0; letter-spacing: .18em; font-size: 12px; color: var(--dim); }
.nl-podpis:empty { display: none; }
.edytor .nl-podpis:empty { display: block; min-height: 1.4em; }

/* ── stopka (styl referencji): ramki na sociale, linia, ©, linki ── */
.foot { border-top: 2px solid #fff; margin: 8px auto 0; padding: 26px 18px calc(30px + env(safe-area-inset-bottom)); color: var(--dim); font-size: 12px; letter-spacing: .2em;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 1100px; }
.foot-f.film-ramka { width: 110px; }
.foot .sociale { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.soc-tytul { color: var(--ink); letter-spacing: .25em; }
.soc-rzad { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.soc { width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.7); color: #fff; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.soc svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: miter; }
a.soc:hover { background: #fff; color: #000; border-color: #fff; }
.soc.bez-linku { opacity: .5; }
.foot-linia { width: 100%; border-top: 1px solid #26292b; margin-top: 6px; }
.foot-c { color: #8a959b; }
.foot-linki { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; }
.foot-linki a, .foot-linki span { color: #8a959b; text-decoration: none; font-size: 11px; transition: color .2s; }
.foot-linki a:hover { color: var(--ice); }
.foot-linki .bez-linku { opacity: .75; }

/* reveal przy przewijaniu */
.reveal { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.grid .reveal:nth-child(2) { transition-delay: .12s; }
.grid .reveal:nth-child(3) { transition-delay: .24s; }

@media (min-width: 900px) {
  :root { --hdr: 140px; --hdr-miejsce: 140px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .card.wide { grid-column: auto; }
  .card.wide .stage { aspect-ratio: 1 / 1.08; max-height: none; }
  .pill { min-width: 70%; }
}

/* ═══════════════ SEKCJE DODAWANE Z PANELU ═══════════════ */
.sekcja-tekst { max-width: 760px; margin: 0 auto; padding: 60px 16px 20px; text-align: center; }
.sekcja-tekst h2 { font-weight: 400; letter-spacing: .3em; font-size: clamp(16px, 4.4vw, 24px); margin: 0 0 18px; color: var(--ice); text-shadow: 0 0 18px rgba(207,210,212,.35); }
.sekcja-tekst p { margin: 0; line-height: 1.75; font-size: 15px; color: #d9dbdc; white-space: pre-line; }
.sekcja-obraz { padding: 40px 16px 10px; max-width: 1100px; margin: 0 auto; text-align: center; }
.sekcja-obraz .ramka { border: 2px solid var(--line); border-radius: 26px; overflow: hidden; background: #050708; }
.sekcja-obraz img { width: 100%; height: auto; }
.sekcja-obraz .pusty { padding: 80px 16px; color: var(--dim); letter-spacing: .2em; font-size: 12px; }
.sekcja-obraz .podpis { margin: 14px 0 0; letter-spacing: .25em; font-size: 12px; color: var(--dim); }

/* ═══════════════ TRYB EDYTORA (podgląd w /admin) ═══════════════ */
.sort-miejsce { border: 2px dashed var(--ice); border-radius: 22px; background: rgba(207,210,212,.06); }
body.sort-trwa, body.sort-trwa * { cursor: grabbing !important; user-select: none !important; }
.edytor .ed-sekcja { position: relative; outline: 1px dashed rgba(207,210,212,.18); outline-offset: -1px; margin: 6px 0; border-radius: 22px; transition: outline-color .2s; }
.edytor .ed-sekcja:hover { outline-color: rgba(207,210,212,.6); }
.edytor .ed-uchwyt {
  position: absolute; z-index: 20; top: 8px; left: 8px;
  font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: var(--ice); color: #000; border-radius: 999px; padding: 7px 11px 7px 9px;
  cursor: grab; touch-action: none; box-shadow: 0 4px 16px rgba(0,0,0,.6);
  opacity: .85; transition: opacity .2s, transform .2s;
}
.edytor .ed-uchwyt:hover { opacity: 1; transform: scale(1.06); }
.edytor .card .ed-uchwyt { top: auto; bottom: -12px; left: 50%; transform: translateX(-50%); }
.edytor .card .ed-uchwyt:hover { transform: translateX(-50%) scale(1.06); }
.edytor .ed-ukryty { opacity: .35; filter: grayscale(1); }
.edytor [data-pole] { outline: 1px dashed transparent; outline-offset: 3px; border-radius: 4px; cursor: text; transition: outline-color .2s, background .2s; min-width: 2ch; }
.edytor [data-pole]:hover { outline-color: rgba(207,210,212,.55); }
.edytor [data-pole]:focus { outline: 2px solid var(--ice); background: rgba(207,210,212,.08); }
.edytor .glitch:focus::before, .edytor .glitch:focus::after { display: none; }
.edytor .card { margin-bottom: 14px; }

/* ═══════════════ KRĘCĄCE SIĘ F (wideo pod produktami) ═══════════════ */
.sekcja-film { padding: 30px 16px 0; text-align: center; }
.film-ramka { width: min(78vw, 460px); margin: 0 auto; aspect-ratio: 1; position: relative; }
.film-ramka video { position: relative; width: 100%; height: 100%; display: block; background: #000; pointer-events: none; }
.sekcja-film .podpis { margin: 6px 0 0; letter-spacing: .3em; font-size: 12px; color: var(--dim); }

/* ═══════════════ OSTRE KRAWĘDZIE — zasada marki: żadnych zaokrągleń ═══════════════ */
*, *::before, *::after { border-radius: 0 !important; }
.pill { border-width: 3px; }

/* ═══════════════ KURSOR: odwrócone F z logo ═══════════════ */
html, body, a, button, .stage canvas, label, .ed-uchwyt {
  cursor: url("../img/kursor-f.png") 1 1, auto;
  cursor: -webkit-image-set(url("../img/kursor-f.png") 1x, url("../img/kursor-f@2x.png") 2x) 1 1, auto;
  cursor: image-set(url("../img/kursor-f.png") 1x, url("../img/kursor-f@2x.png") 2x) 1 1, auto;
}
input, textarea, [contenteditable] { cursor: text; }

/* ═══════════════ IKONA KOSZYKA (biały koszyk) ═══════════════ */
.ico.cart svg.kosz-ikona { width: 34px; height: 34px; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════ STOPKA: lekko mniejsza skala, wszystko w osi ═══════════════ */
.foot { transform-origin: 50% 0; font-size: 11px; gap: 16px; padding-top: 22px; }
.foot .soc { width: 46px; height: 46px; }
.foot .soc svg { width: 21px; height: 21px; }
.foot-linki a, .foot-linki span { font-size: 10px; }
.foot-linki { gap: 10px 20px; }
.nl-f.film-ramka { width: min(46vw, 220px); }
.newsletter { padding: 32px 16px 44px; }
.nl-tresc h2 { font-size: clamp(16px, 4.6vw, 22px); }
.mail input { padding: 14px 16px; font-size: 13px; }

/* ═══════════════ PODGLĄD ZDJĘĆ PRODUKTU (po kliknięciu w model 3D) ═══════════════ */
.card.ma-foto .stage canvas { cursor: zoom-in; }
body.foto-otwarte { overflow: hidden; }
.galeria-foto { position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,.94); display: flex; flex-direction: column; animation: gf-wejscie .3s ease-out; }
@keyframes gf-wejscie { from { opacity: 0; } }
.gf-gl { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.gf-nazwa { letter-spacing: .25em; font-size: 13px; }
.gf-licz { margin-left: auto; color: var(--ice); font-size: 12px; letter-spacing: .15em; }
.gf-x { width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid #fff; transition: background .2s; }
.gf-x:hover { background: #fff; } .gf-x:hover svg { stroke: #000; }
.gf-x svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: square; }
.gf-scena { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.gf-tor { display: flex; height: 100%; transition: transform .5s cubic-bezier(.7,0,.2,1); }
.gf-slajd { flex: 0 0 100%; height: 100%; display: grid; place-items: center; padding: 0 12px; }
.gf-slajd img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); object-fit: contain; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 30px 80px -30px rgba(168,172,175,.4); }
.gf-mini { display: flex; justify-content: center; gap: 8px; padding: 12px 12px calc(14px + env(safe-area-inset-bottom)); }
.gf-mini button { width: 56px; aspect-ratio: 4 / 5; padding: 0; border: 2px solid rgba(255,255,255,.3); opacity: .65; transition: opacity .2s, border-color .2s; }
.gf-mini button.on { opacity: 1; border-color: var(--ice); box-shadow: 0 0 12px -2px var(--ice); }
.gf-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-foto .sl-strzalka.lewo { left: 10px; } .galeria-foto .sl-strzalka.prawo { right: 10px; }

/* ═══════════════ FILM W SLIDERZE (pionowy 9:16) ═══════════════ */
.slajd-wideo { background: #000; }
.slajd-wideo .slajd-tlo { transform: none; transition: none; }
@media (min-aspect-ratio: 5/4) {      /* szeroki ekran: film w całości, na rozmytym plakacie, zamiast ucinania do paska */
  .slajd-wideo::before { content: ""; position: absolute; inset: -40px; background: var(--plakat) center / cover; filter: blur(34px) brightness(.55) saturate(1.2); }
  .slajd-wideo .slajd-tlo { object-fit: contain; }
}

/* ═══════════════ UKŁAD PRODUKTÓW: bluza (główny produkt) na środku, koszulka „coming soon” po prawej ═══════════════ */
.grid.uklad-glowny { display: grid; grid-template-columns: 1fr minmax(0, 440px) 1fr; gap: 18px; align-items: center; max-width: 1100px; margin: 0 auto; }
.uklad-glowny > .card.glowny { grid-column: 2; grid-row: 1; width: 100%; }
.uklad-glowny > .boczne { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.uklad-glowny .boczne .card { width: min(100%, 250px); }
.card.wkrotce { border-color: rgba(255,255,255,.4); }
.card.wkrotce .stage canvas { opacity: .55; }
.wkrotce-plakietka { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; white-space: nowrap;
  border: 2px solid #fff; background: rgba(0,0,0,.72); padding: 7px 12px; letter-spacing: .3em; font-size: 11px; }
.wkrotce-cena { color: var(--dim); letter-spacing: .3em; }
.pill.wkrotce-btn { border-style: dashed; border-color: rgba(255,255,255,.4); color: #8a959b; cursor: not-allowed; }
.pill.wkrotce-btn:hover { background: none; color: #8a959b; }
.pill.wkrotce-btn::after { display: none; }
@media (max-width: 860px) {
  .grid.uklad-glowny { grid-template-columns: 1fr; justify-items: center; }
  .uklad-glowny > .card.glowny { grid-column: 1; grid-row: 1; max-width: 440px; }
  .uklad-glowny > .boczne { grid-column: 1; grid-row: 2; align-items: center; width: 100%; }   /* osobny wiersz — wcześniej leżała NA bluzie */
  .uklad-glowny .boczne .card { width: min(70%, 260px); }
}

/* ═══════════════ UKRYTE LOGOWANIE (3 kliknięcia w © 2026) ═══════════════ */
.ukryty-login { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.88); animation: gf-wejscie .25s ease-out; }
.ul-box { width: min(340px, 100%); display: flex; flex-direction: column; gap: 12px; border: 2px solid #fff; padding: 24px 22px; background: #030506; box-shadow: 0 30px 80px -20px rgba(168,172,175,.4); }
.ul-tyt { letter-spacing: .5em; font-size: 12px; color: var(--ice); text-align: center; margin-bottom: 4px; }
.ul-box input { background: #000; border: 2px solid #33373a; color: var(--ink); font: inherit; font-size: 14px; letter-spacing: .15em; padding: 13px 14px; outline: 0; }
.ul-box input:focus { border-color: var(--ice); }
.ul-box .pill { width: 100%; margin-top: 4px; }
.ul-blad { min-height: 16px; color: #ff4d6d; font-size: 12px; text-align: center; }

/* ═══════════════ UNIWERSALNA STRZAŁKA „WSTECZ” (zamiast trzech kresek) ═══════════════ */
.top .logo3d { grid-column: 2; }
.top .ico-row { grid-column: 3; }
#wstecz {
  position: fixed; top: 12px; left: 12px; z-index: 900; width: 48px; height: 48px; display: grid; place-items: center;
  background: rgba(0,0,0,.7); border: 2px solid #fff;
  opacity: 0; visibility: hidden; transform: translateX(-14px);
  transition: opacity .25s, transform .25s, visibility 0s .25s, background .2s;
}
#wstecz.on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s, visibility 0s, background .2s; }
#wstecz svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; transition: transform .2s, stroke .2s; }
#wstecz:hover { background: #fff; }
#wstecz:hover svg { stroke: #000; transform: translateX(-3px); }
#wstecz:active { transform: scale(.94); }

/* ═══════════════ TELEFON POZIOMO / NISKIE EKRANY ═══════════════ */
.top-slider { height: clamp(300px, 78svh, 860px); }
@media (max-height: 520px) and (orientation: landscape) {
  :root { --hdr: 64px; --hdr-miejsce: 64px; }
  .top.small { --hdr: 56px; }
  .logo3d, .top.small .logo3d { width: min(26vw, 190px); }
  .top-slider { height: calc(100svh - var(--hdr-miejsce)); min-height: 240px; }
  .slot-logo { width: min(52%, 420px); }
  .slot-kicker { margin-bottom: 8px; }
  .slot-sub { margin-top: 10px; }
  .slajd-podpis { padding: 40px 70px 40px; }
  .sl-kropki { bottom: 10px; }
  .odt { height: 150px; }
  .gf-slajd img, .galeria-tajne .gf-slajd video { max-height: calc(100svh - 120px); }
  .gf-mini { display: none; }
  #wstecz { width: 40px; height: 40px; top: 8px; left: 8px; }
}

/* ═══════════════ RAMKI PRODUKTÓW (każda karta ma data-ramka) ═══════════════
   Ramka = PNG/WebP z przezroczystym środkiem, położony nad kartą (::after, nie łapie kliknięć). Wymiary jednej ramki to 6 zmiennych:
     --ram-url  plik            --ram-ar   proporcje otworu (= karty)
     --ram-l/-t przesunięcie ramki względem karty (ujemne = wystaje na zewnątrz), w % szerokości/wysokości karty
     --ram-w/-h rozmiar całej ramki względem karty, w %
   NOWA RAMKA: wrzuć plik do img/, wyznacz otwór (otwór → zmienne) i dodaj JEDEN blok [data-ramka="nazwa"] poniżej + nazwę w RAMKI (server.py). */
#produkty .card {
  --ram-url: none; --ram-ar: auto; --ram-l: 0%; --ram-t: 0%; --ram-w: 100%; --ram-h: 100%;
  border: 0; background: #000; overflow: visible; aspect-ratio: var(--ram-ar);
  display: flex; flex-direction: column; justify-content: center; padding: 14px 14px 20px;
}
#produkty .card[data-ramka="kolce"] {   /* srebrny drut kolczasty, ramka 1100x1510, otwór 918x1340 */
  --ram-url: url("../img/ramka.webp"); --ram-ar: 918 / 1340;
  --ram-l: -10.02%; --ram-t: -7.16%; --ram-w: 119.83%; --ram-h: 112.69%;
}
#produkty .card[data-ramka="grunge"] {  /* postrzępiona biała, ramka 752x1078, otwór 664x992 */
  --ram-url: url("../img/ramka-grunge.webp"); --ram-ar: 664 / 992;
  --ram-l: -6.63%; --ram-t: -4.44%; --ram-w: 113.25%; --ram-h: 108.67%;
}
#produkty .card::after {
  content: ""; position: absolute; z-index: 6; pointer-events: none;
  left: var(--ram-l); top: var(--ram-t); width: var(--ram-w); height: var(--ram-h);
  background: var(--ram-url) center / 100% 100% no-repeat;
}
#produkty .card[data-ramka="kolce"]::after { filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
#produkty .card[data-ramka=""]::after { display: none; }
#produkty .card[data-ramka=""] { border: 2px solid rgba(255,255,255,.9); }
#produkty .card.wkrotce::after { opacity: .55; }
#produkty .card:hover { transform: none; box-shadow: none; }
.grid.uklad-glowny { gap: 18px 76px; }
@media (max-width: 860px) {
  .products { padding-inline: 46px; }
  .grid.uklad-glowny { gap: 60px; }
  .uklad-glowny .boczne .card { width: min(78%, 260px); }
}

/* ── najechanie na kartę boczną: powiększa się (z ramką) do rozmiaru karty głównej, a główna odsuwa się w bok bez zmiany rozmiaru.
      Liczby (--hover-skala, --hover-dx, --przesun) wylicza ui.js dla KAŻDEJ karty bocznej — działa na dowolną liczbę produktów.
      Tylko myszka (hover:hover); transform liczy się od nieruchomego układu, więc nic nie ucieka spod kursora. ── */
#produkty .uklad-glowny .card { transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .8s; transition-delay: 0s; will-change: transform; }
#produkty .uklad-glowny .boczne .card { transform-origin: 35% 50%; }   /* = OX w ui.js */
#produkty .uklad-glowny .boczne .card.hover-on { transform: translateX(var(--hover-dx, 0px)) scale(var(--hover-skala, 1)); z-index: 30; }
#produkty .uklad-glowny.bok-aktywny > .card.glowny { transform: translateX(var(--przesun, 0px)); }
#produkty .card.wkrotce.hover-on::after { opacity: 1; }
#produkty .card.wkrotce.hover-on .stage canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #produkty .uklad-glowny .card { transition: none; } }

/* odstęp na wystające kolce ramki */
#produkty .sec-title { margin-bottom: 64px; }
.grid.uklad-glowny { margin-bottom: 56px; }

/* ── 2026-10-04: ikony marki, slajdy-animacje, powiadomienie, tabela rozmiarów, ilość ── */
.ico.cart img.kosz-ikona { width: 57px; height: 57px; object-fit: contain; display: block; filter: drop-shadow(0 0 6px rgba(207,210,212,.35)); transition: transform .2s; }
.ico.cart:hover img.kosz-ikona { transform: scale(1.08); }
#wstecz img { width: 28px; height: 28px; object-fit: contain; display: block; transition: transform .2s; }
#wstecz:hover { background: #000; }
#wstecz:hover img { transform: translateX(-3px); }
.mail button { position: relative; overflow: visible; background: #0c0c0c; border-left: 1px solid rgba(255,255,255,.35); }
.mail button:hover { background: #1c1e20; }
.mail button img.ikona-strz { width: 30px; height: 30px; object-fit: contain; transform: scaleX(-1); transition: transform .25s; display: block; }
.mail button:hover img.ikona-strz { transform: scaleX(-1) translateX(-4px); }
.koperta-pop { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; object-fit: contain;
  pointer-events: none; z-index: 5; animation: koperta-pop 1.7s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes koperta-pop {
  0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 0; }
  14% { opacity: 1; transform: translate(0, -26px) scale(1.15) rotate(-8deg); }
  30% { transform: translate(0, -40px) scale(1) rotate(6deg); }
  75% { opacity: 1; }
  100% { transform: translate(18px, -120px) scale(.9) rotate(-4deg); opacity: 0; }
}
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 950; display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 14px;
  background: #000; color: #fff; font-size: 12px; letter-spacing: .18em; border: 2px solid var(--ice, #cfd2d4);
  box-shadow: 0 0 24px -4px rgba(207,210,212,.6); transform: translate(-50%, 30px); opacity: 0; transition: transform .35s, opacity .35s; pointer-events: none; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.toast img { width: 30px; height: 30px; object-fit: contain; animation: dzwon .9s .2s 2; transform-origin: 50% 10%; }
@keyframes dzwon { 0%,100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 50% { transform: rotate(-14deg); } 80% { transform: rotate(6deg); } }

/* animacje (garaż, miasto) jako slajdy górnego panelu */
.slajd-anim { background: #000; }
.slajd-anim .miasto { padding: 0; margin: 0; max-width: none; width: 100%; height: 100%; }
.slajd-anim .miasto-ramka { aspect-ratio: auto; width: 100%; height: 100%; max-width: none; border: 0; border-image: none; }
.slajd-anim .miasto-ramka canvas, .slajd-anim .miasto-cv { width: 100%; height: 100%; display: block; }

/* widok produktu: ilość + cena, tabela rozmiarów */
.pp-ilosc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pp-ilosc .pp-etykieta { margin: 0; }
.pp-ilosc .price { margin-left: auto; font-size: clamp(18px, 4.4vw, 24px); }
.pp-ster { display: inline-flex; align-items: center; }
.pp-ster button { width: 38px; height: 38px; background: none; border: 0; color: #fff; font: inherit; font-size: 20px; cursor: pointer; }
.pp-ster button:hover { color: var(--ice, #cfd2d4); }
.pp-ster span { min-width: 34px; text-align: center; }
.pp-tabela-btn { align-self: stretch; background: none; color: #fff; }
.pp-panel .pill.add { margin-top: 0; }
.tabela-modal { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.78); animation: pp-wejscie .22s ease-out; }
.tabela-okno { width: min(560px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: #050505; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 0 40px -6px rgba(207,210,212,.4); }
.tabela-gl { position: relative; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 56px 12px 18px; border-bottom: 1px solid rgba(255,255,255,.25); }
.tabela-gl b { font-weight: 400; letter-spacing: .2em; font-size: 13px; }
.tabela-gl span { color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.tabela-x { position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.tabela-x:hover { color: var(--ice, #cfd2d4); }
.tabela-przew { overflow: auto; padding: 14px 18px 18px; }
.tabela-okno table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: center; }
.tabela-okno th { font-weight: 400; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice, #cfd2d4); padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.4); }
.tabela-okno td { padding: 11px 6px; border-bottom: 1px solid rgba(255,255,255,.12); }
.tabela-okno td:first-child { font-weight: 700; letter-spacing: .08em; }
.tabela-okno tbody tr:hover { background: rgba(207,210,212,.07); }
.ico.cart { height: auto; min-height: 44px; }

/* ── 2026-10-05: rozmiar pod ceną w widoku produktu + większe zdjęcia ── */
.pp-rozm button { min-width: 52px; height: 46px; font-size: 15px; }
.pp-rozm.brak button { border-color: #ff4d6d; }
.pp-rozm-et.brak { color: #ff4d6d; }
.tabela-modal { z-index: 600; }
/* widok produktu: panel od góry, większe zdjęcia produktu */
.pp-panel { justify-content: flex-start; align-self: start; }
.pp-mini { gap: 10px; }
.pp-panel .pp-mini button { width: 92px; height: 92px; }
@media (max-width: 760px) { .pp-panel .pp-mini button { width: calc(25% - 8px); height: auto; aspect-ratio: 1 / 1; } }

/* ── 2026-10-08: wyciszanie i głośność filmów w górnym panelu ── */
.sl-dzwiek { position: absolute; right: 18px; bottom: 18px; z-index: 6; display: none; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.35); }
.sl-dzwiek.on { display: flex; }
.sl-mute { width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; padding: 0; color: #fff; cursor: pointer; }
.sl-mute svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.sl-mute:hover { color: var(--ice); }
.sl-mute.wl { color: rgba(255,255,255,.65); }
.sl-gl { -webkit-appearance: none; appearance: none; width: 110px; height: 4px; margin: 0; background: linear-gradient(90deg, var(--ice) var(--p, 40%), rgba(255,255,255,.28) var(--p, 40%)); cursor: pointer; }
.sl-gl::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 18px; background: #fff; border: 2px solid #000; border-radius: 0; }
.sl-gl::-moz-range-thumb { width: 10px; height: 16px; background: #fff; border: 2px solid #000; border-radius: 0; }
.sl-gl:focus-visible, .sl-mute:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
@media (max-width: 760px) { .sl-dzwiek { right: 8px; bottom: 28px; gap: 6px; } .sl-gl { width: 80px; } }
/* ── nowe ikony wyciszenia i suwak głośności (grafiki z arkusza usera, srebrne) ── */
.sl-dzwiek { padding: 4px 8px 4px 4px; gap: 4px; border: 0; background: rgba(0,0,0,.55); }
.sl-mute { width: 52px; height: 58px; }
.sl-mute img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 0 5px rgba(207,210,212,.35)); transition: transform .2s; }
.sl-mute:hover img { transform: scale(1.08); }
.sl-mute.wl img { opacity: .8; }
.sl-gl-wrap { position: relative; width: 132px; height: 61px; background: url(../img/ikona-suwak.png) center / 100% 100% no-repeat; flex: none; }
.sl-gl-wrap .sl-gl { position: absolute; left: 7%; top: 33%; width: 64%; height: 25%; background: linear-gradient(90deg, rgba(207,210,212,.7) var(--p, 40%), transparent var(--p, 40%)); }
.sl-gl-wrap .sl-gl::-webkit-slider-thumb { width: 6px; height: 100%; margin-top: 0; background: #fff; border: 0; box-shadow: 0 0 6px #fff; }
.sl-gl-wrap .sl-gl::-moz-range-thumb { width: 6px; height: 100%; background: #fff; border: 0; border-radius: 0; box-shadow: 0 0 6px #fff; }
@media (max-width: 760px) { .sl-mute { width: 42px; height: 48px; } .sl-gl-wrap { width: 104px; height: 48px; } }

/* ── 2026-10-08 (2): głośność — pasek + kulka na ekranie, bez ciemnego tła ── */
.sl-dzwiek { right: 18px; bottom: 16px; padding: 0; gap: 4px; background: none; border: 0; filter: drop-shadow(0 2px 7px rgba(0,0,0,.85)); }
.sl-mute { width: 56px; height: 64px; }
.sl-gl-wrap { width: 172px; height: 72px; background: none; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.sl-gl-wrap:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.sl-pasek-gl { position: absolute; inset: 0; background: url(../img/ikona-pasek.png) center / 100% 100% no-repeat; }
.sl-wyp { position: absolute; left: 7%; top: 21%; height: 37%; width: calc(80% * var(--w, .4)); background: linear-gradient(90deg, rgba(207,210,212,.35), rgba(255,255,255,.75)); pointer-events: none; }
.sl-galka { position: absolute; top: 41%; left: calc(8% + 84% * var(--w, .4)); width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none;
  background: url(../img/ikona-galka.png) center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(207,210,212,.55)); transition: transform .15s; }
.sl-gl-wrap:active .sl-galka { transform: scale(1.12); }
@media (max-width: 760px) { .sl-dzwiek { right: 8px; bottom: 30px; } .sl-mute { width: 46px; height: 52px; } .sl-gl-wrap { width: 136px; height: 58px; } .sl-galka { width: 34px; height: 34px; margin: -17px 0 0 -17px; } }

/* ═══════════════ FUNDAMENT „SKLEP” (2026-10-18): betonowa płyta na całą szerokość, ozdobne gzymsy, metalowy napis wtopiony w beton ═══════════════ */
#produkty { position: relative; padding-top: 0; }
#produkty > .grid { position: relative; z-index: 2; }
.fundament {
  position: relative; z-index: 0; width: 100vw; margin: 0 calc(50% - 50vw) 64px; height: clamp(72px, 8.5vw, 112px);
  display: grid; place-items: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(255,255,255,.04) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.4)),
    url("../img/sc-grafit.jpg") center / 520px repeat;
  box-shadow: inset 0 0 60px rgba(0,0,0,.55);
}
/* gzymsy: profil (listwa + wałek + rowek) z rzędem ząbków — górny ozdobny, dolny lżejszy */
.fundament-gzyms { position: absolute; left: 0; right: 0; bottom: -12px; height: 14px; z-index: 1;
  background: linear-gradient(#77797b 0, #4c4e50 30%, #2a2b2c 62%, #5a5c5e 64%, #303132 82%, #161718 100%);
  border-top: 1px solid rgba(255,255,255,.22); box-shadow: 0 10px 18px rgba(0,0,0,.7); }
.fundament-gzyms.gora { top: -16px; bottom: auto; height: 20px; border-top: 1px solid rgba(255,255,255,.3);
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(0,0,0,.55) 14px 16px, rgba(255,255,255,.08) 16px 17px, transparent 17px 30px) 0 13px / 100% 7px no-repeat,
    linear-gradient(#8a8c8e 0, #5d5f61 18%, #3a3b3d 40%, #6b6d6f 46%, #2f3031 58%, #4a4c4e 64%, #222324 100%);
  box-shadow: 0 6px 12px rgba(0,0,0,.6), 0 -6px 14px rgba(0,0,0,.5); }
/* napis: szczotkowana stal wlana w beton — h2 niewidoczny (dla czytników/edytora), ::before = ciemna wnęka wokół liter,
   ::after = metal (gradient przycięty do liter) + jasna krawędź betonu i cień; wszystko w jednym stosie, wnęka pod metalem */
.fundament-napis {
  position: relative; z-index: 2; margin: 0; font-family: 'Dela Gothic One', 'Space Mono', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(24px, 4.4vw, 54px); line-height: 1; letter-spacing: .08em; transform: scaleY(.9); color: transparent; isolation: isolate;
}
.fundament-napis::before, .fundament-napis::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; text-transform: uppercase; }
.fundament-napis::before { z-index: 1; color: #040404; -webkit-text-stroke: .1em rgba(0,0,0,.85); filter: blur(1.6px) drop-shadow(0 .03em 0 rgba(255,255,255,.14)); }
.fundament-napis::after {
  z-index: 2; color: transparent;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,.07) 1px 3px),
    radial-gradient(ellipse 14% 34% at 24% 72%, rgba(70,48,30,.4), transparent 70%),
    radial-gradient(ellipse 10% 26% at 72% 28%, rgba(50,36,24,.34), transparent 70%),
    linear-gradient(180deg, #f2f4f5 0%, #b2b7ba 26%, #ffffff 44%, #6f7578 52%, #bcc0c3 74%, #5e6366 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,.95)) drop-shadow(0 1px 0 rgba(255,255,255,.3));
}
body.edytor .fundament-napis { color: #e4e6e7; }
body.edytor .fundament-napis::before, body.edytor .fundament-napis::after { display: none; }
@media (max-width: 600px) { .fundament { margin-bottom: 52px; } .fundament-gzyms.gora { height: 16px; top: -12px; } }

/* ── grafiti na płycie: stałe po bokach (F + aparat | flagi), losowe małe co 4 s (grafiti.js) ── */
.fundament-napis { font-size: calc(clamp(24px, 4.4vw, 54px) * var(--skala, 1)); }
.fund-lewa, .fund-prawa { position: absolute; top: 3px; bottom: 3px; z-index: 3; display: flex; align-items: center; gap: clamp(4px, 1vw, 14px); }
.fund-lewa { left: clamp(8px, 1.8vw, 30px); }
.fund-prawa { right: clamp(8px, 1.8vw, 30px); gap: clamp(4px, .9vw, 12px); }
.fund-lewa img { height: 100%; width: auto; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); user-select: none; -webkit-user-drag: none; }
.fund-lewa .graf-f { height: 98%; }
.graf-aparat { display: flex; align-items: center; height: 80%; cursor: pointer; transition: transform .25s cubic-bezier(.3,1.6,.5,1), filter .25s; -webkit-tap-highlight-color: transparent; }
.graf-aparat img { height: 100%; }
.graf-aparat:hover { transform: rotate(-5deg) scale(1.1); filter: drop-shadow(0 0 10px rgba(207,210,212,.7)); }
.graf-aparat:focus-visible, .graf-flaga:focus-visible { outline: 2px solid var(--ice, #cfd2d4); outline-offset: 3px; }
.graf-flaga { padding: 0; border: 0; background: none; cursor: pointer; width: clamp(34px, 5.4vw, 84px); line-height: 0; opacity: .5; transform: scale(.88);
  filter: saturate(.55) drop-shadow(0 2px 3px rgba(0,0,0,.7)); transition: opacity .25s, transform .3s cubic-bezier(.3,1.6,.5,1), filter .25s; -webkit-tap-highlight-color: transparent; }
.graf-flaga img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.graf-flaga:hover { opacity: .9; transform: rotate(-4deg) scale(1.06); }
.graf-flaga.on { opacity: 1; transform: scale(1.08); filter: saturate(1.1) drop-shadow(0 0 9px rgba(255,255,255,.35)) drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.graf-losowe { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.graf-los { position: absolute; width: auto; opacity: .9; transform: rotate(var(--obr, 0deg)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  animation: graf-maluj .95s cubic-bezier(.3,.7,.3,1) both; transition: opacity 1.5s; }
.graf-los.znika { opacity: 0; }
@keyframes graf-maluj {          /* „spray” z góry w dół: odsłanianie + rozmycie, które się wyostrza */
  0% { clip-path: inset(0 0 100% 0); filter: blur(7px) brightness(1.8); opacity: 0; }
  60% { filter: blur(2px) brightness(1.2); opacity: .95; }
  100% { clip-path: inset(0); filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); opacity: .9; }
}
@media (max-width: 600px) {
  .fundament { height: 84px; }
  .fundament-napis { font-size: calc(21px * var(--skala, 1)); margin-left: 30px; }
  .fund-lewa { left: 4px; gap: 2px; } .fund-prawa { right: 5px; gap: 3px; }
  .fund-lewa .graf-f { height: 66%; } .graf-aparat { height: 50%; }
  .graf-flaga { width: 38px; }
  .fund-prawa { gap: 4px; }
  .fundament-napis { margin-left: 0; }
  .graf-los.tlo { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .graf-los { animation: none; } }

/* podpis w stopce: białe logo Spark Scale + SPARK SCALE + graffiti „G” jak sygnatura */
.foot-podpis { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; padding: 10px 6px 0; color: #fff; text-decoration: none; opacity: .92; transition: opacity .25s, filter .25s; -webkit-tap-highlight-color: transparent; }
.foot-podpis:hover { opacity: 1; filter: drop-shadow(0 0 10px rgba(255,255,255,.35)); }
.foot-podpis span { font: 700 13px 'Space Mono', monospace; letter-spacing: .34em; margin-right: -.34em; white-space: nowrap; }
.foot-spark-logo { height: 30px; width: auto; display: block; }
.foot-g { height: 38px; width: auto; display: block; margin-left: -2px; transform: rotate(-9deg) translateY(2px); transform-origin: 40% 80%; filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.foot-podpis:hover .foot-g { transform: rotate(-3deg) translateY(0) scale(1.08); }
@media (max-width: 600px) { .foot-spark-logo { height: 26px; } .foot-podpis span { font-size: 11.5px; letter-spacing: .28em; } .foot-g { height: 34px; } }