.hfs-slider {
  --hfs-desktop: 4.1;
  --hfs-tablet: 2.6;
  --hfs-mobile: 1.2;
  --hfs-per-view: var(--hfs-desktop);
  --hfs-gap: 12px;
  --hfs-radius: 4px;
  --hfs-focus-scale: 1.12;
  --hfs-side-scale: .84;
  --hfs-ratio: 1 / 1;
  --hfs-stage-height: 320px;
  --hfs-slide-width: 240px;
  position: relative;
  width: 100%;
  padding: 12px 0 8px;
  overflow: hidden;
  isolation: isolate;
}

.hfs-viewport {
  position: relative;
  width: 100%;
  min-height: var(--hfs-stage-height);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  outline: none;
}

.hfs-viewport:active { cursor: grabbing; }

.hfs-track {
  position: relative;
  width: 100%;
  height: var(--hfs-stage-height);
}

.hfs-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--hfs-slide-width);
  max-width: calc(100% - 48px);
  min-width: 0;
  transform: translate3d(-50%, -50%, 0) scale(.8);
  transform-origin: center center;
  transition: transform .46s cubic-bezier(.22,.61,.36,1), opacity .28s ease, filter .28s ease;
  opacity: 0;
  filter: saturate(.96);
}

.hfs-slide.is-visible { opacity: 1; }
.hfs-slide.is-side { filter: saturate(.95) brightness(.98); }
.hfs-slide.is-far { filter: saturate(.9) brightness(.97); }
.hfs-slide.is-active { filter: none; }

.hfs-card {
  display: block;
  width: 100%;
  aspect-ratio: var(--hfs-ratio);
  overflow: hidden;
  border-radius: var(--hfs-radius);
  background: #f4f4f4;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.05);
  transform: translateZ(0);
}

.hfs-slide.is-active .hfs-card {
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}

.hfs-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.hfs-slider[style*="--hfs-ratio:auto"] .hfs-card { aspect-ratio: auto; }
.hfs-slider[style*="--hfs-ratio:auto"] .hfs-image { height: auto; }

.hfs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 110;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(247,247,247,.96);
  color: #9aa1ad;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}

.hfs-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.04); }
.hfs-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hfs-arrow span { font-size: 19px; line-height: 1; margin-top: -1px; }
.hfs-prev { left: 8px; }
.hfs-next { right: 8px; }
.hfs-arrow[disabled] { opacity: .28; cursor: default; }

.hfs-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  padding-top: 8px;
}

.hfs-dot {
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  margin: 0;
  background: #d6d6d6;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.hfs-dot.is-active {
  background: #1e73be;
  transform: scale(1.15);
}

.hfs-dot:focus-visible { outline: 2px solid #1e73be; outline-offset: 3px; }

.hfs-empty {
  padding: 18px;
  border: 1px dashed #aaa;
  border-radius: 6px;
  text-align: center;
  color: #666;
}

@media (max-width: 1099px) {
  .hfs-slider { --hfs-per-view: var(--hfs-tablet); }
}

@media (max-width: 639px) {
  .hfs-slider {
    --hfs-per-view: var(--hfs-mobile);
    padding-top: 8px;
  }

  .hfs-slide {
    max-width: calc(100% - 28px);
  }

  .hfs-arrow {
    width: 24px;
    height: 24px;
  }

  .hfs-arrow span { font-size: 17px; }
  .hfs-prev { left: 4px; }
  .hfs-next { right: 4px; }
  .hfs-dot { width: 7px; height: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .hfs-slide,
  .hfs-arrow,
  .hfs-dot { transition-duration: .01ms !important; }
}