/* Shared sizing */
.hs-swiper .swiper-button-prev,
.hs-swiper .swiper-button-next {
  width: var(--hs-arrow-size, 24px);
  height: var(--hs-arrow-size, 24px);
  border: none;
  border-radius: unset;
  background: none;
  padding: 0;
}
.hs-no-arrows .swiper-button-prev,
.hs-no-arrows .swiper-button-next {
  display: none !important;
}
.hs-swiper .swiper-button-next {
    right: 130px;
    left: auto;
}
.hs-swiper .swiper-button-prev {
    right: auto;
    left: 130px;
}

/* Default: mask + colorized (works with built-in shapes) */
.hs-swiper .swiper-button-prev::after,
.hs-swiper .swiper-button-next::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--hs-arrow-color, #111);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  /* try a custom URL first if present */
  -webkit-mask-image: var(--hs-arrow-url);
          mask-image: var(--hs-arrow-url);
}

/* When using the SVG's own colors: stop masking and render the image directly */
.hs-use-svg-color .swiper-button-prev::after,
.hs-use-svg-color .swiper-button-next::after {
  background-color: transparent !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  background-image: var(--hs-arrow-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.hs-swiper .swiper-button-prev::after {
    transform: rotate(180deg);
}

/* Built-in chevron fallbacks (only used if --hs-arrow-url is empty AND not using svg color) */
.hs-arrow-chevron .swiper-button-next::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E");
}
.hs-arrow-chevron .swiper-button-prev::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M15.41 7.41 10.83 12l4.58 4.59L10 18l-6-6 6-6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M15.41 7.41 10.83 12l4.58 4.59L10 18l-6-6 6-6z'/%3E%3C/svg%3E");
}

/* Caret variant fallback */
.hs-arrow-caret .swiper-button-next::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9 6l8 6-8 6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9 6l8 6-8 6z'/%3E%3C/svg%3E");
}
.hs-arrow-caret .swiper-button-prev::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M15 6l-8 6 8 6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M15 6l-8 6 8 6z'/%3E%3C/svg%3E");
}

/* Pagination spacing (unchanged) */
.wp-block-hs-swiper-slider .swiper-pagination { margin-top: 8px; }