/* Button becomes a straight line track */
.splide.kspp-progress-pagination .splide__pagination__page{
  width: 70px;                 /* line length (desktop) */
  height: 3px;                 /* thinner helps it read as a line */
  border-radius: 0 !important; /* straight ends */
  border: 0 !important;

  background: rgba(255,255,255,0.35) !important;  /* track */
  opacity: 1 !important;

  position: relative;
  overflow: hidden;
  cursor: pointer;

  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;

  /* Some themes add min sizes to buttons */
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Fill overlay (straight line) */
.splide.kspp-progress-pagination .splide__pagination__page::after{
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--kspp-fill, 0) * 1%);
  background: rgba(255,255,255,0.95);
  border-radius: 0 !important;
}

/* Optional: clearer focus state without rounding */
.splide.kspp-progress-pagination .splide__pagination__page:focus{
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 3px;
}

/* Active track = white */
.splide.kspp-progress-pagination .splide__pagination__page.is-active{
  background: #fff !important;
}

/* ============================= */
/* Mobile adjustments            */
/* ============================= */

@media (max-width: 768px) {
  .splide.kspp-progress-pagination .splide__pagination__page {
    width: 40px; /* shorter line for tablets + mobile */
  }
}

@media (max-width: 480px) {
  .splide.kspp-progress-pagination .splide__pagination__page {
    width: 30px; /* even shorter on small phones */
  }
}