/* Keep the homepage slider controls anchored to the physical viewport edges. */
.home-hero {
  width: 100%;
  max-width: 100%;
}

.home-hero .hero-arrow {
  position: absolute !important;
  top: 50% !important;
  display: grid;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  line-height: 1 !important;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 0 !important;
}

.home-hero .hero-arrow.prev,
[dir="rtl"] .home-hero .hero-arrow.prev {
  right: auto !important;
  left: clamp(16px, 2.5vw, 32px) !important;
}

.home-hero .hero-arrow.next,
[dir="rtl"] .home-hero .hero-arrow.next {
  right: clamp(16px, 2.5vw, 32px) !important;
  left: auto !important;
}

/* Draw one symmetric chevron in every language. Absolute 50% positioning
   centers the visible SVG mask itself, independently of text direction. */
.home-hero .hero-arrow::before {
  content: "";
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  display: block !important;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.75 3.5L13.25 10L6.75 16.5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.75 3.5L13.25 10L6.75 16.5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
}

.home-hero .hero-arrow.prev::before {
  transform: translate(-50%, -50%) scaleX(-1);
}

.home-hero .hero-arrow.next::before {
  transform: translate(-50%, -50%);
}

@media (max-width: 620px) {
  .home-hero .hero-arrow {
    width: 48px;
    height: 48px;
    font-size: 36px;
  }

  .home-hero .hero-arrow.prev,
  [dir="rtl"] .home-hero .hero-arrow.prev {
    right: auto !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
  }

  .home-hero .hero-arrow.next,
  [dir="rtl"] .home-hero .hero-arrow.next {
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
  }
}