.adtl-hscroll-wrap {
  position: relative;
  display: inline-block; /* rešpektuje pôvodnú šírku */
}

/* samotný rail */
.c-product-interconnection-detail-params__products.is-type--photos {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.c-product-interconnection-detail-params__products.is-type--photos::-webkit-scrollbar { display: none; }

/* šípky */
.adtl-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .2s, background .2s, opacity .2s;
}
.adtl-arrow:hover { background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.25); }
.adtl-arrow svg { width:18px; height:18px; }
.adtl-arrow--left  { left: 6px; }
.adtl-arrow--right { right: 6px; }

/* svetlé gradienty na okrajoch – opticky naznačia scroll */
.adtl-hscroll-wrap::before,
.adtl-hscroll-wrap::after{
  content:"";
  position:absolute;
  top:0; bottom:0; width:36px; pointer-events:none; z-index:4;
}
.adtl-hscroll-wrap::before{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.adtl-hscroll-wrap::after{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* keď nie je kam scrollovať, skry šípku/gradient na danej strane */
.adtl-no-left  .adtl-arrow--left,
.adtl-no-left::before{ opacity:0; }
.adtl-no-right .adtl-arrow--right,
.adtl-no-right::after{ opacity:0; }