/* Scoped Splide pagination overrides for home carousel – preserving your custom dot styles */
.carousel-mask .splide__pagination__page {
  grid-column-gap: 16px !important;
  grid-row-gap: 16px !important;
  background-color: #ccc !important;
  border-radius: 99px !important;
  width: 8px !important;
  height: 8px !important;
  display: flex !important;
  position: relative !important;
}

.carousel-mask .splide__pagination__page:hover {
  background-color: #39685f !important;
  border-radius: 999px !important;
  width: 12px !important;
  min-height: 12px !important;
}

.carousel-mask .splide__pagination__page:focus {
  background-color: #39685f !important;
  width: 12px !important;
  min-height: 12px !important;
}

.carousel-mask .splide__pagination__page.splide__pagination__page--level1 {
  align-items: center !important;
  width: 8px !important;
  height: 8px !important;
}

.carousel-mask .splide__pagination__page.splide__pagination__page--level1:hover {
  width: 8px !important;
}

.carousel-mask .splide__pagination__page.level0 {
  background-color: #586160 !important;
}

.carousel-mask .splide__pagination__page.level0:hover {
  width: 12px !important;
}

.carousel-mask .splide__pagination__page.splide__pagination__page--level2 {
  width: 6px !important;
  height: 6px !important;
}

.carousel-mask .splide__pagination__page.splide__pagination__page--level2:hover {
  width: 6px !important;
}

.carousel-mask .splide__pagination__page.is-active {
  background-color: #39685f !important;
  align-items: center !important;
}

.carousel-mask .splide__pagination__page.is-active:hover,
.carousel-mask .splide__pagination__page.is-active:focus {
  align-items: center !important;
  scale: .6 !important;
}

.carousel-mask .splide__pagination {
  position: relative !important;
  bottom: 0 !important;
  top: 0 !important;
  margin: auto auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.carousel-mask .dots {
  grid-column-gap: 16px !important;
  grid-row-gap: 16px !important;
  justify-content: center !important;
  align-items: center !important;
  display: flex !important;
}

.carousel-mask .dots.splide__pagination {
  grid-column-gap: 8px !important;
  grid-row-gap: 8px !important;
  position: relative !important;
}