.e-component-pointer{
  --top:0;
  --left:0;
  --line-size:0;
  position:absolute;
  top:var(--top);
  left:var(--left);
  display:flex;
  align-items:center;
  opacity:.5;
}
.e-component-pointer:has(.active){
  opacity:1;
}
.e-component-pointer:has(.active):before{
  border-color:#91baec;
}
.e-component-pointer:before{
  flex:none;
  width:24px;
  height:24px;
  border:7px solid hsla(165,2%,48%,.4);
  border-radius:50%;
  background:#212428;
  background-clip:content-box;
  content:"";
}
.e-component-pointer hr{
  flex-grow:1;
  width:var(--line-size);
  margin:0 10px 0 0;
  opacity:1;
  border-top-color:#91baec;
}
.e-component-pointer a{
  color:inherit;
  line-height:1;
}
.e-component-pointer--vertical{
  flex-direction:column;
}
.e-component-pointer--vertical hr{
  margin-bottom:5px;
}
.e-component-pointer--reverse{
  flex-direction:row-reverse;
}
.e-component-pointer--reverse hr{
  margin-right:0;
  margin-left:10px;
}
.e-component-pointer--vertical-reverse{
  flex-direction:column-reverse;
}
.e-component-pointer--vertical-reverse hr{
  margin-top:5px;
}
.e-component-pointer--vertical hr,.e-component-pointer--vertical-reverse hr{
  width:auto;
  height:var(--line-size);
  margin-right:0;
  border-top:0;
  border-left:1px solid #91baec;
}

.c-product-components{
  position:relative;
}
.c-product-components img{
  display:block;
  max-width:100%;
  height:auto;
}
.c-product-components--faucet-filter .e-component-pointer:has([href="#carbon-fiber"]){
  --top:20%;
  --left:13%;
  --line-size:310px;
}
.c-product-components--faucet-filter .e-component-pointer:has([href="#pp-filter"]){
  --top:3%;
  --left:-1%;
  --line-size:30px;
}
.c-product-components--faucet-filter .e-component-pointer:has([href="#nok-filter"]){
  --top:45%;
  --left:48%;
  --line-size:110px;
}
.c-product-components--faucet-filter .e-component-pointer:has([href="#asp-descaler"]){
  --top:75%;
  --left:2.5%;
  --line-size:30px;
}
.c-product-components--shower-filter .e-component-pointer:has([href="#carbon-fiber"]){
  --top:25%;
  --left:50%;
  --line-size:100px;
}
.c-product-components--shower-filter .e-component-pointer:has([href="#kdf-filter"]){
  --top:50%;
  --left:3%;
  --line-size:60px;
}
.c-product-components--shower-filter .e-component-pointer:has([href="#fof-filter"]){
  --top:65%;
  --left:50%;
  --line-size:100px;
}

.why-it-works .container{
  display:flex;
  flex-direction:column;
  gap:40px;
  justify-content:center;
  text-align:center;
}
.why-it-works h2{
  margin-bottom:32px;
}
.why-it-works__main{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:60px;
  text-align:left;
}
.why-it-works__according .c-accordion__item{
  font-size:18px;
}
.why-it-works__according .c-accordion__item .e-icon{
  font-size:24px;
}
@media screen and (max-width:1120px){
  .c-product-components--faucet-filter .e-component-pointer:has([href="#carbon-fiber"]){
    --line-size:290px;
  }
  .c-product-components--faucet-filter .e-component-pointer:has([href="#nok-filter"]){
    --line-size:100px;
  }
}
@media screen and (max-width:991px){
  .c-product-components--faucet-filter .e-component-pointer:has([href="#carbon-fiber"]){
    --line-size:55vw;
  }
  .c-product-components--faucet-filter .e-component-pointer:has([href="#nok-filter"]){
    --line-size:22vw;
  }
  .c-product-components--faucet-filter .e-component-pointer:has([href="#asp-descaler"]){
    --left:1%;
    --line-size:20px;
  }
  .c-product-components--shower-filter .e-component-pointer:has([href="#carbon-fiber"]){
    --line-size:20vw;
  }
  .c-product-components--shower-filter .e-component-pointer:has([href="#kdf-filter"]){
    --line-size:30vw;
  }
  .c-product-components--shower-filter .e-component-pointer:has([href="#fof-filter"]){
    --line-size:20vw;
  }
  .why-it-works__main{
    grid-template-columns:auto;
    gap:0;
  }
}
@media screen and (max-width:767px){
  .e-component-pointer a{
    font-size:14px;
  }
  .c-product-components--shower-filter .e-component-pointer:has([href="#kdf-filter"]){
    --line-size:15vw;
  }
  .why-it-works .container{
    gap:24px;
  }
  .why-it-works h2{
    margin-bottom:16px;
  }
  .why-it-works__components{
    order:-1;
  }
}
