/* =============================================
   Hero Slider — Shared Wrapper Styles
   ============================================= */

.hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

.hs-viewport {
  position: relative;
  width: 100%;
  cursor: grab;
}

.hero-slider.hs-dragging .hs-viewport {
  cursor: grabbing;
}

.hs-slide {
  display: none;
  width: 100%;
}

.hs-slide.hs-active {
  display: block;
}

/* ── Navigation Arrows ── */
.hero-slider button.hs-arrow,
.hero-slider button.hs-arrow:link,
.hero-slider button.hs-arrow:visited,
.hero-slider button.hs-arrow:hover,
.hero-slider button.hs-arrow:focus,
.hero-slider button.hs-arrow:focus-visible,
.hero-slider button.hs-arrow:active {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88) !important;
  background-color: rgba(255, 255, 255, 0.88) !important;
  background-image: none !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14) !important;
  opacity: 1 !important;
  color: #1a2332 !important;
  fill: #1a2332 !important;
  filter: none !important;
  text-decoration: none !important;
  outline: none !important;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.hero-slider button.hs-arrow::before,
.hero-slider button.hs-arrow::after,
.hero-slider button.hs-arrow:hover::before,
.hero-slider button.hs-arrow:hover::after,
.hero-slider button.hs-arrow:focus::before,
.hero-slider button.hs-arrow:focus::after,
.hero-slider button.hs-arrow:active::before,
.hero-slider button.hs-arrow:active::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.hero-slider button.hs-arrow {
  font-weight: 700;
  transition: font-weight 0.15s ease, text-shadow 0.15s ease, border-width 0.15s ease, transform 0.15s ease;
}

.hero-slider .hs-prev { left: 14px; }
.hero-slider .hs-next { right: 14px; }

.hero-slider button.hs-arrow:hover,
.hero-slider button.hs-arrow:focus,
.hero-slider button.hs-arrow:focus-visible,
.hero-slider button.hs-arrow:active {
  font-weight: 800;
  text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor;
  border: 2px solid rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-50%) scale(1.08);
}

/* ── Dots ── */
.hs-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 200;
}

.hs-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.50);
  border: 1.5px solid rgba(255, 255, 255, 0.70);
  cursor: pointer;
  padding: 0;
  transition: background 0.22s, width 0.25s, border-radius 0.25s;
}

.hs-dot.hs-dot-active {
  background: #fff;
  width: 26px;
  border-radius: 5px;
}

@media (max-width: 768px) {
  .hero-slider .hs-arrow {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .hs-dot   { width: 7px; height: 7px; }
  .hs-dot.hs-dot-active { width: 20px; }
}

.hero-slider {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

.hs-viewport,
.hs-slide {
  width: 100vw !important;
  max-width: 100vw !important;
}