.acc-carousel {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 10px;
  overflow: hidden;
}

.acc-cards::-webkit-scrollbar { display: none; }

.acc-pager {
  display: flex;
  justify-content: space-between;
  margin: 54px 0 10px;
  position: relative;
}

.acc-pager > * {
  display: block;
  flex-grow: 1;
}

.acc-pager input {
    appearance: none;
    background: var(--light-gray-7);
    cursor: pointer;
    display: block;
    height: 2px;
    width: 100%;
}

.acc-pager input:is(:checked, :hover) { background: var(--blue); }

.acc-carousel :is(input, button):focus {
  outline: 2px dotted var(--magenta) !important;
  outline-offset: 4px;  
}

.acc-pager:after,
.acc-pager span:after { 
    display: none;
    font: 400 17px / 36px var(--font);
    height: 36px;
    position: absolute;
    width: 25px;
  }

.acc-pager:after { 
    content: attr(data-index);
    display: flex;
    inset: 20px auto auto calc( 50% + 3px );
}

.acc-pager span:has(input:checked):after {
  content: attr(data-index) " / ";
  display: flex;
  inset: 20px auto auto calc(50% - 25px);
  justify-content: flex-end;
}

/* ARROWS */
.acc-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 17px;
}

.acc-nav > * {
  background: var(--chevron) center center / 18px 11px no-repeat;
  filter: brightness(0) invert(0);
  height: 36px;
  transform: rotate(-90deg);
  width: 36px;
}

.acc-nav .prev {
  margin-right: 40px;
  transform: rotate(90deg);
}

.acc-nav .next { margin-left: 40px; }

.acc-carousel:has(.acc-pager > :last-child :checked) .next,
.acc-carousel:has(.acc-pager > :first-child :checked) .prev { 
  opacity: 0.4;
  outline: none !important;
  pointer-events: none;
}