/* === KCM carousel (5 visible, slide by 1) === */
.kcm-slider{
  position: relative;
  margin: 0 30px;
}

/* Viewport with side gutters for arrows; masks hide partial cards */
.kcm-viewport{
  --edge: 100px;                 /* side gutter width for arrows */
  position: relative;
  overflow: hidden;
  padding: 1rem var(--edge);
}
.kcm-viewport::before,
.kcm-viewport::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: var(--edge);
  background: var(--bs-body-bg, #fff);   /* match your page bg */
  pointer-events: none;
  z-index: 2;                            /* above track, below arrows */
}
.kcm-viewport::before{ left: 0; }
.kcm-viewport::after { right: 0; }

/* One horizontal row using grid columns */
.kcm-track{
  --gap: 20px;
  --perView: 5;                           /* desktop default */
  display: grid;
  grid-auto-flow: column;
  gap: var(--gap);
  grid-auto-columns: calc((100% - (var(--perView) - 1)*var(--gap)) / var(--perView));
  will-change: transform;
  transform: translateX(0);               /* JS updates this */
  transition: transform 400ms ease;
  position: relative;
  z-index: 0;
}

/* Breakpoints: 5 -> 4 -> 3 -> 2 -> 1 */
@media (max-width:1199.98px){ .kcm-track{ --perView:4; } }
@media (max-width:991.98px) { .kcm-track{ --perView:3; } .kcm-viewport{ --edge: 80px; } }
@media (max-width:767.98px) { .kcm-track{ --perView:2; } .kcm-viewport{ --edge: 70px; } }
@media (max-width:575.98px){ .kcm-track{ --perView:1; } .kcm-viewport{ --edge: 60px; } }

/* Card visuals (keep yours if you already have them) */
.kcm-item{ overflow: hidden; }
.card{ border: none; overflow: hidden; background:#fff; }
.card-img{ width:100%; height:auto; display:block; }

/* Arrows (reuse your existing markup/icons) */
.hub-btn{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 0; background: transparent; padding: 0;
  cursor: pointer;
  z-index: 3;                               /* above masks */
}
.hub-btn-prev{ left: 30px; }
.hub-btn-next{ right: 30px; }

.hub-btn[aria-disabled="true"]{ opacity:.35; pointer-events:none; }


.carousel-control-next-icon,
.carousel-control-prev-icon{
  background-color: var(--green);
  border-radius: 4px;
}