*{box-sizing:border-box}body{overflow-x:hidden}

.productsKit{
  position:relative;
  overflow:hidden;
  padding:0;
  background:linear-gradient(45deg,rgba(103,103,108,.4) 0%,rgba(255,255,255,0) 50%,rgba(103,103,108,.4) 100%);
}

.productsKitInner{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.72fr);
  min-height:755px;
}

.kitVisual{
  position:relative;
  height:715px;
  min-width:0;
  overflow:hidden;
}

#productsBars{
  list-style:none;
  padding:0;
  margin:0;
  width:780px;
  height:715px;
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%) scale(1);
  transform-origin:center bottom;
  z-index:1;
}

#productsBars .bar{
  position:absolute;
  left:50%;
  top:390px;
  width:130px;
  height:650px;
  transition:all .5s cubic-bezier(.25,.25,.19,1.455);
  will-change:transform;
  z-index:1;
}

#productsBars .bar:nth-child(1){z-index:9;margin:-0px 0 0 -65px}
#productsBars .bar:nth-child(2){z-index:8;margin:-76.47px 0 0 65px}
#productsBars .bar:nth-child(3){z-index:7;margin:-149.5px 0 0 195px}
#productsBars .bar:nth-child(4){z-index:6;margin:-76.47px 0 0 -195px}
#productsBars .bar:nth-child(5){z-index:5;margin:-149.5px 0 0 -65px}
#productsBars .bar:nth-child(6){z-index:4;margin:-224.25px 0 0 65px}
#productsBars .bar:nth-child(7){z-index:3;margin:-149.5px 0 0 -325px}
#productsBars .bar:nth-child(8){z-index:2;margin:-224.25px 0 0 -195px}
#productsBars .bar:nth-child(9){z-index:1;margin:-299px 0 0 -65px}

#productsBars .barInner{
  height:100%;
  width:100%;
  display:block;
  transform:rotateX(325deg) rotateY(315deg);
  transform-style:preserve-3d;
}

#productsBars .cube{
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  will-change:background;
  transition:all .3s ease-out;
}

#productsBars .cube.top{
  height:130px;
  transform:translateY(-65px) rotateX(90deg);
  background:rgba(61,86,107,.95);
}

#productsBars .cube.left{
  transform:translateZ(65px);
  background:rgba(31,60,84,.95);
}

#productsBars .cube.right{
  transform:translateX(65px) rotateY(90deg);
  background:rgba(6,38,65,.95);
}

#productsBars .bar h3{
  position:absolute;
  left:0;
  right:0;
  top:48px;
  margin:0;
  z-index:100;
  text-align:center;
  font-size:28.89px;
  line-height:1.2;
  font-weight:700;
  transition:all .2s cubic-bezier(.25,.25,.19,1.455) .2s;
}

#productsBars .bar h3 a{
  display:block;
  color:#fff;
  text-decoration:none;
}

#productsBars .bar.current:not(.oneHovered),
#productsBars .bar.hover,
#productsBars .bar:hover{
  transform:translate(0,-52px);
}

#productsBars .bar.current:not(.oneHovered) .cube.top,
#productsBars .bar.hover .cube.top,
#productsBars .bar:hover .cube.top{background:rgba(96,183,243,.95)}

#productsBars .bar.current:not(.oneHovered) .cube.left,
#productsBars .bar.hover .cube.left,
#productsBars .bar:hover .cube.left{background:rgba(0,145,211,.95)}

#productsBars .bar.current:not(.oneHovered) .cube.right,
#productsBars .bar.hover .cube.right,
#productsBars .bar:hover .cube.right{background:rgba(0,110,160,.95)}

/* Dolny box z legendą – bez gradientu. */
#productsList{
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  padding:20px max(38px, calc((100% - 1500px) / 2 + 38px)) 18px;
  min-height:108px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-flow:row;
  grid-auto-rows:auto;
  column-gap:34px;
  row-gap:8px;
  list-style:none;
  color:#fff;
  background:rgba(0,39,64,.99);
}

#productsList li{
  margin:0;
  min-width:0;
  font-size:14px;
  line-height:1.35;
}

#productsList h4{
  margin:0;
  padding:0;
  font-size:inherit;
  line-height:inherit;
  font-weight:700;
}

#productsList a{
  color:#fff;
  text-decoration:none;
}

#productsList a:hover,
#productsList li.current a,
#productsList li.hover a{
  color:#0091d3;
}

#productsList span{
  display:inline-block;
  min-width:13px;
}

/* Prawa część: tekst powitalny + zdjęcia grup po hoverze. */
.kitIntro{
  position:relative;
  height:715px;
  min-width:0;
  display:flex;
  align-items:center;
  padding:10px 35px 40px 20px;
}

#productsImgs{
  position:absolute;
  overflow:hidden;
  top:60px;
  right:20px;
  bottom:60px;
  left:20px;
  padding:0;
  margin:0;
  pointer-events:none;
  list-style:none;
}

#productsImgs li{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  visibility:hidden;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#productsImgs li.vis{visibility:visible}

#productsImgs li h3{
  flex:0 0 auto;
  opacity:0;
  margin:0 0 20px;
  text-align:center;
  transition:all .15s linear;
  transform:translateY(15px);
  font-size:26px;
}

#productsImgs li h3 .pgGroup{
  display:block;
  font-size:14px;
  letter-spacing:2px;
  color:#0091d3;
  text-transform:uppercase;
  margin-bottom:12px;
}

#productsImgs li .imgWrap{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

#productsImgs li img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  margin:0;
  opacity:0;
  transition:all .15s linear;
  transform:translateY(15px);
  object-fit:contain;
}

#productsImgs li.vis h3,
#productsImgs li.vis img{
  opacity:1;
  transform:translateY(0);
}

.textBox{
  position:relative;
  z-index:5;
  width:100%;
  max-width:520px;
  margin-left:auto;
  transition:opacity .3s ease-out;
  background:transparent;
  padding:0;
}

.textBox.low{opacity:0}

.textBox h2{
  font-size:42px;
  line-height:1.15;
  margin:0 0 24px;
  color:#002740;
}

.textBox p{
  font-size:16px;
  line-height:1.65;
  margin:0 0 28px;
  color:#293c4b;
}

.productsKit .btn{
  display:inline-block;
  background:#0091d3;
  border-radius:30px;
  padding:15px 30px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}

.photoTitle{display:none}

/* Średnie ekrany: oba obszary nadal obok siebie.
   Słupki są pomniejszane, a tekst pozostaje obok z marginesem. */
@media (max-width:1200px) and (min-width:901px){
  .productsKitInner{
    grid-template-columns:minmax(0,1.05fr) minmax(330px,.75fr);
    min-height:620px;
  }

  .kitVisual,
  .kitIntro{height:620px}

  #productsBars{
    transform:translateX(-50%) scale(.76);
  }

  #productsList{
    padding:16px 22px 15px;
    min-height:92px;
    column-gap:18px;
  }

  #productsList li{
    font-size:12px;
  }

  .kitIntro{
    padding:40px 24px 40px 18px;
  }

  #productsImgs{
    top:40px;
    bottom:40px;
    left:18px;
    right:18px;
  }

  .textBox h2{font-size:34px}
  .textBox p{font-size:14px;line-height:1.55}
}

/* Tablet / mały laptop: tekst nad wizualizacją.
   Dzięki temu nie może wejść w słupki. */
@media (max-width:900px){
  .productsKitInner{
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  .kitIntro{
    order:1;
    height:auto;
    min-height:0;
    display:block;
    padding:24px 22px 18px;
  }

  #productsImgs{
    display:none;
  }

  .textBox{
    max-width:none;
    margin:0;
    padding:0 0 4px;
    background: transparent;
  }

  .textBox h2{
    font-size:32px;
    line-height:1.18;
    margin-bottom:18px;
  }

  .textBox p{
    font-size:15px;
    line-height:1.55;
    margin-bottom:20px;
  }

  .productsKit .btn{
    padding:13px 26px;
  }

  .kitVisual{
    order:2;
    height:540px;
    width:100%;
    overflow:hidden;
  }

  #productsBars{
    width:780px;
    height:715px;
    bottom:45px;
    transform:translateX(-50%) scale(.72);
  }

  #productsList{
    padding:15px 20px 14px;
    min-height:102px;
    column-gap:18px;
    row-gap:7px;
  }

  #productsList li{
    font-size:12px;
    line-height:1.3;
  }
}

/* Telefon: tekst nadal jest głównym elementem u góry,
   ale cały zestaw 1–9 pozostaje widoczny i jest centrowany. */
@media (max-width:600px){
  .kitIntro{
    padding:20px 18px 12px;
  }

  .textBox h2{
    font-size:28px;
    line-height:1.15;
    margin-bottom:18px;
  }

  .textBox p{
    font-size:14px;
    line-height:1.55;
    margin-bottom:18px;
  }

  .productsKit .btn{
    padding:12px 24px;
    font-size:13px;
  }

  .kitVisual{
    height:540px;
  }

  #productsBars{
    bottom: 100px;
    transform:translateX(-50%) scale(.60);
  }

  #productsList{
    min-height:124px;
    padding:13px 40px 12px;
    grid-template-columns:1fr;
    row-gap:5px;
  }

  #productsList li{
    font-size:11px;
    line-height:1.25;
  }

  /* Na mobile hover nie ujawnia tekstu grupy ani zdjęć.
     Może jedynie podświetlić sam słupek. */
  #productsBars .bar:hover{
    transform:none;
  }

  #productsList li:hover a{
    color:#fff;
  }

  /* Aktywna pozycja legendy ma być widoczna również na mobile.
     :hover nie może jej nadpisywać. */
  #productsList li.current a,
  #productsList li.hover a{
    color:#0091d3;
  }
}

@media (max-width:430px){
  .kitIntro{
    padding-left:14px;
    padding-right:14px;
  }

  .textBox h2{font-size:26px}
  .textBox p{font-size:13.5px}

  .kitVisual{height:430px}

  #productsBars{
    bottom:130px;
    transform:translateX(-50%) scale(.44);
  }

  #productsList{
    min-height:132px;
    padding:11px 25px;
  }

  #productsList li{
    font-size:10.5px;
  }
}


/* =========================================================
   LISEGA – animacja wejścia słupków
   Nie zmienia geometrii ani pozycji słupków po zakończeniu.
   ========================================================= */

#productsBars .bar.lisega-intro-hidden{
  transform:translateY(715px) !important;
  transition:none !important;
}

#productsBars .bar.lisega-intro-visible{
  transform:translateY(0) !important;
  transition:transform .65s cubic-bezier(.22,.61,.36,1) !important;
}

/* Delikatny pierścień/poświata pod konstrukcją – tylko efekt wizualny. */
#productsBars.lisega-intro-ring::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:8px;
  width:250px;
  height:58px;
  transform:translateX(-50%) scale(.35);
  border:2px solid rgba(0,145,211,.28);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  z-index:0;
  animation:lisegaIntroRing 1.5s ease-out .45s forwards;
}

@keyframes lisegaIntroRing{
  0%{
    opacity:0;
    transform:translateX(-50%) scale(.35);
  }
  25%{
    opacity:.55;
  }
  100%{
    opacity:0;
    transform:translateX(-50%) scale(1.25);
  }
}

@media (prefers-reduced-motion: reduce){
  #productsBars .bar.lisega-intro-hidden,
  #productsBars .bar.lisega-intro-visible{
    transform:none !important;
    transition:none !important;
  }

  #productsBars.lisega-intro-ring::after{
    display:none;
    animation:none;
  }
}