*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#020208!important;color:#fff;font-family:Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;overflow-x:hidden}
header{padding:24px 16px 8px;text-align:center;background:#000;position:relative;z-index:10}
.logo-mainframe{width:clamp(352px,67vw,736px);margin:0 auto;user-select:none}
.logo-svg{width:100%;height:auto;overflow:visible}
.puzzell-path{stroke:#ffea00;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0.05}
.drop-path{stroke:#ff0033;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0.05}
.system-boot .puzzell-path,.system-boot .drop-path,
#puzzellGroup.system-boot .puzzell-path,#dropGroup.system-boot .drop-path{
  animation:neonPowerOn 1.2s linear forwards;
}
@keyframes neonPowerOn{
  0%{opacity:.05}10%{opacity:.8}15%{opacity:.1}20%{opacity:.9}25%{opacity:.15}
  35%{opacity:.95}40%{opacity:.2}55%{opacity:1}100%{opacity:.95}
}
.puzzell-glow{opacity:.95!important;filter:drop-shadow(0 0 2px #ffea00) drop-shadow(0 0 6px #ff9900)}
.drop-glow{opacity:.95!important;filter:drop-shadow(0 0 2px #ff0033) drop-shadow(0 0 6px #cc0000)}
.menu-container{width:100%;max-width:1100px;margin:10px auto 0;padding:8px 24px}
.menu-grid{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:flex-start;width:100%}
.menu-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;min-width:0;padding:0 4px;cursor:pointer}
.icon-container{width:72px;height:56px;display:flex;align-items:center;justify-content:center}
.menu-svg{width:100%;height:100%;overflow:visible}
.menu-path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.menu-path.draw-path.lit,.menu-path.lit{animation:slowMenuDraw 1.6s ease forwards}
@keyframes slowMenuDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.menu-title{font-family:'Caveat',cursive!important;font-size:1.05rem;color:#55555e;text-transform:uppercase;text-align:center;margin-top:4px;line-height:1.15}
.m1-item .main-line{stroke:#ff007f}.m1-item .sub-line{stroke:#ffea00}
.m2-item .main-line{stroke:#00f0ff}.m2-item .sub-line{stroke:#cc00ff}
.m3-item .main-line{stroke:#00ff66}.m3-item .sub-line{stroke:#ff6c00}
.m4-item .main-line{stroke:#ffb700}.m4-item .sub-line{stroke:#00ffff}
.m5-item .main-line{stroke:#ff0033}.m5-item .sub-line{stroke:#7a00ff}
.m6-item .main-line{stroke:#ffb700}.m6-item .sub-line{stroke:#ff6ec7}
.menu-item.active .menu-title{text-decoration:underline;text-underline-offset:5px}
.m1-item.active .menu-title,.m1-item:hover .menu-title{color:#ff007f;text-shadow:0 0 6px #ff007f}
.m2-item.active .menu-title,.m2-item:hover .menu-title{color:#00f0ff;text-shadow:0 0 6px #00f0ff}
.m3-item.active .menu-title,.m3-item:hover .menu-title{color:#00ff66;text-shadow:0 0 6px #00ff66}
.m4-item.active .menu-title,.m4-item:hover .menu-title{color:#ffb700;text-shadow:0 0 6px #ffb700}
.m5-item.active .menu-title,.m5-item:hover .menu-title{color:#ff0033;text-shadow:0 0 6px #ff0033}
.m6-item.active .menu-title,.m6-item:hover .menu-title{color:#ffb700;text-shadow:0 0 6px #ffb700}



.slider-wrap{
  max-width:900px;margin:0 auto 24px;padding:0 8px;background:transparent;
  display:grid;grid-template-columns:56px 1fr 56px;grid-template-rows:auto auto;
  align-items:center;gap:0 4px;
}
.slider-wrap #prev{grid-column:1;grid-row:1;justify-self:center}
.slider-wrap #next{grid-column:3;grid-row:1;justify-self:center}
.slider-wrap .viewport{grid-column:2;grid-row:1}
.slider-wrap .dots{grid-column:1 / -1;grid-row:2}
.arrows-side,.slider-wrap > button{
  background:transparent;border:none;cursor:pointer;padding:4px;
  width:56px;height:48px;display:flex;align-items:center;justify-content:center;z-index:2;
}
.slider-wrap > button svg{width:52px;height:40px;overflow:visible}
.slider-wrap > button path{
  fill:none;stroke:#00f0ff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px #00f0ff) drop-shadow(0 0 12px #00f0ff66);
  transition:stroke .2s,filter .2s;
}
.slider-wrap > button:hover path{stroke:#fff;filter:drop-shadow(0 0 6px #00f0ff) drop-shadow(0 0 18px #00f0ff)}
.viewport{overflow:hidden;background:transparent;touch-action:pan-y;min-height:0}
.track{display:flex;will-change:transform;transition:transform .32s cubic-bezier(.22,.8,.3,1);cursor:grab}
.track.dragging{transition:none;cursor:grabbing}
.slide{flex:0 0 100%;display:flex;justify-content:center;align-items:center;padding:8px 4px 12px;user-select:none;background:transparent}
.film{width:min(72vw,380px);aspect-ratio:320/380;position:relative;background:#0a0a0c;border-radius:14px;
  box-shadow:0 0 0 2px #2a2a32,0 12px 36px rgba(0,0,0,.5)}
.holes-t,.holes-b{position:absolute;left:8%;right:8%;height:10px;background:repeating-linear-gradient(90deg,#c8c8d0 0 12px,transparent 12px 24px);opacity:.4;pointer-events:none}
.holes-t{top:5.5%}.holes-b{bottom:5.5%}
.window{position:absolute;left:8%;top:14%;width:84%;height:70%;border:1px solid #3a3a48;overflow:hidden;display:flex;align-items:center;justify-content:center}
.window img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.dots button{width:9px;height:9px;border:0;border-radius:50%;background:#333;cursor:pointer;padding:0}
.dots button.on{background:#00f0ff;box-shadow:0 0 8px #00f0ff}
.hint{display:none!important}


.site-footer{position:relative;width:100%;max-width:1450px;margin:24px auto 0;padding:12px 16px 16px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;font-family:Tahoma,sans-serif!important;font-size:.75rem;color:#444}
.site-footer .footer-left{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center;width:100%;text-align:center}
.site-footer a{color:#666;text-decoration:none}.site-footer a:hover{color:#aaa}
@media (max-width:720px){
  .menu-grid{flex-wrap:wrap;justify-content:center;gap:12px 16px}
  .menu-item{flex:0 0 auto;width:88px}
  .film{width:min(92vw,340px)}
  .viewport,.slide{min-height:auto}
}


/* === MENU CANON v20260929 — identyczne na KAZDEJ stronie === */
header {
  padding: 24px 16px 8px !important;
  text-align: center !important;
  background: #000 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.logo-mainframe {
  width: clamp(352px, 67vw, 736px) !important;
  margin: 0 auto !important;
  height: auto !important;
}
.menu-container {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 10px auto 0 !important;
  padding: 8px 24px 4px !important;
  box-sizing: border-box !important;
}
.menu-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.menu-item {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 2px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}
.icon-container {
  width: 72px !important;
  height: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.menu-svg, .icon-container svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 88px !important;
  overflow: visible !important;
}
.menu-title {
  font-family: 'Caveat', cursive !important;
  font-size: 1.05rem !important;
  font-weight: bold !important;
  letter-spacing: 0.4px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  text-transform: uppercase !important;
}

@media (max-width: 720px) {
  .menu-grid {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 14px !important;
  }
  .menu-item {
    flex: 0 0 auto !important;
    width: 88px !important;
  }
  .icon-container {
    width: 64px !important;
    height: 52px !important;
    min-height: 52px !important;
  }
  .menu-title { font-size: 0.98rem !important; }
}
/* === /MENU CANON === */


/* Linia pod menu — jak na home / o mnie */
.section-divider,
hr.section-divider {
  width: min(92%, 900px) !important;
  max-width: min(92%, 900px) !important;
  height: 2px !important;
  border: none !important;
  margin: 18px auto 0 !important;
  background: linear-gradient(90deg, transparent 0%, #ffffff 20%, #ffffff 80%, transparent 100%) !important;
  box-shadow: 0 0 6px #ffffff, 0 0 16px #7df9ff, 0 0 32px rgba(125, 249, 255, 0.45) !important;
  animation: dividerPulse 3.5s ease-in-out infinite !important;
}
@keyframes dividerPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}


/* Tytul strony — identyczny jak home / o mnie / pomysly */
.page-title {
  width: 100% !important;
  max-width: 1450px !important;
  margin: 14px auto 0 !important;
  text-align: left !important;
  font-family: Tahoma, Geneva, Verdana, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
  color: #55555e !important;
  padding: 0 clamp(14px, 2vw, 26px) !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
}
@media (max-width: 640px) {
  .page-title {
    font-size: 1.45rem !important;
    text-align: center !important;
  }
}


/* === MENU IKONY: ta sama wysokosc, BEZ rysowania (od razu widoczne) === */
.icon-container {
  width: 72px !important;
  height: 56px !important;
  min-width: 72px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.menu-svg,
.icon-container svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 88px !important;
  max-height: 56px !important;
  overflow: visible !important;
}
.menu-path,
.menu-path.draw-path,
.menu-path.main-line,
.menu-path.sub-line,
nav .menu-path,
.menu-grid .menu-path {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.menu-path.lit,
.menu-path.draw-path.lit {
  stroke-dashoffset: 0 !important;
  animation: none !important;
}
@media (max-width: 720px) {
  .icon-container {
    width: 64px !important;
    height: 52px !important;
    min-width: 64px !important;
    min-height: 52px !important;
  }
  .menu-svg, .icon-container svg {
    max-height: 52px !important;
  }
}
/* === /MENU IKONY === */


/* Przyciski podgladu — neon */
.btns a, .btns button, .modal .btns a, .modal .btns button {
  font-family: Tahoma, Geneva, Verdana, sans-serif !important;
  padding: 11px 16px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: #0e0e14 !important;
  cursor: pointer !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  transition: box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}

/* mBack — normalny przycisk, nie rozciągaj na całą kolumnę */
.btns #mBack, .modal #mBack, button#mBack,
#backdrop .btns #mBack {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: flex-start !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}
.modal-side .btns, #backdrop .modal-side .btns, #backdrop .btns {
  flex: 0 0 auto !important;
  margin-top: 12px !important;
  align-items: center !important;
  align-content: flex-start !important;
}

/* Wroc do filmu — zolty */
.btns #mBack, .modal #mBack, button#mBack {
  color: #ffea00 !important;
  border-color: #ffea00 !important;
  box-shadow: 0 0 8px rgba(255,234,0,0.45), 0 0 16px rgba(255,234,0,0.2) !important;
}
.btns #mBack:hover, .btns #mBack:active, .modal #mBack:hover, .modal #mBack:active, button#mBack:hover, button#mBack:active {
  color: #fff8a0 !important;
  background: rgba(255,234,0,0.12) !important;
  box-shadow: 0 0 14px rgba(255,234,0,0.9), 0 0 28px rgba(255,234,0,0.5), 0 0 40px rgba(255,200,0,0.25) !important;
  filter: brightness(1.15) !important;
}
/* Wroc do kolekcji — czerwony */
.btns a[href="home.php"], .modal .btns a[href="home.php"] {
  color: #ff0033 !important;
  border-color: #ff0033 !important;
  box-shadow: 0 0 8px rgba(255,0,51,0.45), 0 0 16px rgba(255,0,51,0.2) !important;
}
.btns a[href="home.php"]:hover, .btns a[href="home.php"]:active,
.modal .btns a[href="home.php"]:hover, .modal .btns a[href="home.php"]:active {
  color: #ffb0c0 !important;
  background: rgba(255,0,51,0.12) !important;
  box-shadow: 0 0 14px rgba(255,0,51,0.95), 0 0 28px rgba(255,0,51,0.55), 0 0 40px rgba(255,0,80,0.3) !important;
  filter: brightness(1.15) !important;
}
/* Idz do produktow — zielony */
.btns a.fill, .modal .btns a.fill, .btns a[href*="product.php"], .modal .btns a[href*="product.php"] {
  color: #00ff66 !important;
  border-color: #00ff66 !important;
  background: rgba(0,255,102,0.08) !important;
  box-shadow: 0 0 8px rgba(0,255,102,0.45), 0 0 16px rgba(0,255,102,0.2) !important;
  font-weight: 700 !important;
}
.btns a.fill:hover, .btns a.fill:active, .modal .btns a.fill:hover, .modal .btns a.fill:active,
.btns a[href*="product.php"]:hover, .btns a[href*="product.php"]:active {
  color: #b8ffd0 !important;
  background: rgba(0,255,102,0.18) !important;
  box-shadow: 0 0 14px rgba(0,255,102,0.95), 0 0 28px rgba(0,255,102,0.55), 0 0 40px rgba(0,255,80,0.3) !important;
  filter: brightness(1.15) !important;
}


/* iOS Safari: jeden slajd = 100% viewport (bez dwoch klatek obok) */
.viewport {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}
.track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 2px 12px !important;
}
.film {
  width: min(78vw, 340px) !important;
  max-width: calc(100% - 8px) !important;
  margin: 0 auto !important;
}
@media (max-width: 720px) {
  .slider-wrap {
    grid-template-columns: 40px 1fr 40px !important;
    padding: 0 2px !important;
    max-width: 100% !important;
  }
  .film {
    width: min(70vw, 280px) !important;
  }
}


/* Karuzela: zawsze 1 klatka na srodku */
.slider-wrap {
  width: 100% !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.viewport {
  width: 100% !important;
  overflow: hidden !important;
}
.track {
  display: flex !important;
  flex-wrap: nowrap !important;
}
.slide {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
.film {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* PODGLAD: desktop ~3/4 — duza grafika | tekst + przyciski z prawej */
#backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.92);
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
  overflow: auto;
  box-sizing: border-box;
}
#backdrop.open { display: flex !important; }
.modal {
  width: min(96vw, 1280px) !important;
  max-width: 1280px !important;
  max-height: 92vh !important;
  background: #0a0a0e !important;
  border: 1px solid #2a2a35 !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  margin: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 28px !important;
  box-sizing: border-box !important;
}
.modal > .film {
  flex: 0 0 auto !important;
  width: min(62vw, 760px) !important;
  max-width: 760px !important;
  max-height: 88vh !important;
  aspect-ratio: 320 / 380 !important;
  margin: 0 !important;
}
.modal .window {
  left: 3% !important;
  top: 5% !important;
  width: 94% !important;
  height: 90% !important;
}
.modal-side {
  flex: 1 1 320px !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 4px 0 !important;
}
.modal-side h2,
.modal h2 {
  font-family: Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem) !important;
  text-align: left !important;
  margin: 0 0 12px !important;
  color: #eee !important;
  width: 100% !important;
}
.modal-side p,
.modal p {
  font-family: Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem) !important;
  line-height: 1.55 !important;
  color: #a8a8b0 !important;
  text-align: left !important;
  margin: 0 0 20px !important;
  max-height: 42vh !important;
  overflow: auto !important;
  width: 100% !important;
}
.modal .btns,
.modal-side .btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin-top: auto !important;
}
@media (max-width: 800px) {
  .modal {
    flex-direction: column !important;
    width: min(96vw, 420px) !important;
    max-height: 94vh !important;
    padding: 14px !important;
    gap: 12px !important;
    overflow: auto !important;
  }
  .modal > .film {
    width: min(92vw, 460px) !important;
    max-height: 62vh !important;
  }
  .modal-side {
    width: 100% !important;
    align-items: center !important;
  }
  .modal-side h2, .modal h2,
  .modal-side p, .modal p {
    text-align: center !important;
  }
  .modal .btns, .modal-side .btns {
    justify-content: center !important;
  }
}


/* FORCE PODGLAD — zawsze nad wszystkim */
#backdrop {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(0,0,0,0.94) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2vh 2vw !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  pointer-events: auto !important;
}
#backdrop.open {
  display: flex !important;
}
#backdrop .modal {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: min(96vw, 1280px) !important;
  max-width: 1280px !important;
  max-height: 92vh !important;
  background: #0a0a0e !important;
  border: 1px solid #333 !important;
  border-radius: 16px !important;
  padding: 22px !important;
  gap: 28px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}
#backdrop .modal > .film {
  flex: 0 0 auto !important;
  width: min(62vw, 760px) !important;
  max-width: 760px !important;
  max-height: 88vh !important;
  aspect-ratio: 320/380 !important;
  margin: 0 !important;
  position: relative !important;
}
#backdrop .modal .window {
  left: 3% !important;
  top: 5% !important;
  width: 94% !important;
  height: 90% !important;
}
#backdrop .modal-side {
  flex: 1 1 280px !important;
  min-width: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
}
#backdrop .modal-side h2 { text-align: left !important; color: #fff !important; margin: 0 0 12px !important; font-family: Tahoma,sans-serif !important; }
#backdrop .modal-side p { text-align: left !important; color: #aaa !important; margin: 0 0 18px !important; font-family: Tahoma,sans-serif !important; }
#backdrop .btns { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: flex-start !important; }
@media (max-width: 800px) {
  #backdrop .modal { flex-direction: column !important; width: min(96vw, 420px) !important; }
  #backdrop .modal > .film { width: min(92vw, 460px) !important; max-height: 62vh !important; }
  #backdrop .modal-side h2, #backdrop .modal-side p { text-align: center !important; }
  #backdrop .btns { justify-content: center !important; }
}


/* === KAFELKI JAK NA HOME (collection.php bez slug) === */
/* Czysta siatka kafelków z index.php */
        .main-container { width: 100%; padding: 20px; }
        .cyber-grid { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: clamp(18px, 2.6vw, 38px) clamp(18px, 2.4vw, 34px); max-width: 1450px; margin: 0 auto; }
        
        /* KAFELKI KUBISTYCZNE - WYRAZISTE ŚCIĘTE NAROŻNIKI DOKŁADNIE ZEGAIDZONE Z RAMKĄ SVG */
        a.tile-node { text-decoration: none; color: inherit; display: block; }
        .tile-node { 
            background: #060609; 
            position: relative; 
            padding: clamp(18px, 2.4vw, 30px) clamp(14px, 1.9vw, 23px); 
            cursor: pointer; 
            transition: background 0.4s, transform 0.4s, box-shadow 0.4s; 
            /* Ta sama geometria co 25px na 340x390, wyrażona w % - skaluje się razem z kafelkiem */
            clip-path: polygon(0 6.41%, 7.353% 0, 92.647% 0, 100% 6.41%, 100% 93.59%, 92.647% 100%, 7.353% 100%, 0 93.59%); 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: space-between; 
            width: clamp(195px, 19vw, 258px);  
            aspect-ratio: 340 / 390; 
            box-sizing: border-box;
        }
        
        /* KONTENER RAMKI - DOPIĘTY IDEALNIE DO KRAWĘDZI BRYŁY (skaluje się razem z kafelkiem) */
        .border-container {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            z-index: 2;
        }
        .border-svg { width: 100%; height: 100%; fill: none; }
        
        /* CIEŃSZA, SUPER ELEGANCKA RAMKA ZEWNĘTRZNA BIEGNĄCA KOŁO W KOŁO MASKI CLIP-PATH */
        .border-path {
            stroke-width: 3.5px; 
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
        }
        
        /* NAZWY KOLEKCJI - CZYSTY STYL ODRĘCZNY */
        .node-title { 
            font-family: Tahoma, Geneva, Verdana, sans-serif; 
            font-size: clamp(1.45rem, 2.35vw, 2.05rem); 
            font-weight: bold; 
            color: #9a9aa8; 
            text-align: center; 
            line-height: 1.1;
            transition: color 0.4s;
        }
        
        /* GRAFIKI SVG - BRAK ROZMYĆ, MAKSYMALNA CZYSTOŚĆ LINII (proporcja 200/390 zachowana w %) */
        .neon-container { width: 100%; height: 51%; display: flex; align-items: center; justify-content: center; }
        .neon-svg { width: 100%; height: 100%; fill: none; }
        
        /* ODCHUDZONA, IDEALNIE OSTRA LINIA RYSUNKU WSPÓŁGRAJĄCA Z RAMKĄ */
        .neon-path { stroke-width: 3.8px; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 0.5s ease; }
        
        /* RYSUJE SIĘ RAZ PRZY ZAŁADOWANIU STRONY (klasa .lit dodawana przez JS), POTEM ZOSTAJE NA STAŁE ZAPALONE */
        .draw-path {
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
        }
        .draw-path.lit {
            animation: slowLineDraw 1.8s ease forwards;
        }
        @keyframes slowLineDraw {
            from { stroke-dashoffset: 100; }
            to { stroke-dashoffset: 0; }
        }
        .tile-node:hover { 
            background: #09090f; 
            transform: translateY(-8px); 
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9); 
        }

        .border-path.lit {
            animation: fastBorderDraw 1s ease forwards;
        }
        @keyframes fastBorderDraw {
            from { stroke-dashoffset: 100; }
            to { stroke-dashoffset: 0; }
        }

        /* PROFILE JASKRAWYCH KOLORÓW */
        
        /* 1. Funny Memes (Neonowy Róż + Jaskrawy Żółty) */
        .n1-node .main-line { stroke: #ff007f; } .n1-node .sub-line { stroke: #ffea00; } .n1-node .border-path { stroke: #ff007f; }
        .n1-node:hover .node-title { color: #ff007f; }

        /* 2. Cottagecore (Zielony Mech + Ciepły Pomarańcz) */
        .n2-node .main-line { stroke: #00ff66; } .n2-node .sub-line { stroke: #ff6c00; } .n2-node .border-path { stroke: #00ff66; }
        .n2-node:hover .node-title { color: #00ff66; }

        /* 3. Animal Art (Morski Cyjan + Magnetyczny Fiolet) */
        .n3-node .main-line { stroke: #00f0ff; } .n3-node .sub-line { stroke: #cc00ff; } .n3-node .border-path { stroke: #00f0ff; }
        .n3-node:hover .node-title { color: #00f0ff; }

        /* 4. Dark Horror (Krwista Czerwień + Punkowy Fiolet) */
        .n4-node .main-line { stroke: #ff0033; } .n4-node .sub-line { stroke: #7a00ff; } .n4-node .border-path { stroke: #ff0033; }
        .n4-node:hover .node-title { color: #ff0033; }

        /* 5. Tattoo (Złoty Bursztyn + Lodowy Cyjan) */
        .n5-node .main-line { stroke: #ffb700; } .n5-node .sub-line { stroke: #00ffff; } .n5-node .border-path { stroke: #ffb700; }
        .n5-node:hover .node-title { color: #ffb700; }

        /* 6. Cyberpunk (Toksyczny Róż + Neonowy Seledyn) */
        .n6-node .main-line { stroke: #ff00ff; } .n6-node .sub-line { stroke: #00ffcc; } .n6-node .border-path { stroke: #ff00ff; }
        .n6-node:hover .node-title { color: #ff00ff; }

        /* 7. Mind & Identity (Głęboki Kobalt + Ostry Róż) */
        .n7-node .main-line { stroke: #0072ff; } .n7-node .sub-line { stroke: #ff00a0; } .n7-node .border-path { stroke: #0072ff; }
        .n7-node:hover .node-title { color: #0072ff; }
    
        /* Napisy pod logo (z admina) */
        .glitch-banner {
            text-align: center;
            max-width: 640px;
            margin: 6px auto 18px;
            padding: 0 16px;
            position: relative;
            z-index: 2;
        }
        .glitch-line {
            font-family: Tahoma, Geneva, Verdana, sans-serif;
            font-size: clamp(0.85rem, 2.4vw, 1.15rem);
            letter-spacing: 0.06em;
            line-height: 1.45;
            color: var(--gcolor, #ff0055);
            text-shadow:
                0 0 8px color-mix(in srgb, var(--gcolor, #ff0055) 55%, transparent),
                2px 0 0 rgba(0, 255, 255, 0.35),
                -2px 0 0 rgba(255, 0, 85, 0.35);
            margin: 0 0 8px;
            animation: glitchLineFlicker 4.5s ease-in-out infinite;
        }
        .glitch-line:nth-child(2n) { animation-delay: 0.7s; }
        .glitch-line:nth-child(3n) { animation-delay: 1.4s; }
        @keyframes glitchLineFlicker {
            0%, 90%, 100% { opacity: 1; transform: translate(0, 0); filter: none; }
            92% { opacity: 0.85; transform: translate(-1px, 0.5px); }
            94% { opacity: 1; transform: translate(1px, -0.5px); filter: hue-rotate(20deg); }
            96% { opacity: 0.9; transform: translate(-0.5px, 0); }
        }
        @media (max-width: 640px) {
            .glitch-banner { margin-bottom: 12px; }
            .glitch-line { font-size: 0.9rem; }
        }

    
/* KAFELKI KOLEKCJI — widoczne + animacja rysowania (bez !important na dashoffset:0) */
.cyber-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 1450px !important;
  margin: 0 auto !important;
  padding: 12px !important;
  position: relative !important;
  z-index: 10 !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 280px !important;
}
a.tile-node, .tile-node {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
  width: clamp(160px, 42vw, 240px) !important;
  min-height: 200px !important;
  aspect-ratio: 340 / 390 !important;
  background: #0a0a10 !important;
  text-decoration: none !important;
  color: inherit !important;
  box-sizing: border-box !important;
  padding: 16px 12px !important;
}
.cyber-grid .neon-container {
  width: 100% !important;
  height: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cyber-grid .neon-svg,
.cyber-grid .border-svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.cyber-grid .node-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #c8c8d0 !important;
  font-family: Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: clamp(0.95rem, 2.8vw, 1.35rem) !important;
  text-align: center !important;
  margin-top: 8px !important;
  line-height: 1.15 !important;
  z-index: 11 !important;
  position: relative !important;
}
@media (prefers-reduced-motion: reduce) {
  .cyber-grid .draw-path,
  .cyber-grid .border-path,
  .cyber-grid .neon-path {
    stroke-dashoffset: 0;
    animation: none;
  }
}


/* ANIMACJE IKON MENU + LOGO — desktop i mobile */
.menu-path.draw-path,
.menu-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.menu-path.draw-path.lit,
.draw-path.lit.menu-path {
  animation: slowMenuDraw 1.8s ease forwards !important;
}
@keyframes slowMenuDraw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
/* Logo: start ciemne, potem power-on (jak pierwotnie) */
.puzzell-path, .drop-path {
  opacity: 0.05;
}
.system-boot .puzzell-path,
.system-boot .drop-path,
#puzzellGroup.system-boot .puzzell-path,
#dropGroup.system-boot .drop-path {
  animation: neonPowerOn 1.2s linear forwards;
}
@keyframes neonPowerOn {
  0%{opacity:.05}10%{opacity:.8}15%{opacity:.1}20%{opacity:.9}25%{opacity:.15}
  35%{opacity:.95}40%{opacity:.2}55%{opacity:1}100%{opacity:.95}
}
.puzzell-glow { opacity: 0.95 !important; filter: drop-shadow(0 0 2px #ffea00) drop-shadow(0 0 6px #ff9900); }
.drop-glow { opacity: 0.95 !important; filter: drop-shadow(0 0 2px #ff0033) drop-shadow(0 0 6px #cc0000); }




/* PCB USUNIETE NA STALE */
#pcb-wrap, #pcb-fallback, #pcb-bg, #pcb-base, #pcb-copper, #pcb-mask, #pcb-comps, #pcb-glow, #pcb-spark {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html, body {
  background: #020208 !important;
}
body.pcb-on {
  background: #020208 !important;
}






/* KAFELKI HOME — zawsze narysowane + animacja startowa */
.cyber-grid path.draw-path,
.cyber-grid path.border-path,
.cyber-grid path.neon-path,
.cyber-grid path.main-line,
.cyber-grid path.sub-line,
.tile-node path {
  stroke-dasharray: 100 !important;
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: puzzellTileDraw 1.6s ease forwards !important;
}
@keyframes puzzellTileDraw {
  0% { stroke-dashoffset: 100; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
.cyber-grid .node-title {
  opacity: 1 !important;
  visibility: visible !important;
  color: #c8c8d0 !important;
}
.tile-node {
  visibility: visible !important;
  opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  .cyber-grid path {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
}




/* CZCIONKI jak wszedzie: Tahoma; Caveat TYLKO menu */
html, body, p, span, a, li, h1, h2, h3, h4, button, input, textarea,
.page-title, .modal-title, .modal-desc, .modal-copy, .b,
.site-footer, .site-footer *, footer, footer *,
.product-info h1, .product-desc, .section-title, .neon-label {
  font-family: Tahoma, Geneva, Verdana, sans-serif !important;
}
.page-title {
  font-family: Tahoma, Geneva, Verdana, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
.menu-title,
.menu-item .menu-title,
nav .menu-title {
  font-family: 'Caveat', cursive !important;
}


/* === MENU CANON v20260929 — identyczne na KAZDEJ stronie === */
header {
  padding: 24px 16px 8px !important;
  text-align: center !important;
  background: #000 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.logo-mainframe {
  width: clamp(352px, 67vw, 736px) !important;
  margin: 0 auto !important;
  height: auto !important;
}
.menu-container {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 10px auto 0 !important;
  padding: 8px 24px 4px !important;
  box-sizing: border-box !important;
}
.menu-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.menu-item {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 2px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}
.icon-container {
  width: 72px !important;
  height: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.menu-svg, .icon-container svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 88px !important;
  overflow: visible !important;
}
.menu-title {
  font-family: 'Caveat', cursive !important;
  font-size: 1.05rem !important;
  font-weight: bold !important;
  letter-spacing: 0.4px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  text-transform: uppercase !important;
}

@media (max-width: 720px) {
  .menu-grid {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 14px !important;
  }
  .menu-item {
    flex: 0 0 auto !important;
    width: 88px !important;
  }
  .icon-container {
    width: 64px !important;
    height: 52px !important;
    min-height: 52px !important;
  }
  .menu-title { font-size: 0.98rem !important; }
}
/* === /MENU CANON === */


/* Linia pod menu — jak na home / o mnie */
.section-divider,
hr.section-divider {
  width: min(92%, 900px) !important;
  max-width: min(92%, 900px) !important;
  height: 2px !important;
  border: none !important;
  margin: 18px auto 0 !important;
  background: linear-gradient(90deg, transparent 0%, #ffffff 20%, #ffffff 80%, transparent 100%) !important;
  box-shadow: 0 0 6px #ffffff, 0 0 16px #7df9ff, 0 0 32px rgba(125, 249, 255, 0.45) !important;
  animation: dividerPulse 3.5s ease-in-out infinite !important;
}
@keyframes dividerPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}


/* Tytul strony — identyczny jak home / o mnie / pomysly */
.page-title {
  width: 100% !important;
  max-width: 1450px !important;
  margin: 14px auto 0 !important;
  text-align: left !important;
  font-family: Tahoma, Geneva, Verdana, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
  color: #55555e !important;
  padding: 0 clamp(14px, 2vw, 26px) !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
}
@media (max-width: 640px) {
  .page-title {
    font-size: 1.45rem !important;
    text-align: center !important;
  }
}


/* === MENU IKONY: ta sama wysokosc, BEZ rysowania (od razu widoczne) === */
.icon-container {
  width: 72px !important;
  height: 56px !important;
  min-width: 72px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.menu-svg,
.icon-container svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 88px !important;
  max-height: 56px !important;
  overflow: visible !important;
}
.menu-path,
.menu-path.draw-path,
.menu-path.main-line,
.menu-path.sub-line,
nav .menu-path,
.menu-grid .menu-path {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.menu-path.lit,
.menu-path.draw-path.lit {
  stroke-dashoffset: 0 !important;
  animation: none !important;
}
@media (max-width: 720px) {
  .icon-container {
    width: 64px !important;
    height: 52px !important;
    min-width: 64px !important;
    min-height: 52px !important;
  }
  .menu-svg, .icon-container svg {
    max-height: 52px !important;
  }
}
/* === /MENU IKONY === */



/* DOTS — małe kropki, NIE elipsy pod karuzelą */
.dots, #dots, .slider-wrap .dots {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 10px 0 4px !important;
  padding: 0 !important;
}
.dots button, #dots button, .slider-wrap .dots button {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  min-height: 9px !important;
  max-width: 9px !important;
  max-height: 9px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #333 !important;
  flex: 0 0 9px !important;
  display: inline-block !important;
  cursor: pointer !important;
}
.dots button.on, #dots button.on {
  background: #00f0ff !important;
  box-shadow: 0 0 8px #00f0ff !important;
}
.slider-wrap { height: auto !important; min-height: 0 !important; }

.pz-coll-intro{max-width:900px;margin:18px auto 0;padding:0 16px;color:#9a9aa6;font-size:.95rem;line-height:1.5;text-align:center}
.pz-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;max-width:1200px;margin:28px auto 40px;padding:0 16px}
.pz-product{background:#0b0b14;border:1px solid #1d1d2b;border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:8px}
.pz-product img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#b7a9a9;border-radius:4px}
.pz-product h2{font-size:.95rem;line-height:1.3;color:#e6e6ee;font-weight:700;margin:0}
.pz-product p{font-size:.8rem;line-height:1.45;color:#8a8a96;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pz-product .pz-buy{margin-top:auto;align-self:flex-start;color:#00f0ff;border:1px solid #00f0ff;padding:6px 10px;border-radius:4px;font-size:.8rem;text-decoration:none}
.pz-product .pz-buy:hover{background:#00f0ff;color:#020208}
.pz-dlink{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}
.pz-dlink:hover h2{color:#00f0ff}
.pz-coll-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:1200px;margin:24px auto 0;padding:0 16px}
.pz-coll-cat{background:#0b0b14;border:1px solid #1d1d2b;border-radius:6px;padding:14px 16px}
.pz-coll-cat h2{font-size:1rem;line-height:1.3;color:#e6e6ee;margin:0 0 8px}
.pz-coll-cat p{font-size:.85rem;line-height:1.5;color:#9a9aa6;margin:0 0 8px}
.pz-coll-cat a{color:#00f0ff}