/* Splide theming for .main-carousel.
   Matches the Flickity build it replaced, measured from production:
   44px hit area, transparent background, 26.4px white chevron, 10px edge
   offset plus 2rem side / 5rem top margin, dots 2.5rem clear (5rem at xl). */

.main-carousel .splide__arrow {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: 5rem 2rem 0;
  transform: translateY(-50%);
  /* slides carry a full-bleed overlay; without this the buttons sit under it */
  z-index: 2;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.2s ease;
}
.main-carousel .splide__arrow--prev { left: 10px; }
.main-carousel .splide__arrow--next { right: 10px; }
.main-carousel .splide__arrow:hover:not(:disabled) { background: rgba(0, 0, 0, 0.2); }
.main-carousel .splide__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.main-carousel .splide__arrow:disabled { opacity: 0.3; cursor: default; }

.main-carousel .splide__arrow svg {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
  fill: #fff;
}

.main-carousel .splide__pagination {
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0 0 2.5rem;
  padding: 0;
  gap: 16px;
}
.main-carousel .splide__pagination__page {
  width: 10px;
  height: 10px;
  margin: 0;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 50%;
  opacity: 1;
  transition: background-color 0.2s ease;
}
.main-carousel .splide__pagination__page.is-active {
  background: #fff;
  transform: none;
}
.main-carousel .splide__pagination__page:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (min-width: 1440px) {
  .main-carousel .splide__pagination { margin-bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .main-carousel .splide__arrow,
  .main-carousel .splide__pagination__page { transition: none; }
}